@raystack/apsara 1.0.0-rc.0 → 1.0.0-rc.1

package/dist/components/flex/flex.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"flex.cjs","sources":["../../../components/flex/flex.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { cva, VariantProps } from 'class-variance-authority';\nimport { forwardRef } from 'react';\nimport styles from './flex.module.css';\n\nconst flex = cva(styles.flex, {\n  variants: {\n    direction: {\n      row: styles['direction-row'],\n      column: styles['direction-column'],\n      rowReverse: styles['direction-rowReverse'],\n      columnReverse: styles['direction-columnReverse']\n    },\n    align: {\n      start: styles['align-start'],\n      center: styles['align-center'],\n      end: styles['align-end'],\n      stretch: styles['align-stretch'],\n      baseline: styles['align-baseline']\n    },\n    justify: {\n      start: styles['justify-start'],\n      center: styles['justify-center'],\n      end: styles['justify-end'],\n      between: styles['justify-between']\n    },\n    wrap: {\n      noWrap: styles['wrap-noWrap'],\n      wrap: styles['wrap-wrap'],\n      wrapReverse: styles['wrap-wrapReverse']\n    },\n    gap: {\n      1: styles['gap-1'],\n      2: styles['gap-2'],\n      3: styles['gap-3'],\n      4: styles['gap-4'],\n      5: styles['gap-5'],\n      6: styles['gap-6'],\n      7: styles['gap-7'],\n      8: styles['gap-8'],\n      9: styles['gap-9'],\n      'extra-small': styles['gap-xs'],\n      small: styles['gap-sm'],\n      medium: styles['gap-md'],\n      large: styles['gap-lg'],\n      'extra-large': styles['gap-xl']\n    },\n    width: {\n      full: styles['width-full']\n    }\n  },\n  defaultVariants: {\n    direction: 'row',\n    align: 'stretch',\n    justify: 'start',\n    wrap: 'noWrap'\n  }\n});\n\ntype BoxProps = VariantProps<typeof flex> & useRender.ComponentProps<'div'>;\n\nexport const Flex = forwardRef<HTMLDivElement, BoxProps>(\n  (\n    {\n      direction,\n      align,\n      justify,\n      wrap,\n      gap,\n      className,\n      width,\n      render,\n      ...props\n    },\n    ref\n  ) => {\n    const flexProps = {\n      className: flex({\n        direction,\n        align,\n        justify,\n        wrap,\n        gap,\n        className,\n        width\n      })\n    };\n\n    const element = useRender({\n      defaultTagName: 'div',\n      ref,\n      render,\n      props: mergeProps<'div'>(flexProps, props)\n    });\n\n    return element;\n  }\n);\n"],"names":["cva","styles","forwardRef","useRender","mergeProps"],"mappings":"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"}
+{"version":3,"file":"flex.cjs","sources":["../../../components/flex/flex.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { cva, VariantProps } from 'class-variance-authority';\nimport styles from './flex.module.css';\n\nconst flex = cva(styles.flex, {\n  variants: {\n    direction: {\n      row: styles['direction-row'],\n      column: styles['direction-column'],\n      rowReverse: styles['direction-rowReverse'],\n      columnReverse: styles['direction-columnReverse']\n    },\n    align: {\n      start: styles['align-start'],\n      center: styles['align-center'],\n      end: styles['align-end'],\n      stretch: styles['align-stretch'],\n      baseline: styles['align-baseline']\n    },\n    justify: {\n      start: styles['justify-start'],\n      center: styles['justify-center'],\n      end: styles['justify-end'],\n      between: styles['justify-between']\n    },\n    wrap: {\n      noWrap: styles['wrap-noWrap'],\n      wrap: styles['wrap-wrap'],\n      wrapReverse: styles['wrap-wrapReverse']\n    },\n    gap: {\n      1: styles['gap-1'],\n      2: styles['gap-2'],\n      3: styles['gap-3'],\n      4: styles['gap-4'],\n      5: styles['gap-5'],\n      6: styles['gap-6'],\n      7: styles['gap-7'],\n      8: styles['gap-8'],\n      9: styles['gap-9'],\n      'extra-small': styles['gap-xs'],\n      small: styles['gap-sm'],\n      medium: styles['gap-md'],\n      large: styles['gap-lg'],\n      'extra-large': styles['gap-xl']\n    },\n    width: {\n      full: styles['width-full']\n    }\n  },\n  defaultVariants: {\n    direction: 'row',\n    align: 'stretch',\n    justify: 'start',\n    wrap: 'noWrap'\n  }\n});\n\ntype BoxProps = VariantProps<typeof flex> & useRender.ComponentProps<'div'>;\n\nexport function Flex({\n  direction,\n  align,\n  justify,\n  wrap,\n  gap,\n  className,\n  width,\n  render,\n  ref,\n  ...props\n}: BoxProps) {\n  const flexProps = {\n    className: flex({\n      direction,\n      align,\n      justify,\n      wrap,\n      gap,\n      className,\n      width\n    })\n  };\n\n  const element = useRender({\n    defaultTagName: 'div',\n    ref,\n    render,\n    props: mergeProps<'div'>(flexProps, props)\n  });\n\n  return element;\n}\n\nFlex.displayName = 'Flex';\n"],"names":["cva","styles","useRender","mergeProps"],"mappings":"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"}

package/dist/components/flex/flex.d.ts

