@fpkit/acss 0.5.13 → 0.6.1

package/libs/{chunk-PQ2K3BM6.cjs → chunk-2NRIP6RB.cjs}

@@ -1,17 +1,17 @@
 'use strict';
 
-var chunkL75OQKEI_cjs = require('./chunk-L75OQKEI.cjs');
+var chunkENTCUJ3A_cjs = require('./chunk-ENTCUJ3A.cjs');
 var o = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var o__default = /*#__PURE__*/_interopDefault(o);
 
-var r=o__default.default.memo(o__default.default.forwardRef(({level:e="h2",id:t,styles:i,ui:s,children:d,className:m,...c},h)=>o__default.default.createElement(chunkL75OQKEI_cjs.a,{as:e,id:t,styles:i,"data-ui":s,className:m,ref:h,...c},d)));r.displayName="Title";var a=r;var p=o__default.default.forwardRef(({type:e="h3",...t},i)=>(process.env.NODE_ENV==="development"&&console.warn(`[@fpkit/acss] Heading component is deprecated and will be removed in v3.0.0. Please use the Title component instead.
+var r=o__default.default.memo(o__default.default.forwardRef(({level:e="h2",id:t,styles:i,ui:s,children:d,className:m,...c},h)=>o__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:e,id:t,styles:i,"data-ui":s,className:m,ref:h,...c},d)));r.displayName="Title";var a=r;var p=o__default.default.forwardRef(({type:e="h3",...t},i)=>(process.env.NODE_ENV==="development"&&console.warn(`[@fpkit/acss] Heading component is deprecated and will be removed in v3.0.0. Please use the Title component instead.
 Migration: <Heading type="${e}"> \u2192 <Title level="${e}">
 See documentation: https://fpkit.dev/components/title`),o__default.default.createElement(a,{level:e,ref:i,...t})));p.displayName="Heading (Deprecated)";var H=p;
 
 exports.a = a;
 exports.b = H;
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-PQ2K3BM6.cjs.map
+//# sourceMappingURL=chunk-2NRIP6RB.cjs.map

package/libs/chunk-33PNJ4LO.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var chunkENTCUJ3A_cjs = require('./chunk-ENTCUJ3A.cjs');
+var n = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var n__default = /*#__PURE__*/_interopDefault(n);
+
+var s=n__default.default.forwardRef(({href:a,target:o,rel:r,children:p,styles:m,prefetch:t=!1,btnStyle:d,onClick:c,onPointerDown:l,...k},u)=>{let y=n__default.default.useMemo(()=>{if(o==="_blank"){let e=new Set(["noopener","noreferrer"]);return t&&e.add("prefetch"),r&&r.split(/\s+/).forEach(i=>{i&&e.add(i);}),Array.from(e).join(" ")}return r},[o,r,t]);return n__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"a",ref:u,href:a,target:o,rel:y,styles:m,"data-btn":d,onClick:c,onPointerDown:l,...k},p)});s.displayName="Link";var w=s;
+
+exports.a = s;
+exports.b = w;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-33PNJ4LO.cjs.map

package/libs/chunk-33PNJ4LO.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/link/link.tsx"],"names":["React","Link","href","target","rel","children","styles","prefetch","btnStyle","onClick","onPointerDown","props","ref","computedRel","securityTokens","token","ui_default","link_default"],"mappings":"yCAAA,OAAOA,MAAW,QA+FX,IAAMC,EAAOD,EAAM,WACxB,CACE,CACE,KAAAE,EACA,OAAAC,EACA,IAAAC,EACA,SAAAC,EACA,OAAAC,EACA,SAAAC,EAAW,GACX,SAAAC,EACA,QAAAC,EACA,cAAAC,EACA,GAAGC,CACL,EACAC,IACG,CAWH,IAAMC,EAAcb,EAAM,QAAQ,IAAM,CACtC,GAAIG,IAAW,SAAU,CAEvB,IAAMW,EAAiB,IAAI,IAAI,CAAC,WAAY,YAAY,CAAC,EAGzD,OAAIP,GACFO,EAAe,IAAI,UAAU,EAI3BV,GACFA,EAAI,MAAM,KAAK,EAAE,QAASW,GAAU,CAC9BA,GAAOD,EAAe,IAAIC,CAAK,CACrC,CAAC,EAGI,MAAM,KAAKD,CAAc,EAAE,KAAK,GAAG,CAC5C,CAGA,OAAOV,CACT,EAAG,CAACD,EAAQC,EAAKG,CAAQ,CAAC,EAE1B,OACEP,EAAA,cAACgB,EAAA,CACC,GAAG,IACH,IAAKJ,EACL,KAAMV,EACN,OAAQC,EACR,IAAKU,EACL,OAAQP,EACR,WAAUE,EACV,QAASC,EACT,cAAeC,EACd,GAAGC,GAEHN,CACH,CAEJ,CACF,EAEAJ,EAAK,YAAc,OAEnB,IAAOgB,EAAQhB","sourcesContent":["import React from \"react\";\nimport UI from \"../ui\";\nimport type { LinkProps } from \"./link.types\";\n\n/**\n * Link - A semantic, accessible anchor component with enhanced security and styling.\n *\n * The Link component renders accessible `<a>` elements with automatic security\n * attributes for external links, customizable styling variants, and full WCAG 2.1\n * AA compliance. It supports traditional text links, button-styled links, and\n * programmatic focus management via ref forwarding.\n *\n * ## Features\n *\n * - 🔒 **Automatic Security**: External links get `rel=\"noopener noreferrer\"`\n * - ♿ **WCAG 2.1 AA Compliant**: Accessible focus indicators and semantic HTML\n * - 🎨 **Flexible Styling**: Text links, button links, and pill variants\n * - ⚡ **Performance**: Optional prefetch hints for faster navigation\n * - 🎯 **Ref Forwarding**: Direct DOM access for focus management and scroll\n * - 🧪 **Type-Safe**: Full TypeScript support with comprehensive prop types\n *\n * ## Accessibility\n *\n * - ✅ Semantic `<a>` element for proper keyboard navigation\n * - ✅ Focus indicators meet WCAG 2.4.7 (3:1 contrast ratio)\n * - ✅ Screen readers announce link purpose and destination\n * - ✅ External links include security attributes automatically\n * - ✅ Supports `aria-label` for icon-only or ambiguous links\n * - ✅ Ref forwarding enables skip-link patterns\n *\n * @example\n * // Basic internal link\n * <Link href=\"/about\">About Us</Link>\n *\n * @example\n * // External link with automatic security\n * <Link href=\"https://example.com\" target=\"_blank\">\n *   Visit Example\n * </Link>\n *\n * @example\n * // Button-styled call-to-action link\n * <Link href=\"/signup\">\n *   <b>Get Started</b>\n * </Link>\n *\n * @example\n * // Icon-only link with accessible label\n * <Link href=\"/settings\" aria-label=\"Open settings\">\n *   <SettingsIcon aria-hidden=\"true\" />\n * </Link>\n *\n * @example\n * // Analytics tracking with onClick (includes keyboard users)\n * <Link\n *   href=\"/products\"\n *   onClick={(e) => trackEvent('link_click', { href: '/products' })}\n * >\n *   Browse Products\n * </Link>\n *\n * @example\n * // Skip link with ref forwarding for focus management\n * const mainRef = useRef<HTMLAnchorElement>(null);\n *\n * <Link ref={mainRef} href=\"#main-content\">\n *   Skip to main content\n * </Link>\n *\n * @example\n * // Custom styled link with CSS variables\n * <Link\n *   href=\"/products\"\n *   styles={{\n *     '--link-color': '#0066cc',\n *     '--link-decoration': 'underline',\n *   }}\n * >\n *   Browse Products\n * </Link>\n *\n * @example\n * // ✅ GOOD: Descriptive link text\n * <Link href=\"/docs/installation\">\n *   Read installation guide\n * </Link>\n *\n * @example\n * // ❌ BAD: Generic link text (poor for screen readers)\n * <Link href=\"/docs/installation\">\n *   Click here\n * </Link>\n *\n * @see {@link LinkProps} for complete prop documentation\n */\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  (\n    {\n      href,\n      target,\n      rel,\n      children,\n      styles,\n      prefetch = false,\n      btnStyle,\n      onClick,\n      onPointerDown,\n      ...props\n    },\n    ref\n  ) => {\n    /**\n     * Compute the final `rel` attribute value with security defaults.\n     *\n     * For external links (target=\"_blank\"), we merge user-provided `rel` values\n     * with security defaults `noopener noreferrer` to prevent:\n     * - window.opener exploitation (noopener)\n     * - Referrer header leakage (noreferrer)\n     *\n     * If prefetch is enabled, we also add the `prefetch` hint.\n     */\n    const computedRel = React.useMemo(() => {\n      if (target === \"_blank\") {\n        // Start with security defaults\n        const securityTokens = new Set([\"noopener\", \"noreferrer\"]);\n\n        // Add prefetch if enabled\n        if (prefetch) {\n          securityTokens.add(\"prefetch\");\n        }\n\n        // Merge with user-provided rel tokens (if any)\n        if (rel) {\n          rel.split(/\\s+/).forEach((token) => {\n            if (token) securityTokens.add(token);\n          });\n        }\n\n        return Array.from(securityTokens).join(\" \");\n      }\n\n      // For non-external links, use provided rel as-is\n      return rel;\n    }, [target, rel, prefetch]);\n\n    return (\n      <UI\n        as=\"a\"\n        ref={ref}\n        href={href}\n        target={target}\n        rel={computedRel}\n        styles={styles}\n        data-btn={btnStyle}\n        onClick={onClick}\n        onPointerDown={onPointerDown}\n        {...props}\n      >\n        {children}\n      </UI>\n    );\n  }\n);\n\nLink.displayName = \"Link\";\n\nexport default Link;\n"]}

package/libs/chunk-4BZKFPEC.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var chunkE2AJURUW_cjs = require('./chunk-E2AJURUW.cjs');
+var chunkPNWIRCG3_cjs = require('./chunk-PNWIRCG3.cjs');
+var chunkTON2YGMD_cjs = require('./chunk-TON2YGMD.cjs');
+var f = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var f__default = /*#__PURE__*/_interopDefault(f);
+
+var c=f__default.default.forwardRef(({type:a="text",name:b,value:y,defaultValue:I,placeholder:h,id:e,styles:v,classes:D,isDisabled:P,disabled:g,readOnly:n,required:s=!1,validationState:i="none",errorMessage:x,hintText:E,onChange:L,onBlur:M,onFocus:N,onKeyDown:o,onEnter:l,maxLength:$,minLength:F,pattern:H,autoComplete:R,autoFocus:T=!1,inputMode:w,...A},B)=>{let S=chunkPNWIRCG3_cjs.a(g,P),{disabledProps:p,handlers:j}=chunkTON2YGMD_cjs.a(S,{handlers:{onChange:L,onBlur:M,onKeyDown:r=>{r.key==="Enter"&&l&&l(r),o&&o(r);}},className:D}),k=i==="invalid",t=[];x&&e&&t.push(`${e}-error`),E&&e&&t.push(`${e}-hint`);let C=t.length>0?t.join(" "):void 0,K=h||(s?`* ${a} input`:`${a} input`);return f__default.default.createElement(chunkE2AJURUW_cjs.a,{as:"input",ref:B,id:e,type:a,name:b,value:y,defaultValue:I,placeholder:K,className:p.className,styles:v,readOnly:n,required:s,maxLength:$,minLength:F,pattern:H,autoComplete:R,autoFocus:T,inputMode:w,...j,onFocus:N,"aria-disabled":p["aria-disabled"],"aria-readonly":n,"aria-required":s,"aria-invalid":k,"aria-describedby":C,"data-validation":i,...A})});c.displayName="Input";var J=c;
+
+exports.a = c;
+exports.b = J;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-4BZKFPEC.cjs.map

package/libs/chunk-4BZKFPEC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/inputs.tsx"],"names":["React","Input","type","name","value","defaultValue","placeholder","id","styles","classes","isDisabled","disabled","readOnly","required","validationState","errorMessage","hintText","onChange","onBlur","onFocus","onKeyDown","onEnter","maxLength","minLength","pattern","autoComplete","autoFocus","inputMode","props","ref","isInputDisabled","resolveDisabledState","disabledProps","handlers","useDisabledState","e","isInvalid","describedByIds","ariaDescribedBy","accessiblePlaceholder","fp_default","inputs_default"],"mappings":"2HAAA,OAAOA,MAAW,QAoDX,IAAMC,EAAQD,EAAM,WACzB,CACE,CACE,KAAAE,EAAO,OACP,KAAAC,EACA,MAAAC,EACA,aAAAC,EACA,YAAAC,EACA,GAAAC,EACA,OAAAC,EACA,QAAAC,EACA,WAAAC,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EAAW,GACX,gBAAAC,EAAkB,OAClB,aAAAC,EACA,SAAAC,EACA,SAAAC,EACA,OAAAC,EACA,QAAAC,EACA,UAAAC,EACA,QAAAC,EACA,UAAAC,EACA,UAAAC,EACA,QAAAC,EACA,aAAAC,EACA,UAAAC,EAAY,GACZ,UAAAC,EACA,GAAGC,CACL,EACAC,IACG,CAEH,IAAMC,EAAkBC,EAAqBpB,EAAUD,CAAU,EAG3D,CAAE,cAAAsB,EAAe,SAAAC,CAAS,EAAIC,EAClCJ,EACA,CACE,SAAU,CACR,SAAAb,EACA,OAAAC,EACA,UAAYiB,GAA6C,CAEnDA,EAAE,MAAQ,SAAWd,GACvBA,EAAQc,CAAC,EAGPf,GACFA,EAAUe,CAAC,CAEf,CAGF,EAEA,UAAW1B,CACb,CACF,EAGM2B,EAAYtB,IAAoB,UAGhCuB,EAA2B,CAAC,EAC9BtB,GAAgBR,GAClB8B,EAAe,KAAK,GAAG9B,CAAE,QAAQ,EAE/BS,GAAYT,GACd8B,EAAe,KAAK,GAAG9B,CAAE,OAAO,EAElC,IAAM+B,EACJD,EAAe,OAAS,EAAIA,EAAe,KAAK,GAAG,EAAI,OAGnDE,EACJjC,IAAgBO,EAAW,KAAKX,CAAI,SAAW,GAAGA,CAAI,UAExD,OACEF,EAAA,cAACwC,EAAA,CACC,GAAG,QACH,IAAKX,EACL,GAAItB,EACJ,KAAML,EACN,KAAMC,EACN,MAAOC,EACP,aAAcC,EACd,YAAakC,EACb,UAAWP,EAAc,UACzB,OAAQxB,EACR,SAAUI,EACV,SAAUC,EACV,UAAWS,EACX,UAAWC,EACX,QAASC,EACT,aAAcC,EACd,UAAWC,EACX,UAAWC,EAEV,GAAGM,EACJ,QAASd,EAET,gBAAea,EAAc,eAAe,EAC5C,gBAAepB,EACf,gBAAeC,EACf,eAAcuB,EACd,mBAAkBE,EAElB,kBAAiBxB,EAChB,GAAGc,EACN,CAEJ,CACF,EAEA3B,EAAM,YAAc,QACpB,IAAOwC,EAAQxC","sourcesContent":["import React from \"react\";\nimport FP from \"../fp\";\nimport type { InputProps } from \"./form.types\";\nimport { useDisabledState } from \"../../hooks/use-disabled-state\";\nimport { resolveDisabledState } from \"../../utils/accessibility\";\n\nexport type { InputProps } from \"./form.types\";\n\n/**\n * Input component - Accessible text input with validation support\n *\n * A flexible input component that supports various input types, validation states,\n * and proper ARIA attributes for accessibility. Integrates seamlessly with the\n * Field component for complete form control composition.\n *\n * @component\n * @example\n * // Basic text input\n * <Input\n *   id=\"username\"\n *   name=\"username\"\n *   placeholder=\"Enter username\"\n *   required\n * />\n *\n * @example\n * // Input with error state\n * <Input\n *   id=\"email\"\n *   type=\"email\"\n *   validationState=\"invalid\"\n *   errorMessage=\"Please enter a valid email\"\n *   aria-describedby=\"email-error\"\n * />\n *\n * @example\n * // Controlled input with validation\n * <Input\n *   id=\"password\"\n *   type=\"password\"\n *   value={password}\n *   onChange={(e) => setPassword(e.target.value)}\n *   minLength={8}\n *   required\n * />\n *\n * @param {InputProps} props - Component props\n * @returns {JSX.Element} Input element with proper accessibility attributes\n *\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/error-identification.html|WCAG 3.3.1 Error Identification}\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html|WCAG 4.1.2 Name, Role, Value}\n */\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      type = \"text\",\n      name,\n      value,\n      defaultValue,\n      placeholder,\n      id,\n      styles,\n      classes,\n      isDisabled, // Legacy support\n      disabled,\n      readOnly,\n      required = false,\n      validationState = \"none\",\n      errorMessage,\n      hintText,\n      onChange,\n      onBlur,\n      onFocus,\n      onKeyDown,\n      onEnter,\n      maxLength,\n      minLength,\n      pattern,\n      autoComplete,\n      autoFocus = false,\n      inputMode,\n      ...props\n    },\n    ref\n  ) => {\n    // Support both `disabled` and `isDisabled` props (legacy compatibility)\n    const isInputDisabled = resolveDisabledState(disabled, isDisabled);\n\n    // Use the disabled state hook with enhanced API for automatic className merging\n    const { disabledProps, handlers } = useDisabledState<HTMLInputElement>(\n      isInputDisabled,\n      {\n        handlers: {\n          onChange,\n          onBlur,\n          onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => {\n            // Handle Enter key press for accessibility\n            if (e.key === \"Enter\" && onEnter) {\n              onEnter(e);\n            }\n            // Always call consumer's onKeyDown if provided\n            if (onKeyDown) {\n              onKeyDown(e);\n            }\n          },\n          // Note: onFocus is NOT wrapped to allow focus on disabled inputs\n          // This is handled automatically by useDisabledState\n        },\n        // Automatic className merging - hook combines disabled class with user classes\n        className: classes,\n      }\n    );\n\n    // Determine aria-invalid based on validation state\n    const isInvalid = validationState === \"invalid\";\n\n    // Generate describedby IDs for error and hint text\n    const describedByIds: string[] = [];\n    if (errorMessage && id) {\n      describedByIds.push(`${id}-error`);\n    }\n    if (hintText && id) {\n      describedByIds.push(`${id}-hint`);\n    }\n    const ariaDescribedBy =\n      describedByIds.length > 0 ? describedByIds.join(\" \") : undefined;\n\n    // Generate accessible placeholder if not provided\n    const accessiblePlaceholder =\n      placeholder || (required ? `* ${type} input` : `${type} input`);\n\n    return (\n      <FP\n        as=\"input\"\n        ref={ref}\n        id={id}\n        type={type}\n        name={name}\n        value={value}\n        defaultValue={defaultValue}\n        placeholder={accessiblePlaceholder}\n        className={disabledProps.className}\n        styles={styles}\n        readOnly={readOnly}\n        required={required}\n        maxLength={maxLength}\n        minLength={minLength}\n        pattern={pattern}\n        autoComplete={autoComplete}\n        autoFocus={autoFocus}\n        inputMode={inputMode}\n        // Event handlers (wrapped by useDisabledState)\n        {...handlers}\n        onFocus={onFocus}\n        // ARIA attributes\n        aria-disabled={disabledProps[\"aria-disabled\"]}\n        aria-readonly={readOnly}\n        aria-required={required}\n        aria-invalid={isInvalid}\n        aria-describedby={ariaDescribedBy}\n        // Data attributes for styling\n        data-validation={validationState}\n        {...props}\n      />\n    );\n  }\n);\n\nInput.displayName = \"Input\";\nexport default Input;\n"]}

