@traefik-labs/faency 12.0.11 → 12.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"AriaTable.cjs","sources":["../../../components/AriaTable/AriaTable.tsx"],"sourcesContent":["import { ChevronRightIcon } from '@radix-ui/react-icons';\nimport { Slot } from '@radix-ui/react-slot';\nimport merge from 'lodash.merge';\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 { styled, VariantProps } from '../../stitches.config';\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={merge(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 & NonNullable<unknown>;\n"],"names":["styled","TableCaption","TableTbody","forwardRef","jsx","TableTfoot","TableTr","Slot","useMemo","Box","useState","Children","isValidElement","ChevronRightIcon","cloneElement","jsxs","Fragment","TableTh","TableTd","TableThead","TableTable"],"mappings":"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"}
+{"version":3,"file":"AriaTable.cjs","sources":["../../../components/AriaTable/AriaTable.tsx"],"sourcesContent":["import { ChevronRightIcon } from '@radix-ui/react-icons';\nimport { Slot } from '@radix-ui/react-slot';\nimport merge from 'lodash.merge';\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 { 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={merge(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"],"names":["styled","TableCaption","TableTbody","forwardRef","jsx","TableTfoot","TableTr","Slot","useMemo","Box","useState","Children","isValidElement","ChevronRightIcon","cloneElement","jsxs","Fragment","TableTh","TableTd","TableThead","TableTable"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"AriaTable.js","sources":["../../../components/AriaTable/AriaTable.tsx"],"sourcesContent":["import { ChevronRightIcon } from '@radix-ui/react-icons';\nimport { Slot } from '@radix-ui/react-slot';\nimport merge from 'lodash.merge';\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 { styled, VariantProps } from '../../stitches.config';\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={merge(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 & NonNullable<unknown>;\n"],"names":["TableCaption","TableTbody","TableTfoot","TableTr","TableTh","TableTd","TableThead","TableTable"],"mappings":"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"}
+{"version":3,"file":"AriaTable.js","sources":["../../../components/AriaTable/AriaTable.tsx"],"sourcesContent":["import { ChevronRightIcon } from '@radix-ui/react-icons';\nimport { Slot } from '@radix-ui/react-slot';\nimport merge from 'lodash.merge';\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 { 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={merge(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"],"names":["TableCaption","TableTbody","TableTfoot","TableTr","TableTh","TableTd","TableThead","TableTable"],"mappings":"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"}

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

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 ;/* empty css                                    */
-const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
-var avatarRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "_7on54e1 _7on54e0", variantClassNames: { size: { "1": "_7on54e2", "2": "_7on54e3", "3": "_7on54e4", "4": "_7on54e5", "5": "_7on54e6", "6": "_7on54e7" }, variant: { gray: "_7on54e8", red: "_7on54e9", purple: "_7on54ea", blue: "_7on54eb", green: "_7on54ec", orange: "_7on54ed" }, shape: { square: "_7on54ee", circle: "_7on54ef" } }, defaultVariants: { size: "2", variant: "gray", shape: "circle" }, compoundVariants: [] });
+const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var avatarRecipe = createRuntimeFn.createRuntimeFn({ defaultClassName: "_7on54e1 _7on54e0", variantClassNames: { size: { "1": "_7on54e2", "2": "_7on54e3", "3": "_7on54e4", "4": "_7on54e5", "5": "_7on54e6", "6": "_7on54e7" }, variant: { gray: "_7on54e8", red: "_7on54e9", purple: "_7on54ea", blue: "_7on54eb", green: "_7on54ec", orange: "_7on54ed" }, shape: { square: "_7on54ee", circle: "_7on54ef" } }, defaultVariants: { size: "2", variant: "gray", shape: "circle" }, compoundVariants: [] });
 var avatarImage = "_7on54eg";
-var avatarFallbackRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "_7on54ei _7on54eh", variantClassNames: { size: { "1": "_7on54ej", "2": "_7on54ek", "3": "_7on54el", "4": "_7on54em", "5": "_7on54en", "6": "_7on54eo" } }, defaultVariants: { size: "2" }, compoundVariants: [] });
+var avatarFallbackRecipe = createRuntimeFn.createRuntimeFn({ defaultClassName: "_7on54ei _7on54eh", variantClassNames: { size: { "1": "_7on54ej", "2": "_7on54ek", "3": "_7on54el", "4": "_7on54em", "5": "_7on54en", "6": "_7on54eo" } }, defaultVariants: { size: "2" }, compoundVariants: [] });
 exports.avatarFallbackRecipe = avatarFallbackRecipe;
 exports.avatarImage = avatarImage;
 exports.avatarRecipe = avatarRecipe;

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

@@ -1,5 +1,5 @@
 /* empty css                                  */
-import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var avatarRecipe = createRuntimeFn({ defaultClassName: "_7on54e1 _7on54e0", variantClassNames: { size: { "1": "_7on54e2", "2": "_7on54e3", "3": "_7on54e4", "4": "_7on54e5", "5": "_7on54e6", "6": "_7on54e7" }, variant: { gray: "_7on54e8", red: "_7on54e9", purple: "_7on54ea", blue: "_7on54eb", green: "_7on54ec", orange: "_7on54ed" }, shape: { square: "_7on54ee", circle: "_7on54ef" } }, defaultVariants: { size: "2", variant: "gray", shape: "circle" }, compoundVariants: [] });
 var avatarImage = "_7on54eg";
 var avatarFallbackRecipe = createRuntimeFn({ defaultClassName: "_7on54ei _7on54eh", variantClassNames: { size: { "1": "_7on54ej", "2": "_7on54ek", "3": "_7on54el", "4": "_7on54em", "5": "_7on54en", "6": "_7on54eo" } }, defaultVariants: { size: "2" }, compoundVariants: [] });

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 ;/* empty css                                   */
-const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
-var badgeRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "_16nnnz62 _16nnnz60", variantClassNames: { size: { small: "_16nnnz63", large: "_16nnnz64" }, variant: { gray: "_16nnnz65", red: "_16nnnz66", blue: "_16nnnz67", green: "_16nnnz68", neon: "_16nnnz69", orange: "_16nnnz6a", purple: "_16nnnz6b" }, alphaBg: { true: "_16nnnz6c" }, borderless: { true: "_16nnnz6d" } }, defaultVariants: { size: "small", variant: "gray", borderless: false }, compoundVariants: [[{ alphaBg: true, variant: "gray" }, "_16nnnz6e"], [{ alphaBg: true, variant: "red" }, "_16nnnz6f"], [{ alphaBg: true, variant: "blue" }, "_16nnnz6g"], [{ alphaBg: true, variant: "green" }, "_16nnnz6h"], [{ alphaBg: true, variant: "neon" }, "_16nnnz6i"], [{ alphaBg: true, variant: "orange" }, "_16nnnz6j"], [{ alphaBg: true, variant: "purple" }, "_16nnnz6k"]] });
-var interactiveBadgeRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "_16nnnz6l _16nnnz61 _16nnnz60", variantClassNames: { size: { small: "_16nnnz6m", large: "_16nnnz6n" }, variant: { gray: "_16nnnz6o", red: "_16nnnz6p", blue: "_16nnnz6q", green: "_16nnnz6r", neon: "_16nnnz6s", orange: "_16nnnz6t", purple: "_16nnnz6u" }, alphaBg: { true: "_16nnnz6v" }, borderless: { true: "_16nnnz6w" } }, defaultVariants: { size: "small", variant: "gray", borderless: false }, compoundVariants: [[{ alphaBg: true, variant: "gray" }, "_16nnnz6x"], [{ alphaBg: true, variant: "red" }, "_16nnnz6y"], [{ alphaBg: true, variant: "blue" }, "_16nnnz6z"], [{ alphaBg: true, variant: "green" }, "_16nnnz610"], [{ alphaBg: true, variant: "neon" }, "_16nnnz611"], [{ alphaBg: true, variant: "orange" }, "_16nnnz612"], [{ alphaBg: true, variant: "purple" }, "_16nnnz613"]] });
+const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var badgeRecipe = createRuntimeFn.createRuntimeFn({ defaultClassName: "_16nnnz62 _16nnnz60", variantClassNames: { size: { small: "_16nnnz63", large: "_16nnnz64" }, variant: { gray: "_16nnnz65", red: "_16nnnz66", blue: "_16nnnz67", green: "_16nnnz68", neon: "_16nnnz69", orange: "_16nnnz6a", purple: "_16nnnz6b" }, alphaBg: { true: "_16nnnz6c" }, borderless: { true: "_16nnnz6d" } }, defaultVariants: { size: "small", variant: "gray", borderless: false }, compoundVariants: [[{ alphaBg: true, variant: "gray" }, "_16nnnz6e"], [{ alphaBg: true, variant: "red" }, "_16nnnz6f"], [{ alphaBg: true, variant: "blue" }, "_16nnnz6g"], [{ alphaBg: true, variant: "green" }, "_16nnnz6h"], [{ alphaBg: true, variant: "neon" }, "_16nnnz6i"], [{ alphaBg: true, variant: "orange" }, "_16nnnz6j"], [{ alphaBg: true, variant: "purple" }, "_16nnnz6k"]] });
+var interactiveBadgeRecipe = createRuntimeFn.createRuntimeFn({ defaultClassName: "_16nnnz6l _16nnnz61 _16nnnz60", variantClassNames: { size: { small: "_16nnnz6m", large: "_16nnnz6n" }, variant: { gray: "_16nnnz6o", red: "_16nnnz6p", blue: "_16nnnz6q", green: "_16nnnz6r", neon: "_16nnnz6s", orange: "_16nnnz6t", purple: "_16nnnz6u" }, alphaBg: { true: "_16nnnz6v" }, borderless: { true: "_16nnnz6w" } }, defaultVariants: { size: "small", variant: "gray", borderless: false }, compoundVariants: [[{ alphaBg: true, variant: "gray" }, "_16nnnz6x"], [{ alphaBg: true, variant: "red" }, "_16nnnz6y"], [{ alphaBg: true, variant: "blue" }, "_16nnnz6z"], [{ alphaBg: true, variant: "green" }, "_16nnnz610"], [{ alphaBg: true, variant: "neon" }, "_16nnnz611"], [{ alphaBg: true, variant: "orange" }, "_16nnnz612"], [{ alphaBg: true, variant: "purple" }, "_16nnnz613"]] });
 exports.badgeRecipe = badgeRecipe;
 exports.interactiveBadgeRecipe = interactiveBadgeRecipe;
 //# sourceMappingURL=Badge.vanilla.css.cjs.map

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

