@fpkit/acss 5.0.0 → 6.1.0

package/libs/index.d.cts

@@ -1,8 +1,8 @@
 export { Button, ButtonProps } from './components/button.cjs';
 export { Card, Content as CardContent, Footer as CardFooter, CardProps, Title as CardTitle } from './components/card.cjs';
 import React$1, { ReactNode } from 'react';
-import { I as IconProps } from './icons-df8e744f.js';
-export { a as Icon, b as IconProps } from './icons-df8e744f.js';
+import { I as IconProps } from './icons-48788561.js';
+export { a as Icon, b as IconProps } from './icons-48788561.js';
 export { default as Field, FieldProps } from './components/form/fields.cjs';
 export { default as Input } from './components/form/inputs.cjs';
 import { I as InputProps } from './form.types-d25ebfac.js';
@@ -13,14 +13,14 @@ export { Modal, ModalProps } from './components/modal.cjs';
 export { default as Popover, PopoverProps } from './components/popover/popover.cjs';
 export { RenderTable as TBL, TableProps } from './components/tables/table.cjs';
 export { Dialog } from './components/dialog/dialog.cjs';
-import { U as UI } from './ui-d01b50d4.js';
+import { U as UI } from './ui-993fc2e2.js';
 import { C as ComponentProps$1 } from './component-props-50e69975.js';
 export { Nav, NavComponent, NavItem, NavItemProps, NavList, NavListProps, NavProps } from './components/nav/nav.cjs';
 export { default as Text, TextProps } from './components/text/text.cjs';
-export { b as Heading, H as HeadingLevel, T as Title, a as TitleProps } from './heading-81eef89a.js';
+export { b as Heading, H as HeadingLevel, T as Title, a as TitleProps } from './heading-064675b6.js';
 export { default as Textarea } from './components/form/textarea.cjs';
 export { default as Breadcrumb, BreadcrumbProps, CustomRoute, useBreadcrumbSegments } from './components/breadcrumbs/breadcrumb.cjs';
-export { L as ListItemProps, a as ListProps } from './list.types-d26de310.js';
+export { L as ListItemProps, a as ListProps } from './list.types-bf2c44c1.js';
 
 /**
  * Valid severity levels for alerts.
@@ -205,7 +205,7 @@ declare const Alert: React$1.FC<AlertProps>;
  * />
  * ```
  */
-interface CheckboxProps extends Omit<InputProps, 'type' | 'value' | 'onChange' | 'defaultValue' | 'placeholder'> {
+interface CheckboxProps extends Omit<InputProps, 'type' | 'value' | 'onChange' | 'defaultValue' | 'placeholder' | 'size'> {
     /**
      * Unique identifier for the checkbox input.
      * Required for proper label association via htmlFor attribute.
@@ -222,6 +222,29 @@ interface CheckboxProps extends Omit<InputProps, 'type' | 'value' | 'onChange' |
      * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html|WCAG 3.3.2 Labels or Instructions}
      */
     label: React$1.ReactNode;
+    /**
+     * Predefined size variant for the checkbox.
+     * Maps to standardized size tokens for consistent sizing across the design system.
+     *
+     * Available sizes:
+     * - `xs`: Extra small (0.875rem / 14px) - Compact forms, tight spaces
+     * - `sm`: Small (1rem / 16px) - Dense layouts
+     * - `md`: Medium (1.25rem / 20px) - Default, optimal for most use cases
+     * - `lg`: Large (1.5rem / 24px) - Touch-friendly, prominent CTAs
+     *
+     * For custom sizes beyond these presets, use the `styles` prop:
+     * ```tsx
+     * styles={{ '--checkbox-size': '2rem' }}
+     * ```
+     *
+     * @default 'md'
+     * @example
+     * ```tsx
+     * <Checkbox id="small" label="Small checkbox" size="sm" />
+     * <Checkbox id="large" label="Large checkbox" size="lg" />
+     * ```
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
      * Controlled mode: Current checked state.
      * When provided, component becomes controlled and requires onChange handler.
@@ -278,33 +301,46 @@ interface CheckboxProps extends Omit<InputProps, 'type' | 'value' | 'onChange' |
      */
     inputClasses?: string;
     /**
-     * CSS custom properties for theming.
+     * CSS custom properties for theming and custom sizing.
+     *
+     * Common variables:
+     * - `--checkbox-size`: Custom checkbox dimensions (for sizes beyond xs/sm/md/lg presets)
+     * - `--checkbox-gap`: Space between checkbox and label (default: 0.5rem)
+     * - `--checkbox-border-color`: Border color (default: var(--color-neutral-600))
+     * - `--checkbox-checked-bg`: Background color when checked (default: var(--color-success))
+     * - `--checkbox-radius`: Border radius (default: 0.25rem)
+     * - `--checkbox-focus-ring-color`: Focus ring color (default: var(--color-focus-ring))
+     * - `--checkbox-disabled-opacity`: Opacity for disabled state (default: 0.6)
+     * - `--checkbox-label-fs`: Label font size (default: 1rem)
      *
-     * Available variables:
-     * - --checkbox-gap: Space between checkbox and label (default: 0.5rem)
-     * - --checkbox-disabled-opacity: Opacity for disabled state (default: 0.6)
-     * - --checkbox-disabled-color: Label color when disabled (default: #6b7280)
-     * - --checkbox-label-fs: Label font size (default: 1rem)
-     * - --checkbox-label-lh: Label line height (default: 1.5)
-     * - --color-required: Required indicator color (default: #dc2626)
-     * - --checkbox-focus-ring-color: Focus ring color (default: #2563eb)
-     * - --checkbox-focus-ring-width: Focus ring width (default: 0.125rem)
-     * - --checkbox-focus-ring-offset: Focus ring offset (default: 0.125rem)
-     * - --checkbox-hover-label-color: Label color on hover
-     * - --checkbox-error-label-color: Label color when invalid (default: #dc2626)
-     * - --checkbox-valid-label-color: Label color when valid (default: #16a34a)
+     * For custom sizes beyond the preset variants (xs/sm/md/lg), use `--checkbox-size`:
      *
      * @example
      * ```tsx
+     * // Custom size beyond presets
      * <Checkbox
      *   id="custom"
-     *   label="Custom styled"
+     *   label="Custom sized (2rem)"
      *   styles={{
-     *     '--checkbox-gap': '1rem',
-     *     '--checkbox-focus-ring-color': '#ff0000'
+     *     '--checkbox-size': '2rem',
+     *     '--checkbox-gap': '1rem'
+     *   }}
+     * />
+     *
+     * // Brand theming
+     * <Checkbox
+     *   id="branded"
+     *   label="Brand checkbox"
+     *   size="lg"
+     *   styles={{
+     *     '--checkbox-checked-bg': '#0066cc',
+     *     '--checkbox-focus-ring-color': '#0066cc'
      *   }}
      * />
      * ```
+     *
+     * @see {@link ./CHECKBOX-STYLES.mdx|CHECKBOX-STYLES.mdx} - Complete CSS variable reference
+     * @see {@link ./CHECKBOX.mdx|CHECKBOX.mdx} - Component documentation with examples
      */
     styles?: React$1.CSSProperties;
 }
@@ -316,6 +352,7 @@ interface CheckboxProps extends Omit<InputProps, 'type' | 'value' | 'onChange' |
  * validation, disabled state, and ARIA logic from the base Input component.
  *
  * **Key Features:**
+ * - ✅ Semantic size variants (xs, sm, md, lg) via `size` prop
  * - ✅ Boolean onChange API (`onChange={(checked) => ...}`)
  * - ✅ Automatic label association via htmlFor
  * - ✅ WCAG 2.1 AA compliant (uses aria-disabled pattern)
@@ -363,11 +400,21 @@ interface CheckboxProps extends Omit<InputProps, 'type' | 'value' | 'onChange' |
  *
  * @example
  * ```tsx
+ * // Size variants
+ * <Checkbox id="small" label="Small" size="sm" />
+ * <Checkbox id="large" label="Large" size="lg" />
+ * ```
+ *
+ * @example
+ * ```tsx
  * // Custom styling
  * <Checkbox
  *   id="custom"
- *   label="Large checkbox"
- *   styles={{ '--checkbox-gap': '1rem' }}
+ *   label="Custom sized"
+ *   styles={{
+ *     '--checkbox-size': '2rem',
+ *     '--checkbox-gap': '1rem'
+ *   }}
  * />
  * ```
  *
@@ -375,6 +422,8 @@ interface CheckboxProps extends Omit<InputProps, 'type' | 'value' | 'onChange' |
  * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the input element
  * @returns {JSX.Element} Checkbox wrapper with input and label
  *
+ * @see {@link ./CHECKBOX.mdx|CHECKBOX.mdx} - Complete component documentation
+ * @see {@link ./CHECKBOX-STYLES.mdx|CHECKBOX-STYLES.mdx} - CSS customization guide
  * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html|WCAG 4.1.2 Name, Role, Value}
  * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html|WCAG 2.4.7 Focus Visible}
  * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/error-identification.html|WCAG 3.3.1 Error Identification}

