@clickhouse/click-ui 0.6.2-rc3 → 0.8.0

package/dist/cjs/components/Flyout/index.cjs

@@ -1,18 +1,23 @@
+require("./Flyout.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const RadixDialog = require('@radix-ui/react-dialog');
+const react = require('react');
 const styledComponents = require('styled-components');
+const RadixDialog = require('@radix-ui/react-dialog');
 const CrossButton = require('../CrossButton/index.cjs');
 const PortalContext = require('../../providers/PortalContext.cjs');
+const cva = require('../../lib/cva.cjs');
+const Flyout_module = require('./Flyout.module.css.cjs');
 const Container = require('../Container/index.cjs');
-const CodeBlock = require('../CodeBlock/index.cjs');
 const Icon = require('../Icon/index.cjs');
 const Separator = require('../Separator/index.cjs');
 const Button = require('../Button/index.cjs');
+const CodeBlock = require('../CodeBlock/index.cjs');
 const Spacer = require('../Spacer/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
 const Flyout = ({
   modal = false,
@@ -28,132 +33,129 @@ const Trigger = ({
 };
 Trigger.displayName = "Flyout.Trigger";
 Flyout.Trigger = Trigger;
-const animationWidth = () => styledComponents.keyframes({
-  from: {
-    width: 0
+const contentVariants = classVarianceAuthority.cva(Flyout_module.default.content, {
+  variants: {
+    type: {
+      default: Flyout_module.default.content_type_default,
+      inline: Flyout_module.default.content_type_inline
+    },
+    strategy: {
+      relative: Flyout_module.default.content_strategy_relative,
+      absolute: Flyout_module.default.content_strategy_absolute,
+      fixed: Flyout_module.default.content_strategy_fixed
+    },
+    align: {
+      start: Flyout_module.default.content_align_start,
+      end: Flyout_module.default.content_align_end
+    },
+    hasShadow: {
+      true: "",
+      false: Flyout_module.default["content_no-shadow"]
+    }
   },
-  to: {
-    width: "fit-content"
+  defaultVariants: {
+    type: "default",
+    align: "end",
+    hasShadow: true
   }
 });
-const FlyoutContent = styledComponents.styled(RadixDialog.DialogContent).withConfig({
-  componentId: "sc-1vtv6sf-0"
-})(["display:flex;flex-direction:column;align-items:center;overflow:hidden;top:0;bottom:0;width:fit-content;--flyout-width:", ";animation:", " 500ms cubic-bezier(0.16,1,0.3,1) forwards;", ""], ({
-  theme,
-  $size = "default",
-  $width
-}) => $width || theme.click.flyout.size[$size].width, animationWidth, ({
-  theme,
-  $strategy,
-  $type = "default",
-  $align,
-  $hasShadow = true
-}) => `
-    ${$align === "start" ? "left" : "right"}: 0;
-    max-width: 100%;
-    position: ${$strategy};
-    height: ${$strategy === "relative" ? "100%" : "auto"};
-    padding: 0 ${theme.click.flyout.space[$type].x};
-    /* Section spacing comes from the separators' own margins (Separator size), not a
-       container gap. A gap here would stack on those margins and double the spacing. */
-    gap: 0;
-    box-shadow: ${$hasShadow === false ? "none" : theme.click.flyout.shadow[$align === "start" ? "reverse" : "default"]};
-    border-${$align === "start" ? "right" : "left"}: 1px solid ${theme.click.flyout.color.stroke.default};
-    background: ${theme.click.flyout.color.background.default};
-
-    @media (max-width: 1024px) {
-      ${$strategy === "relative" ? `
-            position: absolute !important;` : ""}
-      overflow: hidden;
-      transform: ${$align === "start" ? "translateX(calc(50px - 100%))" : "translateX(calc(100% - 50px))"};
-      transition: 0.3s ease-in-out;
-      &:hover,
-      &.active,
-      &:focus-within {
-        transform: translateX(0);
-        ${$align === "start" ? "right" : "left"}: auto;
-      }
-    }
-  `);
-const FlyoutContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-1vtv6sf-1"
-})(["display:flex;gap:0;width:var(--flyout-width);max-width:100%;flex-flow:column nowrap;gap:inherit;"]);
 const Content = ({
   showOverlay = false,
   children,
   container,
   strategy = "relative",
-  size,
+  size = "default",
   type = "default",
   closeOnInteractOutside = false,
   width,
   align = "end",
   hasShadow = true,
   onInteractOutside,
+  className,
+  style,
   ...props
 }) => {
   const portalContainer = PortalContext.useResolvedPortalContainer(container);
+  const theme = styledComponents.useTheme();
+  const mergedStyle = react.useMemo(() => {
+    const resolvedWidth = width || theme.click.flyout.size[size].width;
+    return {
+      "--flyout-width": resolvedWidth,
+      ...style
+    };
+  }, [width, size, style, theme]);
   return /* @__PURE__ */ jsxRuntime.jsxs(RadixDialog.DialogPortal, { container: portalContainer, children: [
     showOverlay && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogOverlay, { className: "DialogOverlay" }),
-    /* @__PURE__ */ jsxRuntime.jsx(FlyoutContent, { $size: size, $type: type, $strategy: strategy, onInteractOutside: (e) => {
+    /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogContent, { onInteractOutside: (e) => {
       if (!closeOnInteractOutside) {
         e.preventDefault();
       }
       if (typeof onInteractOutside === "function") {
         onInteractOutside(e);
       }
-    }, $width: width, $align: align, $hasShadow: hasShadow, ...props, children })
+    }, ...props, style: mergedStyle, className: cva.cn(contentVariants({
+      type,
+      strategy,
+      align,
+      hasShadow
+    }), className), children })
   ] });
 };
 Content.displayName = "Flyout.Content";
 Flyout.Content = Content;
-const FlyoutElement = styledComponents.styled(Container.Container).withConfig({
-  componentId: "sc-1vtv6sf-2"
-})(["max-width:100%;max-width:-webkit-fill-available;max-width:fill-available;max-width:stretch;", ""], ({
-  theme,
-  $type = "default"
-}) => `
-    gap: ${theme.click.flyout.space[$type].gap};
-    padding: 0 ${theme.click.flyout.space[$type].content.x};
-  `);
+const elementVariants = classVarianceAuthority.cva(Flyout_module.default.element, {
+  variants: {
+    type: {
+      default: Flyout_module.default.element_type_default,
+      inline: Flyout_module.default.element_type_inline
+    }
+  },
+  defaultVariants: {
+    type: "default"
+  }
+});
 const Element = ({
   type,
+  className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(FlyoutElement, { orientation: "vertical", padding: "none", gap: "none", $type: type, ...props });
+}) => /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { orientation: "vertical", padding: "none", gap: "none", ...props, className: cva.cn(elementVariants({
+  type
+}), className) });
 Element.displayName = "Flyout.Element";
 Flyout.Element = Element;
-const FlyoutHeaderContainer = styledComponents.styled(Container.Container).withConfig({
-  componentId: "sc-1vtv6sf-3"
-})(["", ""], ({
-  theme,
-  $type = "default"
-}) => `
-    row-gap: ${theme.click.flyout.space[$type].content["row-gap"]};
-    column-gap: ${theme.click.flyout.space[$type].content["column-gap"]};
-    padding: ${theme.click.flyout.space[$type].y} ${theme.click.flyout.space[$type].y} 0 ${theme.click.flyout.space[$type].y};
-  `);
-const FlyoutTitle = styledComponents.styled(RadixDialog.DialogTitle).withConfig({
-  componentId: "sc-1vtv6sf-4"
-})(["", ""], ({
-  theme,
-  $type = "default"
-}) => `
-    color: ${theme.click.flyout.color.title.default};
-    font: ${theme.click.flyout.typography[$type].title.default};
-    margin: 0;
-    padding: 0;
-  `);
-const FlyoutDescription = styledComponents.styled(RadixDialog.DialogDescription).withConfig({
-  componentId: "sc-1vtv6sf-5"
-})(["", ""], ({
-  theme,
-  $type = "default"
-}) => `
-    color: ${theme.click.flyout.color.description.default};
-    font: ${theme.click.flyout.typography[$type].description.default};
-    margin: 0;
-    padding: 0;
-  `);
+const headerVariants = classVarianceAuthority.cva(Flyout_module.default.header, {
+  variants: {
+    type: {
+      default: Flyout_module.default.header_type_default,
+      inline: Flyout_module.default.header_type_inline
+    }
+  },
+  defaultVariants: {
+    type: "default"
+  }
+});
+const titleVariants = classVarianceAuthority.cva(Flyout_module.default.title, {
+  variants: {
+    type: {
+      default: Flyout_module.default.title_type_default,
+      inline: Flyout_module.default.title_type_inline
+    }
+  },
+  defaultVariants: {
+    type: "default"
+  }
+});
+const descriptionVariants = classVarianceAuthority.cva(Flyout_module.default.description, {
+  variants: {
+    type: {
+      default: Flyout_module.default.description_type_default,
+      inline: Flyout_module.default.description_type_inline
+    }
+  },
+  defaultVariants: {
+    type: "default"
+  }
+});
 const Header = ({
   title,
   description,
@@ -161,22 +163,31 @@ const Header = ({
   children,
   showClose = true,
   showSeparator = true,
+  className,
   ...props
 }) => {
   if (children) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(FlyoutContainer, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(FlyoutHeaderContainer, { $type: type, justifyContent: "space-between", alignItems: "start", padding: "none", gap: "none", fillWidth: false, isResponsive: false, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Flyout_module.default.container, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { justifyContent: "space-between", alignItems: "start", padding: "none", gap: "none", fillWidth: false, isResponsive: false, ...props, className: cva.cn(headerVariants({
+        type
+      }), className), children: [
         /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { padding: "none", gap: "none", orientation: "vertical", grow: "1", children }),
         showClose && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogClose, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CrossButton.CrossButton, { "data-testid": "flyout-header-close-btn", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "cross", size: type === "inline" ? "md" : "lg" }) }) })
       ] }),
       showSeparator && /* @__PURE__ */ jsxRuntime.jsx(Separator.Separator, { "data-testid": "flyout-header-separator", size: "lg" })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(FlyoutContainer, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(FlyoutHeaderContainer, { $type: type, justifyContent: "space-between", alignItems: "start", fillWidth: false, isResponsive: false, ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Flyout_module.default.container, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { justifyContent: "space-between", alignItems: "start", fillWidth: false, isResponsive: false, ...props, className: cva.cn(headerVariants({
+      type
+    }), className), children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { padding: "none", gap: "none", orientation: "vertical", grow: "1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(FlyoutTitle, { $type: type, children: title }),
-        description && /* @__PURE__ */ jsxRuntime.jsx(FlyoutDescription, { $type: type, children: description })
+        /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogTitle, { className: cva.cn(titleVariants({
+          type
+        })), children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogDescription, { className: cva.cn(descriptionVariants({
+          type
+        })), children: description })
       ] }),
       showClose && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogClose, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CrossButton.CrossButton, { "data-testid": "flyout-header-close-btn", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "cross", size: type === "inline" ? "md" : "lg" }) }) })
     ] }),
