@fpkit/acss 6.3.0 → 6.4.1

package/libs/index.d.cts

@@ -2,8 +2,8 @@ import { ButtonProps } from './components/button.cjs';
 export { Button } from './components/button.cjs';
 import React$1, { ReactNode } from 'react';
 export { Card, Content as CardContent, Footer as CardFooter, CardProps, Title as CardTitle } from './components/card.cjs';
-import { I as IconProps } from './icons-2c09535c.js';
-export { a as Icon, b as IconProps } from './icons-2c09535c.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,7 +13,8 @@ export { default as List } from './components/list/list.cjs';
 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 { D as DialogModalProps } from './dialog-6c6b3588.js';
+export { a as Dialog } from './dialog-6c6b3588.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';
@@ -41,11 +42,13 @@ type IconButtonProps = Omit<ButtonProps, "children"> & (WithAriaLabel | WithAria
     icon: React$1.ReactNode;
     /**
      * Optional text shown alongside the icon at desktop widths.
-     * Hidden visually below the `$icon-label-bp` SCSS breakpoint (default 48rem / 768px),
-     * but remains in the accessibility tree — screen readers always announce it.
+     * Visually hidden below the `$icon-label-bp` SCSS breakpoint (default 48rem / 768px)
+     * via a media query on `[data-icon-label]`, but always present in the accessibility
+     * tree — screen readers announce it at every viewport size.
      *
-     * NOTE: When `label` is used, the default `variant="icon"` removes padding.
-     * Override with a different variant (e.g. `variant="outline"`) for a padded layout.
+     * NOTE: When `label` is provided, the default `variant="icon"` removes padding.
+     * Use `variant="outline"` (or another padded variant) to restore layout padding
+     * alongside the label.
      */
     label?: string;
     /** Button type: button, submit, or reset. Required. */
@@ -54,15 +57,16 @@ type IconButtonProps = Omit<ButtonProps, "children"> & (WithAriaLabel | WithAria
 /**
  * Accessible icon button component. Wraps `Button` with:
  * - Required accessible label via `aria-label` or `aria-labelledby` (XOR enforced)
- * - Optional visible `label` text that hides on mobile (visual only — always in a11y tree)
+ * - Optional `label` text hidden on mobile (< 48rem), visible on desktop — always in a11y tree
  * - `variant="icon"` default (square, no padding)
+ * - Fixed `3rem × 3rem` tap target (48px at default root font size — WCAG 2.5.5 AAA)
  *
  * @example
  * // Icon only
  * <IconButton type="button" aria-label="Close menu" icon={<CloseIcon />} />
  *
  * @example
- * // Icon + label (label hides on mobile)
+ * // Icon + label (label hides on mobile, visible at >= 48rem / 768px)
  * <IconButton
  *   type="button"
  *   aria-label="Settings"
@@ -797,6 +801,69 @@ declare const Img: {
     displayName: string;
 };
 
+/**
+ * DialogModal - A wrapper component that manages dialog state and provides a trigger button.
+ *
+ * This is an **uncontrolled** component wrapper around the controlled Dialog component.
+ * It manages the dialog's open/closed state internally and provides a button to trigger it.
+ *
+ * **Use this when:**
+ * - You want a simple dialog with a trigger button
+ * - You don't need to control the dialog state externally
+ * - You want automatic focus restoration to the trigger button
+ *
+ * **Use the base Dialog component instead when:**
+ * - You need to control dialog state from parent component
+ * - You have a custom trigger mechanism
+ * - You need to open dialog programmatically from multiple places
+ *
+ * @component
+ * @param {DialogModalProps} props - Component props
+ * @param {string} props.dialogTitle - Title displayed in dialog header
+ * @param {ReactNode} props.children - Content to display inside the dialog
+ * @param {string} [props.btnLabel="Open Dialog"] - Text label for the trigger button
+ * @param {"sm" | "md" | "lg"} [props.btnSize="sm"] - Size variant for the trigger button
+ * @param {() => void} [props.btnOnClick] - Callback fired when trigger button is clicked (before opening)
+ * @param {boolean} [props.isAlertDialog=false] - If true, renders as non-modal inline alert
+ * @param {() => void} [props.onClose] - Callback fired when dialog is closed
+ * @param {() => void | Promise<void>} [props.onConfirm] - Callback when confirm button is clicked
+ * @param {string} [props.confirmLabel="Confirm"] - Text label for confirm button
+ * @param {string} [props.cancelLabel="Cancel"] - Text label for cancel button
+ * @param {boolean} [props.hideFooter=false] - If true, hides the footer with action buttons
+ * @param {string} [props.className] - Additional CSS classes for the dialog
+ * @param {string} [props.dialogLabel] - Optional aria-label for the dialog
+ * @param {ReactElement} [props.icon] - Optional icon element. When provided, renders IconButton as trigger.
+ * @returns {JSX.Element} A dialog with trigger button and automatic state management
+ *
+ * @example
+ * ```tsx
+ * <DialogModal
+ *   dialogTitle="Confirm Delete"
+ *   btnLabel="Delete Item"
+ *   btnSize="md"
+ *   onConfirm={async () => await deleteItem()}
+ *   confirmLabel="Delete"
+ *   cancelLabel="Cancel"
+ * >
+ *   Are you sure you want to delete this item? This action cannot be undone.
+ * </DialogModal>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Icon trigger — renders IconButton with visible label at desktop widths
+ * <DialogModal
+ *   dialogTitle="Settings"
+ *   btnLabel="Settings"
+ *   icon={<SettingsIcon />}
+ *   btnProps={{ variant: "outline" }}
+ * >
+ *   Settings content here.
+ * </DialogModal>
+ * ```
+ */
+declare const DialogModal: React$1.FC<DialogModalProps>;
+
 /**
  * Props for the TextToSpeechComponent.
  * @interface TextToSpeechComponentProps
@@ -2896,4 +2963,4 @@ type FPComponent = {
  */
 declare const FP: FPComponent;
 
-export { Alert, AlertProps, Article, Aside, Badge, BadgeProps, Box, BoxProps, ButtonProps, Caption, Checkbox, CheckboxProps, Cluster, ClusterProps, Col, ColProps, ComponentProps$1 as ComponentProps, Details, FP, Fieldset, Flex, FlexAlign, FlexAlignContent, FlexAlignSelf, FlexContainerElement, FlexDirection, FlexGap, FlexItemElement, FlexItemProps, FlexJustify, FlexProps, FlexSpacerProps, FlexVariant, FlexWrap, Footer, GridWithItem as Grid, GridItem, GridItemProps, GridProps, Header, IconButton, IconButtonProps, Img, ImgProps, InputProps, Landmarks, Main, ResponsiveFlexProps, Row, RowProps, Section, Stack, StackProps, Table, Tag, TagProps, TagVariant, Tbody, Td, TextToSpeech, Thead, Tr, UI };
+export { Alert, AlertProps, Article, Aside, Badge, BadgeProps, Box, BoxProps, ButtonProps, Caption, Checkbox, CheckboxProps, Cluster, ClusterProps, Col, ColProps, ComponentProps$1 as ComponentProps, Details, DialogModal, FP, Fieldset, Flex, FlexAlign, FlexAlignContent, FlexAlignSelf, FlexContainerElement, FlexDirection, FlexGap, FlexItemElement, FlexItemProps, FlexJustify, FlexProps, FlexSpacerProps, FlexVariant, FlexWrap, Footer, GridWithItem as Grid, GridItem, GridItemProps, GridProps, Header, IconButton, IconButtonProps, Img, ImgProps, InputProps, Landmarks, Main, ResponsiveFlexProps, Row, RowProps, Section, Stack, StackProps, Table, Tag, TagProps, TagVariant, Tbody, Td, TextToSpeech, Thead, Tr, UI };

package/libs/index.d.ts

@@ -2,8 +2,8 @@ import { ButtonProps } from './components/button.js';
 export { Button } from './components/button.js';
 import React$1, { ReactNode } from 'react';
 export { Card, Content as CardContent, Footer as CardFooter, CardProps, Title as CardTitle } from './components/card.js';
-import { I as IconProps } from './icons-2c09535c.js';
-export { a as Icon, b as IconProps } from './icons-2c09535c.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,7 +13,8 @@ export { default as List } from './components/list/list.js';
 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 { D as DialogModalProps } from './dialog-6c6b3588.js';
+export { a as Dialog } from './dialog-6c6b3588.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';
@@ -41,11 +42,13 @@ type IconButtonProps = Omit<ButtonProps, "children"> & (WithAriaLabel | WithAria
     icon: React$1.ReactNode;
     /**
      * Optional text shown alongside the icon at desktop widths.
-     * Hidden visually below the `$icon-label-bp` SCSS breakpoint (default 48rem / 768px),
-     * but remains in the accessibility tree — screen readers always announce it.
+     * Visually hidden below the `$icon-label-bp` SCSS breakpoint (default 48rem / 768px)
+     * via a media query on `[data-icon-label]`, but always present in the accessibility
+     * tree — screen readers announce it at every viewport size.
      *
-     * NOTE: When `label` is used, the default `variant="icon"` removes padding.
-     * Override with a different variant (e.g. `variant="outline"`) for a padded layout.
+     * NOTE: When `label` is provided, the default `variant="icon"` removes padding.
+     * Use `variant="outline"` (or another padded variant) to restore layout padding
+     * alongside the label.
      */
     label?: string;
     /** Button type: button, submit, or reset. Required. */
@@ -54,15 +57,16 @@ type IconButtonProps = Omit<ButtonProps, "children"> & (WithAriaLabel | WithAria
 /**
  * Accessible icon button component. Wraps `Button` with:
  * - Required accessible label via `aria-label` or `aria-labelledby` (XOR enforced)
- * - Optional visible `label` text that hides on mobile (visual only — always in a11y tree)
+ * - Optional `label` text hidden on mobile (< 48rem), visible on desktop — always in a11y tree
  * - `variant="icon"` default (square, no padding)
+ * - Fixed `3rem × 3rem` tap target (48px at default root font size — WCAG 2.5.5 AAA)
  *
  * @example
  * // Icon only
  * <IconButton type="button" aria-label="Close menu" icon={<CloseIcon />} />
  *
  * @example
- * // Icon + label (label hides on mobile)
+ * // Icon + label (label hides on mobile, visible at >= 48rem / 768px)
  * <IconButton
  *   type="button"
  *   aria-label="Settings"
@@ -797,6 +801,69 @@ declare const Img: {
     displayName: string;
 };
 
+/**
+ * DialogModal - A wrapper component that manages dialog state and provides a trigger button.
+ *
+ * This is an **uncontrolled** component wrapper around the controlled Dialog component.
+ * It manages the dialog's open/closed state internally and provides a button to trigger it.
+ *
+ * **Use this when:**
+ * - You want a simple dialog with a trigger button
+ * - You don't need to control the dialog state externally
+ * - You want automatic focus restoration to the trigger button
+ *
+ * **Use the base Dialog component instead when:**
+ * - You need to control dialog state from parent component
+ * - You have a custom trigger mechanism
+ * - You need to open dialog programmatically from multiple places
+ *
+ * @component
+ * @param {DialogModalProps} props - Component props
+ * @param {string} props.dialogTitle - Title displayed in dialog header
+ * @param {ReactNode} props.children - Content to display inside the dialog
+ * @param {string} [props.btnLabel="Open Dialog"] - Text label for the trigger button
+ * @param {"sm" | "md" | "lg"} [props.btnSize="sm"] - Size variant for the trigger button
+ * @param {() => void} [props.btnOnClick] - Callback fired when trigger button is clicked (before opening)
+ * @param {boolean} [props.isAlertDialog=false] - If true, renders as non-modal inline alert
+ * @param {() => void} [props.onClose] - Callback fired when dialog is closed
+ * @param {() => void | Promise<void>} [props.onConfirm] - Callback when confirm button is clicked
+ * @param {string} [props.confirmLabel="Confirm"] - Text label for confirm button
+ * @param {string} [props.cancelLabel="Cancel"] - Text label for cancel button
+ * @param {boolean} [props.hideFooter=false] - If true, hides the footer with action buttons
+ * @param {string} [props.className] - Additional CSS classes for the dialog
+ * @param {string} [props.dialogLabel] - Optional aria-label for the dialog
+ * @param {ReactElement} [props.icon] - Optional icon element. When provided, renders IconButton as trigger.
+ * @returns {JSX.Element} A dialog with trigger button and automatic state management
+ *
+ * @example
+ * ```tsx
+ * <DialogModal
+ *   dialogTitle="Confirm Delete"
+ *   btnLabel="Delete Item"
+ *   btnSize="md"
+ *   onConfirm={async () => await deleteItem()}
+ *   confirmLabel="Delete"
+ *   cancelLabel="Cancel"
+ * >
+ *   Are you sure you want to delete this item? This action cannot be undone.
+ * </DialogModal>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Icon trigger — renders IconButton with visible label at desktop widths
+ * <DialogModal
+ *   dialogTitle="Settings"
+ *   btnLabel="Settings"
+ *   icon={<SettingsIcon />}
+ *   btnProps={{ variant: "outline" }}
+ * >
+ *   Settings content here.
+ * </DialogModal>
+ * ```
+ */
+declare const DialogModal: React$1.FC<DialogModalProps>;
+
 /**
  * Props for the TextToSpeechComponent.
  * @interface TextToSpeechComponentProps
@@ -2896,4 +2963,4 @@ type FPComponent = {
  */
 declare const FP: FPComponent;
 
-export { Alert, AlertProps, Article, Aside, Badge, BadgeProps, Box, BoxProps, ButtonProps, Caption, Checkbox, CheckboxProps, Cluster, ClusterProps, Col, ColProps, ComponentProps$1 as ComponentProps, Details, FP, Fieldset, Flex, FlexAlign, FlexAlignContent, FlexAlignSelf, FlexContainerElement, FlexDirection, FlexGap, FlexItemElement, FlexItemProps, FlexJustify, FlexProps, FlexSpacerProps, FlexVariant, FlexWrap, Footer, GridWithItem as Grid, GridItem, GridItemProps, GridProps, Header, IconButton, IconButtonProps, Img, ImgProps, InputProps, Landmarks, Main, ResponsiveFlexProps, Row, RowProps, Section, Stack, StackProps, Table, Tag, TagProps, TagVariant, Tbody, Td, TextToSpeech, Thead, Tr, UI };
+export { Alert, AlertProps, Article, Aside, Badge, BadgeProps, Box, BoxProps, ButtonProps, Caption, Checkbox, CheckboxProps, Cluster, ClusterProps, Col, ColProps, ComponentProps$1 as ComponentProps, Details, DialogModal, FP, Fieldset, Flex, FlexAlign, FlexAlignContent, FlexAlignSelf, FlexContainerElement, FlexDirection, FlexGap, FlexItemElement, FlexItemProps, FlexJustify, FlexProps, FlexSpacerProps, FlexVariant, FlexWrap, Footer, GridWithItem as Grid, GridItem, GridItemProps, GridProps, Header, IconButton, IconButtonProps, Img, ImgProps, InputProps, Landmarks, Main, ResponsiveFlexProps, Row, RowProps, Section, Stack, StackProps, Table, Tag, TagProps, TagVariant, Tbody, Td, TextToSpeech, Thead, Tr, UI };

package/libs/index.js

@@ -1,7 +1,8 @@
-import { b as b$2 } from './chunk-6ADHES7B.js';
+import { b as b$3 } 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';
+import { b as b$2 } from './chunk-VQTCTLFN.js';
 export { a as Dialog } from './chunk-VQTCTLFN.js';
 export { c as Nav, b as NavItem, a as NavList } from './chunk-3ENBUQIB.js';
 export { c as List } from './chunk-RQSMWB3J.js';
@@ -23,22 +24,22 @@ import './chunk-75QHTLFO.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 v, { useCallback, useMemo, useState, useEffect } from 'react';
+import S, { useCallback, useMemo, useState, useRef, useEffect } from 'react';
 
-var re=({icon:e,label:t,variant:o="icon",type:s="button",...r})=>v.createElement(a$2,{variant:o,"data-icon-btn":t?"has-label":"icon",...r,type:s},e,t&&v.createElement("span",{"data-icon-label":!0},t));re.displayName="IconButton";var Je={default:"",info:"Information: ",success:"Success: ",warning:"Warning: ",error:"Error: "},W=({severity:e})=>{let t=Je[e];return t?v.createElement("span",{className:"sr-only"},t):null};var Ke=(e,t)=>({info:v.createElement(b$1.InfoSolid,{...t}),success:v.createElement(b$1.SuccessSolid,{...t}),warning:v.createElement(b$1.WarnSolid,{...t}),error:v.createElement(b$1.AlertSolid,{...t}),default:v.createElement(b$1.AlertSquareSolid,{...t})})[e],_=({severity:e,iconProps:t,hideIcon:o})=>{if(o)return null;let s=Ke(e,t);return v.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 v.createElement(a,{as:o,className:"alert-title"},e)};var K=({children:e,contentType:t})=>t==="node"?v.createElement(v.Fragment,null,e):v.createElement(a,{as:"p"},e);var X=({actions:e})=>e?v.createElement(a,{as:"div",className:"alert-actions"},e):null;var ne=v.memo(({onDismiss:e,iconSize:t=16})=>v.createElement(b,{type:"button",onClick:e,"aria-label":"Close alert",className:"alert-dismiss","data-btn":"icon sm"},v.createElement(b$1,null,v.createElement(b$1.Close,{size:t})))),ie=ne;ne.displayName="DismissButton";var Ye={default:"polite",info:"polite",success:"polite",warning:"polite",error:"assertive"},R=v.forwardRef(({severity:e,variant:t,isVisible:o,dismissible:s,onDismiss:r,onInteractionStart:i,onInteractionEnd:a$1,autoFocus:l,title:p,titleLevel:y,children:u,contentType:f,actions:I,hideIcon:g,iconProps:b,...d},x)=>v.createElement(a,{as:"div",ref:x,role:"alert","aria-live":Ye[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,...d},v.createElement(W,{severity:e}),v.createElement(_,{severity:e,iconProps:b,hideIcon:g}),v.createElement(a,{as:"div",classes:"alert-message"},v.createElement(q,{title:p,titleLevel:y}),v.createElement(K,{contentType:f},u),v.createElement(X,{actions:I})),s&&v.createElement(ie,{onDismiss:r})));R.displayName="AlertView";var Ze=({open:e,onDismiss:t,dismissible:o,autoHideDuration:s,pauseOnHover:r,autoFocus:i,alertRef:a})=>{let[l,p]=v.useState(e),[y,u]=v.useState(e),[f,I]=v.useState(!1),g=v.useCallback(()=>{p(!1),setTimeout(()=>{u(!1),t?.();},300);},[t]);v.useEffect(()=>{e?(u(!0),p(!0)):p(!1);},[e]),v.useEffect(()=>{if(!s||!l||f)return;let x=setTimeout(()=>{g();},s);return ()=>clearTimeout(x)},[s,l,f,g]),v.useEffect(()=>{if(!o||!l)return;let x=h=>{h.key==="Escape"&&g();};return document.addEventListener("keydown",x),()=>document.removeEventListener("keydown",x)},[o,l,g]),v.useEffect(()=>{i&&l&&a.current&&a.current.focus();},[i,l,a]);let b=v.useCallback(()=>{r&&s&&I(!0);},[r,s]),d=v.useCallback(()=>{r&&s&&I(!1);},[r,s]);return {isVisible:l,shouldRender:y,handleDismiss:g,handleInteractionStart:b,handleInteractionEnd:d}},ae=({open:e,severity:t="default",children:o,title:s,dismissible:r=!1,onDismiss:i,iconSize:a,iconProps:l,hideIcon:p,autoHideDuration:y,pauseOnHover:u=!0,titleLevel:f=3,actions:I,autoFocus:g=!1,variant:b="outlined",contentType:d="text",...x})=>{let h=v.useRef(null),{isVisible:c,shouldRender:m,handleDismiss:F,handleInteractionStart:S,handleInteractionEnd:w}=Ze({open:e,onDismiss:i,dismissible:r,autoHideDuration:y,pauseOnHover:u,autoFocus:g,alertRef:h});if(!m)return null;let U={size:a||16,...l};return v.createElement(R,{ref:h,severity:t,variant:b,isVisible:c,dismissible:r,onDismiss:F,onInteractionStart:S,onInteractionEnd:w,autoFocus:g,title:s,titleLevel:f,contentType:d,actions:I,hideIcon:p,iconProps:U,...x},o)};ae.displayName="Alert";var le=v.forwardRef(({id:e,label:t,checked:o,defaultChecked:s,value:r="on",onChange:i,classes:a,inputClasses:l,styles:p,size:y,name:u,disabled:f,required:I,validationState:g,errorMessage:b,hintText:d,onBlur:x,onFocus:h,autoFocus:c,...m},F)=>{let S=v.useCallback(Be=>{i?.(Be.target.checked);},[i]),w=o!==void 0,U=w?{checked:o}:{},Ne=!w&&s!==void 0?{defaultChecked:s}:{},j=v.useRef(w);return v.useEffect(()=>{process.env.NODE_ENV==="development"&&(j.current!==w&&console.warn(`Checkbox with id="${e}" is changing from ${j.current?"controlled":"uncontrolled"} to ${w?"controlled":"uncontrolled"}. This is likely a bug. Decide between using "checked" (controlled) or "defaultChecked" (uncontrolled) and stick with it.`),j.current=w);},[w,e]),v.createElement("div",{className:a,style:p,"data-checkbox-size":y},v.createElement(a$1,{ref:F,type:"checkbox",id:e,name:u,value:r,...U,...Ne,classes:l||"checkbox-input",disabled:f,required:I,validationState:g,errorMessage:b,hintText:d,onChange:S,onBlur:x,onFocus:h,autoFocus:c,...m}),v.createElement("label",{htmlFor:e,className:"checkbox-label"},t,I&&v.createElement("span",{className:"checkbox-required","aria-label":"required"}," *")))});le.displayName="Checkbox";var pe=({src:e="//",alt:t,width:o=480,height:s,styles:r,loading:i="lazy",placeholder:a$1,fetchpriority:l="low",decoding:p="auto",srcSet:y,sizes:u,onError:f,onLoad:I,...g})=>{let b=useMemo(()=>{let c=typeof o=="number"?o:480,m=typeof s=="number"?s:Math.round(c*.75),F=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${c} ${m}">
+var V=({icon:e,label:t,variant:o="icon",type:s="button",...r})=>S.createElement(a$2,{variant:o,"data-icon-btn":t?"has-label":"icon",...r,type:s},e,t&&S.createElement("span",{"data-icon-label":!0},t));V.displayName="IconButton";var Ye={default:"",info:"Information: ",success:"Success: ",warning:"Warning: ",error:"Error: "},J=({severity:e})=>{let t=Ye[e];return t?S.createElement("span",{className:"sr-only"},t):null};var Ze=(e,t)=>({info:S.createElement(b$1.InfoSolid,{...t}),success:S.createElement(b$1.SuccessSolid,{...t}),warning:S.createElement(b$1.WarnSolid,{...t}),error:S.createElement(b$1.AlertSolid,{...t}),default:S.createElement(b$1.AlertSquareSolid,{...t})})[e],K=({severity:e,iconProps:t,hideIcon:o})=>{if(o)return null;let s=Ze(e,t);return S.createElement(a,{"aria-hidden":"true",className:"alert-icon"},s)};var X=({title:e,titleLevel:t})=>{if(!e)return null;let o=t?`h${t}`:"strong";return S.createElement(a,{as:o,className:"alert-title"},e)};var Y=({children:e,contentType:t})=>t==="node"?S.createElement(S.Fragment,null,e):S.createElement(a,{as:"p"},e);var Z=({actions:e})=>e?S.createElement(a,{as:"div",className:"alert-actions"},e):null;var ie=S.memo(({onDismiss:e,iconSize:t=16})=>S.createElement(b,{type:"button",onClick:e,"aria-label":"Close alert",className:"alert-dismiss","data-btn":"icon sm"},S.createElement(b$1,null,S.createElement(b$1.Close,{size:t})))),le=ie;ie.displayName="DismissButton";var ot={default:"polite",info:"polite",success:"polite",warning:"polite",error:"assertive"},G=S.forwardRef(({severity:e,variant:t,isVisible:o,dismissible:s,onDismiss:r,onInteractionStart:n,onInteractionEnd:a$1,autoFocus:l,title:p,titleLevel:y,children:x,contentType:f,actions:I,hideIcon:g,iconProps:b,...m},d)=>S.createElement(a,{as:"div",ref:d,role:"alert","aria-live":ot[e],"aria-atomic":"true",className:`alert alert-${e}`,"data-alert":e,"data-visible":o,"data-variant":t,tabIndex:l?-1:void 0,onMouseEnter:n,onMouseLeave:a$1,onFocus:n,onBlur:a$1,...m},S.createElement(J,{severity:e}),S.createElement(K,{severity:e,iconProps:b,hideIcon:g}),S.createElement(a,{as:"div",classes:"alert-message"},S.createElement(X,{title:p,titleLevel:y}),S.createElement(Y,{contentType:f},x),S.createElement(Z,{actions:I})),s&&S.createElement(le,{onDismiss:r})));G.displayName="AlertView";var st=({open:e,onDismiss:t,dismissible:o,autoHideDuration:s,pauseOnHover:r,autoFocus:n,alertRef:a})=>{let[l,p]=S.useState(e),[y,x]=S.useState(e),[f,I]=S.useState(!1),g=S.useCallback(()=>{p(!1),setTimeout(()=>{x(!1),t?.();},300);},[t]);S.useEffect(()=>{e?(x(!0),p(!0)):p(!1);},[e]),S.useEffect(()=>{if(!s||!l||f)return;let d=setTimeout(()=>{g();},s);return ()=>clearTimeout(d)},[s,l,f,g]),S.useEffect(()=>{if(!o||!l)return;let d=h=>{h.key==="Escape"&&g();};return document.addEventListener("keydown",d),()=>document.removeEventListener("keydown",d)},[o,l,g]),S.useEffect(()=>{n&&l&&a.current&&a.current.focus();},[n,l,a]);let b=S.useCallback(()=>{r&&s&&I(!0);},[r,s]),m=S.useCallback(()=>{r&&s&&I(!1);},[r,s]);return {isVisible:l,shouldRender:y,handleDismiss:g,handleInteractionStart:b,handleInteractionEnd:m}},pe=({open:e,severity:t="default",children:o,title:s,dismissible:r=!1,onDismiss:n,iconSize:a,iconProps:l,hideIcon:p,autoHideDuration:y,pauseOnHover:x=!0,titleLevel:f=3,actions:I,autoFocus:g=!1,variant:b="outlined",contentType:m="text",...d})=>{let h=S.useRef(null),{isVisible:c,shouldRender:u,handleDismiss:$,handleInteractionStart:P,handleInteractionEnd:w}=st({open:e,onDismiss:n,dismissible:r,autoHideDuration:y,pauseOnHover:x,autoFocus:g,alertRef:h});if(!u)return null;let U={size:a||16,...l};return S.createElement(G,{ref:h,severity:t,variant:b,isVisible:c,dismissible:r,onDismiss:$,onInteractionStart:P,onInteractionEnd:w,autoFocus:g,title:s,titleLevel:f,contentType:m,actions:I,hideIcon:p,iconProps:U,...d},o)};pe.displayName="Alert";var ce=S.forwardRef(({id:e,label:t,checked:o,defaultChecked:s,value:r="on",onChange:n,classes:a,inputClasses:l,styles:p,size:y,name:x,disabled:f,required:I,validationState:g,errorMessage:b,hintText:m,onBlur:d,onFocus:h,autoFocus:c,...u},$)=>{let P=S.useCallback(Le=>{n?.(Le.target.checked);},[n]),w=o!==void 0,U=w?{checked:o}:{},Ae=!w&&s!==void 0?{defaultChecked:s}:{},W=S.useRef(w);return S.useEffect(()=>{process.env.NODE_ENV==="development"&&(W.current!==w&&console.warn(`Checkbox with id="${e}" is changing from ${W.current?"controlled":"uncontrolled"} to ${w?"controlled":"uncontrolled"}. This is likely a bug. Decide between using "checked" (controlled) or "defaultChecked" (uncontrolled) and stick with it.`),W.current=w);},[w,e]),S.createElement("div",{className:a,style:p,"data-checkbox-size":y},S.createElement(a$1,{ref:$,type:"checkbox",id:e,name:x,value:r,...U,...Ae,classes:l||"checkbox-input",disabled:f,required:I,validationState:g,errorMessage:b,hintText:m,onChange:P,onBlur:d,onFocus:h,autoFocus:c,...u}),S.createElement("label",{htmlFor:e,className:"checkbox-label"},t,I&&S.createElement("span",{className:"checkbox-required","aria-label":"required"}," *")))});ce.displayName="Checkbox";var fe=({src:e="//",alt:t,width:o=480,height:s,styles:r,loading:n="lazy",placeholder:a$1,fetchpriority:l="low",decoding:p="auto",srcSet:y,sizes:x,onError:f,onLoad:I,...g})=>{let b=useMemo(()=>{let c=typeof o=="number"?o:480,u=typeof s=="number"?s:Math.round(c*.75),$=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${c} ${u}">
       <defs>
-        <linearGradient id="grad-${c}-${m}" x1="0%" y1="0%" x2="100%" y2="100%">
+        <linearGradient id="grad-${c}-${u}" x1="0%" y1="0%" x2="100%" y2="100%">
           <stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
           <stop offset="50%" style="stop-color:#8b5cf6;stop-opacity:1" />
           <stop offset="100%" style="stop-color:#ec4899;stop-opacity:1" />
         </linearGradient>
       </defs>
-      <rect width="${c}" height="${m}" fill="url(#grad-${c}-${m})"/>
-      <circle cx="${c*.15}" cy="${m*.2}" r="${Math.min(c,m)*.08}" fill="rgba(255,255,255,0.2)"/>
-      <path d="M0,${m*.75} Q${c*.25},${m*.65} ${c*.5},${m*.75} T${c},${m*.75} L${c},${m} L0,${m} 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(c,m)*.05)}" font-weight="500" fill="rgba(255,255,255,0.9)">${c}\xD7${m}</text>
-    </svg>`;return `data:image/svg+xml,${encodeURIComponent(F)}`},[o,s]),d=a$1??b;return v.createElement(a,{as:"img",src:e,alt:t,width:o,height:s||"auto",loading:i,style:r,srcSet:y,sizes:u,onError:c=>{f&&f(c),c.defaultPrevented||c.currentTarget.src!==d&&(c.currentTarget.src=d);},onLoad:c=>{I?.(c);},decoding:p,...g,...l&&{fetchpriority:l}})};pe.displayName="Img";var ce=e=>{let[t,o]=useState([]),[s,r]=useState(e),[i,a]=useState(!1),[l,p]=useState(!1);return useEffect(()=>{let d=()=>{let x=window.speechSynthesis.getVoices();o(x);let h=x.find(c=>c.name==="Google US English");if(h)r(h);else {let c=x.find(m=>m.lang.startsWith("en-"));c&&r(c);}};return d(),window.speechSynthesis.onvoiceschanged=d,()=>{window.speechSynthesis.onvoiceschanged=null;}},[]),{speak:(d,x={},h)=>{let c=new SpeechSynthesisUtterance(d);c.lang=x.lang??"en-US",c.pitch=x.pitch??1,c.rate=x.rate??1,c.voice=s??x.voice??null,c.onend=()=>{a(!1),p(!1),h&&h();},"speechSynthesis"in window?(window.speechSynthesis.speak(c),a(!0),p(!1)):a(!1);},pause:()=>{i&&!l&&(window.speechSynthesis.pause(),p(!0));},resume:()=>{i&&l&&(window.speechSynthesis.resume(),p(!1));},cancel:()=>{i&&(window.speechSynthesis.cancel(),a(!1),p(!1));},isSpeaking:i,isPaused:l,availableVoices:t,changeVoice:d=>{r(d);},currentVoice:s,getAvailableLanguages:()=>[...new Set(t.map(d=>d.lang))]}};var st=({children:e,onClick:t})=>v.createElement(a,{as:"button",type:"button",className:"tts-border","data-btn":"sm text pill",onClick:t},e),A=v.memo(st),Q=({label:e,isSpeaking:t,isPaused:o,onSpeak:s,onPause:r,onResume:i,onCancel:a$1})=>v.createElement(a,{as:"div","data-tts":!0},e&&v.createElement("p",null,e),!t&&v.createElement(A,{"aria-label":"Speak",onClick:s},v.createElement(b$1.PlaySolid,{size:16})),t&&!o&&v.createElement(A,{"aria-label":"Pause",onClick:r},v.createElement(b$1.PauseSolid,{size:16})),o&&v.createElement(A,{"aria-label":"Resume",onClick:i},v.createElement(b$1.ResumeSolid,{size:16})),v.createElement(A,{"aria-label":"Stop",onClick:a$1},v.createElement(b$1.StopSolid,{size:16})));Q.displayName="TextToSpeechControls";Q.TTSButton=A;var fe=Q;var de=({initialText:e="",showTextInput:t=!1,voice:o,pitch:s=1,rate:r=1,label:i,onEnd:a})=>{let{speak:l,pause:p,resume:y,cancel:u,isSpeaking:f,isPaused:I}=ce(),[g,b]=useState(e);useEffect(()=>{b(e);},[e]);let d=()=>{g.trim()!==""&&l(g,{voice:o,pitch:s,rate:r},h);},x=c=>{b(c.target.value);},h=()=>{a&&a();};return v.createElement(v.Fragment,null,t&&v.createElement(b$2,{value:g,onChange:x}),v.createElement(fe,{label:i,isSpeaking:f,isPaused:I,onSpeak:d,onPause:p,onResume:y,onCancel:u}))};de.displayName="TextToSpeechComponent";var E=e=>v.createElement(v.Fragment,null,e),it=({id:e,children:t,headerBackground:o,styles:s,classes:r,...i})=>v.createElement(a,{as:"header",id:e,styles:s,className:r,...i},o,v.createElement(a,{as:"section"},t)),at=({id:e,children:t,styles:o,classes:s,...r})=>v.createElement(a,{as:"main",id:e,styles:o,...r,className:s},t),lt=({id:e,classes:t,children:o,styles:s={},...r})=>v.createElement(a,{as:"footer",id:e,className:t,styles:s,...r},v.createElement(a,{as:"section"},o||"Copyright \xA9 2022")),pt=({id:e,children:t,styles:o={},classes:s,...r})=>v.createElement(a,{as:"aside",id:e,styles:o,className:s,...r},v.createElement(a,{as:"section"},t)),ct=({id:e,children:t,styles:o,classes:s,...r})=>v.createElement(a,{as:"section",id:e,styles:o,className:s,...r},t),ft=({id:e,children:t,styles:o,classes:s,...r})=>v.createElement(a,{as:"article",id:e,styles:o,className:s,...r},t),dt=({id:e,children:t,legend:o,description:s,descriptionId:r,styles:i,classes:a$1,...l})=>{let p=r||(s?`${e}-desc`:void 0);return v.createElement(a,{as:"fieldset",id:e,styles:i,className:a$1,"aria-describedby":p,...l},o&&v.createElement(a,{as:"legend"},o),s&&v.createElement("p",{id:p,className:"fieldset-description"},s),t)};E.displayName="Landmarks";E.Header=it;E.Main=at;E.Footer=lt;E.Aside=pt;E.Section=ct;E.Article=ft;E.Fieldset=dt;var ue=v.forwardRef(({padding:e,paddingInline:t,paddingBlock:o,margin:s,marginInline:r,marginBlock:i,width:a$1,maxWidth:l,radius:p,as:y="div",className:u,classes:f,children:I,...g},b)=>{let d=[];e&&d.push(`box-padding-${e}`),t&&d.push(`box-padding-inline-${t}`),o&&d.push(`box-padding-block-${o}`),s&&d.push(`box-margin-${s}`),r&&d.push(`box-margin-inline-${r}`),i&&d.push(`box-margin-block-${i}`),a$1&&d.push(`box-width-${a$1}`),l&&d.push(`box-max-width-${l}`),p&&d.push(`box-radius-${p}`);let x=[...d,u,f].filter(Boolean).join(" ");return v.createElement(a,{as:y,ref:b,classes:x||void 0,...g},I)});ue.displayName="Box";var ye=v.forwardRef(({gap:e,direction:t="vertical",align:o,justify:s,wrap:r,as:i="div",className:a$1,classes:l,children:p,...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 I=[...f,a$1,l].filter(Boolean).join(" ");return v.createElement(a,{as:i,ref:u,classes:I,...y},p)});ye.displayName="Stack";var ge=v.forwardRef(({gap:e,justify:t,align:o,as:s="div",className:r,classes:i,children:a$1,...l},p)=>{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 v.createElement(a,{as:s,ref:p,classes:u,...l},a$1)});ge.displayName="Cluster";var Ie=v.forwardRef(({columns:e,auto:t,minColumnWidth:o,gap:s,gapX:r,gapY:i,justifyItems:a$1,alignItems:l,as:p="div",className:y,classes:u,children:f,style:I,styles:g,...b},d)=>{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(" "),c={...I||{},...g||{}};return t&&o&&(c.gridTemplateColumns=`repeat(auto-${t}, minmax(${o}, 1fr))`),v.createElement(a,{as:p,ref:d,classes:h,style:Object.keys(c).length>0?c:void 0,...b},f)});Ie.displayName="Grid";var Y=v.forwardRef(({span:e,rowSpan:t,as:o="div",className:s,classes:r,children:i,...a$1},l)=>{let p=[];e&&p.push(`grid-col-span-${e}`),t&&p.push(`grid-row-span-${t}`);let y=[...p,s,r].filter(Boolean).join(" ");return v.createElement(a,{as:o,ref:l,classes:y,...a$1},i)});Y.displayName="GridItem";var be=Ie;be.Item=Y;var mt=be;var ve=v.forwardRef(({gap:e,justify:t,align:o,wrap:s,alwaysProportional:r=!1,as:i="div",className:a$1,classes:l,children:p,...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 I=[...f,a$1,l].filter(Boolean).join(" ");return v.createElement(a,{as:i,ref:u,classes:I,...y},p)});ve.displayName="Row";var Ce=v.forwardRef(({span:e,offset:t,order:o,auto:s=!1,as:r="div",className:i,classes:a$1,children:l,...p},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 v.createElement(a,{as:r,ref:y,classes:f,...p},l)});Ce.displayName="Col";var L=(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},Te=v.forwardRef((e,t)=>{let{variant:o,inline:s=!1,as:r="div",className:i="",styles:a$1,children:l,sm:p,md:y,lg:u,xl:f,direction:I,wrap:g,gap:b,rowGap:d,colGap:x,justify:h,align:c,alignContent:m,...F}=e,S=[];if(S.push(s?"flex-inline":"flex"),o){let U={center:"flex-center",between:"flex-between",around:"flex-around",stack:"flex-stack",spread:"flex-spread"};S.push(U[o]);}S.push(...L({direction:I,wrap:g,gap:b,rowGap:d,colGap:x,justify:h,align:c,alignContent:m})),p&&S.push(...L(p,"sm:")),y&&S.push(...L(y,"md:")),u&&S.push(...L(u,"lg:")),f&&S.push(...L(f,"xl:"));let w=[...S,i].filter(Boolean).join(" ");return v.createElement(a,{as:r,ref:t,classes:w,styles:a$1,...F},l)});Te.displayName="Flex";var we=v.forwardRef((e,t)=>{let{grow:o,shrink:s,basis:r,flex:i,alignSelf:a$1,order:l,as:p="div",className:y="",styles:u,children:f,sm:I,md:g,lg:b,xl:d,...x}=e,h=[];if(i){let m={1:"flex-1",auto:"flex-auto",initial:"flex-initial",none:"flex-none"};h.push(m[i]);}if(o!==void 0&&h.push(`flex-grow-${o}`),s!==void 0&&h.push(`flex-shrink-${s}`),r){let m={auto:"flex-basis-auto",0:"flex-basis-0",full:"flex-basis-full"};h.push(m[r]);}if(a$1){let m={auto:"self-auto",start:"self-start",end:"self-end",center:"self-center",baseline:"self-baseline",stretch:"self-stretch"};h.push(m[a$1]);}if(l){let m={first:"order-first",last:"order-last",none:"order-none"};h.push(m[l]);}if(I?.flex){let m={1:"flex-1",auto:"flex-auto",none:"flex-none"};h.push(`sm:${m[I.flex]}`);}if(g?.flex){let m={1:"flex-1",auto:"flex-auto",none:"flex-none"};h.push(`md:${m[g.flex]}`);}if(b?.flex){let m={1:"flex-1",auto:"flex-auto",none:"flex-none"};h.push(`lg:${m[b.flex]}`);}if(d?.flex){let m={1:"flex-1",auto:"flex-auto",none:"flex-none"};h.push(`xl:${m[d.flex]}`);}let c=[...h,y].filter(Boolean).join(" ");return v.createElement(a,{as:p,ref:t,classes:c,styles:u,...x},f)});we.displayName="Flex.Item";var $e=v.forwardRef((e,t)=>{let{as:o="div",className:s="",styles:r,...i}=e,a$1=["flex-1",s].filter(Boolean).join(" ");return v.createElement(a,{as:o,ref:t,classes:a$1,styles:r,...i})});$e.displayName="Flex.Spacer";var Z=Te;Z.Item=we;Z.Spacer=$e;var ut=Z;var Ee=({id:e,styles:t,classes:o,children:s,variant:r,...i})=>v.createElement(a,{as:"sup",id:e,styles:t,className:o,"data-badge":r||void 0,role:"status",...i},v.createElement(a,{as:"span"},s));Ee.displayName="Badge";var yt=({elm:e="span",role:t="note",variant:o,children:s,styles:r,...i})=>v.createElement(a,{as:e,role:t,"data-tag":o||void 0,styles:r,...i},s);yt.displayName="Tag";var ht=v.forwardRef(({summary:e,icon:t,styles:o,classes:s,ariaLabel:r,name:i,open:a$1,onPointerDown:l,onToggle:p,children:y,...u},f)=>{let I=useCallback(b=>{l?.(b);},[l]),g=useCallback(b=>{p?.(b);},[p]);return v.createElement(a,{as:"details",styles:o,classes:s,onToggle:g,ref:f,open:a$1,"aria-label":r,name:i,...u},v.createElement(a,{as:"summary",onPointerDown:I},t,e),v.createElement(a,{as:"section"},y))});ht.displayName="Details";
+      <rect width="${c}" height="${u}" fill="url(#grad-${c}-${u})"/>
+      <circle cx="${c*.15}" cy="${u*.2}" r="${Math.min(c,u)*.08}" fill="rgba(255,255,255,0.2)"/>
+      <path d="M0,${u*.75} Q${c*.25},${u*.65} ${c*.5},${u*.75} T${c},${u*.75} L${c},${u} L0,${u} 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(c,u)*.05)}" font-weight="500" fill="rgba(255,255,255,0.9)">${c}\xD7${u}</text>
+    </svg>`;return `data:image/svg+xml,${encodeURIComponent($)}`},[o,s]),m=a$1??b;return S.createElement(a,{as:"img",src:e,alt:t,width:o,height:s||"auto",loading:n,style:r,srcSet:y,sizes:x,onError:c=>{f&&f(c),c.defaultPrevented||c.currentTarget.src!==m&&(c.currentTarget.src=m);},onLoad:c=>{I?.(c);},decoding:p,...g,...l&&{fetchpriority:l}})};fe.displayName="Img";var de=({isAlertDialog:e=!1,onClose:t,dialogTitle:o,dialogLabel:s,btnLabel:r="Open Dialog",btnSize:n="sm",btnOnClick:a,children:l,onConfirm:p,confirmLabel:y="Confirm",cancelLabel:x="Cancel",className:f,hideFooter:I=!1,btnProps:g,icon:b$1})=>{let[m,d]=useState(!1),h=useRef(null),c=useCallback(P=>{d(P),!P&&t&&t();},[t]),u=useCallback(()=>{h.current=document.activeElement,d(!0),a&&a();},[a]);useEffect(()=>{if(!m&&h.current){let P=setTimeout(()=>{h.current?.focus();},100);return ()=>clearTimeout(P)}},[m]);let $={type:"button",onClick:u,"aria-haspopup":"dialog",...g};return S.createElement(S.Fragment,null,b$1?S.createElement(V,{icon:b$1,"aria-label":r,label:r,size:n,...$}):S.createElement(b,{"data-btn":n,...$},r),S.createElement(b$2,{isOpen:m,onOpenChange:c,dialogTitle:o,dialogLabel:s,className:f,isAlertDialog:e,onConfirm:p,confirmLabel:y,cancelLabel:x,hideFooter:I},l))};de.displayName="DialogModal";var ue=e=>{let[t,o]=useState([]),[s,r]=useState(e),[n,a]=useState(!1),[l,p]=useState(!1);return useEffect(()=>{let m=()=>{let d=window.speechSynthesis.getVoices();o(d);let h=d.find(c=>c.name==="Google US English");if(h)r(h);else {let c=d.find(u=>u.lang.startsWith("en-"));c&&r(c);}};return m(),window.speechSynthesis.onvoiceschanged=m,()=>{window.speechSynthesis.onvoiceschanged=null;}},[]),{speak:(m,d={},h)=>{let c=new SpeechSynthesisUtterance(m);c.lang=d.lang??"en-US",c.pitch=d.pitch??1,c.rate=d.rate??1,c.voice=s??d.voice??null,c.onend=()=>{a(!1),p(!1),h&&h();},"speechSynthesis"in window?(window.speechSynthesis.speak(c),a(!0),p(!1)):a(!1);},pause:()=>{n&&!l&&(window.speechSynthesis.pause(),p(!0));},resume:()=>{n&&l&&(window.speechSynthesis.resume(),p(!1));},cancel:()=>{n&&(window.speechSynthesis.cancel(),a(!1),p(!1));},isSpeaking:n,isPaused:l,availableVoices:t,changeVoice:m=>{r(m);},currentVoice:s,getAvailableLanguages:()=>[...new Set(t.map(m=>m.lang))]}};var ct=({children:e,onClick:t})=>S.createElement(a,{as:"button",type:"button",className:"tts-border","data-btn":"sm text pill",onClick:t},e),A=S.memo(ct),ee=({label:e,isSpeaking:t,isPaused:o,onSpeak:s,onPause:r,onResume:n,onCancel:a$1})=>S.createElement(a,{as:"div","data-tts":!0},e&&S.createElement("p",null,e),!t&&S.createElement(A,{"aria-label":"Speak",onClick:s},S.createElement(b$1.PlaySolid,{size:16})),t&&!o&&S.createElement(A,{"aria-label":"Pause",onClick:r},S.createElement(b$1.PauseSolid,{size:16})),o&&S.createElement(A,{"aria-label":"Resume",onClick:n},S.createElement(b$1.ResumeSolid,{size:16})),S.createElement(A,{"aria-label":"Stop",onClick:a$1},S.createElement(b$1.StopSolid,{size:16})));ee.displayName="TextToSpeechControls";ee.TTSButton=A;var xe=ee;var ye=({initialText:e="",showTextInput:t=!1,voice:o,pitch:s=1,rate:r=1,label:n,onEnd:a})=>{let{speak:l,pause:p,resume:y,cancel:x,isSpeaking:f,isPaused:I}=ue(),[g,b]=useState(e);useEffect(()=>{b(e);},[e]);let m=()=>{g.trim()!==""&&l(g,{voice:o,pitch:s,rate:r},h);},d=c=>{b(c.target.value);},h=()=>{a&&a();};return S.createElement(S.Fragment,null,t&&S.createElement(b$3,{value:g,onChange:d}),S.createElement(xe,{label:n,isSpeaking:f,isPaused:I,onSpeak:m,onPause:p,onResume:y,onCancel:x}))};ye.displayName="TextToSpeechComponent";var F=e=>S.createElement(S.Fragment,null,e),dt=({id:e,children:t,headerBackground:o,styles:s,classes:r,...n})=>S.createElement(a,{as:"header",id:e,styles:s,className:r,...n},o,S.createElement(a,{as:"section"},t)),ut=({id:e,children:t,styles:o,classes:s,...r})=>S.createElement(a,{as:"main",id:e,styles:o,...r,className:s},t),xt=({id:e,classes:t,children:o,styles:s={},...r})=>S.createElement(a,{as:"footer",id:e,className:t,styles:s,...r},S.createElement(a,{as:"section"},o||"Copyright \xA9 2022")),yt=({id:e,children:t,styles:o={},classes:s,...r})=>S.createElement(a,{as:"aside",id:e,styles:o,className:s,...r},S.createElement(a,{as:"section"},t)),ht=({id:e,children:t,styles:o,classes:s,...r})=>S.createElement(a,{as:"section",id:e,styles:o,className:s,...r},t),gt=({id:e,children:t,styles:o,classes:s,...r})=>S.createElement(a,{as:"article",id:e,styles:o,className:s,...r},t),It=({id:e,children:t,legend:o,description:s,descriptionId:r,styles:n,classes:a$1,...l})=>{let p=r||(s?`${e}-desc`:void 0);return S.createElement(a,{as:"fieldset",id:e,styles:n,className:a$1,"aria-describedby":p,...l},o&&S.createElement(a,{as:"legend"},o),s&&S.createElement("p",{id:p,className:"fieldset-description"},s),t)};F.displayName="Landmarks";F.Header=dt;F.Main=ut;F.Footer=xt;F.Aside=yt;F.Section=ht;F.Article=gt;F.Fieldset=It;var ge=S.forwardRef(({padding:e,paddingInline:t,paddingBlock:o,margin:s,marginInline:r,marginBlock:n,width:a$1,maxWidth:l,radius:p,as:y="div",className:x,classes:f,children:I,...g},b)=>{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}`),n&&m.push(`box-margin-block-${n}`),a$1&&m.push(`box-width-${a$1}`),l&&m.push(`box-max-width-${l}`),p&&m.push(`box-radius-${p}`);let d=[...m,x,f].filter(Boolean).join(" ");return S.createElement(a,{as:y,ref:b,classes:d||void 0,...g},I)});ge.displayName="Box";var be=S.forwardRef(({gap:e,direction:t="vertical",align:o,justify:s,wrap:r,as:n="div",className:a$1,classes:l,children:p,...y},x)=>{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 I=[...f,a$1,l].filter(Boolean).join(" ");return S.createElement(a,{as:n,ref:x,classes:I,...y},p)});be.displayName="Stack";var ve=S.forwardRef(({gap:e,justify:t,align:o,as:s="div",className:r,classes:n,children:a$1,...l},p)=>{let y=["cluster"];e&&y.push(`cluster-gap-${e}`),t&&y.push(`cluster-justify-${t}`),o&&y.push(`cluster-align-${o}`);let x=[...y,r,n].filter(Boolean).join(" ");return S.createElement(a,{as:s,ref:p,classes:x,...l},a$1)});ve.displayName="Cluster";var Se=S.forwardRef(({columns:e,auto:t,minColumnWidth:o,gap:s,gapX:r,gapY:n,justifyItems:a$1,alignItems:l,as:p="div",className:y,classes:x,children:f,style:I,styles:g,...b},m)=>{let d=["grid"];e&&d.push(`grid-cols-${e}`),t&&d.push(`grid-auto-${t}`),s&&d.push(`grid-gap-${s}`),r&&d.push(`grid-gap-x-${r}`),n&&d.push(`grid-gap-y-${n}`),a$1&&d.push(`grid-justify-items-${a$1}`),l&&d.push(`grid-align-items-${l}`);let h=[...d,y,x].filter(Boolean).join(" "),c={...I||{},...g||{}};return t&&o&&(c.gridTemplateColumns=`repeat(auto-${t}, minmax(${o}, 1fr))`),S.createElement(a,{as:p,ref:m,classes:h,style:Object.keys(c).length>0?c:void 0,...b},f)});Se.displayName="Grid";var te=S.forwardRef(({span:e,rowSpan:t,as:o="div",className:s,classes:r,children:n,...a$1},l)=>{let p=[];e&&p.push(`grid-col-span-${e}`),t&&p.push(`grid-row-span-${t}`);let y=[...p,s,r].filter(Boolean).join(" ");return S.createElement(a,{as:o,ref:l,classes:y,...a$1},n)});te.displayName="GridItem";var Ce=Se;Ce.Item=te;var bt=Ce;var we=S.forwardRef(({gap:e,justify:t,align:o,wrap:s,alwaysProportional:r=!1,as:n="div",className:a$1,classes:l,children:p,...y},x)=>{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 I=[...f,a$1,l].filter(Boolean).join(" ");return S.createElement(a,{as:n,ref:x,classes:I,...y},p)});we.displayName="Row";var Ee=S.forwardRef(({span:e,offset:t,order:o,auto:s=!1,as:r="div",className:n,classes:a$1,children:l,...p},y)=>{let x=[];s?x.push("col-auto"):e==="flex"?x.push("col-flex"):e&&x.push(`col-${e}`),t!==void 0&&x.push(`col-offset-${t}`),o!==void 0&&x.push(`col-order-${o}`);let f=[...x,n,a$1].filter(Boolean).join(" ");return S.createElement(a,{as:r,ref:y,classes:f,...p},l)});Ee.displayName="Col";var L=(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},ke=S.forwardRef((e,t)=>{let{variant:o,inline:s=!1,as:r="div",className:n="",styles:a$1,children:l,sm:p,md:y,lg:x,xl:f,direction:I,wrap:g,gap:b,rowGap:m,colGap:d,justify:h,align:c,alignContent:u,...$}=e,P=[];if(P.push(s?"flex-inline":"flex"),o){let U={center:"flex-center",between:"flex-between",around:"flex-around",stack:"flex-stack",spread:"flex-spread"};P.push(U[o]);}P.push(...L({direction:I,wrap:g,gap:b,rowGap:m,colGap:d,justify:h,align:c,alignContent:u})),p&&P.push(...L(p,"sm:")),y&&P.push(...L(y,"md:")),x&&P.push(...L(x,"lg:")),f&&P.push(...L(f,"xl:"));let w=[...P,n].filter(Boolean).join(" ");return S.createElement(a,{as:r,ref:t,classes:w,styles:a$1,...$},l)});ke.displayName="Flex";var Fe=S.forwardRef((e,t)=>{let{grow:o,shrink:s,basis:r,flex:n,alignSelf:a$1,order:l,as:p="div",className:y="",styles:x,children:f,sm:I,md:g,lg:b,xl:m,...d}=e,h=[];if(n){let u={1:"flex-1",auto:"flex-auto",initial:"flex-initial",none:"flex-none"};h.push(u[n]);}if(o!==void 0&&h.push(`flex-grow-${o}`),s!==void 0&&h.push(`flex-shrink-${s}`),r){let u={auto:"flex-basis-auto",0:"flex-basis-0",full:"flex-basis-full"};h.push(u[r]);}if(a$1){let u={auto:"self-auto",start:"self-start",end:"self-end",center:"self-center",baseline:"self-baseline",stretch:"self-stretch"};h.push(u[a$1]);}if(l){let u={first:"order-first",last:"order-last",none:"order-none"};h.push(u[l]);}if(I?.flex){let u={1:"flex-1",auto:"flex-auto",none:"flex-none"};h.push(`sm:${u[I.flex]}`);}if(g?.flex){let u={1:"flex-1",auto:"flex-auto",none:"flex-none"};h.push(`md:${u[g.flex]}`);}if(b?.flex){let u={1:"flex-1",auto:"flex-auto",none:"flex-none"};h.push(`lg:${u[b.flex]}`);}if(m?.flex){let u={1:"flex-1",auto:"flex-auto",none:"flex-none"};h.push(`xl:${u[m.flex]}`);}let c=[...h,y].filter(Boolean).join(" ");return S.createElement(a,{as:p,ref:t,classes:c,styles:x,...d},f)});Fe.displayName="Flex.Item";var Ne=S.forwardRef((e,t)=>{let{as:o="div",className:s="",styles:r,...n}=e,a$1=["flex-1",s].filter(Boolean).join(" ");return S.createElement(a,{as:o,ref:t,classes:a$1,styles:r,...n})});Ne.displayName="Flex.Spacer";var oe=ke;oe.Item=Fe;oe.Spacer=Ne;var Pt=oe;var Ue=({id:e,styles:t,classes:o,children:s,variant:r,...n})=>S.createElement(a,{as:"sup",id:e,styles:t,className:o,"data-badge":r||void 0,role:"status",...n},S.createElement(a,{as:"span"},s));Ue.displayName="Badge";var St=({elm:e="span",role:t="note",variant:o,children:s,styles:r,...n})=>S.createElement(a,{as:e,role:t,"data-tag":o||void 0,styles:r,...n},s);St.displayName="Tag";var Ct=S.forwardRef(({summary:e,icon:t,styles:o,classes:s,ariaLabel:r,name:n,open:a$1,onPointerDown:l,onToggle:p,children:y,...x},f)=>{let I=useCallback(b=>{l?.(b);},[l]),g=useCallback(b=>{p?.(b);},[p]);return S.createElement(a,{as:"details",styles:o,classes:s,onToggle:g,ref:f,open:a$1,"aria-label":r,name:n,...x},S.createElement(a,{as:"summary",onPointerDown:I},t,e),S.createElement(a,{as:"section"},y))});Ct.displayName="Details";
 
-export { ae as Alert, ft as Article, pt as Aside, Ee as Badge, ue as Box, le as Checkbox, ge as Cluster, Ce as Col, ht as Details, dt as Fieldset, ut as Flex, lt as Footer, mt as Grid, Y as GridItem, it as Header, re as IconButton, pe as Img, E as Landmarks, at as Main, ve as Row, ct as Section, ye as Stack, yt as Tag, de as TextToSpeech };
+export { pe as Alert, gt as Article, yt as Aside, Ue as Badge, ge as Box, ce as Checkbox, ve as Cluster, Ee as Col, Ct as Details, de as DialogModal, It as Fieldset, Pt as Flex, xt as Footer, bt as Grid, te as GridItem, dt as Header, V as IconButton, fe as Img, F as Landmarks, ut as Main, we as Row, ht as Section, be as Stack, St as Tag, ye as TextToSpeech };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map