package/libs/{chunk-772NRB75.js → chunk-5QD3DWFI.js}

@@ -1,4 +1,4 @@
-import { a as a$1 } from './chunk-KUKIVRC2.js';
+import { a as a$1 } from './chunk-HHLNOC5T.js';
 import * as a from 'react';
 import a__default from 'react';
 
@@ -6,4 +6,4 @@ var zo={display:"inline-flex",alignItems:"center",width:"auto"},to=({fill:o,stro
 
 export { n as a, lt as b };
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-772NRB75.js.map
+//# sourceMappingURL=chunk-5QD3DWFI.js.map

package/libs/chunk-6SAHIYCZ.js

@@ -0,0 +1,7 @@
+import e from 'react';
+
+var t=e.forwardRef(({as:o,styles:p,classes:r,children:n,defaultStyles:s,...P},m)=>{let C=o||"div",a={...s,...p};return e.createElement(C,{ref:m,style:a,className:r,...P},n)});t.displayName="FP";var c=t;
+
+export { c as a };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-6SAHIYCZ.js.map

package/libs/chunk-6SAHIYCZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/fp.tsx"],"names":["React","FP","as","styles","classes","children","defaultStyles","props","ref","Component","styleObj","fp_default"],"mappings":"AAAA,OAAOA,MAAW,QA6HlB,IAAMC,EAAKD,EAAM,WACf,CACE,CAAE,GAAAE,EAAI,OAAAC,EAAQ,QAAAC,EAAS,SAAAC,EAAU,cAAAC,EAAe,GAAGC,CAAM,EACzDC,IACG,CACH,IAAMC,EAAYP,GAAM,MAElBQ,EAAW,CAAE,GAAGJ,EAAe,GAAGH,CAAO,EAE/C,OACEH,EAAA,cAACS,EAAA,CAAU,IAAKD,EAAK,MAAOE,EAAU,UAAWN,EAAU,GAAGG,GAC3DF,CACH,CAEJ,CACF,EAEAJ,EAAG,YAAc,KAUjB,IAAOU,EAAQV","sourcesContent":["import React from 'react'\nimport { ComponentProps } from '../types'\n\n/**\n * @deprecated This type is deprecated. Use `PolymorphicRef` from './ui.tsx' instead.\n * The UI component provides better type safety and accessibility features.\n */\ntype PolymorphicRef<C extends React.ElementType> = React.Ref<\n  React.ElementRef<C>\n>\n\n/**\n * @deprecated This type is deprecated. Use `AsProp` from './ui.tsx' instead.\n * The UI component provides better type safety and accessibility features.\n */\ntype AsProp<C extends React.ElementType> = {\n  as?: C\n}\n\n/**\n * @deprecated This type is deprecated. Use `PropsToOmit` from './ui.tsx' instead.\n * The UI component provides better type safety and accessibility features.\n */\ntype PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P)\n\n/**\n * @deprecated This type is deprecated. Use `PolymorphicComponentProp` from './ui.tsx' instead.\n * The UI component provides better type safety and accessibility features.\n */\ntype PolymorphicComponentProp<\n  C extends React.ElementType,\n  // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n  Props = {},\n> = React.PropsWithChildren<Props & AsProp<C>> &\n  Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>\n\n/**\n * @deprecated This type is deprecated. Use `PolymorphicComponentPropWithRef` from './ui.tsx' instead.\n * The UI component provides better type safety and accessibility features.\n */\ntype PolymorphicComponentPropWithRef<\n  C extends React.ElementType,\n  // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n  Props = {},\n> = PolymorphicComponentProp<C, Props> & {\n  ref?: PolymorphicRef<C> | React.ForwardedRef<React.ElementRef<C>>\n}\n\n/**\n * @deprecated This type is deprecated. Use `UIProps` from './ui.tsx' instead.\n * The UI component provides better type safety and accessibility features.\n */\ntype FPProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<\n  C,\n  {\n    renderStyles?: boolean\n    styles?: React.CSSProperties\n    classes?: string\n  }\n>\n\n/**\n * FPComponent type definition\n *\n * @deprecated This type is deprecated. Use the `UI` component from './ui.tsx' instead.\n * The UI component provides enhanced accessibility documentation, better type safety,\n * and comprehensive WCAG 2.1 AA compliance guidance.\n *\n * @typeParam C - The HTML element type to render\n * @param props - The component props\n * @returns React component\n *\n * @example\n * ```typescript\n * // Migration from FP to UI\n * // Before:\n * import FP from '@fpkit/acss/components/fp';\n * <FP as=\"button\" styles={{ padding: '1rem' }}>Click me</FP>\n *\n * // After:\n * import UI from '@fpkit/acss/components/ui';\n * <UI as=\"button\" styles={{ padding: '1rem' }}>Click me</UI>\n * ```\n */\ntype FPComponent = {\n  <C extends React.ElementType = 'span'>(\n    props: FPProps<C>,\n  ): React.ReactElement | null\n  displayName?: string\n}\n\n/**\n * @deprecated **DEPRECATED:** This component is deprecated and will be removed in a future version.\n * Please use the `UI` component from `./ui.tsx` instead.\n *\n * The UI component is a drop-in replacement with the same API but provides:\n * - Enhanced accessibility documentation and WCAG 2.1 AA compliance guidance\n * - Better TypeScript type safety with detailed JSDoc comments\n * - Comprehensive examples for accessible component patterns\n * - More robust style merging with defaultStyles support\n *\n * @example\n * ```typescript\n * // Migration Guide\n * // Before:\n * import FP from '@fpkit/acss/components/fp';\n * <FP as=\"button\" styles={{ padding: '1rem' }} classes=\"btn\">\n *   Click me\n * </FP>\n *\n * // After:\n * import UI from '@fpkit/acss/components/ui';\n * <UI as=\"button\" styles={{ padding: '1rem' }} classes=\"btn\">\n *   Click me\n * </UI>\n * ```\n *\n * @param {Object} props - Component props\n * @param {React.ElementType} props.as - The HTML element to render. Defaults to 'div'.\n * @param {boolean} props.renderStyles - Whether to render styles or not. Defaults to true.\n * @param {Object} props.styles - The styles to apply to the component.\n * @param {Object} props.defaultStyles - The default styles to apply to the component.\n * @param {React.ReactNode} props.children - The children to render inside the component.\n * @returns {React.ReactElement} - A React component that renders an HTML element with optional styles.\n */\nconst FP = React.forwardRef(\n  <C extends React.ElementType>(\n    { as, styles, classes, children, defaultStyles, ...props }: FPProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'div'\n\n    const styleObj = { ...defaultStyles, ...styles } as React.CSSProperties\n\n    return (\n      <Component ref={ref} style={styleObj} className={classes} {...props}>\n        {children}\n      </Component>\n    )\n  },\n) as FPComponent\n\nFP.displayName = 'FP'\n\n/**\n * @deprecated This interface is deprecated. Use the `UI` component from './ui.tsx' instead.\n * The UI component provides better type safety and accessibility features.\n */\nexport interface BoxProps extends ComponentProps {\n  renderStyles: true\n}\n\nexport default FP\n"]}

package/libs/{chunk-3MKLDCKQ.cjs → chunk-6WTC4JXH.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkL75OQKEI_cjs = require('./chunk-L75OQKEI.cjs');
+var chunkENTCUJ3A_cjs = require('./chunk-ENTCUJ3A.cjs');
 var a = require('react');
 
 function _interopNamespace(e) {
@@ -23,9 +23,9 @@ function _interopNamespace(e) {
 
 var a__namespace = /*#__PURE__*/_interopNamespace(a);
 
-var zo={display:"inline-flex",alignItems:"center",width:"auto"},to=({fill:o,strokeColor:e,styles:t,size:l=24,role:s="img",alt:i,children:p,...eo})=>a__namespace.createElement("svg",{fill:o,stroke:e,height:l,width:l,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",style:t,role:s,"aria-label":i,...eo},p),r=to;to.displayName="Svg";to.styles=zo;var wo={...r.styles,fill:"none",stroke:"currentColor"},lo=({strokeColor:o="currentColor",fill:e="none",size:t=16,styles:l,role:s="img",alt:i="Code icon",...p}={})=>a__namespace.createElement(r,{size:t,role:s,alt:i,styles:l,...p},a__namespace.createElement("g",{fill:e,stroke:o,strokeLinecap:"square",strokeLinejoin:"miter",strokeMiterlimit:"10",strokeWidth:"2"},a__namespace.createElement("rect",{height:"22",width:"18",fill:"none",stroke:o,x:"3",y:"1"}),a__namespace.createElement("polyline",{fill:"none",points:"9 9 6 12 9 15"}),a__namespace.createElement("polyline",{fill:"none",points:"15 15 18 12 15 9"})));lo.styles=wo;var Io={...r.styles,fill:"currentColor",stroke:"none"},k=({strokeColor:o="currentColor",fill:e="none",size:t=16,styles:l=Io,role:s="img",alt:i="Home icon",...p})=>a__namespace.default.createElement(r,{size:t,styles:l,role:s,alt:i,...p},a__namespace.default.createElement("g",{fill:e,stroke:o,strokeLinecap:"square",strokeLinejoin:"miter",strokeMiterlimit:"10",strokeWidth:"2"},a__namespace.default.createElement("polygon",{fill:"none",points:"12 2 2 10 2 23 9 23 9 16 15 16 15 23 22 23 22 10 12 2",stroke:o})));k.displayName="Home";k.styles=Io;var Lo={...r.styles,fill:"currentColor"},P=({fill:o="gray",size:e=24,role:t="img",alt:l="Add icon",...s})=>a__namespace.createElement(r,{size:e,role:t,alt:l,...s},a__namespace.createElement("g",{fill:o},a__namespace.createElement("path",{d:"M17,11h-4V7c0-.553-.447-1-1-1s-1,.447-1,1v4H7c-.553,0-1,.447-1,1s.447,1,1,1h4v4c0,.553,.447,1,1,1s1-.447,1-1v-4h4c.553,0,1-.447,1-1s-.447-1-1-1Z",fill:o})));P.styles=Lo;P.displayName="Add";var Ao={...r.styles},h=({strokeColor:o="currentColor",fill:e="currentColor",size:t=16,styles:l,role:s="img",alt:i="Arrow pointing left",...p})=>a__namespace.createElement(r,{size:t,styles:l,role:s,...p,alt:i},a__namespace.createElement("g",{fill:e,strokeMiterlimit:"10"},a__namespace.createElement("line",{fill:"none",stroke:o,strokeLinecap:"butt",strokeLinejoin:"miter",strokeWidth:"2",x1:"22",x2:"2",y1:"12",y2:"12"}),a__namespace.createElement("polyline",{fill:"none",points:"9,19 2,12 9,5 ",stroke:o,strokeLinecap:"square",strokeLinejoin:"miter",strokeWidth:"2"})));h.styles=Ao;h.displayName="ArrowLeft";var Mo={...r.styles},C=({size:o=16,strokeColor:e="currentcolor",styles:t,role:l="img",alt:s="Chat icon",...i})=>a__namespace.createElement(r,{size:o,styles:t,role:l,alt:s,...i},a__namespace.createElement("g",{fill:e,strokeMiterlimit:"10"},a__namespace.createElement("path",{d:"M21,2H3c-1.105,0-2,.895-2,2V15c0,1.105,.895,2,2,2h5l4,5,4-5h5c1.105,0,2-.895,2-2V4c0-1.105-.895-2-2-2Z",fill:"none",stroke:e,strokeLinecap:"square",strokeLinejoin:"miter",strokeWidth:"2"})));C.styles=Mo;C.displayName="Chat";var No={...r.styles},I=({fill:o="currentColor",styles:e,size:t=16,role:l="img",alt:s="Down icon",...i})=>a__namespace.createElement(r,{size:t,role:l,styles:e,alt:s,...i},a__namespace.createElement("g",{fill:o,strokeMiterlimit:"10"},a__namespace.createElement("line",{fill:"none",stroke:o,strokeLinecap:"butt",strokeLinejoin:"miter",strokeWidth:"2",x1:"12",x2:"12",y1:"2",y2:"22"}),a__namespace.createElement("polyline",{fill:"none",points:"19,15 12,22 5,15 ",stroke:o,strokeLinecap:"square",strokeLinejoin:"miter",strokeWidth:"2"})));I.styles=No;I.displayName="ArrowDown";var Zo={...r.styles,fill:"none",stroke:"currentColor"},z=({strokeColor:o="currentColor",styles:e,size:t=16,role:l="img",alt:s="Up arrow icon",...i})=>a__namespace.createElement(r,{size:t,styles:e,role:l,alt:s,...i},a__namespace.createElement("g",{fill:"none",stroke:o,strokeLinecap:"square",strokeLinejoin:"miter",strokeMiterlimit:"10",strokeWidth:"2"},a__namespace.createElement("line",{fill:"none",strokeLinecap:"butt",x1:"12",x2:"12",y1:"22",y2:"2"}),a__namespace.createElement("polyline",{fill:"none",points:"5,9 12,2 19,9 ",stroke:o})));z.displayName="ArrowUp";z.style=Zo;({...r.styles,fill:"currentColor"});var io=({size:o=16,fill:e="currentColor",strokeColor:t="currentColor",styles:l,role:s="img",alt:i="Right arrow icon",...p})=>a__namespace.default.createElement(r,{size:o,styles:l,role:s,alt:i,...p},a__namespace.default.createElement("g",{fill:e,stroke:t,strokeLinecap:"square",strokeLinejoin:"miter",strokeMiterlimit:"10",strokeWidth:"2"},a__namespace.default.createElement("line",{fill:"none",strokeLinecap:"butt",x1:"2",x2:"22",y1:"12",y2:"12"}),a__namespace.default.createElement("polyline",{fill:"none",points:"15,5 22,12 15,19 ",stroke:t})));io.displayName="ArrowRight";var Ro={...r.styles,fill:"none",stroke:"currentColor"},A=({size:o=16,fill:e="none",strokeColor:t="currentColor",styles:l,alt:s="User Icon",role:i,...p})=>a__namespace.default.createElement(r,{size:o,role:i,alt:s,styles:l,...p},a__namespace.default.createElement("g",{fill:e,stroke:t,strokeLinecap:"square",strokeLinejoin:"miter",strokeMiterlimit:"10",strokeWidth:"2"},a__namespace.default.createElement("circle",{cx:"12",cy:"5.5",fill:"none",r:"4.5"}),a__namespace.default.createElement("path",{d:"M12,14c-4.971,0-9,4.029-9,9H21c0-4.971-4.029-9-9-9Z",fill:"none",stroke:t})));A.styles=Ro;A.displayName="User";var Uo={fill:"currentColor"},M=({size:o=16,fill:e="currentColor",styles:t,role:l="img",alt:s="Right arrow icon",...i})=>a__namespace.default.createElement(r,{size:o,alt:s,styles:t,role:l,...i},a__namespace.default.createElement("g",{fill:e},a__namespace.default.createElement("path",{d:"M7,23a1,1,0,0,1-.707-1.707L15.586,12,6.293,2.707A1,1,0,0,1,7.707,1.293l10,10a1,1,0,0,1,0,1.414l-10,10A1,1,0,0,1,7,23Z",fill:e})));M.displayName="Right";M.styles=Uo;var Ho={...r.styles,fill:"currentColor"},N=({fill:o="currentColor",size:e=16,styles:t,role:l="img",alt:s="Left arrow icon",...i})=>a__namespace.default.createElement(r,{size:e,styles:t,alt:s,role:l,...i},a__namespace.default.createElement("g",{fill:o},a__namespace.default.createElement("path",{d:"M17,23a1,1,0,0,1-.707-.293l-10-10a1,1,0,0,1,0-1.414l10-10a1,1,0,0,1,1.414,1.414L8.414,12l9.293,9.293A1,1,0,0,1,17,23Z",fill:o})));N.displayName="Left";N.styles=Ho;var qo={fill:"currentColor"},Z=({size:o=24,fill:e="currentColor",styles:t,role:l="img",alt:s="Minus icon",...i})=>a__namespace.default.createElement(r,{size:o,styles:t,role:l,alt:s,...i},a__namespace.default.createElement("g",{fill:e},a__namespace.default.createElement("path",{d:"M17,11H7c-.553,0-1,.447-1,1s.447,1,1,1h10c.553,0,1-.447,1-1s-.447-1-1-1Z",fill:e})));Z.displayName="Minus";Z.styles=qo;var jo={fill:"currenStyle"},R=({size:o=16,fill:e="currentColor",styles:t,role:l="img",alt:s="Remove icon",...i})=>a__namespace.default.createElement(r,{size:o,alt:s,styles:t,role:l,...i},a__namespace.default.createElement("g",{fill:e},a__namespace.default.createElement("path",{d:"M19.7,4.3c-0.4-0.4-1-0.4-1.4,0L12,10.6L5.7,4.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l6.3,6.3l-6.3,6.3 c-0.4,0.4-0.4,1,0,1.4C4.5,19.9,4.7,20,5,20s0.5-0.1,0.7-0.3l6.3-6.3l6.3,6.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3 c0.4-0.4,0.4-1,0-1.4L13.4,12l6.3-6.3C20.1,5.3,20.1,4.7,19.7,4.3z",fill:e})));R.displayName="Remove";R.styles=jo;var Wo={...r.styles,stroke:"currentColor"},H=({size:o=16,strokeColor:e="currentColor",styles:t,role:l="img",alt:s="Copy icon",...i})=>a__namespace.default.createElement(r,{size:o,styles:t,role:l,alt:s,...i},a__namespace.default.createElement("g",{fill:"none",stroke:e,strokeLinecap:"square",strokeLinejoin:"miter",strokeMiterlimit:"10",strokeWidth:"2"},a__namespace.default.createElement("polyline",{fill:"none",points:"8 19 2 19 2 1 17 1 17 6",stroke:e}),a__namespace.default.createElement("rect",{height:"13",width:"10",fill:"none",x:"12",y:"10"})));H.displayName="Copy";H.styles=Wo;var Vo={...r.styles},q=({size:o=16,fill:e="currentColor",styles:t,role:l="img",alt:s="Up arrow icon",...i})=>a__namespace.default.createElement(r,{size:o,alt:s,styles:t,role:l,...i},a__namespace.default.createElement("g",{fill:e},a__namespace.default.createElement("path",{d:"M22,18a1,1,0,0,1-.707-.293L12,8.414,2.707,17.707a1,1,0,0,1-1.414-1.414l10-10a1,1,0,0,1,1.414,0l10,10A1,1,0,0,1,22,18Z",fill:e})));q.displayName="Up";q.styles=Vo;var Do={...r.styles},W=({size:o=16,fill:e="currentColor",styles:t,role:l="img",alt:s="Down arrow icon",...i})=>a__namespace.createElement(r,{size:o,alt:s,styles:t,role:l,...i},a__namespace.createElement("g",{fill:e},a__namespace.createElement("path",{d:"M12,18a1,1,0,0,1-.707-.293l-10-10A1,1,0,0,1,2.707,6.293L12,15.586l9.293-9.293a1,1,0,1,1,1.414,1.414l-10,10A1,1,0,0,1,12,18Z",fill:e})));W.displayName="Down";W.styles=Do;function yo({size:o=16,fill:e,strokeColor:t="currentColor",styles:l,role:s="img",alt:i="Star icon",...p}){return a__namespace.default.createElement(r,{size:o,alt:i,styles:l,role:s,...p},a__namespace.default.createElement("g",{fill:e,stroke:t,strokeLinecap:"square",strokeLinejoin:"miter",strokeMiterlimit:"10",strokeWidth:"2"},a__namespace.default.createElement("polygon",{fill:"none",points:"12,2.49 15.09,8.75 22,9.754 17,14.628 18.18,21.51 12,18.262 5.82,21.51 7,14.628 2,9.754 8.91,8.75 ",stroke:t})))}yo.displayName="Star";var Eo={...r.styles,fill:"none",stroke:"currentColor"},D=({strokeColor:o="currentColor",styles:e,size:t=24,role:l="img",alt:s="Up arrow icon",...i})=>a__namespace.createElement(r,{size:t,styles:e,role:l,alt:s,...i},a__namespace.createElement("g",{fill:"none","stroke-linecap":"square","stroke-linejoin":"miter","stroke-miterlimit":"10"},a__namespace.createElement("path",{d:"M7 21L7 3L19 12L7 21Z",stroke:o,"stroke-width":"2",fill:"none"})," "));D.displayName="PlayIcon";D.style=Eo;var Jo={...r.styles,fill:"none",stroke:"currentColor"},E=({strokeColor:o="currentColor",styles:e,size:t=16,role:l="img",alt:s="Up arrow icon",...i})=>a__namespace.createElement(r,{size:t,styles:e,role:l,alt:s,...i},a__namespace.createElement("g",{fill:"none","stroke-linecap":"square","stroke-linejoin":"miter","stroke-miterlimit":"10"},a__namespace.createElement("rect",{x:"2",y:"2",width:"6",height:"20",fill:"none",stroke:o,"stroke-width":"2"}),a__namespace.createElement("rect",{x:"16",y:"2",width:"6",height:"20",fill:"none",stroke:o,"stroke-width":"2"})));E.displayName="Pause";E.style=Jo;var Xo={...r.styles,fill:"none",stroke:"currentColor"},J=({strokeColor:o="currentColor",styles:e,size:t=16,role:l="img",alt:s="Up arrow icon",...i})=>a__namespace.createElement(r,{size:t,styles:e,role:l,alt:s,...i},a__namespace.createElement("g",{fill:"none","stroke-linecap":"square","stroke-linejoin":"miter","stroke-miterlimit":"10"},a__namespace.createElement("path",{d:"M20 21L20 3",stroke:o,"stroke-width":"2",fill:"none"}),a__namespace.createElement("path",{d:"M4 4L4 20L16 12L4 4Z",stroke:o,"stroke-width":"2",fill:"none"})));J.displayName="Resume";J.style=Xo;var bo={...r.styles,fill:"none",stroke:"currentColor"},b=({strokeColor:o="currentColor",styles:e,size:t=16,role:l="img",alt:s="Up arrow icon",...i})=>a__namespace.createElement(r,{size:t,styles:e,role:l,alt:s,...i},a__namespace.createElement("g",{fill:"none","stroke-linecap":"square","stroke-linejoin":"miter","stroke-miterlimit":"10"},a__namespace.createElement("rect",{x:"2",y:"2",fill:"none",stroke:o,"stroke-width":"2",width:"20",height:"20"})));b.displayName="Stop";b.style=bo;var Qo={...r.styles,fill:"none",stroke:"currentColor"},B=({strokeColor:o="currentColor",styles:e,size:t=24,role:l="img",alt:s="Stop icon",...i})=>a__namespace.createElement(r,{size:t,styles:e,role:l,alt:s,...i},a__namespace.createElement("g",{fill:o},a__namespace.createElement("path",{fill:o,d:"M22,1H2C1.447,1,1,1.447,1,2v20c0,0.553,0.447,1,1,1h20c0.553,0,1-0.447,1-1V2C23,1.447,22.553,1,22,1z"})));B.displayName="StopSolid";B.style=Qo;var Bo={...r.styles,fill:"none",stroke:"currentColor"},G=({strokeColor:o="currentColor",styles:e,size:t=24,role:l="img",alt:s="Up arrow icon",...i})=>a__namespace.createElement(r,{size:t,styles:e,role:l,alt:s,...i},a__namespace.createElement("g",{fill:o},a__namespace.createElement("path",{fill:o,d:"M20.555,11.168l-15-10c-0.307-0.204-0.702-0.224-1.026-0.05C4.203,1.292,4,1.631,4,2v20 c0,0.369,0.203,0.708,0.528,0.882C4.676,22.961,4.838,23,5,23c0.194,0,0.388-0.057,0.555-0.168l15-10C20.833,12.646,21,12.334,21,12 S20.833,11.354,20.555,11.168z"})));G.displayName="PlaySolid";G.style=Bo;var Fo={...r.styles,fill:"none",stroke:"currentColor"},K=({strokeColor:o="currentColor",styles:e,size:t=24,role:l="img",alt:s="Pause arrow icon",...i})=>a__namespace.createElement(r,{size:t,styles:e,role:l,alt:s,...i},a__namespace.createElement("g",{fill:o},a__namespace.createElement("path",{d:"M7,1H2A1,1,0,0,0,1,2V22a1,1,0,0,0,1,1H7a1,1,0,0,0,1-1V2A1,1,0,0,0,7,1Z",fill:o}),a__namespace.createElement("path",{d:"M22,1H17a1,1,0,0,0-1,1V22a1,1,0,0,0,1,1h5a1,1,0,0,0,1-1V2A1,1,0,0,0,22,1Z",fill:o})));K.displayName="PauseSolid";K.style=Fo;var Go={...r.styles,fill:"none",stroke:"currentColor"},O=({strokeColor:o="currentColor",styles:e,size:t=16,role:l="img",alt:s="Up arrow icon",...i})=>a__namespace.createElement(r,{size:t,styles:e,role:l,alt:s,...i},a__namespace.createElement("g",{fill:o},a__namespace.createElement("path",{fill:o,"fill-rule":"evenodd","clip-rule":"evenodd",d:"M3 21.8685L17.8028 12L3 2.1315L3 21.8685Z"}),a__namespace.createElement("path",{fill:o,"fill-rule":"evenodd","clip-rule":"evenodd",d:"M19 2L19 22L21 22L21 2L19 2Z"})));O.displayName="ResumeSolid";O.style=Go;var uo=({fill:o="currentColor",size:e=24,role:t="img",alt:l="Info icon",...s})=>a__namespace.createElement(r,{size:e,role:t,alt:l,...s},a__namespace.createElement("g",{fill:o},a__namespace.createElement("path",{d:"M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z",fill:o})));uo.displayName="Info";var go=({fill:o="currentColor",size:e=24,role:t="img",alt:l="Add icon",...s})=>a__namespace.createElement(r,{size:e,role:t,alt:l,...s},a__namespace.createElement("g",{fill:o},a__namespace.createElement("path",{d:"M23.707,6.736,17.263.293A1,1,0,0,0,16.556,0H7.444a1,1,0,0,0-.707.293L.293,6.736A1,1,0,0,0,0,7.443v9.114a1,1,0,0,0,.293.707l6.444,6.443A1,1,0,0,0,7.444,24h9.112a1,1,0,0,0,.707-.293l6.444-6.443A1,1,0,0,0,24,16.557V7.443A1,1,0,0,0,23.707,6.736ZM13.645,5,13,14H11l-.608-9ZM12,20a2,2,0,1,1,2-2A2,2,0,0,1,12,20Z",fill:o})));go.displayName="AlertSolid";var So=({fill:o="currentColor",size:e=24,role:t="img",alt:l="Add icon",...s})=>a__namespace.createElement(r,{size:e,role:t,alt:l,...s},a__namespace.createElement("g",{fill:o},a__namespace.createElement("path",{fill:o,d:"M8,17.06V20h8v-2.94c3.059-1.514,5-4.607,5-8.06c0-4.963-4.038-9-9-9S3,4.037,3,9 C3,12.452,4.941,15.546,8,17.06z M7,9c0-2.757,2.243-5,5-5h1v2h-1c-1.654,0-3,1.346-3,3v1H7V9z"})," ",a__namespace.createElement("path",{fill:o,d:"M8,22v1c0,0.553,0.448,1,1,1h6c0.552,0,1-0.447,1-1v-1H8z"})));So.displayName="InfoSolid";var ko=({fill:o="currentColor",size:e=24,role:t="img",alt:l="Add icon",...s})=>a__namespace.createElement(r,{size:e,role:t,alt:l,...s},a__namespace.createElement("g",{fill:o},a__namespace.createElement("path",{d:"M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12,12-5.383,12-12S18.617,0,12,0Zm0,19.5c-.69,0-1.25-.56-1.25-1.25s.56-1.25,1.25-1.25,1.25,.56,1.25,1.25-.56,1.25-1.25,1.25Zm2.688-7.198c-1.444,1.224-1.688,1.667-1.688,2.198,0,.553-.447,1-1,1s-1-.447-1-1c0-1.434,.807-2.379,2.395-3.724,.447-.38,1.844-1.72,1.024-3.046-.532-.861-2.517-.984-4.162-.256-.507,.223-1.096-.006-1.319-.511-.223-.505,.006-1.096,.511-1.319,2.33-1.03,5.463-.924,6.672,1.035,1.103,1.784,.554,3.938-1.433,5.622Z",fill:o})));ko.displayName="QuestionSolid";var xo=({fill:o="currentColor",size:e=24,role:t="img",alt:l="Add icon",...s})=>a__namespace.createElement(r,{size:e,role:t,alt:l,...s},a__namespace.createElement("g",{fill:o},a__namespace.createElement("path",{d:"M23.641,18.485L14.732,1.643C13.931,.134,12.059-.44,10.55,.361c-.546,.29-.992,.736-1.282,1.282L.359,18.485c-.793,1.504-.217,3.367,1.288,4.16,.445,.235,.942,.357,1.445,.355H20.908c1.7,.005,3.083-1.369,3.088-3.07,.002-.504-.12-1-.355-1.445Zm-11.641,1.515c-.828,0-1.5-.672-1.5-1.5s.672-1.5,1.5-1.5,1.5,.672,1.5,1.5-.672,1.5-1.5,1.5Zm.53-5h-1.061c-.264,0-.483-.205-.499-.469l-.438-7c-.018-.288,.211-.531,.499-.531h1.936c.288,0,.517,.243,.499,.531l-.438,7c-.016,.264-.235,.469-.499,.469Z",fill:o})));xo.displayName="WarnSolid";var Po=({fill:o="currentColor",size:e=24,role:t="img",alt:l="Add icon",...s})=>a__namespace.createElement(r,{size:e,role:t,alt:l,...s},a__namespace.createElement("g",{fill:o},a__namespace.createElement("path",{d:"M12,0C5.373,0,0,5.373,0,12s5.373,12,12,12,12-5.373,12-12C23.981,5.381,18.619,.019,12,0Zm7.207,7.707l-9,9c-.195,.195-.451,.293-.707,.293s-.512-.098-.707-.293l-4-4c-.391-.391-.391-1.023,0-1.414s1.023-.391,1.414,0l3.293,3.293L17.793,6.293c.391-.391,1.023-.391,1.414,0s.391,1.023,0,1.414Z",fill:o})));Po.displayName="SuccessSolid";var ho=({fill:o="currentColor",size:e=24,role:t="img",alt:l="Add icon",...s})=>a__namespace.createElement(r,{size:e,role:t,alt:l,...s},a__namespace.createElement("g",{fill:o},a__namespace.createElement("path",{d:"M20,1H4c-1.654,0-3,1.346-3,3V20c0,1.654,1.346,3,3,3H20c1.654,0,3-1.346,3-3V4c0-1.654-1.346-3-3-3ZM11,7c0-.553,.448-1,1-1s1,.447,1,1v6c0,.553-.448,1-1,1s-1-.447-1-1V7Zm1,11.5c-.69,0-1.25-.56-1.25-1.25s.56-1.25,1.25-1.25,1.25,.56,1.25,1.25-.56,1.25-1.25,1.25Z",fill:o})));ho.displayName="AlertSquareSolid";var Oo={display:"inline-flex",direction:"row",gap:".2rem",placeItems:"center",width:"auto"},n=({id:o,classes:e,children:t,styles:l,"aria-hidden":s=!0,"aria-label":i,role:p,...eo})=>a__namespace.default.createElement(chunkL75OQKEI_cjs.a,{id:o,as:"span",styles:l,className:e,"data-icon":!0,"data-style":"icons","aria-hidden":s,"aria-label":i,role:p,...eo},t),lt=n;n.displayName="Icon";n.Add=P;n.ArrowDown=I;n.ArrowLeft=h;n.ArrowRight=io;n.ArrowUp=z;n.Chat=C;n.Code=lo;n.Copy=H;n.Down=W;n.Home=k;n.Info=uo;n.InfoSolid=So;n.AlertSolid=go;n.Left=N;n.Minus=Z;n.Pause=E;n.PauseSolid=K;n.Play=D;n.PlaySolid=G;n.Remove=R;n.Resume=J;n.ResumeSolid=O;n.Right=M;n.Star=yo;n.Stop=b;n.StopSolid=B;n.Up=q;n.User=A;n.styles=Oo;n.QuestionSolid=ko;n.WarnSolid=xo;n.SuccessSolid=Po;n.AlertSquareSolid=ho;n.Close=n.Remove;
+var zo={display:"inline-flex",alignItems:"center",width:"auto"},to=({fill:o,strokeColor:e,styles:t,size:l=24,role:s="img",alt:i,children:p,...eo})=>a__namespace.createElement("svg",{fill:o,stroke:e,height:l,width:l,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",style:t,role:s,"aria-label":i,...eo},p),r=to;to.displayName="Svg";to.styles=zo;var wo={...r.styles,fill:"none",stroke:"currentColor"},lo=({strokeColor:o="currentColor",fill:e="none",size:t=16,styles:l,role:s="img",alt:i="Code icon",...p}={})=>a__namespace.createElement(r,{size:t,role:s,alt:i,styles:l,...p},a__namespace.createElement("g",{fill:e,stroke:o,strokeLinecap:"square",strokeLinejoin:"miter",strokeMiterlimit:"10",strokeWidth:"2"},a__namespace.createElement("rect",{height:"22",width:"18",fill:"none",stroke:o,x:"3",y:"1"}),a__namespace.createElement("polyline",{fill:"none",points:"9 9 6 12 9 15"}),a__namespace.createElement("polyline",{fill:"none",points:"15 15 18 12 15 9"})));lo.styles=wo;var Io={...r.styles,fill:"currentColor",stroke:"none"},k=({strokeColor:o="currentColor",fill:e="none",size:t=16,styles:l=Io,role:s="img",alt:i="Home icon",...p})=>a__namespace.default.createElement(r,{size:t,styles:l,role:s,alt:i,...p},a__namespace.default.createElement("g",{fill:e,stroke:o,strokeLinecap:"square",strokeLinejoin:"miter",strokeMiterlimit:"10",strokeWidth:"2"},a__namespace.default.createElement("polygon",{fill:"none",points:"12 2 2 10 2 23 9 23 9 16 15 16 15 23 22 23 22 10 12 2",stroke:o})));k.displayName="Home";k.styles=Io;var Lo={...r.styles,fill:"currentColor"},P=({fill:o="gray",size:e=24,role:t="img",alt:l="Add icon",...s})=>a__namespace.createElement(r,{size:e,role:t,alt:l,...s},a__namespace.createElement("g",{fill:o},a__namespace.createElement("path",{d:"M17,11h-4V7c0-.553-.447-1-1-1s-1,.447-1,1v4H7c-.553,0-1,.447-1,1s.447,1,1,1h4v4c0,.553,.447,1,1,1s1-.447,1-1v-4h4c.553,0,1-.447,1-1s-.447-1-1-1Z",fill:o})));P.styles=Lo;P.displayName="Add";var Ao={...r.styles},h=({strokeColor:o="currentColor",fill:e="currentColor",size:t=16,styles:l,role:s="img",alt:i="Arrow pointing left",...p})=>a__namespace.createElement(r,{size:t,styles:l,role:s,...p,alt:i},a__namespace.createElement("g",{fill:e,strokeMiterlimit:"10"},a__namespace.createElement("line",{fill:"none",stroke:o,strokeLinecap:"butt",strokeLinejoin:"miter",strokeWidth:"2",x1:"22",x2:"2",y1:"12",y2:"12"}),a__namespace.createElement("polyline",{fill:"none",points:"9,19 2,12 9,5 ",stroke:o,strokeLinecap:"square",strokeLinejoin:"miter",strokeWidth:"2"})));h.styles=Ao;h.displayName="ArrowLeft";var Mo={...r.styles},C=({size:o=16,strokeColor:e="currentcolor",styles:t,role:l="img",alt:s="Chat icon",...i})=>a__namespace.createElement(r,{size:o,styles:t,role:l,alt:s,...i},a__namespace.createElement("g",{fill:e,strokeMiterlimit:"10"},a__namespace.createElement("path",{d:"M21,2H3c-1.105,0-2,.895-2,2V15c0,1.105,.895,2,2,2h5l4,5,4-5h5c1.105,0,2-.895,2-2V4c0-1.105-.895-2-2-2Z",fill:"none",stroke:e,strokeLinecap:"square",strokeLinejoin:"miter",strokeWidth:"2"})));C.styles=Mo;C.displayName="Chat";var No={...r.styles},I=({fill:o="currentColor",styles:e,size:t=16,role:l="img",alt:s="Down icon",...i})=>a__namespace.createElement(r,{size:t,role:l,styles:e,alt:s,...i},a__namespace.createElement("g",{fill:o,strokeMiterlimit:"10"},a__namespace.createElement("line",{fill:"none",stroke:o,strokeLinecap:"butt",strokeLinejoin:"miter",strokeWidth:"2",x1:"12",x2:"12",y1:"2",y2:"22"}),a__namespace.createElement("polyline",{fill:"none",points:"19,15 12,22 5,15 ",stroke:o,strokeLinecap:"square",strokeLinejoin:"miter",strokeWidth:"2"})));I.styles=No;I.displayName="ArrowDown";var Zo={...r.styles,fill:"none",stroke:"currentColor"},z=({strokeColor:o="currentColor",styles:e,size:t=16,role:l="img",alt:s="Up arrow icon",...i})=>a__namespace.createElement(r,{size:t,styles:e,role:l,alt:s,...i},a__namespace.createElement("g",{fill:"none",stroke:o,strokeLinecap:"square",strokeLinejoin:"miter",strokeMiterlimit:"10",strokeWidth:"2"},a__namespace.createElement("line",{fill:"none",strokeLinecap:"butt",x1:"12",x2:"12",y1:"22",y2:"2"}),a__namespace.createElement("polyline",{fill:"none",points:"5,9 12,2 19,9 ",stroke:o})));z.displayName="ArrowUp";z.style=Zo;({...r.styles,fill:"currentColor"});var io=({size:o=16,fill:e="currentColor",strokeColor:t="currentColor",styles:l,role:s="img",alt:i="Right arrow icon",...p})=>a__namespace.default.createElement(r,{size:o,styles:l,role:s,alt:i,...p},a__namespace.default.createElement("g",{fill:e,stroke:t,strokeLinecap:"square",strokeLinejoin:"miter",strokeMiterlimit:"10",strokeWidth:"2"},a__namespace.default.createElement("line",{fill:"none",strokeLinecap:"butt",x1:"2",x2:"22",y1:"12",y2:"12"}),a__namespace.default.createElement("polyline",{fill:"none",points:"15,5 22,12 15,19 ",stroke:t})));io.displayName="ArrowRight";var Ro={...r.styles,fill:"none",stroke:"currentColor"},A=({size:o=16,fill:e="none",strokeColor:t="currentColor",styles:l,alt:s="User Icon",role:i,...p})=>a__namespace.default.createElement(r,{size:o,role:i,alt:s,styles:l,...p},a__namespace.default.createElement("g",{fill:e,stroke:t,strokeLinecap:"square",strokeLinejoin:"miter",strokeMiterlimit:"10",strokeWidth:"2"},a__namespace.default.createElement("circle",{cx:"12",cy:"5.5",fill:"none",r:"4.5"}),a__namespace.default.createElement("path",{d:"M12,14c-4.971,0-9,4.029-9,9H21c0-4.971-4.029-9-9-9Z",fill:"none",stroke:t})));A.styles=Ro;A.displayName="User";var Uo={fill:"currentColor"},M=({size:o=16,fill:e="currentColor",styles:t,role:l="img",alt:s="Right arrow icon",...i})=>a__namespace.default.createElement(r,{size:o,alt:s,styles:t,role:l,...i},a__namespace.default.createElement("g",{fill:e},a__namespace.default.createElement("path",{d:"M7,23a1,1,0,0,1-.707-1.707L15.586,12,6.293,2.707A1,1,0,0,1,7.707,1.293l10,10a1,1,0,0,1,0,1.414l-10,10A1,1,0,0,1,7,23Z",fill:e})));M.displayName="Right";M.styles=Uo;var Ho={...r.styles,fill:"currentColor"},N=({fill:o="currentColor",size:e=16,styles:t,role:l="img",alt:s="Left arrow icon",...i})=>a__namespace.default.createElement(r,{size:e,styles:t,alt:s,role:l,...i},a__namespace.default.createElement("g",{fill:o},a__namespace.default.createElement("path",{d:"M17,23a1,1,0,0,1-.707-.293l-10-10a1,1,0,0,1,0-1.414l10-10a1,1,0,0,1,1.414,1.414L8.414,12l9.293,9.293A1,1,0,0,1,17,23Z",fill:o})));N.displayName="Left";N.styles=Ho;var qo={fill:"currentColor"},Z=({size:o=24,fill:e="currentColor",styles:t,role:l="img",alt:s="Minus icon",...i})=>a__namespace.default.createElement(r,{size:o,styles:t,role:l,alt:s,...i},a__namespace.default.createElement("g",{fill:e},a__namespace.default.createElement("path",{d:"M17,11H7c-.553,0-1,.447-1,1s.447,1,1,1h10c.553,0,1-.447,1-1s-.447-1-1-1Z",fill:e})));Z.displayName="Minus";Z.styles=qo;var jo={fill:"currenStyle"},R=({size:o=16,fill:e="currentColor",styles:t,role:l="img",alt:s="Remove icon",...i})=>a__namespace.default.createElement(r,{size:o,alt:s,styles:t,role:l,...i},a__namespace.default.createElement("g",{fill:e},a__namespace.default.createElement("path",{d:"M19.7,4.3c-0.4-0.4-1-0.4-1.4,0L12,10.6L5.7,4.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l6.3,6.3l-6.3,6.3 c-0.4,0.4-0.4,1,0,1.4C4.5,19.9,4.7,20,5,20s0.5-0.1,0.7-0.3l6.3-6.3l6.3,6.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3 c0.4-0.4,0.4-1,0-1.4L13.4,12l6.3-6.3C20.1,5.3,20.1,4.7,19.7,4.3z",fill:e})));R.displayName="Remove";R.styles=jo;var Wo={...r.styles,stroke:"currentColor"},H=({size:o=16,strokeColor:e="currentColor",styles:t,role:l="img",alt:s="Copy icon",...i})=>a__namespace.default.createElement(r,{size:o,styles:t,role:l,alt:s,...i},a__namespace.default.createElement("g",{fill:"none",stroke:e,strokeLinecap:"square",strokeLinejoin:"miter",strokeMiterlimit:"10",strokeWidth:"2"},a__namespace.default.createElement("polyline",{fill:"none",points:"8 19 2 19 2 1 17 1 17 6",stroke:e}),a__namespace.default.createElement("rect",{height:"13",width:"10",fill:"none",x:"12",y:"10"})));H.displayName="Copy";H.styles=Wo;var Vo={...r.styles},q=({size:o=16,fill:e="currentColor",styles:t,role:l="img",alt:s="Up arrow icon",...i})=>a__namespace.default.createElement(r,{size:o,alt:s,styles:t,role:l,...i},a__namespace.default.createElement("g",{fill:e},a__namespace.default.createElement("path",{d:"M22,18a1,1,0,0,1-.707-.293L12,8.414,2.707,17.707a1,1,0,0,1-1.414-1.414l10-10a1,1,0,0,1,1.414,0l10,10A1,1,0,0,1,22,18Z",fill:e})));q.displayName="Up";q.styles=Vo;var Do={...r.styles},W=({size:o=16,fill:e="currentColor",styles:t,role:l="img",alt:s="Down arrow icon",...i})=>a__namespace.createElement(r,{size:o,alt:s,styles:t,role:l,...i},a__namespace.createElement("g",{fill:e},a__namespace.createElement("path",{d:"M12,18a1,1,0,0,1-.707-.293l-10-10A1,1,0,0,1,2.707,6.293L12,15.586l9.293-9.293a1,1,0,1,1,1.414,1.414l-10,10A1,1,0,0,1,12,18Z",fill:e})));W.displayName="Down";W.styles=Do;function yo({size:o=16,fill:e,strokeColor:t="currentColor",styles:l,role:s="img",alt:i="Star icon",...p}){return a__namespace.default.createElement(r,{size:o,alt:i,styles:l,role:s,...p},a__namespace.default.createElement("g",{fill:e,stroke:t,strokeLinecap:"square",strokeLinejoin:"miter",strokeMiterlimit:"10",strokeWidth:"2"},a__namespace.default.createElement("polygon",{fill:"none",points:"12,2.49 15.09,8.75 22,9.754 17,14.628 18.18,21.51 12,18.262 5.82,21.51 7,14.628 2,9.754 8.91,8.75 ",stroke:t})))}yo.displayName="Star";var Eo={...r.styles,fill:"none",stroke:"currentColor"},D=({strokeColor:o="currentColor",styles:e,size:t=24,role:l="img",alt:s="Up arrow icon",...i})=>a__namespace.createElement(r,{size:t,styles:e,role:l,alt:s,...i},a__namespace.createElement("g",{fill:"none","stroke-linecap":"square","stroke-linejoin":"miter","stroke-miterlimit":"10"},a__namespace.createElement("path",{d:"M7 21L7 3L19 12L7 21Z",stroke:o,"stroke-width":"2",fill:"none"})," "));D.displayName="PlayIcon";D.style=Eo;var Jo={...r.styles,fill:"none",stroke:"currentColor"},E=({strokeColor:o="currentColor",styles:e,size:t=16,role:l="img",alt:s="Up arrow icon",...i})=>a__namespace.createElement(r,{size:t,styles:e,role:l,alt:s,...i},a__namespace.createElement("g",{fill:"none","stroke-linecap":"square","stroke-linejoin":"miter","stroke-miterlimit":"10"},a__namespace.createElement("rect",{x:"2",y:"2",width:"6",height:"20",fill:"none",stroke:o,"stroke-width":"2"}),a__namespace.createElement("rect",{x:"16",y:"2",width:"6",height:"20",fill:"none",stroke:o,"stroke-width":"2"})));E.displayName="Pause";E.style=Jo;var Xo={...r.styles,fill:"none",stroke:"currentColor"},J=({strokeColor:o="currentColor",styles:e,size:t=16,role:l="img",alt:s="Up arrow icon",...i})=>a__namespace.createElement(r,{size:t,styles:e,role:l,alt:s,...i},a__namespace.createElement("g",{fill:"none","stroke-linecap":"square","stroke-linejoin":"miter","stroke-miterlimit":"10"},a__namespace.createElement("path",{d:"M20 21L20 3",stroke:o,"stroke-width":"2",fill:"none"}),a__namespace.createElement("path",{d:"M4 4L4 20L16 12L4 4Z",stroke:o,"stroke-width":"2",fill:"none"})));J.displayName="Resume";J.style=Xo;var bo={...r.styles,fill:"none",stroke:"currentColor"},b=({strokeColor:o="currentColor",styles:e,size:t=16,role:l="img",alt:s="Up arrow icon",...i})=>a__namespace.createElement(r,{size:t,styles:e,role:l,alt:s,...i},a__namespace.createElement("g",{fill:"none","stroke-linecap":"square","stroke-linejoin":"miter","stroke-miterlimit":"10"},a__namespace.createElement("rect",{x:"2",y:"2",fill:"none",stroke:o,"stroke-width":"2",width:"20",height:"20"})));b.displayName="Stop";b.style=bo;var Qo={...r.styles,fill:"none",stroke:"currentColor"},B=({strokeColor:o="currentColor",styles:e,size:t=24,role:l="img",alt:s="Stop icon",...i})=>a__namespace.createElement(r,{size:t,styles:e,role:l,alt:s,...i},a__namespace.createElement("g",{fill:o},a__namespace.createElement("path",{fill:o,d:"M22,1H2C1.447,1,1,1.447,1,2v20c0,0.553,0.447,1,1,1h20c0.553,0,1-0.447,1-1V2C23,1.447,22.553,1,22,1z"})));B.displayName="StopSolid";B.style=Qo;var Bo={...r.styles,fill:"none",stroke:"currentColor"},G=({strokeColor:o="currentColor",styles:e,size:t=24,role:l="img",alt:s="Up arrow icon",...i})=>a__namespace.createElement(r,{size:t,styles:e,role:l,alt:s,...i},a__namespace.createElement("g",{fill:o},a__namespace.createElement("path",{fill:o,d:"M20.555,11.168l-15-10c-0.307-0.204-0.702-0.224-1.026-0.05C4.203,1.292,4,1.631,4,2v20 c0,0.369,0.203,0.708,0.528,0.882C4.676,22.961,4.838,23,5,23c0.194,0,0.388-0.057,0.555-0.168l15-10C20.833,12.646,21,12.334,21,12 S20.833,11.354,20.555,11.168z"})));G.displayName="PlaySolid";G.style=Bo;var Fo={...r.styles,fill:"none",stroke:"currentColor"},K=({strokeColor:o="currentColor",styles:e,size:t=24,role:l="img",alt:s="Pause arrow icon",...i})=>a__namespace.createElement(r,{size:t,styles:e,role:l,alt:s,...i},a__namespace.createElement("g",{fill:o},a__namespace.createElement("path",{d:"M7,1H2A1,1,0,0,0,1,2V22a1,1,0,0,0,1,1H7a1,1,0,0,0,1-1V2A1,1,0,0,0,7,1Z",fill:o}),a__namespace.createElement("path",{d:"M22,1H17a1,1,0,0,0-1,1V22a1,1,0,0,0,1,1h5a1,1,0,0,0,1-1V2A1,1,0,0,0,22,1Z",fill:o})));K.displayName="PauseSolid";K.style=Fo;var Go={...r.styles,fill:"none",stroke:"currentColor"},O=({strokeColor:o="currentColor",styles:e,size:t=16,role:l="img",alt:s="Up arrow icon",...i})=>a__namespace.createElement(r,{size:t,styles:e,role:l,alt:s,...i},a__namespace.createElement("g",{fill:o},a__namespace.createElement("path",{fill:o,"fill-rule":"evenodd","clip-rule":"evenodd",d:"M3 21.8685L17.8028 12L3 2.1315L3 21.8685Z"}),a__namespace.createElement("path",{fill:o,"fill-rule":"evenodd","clip-rule":"evenodd",d:"M19 2L19 22L21 22L21 2L19 2Z"})));O.displayName="ResumeSolid";O.style=Go;var uo=({fill:o="currentColor",size:e=24,role:t="img",alt:l="Info icon",...s})=>a__namespace.createElement(r,{size:e,role:t,alt:l,...s},a__namespace.createElement("g",{fill:o},a__namespace.createElement("path",{d:"M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z",fill:o})));uo.displayName="Info";var go=({fill:o="currentColor",size:e=24,role:t="img",alt:l="Add icon",...s})=>a__namespace.createElement(r,{size:e,role:t,alt:l,...s},a__namespace.createElement("g",{fill:o},a__namespace.createElement("path",{d:"M23.707,6.736,17.263.293A1,1,0,0,0,16.556,0H7.444a1,1,0,0,0-.707.293L.293,6.736A1,1,0,0,0,0,7.443v9.114a1,1,0,0,0,.293.707l6.444,6.443A1,1,0,0,0,7.444,24h9.112a1,1,0,0,0,.707-.293l6.444-6.443A1,1,0,0,0,24,16.557V7.443A1,1,0,0,0,23.707,6.736ZM13.645,5,13,14H11l-.608-9ZM12,20a2,2,0,1,1,2-2A2,2,0,0,1,12,20Z",fill:o})));go.displayName="AlertSolid";var So=({fill:o="currentColor",size:e=24,role:t="img",alt:l="Add icon",...s})=>a__namespace.createElement(r,{size:e,role:t,alt:l,...s},a__namespace.createElement("g",{fill:o},a__namespace.createElement("path",{fill:o,d:"M8,17.06V20h8v-2.94c3.059-1.514,5-4.607,5-8.06c0-4.963-4.038-9-9-9S3,4.037,3,9 C3,12.452,4.941,15.546,8,17.06z M7,9c0-2.757,2.243-5,5-5h1v2h-1c-1.654,0-3,1.346-3,3v1H7V9z"})," ",a__namespace.createElement("path",{fill:o,d:"M8,22v1c0,0.553,0.448,1,1,1h6c0.552,0,1-0.447,1-1v-1H8z"})));So.displayName="InfoSolid";var ko=({fill:o="currentColor",size:e=24,role:t="img",alt:l="Add icon",...s})=>a__namespace.createElement(r,{size:e,role:t,alt:l,...s},a__namespace.createElement("g",{fill:o},a__namespace.createElement("path",{d:"M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12,12-5.383,12-12S18.617,0,12,0Zm0,19.5c-.69,0-1.25-.56-1.25-1.25s.56-1.25,1.25-1.25,1.25,.56,1.25,1.25-.56,1.25-1.25,1.25Zm2.688-7.198c-1.444,1.224-1.688,1.667-1.688,2.198,0,.553-.447,1-1,1s-1-.447-1-1c0-1.434,.807-2.379,2.395-3.724,.447-.38,1.844-1.72,1.024-3.046-.532-.861-2.517-.984-4.162-.256-.507,.223-1.096-.006-1.319-.511-.223-.505,.006-1.096,.511-1.319,2.33-1.03,5.463-.924,6.672,1.035,1.103,1.784,.554,3.938-1.433,5.622Z",fill:o})));ko.displayName="QuestionSolid";var xo=({fill:o="currentColor",size:e=24,role:t="img",alt:l="Add icon",...s})=>a__namespace.createElement(r,{size:e,role:t,alt:l,...s},a__namespace.createElement("g",{fill:o},a__namespace.createElement("path",{d:"M23.641,18.485L14.732,1.643C13.931,.134,12.059-.44,10.55,.361c-.546,.29-.992,.736-1.282,1.282L.359,18.485c-.793,1.504-.217,3.367,1.288,4.16,.445,.235,.942,.357,1.445,.355H20.908c1.7,.005,3.083-1.369,3.088-3.07,.002-.504-.12-1-.355-1.445Zm-11.641,1.515c-.828,0-1.5-.672-1.5-1.5s.672-1.5,1.5-1.5,1.5,.672,1.5,1.5-.672,1.5-1.5,1.5Zm.53-5h-1.061c-.264,0-.483-.205-.499-.469l-.438-7c-.018-.288,.211-.531,.499-.531h1.936c.288,0,.517,.243,.499,.531l-.438,7c-.016,.264-.235,.469-.499,.469Z",fill:o})));xo.displayName="WarnSolid";var Po=({fill:o="currentColor",size:e=24,role:t="img",alt:l="Add icon",...s})=>a__namespace.createElement(r,{size:e,role:t,alt:l,...s},a__namespace.createElement("g",{fill:o},a__namespace.createElement("path",{d:"M12,0C5.373,0,0,5.373,0,12s5.373,12,12,12,12-5.373,12-12C23.981,5.381,18.619,.019,12,0Zm7.207,7.707l-9,9c-.195,.195-.451,.293-.707,.293s-.512-.098-.707-.293l-4-4c-.391-.391-.391-1.023,0-1.414s1.023-.391,1.414,0l3.293,3.293L17.793,6.293c.391-.391,1.023-.391,1.414,0s.391,1.023,0,1.414Z",fill:o})));Po.displayName="SuccessSolid";var ho=({fill:o="currentColor",size:e=24,role:t="img",alt:l="Add icon",...s})=>a__namespace.createElement(r,{size:e,role:t,alt:l,...s},a__namespace.createElement("g",{fill:o},a__namespace.createElement("path",{d:"M20,1H4c-1.654,0-3,1.346-3,3V20c0,1.654,1.346,3,3,3H20c1.654,0,3-1.346,3-3V4c0-1.654-1.346-3-3-3ZM11,7c0-.553,.448-1,1-1s1,.447,1,1v6c0,.553-.448,1-1,1s-1-.447-1-1V7Zm1,11.5c-.69,0-1.25-.56-1.25-1.25s.56-1.25,1.25-1.25,1.25,.56,1.25,1.25-.56,1.25-1.25,1.25Z",fill:o})));ho.displayName="AlertSquareSolid";var Oo={display:"inline-flex",direction:"row",gap:".2rem",placeItems:"center",width:"auto"},n=({id:o,classes:e,children:t,styles:l,"aria-hidden":s=!0,"aria-label":i,role:p,...eo})=>a__namespace.default.createElement(chunkENTCUJ3A_cjs.a,{id:o,as:"span",styles:l,className:e,"data-icon":!0,"data-style":"icons","aria-hidden":s,"aria-label":i,role:p,...eo},t),lt=n;n.displayName="Icon";n.Add=P;n.ArrowDown=I;n.ArrowLeft=h;n.ArrowRight=io;n.ArrowUp=z;n.Chat=C;n.Code=lo;n.Copy=H;n.Down=W;n.Home=k;n.Info=uo;n.InfoSolid=So;n.AlertSolid=go;n.Left=N;n.Minus=Z;n.Pause=E;n.PauseSolid=K;n.Play=D;n.PlaySolid=G;n.Remove=R;n.Resume=J;n.ResumeSolid=O;n.Right=M;n.Star=yo;n.Stop=b;n.StopSolid=B;n.Up=q;n.User=A;n.styles=Oo;n.QuestionSolid=ko;n.WarnSolid=xo;n.SuccessSolid=Po;n.AlertSquareSolid=ho;n.Close=n.Remove;
 
 exports.a = n;
 exports.b = lt;
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-3MKLDCKQ.cjs.map
+//# sourceMappingURL=chunk-6WTC4JXH.cjs.map

package/libs/chunk-75QHTLFO.js

@@ -0,0 +1,7 @@
+import { useRef, useEffect, useMemo } from 'react';
+
+function g(T,a={}){let n=!!T,p=["handlers","className","disabledClassName","preventDefault","stopPropagation","removeFromTabOrder"],D=Object.keys(a).some(s=>p.includes(s))?a:{handlers:a},{handlers:t={},className:l="",disabledClassName:i="is-disabled",preventDefault:d=!0,stopPropagation:c=!0,removeFromTabOrder:v=!1}=D,o=useRef(t);return useEffect(()=>{o.current=t;},[t]),useMemo(()=>{let s=[n?i:"",l].filter(Boolean).map(e=>e.trim()).filter(e=>e.length>0).join(" "),b={"aria-disabled":n,className:s};v&&n&&(b.tabIndex=-1);let u={};return [{key:"onClick"},{key:"onChange"},{key:"onBlur"},{key:"onFocus",allowWhenDisabled:!0},{key:"onPointerDown"},{key:"onKeyDown"},{key:"onKeyUp"},{key:"onMouseDown"},{key:"onMouseUp"},{key:"onTouchStart"},{key:"onTouchEnd"}].forEach(({key:e,allowWhenDisabled:f=!1})=>{o.current[e]!==void 0&&(u[e]=r=>{if(n&&!f){d&&r.preventDefault(),c&&r.stopPropagation();return}o.current[e]?.(r);});}),{disabledProps:b,handlers:u}},[n,l,i,d,c,v])}
+
+export { g as a };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-75QHTLFO.js.map

package/libs/chunk-75QHTLFO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-disabled-state.ts"],"names":["useMemo","useRef","useEffect","useDisabledState","disabled","handlersOrOptions","isDisabled","configKeys","options","key","handlers","className","disabledClassName","preventDefault","stopPropagation","removeFromTabOrder","handlersRef","mergedClassName","c","disabledProps","wrappedHandlers","allowWhenDisabled","event"],"mappings":"AAAA,OAAS,WAAAA,EAAS,UAAAC,EAAQ,aAAAC,MAAiB,QA+IpC,SAASC,EACdC,EACAC,EAAoF,CAAC,EAC1D,CAE3B,IAAMC,EAAa,EAAQF,EAIrBG,EAAa,CAAC,WAAY,YAAa,oBAAqB,iBAAkB,kBAAmB,oBAAoB,EAGrHC,EAFW,OAAO,KAAKH,CAAiB,EAAE,KAAKI,GAAOF,EAAW,SAASE,CAAG,CAAC,EAG/EJ,EACD,CAAE,SAAUA,CAAuD,EAEjE,CACJ,SAAAK,EAAW,CAAC,EACZ,UAAAC,EAAY,GACZ,kBAAAC,EAAoB,cACpB,eAAAC,EAAiB,GACjB,gBAAAC,EAAkB,GAClB,mBAAAC,EAAqB,EACvB,EAAIP,EAIEQ,EAAcf,EAAOS,CAAQ,EAEnC,OAAAR,EAAU,IAAM,CACdc,EAAY,QAAUN,CACxB,EAAG,CAACA,CAAQ,CAAC,EAINV,EAAmC,IAAM,CAE9C,IAAMiB,EAAkB,CACtBX,EAAaM,EAAoB,GACjCD,CACF,EACG,OAAO,OAAO,EACd,IAAIO,GAAKA,EAAE,KAAK,CAAC,EACjB,OAAOA,GAAKA,EAAE,OAAS,CAAC,EACxB,KAAK,GAAG,EAELC,EAA+B,CACnC,gBAAiBb,EACjB,UAAWW,CACb,EAGIF,GAAsBT,IACxBa,EAAc,SAAW,IAK3B,IAAMC,EAAqD,CAAC,EAqB5D,MAfK,CACH,CAAE,IAAK,SAAU,EACjB,CAAE,IAAK,UAAW,EAClB,CAAE,IAAK,QAAS,EAChB,CAAE,IAAK,UAAW,kBAAmB,EAAK,EAC1C,CAAE,IAAK,eAAgB,EACvB,CAAE,IAAK,WAAY,EACnB,CAAE,IAAK,SAAU,EACjB,CAAE,IAAK,aAAc,EACrB,CAAE,IAAK,WAAY,EACnB,CAAE,IAAK,cAAe,EACtB,CAAE,IAAK,YAAa,CACtB,EAGe,QAAQ,CAAC,CAAE,IAAAX,EAAK,kBAAAY,EAAoB,EAAM,IAAM,CAEzDL,EAAY,QAAQP,CAAG,IAAM,SAG/BW,EAAgBX,CAAG,EAAMa,GAAe,CACtC,GAAIhB,GAAc,CAACe,EAAmB,CAChCR,GAAgBS,EAAM,eAAe,EACrCR,GAAiBQ,EAAM,gBAAgB,EAC3C,MACF,CAEAN,EAAY,QAAQP,CAAG,IAAIa,CAAK,CAElC,EAEJ,CAAC,EAEM,CACL,cAAAH,EACA,SAAUC,CACZ,CACF,EAAG,CAACd,EAAYK,EAAWC,EAAmBC,EAAgBC,EAAiBC,CAAkB,CAAC,CACpG","sourcesContent":["import { useMemo, useRef, useEffect } from 'react';\n\n/**\n * Event handler mapping type for disabled state management.\n * Maps event names to their handler functions for any HTML element.\n *\n * @template T - The HTML element type (e.g., HTMLButtonElement, HTMLInputElement)\n */\nexport type DisabledEventHandlers<T extends HTMLElement> = {\n  onClick?: (event: React.MouseEvent<T>) => void;\n  onChange?: (event: React.ChangeEvent<T>) => void;\n  onBlur?: (event: React.FocusEvent<T>) => void;\n  onFocus?: (event: React.FocusEvent<T>) => void;\n  onPointerDown?: (event: React.PointerEvent<T>) => void;\n  onKeyDown?: (event: React.KeyboardEvent<T>) => void;\n  onKeyUp?: (event: React.KeyboardEvent<T>) => void;\n  onMouseDown?: (event: React.MouseEvent<T>) => void;\n  onMouseUp?: (event: React.MouseEvent<T>) => void;\n  onTouchStart?: (event: React.TouchEvent<T>) => void;\n  onTouchEnd?: (event: React.TouchEvent<T>) => void;\n};\n\n/**\n * Props returned by the useDisabledState hook containing ARIA attributes and styling.\n */\nexport interface DisabledProps {\n  /** ARIA attribute indicating disabled state */\n  'aria-disabled': boolean;\n  /** CSS class name for disabled state styling */\n  className: string;\n  /** Optional tabIndex to remove element from tab order when disabled */\n  tabIndex?: -1;\n}\n\n/**\n * Configuration options for useDisabledState hook.\n *\n * @template T - The HTML element type\n */\nexport interface UseDisabledStateOptions<T extends HTMLElement> {\n  /** Event handlers to wrap with disabled logic */\n  handlers?: Partial<DisabledEventHandlers<T>>;\n\n  /** Existing className to merge with disabled class */\n  className?: string;\n\n  /** Custom disabled className (default: 'is-disabled') */\n  disabledClassName?: string;\n\n  /** Whether to call preventDefault on disabled events (default: true) */\n  preventDefault?: boolean;\n\n  /** Whether to call stopPropagation on disabled events (default: true) */\n  stopPropagation?: boolean;\n\n  /** Make element non-focusable when disabled via tabIndex=-1 (default: false for a11y) */\n  removeFromTabOrder?: boolean;\n}\n\n/**\n * Return type for the useDisabledState hook.\n *\n * @template T - The HTML element type\n */\nexport interface UseDisabledStateReturn<T extends HTMLElement> {\n  /** Props to spread on the element for disabled state */\n  disabledProps: DisabledProps;\n  /** Wrapped event handlers that respect disabled state */\n  handlers: Partial<DisabledEventHandlers<T>>;\n}\n\n/**\n * Manages accessible disabled state for form elements using aria-disabled pattern.\n *\n * This hook implements WCAG 2.1 Level AA compliant disabled state management by:\n * - Using `aria-disabled` instead of native `disabled` attribute (keeps elements focusable)\n * - Preventing all interaction events when disabled\n * - Applying accessible styling via `.is-disabled` class\n * - Maintaining keyboard focusability for screen reader discovery\n *\n * **Why aria-disabled instead of disabled attribute?**\n * - Elements remain in keyboard tab order (WCAG 2.1.1 - Keyboard)\n * - Screen readers can discover and announce disabled state\n * - Enables tooltips and contextual help on disabled elements\n * - Better visual styling control for WCAG contrast compliance\n *\n * **Performance Optimizations:**\n * - Single memoization pass for all handlers and props\n * - Stable handler references using refs (only recreate on disabled state change)\n * - Automatic className merging to reduce consumer boilerplate\n *\n * @template T - The HTML element type (e.g., HTMLButtonElement, HTMLInputElement)\n *\n * @param {boolean | undefined} disabled - Whether the element should be disabled. Undefined treated as false.\n * @param {Partial<DisabledEventHandlers<T>> | UseDisabledStateOptions<T>} handlersOrOptions -\n *   Event handlers to wrap OR configuration options object (for backward compatibility)\n *\n * @returns {UseDisabledStateReturn<T>} Object containing disabledProps and wrapped handlers\n *\n * @example\n * // Basic button usage (legacy API - still supported)\n * const MyButton = ({ disabled, onClick, children }) => {\n *   const { disabledProps, handlers } = useDisabledState(disabled, { onClick });\n *   return <button {...disabledProps} {...handlers}>{children}</button>;\n * };\n *\n * @example\n * // Enhanced API with className merging\n * const MyButton = ({ disabled, onClick, className, children }) => {\n *   const { disabledProps, handlers } = useDisabledState(disabled, {\n *     handlers: { onClick },\n *     className,\n *   });\n *   return <button {...disabledProps} {...handlers}>{children}</button>;\n * };\n *\n * @example\n * // Custom configuration\n * const MyInput = ({ disabled, onChange, className }) => {\n *   const { disabledProps, handlers } = useDisabledState(disabled, {\n *     handlers: { onChange },\n *     className,\n *     disabledClassName: 'custom-disabled',\n *     preventDefault: true,\n *     stopPropagation: false,\n *   });\n *   return <input {...disabledProps} {...handlers} />;\n * };\n *\n * @example\n * // Remove from tab order when disabled\n * const MyButton = ({ disabled, onClick }) => {\n *   const { disabledProps, handlers } = useDisabledState(disabled, {\n *     handlers: { onClick },\n *     removeFromTabOrder: true, // Adds tabIndex=-1 when disabled\n *   });\n *   return <button {...disabledProps} {...handlers}>Click me</button>;\n * };\n *\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/keyboard WCAG 2.1.1 - Keyboard}\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/name-role-value WCAG 4.1.2 - Name, Role, Value}\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum WCAG 1.4.3 - Contrast (Minimum)}\n */\nexport function useDisabledState<T extends HTMLElement = HTMLElement>(\n  disabled: boolean | undefined,\n  handlersOrOptions: Partial<DisabledEventHandlers<T>> | UseDisabledStateOptions<T> = {}\n): UseDisabledStateReturn<T> {\n  // Normalize disabled to boolean (treat undefined as false)\n  const isDisabled = Boolean(disabled);\n\n  // Support both legacy API (handlers directly) and new API (options object)\n  // Check if this is the new API by looking for config properties\n  const configKeys = ['handlers', 'className', 'disabledClassName', 'preventDefault', 'stopPropagation', 'removeFromTabOrder'];\n  const isNewAPI = Object.keys(handlersOrOptions).some(key => configKeys.includes(key));\n\n  const options: UseDisabledStateOptions<T> = isNewAPI\n    ? (handlersOrOptions as UseDisabledStateOptions<T>)\n    : { handlers: handlersOrOptions as Partial<DisabledEventHandlers<T>> };\n\n  const {\n    handlers = {},\n    className = '',\n    disabledClassName = 'is-disabled',\n    preventDefault = true,\n    stopPropagation = true,\n    removeFromTabOrder = false,\n  } = options;\n\n  // Store latest handlers in ref to maintain stable wrapper functions\n  // This prevents handler wrappers from being recreated on every render\n  const handlersRef = useRef(handlers);\n\n  useEffect(() => {\n    handlersRef.current = handlers;\n  }, [handlers]);\n\n  // Single memoization pass for both props and wrapped handlers\n  // Only recalculates when disabled state or configuration changes\n  return useMemo<UseDisabledStateReturn<T>>(() => {\n    // Build disabled props with merged className\n    const mergedClassName = [\n      isDisabled ? disabledClassName : '',\n      className,\n    ]\n      .filter(Boolean)\n      .map(c => c.trim())\n      .filter(c => c.length > 0)\n      .join(' ');\n\n    const disabledProps: DisabledProps = {\n      'aria-disabled': isDisabled,\n      className: mergedClassName,\n    };\n\n    // Add tabIndex=-1 when disabled if requested (removes from tab order)\n    if (removeFromTabOrder && isDisabled) {\n      disabledProps.tabIndex = -1;\n    }\n\n    // Build wrapped handlers using declarative mapping\n    // Only includes handlers that were actually provided\n    const wrappedHandlers: Partial<DisabledEventHandlers<T>> = {};\n\n    // Define which handlers to wrap and their special behaviors\n    const handlerConfigs: Array<{\n      key: keyof DisabledEventHandlers<T>;\n      allowWhenDisabled?: boolean;\n    }> = [\n      { key: 'onClick' },\n      { key: 'onChange' },\n      { key: 'onBlur' },\n      { key: 'onFocus', allowWhenDisabled: true }, // Always allow focus for a11y\n      { key: 'onPointerDown' },\n      { key: 'onKeyDown' },\n      { key: 'onKeyUp' },\n      { key: 'onMouseDown' },\n      { key: 'onMouseUp' },\n      { key: 'onTouchStart' },\n      { key: 'onTouchEnd' },\n    ];\n\n    // Wrap each provided handler\n    handlerConfigs.forEach(({ key, allowWhenDisabled = false }) => {\n      // Check if handler exists in the initial handlers object\n      if (handlersRef.current[key] !== undefined) {\n        // Create wrapper that accesses handler from ref at call-time\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        wrappedHandlers[key] = ((event: any) => {\n          if (isDisabled && !allowWhenDisabled) {\n            if (preventDefault) event.preventDefault();\n            if (stopPropagation) event.stopPropagation();\n            return;\n          }\n          // Access latest handler from ref at call-time\n          handlersRef.current[key]?.(event);\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        }) as any;\n      }\n    });\n\n    return {\n      disabledProps,\n      handlers: wrappedHandlers,\n    };\n  }, [isDisabled, className, disabledClassName, preventDefault, stopPropagation, removeFromTabOrder]);\n}\n"]}

package/libs/{chunk-ZANSFMTD.js → chunk-7XPFW7CB.js}

@@ -1,9 +1,9 @@
-import { a as a$1 } from './chunk-QLZWHAMK.js';
-import { a } from './chunk-KUKIVRC2.js';
+import { a as a$1 } from './chunk-OVWLQYMK.js';
+import { a } from './chunk-HHLNOC5T.js';
 import e from 'react';
 
 var l=({id:n,children:a$1,classes:r,modalRef:d,openOnMount:i,...t})=>e.createElement(a,{as:"dialog",id:n,classes:r,ref:d,open:i,onClick:o=>{o.currentTarget===o.target&&o.currentTarget.close();},...t},a$1);e.memo(l);l.displayName="Dialog";var u=({openChild:n,closeChild:a,modalHeader:r,modalFooter:d,children:i,showOpen:t=!1,...p})=>{let o=e.useRef(null),f=()=>{o.current&&(t?o.current.show():o.current.showModal());},M=()=>{o.current&&o.current.close();};return e.createElement(e.Fragment,null,e.createElement(l,{modalRef:o,openOnMount:t,...p},e.createElement("section",null,r,i,d??e.createElement("div",null,e.createElement(a$1,{type:"button",pointerDown:()=>{M();}},a||"Close")," "))),!t&&e.createElement(a$1,{type:"button",pointerDown:f},n||"Open Modal"))};u.displayName="Modal";
 
 export { u as a };
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-ZANSFMTD.js.map
+//# sourceMappingURL=chunk-7XPFW7CB.js.map

package/libs/chunk-BFK62VX5.js

@@ -0,0 +1,5 @@
+function o(e,n){return e??n??!1}
+
+export { o as a };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-BFK62VX5.js.map

package/libs/chunk-BFK62VX5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/accessibility.ts"],"names":["resolveDisabledState","disabled","isDisabled"],"mappings":"AAsGO,SAASA,EACdC,EACAC,EACS,CAET,OAAOD,GAAYC,GAAc,EACnC","sourcesContent":["/**\n * Accessibility utility functions for fpkit components.\n *\n * These utilities support WCAG 2.1 Level AA compliance for disabled states\n * and other accessibility features.\n */\n\n/**\n * CSS properties for disabled state styling.\n *\n * Returns a CSS-in-JS compatible style object for programmatic styling\n * of disabled elements. Meets WCAG 1.4.3 contrast minimum (3:1 for UI components).\n *\n * @param {boolean} isDisabled - Whether the element is disabled\n * @returns {React.CSSProperties} Style object with disabled state properties\n *\n * @example\n * const MyComponent = ({ disabled }) => {\n *   const disabledStyles = getDisabledStyles(disabled);\n *   return <div style={disabledStyles}>Content</div>;\n * };\n *\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum WCAG 1.4.3 - Contrast (Minimum)}\n */\nexport function getDisabledStyles(isDisabled: boolean): React.CSSProperties {\n  if (!isDisabled) {\n    return {};\n  }\n\n  return {\n    // hsl(0 0% 40%) = #666666, provides 3:1 contrast on white (#ffffff)\n    color: 'var(--disabled-color, hsl(0 0% 40%))',\n    // CSS custom properties require string casting for TypeScript compatibility\n    opacity: 'var(--disabled-opacity, 0.6)' as unknown as number,\n    cursor: 'var(--disabled-cursor, not-allowed)' as unknown as React.CSSProperties['cursor'],\n  };\n}\n\n/**\n * Wraps a single event handler to prevent execution when disabled.\n *\n * This is a generic utility for advanced use cases where the `useDisabledState`\n * hook cannot be used (e.g., class components, custom event types).\n *\n * @template E - The React synthetic event type\n * @param {Function | undefined} handler - The event handler to wrap\n * @param {boolean} isDisabled - Whether to prevent handler execution\n * @returns {Function | undefined} Wrapped handler or undefined if no handler provided\n *\n * @example\n * // Custom event handler in class component\n * class MyComponent extends React.Component {\n *   handleCustomEvent = wrapEventHandler(this.onCustomEvent, this.props.disabled);\n * }\n *\n * @example\n * // Custom event type not supported by useDisabledState\n * const handleCustom = wrapEventHandler(\n *   (e: CustomEvent) => console.log('custom'),\n *   disabled\n * );\n */\nexport function wrapEventHandler<E extends React.SyntheticEvent>(\n  handler: ((event: E) => void) | undefined,\n  isDisabled: boolean\n): ((event: E) => void) | undefined {\n  if (!handler) {\n    return undefined;\n  }\n\n  return (event: E) => {\n    if (isDisabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    handler(event);\n  };\n}\n\n/**\n * Resolves the effective disabled state from multiple props.\n *\n * Handles backward compatibility with legacy `isDisabled` prop.\n * The `disabled` prop takes precedence when both are provided.\n *\n * @param {boolean | undefined} disabled - Modern disabled prop\n * @param {boolean | undefined} isDisabled - Legacy disabled prop (deprecated)\n * @returns {boolean} The resolved disabled state (defaults to false)\n *\n * @example\n * const MyComponent = ({ disabled, isDisabled }) => {\n *   const isActuallyDisabled = resolveDisabledState(disabled, isDisabled);\n *   // Use isActuallyDisabled for logic\n * };\n *\n * @example\n * // disabled takes precedence\n * resolveDisabledState(true, false);   // true\n * resolveDisabledState(false, true);   // false\n * resolveDisabledState(undefined, true); // true\n */\nexport function resolveDisabledState(\n  disabled: boolean | undefined,\n  isDisabled: boolean | undefined\n): boolean {\n  // disabled prop takes precedence, fall back to isDisabled, default to false\n  return disabled ?? isDisabled ?? false;\n}\n"]}

package/libs/{chunk-ROZI23GS.cjs → chunk-DKTHCQ5P.cjs}

@@ -1,15 +1,15 @@
 'use strict';
 
-var chunkJ32EZPYD_cjs = require('./chunk-J32EZPYD.cjs');
-var chunkL75OQKEI_cjs = require('./chunk-L75OQKEI.cjs');
+var chunkGT77BX4L_cjs = require('./chunk-GT77BX4L.cjs');
+var chunkENTCUJ3A_cjs = require('./chunk-ENTCUJ3A.cjs');
 var e = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var e__default = /*#__PURE__*/_interopDefault(e);
 
-var l=({id:n,children:a,classes:r,modalRef:d,openOnMount:i,...t})=>e__default.default.createElement(chunkL75OQKEI_cjs.a,{as:"dialog",id:n,classes:r,ref:d,open:i,onClick:o=>{o.currentTarget===o.target&&o.currentTarget.close();},...t},a);e__default.default.memo(l);l.displayName="Dialog";var u=({openChild:n,closeChild:a,modalHeader:r,modalFooter:d,children:i,showOpen:t=!1,...p})=>{let o=e__default.default.useRef(null),f=()=>{o.current&&(t?o.current.show():o.current.showModal());},M=()=>{o.current&&o.current.close();};return e__default.default.createElement(e__default.default.Fragment,null,e__default.default.createElement(l,{modalRef:o,openOnMount:t,...p},e__default.default.createElement("section",null,r,i,d??e__default.default.createElement("div",null,e__default.default.createElement(chunkJ32EZPYD_cjs.a,{type:"button",pointerDown:()=>{M();}},a||"Close")," "))),!t&&e__default.default.createElement(chunkJ32EZPYD_cjs.a,{type:"button",pointerDown:f},n||"Open Modal"))};u.displayName="Modal";
+var l=({id:n,children:a,classes:r,modalRef:d,openOnMount:i,...t})=>e__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"dialog",id:n,classes:r,ref:d,open:i,onClick:o=>{o.currentTarget===o.target&&o.currentTarget.close();},...t},a);e__default.default.memo(l);l.displayName="Dialog";var u=({openChild:n,closeChild:a,modalHeader:r,modalFooter:d,children:i,showOpen:t=!1,...p})=>{let o=e__default.default.useRef(null),f=()=>{o.current&&(t?o.current.show():o.current.showModal());},M=()=>{o.current&&o.current.close();};return e__default.default.createElement(e__default.default.Fragment,null,e__default.default.createElement(l,{modalRef:o,openOnMount:t,...p},e__default.default.createElement("section",null,r,i,d??e__default.default.createElement("div",null,e__default.default.createElement(chunkGT77BX4L_cjs.a,{type:"button",pointerDown:()=>{M();}},a||"Close")," "))),!t&&e__default.default.createElement(chunkGT77BX4L_cjs.a,{type:"button",pointerDown:f},n||"Open Modal"))};u.displayName="Modal";
 
 exports.a = u;
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-ROZI23GS.cjs.map
+//# sourceMappingURL=chunk-DKTHCQ5P.cjs.map

package/libs/chunk-E2AJURUW.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var e = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var e__default = /*#__PURE__*/_interopDefault(e);
+
+var t=e__default.default.forwardRef(({as:o,styles:p,classes:r,children:n,defaultStyles:s,...P},m)=>{let C=o||"div",a={...s,...p};return e__default.default.createElement(C,{ref:m,style:a,className:r,...P},n)});t.displayName="FP";var c=t;
+
+exports.a = c;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-E2AJURUW.cjs.map

package/libs/chunk-E2AJURUW.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/fp.tsx"],"names":["React","FP","as","styles","classes","children","defaultStyles","props","ref","Component","styleObj","fp_default"],"mappings":"AAAA,OAAOA,MAAW,QA6HlB,IAAMC,EAAKD,EAAM,WACf,CACE,CAAE,GAAAE,EAAI,OAAAC,EAAQ,QAAAC,EAAS,SAAAC,EAAU,cAAAC,EAAe,GAAGC,CAAM,EACzDC,IACG,CACH,IAAMC,EAAYP,GAAM,MAElBQ,EAAW,CAAE,GAAGJ,EAAe,GAAGH,CAAO,EAE/C,OACEH,EAAA,cAACS,EAAA,CAAU,IAAKD,EAAK,MAAOE,EAAU,UAAWN,EAAU,GAAGG,GAC3DF,CACH,CAEJ,CACF,EAEAJ,EAAG,YAAc,KAUjB,IAAOU,EAAQV","sourcesContent":["import React from 'react'\nimport { ComponentProps } from '../types'\n\n/**\n * @deprecated This type is deprecated. Use `PolymorphicRef` from './ui.tsx' instead.\n * The UI component provides better type safety and accessibility features.\n */\ntype PolymorphicRef<C extends React.ElementType> = React.Ref<\n  React.ElementRef<C>\n>\n\n/**\n * @deprecated This type is deprecated. Use `AsProp` from './ui.tsx' instead.\n * The UI component provides better type safety and accessibility features.\n */\ntype AsProp<C extends React.ElementType> = {\n  as?: C\n}\n\n/**\n * @deprecated This type is deprecated. Use `PropsToOmit` from './ui.tsx' instead.\n * The UI component provides better type safety and accessibility features.\n */\ntype PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P)\n\n/**\n * @deprecated This type is deprecated. Use `PolymorphicComponentProp` from './ui.tsx' instead.\n * The UI component provides better type safety and accessibility features.\n */\ntype PolymorphicComponentProp<\n  C extends React.ElementType,\n  // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n  Props = {},\n> = React.PropsWithChildren<Props & AsProp<C>> &\n  Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>\n\n/**\n * @deprecated This type is deprecated. Use `PolymorphicComponentPropWithRef` from './ui.tsx' instead.\n * The UI component provides better type safety and accessibility features.\n */\ntype PolymorphicComponentPropWithRef<\n  C extends React.ElementType,\n  // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n  Props = {},\n> = PolymorphicComponentProp<C, Props> & {\n  ref?: PolymorphicRef<C> | React.ForwardedRef<React.ElementRef<C>>\n}\n\n/**\n * @deprecated This type is deprecated. Use `UIProps` from './ui.tsx' instead.\n * The UI component provides better type safety and accessibility features.\n */\ntype FPProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<\n  C,\n  {\n    renderStyles?: boolean\n    styles?: React.CSSProperties\n    classes?: string\n  }\n>\n\n/**\n * FPComponent type definition\n *\n * @deprecated This type is deprecated. Use the `UI` component from './ui.tsx' instead.\n * The UI component provides enhanced accessibility documentation, better type safety,\n * and comprehensive WCAG 2.1 AA compliance guidance.\n *\n * @typeParam C - The HTML element type to render\n * @param props - The component props\n * @returns React component\n *\n * @example\n * ```typescript\n * // Migration from FP to UI\n * // Before:\n * import FP from '@fpkit/acss/components/fp';\n * <FP as=\"button\" styles={{ padding: '1rem' }}>Click me</FP>\n *\n * // After:\n * import UI from '@fpkit/acss/components/ui';\n * <UI as=\"button\" styles={{ padding: '1rem' }}>Click me</UI>\n * ```\n */\ntype FPComponent = {\n  <C extends React.ElementType = 'span'>(\n    props: FPProps<C>,\n  ): React.ReactElement | null\n  displayName?: string\n}\n\n/**\n * @deprecated **DEPRECATED:** This component is deprecated and will be removed in a future version.\n * Please use the `UI` component from `./ui.tsx` instead.\n *\n * The UI component is a drop-in replacement with the same API but provides:\n * - Enhanced accessibility documentation and WCAG 2.1 AA compliance guidance\n * - Better TypeScript type safety with detailed JSDoc comments\n * - Comprehensive examples for accessible component patterns\n * - More robust style merging with defaultStyles support\n *\n * @example\n * ```typescript\n * // Migration Guide\n * // Before:\n * import FP from '@fpkit/acss/components/fp';\n * <FP as=\"button\" styles={{ padding: '1rem' }} classes=\"btn\">\n *   Click me\n * </FP>\n *\n * // After:\n * import UI from '@fpkit/acss/components/ui';\n * <UI as=\"button\" styles={{ padding: '1rem' }} classes=\"btn\">\n *   Click me\n * </UI>\n * ```\n *\n * @param {Object} props - Component props\n * @param {React.ElementType} props.as - The HTML element to render. Defaults to 'div'.\n * @param {boolean} props.renderStyles - Whether to render styles or not. Defaults to true.\n * @param {Object} props.styles - The styles to apply to the component.\n * @param {Object} props.defaultStyles - The default styles to apply to the component.\n * @param {React.ReactNode} props.children - The children to render inside the component.\n * @returns {React.ReactElement} - A React component that renders an HTML element with optional styles.\n */\nconst FP = React.forwardRef(\n  <C extends React.ElementType>(\n    { as, styles, classes, children, defaultStyles, ...props }: FPProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'div'\n\n    const styleObj = { ...defaultStyles, ...styles } as React.CSSProperties\n\n    return (\n      <Component ref={ref} style={styleObj} className={classes} {...props}>\n        {children}\n      </Component>\n    )\n  },\n) as FPComponent\n\nFP.displayName = 'FP'\n\n/**\n * @deprecated This interface is deprecated. Use the `UI` component from './ui.tsx' instead.\n * The UI component provides better type safety and accessibility features.\n */\nexport interface BoxProps extends ComponentProps {\n  renderStyles: true\n}\n\nexport default FP\n"]}

package/libs/{chunk-L75OQKEI.cjs → chunk-ENTCUJ3A.cjs}

@@ -6,8 +6,8 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var e__default = /*#__PURE__*/_interopDefault(e);
 
-var t=e__default.default.forwardRef(({as:o,styles:p,classes:r,children:n,defaultStyles:s,...m},C)=>{let P=o??"div",a={...s,...p};return e__default.default.createElement(P,{ref:C,style:a,className:r,...m},n)}),y=t;t.displayName="UI";
+var t=e__default.default.forwardRef(({as:o,styles:p,classes:r,children:n,defaultStyles:s,...a},m)=>{let c=o??"div",C={...s,...p};return e__default.default.createElement(c,{ref:m,style:C,className:r,...a},n)}),R=t;t.displayName="UI";
 
-exports.a = y;
+exports.a = R;
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-L75OQKEI.cjs.map
+//# sourceMappingURL=chunk-ENTCUJ3A.cjs.map

package/libs/chunk-ENTCUJ3A.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui.tsx"],"names":["React","UI","as","styles","classes","children","defaultStyles","props","ref","Component","styleObj","ui_default"],"mappings":"AAEA,OAAOA,MAAW,QAiTlB,IAAMC,EAAkBD,EAAM,WAC5B,CACE,CAAE,GAAAE,EAAI,OAAAC,EAAQ,QAAAC,EAAS,SAAAC,EAAU,cAAAC,EAAe,GAAGC,CAAM,EACzDC,IACG,CACH,IAAMC,EAAYP,GAAM,MAElBQ,EAAgC,CAAE,GAAGJ,EAAe,GAAGH,CAAO,EAEpE,OACEH,EAAA,cAACS,EAAA,CAAU,IAAKD,EAAK,MAAOE,EAAU,UAAWN,EAAU,GAAGG,GAC3DF,CACH,CAEJ,CACF,EAEOM,EAAQV,EACfA,EAAG,YAAc","sourcesContent":[" \n/* eslint-disable */\nimport React from \"react\";\n\n/**\n * Extracts the appropriate ref type for a given element type.\n *\n * This utility type ensures that refs are properly typed based on the element\n * being rendered. For example, a button element receives HTMLButtonElement ref.\n * Excludes legacy string refs (deprecated since React 16.3).\n *\n * @typeParam C - The HTML element type (e.g., 'button', 'div', 'a')\n * @example\n * ```typescript\n * type ButtonRef = PolymorphicRef<'button'>; // React.Ref<HTMLButtonElement>\n * type DivRef = PolymorphicRef<'div'>; // React.Ref<HTMLDivElement>\n * ```\n */\ntype PolymorphicRef<C extends React.ElementType> = React.Ref<\n  React.ElementRef<C>\n>;\n\n/**\n * Defines the 'as' prop that determines which HTML element to render.\n *\n * This is the core prop that enables polymorphic behavior, allowing components\n * to render as any valid React element type while maintaining type safety.\n *\n * @typeParam C - The HTML element type to render\n * @example\n * ```typescript\n * <UI as=\"button\">Click me</UI>\n * <UI as=\"a\" href=\"/home\">Link</UI>\n * ```\n */\ntype AsProp<C extends React.ElementType> = {\n  as?: C;\n};\n\n/**\n * Identifies props that should be omitted to prevent type conflicts.\n *\n * This type ensures that our custom props don't conflict with native element\n * props by calculating which keys need to be omitted from the native props.\n *\n * @typeParam C - The HTML element type\n * @typeParam P - The custom props to merge\n */\ntype PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);\n\n/**\n * Merges custom props with native element props while preventing conflicts.\n *\n * This creates a union of our custom props and the native props for the chosen\n * element, omitting any conflicting keys to ensure type safety.\n *\n * @typeParam C - The HTML element type\n * @typeParam Props - The custom props to add\n * @example\n * ```typescript\n * // For a button, this merges custom props with HTMLButtonElement props\n * type ButtonProps = PolymorphicComponentProp<'button', { variant?: string }>;\n * ```\n */\ntype PolymorphicComponentProp<\n  C extends React.ElementType,\n  Props = {},\n> = React.PropsWithChildren<Props & AsProp<C>> &\n  Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;\n\n/**\n * Extends PolymorphicComponentProp to include properly-typed ref support.\n *\n * This is the final type in the polymorphic type chain, adding ref forwarding\n * with the correct ref type for the chosen element. The ref is properly typed\n * to match the element being rendered, enabling focus management and direct\n * DOM access for accessibility features like programmatic focus control.\n *\n * Supports both PolymorphicRef and ForwardedRef for compatibility with\n * React.forwardRef components.\n *\n * @typeParam C - The HTML element type\n * @typeParam Props - The custom props to add\n *\n * @example\n * ```typescript\n * // Using ref for focus management (important for accessibility)\n * const buttonRef = useRef<HTMLButtonElement>(null);\n * useEffect(() => {\n *   // Programmatically focus for keyboard navigation\n *   buttonRef.current?.focus();\n * }, []);\n *\n * return <UI as=\"button\" ref={buttonRef}>Accessible Button</UI>;\n * ```\n */\ntype PolymorphicComponentPropWithRef<\n  C extends React.ElementType,\n  Props = {},\n> = PolymorphicComponentProp<C, Props> & {\n  ref?: PolymorphicRef<C> | React.ForwardedRef<React.ElementRef<C>>;\n};\n\n/**\n * Props for the UI component, extending polymorphic props with style and class support.\n *\n * The UI component automatically forwards all ARIA attributes and native HTML props\n * to the rendered element, ensuring full accessibility support. This includes:\n * - `aria-label`, `aria-labelledby` - Accessible names for screen readers\n * - `aria-describedby` - Additional descriptive text references\n * - `aria-expanded`, `aria-controls` - Interactive widget states\n * - `role` - Semantic role override when needed\n * - All other ARIA attributes and HTML props\n *\n * @typeParam C - The HTML element type to render\n * @property {boolean} [renderStyles] - Reserved for future use. Currently has no effect.\n *   Styles are always rendered regardless of this prop value.\n * @property {React.CSSProperties} [styles] - Inline styles to apply (overrides defaultStyles)\n * @property {React.CSSProperties} [defaultStyles] - Base styles that can be overridden by styles prop\n * @property {string} [classes] - CSS class names to apply to the element\n * @property {string} [id] - HTML id attribute\n * @property {React.ReactNode} [children] - Child elements to render\n *\n * @example\n * ```typescript\n * // All ARIA attributes are automatically forwarded\n * <UI as=\"button\" aria-label=\"Close dialog\" aria-expanded={isOpen}>\n *   <CloseIcon />\n * </UI>\n * ```\n */\ntype UIProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<\n  C,\n  {\n    /** @deprecated Reserved for future use. Currently has no effect. Styles are always rendered. */\n    renderStyles?: boolean;\n    styles?: React.CSSProperties;\n    defaultStyles?: React.CSSProperties;\n    classes?: string;\n    id?: string;\n    children?: React.ReactNode;\n  }\n>;\n\n/**\n * UI Component function signature.\n *\n * Defines the polymorphic component that can render as any HTML element while\n * maintaining full TypeScript type safety for element-specific props.\n *\n * @typeParam C - The HTML element type to render (defaults to 'div')\n * @param {UIProps<C>} props - Component props including 'as', styles, and native element props\n * @returns {React.ReactElement} A React element of the specified type\n * @example\n * ```typescript\n * <UI as=\"button\" onClick={handler}>Button</UI>\n * <UI as=\"a\" href=\"/link\">Link</UI>\n * <UI>Default div</UI>\n * ```\n */\ntype UIComponent = (<C extends React.ElementType = \"div\">(\n  props: UIProps<C>\n) => React.ReactElement | any) & { displayName?: string };\n\n/**\n * UI - A polymorphic React component that can render as any HTML element.\n *\n * The UI component is a foundational primitive used throughout fpkit to create\n * flexible, type-safe components. It implements the polymorphic component pattern,\n * allowing a single component to render as different HTML elements while maintaining\n * full TypeScript type safety for element-specific props.\n *\n * ## Accessibility Considerations\n *\n * The UI component forwards all ARIA attributes and native HTML props, placing\n * accessibility responsibility on the consumer. When creating interactive elements,\n * you MUST ensure WCAG 2.1 AA compliance:\n *\n * - **Accessible Names**: All interactive elements need an accessible name via\n *   `aria-label`, `aria-labelledby`, or visible text content\n * - **Semantic HTML**: Prefer semantic elements (`button`, `a`, `nav`) over\n *   generic containers (`div`, `span`) with ARIA roles when possible\n * - **Focus Indicators**: Ensure focus indicators meet WCAG 2.4.7 (3:1 contrast)\n * - **Keyboard Support**: Interactive elements must be keyboard accessible\n *\n * @typeParam C - The HTML element type to render (e.g., 'button', 'div', 'a')\n *\n * @param {C} [as='div'] - The HTML element type to render. Defaults to 'div'.\n * @param {React.CSSProperties} [styles] - Inline styles to apply. Overrides defaultStyles.\n * @param {string} [classes] - CSS class names to apply to the element.\n * @param {React.CSSProperties} [defaultStyles] - Base styles that can be overridden by styles prop.\n * @param {React.ReactNode} [children] - Child elements to render inside the component.\n * @param {PolymorphicRef<C>} [ref] - Forwarded ref with proper typing for the element type.\n * @param {boolean} [renderStyles] - Reserved for future use. Currently has no effect.\n *\n * @returns {React.ReactElement} A React element of the specified type with merged props.\n *\n * @example\n * // Basic usage - renders as div\n * <UI>Hello World</UI>\n *\n * @example\n * // Polymorphic rendering - renders as button with type-safe props\n * <UI as=\"button\" onClick={handleClick} disabled>\n *   Click me\n * </UI>\n *\n * @example\n * // ✅ GOOD: Accessible button with aria-label for icon-only button\n * <UI as=\"button\" aria-label=\"Close dialog\" onClick={handleClose}>\n *   <CloseIcon />\n * </UI>\n *\n * @example\n * // ✅ GOOD: Accessible link with descriptive text\n * <UI as=\"a\" href=\"/products\">\n *   View all products\n * </UI>\n *\n * @example\n * // ✅ GOOD: Interactive element with proper role and keyboard support\n * <UI\n *   as=\"div\"\n *   role=\"button\"\n *   tabIndex={0}\n *   aria-label=\"Toggle menu\"\n *   onClick={handleToggle}\n *   onKeyDown={(e) => e.key === 'Enter' && handleToggle()}\n * >\n *   Menu\n * </UI>\n *\n * @example\n * // ❌ BAD: Button without accessible name (screen readers can't identify it)\n * <UI as=\"button\" onClick={handleClose}>\n *   <CloseIcon />\n * </UI>\n *\n * @example\n * // ❌ BAD: Non-semantic div with click handler (not keyboard accessible)\n * <UI as=\"div\" onClick={handleClick}>\n *   Click me\n * </UI>\n *\n * @example\n * // ✅ GOOD: Custom focus indicator with WCAG 2.4.7 compliant contrast\n * <UI\n *   as=\"button\"\n *   styles={{\n *     outline: '2px solid transparent',\n *     outlineOffset: '2px',\n *   }}\n *   classes=\"focus:outline-blue-500\"\n * >\n *   Accessible Button\n * </UI>\n *\n * @example\n * // Style merging - defaultStyles provide base, styles override\n * <UI\n *   as=\"span\"\n *   defaultStyles={{ padding: '0.5rem', color: 'blue' }}\n *   styles={{ color: 'red' }}\n * >\n *   Red text with padding\n * </UI>\n *\n * @example\n * // Ref forwarding for focus management\n * const buttonRef = useRef<HTMLButtonElement>(null);\n * useEffect(() => {\n *   // Programmatically focus for keyboard navigation\n *   buttonRef.current?.focus();\n * }, []);\n * <UI as=\"button\" ref={buttonRef}>Auto-focused Button</UI>\n *\n * @example\n * // Building accessible higher-level components with TypeScript\n * interface AccessibleButtonProps extends React.ComponentPropsWithoutRef<'button'> {\n *   variant?: 'primary' | 'secondary';\n *   // Require either aria-label or children for accessibility\n *   'aria-label'?: string;\n *   children?: React.ReactNode;\n * }\n *\n * const AccessibleButton = React.forwardRef<HTMLButtonElement, AccessibleButtonProps>(\n *   ({ variant = 'primary', ...props }, ref) => {\n *     // Runtime check: ensure accessible name is provided\n *     if (!props['aria-label'] && !props.children) {\n *       console.warn('AccessibleButton requires either aria-label or children');\n *     }\n *\n *     return (\n *       <UI\n *         as=\"button\"\n *         ref={ref}\n *         defaultStyles={{\n *           padding: '0.5rem 1rem',\n *           borderRadius: '0.25rem',\n *           backgroundColor: variant === 'primary' ? '#007bff' : '#6c757d',\n *         }}\n *         {...props}\n *       />\n *     );\n *   }\n * );\n */\nconst UI: UIComponent = React.forwardRef(\n  <C extends React.ElementType>(\n    { as, styles, classes, children, defaultStyles, ...props }: UIProps<C>,\n    ref?: PolymorphicRef<C>\n  ) => {\n    const Component = as ?? \"div\";\n\n    const styleObj: React.CSSProperties = { ...defaultStyles, ...styles };\n\n    return (\n      <Component ref={ref} style={styleObj} className={classes} {...props}>\n        {children}\n      </Component>\n    );\n  }\n);\n\nexport default UI;\nUI.displayName = \"UI\";\n"]}

package/libs/chunk-F5EYMVQM.js

@@ -0,0 +1,10 @@
+import { a as a$2 } from './chunk-6SAHIYCZ.js';
+import { a } from './chunk-BFK62VX5.js';
+import { a as a$1 } from './chunk-75QHTLFO.js';
+import f from 'react';
+
+var c=f.forwardRef(({type:a$3="text",name:b,value:y,defaultValue:I,placeholder:h,id:e,styles:v,classes:D,isDisabled:P,disabled:g,readOnly:n,required:s=!1,validationState:i="none",errorMessage:x,hintText:E,onChange:L,onBlur:M,onFocus:N,onKeyDown:o,onEnter:l,maxLength:$,minLength:F,pattern:H,autoComplete:R,autoFocus:T=!1,inputMode:w,...A},B)=>{let S=a(g,P),{disabledProps:p,handlers:j}=a$1(S,{handlers:{onChange:L,onBlur:M,onKeyDown:r=>{r.key==="Enter"&&l&&l(r),o&&o(r);}},className:D}),k=i==="invalid",t=[];x&&e&&t.push(`${e}-error`),E&&e&&t.push(`${e}-hint`);let C=t.length>0?t.join(" "):void 0,K=h||(s?`* ${a$3} input`:`${a$3} input`);return f.createElement(a$2,{as:"input",ref:B,id:e,type:a$3,name:b,value:y,defaultValue:I,placeholder:K,className:p.className,styles:v,readOnly:n,required:s,maxLength:$,minLength:F,pattern:H,autoComplete:R,autoFocus:T,inputMode:w,...j,onFocus:N,"aria-disabled":p["aria-disabled"],"aria-readonly":n,"aria-required":s,"aria-invalid":k,"aria-describedby":C,"data-validation":i,...A})});c.displayName="Input";var J=c;
+
+export { c as a, J as b };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-F5EYMVQM.js.map

package/libs/chunk-F5EYMVQM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/inputs.tsx"],"names":["React","Input","type","name","value","defaultValue","placeholder","id","styles","classes","isDisabled","disabled","readOnly","required","validationState","errorMessage","hintText","onChange","onBlur","onFocus","onKeyDown","onEnter","maxLength","minLength","pattern","autoComplete","autoFocus","inputMode","props","ref","isInputDisabled","resolveDisabledState","disabledProps","handlers","useDisabledState","e","isInvalid","describedByIds","ariaDescribedBy","accessiblePlaceholder","fp_default","inputs_default"],"mappings":"wHAAA,OAAOA,MAAW,QAoDX,IAAMC,EAAQD,EAAM,WACzB,CACE,CACE,KAAAE,EAAO,OACP,KAAAC,EACA,MAAAC,EACA,aAAAC,EACA,YAAAC,EACA,GAAAC,EACA,OAAAC,EACA,QAAAC,EACA,WAAAC,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EAAW,GACX,gBAAAC,EAAkB,OAClB,aAAAC,EACA,SAAAC,EACA,SAAAC,EACA,OAAAC,EACA,QAAAC,EACA,UAAAC,EACA,QAAAC,EACA,UAAAC,EACA,UAAAC,EACA,QAAAC,EACA,aAAAC,EACA,UAAAC,EAAY,GACZ,UAAAC,EACA,GAAGC,CACL,EACAC,IACG,CAEH,IAAMC,EAAkBC,EAAqBpB,EAAUD,CAAU,EAG3D,CAAE,cAAAsB,EAAe,SAAAC,CAAS,EAAIC,EAClCJ,EACA,CACE,SAAU,CACR,SAAAb,EACA,OAAAC,EACA,UAAYiB,GAA6C,CAEnDA,EAAE,MAAQ,SAAWd,GACvBA,EAAQc,CAAC,EAGPf,GACFA,EAAUe,CAAC,CAEf,CAGF,EAEA,UAAW1B,CACb,CACF,EAGM2B,EAAYtB,IAAoB,UAGhCuB,EAA2B,CAAC,EAC9BtB,GAAgBR,GAClB8B,EAAe,KAAK,GAAG9B,CAAE,QAAQ,EAE/BS,GAAYT,GACd8B,EAAe,KAAK,GAAG9B,CAAE,OAAO,EAElC,IAAM+B,EACJD,EAAe,OAAS,EAAIA,EAAe,KAAK,GAAG,EAAI,OAGnDE,EACJjC,IAAgBO,EAAW,KAAKX,CAAI,SAAW,GAAGA,CAAI,UAExD,OACEF,EAAA,cAACwC,EAAA,CACC,GAAG,QACH,IAAKX,EACL,GAAItB,EACJ,KAAML,EACN,KAAMC,EACN,MAAOC,EACP,aAAcC,EACd,YAAakC,EACb,UAAWP,EAAc,UACzB,OAAQxB,EACR,SAAUI,EACV,SAAUC,EACV,UAAWS,EACX,UAAWC,EACX,QAASC,EACT,aAAcC,EACd,UAAWC,EACX,UAAWC,EAEV,GAAGM,EACJ,QAASd,EAET,gBAAea,EAAc,eAAe,EAC5C,gBAAepB,EACf,gBAAeC,EACf,eAAcuB,EACd,mBAAkBE,EAElB,kBAAiBxB,EAChB,GAAGc,EACN,CAEJ,CACF,EAEA3B,EAAM,YAAc,QACpB,IAAOwC,EAAQxC","sourcesContent":["import React from \"react\";\nimport FP from \"../fp\";\nimport type { InputProps } from \"./form.types\";\nimport { useDisabledState } from \"../../hooks/use-disabled-state\";\nimport { resolveDisabledState } from \"../../utils/accessibility\";\n\nexport type { InputProps } from \"./form.types\";\n\n/**\n * Input component - Accessible text input with validation support\n *\n * A flexible input component that supports various input types, validation states,\n * and proper ARIA attributes for accessibility. Integrates seamlessly with the\n * Field component for complete form control composition.\n *\n * @component\n * @example\n * // Basic text input\n * <Input\n *   id=\"username\"\n *   name=\"username\"\n *   placeholder=\"Enter username\"\n *   required\n * />\n *\n * @example\n * // Input with error state\n * <Input\n *   id=\"email\"\n *   type=\"email\"\n *   validationState=\"invalid\"\n *   errorMessage=\"Please enter a valid email\"\n *   aria-describedby=\"email-error\"\n * />\n *\n * @example\n * // Controlled input with validation\n * <Input\n *   id=\"password\"\n *   type=\"password\"\n *   value={password}\n *   onChange={(e) => setPassword(e.target.value)}\n *   minLength={8}\n *   required\n * />\n *\n * @param {InputProps} props - Component props\n * @returns {JSX.Element} Input element with proper accessibility attributes\n *\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/error-identification.html|WCAG 3.3.1 Error Identification}\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html|WCAG 4.1.2 Name, Role, Value}\n */\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      type = \"text\",\n      name,\n      value,\n      defaultValue,\n      placeholder,\n      id,\n      styles,\n      classes,\n      isDisabled, // Legacy support\n      disabled,\n      readOnly,\n      required = false,\n      validationState = \"none\",\n      errorMessage,\n      hintText,\n      onChange,\n      onBlur,\n      onFocus,\n      onKeyDown,\n      onEnter,\n      maxLength,\n      minLength,\n      pattern,\n      autoComplete,\n      autoFocus = false,\n      inputMode,\n      ...props\n    },\n    ref\n  ) => {\n    // Support both `disabled` and `isDisabled` props (legacy compatibility)\n    const isInputDisabled = resolveDisabledState(disabled, isDisabled);\n\n    // Use the disabled state hook with enhanced API for automatic className merging\n    const { disabledProps, handlers } = useDisabledState<HTMLInputElement>(\n      isInputDisabled,\n      {\n        handlers: {\n          onChange,\n          onBlur,\n          onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => {\n            // Handle Enter key press for accessibility\n            if (e.key === \"Enter\" && onEnter) {\n              onEnter(e);\n            }\n            // Always call consumer's onKeyDown if provided\n            if (onKeyDown) {\n              onKeyDown(e);\n            }\n          },\n          // Note: onFocus is NOT wrapped to allow focus on disabled inputs\n          // This is handled automatically by useDisabledState\n        },\n        // Automatic className merging - hook combines disabled class with user classes\n        className: classes,\n      }\n    );\n\n    // Determine aria-invalid based on validation state\n    const isInvalid = validationState === \"invalid\";\n\n    // Generate describedby IDs for error and hint text\n    const describedByIds: string[] = [];\n    if (errorMessage && id) {\n      describedByIds.push(`${id}-error`);\n    }\n    if (hintText && id) {\n      describedByIds.push(`${id}-hint`);\n    }\n    const ariaDescribedBy =\n      describedByIds.length > 0 ? describedByIds.join(\" \") : undefined;\n\n    // Generate accessible placeholder if not provided\n    const accessiblePlaceholder =\n      placeholder || (required ? `* ${type} input` : `${type} input`);\n\n    return (\n      <FP\n        as=\"input\"\n        ref={ref}\n        id={id}\n        type={type}\n        name={name}\n        value={value}\n        defaultValue={defaultValue}\n        placeholder={accessiblePlaceholder}\n        className={disabledProps.className}\n        styles={styles}\n        readOnly={readOnly}\n        required={required}\n        maxLength={maxLength}\n        minLength={minLength}\n        pattern={pattern}\n        autoComplete={autoComplete}\n        autoFocus={autoFocus}\n        inputMode={inputMode}\n        // Event handlers (wrapped by useDisabledState)\n        {...handlers}\n        onFocus={onFocus}\n        // ARIA attributes\n        aria-disabled={disabledProps[\"aria-disabled\"]}\n        aria-readonly={readOnly}\n        aria-required={required}\n        aria-invalid={isInvalid}\n        aria-describedby={ariaDescribedBy}\n        // Data attributes for styling\n        data-validation={validationState}\n        {...props}\n      />\n    );\n  }\n);\n\nInput.displayName = \"Input\";\nexport default Input;\n"]}

package/libs/chunk-FVROL3V5.js

@@ -0,0 +1,9 @@
+import { c } from './chunk-IEB64SWY.js';
+import { a } from './chunk-HHLNOC5T.js';
+import t from 'react';
+
+var i=t.forwardRef(({isBlock:e,children:s,...o},r)=>t.createElement(c,{type:"ul",...o,"data-list":e?"unstyled block":"unstyled",ref:r},s));i.displayName="NavList";var m=t.forwardRef(({id:e,styles:s,classes:o,children:r,...N},v)=>t.createElement(c.ListItem,{type:"li",id:e,classes:o,styles:s,ref:v,...N},r));m.displayName="NavItem";var n=t.forwardRef(({children:e,...s},o)=>t.createElement(a,{as:"nav",...s,ref:o},e));n.displayName="Nav";var f=Object.assign(n,{List:i,Item:m}),y=f;
+
+export { i as a, m as b, n as c, y as d };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-FVROL3V5.js.map

package/libs/chunk-FVROL3V5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/nav/nav.tsx"],"names":["React","NavList","isBlock","children","props","ref","list_default","NavItem","id","styles","classes","Nav","ui_default","NavWithSubComponents","nav_default"],"mappings":"gFAEA,OAAOA,MAAW,QAkEX,IAAMC,EAAUD,EAAM,WAG3B,CAAC,CAAE,QAAAE,EAAS,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAEhCL,EAAA,cAACM,EAAA,CACC,KAAK,KACJ,GAAGF,EACJ,YAAWF,EAAU,iBAAmB,WACxC,IAAKG,GAEJF,CACH,CAEH,EAEDF,EAAQ,YAAc,UAsEf,IAAMM,EAAUP,EAAM,WAG3B,CAAC,CAAE,GAAAQ,EAAI,OAAAC,EAAQ,QAAAC,EAAS,SAAAP,EAAU,GAAGC,CAAM,EAAGC,IAE5CL,EAAA,cAACM,EAAK,SAAL,CACC,KAAK,KACL,GAAIE,EACJ,QAASE,EACT,OAAQD,EACR,IAAKJ,EACJ,GAAGD,GAEHD,CACH,CAEH,EAEDI,EAAQ,YAAc,UA+Hf,IAAMI,EAAMX,EAAM,WACvB,CAAC,CAAE,SAAAG,EAAU,GAAGC,CAAM,EAAGC,IAErBL,EAAA,cAACY,EAAA,CAAG,GAAG,MAAO,GAAGR,EAAO,IAAKC,GAC1BF,CACH,CAGN,EAEAQ,EAAI,YAAc,MAYlB,IAAME,EAAuB,OAAO,OAAOF,EAAK,CAC9C,KAAMV,EACN,KAAMM,CACR,CAAC,EAEMO,EAAQD","sourcesContent":["import UI from \"../ui\";\nimport List from \"../list/list\";\nimport React from \"react\";\nimport type { NavProps, NavListProps, NavItemProps } from \"./nav.types\";\n\n// Re-export types for external use\nexport type { NavProps, NavListProps, NavItemProps };\n\n/**\n * NavList - A navigation-specific list component for grouping navigation items.\n *\n * Extends the List component with navigation-specific layout options through\n * the `isBlock` prop. Automatically renders as an unstyled list to maintain\n * clean navigation aesthetics.\n *\n * ## Key Features:\n * - **Flexible Layout**: Supports both horizontal (inline) and vertical (block) layouts\n * - **Semantic HTML**: Uses `<ul>` element for proper document structure\n * - **Unstyled by Default**: Removes default list markers for clean navigation\n * - **Accessible**: Works naturally with screen readers\n *\n * ## Accessibility:\n * - ✅ Uses semantic `<ul>` element\n * - ✅ Screen readers announce as \"list\" with item count\n * - ✅ Supports `aria-label` for multiple lists\n * - ✅ Keyboard navigation works naturally with focusable children\n *\n * ## Layout Options:\n * - **Inline (default)**: Horizontal navigation bars, top menus\n * - **Block**: Vertical sidebars, mobile menus, footer navigation\n *\n * @example\n * ```tsx\n * // Horizontal navigation (default)\n * <NavList>\n *   <NavItem><Link href=\"/\">Home</Link></NavItem>\n *   <NavItem><Link href=\"/about\">About</Link></NavItem>\n * </NavList>\n * ```\n *\n * @example\n * ```tsx\n * // Vertical sidebar navigation\n * <NavList isBlock>\n *   <NavItem><Link href=\"/dashboard\">Dashboard</Link></NavItem>\n *   <NavItem><Link href=\"/settings\">Settings</Link></NavItem>\n * </NavList>\n * ```\n *\n * @example\n * ```tsx\n * // Multiple lists with labels\n * <Nav>\n *   <NavList aria-label=\"Primary navigation\">\n *     <NavItem><Link href=\"/\">Home</Link></NavItem>\n *   </NavList>\n *   <NavList aria-label=\"User menu\">\n *     <NavItem><Link href=\"/profile\">Profile</Link></NavItem>\n *   </NavList>\n * </Nav>\n * ```\n *\n * @param {NavListProps} props - Component props\n * @param {boolean} [props.isBlock=false] - Display items vertically (block layout)\n * @param {React.ReactNode} props.children - Navigation items (typically NavItem components)\n * @param {string} [props.aria-label] - Accessible label for the list\n * @returns {React.ReactElement} A navigation list component\n */\nexport const NavList = React.forwardRef<\n  HTMLUListElement,\n  NavListProps\n>(({ isBlock, children, ...props }, ref) => {\n  return (\n    <List\n      type=\"ul\"\n      {...props}\n      data-list={isBlock ? \"unstyled block\" : \"unstyled\"}\n      ref={ref}\n    >\n      {children}\n    </List>\n  );\n});\n\nNavList.displayName = \"NavList\";\n\n/**\n * NavItem - An individual navigation link container (list item).\n *\n * Wraps navigation content (typically Link components) in a semantic list item\n * element with consistent styling and accessibility support.\n *\n * ## Key Features:\n * - **Semantic HTML**: Uses `<li>` element for proper list structure\n * - **Flexible Content**: Accepts any React content (links, buttons, text)\n * - **Customizable**: Supports custom styles and CSS classes\n * - **Ref Forwarding**: Enables direct DOM access for advanced use cases\n *\n * ## Accessibility:\n * - ✅ Uses semantic `<li>` element\n * - ✅ Works with screen readers out of the box\n * - ✅ Supports keyboard navigation naturally\n * - ✅ Ref forwarding for programmatic focus if needed\n *\n * ## Best Practices:\n * - Always wrap with NavList/Nav for proper semantics\n * - Use `aria-current=\"page\"` on the link inside to indicate current page\n * - Ensure link text is descriptive and meaningful\n * - Maintain sufficient color contrast (WCAG 2.1: 4.5:1 for normal text)\n *\n * @example\n * ```tsx\n * // Basic navigation item\n * <NavItem>\n *   <Link href=\"/about\">About Us</Link>\n * </NavItem>\n * ```\n *\n * @example\n * ```tsx\n * // Current page with aria-current\n * <NavItem>\n *   <Link href=\"/about\" aria-current=\"page\">\n *     About Us\n *   </Link>\n * </NavItem>\n * ```\n *\n * @example\n * ```tsx\n * // Custom styling\n * <NavItem\n *   classes=\"nav-item-featured\"\n *   styles={{ fontWeight: 'bold' }}\n * >\n *   <Link href=\"/special\">Special Offer</Link>\n * </NavItem>\n * ```\n *\n * @example\n * ```tsx\n * // With icon\n * <NavItem>\n *   <Link href=\"/settings\">\n *     <SettingsIcon aria-hidden=\"true\" />\n *     Settings\n *   </Link>\n * </NavItem>\n * ```\n *\n * @param {NavItemProps} props - Component props\n * @param {React.Ref} ref - Forwarded ref for DOM access\n * @returns {React.ReactElement} A navigation item component\n */\nexport const NavItem = React.forwardRef<\n  HTMLLIElement,\n  NavItemProps\n>(({ id, styles, classes, children, ...props }, ref) => {\n  return (\n    <List.ListItem\n      type=\"li\"\n      id={id}\n      classes={classes}\n      styles={styles}\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </List.ListItem>\n  );\n});\n\nNavItem.displayName = \"NavItem\";\n\n/**\n * Nav - A semantic navigation container component for site navigation.\n *\n * The Nav component provides a semantic `<nav>` landmark element that helps\n * users navigate your site. It meets WCAG 2.1 AA accessibility standards and\n * follows modern React best practices with full TypeScript support.\n *\n * ## Key Features:\n * - **Semantic HTML**: Uses native `<nav>` element for accessibility\n * - **Landmark Role**: Automatically provides navigation landmark for screen readers\n * - **Flexible Layout**: Supports multiple navigation patterns through CSS custom properties\n * - **Compound Components**: Use Nav.List and Nav.Item for consistent structure\n * - **Type-Safe**: Full TypeScript support with comprehensive JSDoc documentation\n * - **Ref Forwarding**: Direct DOM access for scroll positioning and focus management\n *\n * ## Accessibility (WCAG 2.1 AA Compliant):\n * - ✅ **4.1.2 Name, Role, Value**: Uses semantic `<nav>` element (landmark role)\n * - ✅ **2.4.1 Bypass Blocks**: Navigation landmark helps skip repeated content\n * - ✅ **1.3.1 Info and Relationships**: Proper list structure with ul > li\n * - ✅ **2.4.8 Location**: Supports `aria-label` for multiple navigation regions\n * - ✅ **4.1.3 Status Messages**: Use `aria-current=\"page\"` on links for current page\n *\n * ## When to Use aria-label:\n * - ✅ **Required**: When you have multiple `<nav>` elements on the same page\n * - ✅ **Recommended**: To distinguish navigation purpose (e.g., \"Footer navigation\")\n * - ❌ **Not needed**: For single navigation regions\n *\n * ## CSS Custom Properties:\n * - `--nav-dsp`: Display mode (default: flex)\n * - `--nav-direction`: Flex direction (default: row)\n * - `--nav-bg`: Background color\n * - `--nav-h`: Minimum height\n * - `--nav-px`: Horizontal padding (default: 1rem)\n * - `--nav-gap`: Gap between items\n * - `--nav-fs`: Font size (default: 0.9rem)\n *\n * @example\n * ```tsx\n * // Simple navigation\n * <Nav>\n *   <Nav.List>\n *     <Nav.Item><Link href=\"/\">Home</Link></Nav.Item>\n *     <Nav.Item><Link href=\"/about\">About</Link></Nav.Item>\n *   </Nav.List>\n * </Nav>\n * ```\n *\n * @example\n * ```tsx\n * // Multiple navigation regions (requires aria-label)\n * <Nav aria-label=\"Main navigation\">\n *   <Nav.List>\n *     <Nav.Item><Link href=\"/\">Home</Link></Nav.Item>\n *   </Nav.List>\n * </Nav>\n *\n * <Nav aria-label=\"Footer navigation\">\n *   <Nav.List>\n *     <Nav.Item><Link href=\"/privacy\">Privacy</Link></Nav.Item>\n *   </Nav.List>\n * </Nav>\n * ```\n *\n * @example\n * ```tsx\n * // Current page indication\n * <Nav aria-label=\"Main navigation\">\n *   <Nav.List>\n *     <Nav.Item>\n *       <Link href=\"/\" aria-current=\"page\">Home</Link>\n *     </Nav.Item>\n *     <Nav.Item>\n *       <Link href=\"/about\">About</Link>\n *     </Nav.Item>\n *   </Nav.List>\n * </Nav>\n * ```\n *\n * @example\n * ```tsx\n * // Vertical sidebar navigation\n * <Nav aria-label=\"Sidebar navigation\">\n *   <Nav.List isBlock>\n *     <Nav.Item><Link href=\"/dashboard\">Dashboard</Link></Nav.Item>\n *     <Nav.Item><Link href=\"/settings\">Settings</Link></Nav.Item>\n *   </Nav.List>\n * </Nav>\n * ```\n *\n * @example\n * ```tsx\n * // Complex navbar with multiple sections\n * <Nav classes=\"navbar\" aria-label=\"Main navigation\">\n *   <Nav.List aria-label=\"Primary menu\">\n *     <Nav.Item><Link href=\"/\">Home</Link></Nav.Item>\n *     <Nav.Item><Link href=\"/products\">Products</Link></Nav.Item>\n *   </Nav.List>\n *   <Nav.List aria-label=\"User menu\">\n *     <Nav.Item><Link href=\"/login\">Login</Link></Nav.Item>\n *     <Nav.Item><Link href=\"/signup\">Sign Up</Link></Nav.Item>\n *   </Nav.List>\n * </Nav>\n * ```\n *\n * @example\n * ```tsx\n * // Custom theming with CSS properties\n * <Nav\n *   aria-label=\"Main navigation\"\n *   styles={{\n *     '--nav-bg': '#1a1a1a',\n *     '--nav-h': '4rem',\n *     '--nav-px': '2rem',\n *   }}\n * >\n *   <Nav.List>\n *     <Nav.Item><Link href=\"/\">Home</Link></Nav.Item>\n *   </Nav.List>\n * </Nav>\n * ```\n *\n * @param {NavProps} props - Component props\n * @param {React.Ref} ref - Forwarded ref for DOM access\n * @returns {React.ReactElement} A navigation element\n */\nexport const Nav = React.forwardRef<HTMLElement, NavProps>(\n  ({ children, ...props }, ref) => {\n    return (\n      <UI as=\"nav\" {...props} ref={ref}>\n        {children}\n      </UI>\n    );\n  }\n);\n\nNav.displayName = \"Nav\";\n\n// Compound component pattern - attach sub-components to Nav\nexport interface NavComponent\n  extends React.ForwardRefExoticComponent<\n    NavProps & React.RefAttributes<HTMLElement>\n  > {\n  List: typeof NavList;\n  Item: typeof NavItem;\n}\n\n// Attach sub-components using Object.assign for better type inference\nconst NavWithSubComponents = Object.assign(Nav, {\n  List: NavList,\n  Item: NavItem,\n});\n\nexport default NavWithSubComponents as NavComponent;\n"]}

package/libs/chunk-GT77BX4L.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var chunkPNWIRCG3_cjs = require('./chunk-PNWIRCG3.cjs');
+var chunkTON2YGMD_cjs = require('./chunk-TON2YGMD.cjs');
+var chunkENTCUJ3A_cjs = require('./chunk-ENTCUJ3A.cjs');
+var D = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var D__default = /*#__PURE__*/_interopDefault(D);
+
+var a=({type:r="button",children:p,styles:i,disabled:l,isDisabled:n,classes:m,onPointerDown:d,onPointerOver:u,onPointerLeave:b,onClick:y,onKeyDown:P,...c})=>{let f=chunkPNWIRCG3_cjs.a(l,n),{disabledProps:t,handlers:B}=chunkTON2YGMD_cjs.a(f,{handlers:{onClick:y,onPointerDown:d,onKeyDown:P},className:m});return D__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"button",type:r,"aria-disabled":t["aria-disabled"],onPointerOver:u,onPointerLeave:b,style:i,className:t.className,...B,...c},p)},x=a;a.displayName="Button";
+
+exports.a = a;
+exports.b = x;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-GT77BX4L.cjs.map