package/libs/index.d.ts

@@ -1,8 +1,8 @@
 export { Button, ButtonProps } from './components/button.js';
 export { Card, Content as CardContent, Footer as CardFooter, CardProps, Title as CardTitle } from './components/card.js';
 import React$1, { ReactNode } from 'react';
-import { I as IconProps } from './icons-df8e744f.js';
-export { a as Icon, b as IconProps } from './icons-df8e744f.js';
+import { I as IconProps } from './icons-48788561.js';
+export { a as Icon, b as IconProps } from './icons-48788561.js';
 export { default as Field, FieldProps } from './components/form/fields.js';
 export { default as Input } from './components/form/inputs.js';
 import { I as InputProps } from './form.types-d25ebfac.js';
@@ -13,14 +13,14 @@ export { Modal, ModalProps } from './components/modal.js';
 export { default as Popover, PopoverProps } from './components/popover/popover.js';
 export { RenderTable as TBL, TableProps } from './components/tables/table.js';
 export { Dialog } from './components/dialog/dialog.js';
-import { U as UI } from './ui-d01b50d4.js';
+import { U as UI } from './ui-993fc2e2.js';
 import { C as ComponentProps$1 } from './component-props-50e69975.js';
 export { Nav, NavComponent, NavItem, NavItemProps, NavList, NavListProps, NavProps } from './components/nav/nav.js';
 export { default as Text, TextProps } from './components/text/text.js';
-export { b as Heading, H as HeadingLevel, T as Title, a as TitleProps } from './heading-81eef89a.js';
+export { b as Heading, H as HeadingLevel, T as Title, a as TitleProps } from './heading-064675b6.js';
 export { default as Textarea } from './components/form/textarea.js';
 export { default as Breadcrumb, BreadcrumbProps, CustomRoute, useBreadcrumbSegments } from './components/breadcrumbs/breadcrumb.js';
-export { L as ListItemProps, a as ListProps } from './list.types-d26de310.js';
+export { L as ListItemProps, a as ListProps } from './list.types-bf2c44c1.js';
 
 /**
  * Valid severity levels for alerts.
@@ -205,7 +205,7 @@ declare const Alert: React$1.FC<AlertProps>;
  * />
  * ```
  */
-interface CheckboxProps extends Omit<InputProps, 'type' | 'value' | 'onChange' | 'defaultValue' | 'placeholder'> {
+interface CheckboxProps extends Omit<InputProps, 'type' | 'value' | 'onChange' | 'defaultValue' | 'placeholder' | 'size'> {
     /**
      * Unique identifier for the checkbox input.
      * Required for proper label association via htmlFor attribute.
@@ -222,6 +222,29 @@ interface CheckboxProps extends Omit<InputProps, 'type' | 'value' | 'onChange' |
      * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html|WCAG 3.3.2 Labels or Instructions}
      */
     label: React$1.ReactNode;
+    /**
+     * Predefined size variant for the checkbox.
+     * Maps to standardized size tokens for consistent sizing across the design system.
+     *
+     * Available sizes:
+     * - `xs`: Extra small (0.875rem / 14px) - Compact forms, tight spaces
+     * - `sm`: Small (1rem / 16px) - Dense layouts
+     * - `md`: Medium (1.25rem / 20px) - Default, optimal for most use cases
+     * - `lg`: Large (1.5rem / 24px) - Touch-friendly, prominent CTAs
+     *
+     * For custom sizes beyond these presets, use the `styles` prop:
+     * ```tsx
+     * styles={{ '--checkbox-size': '2rem' }}
+     * ```
+     *
+     * @default 'md'
+     * @example
+     * ```tsx
+     * <Checkbox id="small" label="Small checkbox" size="sm" />
+     * <Checkbox id="large" label="Large checkbox" size="lg" />
+     * ```
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     /**
      * Controlled mode: Current checked state.
      * When provided, component becomes controlled and requires onChange handler.
@@ -278,33 +301,46 @@ interface CheckboxProps extends Omit<InputProps, 'type' | 'value' | 'onChange' |
      */
     inputClasses?: string;
     /**
-     * CSS custom properties for theming.
+     * CSS custom properties for theming and custom sizing.
+     *
+     * Common variables:
+     * - `--checkbox-size`: Custom checkbox dimensions (for sizes beyond xs/sm/md/lg presets)
+     * - `--checkbox-gap`: Space between checkbox and label (default: 0.5rem)
+     * - `--checkbox-border-color`: Border color (default: var(--color-neutral-600))
+     * - `--checkbox-checked-bg`: Background color when checked (default: var(--color-success))
+     * - `--checkbox-radius`: Border radius (default: 0.25rem)
+     * - `--checkbox-focus-ring-color`: Focus ring color (default: var(--color-focus-ring))
+     * - `--checkbox-disabled-opacity`: Opacity for disabled state (default: 0.6)
+     * - `--checkbox-label-fs`: Label font size (default: 1rem)
      *
-     * Available variables:
-     * - --checkbox-gap: Space between checkbox and label (default: 0.5rem)
-     * - --checkbox-disabled-opacity: Opacity for disabled state (default: 0.6)
-     * - --checkbox-disabled-color: Label color when disabled (default: #6b7280)
-     * - --checkbox-label-fs: Label font size (default: 1rem)
-     * - --checkbox-label-lh: Label line height (default: 1.5)
-     * - --color-required: Required indicator color (default: #dc2626)
-     * - --checkbox-focus-ring-color: Focus ring color (default: #2563eb)
-     * - --checkbox-focus-ring-width: Focus ring width (default: 0.125rem)
-     * - --checkbox-focus-ring-offset: Focus ring offset (default: 0.125rem)
-     * - --checkbox-hover-label-color: Label color on hover
-     * - --checkbox-error-label-color: Label color when invalid (default: #dc2626)
-     * - --checkbox-valid-label-color: Label color when valid (default: #16a34a)
+     * For custom sizes beyond the preset variants (xs/sm/md/lg), use `--checkbox-size`:
      *
      * @example
      * ```tsx
+     * // Custom size beyond presets
      * <Checkbox
      *   id="custom"
-     *   label="Custom styled"
+     *   label="Custom sized (2rem)"
      *   styles={{
-     *     '--checkbox-gap': '1rem',
-     *     '--checkbox-focus-ring-color': '#ff0000'
+     *     '--checkbox-size': '2rem',
+     *     '--checkbox-gap': '1rem'
+     *   }}
+     * />
+     *
+     * // Brand theming
+     * <Checkbox
+     *   id="branded"
+     *   label="Brand checkbox"
+     *   size="lg"
+     *   styles={{
+     *     '--checkbox-checked-bg': '#0066cc',
+     *     '--checkbox-focus-ring-color': '#0066cc'
      *   }}
      * />
      * ```
+     *
+     * @see {@link ./CHECKBOX-STYLES.mdx|CHECKBOX-STYLES.mdx} - Complete CSS variable reference
+     * @see {@link ./CHECKBOX.mdx|CHECKBOX.mdx} - Component documentation with examples
      */
     styles?: React$1.CSSProperties;
 }
@@ -316,6 +352,7 @@ interface CheckboxProps extends Omit<InputProps, 'type' | 'value' | 'onChange' |
  * validation, disabled state, and ARIA logic from the base Input component.
  *
  * **Key Features:**
+ * - ✅ Semantic size variants (xs, sm, md, lg) via `size` prop
  * - ✅ Boolean onChange API (`onChange={(checked) => ...}`)
  * - ✅ Automatic label association via htmlFor
  * - ✅ WCAG 2.1 AA compliant (uses aria-disabled pattern)
@@ -363,11 +400,21 @@ interface CheckboxProps extends Omit<InputProps, 'type' | 'value' | 'onChange' |
  *
  * @example
  * ```tsx
+ * // Size variants
+ * <Checkbox id="small" label="Small" size="sm" />
+ * <Checkbox id="large" label="Large" size="lg" />
+ * ```
+ *
+ * @example
+ * ```tsx
  * // Custom styling
  * <Checkbox
  *   id="custom"
- *   label="Large checkbox"
- *   styles={{ '--checkbox-gap': '1rem' }}
+ *   label="Custom sized"
+ *   styles={{
+ *     '--checkbox-size': '2rem',
+ *     '--checkbox-gap': '1rem'
+ *   }}
  * />
  * ```
  *
@@ -375,6 +422,8 @@ interface CheckboxProps extends Omit<InputProps, 'type' | 'value' | 'onChange' |
  * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the input element
  * @returns {JSX.Element} Checkbox wrapper with input and label
  *
+ * @see {@link ./CHECKBOX.mdx|CHECKBOX.mdx} - Complete component documentation
+ * @see {@link ./CHECKBOX-STYLES.mdx|CHECKBOX-STYLES.mdx} - CSS customization guide
  * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html|WCAG 4.1.2 Name, Role, Value}
  * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html|WCAG 2.4.7 Focus Visible}
  * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/error-identification.html|WCAG 3.3.1 Error Identification}

