@raystack/apsara 0.38.0 → 0.39.0

package/dist/v1/components/dialog/dialog.cjs

@@ -6,23 +6,30 @@ var reactIcons_esm = require('../../node_modules/.pnpm/@radix-ui_react-icons@1.3
 var index$1 = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
 var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
 var React = require('react');
+var flex = require('../flex/flex.cjs');
 var dialog_module = require('./dialog.module.css.cjs');
 
 const dialogContent = index$1.cva(dialog_module.default.dialogContent);
-const DialogContent = React.forwardRef(({ className, children, ariaLabel, ariaDescription, overlayBlur = false, overlayClassName, overlayStyle, width, close, ...props }, ref) => (jsxRuntime.jsxRuntimeExports.jsxs(index.Portal, { children: [jsxRuntime.jsxRuntimeExports.jsx(index.Overlay, { className: clsx.clsx(dialog_module.default.dialogOverlay, overlayClassName, overlayBlur && dialog_module.default.overlayBlur), style: overlayStyle, "aria-hidden": "true", role: "presentation" }), jsxRuntime.jsxRuntimeExports.jsxs(index.Content, { ref: ref, className: dialogContent({ className }), style: { width, ...props.style }, "aria-label": ariaLabel, "aria-describedby": ariaDescription ? 'dialog-description' : undefined, ...props, children: [children, close && jsxRuntime.jsxRuntimeExports.jsx(CloseButton, {})] })] })));
+const DialogContent = React.forwardRef(({ className, children, ariaLabel, ariaDescription, overlayBlur = false, overlayClassName, overlayStyle, width, ...props }, ref) => (jsxRuntime.jsxRuntimeExports.jsxs(index.Portal, { children: [jsxRuntime.jsxRuntimeExports.jsx(index.Overlay, { className: clsx.clsx(dialog_module.default.dialogOverlay, overlayClassName, overlayBlur && dialog_module.default.overlayBlur), style: overlayStyle, "aria-hidden": "true", role: "presentation" }), jsxRuntime.jsxRuntimeExports.jsx(index.Content, { ref: ref, className: dialogContent({ className }), style: { width, ...props.style }, "aria-label": ariaLabel, "aria-describedby": ariaDescription ? "dialog-description" : undefined, ...props, children: children })] })));
 DialogContent.displayName = index.Content.displayName;
+const DialogHeader = ({ children, className, }) => (jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { justify: "between", align: "center", className: clsx.clsx(dialog_module.default.header, className), children: children }));
+const DialogFooter = ({ children, className, }) => (jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { gap: 5, justify: "end", className: clsx.clsx(dialog_module.default.footer, className), children: children }));
+const DialogBody = ({ children, className, }) => (jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { direction: "column", gap: 3, className: clsx.clsx(dialog_module.default.body, className), children: children }));
 function CloseButton({ children = jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.Cross1Icon, {}), className, ...props }) {
-    return (jsxRuntime.jsxRuntimeExports.jsx(index.Close, { className: dialog_module.default.close, "aria-label": "Close dialog", ...props, children: children }));
+    return (jsxRuntime.jsxRuntimeExports.jsx(index.Close, { className: clsx.clsx(dialog_module.default.close, className), "aria-label": "Close dialog", ...props, children: children }));
 }
-function DialogTitle({ children, ...props }) {
-    return (jsxRuntime.jsxRuntimeExports.jsx(index.Title, { ...props, role: "heading", "aria-level": 1, children: children }));
+function DialogTitle({ children, className, ...props }) {
+    return (jsxRuntime.jsxRuntimeExports.jsx(index.Title, { ...props, role: "heading", "aria-level": 1, className: clsx.clsx(dialog_module.default.title, className), children: children }));
 }
 function DialogDescription({ children, className, ...props }) {
-    return (jsxRuntime.jsxRuntimeExports.jsx(index.Description, { ...props, className: className, id: "dialog-description", role: "document", children: children }));
+    return (jsxRuntime.jsxRuntimeExports.jsx(index.Description, { ...props, className: clsx.clsx(dialog_module.default.description, className), id: "dialog-description", role: "document", children: children }));
 }
 const Dialog = Object.assign(index.Root, {
     Trigger: index.Trigger,
     Content: DialogContent,
+    Header: DialogHeader,
+    Footer: DialogFooter,
+    Body: DialogBody,
     Close: CloseButton,
     Title: DialogTitle,
     Description: DialogDescription,

package/dist/v1/components/dialog/dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.cjs","sources":["../../../../v1/components/dialog/dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport {\n  ComponentProps,\n  ComponentPropsWithoutRef,\n  ElementRef,\n  forwardRef,\n} from \"react\";\n\nimport styles from \"./dialog.module.css\";\n\nconst dialogContent = cva(styles.dialogContent);\n\nexport interface DialogContentProps\n  extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n    VariantProps<typeof dialogContent> {\n  ariaLabel?: string;\n  ariaDescription?: string;\n  overlayBlur?: boolean;\n  overlayClassName?: string;\n  overlayStyle?: React.CSSProperties;\n  width?: string | number;\n  close?: boolean;\n}\n\nconst DialogContent = forwardRef<\n  ElementRef<typeof DialogPrimitive.Content>,\n  DialogContentProps\n>(({ \n  className, \n  children, \n  ariaLabel, \n  ariaDescription, \n  overlayBlur = false, \n  overlayClassName,\n  overlayStyle,\n  width,\n  close,\n  ...props \n}, ref) => (\n  <DialogPrimitive.Portal>\n    <DialogPrimitive.Overlay \n      className={clsx(styles.dialogOverlay, overlayClassName, overlayBlur && styles.overlayBlur )}\n      style={overlayStyle}\n      aria-hidden=\"true\"\n      role=\"presentation\"\n    />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={dialogContent({ className })}\n      style={{ width, ...props.style }}\n      aria-label={ariaLabel}\n      aria-describedby={ariaDescription ? 'dialog-description' : undefined}\n      {...props}\n    >\n      {children}\n      {close && <CloseButton />}\n    </DialogPrimitive.Content>\n  </DialogPrimitive.Portal>\n));\n\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\ntype CloseButtonProps = ComponentProps<typeof DialogPrimitive.Close>;\nexport function CloseButton({\n  children = <Cross1Icon />,\n  className,\n  ...props\n}: CloseButtonProps) {\n  return (\n    <DialogPrimitive.Close \n      className={styles.close} \n      aria-label=\"Close dialog\"\n      {...props}\n    >\n      {children}\n    </DialogPrimitive.Close>\n  );\n}\n\ninterface DialogTitleProps extends ComponentProps<typeof DialogPrimitive.Title> {\n  children: React.ReactNode;\n}\n\nfunction DialogTitle({ children, ...props }: DialogTitleProps) {\n  return (\n    <DialogPrimitive.Title \n      {...props}\n      role=\"heading\"\n      aria-level={1}\n    >\n      {children}\n    </DialogPrimitive.Title>\n  );\n}\n\ninterface DialogDescriptionProps extends ComponentProps<typeof DialogPrimitive.Description> {\n  children: React.ReactNode;\n  className?: string;\n}\n\nfunction DialogDescription({ children, className, ...props }: DialogDescriptionProps) {\n  return (\n    <DialogPrimitive.Description \n      {...props}\n      className={className}\n      id=\"dialog-description\"\n      role=\"document\"\n    >\n      {children}\n    </DialogPrimitive.Description>\n  );\n}\n\nexport const Dialog = Object.assign(DialogPrimitive.Root, {\n  Trigger: DialogPrimitive.Trigger,\n  Content: DialogContent,\n  Close: CloseButton,\n  Title: DialogTitle,\n  Description: DialogDescription,\n}); "],"names":["cva","styles","forwardRef","_jsxs","DialogPrimitive.Portal","_jsx","DialogPrimitive.Overlay","clsx","DialogPrimitive.Content","Cross1Icon","DialogPrimitive.Close","DialogPrimitive.Title","DialogPrimitive.Description","DialogPrimitive.Root","DialogPrimitive.Trigger"],"mappings":";;;;;;;;;;AAaA,MAAM,aAAa,GAAGA,WAAG,CAACC,qBAAM,CAAC,aAAa,CAAC,CAAC;AAchD,MAAM,aAAa,GAAGC,gBAAU,CAG9B,CAAC,EACD,SAAS,EACT,QAAQ,EACR,SAAS,EACT,eAAe,EACf,WAAW,GAAG,KAAK,EACnB,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,KAAK,EACL,GAAG,KAAK,EACT,EAAE,GAAG,MACJC,iCAAA,CAACC,YAAsB,EAAA,EAAA,QAAA,EAAA,CACrBC,gCAAC,CAAAC,aAAuB,EACtB,EAAA,SAAS,EAAEC,SAAI,CAACN,qBAAM,CAAC,aAAa,EAAE,gBAAgB,EAAE,WAAW,IAAIA,qBAAM,CAAC,WAAW,CAAE,EAC3F,KAAK,EAAE,YAAY,EACP,aAAA,EAAA,MAAM,EAClB,IAAI,EAAC,cAAc,EACnB,CAAA,EACFE,iCAAC,CAAAK,aAAuB,EACtB,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC,EACvC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,EAAA,YAAA,EACpB,SAAS,EAAA,kBAAA,EACH,eAAe,GAAG,oBAAoB,GAAG,SAAS,EAAA,GAChE,KAAK,EAAA,QAAA,EAAA,CAER,QAAQ,EACR,KAAK,IAAIH,gCAAC,CAAA,WAAW,EAAG,EAAA,CAAA,CAAA,EAAA,CACD,CACH,EAAA,CAAA,CAC1B,CAAC,CAAC;AAEH,aAAa,CAAC,WAAW,GAAGG,aAAuB,CAAC,WAAW,CAAC;AAGhD,SAAA,WAAW,CAAC,EAC1B,QAAQ,GAAGH,gCAAA,CAACI,yBAAU,EAAA,EAAA,CAAG,EACzB,SAAS,EACT,GAAG,KAAK,EACS,EAAA;AACjB,IAAA,QACEJ,gCAAC,CAAAK,WAAqB,EAAA,EACpB,SAAS,EAAET,qBAAM,CAAC,KAAK,EAAA,YAAA,EACZ,cAAc,EACrB,GAAA,KAAK,YAER,QAAQ,EAAA,CACa,EACxB;AACJ,CAAC;AAMD,SAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAoB,EAAA;AAC3D,IAAA,QACEI,gCAAC,CAAAM,WAAqB,OAChB,KAAK,EACT,IAAI,EAAC,SAAS,EACF,YAAA,EAAA,CAAC,YAEZ,QAAQ,EAAA,CACa,EACxB;AACJ,CAAC;AAOD,SAAS,iBAAiB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAA0B,EAAA;IAClF,QACEN,iCAACO,iBAA2B,EACtB,EAAA,GAAA,KAAK,EACT,SAAS,EAAE,SAAS,EACpB,EAAE,EAAC,oBAAoB,EACvB,IAAI,EAAC,UAAU,EAEd,QAAA,EAAA,QAAQ,EACmB,CAAA,EAC9B;AACJ,CAAC;AAEY,MAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAACC,UAAoB,EAAE;IACxD,OAAO,EAAEC,aAAuB;AAChC,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,KAAK,EAAE,WAAW;AAClB,IAAA,KAAK,EAAE,WAAW;AAClB,IAAA,WAAW,EAAE,iBAAiB;AAC/B,CAAA;;;;;"}
+{"version":3,"file":"dialog.cjs","sources":["../../../../v1/components/dialog/dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport {\n  ComponentProps,\n  ComponentPropsWithoutRef,\n  ElementRef,\n  forwardRef,\n} from \"react\";\nimport { Flex } from \"../flex\";\n\nimport styles from \"./dialog.module.css\";\n\nconst dialogContent = cva(styles.dialogContent);\n\nexport interface DialogContentProps\n  extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n    VariantProps<typeof dialogContent> {\n  ariaLabel?: string;\n  ariaDescription?: string;\n  overlayBlur?: boolean;\n  overlayClassName?: string;\n  overlayStyle?: React.CSSProperties;\n  width?: string | number;\n}\n\nconst DialogContent = forwardRef<\n  ElementRef<typeof DialogPrimitive.Content>,\n  DialogContentProps\n>(\n  (\n    {\n      className,\n      children,\n      ariaLabel,\n      ariaDescription,\n      overlayBlur = false,\n      overlayClassName,\n      overlayStyle,\n      width,\n      ...props\n    },\n    ref\n  ) => (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Overlay\n        className={clsx(\n          styles.dialogOverlay,\n          overlayClassName,\n          overlayBlur && styles.overlayBlur\n        )}\n        style={overlayStyle}\n        aria-hidden=\"true\"\n        role=\"presentation\"\n      />\n      <DialogPrimitive.Content\n        ref={ref}\n        className={dialogContent({ className })}\n        style={{ width, ...props.style }}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescription ? \"dialog-description\" : undefined}\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  )\n);\n\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nconst DialogHeader = ({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) => (\n  <Flex\n    justify={\"between\"}\n    align={\"center\"}\n    className={clsx(styles.header, className)}\n  >\n    {children}\n  </Flex>\n);\n\nconst DialogFooter = ({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) => (\n  <Flex gap={5} justify=\"end\" className={clsx(styles.footer, className)}>\n    {children}\n  </Flex>\n);\n\nconst DialogBody = ({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) => (\n  <Flex direction=\"column\" gap={3} className={clsx(styles.body, className)}>\n    {children}\n  </Flex>\n);\n\ntype CloseButtonProps = ComponentProps<typeof DialogPrimitive.Close>;\nexport function CloseButton({\n  children = <Cross1Icon />,\n  className,\n  ...props\n}: CloseButtonProps) {\n  return (\n    <DialogPrimitive.Close\n      className={clsx(styles.close, className)}\n      aria-label=\"Close dialog\"\n      {...props}\n    >\n      {children}\n    </DialogPrimitive.Close>\n  );\n}\n\ninterface DialogTitleProps\n  extends ComponentProps<typeof DialogPrimitive.Title> {\n  children: React.ReactNode;\n}\n\nfunction DialogTitle({ children, className, ...props }: DialogTitleProps) {\n  return (\n    <DialogPrimitive.Title\n      {...props}\n      role=\"heading\"\n      aria-level={1}\n      className={clsx(styles.title, className)}\n    >\n      {children}\n    </DialogPrimitive.Title>\n  );\n}\n\ninterface DialogDescriptionProps\n  extends ComponentProps<typeof DialogPrimitive.Description> {\n  children: React.ReactNode;\n  className?: string;\n}\n\nfunction DialogDescription({\n  children,\n  className,\n  ...props\n}: DialogDescriptionProps) {\n  return (\n    <DialogPrimitive.Description\n      {...props}\n      className={clsx(styles.description, className)}\n      id=\"dialog-description\"\n      role=\"document\"\n    >\n      {children}\n    </DialogPrimitive.Description>\n  );\n}\n\nexport const Dialog = Object.assign(DialogPrimitive.Root, {\n  Trigger: DialogPrimitive.Trigger,\n  Content: DialogContent,\n  Header: DialogHeader,\n  Footer: DialogFooter,\n  Body: DialogBody,\n  Close: CloseButton,\n  Title: DialogTitle,\n  Description: DialogDescription,\n});\n"],"names":["cva","styles","forwardRef","_jsxs","DialogPrimitive.Portal","_jsx","DialogPrimitive.Overlay","clsx","DialogPrimitive.Content","Flex","Cross1Icon","DialogPrimitive.Close","DialogPrimitive.Title","DialogPrimitive.Description","DialogPrimitive.Root","DialogPrimitive.Trigger"],"mappings":"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"}

package/dist/v1/components/dialog/dialog.d.ts

@@ -9,14 +9,13 @@ export interface DialogContentProps extends ComponentPropsWithoutRef<typeof Dial
     overlayClassName?: string;
     overlayStyle?: React.CSSProperties;
     width?: string | number;
-    close?: boolean;
 }
 type CloseButtonProps = ComponentProps<typeof DialogPrimitive.Close>;
 export declare function CloseButton({ children, className, ...props }: CloseButtonProps): import("react/jsx-runtime").JSX.Element;
 interface DialogTitleProps extends ComponentProps<typeof DialogPrimitive.Title> {
     children: React.ReactNode;
 }
