import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{C as r,J as i,K as a,Y as o,n as s,t as c,tt as l,w as u}from"./dist-DtfJeYQK.js";import{t as d}from"./jsx-runtime-C2wGStra.js";import{n as f,t as p}from"./Text-DO3xXyuu.js";import{r as m,t as h}from"./storybook-utils-CaC0I5St.js";var g,_,v=t((()=>{g=`label__fQlP5`,_={label:g}}));function y({variant:e}){let[t,n]=e.split(`-`),r=s(l[t][n].body.fontSize);return(0,b.jsxs)(`tr`,{children:[(0,b.jsx)(`td`,{style:{paddingRight:16,whiteSpace:`nowrap`,textAlign:`right`},children:(0,b.jsx)(p,{variant:e,children:e},e)}),(0,b.jsx)(`td`,{children:r})]})}var b,x,S,C,w,T,E,D,O,k;t((()=>{u(),c(),e(n(),1),f(),h(),v(),b=d(),x={title:`components/Text`,component:p,argTypes:{variant:{description:m},centered:{description:m}}},S=()=>(0,b.jsx)(p,{children:`Lorem ipsum`}),S.tags=[`!test`],S.parameters={chromatic:{disableSnapshot:!0}},C=()=>{let e=r(o.background.primaryInverted);return(0,b.jsx)(b.Fragment,{children:a.map(({id:t})=>(0,b.jsx)(`div`,{style:{backgroundColor:[`inverted`,`branded`,`selected`].includes(t)?e:void 0},children:(0,b.jsx)(p,{accent:t,children:t})},t))})},w=()=>(0,b.jsxs)(`table`,{style:{borderCollapse:`separate`,borderSpacing:`16px`},children:[(0,b.jsx)(`thead`,{children:(0,b.jsxs)(`tr`,{children:[(0,b.jsx)(`th`,{children:`Variant`}),(0,b.jsx)(`th`,{children:`font-size`})]})}),i.map(({id:e})=>(0,b.jsx)(y,{variant:e},e))]}),T=[`p`,`div`,`span`],E=()=>(0,b.jsx)(`div`,{children:T.map(e=>(0,b.jsxs)(`div`,{style:{marginBottom:16},children:[(0,b.jsx)(`code`,{children:`<${e}>`}),(0,b.jsx)(`div`,{style:{width:200},children:(0,b.jsx)(p,{tag:e,ellipsed:!0,children:`Long text that should be truncated with an ellipsis when it overflows`})})]},e))}),D={render:()=>(0,b.jsx)(p,{tag:`span`,variant:`default-regular`,className:_.label,children:`Custom label style`})},O={parameters:{chromatic:{disableSnapshot:!0}},decorators:[(e,{args:t})=>(0,b.jsx)(`div`,{style:{backgroundColor:t.accent===`inverted`?`black`:void 0},children:e()})],args:{children:`Lorem ipsum dolor sit amet`,variant:`default-regular`,dataset:{qaid:`text`}},argTypes:{dataset:{control:`object`},children:{control:`text`},variant:{control:`select`},accent:{control:`select`},centered:{control:`boolean`},strong:{table:{disable:!0}},ellipsed:{table:{disable:!0}}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`() => <Text>Lorem ipsum</Text>`,...S.parameters?.docs?.source}}},C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`() => {
  const grey = getTokenVar(color.background.primaryInverted);
  return <>
            {TEXT_ACCENT_OPTIONS.map(({
      id
    }) => <div key={id} style={{
      backgroundColor: ['inverted', 'branded', 'selected'].includes(id) ? grey : undefined
    }}>
                    <Text accent={id}>{id}</Text>
                </div>)}
        </>;
}`,...C.parameters?.docs?.source}}},w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`() => <table style={{
  borderCollapse: 'separate',
  borderSpacing: '16px'
}}>
        <thead>
            <tr>
                <th>Variant</th>
                <th>font-size</th>
            </tr>
        </thead>
        {TEXT_VARIANT_OPTIONS.map(({
    id: variant
  }) => <VariantRow key={variant} variant={variant} />)}
    </table>`,...w.parameters?.docs?.source}}},E.parameters={...E.parameters,docs:{...E.parameters?.docs,source:{originalSource:`() => <div>
        {TEXT_TAGS.map(tag => <div key={tag} style={{
    marginBottom: 16
  }}>
                <code>{\`<\${tag}>\`}</code>
                <div style={{
      width: 200
    }}>
                    <Text tag={tag} ellipsed>
                        Long text that should be truncated with an ellipsis when it overflows
                    </Text>
                </div>
            </div>)}
    </div>`,...E.parameters?.docs?.source}}},D.parameters={...D.parameters,docs:{...D.parameters?.docs,source:{originalSource:`{
  render: () => <Text tag="span" variant="default-regular" className={styles.label}>
            Custom label style
        </Text>
}`,...D.parameters?.docs?.source},description:{story:"Pass `className` to apply custom styles on top of `Text`.",...D.parameters?.docs?.description}}},O.parameters={...O.parameters,docs:{...O.parameters?.docs,source:{originalSource:`{
  parameters: {
    chromatic: {
      disableSnapshot: true
    }
  },
  decorators: [(story, {
    args
  }) => <div style={{
    backgroundColor: args.accent === 'inverted' ? 'black' : undefined
  }}>
                {story()}
            </div>],
  args: {
    children: 'Lorem ipsum dolor sit amet',
    variant: 'default-regular',
    dataset: {
      qaid: 'text'
    }
  },
  argTypes: {
    dataset: {
      control: 'object'
    },
    children: {
      control: 'text'
    },
    variant: {
      control: 'select'
    },
    accent: {
      control: 'select'
    },
    centered: {
      control: 'boolean'
    },
    strong: {
      table: {
        disable: true
      }
    },
    ellipsed: {
      table: {
        disable: true
      }
    }
  }
}`,...O.parameters?.docs?.source}}},k=[`Base`,`Accents`,`Variants`,`Ellipsed`,`CustomText`,`Playground`]}))();export{C as Accents,S as Base,D as CustomText,E as Ellipsed,O as Playground,w as Variants,k as __namedExportsOrder,x as default};