package/libs/index.js

@@ -1,32 +1,32 @@
-import { b as b$2 } from './chunk-3XJC4XUG.js';
-export { a as Textarea } from './chunk-3XJC4XUG.js';
-export { a as Field } from './chunk-AWZLSWDO.js';
+import { b as b$2 } from './chunk-6ADHES7B.js';
+export { a as Textarea } from './chunk-6ADHES7B.js';
+export { a as Field } from './chunk-MAG46S3P.js';
 export { a as Caption, i as TBL, f as Table, c as Tbody, e as Td, b as Thead, d as Tr } from './chunk-FMIM3332.js';
-export { a as Dialog } from './chunk-G3TFKMWB.js';
-export { c as Nav, b as NavItem, a as NavList } from './chunk-2JCDEC32.js';
-export { c as List } from './chunk-U5VA34SU.js';
+export { a as Dialog } from './chunk-H6A2CUWA.js';
+export { c as Nav, b as NavItem, a as NavList } from './chunk-3ENBUQIB.js';
+export { c as List } from './chunk-RQSMWB3J.js';
 export { b as Popover } from './chunk-4I5MF54P.js';
-export { a as Text } from './chunk-MBWI67UT.js';
-export { b as Heading, a as Title } from './chunk-Q7OAQLUT.js';
-export { b as Breadcrumb, a as useBreadcrumbSegments } from './chunk-DIJBIOFE.js';
+export { a as Text } from './chunk-SPESKPUA.js';
+export { b as Heading, a as Title } from './chunk-AQAI6COH.js';
+export { b as Breadcrumb, a as useBreadcrumbSegments } from './chunk-2ZJV6KQ3.js';
 import './chunk-GCGKYLDG.js';
-import { b as b$1 } from './chunk-M7JLT62Q.js';
-export { a as Icon } from './chunk-M7JLT62Q.js';
-export { d as Card, b as CardContent, c as CardFooter, a as CardTitle } from './chunk-KAR3HDXK.js';
-export { a as Modal } from './chunk-PMWL5XZ4.js';
-import { b } from './chunk-TF3GQKOY.js';
-export { a as Button } from './chunk-TF3GQKOY.js';
+import { b as b$1 } from './chunk-4F6SI5V5.js';
+export { a as Icon } from './chunk-4F6SI5V5.js';
+export { d as Card, b as CardContent, c as CardFooter, a as CardTitle } from './chunk-MJJKNHVH.js';
+export { a as Modal } from './chunk-SQ44OCJ2.js';
+import { b } from './chunk-X2RDXWH5.js';
+export { a as Button } from './chunk-X2RDXWH5.js';
 import { a as a$1 } from './chunk-F5EYMVQM.js';
 export { a as Input } from './chunk-F5EYMVQM.js';
 export { a as FP } from './chunk-6SAHIYCZ.js';
 import './chunk-BFK62VX5.js';
 import './chunk-75QHTLFO.js';
-export { d as Link, d as To } from './chunk-IBUTNPTQ.js';
-import { a } from './chunk-DDSXKOUB.js';
-export { a as UI } from './chunk-DDSXKOUB.js';
+export { d as Link, d as To } from './chunk-M5ES7OWP.js';
+import { a } from './chunk-4KJP3L35.js';
+export { a as UI } from './chunk-4KJP3L35.js';
 import C, { useCallback, useMemo, useState, useEffect } from 'react';
 