-declare function DialogTitle({ children, ...props }: DialogTitleProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogTitle({ children, className, ...props }: DialogTitleProps): import("react/jsx-runtime").JSX.Element;
 interface DialogDescriptionProps extends ComponentProps<typeof DialogPrimitive.Description> {
     children: React.ReactNode;
     className?: string;
@@ -25,6 +24,18 @@ declare function DialogDescription({ children, className, ...props }: DialogDesc
 export declare const Dialog: import("react").FC<DialogPrimitive.DialogProps> & {
     Trigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
     Content: import("react").ForwardRefExoticComponent<DialogContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Header: ({ children, className, }: {
+        children: React.ReactNode;
+        className?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ children, className, }: {
+        children: React.ReactNode;
+        className?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ children, className, }: {
+        children: React.ReactNode;
+        className?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
     Close: typeof CloseButton;
     Title: typeof DialogTitle;
     Description: typeof DialogDescription;

package/dist/v1/components/dialog/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../../v1/components/dialog/dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EACL,cAAc,EACd,wBAAwB,EAGzB,MAAM,OAAO,CAAC;AAIf,QAAA,MAAM,aAAa,yFAA4B,CAAC;AAEhD,MAAM,WAAW,kBACf,SAAQ,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EAC9D,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAwCD,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC;AACrE,wBAAgB,WAAW,CAAC,EAC1B,QAAyB,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAUlB;AAED,UAAU,gBAAiB,SAAQ,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC;IAC7E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAU5D;AAED,UAAU,sBAAuB,SAAQ,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC;IACzF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iBAAS,iBAAiB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAWnF;AAED,eAAO,MAAM,MAAM;;;;;;CAMjB,CAAC"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../../v1/components/dialog/dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EACL,cAAc,EACd,wBAAwB,EAGzB,MAAM,OAAO,CAAC;AAKf,QAAA,MAAM,aAAa,yFAA4B,CAAC;AAEhD,MAAM,WAAW,kBACf,SAAQ,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EAC9D,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAuFD,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC;AACrE,wBAAgB,WAAW,CAAC,EAC1B,QAAyB,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAUlB;AAED,UAAU,gBACR,SAAQ,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC;IACpD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAWvE;AAED,UAAU,sBACR,SAAQ,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iBAAS,iBAAiB,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAWxB;AAED,eAAO,MAAM,MAAM;;;;kBA9FP,MAAM,SAAS;;;;kBAgBf,MAAM,SAAS;;;;kBAYf,MAAM,SAAS;;;;;;CA2EzB,CAAC"}

package/dist/v1/components/dialog/dialog.js

@@ -1,26 +1,33 @@
 import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
-import { Portal as $5d3850c4d0b4e6c7$export$602eac185826482c, Overlay as $5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, Content as $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, Close as $5d3850c4d0b4e6c7$export$f39c2d165cd861fe, Root as $5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, Trigger as $5d3850c4d0b4e6c7$export$41fb9f06171c75f4, Title as $5d3850c4d0b4e6c7$export$f99233281efd08a0, Description as $5d3850c4d0b4e6c7$export$393edc798c47379d } from '../../node_modules/.pnpm/@radix-ui_react-dialog@1.0.4_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-dialog/dist/index.js';
+import { Portal as $5d3850c4d0b4e6c7$export$602eac185826482c, Overlay as $5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, Content as $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, Root as $5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, Trigger as $5d3850c4d0b4e6c7$export$41fb9f06171c75f4, Close as $5d3850c4d0b4e6c7$export$f39c2d165cd861fe, Title as $5d3850c4d0b4e6c7$export$f99233281efd08a0, Description as $5d3850c4d0b4e6c7$export$393edc798c47379d } from '../../node_modules/.pnpm/@radix-ui_react-dialog@1.0.4_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-dialog/dist/index.js';
 import { Cross1Icon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
 import { cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
 import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
 import { forwardRef } from 'react';
+import { Flex } from '../flex/flex.js';
 import styles from './dialog.module.css.js';
 
 const dialogContent = cva(styles.dialogContent);
-const DialogContent = forwardRef(({ className, children, ariaLabel, ariaDescription, overlayBlur = false, overlayClassName, overlayStyle, width, close, ...props }, ref) => (jsxRuntimeExports.jsxs($5d3850c4d0b4e6c7$export$602eac185826482c, { children: [jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, { className: clsx(styles.dialogOverlay, overlayClassName, overlayBlur && styles.overlayBlur), style: overlayStyle, "aria-hidden": "true", role: "presentation" }), jsxRuntimeExports.jsxs($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, { ref: ref, className: dialogContent({ className }), style: { width, ...props.style }, "aria-label": ariaLabel, "aria-describedby": ariaDescription ? 'dialog-description' : undefined, ...props, children: [children, close && jsxRuntimeExports.jsx(CloseButton, {})] })] })));
+const DialogContent = forwardRef(({ className, children, ariaLabel, ariaDescription, overlayBlur = false, overlayClassName, overlayStyle, width, ...props }, ref) => (jsxRuntimeExports.jsxs($5d3850c4d0b4e6c7$export$602eac185826482c, { children: [jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, { className: clsx(styles.dialogOverlay, overlayClassName, overlayBlur && styles.overlayBlur), style: overlayStyle, "aria-hidden": "true", role: "presentation" }), jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, { ref: ref, className: dialogContent({ className }), style: { width, ...props.style }, "aria-label": ariaLabel, "aria-describedby": ariaDescription ? "dialog-description" : undefined, ...props, children: children })] })));
 DialogContent.displayName = $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2.displayName;
+const DialogHeader = ({ children, className, }) => (jsxRuntimeExports.jsx(Flex, { justify: "between", align: "center", className: clsx(styles.header, className), children: children }));
+const DialogFooter = ({ children, className, }) => (jsxRuntimeExports.jsx(Flex, { gap: 5, justify: "end", className: clsx(styles.footer, className), children: children }));
+const DialogBody = ({ children, className, }) => (jsxRuntimeExports.jsx(Flex, { direction: "column", gap: 3, className: clsx(styles.body, className), children: children }));
 function CloseButton({ children = jsxRuntimeExports.jsx(Cross1Icon, {}), className, ...props }) {
-    return (jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$f39c2d165cd861fe, { className: styles.close, "aria-label": "Close dialog", ...props, children: children }));
+    return (jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$f39c2d165cd861fe, { className: clsx(styles.close, className), "aria-label": "Close dialog", ...props, children: children }));
 }
-function DialogTitle({ children, ...props }) {
-    return (jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$f99233281efd08a0, { ...props, role: "heading", "aria-level": 1, children: children }));
+function DialogTitle({ children, className, ...props }) {
+    return (jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$f99233281efd08a0, { ...props, role: "heading", "aria-level": 1, className: clsx(styles.title, className), children: children }));
 }
 function DialogDescription({ children, className, ...props }) {
-    return (jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$393edc798c47379d, { ...props, className: className, id: "dialog-description", role: "document", children: children }));
+    return (jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$393edc798c47379d, { ...props, className: clsx(styles.description, className), id: "dialog-description", role: "document", children: children }));
 }
 const Dialog = Object.assign($5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, {
     Trigger: $5d3850c4d0b4e6c7$export$41fb9f06171c75f4,
     Content: DialogContent,
+    Header: DialogHeader,
+    Footer: DialogFooter,
+    Body: DialogBody,
     Close: CloseButton,
     Title: DialogTitle,
     Description: DialogDescription,

package/dist/v1/components/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sources":["../../../../v1/components/dialog/dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport {\n  ComponentProps,\n  ComponentPropsWithoutRef,\n  ElementRef,\n  forwardRef,\n} from \"react\";\n\nimport styles from \"./dialog.module.css\";\n\nconst dialogContent = cva(styles.dialogContent);\n\nexport interface DialogContentProps\n  extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n    VariantProps<typeof dialogContent> {\n  ariaLabel?: string;\n  ariaDescription?: string;\n  overlayBlur?: boolean;\n  overlayClassName?: string;\n  overlayStyle?: React.CSSProperties;\n  width?: string | number;\n  close?: boolean;\n}\n\nconst DialogContent = forwardRef<\n  ElementRef<typeof DialogPrimitive.Content>,\n  DialogContentProps\n>(({ \n  className, \n  children, \n  ariaLabel, \n  ariaDescription, \n  overlayBlur = false, \n  overlayClassName,\n  overlayStyle,\n  width,\n  close,\n  ...props \n}, ref) => (\n  <DialogPrimitive.Portal>\n    <DialogPrimitive.Overlay \n      className={clsx(styles.dialogOverlay, overlayClassName, overlayBlur && styles.overlayBlur )}\n      style={overlayStyle}\n      aria-hidden=\"true\"\n      role=\"presentation\"\n    />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={dialogContent({ className })}\n      style={{ width, ...props.style }}\n      aria-label={ariaLabel}\n      aria-describedby={ariaDescription ? 'dialog-description' : undefined}\n      {...props}\n    >\n      {children}\n      {close && <CloseButton />}\n    </DialogPrimitive.Content>\n  </DialogPrimitive.Portal>\n));\n\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\ntype CloseButtonProps = ComponentProps<typeof DialogPrimitive.Close>;\nexport function CloseButton({\n  children = <Cross1Icon />,\n  className,\n  ...props\n}: CloseButtonProps) {\n  return (\n    <DialogPrimitive.Close \n      className={styles.close} \n      aria-label=\"Close dialog\"\n      {...props}\n    >\n      {children}\n    </DialogPrimitive.Close>\n  );\n}\n\ninterface DialogTitleProps extends ComponentProps<typeof DialogPrimitive.Title> {\n  children: React.ReactNode;\n}\n\nfunction DialogTitle({ children, ...props }: DialogTitleProps) {\n  return (\n    <DialogPrimitive.Title \n      {...props}\n      role=\"heading\"\n      aria-level={1}\n    >\n      {children}\n    </DialogPrimitive.Title>\n  );\n}\n\ninterface DialogDescriptionProps extends ComponentProps<typeof DialogPrimitive.Description> {\n  children: React.ReactNode;\n  className?: string;\n}\n\nfunction DialogDescription({ children, className, ...props }: DialogDescriptionProps) {\n  return (\n    <DialogPrimitive.Description \n      {...props}\n      className={className}\n      id=\"dialog-description\"\n      role=\"document\"\n    >\n      {children}\n    </DialogPrimitive.Description>\n  );\n}\n\nexport const Dialog = Object.assign(DialogPrimitive.Root, {\n  Trigger: DialogPrimitive.Trigger,\n  Content: DialogContent,\n  Close: CloseButton,\n  Title: DialogTitle,\n  Description: DialogDescription,\n}); "],"names":["_jsxs","DialogPrimitive.Portal","_jsx","DialogPrimitive.Overlay","DialogPrimitive.Content","DialogPrimitive.Close","DialogPrimitive.Title","DialogPrimitive.Description","DialogPrimitive.Root","DialogPrimitive.Trigger"],"mappings":";;;;;;;;AAaA,MAAM,aAAa,GAAG,GAAG,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;AAchD,MAAM,aAAa,GAAG,UAAU,CAG9B,CAAC,EACD,SAAS,EACT,QAAQ,EACR,SAAS,EACT,eAAe,EACf,WAAW,GAAG,KAAK,EACnB,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,KAAK,EACL,GAAG,KAAK,EACT,EAAE,GAAG,MACJA,sBAAA,CAACC,yCAAsB,EAAA,EAAA,QAAA,EAAA,CACrBC,qBAAC,CAAAC,yCAAuB,EACtB,EAAA,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,gBAAgB,EAAE,WAAW,IAAI,MAAM,CAAC,WAAW,CAAE,EAC3F,KAAK,EAAE,YAAY,EACP,aAAA,EAAA,MAAM,EAClB,IAAI,EAAC,cAAc,EACnB,CAAA,EACFH,sBAAC,CAAAI,yCAAuB,EACtB,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC,EACvC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,EAAA,YAAA,EACpB,SAAS,EAAA,kBAAA,EACH,eAAe,GAAG,oBAAoB,GAAG,SAAS,EAAA,GAChE,KAAK,EAAA,QAAA,EAAA,CAER,QAAQ,EACR,KAAK,IAAIF,qBAAC,CAAA,WAAW,EAAG,EAAA,CAAA,CAAA,EAAA,CACD,CACH,EAAA,CAAA,CAC1B,CAAC,CAAC;AAEH,aAAa,CAAC,WAAW,GAAGE,yCAAuB,CAAC,WAAW,CAAC;AAGhD,SAAA,WAAW,CAAC,EAC1B,QAAQ,GAAGF,qBAAA,CAAC,UAAU,EAAA,EAAA,CAAG,EACzB,SAAS,EACT,GAAG,KAAK,EACS,EAAA;AACjB,IAAA,QACEA,qBAAC,CAAAG,yCAAqB,EAAA,EACpB,SAAS,EAAE,MAAM,CAAC,KAAK,EAAA,YAAA,EACZ,cAAc,EACrB,GAAA,KAAK,YAER,QAAQ,EAAA,CACa,EACxB;AACJ,CAAC;AAMD,SAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAoB,EAAA;AAC3D,IAAA,QACEH,qBAAC,CAAAI,yCAAqB,OAChB,KAAK,EACT,IAAI,EAAC,SAAS,EACF,YAAA,EAAA,CAAC,YAEZ,QAAQ,EAAA,CACa,EACxB;AACJ,CAAC;AAOD,SAAS,iBAAiB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAA0B,EAAA;IAClF,QACEJ,sBAACK,yCAA2B,EACtB,EAAA,GAAA,KAAK,EACT,SAAS,EAAE,SAAS,EACpB,EAAE,EAAC,oBAAoB,EACvB,IAAI,EAAC,UAAU,EAEd,QAAA,EAAA,QAAQ,EACmB,CAAA,EAC9B;AACJ,CAAC;AAEY,MAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAACC,yCAAoB,EAAE;IACxD,OAAO,EAAEC,yCAAuB;AAChC,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,KAAK,EAAE,WAAW;AAClB,IAAA,KAAK,EAAE,WAAW;AAClB,IAAA,WAAW,EAAE,iBAAiB;AAC/B,CAAA;;;;"}
+{"version":3,"file":"dialog.js","sources":["../../../../v1/components/dialog/dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport {\n  ComponentProps,\n  ComponentPropsWithoutRef,\n  ElementRef,\n  forwardRef,\n} from \"react\";\nimport { Flex } from \"../flex\";\n\nimport styles from \"./dialog.module.css\";\n\nconst dialogContent = cva(styles.dialogContent);\n\nexport interface DialogContentProps\n  extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n    VariantProps<typeof dialogContent> {\n  ariaLabel?: string;\n  ariaDescription?: string;\n  overlayBlur?: boolean;\n  overlayClassName?: string;\n  overlayStyle?: React.CSSProperties;\n  width?: string | number;\n}\n\nconst DialogContent = forwardRef<\n  ElementRef<typeof DialogPrimitive.Content>,\n  DialogContentProps\n>(\n  (\n    {\n      className,\n      children,\n      ariaLabel,\n      ariaDescription,\n      overlayBlur = false,\n      overlayClassName,\n      overlayStyle,\n      width,\n      ...props\n    },\n    ref\n  ) => (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Overlay\n        className={clsx(\n          styles.dialogOverlay,\n          overlayClassName,\n          overlayBlur && styles.overlayBlur\n        )}\n        style={overlayStyle}\n        aria-hidden=\"true\"\n        role=\"presentation\"\n      />\n      <DialogPrimitive.Content\n        ref={ref}\n        className={dialogContent({ className })}\n        style={{ width, ...props.style }}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescription ? \"dialog-description\" : undefined}\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  )\n);\n\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nconst DialogHeader = ({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) => (\n  <Flex\n    justify={\"between\"}\n    align={\"center\"}\n    className={clsx(styles.header, className)}\n  >\n    {children}\n  </Flex>\n);\n\nconst DialogFooter = ({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) => (\n  <Flex gap={5} justify=\"end\" className={clsx(styles.footer, className)}>\n    {children}\n  </Flex>\n);\n\nconst DialogBody = ({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) => (\n  <Flex direction=\"column\" gap={3} className={clsx(styles.body, className)}>\n    {children}\n  </Flex>\n);\n\ntype CloseButtonProps = ComponentProps<typeof DialogPrimitive.Close>;\nexport function CloseButton({\n  children = <Cross1Icon />,\n  className,\n  ...props\n}: CloseButtonProps) {\n  return (\n    <DialogPrimitive.Close\n      className={clsx(styles.close, className)}\n      aria-label=\"Close dialog\"\n      {...props}\n    >\n      {children}\n    </DialogPrimitive.Close>\n  );\n}\n\ninterface DialogTitleProps\n  extends ComponentProps<typeof DialogPrimitive.Title> {\n  children: React.ReactNode;\n}\n\nfunction DialogTitle({ children, className, ...props }: DialogTitleProps) {\n  return (\n    <DialogPrimitive.Title\n      {...props}\n      role=\"heading\"\n      aria-level={1}\n      className={clsx(styles.title, className)}\n    >\n      {children}\n    </DialogPrimitive.Title>\n  );\n}\n\ninterface DialogDescriptionProps\n  extends ComponentProps<typeof DialogPrimitive.Description> {\n  children: React.ReactNode;\n  className?: string;\n}\n\nfunction DialogDescription({\n  children,\n  className,\n  ...props\n}: DialogDescriptionProps) {\n  return (\n    <DialogPrimitive.Description\n      {...props}\n      className={clsx(styles.description, className)}\n      id=\"dialog-description\"\n      role=\"document\"\n    >\n      {children}\n    </DialogPrimitive.Description>\n  );\n}\n\nexport const Dialog = Object.assign(DialogPrimitive.Root, {\n  Trigger: DialogPrimitive.Trigger,\n  Content: DialogContent,\n  Header: DialogHeader,\n  Footer: DialogFooter,\n  Body: DialogBody,\n  Close: CloseButton,\n  Title: DialogTitle,\n  Description: DialogDescription,\n});\n"],"names":["_jsxs","DialogPrimitive.Portal","_jsx","DialogPrimitive.Overlay","DialogPrimitive.Content","DialogPrimitive.Close","DialogPrimitive.Title","DialogPrimitive.Description","DialogPrimitive.Root","DialogPrimitive.Trigger"],"mappings":"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"}