package/libs/chunk-GT77BX4L.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/buttons/button.tsx"],"names":["React","Button","type","children","styles","disabled","isDisabled","classes","onPointerDown","onPointerOver","onPointerLeave","onClick","onKeyDown","props","isActuallyDisabled","resolveDisabledState","disabledProps","handlers","useDisabledState","ui_default","button_default"],"mappings":"2HACA,OAAOA,MAAW,QAmEX,IAAMC,EAAS,CAAC,CACrB,KAAAC,EAAO,SACP,SAAAC,EACA,OAAAC,EACA,SAAAC,EACA,WAAAC,EACA,QAAAC,EACA,cAAAC,EACA,cAAAC,EACA,eAAAC,EACA,QAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAAmB,CAEjB,IAAMC,EAAqBC,EAAqBV,EAAUC,CAAU,EAG9D,CAAE,cAAAU,EAAe,SAAAC,CAAS,EAAIC,EAClCJ,EACA,CACE,SAAU,CACR,QAAAH,EACA,cAAAH,EACA,UAAAI,CACF,EAEA,UAAWL,CAGb,CACF,EAGA,OACEP,EAAA,cAACmB,EAAA,CACC,GAAG,SACH,KAAMjB,EACN,gBAAec,EAAc,eAAe,EAC5C,cAAeP,EACf,eAAgBC,EAChB,MAAON,EACP,UAAWY,EAAc,UACxB,GAAGC,EACH,GAAGJ,GAEHV,CACH,CAEJ,EAEOiB,EAAQnB,EACfA,EAAO,YAAc","sourcesContent":["import UI from '../ui'\nimport React from 'react'\nimport { useDisabledState } from '../../hooks/use-disabled-state'\nimport { resolveDisabledState } from '../../utils/accessibility'\nimport type { DisabledStateProps } from '../../types/shared'\n\nexport type ButtonProps = Partial<React.ComponentProps<typeof UI>> &\n  DisabledStateProps & {\n    /**\n     * The button type\n     * Required - 'button' | 'submit' | 'reset'\n     */\n    type: 'button' | 'submit' | 'reset'\n  }\n\n/**\n * Accessible Button component with WCAG 2.1 Level AA compliant disabled state.\n *\n * **Key Accessibility Features:**\n * - Uses `aria-disabled` pattern instead of native `disabled` attribute\n * - Maintains keyboard focusability when disabled (stays in tab order)\n * - Prevents all interactions when disabled via optimized `useDisabledState` hook\n * - Automatic className merging for seamless styling\n * - Supports both modern `disabled` and legacy `isDisabled` props\n *\n * **Why aria-disabled?**\n * - Elements remain in keyboard tab order (WCAG 2.1.1 - Keyboard)\n * - Screen readers can discover and announce disabled state (WCAG 4.1.2)\n * - Enables tooltips and help text on disabled buttons\n * - Better visual styling control for WCAG AA contrast compliance\n *\n * **Performance:**\n * - Uses optimized `useDisabledState` hook with stable references\n * - Automatic className merging eliminates boilerplate\n * - ~90% reduction in unnecessary re-renders compared to previous implementation\n *\n * @example\n * // Basic usage\n * <Button type=\"button\" onClick={handleClick}>\n *   Click me\n * </Button>\n *\n * @example\n * // Disabled state (prevents all interactions but stays focusable)\n * <Button type=\"button\" disabled={true} onClick={handleClick}>\n *   Cannot click (but can focus for screen readers)\n * </Button>\n *\n * @example\n * // With custom classes (automatic merging with .is-disabled)\n * <Button\n *   type=\"button\"\n *   disabled={true}\n *   classes=\"my-custom-btn\"\n * >\n *   Custom disabled button\n * </Button>\n *\n * @example\n * // Legacy isDisabled prop (still supported)\n * <Button type=\"button\" isDisabled={true} onClick={handleClick}>\n *   Legacy disabled\n * </Button>\n *\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/keyboard WCAG 2.1.1 - Keyboard}\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/name-role-value WCAG 4.1.2 - Name, Role, Value}\n * @see {@link file://./../../hooks/useDisabledState.md useDisabledState Hook Documentation}\n */\nexport const Button = ({\n  type = 'button',\n  children,\n  styles,\n  disabled,\n  isDisabled,\n  classes,\n  onPointerDown,\n  onPointerOver,\n  onPointerLeave,\n  onClick,\n  onKeyDown,\n  ...props\n}: ButtonProps) => {\n  // Resolve disabled state from both props (disabled takes precedence)\n  const isActuallyDisabled = resolveDisabledState(disabled, isDisabled)\n\n  // Use the disabled state hook with enhanced API for automatic className merging\n  const { disabledProps, handlers } = useDisabledState<HTMLButtonElement>(\n    isActuallyDisabled,\n    {\n      handlers: {\n        onClick,\n        onPointerDown,\n        onKeyDown,\n      },\n      // Automatic className merging - hook combines disabled class with user classes\n      className: classes,\n      // Note: onPointerOver and onPointerLeave are intentionally NOT wrapped\n      // to allow hover effects on disabled buttons for visual feedback\n    }\n  )\n\n  /* Returning a button element with accessible disabled state */\n  return (\n    <UI\n      as=\"button\"\n      type={type}\n      aria-disabled={disabledProps['aria-disabled']}\n      onPointerOver={onPointerOver}\n      onPointerLeave={onPointerLeave}\n      style={styles}\n      className={disabledProps.className}\n      {...handlers}\n      {...props}\n    >\n      {children}\n    </UI>\n  )\n}\n\nexport default Button\nButton.displayName = 'Button'\n"]}

package/libs/chunk-GUJSMQ3V.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var chunkENTCUJ3A_cjs = require('./chunk-ENTCUJ3A.cjs');
+var t = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var t__default = /*#__PURE__*/_interopDefault(t);
+
+var n=t__default.default.forwardRef(({type:e="li",id:s,styles:i,children:r,classes:o,...L},m)=>t__default.default.createElement(chunkENTCUJ3A_cjs.a,{id:s,as:e,className:o,style:i,ref:m,...L},r));n.displayName="ListItem";var a=t__default.default.forwardRef(({children:e,classes:s,type:i="ul",variant:r,styles:o,role:L,...m},l)=>t__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:i,"data-variant":r,className:s,style:o,role:L,ref:l,...m},e));a.displayName="List";var f=Object.assign(a,{ListItem:n}),d=f;
+
+exports.a = n;
+exports.b = a;
+exports.c = d;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-GUJSMQ3V.cjs.map