export default{title:"Components/Choices",argTypes:{size:{control:{type:"select"},options:["small","medium","large"]},type:{control:{type:"select"},options:["default","primary","success","info","warning","danger","text","link"]}}};const Template=()=>'<sc-choices>\n<sc-choice>\nThis is a Title\n<span slot="description">This is a description</span>\n<span slot="price">Test</span>\n<span slot="per"> / Month</span>\n</sc-choice>\n<sc-choice>\nThis is a Title\n<span slot="description">This is a description</span>\n<span slot="price">Test</span>\n<span slot="per"> / Month</span>\n</sc-choice>\n<sc-choice>\nThis is a Title\n<span slot="description">This is a description</span>\n<span slot="price">Test</span>\n<span slot="per"> / Month</span>\n</sc-choice>\n  </sc-choices>\n';export const Default=Template.bind({});Default.args={separate:!0,type:"default",size:"medium",loading:!1,caret:!1,full:!1,disabled:!1,outline:!1,pill:!1,circle:!1};const ToggleTemplate=()=>'<sc-choices>\n<sc-choice>\nCredit Card\n<span slot="toggle-content">This is only shown when toggled</span>\n</sc-choice>\n<sc-choice>\nPayPal\n<span slot="toggle-content">This is only shown when toggled</span>\n</sc-choice>\n  </sc-choices>\n';export const Toggle=ToggleTemplate.bind({});Toggle.args={separate:!0,type:"default",size:"medium",loading:!1,caret:!1,full:!1,disabled:!1,outline:!1,pill:!1,circle:!1};const ContainerTemplate=({columns:s})=>`<sc-choices style="--columns: ${s}">\n    <div>\n  <sc-choice>\n  This is a Title\n  <span slot="description">This is a description</span>\n  <span slot="price">Test</span>\n  <span slot="per"> / Month</span>\n  </sc-choice>\n  <sc-choice>\n  This is a Title\n  <span slot="description">This is a description</span>\n  <span slot="price">Test</span>\n  <span slot="per"> / Month</span>\n  </sc-choice>\n  <sc-choice>\n  This is a Title\n  <span slot="description">This is a description</span>\n  <span slot="price">Test</span>\n  <span slot="per"> / Month</span>\n  </sc-choice>\n  </div>\n    </sc-choices>`;export const Container=ContainerTemplate.bind({});Container.args={columns:3,separate:!0,type:"default",size:"medium",loading:!1,caret:!1,full:!1,disabled:!1,outline:!1,pill:!1,circle:!1};const AutoWidthTemplate=()=>'<sc-choices label="Choose an amount" auto-width>\n    <div>\n  <sc-choice show-control="false" size="small">\n  <sc-format-number type="currency" currency="usd" value="500" minimum-fraction-digits="0"></sc-format-number>\n  </sc-choice>\n  <sc-choice show-control="false" size="small">\n  <sc-format-number type="currency" currency="usd" value="1000" minimum-fraction-digits="0"></sc-format-number>\n  </sc-choice>\n  <sc-choice show-control="false" size="small">\n  <sc-format-number type="currency" currency="usd" value="2000" minimum-fraction-digits="0"></sc-format-number>\n  </sc-choice>\n  </div>\n    </sc-choices>';export const AutoWidth=AutoWidthTemplate.bind({});AutoWidth.args={type:"radio",size:"medium",loading:!1,caret:!1,full:!1,disabled:!1,outline:!1,pill:!1,circle:!1};const BodyTemplate=()=>'<sc-choices>\n  <sc-choice>test\n    <span slot="body">This is only shown when toggled</span>\n    </sc-choice>\n  <sc-choice>test</sc-choice>\n  <sc-choice>test</sc-choice>\n    </sc-choices>\n';export const Body=BodyTemplate.bind({});Body.args={separate:!0,type:"default",size:"medium",loading:!1,caret:!1,full:!1,disabled:!1,outline:!1,pill:!1,circle:!1};