package/dist/v1/components/dialog/dialog.module.css.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"dialogOverlay":"dialog-module_dialogOverlay__gtTvA","dialogContent":"dialog-module_dialogContent__DvkhU","close":"dialog-module_close__g-6GW","overlayBlur":"dialog-module_overlayBlur__5363s","fadeIn":"dialog-module_fadeIn__Yyp5s","fadeOut":"dialog-module_fadeOut__H7gVW","overlay":"dialog-module_overlay__sppBT"};
+var styles = {"dialogOverlay":"dialog-module_dialogOverlay__gtTvA","dialogContent":"dialog-module_dialogContent__DvkhU","close":"dialog-module_close__g-6GW","overlayBlur":"dialog-module_overlayBlur__5363s","fadeIn":"dialog-module_fadeIn__Yyp5s","fadeOut":"dialog-module_fadeOut__H7gVW","overlay":"dialog-module_overlay__sppBT","header":"dialog-module_header__XyU4U","title":"dialog-module_title__vzaHe","body":"dialog-module_body__co0Jz","footer":"dialog-module_footer__qqC4q","description":"dialog-module_description__G1nfZ"};
 
 exports.default = styles;
 //# sourceMappingURL=dialog.module.css.cjs.map

package/dist/v1/components/dialog/dialog.module.css.js

