@clickhouse/click-ui 0.6.1-rc2 → 0.6.2-rc1

package/dist/esm/components/Flyout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Flyout/Flyout.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n} from '@radix-ui/react-dialog';\nimport { Button } from '@/components/Button';\nimport type { ButtonProps } from '@/components/Button';\nimport { CodeBlock } from '@/components/CodeBlock';\nimport { Container } from '@/components/Container';\nimport type { ContainerProps } from '@/components/Container';\nimport { Icon } from '@/components/Icon';\nimport { Separator } from '@/components/Separator';\nimport { Spacer } from '@/components/Spacer';\nimport { styled } from 'styled-components';\nimport { CrossButton } from '@/components/CrossButton';\nimport { keyframes } from 'styled-components';\nimport type {\n  FlyoutProps,\n  FlyoutTriggerProps,\n  FlyoutContentProps,\n  FlyoutHeaderProps,\n  FlyoutFooterProps,\n  FlyoutSizeType,\n  FlyoutStrategy,\n  FlyoutType,\n  FlyoutAlignmentType,\n} from './Flyout.types';\n\nexport const Flyout = ({ modal = false, ...props }: FlyoutProps) => {\n  return (\n    <Dialog\n      modal={modal}\n      {...props}\n    />\n  );\n};\n\nconst Trigger = ({ children, ...props }: FlyoutTriggerProps) => {\n  return (\n    <DialogTrigger asChild>\n      <div {...props}>{children}</div>\n    </DialogTrigger>\n  );\n};\nTrigger.displayName = 'Flyout.Trigger';\nFlyout.Trigger = Trigger;\n\nconst animationWidth = () =>\n  keyframes({\n    from: { width: 0 },\n    to: { width: 'fit-content' },\n  });\n\nconst FlyoutContent = styled(DialogContent)<{\n  $size?: FlyoutSizeType;\n  $type?: FlyoutType;\n  $strategy: FlyoutStrategy;\n  $width?: string;\n  $align: FlyoutAlignmentType;\n}>`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  overflow: hidden;\n  top: 0;\n  bottom: 0;\n  width: fit-content;\n  --flyout-width: ${({ theme, $size = 'default', $width }) =>\n    $width || theme.click.flyout.size[$size].width};\n  animation: ${animationWidth} 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;\n  ${({ theme, $strategy, $type = 'default', $align }) => `\n    ${$align === 'start' ? 'left' : 'right'}: 0;\n    max-width: 100%;\n    position: ${$strategy};\n    height: ${$strategy === 'relative' ? '100%' : 'auto'};\n    padding: 0 ${theme.click.flyout.space[$type].x}\n    gap: ${theme.click.flyout.space[$type].gap};\n    box-shadow: ${\n      $align === 'start'\n        ? theme.click.flyout.shadow.reverse\n        : theme.click.flyout.shadow.default\n    };\n    border-${$align === 'start' ? 'right' : 'left'}: 1px solid ${\n      theme.click.flyout.color.stroke.default\n    };\n    background: ${theme.click.flyout.color.background.default};\n\n    @media (max-width: 1024px) {\n      ${\n        $strategy === 'relative'\n          ? `\n            position: absolute !important;`\n          : ''\n      }\n      overflow: hidden;\n      transform: ${\n        $align === 'start'\n          ? 'translateX(calc(50px - 100%))'\n          : 'translateX(calc(100% - 50px))'\n      };\n      transition: 0.3s ease-in-out;\n      &:hover,\n      &.active,\n      &:focus-within {\n        transform: translateX(0);\n        ${$align === 'start' ? 'right' : 'left'}: auto;\n      }\n    }\n  `}\n`;\nconst FlyoutContainer = styled.div`\n  display: flex;\n  gap: 0;\n  width: var(--flyout-width);\n  max-width: 100%;\n  flex-flow: column nowrap;\n  gap: inherit;\n`;\n\nconst Content = ({\n  showOverlay = false,\n  children,\n  container,\n  strategy = 'relative',\n  size,\n  type = 'default',\n  closeOnInteractOutside = false,\n  width,\n  align = 'end',\n  onInteractOutside,\n  ...props\n}: FlyoutContentProps) => {\n  return (\n    <DialogPortal container={container}>\n      {showOverlay && <DialogOverlay className=\"DialogOverlay\" />}\n      <FlyoutContent\n        $size={size}\n        $type={type}\n        $strategy={strategy}\n        onInteractOutside={e => {\n          if (!closeOnInteractOutside) {\n            e.preventDefault();\n          }\n          if (typeof onInteractOutside === 'function') {\n            onInteractOutside(e);\n          }\n        }}\n        $width={width}\n        $align={align}\n        {...props}\n      >\n        {children}\n      </FlyoutContent>\n    </DialogPortal>\n  );\n};\nContent.displayName = 'Flyout.Content';\nFlyout.Content = Content;\n\nconst FlyoutElement = styled(Container)<{\n  $type?: FlyoutType;\n}>`\n  max-width: 100%;\n  max-width: -webkit-fill-available;\n  max-width: fill-available;\n  max-width: stretch;\n  ${({ theme, $type = 'default' }) => `\n    gap: ${theme.click.flyout.space[$type].gap};\n    padding: 0 ${theme.click.flyout.space[$type].content.x};\n  `}\n`;\n\ninterface ElementProps extends Omit<\n  ContainerProps,\n  'component' | 'padding' | 'gap' | 'orientation'\n> {\n  type?: FlyoutType;\n}\n\nconst Element = ({ type, ...props }: ElementProps) => (\n  <FlyoutElement\n    orientation=\"vertical\"\n    padding=\"none\"\n    gap=\"none\"\n    $type={type}\n    {...props}\n  />\n);\n\nElement.displayName = 'Flyout.Element';\nFlyout.Element = Element;\n\nconst FlyoutHeaderContainer = styled(Container)<{\n  $type?: FlyoutType;\n}>`\n  ${({ theme, $type = 'default' }) => `\n    row-gap: ${theme.click.flyout.space[$type].content['row-gap']};\n    column-gap: ${theme.click.flyout.space[$type].content['column-gap']};\n    padding: ${theme.click.flyout.space[$type].y} ${theme.click.flyout.space[$type].y} 0 ${theme.click.flyout.space[$type].y} ;\n  `}\n`;\n\nconst FlyoutTitle = styled(DialogTitle)<{\n  $type?: FlyoutType;\n}>`\n  ${({ theme, $type = 'default' }) => `\n    color: ${theme.click.flyout.color.title.default};\n    font: ${theme.click.flyout.typography[$type].title.default};\n    margin: 0;\n    padding: 0;\n  `}\n`;\n\nconst FlyoutDescription = styled(DialogDescription)<{\n  $type?: FlyoutType;\n}>`\n  ${({ theme, $type = 'default' }) => `\n    color: ${theme.click.flyout.color.description.default};\n    font: ${theme.click.flyout.typography[$type].description.default};\n    margin: 0;\n    padding: 0;\n  `}\n`;\n\nconst Header = ({\n  title,\n  description,\n  type,\n  children,\n  showClose = true,\n  showSeparator = true,\n  ...props\n}: FlyoutHeaderProps) => {\n  if (children) {\n    return (\n      <FlyoutContainer>\n        <FlyoutHeaderContainer\n          $type={type}\n          justifyContent=\"space-between\"\n          alignItems=\"start\"\n          padding=\"none\"\n          gap=\"none\"\n          fillWidth={false}\n          isResponsive={false}\n          {...props}\n        >\n          <Container\n            padding=\"none\"\n            gap=\"none\"\n            orientation=\"vertical\"\n            grow=\"1\"\n          >\n            {children}\n          </Container>\n          {showClose && (\n            <DialogClose asChild>\n              <CrossButton data-testid=\"flyout-header-close-btn\">\n                <Icon\n                  name=\"cross\"\n                  size={type === 'inline' ? 'md' : 'lg'}\n                />\n              </CrossButton>\n            </DialogClose>\n          )}\n        </FlyoutHeaderContainer>\n        {showSeparator && (\n          <Separator\n            data-testid=\"flyout-header-separator\"\n            size=\"lg\"\n          />\n        )}\n      </FlyoutContainer>\n    );\n  }\n\n  return (\n    <FlyoutContainer>\n      <FlyoutHeaderContainer\n        $type={type}\n        justifyContent=\"space-between\"\n        alignItems=\"start\"\n        fillWidth={false}\n        isResponsive={false}\n        {...props}\n      >\n        <Container\n          padding=\"none\"\n          gap=\"none\"\n          orientation=\"vertical\"\n          grow=\"1\"\n        >\n          <FlyoutTitle $type={type}>{title}</FlyoutTitle>\n          {description && (\n            <FlyoutDescription $type={type}>{description}</FlyoutDescription>\n          )}\n        </Container>\n        {showClose && (\n          <DialogClose asChild>\n            <CrossButton data-testid=\"flyout-header-close-btn\">\n              <Icon\n                name=\"cross\"\n                size={type === 'inline' ? 'md' : 'lg'}\n              />\n            </CrossButton>\n          </DialogClose>\n        )}\n      </FlyoutHeaderContainer>\n      {showSeparator && (\n        <Separator\n          data-testid=\"flyout-header-separator\"\n          size=\"lg\"\n        />\n      )}\n    </FlyoutContainer>\n  );\n};\nHeader.displayName = 'Flyout.Header';\nFlyout.Header = Header;\n\ntype FlyoutAlign = 'default' | 'top';\nconst FlyoutBody = styled(Container)<{ $align?: FlyoutAlign }>`\n  width: var(--flyout-width);\n  max-width: 100%;\n  margin-top: ${({ $align = 'default' }) => ($align === 'top' ? '-1rem' : 0)};\n`;\n\ninterface BodyProps extends ContainerProps {\n  align?: FlyoutAlign;\n}\n\nconst Body = ({ align, ...props }: BodyProps) => (\n  <FlyoutBody\n    overflow=\"auto\"\n    orientation=\"vertical\"\n    grow=\"1\"\n    $align={align}\n    {...props}\n  />\n);\n\nBody.displayName = 'Flyout.Body';\nFlyout.Body = Body;\n\nconst FlyoutFooter = styled(Container)<{\n  type?: FlyoutType;\n}>`\n  ${({ theme, type = 'default' }) => `\n    row-gap: ${theme.click.flyout.space[type].content['row-gap']};\n    column-gap: ${theme.click.flyout.space[type].content['column-gap']};\n    padding: ${theme.click.flyout.space[type].y} ${theme.click.flyout.space[type].content.x};\n  `}\n`;\n\ninterface FlyoutButtonProps extends Omit<ButtonProps, 'children'> {\n  children?: never;\n}\n\nconst FlyoutClose = ({\n  children,\n  ...props\n}: FlyoutButtonProps | { children?: ReactNode }) => {\n  return (\n    <DialogClose asChild>\n      {children ?? (\n        <Button\n          type=\"secondary\"\n          {...props}\n        />\n      )}\n    </DialogClose>\n  );\n};\nFlyoutClose.displayName = 'Flyout.Close';\nFlyout.Close = FlyoutClose;\n\nconst FooterContainer = styled(Container)`\n  width: var(--flyout-width);\n  max-width: 100%;\n`;\n\nconst Footer = (props: FlyoutFooterProps) => {\n  return (\n    <FooterContainer\n      gap=\"none\"\n      orientation=\"vertical\"\n      alignItems=\"end\"\n    >\n      <Separator size=\"xs\" />\n      <FlyoutFooter\n        justifyContent=\"end\"\n        gap=\"none\"\n        padding=\"none\"\n        isResponsive={false}\n        wrap=\"wrap\"\n        {...props}\n      />\n    </FooterContainer>\n  );\n};\nFooter.displayName = 'Flyout.Footer';\nFlyout.Footer = Footer;\n\nconst CustomCodeBlock = styled(CodeBlock)`\n  display: flex;\n  height: 100%;\n  pre {\n    flex: 1;\n    overflow-wrap: break-word;\n    code {\n      display: inline-block;\n      max-width: calc(100% - 1rem);\n    }\n  }\n`;\n\ninterface FlyoutCodeBlockProps extends ContainerProps {\n  language?: string;\n  statement: string;\n  showLineNumbers?: boolean;\n  showWrapButton?: boolean;\n  wrapLines?: boolean;\n  onCopy?: (value: string) => void | Promise<void>;\n  onCopyError?: (error: string) => void | Promise<void>;\n}\nconst FlyoutCodeBlock = ({\n  statement,\n  language,\n  wrapLines,\n  showLineNumbers,\n  showWrapButton,\n  onCopy,\n  onCopyError,\n  ...props\n}: FlyoutCodeBlockProps & ElementProps) => {\n  return (\n    <Element\n      fillHeight\n      {...props}\n    >\n      <CustomCodeBlock\n        wrapLines={wrapLines}\n        language={language}\n        showLineNumbers={showLineNumbers}\n        showWrapButton={showWrapButton}\n        onCopy={onCopy}\n        onCopyError={onCopyError}\n      >\n        {statement}\n      </CustomCodeBlock>\n      <Spacer size=\"xs\" />\n    </Element>\n  );\n};\n\nFlyout.CodeBlock = FlyoutCodeBlock;\n"],"names":["Flyout","modal","props","Trigger","children","displayName","animationWidth","keyframes","from","width","to","FlyoutContent","styled","DialogContent","withConfig","componentId","theme","$size","$width","click","flyout","size","$strategy","$type","$align","space","x","gap","shadow","reverse","default","color","stroke","background","FlyoutContainer","div","Content","showOverlay","container","strategy","type","closeOnInteractOutside","align","onInteractOutside","e","preventDefault","FlyoutElement","Container","content","Element","FlyoutHeaderContainer","y","FlyoutTitle","DialogTitle","title","typography","FlyoutDescription","DialogDescription","description","Header","showClose","showSeparator","Icon","FlyoutBody","Body","FlyoutFooter","FlyoutClose","Close","FooterContainer","Footer","CustomCodeBlock","CodeBlock","FlyoutCodeBlock","statement","language","wrapLines","showLineNumbers","showWrapButton","onCopy","onCopyError"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Flyout/Flyout.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n} from '@radix-ui/react-dialog';\nimport { Button } from '@/components/Button';\nimport type { ButtonProps } from '@/components/Button';\nimport { CodeBlock } from '@/components/CodeBlock';\nimport { Container } from '@/components/Container';\nimport type { ContainerProps } from '@/components/Container';\nimport { Icon } from '@/components/Icon';\nimport { Separator } from '@/components/Separator';\nimport { Spacer } from '@/components/Spacer';\nimport { styled, keyframes } from 'styled-components';\nimport { CrossButton } from '@/components/CrossButton';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport type {\n  FlyoutProps,\n  FlyoutTriggerProps,\n  FlyoutContentProps,\n  FlyoutHeaderProps,\n  FlyoutFooterProps,\n  FlyoutSizeType,\n  FlyoutStrategy,\n  FlyoutType,\n  FlyoutAlignmentType,\n} from './Flyout.types';\n\nexport const Flyout = ({ modal = false, ...props }: FlyoutProps) => {\n  return (\n    <Dialog\n      modal={modal}\n      {...props}\n    />\n  );\n};\n\nconst Trigger = ({ children, ...props }: FlyoutTriggerProps) => {\n  return (\n    <DialogTrigger asChild>\n      <div {...props}>{children}</div>\n    </DialogTrigger>\n  );\n};\nTrigger.displayName = 'Flyout.Trigger';\nFlyout.Trigger = Trigger;\n\nconst animationWidth = () =>\n  keyframes({\n    from: { width: 0 },\n    to: { width: 'fit-content' },\n  });\n\nconst FlyoutContent = styled(DialogContent)<{\n  $size?: FlyoutSizeType;\n  $type?: FlyoutType;\n  $strategy: FlyoutStrategy;\n  $width?: string;\n  $align: FlyoutAlignmentType;\n  $hasShadow?: boolean;\n}>`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  overflow: hidden;\n  top: 0;\n  bottom: 0;\n  width: fit-content;\n  --flyout-width: ${({ theme, $size = 'default', $width }) =>\n    $width || theme.click.flyout.size[$size].width};\n  animation: ${animationWidth} 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;\n  ${({ theme, $strategy, $type = 'default', $align, $hasShadow = true }) => `\n    ${$align === 'start' ? 'left' : 'right'}: 0;\n    max-width: 100%;\n    position: ${$strategy};\n    height: ${$strategy === 'relative' ? '100%' : 'auto'};\n    padding: 0 ${theme.click.flyout.space[$type].x};\n    gap: ${theme.click.flyout.space[$type].gap};\n    box-shadow: ${\n      $hasShadow === false\n        ? 'none'\n        : theme.click.flyout.shadow[$align === 'start' ? 'reverse' : 'default']\n    };\n    border-${$align === 'start' ? 'right' : 'left'}: 1px solid ${\n      theme.click.flyout.color.stroke.default\n    };\n    background: ${theme.click.flyout.color.background.default};\n\n    @media (max-width: 1024px) {\n      ${\n        $strategy === 'relative'\n          ? `\n            position: absolute !important;`\n          : ''\n      }\n      overflow: hidden;\n      transform: ${\n        $align === 'start'\n          ? 'translateX(calc(50px - 100%))'\n          : 'translateX(calc(100% - 50px))'\n      };\n      transition: 0.3s ease-in-out;\n      &:hover,\n      &.active,\n      &:focus-within {\n        transform: translateX(0);\n        ${$align === 'start' ? 'right' : 'left'}: auto;\n      }\n    }\n  `}\n`;\nconst FlyoutContainer = styled.div`\n  display: flex;\n  gap: 0;\n  width: var(--flyout-width);\n  max-width: 100%;\n  flex-flow: column nowrap;\n  gap: inherit;\n`;\n\nconst Content = ({\n  showOverlay = false,\n  children,\n  container,\n  strategy = 'relative',\n  size,\n  type = 'default',\n  closeOnInteractOutside = false,\n  width,\n  align = 'end',\n  hasShadow = true,\n  onInteractOutside,\n  ...props\n}: FlyoutContentProps) => {\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <DialogPortal container={portalContainer}>\n      {showOverlay && <DialogOverlay className=\"DialogOverlay\" />}\n      <FlyoutContent\n        $size={size}\n        $type={type}\n        $strategy={strategy}\n        onInteractOutside={e => {\n          if (!closeOnInteractOutside) {\n            e.preventDefault();\n          }\n          if (typeof onInteractOutside === 'function') {\n            onInteractOutside(e);\n          }\n        }}\n        $width={width}\n        $align={align}\n        $hasShadow={hasShadow}\n        {...props}\n      >\n        {children}\n      </FlyoutContent>\n    </DialogPortal>\n  );\n};\nContent.displayName = 'Flyout.Content';\nFlyout.Content = Content;\n\nconst FlyoutElement = styled(Container)<{\n  $type?: FlyoutType;\n}>`\n  max-width: 100%;\n  max-width: -webkit-fill-available;\n  max-width: fill-available;\n  max-width: stretch;\n  && {\n    ${({ theme, $type = 'default' }) => `\n      gap: ${theme.click.flyout.space[$type].gap};\n      padding: 0 ${theme.click.flyout.space[$type].content.x};\n    `}\n  }\n`;\n\ninterface ElementProps extends Omit<\n  ContainerProps,\n  'component' | 'padding' | 'gap' | 'orientation'\n> {\n  type?: FlyoutType;\n}\n\nconst Element = ({ type, ...props }: ElementProps) => (\n  <FlyoutElement\n    orientation=\"vertical\"\n    padding=\"none\"\n    gap=\"none\"\n    $type={type}\n    {...props}\n  />\n);\n\nElement.displayName = 'Flyout.Element';\nFlyout.Element = Element;\n\nconst FlyoutHeaderContainer = styled(Container)<{\n  $type?: FlyoutType;\n}>`\n  && {\n    ${({ theme, $type = 'default' }) => `\n      row-gap: ${theme.click.flyout.space[$type].content['row-gap']};\n      column-gap: ${theme.click.flyout.space[$type].content['column-gap']};\n      padding: ${theme.click.flyout.space[$type].y} ${theme.click.flyout.space[$type].y} 0 ${theme.click.flyout.space[$type].y};\n    `}\n  }\n`;\n\nconst FlyoutTitle = styled(DialogTitle)<{\n  $type?: FlyoutType;\n}>`\n  ${({ theme, $type = 'default' }) => `\n    color: ${theme.click.flyout.color.title.default};\n    font: ${theme.click.flyout.typography[$type].title.default};\n    margin: 0;\n    padding: 0;\n  `}\n`;\n\nconst FlyoutDescription = styled(DialogDescription)<{\n  $type?: FlyoutType;\n}>`\n  ${({ theme, $type = 'default' }) => `\n    color: ${theme.click.flyout.color.description.default};\n    font: ${theme.click.flyout.typography[$type].description.default};\n    margin: 0;\n    padding: 0;\n  `}\n`;\n\nconst Header = ({\n  title,\n  description,\n  type,\n  children,\n  showClose = true,\n  showSeparator = true,\n  ...props\n}: FlyoutHeaderProps) => {\n  if (children) {\n    return (\n      <FlyoutContainer>\n        <FlyoutHeaderContainer\n          $type={type}\n          justifyContent=\"space-between\"\n          alignItems=\"start\"\n          padding=\"none\"\n          gap=\"none\"\n          fillWidth={false}\n          isResponsive={false}\n          {...props}\n        >\n          <Container\n            padding=\"none\"\n            gap=\"none\"\n            orientation=\"vertical\"\n            grow=\"1\"\n          >\n            {children}\n          </Container>\n          {showClose && (\n            <DialogClose asChild>\n              <CrossButton data-testid=\"flyout-header-close-btn\">\n                <Icon\n                  name=\"cross\"\n                  size={type === 'inline' ? 'md' : 'lg'}\n                />\n              </CrossButton>\n            </DialogClose>\n          )}\n        </FlyoutHeaderContainer>\n        {showSeparator && (\n          <Separator\n            data-testid=\"flyout-header-separator\"\n            size=\"lg\"\n          />\n        )}\n      </FlyoutContainer>\n    );\n  }\n\n  return (\n    <FlyoutContainer>\n      <FlyoutHeaderContainer\n        $type={type}\n        justifyContent=\"space-between\"\n        alignItems=\"start\"\n        fillWidth={false}\n        isResponsive={false}\n        {...props}\n      >\n        <Container\n          padding=\"none\"\n          gap=\"none\"\n          orientation=\"vertical\"\n          grow=\"1\"\n        >\n          <FlyoutTitle $type={type}>{title}</FlyoutTitle>\n          {description && (\n            <FlyoutDescription $type={type}>{description}</FlyoutDescription>\n          )}\n        </Container>\n        {showClose && (\n          <DialogClose asChild>\n            <CrossButton data-testid=\"flyout-header-close-btn\">\n              <Icon\n                name=\"cross\"\n                size={type === 'inline' ? 'md' : 'lg'}\n              />\n            </CrossButton>\n          </DialogClose>\n        )}\n      </FlyoutHeaderContainer>\n      {showSeparator && (\n        <Separator\n          data-testid=\"flyout-header-separator\"\n          size=\"lg\"\n        />\n      )}\n    </FlyoutContainer>\n  );\n};\nHeader.displayName = 'Flyout.Header';\nFlyout.Header = Header;\n\ntype FlyoutAlign = 'default' | 'top';\nconst FlyoutBody = styled(Container)<{ $align?: FlyoutAlign }>`\n  width: var(--flyout-width);\n  max-width: 100%;\n  margin-top: ${({ $align = 'default' }) => ($align === 'top' ? '-1rem' : 0)};\n`;\n\ninterface BodyProps extends ContainerProps {\n  align?: FlyoutAlign;\n}\n\nconst Body = ({ align, ...props }: BodyProps) => (\n  <FlyoutBody\n    overflow=\"auto\"\n    orientation=\"vertical\"\n    grow=\"1\"\n    $align={align}\n    {...props}\n  />\n);\n\nBody.displayName = 'Flyout.Body';\nFlyout.Body = Body;\n\nconst FlyoutFooter = styled(Container)<{\n  type?: FlyoutType;\n}>`\n  && {\n    ${({ theme, type = 'default' }) => `\n      row-gap: ${theme.click.flyout.space[type].content['row-gap']};\n      column-gap: ${theme.click.flyout.space[type].content['column-gap']};\n      padding: ${theme.click.flyout.space[type].y} ${theme.click.flyout.space[type].content.x};\n    `}\n  }\n`;\n\ninterface FlyoutButtonProps extends Omit<ButtonProps, 'children'> {\n  children?: never;\n}\n\nconst FlyoutClose = ({\n  children,\n  ...props\n}: FlyoutButtonProps | { children?: ReactNode }) => {\n  return (\n    <DialogClose asChild>\n      {children ?? (\n        <Button\n          type=\"secondary\"\n          {...props}\n        />\n      )}\n    </DialogClose>\n  );\n};\nFlyoutClose.displayName = 'Flyout.Close';\nFlyout.Close = FlyoutClose;\n\nconst FooterContainer = styled(Container)`\n  width: var(--flyout-width);\n  max-width: 100%;\n`;\n\nconst Footer = (props: FlyoutFooterProps) => {\n  return (\n    <FooterContainer\n      gap=\"none\"\n      orientation=\"vertical\"\n      alignItems=\"end\"\n    >\n      <Separator size=\"xs\" />\n      <FlyoutFooter\n        justifyContent=\"end\"\n        gap=\"none\"\n        padding=\"none\"\n        isResponsive={false}\n        wrap=\"wrap\"\n        {...props}\n      />\n    </FooterContainer>\n  );\n};\nFooter.displayName = 'Flyout.Footer';\nFlyout.Footer = Footer;\n\nconst CustomCodeBlock = styled(CodeBlock)`\n  display: flex;\n  height: 100%;\n  pre {\n    flex: 1;\n    overflow-wrap: break-word;\n    code {\n      display: inline-block;\n      max-width: calc(100% - 1rem);\n    }\n  }\n`;\n\ninterface FlyoutCodeBlockProps extends ContainerProps {\n  language?: string;\n  statement: string;\n  showLineNumbers?: boolean;\n  showWrapButton?: boolean;\n  wrapLines?: boolean;\n  onCopy?: (value: string) => void | Promise<void>;\n  onCopyError?: (error: string) => void | Promise<void>;\n}\nconst FlyoutCodeBlock = ({\n  statement,\n  language,\n  wrapLines,\n  showLineNumbers,\n  showWrapButton,\n  onCopy,\n  onCopyError,\n  ...props\n}: FlyoutCodeBlockProps & ElementProps) => {\n  return (\n    <Element\n      fillHeight\n      {...props}\n    >\n      <CustomCodeBlock\n        wrapLines={wrapLines}\n        language={language}\n        showLineNumbers={showLineNumbers}\n        showWrapButton={showWrapButton}\n        onCopy={onCopy}\n        onCopyError={onCopyError}\n      >\n        {statement}\n      </CustomCodeBlock>\n      <Spacer size=\"xs\" />\n    </Element>\n  );\n};\n\nFlyout.CodeBlock = FlyoutCodeBlock;\n"],"names":["Flyout","modal","props","Trigger","children","displayName","animationWidth","keyframes","from","width","to","FlyoutContent","styled","DialogContent","withConfig","componentId","theme","$size","$width","click","flyout","size","$strategy","$type","$align","$hasShadow","space","x","gap","shadow","color","stroke","default","background","FlyoutContainer","div","Content","showOverlay","container","strategy","type","closeOnInteractOutside","align","hasShadow","onInteractOutside","portalContainer","useResolvedPortalContainer","e","preventDefault","FlyoutElement","Container","content","Element","FlyoutHeaderContainer","y","FlyoutTitle","DialogTitle","title","typography","FlyoutDescription","DialogDescription","description","Header","showClose","showSeparator","Icon","FlyoutBody","Body","FlyoutFooter","FlyoutClose","Close","FooterContainer","Footer","CustomCodeBlock","CodeBlock","FlyoutCodeBlock","statement","language","wrapLines","showLineNumbers","showWrapButton","onCopy","onCopyError"],"mappings":"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"}

package/dist/esm/components/HoverCard/HoverCard.css

@@ -0,0 +1,6 @@
+.hover-card__trigger__tMcTR {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
+     keyword on `width` is widely supported on evergreen browsers; the original
+     styled-components rule used the same value. */
+  width: fit-content;
+}

package/dist/esm/components/HoverCard/HoverCard.module.css.js

@@ -0,0 +1,6 @@
+const styles = {
+	"hover-card__trigger": "hover-card__trigger__tMcTR"
+};
+
+export { styles as default };
+//# sourceMappingURL=HoverCard.module.css.js.map

package/dist/esm/components/HoverCard/HoverCard.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCard.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/esm/components/HoverCard/index.js

@@ -1,8 +1,11 @@
+import "./HoverCard.css";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixHoverCard from '@radix-ui/react-hover-card';
 import { GenericPopoverMenuPanel, Arrow } from '../GenericMenu/index.js';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
 import Popover_Arrow from '../Assets/Icons/Popover-Arrow.js';
+import { useResolvedPortalContainer } from '../../providers/PortalContext.js';
+import styles from './HoverCard.module.css.js';
 
 const HoverCard = ({
   children,
@@ -10,14 +13,12 @@ const HoverCard = ({
 }) => {
   return /* @__PURE__ */ jsx(RadixHoverCard.Root, { ...props, children });
 };
-const Trigger = styled(RadixHoverCard.Trigger).withConfig({
-  componentId: "sc-1ect7b6-0"
-})(["width:fit-content;"]);
 const HoverCardTrigger = ({
   children,
+  className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx(Trigger, { ...props, children });
+  return /* @__PURE__ */ jsx(RadixHoverCard.Trigger, { ...props, className: cn(styles["hover-card__trigger"], className), children });
 };
 HoverCardTrigger.displayName = "HoverCardTrigger";
 HoverCard.Trigger = HoverCardTrigger;
@@ -28,7 +29,8 @@ const HoverCardContent = ({
   container,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx(RadixHoverCard.Portal, { forceMount, container, children: /* @__PURE__ */ jsxs(GenericPopoverMenuPanel, { as: RadixHoverCard.Content, $type: "hover-card", $showArrow: showArrow, ...props, children: [
+  const portalContainer = useResolvedPortalContainer(container);
+  return /* @__PURE__ */ jsx(RadixHoverCard.Portal, { forceMount, container: portalContainer, children: /* @__PURE__ */ jsxs(GenericPopoverMenuPanel, { as: RadixHoverCard.Content, $type: "hover-card", $showArrow: showArrow, ...props, children: [
     showArrow && /* @__PURE__ */ jsx(Arrow, { asChild: true, as: RadixHoverCard.Arrow, width: 15, height: 10, children: /* @__PURE__ */ jsx(Popover_Arrow, {}) }),
     children
   ] }) });

package/dist/esm/components/HoverCard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import * as RadixHoverCard from '@radix-ui/react-hover-card';\nimport { ReactNode } from 'react';\nimport { Arrow, GenericPopoverMenuPanel } from '@/components/GenericMenu';\nimport { styled } from 'styled-components';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\n\nexport interface HoverCardContentProps extends RadixHoverCard.HoverCardContentProps {\n  showArrow?: boolean;\n  forceMount?: true;\n  container?: HTMLElement | null;\n  children: ReactNode;\n}\n\nexport const HoverCard = ({ children, ...props }: RadixHoverCard.HoverCardProps) => {\n  return <RadixHoverCard.Root {...props}>{children}</RadixHoverCard.Root>;\n};\n\nconst Trigger = styled(RadixHoverCard.Trigger)`\n  width: fit-content;\n`;\n\nconst HoverCardTrigger = ({\n  children,\n  ...props\n}: RadixHoverCard.HoverCardTriggerProps) => {\n  return <Trigger {...props}>{children}</Trigger>;\n};\nHoverCardTrigger.displayName = 'HoverCardTrigger';\nHoverCard.Trigger = HoverCardTrigger;\n\nconst HoverCardContent = ({\n  children,\n  showArrow,\n  forceMount,\n  container,\n  ...props\n}: HoverCardContentProps) => {\n  return (\n    <RadixHoverCard.Portal\n      forceMount={forceMount}\n      container={container}\n    >\n      <GenericPopoverMenuPanel\n        as={RadixHoverCard.Content}\n        $type=\"hover-card\"\n        $showArrow={showArrow}\n        {...props}\n      >\n        {showArrow && (\n          <Arrow\n            asChild\n            as={RadixHoverCard.Arrow}\n            width={15}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </GenericPopoverMenuPanel>\n    </RadixHoverCard.Portal>\n  );\n};\nHoverCardContent.displayName = 'HoverCardContent';\nHoverCard.Content = HoverCardContent;\n"],"names":["HoverCard","children","props","Trigger","styled","RadixHoverCard","withConfig","componentId","HoverCardTrigger","displayName","HoverCardContent","showArrow","forceMount","container","Content","Arrow"],"mappings":";;;;;;AAaO,MAAMA,YAAYA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAU,GAAGC;AAAqC,CAAA,KAAM;AAClF,EAAA,2BAAQ,cAAA,CAAe,IAAA,EAAf,KAAwBA,OAAQD,QAAAA,EAAS,CAAA;AACnD;AAEA,MAAME,OAAAA,GAAUC,MAAAA,CAAOC,cAAAA,CAAeF,OAAO,EAACG,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,oBAAA,CAAA,CAAA;AAI9C,MAAMC,mBAAmBA,CAAC;AAAA,EACxBP,QAAAA;AAAAA,EACA,GAAGC;AACiC,CAAA,KAAM;AAC1C,EAAA,uBAAO,GAAA,CAAC,OAAA,EAAA,EAAQ,GAAIA,KAAAA,EAAQD,QAAAA,EAAS,CAAA;AACvC,CAAA;AACAO,gBAAAA,CAAiBC,WAAAA,GAAc,kBAAA;AAC/BT,SAAAA,CAAUG,OAAAA,GAAUK,gBAAAA;AAEpB,MAAME,mBAAmBA,CAAC;AAAA,EACxBT,QAAAA;AAAAA,EACAU,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGX;AACkB,CAAA,KAAM;AAC3B,EAAA,2BACG,cAAA,CAAe,MAAA,EAAf,EACC,UAAA,EACA,WAEA,QAAA,kBAAA,IAAA,CAAC,uBAAA,EAAA,EACC,EAAA,EAAIG,cAAAA,CAAeS,SACnB,KAAA,EAAM,YAAA,EACN,UAAA,EAAYH,SAAAA,EACZ,GAAIT,KAAAA,EAEHS,QAAAA,EAAAA;AAAAA,IAAAA,SAAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EACC,OAAA,EAAO,IAAA,EACP,EAAA,EAAIN,cAAAA,CAAeU,KAAAA,EACnB,KAAA,EAAO,EAAA,EACP,MAAA,EAAQ,EAAA,EAER,QAAA,kBAAA,GAAA,CAAC,iBAAa,CAAA,EAChB,CAAA;AAAA,IAEDd;AAAAA,GAAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAA;AACAS,gBAAAA,CAAiBD,WAAAA,GAAc,kBAAA;AAC/BT,SAAAA,CAAUc,OAAAA,GAAUJ,gBAAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import * as RadixHoverCard from '@radix-ui/react-hover-card';\nimport { ReactNode } from 'react';\nimport { Arrow, GenericPopoverMenuPanel } from '@/components/GenericMenu';\nimport { cn } from '@/lib/cva';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './HoverCard.module.css';\n\nexport interface HoverCardContentProps extends RadixHoverCard.HoverCardContentProps {\n  showArrow?: boolean;\n  forceMount?: true;\n  container?: HTMLElement | null;\n  children: ReactNode;\n}\n\nexport const HoverCard = ({ children, ...props }: RadixHoverCard.HoverCardProps) => {\n  return <RadixHoverCard.Root {...props}>{children}</RadixHoverCard.Root>;\n};\n\nconst HoverCardTrigger = ({\n  children,\n  className,\n  ...props\n}: RadixHoverCard.HoverCardTriggerProps) => {\n  return (\n    <RadixHoverCard.Trigger\n      {...props}\n      className={cn(styles['hover-card__trigger'], className)}\n    >\n      {children}\n    </RadixHoverCard.Trigger>\n  );\n};\nHoverCardTrigger.displayName = 'HoverCardTrigger';\nHoverCard.Trigger = HoverCardTrigger;\n\nconst HoverCardContent = ({\n  children,\n  showArrow,\n  forceMount,\n  container,\n  ...props\n}: HoverCardContentProps) => {\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <RadixHoverCard.Portal\n      forceMount={forceMount}\n      container={portalContainer}\n    >\n      <GenericPopoverMenuPanel\n        as={RadixHoverCard.Content}\n        $type=\"hover-card\"\n        $showArrow={showArrow}\n        {...props}\n      >\n        {showArrow && (\n          <Arrow\n            asChild\n            as={RadixHoverCard.Arrow}\n            width={15}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </GenericPopoverMenuPanel>\n    </RadixHoverCard.Portal>\n  );\n};\nHoverCardContent.displayName = 'HoverCardContent';\nHoverCard.Content = HoverCardContent;\n"],"names":["HoverCard","children","props","HoverCardTrigger","className","cn","styles","displayName","Trigger","HoverCardContent","showArrow","forceMount","container","portalContainer","useResolvedPortalContainer","RadixHoverCard","Content","Arrow"],"mappings":";;;;;;;;AAeO,MAAMA,YAAYA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAU,GAAGC;AAAqC,CAAA,KAAM;AAClF,EAAA,2BAAQ,cAAA,CAAe,IAAA,EAAf,KAAwBA,OAAQD,QAAAA,EAAS,CAAA;AACnD;AAEA,MAAME,mBAAmBA,CAAC;AAAA,EACxBF,QAAAA;AAAAA,EACAG,SAAAA;AAAAA,EACA,GAAGF;AACiC,CAAA,KAAM;AAC1C,EAAA,uBACE,GAAA,CAAC,cAAA,CAAe,OAAA,EAAf,EACC,GAAIA,KAAAA,EACJ,SAAA,EAAWG,EAAAA,CAAGC,MAAAA,CAAO,qBAAqB,CAAA,EAAGF,SAAS,GAErDH,QAAAA,EACH,CAAA;AAEJ,CAAA;AACAE,gBAAAA,CAAiBI,WAAAA,GAAc,kBAAA;AAC/BP,SAAAA,CAAUQ,OAAAA,GAAUL,gBAAAA;AAEpB,MAAMM,mBAAmBA,CAAC;AAAA,EACxBR,QAAAA;AAAAA,EACAS,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGV;AACkB,CAAA,KAAM;AAC3B,EAAA,MAAMW,eAAAA,GAAkBC,2BAA2BF,SAAS,CAAA;AAE5D,EAAA,2BACG,cAAA,CAAe,MAAA,EAAf,EACC,UAAA,EACA,WAAWC,eAAAA,EAEX,QAAA,kBAAA,IAAA,CAAC,uBAAA,EAAA,EACC,EAAA,EAAIE,eAAeC,OAAAA,EACnB,KAAA,EAAM,cACN,UAAA,EAAYN,SAAAA,EACZ,GAAIR,KAAAA,EAEHQ,QAAAA,EAAAA;AAAAA,IAAAA,SAAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EACC,OAAA,EAAO,IAAA,EACP,EAAA,EAAIK,cAAAA,CAAeE,KAAAA,EACnB,KAAA,EAAO,EAAA,EACP,MAAA,EAAQ,EAAA,EAER,QAAA,kBAAA,GAAA,CAAC,iBAAa,CAAA,EAChB,CAAA;AAAA,IAEDhB;AAAAA,GAAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAA;AACAQ,gBAAAA,CAAiBF,WAAAA,GAAc,kBAAA;AAC/BP,SAAAA,CAAUgB,OAAAA,GAAUP,gBAAAA;;;;"}

package/dist/esm/components/Icon/SvgImageElement.js

@@ -1,3 +1,4 @@
+import "./Icon.css";
 import { jsx } from 'react/jsx-runtime';
 import { cn } from '../../lib/cva.js';
 import styles from './Icon.module.css.js';

package/dist/esm/components/Link/Link.css

@@ -118,18 +118,22 @@
   --link-font: var(--typography-styles-product-text-mono-lg);
 }
 
-/* The inner Icon receives .external-icon via className. The original used a
-   descendant selector inside IconWrapper; here we pass the scoped class
-   straight to the Icon so the selector stays a single class with the same
-   effective specificity. */
-.external-icon_size_xs__hRWrg,
-.external-icon_size_sm__QFJoc {
+/* The inner Icon is a `link__icon` element — it receives the scoped class via
+   className. The original used a descendant selector inside IconWrapper; here we
+   pass the scoped class straight to the Icon so the selector stays a single
+   class with the same effective specificity. */
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.link__icon__El8JR {
+}
+
+.link__icon_size_xs__qMUN-,
+.link__icon_size_sm__d2ZIU {
   width: var(--click-link-icon-size-sm-width);
   height: var(--click-link-icon-size-sm-height);
 }
 
-.external-icon_size_md__-bbPt,
-.external-icon_size_lg__XGkpl {
+.link__icon_size_md__-5EZ1,
+.link__icon_size_lg__RY5Y1 {
   width: var(--click-link-icon-size-md-width);
   height: var(--click-link-icon-size-md-height);
 }

package/dist/esm/components/Link/Link.module.css.js

@@ -8,6 +8,11 @@ const link_weight_medium = "link_weight_medium__Sot5E";
 const link_weight_semibold = "link_weight_semibold__6STFO";
 const link_weight_bold = "link_weight_bold__FWQyo";
 const link_weight_mono = "link_weight_mono__Mzdum";
+const link__icon = "link__icon__El8JR";
+const link__icon_size_xs = "link__icon_size_xs__qMUN-";
+const link__icon_size_sm = "link__icon_size_sm__d2ZIU";
+const link__icon_size_md = "link__icon_size_md__-5EZ1";
+const link__icon_size_lg = "link__icon_size_lg__RY5Y1";
 const styles = {
 	link: link,
 	link_size_xs: link_size_xs,
@@ -19,11 +24,12 @@ const styles = {
 	link_weight_semibold: link_weight_semibold,
 	link_weight_bold: link_weight_bold,
 	link_weight_mono: link_weight_mono,
-	"external-icon_size_xs": "external-icon_size_xs__hRWrg",
-	"external-icon_size_sm": "external-icon_size_sm__QFJoc",
-	"external-icon_size_md": "external-icon_size_md__-bbPt",
-	"external-icon_size_lg": "external-icon_size_lg__XGkpl"
+	link__icon: link__icon,
+	link__icon_size_xs: link__icon_size_xs,
+	link__icon_size_sm: link__icon_size_sm,
+	link__icon_size_md: link__icon_size_md,
+	link__icon_size_lg: link__icon_size_lg
 };
 
-export { styles as default, link, link_size_lg, link_size_md, link_size_sm, link_size_xs, link_weight_bold, link_weight_medium, link_weight_mono, link_weight_normal, link_weight_semibold };
+export { styles as default, link, link__icon, link__icon_size_lg, link__icon_size_md, link__icon_size_sm, link__icon_size_xs, link_size_lg, link_size_md, link_size_sm, link_size_xs, link_weight_bold, link_weight_medium, link_weight_mono, link_weight_normal, link_weight_semibold };
 //# sourceMappingURL=Link.module.css.js.map

package/dist/esm/components/Link/Link.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Link.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/Link/index.js

@@ -27,13 +27,13 @@ const linkVariants = cva(styles.link, {
     weight: "normal"
   }
 });
-const externalIconVariants = cva("", {
+const iconVariants = cva(styles["link__icon"], {
   variants: {
     size: {
-      xs: styles["external-icon_size_xs"],
-      sm: styles["external-icon_size_sm"],
-      md: styles["external-icon_size_md"],
-      lg: styles["external-icon_size_lg"]
+      xs: styles["link__icon_size_xs"],
+      sm: styles["link__icon_size_sm"],
+      md: styles["link__icon_size_md"],
+      lg: styles["link__icon_size_lg"]
     }
   },
   defaultVariants: {
@@ -56,7 +56,7 @@ const _Link = ({
     weight
   }), className), children: [
     children,
-    icon && /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(SvgImage, { name: icon, className: cn("external-icon", externalIconVariants({
+    icon && /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(SvgImage, { name: icon, className: cn(iconVariants({
       size
     })), "data-testid": icon }) })
   ] });

package/dist/esm/components/Link/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactEventHandler,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon/Icon.types';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Link.module.css';\nimport type { TextSize, TextWeight } from '@/components/Text';\n\nexport interface LinkProps<T extends ElementType = 'a'> {\n  /** The font size of the link text */\n  size?: TextSize;\n  /** The font weight of the link text */\n  weight?: TextWeight;\n  /** Click event handler */\n  onClick?: ReactEventHandler;\n  /** The content to display inside the link */\n  children?: React.ReactNode;\n  /** Optional icon to display after the link text */\n  icon?: IconName;\n  /** Custom component to render as the link element */\n  component?: T;\n}\n\nconst linkVariants = cva(styles.link, {\n  variants: {\n    size: {\n      xs: styles['link_size_xs'],\n      sm: styles['link_size_sm'],\n      md: styles['link_size_md'],\n      lg: styles['link_size_lg'],\n    },\n    weight: {\n      normal: styles['link_weight_normal'],\n      medium: styles['link_weight_medium'],\n      semibold: styles['link_weight_semibold'],\n      bold: styles['link_weight_bold'],\n      mono: styles['link_weight_mono'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    weight: 'normal',\n  },\n});\n\nconst externalIconVariants = cva('', {\n  variants: {\n    size: {\n      xs: styles['external-icon_size_xs'],\n      sm: styles['external-icon_size_sm'],\n      md: styles['external-icon_size_md'],\n      lg: styles['external-icon_size_lg'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\ntype LinkPolymorphicComponent = <T extends ElementType = 'a'>(\n  props: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T>\n) => ReactNode;\n\n/** Component for linking to other pages or sections from with body text */\nconst _Link = <T extends ElementType = 'a'>(\n  {\n    size = 'md',\n    weight = 'normal',\n    onClick,\n    icon,\n    children,\n    component,\n    className,\n    ...props\n  }: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T> & { className?: string },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'a';\n  return (\n    <Component\n      ref={ref}\n      onClick={onClick}\n      {...props}\n      className={cn(linkVariants({ size, weight }), className)}\n    >\n      {children}\n      {icon && (\n        <span>\n          <Icon\n            name={icon}\n            className={cn('external-icon', externalIconVariants({ size }))}\n            data-testid={icon}\n          />\n        </span>\n      )}\n    </Component>\n  );\n};\nexport const Link: LinkPolymorphicComponent = forwardRef(_Link);\n"],"names":["linkVariants","cva","styles","link","variants","size","xs","sm","md","lg","weight","normal","medium","semibold","bold","mono","defaultVariants","externalIconVariants","_Link","onClick","icon","children","component","className","props","ref","Component","cn","Icon","Link","forwardRef"],"mappings":";;;;;;;AA6BA,MAAMA,YAAAA,GAAeC,GAAAA,CAAIC,MAAAA,CAAOC,IAAAA,EAAM;AAAA,EACpCC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,OAAO,cAAc,CAAA;AAAA,MACzBK,EAAAA,EAAIL,OAAO,cAAc,CAAA;AAAA,MACzBM,EAAAA,EAAIN,OAAO,cAAc,CAAA;AAAA,MACzBO,EAAAA,EAAIP,OAAO,cAAc;AAAA,KAC3B;AAAA,IACAQ,MAAAA,EAAQ;AAAA,MACNC,MAAAA,EAAQT,OAAO,oBAAoB,CAAA;AAAA,MACnCU,MAAAA,EAAQV,OAAO,oBAAoB,CAAA;AAAA,MACnCW,QAAAA,EAAUX,OAAO,sBAAsB,CAAA;AAAA,MACvCY,IAAAA,EAAMZ,OAAO,kBAAkB,CAAA;AAAA,MAC/Ba,IAAAA,EAAMb,OAAO,kBAAkB;AAAA;AACjC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM,IAAA;AAAA,IACNK,MAAAA,EAAQ;AAAA;AAEZ,CAAC,CAAA;AAED,MAAMO,oBAAAA,GAAuBhB,IAAI,EAAA,EAAI;AAAA,EACnCG,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,OAAO,uBAAuB,CAAA;AAAA,MAClCK,EAAAA,EAAIL,OAAO,uBAAuB,CAAA;AAAA,MAClCM,EAAAA,EAAIN,OAAO,uBAAuB,CAAA;AAAA,MAClCO,EAAAA,EAAIP,OAAO,uBAAuB;AAAA;AACpC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAOD,MAAMa,QAAQ,CACZ;AAAA,EACEb,IAAAA,GAAO,IAAA;AAAA,EACPK,MAAAA,GAAS,QAAA;AAAA,EACTS,OAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACgF,CAAA,EACrFC,GAAAA,KACG;AACH,EAAA,MAAMC,YAAYJ,SAAAA,IAAa,GAAA;AAC/B,EAAA,uBACE,IAAA,CAAC,aACC,GAAA,EACA,OAAA,EACA,GAAIE,KAAAA,EACJ,SAAA,EAAWG,GAAG3B,YAAAA,CAAa;AAAA,IAAEK,IAAAA;AAAAA,IAAMK;AAAAA,GAAQ,CAAA,EAAGa,SAAS,CAAA,EAEtDF,QAAAA,EAAAA;AAAAA,IAAAA,QAAAA;AAAAA,IACAD,IAAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAACQ,QAAA,EAAA,EACC,MAAMR,IAAAA,EACN,SAAA,EAAWO,EAAAA,CAAG,eAAA,EAAiBV,oBAAAA,CAAqB;AAAA,MAAEZ;AAAAA,KAAM,CAAC,CAAA,EAC7D,aAAA,EAAae,MAAK,CAAA,EAEtB;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAA;AACO,MAAMS,IAAAA,GAAiCC,WAAWZ,KAAK;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactEventHandler,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon/Icon.types';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Link.module.css';\nimport type { TextSize, TextWeight } from '@/components/Text';\n\nexport interface LinkProps<T extends ElementType = 'a'> {\n  /** The font size of the link text */\n  size?: TextSize;\n  /** The font weight of the link text */\n  weight?: TextWeight;\n  /** Click event handler */\n  onClick?: ReactEventHandler;\n  /** The content to display inside the link */\n  children?: React.ReactNode;\n  /** Optional icon to display after the link text */\n  icon?: IconName;\n  /** Custom component to render as the link element */\n  component?: T;\n}\n\nconst linkVariants = cva(styles.link, {\n  variants: {\n    size: {\n      xs: styles['link_size_xs'],\n      sm: styles['link_size_sm'],\n      md: styles['link_size_md'],\n      lg: styles['link_size_lg'],\n    },\n    weight: {\n      normal: styles['link_weight_normal'],\n      medium: styles['link_weight_medium'],\n      semibold: styles['link_weight_semibold'],\n      bold: styles['link_weight_bold'],\n      mono: styles['link_weight_mono'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    weight: 'normal',\n  },\n});\n\nconst iconVariants = cva(styles['link__icon'], {\n  variants: {\n    size: {\n      xs: styles['link__icon_size_xs'],\n      sm: styles['link__icon_size_sm'],\n      md: styles['link__icon_size_md'],\n      lg: styles['link__icon_size_lg'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\ntype LinkPolymorphicComponent = <T extends ElementType = 'a'>(\n  props: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T>\n) => ReactNode;\n\n/** Component for linking to other pages or sections from with body text */\nconst _Link = <T extends ElementType = 'a'>(\n  {\n    size = 'md',\n    weight = 'normal',\n    onClick,\n    icon,\n    children,\n    component,\n    className,\n    ...props\n  }: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T> & { className?: string },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'a';\n  return (\n    <Component\n      ref={ref}\n      onClick={onClick}\n      {...props}\n      className={cn(linkVariants({ size, weight }), className)}\n    >\n      {children}\n      {icon && (\n        <span>\n          <Icon\n            name={icon}\n            className={cn(iconVariants({ size }))}\n            data-testid={icon}\n          />\n        </span>\n      )}\n    </Component>\n  );\n};\nexport const Link: LinkPolymorphicComponent = forwardRef(_Link);\n"],"names":["linkVariants","cva","styles","link","variants","size","xs","sm","md","lg","weight","normal","medium","semibold","bold","mono","defaultVariants","iconVariants","_Link","onClick","icon","children","component","className","props","ref","Component","cn","Icon","Link","forwardRef"],"mappings":";;;;;;;AA6BA,MAAMA,YAAAA,GAAeC,GAAAA,CAAIC,MAAAA,CAAOC,IAAAA,EAAM;AAAA,EACpCC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,OAAO,cAAc,CAAA;AAAA,MACzBK,EAAAA,EAAIL,OAAO,cAAc,CAAA;AAAA,MACzBM,EAAAA,EAAIN,OAAO,cAAc,CAAA;AAAA,MACzBO,EAAAA,EAAIP,OAAO,cAAc;AAAA,KAC3B;AAAA,IACAQ,MAAAA,EAAQ;AAAA,MACNC,MAAAA,EAAQT,OAAO,oBAAoB,CAAA;AAAA,MACnCU,MAAAA,EAAQV,OAAO,oBAAoB,CAAA;AAAA,MACnCW,QAAAA,EAAUX,OAAO,sBAAsB,CAAA;AAAA,MACvCY,IAAAA,EAAMZ,OAAO,kBAAkB,CAAA;AAAA,MAC/Ba,IAAAA,EAAMb,OAAO,kBAAkB;AAAA;AACjC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM,IAAA;AAAA,IACNK,MAAAA,EAAQ;AAAA;AAEZ,CAAC,CAAA;AAED,MAAMO,YAAAA,GAAehB,GAAAA,CAAIC,MAAAA,CAAO,YAAY,CAAA,EAAG;AAAA,EAC7CE,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,OAAO,oBAAoB,CAAA;AAAA,MAC/BK,EAAAA,EAAIL,OAAO,oBAAoB,CAAA;AAAA,MAC/BM,EAAAA,EAAIN,OAAO,oBAAoB,CAAA;AAAA,MAC/BO,EAAAA,EAAIP,OAAO,oBAAoB;AAAA;AACjC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAOD,MAAMa,QAAQ,CACZ;AAAA,EACEb,IAAAA,GAAO,IAAA;AAAA,EACPK,MAAAA,GAAS,QAAA;AAAA,EACTS,OAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACgF,CAAA,EACrFC,GAAAA,KACG;AACH,EAAA,MAAMC,YAAYJ,SAAAA,IAAa,GAAA;AAC/B,EAAA,uBACE,IAAA,CAAC,aACC,GAAA,EACA,OAAA,EACA,GAAIE,KAAAA,EACJ,SAAA,EAAWG,GAAG3B,YAAAA,CAAa;AAAA,IAAEK,IAAAA;AAAAA,IAAMK;AAAAA,GAAQ,CAAA,EAAGa,SAAS,CAAA,EAEtDF,QAAAA,EAAAA;AAAAA,IAAAA,QAAAA;AAAAA,IACAD,IAAAA,wBACE,MAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAACQ,YACC,IAAA,EAAMR,IAAAA,EACN,SAAA,EAAWO,EAAAA,CAAGV,YAAAA,CAAa;AAAA,MAAEZ;AAAAA,KAAM,CAAC,CAAA,EACpC,aAAA,EAAae,MAAK,CAAA,EAEtB;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAA;AACO,MAAMS,IAAAA,GAAiCC,WAAWZ,KAAK;;;;"}

package/dist/esm/components/MultiAccordion/MultiAccordion.css

@@ -0,0 +1,200 @@
+.multi-accordion__ntYTM {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: start;
+  gap: var(--multi-accordion-gap);
+}
+
+.multi-accordion_fill-width__Rnqso {
+  width: 100%;
+}
+
+.multi-accordion_gap_none__NrRxK {
+  --multi-accordion-gap: var(--click-container-gap-none);
+}
+
+.multi-accordion_gap_xxs__1FSFF {
+  --multi-accordion-gap: var(--click-container-gap-xxs);
+}
+
+.multi-accordion_gap_xs__oHQut {
+  --multi-accordion-gap: var(--click-container-gap-xs);
+}
+
+.multi-accordion_gap_sm__hxMme {
+  --multi-accordion-gap: var(--click-container-gap-sm);
+}
+
+.multi-accordion_gap_md__epg85 {
+  --multi-accordion-gap: var(--click-container-gap-md);
+}
+
+.multi-accordion_gap_lg__iYlYQ {
+  --multi-accordion-gap: var(--click-container-gap-lg);
+}
+
+.multi-accordion_gap_xl__1uarr {
+  --multi-accordion-gap: var(--click-container-gap-xl);
+}
+
+.multi-accordion_gap_xxl__m9X9V {
+  --multi-accordion-gap: var(--click-container-gap-xxl);
+}
+
+.multi-accordion__item__RHKu8 {
+  border: 1px solid var(--click-global-color-stroke-default);
+  border-radius: var(--border-radii-1);
+  background-color: var(--click-global-color-background-default);
+}
+
+.multi-accordion__item_no-border__ZtqMX {
+  border: none;
+}
+
+.multi-accordion__item_fill-width__zyq4f {
+  width: 100%;
+}
+
+.multi-accordion__trigger__etXVq {
+  display: flex;
+  width: 100%;
+  padding: var(--multi-accordion-trigger-padding);
+  align-items: center;
+  gap: var(--multi-accordion-trigger-gap);
+  border: none;
+  border-radius: inherit;
+  background-color: transparent;
+  color: var(--multi-accordion-label-default);
+  font: var(--multi-accordion-font-default);
+}
+
+.multi-accordion__trigger__etXVq:active {
+  color: var(--multi-accordion-label-active);
+  font: var(--multi-accordion-font-active);
+}
+
+.multi-accordion__trigger__etXVq:hover {
+  background: var(--click-global-color-stroke-default);
+  color: var(--multi-accordion-label-hover);
+  font: var(--multi-accordion-font-hover);
+  cursor: pointer;
+}
+
+.multi-accordion__trigger__etXVq [data-icon='accordion-status'] {
+  color: var(--global-color-stroke-intense);
+}
+
+.multi-accordion__trigger__etXVq[data-state='open'] {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.multi-accordion__trigger__etXVq[data-state='open'] [data-icon='accordion-status'] {
+  color: var(--global-color-accent-default);
+}
+
+.multi-accordion__trigger_size_none__o4eWF {
+  --multi-accordion-trigger-padding: var(--click-container-space-none);
+  --multi-accordion-trigger-gap: var(--click-accordion-sm-space-gap);
+}
+
+.multi-accordion__trigger_size_sm__80VXp {
+  --multi-accordion-trigger-padding: var(--click-container-space-sm);
+  --multi-accordion-trigger-gap: var(--click-accordion-sm-space-gap);
+}
+
+.multi-accordion__trigger_size_md__uAE8q {
+  --multi-accordion-trigger-padding: var(--click-container-space-md);
+  --multi-accordion-trigger-gap: var(--click-accordion-md-space-gap);
+}
+
+.multi-accordion__trigger_size_lg__VHN7C {
+  --multi-accordion-trigger-padding: var(--click-container-space-lg);
+  --multi-accordion-trigger-gap: var(--click-accordion-lg-space-gap);
+}
+
+.multi-accordion__trigger_font_sm__xnOLy {
+  --multi-accordion-font-default: var(--click-accordion-sm-typography-label-default);
+  --multi-accordion-font-hover: var(--click-accordion-sm-typography-label-hover);
+  --multi-accordion-font-active: var(--click-accordion-sm-typography-label-active);
+}
+
+.multi-accordion__trigger_font_md__hTIA8 {
+  --multi-accordion-font-default: var(--click-accordion-md-typography-label-default);
+  --multi-accordion-font-hover: var(--click-accordion-md-typography-label-hover);
+  --multi-accordion-font-active: var(--click-accordion-md-typography-label-active);
+}
+
+.multi-accordion__trigger_font_lg__yMSpQ {
+  --multi-accordion-font-default: var(--click-accordion-lg-typography-label-default);
+  --multi-accordion-font-hover: var(--click-accordion-lg-typography-label-hover);
+  --multi-accordion-font-active: var(--click-accordion-lg-typography-label-active);
+}
+
+.multi-accordion__trigger_color_default__X7f4v {
+  --multi-accordion-label-default: var(--click-accordion-color-default-label-default);
+  --multi-accordion-label-hover: var(--click-accordion-color-default-label-hover);
+  --multi-accordion-label-active: var(--click-accordion-color-default-label-active);
+}
+
+.multi-accordion__trigger_color_link__hXDgW {
+  --multi-accordion-label-default: var(--click-accordion-color-link-label-default);
+  --multi-accordion-label-hover: var(--click-accordion-color-link-label-hover);
+  --multi-accordion-label-active: var(--click-accordion-color-link-label-active);
+}
+
+.multi-accordion__icon-wrapper__uhWrs {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: transform 200ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+
+.multi-accordion__trigger__etXVq[data-state='open'] .multi-accordion__icon-wrapper__uhWrs {
+  transform: rotate(90deg);
+}
+
+.multi-accordion__icons-wrapper__67uu- {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.multi-accordion__content__Gz0po {
+  padding: var(--multi-accordion-content-padding);
+  padding-top: 0;
+}
+
+.multi-accordion__content_padding_none__GgbED {
+  --multi-accordion-content-padding: var(--click-container-space-none);
+}
+
+.multi-accordion__content_padding_sm__nmI7q {
+  --multi-accordion-content-padding: var(--click-container-space-sm);
+}
+
+.multi-accordion__content_padding_md__XD2Ki {
+  --multi-accordion-content-padding: var(--click-container-space-md);
+}
+
+.multi-accordion__content_padding_lg__W-njL {
+  --multi-accordion-content-padding: var(--click-container-space-lg);
+}
+
+.multi-accordion__title__kLWyH {
+  overflow: hidden;
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.multi-accordion__status-icon__MNVgx {
+}
+
+.multi-accordion__status-icon_completed__z5-XJ svg path {
+  fill: var(--global-color-accent-default) !important;
+  stroke: var(--global-color-background-default) !important;
+}
+
+.multi-accordion__status-icon_completed__z5-XJ svg path:first-of-type {
+  stroke: var(--global-color-accent-default) !important;
+}

package/dist/esm/components/MultiAccordion/MultiAccordion.module.css.js

@@ -0,0 +1,38 @@
+const styles = {
+	"multi-accordion": "multi-accordion__ntYTM",
+	"multi-accordion_fill-width": "multi-accordion_fill-width__Rnqso",
+	"multi-accordion_gap_none": "multi-accordion_gap_none__NrRxK",
+	"multi-accordion_gap_xxs": "multi-accordion_gap_xxs__1FSFF",
+	"multi-accordion_gap_xs": "multi-accordion_gap_xs__oHQut",
+	"multi-accordion_gap_sm": "multi-accordion_gap_sm__hxMme",
+	"multi-accordion_gap_md": "multi-accordion_gap_md__epg85",
+	"multi-accordion_gap_lg": "multi-accordion_gap_lg__iYlYQ",
+	"multi-accordion_gap_xl": "multi-accordion_gap_xl__1uarr",
+	"multi-accordion_gap_xxl": "multi-accordion_gap_xxl__m9X9V",
+	"multi-accordion__item": "multi-accordion__item__RHKu8",
+	"multi-accordion__item_no-border": "multi-accordion__item_no-border__ZtqMX",
+	"multi-accordion__item_fill-width": "multi-accordion__item_fill-width__zyq4f",
+	"multi-accordion__trigger": "multi-accordion__trigger__etXVq",
+	"multi-accordion__trigger_size_none": "multi-accordion__trigger_size_none__o4eWF",
+	"multi-accordion__trigger_size_sm": "multi-accordion__trigger_size_sm__80VXp",
+	"multi-accordion__trigger_size_md": "multi-accordion__trigger_size_md__uAE8q",
+	"multi-accordion__trigger_size_lg": "multi-accordion__trigger_size_lg__VHN7C",
+	"multi-accordion__trigger_font_sm": "multi-accordion__trigger_font_sm__xnOLy",
+	"multi-accordion__trigger_font_md": "multi-accordion__trigger_font_md__hTIA8",
+	"multi-accordion__trigger_font_lg": "multi-accordion__trigger_font_lg__yMSpQ",
+	"multi-accordion__trigger_color_default": "multi-accordion__trigger_color_default__X7f4v",
+	"multi-accordion__trigger_color_link": "multi-accordion__trigger_color_link__hXDgW",
+	"multi-accordion__icon-wrapper": "multi-accordion__icon-wrapper__uhWrs",
+	"multi-accordion__icons-wrapper": "multi-accordion__icons-wrapper__67uu-",
+	"multi-accordion__content": "multi-accordion__content__Gz0po",
+	"multi-accordion__content_padding_none": "multi-accordion__content_padding_none__GgbED",
+	"multi-accordion__content_padding_sm": "multi-accordion__content_padding_sm__nmI7q",
+	"multi-accordion__content_padding_md": "multi-accordion__content_padding_md__XD2Ki",
+	"multi-accordion__content_padding_lg": "multi-accordion__content_padding_lg__W-njL",
+	"multi-accordion__title": "multi-accordion__title__kLWyH",
+	"multi-accordion__status-icon": "multi-accordion__status-icon__MNVgx",
+	"multi-accordion__status-icon_completed": "multi-accordion__status-icon_completed__z5-XJ"
+};
+
+export { styles as default };
+//# sourceMappingURL=MultiAccordion.module.css.js.map

package/dist/esm/components/MultiAccordion/MultiAccordion.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiAccordion.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}