@clickhouse/click-ui 0.7.0 → 0.8.0

package/dist/esm/components/FileUpload/FileUploadItem.js

@@ -1,65 +1,48 @@
+import "./FileUploadItem.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { styled, css } from 'styled-components';
+import { cn } from '../../lib/cva.js';
 import { MiddleTruncator } from '../MiddleTruncator/index.js';
 import { formatFileSize } from '../../utils/file.js';
+import styles from './FileUploadItem.module.css.js';
 import { Icon as SvgImage } from '../Icon/index.js';
+import { Text } from '../Text/index.js';
 import { ProgressBar } from '../ProgressBar/index.js';
 import { IconButton } from '../IconButton/index.js';
-import { Text } from '../Text/index.js';
+import { cva } from 'class-variance-authority';
 
-const FileItemContainer = styled.div.withConfig({
-  componentId: "sc-1ihicfl-0"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:", ";flex:1;min-width:0;", ""], ({
-  theme
-}) => theme.click.fileUpload.sm.space.gap, (props) => !props.$inline && css(["background-color:", ";border:", ";border-radius:", ";padding:", ";", ""], ({
-  theme
-}) => theme.click.fileUpload.color.background.default, ({
-  theme
-}) => `1px solid ${theme.click.fileUpload.color.stroke.default}`, ({
-  theme
-}) => theme.click.fileUpload.sm.radii.all, ({
-  theme
-}) => `${theme.click.fileUpload.sm.space.y} ${theme.click.fileUpload.sm.space.x}`, props.$isError && css(["background-color:", ";border-color:transparent;"], ({
-  theme
-}) => theme.click.fileUpload.color.background.error)));
-const DocumentIcon = styled(SvgImage).withConfig({
-  componentId: "sc-1ihicfl-1"
-})(["svg{width:", ";height:", ";color:", ";}"], ({
-  theme,
-  $size
-}) => $size === "sm" ? theme.click.fileUpload.sm.icon.size.width : theme.click.fileUpload.md.icon.size.width, ({
-  theme,
-  $size
-}) => $size === "sm" ? theme.click.fileUpload.sm.icon.size.height : theme.click.fileUpload.md.icon.size.height, ({
-  theme,
-  $size
-}) => $size === "sm" ? theme.click.fileUpload.sm.color.icon.default : theme.click.fileUpload.md.color.icon.default);
-const FileUploadDescription = styled(Text).withConfig({
-  componentId: "sc-1ihicfl-2"
-})(["font:", ";color:", ";"], ({
-  theme
-}) => theme.click.fileUpload.typography.description.default, ({
-  theme,
-  $isError
-}) => $isError ? theme.click.fileUpload.color.title.error : theme.click.fileUpload.color.description.default);
-const FileDetails = styled.div.withConfig({
-  componentId: "sc-1ihicfl-3"
-})(["display:flex;gap:", ";border:none;min-width:0;"], ({
-  theme
-}) => theme.click.fileUpload.md.space.gap);
-const FileActions = styled.div.withConfig({
-  componentId: "sc-1ihicfl-4"
-})(["display:flex;align-items:center;margin-left:auto;gap:0;"]);
-const FileContentContainer = styled.div.withConfig({
-  componentId: "sc-1ihicfl-5"
-})(["flex:1;display:flex;flex-direction:column;justify-content:center;min-height:", ";min-width:0;"], ({
-  $size
-}) => $size === "sm" ? "24px" : "auto");
-const ProgressBarWrapper = styled.div.withConfig({
-  componentId: "sc-1ihicfl-6"
-})(["margin-top:", ";margin-bottom:9px;"], ({
-  theme
-}) => theme.click.fileUpload.md.space.gap);
+const fileItemContainerVariants = cva(styles["file-item-container"], {
+  variants: {
+    inline: {
+      false: styles["file-item-container_inline_false"]
+    },
+    error: {
+      true: styles["file-item-container_error_true"]
+    }
+  }
+});
+const documentIconVariants = cva(styles["document-icon"], {
+  variants: {
+    size: {
+      sm: styles["document-icon_size_sm"],
+      md: styles["document-icon_size_md"]
+    }
+  }
+});
+const descriptionVariants = cva(styles.description, {
+  variants: {
+    error: {
+      true: styles["description_error_true"]
+    }
+  }
+});
+const fileContentContainerVariants = cva(styles["file-content-container"], {
+  variants: {
+    size: {
+      sm: styles["file-content-container_size_sm"],
+      md: styles["file-content-container_size_md"]
+    }
+  }
+});
 const FileUploadItem = ({
   fileName,
   fileSize,
@@ -73,21 +56,30 @@ const FileUploadItem = ({
   inline = false
 }) => {
   const isError = !showSuccess && !showProgress;
-  return /* @__PURE__ */ jsxs(FileItemContainer, { $isError: isError, $inline: inline, $size: size, children: [
-    showSuccess ? /* @__PURE__ */ jsx(SvgImage, { size: "xs", state: "success", name: "check" }) : /* @__PURE__ */ jsx(DocumentIcon, { name: "document", $size: size }),
-    /* @__PURE__ */ jsxs(FileContentContainer, { $size: size, children: [
-      /* @__PURE__ */ jsxs(FileDetails, { children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(fileItemContainerVariants({
+    inline: inline ? void 0 : false,
+    error: !inline && isError
+  })), children: [
+    showSuccess ? /* @__PURE__ */ jsx(SvgImage, { size: "xs", state: "success", name: "check" }) : /* @__PURE__ */ jsx(SvgImage, { name: "document", className: cn(documentIconVariants({
+      size
+    })) }),
+    /* @__PURE__ */ jsxs("div", { className: cn(fileContentContainerVariants({
+      size
+    })), children: [
+      /* @__PURE__ */ jsxs("div", { className: styles["file-details"], children: [
         /* @__PURE__ */ jsx(MiddleTruncator, { text: fileName }),
-        showProgress && !showSuccess && /* @__PURE__ */ jsxs(FileUploadDescription, { children: [
+        showProgress && !showSuccess && /* @__PURE__ */ jsxs(Text, { className: styles.description, children: [
           progress,
           "%"
         ] })
       ] }),
-      isError && /* @__PURE__ */ jsx(FileUploadDescription, { $isError: true, children: failureMessage }),
-      showProgress && !showSuccess && /* @__PURE__ */ jsx(ProgressBarWrapper, { children: /* @__PURE__ */ jsx(ProgressBar, { progress, type: "small" }) }),
-      showSuccess && /* @__PURE__ */ jsx(FileUploadDescription, { children: formatFileSize(fileSize) })
+      isError && /* @__PURE__ */ jsx(Text, { className: cn(descriptionVariants({
+        error: true
+      })), children: failureMessage }),
+      showProgress && !showSuccess && /* @__PURE__ */ jsx("div", { className: styles["progress-bar-wrapper"], children: /* @__PURE__ */ jsx(ProgressBar, { progress, type: "small" }) }),
+      showSuccess && /* @__PURE__ */ jsx(Text, { className: styles.description, children: formatFileSize(fileSize) })
     ] }),
-    /* @__PURE__ */ jsxs(FileActions, { children: [
+    /* @__PURE__ */ jsxs("div", { className: styles["file-actions"], children: [
       isError && onRetry && /* @__PURE__ */ jsx(IconButton, { size: "sm", icon: "refresh", type: "ghost", onClick: onRetry }),
       onRemove && /* @__PURE__ */ jsx(IconButton, { size: "sm", icon: "cross", type: "ghost", onClick: onRemove })
     ] })

package/dist/esm/components/FileUpload/FileUploadItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadItem.js","sources":["../../../../src/components/FileUpload/FileUploadItem.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { styled, css } from 'styled-components';\nimport { Text } from '@/components/Text';\nimport { Icon } from '@/components/Icon';\nimport { IconButton } from '@/components/IconButton';\nimport { ProgressBar } from '@/components/ProgressBar';\nimport { MiddleTruncator } from '@/components/MiddleTruncator';\nimport { formatFileSize } from '@/utils/file';\n\nexport interface FileUploadItemProps {\n  fileName: string;\n  fileSize: number;\n  progress?: number;\n  showSuccess?: boolean;\n  showProgress?: boolean;\n  failureMessage?: string;\n  onRetry?: () => void;\n  onRemove?: () => void;\n  size?: 'sm' | 'md';\n  inline?: boolean;\n}\n\nconst FileItemContainer = styled.div<{\n  $isError?: boolean;\n  $inline?: boolean;\n  $size?: 'sm' | 'md';\n}>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: ${({ theme }) => theme.click.fileUpload.sm.space.gap};\n  flex: 1;\n  min-width: 0;\n\n  ${props =>\n    !props.$inline &&\n    css`\n      background-color: ${({ theme }) => theme.click.fileUpload.color.background.default};\n      border: ${({ theme }) =>\n        `1px solid ${theme.click.fileUpload.color.stroke.default}`};\n      border-radius: ${({ theme }) => theme.click.fileUpload.sm.radii.all};\n      padding: ${({ theme }) =>\n        `${theme.click.fileUpload.sm.space.y} ${theme.click.fileUpload.sm.space.x}`};\n\n      ${props.$isError &&\n      css`\n        background-color: ${({ theme }) => theme.click.fileUpload.color.background.error};\n        border-color: transparent;\n      `}\n    `}\n`;\n\nconst DocumentIcon = styled(Icon)<{ $size?: 'sm' | 'md' }>`\n  svg {\n    width: ${({ theme, $size }) =>\n      $size === 'sm'\n        ? theme.click.fileUpload.sm.icon.size.width\n        : theme.click.fileUpload.md.icon.size.width};\n    height: ${({ theme, $size }) =>\n      $size === 'sm'\n        ? theme.click.fileUpload.sm.icon.size.height\n        : theme.click.fileUpload.md.icon.size.height};\n    color: ${({ theme, $size }) =>\n      $size === 'sm'\n        ? theme.click.fileUpload.sm.color.icon.default\n        : theme.click.fileUpload.md.color.icon.default};\n  }\n`;\n\nconst FileUploadDescription = styled(Text)<{ $isError?: boolean }>`\n  font: ${({ theme }) => theme.click.fileUpload.typography.description.default};\n  color: ${({ theme, $isError }) =>\n    $isError\n      ? theme.click.fileUpload.color.title.error\n      : theme.click.fileUpload.color.description.default};\n`;\n\nconst FileDetails = styled.div`\n  display: flex;\n  gap: ${({ theme }) => theme.click.fileUpload.md.space.gap};\n  border: none;\n  min-width: 0;\n`;\n\nconst FileActions = styled.div`\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n  gap: 0;\n`;\n\nconst FileContentContainer = styled.div<{ $size: 'sm' | 'md' }>`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  min-height: ${({ $size }) => ($size === 'sm' ? '24px' : 'auto')};\n  min-width: 0;\n`;\n\nconst ProgressBarWrapper = styled.div`\n  margin-top: ${({ theme }) => theme.click.fileUpload.md.space.gap};\n  margin-bottom: 9px;\n`;\n\nexport const FileUploadItem: FC<FileUploadItemProps> = ({\n  fileName,\n  fileSize,\n  progress = 0,\n  showSuccess = false,\n  showProgress = false,\n  failureMessage = 'Upload failed',\n  onRetry,\n  onRemove,\n  size = 'sm',\n  inline = false,\n}) => {\n  const isError = !showSuccess && !showProgress;\n\n  return (\n    <FileItemContainer\n      $isError={isError}\n      $inline={inline}\n      $size={size}\n    >\n      {showSuccess ? (\n        <Icon\n          size={'xs'}\n          state={'success'}\n          name={'check'}\n        />\n      ) : (\n        <DocumentIcon\n          name={'document'}\n          $size={size}\n        />\n      )}\n\n      <FileContentContainer $size={size}>\n        <FileDetails>\n          <MiddleTruncator text={fileName} />\n          {showProgress && !showSuccess && (\n            <FileUploadDescription>{progress}%</FileUploadDescription>\n          )}\n        </FileDetails>\n\n        {isError && (\n          <FileUploadDescription $isError>{failureMessage}</FileUploadDescription>\n        )}\n\n        {showProgress && !showSuccess && (\n          <ProgressBarWrapper>\n            <ProgressBar\n              progress={progress}\n              type={'small'}\n            />\n          </ProgressBarWrapper>\n        )}\n\n        {showSuccess && (\n          <FileUploadDescription>{formatFileSize(fileSize)}</FileUploadDescription>\n        )}\n      </FileContentContainer>\n\n      <FileActions>\n        {isError && onRetry && (\n          <IconButton\n            size={'sm'}\n            icon={'refresh'}\n            type={'ghost'}\n            onClick={onRetry}\n          />\n        )}\n        {onRemove && (\n          <IconButton\n            size={'sm'}\n            icon={'cross'}\n            type={'ghost'}\n            onClick={onRemove}\n          />\n        )}\n      </FileActions>\n    </FileItemContainer>\n  );\n};\n"],"names":["FileItemContainer","styled","div","withConfig","componentId","theme","click","fileUpload","sm","space","gap","props","$inline","css","color","background","default","stroke","radii","all","y","x","$isError","error","DocumentIcon","Icon","$size","icon","size","width","md","height","FileUploadDescription","Text","typography","description","title","FileDetails","FileActions","FileContentContainer","ProgressBarWrapper","FileUploadItem","fileName","fileSize","progress","showSuccess","showProgress","failureMessage","onRetry","onRemove","inline","isError","formatFileSize"],"mappings":"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"}
+{"version":3,"file":"FileUploadItem.js","sources":["../../../../src/components/FileUpload/FileUploadItem.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { Text } from '@/components/Text';\nimport { Icon } from '@/components/Icon';\nimport { IconButton } from '@/components/IconButton';\nimport { ProgressBar } from '@/components/ProgressBar';\nimport { MiddleTruncator } from '@/components/MiddleTruncator';\nimport { formatFileSize } from '@/utils/file';\nimport styles from './FileUploadItem.module.css';\n\nexport interface FileUploadItemProps {\n  fileName: string;\n  fileSize: number;\n  progress?: number;\n  showSuccess?: boolean;\n  showProgress?: boolean;\n  failureMessage?: string;\n  onRetry?: () => void;\n  onRemove?: () => void;\n  size?: 'sm' | 'md';\n  inline?: boolean;\n}\n\nconst fileItemContainerVariants = cva(styles['file-item-container'], {\n  variants: {\n    inline: {\n      false: styles['file-item-container_inline_false'],\n    },\n    error: {\n      true: styles['file-item-container_error_true'],\n    },\n  },\n});\n\nconst documentIconVariants = cva(styles['document-icon'], {\n  variants: {\n    size: {\n      sm: styles['document-icon_size_sm'],\n      md: styles['document-icon_size_md'],\n    },\n  },\n});\n\nconst descriptionVariants = cva(styles.description, {\n  variants: {\n    error: {\n      true: styles['description_error_true'],\n    },\n  },\n});\n\nconst fileContentContainerVariants = cva(styles['file-content-container'], {\n  variants: {\n    size: {\n      sm: styles['file-content-container_size_sm'],\n      md: styles['file-content-container_size_md'],\n    },\n  },\n});\n\nexport const FileUploadItem: FC<FileUploadItemProps> = ({\n  fileName,\n  fileSize,\n  progress = 0,\n  showSuccess = false,\n  showProgress = false,\n  failureMessage = 'Upload failed',\n  onRetry,\n  onRemove,\n  size = 'sm',\n  inline = false,\n}) => {\n  const isError = !showSuccess && !showProgress;\n\n  return (\n    <div\n      className={cn(\n        fileItemContainerVariants({\n          inline: inline ? undefined : false,\n          error: !inline && isError,\n        })\n      )}\n    >\n      {showSuccess ? (\n        <Icon\n          size={'xs'}\n          state={'success'}\n          name={'check'}\n        />\n      ) : (\n        <Icon\n          name={'document'}\n          className={cn(documentIconVariants({ size }))}\n        />\n      )}\n\n      <div className={cn(fileContentContainerVariants({ size }))}>\n        <div className={styles['file-details']}>\n          <MiddleTruncator text={fileName} />\n          {showProgress && !showSuccess && (\n            <Text className={styles.description}>{progress}%</Text>\n          )}\n        </div>\n\n        {isError && (\n          <Text className={cn(descriptionVariants({ error: true }))}>\n            {failureMessage}\n          </Text>\n        )}\n\n        {showProgress && !showSuccess && (\n          <div className={styles['progress-bar-wrapper']}>\n            <ProgressBar\n              progress={progress}\n              type={'small'}\n            />\n          </div>\n        )}\n\n        {showSuccess && (\n          <Text className={styles.description}>{formatFileSize(fileSize)}</Text>\n        )}\n      </div>\n\n      <div className={styles['file-actions']}>\n        {isError && onRetry && (\n          <IconButton\n            size={'sm'}\n            icon={'refresh'}\n            type={'ghost'}\n            onClick={onRetry}\n          />\n        )}\n        {onRemove && (\n          <IconButton\n            size={'sm'}\n            icon={'cross'}\n            type={'ghost'}\n            onClick={onRemove}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["fileItemContainerVariants","cva","styles","variants","inline","false","error","true","documentIconVariants","size","sm","md","descriptionVariants","description","fileContentContainerVariants","FileUploadItem","fileName","fileSize","progress","showSuccess","showProgress","failureMessage","onRetry","onRemove","isError","cn","undefined","Icon","formatFileSize"],"mappings":"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"}

package/dist/esm/components/FileUpload/FileUploadItem.module.css.js

@@ -0,0 +1,21 @@
+const description = "description__sjgXO";
+const description_error_true = "description_error_true__wbkov";
+const styles = {
+	"file-item-container": "file-item-container__86J-i",
+	"file-item-container_inline_false": "file-item-container_inline_false__QqJXZ",
+	"file-item-container_error_true": "file-item-container_error_true__uRfbn",
+	"document-icon": "document-icon__CX1O5",
+	"document-icon_size_sm": "document-icon_size_sm__sEIPl",
+	"document-icon_size_md": "document-icon_size_md__dqfzB",
+	description: description,
+	description_error_true: description_error_true,
+	"file-details": "file-details__aAMdx",
+	"file-actions": "file-actions__OUaMv",
+	"file-content-container": "file-content-container__40JkR",
+	"file-content-container_size_sm": "file-content-container_size_sm__8od-v",
+	"file-content-container_size_md": "file-content-container_size_md__U6Hwr",
+	"progress-bar-wrapper": "progress-bar-wrapper__q0i9x"
+};
+
+export { styles as default, description, description_error_true };
+//# sourceMappingURL=FileUploadItem.module.css.js.map

package/dist/esm/components/FileUpload/FileUploadItem.module.css.js.map

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

package/dist/esm/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/esm/components/FormContainer/Error.js

@@ -1,13 +1,12 @@
-import { styled } from 'styled-components';
+import "./Error.css";
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../lib/cva.js';
+import styles from './Error.module.css.js';
 
-const Error = 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__ */ jsx("div", { ...props, className: cn(styles.error, className) });
 
 export { Error };
 //# sourceMappingURL=Error.js.map

package/dist/esm/components/FormContainer/Error.js.map

@@ -1 +1 @@
-{"version":3,"file":"Error.js","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,MAAAA,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.js","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","cn","styles","error"],"mappings":";;;;AAIO,MAAMA,QAAQA,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAAW,GAAGC;AAAsC,CAAA,qBAC1E,GAAA,CAAC,SACC,GAAIA,KAAAA,EACJ,WAAWC,EAAAA,CAAGC,MAAAA,CAAOC,KAAAA,EAAOJ,SAAS,CAAA,EAAE;;;;"}

package/dist/esm/components/FormContainer/Error.module.css.js

@@ -0,0 +1,7 @@
+const error = "error__Wvrfq";
+const styles = {
+	error: error
+};
+
+export { styles as default, error };
+//# sourceMappingURL=Error.module.css.js.map

package/dist/esm/components/FormContainer/Error.module.css.js.map

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

package/dist/esm/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/esm/components/FormContainer/FormElementContainer.js

@@ -1,10 +1,12 @@
-import { styled } from 'styled-components';
+import "./FormElementContainer.css";
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../lib/cva.js';
+import styles from './FormElementContainer.module.css.js';
 
-const FormElementContainer = 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__ */ jsx("div", { ...props, className: cn(styles["form-element-container"], className) });
 
 export { FormElementContainer };
 //# sourceMappingURL=FormElementContainer.js.map

package/dist/esm/components/FormContainer/FormElementContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementContainer.js","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,MAAAA,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.js","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","cn","styles"],"mappings":";;;;AAIO,MAAMA,uBAAuBA,CAAC;AAAA,EACnCC,SAAAA;AAAAA,EACA,GAAGC;AAC2B,CAAA,qBAC9B,GAAA,CAAC,KAAA,EAAA,EACC,GAAIA,KAAAA,EACJ,SAAA,EAAWC,GAAGC,MAAAA,CAAO,wBAAwB,CAAA,EAAGH,SAAS,CAAA,EAAE;;;;"}

package/dist/esm/components/FormContainer/FormElementContainer.module.css.js

@@ -0,0 +1,6 @@
+const styles = {
+	"form-element-container": "form-element-container__cy-tb"
+};
+
+export { styles as default };
+//# sourceMappingURL=FormElementContainer.module.css.js.map

package/dist/esm/components/FormContainer/FormElementContainer.module.css.js.map

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

package/dist/esm/components/FormContainer/FormRoot.css

@@ -0,0 +1,33 @@
+.form-root__BT-Th {
+  display: flex;
+  width: 100%;
+  flex-direction: column-reverse;
+  align-items: flex-start;
+  gap: var(--click-field-space-gap);
+}
+
+.form-root__BT-Th * {
+  outline: none;
+  box-shadow: none;
+}
+
+.form-root_direction_column-reverse__CqP8o {
+  flex-direction: column-reverse;
+}
+
+.form-root_direction_column__1qZoL {
+  flex-direction: column;
+}
+
+.form-root_direction_row-reverse__TlRP3 {
+  flex-direction: row-reverse;
+}
+
+.form-root_direction_row__D172C {
+  flex-direction: row;
+}
+
+.form-root_add-label-padding__-HfgB label {
+  padding-top: calc(var(--click-field-space-y) + 1px);
+  line-height: 1lh;
+}

package/dist/esm/components/FormContainer/FormRoot.js

@@ -1,24 +1,38 @@
-import { styled } from 'styled-components';
+import "./FormRoot.css";
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../lib/cva.js';
+import styles from './FormRoot.module.css.js';
+import { cva } from 'class-variance-authority';
 
-const FormRoot = styled.div.withConfig({
-  componentId: "sc-hopzbg-0"
-})(["display:flex;width:100%;gap:", ";", " *{box-shadow:none;outline:none;}"], ({
-  theme
-}) => theme.click.field.space.gap, ({
-  theme,
+const formRootVariants = cva(styles["form-root"], {
+  variants: {
+    direction: {
+      "column-reverse": styles["form-root_direction_column-reverse"],
+      column: styles["form-root_direction_column"],
+      "row-reverse": styles["form-root_direction_row-reverse"],
+      row: styles["form-root_direction_row"]
+    },
+    addLabelPadding: {
+      true: styles["form-root_add-label-padding"],
+      false: ""
+    }
+  },
+  defaultVariants: {
+    direction: "column-reverse",
+    addLabelPadding: false
+  }
+});
+const getDirection = (orientation, dir) => orientation === "horizontal" ? dir === "start" ? "row-reverse" : "row" : dir === "start" ? "column-reverse" : "column";
+const FormRoot = ({
   $orientation = "vertical",
   $dir = "start",
-  $addLabelPadding = false
-}) => `
-    flex-direction: ${$orientation === "horizontal" ? $dir === "start" ? "row-reverse" : "row" : $dir === "start" ? "column-reverse" : "column"};
-    align-items: flex-start;
-    ${$addLabelPadding && $orientation === "horizontal" ? `
-    label {
-      padding-top: calc(${theme.click.field.space.y} + 1px);
-      line-height: 1lh;
-    }
-    ` : ""}
-  `);
+  $addLabelPadding = false,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { ...props, className: cn(formRootVariants({
+  direction: getDirection($orientation, $dir),
+  addLabelPadding: $addLabelPadding && $orientation === "horizontal"
+}), className) });
 
 export { FormRoot };
 //# sourceMappingURL=FormRoot.js.map

package/dist/esm/components/FormContainer/FormRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormRoot.js","sources":["../../../../src/components/FormContainer/FormRoot.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nexport const FormRoot = styled.div<{\n  $orientation?: 'horizontal' | 'vertical';\n  $dir?: 'start' | 'end';\n  $addLabelPadding?: boolean;\n}>`\n  display: flex;\n  width: 100%;\n  gap: ${({ theme }) => theme.click.field.space.gap};\n  ${({ theme, $orientation = 'vertical', $dir = 'start', $addLabelPadding = false }) => `\n    flex-direction: ${\n      $orientation === 'horizontal'\n        ? $dir === 'start'\n          ? 'row-reverse'\n          : 'row'\n        : $dir === 'start'\n          ? 'column-reverse'\n          : 'column'\n    };\n    align-items: flex-start;\n    ${\n      $addLabelPadding && $orientation === 'horizontal'\n        ? `\n    label {\n      padding-top: calc(${theme.click.field.space.y} + 1px);\n      line-height: 1lh;\n    }\n    `\n        : ''\n    }\n  `}\n  * {\n    box-shadow: none;\n    outline: none;\n  }\n`;\n"],"names":["FormRoot","styled","div","withConfig","componentId","theme","click","field","space","gap","$orientation","$dir","$addLabelPadding","y"],"mappings":";;AAEO,MAAMA,QAAAA,GAAWC,MAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,EAAA,CAAA,8BAAA,EAAA,GAAA,EAAA,mCAAA,GAOzB,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,KAC5C,CAAC;AAAA,EAAEJ,KAAAA;AAAAA,EAAOK,YAAAA,GAAe,UAAA;AAAA,EAAYC,IAAAA,GAAO,OAAA;AAAA,EAASC,gBAAAA,GAAmB;AAAM,CAAA,KAAM;AAAA,oBAAA,EAElFF,YAAAA,KAAiB,eACbC,IAAAA,KAAS,OAAA,GACP,gBACA,KAAA,GACFA,IAAAA,KAAS,OAAA,GACP,gBAAA,GACA,QAAQ,CAAA;AAAA;AAAA,IAAA,EAIdC,gBAAAA,IAAoBF,iBAAiB,YAAA,GACjC;AAAA;AAAA,wBAAA,EAEgBL,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMK,CAAC,CAAA;AAAA;AAAA;AAAA,IAAA,CAAA,GAIzC,EAAE;AAAA,EAAA,CAET;;;;"}
+{"version":3,"file":"FormRoot.js","sources":["../../../../src/components/FormContainer/FormRoot.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './FormRoot.module.css';\n\nconst formRootVariants = cva(styles['form-root'], {\n  variants: {\n    direction: {\n      'column-reverse': styles['form-root_direction_column-reverse'],\n      column: styles['form-root_direction_column'],\n      'row-reverse': styles['form-root_direction_row-reverse'],\n      row: styles['form-root_direction_row'],\n    },\n    addLabelPadding: {\n      true: styles['form-root_add-label-padding'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    direction: 'column-reverse',\n    addLabelPadding: false,\n  },\n});\n\nexport interface FormRootProps extends HTMLAttributes<HTMLDivElement> {\n  $orientation?: 'horizontal' | 'vertical';\n  $dir?: 'start' | 'end';\n  $addLabelPadding?: boolean;\n}\n\nconst getDirection = (\n  orientation: 'horizontal' | 'vertical',\n  dir: 'start' | 'end'\n): 'column-reverse' | 'column' | 'row-reverse' | 'row' =>\n  orientation === 'horizontal'\n    ? dir === 'start'\n      ? 'row-reverse'\n      : 'row'\n    : dir === 'start'\n      ? 'column-reverse'\n      : 'column';\n\nexport const FormRoot = ({\n  $orientation = 'vertical',\n  $dir = 'start',\n  $addLabelPadding = false,\n  className,\n  ...props\n}: FormRootProps) => (\n  <div\n    {...props}\n    className={cn(\n      formRootVariants({\n        direction: getDirection($orientation, $dir),\n        addLabelPadding: $addLabelPadding && $orientation === 'horizontal',\n      }),\n      className\n    )}\n  />\n);\n"],"names":["formRootVariants","cva","styles","variants","direction","column","row","addLabelPadding","true","false","defaultVariants","getDirection","orientation","dir","FormRoot","$orientation","$dir","$addLabelPadding","className","props","cn"],"mappings":";;;;;AAIA,MAAMA,gBAAAA,GAAmBC,GAAAA,CAAIC,MAAAA,CAAO,WAAW,CAAA,EAAG;AAAA,EAChDC,QAAAA,EAAU;AAAA,IACRC,SAAAA,EAAW;AAAA,MACT,gBAAA,EAAkBF,OAAO,oCAAoC,CAAA;AAAA,MAC7DG,MAAAA,EAAQH,OAAO,4BAA4B,CAAA;AAAA,MAC3C,aAAA,EAAeA,OAAO,iCAAiC,CAAA;AAAA,MACvDI,GAAAA,EAAKJ,OAAO,yBAAyB;AAAA,KACvC;AAAA,IACAK,eAAAA,EAAiB;AAAA,MACfC,IAAAA,EAAMN,OAAO,6BAA6B,CAAA;AAAA,MAC1CO,KAAAA,EAAO;AAAA;AACT,GACF;AAAA,EACAC,eAAAA,EAAiB;AAAA,IACfN,SAAAA,EAAW,gBAAA;AAAA,IACXG,eAAAA,EAAiB;AAAA;AAErB,CAAC,CAAA;AAQD,MAAMI,YAAAA,GAAeA,CACnBC,WAAAA,EACAC,GAAAA,KAEAD,WAAAA,KAAgB,YAAA,GACZC,GAAAA,KAAQ,OAAA,GACN,aAAA,GACA,KAAA,GACFA,GAAAA,KAAQ,OAAA,GACN,gBAAA,GACA,QAAA;AAED,MAAMC,WAAWA,CAAC;AAAA,EACvBC,YAAAA,GAAe,UAAA;AAAA,EACfC,IAAAA,GAAO,OAAA;AAAA,EACPC,gBAAAA,GAAmB,KAAA;AAAA,EACnBC,SAAAA;AAAAA,EACA,GAAGC;AACU,CAAA,yBACZ,KAAA,EAAA,EACC,GAAIA,KAAAA,EACJ,SAAA,EAAWC,GACTpB,gBAAAA,CAAiB;AAAA,EACfI,SAAAA,EAAWO,YAAAA,CAAaI,YAAAA,EAAcC,IAAI,CAAA;AAAA,EAC1CT,eAAAA,EAAiBU,oBAAoBF,YAAAA,KAAiB;AACxD,CAAC,CAAA,EACDG,SACF,CAAA,EAAE;;;;"}

package/dist/esm/components/FormContainer/FormRoot.module.css.js

@@ -0,0 +1,11 @@
+const styles = {
+	"form-root": "form-root__BT-Th",
+	"form-root_direction_column-reverse": "form-root_direction_column-reverse__CqP8o",
+	"form-root_direction_column": "form-root_direction_column__1qZoL",
+	"form-root_direction_row-reverse": "form-root_direction_row-reverse__TlRP3",
+	"form-root_direction_row": "form-root_direction_row__D172C",
+	"form-root_add-label-padding": "form-root_add-label-padding__-HfgB"
+};
+
+export { styles as default };
+//# sourceMappingURL=FormRoot.module.css.js.map

package/dist/esm/components/FormContainer/FormRoot.module.css.js.map

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

package/dist/esm/components/GridCenter/GridCenter.css

@@ -0,0 +1,6 @@
+.grid-center__DYdT1 {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  place-items: center;
+}

package/dist/esm/components/GridContainer/GridContainer.css

@@ -0,0 +1,71 @@
+.grid-container__u1yIf {
+  /* These custom properties are only emitted inline when the matching prop is
+     set (grid-auto-columns, grid-auto-flow, grid-auto-rows, grid-template-area,
+     grid-template-columns, grid-template-rows, max-width, min-width, height,
+     max-height, min-height, overflow). Custom properties inherit by default, so
+     without this reset a nested GridContainer would inherit an ancestor's
+     value. Resetting to `initial` makes each consuming declaration fall back to
+     its own default (the second arg of `var()`) when the prop is unset,
+     reproducing the per-instance scoping that styled-components gave for free.
+     `--grid-container-gap` is included for the same reason: without resetting it
+     to `initial`, a nested GridContainer would inherit an ancestor's gap token
+     instead of letting `var(--grid-container-gap, inherit)` fall back to
+     `inherit` per-element (the styled-components source used a direct
+     `gap: inherit`). `column-gap`/`row-gap` are not in this set: they are
+     emitted inline as real longhand properties (not custom properties), so
+     there are no `--grid-container-*-gap` vars to reset. */
+  --grid-container-gap: initial;
+  --grid-container-auto-columns: initial;
+  --grid-container-auto-flow: initial;
+  --grid-container-auto-rows: initial;
+  --grid-container-template-area: initial;
+  --grid-container-template-columns: initial;
+  --grid-container-template-rows: initial;
+  --grid-container-max-width: initial;
+  --grid-container-min-width: initial;
+  --grid-container-height: initial;
+  --grid-container-max-height: initial;
+  --grid-container-min-height: initial;
+  --grid-container-overflow: initial;
+  display: var(--grid-container-display, grid);
+  width: var(--grid-container-width, 100%);
+  min-width: var(--grid-container-min-width);
+  max-width: var(--grid-container-max-width);
+  height: var(--grid-container-height);
+  min-height: var(--grid-container-min-height);
+  max-height: var(--grid-container-max-height);
+  overflow: var(--grid-container-overflow);
+  /* stylelint-disable declaration-block-no-redundant-longhand-properties -- align/justify axes are set independently from distinct props, so the place-content/place-items shorthands can't be used */
+  justify-content: var(--grid-container-justify-content, stretch);
+  align-items: var(--grid-container-align-items, stretch);
+  align-content: var(--grid-container-align-content, stretch);
+  /* `gap` is always emitted; `column-gap`/`row-gap` are emitted inline (as real
+     longhands) only when their props are set, so they override this shorthand
+     just like the styled-components source did — and stay absent otherwise. */
+  gap: var(--grid-container-gap, inherit);
+  grid-template-columns: var(--grid-container-template-columns);
+  grid-template-rows: var(--grid-container-template-rows);
+  grid-auto-columns: var(--grid-container-auto-columns);
+  grid-auto-flow: var(--grid-container-auto-flow);
+  grid-auto-rows: var(--grid-container-auto-rows);
+  /* stylelint-disable-next-line property-no-unknown -- the styled-components original emitted `grid-template-area` (singular, invalid); preserved verbatim for byte-for-byte parity */
+  grid-template-area: var(--grid-container-template-area);
+  justify-items: var(--grid-container-justify-items, stretch);
+  /* stylelint-enable declaration-block-no-redundant-longhand-properties */
+}
+
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation required for browser compatibility per .browserslistrc */
+@media (max-width: 768px) {
+  .grid-container_responsive__3-8Xh {
+    grid-template-columns: 1fr;
+  }
+
+  /* When NOT responsive, the styled-components source applied
+     `grid-template-columns: ${$gridTemplateColumns || 'auto'}` at the md
+     breakpoint — i.e. the explicit template when one was passed, otherwise
+     `auto`. The `--grid-container-template-columns` var is set inline only when
+     the prop is provided, so the `auto` fallback reproduces that exactly. */
+  .grid-container_not-responsive__Qqhg3 {
+    grid-template-columns: var(--grid-container-template-columns, auto);
+  }
+}

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

@@ -0,0 +1,8 @@
+const styles = {
+	"grid-container": "grid-container__u1yIf",
+	"grid-container_responsive": "grid-container_responsive__3-8Xh",
+	"grid-container_not-responsive": "grid-container_not-responsive__Qqhg3"
+};
+
+export { styles as default };
+//# sourceMappingURL=GridContainer.module.css.js.map

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

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