@@ -1,4 +1,4 @@
-var styles = {"dialogOverlay":"dialog-module_dialogOverlay__gtTvA","dialogContent":"dialog-module_dialogContent__DvkhU","close":"dialog-module_close__g-6GW","overlayBlur":"dialog-module_overlayBlur__5363s","fadeIn":"dialog-module_fadeIn__Yyp5s","fadeOut":"dialog-module_fadeOut__H7gVW","overlay":"dialog-module_overlay__sppBT"};
+var styles = {"dialogOverlay":"dialog-module_dialogOverlay__gtTvA","dialogContent":"dialog-module_dialogContent__DvkhU","close":"dialog-module_close__g-6GW","overlayBlur":"dialog-module_overlayBlur__5363s","fadeIn":"dialog-module_fadeIn__Yyp5s","fadeOut":"dialog-module_fadeOut__H7gVW","overlay":"dialog-module_overlay__sppBT","header":"dialog-module_header__XyU4U","title":"dialog-module_title__vzaHe","body":"dialog-module_body__co0Jz","footer":"dialog-module_footer__qqC4q","description":"dialog-module_description__G1nfZ"};
 
 export { styles as default };
 //# sourceMappingURL=dialog.module.css.js.map

package/dist/v1/components/input-field/input-field.cjs

@@ -14,14 +14,19 @@ const inputWrapper = index.cva(inputField_module.default.inputWrapper, {
         size: {
             small: inputField_module.default["size-small"],
             large: inputField_module.default["size-large"],
+        },
+        variant: {
+            default: inputField_module.default["variant-default"],
+            borderless: inputField_module.default["variant-borderless"],
         }
     },
     defaultVariants: {
         size: "large",
+        variant: "default",
     }
 });
-const InputField = ({ className, disabled, label, helperText, placeholder, error, leadingIcon, trailingIcon, optional, prefix, suffix, width, chips, maxChipsVisible = 2, ref, size, infoTooltip, ...props }) => {
-    return (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: inputField_module.default.container, style: { width: width || '100%' }, children: [label && (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: inputField_module.default.labelContainer, children: [jsxRuntime.jsxRuntimeExports.jsxs("label", { className: clsx.clsx(inputField_module.default.label, disabled && inputField_module.default["label-disabled"]), children: [label, optional && jsxRuntime.jsxRuntimeExports.jsx("span", { className: inputField_module.default.optional, children: "(optional)" })] }), infoTooltip && (jsxRuntime.jsxRuntimeExports.jsx(tooltip.Tooltip, { message: infoTooltip, side: "right", children: jsxRuntime.jsxRuntimeExports.jsx("span", { className: inputField_module.default.helpIcon, children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.InfoCircledIcon, {}) }) }))] })), jsxRuntime.jsxRuntimeExports.jsxs("div", { className: clsx.clsx(inputWrapper({ size, className }), error && inputField_module.default['input-error-wrapper'], disabled && inputField_module.default['input-disabled-wrapper'], chips?.length && inputField_module.default['has-chips']), children: [leadingIcon && jsxRuntime.jsxRuntimeExports.jsx("div", { className: inputField_module.default['leading-icon'], children: leadingIcon }), prefix && jsxRuntime.jsxRuntimeExports.jsx("div", { className: inputField_module.default.prefix, children: prefix }), jsxRuntime.jsxRuntimeExports.jsxs("div", { className: inputField_module.default['chip-input-container'], children: [chips?.slice(0, maxChipsVisible).map((chip$1, index) => (jsxRuntime.jsxRuntimeExports.jsx(chip.Chip, { variant: "outline", isDismissible: !!chip$1.onRemove, onDismiss: chip$1.onRemove, className: inputField_module.default.chip, children: chip$1.label }, index))), chips && chips.length > maxChipsVisible && (jsxRuntime.jsxRuntimeExports.jsxs("span", { className: inputField_module.default['chip-overflow'], children: ["+", chips.length - maxChipsVisible] })), jsxRuntime.jsxRuntimeExports.jsx("input", { ref: ref, className: clsx.clsx(inputField_module.default['input-field'], leadingIcon && inputField_module.default['has-leading-icon'], trailingIcon && inputField_module.default['has-trailing-icon'], prefix && inputField_module.default['has-prefix'], suffix && inputField_module.default['has-suffix'], error && inputField_module.default['input-error'], disabled && inputField_module.default['input-disabled'], className), "aria-invalid": !!error, placeholder: placeholder, disabled: disabled, ...props })] }), suffix && jsxRuntime.jsxRuntimeExports.jsx("div", { className: inputField_module.default.suffix, children: suffix }), trailingIcon && jsxRuntime.jsxRuntimeExports.jsx("div", { className: inputField_module.default['trailing-icon'], children: trailingIcon })] }), (error || helperText) && (jsxRuntime.jsxRuntimeExports.jsx("span", { className: clsx.clsx(inputField_module.default['helper-text'], error && inputField_module.default['helper-text-error'], disabled && inputField_module.default['helper-text-disabled']), children: error || helperText }))] }));
+const InputField = ({ className, disabled, label, helperText, placeholder, error, leadingIcon, trailingIcon, optional, prefix, suffix, width, chips, maxChipsVisible = 2, ref, size, infoTooltip, variant = "default", ...props }) => {
+    return (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: inputField_module.default.container, style: { width: width || '100%' }, children: [label && (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: inputField_module.default.labelContainer, children: [jsxRuntime.jsxRuntimeExports.jsxs("label", { className: clsx.clsx(inputField_module.default.label, disabled && inputField_module.default["label-disabled"]), children: [label, optional && jsxRuntime.jsxRuntimeExports.jsx("span", { className: inputField_module.default.optional, children: "(optional)" })] }), infoTooltip && (jsxRuntime.jsxRuntimeExports.jsx(tooltip.Tooltip, { message: infoTooltip, side: "right", children: jsxRuntime.jsxRuntimeExports.jsx("span", { className: inputField_module.default.helpIcon, children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.InfoCircledIcon, {}) }) }))] })), jsxRuntime.jsxRuntimeExports.jsxs("div", { className: clsx.clsx(inputWrapper({ size, variant, className }), error && inputField_module.default['input-error-wrapper'], disabled && inputField_module.default['input-disabled-wrapper'], chips?.length && inputField_module.default['has-chips']), children: [leadingIcon && jsxRuntime.jsxRuntimeExports.jsx("div", { className: inputField_module.default['leading-icon'], children: leadingIcon }), prefix && jsxRuntime.jsxRuntimeExports.jsx("div", { className: inputField_module.default.prefix, children: prefix }), jsxRuntime.jsxRuntimeExports.jsxs("div", { className: inputField_module.default['chip-input-container'], children: [chips?.slice(0, maxChipsVisible).map((chip$1, index) => (jsxRuntime.jsxRuntimeExports.jsx(chip.Chip, { variant: "outline", isDismissible: !!chip$1.onRemove, onDismiss: chip$1.onRemove, className: inputField_module.default.chip, children: chip$1.label }, index))), chips && chips.length > maxChipsVisible && (jsxRuntime.jsxRuntimeExports.jsxs("span", { className: inputField_module.default['chip-overflow'], children: ["+", chips.length - maxChipsVisible] })), jsxRuntime.jsxRuntimeExports.jsx("input", { ref: ref, className: clsx.clsx(inputField_module.default['input-field'], leadingIcon && inputField_module.default['has-leading-icon'], trailingIcon && inputField_module.default['has-trailing-icon'], prefix && inputField_module.default['has-prefix'], suffix && inputField_module.default['has-suffix'], error && inputField_module.default['input-error'], disabled && inputField_module.default['input-disabled'], className), "aria-invalid": !!error, placeholder: placeholder, disabled: disabled, ...props })] }), suffix && jsxRuntime.jsxRuntimeExports.jsx("div", { className: inputField_module.default.suffix, children: suffix }), trailingIcon && jsxRuntime.jsxRuntimeExports.jsx("div", { className: inputField_module.default['trailing-icon'], children: trailingIcon })] }), (error || helperText) && (jsxRuntime.jsxRuntimeExports.jsx("span", { className: clsx.clsx(inputField_module.default['helper-text'], error && inputField_module.default['helper-text-error'], disabled && inputField_module.default['helper-text-disabled']), children: error || helperText }))] }));
 };
 InputField.displayName = "InputField";
 