@@ -1,5 +1,5 @@
 /* empty css                                 */
-import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var badgeRecipe = createRuntimeFn({ defaultClassName: "_16nnnz62 _16nnnz60", variantClassNames: { size: { small: "_16nnnz63", large: "_16nnnz64" }, variant: { gray: "_16nnnz65", red: "_16nnnz66", blue: "_16nnnz67", green: "_16nnnz68", neon: "_16nnnz69", orange: "_16nnnz6a", purple: "_16nnnz6b" }, alphaBg: { true: "_16nnnz6c" }, borderless: { true: "_16nnnz6d" } }, defaultVariants: { size: "small", variant: "gray", borderless: false }, compoundVariants: [[{ alphaBg: true, variant: "gray" }, "_16nnnz6e"], [{ alphaBg: true, variant: "red" }, "_16nnnz6f"], [{ alphaBg: true, variant: "blue" }, "_16nnnz6g"], [{ alphaBg: true, variant: "green" }, "_16nnnz6h"], [{ alphaBg: true, variant: "neon" }, "_16nnnz6i"], [{ alphaBg: true, variant: "orange" }, "_16nnnz6j"], [{ alphaBg: true, variant: "purple" }, "_16nnnz6k"]] });
 var interactiveBadgeRecipe = createRuntimeFn({ defaultClassName: "_16nnnz6l _16nnnz61 _16nnnz60", variantClassNames: { size: { small: "_16nnnz6m", large: "_16nnnz6n" }, variant: { gray: "_16nnnz6o", red: "_16nnnz6p", blue: "_16nnnz6q", green: "_16nnnz6r", neon: "_16nnnz6s", orange: "_16nnnz6t", purple: "_16nnnz6u" }, alphaBg: { true: "_16nnnz6v" }, borderless: { true: "_16nnnz6w" } }, defaultVariants: { size: "small", variant: "gray", borderless: false }, compoundVariants: [[{ alphaBg: true, variant: "gray" }, "_16nnnz6x"], [{ alphaBg: true, variant: "red" }, "_16nnnz6y"], [{ alphaBg: true, variant: "blue" }, "_16nnnz6z"], [{ alphaBg: true, variant: "green" }, "_16nnnz610"], [{ alphaBg: true, variant: "neon" }, "_16nnnz611"], [{ alphaBg: true, variant: "orange" }, "_16nnnz612"], [{ alphaBg: true, variant: "purple" }, "_16nnnz613"]] });
 export {

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 ;/* empty css                                             */
 ;/* empty css                                        */
-const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
-var blockquoteRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "kyxdzh1 kyxdzh0", variantClassNames: { size: { "0": "kyxdzh2", "1": "kyxdzh3", "2": "kyxdzh4", "3": "kyxdzh5", "4": "kyxdzh6", "5": "kyxdzh7", "6": "kyxdzh8", "7": "kyxdzh9", "8": "kyxdzha", "9": "kyxdzhb", "10": "kyxdzhc", "11": "kyxdzhd", "12": "kyxdzhe", inherit: "kyxdzhf" }, weight: { light: "kyxdzhg", regular: "kyxdzhh", medium: "kyxdzhi", semiBold: "kyxdzhj", bold: "kyxdzhk" }, variant: { red: "kyxdzhl", subtle: "kyxdzhm", "default": "kyxdzhn", contrast: "kyxdzho", inherit: "kyxdzhp", invalid: "kyxdzhq" }, gradient: { true: "kyxdzhr" }, transform: { uppercase: "kyxdzhs", capitalize: "kyxdzht", capitalizeWords: "kyxdzhu" }, noWrap: { true: "kyxdzhv" } }, defaultVariants: { size: "3", variant: "default" }, compoundVariants: [] });
+const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var blockquoteRecipe = createRuntimeFn.createRuntimeFn({ defaultClassName: "kyxdzh1 kyxdzh0", variantClassNames: { size: { "0": "kyxdzh2", "1": "kyxdzh3", "2": "kyxdzh4", "3": "kyxdzh5", "4": "kyxdzh6", "5": "kyxdzh7", "6": "kyxdzh8", "7": "kyxdzh9", "8": "kyxdzha", "9": "kyxdzhb", "10": "kyxdzhc", "11": "kyxdzhd", "12": "kyxdzhe", inherit: "kyxdzhf" }, weight: { light: "kyxdzhg", regular: "kyxdzhh", medium: "kyxdzhi", semiBold: "kyxdzhj", bold: "kyxdzhk" }, variant: { red: "kyxdzhl", subtle: "kyxdzhm", "default": "kyxdzhn", contrast: "kyxdzho", inherit: "kyxdzhp", invalid: "kyxdzhq" }, gradient: { true: "kyxdzhr" }, transform: { uppercase: "kyxdzhs", capitalize: "kyxdzht", capitalizeWords: "kyxdzhu" }, noWrap: { true: "kyxdzhv" } }, defaultVariants: { size: "3", variant: "default" }, compoundVariants: [] });
 exports.blockquoteRecipe = blockquoteRecipe;
 //# sourceMappingURL=Blockquote.vanilla.css.cjs.map

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

@@ -1,6 +1,6 @@
 /* empty css                                           */
 /* empty css                                      */