-var _e={default:"",info:"Information: ",success:"Success: ",warning:"Warning: ",error:"Error: "},O=({severity:e})=>{let t=_e[e];return t?C.createElement("span",{className:"sr-only"},t):null};var qe=(e,t)=>({info:C.createElement(b$1.InfoSolid,{...t}),success:C.createElement(b$1.SuccessSolid,{...t}),warning:C.createElement(b$1.WarnSolid,{...t}),error:C.createElement(b$1.AlertSolid,{...t}),default:C.createElement(b$1.AlertSquareSolid,{...t})})[e],_=({severity:e,iconProps:t,hideIcon:o})=>{if(o)return null;let s=qe(e,t);return C.createElement(a,{"aria-hidden":"true",className:"alert-icon"},s)};var q=({title:e,titleLevel:t})=>{if(!e)return null;let o=t?`h${t}`:"strong";return C.createElement(a,{as:o,className:"alert-title"},e)};var W=({children:e,contentType:t})=>t==="node"?C.createElement(C.Fragment,null,e):C.createElement(a,{as:"p"},e);var K=({actions:e})=>e?C.createElement(a,{as:"div",className:"alert-actions"},e):null;var oe=C.memo(({onDismiss:e,iconSize:t=16})=>C.createElement(b,{type:"button",onClick:e,"aria-label":"Close alert",className:"alert-dismiss","data-btn":"icon sm"},C.createElement(b$1,null,C.createElement(b$1.Close,{size:t})))),se=oe;oe.displayName="DismissButton";var Ke={default:"polite",info:"polite",success:"polite",warning:"polite",error:"assertive"},R=C.forwardRef(({severity:e,variant:t,isVisible:o,dismissible:s,onDismiss:r,onInteractionStart:i,onInteractionEnd:a$1,autoFocus:l,title:c,titleLevel:y,children:u,contentType:f,actions:S,hideIcon:g,iconProps:v,...m},x)=>C.createElement(a,{as:"div",ref:x,role:"alert","aria-live":Ke[e],"aria-atomic":"true",className:`alert alert-${e}`,"data-alert":e,"data-visible":o,"data-variant":t,tabIndex:l?-1:void 0,onMouseEnter:i,onMouseLeave:a$1,onFocus:i,onBlur:a$1,...m},C.createElement(O,{severity:e}),C.createElement(_,{severity:e,iconProps:v,hideIcon:g}),C.createElement(a,{as:"div",classes:"alert-message"},C.createElement(q,{title:c,titleLevel:y}),C.createElement(W,{contentType:f},u),C.createElement(K,{actions:S})),s&&C.createElement(se,{onDismiss:r})));R.displayName="AlertView";var Xe=({open:e,onDismiss:t,dismissible:o,autoHideDuration:s,pauseOnHover:r,autoFocus:i,alertRef:a})=>{let[l,c]=C.useState(e),[y,u]=C.useState(e),[f,S]=C.useState(!1),g=C.useCallback(()=>{c(!1),setTimeout(()=>{u(!1),t?.();},300);},[t]);C.useEffect(()=>{e?(u(!0),c(!0)):c(!1);},[e]),C.useEffect(()=>{if(!s||!l||f)return;let x=setTimeout(()=>{g();},s);return ()=>clearTimeout(x)},[s,l,f,g]),C.useEffect(()=>{if(!o||!l)return;let x=h=>{h.key==="Escape"&&g();};return document.addEventListener("keydown",x),()=>document.removeEventListener("keydown",x)},[o,l,g]),C.useEffect(()=>{i&&l&&a.current&&a.current.focus();},[i,l,a]);let v=C.useCallback(()=>{r&&s&&S(!0);},[r,s]),m=C.useCallback(()=>{r&&s&&S(!1);},[r,s]);return {isVisible:l,shouldRender:y,handleDismiss:g,handleInteractionStart:v,handleInteractionEnd:m}},re=({open:e,severity:t="default",children:o,title:s,dismissible:r=!1,onDismiss:i,iconSize:a,iconProps:l,hideIcon:c,autoHideDuration:y,pauseOnHover:u=!0,titleLevel:f=3,actions:S,autoFocus:g=!1,variant:v="outlined",contentType:m="text",...x})=>{let h=C.useRef(null),{isVisible:p,shouldRender:d,handleDismiss:k,handleInteractionStart:I,handleInteractionEnd:U}=Xe({open:e,onDismiss:i,dismissible:r,autoHideDuration:y,pauseOnHover:u,autoFocus:g,alertRef:h});if(!d)return null;let A={size:a||16,...l};return C.createElement(R,{ref:h,severity:t,variant:v,isVisible:p,dismissible:r,onDismiss:k,onInteractionStart:I,onInteractionEnd:U,autoFocus:g,title:s,titleLevel:f,contentType:m,actions:S,hideIcon:c,iconProps:A,...x},o)};re.displayName="Alert";var ne=C.forwardRef(({id:e,label:t,checked:o,defaultChecked:s,value:r="on",onChange:i,classes:a,inputClasses:l,styles:c,name:y,disabled:u,required:f,validationState:S,errorMessage:g,hintText:v,onBlur:m,onFocus:x,autoFocus:h,...p},d)=>{let k=C.useCallback(ke=>{i?.(ke.target.checked);},[i]),I=o!==void 0,U=I?{checked:o}:{},A=!I&&s!==void 0?{defaultChecked:s}:{},j=C.useRef(I);return C.useEffect(()=>{process.env.NODE_ENV==="development"&&(j.current!==I&&console.warn(`Checkbox with id="${e}" is changing from ${j.current?"controlled":"uncontrolled"} to ${I?"controlled":"uncontrolled"}. This is likely a bug. Decide between using "checked" (controlled) or "defaultChecked" (uncontrolled) and stick with it.`),j.current=I);},[I,e]),C.createElement("div",{className:a,style:c},C.createElement(a$1,{ref:d,type:"checkbox",id:e,name:y,value:r,...U,...A,classes:l||"checkbox-input",disabled:u,required:f,validationState:S,errorMessage:g,hintText:v,onChange:k,onBlur:m,onFocus:x,autoFocus:h,...p}),C.createElement("label",{htmlFor:e,className:"checkbox-label"},t,f&&C.createElement("span",{className:"checkbox-required","aria-label":"required"}," *")))});ne.displayName="Checkbox";var ie=({src:e="//",alt:t,width:o=480,height:s,styles:r,loading:i="lazy",placeholder:a$1,fetchpriority:l="low",decoding:c="auto",srcSet:y,sizes:u,onError:f,onLoad:S,...g})=>{let v=useMemo(()=>{let p=typeof o=="number"?o:480,d=typeof s=="number"?s:Math.round(p*.75),k=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${p} ${d}">
+var qe={default:"",info:"Information: ",success:"Success: ",warning:"Warning: ",error:"Error: "},O=({severity:e})=>{let t=qe[e];return t?C.createElement("span",{className:"sr-only"},t):null};var Je=(e,t)=>({info:C.createElement(b$1.InfoSolid,{...t}),success:C.createElement(b$1.SuccessSolid,{...t}),warning:C.createElement(b$1.WarnSolid,{...t}),error:C.createElement(b$1.AlertSolid,{...t}),default:C.createElement(b$1.AlertSquareSolid,{...t})})[e],_=({severity:e,iconProps:t,hideIcon:o})=>{if(o)return null;let s=Je(e,t);return C.createElement(a,{"aria-hidden":"true",className:"alert-icon"},s)};var q=({title:e,titleLevel:t})=>{if(!e)return null;let o=t?`h${t}`:"strong";return C.createElement(a,{as:o,className:"alert-title"},e)};var W=({children:e,contentType:t})=>t==="node"?C.createElement(C.Fragment,null,e):C.createElement(a,{as:"p"},e);var K=({actions:e})=>e?C.createElement(a,{as:"div",className:"alert-actions"},e):null;var oe=C.memo(({onDismiss:e,iconSize:t=16})=>C.createElement(b,{type:"button",onClick:e,"aria-label":"Close alert",className:"alert-dismiss","data-btn":"icon sm"},C.createElement(b$1,null,C.createElement(b$1.Close,{size:t})))),se=oe;oe.displayName="DismissButton";var Xe={default:"polite",info:"polite",success:"polite",warning:"polite",error:"assertive"},R=C.forwardRef(({severity:e,variant:t,isVisible:o,dismissible:s,onDismiss:r,onInteractionStart:i,onInteractionEnd:a$1,autoFocus:l,title:c,titleLevel:y,children:u,contentType:f,actions:S,hideIcon:g,iconProps:v,...m},x)=>C.createElement(a,{as:"div",ref:x,role:"alert","aria-live":Xe[e],"aria-atomic":"true",className:`alert alert-${e}`,"data-alert":e,"data-visible":o,"data-variant":t,tabIndex:l?-1:void 0,onMouseEnter:i,onMouseLeave:a$1,onFocus:i,onBlur:a$1,...m},C.createElement(O,{severity:e}),C.createElement(_,{severity:e,iconProps:v,hideIcon:g}),C.createElement(a,{as:"div",classes:"alert-message"},C.createElement(q,{title:c,titleLevel:y}),C.createElement(W,{contentType:f},u),C.createElement(K,{actions:S})),s&&C.createElement(se,{onDismiss:r})));R.displayName="AlertView";var Qe=({open:e,onDismiss:t,dismissible:o,autoHideDuration:s,pauseOnHover:r,autoFocus:i,alertRef:a})=>{let[l,c]=C.useState(e),[y,u]=C.useState(e),[f,S]=C.useState(!1),g=C.useCallback(()=>{c(!1),setTimeout(()=>{u(!1),t?.();},300);},[t]);C.useEffect(()=>{e?(u(!0),c(!0)):c(!1);},[e]),C.useEffect(()=>{if(!s||!l||f)return;let x=setTimeout(()=>{g();},s);return ()=>clearTimeout(x)},[s,l,f,g]),C.useEffect(()=>{if(!o||!l)return;let x=h=>{h.key==="Escape"&&g();};return document.addEventListener("keydown",x),()=>document.removeEventListener("keydown",x)},[o,l,g]),C.useEffect(()=>{i&&l&&a.current&&a.current.focus();},[i,l,a]);let v=C.useCallback(()=>{r&&s&&S(!0);},[r,s]),m=C.useCallback(()=>{r&&s&&S(!1);},[r,s]);return {isVisible:l,shouldRender:y,handleDismiss:g,handleInteractionStart:v,handleInteractionEnd:m}},re=({open:e,severity:t="default",children:o,title:s,dismissible:r=!1,onDismiss:i,iconSize:a,iconProps:l,hideIcon:c,autoHideDuration:y,pauseOnHover:u=!0,titleLevel:f=3,actions:S,autoFocus:g=!1,variant:v="outlined",contentType:m="text",...x})=>{let h=C.useRef(null),{isVisible:p,shouldRender:d,handleDismiss:E,handleInteractionStart:P,handleInteractionEnd:T}=Qe({open:e,onDismiss:i,dismissible:r,autoHideDuration:y,pauseOnHover:u,autoFocus:g,alertRef:h});if(!d)return null;let A={size:a||16,...l};return C.createElement(R,{ref:h,severity:t,variant:v,isVisible:p,dismissible:r,onDismiss:E,onInteractionStart:P,onInteractionEnd:T,autoFocus:g,title:s,titleLevel:f,contentType:m,actions:S,hideIcon:c,iconProps:A,...x},o)};re.displayName="Alert";var ne=C.forwardRef(({id:e,label:t,checked:o,defaultChecked:s,value:r="on",onChange:i,classes:a,inputClasses:l,styles:c,size:y,name:u,disabled:f,required:S,validationState:g,errorMessage:v,hintText:m,onBlur:x,onFocus:h,autoFocus:p,...d},E)=>{let P=C.useCallback(Ee=>{i?.(Ee.target.checked);},[i]),T=o!==void 0,A=T?{checked:o}:{},ke=!T&&s!==void 0?{defaultChecked:s}:{},j=C.useRef(T);return C.useEffect(()=>{process.env.NODE_ENV==="development"&&(j.current!==T&&console.warn(`Checkbox with id="${e}" is changing from ${j.current?"controlled":"uncontrolled"} to ${T?"controlled":"uncontrolled"}. This is likely a bug. Decide between using "checked" (controlled) or "defaultChecked" (uncontrolled) and stick with it.`),j.current=T);},[T,e]),C.createElement("div",{className:a,style:c,"data-checkbox-size":y},C.createElement(a$1,{ref:E,type:"checkbox",id:e,name:u,value:r,...A,...ke,classes:l||"checkbox-input",disabled:f,required:S,validationState:g,errorMessage:v,hintText:m,onChange:P,onBlur:x,onFocus:h,autoFocus:p,...d}),C.createElement("label",{htmlFor:e,className:"checkbox-label"},t,S&&C.createElement("span",{className:"checkbox-required","aria-label":"required"}," *")))});ne.displayName="Checkbox";var ie=({src:e="//",alt:t,width:o=480,height:s,styles:r,loading:i="lazy",placeholder:a$1,fetchpriority:l="low",decoding:c="auto",srcSet:y,sizes:u,onError:f,onLoad:S,...g})=>{let v=useMemo(()=>{let p=typeof o=="number"?o:480,d=typeof s=="number"?s:Math.round(p*.75),E=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${p} ${d}">
       <defs>
         <linearGradient id="grad-${p}-${d}" x1="0%" y1="0%" x2="100%" y2="100%">
           <stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
@@ -38,8 +38,8 @@ var _e={default:"",info:"Information: ",success:"Success: ",warning:"Warning: ",
       <circle cx="${p*.15}" cy="${d*.2}" r="${Math.min(p,d)*.08}" fill="rgba(255,255,255,0.2)"/>
       <path d="M0,${d*.75} Q${p*.25},${d*.65} ${p*.5},${d*.75} T${p},${d*.75} L${p},${d} L0,${d} Z" fill="rgba(0,0,0,0.15)"/>
       <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="system-ui,-apple-system,sans-serif" font-size="${Math.max(16,Math.min(p,d)*.05)}" font-weight="500" fill="rgba(255,255,255,0.9)">${p}\xD7${d}</text>
-    </svg>`;return `data:image/svg+xml,${encodeURIComponent(k)}`},[o,s]),m=a$1??v;return C.createElement(a,{as:"img",src:e,alt:t,width:o,height:s||"auto",loading:i,style:r,srcSet:y,sizes:u,onError:p=>{f&&f(p),p.defaultPrevented||p.currentTarget.src!==m&&(p.currentTarget.src=m);},onLoad:p=>{S?.(p);},decoding:c,...g,...l&&{fetchpriority:l}})};ie.displayName="Img";var ae=e=>{let[t,o]=useState([]),[s,r]=useState(e),[i,a]=useState(!1),[l,c]=useState(!1);return useEffect(()=>{let m=()=>{let x=window.speechSynthesis.getVoices();o(x);let h=x.find(p=>p.name==="Google US English");if(h)r(h);else {let p=x.find(d=>d.lang.startsWith("en-"));p&&r(p);}};return m(),window.speechSynthesis.onvoiceschanged=m,()=>{window.speechSynthesis.onvoiceschanged=null;}},[]),{speak:(m,x={},h)=>{let p=new SpeechSynthesisUtterance(m);p.lang=x.lang??"en-US",p.pitch=x.pitch??1,p.rate=x.rate??1,p.voice=s??x.voice??null,p.onend=()=>{a(!1),c(!1),h&&h();},"speechSynthesis"in window?(window.speechSynthesis.speak(p),a(!0),c(!1)):a(!1);},pause:()=>{i&&!l&&(window.speechSynthesis.pause(),c(!0));},resume:()=>{i&&l&&(window.speechSynthesis.resume(),c(!1));},cancel:()=>{i&&(window.speechSynthesis.cancel(),a(!1),c(!1));},isSpeaking:i,isPaused:l,availableVoices:t,changeVoice:m=>{r(m);},currentVoice:s,getAvailableLanguages:()=>[...new Set(t.map(m=>m.lang))]}};var et=({children:e,onClick:t})=>C.createElement(a,{as:"button",type:"button",className:"tts-border","data-btn":"sm text pill",onClick:t},e),M=C.memo(et),X=({label:e,isSpeaking:t,isPaused:o,onSpeak:s,onPause:r,onResume:i,onCancel:a$1})=>C.createElement(a,{as:"div","data-tts":!0},e&&C.createElement("p",null,e),!t&&C.createElement(M,{"aria-label":"Speak",onClick:s},C.createElement(b$1.PlaySolid,{size:16})),t&&!o&&C.createElement(M,{"aria-label":"Pause",onClick:r},C.createElement(b$1.PauseSolid,{size:16})),o&&C.createElement(M,{"aria-label":"Resume",onClick:i},C.createElement(b$1.ResumeSolid,{size:16})),C.createElement(M,{"aria-label":"Stop",onClick:a$1},C.createElement(b$1.StopSolid,{size:16})));X.displayName="TextToSpeechControls";X.TTSButton=M;var le=X;var pe=({initialText:e="",showTextInput:t=!1,voice:o,pitch:s=1,rate:r=1,label:i,onEnd:a})=>{let{speak:l,pause:c,resume:y,cancel:u,isSpeaking:f,isPaused:S}=ae(),[g,v]=useState(e);useEffect(()=>{v(e);},[e]);let m=()=>{g.trim()!==""&&l(g,{voice:o,pitch:s,rate:r},h);},x=p=>{v(p.target.value);},h=()=>{a&&a();};return C.createElement(C.Fragment,null,t&&C.createElement(b$2,{value:g,onChange:x}),C.createElement(le,{label:i,isSpeaking:f,isPaused:S,onSpeak:m,onPause:c,onResume:y,onCancel:u}))};pe.displayName="TextToSpeechComponent";var E=e=>C.createElement(C.Fragment,null,e),st=({id:e,children:t,headerBackground:o,styles:s,classes:r,...i})=>C.createElement(a,{as:"header",id:e,styles:s,className:r,...i},o,C.createElement(a,{as:"section"},t)),rt=({id:e,children:t,styles:o,classes:s,...r})=>C.createElement(a,{as:"main",id:e,styles:o,...r,className:s},t),nt=({id:e,classes:t,children:o,styles:s={},...r})=>C.createElement(a,{as:"footer",id:e,className:t,styles:s,...r},C.createElement(a,{as:"section"},o||"Copyright \xA9 2022")),it=({id:e,children:t,styles:o={},classes:s,...r})=>C.createElement(a,{as:"aside",id:e,styles:o,className:s,...r},C.createElement(a,{as:"section"},t)),at=({id:e,children:t,styles:o,classes:s,...r})=>C.createElement(a,{as:"section",id:e,styles:o,className:s,...r},t),lt=({id:e,children:t,styles:o,classes:s,...r})=>C.createElement(a,{as:"article",id:e,styles:o,className:s,...r},t);E.displayName="Landmarks";E.Header=st;E.Main=rt;E.Footer=nt;E.Aside=it;E.Section=at;E.Article=lt;var fe=C.forwardRef(({padding:e,paddingInline:t,paddingBlock:o,margin:s,marginInline:r,marginBlock:i,width:a$1,maxWidth:l,radius:c,as:y="div",className:u,classes:f,children:S,...g},v)=>{let m=[];e&&m.push(`box-padding-${e}`),t&&m.push(`box-padding-inline-${t}`),o&&m.push(`box-padding-block-${o}`),s&&m.push(`box-margin-${s}`),r&&m.push(`box-margin-inline-${r}`),i&&m.push(`box-margin-block-${i}`),a$1&&m.push(`box-width-${a$1}`),l&&m.push(`box-max-width-${l}`),c&&m.push(`box-radius-${c}`);let x=[...m,u,f].filter(Boolean).join(" ");return C.createElement(a,{as:y,ref:v,classes:x||void 0,...g},S)});fe.displayName="Box";var de=C.forwardRef(({gap:e,direction:t="vertical",align:o,justify:s,wrap:r,as:i="div",className:a$1,classes:l,children:c,...y},u)=>{let f=["stack"];t==="horizontal"?f.push("stack-horizontal"):f.push("stack-vertical"),e&&f.push(`stack-gap-${e}`),o&&f.push(`stack-align-${o}`),s&&f.push(`stack-justify-${s}`),r&&f.push(`stack-${r}`);let S=[...f,a$1,l].filter(Boolean).join(" ");return C.createElement(a,{as:i,ref:u,classes:S,...y},c)});de.displayName="Stack";var xe=C.forwardRef(({gap:e,justify:t,align:o,as:s="div",className:r,classes:i,children:a$1,...l},c)=>{let y=["cluster"];e&&y.push(`cluster-gap-${e}`),t&&y.push(`cluster-justify-${t}`),o&&y.push(`cluster-align-${o}`);let u=[...y,r,i].filter(Boolean).join(" ");return C.createElement(a,{as:s,ref:c,classes:u,...l},a$1)});xe.displayName="Cluster";var ye=C.forwardRef(({columns:e,auto:t,minColumnWidth:o,gap:s,gapX:r,gapY:i,justifyItems:a$1,alignItems:l,as:c="div",className:y,classes:u,children:f,style:S,styles:g,...v},m)=>{let x=["grid"];e&&x.push(`grid-cols-${e}`),t&&x.push(`grid-auto-${t}`),s&&x.push(`grid-gap-${s}`),r&&x.push(`grid-gap-x-${r}`),i&&x.push(`grid-gap-y-${i}`),a$1&&x.push(`grid-justify-items-${a$1}`),l&&x.push(`grid-align-items-${l}`);let h=[...x,y,u].filter(Boolean).join(" "),p={...S||{},...g||{}};return t&&o&&(p.gridTemplateColumns=`repeat(auto-${t}, minmax(${o}, 1fr))`),C.createElement(a,{as:c,ref:m,classes:h,style:Object.keys(p).length>0?p:void 0,...v},f)});ye.displayName="Grid";var Q=C.forwardRef(({span:e,rowSpan:t,as:o="div",className:s,classes:r,children:i,...a$1},l)=>{let c=[];e&&c.push(`grid-col-span-${e}`),t&&c.push(`grid-row-span-${t}`);let y=[...c,s,r].filter(Boolean).join(" ");return C.createElement(a,{as:o,ref:l,classes:y,...a$1},i)});Q.displayName="GridItem";var he=ye;he.Item=Q;var pt=he;var Se=C.forwardRef(({gap:e,justify:t,align:o,wrap:s,alwaysProportional:r=!1,as:i="div",className:a$1,classes:l,children:c,...y},u)=>{process.env.NODE_ENV==="development"&&r&&console.warn('[fpkit] Row: alwaysProportional is deprecated and will be removed in v5.0.0. Use responsive column utilities instead: className="col-sm-6 col-md-4"');let f=["col-row"];e&&f.push(`col-row-gap-${e}`),t&&f.push(`col-row-justify-${t}`),o&&f.push(`col-row-align-${o}`),s&&s!=="wrap"&&f.push(`col-row-${s}`),r&&f.push("col-row-proportional");let S=[...f,a$1,l].filter(Boolean).join(" ");return C.createElement(a,{as:i,ref:u,classes:S,...y},c)});Se.displayName="Row";var Ie=C.forwardRef(({span:e,offset:t,order:o,auto:s=!1,as:r="div",className:i,classes:a$1,children:l,...c},y)=>{let u=[];s?u.push("col-auto"):e==="flex"?u.push("col-flex"):e&&u.push(`col-${e}`),t!==void 0&&u.push(`col-offset-${t}`),o!==void 0&&u.push(`col-order-${o}`);let f=[...u,i,a$1].filter(Boolean).join(" ");return C.createElement(a,{as:r,ref:y,classes:f,...c},l)});Ie.displayName="Col";var B=(e,t="")=>{let o=[];if(e.direction){let s={row:"flex-row","row-reverse":"flex-row-reverse",column:"flex-col","column-reverse":"flex-col-reverse"};o.push(`${t}${s[e.direction]}`);}if(e.wrap){let s={wrap:"flex-wrap",nowrap:"flex-nowrap","wrap-reverse":"flex-wrap-reverse"};o.push(`${t}${s[e.wrap]}`);}if(e.gap&&o.push(`${t}gap-${e.gap}`),e.rowGap&&o.push(`${t}row-gap-${e.rowGap}`),e.colGap&&o.push(`${t}col-gap-${e.colGap}`),e.justify){let s={start:"justify-start",end:"justify-end",center:"justify-center",between:"justify-between",around:"justify-around",evenly:"justify-evenly"};o.push(`${t}${s[e.justify]}`);}if(e.align){let s={start:"items-start",end:"items-end",center:"items-center",baseline:"items-baseline",stretch:"items-stretch"};o.push(`${t}${s[e.align]}`);}if(e.alignContent){let s={start:"content-start",end:"content-end",center:"content-center",between:"content-between",around:"content-around",evenly:"content-evenly",stretch:"content-stretch"};o.push(`${t}${s[e.alignContent]}`);}return o},Pe=C.forwardRef((e,t)=>{let{variant:o,inline:s=!1,as:r="div",className:i="",styles:a$1,children:l,sm:c,md:y,lg:u,xl:f,direction:S,wrap:g,gap:v,rowGap:m,colGap:x,justify:h,align:p,alignContent:d,...k}=e,I=[];if(I.push(s?"flex-inline":"flex"),o){let A={center:"flex-center",between:"flex-between",around:"flex-around",stack:"flex-stack",spread:"flex-spread"};I.push(A[o]);}I.push(...B({direction:S,wrap:g,gap:v,rowGap:m,colGap:x,justify:h,align:p,alignContent:d})),c&&I.push(...B(c,"sm:")),y&&I.push(...B(y,"md:")),u&&I.push(...B(u,"lg:")),f&&I.push(...B(f,"xl:"));let U=[...I,i].filter(Boolean).join(" ");return C.createElement(a,{as:r,ref:t,classes:U,styles:a$1,...k},l)});Pe.displayName="Flex";var Ce=C.forwardRef((e,t)=>{let{grow:o,shrink:s,basis:r,flex:i,alignSelf:a$1,order:l,as:c="div",className:y="",styles:u,children:f,sm:S,md:g,lg:v,xl:m,...x}=e,h=[];if(i){let d={1:"flex-1",auto:"flex-auto",initial:"flex-initial",none:"flex-none"};h.push(d[i]);}if(o!==void 0&&h.push(`flex-grow-${o}`),s!==void 0&&h.push(`flex-shrink-${s}`),r){let d={auto:"flex-basis-auto",0:"flex-basis-0",full:"flex-basis-full"};h.push(d[r]);}if(a$1){let d={auto:"self-auto",start:"self-start",end:"self-end",center:"self-center",baseline:"self-baseline",stretch:"self-stretch"};h.push(d[a$1]);}if(l){let d={first:"order-first",last:"order-last",none:"order-none"};h.push(d[l]);}if(S?.flex){let d={1:"flex-1",auto:"flex-auto",none:"flex-none"};h.push(`sm:${d[S.flex]}`);}if(g?.flex){let d={1:"flex-1",auto:"flex-auto",none:"flex-none"};h.push(`md:${d[g.flex]}`);}if(v?.flex){let d={1:"flex-1",auto:"flex-auto",none:"flex-none"};h.push(`lg:${d[v.flex]}`);}if(m?.flex){let d={1:"flex-1",auto:"flex-auto",none:"flex-none"};h.push(`xl:${d[m.flex]}`);}let p=[...h,y].filter(Boolean).join(" ");return C.createElement(a,{as:c,ref:t,classes:p,styles:u,...x},f)});Ce.displayName="Flex.Item";var be=C.forwardRef((e,t)=>{let{as:o="div",className:s="",styles:r,...i}=e,a$1=["flex-1",s].filter(Boolean).join(" ");return C.createElement(a,{as:o,ref:t,classes:a$1,styles:r,...i})});be.displayName="Flex.Spacer";var Y=Pe;Y.Item=Ce;Y.Spacer=be;var ct=Y;var we=({id:e,styles:t,classes:o,children:s,variant:r,...i})=>C.createElement(a,{as:"sup",id:e,styles:t,className:o,"data-badge":r||void 0,role:"status",...i},C.createElement(a,{as:"span"},s));we.displayName="Badge";var mt=({elm:e="span",role:t="note",variant:o,children:s,styles:r,...i})=>C.createElement(a,{as:e,role:t,"data-tag":o||void 0,styles:r,...i},s);mt.displayName="Tag";var dt=C.forwardRef(({summary:e,icon:t,styles:o,classes:s,ariaLabel:r,name:i,open:a$1,onPointerDown:l,onToggle:c,children:y,...u},f)=>{let S=useCallback(v=>{l?.(v);},[l]),g=useCallback(v=>{c?.(v);},[c]);return C.createElement(a,{as:"details",styles:o,classes:s,onToggle:g,ref:f,open:a$1,"aria-label":r,name:i,...u},C.createElement(a,{as:"summary",onPointerDown:S},t,e),C.createElement(a,{as:"section"},y))});dt.displayName="Details";
+    </svg>`;return `data:image/svg+xml,${encodeURIComponent(E)}`},[o,s]),m=a$1??v;return C.createElement(a,{as:"img",src:e,alt:t,width:o,height:s||"auto",loading:i,style:r,srcSet:y,sizes:u,onError:p=>{f&&f(p),p.defaultPrevented||p.currentTarget.src!==m&&(p.currentTarget.src=m);},onLoad:p=>{S?.(p);},decoding:c,...g,...l&&{fetchpriority:l}})};ie.displayName="Img";var ae=e=>{let[t,o]=useState([]),[s,r]=useState(e),[i,a]=useState(!1),[l,c]=useState(!1);return useEffect(()=>{let m=()=>{let x=window.speechSynthesis.getVoices();o(x);let h=x.find(p=>p.name==="Google US English");if(h)r(h);else {let p=x.find(d=>d.lang.startsWith("en-"));p&&r(p);}};return m(),window.speechSynthesis.onvoiceschanged=m,()=>{window.speechSynthesis.onvoiceschanged=null;}},[]),{speak:(m,x={},h)=>{let p=new SpeechSynthesisUtterance(m);p.lang=x.lang??"en-US",p.pitch=x.pitch??1,p.rate=x.rate??1,p.voice=s??x.voice??null,p.onend=()=>{a(!1),c(!1),h&&h();},"speechSynthesis"in window?(window.speechSynthesis.speak(p),a(!0),c(!1)):a(!1);},pause:()=>{i&&!l&&(window.speechSynthesis.pause(),c(!0));},resume:()=>{i&&l&&(window.speechSynthesis.resume(),c(!1));},cancel:()=>{i&&(window.speechSynthesis.cancel(),a(!1),c(!1));},isSpeaking:i,isPaused:l,availableVoices:t,changeVoice:m=>{r(m);},currentVoice:s,getAvailableLanguages:()=>[...new Set(t.map(m=>m.lang))]}};var tt=({children:e,onClick:t})=>C.createElement(a,{as:"button",type:"button",className:"tts-border","data-btn":"sm text pill",onClick:t},e),M=C.memo(tt),X=({label:e,isSpeaking:t,isPaused:o,onSpeak:s,onPause:r,onResume:i,onCancel:a$1})=>C.createElement(a,{as:"div","data-tts":!0},e&&C.createElement("p",null,e),!t&&C.createElement(M,{"aria-label":"Speak",onClick:s},C.createElement(b$1.PlaySolid,{size:16})),t&&!o&&C.createElement(M,{"aria-label":"Pause",onClick:r},C.createElement(b$1.PauseSolid,{size:16})),o&&C.createElement(M,{"aria-label":"Resume",onClick:i},C.createElement(b$1.ResumeSolid,{size:16})),C.createElement(M,{"aria-label":"Stop",onClick:a$1},C.createElement(b$1.StopSolid,{size:16})));X.displayName="TextToSpeechControls";X.TTSButton=M;var le=X;var pe=({initialText:e="",showTextInput:t=!1,voice:o,pitch:s=1,rate:r=1,label:i,onEnd:a})=>{let{speak:l,pause:c,resume:y,cancel:u,isSpeaking:f,isPaused:S}=ae(),[g,v]=useState(e);useEffect(()=>{v(e);},[e]);let m=()=>{g.trim()!==""&&l(g,{voice:o,pitch:s,rate:r},h);},x=p=>{v(p.target.value);},h=()=>{a&&a();};return C.createElement(C.Fragment,null,t&&C.createElement(b$2,{value:g,onChange:x}),C.createElement(le,{label:i,isSpeaking:f,isPaused:S,onSpeak:m,onPause:c,onResume:y,onCancel:u}))};pe.displayName="TextToSpeechComponent";var F=e=>C.createElement(C.Fragment,null,e),rt=({id:e,children:t,headerBackground:o,styles:s,classes:r,...i})=>C.createElement(a,{as:"header",id:e,styles:s,className:r,...i},o,C.createElement(a,{as:"section"},t)),nt=({id:e,children:t,styles:o,classes:s,...r})=>C.createElement(a,{as:"main",id:e,styles:o,...r,className:s},t),it=({id:e,classes:t,children:o,styles:s={},...r})=>C.createElement(a,{as:"footer",id:e,className:t,styles:s,...r},C.createElement(a,{as:"section"},o||"Copyright \xA9 2022")),at=({id:e,children:t,styles:o={},classes:s,...r})=>C.createElement(a,{as:"aside",id:e,styles:o,className:s,...r},C.createElement(a,{as:"section"},t)),lt=({id:e,children:t,styles:o,classes:s,...r})=>C.createElement(a,{as:"section",id:e,styles:o,className:s,...r},t),pt=({id:e,children:t,styles:o,classes:s,...r})=>C.createElement(a,{as:"article",id:e,styles:o,className:s,...r},t);F.displayName="Landmarks";F.Header=rt;F.Main=nt;F.Footer=it;F.Aside=at;F.Section=lt;F.Article=pt;var fe=C.forwardRef(({padding:e,paddingInline:t,paddingBlock:o,margin:s,marginInline:r,marginBlock:i,width:a$1,maxWidth:l,radius:c,as:y="div",className:u,classes:f,children:S,...g},v)=>{let m=[];e&&m.push(`box-padding-${e}`),t&&m.push(`box-padding-inline-${t}`),o&&m.push(`box-padding-block-${o}`),s&&m.push(`box-margin-${s}`),r&&m.push(`box-margin-inline-${r}`),i&&m.push(`box-margin-block-${i}`),a$1&&m.push(`box-width-${a$1}`),l&&m.push(`box-max-width-${l}`),c&&m.push(`box-radius-${c}`);let x=[...m,u,f].filter(Boolean).join(" ");return C.createElement(a,{as:y,ref:v,classes:x||void 0,...g},S)});fe.displayName="Box";var de=C.forwardRef(({gap:e,direction:t="vertical",align:o,justify:s,wrap:r,as:i="div",className:a$1,classes:l,children:c,...y},u)=>{let f=["stack"];t==="horizontal"?f.push("stack-horizontal"):f.push("stack-vertical"),e&&f.push(`stack-gap-${e}`),o&&f.push(`stack-align-${o}`),s&&f.push(`stack-justify-${s}`),r&&f.push(`stack-${r}`);let S=[...f,a$1,l].filter(Boolean).join(" ");return C.createElement(a,{as:i,ref:u,classes:S,...y},c)});de.displayName="Stack";var xe=C.forwardRef(({gap:e,justify:t,align:o,as:s="div",className:r,classes:i,children:a$1,...l},c)=>{let y=["cluster"];e&&y.push(`cluster-gap-${e}`),t&&y.push(`cluster-justify-${t}`),o&&y.push(`cluster-align-${o}`);let u=[...y,r,i].filter(Boolean).join(" ");return C.createElement(a,{as:s,ref:c,classes:u,...l},a$1)});xe.displayName="Cluster";var ye=C.forwardRef(({columns:e,auto:t,minColumnWidth:o,gap:s,gapX:r,gapY:i,justifyItems:a$1,alignItems:l,as:c="div",className:y,classes:u,children:f,style:S,styles:g,...v},m)=>{let x=["grid"];e&&x.push(`grid-cols-${e}`),t&&x.push(`grid-auto-${t}`),s&&x.push(`grid-gap-${s}`),r&&x.push(`grid-gap-x-${r}`),i&&x.push(`grid-gap-y-${i}`),a$1&&x.push(`grid-justify-items-${a$1}`),l&&x.push(`grid-align-items-${l}`);let h=[...x,y,u].filter(Boolean).join(" "),p={...S||{},...g||{}};return t&&o&&(p.gridTemplateColumns=`repeat(auto-${t}, minmax(${o}, 1fr))`),C.createElement(a,{as:c,ref:m,classes:h,style:Object.keys(p).length>0?p:void 0,...v},f)});ye.displayName="Grid";var Q=C.forwardRef(({span:e,rowSpan:t,as:o="div",className:s,classes:r,children:i,...a$1},l)=>{let c=[];e&&c.push(`grid-col-span-${e}`),t&&c.push(`grid-row-span-${t}`);let y=[...c,s,r].filter(Boolean).join(" ");return C.createElement(a,{as:o,ref:l,classes:y,...a$1},i)});Q.displayName="GridItem";var he=ye;he.Item=Q;var ct=he;var Se=C.forwardRef(({gap:e,justify:t,align:o,wrap:s,alwaysProportional:r=!1,as:i="div",className:a$1,classes:l,children:c,...y},u)=>{process.env.NODE_ENV==="development"&&r&&console.warn('[fpkit] Row: alwaysProportional is deprecated and will be removed in v5.0.0. Use responsive column utilities instead: className="col-sm-6 col-md-4"');let f=["col-row"];e&&f.push(`col-row-gap-${e}`),t&&f.push(`col-row-justify-${t}`),o&&f.push(`col-row-align-${o}`),s&&s!=="wrap"&&f.push(`col-row-${s}`),r&&f.push("col-row-proportional");let S=[...f,a$1,l].filter(Boolean).join(" ");return C.createElement(a,{as:i,ref:u,classes:S,...y},c)});Se.displayName="Row";var Ie=C.forwardRef(({span:e,offset:t,order:o,auto:s=!1,as:r="div",className:i,classes:a$1,children:l,...c},y)=>{let u=[];s?u.push("col-auto"):e==="flex"?u.push("col-flex"):e&&u.push(`col-${e}`),t!==void 0&&u.push(`col-offset-${t}`),o!==void 0&&u.push(`col-order-${o}`);let f=[...u,i,a$1].filter(Boolean).join(" ");return C.createElement(a,{as:r,ref:y,classes:f,...c},l)});Ie.displayName="Col";var B=(e,t="")=>{let o=[];if(e.direction){let s={row:"flex-row","row-reverse":"flex-row-reverse",column:"flex-col","column-reverse":"flex-col-reverse"};o.push(`${t}${s[e.direction]}`);}if(e.wrap){let s={wrap:"flex-wrap",nowrap:"flex-nowrap","wrap-reverse":"flex-wrap-reverse"};o.push(`${t}${s[e.wrap]}`);}if(e.gap&&o.push(`${t}gap-${e.gap}`),e.rowGap&&o.push(`${t}row-gap-${e.rowGap}`),e.colGap&&o.push(`${t}col-gap-${e.colGap}`),e.justify){let s={start:"justify-start",end:"justify-end",center:"justify-center",between:"justify-between",around:"justify-around",evenly:"justify-evenly"};o.push(`${t}${s[e.justify]}`);}if(e.align){let s={start:"items-start",end:"items-end",center:"items-center",baseline:"items-baseline",stretch:"items-stretch"};o.push(`${t}${s[e.align]}`);}if(e.alignContent){let s={start:"content-start",end:"content-end",center:"content-center",between:"content-between",around:"content-around",evenly:"content-evenly",stretch:"content-stretch"};o.push(`${t}${s[e.alignContent]}`);}return o},Pe=C.forwardRef((e,t)=>{let{variant:o,inline:s=!1,as:r="div",className:i="",styles:a$1,children:l,sm:c,md:y,lg:u,xl:f,direction:S,wrap:g,gap:v,rowGap:m,colGap:x,justify:h,align:p,alignContent:d,...E}=e,P=[];if(P.push(s?"flex-inline":"flex"),o){let A={center:"flex-center",between:"flex-between",around:"flex-around",stack:"flex-stack",spread:"flex-spread"};P.push(A[o]);}P.push(...B({direction:S,wrap:g,gap:v,rowGap:m,colGap:x,justify:h,align:p,alignContent:d})),c&&P.push(...B(c,"sm:")),y&&P.push(...B(y,"md:")),u&&P.push(...B(u,"lg:")),f&&P.push(...B(f,"xl:"));let T=[...P,i].filter(Boolean).join(" ");return C.createElement(a,{as:r,ref:t,classes:T,styles:a$1,...E},l)});Pe.displayName="Flex";var Ce=C.forwardRef((e,t)=>{let{grow:o,shrink:s,basis:r,flex:i,alignSelf:a$1,order:l,as:c="div",className:y="",styles:u,children:f,sm:S,md:g,lg:v,xl:m,...x}=e,h=[];if(i){let d={1:"flex-1",auto:"flex-auto",initial:"flex-initial",none:"flex-none"};h.push(d[i]);}if(o!==void 0&&h.push(`flex-grow-${o}`),s!==void 0&&h.push(`flex-shrink-${s}`),r){let d={auto:"flex-basis-auto",0:"flex-basis-0",full:"flex-basis-full"};h.push(d[r]);}if(a$1){let d={auto:"self-auto",start:"self-start",end:"self-end",center:"self-center",baseline:"self-baseline",stretch:"self-stretch"};h.push(d[a$1]);}if(l){let d={first:"order-first",last:"order-last",none:"order-none"};h.push(d[l]);}if(S?.flex){let d={1:"flex-1",auto:"flex-auto",none:"flex-none"};h.push(`sm:${d[S.flex]}`);}if(g?.flex){let d={1:"flex-1",auto:"flex-auto",none:"flex-none"};h.push(`md:${d[g.flex]}`);}if(v?.flex){let d={1:"flex-1",auto:"flex-auto",none:"flex-none"};h.push(`lg:${d[v.flex]}`);}if(m?.flex){let d={1:"flex-1",auto:"flex-auto",none:"flex-none"};h.push(`xl:${d[m.flex]}`);}let p=[...h,y].filter(Boolean).join(" ");return C.createElement(a,{as:c,ref:t,classes:p,styles:u,...x},f)});Ce.displayName="Flex.Item";var be=C.forwardRef((e,t)=>{let{as:o="div",className:s="",styles:r,...i}=e,a$1=["flex-1",s].filter(Boolean).join(" ");return C.createElement(a,{as:o,ref:t,classes:a$1,styles:r,...i})});be.displayName="Flex.Spacer";var Y=Pe;Y.Item=Ce;Y.Spacer=be;var ft=Y;var we=({id:e,styles:t,classes:o,children:s,variant:r,...i})=>C.createElement(a,{as:"sup",id:e,styles:t,className:o,"data-badge":r||void 0,role:"status",...i},C.createElement(a,{as:"span"},s));we.displayName="Badge";var dt=({elm:e="span",role:t="note",variant:o,children:s,styles:r,...i})=>C.createElement(a,{as:e,role:t,"data-tag":o||void 0,styles:r,...i},s);dt.displayName="Tag";var ut=C.forwardRef(({summary:e,icon:t,styles:o,classes:s,ariaLabel:r,name:i,open:a$1,onPointerDown:l,onToggle:c,children:y,...u},f)=>{let S=useCallback(v=>{l?.(v);},[l]),g=useCallback(v=>{c?.(v);},[c]);return C.createElement(a,{as:"details",styles:o,classes:s,onToggle:g,ref:f,open:a$1,"aria-label":r,name:i,...u},C.createElement(a,{as:"summary",onPointerDown:S},t,e),C.createElement(a,{as:"section"},y))});ut.displayName="Details";
 
-export { re as Alert, lt as Article, it as Aside, we as Badge, fe as Box, ne as Checkbox, xe as Cluster, Ie as Col, dt as Details, ct as Flex, nt as Footer, pt as Grid, Q as GridItem, st as Header, ie as Img, E as Landmarks, rt as Main, Se as Row, at as Section, de as Stack, mt as Tag, pe as TextToSpeech };
+export { re as Alert, pt as Article, at as Aside, we as Badge, fe as Box, ne as Checkbox, xe as Cluster, Ie as Col, ut as Details, ft as Flex, it as Footer, ct as Grid, Q as GridItem, rt as Header, ie as Img, F as Landmarks, nt as Main, Se as Row, lt as Section, de as Stack, dt as Tag, pe as TextToSpeech };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map