@punkbit/cui 0.0.251-rc.16 → 0.2.0

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

@@ -0,0 +1,72 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { FileUploadArea } from './FileUploadArea.js';
+import { FileUploadItem } from './FileUploadItem.js';
+import { useDragAndDrop } from './useDragAndDrop.js';
+
+const FileUpload = ({
+  title,
+  supportedFileTypes = [".txt", ".sql"],
+  size = "sm",
+  onFileSelect,
+  onRetry,
+  progress = 0,
+  failureMessage = "Upload failed",
+  showProgress = false,
+  showSuccess = false,
+  onFileFailure,
+  onFileClose
+}) => {
+  const [file, setFile] = useState(null);
+  const handleFilesProcessed = useCallback((files) => {
+    const selectedFile = files[0];
+    const newFile = {
+      name: selectedFile.name,
+      size: selectedFile.size
+    };
+    setFile(newFile);
+    if (onFileSelect) {
+      onFileSelect(selectedFile);
+    }
+  }, [onFileSelect]);
+  const {
+    isDragging,
+    isNotSupported,
+    fileInputRef,
+    handleDragEnter,
+    handleDragLeave,
+    handleDragOver,
+    handleDrop,
+    handleFileSelect,
+    handleBrowseClick
+  } = useDragAndDrop({
+    onFilesProcessed: handleFilesProcessed,
+    supportedFileTypes,
+    onFileFailure,
+    multiple: false
+  });
+  const handleRemoveFile = useCallback(() => {
+    setFile(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+    if (onFileClose) {
+      onFileClose();
+    }
+  }, [onFileClose, fileInputRef]);
+  const handleRetryUpload = useCallback(() => {
+    if (onRetry) {
+      onRetry();
+    }
+  }, [onRetry]);
+  const acceptedFileTypes = supportedFileTypes.join(",");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(FileUploadArea, { title, supportedFileTypes, size, isDragging, isNotSupported, hasFile: !!file, isError: !!file && !showSuccess && !showProgress, multiple: false, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleBrowseClick, children: file && /* @__PURE__ */ jsx(FileUploadItem, { fileName: file.name, fileSize: file.size, progress, showSuccess, showProgress, failureMessage, onRetry: handleRetryUpload, onRemove: handleRemoveFile, size, inline: true }) }),
+    /* @__PURE__ */ jsx("input", { type: "file", ref: fileInputRef, accept: acceptedFileTypes, onChange: handleFileSelect, style: {
+      display: "none"
+    } })
+  ] });
+};
+
+export { FileUpload };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/FileUpload/FileUpload.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { FileUploadArea } from './FileUploadArea';\nimport { FileUploadItem } from './FileUploadItem';\nimport { useDragAndDrop } from './useDragAndDrop';\n\ninterface FileInfo {\n  name: string;\n  size: number;\n}\n\nexport interface FileUploadProps {\n  /** The title text displayed in the upload area */\n  title: string;\n  supportedFileTypes?: string[];\n  size?: 'sm' | 'md';\n  progress?: number;\n  showSuccess?: boolean;\n  showProgress?: boolean;\n  failureMessage?: string;\n  onRetry?: () => void;\n  onFileSelect?: (file: File) => void;\n  onFileFailure?: () => void;\n  onFileClose?: () => void;\n}\n\nexport const FileUpload = ({\n  title,\n  supportedFileTypes = ['.txt', '.sql'],\n  size = 'sm',\n  onFileSelect,\n  onRetry,\n  progress = 0,\n  failureMessage = 'Upload failed',\n  showProgress = false,\n  showSuccess = false,\n  onFileFailure,\n  onFileClose,\n}: FileUploadProps) => {\n  const [file, setFile] = useState<FileInfo | null>(null);\n\n  const handleFilesProcessed = useCallback(\n    (files: File[]) => {\n      const selectedFile = files[0];\n      const newFile: FileInfo = {\n        name: selectedFile.name,\n        size: selectedFile.size,\n      };\n\n      setFile(newFile);\n\n      if (onFileSelect) {\n        onFileSelect(selectedFile);\n      }\n    },\n    [onFileSelect]\n  );\n\n  const {\n    isDragging,\n    isNotSupported,\n    fileInputRef,\n    handleDragEnter,\n    handleDragLeave,\n    handleDragOver,\n    handleDrop,\n    handleFileSelect,\n    handleBrowseClick,\n  } = useDragAndDrop({\n    onFilesProcessed: handleFilesProcessed,\n    supportedFileTypes,\n    onFileFailure,\n    multiple: false,\n  });\n\n  const handleRemoveFile = useCallback(() => {\n    setFile(null);\n    if (fileInputRef.current) {\n      fileInputRef.current.value = '';\n    }\n\n    if (onFileClose) {\n      onFileClose();\n    }\n  }, [onFileClose, fileInputRef]);\n\n  const handleRetryUpload = useCallback(() => {\n    if (onRetry) {\n      onRetry();\n    }\n  }, [onRetry]);\n\n  const acceptedFileTypes = supportedFileTypes.join(',');\n\n  return (\n    <>\n      <FileUploadArea\n        title={title}\n        supportedFileTypes={supportedFileTypes}\n        size={size}\n        isDragging={isDragging}\n        isNotSupported={isNotSupported}\n        hasFile={!!file}\n        isError={!!file && !showSuccess && !showProgress}\n        multiple={false}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n        onClick={handleBrowseClick}\n      >\n        {file && (\n          <FileUploadItem\n            fileName={file.name}\n            fileSize={file.size}\n            progress={progress}\n            showSuccess={showSuccess}\n            showProgress={showProgress}\n            failureMessage={failureMessage}\n            onRetry={handleRetryUpload}\n            onRemove={handleRemoveFile}\n            size={size}\n            inline={true}\n          />\n        )}\n      </FileUploadArea>\n\n      <input\n        type=\"file\"\n        ref={fileInputRef}\n        accept={acceptedFileTypes}\n        onChange={handleFileSelect}\n        style={{ display: 'none' }}\n      />\n    </>\n  );\n};\n"],"names":["FileUpload","title","supportedFileTypes","size","onFileSelect","onRetry","progress","failureMessage","showProgress","showSuccess","onFileFailure","onFileClose","file","setFile","useState","handleFilesProcessed","useCallback","files","selectedFile","newFile","name","isDragging","isNotSupported","fileInputRef","handleDragEnter","handleDragLeave","handleDragOver","handleDrop","handleFileSelect","handleBrowseClick","useDragAndDrop","onFilesProcessed","multiple","handleRemoveFile","current","value","handleRetryUpload","acceptedFileTypes","join","display"],"mappings":"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"}

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

