@traefik-labs/faency 12.3.8 → 13.0.0

package/dist/components/AriaTable/AriaTable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AriaTable.cjs","names":[],"sources":["../../../components/AriaTable/AriaTable.tsx"],"sourcesContent":["import { ChevronRightIcon } from '@radix-ui/react-icons';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, {\n  Children,\n  cloneElement,\n  ComponentProps,\n  ElementRef,\n  forwardRef,\n  isValidElement,\n  ReactNode,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { deepMerge } from '../../utils/deepMerge';\nimport { Box } from '../Box';\nimport type { TableVariants } from '../Table';\nimport {\n  Caption as TableCaption,\n  StyledTr as TableTr,\n  Table as TableTable,\n  Tbody as TableTbody,\n  Td as TableTd,\n  Tfoot as TableTfoot,\n  Th as TableTh,\n  Thead as TableThead,\n} from '../Table';\n\nexport const Caption = styled('div', TableCaption, {\n  display: 'table-caption',\n});\n\nconst StyledTbody = styled('div', TableTbody, {\n  display: 'table-row-group',\n});\nexport const Tbody = forwardRef<\n  ElementRef<typeof StyledTbody>,\n  ComponentProps<typeof StyledTbody> & VariantProps<typeof StyledTbody>\n>((props, ref) => <StyledTbody ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTfoot = styled('div', TableTfoot, {\n  display: 'table-footer-group',\n});\nexport const Tfoot = forwardRef<\n  ElementRef<typeof StyledTfoot>,\n  ComponentProps<typeof StyledTfoot> & VariantProps<typeof StyledTfoot>\n>((props, ref) => <StyledTfoot ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTr = styled('div', TableTr, {\n  display: 'table-row',\n});\nconst StyledTrSlot = styled(Slot, StyledTr);\n\nconst AnimatedContainer = ({ isOpen, children }: { isOpen: boolean; children: ReactNode }) => {\n  const appliedStyle = useMemo(\n    () =>\n      isOpen\n        ? {\n            transition: 'all 0.2s ease-out',\n            paddingBottom: 0,\n            paddingTop: 0,\n            border: 'none',\n          }\n        : {\n            transition: 'all 0.2s ease-out',\n            padding: '0px 16px',\n            pointerEvents: 'none',\n            border: 'none',\n          },\n    [isOpen],\n  );\n\n  const containerStyle = useMemo(\n    () =>\n      isOpen\n        ? {\n            transition: 'all 0.2s ease-out',\n            padding: '16px',\n            paddingBottom: 0,\n          }\n        : {\n            transition: 'all 0.2s ease-out',\n            height: 0,\n            overflow: 'hidden',\n            padding: '0px 16px',\n          },\n    [isOpen],\n  );\n\n  return (\n    <StyledTr\n      css={isOpen ? { '&:not(:last-child)': { borderBottom: '1px solid $tableRowBorder' } } : {}}\n    >\n      <Td css={appliedStyle} fullColSpan>\n        <Box css={containerStyle}>{children}</Box>\n      </Td>\n    </StyledTr>\n  );\n};\n\nexport type AriaTrProps = ComponentProps<typeof StyledTr> &\n  VariantProps<typeof StyledTr> & {\n    asChild?: boolean;\n    collapsedContent?: React.ReactNode;\n    emptyFirstColumn?: boolean;\n    tableHead?: boolean;\n    children?: React.ReactNode;\n  };\n\nexport const Tr = forwardRef<ElementRef<typeof StyledTr>, AriaTrProps>(\n  ({ asChild, children, collapsedContent, emptyFirstColumn, tableHead, css, ...props }, ref) => {\n    const Component = asChild ? StyledTrSlot : StyledTr;\n    const [isCollapsed, setIsCollapsed] = useState(false);\n\n    if (!asChild) {\n      const arrayChildren = Children.toArray(children);\n      const hasColSpanChildren = arrayChildren.some((child) => {\n        if (!isValidElement(child)) {\n          return false;\n        }\n        const { fullColSpan } = child.props as TdProps;\n        return !!fullColSpan;\n      });\n      if (hasColSpanChildren && arrayChildren.length > 1) {\n        throw new Error('Using fullColSpan is allowed only for a single full width Td.');\n      }\n    }\n\n    const TdEl = useMemo(\n      () =>\n        emptyFirstColumn ? (\n          tableHead ? (\n            <Th css={{ width: 24 }} />\n          ) : (\n            <Td key=\"empty-td\" />\n          )\n        ) : collapsedContent ? (\n          <Td key=\"chevron-td\">\n            <Box\n              onClick={(e) => {\n                e.stopPropagation();\n                e.preventDefault();\n              }}\n            >\n              <ChevronRightIcon\n                onClick={() => setIsCollapsed(!isCollapsed)}\n                style={{\n                  cursor: 'pointer',\n                  transition: 'transform 0.2s ease-out',\n                  transform: isCollapsed ? 'rotate(90deg)' : 'initial',\n                }}\n              />\n            </Box>\n          </Td>\n        ) : null,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [isCollapsed],\n    );\n\n    const renderedChildren = useMemo(() => {\n      if (asChild) {\n        return cloneElement(\n          children as any,\n          {\n            // @ts-ignore: Object is possibly 'null'.\n            ...children?.props,\n          },\n          // @ts-ignore: Object is possibly 'null'.\n          [TdEl, ...(children?.props?.children || [])],\n        );\n      }\n\n      return (\n        <>\n          {TdEl}\n          {children}\n        </>\n      );\n    }, [asChild, TdEl, children]);\n\n    return (\n      <>\n        <Component\n          ref={ref}\n          role=\"row\"\n          css={\n            !!collapsedContent && !isCollapsed\n              ? {\n                  ...css,\n                  [`&:nth-last-child(2) > span`]: {\n                    borderBottom: 'none',\n                  },\n                }\n              : { ...css }\n          }\n          {...props}\n        >\n          {renderedChildren}\n        </Component>\n        {!!collapsedContent && (\n          <AnimatedContainer isOpen={isCollapsed}>{collapsedContent}</AnimatedContainer>\n        )}\n      </>\n    );\n  },\n);\n\nconst StyledTh = styled('span', TableTh, {\n  display: 'table-cell',\n});\n\nexport interface ThProps extends ComponentProps<typeof StyledTh>, VariantProps<typeof StyledTh> {}\n\nexport const Th = forwardRef<ElementRef<typeof StyledTh>, ComponentProps<typeof StyledTh>>(\n  (props, ref) => <StyledTh ref={ref} role=\"columnheader\" {...props} />,\n);\n\nconst StyledTd = styled('span', TableTd, {\n  display: 'table-cell',\n});\n\nconst FillerTd = styled(StyledTd, {\n  visibility: 'hidden',\n});\nexport type TdProps = ComponentProps<typeof StyledTd> &\n  VariantProps<typeof StyledTd> &\n  VariantProps<typeof TableTd> & {\n    fullColSpan?: boolean;\n  };\n\nexport const Td = forwardRef<ElementRef<typeof StyledTd>, TdProps>(\n  ({ fullColSpan, css, ...props }, ref) => {\n    const fullColSpanCss = useMemo(\n      () =>\n        fullColSpan\n          ? {\n              position: 'absolute',\n              left: 0,\n              width: '100%',\n              height: '100%',\n            }\n          : {},\n      [fullColSpan],\n    );\n    if (fullColSpan) {\n      return (\n        <>\n          <FillerTd css={css} {...props} />\n          <StyledTd ref={ref} role=\"cell\" css={deepMerge(fullColSpanCss, css)} {...props} />\n        </>\n      );\n    }\n    return <StyledTd ref={ref} role=\"cell\" css={css} {...props} />;\n  },\n);\n\nconst StyledThead = styled('div', TableThead, {\n  display: 'table-header-group',\n});\nexport const Thead = forwardRef<\n  ElementRef<typeof StyledThead>,\n  ComponentProps<typeof StyledThead> & VariantProps<typeof StyledThead> & NonNullable<unknown>\n>((props, ref) => <StyledThead ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTable = styled('div', TableTable, {\n  display: 'table',\n});\nexport const Table = forwardRef<\n  ElementRef<typeof StyledTable>,\n  ComponentProps<typeof StyledTable> &\n    VariantProps<typeof StyledTable> & { hasCollapsibleChildren?: boolean }\n>(({ hasCollapsibleChildren, css, ...props }, ref) => (\n  <StyledTable\n    ref={ref}\n    role=\"table\"\n    css={hasCollapsibleChildren ? { borderCollapse: 'collapse', ...css } : css}\n    {...props}\n  />\n));\n\nexport type AriaTableVariants = VariantProps<typeof Table>;\nexport type AriaTableProps = TableVariants & { children?: React.ReactNode; css?: CSS };\n"],"mappings":";;;;;;;;;;;AA6BA,IAAa,UAAU,wBAAA,OAAO,OAAO,cAAA,SAAc,EACjD,SAAS,gBACX,CAAC;AAED,IAAM,cAAc,wBAAA,OAAO,OAAO,cAAA,OAAY,EAC5C,SAAS,kBACX,CAAC;AACD,IAAa,SAAA,GAAA,MAAA,WAAA,EAGV,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAD;CAAkB;CAAK,MAAK;CAAW,GAAI;AAAQ,CAAA,CAAC;AAEtE,IAAM,cAAc,wBAAA,OAAO,OAAO,cAAA,OAAY,EAC5C,SAAS,qBACX,CAAC;AACD,IAAa,SAAA,GAAA,MAAA,WAAA,EAGV,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAD;CAAkB;CAAK,MAAK;CAAW,GAAI;AAAQ,CAAA,CAAC;AAEtE,IAAM,WAAW,wBAAA,OAAO,OAAO,cAAA,UAAS,EACtC,SAAS,YACX,CAAC;AACD,IAAM,eAAe,wBAAA,OAAO,qBAAA,MAAM,QAAQ;AAE1C,IAAM,qBAAqB,EAAE,QAAQ,eAAyD;CAC5F,MAAM,gBAAA,GAAA,MAAA,QAAA,OAEF,SACI;EACE,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,QAAQ;CACV,IACA;EACE,YAAY;EACZ,SAAS;EACT,eAAe;EACf,QAAQ;CACV,GACN,CAAC,MAAM,CACT;CAEA,MAAM,kBAAA,GAAA,MAAA,QAAA,OAEF,SACI;EACE,YAAY;EACZ,SAAS;EACT,eAAe;CACjB,IACA;EACE,YAAY;EACZ,QAAQ;EACR,UAAU;EACV,SAAS;CACX,GACN,CAAC,MAAM,CACT;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,KAAK,SAAS,EAAE,sBAAsB,EAAE,cAAc,4BAA4B,EAAE,IAAI,CAAC;YAEzF,iBAAA,GAAA,kBAAA,IAAA,CAAC,IAAD;GAAI,KAAK;GAAc,aAAA;aACrB,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAA,KAAD;IAAK,KAAK;IAAiB;GAAc,CAAA;EACvC,CAAA;CACI,CAAA;AAEd;AAWA,IAAa,MAAA,GAAA,MAAA,WAAA,EACV,EAAE,SAAS,UAAU,kBAAkB,kBAAkB,WAAW,KAAK,GAAG,SAAS,QAAQ;CAC5F,MAAM,YAAY,UAAU,eAAe;CAC3C,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,SAAA,CAA2B,KAAK;CAEpD,IAAI,CAAC,SAAS;EACZ,MAAM,gBAAgB,MAAA,SAAS,QAAQ,QAAQ;EAQ/C,IAP2B,cAAc,MAAM,UAAU;GACvD,IAAI,EAAA,GAAA,MAAA,eAAA,CAAgB,KAAK,GACvB,OAAO;GAET,MAAM,EAAE,gBAAgB,MAAM;GAC9B,OAAO,CAAC,CAAC;EACX,CACI,KAAsB,cAAc,SAAS,GAC/C,MAAM,IAAI,MAAM,+DAA+D;CAEnF;CAEA,MAAM,QAAA,GAAA,MAAA,QAAA,OAEF,mBACE,YACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,IAAD,EAAI,KAAK,EAAE,OAAO,GAAG,EAAI,CAAA,IAEzB,iBAAA,GAAA,kBAAA,IAAA,CAAC,IAAD,CAAoB,GAAZ,UAAY,IAEpB,mBACF,iBAAA,GAAA,kBAAA,IAAA,CAAC,IAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAA,KAAD;EACE,UAAU,MAAM;GACd,EAAE,gBAAgB;GAClB,EAAE,eAAe;EACnB;YAEA,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAA,kBAAD;GACE,eAAe,eAAe,CAAC,WAAW;GAC1C,OAAO;IACL,QAAQ;IACR,YAAY;IACZ,WAAW,cAAc,kBAAkB;GAC7C;EACD,CAAA;CACE,CAAA,EACH,GAhBI,YAgBJ,IACF,MAEN,CAAC,WAAW,CACd;CAEA,MAAM,oBAAA,GAAA,MAAA,QAAA,OAAiC;EACrC,IAAI,SACF,QAAA,GAAA,MAAA,aAAA,CACE,UACA,EAEE,GAAG,UAAU,MACf,GAEA,CAAC,MAAM,GAAI,UAAU,OAAO,YAAY,CAAC,CAAE,CAC7C;EAGF,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACG,MACA,QACD,EAAA,CAAA;CAEN,GAAG;EAAC;EAAS;EAAM;CAAQ,CAAC;CAE5B,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACO;EACL,MAAK;EACL,KACE,CAAC,CAAC,oBAAoB,CAAC,cACnB;GACE,GAAG;IACF,+BAA+B,EAC9B,cAAc,OAChB;EACF,IACA,EAAE,GAAG,IAAI;EAEf,GAAI;YAEH;CACQ,CAAA,GACV,CAAC,CAAC,oBACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;EAAmB,QAAQ;YAAc;CAAoC,CAAA,CAE/E,EAAA,CAAA;AAEN,CACF;AAEA,IAAM,WAAW,wBAAA,OAAO,QAAQ,cAAA,IAAS,EACvC,SAAS,aACX,CAAC;AAID,IAAa,MAAA,GAAA,MAAA,WAAA,EACV,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;CAAe;CAAK,MAAK;CAAe,GAAI;AAAQ,CAAA,CACtE;AAEA,IAAM,WAAW,wBAAA,OAAO,QAAQ,cAAA,IAAS,EACvC,SAAS,aACX,CAAC;AAED,IAAM,WAAW,wBAAA,OAAO,UAAU,EAChC,YAAY,SACd,CAAC;AAOD,IAAa,MAAA,GAAA,MAAA,WAAA,EACV,EAAE,aAAa,KAAK,GAAG,SAAS,QAAQ;CACvC,MAAM,kBAAA,GAAA,MAAA,QAAA,OAEF,cACI;EACE,UAAU;EACV,MAAM;EACN,OAAO;EACP,QAAQ;CACV,IACA,CAAC,GACP,CAAC,WAAW,CACd;CACA,IAAI,aACF,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EAAe;EAAK,GAAI;CAAQ,CAAA,GAChC,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EAAe;EAAK,MAAK;EAAO,KAAK,kBAAA,UAAU,gBAAgB,GAAG;EAAG,GAAI;CAAQ,CAAA,CACjF,EAAA,CAAA;CAGN,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EAAe;EAAK,MAAK;EAAY;EAAK,GAAI;CAAQ,CAAA;AAC/D,CACF;AAEA,IAAM,cAAc,wBAAA,OAAO,OAAO,cAAA,OAAY,EAC5C,SAAS,qBACX,CAAC;AACD,IAAa,SAAA,GAAA,MAAA,WAAA,EAGV,OAAO,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAD;CAAkB;CAAK,MAAK;CAAW,GAAI;AAAQ,CAAA,CAAC;AAEtE,IAAM,cAAc,wBAAA,OAAO,OAAO,cAAA,OAAY,EAC5C,SAAS,QACX,CAAC;AACD,IAAa,SAAA,GAAA,MAAA,WAAA,EAIV,EAAE,wBAAwB,KAAK,GAAG,SAAS,QAC5C,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAD;CACO;CACL,MAAK;CACL,KAAK,yBAAyB;EAAE,gBAAgB;EAAY,GAAG;CAAI,IAAI;CACvE,GAAI;AACL,CAAA,CACF"}
+{"version":3,"file":"AriaTable.cjs","names":["styled","TableCaption","TableTbody","forwardRef","TableTfoot","TableTr","Slot","useMemo","Box","useState","Children","isValidElement","ChevronRightIcon","cloneElement","_Fragment","TableTh","TableTd","deepMerge","TableThead","TableTable"],"sources":["../../../components/AriaTable/AriaTable.tsx"],"sourcesContent":["import { ChevronRightIcon } from '@radix-ui/react-icons';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, {\n  Children,\n  cloneElement,\n  ComponentProps,\n  ElementRef,\n  forwardRef,\n  isValidElement,\n  ReactNode,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { deepMerge } from '../../utils/deepMerge';\nimport { Box } from '../Box';\nimport type { TableVariants } from '../Table';\nimport {\n  Caption as TableCaption,\n  StyledTr as TableTr,\n  Table as TableTable,\n  Tbody as TableTbody,\n  Td as TableTd,\n  Tfoot as TableTfoot,\n  Th as TableTh,\n  Thead as TableThead,\n} from '../Table';\n\nexport const Caption = styled('div', TableCaption, {\n  display: 'table-caption',\n});\n\nconst StyledTbody = styled('div', TableTbody, {\n  display: 'table-row-group',\n});\nexport const Tbody = forwardRef<\n  ElementRef<typeof StyledTbody>,\n  ComponentProps<typeof StyledTbody> & VariantProps<typeof StyledTbody>\n>((props, ref) => <StyledTbody ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTfoot = styled('div', TableTfoot, {\n  display: 'table-footer-group',\n});\nexport const Tfoot = forwardRef<\n  ElementRef<typeof StyledTfoot>,\n  ComponentProps<typeof StyledTfoot> & VariantProps<typeof StyledTfoot>\n>((props, ref) => <StyledTfoot ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTr = styled('div', TableTr, {\n  display: 'table-row',\n});\nconst StyledTrSlot = styled(Slot, StyledTr);\n\nconst AnimatedContainer = ({ isOpen, children }: { isOpen: boolean; children: ReactNode }) => {\n  const appliedStyle = useMemo(\n    () =>\n      isOpen\n        ? {\n            transition: 'all 0.2s ease-out',\n            paddingBottom: 0,\n            paddingTop: 0,\n            border: 'none',\n          }\n        : {\n            transition: 'all 0.2s ease-out',\n            padding: '0px 16px',\n            pointerEvents: 'none',\n            border: 'none',\n          },\n    [isOpen],\n  );\n\n  const containerStyle = useMemo(\n    () =>\n      isOpen\n        ? {\n            transition: 'all 0.2s ease-out',\n            padding: '16px',\n            paddingBottom: 0,\n          }\n        : {\n            transition: 'all 0.2s ease-out',\n            height: 0,\n            overflow: 'hidden',\n            padding: '0px 16px',\n          },\n    [isOpen],\n  );\n\n  return (\n    <StyledTr\n      css={isOpen ? { '&:not(:last-child)': { borderBottom: '1px solid $tableRowBorder' } } : {}}\n    >\n      <Td css={appliedStyle} fullColSpan>\n        <Box css={containerStyle}>{children}</Box>\n      </Td>\n    </StyledTr>\n  );\n};\n\nexport type AriaTrProps = ComponentProps<typeof StyledTr> &\n  VariantProps<typeof StyledTr> & {\n    asChild?: boolean;\n    collapsedContent?: React.ReactNode;\n    emptyFirstColumn?: boolean;\n    tableHead?: boolean;\n    children?: React.ReactNode;\n  };\n\nexport const Tr = forwardRef<ElementRef<typeof StyledTr>, AriaTrProps>(\n  ({ asChild, children, collapsedContent, emptyFirstColumn, tableHead, css, ...props }, ref) => {\n    const Component = asChild ? StyledTrSlot : StyledTr;\n    const [isCollapsed, setIsCollapsed] = useState(false);\n\n    if (!asChild) {\n      // eslint-disable-next-line @eslint-react/no-children-to-array\n      const arrayChildren = Children.toArray(children);\n      const hasColSpanChildren = arrayChildren.some((child) => {\n        if (!isValidElement(child)) {\n          return false;\n        }\n        const { fullColSpan } = child.props as TdProps;\n        return !!fullColSpan;\n      });\n      if (hasColSpanChildren && arrayChildren.length > 1) {\n        throw new Error('Using fullColSpan is allowed only for a single full width Td.');\n      }\n    }\n\n    const TdEl = useMemo(\n      () =>\n        emptyFirstColumn ? (\n          tableHead ? (\n            <Th css={{ width: 24 }} />\n          ) : (\n            <Td key=\"empty-td\" />\n          )\n        ) : collapsedContent ? (\n          <Td key=\"chevron-td\">\n            <Box\n              onClick={(e) => {\n                e.stopPropagation();\n                e.preventDefault();\n              }}\n            >\n              <ChevronRightIcon\n                onClick={() => setIsCollapsed(!isCollapsed)}\n                style={{\n                  cursor: 'pointer',\n                  transition: 'transform 0.2s ease-out',\n                  transform: isCollapsed ? 'rotate(90deg)' : 'initial',\n                }}\n              />\n            </Box>\n          </Td>\n        ) : null,\n      // eslint-disable-next-line @eslint-react/exhaustive-deps\n      [isCollapsed],\n    );\n\n    const renderedChildren = useMemo(() => {\n      if (asChild) {\n        // eslint-disable-next-line @eslint-react/no-clone-element\n        return cloneElement(\n          children as any,\n          {\n            // @ts-ignore: Object is possibly 'null'.\n            ...children?.props,\n          },\n          // @ts-ignore: Object is possibly 'null'.\n          [TdEl, ...(children?.props?.children || [])],\n        );\n      }\n\n      return (\n        <>\n          {TdEl}\n          {children}\n        </>\n      );\n    }, [asChild, TdEl, children]);\n\n    return (\n      <>\n        <Component\n          ref={ref}\n          role=\"row\"\n          css={\n            !!collapsedContent && !isCollapsed\n              ? {\n                  ...css,\n                  [`&:nth-last-child(2) > span`]: {\n                    borderBottom: 'none',\n                  },\n                }\n              : { ...css }\n          }\n          {...props}\n        >\n          {renderedChildren}\n        </Component>\n        {!!collapsedContent && (\n          <AnimatedContainer isOpen={isCollapsed}>{collapsedContent}</AnimatedContainer>\n        )}\n      </>\n    );\n  },\n);\n\nconst StyledTh = styled('span', TableTh, {\n  display: 'table-cell',\n});\n\nexport interface ThProps extends ComponentProps<typeof StyledTh>, VariantProps<typeof StyledTh> {}\n\nexport const Th = forwardRef<ElementRef<typeof StyledTh>, ComponentProps<typeof StyledTh>>(\n  (props, ref) => <StyledTh ref={ref} role=\"columnheader\" {...props} />,\n);\n\nconst StyledTd = styled('span', TableTd, {\n  display: 'table-cell',\n});\n\nconst FillerTd = styled(StyledTd, {\n  visibility: 'hidden',\n});\nexport type TdProps = ComponentProps<typeof StyledTd> &\n  VariantProps<typeof StyledTd> &\n  VariantProps<typeof TableTd> & {\n    fullColSpan?: boolean;\n  };\n\nexport const Td = forwardRef<ElementRef<typeof StyledTd>, TdProps>(\n  ({ fullColSpan, css, ...props }, ref) => {\n    const fullColSpanCss = useMemo(\n      () =>\n        fullColSpan\n          ? {\n              position: 'absolute',\n              left: 0,\n              width: '100%',\n              height: '100%',\n            }\n          : {},\n      [fullColSpan],\n    );\n    if (fullColSpan) {\n      return (\n        <>\n          <FillerTd css={css} {...props} />\n          <StyledTd ref={ref} role=\"cell\" css={deepMerge(fullColSpanCss, css)} {...props} />\n        </>\n      );\n    }\n    return <StyledTd ref={ref} role=\"cell\" css={css} {...props} />;\n  },\n);\n\nconst StyledThead = styled('div', TableThead, {\n  display: 'table-header-group',\n});\nexport const Thead = forwardRef<\n  ElementRef<typeof StyledThead>,\n  ComponentProps<typeof StyledThead> & VariantProps<typeof StyledThead> & NonNullable<unknown>\n>((props, ref) => <StyledThead ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTable = styled('div', TableTable, {\n  display: 'table',\n});\nexport const Table = forwardRef<\n  ElementRef<typeof StyledTable>,\n  ComponentProps<typeof StyledTable> &\n    VariantProps<typeof StyledTable> & { hasCollapsibleChildren?: boolean }\n>(({ hasCollapsibleChildren, css, ...props }, ref) => (\n  <StyledTable\n    ref={ref}\n    role=\"table\"\n    css={hasCollapsibleChildren ? { borderCollapse: 'collapse', ...css } : css}\n    {...props}\n  />\n));\n\nexport type AriaTableVariants = VariantProps<typeof Table>;\nexport type AriaTableProps = TableVariants & { children?: React.ReactNode; css?: CSS };\n"],"mappings":"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"}

package/dist/components/AriaTable/AriaTable.js

@@ -6,7 +6,7 @@ import { ChevronRightIcon } from "@radix-ui/react-icons";
 import { Children, cloneElement, forwardRef, isValidElement, useMemo, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
-//#region components/AriaTable/AriaTable.tsx
+// components/AriaTable/AriaTable.tsx
 var Caption = styled("div", Caption$1, { display: "table-caption" });
 var StyledTbody = styled("div", Tbody$1, { display: "table-row-group" });
 var Tbody = forwardRef((props, ref) => /* @__PURE__ */ jsx(StyledTbody, {
@@ -150,7 +150,6 @@ var Table = forwardRef(({ hasCollapsibleChildren, css, ...props }, ref) => /* @_
 	} : css,
 	...props
 }));
-//#endregion
 export { Caption, Table, Tbody, Td, Tfoot, Th, Thead, Tr };
 
 //# sourceMappingURL=AriaTable.js.map

package/dist/components/AriaTable/AriaTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"AriaTable.js","names":[],"sources":["../../../components/AriaTable/AriaTable.tsx"],"sourcesContent":["import { ChevronRightIcon } from '@radix-ui/react-icons';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, {\n  Children,\n  cloneElement,\n  ComponentProps,\n  ElementRef,\n  forwardRef,\n  isValidElement,\n  ReactNode,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { deepMerge } from '../../utils/deepMerge';\nimport { Box } from '../Box';\nimport type { TableVariants } from '../Table';\nimport {\n  Caption as TableCaption,\n  StyledTr as TableTr,\n  Table as TableTable,\n  Tbody as TableTbody,\n  Td as TableTd,\n  Tfoot as TableTfoot,\n  Th as TableTh,\n  Thead as TableThead,\n} from '../Table';\n\nexport const Caption = styled('div', TableCaption, {\n  display: 'table-caption',\n});\n\nconst StyledTbody = styled('div', TableTbody, {\n  display: 'table-row-group',\n});\nexport const Tbody = forwardRef<\n  ElementRef<typeof StyledTbody>,\n  ComponentProps<typeof StyledTbody> & VariantProps<typeof StyledTbody>\n>((props, ref) => <StyledTbody ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTfoot = styled('div', TableTfoot, {\n  display: 'table-footer-group',\n});\nexport const Tfoot = forwardRef<\n  ElementRef<typeof StyledTfoot>,\n  ComponentProps<typeof StyledTfoot> & VariantProps<typeof StyledTfoot>\n>((props, ref) => <StyledTfoot ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTr = styled('div', TableTr, {\n  display: 'table-row',\n});\nconst StyledTrSlot = styled(Slot, StyledTr);\n\nconst AnimatedContainer = ({ isOpen, children }: { isOpen: boolean; children: ReactNode }) => {\n  const appliedStyle = useMemo(\n    () =>\n      isOpen\n        ? {\n            transition: 'all 0.2s ease-out',\n            paddingBottom: 0,\n            paddingTop: 0,\n            border: 'none',\n          }\n        : {\n            transition: 'all 0.2s ease-out',\n            padding: '0px 16px',\n            pointerEvents: 'none',\n            border: 'none',\n          },\n    [isOpen],\n  );\n\n  const containerStyle = useMemo(\n    () =>\n      isOpen\n        ? {\n            transition: 'all 0.2s ease-out',\n            padding: '16px',\n            paddingBottom: 0,\n          }\n        : {\n            transition: 'all 0.2s ease-out',\n            height: 0,\n            overflow: 'hidden',\n            padding: '0px 16px',\n          },\n    [isOpen],\n  );\n\n  return (\n    <StyledTr\n      css={isOpen ? { '&:not(:last-child)': { borderBottom: '1px solid $tableRowBorder' } } : {}}\n    >\n      <Td css={appliedStyle} fullColSpan>\n        <Box css={containerStyle}>{children}</Box>\n      </Td>\n    </StyledTr>\n  );\n};\n\nexport type AriaTrProps = ComponentProps<typeof StyledTr> &\n  VariantProps<typeof StyledTr> & {\n    asChild?: boolean;\n    collapsedContent?: React.ReactNode;\n    emptyFirstColumn?: boolean;\n    tableHead?: boolean;\n    children?: React.ReactNode;\n  };\n\nexport const Tr = forwardRef<ElementRef<typeof StyledTr>, AriaTrProps>(\n  ({ asChild, children, collapsedContent, emptyFirstColumn, tableHead, css, ...props }, ref) => {\n    const Component = asChild ? StyledTrSlot : StyledTr;\n    const [isCollapsed, setIsCollapsed] = useState(false);\n\n    if (!asChild) {\n      const arrayChildren = Children.toArray(children);\n      const hasColSpanChildren = arrayChildren.some((child) => {\n        if (!isValidElement(child)) {\n          return false;\n        }\n        const { fullColSpan } = child.props as TdProps;\n        return !!fullColSpan;\n      });\n      if (hasColSpanChildren && arrayChildren.length > 1) {\n        throw new Error('Using fullColSpan is allowed only for a single full width Td.');\n      }\n    }\n\n    const TdEl = useMemo(\n      () =>\n        emptyFirstColumn ? (\n          tableHead ? (\n            <Th css={{ width: 24 }} />\n          ) : (\n            <Td key=\"empty-td\" />\n          )\n        ) : collapsedContent ? (\n          <Td key=\"chevron-td\">\n            <Box\n              onClick={(e) => {\n                e.stopPropagation();\n                e.preventDefault();\n              }}\n            >\n              <ChevronRightIcon\n                onClick={() => setIsCollapsed(!isCollapsed)}\n                style={{\n                  cursor: 'pointer',\n                  transition: 'transform 0.2s ease-out',\n                  transform: isCollapsed ? 'rotate(90deg)' : 'initial',\n                }}\n              />\n            </Box>\n          </Td>\n        ) : null,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [isCollapsed],\n    );\n\n    const renderedChildren = useMemo(() => {\n      if (asChild) {\n        return cloneElement(\n          children as any,\n          {\n            // @ts-ignore: Object is possibly 'null'.\n            ...children?.props,\n          },\n          // @ts-ignore: Object is possibly 'null'.\n          [TdEl, ...(children?.props?.children || [])],\n        );\n      }\n\n      return (\n        <>\n          {TdEl}\n          {children}\n        </>\n      );\n    }, [asChild, TdEl, children]);\n\n    return (\n      <>\n        <Component\n          ref={ref}\n          role=\"row\"\n          css={\n            !!collapsedContent && !isCollapsed\n              ? {\n                  ...css,\n                  [`&:nth-last-child(2) > span`]: {\n                    borderBottom: 'none',\n                  },\n                }\n              : { ...css }\n          }\n          {...props}\n        >\n          {renderedChildren}\n        </Component>\n        {!!collapsedContent && (\n          <AnimatedContainer isOpen={isCollapsed}>{collapsedContent}</AnimatedContainer>\n        )}\n      </>\n    );\n  },\n);\n\nconst StyledTh = styled('span', TableTh, {\n  display: 'table-cell',\n});\n\nexport interface ThProps extends ComponentProps<typeof StyledTh>, VariantProps<typeof StyledTh> {}\n\nexport const Th = forwardRef<ElementRef<typeof StyledTh>, ComponentProps<typeof StyledTh>>(\n  (props, ref) => <StyledTh ref={ref} role=\"columnheader\" {...props} />,\n);\n\nconst StyledTd = styled('span', TableTd, {\n  display: 'table-cell',\n});\n\nconst FillerTd = styled(StyledTd, {\n  visibility: 'hidden',\n});\nexport type TdProps = ComponentProps<typeof StyledTd> &\n  VariantProps<typeof StyledTd> &\n  VariantProps<typeof TableTd> & {\n    fullColSpan?: boolean;\n  };\n\nexport const Td = forwardRef<ElementRef<typeof StyledTd>, TdProps>(\n  ({ fullColSpan, css, ...props }, ref) => {\n    const fullColSpanCss = useMemo(\n      () =>\n        fullColSpan\n          ? {\n              position: 'absolute',\n              left: 0,\n              width: '100%',\n              height: '100%',\n            }\n          : {},\n      [fullColSpan],\n    );\n    if (fullColSpan) {\n      return (\n        <>\n          <FillerTd css={css} {...props} />\n          <StyledTd ref={ref} role=\"cell\" css={deepMerge(fullColSpanCss, css)} {...props} />\n        </>\n      );\n    }\n    return <StyledTd ref={ref} role=\"cell\" css={css} {...props} />;\n  },\n);\n\nconst StyledThead = styled('div', TableThead, {\n  display: 'table-header-group',\n});\nexport const Thead = forwardRef<\n  ElementRef<typeof StyledThead>,\n  ComponentProps<typeof StyledThead> & VariantProps<typeof StyledThead> & NonNullable<unknown>\n>((props, ref) => <StyledThead ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTable = styled('div', TableTable, {\n  display: 'table',\n});\nexport const Table = forwardRef<\n  ElementRef<typeof StyledTable>,\n  ComponentProps<typeof StyledTable> &\n    VariantProps<typeof StyledTable> & { hasCollapsibleChildren?: boolean }\n>(({ hasCollapsibleChildren, css, ...props }, ref) => (\n  <StyledTable\n    ref={ref}\n    role=\"table\"\n    css={hasCollapsibleChildren ? { borderCollapse: 'collapse', ...css } : css}\n    {...props}\n  />\n));\n\nexport type AriaTableVariants = VariantProps<typeof Table>;\nexport type AriaTableProps = TableVariants & { children?: React.ReactNode; css?: CSS };\n"],"mappings":"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"}
+{"version":3,"file":"AriaTable.js","names":["TableCaption","TableTbody","TableTfoot","TableTr","_Fragment","TableTh","TableTd","TableThead","TableTable"],"sources":["../../../components/AriaTable/AriaTable.tsx"],"sourcesContent":["import { ChevronRightIcon } from '@radix-ui/react-icons';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, {\n  Children,\n  cloneElement,\n  ComponentProps,\n  ElementRef,\n  forwardRef,\n  isValidElement,\n  ReactNode,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { deepMerge } from '../../utils/deepMerge';\nimport { Box } from '../Box';\nimport type { TableVariants } from '../Table';\nimport {\n  Caption as TableCaption,\n  StyledTr as TableTr,\n  Table as TableTable,\n  Tbody as TableTbody,\n  Td as TableTd,\n  Tfoot as TableTfoot,\n  Th as TableTh,\n  Thead as TableThead,\n} from '../Table';\n\nexport const Caption = styled('div', TableCaption, {\n  display: 'table-caption',\n});\n\nconst StyledTbody = styled('div', TableTbody, {\n  display: 'table-row-group',\n});\nexport const Tbody = forwardRef<\n  ElementRef<typeof StyledTbody>,\n  ComponentProps<typeof StyledTbody> & VariantProps<typeof StyledTbody>\n>((props, ref) => <StyledTbody ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTfoot = styled('div', TableTfoot, {\n  display: 'table-footer-group',\n});\nexport const Tfoot = forwardRef<\n  ElementRef<typeof StyledTfoot>,\n  ComponentProps<typeof StyledTfoot> & VariantProps<typeof StyledTfoot>\n>((props, ref) => <StyledTfoot ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTr = styled('div', TableTr, {\n  display: 'table-row',\n});\nconst StyledTrSlot = styled(Slot, StyledTr);\n\nconst AnimatedContainer = ({ isOpen, children }: { isOpen: boolean; children: ReactNode }) => {\n  const appliedStyle = useMemo(\n    () =>\n      isOpen\n        ? {\n            transition: 'all 0.2s ease-out',\n            paddingBottom: 0,\n            paddingTop: 0,\n            border: 'none',\n          }\n        : {\n            transition: 'all 0.2s ease-out',\n            padding: '0px 16px',\n            pointerEvents: 'none',\n            border: 'none',\n          },\n    [isOpen],\n  );\n\n  const containerStyle = useMemo(\n    () =>\n      isOpen\n        ? {\n            transition: 'all 0.2s ease-out',\n            padding: '16px',\n            paddingBottom: 0,\n          }\n        : {\n            transition: 'all 0.2s ease-out',\n            height: 0,\n            overflow: 'hidden',\n            padding: '0px 16px',\n          },\n    [isOpen],\n  );\n\n  return (\n    <StyledTr\n      css={isOpen ? { '&:not(:last-child)': { borderBottom: '1px solid $tableRowBorder' } } : {}}\n    >\n      <Td css={appliedStyle} fullColSpan>\n        <Box css={containerStyle}>{children}</Box>\n      </Td>\n    </StyledTr>\n  );\n};\n\nexport type AriaTrProps = ComponentProps<typeof StyledTr> &\n  VariantProps<typeof StyledTr> & {\n    asChild?: boolean;\n    collapsedContent?: React.ReactNode;\n    emptyFirstColumn?: boolean;\n    tableHead?: boolean;\n    children?: React.ReactNode;\n  };\n\nexport const Tr = forwardRef<ElementRef<typeof StyledTr>, AriaTrProps>(\n  ({ asChild, children, collapsedContent, emptyFirstColumn, tableHead, css, ...props }, ref) => {\n    const Component = asChild ? StyledTrSlot : StyledTr;\n    const [isCollapsed, setIsCollapsed] = useState(false);\n\n    if (!asChild) {\n      // eslint-disable-next-line @eslint-react/no-children-to-array\n      const arrayChildren = Children.toArray(children);\n      const hasColSpanChildren = arrayChildren.some((child) => {\n        if (!isValidElement(child)) {\n          return false;\n        }\n        const { fullColSpan } = child.props as TdProps;\n        return !!fullColSpan;\n      });\n      if (hasColSpanChildren && arrayChildren.length > 1) {\n        throw new Error('Using fullColSpan is allowed only for a single full width Td.');\n      }\n    }\n\n    const TdEl = useMemo(\n      () =>\n        emptyFirstColumn ? (\n          tableHead ? (\n            <Th css={{ width: 24 }} />\n          ) : (\n            <Td key=\"empty-td\" />\n          )\n        ) : collapsedContent ? (\n          <Td key=\"chevron-td\">\n            <Box\n              onClick={(e) => {\n                e.stopPropagation();\n                e.preventDefault();\n              }}\n            >\n              <ChevronRightIcon\n                onClick={() => setIsCollapsed(!isCollapsed)}\n                style={{\n                  cursor: 'pointer',\n                  transition: 'transform 0.2s ease-out',\n                  transform: isCollapsed ? 'rotate(90deg)' : 'initial',\n                }}\n              />\n            </Box>\n          </Td>\n        ) : null,\n      // eslint-disable-next-line @eslint-react/exhaustive-deps\n      [isCollapsed],\n    );\n\n    const renderedChildren = useMemo(() => {\n      if (asChild) {\n        // eslint-disable-next-line @eslint-react/no-clone-element\n        return cloneElement(\n          children as any,\n          {\n            // @ts-ignore: Object is possibly 'null'.\n            ...children?.props,\n          },\n          // @ts-ignore: Object is possibly 'null'.\n          [TdEl, ...(children?.props?.children || [])],\n        );\n      }\n\n      return (\n        <>\n          {TdEl}\n          {children}\n        </>\n      );\n    }, [asChild, TdEl, children]);\n\n    return (\n      <>\n        <Component\n          ref={ref}\n          role=\"row\"\n          css={\n            !!collapsedContent && !isCollapsed\n              ? {\n                  ...css,\n                  [`&:nth-last-child(2) > span`]: {\n                    borderBottom: 'none',\n                  },\n                }\n              : { ...css }\n          }\n          {...props}\n        >\n          {renderedChildren}\n        </Component>\n        {!!collapsedContent && (\n          <AnimatedContainer isOpen={isCollapsed}>{collapsedContent}</AnimatedContainer>\n        )}\n      </>\n    );\n  },\n);\n\nconst StyledTh = styled('span', TableTh, {\n  display: 'table-cell',\n});\n\nexport interface ThProps extends ComponentProps<typeof StyledTh>, VariantProps<typeof StyledTh> {}\n\nexport const Th = forwardRef<ElementRef<typeof StyledTh>, ComponentProps<typeof StyledTh>>(\n  (props, ref) => <StyledTh ref={ref} role=\"columnheader\" {...props} />,\n);\n\nconst StyledTd = styled('span', TableTd, {\n  display: 'table-cell',\n});\n\nconst FillerTd = styled(StyledTd, {\n  visibility: 'hidden',\n});\nexport type TdProps = ComponentProps<typeof StyledTd> &\n  VariantProps<typeof StyledTd> &\n  VariantProps<typeof TableTd> & {\n    fullColSpan?: boolean;\n  };\n\nexport const Td = forwardRef<ElementRef<typeof StyledTd>, TdProps>(\n  ({ fullColSpan, css, ...props }, ref) => {\n    const fullColSpanCss = useMemo(\n      () =>\n        fullColSpan\n          ? {\n              position: 'absolute',\n              left: 0,\n              width: '100%',\n              height: '100%',\n            }\n          : {},\n      [fullColSpan],\n    );\n    if (fullColSpan) {\n      return (\n        <>\n          <FillerTd css={css} {...props} />\n          <StyledTd ref={ref} role=\"cell\" css={deepMerge(fullColSpanCss, css)} {...props} />\n        </>\n      );\n    }\n    return <StyledTd ref={ref} role=\"cell\" css={css} {...props} />;\n  },\n);\n\nconst StyledThead = styled('div', TableThead, {\n  display: 'table-header-group',\n});\nexport const Thead = forwardRef<\n  ElementRef<typeof StyledThead>,\n  ComponentProps<typeof StyledThead> & VariantProps<typeof StyledThead> & NonNullable<unknown>\n>((props, ref) => <StyledThead ref={ref} role=\"rowgroup\" {...props} />);\n\nconst StyledTable = styled('div', TableTable, {\n  display: 'table',\n});\nexport const Table = forwardRef<\n  ElementRef<typeof StyledTable>,\n  ComponentProps<typeof StyledTable> &\n    VariantProps<typeof StyledTable> & { hasCollapsibleChildren?: boolean }\n>(({ hasCollapsibleChildren, css, ...props }, ref) => (\n  <StyledTable\n    ref={ref}\n    role=\"table\"\n    css={hasCollapsibleChildren ? { borderCollapse: 'collapse', ...css } : css}\n    {...props}\n  />\n));\n\nexport type AriaTableVariants = VariantProps<typeof Table>;\nexport type AriaTableProps = TableVariants & { children?: React.ReactNode; css?: CSS };\n"],"mappings":"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"}

package/dist/components/Avatar/Avatar.cjs

@@ -6,7 +6,7 @@ react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _radix_ui_react_avatar = require("@radix-ui/react-avatar");
 _radix_ui_react_avatar = require_runtime.__toESM(_radix_ui_react_avatar, 1);
-//#region components/Avatar/Avatar.tsx
+// components/Avatar/Avatar.tsx
 var StyledAvatar = require_stitches_config.styled(_radix_ui_react_avatar.Root, {
 	alignItems: "center",
 	justifyContent: "center",
@@ -130,7 +130,6 @@ var Avatar = react.default.forwardRef(({ alt, src, fallback, size, variant, shap
 		})
 	});
 });
-//#endregion
 exports.Avatar = Avatar;
 
 //# sourceMappingURL=Avatar.cjs.map

package/dist/components/Avatar/Avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.cjs","names":[],"sources":["../../../components/Avatar/Avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\n\nconst StyledAvatar = styled(AvatarPrimitive.Root, {\n  alignItems: 'center',\n  justifyContent: 'center',\n  verticalAlign: 'middle',\n  overflow: 'hidden',\n  userSelect: 'none',\n  boxSizing: 'border-box',\n  display: 'flex',\n  flexShrink: 0,\n  position: 'relative',\n  border: 'none',\n  fontFamily: 'inherit',\n  lineHeight: '1',\n  margin: '0',\n  outline: 'none',\n  padding: '0',\n  fontWeight: '$medium',\n  color: '$hiContrast',\n\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    borderRadius: 'inherit',\n    boxShadow: 'inset 0px 0px 1px rgba(0, 0, 0, 0.12)',\n  },\n\n  variants: {\n    size: {\n      '1': {\n        width: '$3',\n        height: '$3',\n      },\n      '2': {\n        width: '$5',\n        height: '$5',\n      },\n      '3': {\n        width: '$6',\n        height: '$6',\n      },\n      '4': {\n        width: '$7',\n        height: '$7',\n      },\n      '5': {\n        width: '$8',\n        height: '$8',\n      },\n      '6': {\n        width: '$9',\n        height: '$9',\n      },\n    },\n    variant: {\n      gray: {\n        backgroundColor: '$slate5',\n      },\n      red: {\n        backgroundColor: '$red5',\n      },\n      purple: {\n        backgroundColor: '$purple5',\n      },\n      blue: {\n        backgroundColor: '$blue5',\n      },\n      green: {\n        backgroundColor: '$green5',\n      },\n      orange: {\n        backgroundColor: '$orange5',\n      },\n    },\n    shape: {\n      square: {\n        borderRadius: '$2',\n      },\n      circle: {\n        borderRadius: '50%',\n      },\n    },\n  },\n  defaultVariants: {\n    size: '2',\n    variant: 'gray',\n    shape: 'circle',\n  },\n});\n\nconst StyledAvatarImage = styled(AvatarPrimitive.Image, {\n  display: 'flex',\n  objectFit: 'cover',\n  boxSizing: 'border-box',\n  height: '100%',\n  verticalAlign: 'middle',\n  width: '100%',\n});\n\nconst StyledAvatarFallback = styled(AvatarPrimitive.Fallback, {\n  textTransform: 'uppercase',\n  fontFamily: '$rubik',\n  color: '$deepBlue10',\n\n  variants: {\n    size: {\n      '1': {\n        fontSize: '10px',\n        lineHeight: '15px',\n      },\n      '2': {\n        fontSize: '$3',\n      },\n      '3': {\n        fontSize: '$6',\n      },\n      '4': {\n        fontSize: '$7',\n      },\n      '5': {\n        fontSize: '$8',\n      },\n      '6': {\n        fontSize: '$9',\n      },\n    },\n  },\n  defaultVariants: {\n    size: '2',\n  },\n});\n\ntype AvatarVariants = VariantProps<typeof StyledAvatar>;\ntype AvatarPrimitiveProps = Omit<React.ComponentProps<typeof AvatarPrimitive.Root>, 'as'>;\ntype AvatarOwnProps = AvatarPrimitiveProps &\n  AvatarVariants & {\n    css?: CSS;\n    alt?: string;\n    src?: string;\n    fallback?: React.ReactNode;\n    // status?: StatusColors['variant'];\n  };\n\nexport const Avatar = React.forwardRef<React.ElementRef<typeof StyledAvatar>, AvatarOwnProps>(\n  ({ alt, src, fallback, size, variant, shape, css, ...props }, forwardedRef) => {\n    return (\n      <Box\n        css={{\n          ...css,\n          position: 'relative',\n          height: 'fit-content',\n          width: 'fit-content',\n        }}\n      >\n        <StyledAvatar {...props} ref={forwardedRef} size={size} variant={variant} shape={shape}>\n          <StyledAvatarImage alt={alt} src={src} />\n          <StyledAvatarFallback size={size}>{fallback}</StyledAvatarFallback>\n        </StyledAvatar>\n      </Box>\n    );\n  }\n);\n"],"mappings":";;;;;;;;;AAMA,IAAM,eAAe,wBAAA,OAAO,uBAAgB,MAAM;CAChD,YAAY;CACZ,gBAAgB;CAChB,eAAe;CACf,UAAU;CACV,YAAY;CACZ,WAAW;CACX,SAAS;CACT,YAAY;CACZ,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,SAAS;CACT,YAAY;CACZ,OAAO;CAEP,aAAa;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,cAAc;EACd,WAAW;CACb;CAEA,UAAU;EACR,MAAM;GACJ,KAAK;IACH,OAAO;IACP,QAAQ;GACV;GACA,KAAK;IACH,OAAO;IACP,QAAQ;GACV;GACA,KAAK;IACH,OAAO;IACP,QAAQ;GACV;GACA,KAAK;IACH,OAAO;IACP,QAAQ;GACV;GACA,KAAK;IACH,OAAO;IACP,QAAQ;GACV;GACA,KAAK;IACH,OAAO;IACP,QAAQ;GACV;EACF;EACA,SAAS;GACP,MAAM,EACJ,iBAAiB,UACnB;GACA,KAAK,EACH,iBAAiB,QACnB;GACA,QAAQ,EACN,iBAAiB,WACnB;GACA,MAAM,EACJ,iBAAiB,SACnB;GACA,OAAO,EACL,iBAAiB,UACnB;GACA,QAAQ,EACN,iBAAiB,WACnB;EACF;EACA,OAAO;GACL,QAAQ,EACN,cAAc,KAChB;GACA,QAAQ,EACN,cAAc,MAChB;EACF;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;EACT,OAAO;CACT;AACF,CAAC;AAED,IAAM,oBAAoB,wBAAA,OAAO,uBAAgB,OAAO;CACtD,SAAS;CACT,WAAW;CACX,WAAW;CACX,QAAQ;CACR,eAAe;CACf,OAAO;AACT,CAAC;AAED,IAAM,uBAAuB,wBAAA,OAAO,uBAAgB,UAAU;CAC5D,eAAe;CACf,YAAY;CACZ,OAAO;CAEP,UAAU,EACR,MAAM;EACJ,KAAK;GACH,UAAU;GACV,YAAY;EACd;EACA,KAAK,EACH,UAAU,KACZ;EACA,KAAK,EACH,UAAU,KACZ;EACA,KAAK,EACH,UAAU,KACZ;EACA,KAAK,EACH,UAAU,KACZ;EACA,KAAK,EACH,UAAU,KACZ;CACF,EACF;CACA,iBAAiB,EACf,MAAM,IACR;AACF,CAAC;AAaD,IAAa,SAAS,MAAA,QAAM,YACzB,EAAE,KAAK,KAAK,UAAU,MAAM,SAAS,OAAO,KAAK,GAAG,SAAS,iBAAiB;CAC7E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAA,KAAD;EACE,KAAK;GACH,GAAG;GACH,UAAU;GACV,QAAQ;GACR,OAAO;EACT;YAEA,iBAAA,GAAA,kBAAA,KAAA,CAAC,cAAD;GAAc,GAAI;GAAO,KAAK;GAAoB;GAAe;GAAgB;aAAjF,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;IAAwB;IAAU;GAAM,CAAA,GACxC,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAD;IAA4B;cAAO;GAA+B,CAAA,CACtD;;CACX,CAAA;AAET,CACF"}
+{"version":3,"file":"Avatar.cjs","names":["styled","AvatarPrimitive","React","Box"],"sources":["../../../components/Avatar/Avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\n\nconst StyledAvatar = styled(AvatarPrimitive.Root, {\n  alignItems: 'center',\n  justifyContent: 'center',\n  verticalAlign: 'middle',\n  overflow: 'hidden',\n  userSelect: 'none',\n  boxSizing: 'border-box',\n  display: 'flex',\n  flexShrink: 0,\n  position: 'relative',\n  border: 'none',\n  fontFamily: 'inherit',\n  lineHeight: '1',\n  margin: '0',\n  outline: 'none',\n  padding: '0',\n  fontWeight: '$medium',\n  color: '$hiContrast',\n\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    borderRadius: 'inherit',\n    boxShadow: 'inset 0px 0px 1px rgba(0, 0, 0, 0.12)',\n  },\n\n  variants: {\n    size: {\n      '1': {\n        width: '$3',\n        height: '$3',\n      },\n      '2': {\n        width: '$5',\n        height: '$5',\n      },\n      '3': {\n        width: '$6',\n        height: '$6',\n      },\n      '4': {\n        width: '$7',\n        height: '$7',\n      },\n      '5': {\n        width: '$8',\n        height: '$8',\n      },\n      '6': {\n        width: '$9',\n        height: '$9',\n      },\n    },\n    variant: {\n      gray: {\n        backgroundColor: '$slate5',\n      },\n      red: {\n        backgroundColor: '$red5',\n      },\n      purple: {\n        backgroundColor: '$purple5',\n      },\n      blue: {\n        backgroundColor: '$blue5',\n      },\n      green: {\n        backgroundColor: '$green5',\n      },\n      orange: {\n        backgroundColor: '$orange5',\n      },\n    },\n    shape: {\n      square: {\n        borderRadius: '$2',\n      },\n      circle: {\n        borderRadius: '50%',\n      },\n    },\n  },\n  defaultVariants: {\n    size: '2',\n    variant: 'gray',\n    shape: 'circle',\n  },\n});\n\nconst StyledAvatarImage = styled(AvatarPrimitive.Image, {\n  display: 'flex',\n  objectFit: 'cover',\n  boxSizing: 'border-box',\n  height: '100%',\n  verticalAlign: 'middle',\n  width: '100%',\n});\n\nconst StyledAvatarFallback = styled(AvatarPrimitive.Fallback, {\n  textTransform: 'uppercase',\n  fontFamily: '$rubik',\n  color: '$deepBlue10',\n\n  variants: {\n    size: {\n      '1': {\n        fontSize: '10px',\n        lineHeight: '15px',\n      },\n      '2': {\n        fontSize: '$3',\n      },\n      '3': {\n        fontSize: '$6',\n      },\n      '4': {\n        fontSize: '$7',\n      },\n      '5': {\n        fontSize: '$8',\n      },\n      '6': {\n        fontSize: '$9',\n      },\n    },\n  },\n  defaultVariants: {\n    size: '2',\n  },\n});\n\ntype AvatarVariants = VariantProps<typeof StyledAvatar>;\ntype AvatarPrimitiveProps = Omit<React.ComponentProps<typeof AvatarPrimitive.Root>, 'as'>;\ntype AvatarOwnProps = AvatarPrimitiveProps &\n  AvatarVariants & {\n    css?: CSS;\n    alt?: string;\n    src?: string;\n    fallback?: React.ReactNode;\n    // status?: StatusColors['variant'];\n  };\n\nexport const Avatar = React.forwardRef<React.ElementRef<typeof StyledAvatar>, AvatarOwnProps>(\n  ({ alt, src, fallback, size, variant, shape, css, ...props }, forwardedRef) => {\n    return (\n      <Box\n        css={{\n          ...css,\n          position: 'relative',\n          height: 'fit-content',\n          width: 'fit-content',\n        }}\n      >\n        <StyledAvatar {...props} ref={forwardedRef} size={size} variant={variant} shape={shape}>\n          <StyledAvatarImage alt={alt} src={src} />\n          <StyledAvatarFallback size={size}>{fallback}</StyledAvatarFallback>\n        </StyledAvatar>\n      </Box>\n    );\n  }\n);\n"],"mappings":";;;;;;;;;AAMA,IAAM,eAAeA,wBAAAA,OAAOC,uBAAgB,MAAM;CAChD,YAAY;CACZ,gBAAgB;CAChB,eAAe;CACf,UAAU;CACV,YAAY;CACZ,WAAW;CACX,SAAS;CACT,YAAY;CACZ,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,SAAS;CACT,YAAY;CACZ,OAAO;CAEP,aAAa;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,cAAc;EACd,WAAW;CACb;CAEA,UAAU;EACR,MAAM;GACJ,KAAK;IACH,OAAO;IACP,QAAQ;GACV;GACA,KAAK;IACH,OAAO;IACP,QAAQ;GACV;GACA,KAAK;IACH,OAAO;IACP,QAAQ;GACV;GACA,KAAK;IACH,OAAO;IACP,QAAQ;GACV;GACA,KAAK;IACH,OAAO;IACP,QAAQ;GACV;GACA,KAAK;IACH,OAAO;IACP,QAAQ;GACV;EACF;EACA,SAAS;GACP,MAAM,EACJ,iBAAiB,UACnB;GACA,KAAK,EACH,iBAAiB,QACnB;GACA,QAAQ,EACN,iBAAiB,WACnB;GACA,MAAM,EACJ,iBAAiB,SACnB;GACA,OAAO,EACL,iBAAiB,UACnB;GACA,QAAQ,EACN,iBAAiB,WACnB;EACF;EACA,OAAO;GACL,QAAQ,EACN,cAAc,KAChB;GACA,QAAQ,EACN,cAAc,MAChB;EACF;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;EACT,OAAO;CACT;AACF,CAAC;AAED,IAAM,oBAAoBD,wBAAAA,OAAOC,uBAAgB,OAAO;CACtD,SAAS;CACT,WAAW;CACX,WAAW;CACX,QAAQ;CACR,eAAe;CACf,OAAO;AACT,CAAC;AAED,IAAM,uBAAuBD,wBAAAA,OAAOC,uBAAgB,UAAU;CAC5D,eAAe;CACf,YAAY;CACZ,OAAO;CAEP,UAAU,EACR,MAAM;EACJ,KAAK;GACH,UAAU;GACV,YAAY;EACd;EACA,KAAK,EACH,UAAU,KACZ;EACA,KAAK,EACH,UAAU,KACZ;EACA,KAAK,EACH,UAAU,KACZ;EACA,KAAK,EACH,UAAU,KACZ;EACA,KAAK,EACH,UAAU,KACZ;CACF,EACF;CACA,iBAAiB,EACf,MAAM,IACR;AACF,CAAC;AAaD,IAAa,SAASC,MAAAA,QAAM,YACzB,EAAE,KAAK,KAAK,UAAU,MAAM,SAAS,OAAO,KAAK,GAAG,SAAS,iBAAiB;CAC7E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,KAAK;GACH,GAAG;GACH,UAAU;GACV,QAAQ;GACR,OAAO;EACT;EAEA,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,cAAD;GAAc,GAAI;GAAO,KAAK;GAAoB;GAAe;GAAgB;GAAjF,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;IAAwB;IAAU;GAAM,CAAA,GACxC,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAD;IAA4B;IAAO,UAAA;GAA+B,CAAA,CACtD;;CACX,CAAA;AAET,CACF"}

package/dist/components/Avatar/Avatar.js

@@ -3,7 +3,7 @@ import { Box } from "../Box/Box.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-//#region components/Avatar/Avatar.tsx
+// components/Avatar/Avatar.tsx
 var StyledAvatar = styled(AvatarPrimitive.Root, {
 	alignItems: "center",
 	justifyContent: "center",
@@ -127,7 +127,6 @@ var Avatar = React.forwardRef(({ alt, src, fallback, size, variant, shape, css,
 		})
 	});
 });
-//#endregion
 export { Avatar };
 
 //# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":[],"sources":["../../../components/Avatar/Avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\n\nconst StyledAvatar = styled(AvatarPrimitive.Root, {\n  alignItems: 'center',\n  justifyContent: 'center',\n  verticalAlign: 'middle',\n  overflow: 'hidden',\n  userSelect: 'none',\n  boxSizing: 'border-box',\n  display: 'flex',\n  flexShrink: 0,\n  position: 'relative',\n  border: 'none',\n  fontFamily: 'inherit',\n  lineHeight: '1',\n  margin: '0',\n  outline: 'none',\n  padding: '0',\n  fontWeight: '$medium',\n  color: '$hiContrast',\n\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    borderRadius: 'inherit',\n    boxShadow: 'inset 0px 0px 1px rgba(0, 0, 0, 0.12)',\n  },\n\n  variants: {\n    size: {\n      '1': {\n        width: '$3',\n        height: '$3',\n      },\n      '2': {\n        width: '$5',\n        height: '$5',\n      },\n      '3': {\n        width: '$6',\n        height: '$6',\n      },\n      '4': {\n        width: '$7',\n        height: '$7',\n      },\n      '5': {\n        width: '$8',\n        height: '$8',\n      },\n      '6': {\n        width: '$9',\n        height: '$9',\n      },\n    },\n    variant: {\n      gray: {\n        backgroundColor: '$slate5',\n      },\n      red: {\n        backgroundColor: '$red5',\n      },\n      purple: {\n        backgroundColor: '$purple5',\n      },\n      blue: {\n        backgroundColor: '$blue5',\n      },\n      green: {\n        backgroundColor: '$green5',\n      },\n      orange: {\n        backgroundColor: '$orange5',\n      },\n    },\n    shape: {\n      square: {\n        borderRadius: '$2',\n      },\n      circle: {\n        borderRadius: '50%',\n      },\n    },\n  },\n  defaultVariants: {\n    size: '2',\n    variant: 'gray',\n    shape: 'circle',\n  },\n});\n\nconst StyledAvatarImage = styled(AvatarPrimitive.Image, {\n  display: 'flex',\n  objectFit: 'cover',\n  boxSizing: 'border-box',\n  height: '100%',\n  verticalAlign: 'middle',\n  width: '100%',\n});\n\nconst StyledAvatarFallback = styled(AvatarPrimitive.Fallback, {\n  textTransform: 'uppercase',\n  fontFamily: '$rubik',\n  color: '$deepBlue10',\n\n  variants: {\n    size: {\n      '1': {\n        fontSize: '10px',\n        lineHeight: '15px',\n      },\n      '2': {\n        fontSize: '$3',\n      },\n      '3': {\n        fontSize: '$6',\n      },\n      '4': {\n        fontSize: '$7',\n      },\n      '5': {\n        fontSize: '$8',\n      },\n      '6': {\n        fontSize: '$9',\n      },\n    },\n  },\n  defaultVariants: {\n    size: '2',\n  },\n});\n\ntype AvatarVariants = VariantProps<typeof StyledAvatar>;\ntype AvatarPrimitiveProps = Omit<React.ComponentProps<typeof AvatarPrimitive.Root>, 'as'>;\ntype AvatarOwnProps = AvatarPrimitiveProps &\n  AvatarVariants & {\n    css?: CSS;\n    alt?: string;\n    src?: string;\n    fallback?: React.ReactNode;\n    // status?: StatusColors['variant'];\n  };\n\nexport const Avatar = React.forwardRef<React.ElementRef<typeof StyledAvatar>, AvatarOwnProps>(\n  ({ alt, src, fallback, size, variant, shape, css, ...props }, forwardedRef) => {\n    return (\n      <Box\n        css={{\n          ...css,\n          position: 'relative',\n          height: 'fit-content',\n          width: 'fit-content',\n        }}\n      >\n        <StyledAvatar {...props} ref={forwardedRef} size={size} variant={variant} shape={shape}>\n          <StyledAvatarImage alt={alt} src={src} />\n          <StyledAvatarFallback size={size}>{fallback}</StyledAvatarFallback>\n        </StyledAvatar>\n      </Box>\n    );\n  }\n);\n"],"mappings":";;;;;;AAMA,IAAM,eAAe,OAAO,gBAAgB,MAAM;CAChD,YAAY;CACZ,gBAAgB;CAChB,eAAe;CACf,UAAU;CACV,YAAY;CACZ,WAAW;CACX,SAAS;CACT,YAAY;CACZ,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,SAAS;CACT,YAAY;CACZ,OAAO;CAEP,aAAa;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,cAAc;EACd,WAAW;CACb;CAEA,UAAU;EACR,MAAM;GACJ,KAAK;IACH,OAAO;IACP,QAAQ;GACV;GACA,KAAK;IACH,OAAO;IACP,QAAQ;GACV;GACA,KAAK;IACH,OAAO;IACP,QAAQ;GACV;GACA,KAAK;IACH,OAAO;IACP,QAAQ;GACV;GACA,KAAK;IACH,OAAO;IACP,QAAQ;GACV;GACA,KAAK;IACH,OAAO;IACP,QAAQ;GACV;EACF;EACA,SAAS;GACP,MAAM,EACJ,iBAAiB,UACnB;GACA,KAAK,EACH,iBAAiB,QACnB;GACA,QAAQ,EACN,iBAAiB,WACnB;GACA,MAAM,EACJ,iBAAiB,SACnB;GACA,OAAO,EACL,iBAAiB,UACnB;GACA,QAAQ,EACN,iBAAiB,WACnB;EACF;EACA,OAAO;GACL,QAAQ,EACN,cAAc,KAChB;GACA,QAAQ,EACN,cAAc,MAChB;EACF;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;EACT,OAAO;CACT;AACF,CAAC;AAED,IAAM,oBAAoB,OAAO,gBAAgB,OAAO;CACtD,SAAS;CACT,WAAW;CACX,WAAW;CACX,QAAQ;CACR,eAAe;CACf,OAAO;AACT,CAAC;AAED,IAAM,uBAAuB,OAAO,gBAAgB,UAAU;CAC5D,eAAe;CACf,YAAY;CACZ,OAAO;CAEP,UAAU,EACR,MAAM;EACJ,KAAK;GACH,UAAU;GACV,YAAY;EACd;EACA,KAAK,EACH,UAAU,KACZ;EACA,KAAK,EACH,UAAU,KACZ;EACA,KAAK,EACH,UAAU,KACZ;EACA,KAAK,EACH,UAAU,KACZ;EACA,KAAK,EACH,UAAU,KACZ;CACF,EACF;CACA,iBAAiB,EACf,MAAM,IACR;AACF,CAAC;AAaD,IAAa,SAAS,MAAM,YACzB,EAAE,KAAK,KAAK,UAAU,MAAM,SAAS,OAAO,KAAK,GAAG,SAAS,iBAAiB;CAC7E,OACE,oBAAC,KAAD;EACE,KAAK;GACH,GAAG;GACH,UAAU;GACV,QAAQ;GACR,OAAO;EACT;YAEA,qBAAC,cAAD;GAAc,GAAI;GAAO,KAAK;GAAoB;GAAe;GAAgB;aAAjF,CACE,oBAAC,mBAAD;IAAwB;IAAU;GAAM,CAAA,GACxC,oBAAC,sBAAD;IAA4B;cAAO;GAA+B,CAAA,CACtD;;CACX,CAAA;AAET,CACF"}
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../components/Avatar/Avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Box } from '../Box';\n\nconst StyledAvatar = styled(AvatarPrimitive.Root, {\n  alignItems: 'center',\n  justifyContent: 'center',\n  verticalAlign: 'middle',\n  overflow: 'hidden',\n  userSelect: 'none',\n  boxSizing: 'border-box',\n  display: 'flex',\n  flexShrink: 0,\n  position: 'relative',\n  border: 'none',\n  fontFamily: 'inherit',\n  lineHeight: '1',\n  margin: '0',\n  outline: 'none',\n  padding: '0',\n  fontWeight: '$medium',\n  color: '$hiContrast',\n\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    borderRadius: 'inherit',\n    boxShadow: 'inset 0px 0px 1px rgba(0, 0, 0, 0.12)',\n  },\n\n  variants: {\n    size: {\n      '1': {\n        width: '$3',\n        height: '$3',\n      },\n      '2': {\n        width: '$5',\n        height: '$5',\n      },\n      '3': {\n        width: '$6',\n        height: '$6',\n      },\n      '4': {\n        width: '$7',\n        height: '$7',\n      },\n      '5': {\n        width: '$8',\n        height: '$8',\n      },\n      '6': {\n        width: '$9',\n        height: '$9',\n      },\n    },\n    variant: {\n      gray: {\n        backgroundColor: '$slate5',\n      },\n      red: {\n        backgroundColor: '$red5',\n      },\n      purple: {\n        backgroundColor: '$purple5',\n      },\n      blue: {\n        backgroundColor: '$blue5',\n      },\n      green: {\n        backgroundColor: '$green5',\n      },\n      orange: {\n        backgroundColor: '$orange5',\n      },\n    },\n    shape: {\n      square: {\n        borderRadius: '$2',\n      },\n      circle: {\n        borderRadius: '50%',\n      },\n    },\n  },\n  defaultVariants: {\n    size: '2',\n    variant: 'gray',\n    shape: 'circle',\n  },\n});\n\nconst StyledAvatarImage = styled(AvatarPrimitive.Image, {\n  display: 'flex',\n  objectFit: 'cover',\n  boxSizing: 'border-box',\n  height: '100%',\n  verticalAlign: 'middle',\n  width: '100%',\n});\n\nconst StyledAvatarFallback = styled(AvatarPrimitive.Fallback, {\n  textTransform: 'uppercase',\n  fontFamily: '$rubik',\n  color: '$deepBlue10',\n\n  variants: {\n    size: {\n      '1': {\n        fontSize: '10px',\n        lineHeight: '15px',\n      },\n      '2': {\n        fontSize: '$3',\n      },\n      '3': {\n        fontSize: '$6',\n      },\n      '4': {\n        fontSize: '$7',\n      },\n      '5': {\n        fontSize: '$8',\n      },\n      '6': {\n        fontSize: '$9',\n      },\n    },\n  },\n  defaultVariants: {\n    size: '2',\n  },\n});\n\ntype AvatarVariants = VariantProps<typeof StyledAvatar>;\ntype AvatarPrimitiveProps = Omit<React.ComponentProps<typeof AvatarPrimitive.Root>, 'as'>;\ntype AvatarOwnProps = AvatarPrimitiveProps &\n  AvatarVariants & {\n    css?: CSS;\n    alt?: string;\n    src?: string;\n    fallback?: React.ReactNode;\n    // status?: StatusColors['variant'];\n  };\n\nexport const Avatar = React.forwardRef<React.ElementRef<typeof StyledAvatar>, AvatarOwnProps>(\n  ({ alt, src, fallback, size, variant, shape, css, ...props }, forwardedRef) => {\n    return (\n      <Box\n        css={{\n          ...css,\n          position: 'relative',\n          height: 'fit-content',\n          width: 'fit-content',\n        }}\n      >\n        <StyledAvatar {...props} ref={forwardedRef} size={size} variant={variant} shape={shape}>\n          <StyledAvatarImage alt={alt} src={src} />\n          <StyledAvatarFallback size={size}>{fallback}</StyledAvatarFallback>\n        </StyledAvatar>\n      </Box>\n    );\n  }\n);\n"],"mappings":";;;;;;AAMA,IAAM,eAAe,OAAO,gBAAgB,MAAM;CAChD,YAAY;CACZ,gBAAgB;CAChB,eAAe;CACf,UAAU;CACV,YAAY;CACZ,WAAW;CACX,SAAS;CACT,YAAY;CACZ,UAAU;CACV,QAAQ;CACR,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,SAAS;CACT,YAAY;CACZ,OAAO;CAEP,aAAa;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,cAAc;EACd,WAAW;CACb;CAEA,UAAU;EACR,MAAM;GACJ,KAAK;IACH,OAAO;IACP,QAAQ;GACV;GACA,KAAK;IACH,OAAO;IACP,QAAQ;GACV;GACA,KAAK;IACH,OAAO;IACP,QAAQ;GACV;GACA,KAAK;IACH,OAAO;IACP,QAAQ;GACV;GACA,KAAK;IACH,OAAO;IACP,QAAQ;GACV;GACA,KAAK;IACH,OAAO;IACP,QAAQ;GACV;EACF;EACA,SAAS;GACP,MAAM,EACJ,iBAAiB,UACnB;GACA,KAAK,EACH,iBAAiB,QACnB;GACA,QAAQ,EACN,iBAAiB,WACnB;GACA,MAAM,EACJ,iBAAiB,SACnB;GACA,OAAO,EACL,iBAAiB,UACnB;GACA,QAAQ,EACN,iBAAiB,WACnB;EACF;EACA,OAAO;GACL,QAAQ,EACN,cAAc,KAChB;GACA,QAAQ,EACN,cAAc,MAChB;EACF;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;EACT,OAAO;CACT;AACF,CAAC;AAED,IAAM,oBAAoB,OAAO,gBAAgB,OAAO;CACtD,SAAS;CACT,WAAW;CACX,WAAW;CACX,QAAQ;CACR,eAAe;CACf,OAAO;AACT,CAAC;AAED,IAAM,uBAAuB,OAAO,gBAAgB,UAAU;CAC5D,eAAe;CACf,YAAY;CACZ,OAAO;CAEP,UAAU,EACR,MAAM;EACJ,KAAK;GACH,UAAU;GACV,YAAY;EACd;EACA,KAAK,EACH,UAAU,KACZ;EACA,KAAK,EACH,UAAU,KACZ;EACA,KAAK,EACH,UAAU,KACZ;EACA,KAAK,EACH,UAAU,KACZ;EACA,KAAK,EACH,UAAU,KACZ;CACF,EACF;CACA,iBAAiB,EACf,MAAM,IACR;AACF,CAAC;AAaD,IAAa,SAAS,MAAM,YACzB,EAAE,KAAK,KAAK,UAAU,MAAM,SAAS,OAAO,KAAK,GAAG,SAAS,iBAAiB;CAC7E,OACE,oBAAC,KAAD;EACE,KAAK;GACH,GAAG;GACH,UAAU;GACV,QAAQ;GACR,OAAO;EACT;EAEA,UAAA,qBAAC,cAAD;GAAc,GAAI;GAAO,KAAK;GAAoB;GAAe;GAAgB;GAAjF,UAAA,CACE,oBAAC,mBAAD;IAAwB;IAAU;GAAM,CAAA,GACxC,oBAAC,sBAAD;IAA4B;IAAO,UAAA;GAA+B,CAAA,CACtD;;CACX,CAAA;AAET,CACF"}

package/dist/components/Avatar/Avatar.vanilla.cjs

@@ -6,7 +6,7 @@ react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _radix_ui_react_avatar = require("@radix-ui/react-avatar");
 _radix_ui_react_avatar = require_runtime.__toESM(_radix_ui_react_avatar, 1);
-//#region components/Avatar/Avatar.vanilla.tsx
+// components/Avatar/Avatar.vanilla.tsx
 var AvatarVanillaComponent = (0, react.forwardRef)(({ alt, src, fallback, size, variant, shape, css, style, ...props }, ref) => {
 	const recipeClass = require_Avatar_vanilla_css.avatarRecipe({
 		size,
@@ -14,13 +14,14 @@ var AvatarVanillaComponent = (0, react.forwardRef)(({ alt, src, fallback, size,
 		shape
 	});
 	const fallbackRecipeClass = require_Avatar_vanilla_css.avatarFallbackRecipe({ size });
+	const wrapperCss = {
+		...css,
+		position: "relative",
+		height: "fit-content",
+		width: "fit-content"
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box_vanilla.BoxVanilla, {
-		css: {
-			...css,
-			position: "relative",
-			height: "fit-content",
-			width: "fit-content"
-		},
+		css: wrapperCss,
 		style,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_avatar.Root, {
 			ref,
@@ -39,7 +40,6 @@ var AvatarVanillaComponent = (0, react.forwardRef)(({ alt, src, fallback, size,
 });
 AvatarVanillaComponent.displayName = "AvatarVanilla";
 var AvatarVanilla = AvatarVanillaComponent;
-//#endregion
 exports.AvatarVanilla = AvatarVanilla;
 
 //# sourceMappingURL=Avatar.vanilla.cjs.map

package/dist/components/Avatar/Avatar.vanilla.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.vanilla.cjs","names":[],"sources":["../../../components/Avatar/Avatar.vanilla.tsx"],"sourcesContent":["import * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport React, { forwardRef } from 'react';\n\nimport { CSSProps } from '../../styles/cssProps';\nimport { BoxVanilla } from '../Box/Box.vanilla';\nimport { avatarFallbackRecipe, avatarImage, avatarRecipe } from './Avatar.vanilla.css';\n\ntype AvatarRecipeVariants = NonNullable<RecipeVariants<typeof avatarRecipe>>;\n\ninterface AvatarOwnProps extends AvatarRecipeVariants, CSSProps {\n  alt?: string;\n  src?: string;\n  fallback?: React.ReactNode;\n}\n\nexport type AvatarVanillaProps = Omit<\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n  keyof AvatarOwnProps\n> &\n  AvatarOwnProps;\n\nconst AvatarVanillaComponent = forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarVanillaProps\n>(({ alt, src, fallback, size, variant, shape, css, style, ...props }, ref) => {\n  const recipeClass = avatarRecipe({ size, variant, shape });\n  const fallbackRecipeClass = avatarFallbackRecipe({ size });\n\n  // This CSS will be processed by the Box component\n  const wrapperCss = {\n    ...css,\n    position: 'relative' as const,\n    height: 'fit-content' as const,\n    width: 'fit-content' as const,\n  };\n\n  return (\n    <BoxVanilla css={wrapperCss} style={style}>\n      <AvatarPrimitive.Root ref={ref} className={recipeClass} {...props}>\n        <AvatarPrimitive.Image className={avatarImage} alt={alt} src={src} />\n        <AvatarPrimitive.Fallback className={fallbackRecipeClass}>\n          {fallback}\n        </AvatarPrimitive.Fallback>\n      </AvatarPrimitive.Root>\n    </BoxVanilla>\n  );\n});\n\nAvatarVanillaComponent.displayName = 'AvatarVanilla';\n\nexport const AvatarVanilla = AvatarVanillaComponent;\n"],"mappings":";;;;;;;;;AAsBA,IAAM,0BAAA,GAAA,MAAA,WAAA,EAGH,EAAE,KAAK,KAAK,UAAU,MAAM,SAAS,OAAO,KAAK,OAAO,GAAG,SAAS,QAAQ;CAC7E,MAAM,cAAc,2BAAA,aAAa;EAAE;EAAM;EAAS;CAAM,CAAC;CACzD,MAAM,sBAAsB,2BAAA,qBAAqB,EAAE,KAAK,CAAC;CAUzD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,oBAAA,YAAD;EAAY,KAAK;GAPjB,GAAG;GACH,UAAU;GACV,QAAQ;GACR,OAAO;EAIU;EAAmB;YAClC,iBAAA,GAAA,kBAAA,KAAA,CAAC,uBAAgB,MAAjB;GAA2B;GAAK,WAAW;GAAa,GAAI;aAA5D,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAgB,OAAjB;IAAuB,WAAW,2BAAA;IAAkB;IAAU;GAAM,CAAA,GACpE,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAgB,UAAjB;IAA0B,WAAW;cAClC;GACuB,CAAA,CACN;;CACZ,CAAA;AAEhB,CAAC;AAED,uBAAuB,cAAc;AAErC,IAAa,gBAAgB"}
+{"version":3,"file":"Avatar.vanilla.cjs","names":["forwardRef","avatarRecipe","avatarFallbackRecipe","BoxVanilla","AvatarPrimitive","avatarImage"],"sources":["../../../components/Avatar/Avatar.vanilla.tsx"],"sourcesContent":["import * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport React, { forwardRef } from 'react';\n\nimport { CSSProps } from '../../styles/cssProps';\nimport { BoxVanilla } from '../Box/Box.vanilla';\nimport { avatarFallbackRecipe, avatarImage, avatarRecipe } from './Avatar.vanilla.css';\n\ntype AvatarRecipeVariants = NonNullable<RecipeVariants<typeof avatarRecipe>>;\n\ninterface AvatarOwnProps extends AvatarRecipeVariants, CSSProps {\n  alt?: string;\n  src?: string;\n  fallback?: React.ReactNode;\n}\n\nexport type AvatarVanillaProps = Omit<\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n  keyof AvatarOwnProps\n> &\n  AvatarOwnProps;\n\nconst AvatarVanillaComponent = forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarVanillaProps\n>(({ alt, src, fallback, size, variant, shape, css, style, ...props }, ref) => {\n  const recipeClass = avatarRecipe({ size, variant, shape });\n  const fallbackRecipeClass = avatarFallbackRecipe({ size });\n\n  // This CSS will be processed by the Box component\n  const wrapperCss = {\n    ...css,\n    position: 'relative' as const,\n    height: 'fit-content' as const,\n    width: 'fit-content' as const,\n  };\n\n  return (\n    <BoxVanilla css={wrapperCss} style={style}>\n      <AvatarPrimitive.Root ref={ref} className={recipeClass} {...props}>\n        <AvatarPrimitive.Image className={avatarImage} alt={alt} src={src} />\n        <AvatarPrimitive.Fallback className={fallbackRecipeClass}>\n          {fallback}\n        </AvatarPrimitive.Fallback>\n      </AvatarPrimitive.Root>\n    </BoxVanilla>\n  );\n});\n\nAvatarVanillaComponent.displayName = 'AvatarVanilla';\n\nexport const AvatarVanilla = AvatarVanillaComponent;\n"],"mappings":";;;;;;;;;AAsBA,IAAM,0BAAA,GAAyBA,MAAAA,WAAAA,EAG5B,EAAE,KAAK,KAAK,UAAU,MAAM,SAAS,OAAO,KAAK,OAAO,GAAG,SAAS,QAAQ;CAC7E,MAAM,cAAcC,2BAAAA,aAAa;EAAE;EAAM;EAAS;CAAM,CAAC;CACzD,MAAM,sBAAsBC,2BAAAA,qBAAqB,EAAE,KAAK,CAAC;CAGzD,MAAM,aAAa;EACjB,GAAG;EACH,UAAU;EACV,QAAQ;EACR,OAAO;CACT;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAD;EAAY,KAAK;EAAmB;EAClC,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACC,uBAAgB,MAAjB;GAA2B;GAAK,WAAW;GAAa,GAAI;GAA5D,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAgB,OAAjB;IAAuB,WAAWC,2BAAAA;IAAkB;IAAU;GAAM,CAAA,GACpE,iBAAA,GAAA,kBAAA,IAAA,CAACD,uBAAgB,UAAjB;IAA0B,WAAW;IAClC,UAAA;GACuB,CAAA,CACN;;CACZ,CAAA;AAEhB,CAAC;AAED,uBAAuB,cAAc;AAErC,IAAa,gBAAgB"}

package/dist/components/Avatar/Avatar.vanilla.css.cjs

@@ -1,6 +1,6 @@
 ;/* empty css                                    */
 let _vanilla_extract_recipes_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-//#region components/Avatar/Avatar.vanilla.css.ts
+// components/Avatar/Avatar.vanilla.css.ts
 var avatarRecipe = (0, _vanilla_extract_recipes_createRuntimeFn.createRuntimeFn)({
 	defaultClassName: "_7on54e1 _7on54e0",
 	variantClassNames: {
@@ -46,7 +46,6 @@ var avatarFallbackRecipe = (0, _vanilla_extract_recipes_createRuntimeFn.createRu
 	defaultVariants: { size: "2" },
 	compoundVariants: []
 });
-//#endregion
 exports.avatarFallbackRecipe = avatarFallbackRecipe;
 exports.avatarImage = avatarImage;
 exports.avatarRecipe = avatarRecipe;

package/dist/components/Avatar/Avatar.vanilla.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.vanilla.css.cjs","names":[],"sources":["../../../components/Avatar/Avatar.vanilla.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { tokens } from '../../styles/tokens.css';\n\nconst avatarRoot = style({\n  alignItems: 'center',\n  justifyContent: 'center',\n  verticalAlign: 'middle',\n  overflow: 'hidden',\n  userSelect: 'none',\n  boxSizing: 'border-box',\n  display: 'flex',\n  flexShrink: 0,\n  position: 'relative',\n  border: 'none',\n  fontFamily: 'inherit',\n  lineHeight: '1',\n  margin: '0',\n  outline: 'none',\n  padding: '0',\n  fontWeight: tokens.fontWeights.medium,\n  color: tokens.colors.hiContrast,\n\n  selectors: {\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      borderRadius: 'inherit',\n      boxShadow: 'inset 0px 0px 1px rgba(0, 0, 0, 0.12)',\n    },\n  },\n});\n\nexport const avatarRecipe = recipe({\n  base: avatarRoot,\n\n  variants: {\n    size: {\n      '1': {\n        width: tokens.sizes['3'],\n        height: tokens.sizes['3'],\n      },\n      '2': {\n        width: tokens.sizes['5'],\n        height: tokens.sizes['5'],\n      },\n      '3': {\n        width: tokens.sizes['6'],\n        height: tokens.sizes['6'],\n      },\n      '4': {\n        width: tokens.sizes['7'],\n        height: tokens.sizes['7'],\n      },\n      '5': {\n        width: tokens.sizes['8'],\n        height: tokens.sizes['8'],\n      },\n      '6': {\n        width: tokens.sizes['9'],\n        height: tokens.sizes['9'],\n      },\n    },\n    variant: {\n      gray: {\n        backgroundColor: tokens.colors.slate['5'],\n      },\n      red: {\n        backgroundColor: tokens.colors.red['5'],\n      },\n      purple: {\n        backgroundColor: tokens.colors.purple['5'],\n      },\n      blue: {\n        backgroundColor: tokens.colors.blue['5'],\n      },\n      green: {\n        backgroundColor: tokens.colors.green['5'],\n      },\n      orange: {\n        backgroundColor: tokens.colors.orange['5'],\n      },\n    },\n    shape: {\n      square: {\n        borderRadius: tokens.radii['2'],\n      },\n      circle: {\n        borderRadius: '50%',\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '2',\n    variant: 'gray',\n    shape: 'circle',\n  },\n});\n\nexport const avatarImage = style({\n  display: 'flex',\n  objectFit: 'cover',\n  boxSizing: 'border-box',\n  height: '100%',\n  verticalAlign: 'middle',\n  width: '100%',\n});\n\nconst avatarFallbackBase = style({\n  textTransform: 'uppercase',\n  fontFamily: tokens.fonts.rubik,\n  color: tokens.colors.deepBlue['10'],\n});\n\nexport const avatarFallbackRecipe = recipe({\n  base: avatarFallbackBase,\n\n  variants: {\n    size: {\n      '1': {\n        fontSize: '10px',\n        lineHeight: '15px',\n      },\n      '2': {\n        fontSize: tokens.fontSizes['3'],\n      },\n      '3': {\n        fontSize: tokens.fontSizes['6'],\n      },\n      '4': {\n        fontSize: tokens.fontSizes['7'],\n      },\n      '5': {\n        fontSize: tokens.fontSizes['8'],\n      },\n      '6': {\n        fontSize: tokens.fontSizes['9'],\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '2',\n  },\n});\n"],"mappings":""}
+{"version":3,"file":"Avatar.vanilla.css.cjs","names":["_7a468"],"sources":["../../../components/Avatar/Avatar.vanilla.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { tokens } from '../../styles/tokens.css';\n\nconst avatarRoot = style({\n  alignItems: 'center',\n  justifyContent: 'center',\n  verticalAlign: 'middle',\n  overflow: 'hidden',\n  userSelect: 'none',\n  boxSizing: 'border-box',\n  display: 'flex',\n  flexShrink: 0,\n  position: 'relative',\n  border: 'none',\n  fontFamily: 'inherit',\n  lineHeight: '1',\n  margin: '0',\n  outline: 'none',\n  padding: '0',\n  fontWeight: tokens.fontWeights.medium,\n  color: tokens.colors.hiContrast,\n\n  selectors: {\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      borderRadius: 'inherit',\n      boxShadow: 'inset 0px 0px 1px rgba(0, 0, 0, 0.12)',\n    },\n  },\n});\n\nexport const avatarRecipe = recipe({\n  base: avatarRoot,\n\n  variants: {\n    size: {\n      '1': {\n        width: tokens.sizes['3'],\n        height: tokens.sizes['3'],\n      },\n      '2': {\n        width: tokens.sizes['5'],\n        height: tokens.sizes['5'],\n      },\n      '3': {\n        width: tokens.sizes['6'],\n        height: tokens.sizes['6'],\n      },\n      '4': {\n        width: tokens.sizes['7'],\n        height: tokens.sizes['7'],\n      },\n      '5': {\n        width: tokens.sizes['8'],\n        height: tokens.sizes['8'],\n      },\n      '6': {\n        width: tokens.sizes['9'],\n        height: tokens.sizes['9'],\n      },\n    },\n    variant: {\n      gray: {\n        backgroundColor: tokens.colors.slate['5'],\n      },\n      red: {\n        backgroundColor: tokens.colors.red['5'],\n      },\n      purple: {\n        backgroundColor: tokens.colors.purple['5'],\n      },\n      blue: {\n        backgroundColor: tokens.colors.blue['5'],\n      },\n      green: {\n        backgroundColor: tokens.colors.green['5'],\n      },\n      orange: {\n        backgroundColor: tokens.colors.orange['5'],\n      },\n    },\n    shape: {\n      square: {\n        borderRadius: tokens.radii['2'],\n      },\n      circle: {\n        borderRadius: '50%',\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '2',\n    variant: 'gray',\n    shape: 'circle',\n  },\n});\n\nexport const avatarImage = style({\n  display: 'flex',\n  objectFit: 'cover',\n  boxSizing: 'border-box',\n  height: '100%',\n  verticalAlign: 'middle',\n  width: '100%',\n});\n\nconst avatarFallbackBase = style({\n  textTransform: 'uppercase',\n  fontFamily: tokens.fonts.rubik,\n  color: tokens.colors.deepBlue['10'],\n});\n\nexport const avatarFallbackRecipe = recipe({\n  base: avatarFallbackBase,\n\n  variants: {\n    size: {\n      '1': {\n        fontSize: '10px',\n        lineHeight: '15px',\n      },\n      '2': {\n        fontSize: tokens.fontSizes['3'],\n      },\n      '3': {\n        fontSize: tokens.fontSizes['6'],\n      },\n      '4': {\n        fontSize: tokens.fontSizes['7'],\n      },\n      '5': {\n        fontSize: tokens.fontSizes['8'],\n      },\n      '6': {\n        fontSize: tokens.fontSizes['9'],\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '2',\n  },\n});\n"],"mappings":""}

package/dist/components/Avatar/Avatar.vanilla.css.js

@@ -1,6 +1,6 @@
 /* empty css                                  */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-//#region components/Avatar/Avatar.vanilla.css.ts
+// components/Avatar/Avatar.vanilla.css.ts
 var avatarRecipe = createRuntimeFn({
 	defaultClassName: "_7on54e1 _7on54e0",
 	variantClassNames: {
@@ -46,7 +46,6 @@ var avatarFallbackRecipe = createRuntimeFn({
 	defaultVariants: { size: "2" },
 	compoundVariants: []
 });
-//#endregion
 export { avatarFallbackRecipe, avatarImage, avatarRecipe };
 
 //# sourceMappingURL=Avatar.vanilla.css.js.map

package/dist/components/Avatar/Avatar.vanilla.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.vanilla.css.js","names":[],"sources":["../../../components/Avatar/Avatar.vanilla.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { tokens } from '../../styles/tokens.css';\n\nconst avatarRoot = style({\n  alignItems: 'center',\n  justifyContent: 'center',\n  verticalAlign: 'middle',\n  overflow: 'hidden',\n  userSelect: 'none',\n  boxSizing: 'border-box',\n  display: 'flex',\n  flexShrink: 0,\n  position: 'relative',\n  border: 'none',\n  fontFamily: 'inherit',\n  lineHeight: '1',\n  margin: '0',\n  outline: 'none',\n  padding: '0',\n  fontWeight: tokens.fontWeights.medium,\n  color: tokens.colors.hiContrast,\n\n  selectors: {\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      borderRadius: 'inherit',\n      boxShadow: 'inset 0px 0px 1px rgba(0, 0, 0, 0.12)',\n    },\n  },\n});\n\nexport const avatarRecipe = recipe({\n  base: avatarRoot,\n\n  variants: {\n    size: {\n      '1': {\n        width: tokens.sizes['3'],\n        height: tokens.sizes['3'],\n      },\n      '2': {\n        width: tokens.sizes['5'],\n        height: tokens.sizes['5'],\n      },\n      '3': {\n        width: tokens.sizes['6'],\n        height: tokens.sizes['6'],\n      },\n      '4': {\n        width: tokens.sizes['7'],\n        height: tokens.sizes['7'],\n      },\n      '5': {\n        width: tokens.sizes['8'],\n        height: tokens.sizes['8'],\n      },\n      '6': {\n        width: tokens.sizes['9'],\n        height: tokens.sizes['9'],\n      },\n    },\n    variant: {\n      gray: {\n        backgroundColor: tokens.colors.slate['5'],\n      },\n      red: {\n        backgroundColor: tokens.colors.red['5'],\n      },\n      purple: {\n        backgroundColor: tokens.colors.purple['5'],\n      },\n      blue: {\n        backgroundColor: tokens.colors.blue['5'],\n      },\n      green: {\n        backgroundColor: tokens.colors.green['5'],\n      },\n      orange: {\n        backgroundColor: tokens.colors.orange['5'],\n      },\n    },\n    shape: {\n      square: {\n        borderRadius: tokens.radii['2'],\n      },\n      circle: {\n        borderRadius: '50%',\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '2',\n    variant: 'gray',\n    shape: 'circle',\n  },\n});\n\nexport const avatarImage = style({\n  display: 'flex',\n  objectFit: 'cover',\n  boxSizing: 'border-box',\n  height: '100%',\n  verticalAlign: 'middle',\n  width: '100%',\n});\n\nconst avatarFallbackBase = style({\n  textTransform: 'uppercase',\n  fontFamily: tokens.fonts.rubik,\n  color: tokens.colors.deepBlue['10'],\n});\n\nexport const avatarFallbackRecipe = recipe({\n  base: avatarFallbackBase,\n\n  variants: {\n    size: {\n      '1': {\n        fontSize: '10px',\n        lineHeight: '15px',\n      },\n      '2': {\n        fontSize: tokens.fontSizes['3'],\n      },\n      '3': {\n        fontSize: tokens.fontSizes['6'],\n      },\n      '4': {\n        fontSize: tokens.fontSizes['7'],\n      },\n      '5': {\n        fontSize: tokens.fontSizes['8'],\n      },\n      '6': {\n        fontSize: tokens.fontSizes['9'],\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '2',\n  },\n});\n"],"mappings":""}
+{"version":3,"file":"Avatar.vanilla.css.js","names":["_7a468"],"sources":["../../../components/Avatar/Avatar.vanilla.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { tokens } from '../../styles/tokens.css';\n\nconst avatarRoot = style({\n  alignItems: 'center',\n  justifyContent: 'center',\n  verticalAlign: 'middle',\n  overflow: 'hidden',\n  userSelect: 'none',\n  boxSizing: 'border-box',\n  display: 'flex',\n  flexShrink: 0,\n  position: 'relative',\n  border: 'none',\n  fontFamily: 'inherit',\n  lineHeight: '1',\n  margin: '0',\n  outline: 'none',\n  padding: '0',\n  fontWeight: tokens.fontWeights.medium,\n  color: tokens.colors.hiContrast,\n\n  selectors: {\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      borderRadius: 'inherit',\n      boxShadow: 'inset 0px 0px 1px rgba(0, 0, 0, 0.12)',\n    },\n  },\n});\n\nexport const avatarRecipe = recipe({\n  base: avatarRoot,\n\n  variants: {\n    size: {\n      '1': {\n        width: tokens.sizes['3'],\n        height: tokens.sizes['3'],\n      },\n      '2': {\n        width: tokens.sizes['5'],\n        height: tokens.sizes['5'],\n      },\n      '3': {\n        width: tokens.sizes['6'],\n        height: tokens.sizes['6'],\n      },\n      '4': {\n        width: tokens.sizes['7'],\n        height: tokens.sizes['7'],\n      },\n      '5': {\n        width: tokens.sizes['8'],\n        height: tokens.sizes['8'],\n      },\n      '6': {\n        width: tokens.sizes['9'],\n        height: tokens.sizes['9'],\n      },\n    },\n    variant: {\n      gray: {\n        backgroundColor: tokens.colors.slate['5'],\n      },\n      red: {\n        backgroundColor: tokens.colors.red['5'],\n      },\n      purple: {\n        backgroundColor: tokens.colors.purple['5'],\n      },\n      blue: {\n        backgroundColor: tokens.colors.blue['5'],\n      },\n      green: {\n        backgroundColor: tokens.colors.green['5'],\n      },\n      orange: {\n        backgroundColor: tokens.colors.orange['5'],\n      },\n    },\n    shape: {\n      square: {\n        borderRadius: tokens.radii['2'],\n      },\n      circle: {\n        borderRadius: '50%',\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '2',\n    variant: 'gray',\n    shape: 'circle',\n  },\n});\n\nexport const avatarImage = style({\n  display: 'flex',\n  objectFit: 'cover',\n  boxSizing: 'border-box',\n  height: '100%',\n  verticalAlign: 'middle',\n  width: '100%',\n});\n\nconst avatarFallbackBase = style({\n  textTransform: 'uppercase',\n  fontFamily: tokens.fonts.rubik,\n  color: tokens.colors.deepBlue['10'],\n});\n\nexport const avatarFallbackRecipe = recipe({\n  base: avatarFallbackBase,\n\n  variants: {\n    size: {\n      '1': {\n        fontSize: '10px',\n        lineHeight: '15px',\n      },\n      '2': {\n        fontSize: tokens.fontSizes['3'],\n      },\n      '3': {\n        fontSize: tokens.fontSizes['6'],\n      },\n      '4': {\n        fontSize: tokens.fontSizes['7'],\n      },\n      '5': {\n        fontSize: tokens.fontSizes['8'],\n      },\n      '6': {\n        fontSize: tokens.fontSizes['9'],\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '2',\n  },\n});\n"],"mappings":""}

package/dist/components/Avatar/Avatar.vanilla.js

@@ -3,7 +3,7 @@ import { avatarFallbackRecipe, avatarImage, avatarRecipe } from "./Avatar.vanill
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-//#region components/Avatar/Avatar.vanilla.tsx
+// components/Avatar/Avatar.vanilla.tsx
 var AvatarVanillaComponent = forwardRef(({ alt, src, fallback, size, variant, shape, css, style, ...props }, ref) => {
 	const recipeClass = avatarRecipe({
 		size,
@@ -11,13 +11,14 @@ var AvatarVanillaComponent = forwardRef(({ alt, src, fallback, size, variant, sh
 		shape
 	});
 	const fallbackRecipeClass = avatarFallbackRecipe({ size });
+	const wrapperCss = {
+		...css,
+		position: "relative",
+		height: "fit-content",
+		width: "fit-content"
+	};
 	return /* @__PURE__ */ jsx(BoxVanilla, {
-		css: {
-			...css,
-			position: "relative",
-			height: "fit-content",
-			width: "fit-content"
-		},
+		css: wrapperCss,
 		style,
 		children: /* @__PURE__ */ jsxs(AvatarPrimitive.Root, {
 			ref,
@@ -36,7 +37,6 @@ var AvatarVanillaComponent = forwardRef(({ alt, src, fallback, size, variant, sh
 });
 AvatarVanillaComponent.displayName = "AvatarVanilla";
 var AvatarVanilla = AvatarVanillaComponent;
-//#endregion
 export { AvatarVanilla };
 
 //# sourceMappingURL=Avatar.vanilla.js.map

package/dist/components/Avatar/Avatar.vanilla.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.vanilla.js","names":[],"sources":["../../../components/Avatar/Avatar.vanilla.tsx"],"sourcesContent":["import * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport React, { forwardRef } from 'react';\n\nimport { CSSProps } from '../../styles/cssProps';\nimport { BoxVanilla } from '../Box/Box.vanilla';\nimport { avatarFallbackRecipe, avatarImage, avatarRecipe } from './Avatar.vanilla.css';\n\ntype AvatarRecipeVariants = NonNullable<RecipeVariants<typeof avatarRecipe>>;\n\ninterface AvatarOwnProps extends AvatarRecipeVariants, CSSProps {\n  alt?: string;\n  src?: string;\n  fallback?: React.ReactNode;\n}\n\nexport type AvatarVanillaProps = Omit<\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n  keyof AvatarOwnProps\n> &\n  AvatarOwnProps;\n\nconst AvatarVanillaComponent = forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarVanillaProps\n>(({ alt, src, fallback, size, variant, shape, css, style, ...props }, ref) => {\n  const recipeClass = avatarRecipe({ size, variant, shape });\n  const fallbackRecipeClass = avatarFallbackRecipe({ size });\n\n  // This CSS will be processed by the Box component\n  const wrapperCss = {\n    ...css,\n    position: 'relative' as const,\n    height: 'fit-content' as const,\n    width: 'fit-content' as const,\n  };\n\n  return (\n    <BoxVanilla css={wrapperCss} style={style}>\n      <AvatarPrimitive.Root ref={ref} className={recipeClass} {...props}>\n        <AvatarPrimitive.Image className={avatarImage} alt={alt} src={src} />\n        <AvatarPrimitive.Fallback className={fallbackRecipeClass}>\n          {fallback}\n        </AvatarPrimitive.Fallback>\n      </AvatarPrimitive.Root>\n    </BoxVanilla>\n  );\n});\n\nAvatarVanillaComponent.displayName = 'AvatarVanilla';\n\nexport const AvatarVanilla = AvatarVanillaComponent;\n"],"mappings":";;;;;;AAsBA,IAAM,yBAAyB,YAG5B,EAAE,KAAK,KAAK,UAAU,MAAM,SAAS,OAAO,KAAK,OAAO,GAAG,SAAS,QAAQ;CAC7E,MAAM,cAAc,aAAa;EAAE;EAAM;EAAS;CAAM,CAAC;CACzD,MAAM,sBAAsB,qBAAqB,EAAE,KAAK,CAAC;CAUzD,OACE,oBAAC,YAAD;EAAY,KAAK;GAPjB,GAAG;GACH,UAAU;GACV,QAAQ;GACR,OAAO;EAIU;EAAmB;YAClC,qBAAC,gBAAgB,MAAjB;GAA2B;GAAK,WAAW;GAAa,GAAI;aAA5D,CACE,oBAAC,gBAAgB,OAAjB;IAAuB,WAAW;IAAkB;IAAU;GAAM,CAAA,GACpE,oBAAC,gBAAgB,UAAjB;IAA0B,WAAW;cAClC;GACuB,CAAA,CACN;;CACZ,CAAA;AAEhB,CAAC;AAED,uBAAuB,cAAc;AAErC,IAAa,gBAAgB"}
+{"version":3,"file":"Avatar.vanilla.js","names":[],"sources":["../../../components/Avatar/Avatar.vanilla.tsx"],"sourcesContent":["import * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport React, { forwardRef } from 'react';\n\nimport { CSSProps } from '../../styles/cssProps';\nimport { BoxVanilla } from '../Box/Box.vanilla';\nimport { avatarFallbackRecipe, avatarImage, avatarRecipe } from './Avatar.vanilla.css';\n\ntype AvatarRecipeVariants = NonNullable<RecipeVariants<typeof avatarRecipe>>;\n\ninterface AvatarOwnProps extends AvatarRecipeVariants, CSSProps {\n  alt?: string;\n  src?: string;\n  fallback?: React.ReactNode;\n}\n\nexport type AvatarVanillaProps = Omit<\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n  keyof AvatarOwnProps\n> &\n  AvatarOwnProps;\n\nconst AvatarVanillaComponent = forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarVanillaProps\n>(({ alt, src, fallback, size, variant, shape, css, style, ...props }, ref) => {\n  const recipeClass = avatarRecipe({ size, variant, shape });\n  const fallbackRecipeClass = avatarFallbackRecipe({ size });\n\n  // This CSS will be processed by the Box component\n  const wrapperCss = {\n    ...css,\n    position: 'relative' as const,\n    height: 'fit-content' as const,\n    width: 'fit-content' as const,\n  };\n\n  return (\n    <BoxVanilla css={wrapperCss} style={style}>\n      <AvatarPrimitive.Root ref={ref} className={recipeClass} {...props}>\n        <AvatarPrimitive.Image className={avatarImage} alt={alt} src={src} />\n        <AvatarPrimitive.Fallback className={fallbackRecipeClass}>\n          {fallback}\n        </AvatarPrimitive.Fallback>\n      </AvatarPrimitive.Root>\n    </BoxVanilla>\n  );\n});\n\nAvatarVanillaComponent.displayName = 'AvatarVanilla';\n\nexport const AvatarVanilla = AvatarVanillaComponent;\n"],"mappings":";;;;;;AAsBA,IAAM,yBAAyB,YAG5B,EAAE,KAAK,KAAK,UAAU,MAAM,SAAS,OAAO,KAAK,OAAO,GAAG,SAAS,QAAQ;CAC7E,MAAM,cAAc,aAAa;EAAE;EAAM;EAAS;CAAM,CAAC;CACzD,MAAM,sBAAsB,qBAAqB,EAAE,KAAK,CAAC;CAGzD,MAAM,aAAa;EACjB,GAAG;EACH,UAAU;EACV,QAAQ;EACR,OAAO;CACT;CAEA,OACE,oBAAC,YAAD;EAAY,KAAK;EAAmB;EAClC,UAAA,qBAAC,gBAAgB,MAAjB;GAA2B;GAAK,WAAW;GAAa,GAAI;GAA5D,UAAA,CACE,oBAAC,gBAAgB,OAAjB;IAAuB,WAAW;IAAkB;IAAU;GAAM,CAAA,GACpE,oBAAC,gBAAgB,UAAjB;IAA0B,WAAW;IAClC,UAAA;GACuB,CAAA,CACN;;CACZ,CAAA;AAEhB,CAAC;AAED,uBAAuB,cAAc;AAErC,IAAa,gBAAgB"}

package/dist/components/Badge/Badge.cjs

@@ -5,7 +5,7 @@ let react = require("react");
 react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _radix_ui_react_slot = require("@radix-ui/react-slot");
-//#region components/Badge/Badge.tsx
+// components/Badge/Badge.tsx
 var getColorBadgeStyles = (color) => ({
 	bc: `$${color}6`,
 	color: `$${color}10`,
@@ -97,15 +97,15 @@ var StyledButtonBadge = require_stitches_config.styled("button", BADGE_BASE_STYL
 });
 var StyledButtonBadgeSlot = require_stitches_config.styled(_radix_ui_react_slot.Slot, StyledButtonBadge);
 var Badge = react.default.forwardRef(({ interactive, asChild, ...props }, forwardedRef) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)((0, react.useMemo)(() => {
+	const Component = (0, react.useMemo)(() => {
 		if (interactive) return asChild ? StyledButtonBadgeSlot : StyledButtonBadge;
 		return asChild ? StyledSpanBadgeSlot : StyledSpanBadge;
-	}, [asChild]), {
+	}, [asChild]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 		...props,
 		ref: forwardedRef
 	});
 });
-//#endregion
 exports.Badge = Badge;
 
 //# sourceMappingURL=Badge.cjs.map

package/dist/components/Badge/Badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.cjs","names":[],"sources":["../../../components/Badge/Badge.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { COLORS } from './Badge.vanilla';\n\ntype COLOR_VALUES = (typeof COLORS)[number];\n\nconst getColorBadgeStyles = (color: COLOR_VALUES) => ({\n  bc: `$${color}6`,\n  color: `$${color}10`,\n  border: `1px solid $${color}10`,\n});\n\ntype ColorVariants = Record<COLOR_VALUES, { bc: string; color: string }>;\nconst colorVariants: ColorVariants = COLORS.reduce(\n  (variants, color) => ({\n    ...variants,\n    [color]: getColorBadgeStyles(color),\n  }),\n  {} as ColorVariants,\n);\n\nconst interactiveColorVariants: ColorVariants = COLORS.reduce(\n  (variants, color) => ({\n    ...variants,\n    [color]: {\n      ...getColorBadgeStyles(color),\n    },\n  }),\n  {} as ColorVariants,\n);\n\nconst alphaColorCompoundVariants = COLORS.map((color) => ({\n  alphaBg: true,\n  variant: color,\n  css: { bc: `$${color}A6` },\n}));\n\nconst BADGE_BASE_STYLES = {\n  // Reset\n  alignItems: 'center',\n  appearance: 'none',\n  border: 'none',\n  boxSizing: 'border-box',\n  display: 'inline-flex',\n  flexShrink: 0,\n  fontFamily: '$rubik',\n  fontWeight: '$medium',\n  justifyContent: 'center',\n  lineHeight: '1',\n  verticalAlign: 'middle',\n  outline: 'none',\n  padding: '0',\n  textDecoration: 'none',\n  userSelect: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n  borderRadius: '$pill',\n  whiteSpace: 'nowrap',\n  fontVariantNumeric: 'tabular-nums',\n  position: 'relative',\n\n  '&:disabled': {\n    backgroundColor: '$slate3',\n    pointerEvents: 'none',\n    color: '$slate8',\n  },\n  variants: {\n    size: {\n      small: {\n        height: '$4',\n        px: '$2',\n        fontSize: '$2',\n      },\n      large: {\n        height: '$5',\n        px: '$3',\n        fontSize: '$3',\n      },\n    },\n    variant: colorVariants,\n    alphaBg: {\n      true: {},\n    },\n    borderless: {\n      true: {\n        border: 'none',\n      },\n    },\n  },\n  compoundVariants: alphaColorCompoundVariants,\n  defaultVariants: {\n    size: 'small',\n    variant: 'gray',\n    borderless: false,\n  },\n};\n\nconst StyledSpanBadge = styled('span', BADGE_BASE_STYLES);\nconst StyledSpanBadgeSlot = styled(Slot, StyledSpanBadge);\n\nconst StyledButtonBadge = styled('button', BADGE_BASE_STYLES, {\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    borderRadius: 'inherit',\n  },\n  '&:focus-visible': {\n    outline: '2px solid $primary',\n  },\n  '&:hover': {\n    cursor: 'pointer',\n    '&::before': {\n      backgroundColor: '$badgeInteractiveBackgroundHover',\n    },\n  },\n  '&:active': {\n    '&::before': {\n      backgroundColor: '$badgeInteractiveBackgroundActive',\n    },\n  },\n\n  variants: {\n    variant: interactiveColorVariants,\n    borderless: {\n      true: {\n        border: 'none',\n      },\n    },\n  },\n});\nconst StyledButtonBadgeSlot = styled(Slot, StyledButtonBadge);\n\ntype BadgeProps = ComponentProps<typeof StyledButtonBadge> &\n  VariantProps<typeof StyledButtonBadge> & {\n    asChild?: boolean;\n    interactive?: boolean;\n  };\n\nexport const Badge = React.forwardRef<React.ElementRef<typeof StyledButtonBadge>, BadgeProps>(\n  ({ interactive, asChild, ...props }, forwardedRef) => {\n    const Component = useMemo(() => {\n      if (interactive) {\n        return asChild ? StyledButtonBadgeSlot : StyledButtonBadge;\n      }\n      return asChild ? StyledSpanBadgeSlot : StyledSpanBadge;\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [asChild]);\n\n    return <Component {...props} ref={forwardedRef} />;\n  },\n);\n"],"mappings":";;;;;;;;AAQA,IAAM,uBAAuB,WAAyB;CACpD,IAAI,IAAI,MAAM;CACd,OAAO,IAAI,MAAM;CACjB,QAAQ,cAAc,MAAM;AAC9B;AAGA,IAAM,gBAA+B,sBAAA,OAAO,QACzC,UAAU,WAAW;CACpB,GAAG;EACF,QAAQ,oBAAoB,KAAK;AACpC,IACA,CAAC,CACH;AAEA,IAAM,2BAA0C,sBAAA,OAAO,QACpD,UAAU,WAAW;CACpB,GAAG;EACF,QAAQ,EACP,GAAG,oBAAoB,KAAK,EAC9B;AACF,IACA,CAAC,CACH;AAEA,IAAM,6BAA6B,sBAAA,OAAO,KAAK,WAAW;CACxD,SAAS;CACT,SAAS;CACT,KAAK,EAAE,IAAI,IAAI,MAAM,IAAI;AAC3B,EAAE;AAEF,IAAM,oBAAoB;CAExB,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,WAAW;CACX,SAAS;CACT,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,gBAAgB;CAChB,YAAY;CACZ,eAAe;CACf,SAAS;CACT,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,yBAAyB;CACzB,cAAc;CACd,YAAY;CACZ,oBAAoB;CACpB,UAAU;CAEV,cAAc;EACZ,iBAAiB;EACjB,eAAe;EACf,OAAO;CACT;CACA,UAAU;EACR,MAAM;GACJ,OAAO;IACL,QAAQ;IACR,IAAI;IACJ,UAAU;GACZ;GACA,OAAO;IACL,QAAQ;IACR,IAAI;IACJ,UAAU;GACZ;EACF;EACA,SAAS;EACT,SAAS,EACP,MAAM,CAAC,EACT;EACA,YAAY,EACV,MAAM,EACJ,QAAQ,OACV,EACF;CACF;CACA,kBAAkB;CAClB,iBAAiB;EACf,MAAM;EACN,SAAS;EACT,YAAY;CACd;AACF;AAEA,IAAM,kBAAkB,wBAAA,OAAO,QAAQ,iBAAiB;AACxD,IAAM,sBAAsB,wBAAA,OAAO,qBAAA,MAAM,eAAe;AAExD,IAAM,oBAAoB,wBAAA,OAAO,UAAU,mBAAmB;CAC5D,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,cAAc;CAChB;CACA,mBAAmB,EACjB,SAAS,qBACX;CACA,WAAW;EACT,QAAQ;EACR,aAAa,EACX,iBAAiB,mCACnB;CACF;CACA,YAAY,EACV,aAAa,EACX,iBAAiB,oCACnB,EACF;CAEA,UAAU;EACR,SAAS;EACT,YAAY,EACV,MAAM,EACJ,QAAQ,OACV,EACF;CACF;AACF,CAAC;AACD,IAAM,wBAAwB,wBAAA,OAAO,qBAAA,MAAM,iBAAiB;AAQ5D,IAAa,QAAQ,MAAA,QAAM,YACxB,EAAE,aAAa,SAAS,GAAG,SAAS,iBAAiB;CASpD,OAAO,iBAAA,GAAA,kBAAA,IAAA,EAAA,GAAA,MAAA,QAAA,OARyB;EAC9B,IAAI,aACF,OAAO,UAAU,wBAAwB;EAE3C,OAAO,UAAU,sBAAsB;CAEzC,GAAG,CAAC,OAAO,CAEH,GAAD;EAAW,GAAI;EAAO,KAAK;CAAe,CAAA;AACnD,CACF"}
+{"version":3,"file":"Badge.cjs","names":["COLORS","styled","Slot","React","useMemo"],"sources":["../../../components/Badge/Badge.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { COLORS } from './Badge.vanilla';\n\ntype COLOR_VALUES = (typeof COLORS)[number];\n\nconst getColorBadgeStyles = (color: COLOR_VALUES) => ({\n  bc: `$${color}6`,\n  color: `$${color}10`,\n  border: `1px solid $${color}10`,\n});\n\ntype ColorVariants = Record<COLOR_VALUES, { bc: string; color: string }>;\nconst colorVariants: ColorVariants = COLORS.reduce(\n  (variants, color) => ({\n    ...variants,\n    [color]: getColorBadgeStyles(color),\n  }),\n  {} as ColorVariants,\n);\n\nconst interactiveColorVariants: ColorVariants = COLORS.reduce(\n  (variants, color) => ({\n    ...variants,\n    [color]: {\n      ...getColorBadgeStyles(color),\n    },\n  }),\n  {} as ColorVariants,\n);\n\nconst alphaColorCompoundVariants = COLORS.map((color) => ({\n  alphaBg: true,\n  variant: color,\n  css: { bc: `$${color}A6` },\n}));\n\nconst BADGE_BASE_STYLES = {\n  // Reset\n  alignItems: 'center',\n  appearance: 'none',\n  border: 'none',\n  boxSizing: 'border-box',\n  display: 'inline-flex',\n  flexShrink: 0,\n  fontFamily: '$rubik',\n  fontWeight: '$medium',\n  justifyContent: 'center',\n  lineHeight: '1',\n  verticalAlign: 'middle',\n  outline: 'none',\n  padding: '0',\n  textDecoration: 'none',\n  userSelect: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n  borderRadius: '$pill',\n  whiteSpace: 'nowrap',\n  fontVariantNumeric: 'tabular-nums',\n  position: 'relative',\n\n  '&:disabled': {\n    backgroundColor: '$slate3',\n    pointerEvents: 'none',\n    color: '$slate8',\n  },\n  variants: {\n    size: {\n      small: {\n        height: '$4',\n        px: '$2',\n        fontSize: '$2',\n      },\n      large: {\n        height: '$5',\n        px: '$3',\n        fontSize: '$3',\n      },\n    },\n    variant: colorVariants,\n    alphaBg: {\n      true: {},\n    },\n    borderless: {\n      true: {\n        border: 'none',\n      },\n    },\n  },\n  compoundVariants: alphaColorCompoundVariants,\n  defaultVariants: {\n    size: 'small',\n    variant: 'gray',\n    borderless: false,\n  },\n};\n\nconst StyledSpanBadge = styled('span', BADGE_BASE_STYLES);\nconst StyledSpanBadgeSlot = styled(Slot, StyledSpanBadge);\n\nconst StyledButtonBadge = styled('button', BADGE_BASE_STYLES, {\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    borderRadius: 'inherit',\n  },\n  '&:focus-visible': {\n    outline: '2px solid $primary',\n  },\n  '&:hover': {\n    cursor: 'pointer',\n    '&::before': {\n      backgroundColor: '$badgeInteractiveBackgroundHover',\n    },\n  },\n  '&:active': {\n    '&::before': {\n      backgroundColor: '$badgeInteractiveBackgroundActive',\n    },\n  },\n\n  variants: {\n    variant: interactiveColorVariants,\n    borderless: {\n      true: {\n        border: 'none',\n      },\n    },\n  },\n});\nconst StyledButtonBadgeSlot = styled(Slot, StyledButtonBadge);\n\ntype BadgeProps = ComponentProps<typeof StyledButtonBadge> &\n  VariantProps<typeof StyledButtonBadge> & {\n    asChild?: boolean;\n    interactive?: boolean;\n  };\n\nexport const Badge = React.forwardRef<React.ElementRef<typeof StyledButtonBadge>, BadgeProps>(\n  ({ interactive, asChild, ...props }, forwardedRef) => {\n    const Component = useMemo(() => {\n      if (interactive) {\n        return asChild ? StyledButtonBadgeSlot : StyledButtonBadge;\n      }\n      return asChild ? StyledSpanBadgeSlot : StyledSpanBadge;\n      // eslint-disable-next-line @eslint-react/exhaustive-deps\n    }, [asChild]);\n\n    return <Component {...props} ref={forwardedRef} />;\n  },\n);\n"],"mappings":";;;;;;;;AAQA,IAAM,uBAAuB,WAAyB;CACpD,IAAI,IAAI,MAAM;CACd,OAAO,IAAI,MAAM;CACjB,QAAQ,cAAc,MAAM;AAC9B;AAGA,IAAM,gBAA+BA,sBAAAA,OAAO,QACzC,UAAU,WAAW;CACpB,GAAG;EACF,QAAQ,oBAAoB,KAAK;AACpC,IACA,CAAC,CACH;AAEA,IAAM,2BAA0CA,sBAAAA,OAAO,QACpD,UAAU,WAAW;CACpB,GAAG;EACF,QAAQ,EACP,GAAG,oBAAoB,KAAK,EAC9B;AACF,IACA,CAAC,CACH;AAEA,IAAM,6BAA6BA,sBAAAA,OAAO,KAAK,WAAW;CACxD,SAAS;CACT,SAAS;CACT,KAAK,EAAE,IAAI,IAAI,MAAM,IAAI;AAC3B,EAAE;AAEF,IAAM,oBAAoB;CAExB,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,WAAW;CACX,SAAS;CACT,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,gBAAgB;CAChB,YAAY;CACZ,eAAe;CACf,SAAS;CACT,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,yBAAyB;CACzB,cAAc;CACd,YAAY;CACZ,oBAAoB;CACpB,UAAU;CAEV,cAAc;EACZ,iBAAiB;EACjB,eAAe;EACf,OAAO;CACT;CACA,UAAU;EACR,MAAM;GACJ,OAAO;IACL,QAAQ;IACR,IAAI;IACJ,UAAU;GACZ;GACA,OAAO;IACL,QAAQ;IACR,IAAI;IACJ,UAAU;GACZ;EACF;EACA,SAAS;EACT,SAAS,EACP,MAAM,CAAC,EACT;EACA,YAAY,EACV,MAAM,EACJ,QAAQ,OACV,EACF;CACF;CACA,kBAAkB;CAClB,iBAAiB;EACf,MAAM;EACN,SAAS;EACT,YAAY;CACd;AACF;AAEA,IAAM,kBAAkBC,wBAAAA,OAAO,QAAQ,iBAAiB;AACxD,IAAM,sBAAsBA,wBAAAA,OAAOC,qBAAAA,MAAM,eAAe;AAExD,IAAM,oBAAoBD,wBAAAA,OAAO,UAAU,mBAAmB;CAC5D,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,cAAc;CAChB;CACA,mBAAmB,EACjB,SAAS,qBACX;CACA,WAAW;EACT,QAAQ;EACR,aAAa,EACX,iBAAiB,mCACnB;CACF;CACA,YAAY,EACV,aAAa,EACX,iBAAiB,oCACnB,EACF;CAEA,UAAU;EACR,SAAS;EACT,YAAY,EACV,MAAM,EACJ,QAAQ,OACV,EACF;CACF;AACF,CAAC;AACD,IAAM,wBAAwBA,wBAAAA,OAAOC,qBAAAA,MAAM,iBAAiB;AAQ5D,IAAa,QAAQC,MAAAA,QAAM,YACxB,EAAE,aAAa,SAAS,GAAG,SAAS,iBAAiB;CACpD,MAAM,aAAA,GAAYC,MAAAA,QAAAA,OAAc;EAC9B,IAAI,aACF,OAAO,UAAU,wBAAwB;EAE3C,OAAO,UAAU,sBAAsB;CAEzC,GAAG,CAAC,OAAO,CAAC;CAEZ,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EAAW,GAAI;EAAO,KAAK;CAAe,CAAA;AACnD,CACF"}

package/dist/components/Badge/Badge.js

@@ -3,7 +3,7 @@ import { COLORS } from "./Badge.vanilla.js";
 import React, { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
-//#region components/Badge/Badge.tsx
+// components/Badge/Badge.tsx
 var getColorBadgeStyles = (color) => ({
 	bc: `$${color}6`,
 	color: `$${color}10`,
@@ -95,15 +95,15 @@ var StyledButtonBadge = styled("button", BADGE_BASE_STYLES, {
 });
 var StyledButtonBadgeSlot = styled(Slot, StyledButtonBadge);
 var Badge = React.forwardRef(({ interactive, asChild, ...props }, forwardedRef) => {
-	return /* @__PURE__ */ jsx(useMemo(() => {
+	const Component = useMemo(() => {
 		if (interactive) return asChild ? StyledButtonBadgeSlot : StyledButtonBadge;
 		return asChild ? StyledSpanBadgeSlot : StyledSpanBadge;
-	}, [asChild]), {
+	}, [asChild]);
+	return /* @__PURE__ */ jsx(Component, {
 		...props,
 		ref: forwardedRef
 	});
 });
-//#endregion
 export { Badge };
 
 //# sourceMappingURL=Badge.js.map

package/dist/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":[],"sources":["../../../components/Badge/Badge.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { COLORS } from './Badge.vanilla';\n\ntype COLOR_VALUES = (typeof COLORS)[number];\n\nconst getColorBadgeStyles = (color: COLOR_VALUES) => ({\n  bc: `$${color}6`,\n  color: `$${color}10`,\n  border: `1px solid $${color}10`,\n});\n\ntype ColorVariants = Record<COLOR_VALUES, { bc: string; color: string }>;\nconst colorVariants: ColorVariants = COLORS.reduce(\n  (variants, color) => ({\n    ...variants,\n    [color]: getColorBadgeStyles(color),\n  }),\n  {} as ColorVariants,\n);\n\nconst interactiveColorVariants: ColorVariants = COLORS.reduce(\n  (variants, color) => ({\n    ...variants,\n    [color]: {\n      ...getColorBadgeStyles(color),\n    },\n  }),\n  {} as ColorVariants,\n);\n\nconst alphaColorCompoundVariants = COLORS.map((color) => ({\n  alphaBg: true,\n  variant: color,\n  css: { bc: `$${color}A6` },\n}));\n\nconst BADGE_BASE_STYLES = {\n  // Reset\n  alignItems: 'center',\n  appearance: 'none',\n  border: 'none',\n  boxSizing: 'border-box',\n  display: 'inline-flex',\n  flexShrink: 0,\n  fontFamily: '$rubik',\n  fontWeight: '$medium',\n  justifyContent: 'center',\n  lineHeight: '1',\n  verticalAlign: 'middle',\n  outline: 'none',\n  padding: '0',\n  textDecoration: 'none',\n  userSelect: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n  borderRadius: '$pill',\n  whiteSpace: 'nowrap',\n  fontVariantNumeric: 'tabular-nums',\n  position: 'relative',\n\n  '&:disabled': {\n    backgroundColor: '$slate3',\n    pointerEvents: 'none',\n    color: '$slate8',\n  },\n  variants: {\n    size: {\n      small: {\n        height: '$4',\n        px: '$2',\n        fontSize: '$2',\n      },\n      large: {\n        height: '$5',\n        px: '$3',\n        fontSize: '$3',\n      },\n    },\n    variant: colorVariants,\n    alphaBg: {\n      true: {},\n    },\n    borderless: {\n      true: {\n        border: 'none',\n      },\n    },\n  },\n  compoundVariants: alphaColorCompoundVariants,\n  defaultVariants: {\n    size: 'small',\n    variant: 'gray',\n    borderless: false,\n  },\n};\n\nconst StyledSpanBadge = styled('span', BADGE_BASE_STYLES);\nconst StyledSpanBadgeSlot = styled(Slot, StyledSpanBadge);\n\nconst StyledButtonBadge = styled('button', BADGE_BASE_STYLES, {\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    borderRadius: 'inherit',\n  },\n  '&:focus-visible': {\n    outline: '2px solid $primary',\n  },\n  '&:hover': {\n    cursor: 'pointer',\n    '&::before': {\n      backgroundColor: '$badgeInteractiveBackgroundHover',\n    },\n  },\n  '&:active': {\n    '&::before': {\n      backgroundColor: '$badgeInteractiveBackgroundActive',\n    },\n  },\n\n  variants: {\n    variant: interactiveColorVariants,\n    borderless: {\n      true: {\n        border: 'none',\n      },\n    },\n  },\n});\nconst StyledButtonBadgeSlot = styled(Slot, StyledButtonBadge);\n\ntype BadgeProps = ComponentProps<typeof StyledButtonBadge> &\n  VariantProps<typeof StyledButtonBadge> & {\n    asChild?: boolean;\n    interactive?: boolean;\n  };\n\nexport const Badge = React.forwardRef<React.ElementRef<typeof StyledButtonBadge>, BadgeProps>(\n  ({ interactive, asChild, ...props }, forwardedRef) => {\n    const Component = useMemo(() => {\n      if (interactive) {\n        return asChild ? StyledButtonBadgeSlot : StyledButtonBadge;\n      }\n      return asChild ? StyledSpanBadgeSlot : StyledSpanBadge;\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [asChild]);\n\n    return <Component {...props} ref={forwardedRef} />;\n  },\n);\n"],"mappings":";;;;;;AAQA,IAAM,uBAAuB,WAAyB;CACpD,IAAI,IAAI,MAAM;CACd,OAAO,IAAI,MAAM;CACjB,QAAQ,cAAc,MAAM;AAC9B;AAGA,IAAM,gBAA+B,OAAO,QACzC,UAAU,WAAW;CACpB,GAAG;EACF,QAAQ,oBAAoB,KAAK;AACpC,IACA,CAAC,CACH;AAEA,IAAM,2BAA0C,OAAO,QACpD,UAAU,WAAW;CACpB,GAAG;EACF,QAAQ,EACP,GAAG,oBAAoB,KAAK,EAC9B;AACF,IACA,CAAC,CACH;AAEA,IAAM,6BAA6B,OAAO,KAAK,WAAW;CACxD,SAAS;CACT,SAAS;CACT,KAAK,EAAE,IAAI,IAAI,MAAM,IAAI;AAC3B,EAAE;AAEF,IAAM,oBAAoB;CAExB,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,WAAW;CACX,SAAS;CACT,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,gBAAgB;CAChB,YAAY;CACZ,eAAe;CACf,SAAS;CACT,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,yBAAyB;CACzB,cAAc;CACd,YAAY;CACZ,oBAAoB;CACpB,UAAU;CAEV,cAAc;EACZ,iBAAiB;EACjB,eAAe;EACf,OAAO;CACT;CACA,UAAU;EACR,MAAM;GACJ,OAAO;IACL,QAAQ;IACR,IAAI;IACJ,UAAU;GACZ;GACA,OAAO;IACL,QAAQ;IACR,IAAI;IACJ,UAAU;GACZ;EACF;EACA,SAAS;EACT,SAAS,EACP,MAAM,CAAC,EACT;EACA,YAAY,EACV,MAAM,EACJ,QAAQ,OACV,EACF;CACF;CACA,kBAAkB;CAClB,iBAAiB;EACf,MAAM;EACN,SAAS;EACT,YAAY;CACd;AACF;AAEA,IAAM,kBAAkB,OAAO,QAAQ,iBAAiB;AACxD,IAAM,sBAAsB,OAAO,MAAM,eAAe;AAExD,IAAM,oBAAoB,OAAO,UAAU,mBAAmB;CAC5D,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,cAAc;CAChB;CACA,mBAAmB,EACjB,SAAS,qBACX;CACA,WAAW;EACT,QAAQ;EACR,aAAa,EACX,iBAAiB,mCACnB;CACF;CACA,YAAY,EACV,aAAa,EACX,iBAAiB,oCACnB,EACF;CAEA,UAAU;EACR,SAAS;EACT,YAAY,EACV,MAAM,EACJ,QAAQ,OACV,EACF;CACF;AACF,CAAC;AACD,IAAM,wBAAwB,OAAO,MAAM,iBAAiB;AAQ5D,IAAa,QAAQ,MAAM,YACxB,EAAE,aAAa,SAAS,GAAG,SAAS,iBAAiB;CASpD,OAAO,oBARW,cAAc;EAC9B,IAAI,aACF,OAAO,UAAU,wBAAwB;EAE3C,OAAO,UAAU,sBAAsB;CAEzC,GAAG,CAAC,OAAO,CAEH,GAAD;EAAW,GAAI;EAAO,KAAK;CAAe,CAAA;AACnD,CACF"}
+{"version":3,"file":"Badge.js","names":[],"sources":["../../../components/Badge/Badge.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { COLORS } from './Badge.vanilla';\n\ntype COLOR_VALUES = (typeof COLORS)[number];\n\nconst getColorBadgeStyles = (color: COLOR_VALUES) => ({\n  bc: `$${color}6`,\n  color: `$${color}10`,\n  border: `1px solid $${color}10`,\n});\n\ntype ColorVariants = Record<COLOR_VALUES, { bc: string; color: string }>;\nconst colorVariants: ColorVariants = COLORS.reduce(\n  (variants, color) => ({\n    ...variants,\n    [color]: getColorBadgeStyles(color),\n  }),\n  {} as ColorVariants,\n);\n\nconst interactiveColorVariants: ColorVariants = COLORS.reduce(\n  (variants, color) => ({\n    ...variants,\n    [color]: {\n      ...getColorBadgeStyles(color),\n    },\n  }),\n  {} as ColorVariants,\n);\n\nconst alphaColorCompoundVariants = COLORS.map((color) => ({\n  alphaBg: true,\n  variant: color,\n  css: { bc: `$${color}A6` },\n}));\n\nconst BADGE_BASE_STYLES = {\n  // Reset\n  alignItems: 'center',\n  appearance: 'none',\n  border: 'none',\n  boxSizing: 'border-box',\n  display: 'inline-flex',\n  flexShrink: 0,\n  fontFamily: '$rubik',\n  fontWeight: '$medium',\n  justifyContent: 'center',\n  lineHeight: '1',\n  verticalAlign: 'middle',\n  outline: 'none',\n  padding: '0',\n  textDecoration: 'none',\n  userSelect: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n  borderRadius: '$pill',\n  whiteSpace: 'nowrap',\n  fontVariantNumeric: 'tabular-nums',\n  position: 'relative',\n\n  '&:disabled': {\n    backgroundColor: '$slate3',\n    pointerEvents: 'none',\n    color: '$slate8',\n  },\n  variants: {\n    size: {\n      small: {\n        height: '$4',\n        px: '$2',\n        fontSize: '$2',\n      },\n      large: {\n        height: '$5',\n        px: '$3',\n        fontSize: '$3',\n      },\n    },\n    variant: colorVariants,\n    alphaBg: {\n      true: {},\n    },\n    borderless: {\n      true: {\n        border: 'none',\n      },\n    },\n  },\n  compoundVariants: alphaColorCompoundVariants,\n  defaultVariants: {\n    size: 'small',\n    variant: 'gray',\n    borderless: false,\n  },\n};\n\nconst StyledSpanBadge = styled('span', BADGE_BASE_STYLES);\nconst StyledSpanBadgeSlot = styled(Slot, StyledSpanBadge);\n\nconst StyledButtonBadge = styled('button', BADGE_BASE_STYLES, {\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    borderRadius: 'inherit',\n  },\n  '&:focus-visible': {\n    outline: '2px solid $primary',\n  },\n  '&:hover': {\n    cursor: 'pointer',\n    '&::before': {\n      backgroundColor: '$badgeInteractiveBackgroundHover',\n    },\n  },\n  '&:active': {\n    '&::before': {\n      backgroundColor: '$badgeInteractiveBackgroundActive',\n    },\n  },\n\n  variants: {\n    variant: interactiveColorVariants,\n    borderless: {\n      true: {\n        border: 'none',\n      },\n    },\n  },\n});\nconst StyledButtonBadgeSlot = styled(Slot, StyledButtonBadge);\n\ntype BadgeProps = ComponentProps<typeof StyledButtonBadge> &\n  VariantProps<typeof StyledButtonBadge> & {\n    asChild?: boolean;\n    interactive?: boolean;\n  };\n\nexport const Badge = React.forwardRef<React.ElementRef<typeof StyledButtonBadge>, BadgeProps>(\n  ({ interactive, asChild, ...props }, forwardedRef) => {\n    const Component = useMemo(() => {\n      if (interactive) {\n        return asChild ? StyledButtonBadgeSlot : StyledButtonBadge;\n      }\n      return asChild ? StyledSpanBadgeSlot : StyledSpanBadge;\n      // eslint-disable-next-line @eslint-react/exhaustive-deps\n    }, [asChild]);\n\n    return <Component {...props} ref={forwardedRef} />;\n  },\n);\n"],"mappings":";;;;;;AAQA,IAAM,uBAAuB,WAAyB;CACpD,IAAI,IAAI,MAAM;CACd,OAAO,IAAI,MAAM;CACjB,QAAQ,cAAc,MAAM;AAC9B;AAGA,IAAM,gBAA+B,OAAO,QACzC,UAAU,WAAW;CACpB,GAAG;EACF,QAAQ,oBAAoB,KAAK;AACpC,IACA,CAAC,CACH;AAEA,IAAM,2BAA0C,OAAO,QACpD,UAAU,WAAW;CACpB,GAAG;EACF,QAAQ,EACP,GAAG,oBAAoB,KAAK,EAC9B;AACF,IACA,CAAC,CACH;AAEA,IAAM,6BAA6B,OAAO,KAAK,WAAW;CACxD,SAAS;CACT,SAAS;CACT,KAAK,EAAE,IAAI,IAAI,MAAM,IAAI;AAC3B,EAAE;AAEF,IAAM,oBAAoB;CAExB,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,WAAW;CACX,SAAS;CACT,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,gBAAgB;CAChB,YAAY;CACZ,eAAe;CACf,SAAS;CACT,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,yBAAyB;CACzB,cAAc;CACd,YAAY;CACZ,oBAAoB;CACpB,UAAU;CAEV,cAAc;EACZ,iBAAiB;EACjB,eAAe;EACf,OAAO;CACT;CACA,UAAU;EACR,MAAM;GACJ,OAAO;IACL,QAAQ;IACR,IAAI;IACJ,UAAU;GACZ;GACA,OAAO;IACL,QAAQ;IACR,IAAI;IACJ,UAAU;GACZ;EACF;EACA,SAAS;EACT,SAAS,EACP,MAAM,CAAC,EACT;EACA,YAAY,EACV,MAAM,EACJ,QAAQ,OACV,EACF;CACF;CACA,kBAAkB;CAClB,iBAAiB;EACf,MAAM;EACN,SAAS;EACT,YAAY;CACd;AACF;AAEA,IAAM,kBAAkB,OAAO,QAAQ,iBAAiB;AACxD,IAAM,sBAAsB,OAAO,MAAM,eAAe;AAExD,IAAM,oBAAoB,OAAO,UAAU,mBAAmB;CAC5D,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,cAAc;CAChB;CACA,mBAAmB,EACjB,SAAS,qBACX;CACA,WAAW;EACT,QAAQ;EACR,aAAa,EACX,iBAAiB,mCACnB;CACF;CACA,YAAY,EACV,aAAa,EACX,iBAAiB,oCACnB,EACF;CAEA,UAAU;EACR,SAAS;EACT,YAAY,EACV,MAAM,EACJ,QAAQ,OACV,EACF;CACF;AACF,CAAC;AACD,IAAM,wBAAwB,OAAO,MAAM,iBAAiB;AAQ5D,IAAa,QAAQ,MAAM,YACxB,EAAE,aAAa,SAAS,GAAG,SAAS,iBAAiB;CACpD,MAAM,YAAY,cAAc;EAC9B,IAAI,aACF,OAAO,UAAU,wBAAwB;EAE3C,OAAO,UAAU,sBAAsB;CAEzC,GAAG,CAAC,OAAO,CAAC;CAEZ,OAAO,oBAAC,WAAD;EAAW,GAAI;EAAO,KAAK;CAAe,CAAA;AACnD,CACF"}

package/dist/components/Badge/Badge.theme.cjs

@@ -1,4 +1,4 @@
-//#region components/Badge/Badge.theme.ts
+// components/Badge/Badge.theme.ts
 var badgeLightTheme = {
 	badgeInteractiveBackgroundHover: "hsla(0, 0%, 0%, 0.05)",
 	badgeInteractiveBackgroundActive: "hsla(0, 0%, 0%, 0.1)"
@@ -7,7 +7,6 @@ var badgeDarkTheme = {
 	badgeInteractiveBackgroundHover: "hsla(0, 0%, 0%, 0.1)",
 	badgeInteractiveBackgroundActive: "hsla(0, 0%, 0%, 0.2)"
 };
-//#endregion
 exports.badgeDarkTheme = badgeDarkTheme;
 exports.badgeLightTheme = badgeLightTheme;
 

package/dist/components/Badge/Badge.theme.js

@@ -1,4 +1,4 @@
-//#region components/Badge/Badge.theme.ts
+// components/Badge/Badge.theme.ts
 var badgeLightTheme = {
 	badgeInteractiveBackgroundHover: "hsla(0, 0%, 0%, 0.05)",
 	badgeInteractiveBackgroundActive: "hsla(0, 0%, 0%, 0.1)"
@@ -7,7 +7,6 @@ var badgeDarkTheme = {
 	badgeInteractiveBackgroundHover: "hsla(0, 0%, 0%, 0.1)",
 	badgeInteractiveBackgroundActive: "hsla(0, 0%, 0%, 0.2)"
 };
-//#endregion
 export { badgeDarkTheme, badgeLightTheme };
 
 //# sourceMappingURL=Badge.theme.js.map

package/dist/components/Badge/Badge.themes.cjs

@@ -1,7 +1,7 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 let tinycolor2 = require("tinycolor2");
 tinycolor2 = require_runtime.__toESM(tinycolor2, 1);
-//#region components/Badge/Badge.themes.ts
+// components/Badge/Badge.themes.ts
 var Theme;
 (function(_Theme) {
 	_Theme.getLight = () => ({
@@ -13,7 +13,6 @@ var Theme;
 		badgeInteractiveBackgroundHover: (0, tinycolor2.default)("black").setAlpha(.1).toHslString()
 	});
 })(Theme || (Theme = {}));
-//#endregion
 Object.defineProperty(exports, "Theme", {
 	enumerable: true,
 	get: function() {