@fragments-sdk/ui 0.12.0 → 0.14.0

package/dist/components/EmptyState/index.cjs

@@ -31,21 +31,25 @@ function EmptyStateRoot({
   const contextValue = { size };
   return /* @__PURE__ */ jsxRuntime.jsx(EmptyStateContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, children }) });
 }
-function EmptyStateIcon({ children, className }) {
+function EmptyStateIcon({ children, className, ...htmlProps }) {
   const classes = [EmptyState_module.default.icon, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, children });
 }
-function EmptyStateTitle({ children, className }) {
+function EmptyStateTitle({ children, className, ...htmlProps }) {
   const classes = [EmptyState_module.default.title, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx("h3", { className: classes, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("h3", { ...htmlProps, className: classes, children });
 }
-function EmptyStateDescription({ children, className }) {
+function EmptyStateDescription({
+  children,
+  className,
+  ...htmlProps
+}) {
   const classes = [EmptyState_module.default.description, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: classes, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { ...htmlProps, className: classes, children });
 }
-function EmptyStateActions({ children, className }) {
+function EmptyStateActions({ children, className, ...htmlProps }) {
   const classes = [EmptyState_module.default.actions, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, children });
 }
 const EmptyState = Object.assign(EmptyStateRoot, {
   Icon: EmptyStateIcon,

package/dist/components/EmptyState/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/EmptyState/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './EmptyState.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport interface EmptyStateIconProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface EmptyStateTitleProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface EmptyStateDescriptionProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface EmptyStateActionsProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\n// ============================================\n// Context\n// ============================================\n\ninterface EmptyStateContextValue {\n  size: 'sm' | 'md' | 'lg';\n}\n\nconst EmptyStateContext = React.createContext<EmptyStateContextValue | null>(null);\n\nfunction useEmptyStateContext() {\n  const context = React.useContext(EmptyStateContext);\n  if (!context) {\n    throw new Error('EmptyState compound components must be used within an EmptyState');\n  }\n  return context;\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction EmptyStateRoot({\n  children,\n  size = 'md',\n  className,\n  ...htmlProps\n}: EmptyStateProps) {\n  const classes = [styles.emptyState, styles[size], className]\n    .filter(Boolean)\n    .join(' ');\n\n  const contextValue: EmptyStateContextValue = { size };\n\n  return (\n    <EmptyStateContext.Provider value={contextValue}>\n      <div {...htmlProps} className={classes}>{children}</div>\n    </EmptyStateContext.Provider>\n  );\n}\n\nfunction EmptyStateIcon({ children, className }: EmptyStateIconProps) {\n  const classes = [styles.icon, className].filter(Boolean).join(' ');\n  return <div className={classes}>{children}</div>;\n}\n\nfunction EmptyStateTitle({ children, className }: EmptyStateTitleProps) {\n  const classes = [styles.title, className].filter(Boolean).join(' ');\n  return <h3 className={classes}>{children}</h3>;\n}\n\nfunction EmptyStateDescription({ children, className }: EmptyStateDescriptionProps) {\n  const classes = [styles.description, className].filter(Boolean).join(' ');\n  return <p className={classes}>{children}</p>;\n}\n\nfunction EmptyStateActions({ children, className }: EmptyStateActionsProps) {\n  const classes = [styles.actions, className].filter(Boolean).join(' ');\n  return <div className={classes}>{children}</div>;\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const EmptyState = Object.assign(EmptyStateRoot, {\n  Icon: EmptyStateIcon,\n  Title: EmptyStateTitle,\n  Description: EmptyStateDescription,\n  Actions: EmptyStateActions,\n});\n\n// Re-export individual components for tree-shaking\nexport {\n  EmptyStateRoot,\n  EmptyStateIcon,\n  EmptyStateTitle,\n  EmptyStateDescription,\n  EmptyStateActions,\n  useEmptyStateContext,\n};\n"],"names":["React","styles","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA0CA,MAAM,oBAAoBA,iBAAM,cAA6C,IAAI;AAcjF,SAAS,eAAe;AAAA,EACtB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,UAAU,CAACC,kBAAAA,QAAO,YAAYA,kBAAAA,QAAO,IAAI,GAAG,SAAS,EACxD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,QAAM,eAAuC,EAAE,KAAA;AAE/C,SACEC,2BAAAA,IAAC,kBAAkB,UAAlB,EAA2B,OAAO,cACjC,UAAAA,2BAAAA,IAAC,OAAA,EAAK,GAAG,WAAW,WAAW,SAAU,UAAS,GACpD;AAEJ;AAEA,SAAS,eAAe,EAAE,UAAU,aAAkC;AACpE,QAAM,UAAU,CAACD,kBAAAA,QAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACjE,SAAOC,2BAAAA,IAAC,OAAA,EAAI,WAAW,SAAU,SAAA,CAAS;AAC5C;AAEA,SAAS,gBAAgB,EAAE,UAAU,aAAmC;AACtE,QAAM,UAAU,CAACD,kBAAAA,QAAO,OAAO,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAClE,SAAOC,2BAAAA,IAAC,MAAA,EAAG,WAAW,SAAU,SAAA,CAAS;AAC3C;AAEA,SAAS,sBAAsB,EAAE,UAAU,aAAyC;AAClF,QAAM,UAAU,CAACD,kBAAAA,QAAO,aAAa,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACxE,SAAOC,2BAAAA,IAAC,KAAA,EAAE,WAAW,SAAU,SAAA,CAAS;AAC1C;AAEA,SAAS,kBAAkB,EAAE,UAAU,aAAqC;AAC1E,QAAM,UAAU,CAACD,kBAAAA,QAAO,SAAS,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACpE,SAAOC,2BAAAA,IAAC,OAAA,EAAI,WAAW,SAAU,SAAA,CAAS;AAC5C;AAMO,MAAM,aAAa,OAAO,OAAO,gBAAgB;AAAA,EACtD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,aAAa;AAAA,EACb,SAAS;AACX,CAAC;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/EmptyState/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './EmptyState.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport interface EmptyStateIconProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface EmptyStateTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  children: React.ReactNode;\n}\n\nexport interface EmptyStateDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  children: React.ReactNode;\n}\n\nexport interface EmptyStateActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\n// ============================================\n// Context\n// ============================================\n\ninterface EmptyStateContextValue {\n  size: 'sm' | 'md' | 'lg';\n}\n\nconst EmptyStateContext = React.createContext<EmptyStateContextValue | null>(null);\n\nfunction useEmptyStateContext() {\n  const context = React.useContext(EmptyStateContext);\n  if (!context) {\n    throw new Error('EmptyState compound components must be used within an EmptyState');\n  }\n  return context;\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction EmptyStateRoot({\n  children,\n  size = 'md',\n  className,\n  ...htmlProps\n}: EmptyStateProps) {\n  const classes = [styles.emptyState, styles[size], className]\n    .filter(Boolean)\n    .join(' ');\n\n  const contextValue: EmptyStateContextValue = { size };\n\n  return (\n    <EmptyStateContext.Provider value={contextValue}>\n      <div {...htmlProps} className={classes}>{children}</div>\n    </EmptyStateContext.Provider>\n  );\n}\n\nfunction EmptyStateIcon({ children, className, ...htmlProps }: EmptyStateIconProps) {\n  const classes = [styles.icon, className].filter(Boolean).join(' ');\n  return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction EmptyStateTitle({ children, className, ...htmlProps }: EmptyStateTitleProps) {\n  const classes = [styles.title, className].filter(Boolean).join(' ');\n  return <h3 {...htmlProps} className={classes}>{children}</h3>;\n}\n\nfunction EmptyStateDescription({\n  children,\n  className,\n  ...htmlProps\n}: EmptyStateDescriptionProps) {\n  const classes = [styles.description, className].filter(Boolean).join(' ');\n  return <p {...htmlProps} className={classes}>{children}</p>;\n}\n\nfunction EmptyStateActions({ children, className, ...htmlProps }: EmptyStateActionsProps) {\n  const classes = [styles.actions, className].filter(Boolean).join(' ');\n  return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const EmptyState = Object.assign(EmptyStateRoot, {\n  Icon: EmptyStateIcon,\n  Title: EmptyStateTitle,\n  Description: EmptyStateDescription,\n  Actions: EmptyStateActions,\n});\n\n// Re-export individual components for tree-shaking\nexport {\n  EmptyStateRoot,\n  EmptyStateIcon,\n  EmptyStateTitle,\n  EmptyStateDescription,\n  EmptyStateActions,\n  useEmptyStateContext,\n};\n"],"names":["React","styles","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsCA,MAAM,oBAAoBA,iBAAM,cAA6C,IAAI;AAcjF,SAAS,eAAe;AAAA,EACtB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,UAAU,CAACC,kBAAAA,QAAO,YAAYA,kBAAAA,QAAO,IAAI,GAAG,SAAS,EACxD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,QAAM,eAAuC,EAAE,KAAA;AAE/C,SACEC,2BAAAA,IAAC,kBAAkB,UAAlB,EAA2B,OAAO,cACjC,UAAAA,2BAAAA,IAAC,OAAA,EAAK,GAAG,WAAW,WAAW,SAAU,UAAS,GACpD;AAEJ;AAEA,SAAS,eAAe,EAAE,UAAU,WAAW,GAAG,aAAkC;AAClF,QAAM,UAAU,CAACD,kBAAAA,QAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACjE,wCAAQ,OAAA,EAAK,GAAG,WAAW,WAAW,SAAU,UAAS;AAC3D;AAEA,SAAS,gBAAgB,EAAE,UAAU,WAAW,GAAG,aAAmC;AACpF,QAAM,UAAU,CAACA,kBAAAA,QAAO,OAAO,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAClE,wCAAQ,MAAA,EAAI,GAAG,WAAW,WAAW,SAAU,UAAS;AAC1D;AAEA,SAAS,sBAAsB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA+B;AAC7B,QAAM,UAAU,CAACA,kBAAAA,QAAO,aAAa,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACxE,wCAAQ,KAAA,EAAG,GAAG,WAAW,WAAW,SAAU,UAAS;AACzD;AAEA,SAAS,kBAAkB,EAAE,UAAU,WAAW,GAAG,aAAqC;AACxF,QAAM,UAAU,CAACA,kBAAAA,QAAO,SAAS,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACpE,wCAAQ,OAAA,EAAK,GAAG,WAAW,WAAW,SAAU,UAAS;AAC3D;AAMO,MAAM,aAAa,OAAO,OAAO,gBAAgB;AAAA,EACtD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,aAAa;AAAA,EACb,SAAS;AACX,CAAC;;;;;;;"}

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

@@ -3,31 +3,27 @@ export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     size?: 'sm' | 'md' | 'lg';
 }
-export interface EmptyStateIconProps {
+export interface EmptyStateIconProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
-    className?: string;
 }
-export interface EmptyStateTitleProps {
+export interface EmptyStateTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
     children: React.ReactNode;
-    className?: string;
 }
-export interface EmptyStateDescriptionProps {
+export interface EmptyStateDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
     children: React.ReactNode;
-    className?: string;
 }
-export interface EmptyStateActionsProps {
+export interface EmptyStateActionsProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
-    className?: string;
 }
 interface EmptyStateContextValue {
     size: 'sm' | 'md' | 'lg';
 }
 declare function useEmptyStateContext(): EmptyStateContextValue;
 declare function EmptyStateRoot({ children, size, className, ...htmlProps }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
-declare function EmptyStateIcon({ children, className }: EmptyStateIconProps): import("react/jsx-runtime").JSX.Element;
-declare function EmptyStateTitle({ children, className }: EmptyStateTitleProps): import("react/jsx-runtime").JSX.Element;
-declare function EmptyStateDescription({ children, className }: EmptyStateDescriptionProps): import("react/jsx-runtime").JSX.Element;
-declare function EmptyStateActions({ children, className }: EmptyStateActionsProps): import("react/jsx-runtime").JSX.Element;
+declare function EmptyStateIcon({ children, className, ...htmlProps }: EmptyStateIconProps): import("react/jsx-runtime").JSX.Element;
+declare function EmptyStateTitle({ children, className, ...htmlProps }: EmptyStateTitleProps): import("react/jsx-runtime").JSX.Element;
+declare function EmptyStateDescription({ children, className, ...htmlProps }: EmptyStateDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare function EmptyStateActions({ children, className, ...htmlProps }: EmptyStateActionsProps): import("react/jsx-runtime").JSX.Element;
 export declare const EmptyState: typeof EmptyStateRoot & {
     Icon: typeof EmptyStateIcon;
     Title: typeof EmptyStateTitle;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyState/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,UAAU,sBAAsB;IAC9B,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC1B;AAID,iBAAS,oBAAoB,2BAM5B;AAMD,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,IAAW,EACX,SAAS,EACT,GAAG,SAAS,EACb,EAAE,eAAe,2CAYjB;AAED,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAGnE;AAED,iBAAS,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,oBAAoB,2CAGrE;AAED,iBAAS,qBAAqB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,0BAA0B,2CAGjF;AAED,iBAAS,iBAAiB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,sBAAsB,2CAGzE;AAMD,eAAO,MAAM,UAAU;;;;;CAKrB,CAAC;AAGH,OAAO,EACL,cAAc,EACd,cAAc,EACd,eAAe,EACf,qBAAqB,EACrB,iBAAiB,EACjB,oBAAoB,GACrB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyState/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;IACpF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,0BAA2B,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IAC5F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAClF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAMD,UAAU,sBAAsB;IAC9B,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC1B;AAID,iBAAS,oBAAoB,2BAM5B;AAMD,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,IAAW,EACX,SAAS,EACT,GAAG,SAAS,EACb,EAAE,eAAe,2CAYjB;AAED,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,mBAAmB,2CAGjF;AAED,iBAAS,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,oBAAoB,2CAGnF;AAED,iBAAS,qBAAqB,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACb,EAAE,0BAA0B,2CAG5B;AAED,iBAAS,iBAAiB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,sBAAsB,2CAGvF;AAMD,eAAO,MAAM,UAAU;;;;;CAKrB,CAAC;AAGH,OAAO,EACL,cAAc,EACd,cAAc,EACd,eAAe,EACf,qBAAqB,EACrB,iBAAiB,EACjB,oBAAoB,GACrB,CAAC"}

package/dist/components/EmptyState/index.js

@@ -12,21 +12,25 @@ function EmptyStateRoot({
   const contextValue = { size };
   return /* @__PURE__ */ jsx(EmptyStateContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, children }) });
 }
-function EmptyStateIcon({ children, className }) {
+function EmptyStateIcon({ children, className, ...htmlProps }) {
   const classes = [styles.icon, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("div", { className: classes, children });
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, children });
 }
-function EmptyStateTitle({ children, className }) {
+function EmptyStateTitle({ children, className, ...htmlProps }) {
   const classes = [styles.title, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("h3", { className: classes, children });
+  return /* @__PURE__ */ jsx("h3", { ...htmlProps, className: classes, children });
 }
-function EmptyStateDescription({ children, className }) {
+function EmptyStateDescription({
+  children,
+  className,
+  ...htmlProps
+}) {
   const classes = [styles.description, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("p", { className: classes, children });
+  return /* @__PURE__ */ jsx("p", { ...htmlProps, className: classes, children });
 }
-function EmptyStateActions({ children, className }) {
+function EmptyStateActions({ children, className, ...htmlProps }) {
   const classes = [styles.actions, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("div", { className: classes, children });
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, children });
 }
 const EmptyState = Object.assign(EmptyStateRoot, {
   Icon: EmptyStateIcon,

package/dist/components/EmptyState/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/EmptyState/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './EmptyState.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport interface EmptyStateIconProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface EmptyStateTitleProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface EmptyStateDescriptionProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport interface EmptyStateActionsProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\n// ============================================\n// Context\n// ============================================\n\ninterface EmptyStateContextValue {\n  size: 'sm' | 'md' | 'lg';\n}\n\nconst EmptyStateContext = React.createContext<EmptyStateContextValue | null>(null);\n\nfunction useEmptyStateContext() {\n  const context = React.useContext(EmptyStateContext);\n  if (!context) {\n    throw new Error('EmptyState compound components must be used within an EmptyState');\n  }\n  return context;\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction EmptyStateRoot({\n  children,\n  size = 'md',\n  className,\n  ...htmlProps\n}: EmptyStateProps) {\n  const classes = [styles.emptyState, styles[size], className]\n    .filter(Boolean)\n    .join(' ');\n\n  const contextValue: EmptyStateContextValue = { size };\n\n  return (\n    <EmptyStateContext.Provider value={contextValue}>\n      <div {...htmlProps} className={classes}>{children}</div>\n    </EmptyStateContext.Provider>\n  );\n}\n\nfunction EmptyStateIcon({ children, className }: EmptyStateIconProps) {\n  const classes = [styles.icon, className].filter(Boolean).join(' ');\n  return <div className={classes}>{children}</div>;\n}\n\nfunction EmptyStateTitle({ children, className }: EmptyStateTitleProps) {\n  const classes = [styles.title, className].filter(Boolean).join(' ');\n  return <h3 className={classes}>{children}</h3>;\n}\n\nfunction EmptyStateDescription({ children, className }: EmptyStateDescriptionProps) {\n  const classes = [styles.description, className].filter(Boolean).join(' ');\n  return <p className={classes}>{children}</p>;\n}\n\nfunction EmptyStateActions({ children, className }: EmptyStateActionsProps) {\n  const classes = [styles.actions, className].filter(Boolean).join(' ');\n  return <div className={classes}>{children}</div>;\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const EmptyState = Object.assign(EmptyStateRoot, {\n  Icon: EmptyStateIcon,\n  Title: EmptyStateTitle,\n  Description: EmptyStateDescription,\n  Actions: EmptyStateActions,\n});\n\n// Re-export individual components for tree-shaking\nexport {\n  EmptyStateRoot,\n  EmptyStateIcon,\n  EmptyStateTitle,\n  EmptyStateDescription,\n  EmptyStateActions,\n  useEmptyStateContext,\n};\n"],"names":[],"mappings":";;;AA0CA,MAAM,oBAAoB,MAAM,cAA6C,IAAI;AAcjF,SAAS,eAAe;AAAA,EACtB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,UAAU,CAAC,OAAO,YAAY,OAAO,IAAI,GAAG,SAAS,EACxD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,QAAM,eAAuC,EAAE,KAAA;AAE/C,SACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,cACjC,UAAA,oBAAC,OAAA,EAAK,GAAG,WAAW,WAAW,SAAU,UAAS,GACpD;AAEJ;AAEA,SAAS,eAAe,EAAE,UAAU,aAAkC;AACpE,QAAM,UAAU,CAAC,OAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACjE,SAAO,oBAAC,OAAA,EAAI,WAAW,SAAU,SAAA,CAAS;AAC5C;AAEA,SAAS,gBAAgB,EAAE,UAAU,aAAmC;AACtE,QAAM,UAAU,CAAC,OAAO,OAAO,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAClE,SAAO,oBAAC,MAAA,EAAG,WAAW,SAAU,SAAA,CAAS;AAC3C;AAEA,SAAS,sBAAsB,EAAE,UAAU,aAAyC;AAClF,QAAM,UAAU,CAAC,OAAO,aAAa,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACxE,SAAO,oBAAC,KAAA,EAAE,WAAW,SAAU,SAAA,CAAS;AAC1C;AAEA,SAAS,kBAAkB,EAAE,UAAU,aAAqC;AAC1E,QAAM,UAAU,CAAC,OAAO,SAAS,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACpE,SAAO,oBAAC,OAAA,EAAI,WAAW,SAAU,SAAA,CAAS;AAC5C;AAMO,MAAM,aAAa,OAAO,OAAO,gBAAgB;AAAA,EACtD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,aAAa;AAAA,EACb,SAAS;AACX,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/EmptyState/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './EmptyState.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport interface EmptyStateIconProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface EmptyStateTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  children: React.ReactNode;\n}\n\nexport interface EmptyStateDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  children: React.ReactNode;\n}\n\nexport interface EmptyStateActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\n// ============================================\n// Context\n// ============================================\n\ninterface EmptyStateContextValue {\n  size: 'sm' | 'md' | 'lg';\n}\n\nconst EmptyStateContext = React.createContext<EmptyStateContextValue | null>(null);\n\nfunction useEmptyStateContext() {\n  const context = React.useContext(EmptyStateContext);\n  if (!context) {\n    throw new Error('EmptyState compound components must be used within an EmptyState');\n  }\n  return context;\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction EmptyStateRoot({\n  children,\n  size = 'md',\n  className,\n  ...htmlProps\n}: EmptyStateProps) {\n  const classes = [styles.emptyState, styles[size], className]\n    .filter(Boolean)\n    .join(' ');\n\n  const contextValue: EmptyStateContextValue = { size };\n\n  return (\n    <EmptyStateContext.Provider value={contextValue}>\n      <div {...htmlProps} className={classes}>{children}</div>\n    </EmptyStateContext.Provider>\n  );\n}\n\nfunction EmptyStateIcon({ children, className, ...htmlProps }: EmptyStateIconProps) {\n  const classes = [styles.icon, className].filter(Boolean).join(' ');\n  return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction EmptyStateTitle({ children, className, ...htmlProps }: EmptyStateTitleProps) {\n  const classes = [styles.title, className].filter(Boolean).join(' ');\n  return <h3 {...htmlProps} className={classes}>{children}</h3>;\n}\n\nfunction EmptyStateDescription({\n  children,\n  className,\n  ...htmlProps\n}: EmptyStateDescriptionProps) {\n  const classes = [styles.description, className].filter(Boolean).join(' ');\n  return <p {...htmlProps} className={classes}>{children}</p>;\n}\n\nfunction EmptyStateActions({ children, className, ...htmlProps }: EmptyStateActionsProps) {\n  const classes = [styles.actions, className].filter(Boolean).join(' ');\n  return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const EmptyState = Object.assign(EmptyStateRoot, {\n  Icon: EmptyStateIcon,\n  Title: EmptyStateTitle,\n  Description: EmptyStateDescription,\n  Actions: EmptyStateActions,\n});\n\n// Re-export individual components for tree-shaking\nexport {\n  EmptyStateRoot,\n  EmptyStateIcon,\n  EmptyStateTitle,\n  EmptyStateDescription,\n  EmptyStateActions,\n  useEmptyStateContext,\n};\n"],"names":[],"mappings":";;;AAsCA,MAAM,oBAAoB,MAAM,cAA6C,IAAI;AAcjF,SAAS,eAAe;AAAA,EACtB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,UAAU,CAAC,OAAO,YAAY,OAAO,IAAI,GAAG,SAAS,EACxD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,QAAM,eAAuC,EAAE,KAAA;AAE/C,SACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,cACjC,UAAA,oBAAC,OAAA,EAAK,GAAG,WAAW,WAAW,SAAU,UAAS,GACpD;AAEJ;AAEA,SAAS,eAAe,EAAE,UAAU,WAAW,GAAG,aAAkC;AAClF,QAAM,UAAU,CAAC,OAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACjE,6BAAQ,OAAA,EAAK,GAAG,WAAW,WAAW,SAAU,UAAS;AAC3D;AAEA,SAAS,gBAAgB,EAAE,UAAU,WAAW,GAAG,aAAmC;AACpF,QAAM,UAAU,CAAC,OAAO,OAAO,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAClE,6BAAQ,MAAA,EAAI,GAAG,WAAW,WAAW,SAAU,UAAS;AAC1D;AAEA,SAAS,sBAAsB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA+B;AAC7B,QAAM,UAAU,CAAC,OAAO,aAAa,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACxE,6BAAQ,KAAA,EAAG,GAAG,WAAW,WAAW,SAAU,UAAS;AACzD;AAEA,SAAS,kBAAkB,EAAE,UAAU,WAAW,GAAG,aAAqC;AACxF,QAAM,UAAU,CAAC,OAAO,SAAS,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACpE,6BAAQ,OAAA,EAAK,GAAG,WAAW,WAAW,SAAU,UAAS;AAC3D;AAMO,MAAM,aAAa,OAAO,OAAO,gBAAgB;AAAA,EACtD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,aAAa;AAAA,EACb,SAAS;AACX,CAAC;"}

package/dist/components/Fieldset/index.cjs

@@ -8,9 +8,9 @@ function FieldsetRoot({ children, disabled, className, ...htmlProps }) {
   const classes = [Fieldset_module.default.root, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsx(FieldsetRoot$1.FieldsetRoot, { ...htmlProps, disabled, className: classes, children });
 }
-function FieldsetLegend({ children, className }) {
+function FieldsetLegend({ children, className, ...htmlProps }) {
   const classes = [Fieldset_module.default.legend, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(FieldsetLegend$1.FieldsetLegend, { className: classes, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(FieldsetLegend$1.FieldsetLegend, { ...htmlProps, className: classes, children });
 }
 const Fieldset = Object.assign(FieldsetRoot, {
   Legend: FieldsetLegend

package/dist/components/Fieldset/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Fieldset/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';\nimport styles from './Fieldset.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface FieldsetProps extends React.HTMLAttributes<HTMLFieldSetElement> {\n  children: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface FieldsetLegendProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction FieldsetRoot({ children, disabled, className, ...htmlProps }: FieldsetProps) {\n  const classes = [styles.root, className].filter(Boolean).join(' ');\n\n  return (\n    <BaseFieldset.Root {...htmlProps} disabled={disabled} className={classes}>\n      {children}\n    </BaseFieldset.Root>\n  );\n}\n\nfunction FieldsetLegend({ children, className }: FieldsetLegendProps) {\n  const classes = [styles.legend, className].filter(Boolean).join(' ');\n  return <BaseFieldset.Legend className={classes}>{children}</BaseFieldset.Legend>;\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Fieldset = Object.assign(FieldsetRoot, {\n  Legend: FieldsetLegend,\n});\n\nexport { FieldsetRoot, FieldsetLegend };\n"],"names":["styles","jsx","BaseFieldset.Root","BaseFieldset.Legend"],"mappings":";;;;;;AAwBA,SAAS,aAAa,EAAE,UAAU,UAAU,WAAW,GAAG,aAA4B;AACpF,QAAM,UAAU,CAACA,gBAAAA,QAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjE,SACEC,2BAAAA,IAACC,eAAAA,cAAA,EAAmB,GAAG,WAAW,UAAoB,WAAW,SAC9D,UACH;AAEJ;AAEA,SAAS,eAAe,EAAE,UAAU,aAAkC;AACpE,QAAM,UAAU,CAACF,gBAAAA,QAAO,QAAQ,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACnE,wCAAQG,iBAAAA,gBAAA,EAAoB,WAAW,SAAU,SAAA,CAAS;AAC5D;AAMO,MAAM,WAAW,OAAO,OAAO,cAAc;AAAA,EAClD,QAAQ;AACV,CAAC;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Fieldset/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';\nimport styles from './Fieldset.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface FieldsetProps extends React.HTMLAttributes<HTMLFieldSetElement> {\n  children: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface FieldsetLegendProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction FieldsetRoot({ children, disabled, className, ...htmlProps }: FieldsetProps) {\n  const classes = [styles.root, className].filter(Boolean).join(' ');\n\n  return (\n    <BaseFieldset.Root {...htmlProps} disabled={disabled} className={classes}>\n      {children}\n    </BaseFieldset.Root>\n  );\n}\n\nfunction FieldsetLegend({ children, className, ...htmlProps }: FieldsetLegendProps) {\n  const classes = [styles.legend, className].filter(Boolean).join(' ');\n  return <BaseFieldset.Legend {...htmlProps} className={classes}>{children}</BaseFieldset.Legend>;\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Fieldset = Object.assign(FieldsetRoot, {\n  Legend: FieldsetLegend,\n});\n\nexport { FieldsetRoot, FieldsetLegend };\n"],"names":["styles","jsx","BaseFieldset.Root","BaseFieldset.Legend"],"mappings":";;;;;;AAuBA,SAAS,aAAa,EAAE,UAAU,UAAU,WAAW,GAAG,aAA4B;AACpF,QAAM,UAAU,CAACA,gBAAAA,QAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjE,SACEC,2BAAAA,IAACC,eAAAA,cAAA,EAAmB,GAAG,WAAW,UAAoB,WAAW,SAC9D,UACH;AAEJ;AAEA,SAAS,eAAe,EAAE,UAAU,WAAW,GAAG,aAAkC;AAClF,QAAM,UAAU,CAACF,gBAAAA,QAAO,QAAQ,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACnE,SAAOC,2BAAAA,IAACE,iBAAAA,gBAAA,EAAqB,GAAG,WAAW,WAAW,SAAU,UAAS;AAC3E;AAMO,MAAM,WAAW,OAAO,OAAO,cAAc;AAAA,EAClD,QAAQ;AACV,CAAC;;;;"}

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

@@ -3,12 +3,11 @@ export interface FieldsetProps extends React.HTMLAttributes<HTMLFieldSetElement>
     children: React.ReactNode;
     disabled?: boolean;
 }
-export interface FieldsetLegendProps {
+export interface FieldsetLegendProps extends React.HTMLAttributes<HTMLElement> {
     children: React.ReactNode;
-    className?: string;
 }
 declare function FieldsetRoot({ children, disabled, className, ...htmlProps }: FieldsetProps): import("react/jsx-runtime").JSX.Element;
-declare function FieldsetLegend({ children, className }: FieldsetLegendProps): import("react/jsx-runtime").JSX.Element;
+declare function FieldsetLegend({ children, className, ...htmlProps }: FieldsetLegendProps): import("react/jsx-runtime").JSX.Element;
 export declare const Fieldset: typeof FieldsetRoot & {
     Legend: typeof FieldsetLegend;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Fieldset/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,2CAQnF;AAED,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAGnE;AAMD,eAAO,MAAM,QAAQ;;CAEnB,CAAC;AAEH,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Fieldset/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC5E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAMD,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,2CAQnF;AAED,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,mBAAmB,2CAGjF;AAMD,eAAO,MAAM,QAAQ;;CAEnB,CAAC;AAEH,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/Fieldset/index.js

@@ -6,9 +6,9 @@ function FieldsetRoot({ children, disabled, className, ...htmlProps }) {
   const classes = [styles.root, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(FieldsetRoot$1, { ...htmlProps, disabled, className: classes, children });
 }
-function FieldsetLegend({ children, className }) {
+function FieldsetLegend({ children, className, ...htmlProps }) {
   const classes = [styles.legend, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(FieldsetLegend$1, { className: classes, children });
+  return /* @__PURE__ */ jsx(FieldsetLegend$1, { ...htmlProps, className: classes, children });
 }
 const Fieldset = Object.assign(FieldsetRoot, {
   Legend: FieldsetLegend

package/dist/components/Fieldset/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Fieldset/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';\nimport styles from './Fieldset.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface FieldsetProps extends React.HTMLAttributes<HTMLFieldSetElement> {\n  children: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface FieldsetLegendProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction FieldsetRoot({ children, disabled, className, ...htmlProps }: FieldsetProps) {\n  const classes = [styles.root, className].filter(Boolean).join(' ');\n\n  return (\n    <BaseFieldset.Root {...htmlProps} disabled={disabled} className={classes}>\n      {children}\n    </BaseFieldset.Root>\n  );\n}\n\nfunction FieldsetLegend({ children, className }: FieldsetLegendProps) {\n  const classes = [styles.legend, className].filter(Boolean).join(' ');\n  return <BaseFieldset.Legend className={classes}>{children}</BaseFieldset.Legend>;\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Fieldset = Object.assign(FieldsetRoot, {\n  Legend: FieldsetLegend,\n});\n\nexport { FieldsetRoot, FieldsetLegend };\n"],"names":["BaseFieldset.Root","BaseFieldset.Legend"],"mappings":";;;;AAwBA,SAAS,aAAa,EAAE,UAAU,UAAU,WAAW,GAAG,aAA4B;AACpF,QAAM,UAAU,CAAC,OAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjE,SACE,oBAACA,gBAAA,EAAmB,GAAG,WAAW,UAAoB,WAAW,SAC9D,UACH;AAEJ;AAEA,SAAS,eAAe,EAAE,UAAU,aAAkC;AACpE,QAAM,UAAU,CAAC,OAAO,QAAQ,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACnE,6BAAQC,kBAAA,EAAoB,WAAW,SAAU,SAAA,CAAS;AAC5D;AAMO,MAAM,WAAW,OAAO,OAAO,cAAc;AAAA,EAClD,QAAQ;AACV,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Fieldset/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';\nimport styles from './Fieldset.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface FieldsetProps extends React.HTMLAttributes<HTMLFieldSetElement> {\n  children: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface FieldsetLegendProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction FieldsetRoot({ children, disabled, className, ...htmlProps }: FieldsetProps) {\n  const classes = [styles.root, className].filter(Boolean).join(' ');\n\n  return (\n    <BaseFieldset.Root {...htmlProps} disabled={disabled} className={classes}>\n      {children}\n    </BaseFieldset.Root>\n  );\n}\n\nfunction FieldsetLegend({ children, className, ...htmlProps }: FieldsetLegendProps) {\n  const classes = [styles.legend, className].filter(Boolean).join(' ');\n  return <BaseFieldset.Legend {...htmlProps} className={classes}>{children}</BaseFieldset.Legend>;\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Fieldset = Object.assign(FieldsetRoot, {\n  Legend: FieldsetLegend,\n});\n\nexport { FieldsetRoot, FieldsetLegend };\n"],"names":["BaseFieldset.Root","BaseFieldset.Legend"],"mappings":";;;;AAuBA,SAAS,aAAa,EAAE,UAAU,UAAU,WAAW,GAAG,aAA4B;AACpF,QAAM,UAAU,CAAC,OAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjE,SACE,oBAACA,gBAAA,EAAmB,GAAG,WAAW,UAAoB,WAAW,SAC9D,UACH;AAEJ;AAEA,SAAS,eAAe,EAAE,UAAU,WAAW,GAAG,aAAkC;AAClF,QAAM,UAAU,CAAC,OAAO,QAAQ,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACnE,SAAO,oBAACC,kBAAA,EAAqB,GAAG,WAAW,WAAW,SAAU,UAAS;AAC3E;AAMO,MAAM,WAAW,OAAO,OAAO,cAAc;AAAA,EAClD,QAAQ;AACV,CAAC;"}

package/dist/components/Form/index.cjs

@@ -6,6 +6,7 @@ const Form$1 = require("../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_rea
 function FormRoot({
   children,
   errors,
+  onSubmit,
   onFormSubmit,
   onClearErrors,
   validationMode,
@@ -13,19 +14,18 @@ function FormRoot({
   ...htmlProps
 }) {
   const classes = [Form_module.default.root, className].filter(Boolean).join(" ");
-  const baseProps = {
-    ...htmlProps,
-    errors,
-    validationMode,
-    className: classes
-  };
-  if (onFormSubmit) {
-    baseProps.onSubmit = onFormSubmit;
-  }
-  if (onClearErrors) {
-    baseProps.onClearErrors = onClearErrors;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(Form$1.Form, { ...baseProps, children });
+  const submitHandler = onSubmit ?? onFormSubmit;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Form$1.Form,
+    {
+      ...htmlProps,
+      errors,
+      validationMode,
+      onSubmit: submitHandler,
+      className: classes,
+      children
+    }
+  );
 }
 const Form = Object.assign(FormRoot, {
   Root: FormRoot

package/dist/components/Form/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Form/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Form as BaseForm } from '@base-ui/react/form';\nimport styles from './Form.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface FormProps extends Omit<React.HTMLAttributes<HTMLFormElement>, 'onSubmit'> {\n  children: React.ReactNode;\n  errors?: Record<string, string | string[]>;\n  onFormSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;\n  onClearErrors?: (name: string) => void;\n  validationMode?: 'onSubmit' | 'onBlur' | 'onChange';\n}\n\n// ============================================\n// Component\n// ============================================\n\nfunction FormRoot({\n  children,\n  errors,\n  onFormSubmit,\n  onClearErrors,\n  validationMode,\n  className,\n  ...htmlProps\n}: FormProps) {\n  const classes = [styles.root, className].filter(Boolean).join(' ');\n\n  const baseProps: Record<string, unknown> = {\n    ...htmlProps,\n    errors,\n    validationMode,\n    className: classes,\n  };\n\n  if (onFormSubmit) {\n    baseProps.onSubmit = onFormSubmit;\n  }\n\n  if (onClearErrors) {\n    baseProps.onClearErrors = onClearErrors;\n  }\n\n  return (\n    <BaseForm {...baseProps}>\n      {children}\n    </BaseForm>\n  );\n}\n\nexport const Form = Object.assign(FormRoot, {\n  Root: FormRoot,\n});\n"],"names":["styles","jsx","BaseForm"],"mappings":";;;;;AAsBA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAc;AACZ,QAAM,UAAU,CAACA,YAAAA,QAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjE,QAAM,YAAqC;AAAA,IACzC,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA,WAAW;AAAA,EAAA;AAGb,MAAI,cAAc;AAChB,cAAU,WAAW;AAAA,EACvB;AAEA,MAAI,eAAe;AACjB,cAAU,gBAAgB;AAAA,EAC5B;AAEA,SACEC,2BAAAA,IAACC,OAAAA,MAAA,EAAU,GAAG,WACX,SAAA,CACH;AAEJ;AAEO,MAAM,OAAO,OAAO,OAAO,UAAU;AAAA,EAC1C,MAAM;AACR,CAAC;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Form/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Form as BaseForm } from '@base-ui/react/form';\nimport styles from './Form.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {\n  children: React.ReactNode;\n  errors?: Record<string, string | string[]>;\n  /** Standard form submit handler */\n  onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;\n  /** @deprecated Use onSubmit */\n  onFormSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;\n  onClearErrors?: (name: string) => void;\n  validationMode?: 'onSubmit' | 'onBlur' | 'onChange';\n}\n\n// ============================================\n// Component\n// ============================================\n\nfunction FormRoot({\n  children,\n  errors,\n  onSubmit,\n  onFormSubmit,\n  onClearErrors,\n  validationMode,\n  className,\n  ...htmlProps\n}: FormProps) {\n  const classes = [styles.root, className].filter(Boolean).join(' ');\n  const submitHandler = onSubmit ?? onFormSubmit;\n\n  return (\n    <BaseForm\n      {...htmlProps}\n      errors={errors}\n      validationMode={validationMode}\n      onSubmit={submitHandler}\n      className={classes}\n    >\n      {children}\n    </BaseForm>\n  );\n}\n\nexport const Form = Object.assign(FormRoot, {\n  Root: FormRoot,\n});\n"],"names":["styles","jsx","BaseForm"],"mappings":";;;;;AAyBA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAc;AACZ,QAAM,UAAU,CAACA,YAAAA,QAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACjE,QAAM,gBAAgB,YAAY;AAElC,SACEC,2BAAAA;AAAAA,IAACC,OAAAA;AAAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MAEV;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,MAAM,OAAO,OAAO,OAAO,UAAU;AAAA,EAC1C,MAAM;AACR,CAAC;;"}

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

@@ -1,12 +1,15 @@
 import * as React from 'react';
-export interface FormProps extends Omit<React.HTMLAttributes<HTMLFormElement>, 'onSubmit'> {
+export interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
     children: React.ReactNode;
     errors?: Record<string, string | string[]>;
+    /** Standard form submit handler */
+    onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
+    /** @deprecated Use onSubmit */
     onFormSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
     onClearErrors?: (name: string) => void;
     validationMode?: 'onSubmit' | 'onBlur' | 'onChange';
 }
-declare function FormRoot({ children, errors, onFormSubmit, onClearErrors, validationMode, className, ...htmlProps }: FormProps): import("react/jsx-runtime").JSX.Element;
+declare function FormRoot({ children, errors, onSubmit, onFormSubmit, onClearErrors, validationMode, className, ...htmlProps }: FormProps): import("react/jsx-runtime").JSX.Element;
 export declare const Form: typeof FormRoot & {
     Root: typeof FormRoot;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Form/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IACxF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IAC3C,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACjE,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC;CACrD;AAMD,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,MAAM,EACN,YAAY,EACZ,aAAa,EACb,cAAc,EACd,SAAS,EACT,GAAG,SAAS,EACb,EAAE,SAAS,2CAuBX;AAED,eAAO,MAAM,IAAI;;CAEf,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Form/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IAC5F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IAC3C,mCAAmC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IAC7D,+BAA+B;IAC/B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACjE,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC;CACrD;AAMD,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,cAAc,EACd,SAAS,EACT,GAAG,SAAS,EACb,EAAE,SAAS,2CAeX;AAED,eAAO,MAAM,IAAI;;CAEf,CAAC"}

package/dist/components/Form/index.js

@@ -4,6 +4,7 @@ import { Form as Form$1 } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@t
 function FormRoot({
   children,
   errors,
+  onSubmit,
   onFormSubmit,
   onClearErrors,
   validationMode,
@@ -11,19 +12,18 @@ function FormRoot({
   ...htmlProps
 }) {
   const classes = [styles.root, className].filter(Boolean).join(" ");
-  const baseProps = {
-    ...htmlProps,
-    errors,
-    validationMode,
-    className: classes
-  };
-  if (onFormSubmit) {
-    baseProps.onSubmit = onFormSubmit;
-  }
-  if (onClearErrors) {
-    baseProps.onClearErrors = onClearErrors;
-  }
-  return /* @__PURE__ */ jsx(Form$1, { ...baseProps, children });
+  const submitHandler = onSubmit ?? onFormSubmit;
+  return /* @__PURE__ */ jsx(
+    Form$1,
+    {
+      ...htmlProps,
+      errors,
+      validationMode,
+      onSubmit: submitHandler,
+      className: classes,
+      children
+    }
+  );
 }
 const Form = Object.assign(FormRoot, {
   Root: FormRoot

package/dist/components/Form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Form/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Form as BaseForm } from '@base-ui/react/form';\nimport styles from './Form.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface FormProps extends Omit<React.HTMLAttributes<HTMLFormElement>, 'onSubmit'> {\n  children: React.ReactNode;\n  errors?: Record<string, string | string[]>;\n  onFormSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;\n  onClearErrors?: (name: string) => void;\n  validationMode?: 'onSubmit' | 'onBlur' | 'onChange';\n}\n\n// ============================================\n// Component\n// ============================================\n\nfunction FormRoot({\n  children,\n  errors,\n  onFormSubmit,\n  onClearErrors,\n  validationMode,\n  className,\n  ...htmlProps\n}: FormProps) {\n  const classes = [styles.root, className].filter(Boolean).join(' ');\n\n  const baseProps: Record<string, unknown> = {\n    ...htmlProps,\n    errors,\n    validationMode,\n    className: classes,\n  };\n\n  if (onFormSubmit) {\n    baseProps.onSubmit = onFormSubmit;\n  }\n\n  if (onClearErrors) {\n    baseProps.onClearErrors = onClearErrors;\n  }\n\n  return (\n    <BaseForm {...baseProps}>\n      {children}\n    </BaseForm>\n  );\n}\n\nexport const Form = Object.assign(FormRoot, {\n  Root: FormRoot,\n});\n"],"names":["BaseForm"],"mappings":";;;AAsBA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAc;AACZ,QAAM,UAAU,CAAC,OAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjE,QAAM,YAAqC;AAAA,IACzC,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA,WAAW;AAAA,EAAA;AAGb,MAAI,cAAc;AAChB,cAAU,WAAW;AAAA,EACvB;AAEA,MAAI,eAAe;AACjB,cAAU,gBAAgB;AAAA,EAC5B;AAEA,SACE,oBAACA,QAAA,EAAU,GAAG,WACX,SAAA,CACH;AAEJ;AAEO,MAAM,OAAO,OAAO,OAAO,UAAU;AAAA,EAC1C,MAAM;AACR,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Form/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Form as BaseForm } from '@base-ui/react/form';\nimport styles from './Form.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {\n  children: React.ReactNode;\n  errors?: Record<string, string | string[]>;\n  /** Standard form submit handler */\n  onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;\n  /** @deprecated Use onSubmit */\n  onFormSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;\n  onClearErrors?: (name: string) => void;\n  validationMode?: 'onSubmit' | 'onBlur' | 'onChange';\n}\n\n// ============================================\n// Component\n// ============================================\n\nfunction FormRoot({\n  children,\n  errors,\n  onSubmit,\n  onFormSubmit,\n  onClearErrors,\n  validationMode,\n  className,\n  ...htmlProps\n}: FormProps) {\n  const classes = [styles.root, className].filter(Boolean).join(' ');\n  const submitHandler = onSubmit ?? onFormSubmit;\n\n  return (\n    <BaseForm\n      {...htmlProps}\n      errors={errors}\n      validationMode={validationMode}\n      onSubmit={submitHandler}\n      className={classes}\n    >\n      {children}\n    </BaseForm>\n  );\n}\n\nexport const Form = Object.assign(FormRoot, {\n  Root: FormRoot,\n});\n"],"names":["BaseForm"],"mappings":";;;AAyBA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAc;AACZ,QAAM,UAAU,CAAC,OAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACjE,QAAM,gBAAgB,YAAY;AAElC,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MAEV;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,MAAM,OAAO,OAAO,OAAO,UAAU;AAAA,EAC1C,MAAM;AACR,CAAC;"}

package/dist/components/Grid/Grid.module.scss.cjs

@@ -1,62 +1,62 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const grid = "_grid_1ki22_1";
-const columns1 = "_columns1_1ki22_6";
-const columns2 = "_columns2_1ki22_10";
-const columns3 = "_columns3_1ki22_14";
-const columns4 = "_columns4_1ki22_18";
-const columns5 = "_columns5_1ki22_22";
-const columns6 = "_columns6_1ki22_26";
-const columns7 = "_columns7_1ki22_30";
-const columns8 = "_columns8_1ki22_34";
-const columns9 = "_columns9_1ki22_38";
-const columns10 = "_columns10_1ki22_42";
-const columns11 = "_columns11_1ki22_46";
-const columns12 = "_columns12_1ki22_50";
-const columnsAuto = "_columnsAuto_1ki22_54";
-const columnsResponsive = "_columnsResponsive_1ki22_58";
-const gapNone = "_gapNone_1ki22_83";
-const gapXs = "_gapXs_1ki22_87";
-const gapSm = "_gapSm_1ki22_91";
-const gapMd = "_gapMd_1ki22_95";
-const gapLg = "_gapLg_1ki22_99";
-const gapXl = "_gapXl_1ki22_103";
-const paddingNone = "_paddingNone_1ki22_107";
-const paddingSm = "_paddingSm_1ki22_111";
-const paddingMd = "_paddingMd_1ki22_115";
-const paddingLg = "_paddingLg_1ki22_119";
-const alignStart = "_alignStart_1ki22_123";
-const alignCenter = "_alignCenter_1ki22_127";
-const alignEnd = "_alignEnd_1ki22_131";
-const alignStretch = "_alignStretch_1ki22_135";
-const justifyStart = "_justifyStart_1ki22_139";
-const justifyCenter = "_justifyCenter_1ki22_143";
-const justifyEnd = "_justifyEnd_1ki22_147";
-const justifyStretch = "_justifyStretch_1ki22_151";
-const item = "_item_1ki22_155";
-const colSpan1 = "_colSpan1_1ki22_159";
-const colSpan2 = "_colSpan2_1ki22_163";
-const colSpan3 = "_colSpan3_1ki22_167";
-const colSpan4 = "_colSpan4_1ki22_171";
-const colSpan5 = "_colSpan5_1ki22_175";
-const colSpan6 = "_colSpan6_1ki22_179";
-const colSpan7 = "_colSpan7_1ki22_183";
-const colSpan8 = "_colSpan8_1ki22_187";
-const colSpan9 = "_colSpan9_1ki22_191";
-const colSpan10 = "_colSpan10_1ki22_195";
-const colSpan11 = "_colSpan11_1ki22_199";
-const colSpan12 = "_colSpan12_1ki22_203";
-const colSpanFull = "_colSpanFull_1ki22_207";
-const rowSpan1 = "_rowSpan1_1ki22_211";
-const rowSpan2 = "_rowSpan2_1ki22_215";
-const rowSpan3 = "_rowSpan3_1ki22_219";
-const rowSpan4 = "_rowSpan4_1ki22_223";
-const rowSpan5 = "_rowSpan5_1ki22_227";
-const rowSpan6 = "_rowSpan6_1ki22_231";
-const selfAlignStart = "_selfAlignStart_1ki22_235";
-const selfAlignCenter = "_selfAlignCenter_1ki22_239";
-const selfAlignEnd = "_selfAlignEnd_1ki22_243";
-const selfAlignStretch = "_selfAlignStretch_1ki22_247";
+const grid = "_grid_42f6i_1";
+const columns1 = "_columns1_42f6i_6";
+const columns2 = "_columns2_42f6i_10";
+const columns3 = "_columns3_42f6i_14";
+const columns4 = "_columns4_42f6i_18";
+const columns5 = "_columns5_42f6i_22";
+const columns6 = "_columns6_42f6i_26";
+const columns7 = "_columns7_42f6i_30";
+const columns8 = "_columns8_42f6i_34";
+const columns9 = "_columns9_42f6i_38";
+const columns10 = "_columns10_42f6i_42";
+const columns11 = "_columns11_42f6i_46";
+const columns12 = "_columns12_42f6i_50";
+const columnsAuto = "_columnsAuto_42f6i_54";
+const columnsResponsive = "_columnsResponsive_42f6i_58";
+const gapNone = "_gapNone_42f6i_83";
+const gapXs = "_gapXs_42f6i_87";
+const gapSm = "_gapSm_42f6i_91";
+const gapMd = "_gapMd_42f6i_95";
+const gapLg = "_gapLg_42f6i_99";
+const gapXl = "_gapXl_42f6i_103";
+const paddingNone = "_paddingNone_42f6i_107";
+const paddingSm = "_paddingSm_42f6i_111";
+const paddingMd = "_paddingMd_42f6i_115";
+const paddingLg = "_paddingLg_42f6i_119";
+const alignStart = "_alignStart_42f6i_123";
+const alignCenter = "_alignCenter_42f6i_127";
+const alignEnd = "_alignEnd_42f6i_131";
+const alignStretch = "_alignStretch_42f6i_135";
+const justifyStart = "_justifyStart_42f6i_139";
+const justifyCenter = "_justifyCenter_42f6i_143";
+const justifyEnd = "_justifyEnd_42f6i_147";
+const justifyStretch = "_justifyStretch_42f6i_151";
+const item = "_item_42f6i_155";
+const colSpan1 = "_colSpan1_42f6i_159";
+const colSpan2 = "_colSpan2_42f6i_163";
+const colSpan3 = "_colSpan3_42f6i_167";
+const colSpan4 = "_colSpan4_42f6i_171";
+const colSpan5 = "_colSpan5_42f6i_175";
+const colSpan6 = "_colSpan6_42f6i_179";
+const colSpan7 = "_colSpan7_42f6i_183";
+const colSpan8 = "_colSpan8_42f6i_187";
+const colSpan9 = "_colSpan9_42f6i_191";
+const colSpan10 = "_colSpan10_42f6i_195";
+const colSpan11 = "_colSpan11_42f6i_199";
+const colSpan12 = "_colSpan12_42f6i_203";
+const colSpanFull = "_colSpanFull_42f6i_207";
+const rowSpan1 = "_rowSpan1_42f6i_211";
+const rowSpan2 = "_rowSpan2_42f6i_215";
+const rowSpan3 = "_rowSpan3_42f6i_219";
+const rowSpan4 = "_rowSpan4_42f6i_223";
+const rowSpan5 = "_rowSpan5_42f6i_227";
+const rowSpan6 = "_rowSpan6_42f6i_231";
+const selfAlignStart = "_selfAlignStart_42f6i_235";
+const selfAlignCenter = "_selfAlignCenter_42f6i_239";
+const selfAlignEnd = "_selfAlignEnd_42f6i_243";
+const selfAlignStretch = "_selfAlignStretch_42f6i_247";
 const styles = {
   grid,
   columns1,