@@ -0,0 +1,122 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+const isFiletypeSupported = (filename, supportedTypes) => {
+  if (!supportedTypes.length) {
+    return true;
+  }
+  const extension = filename.toLowerCase().slice(filename.lastIndexOf("."));
+  return supportedTypes.some((type) => type.toLowerCase() === extension.toLowerCase());
+};
+const useDragAndDrop = ({
+  onFilesProcessed,
+  supportedFileTypes,
+  onFileFailure,
+  multiple = false
+}) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const [isNotSupported, setIsNotSupported] = useState(false);
+  const fileInputRef = useRef(null);
+  const dragCounterRef = useRef(0);
+  useEffect(() => {
+    let timeoutId;
+    if (isNotSupported) {
+      timeoutId = setTimeout(() => {
+        setIsNotSupported(false);
+      }, 2e3);
+    }
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [isNotSupported]);
+  const handleDragEnter = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current += 1;
+    setIsDragging(true);
+  }, []);
+  const handleDragLeave = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current -= 1;
+    if (dragCounterRef.current <= 0) {
+      setIsDragging(false);
+      dragCounterRef.current = 0;
+    }
+  }, []);
+  const handleDragOver = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  useEffect(() => {
+    const handleDragEnd = () => {
+      setIsDragging(false);
+      dragCounterRef.current = 0;
+    };
+    window.addEventListener("dragend", handleDragEnd);
+    document.addEventListener("drop", handleDragEnd);
+    document.addEventListener("mouseleave", handleDragEnd);
+    return () => {
+      window.removeEventListener("dragend", handleDragEnd);
+      document.removeEventListener("drop", handleDragEnd);
+      document.removeEventListener("mouseleave", handleDragEnd);
+    };
+  }, []);
+  const processFiles = useCallback((files) => {
+    const validFiles = [];
+    let hasInvalidFile = false;
+    files.forEach((file) => {
+      if (isFiletypeSupported(file.name, supportedFileTypes)) {
+        validFiles.push(file);
+      } else {
+        hasInvalidFile = true;
+      }
+    });
+    if (hasInvalidFile) {
+      setIsNotSupported(true);
+      if (onFileFailure) {
+        onFileFailure();
+      }
+    }
+    if (validFiles.length > 0) {
+      setIsNotSupported(false);
+      onFilesProcessed(validFiles);
+    }
+  }, [onFilesProcessed, supportedFileTypes, onFileFailure]);
+  const handleDrop = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    dragCounterRef.current = 0;
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      const files = Array.from(e.dataTransfer.files);
+      processFiles(multiple ? files : [files[0]]);
+    }
+  }, [processFiles, multiple]);
+  const handleFileSelect = useCallback((e) => {
+    if (e.target.files && e.target.files.length > 0) {
+      const files = Array.from(e.target.files);
+      processFiles(files);
+    }
+  }, [processFiles]);
+  const handleBrowseClick = useCallback(() => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }, []);
+  return {
+    isDragging,
+    isNotSupported,
+    fileInputRef,
+    handleDragEnter,
+    handleDragLeave,
+    handleDragOver,
+    handleDrop,
+    handleFileSelect,
+    handleBrowseClick
+  };
+};
+
+export { useDragAndDrop };
+//# sourceMappingURL=useDragAndDrop.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDragAndDrop.js","sources":["../../../../src/components/FileUpload/useDragAndDrop.ts"],"sourcesContent":["import {\n  useState,\n  useRef,\n  useCallback,\n  useEffect,\n  type DragEvent,\n  type RefObject,\n  type ChangeEvent,\n} from 'react';\n\nexport interface UseDragAndDropOptions {\n  onFilesProcessed: (files: File[]) => void;\n  supportedFileTypes: string[];\n  onFileFailure?: () => void;\n  multiple?: boolean;\n}\n\nexport interface UseDragAndDropReturn {\n  isDragging: boolean;\n  isNotSupported: boolean;\n  fileInputRef: RefObject<HTMLInputElement>;\n  handleDragEnter: (e: DragEvent<HTMLDivElement>) => void;\n  handleDragLeave: (e: DragEvent<HTMLDivElement>) => void;\n  handleDragOver: (e: DragEvent<HTMLDivElement>) => void;\n  handleDrop: (e: DragEvent<HTMLDivElement>) => void;\n  handleFileSelect: (e: ChangeEvent<HTMLInputElement>) => void;\n  handleBrowseClick: () => void;\n}\n\nconst isFiletypeSupported = (filename: string, supportedTypes: string[]): boolean => {\n  if (!supportedTypes.length) {\n    return true;\n  }\n\n  const extension = filename.toLowerCase().slice(filename.lastIndexOf('.'));\n  return supportedTypes.some(type => type.toLowerCase() === extension.toLowerCase());\n};\n\nexport const useDragAndDrop = ({\n  onFilesProcessed,\n  supportedFileTypes,\n  onFileFailure,\n  multiple = false,\n}: UseDragAndDropOptions): UseDragAndDropReturn => {\n  const [isDragging, setIsDragging] = useState(false);\n  const [isNotSupported, setIsNotSupported] = useState(false);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const dragCounterRef = useRef(0);\n\n  useEffect(() => {\n    let timeoutId: NodeJS.Timeout;\n    if (isNotSupported) {\n      timeoutId = setTimeout(() => {\n        setIsNotSupported(false);\n      }, 2000);\n    }\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  }, [isNotSupported]);\n\n  const handleDragEnter = useCallback((e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    dragCounterRef.current += 1;\n    setIsDragging(true);\n  }, []);\n\n  const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n\n    dragCounterRef.current -= 1;\n\n    // Only set to false when left the container\n    if (dragCounterRef.current <= 0) {\n      setIsDragging(false);\n      dragCounterRef.current = 0;\n    }\n  }, []);\n\n  const handleDragOver = useCallback((e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n  }, []);\n\n  // Reset state when drag ends anywhere in the document\n  useEffect(() => {\n    const handleDragEnd = () => {\n      setIsDragging(false);\n      dragCounterRef.current = 0;\n    };\n\n    window.addEventListener('dragend', handleDragEnd);\n    document.addEventListener('drop', handleDragEnd);\n    document.addEventListener('mouseleave', handleDragEnd);\n\n    return () => {\n      window.removeEventListener('dragend', handleDragEnd);\n      document.removeEventListener('drop', handleDragEnd);\n      document.removeEventListener('mouseleave', handleDragEnd);\n    };\n  }, []);\n\n  const processFiles = useCallback(\n    (files: File[]) => {\n      const validFiles: File[] = [];\n      let hasInvalidFile = false;\n\n      files.forEach(file => {\n        if (isFiletypeSupported(file.name, supportedFileTypes)) {\n          validFiles.push(file);\n        } else {\n          hasInvalidFile = true;\n        }\n      });\n\n      if (hasInvalidFile) {\n        setIsNotSupported(true);\n        if (onFileFailure) {\n          onFileFailure();\n        }\n      }\n\n      if (validFiles.length > 0) {\n        setIsNotSupported(false);\n        onFilesProcessed(validFiles);\n      }\n    },\n    [onFilesProcessed, supportedFileTypes, onFileFailure]\n  );\n\n  const handleDrop = useCallback(\n    (e: DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsDragging(false);\n      dragCounterRef.current = 0;\n\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n        const files = Array.from(e.dataTransfer.files);\n        processFiles(multiple ? files : [files[0]]);\n      }\n    },\n    [processFiles, multiple]\n  );\n\n  const handleFileSelect = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files && e.target.files.length > 0) {\n        const files = Array.from(e.target.files);\n        processFiles(files);\n      }\n    },\n    [processFiles]\n  );\n\n  const handleBrowseClick = useCallback(() => {\n    if (fileInputRef.current) {\n      fileInputRef.current.click();\n    }\n  }, []);\n\n  return {\n    isDragging,\n    isNotSupported,\n    fileInputRef,\n    handleDragEnter,\n    handleDragLeave,\n    handleDragOver,\n    handleDrop,\n    handleFileSelect,\n    handleBrowseClick,\n  };\n};\n"],"names":["isFiletypeSupported","filename","supportedTypes","length","extension","toLowerCase","slice","lastIndexOf","some","type","useDragAndDrop","onFilesProcessed","supportedFileTypes","onFileFailure","multiple","isDragging","setIsDragging","useState","isNotSupported","setIsNotSupported","fileInputRef","useRef","dragCounterRef","useEffect","timeoutId","setTimeout","clearTimeout","handleDragEnter","useCallback","e","preventDefault","stopPropagation","current","handleDragLeave","handleDragOver","handleDragEnd","window","addEventListener","document","removeEventListener","processFiles","files","validFiles","hasInvalidFile","forEach","file","name","push","handleDrop","dataTransfer","Array","from","handleFileSelect","target","handleBrowseClick","click"],"mappings":"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"}

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