package/dist/v1/components/input-field/input-field.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input-field.cjs","sources":["../../../../v1/components/input-field/input-field.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { InfoCircledIcon } from \"@radix-ui/react-icons\";\nimport { Tooltip } from \"../tooltip\";\n\nimport { Chip } from \"../chip\";\nimport styles from \"./input-field.module.css\";\n\n// Todo: Add a dropdown support\n\nconst inputWrapper = cva(styles.inputWrapper, {\n  variants: {\n    size: {\n      small: styles[\"size-small\"],\n      large: styles[\"size-large\"],\n    }\n  },\n  defaultVariants: {\n    size: \"large\",\n  }\n});\n\nexport interface InputFieldProps\n  extends Omit<ComponentPropsWithoutRef<\"input\">, \"error\" | \"size\">,\n    VariantProps<typeof inputWrapper> {\n  label?: string;\n  helperText?: string;\n  error?: string;\n  disabled?: boolean;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  optional?: boolean;\n  prefix?: string;\n  suffix?: string;\n  width?: string | number;\n  chips?: Array<{ label: string; onRemove?: () => void }>;\n  maxChipsVisible?: number;\n  ref?: React.RefObject<HTMLInputElement>;\n  infoTooltip?: string;\n}\n\nexport const InputField = ({ \n  className,\n  disabled,\n  label,\n  helperText,\n  placeholder,\n  error,\n  leadingIcon,\n  trailingIcon,\n  optional,\n  prefix,\n  suffix,\n  width,\n  chips,\n  maxChipsVisible = 2,\n  ref,\n  size,\n  infoTooltip,\n  ...props \n}: InputFieldProps) => {\n  return (\n    <div className={styles.container} style={{ width: width || '100%' }}>\n      {label && (\n        <div className={styles.labelContainer}>\n          <label className={clsx(styles.label, disabled && styles[\"label-disabled\"])}>\n            {label}\n            {optional && <span className={styles.optional}>(optional)</span>}\n          </label>\n          {infoTooltip && (\n            <Tooltip message={infoTooltip} side=\"right\">\n              <span className={styles.helpIcon}>\n                <InfoCircledIcon />\n              </span>\n            </Tooltip>\n          )}\n        </div>\n      )}\n      <div \n        className={clsx(\n          inputWrapper({ size, className }),\n          error && styles['input-error-wrapper'],\n          disabled && styles['input-disabled-wrapper'],\n          chips?.length && styles['has-chips']\n        )}\n      >\n        {leadingIcon && <div className={styles['leading-icon']}>{leadingIcon}</div>}\n        {prefix && <div className={styles.prefix}>{prefix}</div>}\n        \n        <div className={styles['chip-input-container']}>\n          {chips?.slice(0, maxChipsVisible).map((chip, index) => (\n            <Chip\n              key={index}\n              variant=\"outline\"\n              isDismissible={!!chip.onRemove}\n              onDismiss={chip.onRemove}\n              className={styles.chip}\n            >\n              {chip.label}\n            </Chip>\n          ))}\n          {chips && chips.length > maxChipsVisible && (\n            <span className={styles['chip-overflow']}>\n              +{chips.length - maxChipsVisible}\n            </span>\n          )}\n          <input\n            ref={ref}\n            className={clsx(\n              styles['input-field'],\n              leadingIcon && styles['has-leading-icon'],\n              trailingIcon && styles['has-trailing-icon'],\n              prefix && styles['has-prefix'],\n              suffix && styles['has-suffix'],\n              error && styles['input-error'],\n              disabled && styles['input-disabled'],\n              className\n            )}\n            aria-invalid={!!error}\n            placeholder={placeholder}\n            disabled={disabled}\n            {...props}\n          />\n        </div>\n        \n        {suffix && <div className={styles.suffix}>{suffix}</div>}\n        {trailingIcon && <div className={styles['trailing-icon']}>{trailingIcon}</div>}\n      </div>\n      {(error || helperText) && (\n        <span \n          className={clsx(\n            styles['helper-text'], \n            error && styles['helper-text-error'],\n            disabled && styles['helper-text-disabled']\n          )}\n        >\n          {error || helperText}\n        </span>\n      )}\n    </div>\n  );\n};\n\nInputField.displayName = \"InputField\";"],"names":["cva","styles","_jsxs","clsx","_jsx","Tooltip","InfoCircledIcon","chip","Chip"],"mappings":"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"}
+{"version":3,"file":"input-field.cjs","sources":["../../../../v1/components/input-field/input-field.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { InfoCircledIcon } from \"@radix-ui/react-icons\";\nimport { Tooltip } from \"../tooltip\";\n\nimport { Chip } from \"../chip\";\nimport styles from \"./input-field.module.css\";\n\n// Todo: Add a dropdown support\n\nconst inputWrapper = cva(styles.inputWrapper, {\n  variants: {\n    size: {\n      small: styles[\"size-small\"],\n      large: styles[\"size-large\"],\n    },\n    variant: {\n      default: styles[\"variant-default\"],\n      borderless: styles[\"variant-borderless\"],\n    }\n  },\n  defaultVariants: {\n    size: \"large\",\n    variant: \"default\",\n  }\n});\n\nexport interface InputFieldProps\n  extends Omit<ComponentPropsWithoutRef<\"input\">, \"error\" | \"size\">,\n    VariantProps<typeof inputWrapper> {\n  label?: string;\n  helperText?: string;\n  error?: string;\n  disabled?: boolean;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  optional?: boolean;\n  prefix?: string;\n  suffix?: string;\n  width?: string | number;\n  chips?: Array<{ label: string; onRemove?: () => void }>;\n  maxChipsVisible?: number;\n  ref?: React.RefObject<HTMLInputElement>;\n  infoTooltip?: string;\n  variant?: \"default\" | \"borderless\";\n}\n\nexport const InputField = ({ \n  className,\n  disabled,\n  label,\n  helperText,\n  placeholder,\n  error,\n  leadingIcon,\n  trailingIcon,\n  optional,\n  prefix,\n  suffix,\n  width,\n  chips,\n  maxChipsVisible = 2,\n  ref,\n  size,\n  infoTooltip,\n  variant = \"default\",\n  ...props \n}: InputFieldProps) => {\n  return (\n    <div className={styles.container} style={{ width: width || '100%' }}>\n      {label && (\n        <div className={styles.labelContainer}>\n          <label className={clsx(styles.label, disabled && styles[\"label-disabled\"])}>\n            {label}\n            {optional && <span className={styles.optional}>(optional)</span>}\n          </label>\n          {infoTooltip && (\n            <Tooltip message={infoTooltip} side=\"right\">\n              <span className={styles.helpIcon}>\n                <InfoCircledIcon />\n              </span>\n            </Tooltip>\n          )}\n        </div>\n      )}\n      <div \n        className={clsx(\n          inputWrapper({ size, variant, className }),\n          error && styles['input-error-wrapper'],\n          disabled && styles['input-disabled-wrapper'],\n          chips?.length && styles['has-chips']\n        )}\n      >\n        {leadingIcon && <div className={styles['leading-icon']}>{leadingIcon}</div>}\n        {prefix && <div className={styles.prefix}>{prefix}</div>}\n        \n        <div className={styles['chip-input-container']}>\n          {chips?.slice(0, maxChipsVisible).map((chip, index) => (\n            <Chip\n              key={index}\n              variant=\"outline\"\n              isDismissible={!!chip.onRemove}\n              onDismiss={chip.onRemove}\n              className={styles.chip}\n            >\n              {chip.label}\n            </Chip>\n          ))}\n          {chips && chips.length > maxChipsVisible && (\n            <span className={styles['chip-overflow']}>\n              +{chips.length - maxChipsVisible}\n            </span>\n          )}\n          <input\n            ref={ref}\n            className={clsx(\n              styles['input-field'],\n              leadingIcon && styles['has-leading-icon'],\n              trailingIcon && styles['has-trailing-icon'],\n              prefix && styles['has-prefix'],\n              suffix && styles['has-suffix'],\n              error && styles['input-error'],\n              disabled && styles['input-disabled'],\n              className\n            )}\n            aria-invalid={!!error}\n            placeholder={placeholder}\n            disabled={disabled}\n            {...props}\n          />\n        </div>\n        \n        {suffix && <div className={styles.suffix}>{suffix}</div>}\n        {trailingIcon && <div className={styles['trailing-icon']}>{trailingIcon}</div>}\n      </div>\n      {(error || helperText) && (\n        <span \n          className={clsx(\n            styles['helper-text'], \n            error && styles['helper-text-error'],\n            disabled && styles['helper-text-disabled']\n          )}\n        >\n          {error || helperText}\n        </span>\n      )}\n    </div>\n  );\n};\n\nInputField.displayName = \"InputField\";"],"names":["cva","styles","_jsxs","clsx","_jsx","Tooltip","InfoCircledIcon","chip","Chip"],"mappings":"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"}

package/dist/v1/components/input-field/input-field.d.ts