@@ -5,10 +5,13 @@ declare const flex: (props?: ({
     align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
     justify?: "center" | "start" | "end" | "between" | null | undefined;
     wrap?: "wrap" | "noWrap" | "wrapReverse" | null | undefined;
-    gap?: "small" | 1 | 2 | "extra-small" | "medium" | "large" | "extra-large" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | null | undefined;
+    gap?: "small" | 1 | "extra-small" | "medium" | "large" | "extra-large" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | null | undefined;
     width?: "full" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type BoxProps = VariantProps<typeof flex> & useRender.ComponentProps<'div'>;
-export declare const Flex: import("react").ForwardRefExoticComponent<Omit<BoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Flex({ direction, align, justify, wrap, gap, className, width, render, ref, ...props }: BoxProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare namespace Flex {
+    var displayName: string;
+}
 export {};
 //# sourceMappingURL=flex.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"flex.d.ts","sourceRoot":"","sources":["../../../components/flex/flex.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAI7D,QAAA,MAAM,IAAI;;;;;;;8EAoDR,CAAC;AAEH,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,GAAG,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE5E,eAAO,MAAM,IAAI,kHAoChB,CAAC"}
+{"version":3,"file":"flex.d.ts","sourceRoot":"","sources":["../../../components/flex/flex.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,QAAA,MAAM,IAAI;;;;;;;8EAoDR,CAAC;AAEH,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,GAAG,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE5E,wBAAgB,IAAI,CAAC,EACnB,SAAS,EACT,KAAK,EACL,OAAO,EACP,IAAI,EACJ,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,KAAK,EACT,EAAE,QAAQ,8FAqBV;yBAhCe,IAAI"}

package/dist/components/flex/flex.js

@@ -1,6 +1,5 @@
 import { useRender, mergeProps } from '@base-ui/react';
 import { cva } from 'class-variance-authority';
-import { forwardRef } from 'react';
 import styles from './flex.module.css.js';
 
 const flex = cva(styles.flex, {
@@ -56,7 +55,7 @@ const flex = cva(styles.flex, {
         wrap: 'noWrap'
     }
 });
-const Flex = forwardRef(({ direction, align, justify, wrap, gap, className, width, render, ...props }, ref) => {
+function Flex({ direction, align, justify, wrap, gap, className, width, render, ref, ...props }) {
     const flexProps = {
         className: flex({
             direction,
@@ -75,7 +74,8 @@ const Flex = forwardRef(({ direction, align, justify, wrap, gap, className, widt
         props: mergeProps(flexProps, props)
     });
     return element;
-});
+}
+Flex.displayName = 'Flex';
 
 export { Flex };
 //# sourceMappingURL=flex.js.map

package/dist/components/flex/flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"flex.js","sources":["../../../components/flex/flex.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { cva, VariantProps } from 'class-variance-authority';\nimport { forwardRef } from 'react';\nimport styles from './flex.module.css';\n\nconst flex = cva(styles.flex, {\n  variants: {\n    direction: {\n      row: styles['direction-row'],\n      column: styles['direction-column'],\n      rowReverse: styles['direction-rowReverse'],\n      columnReverse: styles['direction-columnReverse']\n    },\n    align: {\n      start: styles['align-start'],\n      center: styles['align-center'],\n      end: styles['align-end'],\n      stretch: styles['align-stretch'],\n      baseline: styles['align-baseline']\n    },\n    justify: {\n      start: styles['justify-start'],\n      center: styles['justify-center'],\n      end: styles['justify-end'],\n      between: styles['justify-between']\n    },\n    wrap: {\n      noWrap: styles['wrap-noWrap'],\n      wrap: styles['wrap-wrap'],\n      wrapReverse: styles['wrap-wrapReverse']\n    },\n    gap: {\n      1: styles['gap-1'],\n      2: styles['gap-2'],\n      3: styles['gap-3'],\n      4: styles['gap-4'],\n      5: styles['gap-5'],\n      6: styles['gap-6'],\n      7: styles['gap-7'],\n      8: styles['gap-8'],\n      9: styles['gap-9'],\n      'extra-small': styles['gap-xs'],\n      small: styles['gap-sm'],\n      medium: styles['gap-md'],\n      large: styles['gap-lg'],\n      'extra-large': styles['gap-xl']\n    },\n    width: {\n      full: styles['width-full']\n    }\n  },\n  defaultVariants: {\n    direction: 'row',\n    align: 'stretch',\n    justify: 'start',\n    wrap: 'noWrap'\n  }\n});\n\ntype BoxProps = VariantProps<typeof flex> & useRender.ComponentProps<'div'>;\n\nexport const Flex = forwardRef<HTMLDivElement, BoxProps>(\n  (\n    {\n      direction,\n      align,\n      justify,\n      wrap,\n      gap,\n      className,\n      width,\n      render,\n      ...props\n    },\n    ref\n  ) => {\n    const flexProps = {\n      className: flex({\n        direction,\n        align,\n        justify,\n        wrap,\n        gap,\n        className,\n        width\n      })\n    };\n\n    const element = useRender({\n      defaultTagName: 'div',\n      ref,\n      render,\n      props: mergeProps<'div'>(flexProps, props)\n    });\n\n    return element;\n  }\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"flex.js","sources":["../../../components/flex/flex.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { cva, VariantProps } from 'class-variance-authority';\nimport styles from './flex.module.css';\n\nconst flex = cva(styles.flex, {\n  variants: {\n    direction: {\n      row: styles['direction-row'],\n      column: styles['direction-column'],\n      rowReverse: styles['direction-rowReverse'],\n      columnReverse: styles['direction-columnReverse']\n    },\n    align: {\n      start: styles['align-start'],\n      center: styles['align-center'],\n      end: styles['align-end'],\n      stretch: styles['align-stretch'],\n      baseline: styles['align-baseline']\n    },\n    justify: {\n      start: styles['justify-start'],\n      center: styles['justify-center'],\n      end: styles['justify-end'],\n      between: styles['justify-between']\n    },\n    wrap: {\n      noWrap: styles['wrap-noWrap'],\n      wrap: styles['wrap-wrap'],\n      wrapReverse: styles['wrap-wrapReverse']\n    },\n    gap: {\n      1: styles['gap-1'],\n      2: styles['gap-2'],\n      3: styles['gap-3'],\n      4: styles['gap-4'],\n      5: styles['gap-5'],\n      6: styles['gap-6'],\n      7: styles['gap-7'],\n      8: styles['gap-8'],\n      9: styles['gap-9'],\n      'extra-small': styles['gap-xs'],\n      small: styles['gap-sm'],\n      medium: styles['gap-md'],\n      large: styles['gap-lg'],\n      'extra-large': styles['gap-xl']\n    },\n    width: {\n      full: styles['width-full']\n    }\n  },\n  defaultVariants: {\n    direction: 'row',\n    align: 'stretch',\n    justify: 'start',\n    wrap: 'noWrap'\n  }\n});\n\ntype BoxProps = VariantProps<typeof flex> & useRender.ComponentProps<'div'>;\n\nexport function Flex({\n  direction,\n  align,\n  justify,\n  wrap,\n  gap,\n  className,\n  width,\n  render,\n  ref,\n  ...props\n}: BoxProps) {\n  const flexProps = {\n    className: flex({\n      direction,\n      align,\n      justify,\n      wrap,\n      gap,\n      className,\n      width\n    })\n  };\n\n  const element = useRender({\n    defaultTagName: 'div',\n    ref,\n    render,\n    props: mergeProps<'div'>(flexProps, props)\n  });\n\n  return element;\n}\n\nFlex.displayName = 'Flex';\n"],"names":[],"mappings":"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"}

package/dist/components/grid/grid-item.cjs

@@ -1,9 +1,8 @@
 'use strict';
 
 var react = require('@base-ui/react');
-var React = require('react');
 
-const GridItem = React.forwardRef(({ area, colStart, colEnd, rowStart, rowEnd, colSpan, rowSpan, justifySelf, alignSelf, style, render, ...props }, ref) => {
+function GridItem({ area, colStart, colEnd, rowStart, rowEnd, colSpan, rowSpan, justifySelf, alignSelf, style, render, ref, ...props }) {
     const gridItemStyle = {
         gridArea: area,
         gridColumnStart: colStart,
@@ -23,8 +22,8 @@ const GridItem = React.forwardRef(({ area, colStart, colEnd, rowStart, rowEnd, c
         props: react.mergeProps({ style: gridItemStyle }, props)
     });
     return element;
-});
-GridItem.displayName = 'GridItem';
+}
+GridItem.displayName = 'Grid.Item';
 
 exports.GridItem = GridItem;
 //# sourceMappingURL=grid-item.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"grid-item.cjs","sources":["../../../components/grid/grid-item.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { forwardRef } from 'react';\nimport { AlignType } from './types';\n\ntype GridItemProps = useRender.ComponentProps<'div'> & {\n  area?: string;\n  colStart?: number | string;\n  colEnd?: number | string;\n  rowStart?: number | string;\n  rowEnd?: number | string;\n  colSpan?: number | string;\n  rowSpan?: number | string;\n  justifySelf?: AlignType;\n  alignSelf?: AlignType;\n};\n\nexport const GridItem = forwardRef<HTMLDivElement, GridItemProps>(\n  (\n    {\n      area,\n      colStart,\n      colEnd,\n      rowStart,\n      rowEnd,\n      colSpan,\n      rowSpan,\n      justifySelf,\n      alignSelf,\n      style,\n      render,\n      ...props\n    },\n    ref\n  ) => {\n    const gridItemStyle = {\n      gridArea: area,\n      gridColumnStart: colStart,\n      gridColumnEnd: colEnd,\n      gridRowStart: rowStart,\n      gridRowEnd: rowEnd,\n      gridColumn: colSpan ? `span ${colSpan}` : undefined,\n      gridRow: rowSpan ? `span ${rowSpan}` : undefined,\n      justifySelf,\n      alignSelf,\n      ...style\n    };\n\n    const element = useRender({\n      defaultTagName: 'div',\n      ref,\n      render,\n      props: mergeProps<'div'>({ style: gridItemStyle }, props)\n    });\n\n    return element;\n  }\n);\n\nGridItem.displayName = 'GridItem';\n"],"names":["forwardRef","useRender","mergeProps"],"mappings":";;;;;AAgBa,MAAA,QAAQ,GAAGA,gBAAU,CAChC,CACE,EACE,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,OAAO,EACP,OAAO,EACP,WAAW,EACX,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,MAAM,aAAa,GAAG;AACpB,QAAA,QAAQ,EAAE,IAAI;AACd,QAAA,eAAe,EAAE,QAAQ;AACzB,QAAA,aAAa,EAAE,MAAM;AACrB,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,UAAU,EAAE,MAAM;QAClB,UAAU,EAAE,OAAO,GAAG,CAAQ,KAAA,EAAA,OAAO,CAAE,CAAA,GAAG,SAAS;QACnD,OAAO,EAAE,OAAO,GAAG,CAAQ,KAAA,EAAA,OAAO,CAAE,CAAA,GAAG,SAAS;QAChD,WAAW;QACX,SAAS;AACT,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,aAAa,EAAE,EAAE,KAAK,CAAC;AAC1D,KAAA,CAAC,CAAC;AAEH,IAAA,OAAO,OAAO,CAAC;AACjB,CAAC,EACD;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"grid-item.cjs","sources":["../../../components/grid/grid-item.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { AlignType } from './types';\n\ntype GridItemProps = useRender.ComponentProps<'div'> & {\n  area?: string;\n  colStart?: number | string;\n  colEnd?: number | string;\n  rowStart?: number | string;\n  rowEnd?: number | string;\n  colSpan?: number | string;\n  rowSpan?: number | string;\n  justifySelf?: AlignType;\n  alignSelf?: AlignType;\n};\n\nexport function GridItem({\n  area,\n  colStart,\n  colEnd,\n  rowStart,\n  rowEnd,\n  colSpan,\n  rowSpan,\n  justifySelf,\n  alignSelf,\n  style,\n  render,\n  ref,\n  ...props\n}: GridItemProps) {\n  const gridItemStyle = {\n    gridArea: area,\n    gridColumnStart: colStart,\n    gridColumnEnd: colEnd,\n    gridRowStart: rowStart,\n    gridRowEnd: rowEnd,\n    gridColumn: colSpan ? `span ${colSpan}` : undefined,\n    gridRow: rowSpan ? `span ${rowSpan}` : undefined,\n    justifySelf,\n    alignSelf,\n    ...style\n  };\n\n  const element = useRender({\n    defaultTagName: 'div',\n    ref,\n    render,\n    props: mergeProps<'div'>({ style: gridItemStyle }, props)\n  });\n\n  return element;\n}\n\nGridItem.displayName = 'Grid.Item';\n"],"names":["useRender","mergeProps"],"mappings":";;;;AAegB,SAAA,QAAQ,CAAC,EACvB,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,OAAO,EACP,OAAO,EACP,WAAW,EACX,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,KAAK,EACM,EAAA;AACd,IAAA,MAAM,aAAa,GAAG;AACpB,QAAA,QAAQ,EAAE,IAAI;AACd,QAAA,eAAe,EAAE,QAAQ;AACzB,QAAA,aAAa,EAAE,MAAM;AACrB,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,UAAU,EAAE,MAAM;QAClB,UAAU,EAAE,OAAO,GAAG,CAAQ,KAAA,EAAA,OAAO,CAAE,CAAA,GAAG,SAAS;QACnD,OAAO,EAAE,OAAO,GAAG,CAAQ,KAAA,EAAA,OAAO,CAAE,CAAA,GAAG,SAAS;QAChD,WAAW;QACX,SAAS;AACT,QAAA,GAAG,KAAK;KACT,CAAC;IAEF,MAAM,OAAO,GAAGA,eAAS,CAAC;AACxB,QAAA,cAAc,EAAE,KAAK;QACrB,GAAG;QACH,MAAM;QACN,KAAK,EAAEC,gBAAU,CAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,KAAK,CAAC;AAC1D,KAAA,CAAC,CAAC;AAEH,IAAA,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,QAAQ,CAAC,WAAW,GAAG,WAAW;;;;"}

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

@@ -11,6 +11,9 @@ type GridItemProps = useRender.ComponentProps<'div'> & {
     justifySelf?: AlignType;
     alignSelf?: AlignType;
 };
-export declare const GridItem: import("react").ForwardRefExoticComponent<Omit<GridItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function GridItem({ area, colStart, colEnd, rowStart, rowEnd, colSpan, rowSpan, justifySelf, alignSelf, style, render, ref, ...props }: GridItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare namespace GridItem {
+    var displayName: string;
+}
 export {};
 //# sourceMappingURL=grid-item.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"grid-item.d.ts","sourceRoot":"","sources":["../../../components/grid/grid-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,KAAK,aAAa,GAAG,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,QAAQ,uHAwCpB,CAAC"}
+{"version":3,"file":"grid-item.d.ts","sourceRoot":"","sources":["../../../components/grid/grid-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,KAAK,aAAa,GAAG,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,OAAO,EACP,OAAO,EACP,WAAW,EACX,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,KAAK,EACT,EAAE,aAAa,8FAsBf;yBApCe,QAAQ"}

package/dist/components/grid/grid-item.js

@@ -1,7 +1,6 @@
 import { useRender, mergeProps } from '@base-ui/react';
-import { forwardRef } from 'react';
 
-const GridItem = forwardRef(({ area, colStart, colEnd, rowStart, rowEnd, colSpan, rowSpan, justifySelf, alignSelf, style, render, ...props }, ref) => {
+function GridItem({ area, colStart, colEnd, rowStart, rowEnd, colSpan, rowSpan, justifySelf, alignSelf, style, render, ref, ...props }) {
     const gridItemStyle = {
         gridArea: area,
         gridColumnStart: colStart,
@@ -21,8 +20,8 @@ const GridItem = forwardRef(({ area, colStart, colEnd, rowStart, rowEnd, colSpan
         props: mergeProps({ style: gridItemStyle }, props)
     });
     return element;
-});
-GridItem.displayName = 'GridItem';
+}
+GridItem.displayName = 'Grid.Item';
 
 export { GridItem };
 //# sourceMappingURL=grid-item.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"grid-item.js","sources":["../../../components/grid/grid-item.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { forwardRef } from 'react';\nimport { AlignType } from './types';\n\ntype GridItemProps = useRender.ComponentProps<'div'> & {\n  area?: string;\n  colStart?: number | string;\n  colEnd?: number | string;\n  rowStart?: number | string;\n  rowEnd?: number | string;\n  colSpan?: number | string;\n  rowSpan?: number | string;\n  justifySelf?: AlignType;\n  alignSelf?: AlignType;\n};\n\nexport const GridItem = forwardRef<HTMLDivElement, GridItemProps>(\n  (\n    {\n      area,\n      colStart,\n      colEnd,\n      rowStart,\n      rowEnd,\n      colSpan,\n      rowSpan,\n      justifySelf,\n      alignSelf,\n      style,\n      render,\n      ...props\n    },\n    ref\n  ) => {\n    const gridItemStyle = {\n      gridArea: area,\n      gridColumnStart: colStart,\n      gridColumnEnd: colEnd,\n      gridRowStart: rowStart,\n      gridRowEnd: rowEnd,\n      gridColumn: colSpan ? `span ${colSpan}` : undefined,\n      gridRow: rowSpan ? `span ${rowSpan}` : undefined,\n      justifySelf,\n      alignSelf,\n      ...style\n    };\n\n    const element = useRender({\n      defaultTagName: 'div',\n      ref,\n      render,\n      props: mergeProps<'div'>({ style: gridItemStyle }, props)\n    });\n\n    return element;\n  }\n);\n\nGridItem.displayName = 'GridItem';\n"],"names":[],"mappings":";;;AAgBa,MAAA,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,OAAO,EACP,OAAO,EACP,WAAW,EACX,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,MAAM,aAAa,GAAG;AACpB,QAAA,QAAQ,EAAE,IAAI;AACd,QAAA,eAAe,EAAE,QAAQ;AACzB,QAAA,aAAa,EAAE,MAAM;AACrB,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,UAAU,EAAE,MAAM;QAClB,UAAU,EAAE,OAAO,GAAG,CAAQ,KAAA,EAAA,OAAO,CAAE,CAAA,GAAG,SAAS;QACnD,OAAO,EAAE,OAAO,GAAG,CAAQ,KAAA,EAAA,OAAO,CAAE,CAAA,GAAG,SAAS;QAChD,WAAW;QACX,SAAS;AACT,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,aAAa,EAAE,EAAE,KAAK,CAAC;AAC1D,KAAA,CAAC,CAAC;AAEH,IAAA,OAAO,OAAO,CAAC;AACjB,CAAC,EACD;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"grid-item.js","sources":["../../../components/grid/grid-item.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { AlignType } from './types';\n\ntype GridItemProps = useRender.ComponentProps<'div'> & {\n  area?: string;\n  colStart?: number | string;\n  colEnd?: number | string;\n  rowStart?: number | string;\n  rowEnd?: number | string;\n  colSpan?: number | string;\n  rowSpan?: number | string;\n  justifySelf?: AlignType;\n  alignSelf?: AlignType;\n};\n\nexport function GridItem({\n  area,\n  colStart,\n  colEnd,\n  rowStart,\n  rowEnd,\n  colSpan,\n  rowSpan,\n  justifySelf,\n  alignSelf,\n  style,\n  render,\n  ref,\n  ...props\n}: GridItemProps) {\n  const gridItemStyle = {\n    gridArea: area,\n    gridColumnStart: colStart,\n    gridColumnEnd: colEnd,\n    gridRowStart: rowStart,\n    gridRowEnd: rowEnd,\n    gridColumn: colSpan ? `span ${colSpan}` : undefined,\n    gridRow: rowSpan ? `span ${rowSpan}` : undefined,\n    justifySelf,\n    alignSelf,\n    ...style\n  };\n\n  const element = useRender({\n    defaultTagName: 'div',\n    ref,\n    render,\n    props: mergeProps<'div'>({ style: gridItemStyle }, props)\n  });\n\n  return element;\n}\n\nGridItem.displayName = 'Grid.Item';\n"],"names":[],"mappings":";;AAegB,SAAA,QAAQ,CAAC,EACvB,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,OAAO,EACP,OAAO,EACP,WAAW,EACX,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,KAAK,EACM,EAAA;AACd,IAAA,MAAM,aAAa,GAAG;AACpB,QAAA,QAAQ,EAAE,IAAI;AACd,QAAA,eAAe,EAAE,QAAQ;AACzB,QAAA,aAAa,EAAE,MAAM;AACrB,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,UAAU,EAAE,MAAM;QAClB,UAAU,EAAE,OAAO,GAAG,CAAQ,KAAA,EAAA,OAAO,CAAE,CAAA,GAAG,SAAS;QACnD,OAAO,EAAE,OAAO,GAAG,CAAQ,KAAA,EAAA,OAAO,CAAE,CAAA,GAAG,SAAS;QAChD,WAAW;QACX,SAAS;AACT,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,aAAa,EAAE,EAAE,KAAK,CAAC;AAC1D,KAAA,CAAC,CAAC;AAEH,IAAA,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,QAAQ,CAAC,WAAW,GAAG,WAAW;;;;"}

package/dist/components/grid/grid.cjs

@@ -10,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 = {}, render, ...props }, ref) => {
+function Grid({ templateAreas, autoFlow, autoColumns, autoRows, columns, rows, gap, columnGap, rowGap, justifyItems, alignItems, justifyContent, alignContent, inline = false, style = {}, render, ref, ...props }) {
     const gridTemplateColumns = typeof columns === 'number' ? `repeat(${columns}, 1fr)` : columns;
     const gridTemplateRows = typeof rows === 'number' ? `repeat(${rows}, 1fr)` : rows;
     const gridTemplateAreas = React.useMemo(() => {
@@ -46,7 +46,7 @@ const Grid = React.forwardRef(({ templateAreas, autoFlow, autoColumns, autoRows,
         props: react.mergeProps({ style: gridStyle }, props)
     });
     return element;
-});
+}
 Grid.displayName = 'Grid';
 
 exports.Grid = Grid;

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

@@ -1 +1 @@
-{"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;;;;"}
+{"version":3,"file":"grid.cjs","sources":["../../../components/grid/grid.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { 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 function Grid({\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  ref,\n  ...props\n}: GridProps) {\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\nGrid.displayName = 'Grid';\n"],"names":["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;AAgDL,SAAU,IAAI,CAAC,EACnB,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,EACH,GAAG,KAAK,EACE,EAAA;AACV,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,GAAGA,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;AAED,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

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

@@ -49,6 +49,9 @@ type GridProps = useRender.ComponentProps<'div'> & {
     alignContent?: AlignExtendedType;
     inline?: boolean;
 };
-export declare const Grid: import("react").ForwardRefExoticComponent<Omit<GridProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Grid({ templateAreas, autoFlow, autoColumns, autoRows, columns, rows, gap, columnGap, rowGap, justifyItems, alignItems, justifyContent, alignContent, inline, style, render, ref, ...props }: GridProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare namespace Grid {
+    var displayName: string;
+}
 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":"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"}
+{"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,wBAAgB,IAAI,CAAC,EACnB,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,MAAc,EACd,KAAU,EACV,MAAM,EACN,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,8FA0CX;yBA7De,IAAI"}

package/dist/components/grid/grid.js

@@ -1,5 +1,5 @@
 import { useRender, mergeProps } from '@base-ui/react';
-import { forwardRef, useMemo } from 'react';
+import { useMemo } from 'react';
 
 const GAPS = {
     'extra-small': 'var(--rs-space-2)',
@@ -8,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 = {}, render, ...props }, ref) => {
+function Grid({ templateAreas, autoFlow, autoColumns, autoRows, columns, rows, gap, columnGap, rowGap, justifyItems, alignItems, justifyContent, alignContent, inline = false, style = {}, render, ref, ...props }) {
     const gridTemplateColumns = typeof columns === 'number' ? `repeat(${columns}, 1fr)` : columns;
     const gridTemplateRows = typeof rows === 'number' ? `repeat(${rows}, 1fr)` : rows;
     const gridTemplateAreas = useMemo(() => {
@@ -44,7 +44,7 @@ const Grid = forwardRef(({ templateAreas, autoFlow, autoColumns, autoRows, colum
         props: mergeProps({ style: gridStyle }, props)
     });
     return element;
-});
+}
 Grid.displayName = 'Grid';
 
 export { Grid };

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

@@ -1 +1 @@
-{"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;;;;"}
+{"version":3,"file":"grid.js","sources":["../../../components/grid/grid.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { 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 function Grid({\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  ref,\n  ...props\n}: GridProps) {\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\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;AAgDL,SAAU,IAAI,CAAC,EACnB,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,EACH,GAAG,KAAK,EACE,EAAA;AACV,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;AAED,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

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

@@ -1,33 +1,6 @@
-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;
-    autoRows?: string | undefined;
-    columns?: string | number | undefined;
-    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?: import("./types").AlignType | undefined;
-    alignItems?: import("./types").AlignType | undefined;
-    justifyContent?: import("./types").AlignExtendedType | undefined;
-    alignContent?: import("./types").AlignExtendedType | undefined;
-    inline?: boolean | undefined;
-}, "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;
-        rowStart?: string | number | undefined;
-        rowEnd?: string | number | undefined;
-        colSpan?: string | number | undefined;
-        rowSpan?: string | number | undefined;
-        justifySelf?: import("./types").AlignType | undefined;
-        alignSelf?: import("./types").AlignType | undefined;
-    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+import { Grid as GridPrimitive } from "./grid";
+import { GridItem } from "./grid-item";
+export declare const Grid: typeof GridPrimitive & {
+    Item: typeof GridItem;
 };
 //# 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":"AAAA,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,eAAO,MAAM,IAAI;;CAEf,CAAC"}

package/dist/components/headline/headline.cjs

@@ -2,7 +2,6 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
-var React = require('react');
 var headline_module = require('./headline.module.css.cjs');
 
 const headline = classVarianceAuthority.cva(headline_module.default.headline, {
@@ -36,9 +35,9 @@ const headline = classVarianceAuthority.cva(headline_module.default.headline, {
         truncate: false
     }
 });
-const Headline = React.forwardRef(({ className, size, weight, align, truncate, as: Component = 'h2', ...props }, ref) => {
-    return (jsxRuntime.jsx(Component, { ref: ref, className: headline({ size, weight, align, truncate, className }), ...props }));
-});
+function Headline({ className, size, weight, align, truncate, as: Component = 'h2', ...props }) {
+    return (jsxRuntime.jsx(Component, { className: headline({ size, weight, align, truncate, className }), ...props }));
+}
 Headline.displayName = 'Headline';
 
 exports.Headline = Headline;

package/dist/components/headline/headline.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"headline.cjs","sources":["../../../components/headline/headline.tsx"],"sourcesContent":["import { type VariantProps, cva } from 'class-variance-authority';\nimport { HTMLAttributes, forwardRef } from 'react';\n\nimport styles from './headline.module.css';\n\nconst headline = cva(styles.headline, {\n  variants: {\n    size: {\n      t1: styles['headline-t1'],\n      t2: styles['headline-t2'],\n      t3: styles['headline-t3'],\n      t4: styles['headline-t4'],\n      small: styles['headline-small'],\n      medium: styles['headline-medium'],\n      large: styles['headline-large']\n    },\n    weight: {\n      regular: styles['headline-weight-regular'],\n      medium: styles['headline-weight-medium']\n    },\n    align: {\n      left: styles['headline-align-left'],\n      center: styles['headline-align-center'],\n      right: styles['headline-align-right']\n    },\n    truncate: {\n      true: styles['headline-truncate']\n    }\n  },\n  defaultVariants: {\n    size: 't2',\n    weight: 'medium',\n    align: 'left',\n    truncate: false\n  }\n});\n\nexport type HeadlineBaseProps = VariantProps<typeof headline> & {\n  /**\n   * @remarks Use \"t1\" | \"t2\" | \"t3\" | \"t4\"\n   */\n  size?: 't1' | 't2' | 't3' | 't4' | 'small' | 'medium' | 'large';\n};\n\ntype HeadlineProps = HeadlineBaseProps &\n  HTMLAttributes<HTMLHeadingElement> & {\n    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  };\n\nexport const Headline = forwardRef<HTMLHeadingElement, HeadlineProps>(\n  (\n    {\n      className,\n      size,\n      weight,\n      align,\n      truncate,\n      as: Component = 'h2',\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <Component\n        ref={ref}\n        className={headline({ size, weight, align, truncate, className })}\n        {...props}\n      />\n    );\n  }\n);\n\nHeadline.displayName = 'Headline';\n"],"names":["cva","styles","forwardRef","_jsx"],"mappings":";;;;;;;AAKA,MAAM,QAAQ,GAAGA,0BAAG,CAACC,uBAAM,CAAC,QAAQ,EAAE;AACpC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAEA,uBAAM,CAAC,aAAa,CAAC;AACzB,YAAA,EAAE,EAAEA,uBAAM,CAAC,aAAa,CAAC;AACzB,YAAA,EAAE,EAAEA,uBAAM,CAAC,aAAa,CAAC;AACzB,YAAA,EAAE,EAAEA,uBAAM,CAAC,aAAa,CAAC;AACzB,YAAA,KAAK,EAAEA,uBAAM,CAAC,gBAAgB,CAAC;AAC/B,YAAA,MAAM,EAAEA,uBAAM,CAAC,iBAAiB,CAAC;AACjC,YAAA,KAAK,EAAEA,uBAAM,CAAC,gBAAgB,CAAC;AAChC,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,OAAO,EAAEA,uBAAM,CAAC,yBAAyB,CAAC;AAC1C,YAAA,MAAM,EAAEA,uBAAM,CAAC,wBAAwB,CAAC;AACzC,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAEA,uBAAM,CAAC,qBAAqB,CAAC;AACnC,YAAA,MAAM,EAAEA,uBAAM,CAAC,uBAAuB,CAAC;AACvC,YAAA,KAAK,EAAEA,uBAAM,CAAC,sBAAsB,CAAC;AACtC,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAEA,uBAAM,CAAC,mBAAmB,CAAC;AAClC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,MAAM,EAAE,QAAQ;AAChB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,QAAQ,EAAE,KAAK;AAChB,KAAA;AACF,CAAA,CAAC,CAAC;AAcI,MAAM,QAAQ,GAAGC,gBAAU,CAChC,CACE,EACE,SAAS,EACT,IAAI,EACJ,MAAM,EACN,KAAK,EACL,QAAQ,EACR,EAAE,EAAE,SAAS,GAAG,IAAI,EACpB,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,QACEC,cAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7D,GAAA,KAAK,EACT,CAAA,EACF;AACJ,CAAC,EACD;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"headline.cjs","sources":["../../../components/headline/headline.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { ComponentProps } from 'react';\nimport styles from './headline.module.css';\n\nconst headline = cva(styles.headline, {\n  variants: {\n    size: {\n      t1: styles['headline-t1'],\n      t2: styles['headline-t2'],\n      t3: styles['headline-t3'],\n      t4: styles['headline-t4'],\n      small: styles['headline-small'],\n      medium: styles['headline-medium'],\n      large: styles['headline-large']\n    },\n    weight: {\n      regular: styles['headline-weight-regular'],\n      medium: styles['headline-weight-medium']\n    },\n    align: {\n      left: styles['headline-align-left'],\n      center: styles['headline-align-center'],\n      right: styles['headline-align-right']\n    },\n    truncate: {\n      true: styles['headline-truncate']\n    }\n  },\n  defaultVariants: {\n    size: 't2',\n    weight: 'medium',\n    align: 'left',\n    truncate: false\n  }\n});\n\nexport type HeadlineBaseProps = VariantProps<typeof headline> & {\n  /**\n   * @remarks Use \"t1\" | \"t2\" | \"t3\" | \"t4\"\n   */\n  size?: 't1' | 't2' | 't3' | 't4' | 'small' | 'medium' | 'large';\n};\n\ntype HeadlineProps = HeadlineBaseProps &\n  ComponentProps<'h1'> & {\n    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  };\n\nexport function Headline({\n  className,\n  size,\n  weight,\n  align,\n  truncate,\n  as: Component = 'h2',\n  ...props\n}: HeadlineProps) {\n  return (\n    <Component\n      className={headline({ size, weight, align, truncate, className })}\n      {...props}\n    />\n  );\n}\n\nHeadline.displayName = 'Headline';\n"],"names":["cva","styles","_jsx"],"mappings":";;;;;;AAIA,MAAM,QAAQ,GAAGA,0BAAG,CAACC,uBAAM,CAAC,QAAQ,EAAE;AACpC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAEA,uBAAM,CAAC,aAAa,CAAC;AACzB,YAAA,EAAE,EAAEA,uBAAM,CAAC,aAAa,CAAC;AACzB,YAAA,EAAE,EAAEA,uBAAM,CAAC,aAAa,CAAC;AACzB,YAAA,EAAE,EAAEA,uBAAM,CAAC,aAAa,CAAC;AACzB,YAAA,KAAK,EAAEA,uBAAM,CAAC,gBAAgB,CAAC;AAC/B,YAAA,MAAM,EAAEA,uBAAM,CAAC,iBAAiB,CAAC;AACjC,YAAA,KAAK,EAAEA,uBAAM,CAAC,gBAAgB,CAAC;AAChC,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,OAAO,EAAEA,uBAAM,CAAC,yBAAyB,CAAC;AAC1C,YAAA,MAAM,EAAEA,uBAAM,CAAC,wBAAwB,CAAC;AACzC,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAEA,uBAAM,CAAC,qBAAqB,CAAC;AACnC,YAAA,MAAM,EAAEA,uBAAM,CAAC,uBAAuB,CAAC;AACvC,YAAA,KAAK,EAAEA,uBAAM,CAAC,sBAAsB,CAAC;AACtC,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAEA,uBAAM,CAAC,mBAAmB,CAAC;AAClC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,MAAM,EAAE,QAAQ;AAChB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,QAAQ,EAAE,KAAK;AAChB,KAAA;AACF,CAAA,CAAC,CAAC;AAcG,SAAU,QAAQ,CAAC,EACvB,SAAS,EACT,IAAI,EACJ,MAAM,EACN,KAAK,EACL,QAAQ,EACR,EAAE,EAAE,SAAS,GAAG,IAAI,EACpB,GAAG,KAAK,EACM,EAAA;IACd,QACEC,cAAC,CAAA,SAAS,EACR,EAAA,SAAS,EAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7D,GAAA,KAAK,EACT,CAAA,EACF;AACJ,CAAC;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

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

@@ -1,5 +1,5 @@
 import { type VariantProps } from 'class-variance-authority';
-import { HTMLAttributes } from 'react';
+import { ComponentProps } from 'react';
 declare const headline: (props?: ({
     size?: "small" | "medium" | "large" | "t1" | "t2" | "t3" | "t4" | null | undefined;
     weight?: "medium" | "regular" | null | undefined;
@@ -12,18 +12,12 @@ export type HeadlineBaseProps = VariantProps<typeof headline> & {
      */
     size?: 't1' | 't2' | 't3' | 't4' | 'small' | 'medium' | 'large';
 };
-export declare const Headline: import("react").ForwardRefExoticComponent<VariantProps<(props?: ({
-    size?: "small" | "medium" | "large" | "t1" | "t2" | "t3" | "t4" | null | undefined;
-    weight?: "medium" | "regular" | null | undefined;
-    align?: "center" | "left" | "right" | null | undefined;
-    truncate?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
-    /**
-     * @remarks Use "t1" | "t2" | "t3" | "t4"
-     */
-    size?: "small" | "medium" | "large" | "t1" | "t2" | "t3" | "t4" | undefined;
-} & HTMLAttributes<HTMLHeadingElement> & {
-    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
-} & import("react").RefAttributes<HTMLHeadingElement>>;
+type HeadlineProps = HeadlineBaseProps & ComponentProps<'h1'> & {
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+};
+export declare function Headline({ className, size, weight, align, truncate, as: Component, ...props }: HeadlineProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Headline {
+    var displayName: string;
+}
 export {};
 //# sourceMappingURL=headline.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"headline.d.ts","sourceRoot":"","sources":["../../../components/headline/headline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAInD,QAAA,MAAM,QAAQ;;;;;8EA8BZ,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,GAAG;IAC9D;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACjE,CAAC;AAOF,eAAO,MAAM,QAAQ;;;;;;IAXnB;;OAEG;;;;sDA8BJ,CAAC"}
+{"version":3,"file":"headline.d.ts","sourceRoot":"","sources":["../../../components/headline/headline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvC,QAAA,MAAM,QAAQ;;;;;8EA8BZ,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,GAAG;IAC9D;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACjE,CAAC;AAEF,KAAK,aAAa,GAAG,iBAAiB,GACpC,cAAc,CAAC,IAAI,CAAC,GAAG;IACrB,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC9C,CAAC;AAEJ,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,IAAI,EACJ,MAAM,EACN,KAAK,EACL,QAAQ,EACR,EAAE,EAAE,SAAgB,EACpB,GAAG,KAAK,EACT,EAAE,aAAa,2CAOf;yBAfe,QAAQ"}

package/dist/components/headline/headline.js

@@ -1,6 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
-import { forwardRef } from 'react';
 import styles from './headline.module.css.js';
 
 const headline = cva(styles.headline, {
@@ -34,9 +33,9 @@ const headline = cva(styles.headline, {
         truncate: false
     }
 });
-const Headline = forwardRef(({ className, size, weight, align, truncate, as: Component = 'h2', ...props }, ref) => {
-    return (jsx(Component, { ref: ref, className: headline({ size, weight, align, truncate, className }), ...props }));
-});
+function Headline({ className, size, weight, align, truncate, as: Component = 'h2', ...props }) {
+    return (jsx(Component, { className: headline({ size, weight, align, truncate, className }), ...props }));
+}
 Headline.displayName = 'Headline';
 
 export { Headline };

package/dist/components/headline/headline.js.map

@@ -1 +1 @@
-{"version":3,"file":"headline.js","sources":["../../../components/headline/headline.tsx"],"sourcesContent":["import { type VariantProps, cva } from 'class-variance-authority';\nimport { HTMLAttributes, forwardRef } from 'react';\n\nimport styles from './headline.module.css';\n\nconst headline = cva(styles.headline, {\n  variants: {\n    size: {\n      t1: styles['headline-t1'],\n      t2: styles['headline-t2'],\n      t3: styles['headline-t3'],\n      t4: styles['headline-t4'],\n      small: styles['headline-small'],\n      medium: styles['headline-medium'],\n      large: styles['headline-large']\n    },\n    weight: {\n      regular: styles['headline-weight-regular'],\n      medium: styles['headline-weight-medium']\n    },\n    align: {\n      left: styles['headline-align-left'],\n      center: styles['headline-align-center'],\n      right: styles['headline-align-right']\n    },\n    truncate: {\n      true: styles['headline-truncate']\n    }\n  },\n  defaultVariants: {\n    size: 't2',\n    weight: 'medium',\n    align: 'left',\n    truncate: false\n  }\n});\n\nexport type HeadlineBaseProps = VariantProps<typeof headline> & {\n  /**\n   * @remarks Use \"t1\" | \"t2\" | \"t3\" | \"t4\"\n   */\n  size?: 't1' | 't2' | 't3' | 't4' | 'small' | 'medium' | 'large';\n};\n\ntype HeadlineProps = HeadlineBaseProps &\n  HTMLAttributes<HTMLHeadingElement> & {\n    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  };\n\nexport const Headline = forwardRef<HTMLHeadingElement, HeadlineProps>(\n  (\n    {\n      className,\n      size,\n      weight,\n      align,\n      truncate,\n      as: Component = 'h2',\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <Component\n        ref={ref}\n        className={headline({ size, weight, align, truncate, className })}\n        {...props}\n      />\n    );\n  }\n);\n\nHeadline.displayName = 'Headline';\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,QAAQ,GAAG,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE;AACpC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,MAAM,CAAC,aAAa,CAAC;AACzB,YAAA,EAAE,EAAE,MAAM,CAAC,aAAa,CAAC;AACzB,YAAA,EAAE,EAAE,MAAM,CAAC,aAAa,CAAC;AACzB,YAAA,EAAE,EAAE,MAAM,CAAC,aAAa,CAAC;AACzB,YAAA,KAAK,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC/B,YAAA,MAAM,EAAE,MAAM,CAAC,iBAAiB,CAAC;AACjC,YAAA,KAAK,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAChC,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,OAAO,EAAE,MAAM,CAAC,yBAAyB,CAAC;AAC1C,YAAA,MAAM,EAAE,MAAM,CAAC,wBAAwB,CAAC;AACzC,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM,CAAC,qBAAqB,CAAC;AACnC,YAAA,MAAM,EAAE,MAAM,CAAC,uBAAuB,CAAC;AACvC,YAAA,KAAK,EAAE,MAAM,CAAC,sBAAsB,CAAC;AACtC,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAM,CAAC,mBAAmB,CAAC;AAClC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,MAAM,EAAE,QAAQ;AAChB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,QAAQ,EAAE,KAAK;AAChB,KAAA;AACF,CAAA,CAAC,CAAC;AAcI,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,SAAS,EACT,IAAI,EACJ,MAAM,EACN,KAAK,EACL,QAAQ,EACR,EAAE,EAAE,SAAS,GAAG,IAAI,EACpB,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,QACEA,GAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7D,GAAA,KAAK,EACT,CAAA,EACF;AACJ,CAAC,EACD;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"headline.js","sources":["../../../components/headline/headline.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { ComponentProps } from 'react';\nimport styles from './headline.module.css';\n\nconst headline = cva(styles.headline, {\n  variants: {\n    size: {\n      t1: styles['headline-t1'],\n      t2: styles['headline-t2'],\n      t3: styles['headline-t3'],\n      t4: styles['headline-t4'],\n      small: styles['headline-small'],\n      medium: styles['headline-medium'],\n      large: styles['headline-large']\n    },\n    weight: {\n      regular: styles['headline-weight-regular'],\n      medium: styles['headline-weight-medium']\n    },\n    align: {\n      left: styles['headline-align-left'],\n      center: styles['headline-align-center'],\n      right: styles['headline-align-right']\n    },\n    truncate: {\n      true: styles['headline-truncate']\n    }\n  },\n  defaultVariants: {\n    size: 't2',\n    weight: 'medium',\n    align: 'left',\n    truncate: false\n  }\n});\n\nexport type HeadlineBaseProps = VariantProps<typeof headline> & {\n  /**\n   * @remarks Use \"t1\" | \"t2\" | \"t3\" | \"t4\"\n   */\n  size?: 't1' | 't2' | 't3' | 't4' | 'small' | 'medium' | 'large';\n};\n\ntype HeadlineProps = HeadlineBaseProps &\n  ComponentProps<'h1'> & {\n    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  };\n\nexport function Headline({\n  className,\n  size,\n  weight,\n  align,\n  truncate,\n  as: Component = 'h2',\n  ...props\n}: HeadlineProps) {\n  return (\n    <Component\n      className={headline({ size, weight, align, truncate, className })}\n      {...props}\n    />\n  );\n}\n\nHeadline.displayName = 'Headline';\n"],"names":["_jsx"],"mappings":";;;;AAIA,MAAM,QAAQ,GAAG,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE;AACpC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,MAAM,CAAC,aAAa,CAAC;AACzB,YAAA,EAAE,EAAE,MAAM,CAAC,aAAa,CAAC;AACzB,YAAA,EAAE,EAAE,MAAM,CAAC,aAAa,CAAC;AACzB,YAAA,EAAE,EAAE,MAAM,CAAC,aAAa,CAAC;AACzB,YAAA,KAAK,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC/B,YAAA,MAAM,EAAE,MAAM,CAAC,iBAAiB,CAAC;AACjC,YAAA,KAAK,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAChC,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,OAAO,EAAE,MAAM,CAAC,yBAAyB,CAAC;AAC1C,YAAA,MAAM,EAAE,MAAM,CAAC,wBAAwB,CAAC;AACzC,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM,CAAC,qBAAqB,CAAC;AACnC,YAAA,MAAM,EAAE,MAAM,CAAC,uBAAuB,CAAC;AACvC,YAAA,KAAK,EAAE,MAAM,CAAC,sBAAsB,CAAC;AACtC,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAM,CAAC,mBAAmB,CAAC;AAClC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,MAAM,EAAE,QAAQ;AAChB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,QAAQ,EAAE,KAAK;AAChB,KAAA;AACF,CAAA,CAAC,CAAC;AAcG,SAAU,QAAQ,CAAC,EACvB,SAAS,EACT,IAAI,EACJ,MAAM,EACN,KAAK,EACL,QAAQ,EACR,EAAE,EAAE,SAAS,GAAG,IAAI,EACpB,GAAG,KAAK,EACM,EAAA;IACd,QACEA,GAAC,CAAA,SAAS,EACR,EAAA,SAAS,EAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7D,GAAA,KAAK,EACT,CAAA,EACF;AACJ,CAAC;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/dist/components/icon-button/icon-button.cjs

@@ -2,7 +2,6 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
-var React = require('react');
 var flex = require('../flex/flex.cjs');
 var iconButton_module = require('./icon-button.module.css.cjs');
 
@@ -19,7 +18,9 @@ const iconButton = classVarianceAuthority.cva(iconButton_module.default.iconButt
         size: 2
     }
 });
-const IconButton = React.forwardRef(({ className, size, disabled, children, 'aria-label': ariaLabel, style, ...props }, ref) => (jsxRuntime.jsx("button", { ref: ref, className: iconButton({ size, className }), disabled: disabled, type: 'button', "aria-label": ariaLabel, "aria-disabled": disabled, style: style, ...props, children: jsxRuntime.jsx(flex.Flex, { "aria-hidden": 'true', align: 'center', justify: 'center', children: children }) })));
+function IconButton({ className, size, disabled, children, 'aria-label': ariaLabel, style, ...props }) {
+    return (jsxRuntime.jsx("button", { className: iconButton({ size, className }), disabled: disabled, type: 'button', "aria-label": ariaLabel, "aria-disabled": disabled, style: style, ...props, children: jsxRuntime.jsx(flex.Flex, { "aria-hidden": 'true', align: 'center', justify: 'center', children: children }) }));
+}
 IconButton.displayName = 'IconButton';
 
 exports.IconButton = IconButton;

package/dist/components/icon-button/icon-button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.cjs","sources":["../../../components/icon-button/icon-button.tsx"],"sourcesContent":["import { VariantProps, cva } from 'class-variance-authority';\nimport { ElementRef, forwardRef } from 'react';\nimport { Flex } from '../flex';\n\nimport styles from './icon-button.module.css';\n\nconst iconButton = cva(styles.iconButton, {\n  variants: {\n    size: {\n      1: styles['iconButton-size-1'],\n      2: styles['iconButton-size-2'],\n      3: styles['iconButton-size-3'],\n      4: styles['iconButton-size-4']\n    }\n  },\n  defaultVariants: {\n    size: 2\n  }\n});\n\nexport interface IconButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof iconButton> {\n  size?: 1 | 2 | 3 | 4;\n  'aria-label'?: string;\n}\n\nexport const IconButton = forwardRef<ElementRef<'button'>, IconButtonProps>(\n  (\n    {\n      className,\n      size,\n      disabled,\n      children,\n      'aria-label': ariaLabel,\n      style,\n      ...props\n    },\n    ref\n  ) => (\n    <button\n      ref={ref}\n      className={iconButton({ size, className })}\n      disabled={disabled}\n      type='button'\n      aria-label={ariaLabel}\n      aria-disabled={disabled}\n      style={style}\n      {...props}\n    >\n      <Flex aria-hidden='true' align='center' justify='center'>\n        {children}\n      </Flex>\n    </button>\n  )\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":["cva","styles","forwardRef","_jsx","Flex"],"mappings":";;;;;;;;AAMA,MAAM,UAAU,GAAGA,0BAAG,CAACC,yBAAM,CAAC,UAAU,EAAE;AACxC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,CAAC,EAAEA,yBAAM,CAAC,mBAAmB,CAAC;AAC9B,YAAA,CAAC,EAAEA,yBAAM,CAAC,mBAAmB,CAAC;AAC9B,YAAA,CAAC,EAAEA,yBAAM,CAAC,mBAAmB,CAAC;AAC9B,YAAA,CAAC,EAAEA,yBAAM,CAAC,mBAAmB,CAAC;AAC/B,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,CAAC;AACR,KAAA;AACF,CAAA,CAAC,CAAC;AASU,MAAA,UAAU,GAAGC,gBAAU,CAClC,CACE,EACE,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,MAEHC,cAAA,CAAA,QAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAC1C,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,gBACD,SAAS,EAAA,eAAA,EACN,QAAQ,EACvB,KAAK,EAAE,KAAK,EAAA,GACR,KAAK,EAAA,QAAA,EAETA,eAACC,SAAI,EAAA,EAAA,aAAA,EAAa,MAAM,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,EACrD,QAAA,EAAA,QAAQ,GACJ,EACA,CAAA,CACV,EACD;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"icon-button.cjs","sources":["../../../components/icon-button/icon-button.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority';\nimport { ComponentProps } from 'react';\nimport { Flex } from '../flex';\nimport styles from './icon-button.module.css';\n\nconst iconButton = cva(styles.iconButton, {\n  variants: {\n    size: {\n      1: styles['iconButton-size-1'],\n      2: styles['iconButton-size-2'],\n      3: styles['iconButton-size-3'],\n      4: styles['iconButton-size-4']\n    }\n  },\n  defaultVariants: {\n    size: 2\n  }\n});\n\nexport interface IconButtonProps\n  extends ComponentProps<'button'>,\n    VariantProps<typeof iconButton> {\n  size?: 1 | 2 | 3 | 4;\n  'aria-label'?: string;\n}\n\nexport function IconButton({\n  className,\n  size,\n  disabled,\n  children,\n  'aria-label': ariaLabel,\n  style,\n  ...props\n}: IconButtonProps) {\n  return (\n    <button\n      className={iconButton({ size, className })}\n      disabled={disabled}\n      type='button'\n      aria-label={ariaLabel}\n      aria-disabled={disabled}\n      style={style}\n      {...props}\n    >\n      <Flex aria-hidden='true' align='center' justify='center'>\n        {children}\n      </Flex>\n    </button>\n  );\n}\n\nIconButton.displayName = 'IconButton';\n"],"names":["cva","styles","_jsx","Flex"],"mappings":";;;;;;;AAKA,MAAM,UAAU,GAAGA,0BAAG,CAACC,yBAAM,CAAC,UAAU,EAAE;AACxC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,CAAC,EAAEA,yBAAM,CAAC,mBAAmB,CAAC;AAC9B,YAAA,CAAC,EAAEA,yBAAM,CAAC,mBAAmB,CAAC;AAC9B,YAAA,CAAC,EAAEA,yBAAM,CAAC,mBAAmB,CAAC;AAC9B,YAAA,CAAC,EAAEA,yBAAM,CAAC,mBAAmB,CAAC;AAC/B,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,CAAC;AACR,KAAA;AACF,CAAA,CAAC,CAAC;AASG,SAAU,UAAU,CAAC,EACzB,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,GAAG,KAAK,EACQ,EAAA;IAChB,QACEC,2BACE,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAC1C,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,EACD,YAAA,EAAA,SAAS,EACN,eAAA,EAAA,QAAQ,EACvB,KAAK,EAAE,KAAK,EACR,GAAA,KAAK,YAETA,cAAC,CAAAC,SAAI,EAAa,EAAA,aAAA,EAAA,MAAM,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,YACrD,QAAQ,EAAA,CACJ,EACA,CAAA,EACT;AACJ,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/components/icon-button/icon-button.d.ts

@@ -1,11 +1,15 @@
 import { VariantProps } from 'class-variance-authority';
+import { ComponentProps } from 'react';
 declare const iconButton: (props?: ({
     size?: 1 | 2 | 3 | 4 | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButton> {
+export interface IconButtonProps extends ComponentProps<'button'>, VariantProps<typeof iconButton> {
     size?: 1 | 2 | 3 | 4;
     'aria-label'?: string;
 }
-export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function IconButton({ className, size, disabled, children, 'aria-label': ariaLabel, style, ...props }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IconButton {
+    var displayName: string;
+}
 export {};
 //# sourceMappingURL=icon-button.d.ts.map

package/dist/components/icon-button/icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../components/icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAO,MAAM,0BAA0B,CAAC;AAM7D,QAAA,MAAM,UAAU;;8EAYd,CAAC;AAEH,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,UAAU,CAAC;IACjC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,UAAU,+GA4BtB,CAAC"}
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../components/icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIvC,QAAA,MAAM,UAAU;;8EAYd,CAAC;AAEH,MAAM,WAAW,eACf,SAAQ,cAAc,CAAC,QAAQ,CAAC,EAC9B,YAAY,CAAC,OAAO,UAAU,CAAC;IACjC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,2CAgBjB;yBAxBe,UAAU"}

package/dist/components/icon-button/icon-button.js

@@ -1,6 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
-import { forwardRef } from 'react';
 import { Flex } from '../flex/flex.js';
 import styles from './icon-button.module.css.js';
 
@@ -17,7 +16,9 @@ const iconButton = cva(styles.iconButton, {
         size: 2
     }
 });
-const IconButton = forwardRef(({ className, size, disabled, children, 'aria-label': ariaLabel, style, ...props }, ref) => (jsx("button", { ref: ref, className: iconButton({ size, className }), disabled: disabled, type: 'button', "aria-label": ariaLabel, "aria-disabled": disabled, style: style, ...props, children: jsx(Flex, { "aria-hidden": 'true', align: 'center', justify: 'center', children: children }) })));
+function IconButton({ className, size, disabled, children, 'aria-label': ariaLabel, style, ...props }) {
+    return (jsx("button", { className: iconButton({ size, className }), disabled: disabled, type: 'button', "aria-label": ariaLabel, "aria-disabled": disabled, style: style, ...props, children: jsx(Flex, { "aria-hidden": 'true', align: 'center', justify: 'center', children: children }) }));
+}
 IconButton.displayName = 'IconButton';
 
 export { IconButton };