@@ -185,27 +196,37 @@ const Header = ({
 };
 Header.displayName = "Flyout.Header";
 Flyout.Header = Header;
-const FlyoutBody = styledComponents.styled(Container.Container).withConfig({
-  componentId: "sc-1vtv6sf-6"
-})(["width:var(--flyout-width);max-width:100%;margin-top:", ";"], ({
-  $align = "default"
-}) => $align === "top" ? "-1rem" : 0);
+const bodyVariants = classVarianceAuthority.cva(Flyout_module.default.body, {
+  variants: {
+    align: {
+      default: Flyout_module.default.body_align_default,
+      top: Flyout_module.default.body_align_top
+    }
+  },
+  defaultVariants: {
+    align: "default"
+  }
+});
 const Body = ({
   align,
+  className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(FlyoutBody, { overflow: "auto", orientation: "vertical", grow: "1", $align: align, ...props });
+}) => /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { overflow: "auto", orientation: "vertical", grow: "1", ...props, className: cva.cn(bodyVariants({
+  align
+}), className) });
 Body.displayName = "Flyout.Body";
 Flyout.Body = Body;
-const FlyoutFooter = styledComponents.styled(Container.Container).withConfig({
-  componentId: "sc-1vtv6sf-7"
-})(["", ""], ({
-  theme,
-  type = "default"
-}) => `
-    row-gap: ${theme.click.flyout.space[type].content["row-gap"]};
-    column-gap: ${theme.click.flyout.space[type].content["column-gap"]};
-    padding: ${theme.click.flyout.space[type].y} ${theme.click.flyout.space[type].content.x};
-  `);
+const footerVariants = classVarianceAuthority.cva(Flyout_module.default.footer, {
+  variants: {
+    type: {
+      default: Flyout_module.default.footer_type_default,
+      inline: Flyout_module.default.footer_type_inline
+    }
+  },
+  defaultVariants: {
+    type: "default"
+  }
+});
 const FlyoutClose = ({
   children,
   ...props
@@ -214,20 +235,20 @@ const FlyoutClose = ({
 };
 FlyoutClose.displayName = "Flyout.Close";
 Flyout.Close = FlyoutClose;
-const FooterContainer = styledComponents.styled(Container.Container).withConfig({
-  componentId: "sc-1vtv6sf-8"
-})(["width:var(--flyout-width);max-width:100%;"]);
-const Footer = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(FooterContainer, { gap: "none", orientation: "vertical", alignItems: "end", children: [
+const Footer = ({
+  type,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { gap: "none", orientation: "vertical", alignItems: "end", className: Flyout_module.default["footer-container"], children: [
     /* @__PURE__ */ jsxRuntime.jsx(Separator.Separator, { size: "xs" }),
-    /* @__PURE__ */ jsxRuntime.jsx(FlyoutFooter, { justifyContent: "end", gap: "none", padding: "none", isResponsive: false, wrap: "wrap", ...props })
+    /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { justifyContent: "end", gap: "none", padding: "none", isResponsive: false, wrap: "wrap", ...props, className: cva.cn(footerVariants({
+      type
+    }), className) })
   ] });
 };
 Footer.displayName = "Flyout.Footer";
 Flyout.Footer = Footer;
-const CustomCodeBlock = styledComponents.styled(CodeBlock.CodeBlock).withConfig({
-  componentId: "sc-1vtv6sf-9"
-})(["display:flex;height:100%;pre{flex:1;overflow-wrap:break-word;code{display:inline-block;max-width:calc(100% - 1rem);}}"]);
 const FlyoutCodeBlock = ({
   statement,
   language,
@@ -236,10 +257,11 @@ const FlyoutCodeBlock = ({
   showWrapButton,
   onCopy,
   onCopyError,
+  className,
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(Element, { fillHeight: true, ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(CustomCodeBlock, { wrapLines, language, showLineNumbers, showWrapButton, onCopy, onCopyError, children: statement }),
+    /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, { className: cva.cn(Flyout_module.default["code-block"], className), wrapLines, language, showLineNumbers, showWrapButton, onCopy, onCopyError, children: statement }),
     /* @__PURE__ */ jsxRuntime.jsx(Spacer.Spacer, { size: "xs" })
   ] });
 };

package/dist/cjs/components/Flyout/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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    /* Section spacing comes from the separators' own margins (Separator size), not a\n       container gap. A gap here would stack on those margins and double the spacing. */\n    gap: 0;\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  ${({ 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","jsx","Dialog","Trigger","children","DialogTrigger","displayName","animationWidth","keyframes","from","width","to","FlyoutContent","styled","DialogContent","withConfig","componentId","theme","$size","$width","click","flyout","size","$strategy","$type","$align","$hasShadow","space","x","shadow","color","stroke","default","background","FlyoutContainer","div","Content","showOverlay","container","strategy","type","closeOnInteractOutside","align","hasShadow","onInteractOutside","portalContainer","useResolvedPortalContainer","jsxs","DialogPortal","DialogOverlay","e","preventDefault","FlyoutElement","Container","gap","content","Element","FlyoutHeaderContainer","y","FlyoutTitle","DialogTitle","title","typography","FlyoutDescription","DialogDescription","description","Header","showClose","showSeparator","DialogClose","CrossButton","Icon","Separator","FlyoutBody","Body","FlyoutFooter","FlyoutClose","Button","Close","FooterContainer","Footer","CustomCodeBlock","CodeBlock","FlyoutCodeBlock","statement","language","wrapLines","showLineNumbers","showWrapButton","onCopy","onCopyError","Spacer"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Flyout/Flyout.tsx"],"sourcesContent":["import { CSSProperties, ReactNode, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\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 { CrossButton } from '@/components/CrossButton';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Flyout.module.css';\nimport type {\n  FlyoutProps,\n  FlyoutTriggerProps,\n  FlyoutContentProps,\n  FlyoutHeaderProps,\n  FlyoutFooterProps,\n  FlyoutType,\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 contentVariants = cva(styles.content, {\n  variants: {\n    type: {\n      default: styles.content_type_default,\n      inline: styles.content_type_inline,\n    },\n    strategy: {\n      relative: styles.content_strategy_relative,\n      absolute: styles.content_strategy_absolute,\n      fixed: styles.content_strategy_fixed,\n    },\n    align: {\n      start: styles.content_align_start,\n      end: styles.content_align_end,\n    },\n    hasShadow: {\n      true: '',\n      false: styles['content_no-shadow'],\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n    align: 'end',\n    hasShadow: true,\n  },\n});\n\nconst Content = ({\n  showOverlay = false,\n  children,\n  container,\n  strategy = 'relative',\n  size = 'default',\n  type = 'default',\n  closeOnInteractOutside = false,\n  width,\n  align = 'end',\n  hasShadow = true,\n  onInteractOutside,\n  className,\n  style,\n  ...props\n}: FlyoutContentProps) => {\n  const portalContainer = useResolvedPortalContainer(container);\n  const theme = useTheme();\n\n  const mergedStyle = useMemo(() => {\n    // Resolve the default width from the typed theme so an invalid `size`\n    // fails at compile time, rather than silently emitting a non-existent\n    // CSS variable. A non-empty `width` prop always wins; `||` (matching the\n    // pre-migration styled version) also falls back on an empty-string width.\n    const resolvedWidth = width || theme.click.flyout.size[size].width;\n\n    return {\n      '--flyout-width': resolvedWidth,\n      ...style,\n    } as CSSProperties;\n  }, [width, size, style, theme]);\n\n  return (\n    <DialogPortal container={portalContainer}>\n      {showOverlay && <DialogOverlay className=\"DialogOverlay\" />}\n      <DialogContent\n        onInteractOutside={e => {\n          if (!closeOnInteractOutside) {\n            e.preventDefault();\n          }\n          if (typeof onInteractOutside === 'function') {\n            onInteractOutside(e);\n          }\n        }}\n        {...props}\n        style={mergedStyle}\n        className={cn(contentVariants({ type, strategy, align, hasShadow }), className)}\n      >\n        {children}\n      </DialogContent>\n    </DialogPortal>\n  );\n};\nContent.displayName = 'Flyout.Content';\nFlyout.Content = Content;\n\nconst elementVariants = cva(styles.element, {\n  variants: {\n    type: {\n      default: styles.element_type_default,\n      inline: styles.element_type_inline,\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n  },\n});\n\ninterface ElementProps extends Omit<\n  ContainerProps,\n  'component' | 'padding' | 'gap' | 'orientation'\n> {\n  type?: FlyoutType;\n  className?: string;\n}\n\nconst Element = ({ type, className, ...props }: ElementProps) => (\n  <Container\n    orientation=\"vertical\"\n    padding=\"none\"\n    gap=\"none\"\n    {...props}\n    className={cn(elementVariants({ type }), className)}\n  />\n);\n\nElement.displayName = 'Flyout.Element';\nFlyout.Element = Element;\n\nconst headerVariants = cva(styles.header, {\n  variants: {\n    type: {\n      default: styles.header_type_default,\n      inline: styles.header_type_inline,\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n  },\n});\n\nconst titleVariants = cva(styles.title, {\n  variants: {\n    type: {\n      default: styles.title_type_default,\n      inline: styles.title_type_inline,\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n  },\n});\n\nconst descriptionVariants = cva(styles.description, {\n  variants: {\n    type: {\n      default: styles.description_type_default,\n      inline: styles.description_type_inline,\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n  },\n});\n\nconst Header = ({\n  title,\n  description,\n  type,\n  children,\n  showClose = true,\n  showSeparator = true,\n  className,\n  ...props\n}: FlyoutHeaderProps) => {\n  if (children) {\n    return (\n      <div className={styles.container}>\n        <Container\n          justifyContent=\"space-between\"\n          alignItems=\"start\"\n          padding=\"none\"\n          gap=\"none\"\n          fillWidth={false}\n          isResponsive={false}\n          {...props}\n          className={cn(headerVariants({ type }), className)}\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        </Container>\n        {showSeparator && (\n          <Separator\n            data-testid=\"flyout-header-separator\"\n            size=\"lg\"\n          />\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className={styles.container}>\n      <Container\n        justifyContent=\"space-between\"\n        alignItems=\"start\"\n        fillWidth={false}\n        isResponsive={false}\n        {...props}\n        className={cn(headerVariants({ type }), className)}\n      >\n        <Container\n          padding=\"none\"\n          gap=\"none\"\n          orientation=\"vertical\"\n          grow=\"1\"\n        >\n          <DialogTitle className={cn(titleVariants({ type }))}>{title}</DialogTitle>\n          {description && (\n            <DialogDescription className={cn(descriptionVariants({ type }))}>\n              {description}\n            </DialogDescription>\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      </Container>\n      {showSeparator && (\n        <Separator\n          data-testid=\"flyout-header-separator\"\n          size=\"lg\"\n        />\n      )}\n    </div>\n  );\n};\nHeader.displayName = 'Flyout.Header';\nFlyout.Header = Header;\n\ntype FlyoutAlign = 'default' | 'top';\n\nconst bodyVariants = cva(styles.body, {\n  variants: {\n    align: {\n      default: styles.body_align_default,\n      top: styles.body_align_top,\n    },\n  },\n  defaultVariants: {\n    align: 'default',\n  },\n});\n\ninterface BodyProps extends ContainerProps {\n  align?: FlyoutAlign;\n  className?: string;\n}\n\nconst Body = ({ align, className, ...props }: BodyProps) => (\n  <Container\n    overflow=\"auto\"\n    orientation=\"vertical\"\n    grow=\"1\"\n    {...props}\n    className={cn(bodyVariants({ align }), className)}\n  />\n);\n\nBody.displayName = 'Flyout.Body';\nFlyout.Body = Body;\n\nconst footerVariants = cva(styles.footer, {\n  variants: {\n    type: {\n      default: styles.footer_type_default,\n      inline: styles.footer_type_inline,\n    },\n  },\n  defaultVariants: {\n    type: 'default',\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 Footer = ({ type, className, ...props }: FlyoutFooterProps) => {\n  return (\n    <Container\n      gap=\"none\"\n      orientation=\"vertical\"\n      alignItems=\"end\"\n      className={styles['footer-container']}\n    >\n      <Separator size=\"xs\" />\n      <Container\n        justifyContent=\"end\"\n        gap=\"none\"\n        padding=\"none\"\n        isResponsive={false}\n        wrap=\"wrap\"\n        {...props}\n        className={cn(footerVariants({ type }), className)}\n      />\n    </Container>\n  );\n};\nFooter.displayName = 'Flyout.Footer';\nFlyout.Footer = Footer;\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  className,\n  ...props\n}: FlyoutCodeBlockProps & ElementProps) => {\n  return (\n    <Element\n      fillHeight\n      {...props}\n    >\n      <CodeBlock\n        className={cn(styles['code-block'], className)}\n        wrapLines={wrapLines}\n        language={language}\n        showLineNumbers={showLineNumbers}\n        showWrapButton={showWrapButton}\n        onCopy={onCopy}\n        onCopyError={onCopyError}\n      >\n        {statement}\n      </CodeBlock>\n      <Spacer size=\"xs\" />\n    </Element>\n  );\n};\n\nFlyout.CodeBlock = FlyoutCodeBlock;\n"],"names":["Flyout","modal","props","jsx","Dialog","Trigger","children","DialogTrigger","displayName","contentVariants","cva","styles","content","variants","type","default","content_type_default","inline","content_type_inline","strategy","relative","content_strategy_relative","absolute","content_strategy_absolute","fixed","content_strategy_fixed","align","start","content_align_start","end","content_align_end","hasShadow","true","false","defaultVariants","Content","showOverlay","container","size","closeOnInteractOutside","width","onInteractOutside","className","style","portalContainer","useResolvedPortalContainer","theme","useTheme","mergedStyle","useMemo","resolvedWidth","click","flyout","jsxs","DialogPortal","DialogOverlay","DialogContent","e","preventDefault","cn","elementVariants","element","element_type_default","element_type_inline","Element","Container","headerVariants","header","header_type_default","header_type_inline","titleVariants","title","title_type_default","title_type_inline","descriptionVariants","description","description_type_default","description_type_inline","Header","showClose","showSeparator","DialogClose","CrossButton","Icon","Separator","DialogTitle","DialogDescription","bodyVariants","body","body_align_default","top","body_align_top","Body","footerVariants","footer","footer_type_default","footer_type_inline","FlyoutClose","Button","Close","Footer","FlyoutCodeBlock","statement","language","wrapLines","showLineNumbers","showWrapButton","onCopy","onCopyError","CodeBlock","Spacer"],"mappings":"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"}

package/dist/cjs/components/FormContainer/Error.cjs

@@ -1,17 +1,16 @@
+require("./Error.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const styledComponents = require('styled-components');
+const jsxRuntime = require('react/jsx-runtime');
+const cva = require('../../lib/cva.cjs');
+const Error_module = require('./Error.module.css.cjs');
 
-const Error = styledComponents.styled.div.withConfig({
-  componentId: "sc-qn2f3u-0"
-})(["", ";"], ({
-  theme
-}) => `
-  font: ${theme.click.field.typography.label.error};
-  color: ${theme.click.field.color.label.error};
-`);
+const Error = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: cva.cn(Error_module.default.error, className) });
 
 exports.Error = Error;
 //# sourceMappingURL=Error.cjs.map

package/dist/cjs/components/FormContainer/Error.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Error.cjs","sources":["../../../../src/components/FormContainer/Error.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nexport const Error = styled.div`\n  ${({ theme }) => `\n  font: ${theme.click.field.typography.label.error};\n  color: ${theme.click.field.color.label.error};\n`};\n`;\n"],"names":["Error","styled","div","withConfig","componentId","theme","click","field","typography","label","error","color"],"mappings":";;;;;;AAEO,MAAMA,KAAAA,GAAQC,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,GAAA,GAC3B,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAM;AAAA,QAAA,EACTA,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,UAAAA,CAAWC,MAAMC,KAAK,CAAA;AAAA,SAAA,EACvCL,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMI,KAAAA,CAAMF,MAAMC,KAAK,CAAA;AAAA,CAC7C;;;;"}
+{"version":3,"file":"Error.cjs","sources":["../../../../src/components/FormContainer/Error.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { cn } from '@/lib/cva';\nimport styles from './Error.module.css';\n\nexport const Error = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n  <div\n    {...props}\n    className={cn(styles.error, className)}\n  />\n);\n"],"names":["Error","className","props","jsx","cn","styles","error"],"mappings":";;;;;;;;AAIO,MAAMA,QAAQA,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAAW,GAAGC;AAAsC,CAAA,qBAC1EC,cAAA,CAAC,SACC,GAAID,KAAAA,EACJ,WAAWE,MAAAA,CAAGC,oBAAAA,CAAOC,KAAAA,EAAOL,SAAS,CAAA,EAAE;;;;"}

package/dist/cjs/components/FormContainer/Error.css

@@ -0,0 +1,4 @@
+.error__Wvrfq {
+  color: var(--click-field-color-label-error);
+  font: var(--click-field-typography-label-error);
+}

package/dist/cjs/components/FormContainer/Error.module.css.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const error = "error__Wvrfq";
+const styles = {
+	error: error
+};
+
+exports.default = styles;
+exports.error = error;
+//# sourceMappingURL=Error.module.css.cjs.map

package/dist/cjs/components/FormContainer/Error.module.css.cjs.map

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

package/dist/cjs/components/FormContainer/FormElementContainer.cjs

@@ -1,14 +1,16 @@
+require("./FormElementContainer.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const styledComponents = require('styled-components');
+const jsxRuntime = require('react/jsx-runtime');
+const cva = require('../../lib/cva.cjs');
+const FormElementContainer_module = require('./FormElementContainer.module.css.cjs');
 
-const FormElementContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-u5pkx7-0"
-})(["display:flex;flex-direction:column;align-items:flex-start;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;gap:", ";"], ({
-  theme
-}) => theme.click.field.space.gap);
+const FormElementContainer = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: cva.cn(FormElementContainer_module.default["form-element-container"], className) });
 
 exports.FormElementContainer = FormElementContainer;
 //# sourceMappingURL=FormElementContainer.cjs.map

package/dist/cjs/components/FormContainer/FormElementContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementContainer.cjs","sources":["../../../../src/components/FormContainer/FormElementContainer.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nexport const FormElementContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  width: 100%;\n  width: -webkit-fill-available;\n  width: fill-available;\n  width: stretch;\n  gap: ${({ theme }) => theme.click.field.space.gap};\n`;\n"],"names":["FormElementContainer","styled","div","withConfig","componentId","theme","click","field","space","gap"],"mappings":";;;;;;AAEO,MAAMA,oBAAAA,GAAuBC,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,2IAAA,EAAA,GAAA,GAQrC,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,GAAG;;;;"}
+{"version":3,"file":"FormElementContainer.cjs","sources":["../../../../src/components/FormContainer/FormElementContainer.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { cn } from '@/lib/cva';\nimport styles from './FormElementContainer.module.css';\n\nexport const FormElementContainer = ({\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) => (\n  <div\n    {...props}\n    className={cn(styles['form-element-container'], className)}\n  />\n);\n"],"names":["FormElementContainer","className","props","jsx","cn","styles"],"mappings":";;;;;;;;AAIO,MAAMA,uBAAuBA,CAAC;AAAA,EACnCC,SAAAA;AAAAA,EACA,GAAGC;AAC2B,CAAA,qBAC9BC,cAAA,CAAC,KAAA,EAAA,EACC,GAAID,KAAAA,EACJ,SAAA,EAAWE,OAAGC,mCAAAA,CAAO,wBAAwB,CAAA,EAAGJ,SAAS,CAAA,EAAE;;;;"}

package/dist/cjs/components/FormContainer/FormElementContainer.css

@@ -0,0 +1,14 @@
+.form-element-container__cy-tb {
+  display: flex;
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same
+   width fallback chain (100% → -webkit-fill-available → fill-available →
+   stretch) so the container fills the available inline space. */
+  width: 100%;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--click-field-space-gap);
+}

package/dist/cjs/components/FormContainer/FormElementContainer.module.css.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const styles = {
+	"form-element-container": "form-element-container__cy-tb"
+};
+
+exports.default = styles;
+//# sourceMappingURL=FormElementContainer.module.css.cjs.map

package/dist/cjs/components/FormContainer/FormElementContainer.module.css.cjs.map

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