@@ -2,6 +2,7 @@ import { type VariantProps } from "class-variance-authority";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
 declare const inputWrapper: (props?: ({
     size?: "small" | "large" | null | undefined;
+    variant?: "default" | "borderless" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface InputFieldProps extends Omit<ComponentPropsWithoutRef<"input">, "error" | "size">, VariantProps<typeof inputWrapper> {
     label?: string;
@@ -21,9 +22,10 @@ export interface InputFieldProps extends Omit<ComponentPropsWithoutRef<"input">,
     maxChipsVisible?: number;
     ref?: React.RefObject<HTMLInputElement>;
     infoTooltip?: string;
+    variant?: "default" | "borderless";
 }
 export declare const InputField: {
-    ({ className, disabled, label, helperText, placeholder, error, leadingIcon, trailingIcon, optional, prefix, suffix, width, chips, maxChipsVisible, ref, size, infoTooltip, ...props }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, disabled, label, helperText, placeholder, error, leadingIcon, trailingIcon, optional, prefix, suffix, width, chips, maxChipsVisible, ref, size, infoTooltip, variant, ...props }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/v1/components/input-field/input-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-field.d.ts","sourceRoot":"","sources":["../../../../v1/components/input-field/input-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAS5D,QAAA,MAAM,YAAY;;mFAUhB,CAAC;AAEH,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,EAC/D,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,UAAU;2LAmBpB,eAAe;;CAiFjB,CAAC"}
+{"version":3,"file":"input-field.d.ts","sourceRoot":"","sources":["../../../../v1/components/input-field/input-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAS5D,QAAA,MAAM,YAAY;;;mFAehB,CAAC;AAEH,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,EAC/D,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;CACpC;AAED,eAAO,MAAM,UAAU;oMAoBpB,eAAe;;CAiFjB,CAAC"}

package/dist/v1/components/input-field/input-field.js

@@ -12,14 +12,19 @@ const inputWrapper = cva(styles.inputWrapper, {
         size: {
             small: styles["size-small"],
             large: styles["size-large"],
+        },
+        variant: {
+            default: styles["variant-default"],
+            borderless: styles["variant-borderless"],
         }
     },
     defaultVariants: {
         size: "large",
+        variant: "default",
     }
 });
-const InputField = ({ className, disabled, label, helperText, placeholder, error, leadingIcon, trailingIcon, optional, prefix, suffix, width, chips, maxChipsVisible = 2, ref, size, infoTooltip, ...props }) => {
-    return (jsxRuntimeExports.jsxs("div", { className: styles.container, style: { width: width || '100%' }, children: [label && (jsxRuntimeExports.jsxs("div", { className: styles.labelContainer, children: [jsxRuntimeExports.jsxs("label", { className: clsx(styles.label, disabled && styles["label-disabled"]), children: [label, optional && jsxRuntimeExports.jsx("span", { className: styles.optional, children: "(optional)" })] }), infoTooltip && (jsxRuntimeExports.jsx(Tooltip, { message: infoTooltip, side: "right", children: jsxRuntimeExports.jsx("span", { className: styles.helpIcon, children: jsxRuntimeExports.jsx(InfoCircledIcon, {}) }) }))] })), jsxRuntimeExports.jsxs("div", { className: clsx(inputWrapper({ size, className }), error && styles['input-error-wrapper'], disabled && styles['input-disabled-wrapper'], chips?.length && styles['has-chips']), children: [leadingIcon && jsxRuntimeExports.jsx("div", { className: styles['leading-icon'], children: leadingIcon }), prefix && jsxRuntimeExports.jsx("div", { className: styles.prefix, children: prefix }), jsxRuntimeExports.jsxs("div", { className: styles['chip-input-container'], children: [chips?.slice(0, maxChipsVisible).map((chip, index) => (jsxRuntimeExports.jsx(Chip, { variant: "outline", isDismissible: !!chip.onRemove, onDismiss: chip.onRemove, className: styles.chip, children: chip.label }, index))), chips && chips.length > maxChipsVisible && (jsxRuntimeExports.jsxs("span", { className: styles['chip-overflow'], children: ["+", chips.length - maxChipsVisible] })), jsxRuntimeExports.jsx("input", { ref: ref, className: clsx(styles['input-field'], leadingIcon && styles['has-leading-icon'], trailingIcon && styles['has-trailing-icon'], prefix && styles['has-prefix'], suffix && styles['has-suffix'], error && styles['input-error'], disabled && styles['input-disabled'], className), "aria-invalid": !!error, placeholder: placeholder, disabled: disabled, ...props })] }), suffix && jsxRuntimeExports.jsx("div", { className: styles.suffix, children: suffix }), trailingIcon && jsxRuntimeExports.jsx("div", { className: styles['trailing-icon'], children: trailingIcon })] }), (error || helperText) && (jsxRuntimeExports.jsx("span", { className: clsx(styles['helper-text'], error && styles['helper-text-error'], disabled && styles['helper-text-disabled']), children: error || helperText }))] }));
+const InputField = ({ className, disabled, label, helperText, placeholder, error, leadingIcon, trailingIcon, optional, prefix, suffix, width, chips, maxChipsVisible = 2, ref, size, infoTooltip, variant = "default", ...props }) => {
+    return (jsxRuntimeExports.jsxs("div", { className: styles.container, style: { width: width || '100%' }, children: [label && (jsxRuntimeExports.jsxs("div", { className: styles.labelContainer, children: [jsxRuntimeExports.jsxs("label", { className: clsx(styles.label, disabled && styles["label-disabled"]), children: [label, optional && jsxRuntimeExports.jsx("span", { className: styles.optional, children: "(optional)" })] }), infoTooltip && (jsxRuntimeExports.jsx(Tooltip, { message: infoTooltip, side: "right", children: jsxRuntimeExports.jsx("span", { className: styles.helpIcon, children: jsxRuntimeExports.jsx(InfoCircledIcon, {}) }) }))] })), jsxRuntimeExports.jsxs("div", { className: clsx(inputWrapper({ size, variant, className }), error && styles['input-error-wrapper'], disabled && styles['input-disabled-wrapper'], chips?.length && styles['has-chips']), children: [leadingIcon && jsxRuntimeExports.jsx("div", { className: styles['leading-icon'], children: leadingIcon }), prefix && jsxRuntimeExports.jsx("div", { className: styles.prefix, children: prefix }), jsxRuntimeExports.jsxs("div", { className: styles['chip-input-container'], children: [chips?.slice(0, maxChipsVisible).map((chip, index) => (jsxRuntimeExports.jsx(Chip, { variant: "outline", isDismissible: !!chip.onRemove, onDismiss: chip.onRemove, className: styles.chip, children: chip.label }, index))), chips && chips.length > maxChipsVisible && (jsxRuntimeExports.jsxs("span", { className: styles['chip-overflow'], children: ["+", chips.length - maxChipsVisible] })), jsxRuntimeExports.jsx("input", { ref: ref, className: clsx(styles['input-field'], leadingIcon && styles['has-leading-icon'], trailingIcon && styles['has-trailing-icon'], prefix && styles['has-prefix'], suffix && styles['has-suffix'], error && styles['input-error'], disabled && styles['input-disabled'], className), "aria-invalid": !!error, placeholder: placeholder, disabled: disabled, ...props })] }), suffix && jsxRuntimeExports.jsx("div", { className: styles.suffix, children: suffix }), trailingIcon && jsxRuntimeExports.jsx("div", { className: styles['trailing-icon'], children: trailingIcon })] }), (error || helperText) && (jsxRuntimeExports.jsx("span", { className: clsx(styles['helper-text'], error && styles['helper-text-error'], disabled && styles['helper-text-disabled']), children: error || helperText }))] }));
 };
 InputField.displayName = "InputField";
 

package/dist/v1/components/input-field/input-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-field.js","sources":["../../../../v1/components/input-field/input-field.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { InfoCircledIcon } from \"@radix-ui/react-icons\";\nimport { Tooltip } from \"../tooltip\";\n\nimport { Chip } from \"../chip\";\nimport styles from \"./input-field.module.css\";\n\n// Todo: Add a dropdown support\n\nconst inputWrapper = cva(styles.inputWrapper, {\n  variants: {\n    size: {\n      small: styles[\"size-small\"],\n      large: styles[\"size-large\"],\n    }\n  },\n  defaultVariants: {\n    size: \"large\",\n  }\n});\n\nexport interface InputFieldProps\n  extends Omit<ComponentPropsWithoutRef<\"input\">, \"error\" | \"size\">,\n    VariantProps<typeof inputWrapper> {\n  label?: string;\n  helperText?: string;\n  error?: string;\n  disabled?: boolean;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  optional?: boolean;\n  prefix?: string;\n  suffix?: string;\n  width?: string | number;\n  chips?: Array<{ label: string; onRemove?: () => void }>;\n  maxChipsVisible?: number;\n  ref?: React.RefObject<HTMLInputElement>;\n  infoTooltip?: string;\n}\n\nexport const InputField = ({ \n  className,\n  disabled,\n  label,\n  helperText,\n  placeholder,\n  error,\n  leadingIcon,\n  trailingIcon,\n  optional,\n  prefix,\n  suffix,\n  width,\n  chips,\n  maxChipsVisible = 2,\n  ref,\n  size,\n  infoTooltip,\n  ...props \n}: InputFieldProps) => {\n  return (\n    <div className={styles.container} style={{ width: width || '100%' }}>\n      {label && (\n        <div className={styles.labelContainer}>\n          <label className={clsx(styles.label, disabled && styles[\"label-disabled\"])}>\n            {label}\n            {optional && <span className={styles.optional}>(optional)</span>}\n          </label>\n          {infoTooltip && (\n            <Tooltip message={infoTooltip} side=\"right\">\n              <span className={styles.helpIcon}>\n                <InfoCircledIcon />\n              </span>\n            </Tooltip>\n          )}\n        </div>\n      )}\n      <div \n        className={clsx(\n          inputWrapper({ size, className }),\n          error && styles['input-error-wrapper'],\n          disabled && styles['input-disabled-wrapper'],\n          chips?.length && styles['has-chips']\n        )}\n      >\n        {leadingIcon && <div className={styles['leading-icon']}>{leadingIcon}</div>}\n        {prefix && <div className={styles.prefix}>{prefix}</div>}\n        \n        <div className={styles['chip-input-container']}>\n          {chips?.slice(0, maxChipsVisible).map((chip, index) => (\n            <Chip\n              key={index}\n              variant=\"outline\"\n              isDismissible={!!chip.onRemove}\n              onDismiss={chip.onRemove}\n              className={styles.chip}\n            >\n              {chip.label}\n            </Chip>\n          ))}\n          {chips && chips.length > maxChipsVisible && (\n            <span className={styles['chip-overflow']}>\n              +{chips.length - maxChipsVisible}\n            </span>\n          )}\n          <input\n            ref={ref}\n            className={clsx(\n              styles['input-field'],\n              leadingIcon && styles['has-leading-icon'],\n              trailingIcon && styles['has-trailing-icon'],\n              prefix && styles['has-prefix'],\n              suffix && styles['has-suffix'],\n              error && styles['input-error'],\n              disabled && styles['input-disabled'],\n              className\n            )}\n            aria-invalid={!!error}\n            placeholder={placeholder}\n            disabled={disabled}\n            {...props}\n          />\n        </div>\n        \n        {suffix && <div className={styles.suffix}>{suffix}</div>}\n        {trailingIcon && <div className={styles['trailing-icon']}>{trailingIcon}</div>}\n      </div>\n      {(error || helperText) && (\n        <span \n          className={clsx(\n            styles['helper-text'], \n            error && styles['helper-text-error'],\n            disabled && styles['helper-text-disabled']\n          )}\n        >\n          {error || helperText}\n        </span>\n      )}\n    </div>\n  );\n};\n\nInputField.displayName = \"InputField\";"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"input-field.js","sources":["../../../../v1/components/input-field/input-field.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { InfoCircledIcon } from \"@radix-ui/react-icons\";\nimport { Tooltip } from \"../tooltip\";\n\nimport { Chip } from \"../chip\";\nimport styles from \"./input-field.module.css\";\n\n// Todo: Add a dropdown support\n\nconst inputWrapper = cva(styles.inputWrapper, {\n  variants: {\n    size: {\n      small: styles[\"size-small\"],\n      large: styles[\"size-large\"],\n    },\n    variant: {\n      default: styles[\"variant-default\"],\n      borderless: styles[\"variant-borderless\"],\n    }\n  },\n  defaultVariants: {\n    size: \"large\",\n    variant: \"default\",\n  }\n});\n\nexport interface InputFieldProps\n  extends Omit<ComponentPropsWithoutRef<\"input\">, \"error\" | \"size\">,\n    VariantProps<typeof inputWrapper> {\n  label?: string;\n  helperText?: string;\n  error?: string;\n  disabled?: boolean;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  optional?: boolean;\n  prefix?: string;\n  suffix?: string;\n  width?: string | number;\n  chips?: Array<{ label: string; onRemove?: () => void }>;\n  maxChipsVisible?: number;\n  ref?: React.RefObject<HTMLInputElement>;\n  infoTooltip?: string;\n  variant?: \"default\" | \"borderless\";\n}\n\nexport const InputField = ({ \n  className,\n  disabled,\n  label,\n  helperText,\n  placeholder,\n  error,\n  leadingIcon,\n  trailingIcon,\n  optional,\n  prefix,\n  suffix,\n  width,\n  chips,\n  maxChipsVisible = 2,\n  ref,\n  size,\n  infoTooltip,\n  variant = \"default\",\n  ...props \n}: InputFieldProps) => {\n  return (\n    <div className={styles.container} style={{ width: width || '100%' }}>\n      {label && (\n        <div className={styles.labelContainer}>\n          <label className={clsx(styles.label, disabled && styles[\"label-disabled\"])}>\n            {label}\n            {optional && <span className={styles.optional}>(optional)</span>}\n          </label>\n          {infoTooltip && (\n            <Tooltip message={infoTooltip} side=\"right\">\n              <span className={styles.helpIcon}>\n                <InfoCircledIcon />\n              </span>\n            </Tooltip>\n          )}\n        </div>\n      )}\n      <div \n        className={clsx(\n          inputWrapper({ size, variant, className }),\n          error && styles['input-error-wrapper'],\n          disabled && styles['input-disabled-wrapper'],\n          chips?.length && styles['has-chips']\n        )}\n      >\n        {leadingIcon && <div className={styles['leading-icon']}>{leadingIcon}</div>}\n        {prefix && <div className={styles.prefix}>{prefix}</div>}\n        \n        <div className={styles['chip-input-container']}>\n          {chips?.slice(0, maxChipsVisible).map((chip, index) => (\n            <Chip\n              key={index}\n              variant=\"outline\"\n              isDismissible={!!chip.onRemove}\n              onDismiss={chip.onRemove}\n              className={styles.chip}\n            >\n              {chip.label}\n            </Chip>\n          ))}\n          {chips && chips.length > maxChipsVisible && (\n            <span className={styles['chip-overflow']}>\n              +{chips.length - maxChipsVisible}\n            </span>\n          )}\n          <input\n            ref={ref}\n            className={clsx(\n              styles['input-field'],\n              leadingIcon && styles['has-leading-icon'],\n              trailingIcon && styles['has-trailing-icon'],\n              prefix && styles['has-prefix'],\n              suffix && styles['has-suffix'],\n              error && styles['input-error'],\n              disabled && styles['input-disabled'],\n              className\n            )}\n            aria-invalid={!!error}\n            placeholder={placeholder}\n            disabled={disabled}\n            {...props}\n          />\n        </div>\n        \n        {suffix && <div className={styles.suffix}>{suffix}</div>}\n        {trailingIcon && <div className={styles['trailing-icon']}>{trailingIcon}</div>}\n      </div>\n      {(error || helperText) && (\n        <span \n          className={clsx(\n            styles['helper-text'], \n            error && styles['helper-text-error'],\n            disabled && styles['helper-text-disabled']\n          )}\n        >\n          {error || helperText}\n        </span>\n      )}\n    </div>\n  );\n};\n\nInputField.displayName = \"InputField\";"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/v1/components/input-field/input-field.module.css.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"container":"input-field-module_container__EO1UE","label":"input-field-module_label__FIn-3","label-disabled":"input-field-module_label-disabled__YTPfz","inputWrapper":"input-field-module_inputWrapper__rZaqO","input-error-wrapper":"input-field-module_input-error-wrapper__xaNft","input-disabled-wrapper":"input-field-module_input-disabled-wrapper__szNYx","leading-icon":"input-field-module_leading-icon__J2Bif","trailing-icon":"input-field-module_trailing-icon__dNS8s","input-field":"input-field-module_input-field__M-gOb","input-default":"input-field-module_input-default__mI0I1","input-disabled":"input-field-module_input-disabled__Wpj4W","helper-text":"input-field-module_helper-text__PclGf","helper-text-error":"input-field-module_helper-text-error__1NSM-","helper-text-disabled":"input-field-module_helper-text-disabled__QcIBu","has-leading-icon":"input-field-module_has-leading-icon__Yxj6I","has-trailing-icon":"input-field-module_has-trailing-icon__uA7mP","optional":"input-field-module_optional__awrgj","has-chips":"input-field-module_has-chips__OvxNF","chip":"input-field-module_chip__Z2zua","chip-input-container":"input-field-module_chip-input-container__FJsHY","size-large":"input-field-module_size-large__nA2yK","size-small":"input-field-module_size-small__FFwSX","chip-overflow":"input-field-module_chip-overflow__n9kta","prefix":"input-field-module_prefix__WBsMj","suffix":"input-field-module_suffix__LiSQ0","has-prefix":"input-field-module_has-prefix__wV726","has-suffix":"input-field-module_has-suffix__UgqC6","labelContainer":"input-field-module_labelContainer__80FMe","helpIcon":"input-field-module_helpIcon__s8XKN","label___disabled":"input-field-module_label-disabled__YTPfz","input___error___wrapper":"input-field-module_input-error-wrapper__xaNft","input___disabled___wrapper":"input-field-module_input-disabled-wrapper__szNYx","leading___icon":"input-field-module_leading-icon__J2Bif","trailing___icon":"input-field-module_trailing-icon__dNS8s","input___field":"input-field-module_input-field__M-gOb","input___default":"input-field-module_input-default__mI0I1","input___disabled":"input-field-module_input-disabled__Wpj4W","helper___text":"input-field-module_helper-text__PclGf","helper___text___error":"input-field-module_helper-text-error__1NSM-","helper___text___disabled":"input-field-module_helper-text-disabled__QcIBu","has___leading___icon":"input-field-module_has-leading-icon__Yxj6I","has___trailing___icon":"input-field-module_has-trailing-icon__uA7mP","has___chips":"input-field-module_has-chips__OvxNF","chip___input___container":"input-field-module_chip-input-container__FJsHY","size___large":"input-field-module_size-large__nA2yK","size___small":"input-field-module_size-small__FFwSX","chip___overflow":"input-field-module_chip-overflow__n9kta","has___prefix":"input-field-module_has-prefix__wV726","has___suffix":"input-field-module_has-suffix__UgqC6"};
+var styles = {"container":"input-field-module_container__EO1UE","label":"input-field-module_label__FIn-3","label-disabled":"input-field-module_label-disabled__YTPfz","inputWrapper":"input-field-module_inputWrapper__rZaqO","input-error-wrapper":"input-field-module_input-error-wrapper__xaNft","input-disabled-wrapper":"input-field-module_input-disabled-wrapper__szNYx","leading-icon":"input-field-module_leading-icon__J2Bif","trailing-icon":"input-field-module_trailing-icon__dNS8s","input-field":"input-field-module_input-field__M-gOb","input-default":"input-field-module_input-default__mI0I1","input-disabled":"input-field-module_input-disabled__Wpj4W","helper-text":"input-field-module_helper-text__PclGf","helper-text-error":"input-field-module_helper-text-error__1NSM-","helper-text-disabled":"input-field-module_helper-text-disabled__QcIBu","has-leading-icon":"input-field-module_has-leading-icon__Yxj6I","has-trailing-icon":"input-field-module_has-trailing-icon__uA7mP","optional":"input-field-module_optional__awrgj","has-chips":"input-field-module_has-chips__OvxNF","chip":"input-field-module_chip__Z2zua","chip-input-container":"input-field-module_chip-input-container__FJsHY","size-large":"input-field-module_size-large__nA2yK","size-small":"input-field-module_size-small__FFwSX","chip-overflow":"input-field-module_chip-overflow__n9kta","prefix":"input-field-module_prefix__WBsMj","suffix":"input-field-module_suffix__LiSQ0","has-prefix":"input-field-module_has-prefix__wV726","has-suffix":"input-field-module_has-suffix__UgqC6","labelContainer":"input-field-module_labelContainer__80FMe","helpIcon":"input-field-module_helpIcon__s8XKN","variant-borderless":"input-field-module_variant-borderless__D9VpD","label___disabled":"input-field-module_label-disabled__YTPfz","input___error___wrapper":"input-field-module_input-error-wrapper__xaNft","input___disabled___wrapper":"input-field-module_input-disabled-wrapper__szNYx","leading___icon":"input-field-module_leading-icon__J2Bif","trailing___icon":"input-field-module_trailing-icon__dNS8s","input___field":"input-field-module_input-field__M-gOb","input___default":"input-field-module_input-default__mI0I1","input___disabled":"input-field-module_input-disabled__Wpj4W","helper___text":"input-field-module_helper-text__PclGf","helper___text___error":"input-field-module_helper-text-error__1NSM-","helper___text___disabled":"input-field-module_helper-text-disabled__QcIBu","has___leading___icon":"input-field-module_has-leading-icon__Yxj6I","has___trailing___icon":"input-field-module_has-trailing-icon__uA7mP","has___chips":"input-field-module_has-chips__OvxNF","chip___input___container":"input-field-module_chip-input-container__FJsHY","size___large":"input-field-module_size-large__nA2yK","size___small":"input-field-module_size-small__FFwSX","chip___overflow":"input-field-module_chip-overflow__n9kta","has___prefix":"input-field-module_has-prefix__wV726","has___suffix":"input-field-module_has-suffix__UgqC6","variant___borderless":"input-field-module_variant-borderless__D9VpD"};
 
 exports.default = styles;
 //# sourceMappingURL=input-field.module.css.cjs.map

package/dist/v1/components/input-field/input-field.module.css.js

@@ -1,4 +1,4 @@
-var styles = {"container":"input-field-module_container__EO1UE","label":"input-field-module_label__FIn-3","label-disabled":"input-field-module_label-disabled__YTPfz","inputWrapper":"input-field-module_inputWrapper__rZaqO","input-error-wrapper":"input-field-module_input-error-wrapper__xaNft","input-disabled-wrapper":"input-field-module_input-disabled-wrapper__szNYx","leading-icon":"input-field-module_leading-icon__J2Bif","trailing-icon":"input-field-module_trailing-icon__dNS8s","input-field":"input-field-module_input-field__M-gOb","input-default":"input-field-module_input-default__mI0I1","input-disabled":"input-field-module_input-disabled__Wpj4W","helper-text":"input-field-module_helper-text__PclGf","helper-text-error":"input-field-module_helper-text-error__1NSM-","helper-text-disabled":"input-field-module_helper-text-disabled__QcIBu","has-leading-icon":"input-field-module_has-leading-icon__Yxj6I","has-trailing-icon":"input-field-module_has-trailing-icon__uA7mP","optional":"input-field-module_optional__awrgj","has-chips":"input-field-module_has-chips__OvxNF","chip":"input-field-module_chip__Z2zua","chip-input-container":"input-field-module_chip-input-container__FJsHY","size-large":"input-field-module_size-large__nA2yK","size-small":"input-field-module_size-small__FFwSX","chip-overflow":"input-field-module_chip-overflow__n9kta","prefix":"input-field-module_prefix__WBsMj","suffix":"input-field-module_suffix__LiSQ0","has-prefix":"input-field-module_has-prefix__wV726","has-suffix":"input-field-module_has-suffix__UgqC6","labelContainer":"input-field-module_labelContainer__80FMe","helpIcon":"input-field-module_helpIcon__s8XKN","label___disabled":"input-field-module_label-disabled__YTPfz","input___error___wrapper":"input-field-module_input-error-wrapper__xaNft","input___disabled___wrapper":"input-field-module_input-disabled-wrapper__szNYx","leading___icon":"input-field-module_leading-icon__J2Bif","trailing___icon":"input-field-module_trailing-icon__dNS8s","input___field":"input-field-module_input-field__M-gOb","input___default":"input-field-module_input-default__mI0I1","input___disabled":"input-field-module_input-disabled__Wpj4W","helper___text":"input-field-module_helper-text__PclGf","helper___text___error":"input-field-module_helper-text-error__1NSM-","helper___text___disabled":"input-field-module_helper-text-disabled__QcIBu","has___leading___icon":"input-field-module_has-leading-icon__Yxj6I","has___trailing___icon":"input-field-module_has-trailing-icon__uA7mP","has___chips":"input-field-module_has-chips__OvxNF","chip___input___container":"input-field-module_chip-input-container__FJsHY","size___large":"input-field-module_size-large__nA2yK","size___small":"input-field-module_size-small__FFwSX","chip___overflow":"input-field-module_chip-overflow__n9kta","has___prefix":"input-field-module_has-prefix__wV726","has___suffix":"input-field-module_has-suffix__UgqC6"};
+var styles = {"container":"input-field-module_container__EO1UE","label":"input-field-module_label__FIn-3","label-disabled":"input-field-module_label-disabled__YTPfz","inputWrapper":"input-field-module_inputWrapper__rZaqO","input-error-wrapper":"input-field-module_input-error-wrapper__xaNft","input-disabled-wrapper":"input-field-module_input-disabled-wrapper__szNYx","leading-icon":"input-field-module_leading-icon__J2Bif","trailing-icon":"input-field-module_trailing-icon__dNS8s","input-field":"input-field-module_input-field__M-gOb","input-default":"input-field-module_input-default__mI0I1","input-disabled":"input-field-module_input-disabled__Wpj4W","helper-text":"input-field-module_helper-text__PclGf","helper-text-error":"input-field-module_helper-text-error__1NSM-","helper-text-disabled":"input-field-module_helper-text-disabled__QcIBu","has-leading-icon":"input-field-module_has-leading-icon__Yxj6I","has-trailing-icon":"input-field-module_has-trailing-icon__uA7mP","optional":"input-field-module_optional__awrgj","has-chips":"input-field-module_has-chips__OvxNF","chip":"input-field-module_chip__Z2zua","chip-input-container":"input-field-module_chip-input-container__FJsHY","size-large":"input-field-module_size-large__nA2yK","size-small":"input-field-module_size-small__FFwSX","chip-overflow":"input-field-module_chip-overflow__n9kta","prefix":"input-field-module_prefix__WBsMj","suffix":"input-field-module_suffix__LiSQ0","has-prefix":"input-field-module_has-prefix__wV726","has-suffix":"input-field-module_has-suffix__UgqC6","labelContainer":"input-field-module_labelContainer__80FMe","helpIcon":"input-field-module_helpIcon__s8XKN","variant-borderless":"input-field-module_variant-borderless__D9VpD","label___disabled":"input-field-module_label-disabled__YTPfz","input___error___wrapper":"input-field-module_input-error-wrapper__xaNft","input___disabled___wrapper":"input-field-module_input-disabled-wrapper__szNYx","leading___icon":"input-field-module_leading-icon__J2Bif","trailing___icon":"input-field-module_trailing-icon__dNS8s","input___field":"input-field-module_input-field__M-gOb","input___default":"input-field-module_input-default__mI0I1","input___disabled":"input-field-module_input-disabled__Wpj4W","helper___text":"input-field-module_helper-text__PclGf","helper___text___error":"input-field-module_helper-text-error__1NSM-","helper___text___disabled":"input-field-module_helper-text-disabled__QcIBu","has___leading___icon":"input-field-module_has-leading-icon__Yxj6I","has___trailing___icon":"input-field-module_has-trailing-icon__uA7mP","has___chips":"input-field-module_has-chips__OvxNF","chip___input___container":"input-field-module_chip-input-container__FJsHY","size___large":"input-field-module_size-large__nA2yK","size___small":"input-field-module_size-small__FFwSX","chip___overflow":"input-field-module_chip-overflow__n9kta","has___prefix":"input-field-module_has-prefix__wV726","has___suffix":"input-field-module_has-suffix__UgqC6","variant___borderless":"input-field-module_variant-borderless__D9VpD"};
 
 export { styles as default };
 //# sourceMappingURL=input-field.module.css.js.map

package/dist/v1/components/search/search.cjs

@@ -2,23 +2,18 @@
 
 var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
 var reactIcons_esm = require('../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
-var index = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
-var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var inputField = require('../input-field/input-field.cjs');
+var iconButton = require('../icon-button/icon-button.cjs');
 var search_module = require('./search.module.css.cjs');
 
-const searchField = index.cva(search_module.default.searchField, {
-    variants: {
-        size: {
-            small: search_module.default["search-small"],
-            large: search_module.default["search-large"],
-        }
-    },
-    defaultVariants: {
-        size: "large",
-    }
-});
-const Search = ({ className, disabled, placeholder = "Search", size, showClearButton, onClear, value, ref, ...props }) => {
-    return (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: clsx.clsx(search_module.default.container, disabled && search_module.default.disabled), role: "search", children: [jsxRuntime.jsxRuntimeExports.jsx("span", { className: search_module.default.leadingIcon, "aria-hidden": "true", children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.MagnifyingGlassIcon, {}) }), jsxRuntime.jsxRuntimeExports.jsx("input", { ref: ref, type: "text", className: clsx.clsx(searchField({ size, className }), disabled && search_module.default["search-disabled"]), placeholder: placeholder, disabled: disabled, value: value, "aria-label": placeholder, ...props }), showClearButton && value && !disabled && (jsxRuntime.jsxRuntimeExports.jsx("button", { className: search_module.default.clearButton, onClick: onClear, disabled: disabled, type: "button", "aria-label": "Clear search", tabIndex: 0, children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.CrossCircledIcon, { height: 16, width: 16 }) }))] }));
+const Search = ({ className, disabled, placeholder = "Search", size, showClearButton, onClear, value, onChange, width = "100%", variant = "default", ...props }) => {
+    const trailingIconWithClear = showClearButton && value ? (jsxRuntime.jsxRuntimeExports.jsx("div", { className: search_module.default.clearButtonWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(iconButton.IconButton, { size: size === 'small' ? 2 : 3, onClick: (e) => {
+                e.stopPropagation();
+                if (!disabled && onClear) {
+                    onClear();
+                }
+            }, disabled: disabled, "aria-label": "Clear search", className: search_module.default.clearButton, children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.CrossCircledIcon, {}) }) })) : undefined;
+    return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: search_module.default.container, role: "search", style: { width }, children: jsxRuntime.jsxRuntimeExports.jsx(inputField.InputField, { leadingIcon: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.MagnifyingGlassIcon, {}), trailingIcon: trailingIconWithClear, placeholder: placeholder, disabled: disabled, value: value, onChange: onChange, size: size, className: className, "aria-label": placeholder, variant: variant, ...props }) }));
 };
 Search.displayName = "Search";
 

