@raystack/apsara 0.56.5 → 1.0.0-rc.0

package/dist/components/grid/grid.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
-var jsxRuntime = require('react/jsx-runtime');
-var radixUi = require('radix-ui');
+var react = require('@base-ui/react');
 var React = require('react');
 
 const GAPS = {
@@ -11,7 +10,7 @@ const GAPS = {
     large: 'var(--rs-space-9)',
     'extra-large': 'var(--rs-space-11)'
 };
-const Grid = React.forwardRef(({ templateAreas, autoFlow, autoColumns, autoRows, columns, rows, gap, columnGap, rowGap, justifyItems, alignItems, justifyContent, alignContent, inline = false, style = {}, asChild, ...props }, ref) => {
+const Grid = React.forwardRef(({ templateAreas, autoFlow, autoColumns, autoRows, columns, rows, gap, columnGap, rowGap, justifyItems, alignItems, justifyContent, alignContent, inline = false, style = {}, render, ...props }, ref) => {
     const gridTemplateColumns = typeof columns === 'number' ? `repeat(${columns}, 1fr)` : columns;
     const gridTemplateRows = typeof rows === 'number' ? `repeat(${rows}, 1fr)` : rows;
     const gridTemplateAreas = React.useMemo(() => {
@@ -23,24 +22,30 @@ const Grid = React.forwardRef(({ templateAreas, autoFlow, autoColumns, autoRows,
         }
         return templateAreas;
     }, [templateAreas]);
-    const Comp = asChild ? radixUi.Slot.Root : 'div';
-    return (jsxRuntime.jsx(Comp, { ref: ref, style: {
-            display: inline ? 'inline-grid' : 'grid',
-            gridTemplateAreas,
-            gridAutoFlow: autoFlow,
-            gridAutoColumns: autoColumns,
-            gridAutoRows: autoRows,
-            gridTemplateColumns,
-            gridTemplateRows,
-            gap: gap && GAPS[gap],
-            columnGap: columnGap && GAPS[columnGap],
-            rowGap: rowGap && GAPS[rowGap],
-            justifyItems,
-            alignItems,
-            justifyContent,
-            alignContent,
-            ...style
-        }, ...props }));
+    const gridStyle = {
+        display: inline ? 'inline-grid' : 'grid',
+        gridTemplateAreas,
+        gridAutoFlow: autoFlow,
+        gridAutoColumns: autoColumns,
+        gridAutoRows: autoRows,
+        gridTemplateColumns,
+        gridTemplateRows,
+        gap: gap && GAPS[gap],
+        columnGap: columnGap && GAPS[columnGap],
+        rowGap: rowGap && GAPS[rowGap],
+        justifyItems,
+        alignItems,
+        justifyContent,
+        alignContent,
+        ...style
+    };
+    const element = react.useRender({
+        defaultTagName: 'div',
+        ref,
+        render,
+        props: react.mergeProps({ style: gridStyle }, props)
+    });
+    return element;
 });
 Grid.displayName = 'Grid';
 

package/dist/components/grid/grid.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"grid.cjs","sources":["../../../components/grid/grid.tsx"],"sourcesContent":["import { Slot } from 'radix-ui';\nimport { HTMLAttributes, forwardRef, useMemo } from 'react';\nimport { AlignExtendedType, AlignType } from './types';\n\nconst GAPS = {\n  'extra-small': 'var(--rs-space-2)',\n  small: 'var(--rs-space-3)',\n  medium: 'var(--rs-space-5)',\n  large: 'var(--rs-space-9)',\n  'extra-large': 'var(--rs-space-11)'\n} as const;\n\ntype GapType = keyof typeof GAPS;\n\ntype GridProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Supports CSS Grid template areas syntax.\n   *\n   * @example\n   * <Grid templateAreas=\"header header header\" />\n   * <Grid templateAreas={[\"header header header\", \"sidebar main main\", \"footer footer footer\"]} />\n   */\n  templateAreas?: string | string[];\n  autoFlow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense';\n  autoColumns?: string;\n  autoRows?: string;\n\n  /**\n   * Supports CSS Grid template columns syntax.\n   *\n   * If you pass a number, columns will be created using repeat(n, 1fr).\n   *\n   * @example\n   * <Grid columns=\"1fr 1fr 1fr\" />\n   * <Grid columns={3} />\n   */\n  columns?: string | number;\n\n  /**\n   * Supports CSS Grid template rows syntax.\n   *\n   * If you pass a number, rows will be created using repeat(n, 1fr).\n   *\n   * @example\n   * <Grid rows=\"1fr 1fr 1fr\" />\n   * <Grid rows={3} />\n   */\n  rows?: string | number;\n  gap?: GapType;\n  columnGap?: GapType;\n  rowGap?: GapType;\n  justifyItems?: AlignType;\n  alignItems?: AlignType;\n  justifyContent?: AlignExtendedType;\n  alignContent?: AlignExtendedType;\n  inline?: boolean;\n  asChild?: boolean;\n};\n\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(\n  (\n    {\n      templateAreas,\n      autoFlow,\n      autoColumns,\n      autoRows,\n      columns,\n      rows,\n      gap,\n      columnGap,\n      rowGap,\n      justifyItems,\n      alignItems,\n      justifyContent,\n      alignContent,\n      inline = false,\n      style = {},\n      asChild,\n      ...props\n    },\n    ref\n  ) => {\n    const gridTemplateColumns =\n      typeof columns === 'number' ? `repeat(${columns}, 1fr)` : columns;\n    const gridTemplateRows =\n      typeof rows === 'number' ? `repeat(${rows}, 1fr)` : rows;\n\n    const gridTemplateAreas = useMemo(() => {\n      if (Array.isArray(templateAreas)) {\n        return templateAreas\n          .map(area => `\"${area}\"`)\n          .join(' ')\n          .trim();\n      }\n      return templateAreas;\n    }, [templateAreas]);\n\n    const Comp = asChild ? Slot.Root : 'div';\n\n    return (\n      <Comp\n        ref={ref}\n        style={{\n          display: inline ? 'inline-grid' : 'grid',\n          gridTemplateAreas,\n          gridAutoFlow: autoFlow,\n          gridAutoColumns: autoColumns,\n          gridAutoRows: autoRows,\n          gridTemplateColumns,\n          gridTemplateRows,\n          gap: gap && GAPS[gap],\n          columnGap: columnGap && GAPS[columnGap],\n          rowGap: rowGap && GAPS[rowGap],\n          justifyItems,\n          alignItems,\n          justifyContent,\n          alignContent,\n          ...style\n        }}\n        {...props}\n      />\n    );\n  }\n);\n\nGrid.displayName = 'Grid';\n"],"names":["forwardRef","useMemo","Slot","_jsx"],"mappings":";;;;;;AAIA,MAAM,IAAI,GAAG;AACX,IAAA,aAAa,EAAE,mBAAmB;AAClC,IAAA,KAAK,EAAE,mBAAmB;AAC1B,IAAA,MAAM,EAAE,mBAAmB;AAC3B,IAAA,KAAK,EAAE,mBAAmB;AAC1B,IAAA,aAAa,EAAE,oBAAoB;CAC3B,CAAC;MAiDE,IAAI,GAAGA,gBAAU,CAC5B,CACE,EACE,aAAa,EACb,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,GAAG,EACH,SAAS,EACT,MAAM,EACN,YAAY,EACZ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,EAAE,EACV,OAAO,EACP,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,MAAM,mBAAmB,GACvB,OAAO,OAAO,KAAK,QAAQ,GAAG,CAAA,OAAA,EAAU,OAAO,CAAQ,MAAA,CAAA,GAAG,OAAO,CAAC;AACpE,IAAA,MAAM,gBAAgB,GACpB,OAAO,IAAI,KAAK,QAAQ,GAAG,CAAA,OAAA,EAAU,IAAI,CAAQ,MAAA,CAAA,GAAG,IAAI,CAAC;AAE3D,IAAA,MAAM,iBAAiB,GAAGC,aAAO,CAAC,MAAK;AACrC,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE;AAChC,YAAA,OAAO,aAAa;iBACjB,GAAG,CAAC,IAAI,IAAI,CAAI,CAAA,EAAA,IAAI,GAAG,CAAC;iBACxB,IAAI,CAAC,GAAG,CAAC;AACT,iBAAA,IAAI,EAAE,CAAC;SACX;AACD,QAAA,OAAO,aAAa,CAAC;AACvB,KAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;AAEpB,IAAA,MAAM,IAAI,GAAG,OAAO,GAAGC,YAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAEzC,QACEC,eAAC,IAAI,EAAA,EACH,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;YACL,OAAO,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM;YACxC,iBAAiB;AACjB,YAAA,YAAY,EAAE,QAAQ;AACtB,YAAA,eAAe,EAAE,WAAW;AAC5B,YAAA,YAAY,EAAE,QAAQ;YACtB,mBAAmB;YACnB,gBAAgB;AAChB,YAAA,GAAG,EAAE,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC;AACrB,YAAA,SAAS,EAAE,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC;AACvC,YAAA,MAAM,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC;YAC9B,YAAY;YACZ,UAAU;YACV,cAAc;YACd,YAAY;AACZ,YAAA,GAAG,KAAK;SACT,EACG,GAAA,KAAK,EACT,CAAA,EACF;AACJ,CAAC,EACD;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}
+{"version":3,"file":"grid.cjs","sources":["../../../components/grid/grid.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { forwardRef, useMemo } from 'react';\nimport { AlignExtendedType, AlignType } from './types';\n\nconst GAPS = {\n  'extra-small': 'var(--rs-space-2)',\n  small: 'var(--rs-space-3)',\n  medium: 'var(--rs-space-5)',\n  large: 'var(--rs-space-9)',\n  'extra-large': 'var(--rs-space-11)'\n} as const;\n\ntype GapType = keyof typeof GAPS;\n\ntype GridProps = useRender.ComponentProps<'div'> & {\n  /**\n   * Supports CSS Grid template areas syntax.\n   *\n   * @example\n   * <Grid templateAreas=\"header header header\" />\n   * <Grid templateAreas={[\"header header header\", \"sidebar main main\", \"footer footer footer\"]} />\n   */\n  templateAreas?: string | string[];\n  autoFlow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense';\n  autoColumns?: string;\n  autoRows?: string;\n\n  /**\n   * Supports CSS Grid template columns syntax.\n   *\n   * If you pass a number, columns will be created using repeat(n, 1fr).\n   *\n   * @example\n   * <Grid columns=\"1fr 1fr 1fr\" />\n   * <Grid columns={3} />\n   */\n  columns?: string | number;\n\n  /**\n   * Supports CSS Grid template rows syntax.\n   *\n   * If you pass a number, rows will be created using repeat(n, 1fr).\n   *\n   * @example\n   * <Grid rows=\"1fr 1fr 1fr\" />\n   * <Grid rows={3} />\n   */\n  rows?: string | number;\n  gap?: GapType;\n  columnGap?: GapType;\n  rowGap?: GapType;\n  justifyItems?: AlignType;\n  alignItems?: AlignType;\n  justifyContent?: AlignExtendedType;\n  alignContent?: AlignExtendedType;\n  inline?: boolean;\n};\n\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(\n  (\n    {\n      templateAreas,\n      autoFlow,\n      autoColumns,\n      autoRows,\n      columns,\n      rows,\n      gap,\n      columnGap,\n      rowGap,\n      justifyItems,\n      alignItems,\n      justifyContent,\n      alignContent,\n      inline = false,\n      style = {},\n      render,\n      ...props\n    },\n    ref\n  ) => {\n    const gridTemplateColumns =\n      typeof columns === 'number' ? `repeat(${columns}, 1fr)` : columns;\n    const gridTemplateRows =\n      typeof rows === 'number' ? `repeat(${rows}, 1fr)` : rows;\n\n    const gridTemplateAreas = useMemo(() => {\n      if (Array.isArray(templateAreas)) {\n        return templateAreas\n          .map(area => `\"${area}\"`)\n          .join(' ')\n          .trim();\n      }\n      return templateAreas;\n    }, [templateAreas]);\n\n    const gridStyle = {\n      display: inline ? 'inline-grid' : 'grid',\n      gridTemplateAreas,\n      gridAutoFlow: autoFlow,\n      gridAutoColumns: autoColumns,\n      gridAutoRows: autoRows,\n      gridTemplateColumns,\n      gridTemplateRows,\n      gap: gap && GAPS[gap],\n      columnGap: columnGap && GAPS[columnGap],\n      rowGap: rowGap && GAPS[rowGap],\n      justifyItems,\n      alignItems,\n      justifyContent,\n      alignContent,\n      ...style\n    };\n\n    const element = useRender({\n      defaultTagName: 'div',\n      ref,\n      render,\n      props: mergeProps<'div'>({ style: gridStyle }, props)\n    });\n\n    return element;\n  }\n);\n\nGrid.displayName = 'Grid';\n"],"names":["forwardRef","useMemo","useRender","mergeProps"],"mappings":";;;;;AAIA,MAAM,IAAI,GAAG;AACX,IAAA,aAAa,EAAE,mBAAmB;AAClC,IAAA,KAAK,EAAE,mBAAmB;AAC1B,IAAA,MAAM,EAAE,mBAAmB;AAC3B,IAAA,KAAK,EAAE,mBAAmB;AAC1B,IAAA,aAAa,EAAE,oBAAoB;CAC3B,CAAC;MAgDE,IAAI,GAAGA,gBAAU,CAC5B,CACE,EACE,aAAa,EACb,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,GAAG,EACH,SAAS,EACT,MAAM,EACN,YAAY,EACZ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,EAAE,EACV,MAAM,EACN,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,MAAM,mBAAmB,GACvB,OAAO,OAAO,KAAK,QAAQ,GAAG,CAAA,OAAA,EAAU,OAAO,CAAQ,MAAA,CAAA,GAAG,OAAO,CAAC;AACpE,IAAA,MAAM,gBAAgB,GACpB,OAAO,IAAI,KAAK,QAAQ,GAAG,CAAA,OAAA,EAAU,IAAI,CAAQ,MAAA,CAAA,GAAG,IAAI,CAAC;AAE3D,IAAA,MAAM,iBAAiB,GAAGC,aAAO,CAAC,MAAK;AACrC,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE;AAChC,YAAA,OAAO,aAAa;iBACjB,GAAG,CAAC,IAAI,IAAI,CAAI,CAAA,EAAA,IAAI,GAAG,CAAC;iBACxB,IAAI,CAAC,GAAG,CAAC;AACT,iBAAA,IAAI,EAAE,CAAC;SACX;AACD,QAAA,OAAO,aAAa,CAAC;AACvB,KAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;AAEpB,IAAA,MAAM,SAAS,GAAG;QAChB,OAAO,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM;QACxC,iBAAiB;AACjB,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,eAAe,EAAE,WAAW;AAC5B,QAAA,YAAY,EAAE,QAAQ;QACtB,mBAAmB;QACnB,gBAAgB;AAChB,QAAA,GAAG,EAAE,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC;AACrB,QAAA,SAAS,EAAE,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC;AACvC,QAAA,MAAM,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC;QAC9B,YAAY;QACZ,UAAU;QACV,cAAc;QACd,YAAY;AACZ,QAAA,GAAG,KAAK;KACT,CAAC;IAEF,MAAM,OAAO,GAAGC,eAAS,CAAC;AACxB,QAAA,cAAc,EAAE,KAAK;QACrB,GAAG;QACH,MAAM;QACN,KAAK,EAAEC,gBAAU,CAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,CAAC;AACtD,KAAA,CAAC,CAAC;AAEH,IAAA,OAAO,OAAO,CAAC;AACjB,CAAC,EACD;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

package/dist/components/grid/grid.d.ts

@@ -1,6 +1,14 @@
-import { HTMLAttributes } from 'react';
+import { useRender } from '@base-ui/react';
 import { AlignExtendedType, AlignType } from './types';
-export declare const Grid: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+declare const GAPS: {
+    readonly 'extra-small': "var(--rs-space-2)";
+    readonly small: "var(--rs-space-3)";
+    readonly medium: "var(--rs-space-5)";
+    readonly large: "var(--rs-space-9)";
+    readonly 'extra-large': "var(--rs-space-11)";
+};
+type GapType = keyof typeof GAPS;
+type GridProps = useRender.ComponentProps<'div'> & {
     /**
      * Supports CSS Grid template areas syntax.
      *
@@ -8,10 +16,10 @@ export declare const Grid: import("react").ForwardRefExoticComponent<HTMLAttribu
      * <Grid templateAreas="header header header" />
      * <Grid templateAreas={["header header header", "sidebar main main", "footer footer footer"]} />
      */
-    templateAreas?: string | string[] | undefined;
-    autoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
-    autoColumns?: string | undefined;
-    autoRows?: string | undefined;
+    templateAreas?: string | string[];
+    autoFlow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense';
+    autoColumns?: string;
+    autoRows?: string;
     /**
      * Supports CSS Grid template columns syntax.
      *
@@ -21,7 +29,7 @@ export declare const Grid: import("react").ForwardRefExoticComponent<HTMLAttribu
      * <Grid columns="1fr 1fr 1fr" />
      * <Grid columns={3} />
      */
-    columns?: string | number | undefined;
+    columns?: string | number;
     /**
      * Supports CSS Grid template rows syntax.
      *
@@ -31,15 +39,16 @@ export declare const Grid: import("react").ForwardRefExoticComponent<HTMLAttribu
      * <Grid rows="1fr 1fr 1fr" />
      * <Grid rows={3} />
      */
-    rows?: string | number | undefined;
-    gap?: "small" | "extra-small" | "medium" | "large" | "extra-large" | undefined;
-    columnGap?: "small" | "extra-small" | "medium" | "large" | "extra-large" | undefined;
-    rowGap?: "small" | "extra-small" | "medium" | "large" | "extra-large" | undefined;
-    justifyItems?: AlignType | undefined;
-    alignItems?: AlignType | undefined;
-    justifyContent?: AlignExtendedType | undefined;
-    alignContent?: AlignExtendedType | undefined;
-    inline?: boolean | undefined;
-    asChild?: boolean | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;
+    rows?: string | number;
+    gap?: GapType;
+    columnGap?: GapType;
+    rowGap?: GapType;
+    justifyItems?: AlignType;
+    alignItems?: AlignType;
+    justifyContent?: AlignExtendedType;
+    alignContent?: AlignExtendedType;
+    inline?: boolean;
+};
+export declare const Grid: import("react").ForwardRefExoticComponent<Omit<GridProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};
 //# sourceMappingURL=grid.d.ts.map

package/dist/components/grid/grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../components/grid/grid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAuB,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAyDvD,eAAO,MAAM,IAAI;IA5Cf;;;;;;OAMG;;;;;IAMH;;;;;;;;OAQG;;IAGH;;;;;;;;OAQG;;;;;;;;;;;kDA6EJ,CAAC"}
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../components/grid/grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEvD,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEvD,QAAA,MAAM,IAAI;;;;;;CAMA,CAAC;AAEX,KAAK,OAAO,GAAG,MAAM,OAAO,IAAI,CAAC;AAEjC,KAAK,SAAS,GAAG,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACjD;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,GAAG,cAAc,CAAC;IACrE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE1B;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,cAAc,CAAC,EAAE,iBAAiB,CAAC;IACnC,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,IAAI,mHAiEhB,CAAC"}

package/dist/components/grid/grid.js

@@ -1,5 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
-import { Slot } from 'radix-ui';
+import { useRender, mergeProps } from '@base-ui/react';
 import { forwardRef, useMemo } from 'react';
 
 const GAPS = {
@@ -9,7 +8,7 @@ const GAPS = {
     large: 'var(--rs-space-9)',
     'extra-large': 'var(--rs-space-11)'
 };
-const Grid = forwardRef(({ templateAreas, autoFlow, autoColumns, autoRows, columns, rows, gap, columnGap, rowGap, justifyItems, alignItems, justifyContent, alignContent, inline = false, style = {}, asChild, ...props }, ref) => {
+const Grid = forwardRef(({ templateAreas, autoFlow, autoColumns, autoRows, columns, rows, gap, columnGap, rowGap, justifyItems, alignItems, justifyContent, alignContent, inline = false, style = {}, render, ...props }, ref) => {
     const gridTemplateColumns = typeof columns === 'number' ? `repeat(${columns}, 1fr)` : columns;
     const gridTemplateRows = typeof rows === 'number' ? `repeat(${rows}, 1fr)` : rows;
     const gridTemplateAreas = useMemo(() => {
@@ -21,24 +20,30 @@ const Grid = forwardRef(({ templateAreas, autoFlow, autoColumns, autoRows, colum
         }
         return templateAreas;
     }, [templateAreas]);
-    const Comp = asChild ? Slot.Root : 'div';
-    return (jsx(Comp, { ref: ref, style: {
-            display: inline ? 'inline-grid' : 'grid',
-            gridTemplateAreas,
-            gridAutoFlow: autoFlow,
-            gridAutoColumns: autoColumns,
-            gridAutoRows: autoRows,
-            gridTemplateColumns,
-            gridTemplateRows,
-            gap: gap && GAPS[gap],
-            columnGap: columnGap && GAPS[columnGap],
-            rowGap: rowGap && GAPS[rowGap],
-            justifyItems,
-            alignItems,
-            justifyContent,
-            alignContent,
-            ...style
-        }, ...props }));
+    const gridStyle = {
+        display: inline ? 'inline-grid' : 'grid',
+        gridTemplateAreas,
+        gridAutoFlow: autoFlow,
+        gridAutoColumns: autoColumns,
+        gridAutoRows: autoRows,
+        gridTemplateColumns,
+        gridTemplateRows,
+        gap: gap && GAPS[gap],
+        columnGap: columnGap && GAPS[columnGap],
+        rowGap: rowGap && GAPS[rowGap],
+        justifyItems,
+        alignItems,
+        justifyContent,
+        alignContent,
+        ...style
+    };
+    const element = useRender({
+        defaultTagName: 'div',
+        ref,
+        render,
+        props: mergeProps({ style: gridStyle }, props)
+    });
+    return element;
 });
 Grid.displayName = 'Grid';
 

package/dist/components/grid/grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid.js","sources":["../../../components/grid/grid.tsx"],"sourcesContent":["import { Slot } from 'radix-ui';\nimport { HTMLAttributes, forwardRef, useMemo } from 'react';\nimport { AlignExtendedType, AlignType } from './types';\n\nconst GAPS = {\n  'extra-small': 'var(--rs-space-2)',\n  small: 'var(--rs-space-3)',\n  medium: 'var(--rs-space-5)',\n  large: 'var(--rs-space-9)',\n  'extra-large': 'var(--rs-space-11)'\n} as const;\n\ntype GapType = keyof typeof GAPS;\n\ntype GridProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Supports CSS Grid template areas syntax.\n   *\n   * @example\n   * <Grid templateAreas=\"header header header\" />\n   * <Grid templateAreas={[\"header header header\", \"sidebar main main\", \"footer footer footer\"]} />\n   */\n  templateAreas?: string | string[];\n  autoFlow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense';\n  autoColumns?: string;\n  autoRows?: string;\n\n  /**\n   * Supports CSS Grid template columns syntax.\n   *\n   * If you pass a number, columns will be created using repeat(n, 1fr).\n   *\n   * @example\n   * <Grid columns=\"1fr 1fr 1fr\" />\n   * <Grid columns={3} />\n   */\n  columns?: string | number;\n\n  /**\n   * Supports CSS Grid template rows syntax.\n   *\n   * If you pass a number, rows will be created using repeat(n, 1fr).\n   *\n   * @example\n   * <Grid rows=\"1fr 1fr 1fr\" />\n   * <Grid rows={3} />\n   */\n  rows?: string | number;\n  gap?: GapType;\n  columnGap?: GapType;\n  rowGap?: GapType;\n  justifyItems?: AlignType;\n  alignItems?: AlignType;\n  justifyContent?: AlignExtendedType;\n  alignContent?: AlignExtendedType;\n  inline?: boolean;\n  asChild?: boolean;\n};\n\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(\n  (\n    {\n      templateAreas,\n      autoFlow,\n      autoColumns,\n      autoRows,\n      columns,\n      rows,\n      gap,\n      columnGap,\n      rowGap,\n      justifyItems,\n      alignItems,\n      justifyContent,\n      alignContent,\n      inline = false,\n      style = {},\n      asChild,\n      ...props\n    },\n    ref\n  ) => {\n    const gridTemplateColumns =\n      typeof columns === 'number' ? `repeat(${columns}, 1fr)` : columns;\n    const gridTemplateRows =\n      typeof rows === 'number' ? `repeat(${rows}, 1fr)` : rows;\n\n    const gridTemplateAreas = useMemo(() => {\n      if (Array.isArray(templateAreas)) {\n        return templateAreas\n          .map(area => `\"${area}\"`)\n          .join(' ')\n          .trim();\n      }\n      return templateAreas;\n    }, [templateAreas]);\n\n    const Comp = asChild ? Slot.Root : 'div';\n\n    return (\n      <Comp\n        ref={ref}\n        style={{\n          display: inline ? 'inline-grid' : 'grid',\n          gridTemplateAreas,\n          gridAutoFlow: autoFlow,\n          gridAutoColumns: autoColumns,\n          gridAutoRows: autoRows,\n          gridTemplateColumns,\n          gridTemplateRows,\n          gap: gap && GAPS[gap],\n          columnGap: columnGap && GAPS[columnGap],\n          rowGap: rowGap && GAPS[rowGap],\n          justifyItems,\n          alignItems,\n          justifyContent,\n          alignContent,\n          ...style\n        }}\n        {...props}\n      />\n    );\n  }\n);\n\nGrid.displayName = 'Grid';\n"],"names":["_jsx"],"mappings":";;;;AAIA,MAAM,IAAI,GAAG;AACX,IAAA,aAAa,EAAE,mBAAmB;AAClC,IAAA,KAAK,EAAE,mBAAmB;AAC1B,IAAA,MAAM,EAAE,mBAAmB;AAC3B,IAAA,KAAK,EAAE,mBAAmB;AAC1B,IAAA,aAAa,EAAE,oBAAoB;CAC3B,CAAC;MAiDE,IAAI,GAAG,UAAU,CAC5B,CACE,EACE,aAAa,EACb,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,GAAG,EACH,SAAS,EACT,MAAM,EACN,YAAY,EACZ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,EAAE,EACV,OAAO,EACP,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,MAAM,mBAAmB,GACvB,OAAO,OAAO,KAAK,QAAQ,GAAG,CAAA,OAAA,EAAU,OAAO,CAAQ,MAAA,CAAA,GAAG,OAAO,CAAC;AACpE,IAAA,MAAM,gBAAgB,GACpB,OAAO,IAAI,KAAK,QAAQ,GAAG,CAAA,OAAA,EAAU,IAAI,CAAQ,MAAA,CAAA,GAAG,IAAI,CAAC;AAE3D,IAAA,MAAM,iBAAiB,GAAG,OAAO,CAAC,MAAK;AACrC,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE;AAChC,YAAA,OAAO,aAAa;iBACjB,GAAG,CAAC,IAAI,IAAI,CAAI,CAAA,EAAA,IAAI,GAAG,CAAC;iBACxB,IAAI,CAAC,GAAG,CAAC;AACT,iBAAA,IAAI,EAAE,CAAC;SACX;AACD,QAAA,OAAO,aAAa,CAAC;AACvB,KAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;AAEpB,IAAA,MAAM,IAAI,GAAG,OAAO,GAAG,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAEzC,QACEA,IAAC,IAAI,EAAA,EACH,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;YACL,OAAO,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM;YACxC,iBAAiB;AACjB,YAAA,YAAY,EAAE,QAAQ;AACtB,YAAA,eAAe,EAAE,WAAW;AAC5B,YAAA,YAAY,EAAE,QAAQ;YACtB,mBAAmB;YACnB,gBAAgB;AAChB,YAAA,GAAG,EAAE,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC;AACrB,YAAA,SAAS,EAAE,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC;AACvC,YAAA,MAAM,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC;YAC9B,YAAY;YACZ,UAAU;YACV,cAAc;YACd,YAAY;AACZ,YAAA,GAAG,KAAK;SACT,EACG,GAAA,KAAK,EACT,CAAA,EACF;AACJ,CAAC,EACD;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}
+{"version":3,"file":"grid.js","sources":["../../../components/grid/grid.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { forwardRef, useMemo } from 'react';\nimport { AlignExtendedType, AlignType } from './types';\n\nconst GAPS = {\n  'extra-small': 'var(--rs-space-2)',\n  small: 'var(--rs-space-3)',\n  medium: 'var(--rs-space-5)',\n  large: 'var(--rs-space-9)',\n  'extra-large': 'var(--rs-space-11)'\n} as const;\n\ntype GapType = keyof typeof GAPS;\n\ntype GridProps = useRender.ComponentProps<'div'> & {\n  /**\n   * Supports CSS Grid template areas syntax.\n   *\n   * @example\n   * <Grid templateAreas=\"header header header\" />\n   * <Grid templateAreas={[\"header header header\", \"sidebar main main\", \"footer footer footer\"]} />\n   */\n  templateAreas?: string | string[];\n  autoFlow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense';\n  autoColumns?: string;\n  autoRows?: string;\n\n  /**\n   * Supports CSS Grid template columns syntax.\n   *\n   * If you pass a number, columns will be created using repeat(n, 1fr).\n   *\n   * @example\n   * <Grid columns=\"1fr 1fr 1fr\" />\n   * <Grid columns={3} />\n   */\n  columns?: string | number;\n\n  /**\n   * Supports CSS Grid template rows syntax.\n   *\n   * If you pass a number, rows will be created using repeat(n, 1fr).\n   *\n   * @example\n   * <Grid rows=\"1fr 1fr 1fr\" />\n   * <Grid rows={3} />\n   */\n  rows?: string | number;\n  gap?: GapType;\n  columnGap?: GapType;\n  rowGap?: GapType;\n  justifyItems?: AlignType;\n  alignItems?: AlignType;\n  justifyContent?: AlignExtendedType;\n  alignContent?: AlignExtendedType;\n  inline?: boolean;\n};\n\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(\n  (\n    {\n      templateAreas,\n      autoFlow,\n      autoColumns,\n      autoRows,\n      columns,\n      rows,\n      gap,\n      columnGap,\n      rowGap,\n      justifyItems,\n      alignItems,\n      justifyContent,\n      alignContent,\n      inline = false,\n      style = {},\n      render,\n      ...props\n    },\n    ref\n  ) => {\n    const gridTemplateColumns =\n      typeof columns === 'number' ? `repeat(${columns}, 1fr)` : columns;\n    const gridTemplateRows =\n      typeof rows === 'number' ? `repeat(${rows}, 1fr)` : rows;\n\n    const gridTemplateAreas = useMemo(() => {\n      if (Array.isArray(templateAreas)) {\n        return templateAreas\n          .map(area => `\"${area}\"`)\n          .join(' ')\n          .trim();\n      }\n      return templateAreas;\n    }, [templateAreas]);\n\n    const gridStyle = {\n      display: inline ? 'inline-grid' : 'grid',\n      gridTemplateAreas,\n      gridAutoFlow: autoFlow,\n      gridAutoColumns: autoColumns,\n      gridAutoRows: autoRows,\n      gridTemplateColumns,\n      gridTemplateRows,\n      gap: gap && GAPS[gap],\n      columnGap: columnGap && GAPS[columnGap],\n      rowGap: rowGap && GAPS[rowGap],\n      justifyItems,\n      alignItems,\n      justifyContent,\n      alignContent,\n      ...style\n    };\n\n    const element = useRender({\n      defaultTagName: 'div',\n      ref,\n      render,\n      props: mergeProps<'div'>({ style: gridStyle }, props)\n    });\n\n    return element;\n  }\n);\n\nGrid.displayName = 'Grid';\n"],"names":[],"mappings":";;;AAIA,MAAM,IAAI,GAAG;AACX,IAAA,aAAa,EAAE,mBAAmB;AAClC,IAAA,KAAK,EAAE,mBAAmB;AAC1B,IAAA,MAAM,EAAE,mBAAmB;AAC3B,IAAA,KAAK,EAAE,mBAAmB;AAC1B,IAAA,aAAa,EAAE,oBAAoB;CAC3B,CAAC;MAgDE,IAAI,GAAG,UAAU,CAC5B,CACE,EACE,aAAa,EACb,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,GAAG,EACH,SAAS,EACT,MAAM,EACN,YAAY,EACZ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,EAAE,EACV,MAAM,EACN,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,MAAM,mBAAmB,GACvB,OAAO,OAAO,KAAK,QAAQ,GAAG,CAAA,OAAA,EAAU,OAAO,CAAQ,MAAA,CAAA,GAAG,OAAO,CAAC;AACpE,IAAA,MAAM,gBAAgB,GACpB,OAAO,IAAI,KAAK,QAAQ,GAAG,CAAA,OAAA,EAAU,IAAI,CAAQ,MAAA,CAAA,GAAG,IAAI,CAAC;AAE3D,IAAA,MAAM,iBAAiB,GAAG,OAAO,CAAC,MAAK;AACrC,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE;AAChC,YAAA,OAAO,aAAa;iBACjB,GAAG,CAAC,IAAI,IAAI,CAAI,CAAA,EAAA,IAAI,GAAG,CAAC;iBACxB,IAAI,CAAC,GAAG,CAAC;AACT,iBAAA,IAAI,EAAE,CAAC;SACX;AACD,QAAA,OAAO,aAAa,CAAC;AACvB,KAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;AAEpB,IAAA,MAAM,SAAS,GAAG;QAChB,OAAO,EAAE,MAAM,GAAG,aAAa,GAAG,MAAM;QACxC,iBAAiB;AACjB,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,eAAe,EAAE,WAAW;AAC5B,QAAA,YAAY,EAAE,QAAQ;QACtB,mBAAmB;QACnB,gBAAgB;AAChB,QAAA,GAAG,EAAE,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC;AACrB,QAAA,SAAS,EAAE,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC;AACvC,QAAA,MAAM,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC;QAC9B,YAAY;QACZ,UAAU;QACV,cAAc;QACd,YAAY;AACZ,QAAA,GAAG,KAAK;KACT,CAAC;IAEF,MAAM,OAAO,GAAG,SAAS,CAAC;AACxB,QAAA,cAAc,EAAE,KAAK;QACrB,GAAG;QACH,MAAM;QACN,KAAK,EAAE,UAAU,CAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,CAAC;AACtD,KAAA,CAAC,CAAC;AAEH,IAAA,OAAO,OAAO,CAAC;AACjB,CAAC,EACD;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

package/dist/components/grid/index.d.ts

@@ -1,4 +1,6 @@
-export declare const Grid: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
+export declare const Grid: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    render?: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("@base-ui/react").ComponentRenderFn<import("@base-ui/react").HTMLProps, {}> | undefined;
+} & {
     templateAreas?: string | string[] | undefined;
     autoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
     autoColumns?: string | undefined;
@@ -13,9 +15,10 @@ export declare const Grid: import("react").ForwardRefExoticComponent<import("rea
     justifyContent?: import("./types").AlignExtendedType | undefined;
     alignContent?: import("./types").AlignExtendedType | undefined;
     inline?: boolean | undefined;
-    asChild?: boolean | undefined;
-} & import("react").RefAttributes<HTMLDivElement>> & {
-    Item: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Item: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+        render?: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("@base-ui/react").ComponentRenderFn<import("@base-ui/react").HTMLProps, {}> | undefined;
+    } & {
         area?: string | undefined;
         colStart?: string | number | undefined;
         colEnd?: string | number | undefined;
@@ -25,7 +28,6 @@ export declare const Grid: import("react").ForwardRefExoticComponent<import("rea
         rowSpan?: string | number | undefined;
         justifySelf?: import("./types").AlignType | undefined;
         alignSelf?: import("./types").AlignType | undefined;
-        asChild?: boolean | undefined;
-    } & import("react").RefAttributes<HTMLDivElement>>;
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/grid/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/grid/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEf,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/grid/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEf,CAAC"}

package/dist/components/headline/headline.d.ts

@@ -23,7 +23,7 @@ export declare const Headline: import("react").ForwardRefExoticComponent<Variant
      */
     size?: "small" | "medium" | "large" | "t1" | "t2" | "t3" | "t4" | undefined;
 } & HTMLAttributes<HTMLHeadingElement> & {
-    as?: "h2" | "h3" | "h1" | "h4" | "h5" | "h6" | undefined;
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
 } & import("react").RefAttributes<HTMLHeadingElement>>;
 export {};
 //# sourceMappingURL=headline.d.ts.map

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

@@ -26,8 +26,8 @@ const inputWrapper = classVarianceAuthority.cva(inputField_module.default.inputW
         variant: 'default'
     }
 });
-const InputField = React.forwardRef(({ className, disabled, label, helperText, placeholder, error, leadingIcon, trailingIcon, optional, prefix, suffix, width, chips, maxChipsVisible = 2, size, infoTooltip, variant = 'default', ...props }, ref) => {
-    return (jsxRuntime.jsxs("div", { className: inputField_module.default.container, style: { width: width || '100%' }, children: [label && (jsxRuntime.jsxs("div", { className: inputField_module.default.labelContainer, children: [jsxRuntime.jsxs("label", { className: classVarianceAuthority.cx(inputField_module.default.label, disabled && inputField_module.default['label-disabled']), children: [label, optional && jsxRuntime.jsx("span", { className: inputField_module.default.optional, children: "(optional)" })] }), infoTooltip && (jsxRuntime.jsx(tooltip.Tooltip, { message: infoTooltip, side: 'right', children: jsxRuntime.jsx("span", { className: inputField_module.default.helpIcon, children: jsxRuntime.jsx(reactIcons.InfoCircledIcon, {}) }) }))] })), jsxRuntime.jsxs("div", { className: classVarianceAuthority.cx(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.jsx("div", { className: inputField_module.default['leading-icon'], children: leadingIcon })), prefix && jsxRuntime.jsx("div", { className: inputField_module.default.prefix, children: prefix }), jsxRuntime.jsxs("div", { className: inputField_module.default['chip-input-container'], children: [chips?.slice(0, maxChipsVisible).map((chip$1, index) => (jsxRuntime.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.jsxs("span", { className: inputField_module.default['chip-overflow'], children: ["+", chips.length - maxChipsVisible] })), jsxRuntime.jsx("input", { ref: ref, className: classVarianceAuthority.cx(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.jsx("div", { className: inputField_module.default.suffix, children: suffix }), trailingIcon && (jsxRuntime.jsx("div", { className: inputField_module.default['trailing-icon'], children: trailingIcon }))] }), (error || helperText) && (jsxRuntime.jsx("span", { className: classVarianceAuthority.cx(inputField_module.default['helper-text'], error && inputField_module.default['helper-text-error'], disabled && inputField_module.default['helper-text-disabled']), children: error || helperText }))] }));
+const InputField = React.forwardRef(({ className, disabled, label, helperText, placeholder, error, leadingIcon, trailingIcon, optional, prefix, suffix, width, chips, maxChipsVisible = 2, size, infoTooltip, variant = 'default', containerRef, ...props }, ref) => {
+    return (jsxRuntime.jsxs("div", { className: inputField_module.default.container, style: { width: width || '100%' }, children: [label && (jsxRuntime.jsxs("div", { className: inputField_module.default.labelContainer, children: [jsxRuntime.jsxs("label", { className: classVarianceAuthority.cx(inputField_module.default.label, disabled && inputField_module.default['label-disabled']), children: [label, optional && jsxRuntime.jsx("span", { className: inputField_module.default.optional, children: "(optional)" })] }), infoTooltip && (jsxRuntime.jsx(tooltip.Tooltip, { message: infoTooltip, side: 'right', children: jsxRuntime.jsx("span", { className: inputField_module.default.helpIcon, children: jsxRuntime.jsx(reactIcons.InfoCircledIcon, {}) }) }))] })), jsxRuntime.jsxs("div", { className: classVarianceAuthority.cx(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']), ref: containerRef, children: [leadingIcon && (jsxRuntime.jsx("div", { className: inputField_module.default['leading-icon'], children: leadingIcon })), prefix && jsxRuntime.jsx("div", { className: inputField_module.default.prefix, children: prefix }), jsxRuntime.jsxs("div", { className: inputField_module.default['chip-input-container'], children: [chips?.slice(0, maxChipsVisible).map((chip$1, index) => (jsxRuntime.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.jsxs("span", { className: inputField_module.default['chip-overflow'], children: ["+", chips.length - maxChipsVisible] })), jsxRuntime.jsx("input", { ref: ref, className: classVarianceAuthority.cx(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.jsx("div", { className: inputField_module.default.suffix, children: suffix }), trailingIcon && (jsxRuntime.jsx("div", { className: inputField_module.default['trailing-icon'], children: trailingIcon }))] }), (error || helperText) && (jsxRuntime.jsx("span", { className: classVarianceAuthority.cx(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/components/input-field/input-field.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input-field.cjs","sources":["../../../components/input-field/input-field.tsx"],"sourcesContent":["'use client';\n\nimport { InfoCircledIcon } from '@radix-ui/react-icons';\nimport { cva, cx, type VariantProps } from 'class-variance-authority';\nimport { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react';\nimport { Chip } from '../chip';\nimport { Tooltip } from '../tooltip';\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  infoTooltip?: string;\n  variant?: 'default' | 'borderless';\n}\n\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    {\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      size,\n      infoTooltip,\n      variant = 'default',\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div className={styles.container} style={{ width: width || '100%' }}>\n        {label && (\n          <div className={styles.labelContainer}>\n            <label\n              className={cx(styles.label, disabled && styles['label-disabled'])}\n            >\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={cx(\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 && (\n            <div className={styles['leading-icon']}>{leadingIcon}</div>\n          )}\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={cx(\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 && (\n            <div className={styles['trailing-icon']}>{trailingIcon}</div>\n          )}\n        </div>\n        {(error || helperText) && (\n          <span\n            className={cx(\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);\n\nInputField.displayName = 'InputField';\n"],"names":[],"mappings":";;;;;;;;;;;AASA;AAEA;AACE;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACD;AACE;AACA;AACD;AACF;AAqBY;;AA8GX;AAGF;;"}
+{"version":3,"file":"input-field.cjs","sources":["../../../components/input-field/input-field.tsx"],"sourcesContent":["'use client';\n\nimport { InfoCircledIcon } from '@radix-ui/react-icons';\nimport { cva, cx, type VariantProps } from 'class-variance-authority';\nimport {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactNode,\n  RefObject\n} from 'react';\nimport { Chip } from '../chip';\nimport { Tooltip } from '../tooltip';\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  infoTooltip?: string;\n  variant?: 'default' | 'borderless';\n  containerRef?: RefObject<HTMLDivElement | null>;\n}\n\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    {\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      size,\n      infoTooltip,\n      variant = 'default',\n      containerRef,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div className={styles.container} style={{ width: width || '100%' }}>\n        {label && (\n          <div className={styles.labelContainer}>\n            <label\n              className={cx(styles.label, disabled && styles['label-disabled'])}\n            >\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={cx(\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          ref={containerRef}\n        >\n          {leadingIcon && (\n            <div className={styles['leading-icon']}>{leadingIcon}</div>\n          )}\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={cx(\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 && (\n            <div className={styles['trailing-icon']}>{trailingIcon}</div>\n          )}\n        </div>\n        {(error || helperText) && (\n          <span\n            className={cx(\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);\n\nInputField.displayName = 'InputField';\n"],"names":[],"mappings":";;;;;;;;;;;AAcA;AAEA;AACE;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACD;AACE;AACA;AACD;AACF;AAsBY;;AAgHX;AAGF;;"}

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

@@ -1,5 +1,5 @@
 import { type VariantProps } from 'class-variance-authority';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode, RefObject } from 'react';
 declare const inputWrapper: (props?: ({
     size?: "small" | "large" | null | undefined;
     variant?: "default" | "borderless" | null | undefined;
@@ -22,6 +22,7 @@ export interface InputFieldProps extends Omit<ComponentPropsWithoutRef<'input'>,
     maxChipsVisible?: number;
     infoTooltip?: string;
     variant?: 'default' | 'borderless';
+    containerRef?: RefObject<HTMLDivElement | null>;
 }
 export declare const InputField: import("react").ForwardRefExoticComponent<InputFieldProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"input-field.d.ts","sourceRoot":"","sources":["../../../components/input-field/input-field.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,wBAAwB,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAOxE,QAAA,MAAM,YAAY;;;8EAehB,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,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;CACpC;AAED,eAAO,MAAM,UAAU,8GA+GtB,CAAC"}
+{"version":3,"file":"input-field.d.ts","sourceRoot":"","sources":["../../../components/input-field/input-field.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EACL,wBAAwB,EAExB,SAAS,EACT,SAAS,EACV,MAAM,OAAO,CAAC;AAOf,QAAA,MAAM,YAAY;;;8EAehB,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,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IACnC,YAAY,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,UAAU,8GAiHtB,CAAC"}

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

@@ -24,8 +24,8 @@ const inputWrapper = cva(styles.inputWrapper, {
         variant: 'default'
     }
 });
-const InputField = forwardRef(({ className, disabled, label, helperText, placeholder, error, leadingIcon, trailingIcon, optional, prefix, suffix, width, chips, maxChipsVisible = 2, size, infoTooltip, variant = 'default', ...props }, ref) => {
-    return (jsxs("div", { className: styles.container, style: { width: width || '100%' }, children: [label && (jsxs("div", { className: styles.labelContainer, children: [jsxs("label", { className: cx(styles.label, disabled && styles['label-disabled']), children: [label, optional && jsx("span", { className: styles.optional, children: "(optional)" })] }), infoTooltip && (jsx(Tooltip, { message: infoTooltip, side: 'right', children: jsx("span", { className: styles.helpIcon, children: jsx(InfoCircledIcon, {}) }) }))] })), jsxs("div", { className: cx(inputWrapper({ size, variant, className }), error && styles['input-error-wrapper'], disabled && styles['input-disabled-wrapper'], chips?.length && styles['has-chips']), children: [leadingIcon && (jsx("div", { className: styles['leading-icon'], children: leadingIcon })), prefix && jsx("div", { className: styles.prefix, children: prefix }), jsxs("div", { className: styles['chip-input-container'], children: [chips?.slice(0, maxChipsVisible).map((chip, index) => (jsx(Chip, { variant: 'outline', isDismissible: !!chip.onRemove, onDismiss: chip.onRemove, className: styles.chip, children: chip.label }, index))), chips && chips.length > maxChipsVisible && (jsxs("span", { className: styles['chip-overflow'], children: ["+", chips.length - maxChipsVisible] })), jsx("input", { ref: ref, className: cx(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 && jsx("div", { className: styles.suffix, children: suffix }), trailingIcon && (jsx("div", { className: styles['trailing-icon'], children: trailingIcon }))] }), (error || helperText) && (jsx("span", { className: cx(styles['helper-text'], error && styles['helper-text-error'], disabled && styles['helper-text-disabled']), children: error || helperText }))] }));
+const InputField = forwardRef(({ className, disabled, label, helperText, placeholder, error, leadingIcon, trailingIcon, optional, prefix, suffix, width, chips, maxChipsVisible = 2, size, infoTooltip, variant = 'default', containerRef, ...props }, ref) => {
+    return (jsxs("div", { className: styles.container, style: { width: width || '100%' }, children: [label && (jsxs("div", { className: styles.labelContainer, children: [jsxs("label", { className: cx(styles.label, disabled && styles['label-disabled']), children: [label, optional && jsx("span", { className: styles.optional, children: "(optional)" })] }), infoTooltip && (jsx(Tooltip, { message: infoTooltip, side: 'right', children: jsx("span", { className: styles.helpIcon, children: jsx(InfoCircledIcon, {}) }) }))] })), jsxs("div", { className: cx(inputWrapper({ size, variant, className }), error && styles['input-error-wrapper'], disabled && styles['input-disabled-wrapper'], chips?.length && styles['has-chips']), ref: containerRef, children: [leadingIcon && (jsx("div", { className: styles['leading-icon'], children: leadingIcon })), prefix && jsx("div", { className: styles.prefix, children: prefix }), jsxs("div", { className: styles['chip-input-container'], children: [chips?.slice(0, maxChipsVisible).map((chip, index) => (jsx(Chip, { variant: 'outline', isDismissible: !!chip.onRemove, onDismiss: chip.onRemove, className: styles.chip, children: chip.label }, index))), chips && chips.length > maxChipsVisible && (jsxs("span", { className: styles['chip-overflow'], children: ["+", chips.length - maxChipsVisible] })), jsx("input", { ref: ref, className: cx(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 && jsx("div", { className: styles.suffix, children: suffix }), trailingIcon && (jsx("div", { className: styles['trailing-icon'], children: trailingIcon }))] }), (error || helperText) && (jsx("span", { className: cx(styles['helper-text'], error && styles['helper-text-error'], disabled && styles['helper-text-disabled']), children: error || helperText }))] }));
 });
 InputField.displayName = 'InputField';
 

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

@@ -1 +1 @@
-{"version":3,"file":"input-field.js","sources":["../../../components/input-field/input-field.tsx"],"sourcesContent":["'use client';\n\nimport { InfoCircledIcon } from '@radix-ui/react-icons';\nimport { cva, cx, type VariantProps } from 'class-variance-authority';\nimport { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react';\nimport { Chip } from '../chip';\nimport { Tooltip } from '../tooltip';\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  infoTooltip?: string;\n  variant?: 'default' | 'borderless';\n}\n\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    {\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      size,\n      infoTooltip,\n      variant = 'default',\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div className={styles.container} style={{ width: width || '100%' }}>\n        {label && (\n          <div className={styles.labelContainer}>\n            <label\n              className={cx(styles.label, disabled && styles['label-disabled'])}\n            >\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={cx(\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 && (\n            <div className={styles['leading-icon']}>{leadingIcon}</div>\n          )}\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={cx(\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 && (\n            <div className={styles['trailing-icon']}>{trailingIcon}</div>\n          )}\n        </div>\n        {(error || helperText) && (\n          <span\n            className={cx(\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);\n\nInputField.displayName = 'InputField';\n"],"names":[],"mappings":";;;;;;;;;AASA;AAEA;AACE;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACD;AACE;AACA;AACD;AACF;AAqBY;;AA8GX;AAGF;;"}
+{"version":3,"file":"input-field.js","sources":["../../../components/input-field/input-field.tsx"],"sourcesContent":["'use client';\n\nimport { InfoCircledIcon } from '@radix-ui/react-icons';\nimport { cva, cx, type VariantProps } from 'class-variance-authority';\nimport {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactNode,\n  RefObject\n} from 'react';\nimport { Chip } from '../chip';\nimport { Tooltip } from '../tooltip';\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  infoTooltip?: string;\n  variant?: 'default' | 'borderless';\n  containerRef?: RefObject<HTMLDivElement | null>;\n}\n\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    {\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      size,\n      infoTooltip,\n      variant = 'default',\n      containerRef,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div className={styles.container} style={{ width: width || '100%' }}>\n        {label && (\n          <div className={styles.labelContainer}>\n            <label\n              className={cx(styles.label, disabled && styles['label-disabled'])}\n            >\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={cx(\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          ref={containerRef}\n        >\n          {leadingIcon && (\n            <div className={styles['leading-icon']}>{leadingIcon}</div>\n          )}\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={cx(\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 && (\n            <div className={styles['trailing-icon']}>{trailingIcon}</div>\n          )}\n        </div>\n        {(error || helperText) && (\n          <span\n            className={cx(\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);\n\nInputField.displayName = 'InputField';\n"],"names":[],"mappings":";;;;;;;;;AAcA;AAEA;AACE;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACD;AACE;AACA;AACD;AACF;AAsBY;;AAgHX;AAGF;;"}

package/dist/components/menu/__tests__/menu.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=menu.test.d.ts.map

package/dist/components/menu/__tests__/menu.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.test.d.ts","sourceRoot":"","sources":["../../../../components/menu/__tests__/menu.test.tsx"],"names":[],"mappings":""}

package/dist/components/menu/cell.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classVarianceAuthority = require('class-variance-authority');
+var React = require('react');
+var cell_module = require('./cell.module.css.cjs');
+
+const Cell = React.forwardRef(({ className, children, leadingIcon, trailingIcon, type = 'item', ...props }, ref) => (jsxRuntime.jsxs("div", { ref: ref, ...props, className: classVarianceAuthority.cx(cell_module.default.cell, className), children: [leadingIcon && jsxRuntime.jsx("span", { className: cell_module.default.leadingIcon, children: leadingIcon }), children, trailingIcon && (jsxRuntime.jsx("span", { className: cell_module.default.trailingIcon, children: trailingIcon }))] })));
+Cell.displayName = 'Menu.Cell';
+
+exports.Cell = Cell;
+//# sourceMappingURL=cell.cjs.map

package/dist/components/menu/cell.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cell.cjs","sources":["../../../components/menu/cell.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { forwardRef, HTMLAttributes, ReactNode } from 'react';\nimport styles from './cell.module.css';\n\nexport type CellBaseProps = {\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n};\nexport type CellProps = HTMLAttributes<HTMLDivElement> &\n  CellBaseProps & {\n    type?: 'select' | 'item';\n  };\n\nexport const Cell = forwardRef<HTMLDivElement, CellProps>(\n  (\n    { className, children, leadingIcon, trailingIcon, type = 'item', ...props },\n    ref\n  ) => (\n    <div ref={ref} {...props} className={cx(styles.cell, className)}>\n      {leadingIcon && <span className={styles.leadingIcon}>{leadingIcon}</span>}\n      {children}\n      {trailingIcon && (\n        <span className={styles.trailingIcon}>{trailingIcon}</span>\n      )}\n    </div>\n  )\n);\nCell.displayName = 'Menu.Cell';\n"],"names":["forwardRef","_jsxs","cx","styles","_jsx"],"mappings":";;;;;;;AAaa,MAAA,IAAI,GAAGA,gBAAU,CAC5B,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE,IAAI,GAAG,MAAM,EAAE,GAAG,KAAK,EAAE,EAC3E,GAAG,MAEHC,eAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAM,GAAA,KAAK,EAAE,SAAS,EAAEC,yBAAE,CAACC,mBAAM,CAAC,IAAI,EAAE,SAAS,CAAC,EAC5D,QAAA,EAAA,CAAA,WAAW,IAAIC,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAED,mBAAM,CAAC,WAAW,YAAG,WAAW,EAAA,CAAQ,EACxE,QAAQ,EACR,YAAY,KACXC,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAED,mBAAM,CAAC,YAAY,YAAG,YAAY,EAAA,CAAQ,CAC5D,CACG,EAAA,CAAA,CACP,EACD;AACF,IAAI,CAAC,WAAW,GAAG,WAAW;;;;"}

package/dist/components/{dropdown-menu → menu}/cell.d.ts

@@ -1,10 +1,10 @@
-import { HTMLAttributes, ReactNode } from "react";
+import { HTMLAttributes, ReactNode } from 'react';
 export type CellBaseProps = {
     leadingIcon?: ReactNode;
     trailingIcon?: ReactNode;
 };
 export type CellProps = HTMLAttributes<HTMLDivElement> & CellBaseProps & {
-    type?: "select" | "item";
+    type?: 'select' | 'item';
 };
 export declare const Cell: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & CellBaseProps & {
     type?: "select" | "item" | undefined;

package/dist/components/menu/cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cell.d.ts","sourceRoot":"","sources":["../../../components/menu/cell.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9D,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B,CAAC;AACF,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,cAAc,CAAC,GACpD,aAAa,GAAG;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAC1B,CAAC;AAEJ,eAAO,MAAM,IAAI;;kDAahB,CAAC"}

package/dist/components/menu/cell.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cx } from 'class-variance-authority';
+import { forwardRef } from 'react';
+import styles from './cell.module.css.js';
+
+const Cell = forwardRef(({ className, children, leadingIcon, trailingIcon, type = 'item', ...props }, ref) => (jsxs("div", { ref: ref, ...props, className: cx(styles.cell, className), children: [leadingIcon && jsx("span", { className: styles.leadingIcon, children: leadingIcon }), children, trailingIcon && (jsx("span", { className: styles.trailingIcon, children: trailingIcon }))] })));
+Cell.displayName = 'Menu.Cell';
+
+export { Cell };
+//# sourceMappingURL=cell.js.map

package/dist/components/menu/cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cell.js","sources":["../../../components/menu/cell.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { forwardRef, HTMLAttributes, ReactNode } from 'react';\nimport styles from './cell.module.css';\n\nexport type CellBaseProps = {\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n};\nexport type CellProps = HTMLAttributes<HTMLDivElement> &\n  CellBaseProps & {\n    type?: 'select' | 'item';\n  };\n\nexport const Cell = forwardRef<HTMLDivElement, CellProps>(\n  (\n    { className, children, leadingIcon, trailingIcon, type = 'item', ...props },\n    ref\n  ) => (\n    <div ref={ref} {...props} className={cx(styles.cell, className)}>\n      {leadingIcon && <span className={styles.leadingIcon}>{leadingIcon}</span>}\n      {children}\n      {trailingIcon && (\n        <span className={styles.trailingIcon}>{trailingIcon}</span>\n      )}\n    </div>\n  )\n);\nCell.displayName = 'Menu.Cell';\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAaa,MAAA,IAAI,GAAG,UAAU,CAC5B,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE,IAAI,GAAG,MAAM,EAAE,GAAG,KAAK,EAAE,EAC3E,GAAG,MAEHA,IAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAM,GAAA,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,EAC5D,QAAA,EAAA,CAAA,WAAW,IAAIC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,WAAW,YAAG,WAAW,EAAA,CAAQ,EACxE,QAAQ,EACR,YAAY,KACXA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,YAAY,YAAG,YAAY,EAAA,CAAQ,CAC5D,CACG,EAAA,CAAA,CACP,EACD;AACF,IAAI,CAAC,WAAW,GAAG,WAAW;;;;"}

package/dist/components/{dropdown-menu → menu}/cell.module.css.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"cell":"cell-module_cell__S6yRs","leadingIcon":"cell-module_leadingIcon__2uCcQ","trailingIcon":"cell-module_trailingIcon__NUfVO"};
+var styles = {"cell":"cell-module_cell__CFvDx","leadingIcon":"cell-module_leadingIcon__-xf2e","trailingIcon":"cell-module_trailingIcon__IJxNx"};
 
 exports.default = styles;
 //# sourceMappingURL=cell.module.css.cjs.map

package/dist/components/menu/cell.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"cell":"cell-module_cell__CFvDx","leadingIcon":"cell-module_leadingIcon__-xf2e","trailingIcon":"cell-module_trailingIcon__IJxNx"};
+
+export { styles as default };
+//# sourceMappingURL=cell.module.css.js.map

package/dist/components/menu/index.d.ts

@@ -0,0 +1,2 @@
+export { Menu } from './menu';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}