@@ -0,0 +1,239 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Dialog, DialogContent, DialogTitle, DialogDescription, DialogTrigger, DialogPortal, DialogOverlay, DialogClose } from '@radix-ui/react-dialog';
+import { styled, keyframes } from 'styled-components';
+import { CrossButton } from '../CrossButton/index.js';
+import { Container } from '../Container/index.js';
+import { CodeBlock } from '../CodeBlock/index.js';
+import { Icon as SvgImage } from '../Icon/index.js';
+import { Separator } from '../Separator/index.js';
+import { Button } from '../Button/index.js';
+import { Spacer } from '../Spacer/index.js';
+
+const Flyout = ({
+  modal = false,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(Dialog, { modal, ...props });
+};
+const Trigger = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { ...props, children }) });
+};
+Trigger.displayName = "Flyout.Trigger";
+Flyout.Trigger = Trigger;
+const animationWidth = () => keyframes({
+  from: {
+    width: 0
+  },
+  to: {
+    width: "fit-content"
+  }
+});
+const FlyoutContent = styled(DialogContent).withConfig({
+  componentId: "sc-1noqpag-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
+}) => `
+    ${$align === "start" ? "left" : "right"}: 0;
+    max-width: 100%;
+    position: ${$strategy};
+    height: ${$strategy === "relative" ? "100%" : "auto"};
+    padding: 0 ${theme.click.flyout.space[$type].x}
+    gap: ${theme.click.flyout.space[$type].gap};
+    box-shadow: ${$align === "start" ? theme.click.flyout.shadow.reverse : theme.click.flyout.shadow.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 = styled.div.withConfig({
+  componentId: "sc-1noqpag-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,
+  type = "default",
+  closeOnInteractOutside = false,
+  width,
+  align = "end",
+  onInteractOutside,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(DialogPortal, { container, children: [
+    showOverlay && /* @__PURE__ */ jsx(DialogOverlay, { className: "DialogOverlay" }),
+    /* @__PURE__ */ jsx(FlyoutContent, { $size: size, $type: type, $strategy: strategy, onInteractOutside: (e) => {
+      if (!closeOnInteractOutside) {
+        e.preventDefault();
+      }
+      if (typeof onInteractOutside === "function") {
+        onInteractOutside(e);
+      }
+    }, $width: width, $align: align, ...props, children })
+  ] });
+};
+Content.displayName = "Flyout.Content";
+Flyout.Content = Content;
+const FlyoutElement = styled(Container).withConfig({
+  componentId: "sc-1noqpag-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 Element = ({
+  type,
+  ...props
+}) => /* @__PURE__ */ jsx(FlyoutElement, { orientation: "vertical", padding: "none", gap: "none", $type: type, ...props });
+Element.displayName = "Flyout.Element";
+Flyout.Element = Element;
+const FlyoutHeaderContainer = styled(Container).withConfig({
+  componentId: "sc-1noqpag-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 = styled(DialogTitle).withConfig({
+  componentId: "sc-1noqpag-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 = styled(DialogDescription).withConfig({
+  componentId: "sc-1noqpag-5"
+})(["", ""], ({
+  theme,
+  $type = "default"
+}) => `
+    color: ${theme.click.flyout.color.description.default};
+    font: ${theme.click.flyout.typography[$type].description.default};
+    margin: 0;
+    padding: 0;
+  `);
+const Header = ({
+  title,
+  description,
+  type,
+  children,
+  showClose = true,
+  showSeparator = true,
+  ...props
+}) => {
+  if (children) {
+    return /* @__PURE__ */ jsxs(FlyoutContainer, { children: [
+      /* @__PURE__ */ jsxs(FlyoutHeaderContainer, { $type: type, justifyContent: "space-between", alignItems: "start", padding: "none", gap: "none", fillWidth: false, isResponsive: false, ...props, children: [
+        /* @__PURE__ */ jsx(Container, { padding: "none", gap: "none", orientation: "vertical", grow: "1", children }),
+        showClose && /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(CrossButton, { "data-testid": "flyout-header-close-btn", children: /* @__PURE__ */ jsx(SvgImage, { name: "cross", size: type === "inline" ? "md" : "lg" }) }) })
+      ] }),
+      showSeparator && /* @__PURE__ */ jsx(Separator, { "data-testid": "flyout-header-separator", size: "lg" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(FlyoutContainer, { children: [
+    /* @__PURE__ */ jsxs(FlyoutHeaderContainer, { $type: type, justifyContent: "space-between", alignItems: "start", fillWidth: false, isResponsive: false, ...props, children: [
+      /* @__PURE__ */ jsxs(Container, { padding: "none", gap: "none", orientation: "vertical", grow: "1", children: [
+        /* @__PURE__ */ jsx(FlyoutTitle, { $type: type, children: title }),
+        description && /* @__PURE__ */ jsx(FlyoutDescription, { $type: type, children: description })
+      ] }),
+      showClose && /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(CrossButton, { "data-testid": "flyout-header-close-btn", children: /* @__PURE__ */ jsx(SvgImage, { name: "cross", size: type === "inline" ? "md" : "lg" }) }) })
+    ] }),
+    showSeparator && /* @__PURE__ */ jsx(Separator, { "data-testid": "flyout-header-separator", size: "lg" })
+  ] });
+};
+Header.displayName = "Flyout.Header";
+Flyout.Header = Header;
+const FlyoutBody = styled(Container).withConfig({
+  componentId: "sc-1noqpag-6"
+})(["width:var(--flyout-width);max-width:100%;margin-top:", ";"], ({
+  $align = "default"
+}) => $align === "top" ? "-1rem" : 0);
+const Body = ({
+  align,
+  ...props
+}) => /* @__PURE__ */ jsx(FlyoutBody, { overflow: "auto", orientation: "vertical", grow: "1", $align: align, ...props });
+Body.displayName = "Flyout.Body";
+Flyout.Body = Body;
+const FlyoutFooter = styled(Container).withConfig({
+  componentId: "sc-1noqpag-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 FlyoutClose = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: children ?? /* @__PURE__ */ jsx(Button, { type: "secondary", ...props }) });
+};
+FlyoutClose.displayName = "Flyout.Close";
+Flyout.Close = FlyoutClose;
+const FooterContainer = styled(Container).withConfig({
+  componentId: "sc-1noqpag-8"
+})(["width:var(--flyout-width);max-width:100%;"]);
+const Footer = (props) => {
+  return /* @__PURE__ */ jsxs(FooterContainer, { gap: "none", orientation: "vertical", alignItems: "end", children: [
+    /* @__PURE__ */ jsx(Separator, { size: "xs" }),
+    /* @__PURE__ */ jsx(FlyoutFooter, { justifyContent: "end", gap: "none", padding: "none", isResponsive: false, wrap: "wrap", ...props })
+  ] });
+};
+Footer.displayName = "Flyout.Footer";
+Flyout.Footer = Footer;
+const CustomCodeBlock = styled(CodeBlock).withConfig({
+  componentId: "sc-1noqpag-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,
+  wrapLines,
+  showLineNumbers,
+  showWrapButton,
+  onCopy,
+  onCopyError,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(Element, { fillHeight: true, ...props, children: [
+    /* @__PURE__ */ jsx(CustomCodeBlock, { wrapLines, language, showLineNumbers, showWrapButton, onCopy, onCopyError, children: statement }),
+    /* @__PURE__ */ jsx(Spacer, { size: "xs" })
+  ] });
+};
+Flyout.CodeBlock = FlyoutCodeBlock;
+
+export { Flyout };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,13 @@
+import { styled } from 'styled-components';
+
+const Error = styled.div.withConfig({
+  componentId: "sc-1p44gei-0"
+})(["", ";"], ({
+  theme
+}) => `
+  font: ${theme.click.field.typography.label.error};
+  color: ${theme.click.field.color.label.error};
+`);
+
+export { Error };
+//# sourceMappingURL=Error.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,10 @@
+import { styled } from 'styled-components';
+
+const FormElementContainer = styled.div.withConfig({
+  componentId: "sc-b3fr9j-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);
+
+export { FormElementContainer };
+//# sourceMappingURL=FormElementContainer.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,24 @@
+import { styled } from 'styled-components';
+
+const FormRoot = styled.div.withConfig({
+  componentId: "sc-1fv67uv-0"
+})(["display:flex;width:100%;gap:", ";", " *{box-shadow:none;outline:none;}"], ({
+  theme
+}) => theme.click.field.space.gap, ({
+  theme,
+  $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;
+    }
+    ` : ""}
+  `);
+
+export { FormRoot };
+//# sourceMappingURL=FormRoot.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,25 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Error } from './Error.js';
+import { FormElementContainer } from './FormElementContainer.js';
+import { FormRoot } from './FormRoot.js';
+import { Label } from '../Label/index.js';
+
+const FormContainer = ({
+  id,
+  label,
+  orientation,
+  dir,
+  error,
+  children,
+  addLabelPadding,
+  ...props
+}) => /* @__PURE__ */ jsxs(FormRoot, { $orientation: orientation, $dir: dir, $addLabelPadding: addLabelPadding, ...props, children: [
+  /* @__PURE__ */ jsxs(FormElementContainer, { children: [
+    children,
+    !!error && error !== true && /* @__PURE__ */ jsx(Error, { children: error })
+  ] }),
+  label && /* @__PURE__ */ jsx(Label, { htmlFor: id, error: !!error, children: label })
+] });
+
+export { FormContainer };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/FormContainer/FormContainer.tsx"],"sourcesContent":["import { Error } from './Error';\nimport { FormElementContainer } from './FormElementContainer';\nimport { FormRoot } from './FormRoot';\nimport { Label } from '@/components/Label';\nimport { FormContainerProps } from './FormContainer.types';\n\nexport const FormContainer = ({\n  id,\n  label,\n  orientation,\n  dir,\n  error,\n  children,\n  addLabelPadding,\n  ...props\n}: FormContainerProps) => (\n  <FormRoot\n    $orientation={orientation}\n    $dir={dir}\n    $addLabelPadding={addLabelPadding}\n    {...props}\n  >\n    <FormElementContainer>\n      {children}\n      {!!error && error !== true && <Error>{error}</Error>}\n    </FormElementContainer>\n    {label && (\n      <Label\n        htmlFor={id}\n        error={!!error}\n      >\n        {label}\n      </Label>\n    )}\n  </FormRoot>\n);\n"],"names":["FormContainer","id","label","orientation","dir","error","children","addLabelPadding","props"],"mappings":";;;;;;AAMO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC,EAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,GAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACA,GAAGC;AACe,CAAA,qBAClB,IAAA,CAAC,YACC,YAAA,EAAcL,WAAAA,EACd,MAAMC,GAAAA,EACN,gBAAA,EAAkBG,eAAAA,EAClB,GAAIC,KAAAA,EAEJ,QAAA,EAAA;AAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EACEF,QAAAA,EAAAA;AAAAA,IAAAA,QAAAA;AAAAA,IACA,CAAC,CAACD,KAAAA,IAASA,UAAU,IAAA,oBAAQ,GAAA,CAAC,SAAOA,QAAAA,EAAAA,KAAAA,EAAM;AAAA,GAAA,EAC9C,CAAA;AAAA,EACCH,KAAAA,wBACE,KAAA,EAAA,EACC,OAAA,EAASD,IACT,KAAA,EAAO,CAAC,CAACI,KAAAA,EAERH,QAAAA,EAAAA,KAAAA,EACH;AAAA,CAAA,EAEJ;;;;"}