package/dist/v1/components/search/search.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"search.cjs","sources":["../../../../v1/components/search/search.tsx"],"sourcesContent":["import { CrossCircledIcon,MagnifyingGlassIcon } from \"@radix-ui/react-icons\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport clsx from \"clsx\";\n\nimport styles from \"./search.module.css\";\n\nconst searchField = cva(styles.searchField, {\n  variants: {\n    size: {\n      small: styles[\"search-small\"],\n      large: styles[\"search-large\"],\n    }\n  },\n  defaultVariants: {\n    size: \"large\",\n  }\n});\n\nexport interface SearchProps extends VariantProps<typeof searchField> {\n  className?: string;\n  disabled?: boolean;\n  placeholder?: string;\n  showClearButton?: boolean;\n  onClear?: () => void;\n  value?: string;\n  ref?: React.RefObject<HTMLInputElement>;\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n  type?: string;\n  name?: string;\n  id?: string;\n}\n\nexport const Search = ({ \n  className, \n  disabled, \n  placeholder = \"Search\", \n  size, \n  showClearButton, \n  onClear, \n  value,\n  ref,\n  ...props \n}: SearchProps) => {\n  return (\n    <div \n      className={clsx(styles.container, disabled && styles.disabled)} \n      role=\"search\"\n    >\n      <span className={styles.leadingIcon} aria-hidden=\"true\">\n        <MagnifyingGlassIcon />\n      </span>\n      <input\n        ref={ref}\n        type=\"text\"\n        className={clsx(\n          searchField({ size, className }),\n          disabled && styles[\"search-disabled\"]\n        )}\n        placeholder={placeholder}\n        disabled={disabled}\n        value={value}\n        aria-label={placeholder}\n        {...props}\n      />\n      {showClearButton && value && !disabled && (\n        <button \n          className={styles.clearButton}\n          onClick={onClear}\n          disabled={disabled}\n          type=\"button\"\n          aria-label=\"Clear search\"\n          tabIndex={0}\n        >\n          <CrossCircledIcon height={16} width={16}/>\n        </button>\n      )}\n    </div>\n  );\n};\n\nSearch.displayName = \"Search\";"],"names":["cva","styles","_jsxs","clsx","_jsx","MagnifyingGlassIcon","CrossCircledIcon"],"mappings":";;;;;;;;AAMA,MAAM,WAAW,GAAGA,SAAG,CAACC,qBAAM,CAAC,WAAW,EAAE;AAC1C,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAEA,qBAAM,CAAC,cAAc,CAAC;AAC7B,YAAA,KAAK,EAAEA,qBAAM,CAAC,cAAc,CAAC;AAC9B,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,OAAO;AACd,KAAA;AACF,CAAA,CAAC,CAAC;AAiBI,MAAM,MAAM,GAAG,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,WAAW,GAAG,QAAQ,EACtB,IAAI,EACJ,eAAe,EACf,OAAO,EACP,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACI,KAAI;AAChB,IAAA,QACEC,iCAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEC,SAAI,CAACF,qBAAM,CAAC,SAAS,EAAE,QAAQ,IAAIA,qBAAM,CAAC,QAAQ,CAAC,EAC9D,IAAI,EAAC,QAAQ,EAEb,QAAA,EAAA,CAAAG,gCAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEH,qBAAM,CAAC,WAAW,EAAA,aAAA,EAAc,MAAM,EACrD,QAAA,EAAAG,gCAAA,CAACC,kCAAmB,EAAA,EAAA,CAAG,EAClB,CAAA,EACPD,gCACE,CAAA,OAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,MAAM,EACX,SAAS,EAAED,SAAI,CACb,WAAW,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAChC,QAAQ,IAAIF,qBAAM,CAAC,iBAAiB,CAAC,CACtC,EACD,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EAAA,YAAA,EACA,WAAW,EAAA,GACnB,KAAK,EAAA,CACT,EACD,eAAe,IAAI,KAAK,IAAI,CAAC,QAAQ,KACpCG,gCAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAEH,qBAAM,CAAC,WAAW,EAC7B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,EACF,YAAA,EAAA,cAAc,EACzB,QAAQ,EAAE,CAAC,EAAA,QAAA,EAEXG,gCAAC,CAAAE,+BAAgB,EAAC,EAAA,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAG,CAAA,EAAA,CACnC,CACV,CAAA,EAAA,CACG,EACN;AACJ,EAAE;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"search.cjs","sources":["../../../../v1/components/search/search.tsx"],"sourcesContent":["import { CrossCircledIcon, MagnifyingGlassIcon } from \"@radix-ui/react-icons\";\nimport { InputField } from \"../input-field\";\nimport { InputFieldProps } from \"../input-field/input-field\";\nimport { IconButton } from \"../icon-button\";\n\nimport styles from \"./search.module.css\";\n\nexport interface SearchProps extends Omit<InputFieldProps, 'leadingIcon'> {\n  showClearButton?: boolean;\n  onClear?: () => void;\n  variant?: 'default' | 'borderless';\n}\n\nexport const Search = ({ \n  className, \n  disabled, \n  placeholder = \"Search\", \n  size, \n  showClearButton, \n  onClear, \n  value,\n  onChange,\n  width = \"100%\",\n  variant = \"default\",\n  ...props \n}: SearchProps) => {\n  const trailingIconWithClear = showClearButton && value ? (\n    <div className={styles.clearButtonWrapper}>\n      <IconButton\n        size={size === 'small' ? 2 : 3}\n        onClick={(e) => {\n          e.stopPropagation();\n          if (!disabled && onClear) {\n            onClear();\n          }\n        }}\n        disabled={disabled}\n        aria-label=\"Clear search\"\n        className={styles.clearButton}\n      >\n        <CrossCircledIcon />\n      </IconButton>\n    </div>\n  ) : undefined;\n\n  return (\n    <div className={styles.container} role=\"search\" style={{ width }}>\n      <InputField\n        leadingIcon={<MagnifyingGlassIcon />}\n        trailingIcon={trailingIconWithClear}\n        placeholder={placeholder}\n        disabled={disabled}\n        value={value}\n        onChange={onChange}\n        size={size}\n        className={className}\n        aria-label={placeholder}\n        variant={variant}\n        {...props}\n      />\n    </div>\n  );\n};\n\nSearch.displayName = \"Search\";"],"names":["_jsx","styles","IconButton","CrossCircledIcon","InputField","MagnifyingGlassIcon"],"mappings":";;;;;;;;AAaa,MAAA,MAAM,GAAG,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,WAAW,GAAG,QAAQ,EACtB,IAAI,EACJ,eAAe,EACf,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,GAAG,MAAM,EACd,OAAO,GAAG,SAAS,EACnB,GAAG,KAAK,EACI,KAAI;AAChB,IAAA,MAAM,qBAAqB,GAAG,eAAe,IAAI,KAAK,IACpDA,gCAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,qBAAM,CAAC,kBAAkB,EAAA,QAAA,EACvCD,iCAACE,qBAAU,EAAA,EACT,IAAI,EAAE,IAAI,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC,EAC9B,OAAO,EAAE,CAAC,CAAC,KAAI;gBACb,CAAC,CAAC,eAAe,EAAE,CAAC;AACpB,gBAAA,IAAI,CAAC,QAAQ,IAAI,OAAO,EAAE;AACxB,oBAAA,OAAO,EAAE,CAAC;iBACX;aACF,EACD,QAAQ,EAAE,QAAQ,gBACP,cAAc,EACzB,SAAS,EAAED,qBAAM,CAAC,WAAW,EAE7B,QAAA,EAAAD,gCAAA,CAACG,+BAAgB,EAAA,EAAA,CAAG,EACT,CAAA,EAAA,CACT,IACJ,SAAS,CAAC;AAEd,IAAA,QACEH,gCAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,qBAAM,CAAC,SAAS,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAC9D,QAAA,EAAAD,gCAAA,CAACI,qBAAU,EAAA,EACT,WAAW,EAAEJ,gCAAC,CAAAK,kCAAmB,EAAG,EAAA,CAAA,EACpC,YAAY,EAAE,qBAAqB,EACnC,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EAAA,YAAA,EACR,WAAW,EACvB,OAAO,EAAE,OAAO,EACZ,GAAA,KAAK,EACT,CAAA,EAAA,CACE,EACN;AACJ,EAAE;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}

package/dist/v1/components/search/search.d.ts

@@ -1,24 +1,11 @@
-import { type VariantProps } from "class-variance-authority";
-declare const searchField: (props?: ({
-    size?: "small" | "large" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export interface SearchProps extends VariantProps<typeof searchField> {
-    className?: string;
-    disabled?: boolean;
-    placeholder?: string;
+import { InputFieldProps } from "../input-field/input-field";
+export interface SearchProps extends Omit<InputFieldProps, 'leadingIcon'> {
     showClearButton?: boolean;
     onClear?: () => void;
-    value?: string;
-    ref?: React.RefObject<HTMLInputElement>;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-    type?: string;
-    name?: string;
-    id?: string;
+    variant?: 'default' | 'borderless';
 }
 export declare const Search: {
-    ({ className, disabled, placeholder, size, showClearButton, onClear, value, ref, ...props }: SearchProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, disabled, placeholder, size, showClearButton, onClear, value, onChange, width, variant, ...props }: SearchProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export {};
 //# sourceMappingURL=search.d.ts.map