-import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var blockquoteRecipe = createRuntimeFn({ defaultClassName: "kyxdzh1 kyxdzh0", variantClassNames: { size: { "0": "kyxdzh2", "1": "kyxdzh3", "2": "kyxdzh4", "3": "kyxdzh5", "4": "kyxdzh6", "5": "kyxdzh7", "6": "kyxdzh8", "7": "kyxdzh9", "8": "kyxdzha", "9": "kyxdzhb", "10": "kyxdzhc", "11": "kyxdzhd", "12": "kyxdzhe", inherit: "kyxdzhf" }, weight: { light: "kyxdzhg", regular: "kyxdzhh", medium: "kyxdzhi", semiBold: "kyxdzhj", bold: "kyxdzhk" }, variant: { red: "kyxdzhl", subtle: "kyxdzhm", "default": "kyxdzhn", contrast: "kyxdzho", inherit: "kyxdzhp", invalid: "kyxdzhq" }, gradient: { true: "kyxdzhr" }, transform: { uppercase: "kyxdzhs", capitalize: "kyxdzht", capitalizeWords: "kyxdzhu" }, noWrap: { true: "kyxdzhv" } }, defaultVariants: { size: "3", variant: "default" }, compoundVariants: [] });
 export {
   blockquoteRecipe

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 ;/* empty css                                    */
-const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
-var bubbleRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "_1fnlquw2 _1fnlquw1", variantClassNames: { variant: { red: "_1fnlquw3", green: "_1fnlquw4", orange: "_1fnlquw5", blue: "_1fnlquw6", yellow: "_1fnlquw7", purple: "_1fnlquw8", gray: "_1fnlquw9" }, size: { "x-small": "_1fnlquwa", small: "_1fnlquwb", medium: "_1fnlquwc", large: "_1fnlquwd", "x-large": "_1fnlquwe" }, noAnimation: { true: "_1fnlquwf" } }, defaultVariants: { size: "small", noAnimation: false }, compoundVariants: [] });
+const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var bubbleRecipe = createRuntimeFn.createRuntimeFn({ defaultClassName: "_1fnlquw2 _1fnlquw1", variantClassNames: { variant: { red: "_1fnlquw3", green: "_1fnlquw4", orange: "_1fnlquw5", blue: "_1fnlquw6", yellow: "_1fnlquw7", purple: "_1fnlquw8", gray: "_1fnlquw9" }, size: { "x-small": "_1fnlquwa", small: "_1fnlquwb", medium: "_1fnlquwc", large: "_1fnlquwd", "x-large": "_1fnlquwe" }, noAnimation: { true: "_1fnlquwf" } }, defaultVariants: { size: "small", noAnimation: false }, compoundVariants: [] });
 exports.bubbleRecipe = bubbleRecipe;
 //# sourceMappingURL=Bubble.vanilla.css.cjs.map

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

@@ -1,5 +1,5 @@
 /* empty css                                  */
-import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var bubbleRecipe = createRuntimeFn({ defaultClassName: "_1fnlquw2 _1fnlquw1", variantClassNames: { variant: { red: "_1fnlquw3", green: "_1fnlquw4", orange: "_1fnlquw5", blue: "_1fnlquw6", yellow: "_1fnlquw7", purple: "_1fnlquw8", gray: "_1fnlquw9" }, size: { "x-small": "_1fnlquwa", small: "_1fnlquwb", medium: "_1fnlquwc", large: "_1fnlquwd", "x-large": "_1fnlquwe" }, noAnimation: { true: "_1fnlquwf" } }, defaultVariants: { size: "small", noAnimation: false }, compoundVariants: [] });
 export {
   bubbleRecipe

package/dist/components/Button/Button.cjs

@@ -228,7 +228,8 @@ const StyledButton = stitches_config.styled("button", BUTTON_BASE_STYLES, {
       ghost: true,
       css: {
         backgroundColor: "transparent",
-        color: "$buttonSecondaryText"
+        color: "$buttonSecondaryText",
+        boxShadow: "none"
       }
     },
     {

package/dist/components/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\nimport { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';\n\nexport const BUTTON_BASE_STYLES = {\n  appearance: 'none',\n  userSelect: 'none',\n  boxSizing: 'border-box',\n  border: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n  '&:disabled': {\n    pointerEvents: 'none',\n    opacity: 0.5,\n  },\n};\n\nconst BG_SIZES = {\n  small: '$sizes$8',\n  medium: '$sizes$9',\n  large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n  $$bgSize: BG_SIZES[size],\n  backgroundSize: '$$bgSize',\n  backgroundImage: `linear-gradient(\n            -45deg,\n            transparent 33%,\n            $colors$deepBlue4 33%,\n            $colors$deepBlue4 66%,\n            transparent 66%\n          )`,\n  animation: `${keyframes({\n    '100%': { transform: 'translateX($$bgSize)' },\n  })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n  // Reset\n  all: 'unset',\n  alignItems: 'center',\n  overflow: 'hidden',\n\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n\n  // Custom reset?\n  display: 'inline-flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  lineHeight: '1',\n\n  // Custom\n  position: 'relative',\n  height: '$5',\n  px: '$2',\n  fontFamily: '$rubik',\n  fontSize: '$3',\n  fontWeight: '$medium',\n  fontVariantNumeric: 'tabular-nums',\n\n  '&:focus-visible': {\n    boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\n    '&::before': {\n      backgroundColor: 'rgba(255, 255, 255, 0.15)',\n    },\n    '&::after': {\n      opacity: 0.15,\n    },\n  },\n\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      '&::before': {\n        backgroundColor: 'rgba(255, 255, 255, 0.15)',\n      },\n      '&::after': {\n        opacity: 0.05,\n      },\n    },\n  },\n\n  '&:active': {\n    '&::before': {\n      backgroundColor: 'rgba(0, 0, 0, 0.15)',\n    },\n  },\n\n  variants: {\n    size: {\n      small: {\n        borderRadius: '$3',\n        height: '$5',\n        px: '$2',\n        fontSize: '$1',\n        lineHeight: '$sizes$5',\n      },\n      medium: {\n        borderRadius: '$3',\n        height: '$6',\n        px: '$3',\n        fontSize: '$3',\n        lineHeight: '$sizes$6',\n      },\n      large: {\n        borderRadius: '$3',\n        height: '$7',\n        px: '$3',\n        fontSize: '$3',\n        lineHeight: '$sizes$7',\n      },\n    },\n    variant: {\n      primary: {\n        bc: '$buttonPrimaryBg',\n        c: '$buttonPrimaryText',\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$buttonPrimaryBg',\n            },\n          },\n        },\n      },\n      secondary: {\n        bc: '$buttonSecondaryBg',\n        c: '$buttonSecondaryText',\n        boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n        '&:active': {\n          boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n        },\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$buttonPrimaryBg',\n            },\n          },\n        },\n      },\n      red: {\n        backgroundColor: '$buttonRedBg',\n        color: '$buttonRedText',\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n        },\n      },\n    },\n    state: {\n      active: {\n        bc: '$deepBlue5',\n        c: '$deepBlue11',\n        '&:active': {\n          backgroundColor: '$deepBlue5',\n        },\n      },\n      waiting: {\n        bc: '$deepBlue3',\n        boxShadow: `inset 0 0 0 1px $deepBlue4`,\n        c: 'transparent',\n        overflow: 'hidden',\n        pointerEvents: 'none',\n        '&::after': {\n          left: '-100%',\n          width: '200%',\n          ...backgroundSizeAnimation('medium'),\n        },\n      },\n    },\n    ghost: {\n      true: {\n        boxShadow: 'none',\n        '@hover': {\n          '&:hover': {\n            boxShadow: 'none',\n          },\n        },\n      },\n    },\n    rounded: {\n      true: {\n        borderRadius: '$pill',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'primary',\n      ghost: 'true',\n      css: {\n        color: '$buttonPrimaryBg',\n        backgroundColor: 'transparent',\n        '@hover': {\n          '&:hover': {\n            color: '$buttonPrimaryGhostHoverText',\n            backgroundColor: 'transparent',\n          },\n        },\n      },\n    },\n    {\n      variant: 'primary',\n      state: 'active',\n      css: {\n        backgroundColor: '$buttonPrimaryFocusBg',\n        color: '$buttonPrimaryText',\n        boxShadow: 'inset 0 0 0 2px white',\n      },\n    },\n    {\n      variant: 'secondary',\n      state: 'waiting',\n      css: {\n        backgroundColor: '$deepBlue3',\n        color: 'transparent',\n      },\n    },\n    {\n      variant: 'secondary',\n      ghost: true,\n      css: {\n        backgroundColor: 'transparent',\n        color: '$buttonSecondaryText',\n      },\n    },\n    {\n      variant: 'red',\n      state: 'waiting',\n      css: {\n        backgroundColor: '$deepBlue3',\n        color: 'transparent',\n      },\n    },\n    {\n      variant: 'red',\n      state: 'active',\n      css: {\n        backgroundColor: '$buttonRedFocusBg',\n        color: '$buttonRedText',\n        boxShadow: 'inset 0 0 0 2px white',\n      },\n    },\n    {\n      variant: 'red',\n      ghost: 'true',\n      css: {\n        color: '$buttonRedBg',\n        backgroundColor: 'transparent',\n        '@hover': {\n          '&:hover': {\n            color: '$buttonRedHoverText',\n            backgroundColor: 'transparent',\n          },\n        },\n      },\n    },\n    {\n      size: 'small',\n      state: 'waiting',\n      css: {\n        '&::after': backgroundSizeAnimation('small'),\n      },\n    },\n    {\n      size: 'large',\n      state: 'waiting',\n      css: {\n        '&::after': backgroundSizeAnimation('large'),\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'medium',\n    variant: 'primary',\n  },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n  ButtonVariants & {\n    css?: CSS;\n    asChild?: boolean;\n    as?: string;\n  };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n  ({ children, asChild, ...props }, forwardedRef) => {\n    const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n    return (\n      <Component ref={forwardedRef} {...props}>\n        {children}\n      </Component>\n    );\n  },\n);\n\nconst BaseButton = (props: ButtonProps): JSX.Element => <Button {...props} />;\nexport const ButtonForStory = modifyVariantsForStory<ButtonVariants, ButtonProps>(BaseButton);\n"],"names":["keyframes","styled","Slot","useMemo"],"mappings":"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"}
+{"version":3,"file":"Button.cjs","sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\nimport { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';\n\nexport const BUTTON_BASE_STYLES = {\n  appearance: 'none',\n  userSelect: 'none',\n  boxSizing: 'border-box',\n  border: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n  '&:disabled': {\n    pointerEvents: 'none',\n    opacity: 0.5,\n  },\n};\n\nconst BG_SIZES = {\n  small: '$sizes$8',\n  medium: '$sizes$9',\n  large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n  $$bgSize: BG_SIZES[size],\n  backgroundSize: '$$bgSize',\n  backgroundImage: `linear-gradient(\n            -45deg,\n            transparent 33%,\n            $colors$deepBlue4 33%,\n            $colors$deepBlue4 66%,\n            transparent 66%\n          )`,\n  animation: `${keyframes({\n    '100%': { transform: 'translateX($$bgSize)' },\n  })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n  // Reset\n  all: 'unset',\n  alignItems: 'center',\n  overflow: 'hidden',\n\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n\n  // Custom reset?\n  display: 'inline-flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  lineHeight: '1',\n\n  // Custom\n  position: 'relative',\n  height: '$5',\n  px: '$2',\n  fontFamily: '$rubik',\n  fontSize: '$3',\n  fontWeight: '$medium',\n  fontVariantNumeric: 'tabular-nums',\n\n  '&:focus-visible': {\n    boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\n    '&::before': {\n      backgroundColor: 'rgba(255, 255, 255, 0.15)',\n    },\n    '&::after': {\n      opacity: 0.15,\n    },\n  },\n\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      '&::before': {\n        backgroundColor: 'rgba(255, 255, 255, 0.15)',\n      },\n      '&::after': {\n        opacity: 0.05,\n      },\n    },\n  },\n\n  '&:active': {\n    '&::before': {\n      backgroundColor: 'rgba(0, 0, 0, 0.15)',\n    },\n  },\n\n  variants: {\n    size: {\n      small: {\n        borderRadius: '$3',\n        height: '$5',\n        px: '$2',\n        fontSize: '$1',\n        lineHeight: '$sizes$5',\n      },\n      medium: {\n        borderRadius: '$3',\n        height: '$6',\n        px: '$3',\n        fontSize: '$3',\n        lineHeight: '$sizes$6',\n      },\n      large: {\n        borderRadius: '$3',\n        height: '$7',\n        px: '$3',\n        fontSize: '$3',\n        lineHeight: '$sizes$7',\n      },\n    },\n    variant: {\n      primary: {\n        bc: '$buttonPrimaryBg',\n        c: '$buttonPrimaryText',\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$buttonPrimaryBg',\n            },\n          },\n        },\n      },\n      secondary: {\n        bc: '$buttonSecondaryBg',\n        c: '$buttonSecondaryText',\n        boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n        '&:active': {\n          boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n        },\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$buttonPrimaryBg',\n            },\n          },\n        },\n      },\n      red: {\n        backgroundColor: '$buttonRedBg',\n        color: '$buttonRedText',\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n        },\n      },\n    },\n    state: {\n      active: {\n        bc: '$deepBlue5',\n        c: '$deepBlue11',\n        '&:active': {\n          backgroundColor: '$deepBlue5',\n        },\n      },\n      waiting: {\n        bc: '$deepBlue3',\n        boxShadow: `inset 0 0 0 1px $deepBlue4`,\n        c: 'transparent',\n        overflow: 'hidden',\n        pointerEvents: 'none',\n        '&::after': {\n          left: '-100%',\n          width: '200%',\n          ...backgroundSizeAnimation('medium'),\n        },\n      },\n    },\n    ghost: {\n      true: {\n        boxShadow: 'none',\n        '@hover': {\n          '&:hover': {\n            boxShadow: 'none',\n          },\n        },\n      },\n    },\n    rounded: {\n      true: {\n        borderRadius: '$pill',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'primary',\n      ghost: 'true',\n      css: {\n        color: '$buttonPrimaryBg',\n        backgroundColor: 'transparent',\n        '@hover': {\n          '&:hover': {\n            color: '$buttonPrimaryGhostHoverText',\n            backgroundColor: 'transparent',\n          },\n        },\n      },\n    },\n    {\n      variant: 'primary',\n      state: 'active',\n      css: {\n        backgroundColor: '$buttonPrimaryFocusBg',\n        color: '$buttonPrimaryText',\n        boxShadow: 'inset 0 0 0 2px white',\n      },\n    },\n    {\n      variant: 'secondary',\n      state: 'waiting',\n      css: {\n        backgroundColor: '$deepBlue3',\n        color: 'transparent',\n      },\n    },\n    {\n      variant: 'secondary',\n      ghost: true,\n      css: {\n        backgroundColor: 'transparent',\n        color: '$buttonSecondaryText',\n        boxShadow: 'none',\n      },\n    },\n    {\n      variant: 'red',\n      state: 'waiting',\n      css: {\n        backgroundColor: '$deepBlue3',\n        color: 'transparent',\n      },\n    },\n    {\n      variant: 'red',\n      state: 'active',\n      css: {\n        backgroundColor: '$buttonRedFocusBg',\n        color: '$buttonRedText',\n        boxShadow: 'inset 0 0 0 2px white',\n      },\n    },\n    {\n      variant: 'red',\n      ghost: 'true',\n      css: {\n        color: '$buttonRedBg',\n        backgroundColor: 'transparent',\n        '@hover': {\n          '&:hover': {\n            color: '$buttonRedHoverText',\n            backgroundColor: 'transparent',\n          },\n        },\n      },\n    },\n    {\n      size: 'small',\n      state: 'waiting',\n      css: {\n        '&::after': backgroundSizeAnimation('small'),\n      },\n    },\n    {\n      size: 'large',\n      state: 'waiting',\n      css: {\n        '&::after': backgroundSizeAnimation('large'),\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'medium',\n    variant: 'primary',\n  },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n  ButtonVariants & {\n    css?: CSS;\n    asChild?: boolean;\n    as?: string;\n  };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n  ({ children, asChild, ...props }, forwardedRef) => {\n    const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n    return (\n      <Component ref={forwardedRef} {...props}>\n        {children}\n      </Component>\n    );\n  },\n);\n\nconst BaseButton = (props: ButtonProps): JSX.Element => <Button {...props} />;\nexport const ButtonForStory = modifyVariantsForStory<ButtonVariants, ButtonProps>(BaseButton);\n"],"names":["keyframes","styled","Slot","useMemo"],"mappings":"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"}

package/dist/components/Button/Button.js

@@ -226,7 +226,8 @@ const StyledButton = styled("button", BUTTON_BASE_STYLES, {
       ghost: true,
       css: {
         backgroundColor: "transparent",
-        color: "$buttonSecondaryText"
+        color: "$buttonSecondaryText",
+        boxShadow: "none"
       }
     },
     {

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\nimport { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';\n\nexport const BUTTON_BASE_STYLES = {\n  appearance: 'none',\n  userSelect: 'none',\n  boxSizing: 'border-box',\n  border: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n  '&:disabled': {\n    pointerEvents: 'none',\n    opacity: 0.5,\n  },\n};\n\nconst BG_SIZES = {\n  small: '$sizes$8',\n  medium: '$sizes$9',\n  large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n  $$bgSize: BG_SIZES[size],\n  backgroundSize: '$$bgSize',\n  backgroundImage: `linear-gradient(\n            -45deg,\n            transparent 33%,\n            $colors$deepBlue4 33%,\n            $colors$deepBlue4 66%,\n            transparent 66%\n          )`,\n  animation: `${keyframes({\n    '100%': { transform: 'translateX($$bgSize)' },\n  })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n  // Reset\n  all: 'unset',\n  alignItems: 'center',\n  overflow: 'hidden',\n\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n\n  // Custom reset?\n  display: 'inline-flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  lineHeight: '1',\n\n  // Custom\n  position: 'relative',\n  height: '$5',\n  px: '$2',\n  fontFamily: '$rubik',\n  fontSize: '$3',\n  fontWeight: '$medium',\n  fontVariantNumeric: 'tabular-nums',\n\n  '&:focus-visible': {\n    boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\n    '&::before': {\n      backgroundColor: 'rgba(255, 255, 255, 0.15)',\n    },\n    '&::after': {\n      opacity: 0.15,\n    },\n  },\n\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      '&::before': {\n        backgroundColor: 'rgba(255, 255, 255, 0.15)',\n      },\n      '&::after': {\n        opacity: 0.05,\n      },\n    },\n  },\n\n  '&:active': {\n    '&::before': {\n      backgroundColor: 'rgba(0, 0, 0, 0.15)',\n    },\n  },\n\n  variants: {\n    size: {\n      small: {\n        borderRadius: '$3',\n        height: '$5',\n        px: '$2',\n        fontSize: '$1',\n        lineHeight: '$sizes$5',\n      },\n      medium: {\n        borderRadius: '$3',\n        height: '$6',\n        px: '$3',\n        fontSize: '$3',\n        lineHeight: '$sizes$6',\n      },\n      large: {\n        borderRadius: '$3',\n        height: '$7',\n        px: '$3',\n        fontSize: '$3',\n        lineHeight: '$sizes$7',\n      },\n    },\n    variant: {\n      primary: {\n        bc: '$buttonPrimaryBg',\n        c: '$buttonPrimaryText',\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$buttonPrimaryBg',\n            },\n          },\n        },\n      },\n      secondary: {\n        bc: '$buttonSecondaryBg',\n        c: '$buttonSecondaryText',\n        boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n        '&:active': {\n          boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n        },\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$buttonPrimaryBg',\n            },\n          },\n        },\n      },\n      red: {\n        backgroundColor: '$buttonRedBg',\n        color: '$buttonRedText',\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n        },\n      },\n    },\n    state: {\n      active: {\n        bc: '$deepBlue5',\n        c: '$deepBlue11',\n        '&:active': {\n          backgroundColor: '$deepBlue5',\n        },\n      },\n      waiting: {\n        bc: '$deepBlue3',\n        boxShadow: `inset 0 0 0 1px $deepBlue4`,\n        c: 'transparent',\n        overflow: 'hidden',\n        pointerEvents: 'none',\n        '&::after': {\n          left: '-100%',\n          width: '200%',\n          ...backgroundSizeAnimation('medium'),\n        },\n      },\n    },\n    ghost: {\n      true: {\n        boxShadow: 'none',\n        '@hover': {\n          '&:hover': {\n            boxShadow: 'none',\n          },\n        },\n      },\n    },\n    rounded: {\n      true: {\n        borderRadius: '$pill',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'primary',\n      ghost: 'true',\n      css: {\n        color: '$buttonPrimaryBg',\n        backgroundColor: 'transparent',\n        '@hover': {\n          '&:hover': {\n            color: '$buttonPrimaryGhostHoverText',\n            backgroundColor: 'transparent',\n          },\n        },\n      },\n    },\n    {\n      variant: 'primary',\n      state: 'active',\n      css: {\n        backgroundColor: '$buttonPrimaryFocusBg',\n        color: '$buttonPrimaryText',\n        boxShadow: 'inset 0 0 0 2px white',\n      },\n    },\n    {\n      variant: 'secondary',\n      state: 'waiting',\n      css: {\n        backgroundColor: '$deepBlue3',\n        color: 'transparent',\n      },\n    },\n    {\n      variant: 'secondary',\n      ghost: true,\n      css: {\n        backgroundColor: 'transparent',\n        color: '$buttonSecondaryText',\n      },\n    },\n    {\n      variant: 'red',\n      state: 'waiting',\n      css: {\n        backgroundColor: '$deepBlue3',\n        color: 'transparent',\n      },\n    },\n    {\n      variant: 'red',\n      state: 'active',\n      css: {\n        backgroundColor: '$buttonRedFocusBg',\n        color: '$buttonRedText',\n        boxShadow: 'inset 0 0 0 2px white',\n      },\n    },\n    {\n      variant: 'red',\n      ghost: 'true',\n      css: {\n        color: '$buttonRedBg',\n        backgroundColor: 'transparent',\n        '@hover': {\n          '&:hover': {\n            color: '$buttonRedHoverText',\n            backgroundColor: 'transparent',\n          },\n        },\n      },\n    },\n    {\n      size: 'small',\n      state: 'waiting',\n      css: {\n        '&::after': backgroundSizeAnimation('small'),\n      },\n    },\n    {\n      size: 'large',\n      state: 'waiting',\n      css: {\n        '&::after': backgroundSizeAnimation('large'),\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'medium',\n    variant: 'primary',\n  },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n  ButtonVariants & {\n    css?: CSS;\n    asChild?: boolean;\n    as?: string;\n  };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n  ({ children, asChild, ...props }, forwardedRef) => {\n    const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n    return (\n      <Component ref={forwardedRef} {...props}>\n        {children}\n      </Component>\n    );\n  },\n);\n\nconst BaseButton = (props: ButtonProps): JSX.Element => <Button {...props} />;\nexport const ButtonForStory = modifyVariantsForStory<ButtonVariants, ButtonProps>(BaseButton);\n"],"names":[],"mappings":";;;;AAMO,MAAM,qBAAqB;AAAA,EAChC,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,yBAAyB;AAAA,EACzB,cAAc;AAAA,IACZ,eAAe;AAAA,IACf,SAAS;AAAA,EAAA;AAEb;AAEA,MAAM,WAAW;AAAA,EACf,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,MAAM,0BAA0B,CAAC,UAAiC;AAAA,EAChE,UAAU,SAAS,IAAI;AAAA,EACvB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOjB,WAAW,GAAG,UAAU;AAAA,IACtB,QAAQ,EAAE,WAAW,uBAAA;AAAA,EAAuB,CAC7C,CAAC;AACJ;AAEO,MAAM,eAAe,OAAO,UAAU,oBAAoB;AAAA;AAAA,EAE/D,KAAK;AAAA,EACL,YAAY;AAAA,EACZ,UAAU;AAAA,EAEV,aAAa;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,EAAA;AAAA,EAET,YAAY;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,EAAA;AAAA;AAAA,EAIT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,YAAY;AAAA;AAAA,EAGZ,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,oBAAoB;AAAA,EAEpB,mBAAmB;AAAA,IACjB,WAAW;AAAA,IACX,aAAa;AAAA,MACX,iBAAiB;AAAA,IAAA;AAAA,IAEnB,YAAY;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAGF,UAAU;AAAA,IACR,WAAW;AAAA,MACT,QAAQ;AAAA,MACR,aAAa;AAAA,QACX,iBAAiB;AAAA,MAAA;AAAA,MAEnB,YAAY;AAAA,QACV,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAGF,YAAY;AAAA,IACV,aAAa;AAAA,MACX,iBAAiB;AAAA,IAAA;AAAA,EACnB;AAAA,EAGF,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,OAAO;AAAA,QACL,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,MAEd,QAAQ;AAAA,QACN,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,MAEd,OAAO;AAAA,QACL,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,IAEF,SAAS;AAAA,MACP,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,GAAG;AAAA,QACH,mBAAmB;AAAA,UACjB,WAAW;AAAA,QAAA;AAAA,QAEb,UAAU;AAAA,UACR,WAAW;AAAA,YACT,YAAY;AAAA,cACV,iBAAiB;AAAA,YAAA;AAAA,UACnB;AAAA,QACF;AAAA,MACF;AAAA,MAEF,WAAW;AAAA,QACT,IAAI;AAAA,QACJ,GAAG;AAAA,QACH,WAAW;AAAA,QACX,YAAY;AAAA,UACV,WAAW;AAAA,QAAA;AAAA,QAEb,mBAAmB;AAAA,UACjB,WAAW;AAAA,QAAA;AAAA,QAEb,UAAU;AAAA,UACR,WAAW;AAAA,YACT,YAAY;AAAA,cACV,iBAAiB;AAAA,YAAA;AAAA,UACnB;AAAA,QACF;AAAA,MACF;AAAA,MAEF,KAAK;AAAA,QACH,iBAAiB;AAAA,QACjB,OAAO;AAAA,QACP,mBAAmB;AAAA,UACjB,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,IAEF,OAAO;AAAA,MACL,QAAQ;AAAA,QACN,IAAI;AAAA,QACJ,GAAG;AAAA,QACH,YAAY;AAAA,UACV,iBAAiB;AAAA,QAAA;AAAA,MACnB;AAAA,MAEF,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,WAAW;AAAA,QACX,GAAG;AAAA,QACH,UAAU;AAAA,QACV,eAAe;AAAA,QACf,YAAY;AAAA,UACV,MAAM;AAAA,UACN,OAAO;AAAA,UACP,GAAG,wBAAwB,QAAQ;AAAA,QAAA;AAAA,MACrC;AAAA,IACF;AAAA,IAEF,OAAO;AAAA,MACL,MAAM;AAAA,QACJ,WAAW;AAAA,QACX,UAAU;AAAA,UACR,WAAW;AAAA,YACT,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,IAEF,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,cAAc;AAAA,MAAA;AAAA,IAChB;AAAA,EACF;AAAA,EAEF,kBAAkB;AAAA,IAChB;AAAA,MACE,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,QACH,OAAO;AAAA,QACP,iBAAiB;AAAA,QACjB,UAAU;AAAA,UACR,WAAW;AAAA,YACT,OAAO;AAAA,YACP,iBAAiB;AAAA,UAAA;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,IAEF;AAAA,MACE,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,QACH,iBAAiB;AAAA,QACjB,OAAO;AAAA,QACP,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF;AAAA,MACE,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,QACH,iBAAiB;AAAA,QACjB,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF;AAAA,MACE,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,QACH,iBAAiB;AAAA,QACjB,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF;AAAA,MACE,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,QACH,iBAAiB;AAAA,QACjB,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF;AAAA,MACE,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,QACH,iBAAiB;AAAA,QACjB,OAAO;AAAA,QACP,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF;AAAA,MACE,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,QACH,OAAO;AAAA,QACP,iBAAiB;AAAA,QACjB,UAAU;AAAA,UACR,WAAW;AAAA,YACT,OAAO;AAAA,YACP,iBAAiB;AAAA,UAAA;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,IAEF;AAAA,MACE,MAAM;AAAA,MACN,OAAO;AAAA,MACP,KAAK;AAAA,QACH,YAAY,wBAAwB,OAAO;AAAA,MAAA;AAAA,IAC7C;AAAA,IAEF;AAAA,MACE,MAAM;AAAA,MACN,OAAO;AAAA,MACP,KAAK;AAAA,QACH,YAAY,wBAAwB,OAAO;AAAA,MAAA;AAAA,IAC7C;AAAA,EACF;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAEb,CAAC;AACD,MAAM,mBAAmB,OAAO,MAAM,YAAY;AAU3C,MAAM,SAAS,MAAM;AAAA,EAC1B,CAAC,EAAE,UAAU,SAAS,GAAG,MAAA,GAAS,iBAAiB;AACjD,UAAM,YAAY,QAAQ,MAAO,UAAU,mBAAmB,cAAe,CAAC,OAAO,CAAC;AACtF,+BACG,WAAA,EAAU,KAAK,cAAe,GAAG,OAC/B,UACH;AAAA,EAEJ;AACF;"}
+{"version":3,"file":"Button.js","sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\nimport { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';\n\nexport const BUTTON_BASE_STYLES = {\n  appearance: 'none',\n  userSelect: 'none',\n  boxSizing: 'border-box',\n  border: 'none',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n  '&:disabled': {\n    pointerEvents: 'none',\n    opacity: 0.5,\n  },\n};\n\nconst BG_SIZES = {\n  small: '$sizes$8',\n  medium: '$sizes$9',\n  large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n  $$bgSize: BG_SIZES[size],\n  backgroundSize: '$$bgSize',\n  backgroundImage: `linear-gradient(\n            -45deg,\n            transparent 33%,\n            $colors$deepBlue4 33%,\n            $colors$deepBlue4 66%,\n            transparent 66%\n          )`,\n  animation: `${keyframes({\n    '100%': { transform: 'translateX($$bgSize)' },\n  })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n  // Reset\n  all: 'unset',\n  alignItems: 'center',\n  overflow: 'hidden',\n\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n  },\n\n  // Custom reset?\n  display: 'inline-flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  lineHeight: '1',\n\n  // Custom\n  position: 'relative',\n  height: '$5',\n  px: '$2',\n  fontFamily: '$rubik',\n  fontSize: '$3',\n  fontWeight: '$medium',\n  fontVariantNumeric: 'tabular-nums',\n\n  '&:focus-visible': {\n    boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\n    '&::before': {\n      backgroundColor: 'rgba(255, 255, 255, 0.15)',\n    },\n    '&::after': {\n      opacity: 0.15,\n    },\n  },\n\n  '@hover': {\n    '&:hover': {\n      cursor: 'pointer',\n      '&::before': {\n        backgroundColor: 'rgba(255, 255, 255, 0.15)',\n      },\n      '&::after': {\n        opacity: 0.05,\n      },\n    },\n  },\n\n  '&:active': {\n    '&::before': {\n      backgroundColor: 'rgba(0, 0, 0, 0.15)',\n    },\n  },\n\n  variants: {\n    size: {\n      small: {\n        borderRadius: '$3',\n        height: '$5',\n        px: '$2',\n        fontSize: '$1',\n        lineHeight: '$sizes$5',\n      },\n      medium: {\n        borderRadius: '$3',\n        height: '$6',\n        px: '$3',\n        fontSize: '$3',\n        lineHeight: '$sizes$6',\n      },\n      large: {\n        borderRadius: '$3',\n        height: '$7',\n        px: '$3',\n        fontSize: '$3',\n        lineHeight: '$sizes$7',\n      },\n    },\n    variant: {\n      primary: {\n        bc: '$buttonPrimaryBg',\n        c: '$buttonPrimaryText',\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$buttonPrimaryBg',\n            },\n          },\n        },\n      },\n      secondary: {\n        bc: '$buttonSecondaryBg',\n        c: '$buttonSecondaryText',\n        boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n        '&:active': {\n          boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n        },\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n        },\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$buttonPrimaryBg',\n            },\n          },\n        },\n      },\n      red: {\n        backgroundColor: '$buttonRedBg',\n        color: '$buttonRedText',\n        '&:focus-visible': {\n          boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n        },\n      },\n    },\n    state: {\n      active: {\n        bc: '$deepBlue5',\n        c: '$deepBlue11',\n        '&:active': {\n          backgroundColor: '$deepBlue5',\n        },\n      },\n      waiting: {\n        bc: '$deepBlue3',\n        boxShadow: `inset 0 0 0 1px $deepBlue4`,\n        c: 'transparent',\n        overflow: 'hidden',\n        pointerEvents: 'none',\n        '&::after': {\n          left: '-100%',\n          width: '200%',\n          ...backgroundSizeAnimation('medium'),\n        },\n      },\n    },\n    ghost: {\n      true: {\n        boxShadow: 'none',\n        '@hover': {\n          '&:hover': {\n            boxShadow: 'none',\n          },\n        },\n      },\n    },\n    rounded: {\n      true: {\n        borderRadius: '$pill',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'primary',\n      ghost: 'true',\n      css: {\n        color: '$buttonPrimaryBg',\n        backgroundColor: 'transparent',\n        '@hover': {\n          '&:hover': {\n            color: '$buttonPrimaryGhostHoverText',\n            backgroundColor: 'transparent',\n          },\n        },\n      },\n    },\n    {\n      variant: 'primary',\n      state: 'active',\n      css: {\n        backgroundColor: '$buttonPrimaryFocusBg',\n        color: '$buttonPrimaryText',\n        boxShadow: 'inset 0 0 0 2px white',\n      },\n    },\n    {\n      variant: 'secondary',\n      state: 'waiting',\n      css: {\n        backgroundColor: '$deepBlue3',\n        color: 'transparent',\n      },\n    },\n    {\n      variant: 'secondary',\n      ghost: true,\n      css: {\n        backgroundColor: 'transparent',\n        color: '$buttonSecondaryText',\n        boxShadow: 'none',\n      },\n    },\n    {\n      variant: 'red',\n      state: 'waiting',\n      css: {\n        backgroundColor: '$deepBlue3',\n        color: 'transparent',\n      },\n    },\n    {\n      variant: 'red',\n      state: 'active',\n      css: {\n        backgroundColor: '$buttonRedFocusBg',\n        color: '$buttonRedText',\n        boxShadow: 'inset 0 0 0 2px white',\n      },\n    },\n    {\n      variant: 'red',\n      ghost: 'true',\n      css: {\n        color: '$buttonRedBg',\n        backgroundColor: 'transparent',\n        '@hover': {\n          '&:hover': {\n            color: '$buttonRedHoverText',\n            backgroundColor: 'transparent',\n          },\n        },\n      },\n    },\n    {\n      size: 'small',\n      state: 'waiting',\n      css: {\n        '&::after': backgroundSizeAnimation('small'),\n      },\n    },\n    {\n      size: 'large',\n      state: 'waiting',\n      css: {\n        '&::after': backgroundSizeAnimation('large'),\n      },\n    },\n  ],\n  defaultVariants: {\n    size: 'medium',\n    variant: 'primary',\n  },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n  ButtonVariants & {\n    css?: CSS;\n    asChild?: boolean;\n    as?: string;\n  };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n  ({ children, asChild, ...props }, forwardedRef) => {\n    const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n    return (\n      <Component ref={forwardedRef} {...props}>\n        {children}\n      </Component>\n    );\n  },\n);\n\nconst BaseButton = (props: ButtonProps): JSX.Element => <Button {...props} />;\nexport const ButtonForStory = modifyVariantsForStory<ButtonVariants, ButtonProps>(BaseButton);\n"],"names":[],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 ;/* empty css                                    */
-const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
-var buttonRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "krhgwq4 krhgwq3", variantClassNames: { size: { small: "krhgwq5", medium: "krhgwq6", large: "krhgwq7" }, variant: { primary: "krhgwq8", secondary: "krhgwq9", red: "krhgwqa" }, state: { active: "krhgwqb", waiting: "krhgwqc" }, ghost: { true: "krhgwqd" }, rounded: { true: "krhgwqe" } }, defaultVariants: { size: "medium", variant: "primary" }, compoundVariants: [[{ variant: "primary", ghost: true }, "krhgwqf"], [{ variant: "primary", state: "active" }, "krhgwqg"], [{ variant: "secondary", state: "waiting" }, "krhgwqh"], [{ variant: "secondary", ghost: true }, "krhgwqi"], [{ variant: "red", state: "waiting" }, "krhgwqj"], [{ variant: "red", state: "active" }, "krhgwqk"], [{ variant: "red", ghost: true }, "krhgwql"], [{ size: "small", state: "waiting" }, "krhgwqm"], [{ size: "large", state: "waiting" }, "krhgwqn"]] });
+const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var buttonRecipe = createRuntimeFn.createRuntimeFn({ defaultClassName: "krhgwq4 krhgwq3", variantClassNames: { size: { small: "krhgwq5", medium: "krhgwq6", large: "krhgwq7" }, variant: { primary: "krhgwq8", secondary: "krhgwq9", red: "krhgwqa" }, state: { active: "krhgwqb", waiting: "krhgwqc" }, ghost: { true: "krhgwqd" }, rounded: { true: "krhgwqe" } }, defaultVariants: { size: "medium", variant: "primary" }, compoundVariants: [[{ variant: "primary", ghost: true }, "krhgwqf"], [{ variant: "primary", state: "active" }, "krhgwqg"], [{ variant: "secondary", state: "waiting" }, "krhgwqh"], [{ variant: "secondary", ghost: true }, "krhgwqi"], [{ variant: "red", state: "waiting" }, "krhgwqj"], [{ variant: "red", state: "active" }, "krhgwqk"], [{ variant: "red", ghost: true }, "krhgwql"], [{ size: "small", state: "waiting" }, "krhgwqm"], [{ size: "large", state: "waiting" }, "krhgwqn"]] });
 exports.buttonRecipe = buttonRecipe;
 //# sourceMappingURL=Button.vanilla.css.cjs.map

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

@@ -1,5 +1,5 @@
 /* empty css                                  */
-import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var buttonRecipe = createRuntimeFn({ defaultClassName: "krhgwq4 krhgwq3", variantClassNames: { size: { small: "krhgwq5", medium: "krhgwq6", large: "krhgwq7" }, variant: { primary: "krhgwq8", secondary: "krhgwq9", red: "krhgwqa" }, state: { active: "krhgwqb", waiting: "krhgwqc" }, ghost: { true: "krhgwqd" }, rounded: { true: "krhgwqe" } }, defaultVariants: { size: "medium", variant: "primary" }, compoundVariants: [[{ variant: "primary", ghost: true }, "krhgwqf"], [{ variant: "primary", state: "active" }, "krhgwqg"], [{ variant: "secondary", state: "waiting" }, "krhgwqh"], [{ variant: "secondary", ghost: true }, "krhgwqi"], [{ variant: "red", state: "waiting" }, "krhgwqj"], [{ variant: "red", state: "active" }, "krhgwqk"], [{ variant: "red", ghost: true }, "krhgwql"], [{ size: "small", state: "waiting" }, "krhgwqm"], [{ size: "large", state: "waiting" }, "krhgwqn"]] });
 export {
   buttonRecipe

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

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 ;/* empty css                                            */
 ;/* empty css                                  */
-const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
-var cardRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "kc9sar1 kc9sar0", variantClassNames: { elevation: { "0": "kc9sar2", "1": "kc9sar3", "2": "kc9sar4", "3": "kc9sar5", "4": "kc9sar6", "5": "kc9sar7" }, variant: { inner: "kc9sar8", ghost: "kc9sar9" }, active: { true: "kc9sara" } }, defaultVariants: { elevation: 1 }, compoundVariants: [] });
-var interactiveCardRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "kc9sarc kc9sarb kc9sar0", variantClassNames: { elevation: { "0": "kc9sard", "1": "kc9sare", "2": "kc9sarf", "3": "kc9sarg", "4": "kc9sarh", "5": "kc9sari" }, variant: { inner: "kc9sarj", ghost: "kc9sark" }, active: { true: "kc9sarl" } }, defaultVariants: { elevation: 1 }, compoundVariants: [] });
+const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var cardRecipe = createRuntimeFn.createRuntimeFn({ defaultClassName: "kc9sar1 kc9sar0", variantClassNames: { elevation: { "0": "kc9sar2", "1": "kc9sar3", "2": "kc9sar4", "3": "kc9sar5", "4": "kc9sar6", "5": "kc9sar7" }, variant: { inner: "kc9sar8", ghost: "kc9sar9" }, active: { true: "kc9sara" } }, defaultVariants: { elevation: 1 }, compoundVariants: [] });
+var interactiveCardRecipe = createRuntimeFn.createRuntimeFn({ defaultClassName: "kc9sarc kc9sarb kc9sar0", variantClassNames: { elevation: { "0": "kc9sard", "1": "kc9sare", "2": "kc9sarf", "3": "kc9sarg", "4": "kc9sarh", "5": "kc9sari" }, variant: { inner: "kc9sarj", ghost: "kc9sark" }, active: { true: "kc9sarl" } }, defaultVariants: { elevation: 1 }, compoundVariants: [] });
 exports.cardRecipe = cardRecipe;
 exports.interactiveCardRecipe = interactiveCardRecipe;
 //# sourceMappingURL=Card.vanilla.css.cjs.map

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

@@ -1,6 +1,6 @@
 /* empty css                                          */
 /* empty css                                */
-import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var cardRecipe = createRuntimeFn({ defaultClassName: "kc9sar1 kc9sar0", variantClassNames: { elevation: { "0": "kc9sar2", "1": "kc9sar3", "2": "kc9sar4", "3": "kc9sar5", "4": "kc9sar6", "5": "kc9sar7" }, variant: { inner: "kc9sar8", ghost: "kc9sar9" }, active: { true: "kc9sara" } }, defaultVariants: { elevation: 1 }, compoundVariants: [] });
 var interactiveCardRecipe = createRuntimeFn({ defaultClassName: "kc9sarc kc9sarb kc9sar0", variantClassNames: { elevation: { "0": "kc9sard", "1": "kc9sare", "2": "kc9sarf", "3": "kc9sarg", "4": "kc9sarh", "5": "kc9sari" }, variant: { inner: "kc9sarj", ghost: "kc9sark" }, active: { true: "kc9sarl" } }, defaultVariants: { elevation: 1 }, compoundVariants: [] });
 export {

package/dist/components/CodeBlock/CodeBlock.cjs

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactIcons = require("@radix-ui/react-icons");
+const prismReactRenderer = require("prism-react-renderer");
+const React = require("react");
+const stitches_config = require("../../stitches.config.cjs");
+const colorSchemeContext = require("../colorSchemeContext.cjs");
+const Box = require("../Box/Box.cjs");
+const Button = require("../Button/Button.cjs");
+const AccessibleIcon = require("../AccessibleIcon/AccessibleIcon.cjs");
+const Pre = stitches_config.styled("pre", {
+  m: 0,
+  borderRadius: "$2",
+  overflow: "auto",
+  border: "1px solid $colors$deepBlue3",
+  position: "relative",
+  fontSize: "$2",
+  lineHeight: 1.6,
+  variants: {
+    noBorder: {
+      true: { border: "none" }
+    }
+  }
+});
+const CopyButtonWrapper = stitches_config.styled("div", {
+  position: "absolute",
+  right: "$4",
+  zIndex: 1,
+  variants: {
+    align: {
+      top: { top: "$2" },
+      bottom: { bottom: "$2" }
+    }
+  },
+  defaultVariants: {
+    align: "top"
+  }
+});
+const CodeBlock = React.forwardRef(
+  ({
+    lang,
+    code,
+    copyable = false,
+    copyText,
+    copiedText,
+    copyButtonAlign = "top",
+    noBorder,
+    wrapText = false,
+    colorScheme,
+    maxHeight = 424,
+    css,
+    ...props
+  }, ref) => {
+    const systemScheme = colorSchemeContext.useColorScheme();
+    const resolvedScheme = colorScheme ?? systemScheme;
+    const prismTheme = resolvedScheme === "dark" ? prismReactRenderer.themes.nightOwl : prismReactRenderer.themes.nightOwlLight;
+    const [copied, setCopied] = React.useState(false);
+    const handleCopy = async () => {
+      try {
+        await navigator.clipboard.writeText(code);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      } catch {
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(prismReactRenderer.Highlight, { theme: prismTheme, code, language: lang, children: ({ className, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { css: { position: "relative", ...css }, children: [
+      copyable && /* @__PURE__ */ jsxRuntime.jsx(CopyButtonWrapper, { align: copyButtonAlign, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        Button.Button,
+        {
+          variant: "secondary",
+          ghost: true,
+          size: "small",
+          type: "button",
+          onClick: handleCopy,
+          css: { color: "$hiContrast", gap: "$1" },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(AccessibleIcon.AccessibleIcon, { label: copied ? "Copied" : "Copy", children: copied ? /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CheckIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(reactIcons.CopyIcon, {}) }),
+            copied ? copiedText : copyText
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Pre,
+        {
+          ref,
+          className,
+          style: { ...style, backgroundColor: "transparent" },
+          noBorder,
+          css: { maxHeight },
+          ...props,
+          children: /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { css: { p: "$4" }, children: tokens.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ...getLineProps({ line }),
+              style: wrapText ? { whiteSpace: "normal" } : void 0,
+              children: line.map((token, key) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...getTokenProps({ token }) }, key))
+            },
+            i
+          )) })
+        }
+      )
+    ] }) });
+  }
+);
+CodeBlock.displayName = "CodeBlock";
+exports.CodeBlock = CodeBlock;
+//# sourceMappingURL=CodeBlock.cjs.map

package/dist/components/CodeBlock/CodeBlock.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.cjs","sources":["../../../components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from '@radix-ui/react-icons';\nimport { Highlight, Language, themes } from 'prism-react-renderer';\nimport React, { ComponentProps, forwardRef, useState } from 'react';\n\nimport { CSS, styled } from '../../stitches.config';\nimport { AccessibleIcon } from '../AccessibleIcon';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { useColorScheme } from '../colorSchemeContext';\n\nconst Pre = styled('pre', {\n  m: 0,\n  borderRadius: '$2',\n  overflow: 'auto',\n  border: '1px solid $colors$deepBlue3',\n  position: 'relative',\n  fontSize: '$2',\n  lineHeight: 1.6,\n\n  variants: {\n    noBorder: {\n      true: { border: 'none' },\n    },\n  },\n});\n\nconst CopyButtonWrapper = styled('div', {\n  position: 'absolute',\n  right: '$4',\n  zIndex: 1,\n\n  variants: {\n    align: {\n      top: { top: '$2' },\n      bottom: { bottom: '$2' },\n    },\n  },\n\n  defaultVariants: {\n    align: 'top',\n  },\n});\n\nexport type CodeBlockProps = {\n  lang: Language;\n  code: string;\n  copyable?: boolean;\n  copyText?: string;\n  copiedText?: string;\n  copyButtonAlign?: 'top' | 'bottom';\n  noBorder?: boolean;\n  wrapText?: boolean;\n  colorScheme?: 'light' | 'dark';\n  maxHeight?: number | string;\n  css?: CSS;\n} & Omit<ComponentProps<typeof Pre>, 'css'>;\n\nexport const CodeBlock = forwardRef<HTMLPreElement, CodeBlockProps>(\n  (\n    {\n      lang,\n      code,\n      copyable = false,\n      copyText,\n      copiedText,\n      copyButtonAlign = 'top',\n      noBorder,\n      wrapText = false,\n      colorScheme,\n      maxHeight = 424,\n      css,\n      ...props\n    },\n    ref,\n  ) => {\n    const systemScheme = useColorScheme();\n    const resolvedScheme = colorScheme ?? systemScheme;\n    const prismTheme = resolvedScheme === 'dark' ? themes.nightOwl : themes.nightOwlLight;\n\n    const [copied, setCopied] = useState(false);\n\n    const handleCopy = async () => {\n      try {\n        await navigator.clipboard.writeText(code);\n        setCopied(true);\n        setTimeout(() => setCopied(false), 1500);\n      } catch {\n        // clipboard write failed (e.g. permission denied) — leave UI unchanged\n      }\n    };\n\n    return (\n      <Highlight theme={prismTheme} code={code} language={lang}>\n        {({ className, style, tokens, getLineProps, getTokenProps }) => (\n          <Box css={{ position: 'relative', ...css }}>\n            {copyable && (\n              <CopyButtonWrapper align={copyButtonAlign}>\n                <Button\n                  variant=\"secondary\"\n                  ghost\n                  size=\"small\"\n                  type=\"button\"\n                  onClick={handleCopy}\n                  css={{ color: '$hiContrast', gap: '$1' }}\n                >\n                  <AccessibleIcon label={copied ? 'Copied' : 'Copy'}>\n                    {copied ? <CheckIcon /> : <CopyIcon />}\n                  </AccessibleIcon>\n                  {copied ? copiedText : copyText}\n                </Button>\n              </CopyButtonWrapper>\n            )}\n            <Pre\n              ref={ref}\n              className={className}\n              style={{ ...style, backgroundColor: 'transparent' }}\n              noBorder={noBorder}\n              css={{ maxHeight }}\n              {...props}\n            >\n              <Box css={{ p: '$4' }}>\n                {tokens.map((line, i) => (\n                  <div\n                    key={i}\n                    {...getLineProps({ line })}\n                    style={wrapText ? { whiteSpace: 'normal' } : undefined}\n                  >\n                    {line.map((token, key) => (\n                      <span key={key} {...getTokenProps({ token })} />\n                    ))}\n                  </div>\n                ))}\n              </Box>\n            </Pre>\n          </Box>\n        )}\n      </Highlight>\n    );\n  },\n);\n\nCodeBlock.displayName = 'CodeBlock';\n"],"names":["styled","forwardRef","useColorScheme","themes","useState","jsx","Highlight","jsxs","Box","Button","AccessibleIcon","CheckIcon","CopyIcon"],"mappings":"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"}