@fpkit/acss 0.5.12 → 0.6.0

package/src/styles/utilities/_disabled.scss

@@ -0,0 +1,58 @@
+/**
+ * Disabled State Utility Styles
+ *
+ * Provides accessible styling for disabled form elements using aria-disabled pattern.
+ * Meets WCAG 2.1 Level AA requirements for visual distinction and contrast.
+ *
+ * WCAG References:
+ * - WCAG 1.4.3 (Contrast Minimum): UI components require 3:1 contrast minimum
+ * - WCAG 2.1.1 (Keyboard): Elements remain focusable via keyboard
+ * - WCAG 4.1.2 (Name, Role, Value): aria-disabled properly announces state
+ *
+ * Usage:
+ * - Apply .is-disabled class OR aria-disabled="true" attribute
+ * - Customize via CSS custom properties (--disabled-opacity, --disabled-cursor, --disabled-color)
+ * - Default color (hsl(0 0% 40%)) ensures 3:1 contrast on white backgrounds
+ *
+ * WARNING: If overriding --disabled-color, ensure WCAG 1.4.3 compliance
+ * (minimum 3:1 contrast ratio for UI components)
+ */
+
+.is-disabled,
+[aria-disabled='true'] {
+  /* CSS Custom Properties for theming */
+  --disabled-opacity: 0.6;
+  --disabled-cursor: not-allowed;
+  /* hsl(0 0% 40%) = #666666, provides 3:1 contrast on white (#ffffff) */
+  --disabled-color: hsl(0 0% 40%);
+
+  /* Apply disabled styles */
+  opacity: var(--disabled-opacity);
+  cursor: var(--disabled-cursor);
+  color: var(--disabled-color);
+
+  /**
+   * Maintain focus visibility for keyboard navigation (WCAG 2.4.7)
+   * Disabled elements must still be focusable and have visible focus indicators
+   *
+   * WCAG 2.4.7 requires focus indicators to have 3:1 contrast against both:
+   * - The background color
+   * - Adjacent non-focused component colors
+   *
+   * Theme authors: If providing a custom --focus-color, ensure it meets WCAG 2.4.7
+   * contrast requirements (3:1 minimum) against all background colors in your theme.
+   *
+   * Example theme customization:
+   * :root {
+   *   --focus-color: #005fcc;  // Ensure 3:1 contrast on your backgrounds
+   * }
+   */
+  &:focus-visible {
+    /* Preserve focus ring from global styles */
+    outline-width: 0.125rem; /* 2px */
+    outline-style: solid;
+    outline-offset: 0.125rem; /* 2px */
+    /* Use custom focus color with currentColor fallback */
+    outline-color: var(--focus-color, currentColor);
+  }
+}

package/src/test/setup.d.ts

@@ -0,0 +1,9 @@
+import '@testing-library/jest-dom';
+import type { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers';
+
+declare global {
+  namespace Vi {
+    interface Assertion<T = any> extends TestingLibraryMatchers<typeof expect.stringContaining, T> {}
+    interface AsymmetricMatchersContaining extends TestingLibraryMatchers<any, any> {}
+  }
+}

package/src/test/setup.ts

@@ -1,6 +1,58 @@
 import '@testing-library/jest-dom'
 
 import matchers from '@testing-library/jest-dom/matchers';
-import { expect } from 'vitest';
+import { expect, beforeAll } from 'vitest';
 
 expect.extend(matchers);
+
+// Mock native <dialog> element methods for testing
+// JSDOM doesn't support HTMLDialogElement methods yet
+beforeAll(() => {
+  if (typeof HTMLDialogElement === 'undefined') {
+    // HTMLDialogElement not available at all in this environment
+     
+    global.HTMLDialogElement = class HTMLDialogElement extends HTMLElement {
+      open = false;
+
+      showModal() {
+        this.open = true;
+        this.setAttribute('open', '');
+      }
+
+      show() {
+        this.open = true;
+        this.setAttribute('open', '');
+      }
+
+      close() {
+        this.open = false;
+        this.removeAttribute('open');
+      }
+    } as unknown as typeof window.HTMLDialogElement;
+  } else {
+    // HTMLDialogElement exists but methods aren't implemented
+    HTMLDialogElement.prototype.showModal =
+      HTMLDialogElement.prototype.showModal ||
+      function showModal(this: HTMLDialogElement) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (this as any).open = true;
+        this.setAttribute('open', '');
+      };
+
+    HTMLDialogElement.prototype.show =
+      HTMLDialogElement.prototype.show ||
+      function show(this: HTMLDialogElement) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (this as any).open = true;
+        this.setAttribute('open', '');
+      };
+
+    HTMLDialogElement.prototype.close =
+      HTMLDialogElement.prototype.close ||
+      function close(this: HTMLDialogElement) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (this as any).open = false;
+        this.removeAttribute('open');
+      };
+  }
+});

package/src/types/shared.ts

@@ -14,7 +14,7 @@ export interface ComponentProps {
   /**
    * Styles object
    */
-  styles?: {}
+  styles?: React.CSSProperties
   /**
    * Component class attribute
    */
@@ -25,7 +25,48 @@ export interface ComponentProps {
   dataStyle?: string
 }
 
-export interface SharedInputProps extends ComponentProps {
+/**
+ * Props for disabled state management across components.
+ *
+ * Supports both modern `disabled` and legacy `isDisabled` props for
+ * backward compatibility.
+ *
+ * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/keyboard WCAG 2.1.1 - Keyboard}
+ * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/name-role-value WCAG 4.1.2 - Name, Role, Value}
+ */
+export interface DisabledStateProps {
+  /**
+   * Disables the component, preventing user interaction while maintaining
+   * keyboard focusability and screen reader accessibility.
+   *
+   * Uses `aria-disabled` pattern instead of native `disabled` attribute to:
+   * - Keep elements in keyboard tab order (WCAG 2.1.1)
+   * - Allow screen readers to discover and announce disabled state
+   * - Enable tooltips and contextual help on disabled elements
+   * - Provide better visual styling control
+   *
+   * @default false
+   */
+  disabled?: boolean
+
+  /**
+   * Legacy disabled prop for backward compatibility.
+   *
+   * @deprecated Use `disabled` instead. This prop will be removed in v3.0.
+   *
+   * @migration Replace `isDisabled={true}` with `disabled={true}`
+   *
+   * @example
+   * // Before
+   * <Button isDisabled={true}>Click me</Button>
+   *
+   * // After
+   * <Button disabled={true}>Click me</Button>
+   */
+  isDisabled?: boolean
+}
+
+export interface SharedInputProps extends ComponentProps, DisabledStateProps {
   /**
    * The input name
    */
@@ -46,10 +87,6 @@ export interface SharedInputProps extends ComponentProps {
    * Input id attribute
    */
   id: string
-  /**
-   * Set the element as disabled
-   */
-  disabled?: boolean
   /**
    * Set the element as readonly
    */

package/src/utils/accessibility.ts

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

package/libs/chunk-5ZM4XL44.js

@@ -1,8 +0,0 @@
-import { a as a$1 } from './chunk-NE6YXTMC.js';
-import m from 'react';
-
-var a=({href:i,target:e,rel:p,children:l,styles:s,prefetch:t,btnStyle:c,onPointerDown:n,...f})=>{let r=p;return e==="_blank"&&(r=`noopener noreferrer ${t?"prefetch":""}`),m.createElement(a$1,{as:"a",href:i,target:e,styles:s,rel:r,onPointerDown:h=>{n&&n?.(h);},"data-btn":c,prefetch:t,...f},l)},y=a;a.displayName="Link";
-
-export { a, y as b };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-5ZM4XL44.js.map

package/libs/chunk-5ZM4XL44.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/link/link.tsx"],"names":["React","Link","href","target","rel","children","styles","prefetch","btnStyle","onPointerDown","props","relValue","ui_default","e","link_default"],"mappings":"wCACA,OAAOA,MAAW,QAqBX,IAAMC,EAAO,CAAC,CACnB,KAAAC,EACA,OAAAC,EACA,IAAAC,EACA,SAAAC,EACA,OAAAC,EACA,SAAAC,EACA,SAAAC,EACA,cAAAC,EACA,GAAGC,CACL,IAAiB,CACf,IAAIC,EAAWP,EAEf,OAAID,IAAW,WACbQ,EAAW,uBAAuBJ,EAAW,WAAa,EAAE,IAO5DP,EAAA,cAACY,EAAA,CACC,GAAG,IACH,KAAMV,EACN,OAAQC,EACR,OAAQG,EACR,IAAKK,EACL,cAXyBE,GAA6C,CACpEJ,GAAeA,IAAgBI,CAAC,CACtC,EAUI,WAAUL,EACV,SAAUD,EACT,GAAGG,GAEHL,CACH,CAEJ,EAEOS,EAAQb,EACfA,EAAK,YAAc","sourcesContent":["import UI from \"../ui\";\nimport React from \"react\";\n\nexport type LinkProps = {\n  href?: string;\n\n  target?: string;\n\n  rel?: string;\n\n  children: React.ReactNode;\n\n  styles?: React.CSSProperties;\n\n  prefetch?: boolean;\n\n  btnStyle?: string;\n\n  onPointerDown?: (event: React.PointerEvent<HTMLAnchorElement>) => void;\n} & React.ComponentProps<typeof UI> &\n  React.ComponentProps<\"a\">;\n\nexport const Link = ({\n  href,\n  target,\n  rel,\n  children,\n  styles,\n  prefetch,\n  btnStyle,\n  onPointerDown,\n  ...props\n}: LinkProps) => {\n  let relValue = rel;\n\n  if (target === \"_blank\")\n    relValue = `noopener noreferrer ${prefetch ? \"prefetch\" : \"\"}`;\n\n  const handleOnpointerDown = (e: React.PointerEvent<HTMLAnchorElement>) => {\n    if (onPointerDown) onPointerDown?.(e);\n  };\n\n  return (\n    <UI\n      as=\"a\"\n      href={href}\n      target={target}\n      styles={styles}\n      rel={relValue}\n      onPointerDown={handleOnpointerDown}\n      data-btn={btnStyle}\n      prefetch={prefetch}\n      {...props}\n    >\n      {children}\n    </UI>\n  );\n};\n\nexport default Link;\nLink.displayName = \"Link\";\n"]}

package/libs/chunk-6BVXFW7U.cjs

@@ -1,15 +0,0 @@
-'use strict';
-
-var chunk6TE5QEVE_cjs = require('./chunk-6TE5QEVE.cjs');
-var t = require('react');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var t__default = /*#__PURE__*/_interopDefault(t);
-
-var l=({label:o,labelFor:a,id:r,styles:p,classes:d,children:s,...i})=>t__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"div",id:r,styles:p,className:d,"data-style":"fields",...i},t__default.default.createElement("label",{htmlFor:a},o),s),n=l;l.displayName="Field";
-
-exports.a = l;
-exports.b = n;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-6BVXFW7U.cjs.map

package/libs/chunk-6BVXFW7U.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/fields.tsx"],"names":["React","Field","label","labelFor","id","styles","classes","children","props","ui_default","fields_default"],"mappings":"yCAAA,OAAOA,MAAW,QAmBX,IAAMC,EAAQ,CAAC,CACpB,MAAAC,EACA,SAAAC,EACA,GAAAC,EACA,OAAAC,EACA,QAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAEIR,EAAA,cAACS,EAAA,CACC,GAAG,MACH,GAAIL,EACJ,OAAQC,EACR,UAAWC,EACX,aAAW,SACV,GAAGE,GAEJR,EAAA,cAAC,SAAM,QAASG,GAAWD,CAAM,EAChCK,CACH,EAIGG,EAAQT,EACfA,EAAM,YAAc","sourcesContent":["import React from 'react'\nimport UI from '../ui'\n\nexport type FieldProps = {\n  /**\n   * The label content\n   */\n  label: React.ReactNode\n  children: React.ReactNode\n} & React.ComponentProps<'label'> &\n  Partial<React.ComponentProps<typeof UI>>\n/**\n * Field component that renders a label and children wrapped in a div element.\n * @param labelFor Defines the for attribute of the label element\n * @param styles Custom styles to be applied to the component\n * @param label The label content\n * @param children The children to be rendered inside the component\n * @param props Additional props to be spread to the component\n */\nexport const Field = ({\n  label,\n  labelFor,\n  id,\n  styles,\n  classes,\n  children,\n  ...props\n}: FieldProps) => {\n  return (\n    <UI\n      as=\"div\"\n      id={id}\n      styles={styles}\n      className={classes}\n      data-style=\"fields\"\n      {...props}\n    >\n      <label htmlFor={labelFor}>{label}</label>\n      {children}\n    </UI>\n  )\n}\n\nexport default Field\nField.displayName = 'Field'\n"]}

package/libs/chunk-6TE5QEVE.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/ui.tsx"],"names":["React","FP","as","styles","classes","children","defaultStyles","props","ref","Component","styleObj","ui_default"],"mappings":"AAEA,OAAOA,MAAW,QAgDlB,IAAMC,EAAkBD,EAAM,WAC5B,CACE,CAAE,GAAAE,EAAI,OAAAC,EAAQ,QAAAC,EAAS,SAAAC,EAAU,cAAAC,EAAe,GAAGC,CAAM,EACzDC,IACG,CACH,IAAMC,EAAYP,GAAM,MAElBQ,EAAgC,CAAE,GAAGJ,EAAe,GAAGH,CAAO,EAEpE,OACEH,EAAA,cAACS,EAAA,CAAU,IAAKD,EAAK,MAAOE,EAAU,UAAWN,EAAU,GAAGG,GAC3DF,CACH,CAEJ,CACF,EAEOM,EAAQV,EAEfA,EAAG,YAAc","sourcesContent":[" \n/* eslint-disable */\nimport React from \"react\";\n\ntype PolymorphicRef<C extends React.ElementType> =\n  React.ComponentPropsWithRef<C>[\"ref\"];\n\ntype AsProp<C extends React.ElementType> = {\n  as?: C;\n};\n\ntype PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);\n\ntype PolymorphicComponentProp<\n  C extends React.ElementType,\n  Props = {},\n> = React.PropsWithChildren<Props & AsProp<C>> &\n  Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;\n\ntype PolymorphicComponentPropWithRef<\n  C extends React.ElementType,\n  Props = {},\n> = PolymorphicComponentProp<C, Props> & {\n  ref?: PolymorphicRef<C>;\n};\n\ntype FPProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<\n  C,\n  {\n    renderStyles?: boolean;\n    styles?: React.CSSProperties;\n    classes?: string;\n    id?: string;\n    children?: React.ReactNode;\n  }\n>;\n\n/*\n * FPComponent type definition\n *\n * Defines the component function signature for the FP component.\n *\n * @typeParam C - The HTML element type to render\n * @param props - The component props\n * @returns React component\n */\ntype FPComponent = <C extends React.ElementType = \"span\">(\n  props: FPProps<C>\n) => React.ReactElement | (any & { displayName?: String });\n\nconst FP: FPComponent = React.forwardRef(\n  <C extends React.ElementType>(\n    { as, styles, classes, children, defaultStyles, ...props }: FPProps<C>,\n    ref?: PolymorphicRef<C>\n  ) => {\n    const Component = as ?? \"div\";\n\n    const styleObj: React.CSSProperties = { ...defaultStyles, ...styles };\n\n    return (\n      <Component ref={ref} style={styleObj} className={classes} {...props}>\n        {children}\n      </Component>\n    );\n  }\n);\n\nexport default FP;\n// @ts-expect-error -- React component displayName\nFP.displayName = \"FP\";\n"]}

package/libs/chunk-7K76RW2A.cjs

@@ -1,18 +0,0 @@
-'use strict';
-
-var chunkM5QL5TAE_cjs = require('./chunk-M5QL5TAE.cjs');
-var chunkKKLTUJFB_cjs = require('./chunk-KKLTUJFB.cjs');
-var chunkLHVJKDMA_cjs = require('./chunk-LHVJKDMA.cjs');
-var chunk6TE5QEVE_cjs = require('./chunk-6TE5QEVE.cjs');
-var r = require('react');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var r__default = /*#__PURE__*/_interopDefault(r);
-
-var k=({dialogTitle:e,onClick:o,type:i="h3"})=>r__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"div",classes:"dialog-header"},r__default.default.createElement(chunkM5QL5TAE_cjs.a,{type:i,className:"dialog-title"},e||"Dialog"),r__default.default.createElement(chunkLHVJKDMA_cjs.b,{type:"button",onClick:()=>{o();},className:"dialog-close","aria-label":"Close dialog","data-btn":"icon"},r__default.default.createElement(chunkKKLTUJFB_cjs.b,null,r__default.default.createElement(chunkKKLTUJFB_cjs.b.Remove,{size:16})))),y=r__default.default.memo(k);k.displayName="DialogHeader";var E=({onClose:e,onConfirm:o,confirmLabel:i,cancelLabel:t})=>r__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"section",className:"dialog-footer"},t&&r__default.default.createElement(chunkLHVJKDMA_cjs.b,{type:"button",onClick:e,className:"dialog-button button-secondary","data-btn":"sm"},t),o&&r__default.default.createElement(chunkLHVJKDMA_cjs.b,{type:"button",onClick:o,className:"dialog-button button-primary","data-btn":"sm"},i)),P=E;var H=(e,o)=>r.useCallback(t=>{let l=e.current?.getBoundingClientRect();l&&(t.clientY<l.top||t.clientY>l.bottom||t.clientX<l.left||t.clientX>l.right)&&o();},[e,o]);var x=({showDialog:e,isAlertDialog:o,onClose:i,dialogTitle:t,dialogLabel:l,children:u,onConfirm:h,confirmLabel:I="Confirm",cancelLabel:L="Cancel",className:C="",hideFooter:N,styles:M})=>{let m=r.useRef(null),[g,b]=r__default.default.useState(e);r.useEffect(()=>{b(e);},[e]),r.useEffect(()=>{let n=m.current;n&&(g?o?n.show():n.showModal():n.close());},[g,o]);let c=()=>{i&&i(),b(!1);},U=H(m,c);return r__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"dialog",role:o?"alertdialog":"dialog",ref:m,onClose:c,onClick:U,"aria-modal":g?"true":void 0,className:`dialog-modal ${C}`,"aria-label":l,style:M},r__default.default.createElement(y,{dialogTitle:t,onClick:c}),r__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"section",className:`dialog-content ${C}`,onClick:n=>n.stopPropagation()},u,!N&&r__default.default.createElement(P,{onClose:c,onConfirm:h,confirmLabel:I,cancelLabel:L})))},A=r__default.default.memo(x);
-
-exports.a = x;
-exports.b = A;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-7K76RW2A.cjs.map

package/libs/chunk-7K76RW2A.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/dialog/dialog.tsx","../src/components/dialog/views/dialog-header.tsx","../src/components/dialog/views/dialog-footer.tsx","../src/hooks/useDialogClickHandler.ts"],"names":["React","useRef","useEffect","DialogHeader","dialogTitle","onClick","type","ui_default","heading_default","button_default","icon_default","dialog_header_default","DialogFooter","onClose","onConfirm","confirmLabel","cancelLabel","dialog_footer_default","useCallback","useDialogClickHandler","dialogRef","handleClose","e","dialogDimensions","Dialog","showDialog","isAlertDialog","dialogLabel","children","className","hideFooter","styles","isOpen","setIsOpen","dialog","handleClickOutside","dialog_default"],"mappings":"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","sourcesContent":["import React, { useRef, useEffect, CSSProperties } from \"react\";\nimport UI from \"#components/ui\";\nimport DialogHeader from \"#components/dialog/views/dialog-header\";\nimport DialogFooter from \"#components/dialog/views/dialog-footer\";\nimport { useDialogClickHandler } from \"#hooks/useDialogClickHandler.js\";\n\n/**\n * Defines the props for the Dialog component.\n *\n * @property {boolean} [showDialog] - Determines whether the dialog should be shown.\n * @property {boolean} [isAlertDialog] - Determines whether the dialog should be displayed as an alert dialog.\n * @property {() => void} [onClose] - A callback function to be called when the dialog is closed.\n * @property {string} dialogTitle - The title of the dialog.\n * @property {string} [dialogLabel] - An optional label for the dialog.\n * @property {React.ReactNode} children - The content to be displayed inside the dialog.\n * @property {() => void | Promise<void>} [onConfirm] - A callback function to be called when the user confirms the dialog.\n * @property {string} [confirmLabel] - The label for the confirm button.\n * @property {string} [cancelLabel] - The label for the cancel button.\n * @property {string} [className] - An optional CSS class name to be applied to the dialog.\n * @property {CSSProperties} [styles] - Optional inline styles to be applied to the dialog.\n */\ntype DialogModalProps = React.ComponentProps<typeof UI> &\n  React.ComponentProps<\"dialog\"> & {\n    dialogTitle: string;\n    dialogLabel?: string;\n    children: React.ReactNode;\n    showDialog?: boolean;\n    isAlertDialog?: boolean;\n    onClose?: () => void;\n    onConfirm?: () => void | Promise<void>;\n    confirmLabel?: string;\n    cancelLabel?: string;\n    className?: string;\n    hideFooter?: boolean;\n    styles?: CSSProperties;\n  };\n\n/**\n * Renders a dialog modal component with customizable content and behavior.\n *\n * @param showDialog - Determines whether the dialog should be shown.\n * @param isAlertDialog - Determines whether the dialog should be displayed as an alert dialog.\n * @param onClose - A callback function to be called when the dialog is closed.\n * @param dialogTitle - The title of the dialog.\n * @param dialogLabel - An optional label for the dialog.\n * @param children - The content to be displayed inside the dialog.\n * @param onConfirm - A callback function to be called when the user confirms the dialog.\n * @param confirmLabel - The label for the confirm button.\n * @param cancelLabel - The label for the cancel button.\n * @param className - An optional CSS class name to be applied to the dialog.\n * @param styles - Optional inline styles to be applied to the dialog.\n */\nexport const Dialog: React.FC<DialogModalProps> = ({\n  showDialog,\n  isAlertDialog,\n  onClose,\n  dialogTitle,\n  dialogLabel,\n  children,\n  onConfirm,\n  confirmLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  className = \"\",\n  hideFooter,\n  styles,\n}) => {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const [isOpen, setIsOpen] = React.useState(showDialog);\n\n  useEffect(() => {\n    setIsOpen(showDialog);\n  }, [showDialog]);\n\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n\n    if (isOpen) {\n      if (isAlertDialog) {\n        dialog.show();\n      } else {\n        dialog.showModal();\n      }\n    } else {\n      dialog.close();\n    }\n  }, [isOpen, isAlertDialog]);\n\n  const handleClose = () => {\n    if (onClose) onClose();\n    setIsOpen(false);\n  };\n\n  const handleClickOutside = useDialogClickHandler(dialogRef, handleClose);\n\n  return (\n    <UI\n      as=\"dialog\"\n      role={isAlertDialog ? \"alertdialog\" : \"dialog\"}\n      ref={dialogRef}\n      onClose={handleClose}\n      onClick={handleClickOutside}\n      aria-modal={isOpen ? \"true\" : undefined}\n      className={`${\"dialog-modal\"} ${className}`}\n      aria-label={dialogLabel}\n      style={styles}\n    >\n      <DialogHeader dialogTitle={dialogTitle} onClick={handleClose} />\n\n      <UI\n        as=\"section\"\n        className={`dialog-content ${className}`}\n        onClick={(e: React.MouseEvent) => e.stopPropagation()}\n      >\n        {children}\n        {!hideFooter && (\n          <DialogFooter\n            onClose={handleClose}\n            onConfirm={onConfirm}\n            confirmLabel={confirmLabel}\n            cancelLabel={cancelLabel}\n          />\n        )}\n      </UI>\n    </UI>\n  );\n};\nexport default React.memo(Dialog);\n","import React from \"react\";\nimport UI from \"#components/ui\";\nimport Heading from \"#components/heading/heading\";\nimport Button from \"#components/buttons/button\";\nimport Icon from \"#components/icons/icon\";\n\nexport type DialogHeaderProps = {\n  dialogTitle: string;\n  onClick: () => void;\n} & React.ComponentProps<typeof Heading>;\n\n/**\n * DialogHeader component displays the header section of a dialog with a title and close button.\n *\n * @component\n * @param {Object} props - Component props\n * @param {string} props.dialogTitle - The title text to display in the dialog header\n * @param {() => void} props.onClick - Callback function triggered when close button is clicked\n * @param {string} [props.type='h3'] - Heading type/level to use for the title\n * @returns {JSX.Element} A dialog header with title and close button\n *\n * @example\n * ```jsx\n * <DialogHeader\n *   dialogTitle=\"Confirm Action\"\n *   onClick={() => setIsOpen(false)}\n *   type=\"h2\"\n * />\n * ```\n */\n\nconst DialogHeader = ({\n  dialogTitle,\n  onClick,\n  type = \"h3\",\n}: DialogHeaderProps): JSX.Element => {\n  const handleClose = () => {\n    onClick();\n  };\n  return (\n    <UI as=\"div\" classes=\"dialog-header\">\n      <Heading type={type} className=\"dialog-title\">\n        {dialogTitle || \"Dialog\"}\n      </Heading>\n      <Button\n        type=\"button\"\n        onClick={handleClose}\n        className=\"dialog-close\"\n        aria-label=\"Close dialog\"\n        data-btn=\"icon\"\n      >\n        <Icon>\n          <Icon.Remove size={16} />\n        </Icon>\n      </Button>\n    </UI>\n  );\n};\n\nexport default React.memo(DialogHeader);\nDialogHeader.displayName = \"DialogHeader\";\n","import React from \"react\";\nimport UI from \"#components/ui\";\nimport Button from \"#components/buttons/button\";\n\ntype DialogFooterProps = {\n  onClose: () => void;\n  onConfirm?: () => void | Promise<void>;\n  confirmLabel: string;\n  cancelLabel: string;\n};\n\nconst DialogFooter: React.FC<DialogFooterProps> = ({\n  onClose,\n  onConfirm,\n  confirmLabel,\n  cancelLabel,\n}) => {\n  return (\n    <UI as=\"section\" className=\"dialog-footer\">\n      {cancelLabel && (\n        <Button\n          type=\"button\"\n          onClick={onClose}\n          className=\"dialog-button button-secondary\"\n          data-btn=\"sm\"\n        >\n          {cancelLabel}\n        </Button>\n      )}\n\n      {onConfirm && (\n        <Button\n          type=\"button\"\n          onClick={onConfirm}\n          className=\"dialog-button button-primary\"\n          data-btn=\"sm\"\n        >\n          {confirmLabel}\n        </Button>\n      )}\n    </UI>\n  );\n};\n\nexport default DialogFooter;\n","import { useCallback, RefObject } from \"react\";\n\nexport const useDialogClickHandler = (\n  dialogRef: RefObject<HTMLDialogElement>,\n  handleClose: () => void\n) => {\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLDialogElement>) => {\n      const dialogDimensions = dialogRef.current?.getBoundingClientRect();\n      if (dialogDimensions) {\n        const isClickOutside =\n          e.clientY < dialogDimensions.top ||\n          e.clientY > dialogDimensions.bottom ||\n          e.clientX < dialogDimensions.left ||\n          e.clientX > dialogDimensions.right;\n\n        if (isClickOutside) {\n          handleClose();\n        }\n      }\n    },\n    [dialogRef, handleClose]\n  );\n\n  return handleClick;\n};\n"]}

package/libs/chunk-BHRQBJRY.js

@@ -1,8 +0,0 @@
-import { a } from './chunk-P7TTEYCD.js';
-import R from 'react';
-
-var m=({type:a$1="text",name:c,value:i,placeholder:d,id:f,styles:y,classes:I,isDisabled:p,disabled:t,readonly:r,required:n,ref:h,onChange:o,onBlur:l,onPointerDown:u,...E})=>{let x=e=>{o&&!t&&o?.(e);},v=e=>{l&&!t&&l?.(e);},P=e=>{u&&!t&&(e.preventDefault(),u?.(e));};return R.createElement(a,{as:"input",id:f,type:a$1,placeholder:d||`${n?"*":""} ${a$1} input `,className:I,styles:y,onChange:x,onBlur:v,onKeyDown:P,value:i,name:c,ref:h,"aria-disabled":p,tabIndex:p?-1:void 0,"aria-readonly":r,"aria-required":n,required:n,readOnly:r,...E})};m.displayName="Input";var F=m;
-
-export { m as a, F as b };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-BHRQBJRY.js.map

package/libs/chunk-BHRQBJRY.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/inputs.tsx"],"names":["React","Input","type","name","value","placeholder","id","styles","classes","isDisabled","disabled","readonly","required","ref","onChange","onBlur","onPointerDown","props","handleChange","handleBlur","handleKeyDown","fp_default","inputs_default"],"mappings":"wCAAA,OAAOA,MAAW,QAeX,IAAMC,EAAQ,CAAC,CACpB,KAAAC,EAAO,OACP,KAAAC,EACA,MAAAC,EACA,YAAAC,EACA,GAAAC,EACA,OAAAC,EACA,QAAAC,EACA,WAAAC,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,IAAAC,EACA,SAAAC,EACA,OAAAC,EACA,cAAAC,EACA,GAAGC,CACL,IAA+B,CAC7B,IAAMC,EAAgB,GAA2C,CAC3DJ,GAAY,CAACJ,GACfI,IAAW,CAAC,CAEhB,EAEMK,EAAc,GAA0C,CACxDJ,GAAU,CAACL,GACbK,IAAS,CAAC,CAEd,EAEMK,EAAiB,GAA6C,CAC9DJ,GAAiB,CAACN,IACpB,EAAE,eAAe,EACjBM,IAAgB,CAAC,EAErB,EAEA,OACEhB,EAAA,cAACqB,EAAA,CACC,GAAG,QACH,GAAIf,EACJ,KAAMJ,EACN,YAAaG,GAAe,GAAGO,EAAW,IAAM,EAAE,IAAIV,CAAI,UAC1D,UAAWM,EACX,OAAQD,EACR,SAAUW,EACV,OAAQC,EACR,UAAWC,EACX,MAAOhB,EACP,KAAMD,EACN,IAAKU,EACL,gBAAeJ,EACf,SAAUA,EAAa,GAAK,OAC5B,gBAAeE,EACf,gBAAeC,EACf,SAAUA,EACV,SAAUD,EACT,GAAGM,EACN,CAEJ,EACAhB,EAAM,YAAc,QACpB,IAAOqB,EAAQrB","sourcesContent":["import React from \"react\";\nimport FP from \"../fp\";\n\nexport type InputProps = {\n  /**\n   * The type of the input.\n   */\n  type?: \"text\" | \"password\" | \"email\" | \"number\" | \"tel\" | \"url\" | \"search\";\n\n  /**\n   * Set the element as disabled\n   */\n  isDisabled?: boolean;\n} & React.ComponentProps<typeof FP>;\n\nexport const Input = ({\n  type = \"text\",\n  name,\n  value,\n  placeholder,\n  id,\n  styles,\n  classes,\n  isDisabled,\n  disabled,\n  readonly,\n  required,\n  ref,\n  onChange,\n  onBlur,\n  onPointerDown,\n  ...props\n}: InputProps): JSX.Element => {\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (onChange && !disabled) {\n      onChange?.(e);\n    }\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (onBlur && !disabled) {\n      onBlur?.(e);\n    }\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (onPointerDown && !disabled) {\n      e.preventDefault();\n      onPointerDown?.(e);\n    }\n  };\n\n  return (\n    <FP\n      as=\"input\"\n      id={id}\n      type={type}\n      placeholder={placeholder || `${required ? \"*\" : \"\"} ${type} input `}\n      className={classes}\n      styles={styles}\n      onChange={handleChange}\n      onBlur={handleBlur}\n      onKeyDown={handleKeyDown}\n      value={value}\n      name={name}\n      ref={ref}\n      aria-disabled={isDisabled}\n      tabIndex={isDisabled ? -1 : undefined}\n      aria-readonly={readonly}\n      aria-required={required}\n      required={required}\n      readOnly={readonly}\n      {...props}\n    />\n  );\n};\nInput.displayName = \"Input\";\nexport default Input;\n"]}

package/libs/chunk-BIP2NY53.js

@@ -1,8 +0,0 @@
-import { a } from './chunk-NE6YXTMC.js';
-import t from 'react';
-
-var l=({label:o,labelFor:a$1,id:r,styles:p,classes:d,children:s,...i})=>t.createElement(a,{as:"div",id:r,styles:p,className:d,"data-style":"fields",...i},t.createElement("label",{htmlFor:a$1},o),s),n=l;l.displayName="Field";
-
-export { l as a, n as b };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-BIP2NY53.js.map

package/libs/chunk-BIP2NY53.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/fields.tsx"],"names":["React","Field","label","labelFor","id","styles","classes","children","props","ui_default","fields_default"],"mappings":"wCAAA,OAAOA,MAAW,QAmBX,IAAMC,EAAQ,CAAC,CACpB,MAAAC,EACA,SAAAC,EACA,GAAAC,EACA,OAAAC,EACA,QAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAEIR,EAAA,cAACS,EAAA,CACC,GAAG,MACH,GAAIL,EACJ,OAAQC,EACR,UAAWC,EACX,aAAW,SACV,GAAGE,GAEJR,EAAA,cAAC,SAAM,QAASG,GAAWD,CAAM,EAChCK,CACH,EAIGG,EAAQT,EACfA,EAAM,YAAc","sourcesContent":["import React from 'react'\nimport UI from '../ui'\n\nexport type FieldProps = {\n  /**\n   * The label content\n   */\n  label: React.ReactNode\n  children: React.ReactNode\n} & React.ComponentProps<'label'> &\n  Partial<React.ComponentProps<typeof UI>>\n/**\n * Field component that renders a label and children wrapped in a div element.\n * @param labelFor Defines the for attribute of the label element\n * @param styles Custom styles to be applied to the component\n * @param label The label content\n * @param children The children to be rendered inside the component\n * @param props Additional props to be spread to the component\n */\nexport const Field = ({\n  label,\n  labelFor,\n  id,\n  styles,\n  classes,\n  children,\n  ...props\n}: FieldProps) => {\n  return (\n    <UI\n      as=\"div\"\n      id={id}\n      styles={styles}\n      className={classes}\n      data-style=\"fields\"\n      {...props}\n    >\n      <label htmlFor={labelFor}>{label}</label>\n      {children}\n    </UI>\n  )\n}\n\nexport default Field\nField.displayName = 'Field'\n"]}

package/libs/chunk-BSPKFLO4.js

@@ -1,8 +0,0 @@
-import { a } from './chunk-NE6YXTMC.js';
-import i from 'react';
-
-var c=({children:e,className:t,styles:s,as:a$1="h3",...l})=>i.createElement(a,{as:a$1,className:`card-title ${t||""}`,styles:s,...l},e);c.displayName="Title";var n=({children:e,className:t,styles:s,...a$1})=>i.createElement(a,{as:"article",className:`card-content ${t||""}`,styles:s,...a$1},e);n.displayName="Content";var d=({children:e,className:t,styles:s,...a$1})=>i.createElement(a,{as:"div",className:`card-footer ${t||""}`,styles:s,...a$1},e);d.displayName="Footer";var o=({elm:e="div",styles:t,children:s,classes:a$1="shadow",id:l,...p})=>i.createElement(a,{as:e,id:l,styles:t,className:a$1,"data-card":!0,...p},s),C=o;o.displayName="Card";o.Title=c;o.Content=n;o.Footer=d;
-
-export { c as a, n as b, d as c, o as d, C as e };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-BSPKFLO4.js.map

package/libs/chunk-BSPKFLO4.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/cards/card.tsx"],"names":["React","Title","children","className","styles","as","props","ui_default","Content","Footer","Card","elm","classes","id","card_default"],"mappings":"wCAAA,OAAOA,MAAW,QA4BX,IAAMC,EAAQ,CAAC,CACpB,SAAAC,EACA,UAAAC,EACA,OAAAC,EACA,GAAAC,EAAK,KACL,GAAGC,CACL,IAMIN,EAAA,cAACO,EAAA,CACC,GAAIF,EACJ,UAAW,cAAcF,GAAa,EAAE,GACxC,OAAQC,EACP,GAAGE,GAEHJ,CACH,EAIJD,EAAM,YAAc,QAcb,IAAMO,EAAU,CAAC,CACtB,SAAAN,EACA,UAAAC,EACA,OAAAC,EACA,GAAGE,CACL,IAKIN,EAAA,cAACO,EAAA,CACC,GAAG,UACH,UAAW,gBAAgBJ,GAAa,EAAE,GAC1C,OAAQC,EACP,GAAGE,GAEHJ,CACH,EAIJM,EAAQ,YAAc,UAcf,IAAMC,EAAS,CAAC,CACrB,SAAAP,EACA,UAAAC,EACA,OAAAC,EACA,GAAGE,CACL,IAKIN,EAAA,cAACO,EAAA,CACC,GAAG,MACH,UAAW,eAAeJ,GAAa,EAAE,GACzC,OAAQC,EACP,GAAGE,GAEHJ,CACH,EAIJO,EAAO,YAAc,SAgBd,IAAMC,EAAO,CAAC,CACnB,IAAAC,EAAM,MACN,OAAAP,EACA,SAAAF,EACA,QAAAU,EAAU,SACV,GAAAC,EACA,GAAGP,CACL,IAEIN,EAAA,cAACO,EAAA,CACC,GAAII,EACJ,GAAIE,EACJ,OAAQT,EACR,UAAWQ,EACX,YAAS,GACR,GAAGN,GAEHJ,CACH,EAIGY,EAAQJ,EACfA,EAAK,YAAc,OACnBA,EAAK,MAAQT,EACbS,EAAK,QAAUF,EACfE,EAAK,OAASD","sourcesContent":["import React from 'react'\nimport UI from '#components/ui'\n\n/*\n * CardProps interface\n *\n * Extends ComponentProps. Defines props for the Card component.\n *\n * @property {('div' | 'aside' | 'section' | 'article')} [elm='div'] - HTML element to render as\n */\nexport type CardProps = {\n  elm?: 'div' | 'aside' | 'section' | 'article'\n  title?: React.ReactNode\n  footer?: React.ReactNode\n} & React.ComponentProps<typeof UI>\n\n/*\n * Title component\n *\n * Renders a title for the Card component using the UI component.\n *\n * @param {Object} props - Component props\n * @param {ReactNode} props.children - Title content\n * @param {string} [props.className] - Additional CSS classes\n * @param {Object} [props.styles] - Inline styles\n *\n * @returns {ReactElement} Title component\n */\nexport const Title = ({\n  children,\n  className,\n  styles,\n  as = 'h3',\n  ...props\n}: React.PropsWithChildren<{\n  className?: string\n  styles?: React.CSSProperties\n  as?: React.ElementType\n}>) => {\n  return (\n    <UI\n      as={as}\n      className={`card-title ${className || ''}`}\n      styles={styles}\n      {...props}\n    >\n      {children}\n    </UI>\n  )\n}\n\nTitle.displayName = 'Title'\n\n/*\n * CardContent component\n *\n * Renders the content of the Card component using the UI component with an article element.\n *\n * @param {Object} props - Component props\n * @param {ReactNode} props.children - Content\n * @param {string} [props.className] - Additional CSS classes\n * @param {Object} [props.styles] - Inline styles\n *\n * @returns {ReactElement} CardContent component\n */\nexport const Content = ({\n  children,\n  className,\n  styles,\n  ...props\n}: React.PropsWithChildren<{\n  className?: string\n  styles?: React.CSSProperties\n}>) => {\n  return (\n    <UI\n      as=\"article\"\n      className={`card-content ${className || ''}`}\n      styles={styles}\n      {...props}\n    >\n      {children}\n    </UI>\n  )\n}\n\nContent.displayName = 'Content'\n\n/*\n * Footer component\n *\n * Renders a footer section for the Card component using the UI component.\n *\n * @param {Object} props - Component props\n * @param {ReactNode} props.children - Footer content\n * @param {string} [props.className] - Additional CSS classes\n * @param {Object} [props.styles] - Inline styles\n *\n * @returns {ReactElement} Footer component\n */\nexport const Footer = ({\n  children,\n  className,\n  styles,\n  ...props\n}: React.PropsWithChildren<{\n  className?: string\n  styles?: React.CSSProperties\n}>) => {\n  return (\n    <UI\n      as=\"div\"\n      className={`card-footer ${className || ''}`}\n      styles={styles}\n      {...props}\n    >\n      {children}\n    </UI>\n  )\n}\n\nFooter.displayName = 'Footer'\n\n/*\n * Card component\n *\n * Renders a card container.\n *\n * @param {CardProps} props - Component props\n * @param {('div' | 'aside' | 'section' | 'article')} [props.elm='div'] - Element to render as\n * @param {Object} [props.styles] - CSS styles to apply\n * @param {ReactNode} props.children - Card content\n * @param {boolean} [props.renderStyles=true] - Whether to render default styles\n * @param {string} [props.dataStyle] - data-card attribute value\n * @param {string} [props.id] - Unique ID\n * @returns {ReactElement} Card component\n */\nexport const Card = ({\n  elm = 'div',\n  styles,\n  children,\n  classes = 'shadow',\n  id,\n  ...props\n}: CardProps) => {\n  return (\n    <UI\n      as={elm}\n      id={id}\n      styles={styles}\n      className={classes}\n      data-card\n      {...props}\n    >\n      {children}\n    </UI>\n  )\n}\n\nexport default Card\nCard.displayName = 'Card'\nCard.Title = Title\nCard.Content = Content\nCard.Footer = Footer\n"]}

package/libs/chunk-BV5CLH44.cjs

@@ -1,18 +0,0 @@
-'use strict';
-
-var chunk6TE5QEVE_cjs = require('./chunk-6TE5QEVE.cjs');
-var i = require('react');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var i__default = /*#__PURE__*/_interopDefault(i);
-
-var c=({children:e,className:t,styles:s,as:a="h3",...l})=>i__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:a,className:`card-title ${t||""}`,styles:s,...l},e);c.displayName="Title";var n=({children:e,className:t,styles:s,...a})=>i__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"article",className:`card-content ${t||""}`,styles:s,...a},e);n.displayName="Content";var d=({children:e,className:t,styles:s,...a})=>i__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"div",className:`card-footer ${t||""}`,styles:s,...a},e);d.displayName="Footer";var o=({elm:e="div",styles:t,children:s,classes:a="shadow",id:l,...p})=>i__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:e,id:l,styles:t,className:a,"data-card":!0,...p},s),C=o;o.displayName="Card";o.Title=c;o.Content=n;o.Footer=d;
-
-exports.a = c;
-exports.b = n;
-exports.c = d;
-exports.d = o;
-exports.e = C;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-BV5CLH44.cjs.map

package/libs/chunk-BV5CLH44.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/cards/card.tsx"],"names":["React","Title","children","className","styles","as","props","ui_default","Content","Footer","Card","elm","classes","id","card_default"],"mappings":"yCAAA,OAAOA,MAAW,QA4BX,IAAMC,EAAQ,CAAC,CACpB,SAAAC,EACA,UAAAC,EACA,OAAAC,EACA,GAAAC,EAAK,KACL,GAAGC,CACL,IAMIN,EAAA,cAACO,EAAA,CACC,GAAIF,EACJ,UAAW,cAAcF,GAAa,EAAE,GACxC,OAAQC,EACP,GAAGE,GAEHJ,CACH,EAIJD,EAAM,YAAc,QAcb,IAAMO,EAAU,CAAC,CACtB,SAAAN,EACA,UAAAC,EACA,OAAAC,EACA,GAAGE,CACL,IAKIN,EAAA,cAACO,EAAA,CACC,GAAG,UACH,UAAW,gBAAgBJ,GAAa,EAAE,GAC1C,OAAQC,EACP,GAAGE,GAEHJ,CACH,EAIJM,EAAQ,YAAc,UAcf,IAAMC,EAAS,CAAC,CACrB,SAAAP,EACA,UAAAC,EACA,OAAAC,EACA,GAAGE,CACL,IAKIN,EAAA,cAACO,EAAA,CACC,GAAG,MACH,UAAW,eAAeJ,GAAa,EAAE,GACzC,OAAQC,EACP,GAAGE,GAEHJ,CACH,EAIJO,EAAO,YAAc,SAgBd,IAAMC,EAAO,CAAC,CACnB,IAAAC,EAAM,MACN,OAAAP,EACA,SAAAF,EACA,QAAAU,EAAU,SACV,GAAAC,EACA,GAAGP,CACL,IAEIN,EAAA,cAACO,EAAA,CACC,GAAII,EACJ,GAAIE,EACJ,OAAQT,EACR,UAAWQ,EACX,YAAS,GACR,GAAGN,GAEHJ,CACH,EAIGY,EAAQJ,EACfA,EAAK,YAAc,OACnBA,EAAK,MAAQT,EACbS,EAAK,QAAUF,EACfE,EAAK,OAASD","sourcesContent":["import React from 'react'\nimport UI from '#components/ui'\n\n/*\n * CardProps interface\n *\n * Extends ComponentProps. Defines props for the Card component.\n *\n * @property {('div' | 'aside' | 'section' | 'article')} [elm='div'] - HTML element to render as\n */\nexport type CardProps = {\n  elm?: 'div' | 'aside' | 'section' | 'article'\n  title?: React.ReactNode\n  footer?: React.ReactNode\n} & React.ComponentProps<typeof UI>\n\n/*\n * Title component\n *\n * Renders a title for the Card component using the UI component.\n *\n * @param {Object} props - Component props\n * @param {ReactNode} props.children - Title content\n * @param {string} [props.className] - Additional CSS classes\n * @param {Object} [props.styles] - Inline styles\n *\n * @returns {ReactElement} Title component\n */\nexport const Title = ({\n  children,\n  className,\n  styles,\n  as = 'h3',\n  ...props\n}: React.PropsWithChildren<{\n  className?: string\n  styles?: React.CSSProperties\n  as?: React.ElementType\n}>) => {\n  return (\n    <UI\n      as={as}\n      className={`card-title ${className || ''}`}\n      styles={styles}\n      {...props}\n    >\n      {children}\n    </UI>\n  )\n}\n\nTitle.displayName = 'Title'\n\n/*\n * CardContent component\n *\n * Renders the content of the Card component using the UI component with an article element.\n *\n * @param {Object} props - Component props\n * @param {ReactNode} props.children - Content\n * @param {string} [props.className] - Additional CSS classes\n * @param {Object} [props.styles] - Inline styles\n *\n * @returns {ReactElement} CardContent component\n */\nexport const Content = ({\n  children,\n  className,\n  styles,\n  ...props\n}: React.PropsWithChildren<{\n  className?: string\n  styles?: React.CSSProperties\n}>) => {\n  return (\n    <UI\n      as=\"article\"\n      className={`card-content ${className || ''}`}\n      styles={styles}\n      {...props}\n    >\n      {children}\n    </UI>\n  )\n}\n\nContent.displayName = 'Content'\n\n/*\n * Footer component\n *\n * Renders a footer section for the Card component using the UI component.\n *\n * @param {Object} props - Component props\n * @param {ReactNode} props.children - Footer content\n * @param {string} [props.className] - Additional CSS classes\n * @param {Object} [props.styles] - Inline styles\n *\n * @returns {ReactElement} Footer component\n */\nexport const Footer = ({\n  children,\n  className,\n  styles,\n  ...props\n}: React.PropsWithChildren<{\n  className?: string\n  styles?: React.CSSProperties\n}>) => {\n  return (\n    <UI\n      as=\"div\"\n      className={`card-footer ${className || ''}`}\n      styles={styles}\n      {...props}\n    >\n      {children}\n    </UI>\n  )\n}\n\nFooter.displayName = 'Footer'\n\n/*\n * Card component\n *\n * Renders a card container.\n *\n * @param {CardProps} props - Component props\n * @param {('div' | 'aside' | 'section' | 'article')} [props.elm='div'] - Element to render as\n * @param {Object} [props.styles] - CSS styles to apply\n * @param {ReactNode} props.children - Card content\n * @param {boolean} [props.renderStyles=true] - Whether to render default styles\n * @param {string} [props.dataStyle] - data-card attribute value\n * @param {string} [props.id] - Unique ID\n * @returns {ReactElement} Card component\n */\nexport const Card = ({\n  elm = 'div',\n  styles,\n  children,\n  classes = 'shadow',\n  id,\n  ...props\n}: CardProps) => {\n  return (\n    <UI\n      as={elm}\n      id={id}\n      styles={styles}\n      className={classes}\n      data-card\n      {...props}\n    >\n      {children}\n    </UI>\n  )\n}\n\nexport default Card\nCard.displayName = 'Card'\nCard.Title = Title\nCard.Content = Content\nCard.Footer = Footer\n"]}

package/libs/chunk-DKGJHKGW.js

@@ -1,9 +0,0 @@
-import { b } from './chunk-5ZM4XL44.js';
-import { a } from './chunk-NE6YXTMC.js';
-import e from 'react';
-
-var I=(t,r=15)=>t.length>r?`${t.slice(0,r)}...`:t;var f=({styles:t,id:r,classes:o,children:a,...p})=>e.createElement("li",{id:r,style:t,className:o,"data-list":"unstyled inline",...p},a),C=({children:t,...r})=>e.createElement(a,{as:"ol","data-list":"unstyled inline",...r},t),N=({styles:t,id:r,classes:o,children:a$1,...p})=>e.createElement(a,{as:"nav",id:r,styles:t,className:o,...p},e.createElement(C,null,a$1)),m=({startRoute:t="Home",startRouteUrl:r="/",currentRoute:o,spacer:a=e.createElement(e.Fragment,null,"/"),routes:p,styles:U,id:$,classes:k,ariaLabelPrefix:L,truncateLength:d=15,linkProps:b$1,...v})=>{let[P,w]=e.useState("");e.useEffect(()=>{let n=o||window.location.pathname;n.length&&w(n);},[o]);let x=n=>{let i=p?.find(c=>c.path===n);return {path:i?.path||n,name:i?.name||n,url:i?.url||n}},s=P.split("/").filter(n=>n),u=s.length-1,g=e.useId();return P.length?e.createElement(N,{id:$,...v,styles:U,className:k,"aria-label":L},e.createElement(f,{key:`${t}-${g}`},e.createElement(b,{href:r,...b$1},t)),e.createElement(e.Fragment,null,s.length?s.map((n,i)=>{let c=x(n),{name:l,url:B,path:E}=c;return i===u?e.createElement(e.Fragment,null,typeof s[u]=="string"&&s[u].length>3&&s[u]!==s[u-1]&&e.createElement(f,{key:`${E||i}-${g}`},e.createElement("span",{"aria-hidden":"true"},a),e.createElement("a",{href:"#","aria-current":"page","aria-label":l.length>d?l:void 0},I(decodeURIComponent(l),d)))):e.createElement(f,{key:`${c?.name}-${g}`},e.createElement("span",{"aria-hidden":"true"},a),e.createElement("span",null,e.createElement(b,{href:B,"aria-label":l.length>d?l:void 0,...b$1},I(decodeURIComponent(l),d))))}):null)):e.createElement(e.Fragment,null)},_=m;m.displayName="BreadCrumb";m.Nav=N;m.List=C;m.Items=f;
-
-export { m as a, _ as b };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-DKGJHKGW.js.map

package/libs/chunk-DKGJHKGW.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/breadcrumbs/breadcrumb.tsx","../src/libs/content.ts"],"names":["React","Truncate","str","length","Items","styles","id","classes","children","props","List","ui_default","Nav","Breadcrumb","startRoute","startRouteUrl","currentRoute","spacer","routes","ariaLabelPrefix","truncateLength","linkProps","currentPath","setCurrentPath","path","getPathName","pathSegment","route","segments","segment","lastSegment","uuid","link_default","index","currentSegment","name","url","breadcrumb_default"],"mappings":"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","sourcesContent":["// Code: Breadcrumb component\nimport React from \"react\";\nimport UI from \"#components/ui\";\nimport { Truncate } from \"#libs/content\";\nimport Link from \"#components/link/link\";\n\n// TYPES\n\ntype customRoute = {\n  /** The path or id for routing */\n  path?: string;\n  /** The display name */\n  name: string;\n  /** The url if linking out */\n  url?: string;\n};\n\ntype BreadcrumbProps = {\n  /** Array of custom route objects */\n  routes?: customRoute[];\n  /** Starting route node */\n  startRoute?: React.ReactNode;\n  /* Starting route url */\n  startRouteUrl?: string;\n  /** Spacer node between routes */\n  spacer?: React.ReactNode;\n  /** String representing current route */\n  currentRoute?: string;\n  /** Prefix breadcrumb aria-label - \"prefix breadcrumb\" */\n  ariaLabelPrefix?: string;\n  /** Truncate breadcrumb text after this length */\n  truncateLength?: number;\n  /** Link props for breadcrumb links */\n  linkProps?: React.ComponentProps<typeof Link>;\n} & React.ComponentProps<typeof UI>;\n\n// Components\n\n/**\n * Items component.\n *\n * @param styles - Styles object for the item.\n * @param id - Id for the item.\n * @param classes - Class names for the item.\n * @param children - Child components.\n * @param props - Other props.\n */\nconst Items = ({\n  styles,\n  id,\n  classes,\n  children,\n  ...props\n}: React.ComponentProps<typeof UI>) => {\n  return (\n    <li\n      id={id}\n      style={styles}\n      className={classes}\n      data-list=\"unstyled inline\"\n      {...props}\n    >\n      {children}\n    </li>\n  );\n};\n\n/**\n * List component.\n *\n * @param children - The content to render inside the list.\n * @param props - Additional props to pass to the UI component.\n */\nconst List = ({ children, ...props }: React.ComponentProps<typeof UI>) => {\n  return (\n    <UI as=\"ol\" data-list=\"unstyled inline\" {...props}>\n      {children}\n    </UI>\n  );\n};\n\n/**\n * Nav component.\n *\n * @param styles - Styles object for the nav.\n * @param id - Id for the nav.\n * @param classes - Class names for the nav.\n * @param children - Child components.\n * @param props - Other props.\n */\nconst Nav = ({\n  styles,\n  id,\n  classes,\n  children,\n  ...props\n}: React.ComponentProps<typeof UI>) => {\n  return (\n    <UI as=\"nav\" id={id} styles={styles} className={classes} {...props}>\n      <List>{children}</List>\n    </UI>\n  );\n};\n\n/**\n * Navigation component for breadcrumbs.\n *\n * @param props - Props for the navigation component.\n * @param props.startRoute - Starting route node. Default 'Home'.\n * @param props.currentRoute - String representing current route.\n * @param props.spacer - Spacer node between routes. Default '&#47;'.\n * @param props.routes - Array of custom route objects.\n * @param props.styles - Styles object for the nav.\n * @param props.id - Id for the nav.\n * @param props.classes - Class names for the nav.\n * @param props.children - Child components.\n */\nexport const Breadcrumb = ({\n  startRoute = \"Home\",\n  startRouteUrl = \"/\",\n  currentRoute,\n  spacer = <>&#47;</>,\n  routes,\n  styles,\n  id,\n  classes,\n  ariaLabelPrefix,\n  truncateLength = 15,\n  linkProps,\n  ...props\n}: BreadcrumbProps): React.JSX.Element => {\n  const [currentPath, setCurrentPath] = React.useState(\"\");\n  React.useEffect(() => {\n    const path = currentRoute || window.location.pathname;\n    if (path.length) {\n      setCurrentPath(path);\n    }\n  }, [currentRoute]);\n\n  /**\n   * Gets the path name for the given path segment.\n   *\n   * @param pathSegment - The path segment (string or number) to get the path name for.\n   * @returns The path name object for the given path segment.\n   */\n  const getPathName = (pathSegment: string): customRoute => {\n    const route = routes?.find((route) => route.path === pathSegment);\n\n    return {\n      path: route?.path || pathSegment,\n      name: route?.name || pathSegment,\n      url: route?.url || pathSegment,\n    };\n  };\n\n  /** Array of path segments from current path */\n  const segments = currentPath.split(\"/\").filter((segment) => segment);\n  /** Index of last item in segments array */\n  const lastSegment = segments.length - 1;\n\n  /** Unique id for breadcrumb */\n  const uuid = React.useId();\n\n  return currentPath.length ? (\n    <Nav\n      id={id}\n      {...props}\n      styles={styles}\n      className={classes}\n      aria-label={ariaLabelPrefix}\n    >\n      <Items key={`${startRoute}-${uuid}`}>\n        <Link href={startRouteUrl} {...linkProps}>\n          {startRoute}\n        </Link>\n      </Items>\n      <>\n        {segments.length\n          ? segments.map((segment: string, index: number) => {\n              const currentSegment = getPathName(segment);\n              const { name, url, path } = currentSegment;\n              return index === lastSegment ? (\n                <>\n                  {typeof segments[lastSegment] === \"string\" &&\n                    segments[lastSegment].length > 3 &&\n                    segments[lastSegment] !== segments[lastSegment - 1] && (\n                      <Items key={`${path || index}-${uuid}`}>\n                        <span aria-hidden=\"true\">{spacer}</span>\n                        <a\n                          href=\"#\"\n                          aria-current=\"page\"\n                          aria-label={\n                            name.length > truncateLength ? name : undefined\n                          }\n                        >\n                          {Truncate(decodeURIComponent(name), truncateLength)}\n                        </a>\n                      </Items>\n                    )}\n                </>\n              ) : (\n                <Items key={`${currentSegment?.name}-${uuid}`}>\n                  <span aria-hidden=\"true\">{spacer}</span>\n                  <span>\n                    <Link\n                      href={url}\n                      aria-label={\n                        name.length > truncateLength ? name : undefined\n                      }\n                      {...linkProps}\n                    >\n                      {Truncate(decodeURIComponent(name), truncateLength)}\n                    </Link>\n                  </span>\n                </Items>\n              );\n            })\n          : null}\n      </>\n    </Nav>\n  ) : (\n    <></>\n  );\n};\n\nexport default Breadcrumb;\n\nBreadcrumb.displayName = \"BreadCrumb\";\nBreadcrumb.Nav = Nav;\nBreadcrumb.List = List;\nBreadcrumb.Items = Items;\n","/**\n * Converts a string to a slug by:\n * - Converting to lowercase\n * - Trimming whitespace\n * - Removing non-word and non-hyphen characters\n * - Replacing sequences of whitespace and hyphens with a single hyphen\n * - Removing leading and trailing hyphens\n *\n * @param str - The string to slugify\n * @returns The slugified string\n */\nexport const Slugify = (str: string) => {\n  return str\n    .toLowerCase()\n    .trim()\n    .replace(/[^\\w\\s-]/g, '')\n    .replace(/[\\s_-]+/g, '-')\n    .replace(/^-+|-+$/g, '')\n}\n\n/**\n * Truncates a string to a maximum length.\n *\n * @param str - The string to truncate.\n * @param length - The maximum length of the truncated string. Defaults to 15.\n * @returns The truncated string, with ellipses appended if truncated.\n */\nexport const Truncate = (str: string, length: number = 15) => {\n  return str.length > length ? `${str.slice(0, length)}...` : str\n}\n"]}

package/libs/chunk-DV56L5YX.cjs

@@ -1,18 +0,0 @@
-'use strict';
-
-var chunkQVV34QEH_cjs = require('./chunk-QVV34QEH.cjs');
-var chunk6TE5QEVE_cjs = require('./chunk-6TE5QEVE.cjs');
-var r = require('react');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var r__default = /*#__PURE__*/_interopDefault(r);
-
-var n=({isBlock:t,children:o,...s})=>r__default.default.createElement(chunkQVV34QEH_cjs.c,{type:"ul",...s,"data-list":`unstyled ${t?"block":""}`},o),L=({id:t,styles:o,classes:s,children:i,...m})=>r__default.default.createElement(chunkQVV34QEH_cjs.c.ListItem,{type:"li",id:t,classes:s,styles:o,...m},i),e=({children:t,...o})=>r__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"nav",...o},t),N=e;e.displayName="Nav";e.List=n;e.Item=L;
-
-exports.a = n;
-exports.b = L;
-exports.c = e;
-exports.d = N;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-DV56L5YX.cjs.map

package/libs/chunk-DV56L5YX.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/nav/nav.tsx"],"names":["React","NavList","isBlock","children","props","list_default","NavItem","id","styles","classes","Nav","ui_default","nav_default"],"mappings":"6EAEA,OAAOA,MAAW,QAgBX,IAAMC,EAAU,CAAC,CAAE,QAAAC,EAAS,SAAAC,EAAU,GAAGC,CAAM,IAElDJ,EAAA,cAACK,EAAA,CAAK,KAAK,KAAM,GAAGD,EAAO,YAAW,YAAYF,EAAU,QAAU,EAAE,IACrEC,CACH,EAeSG,EAAU,CAAC,CACtB,GAAAC,EACA,OAAAC,EACA,QAAAC,EACA,SAAAN,EACA,GAAGC,CACL,IAEIJ,EAAA,cAACK,EAAK,SAAL,CACC,KAAK,KACL,GAAIE,EACJ,QAASE,EACT,OAAQD,EACP,GAAGJ,GAEHD,CACH,EAWSO,EAAM,CAAC,CAAE,SAAAP,EAAU,GAAGC,CAAM,IAErCJ,EAAA,cAACW,EAAA,CAAG,GAAG,MAAO,GAAGP,GACdD,CACH,EAIGS,EAAQF,EACfA,EAAI,YAAc,MAClBA,EAAI,KAAOT,EACXS,EAAI,KAAOJ","sourcesContent":["import UI from '../ui'\nimport List from '../list/list'\nimport React from 'react'\n\nexport type NavListProps = React.ComponentProps<typeof List> & {\n  isBlock?: boolean\n}\nexport type NavItemProps = React.ComponentProps<typeof List.ListItem>\n\nexport type NavProps = React.ComponentProps<typeof UI>\n\n/**\n * Renders a NavList component.\n * @param {Object} props - The props for the component.\n * @param {ReactNode} props.children - The child elements.\n * @param {Object} props - Additional props to spread to the List component.\n * @returns {JSX.Element} The rendered NavList component.\n */\nexport const NavList = ({ isBlock, children, ...props }: NavListProps) => {\n  return (\n    <List type=\"ul\" {...props} data-list={`unstyled ${isBlock ? 'block' : ''}`}>\n      {children}\n    </List>\n  )\n}\n\n/**\n * Renders a NavItem component.\n * @param {Object} props - The props for the component.\n * @param {string} [props.id] - The id for the component.\n * @param {Object} [props.styles] - The styles for the component.\n * @param {string} [props.classes] - The classes for the component.\n * @param {ReactNode} props.children - The child elements.\n * @param {boolean} [props.inline=true] - Whether the item should display inline.\n * @param {Object} props - Additional props to spread to the ListItem component.\n * @returns {JSX.Element} The rendered NavItem component.\n */\nexport const NavItem = ({\n  id,\n  styles,\n  classes,\n  children,\n  ...props\n}: NavItemProps) => {\n  return (\n    <List.ListItem\n      type=\"li\"\n      id={id}\n      classes={classes}\n      styles={styles}\n      {...props}\n    >\n      {children}\n    </List.ListItem>\n  )\n}\n\n/**\n * Renders a Nav component.\n * @param {Object} props - The props for the component.\n * @param {ReactNode} props.children - The child elements.\n * @param {Object} props - Additional props to spread to the UI component.\n * @returns {JSX.Element} The rendered Nav component.\n */\nexport const Nav = ({ children, ...props }: NavProps) => {\n  return (\n    <UI as=\"nav\" {...props}>\n      {children}\n    </UI>\n  )\n}\n\nexport default Nav\nNav.displayName = 'Nav'\nNav.List = NavList\nNav.Item = NavItem\n"]}

package/libs/chunk-ECLD37WN.cjs

@@ -1,16 +0,0 @@
-'use strict';
-
-var chunkX3EVB7VS_cjs = require('./chunk-X3EVB7VS.cjs');
-var chunk6TE5QEVE_cjs = require('./chunk-6TE5QEVE.cjs');
-var e = require('react');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var e__default = /*#__PURE__*/_interopDefault(e);
-
-var I=(t,r=15)=>t.length>r?`${t.slice(0,r)}...`:t;var f=({styles:t,id:r,classes:o,children:a,...p})=>e__default.default.createElement("li",{id:r,style:t,className:o,"data-list":"unstyled inline",...p},a),C=({children:t,...r})=>e__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"ol","data-list":"unstyled inline",...r},t),N=({styles:t,id:r,classes:o,children:a,...p})=>e__default.default.createElement(chunk6TE5QEVE_cjs.a,{as:"nav",id:r,styles:t,className:o,...p},e__default.default.createElement(C,null,a)),m=({startRoute:t="Home",startRouteUrl:r="/",currentRoute:o,spacer:a=e__default.default.createElement(e__default.default.Fragment,null,"/"),routes:p,styles:U,id:$,classes:k,ariaLabelPrefix:L,truncateLength:d=15,linkProps:b,...v})=>{let[P,w]=e__default.default.useState("");e__default.default.useEffect(()=>{let n=o||window.location.pathname;n.length&&w(n);},[o]);let x=n=>{let i=p?.find(c=>c.path===n);return {path:i?.path||n,name:i?.name||n,url:i?.url||n}},s=P.split("/").filter(n=>n),u=s.length-1,g=e__default.default.useId();return P.length?e__default.default.createElement(N,{id:$,...v,styles:U,className:k,"aria-label":L},e__default.default.createElement(f,{key:`${t}-${g}`},e__default.default.createElement(chunkX3EVB7VS_cjs.b,{href:r,...b},t)),e__default.default.createElement(e__default.default.Fragment,null,s.length?s.map((n,i)=>{let c=x(n),{name:l,url:B,path:E}=c;return i===u?e__default.default.createElement(e__default.default.Fragment,null,typeof s[u]=="string"&&s[u].length>3&&s[u]!==s[u-1]&&e__default.default.createElement(f,{key:`${E||i}-${g}`},e__default.default.createElement("span",{"aria-hidden":"true"},a),e__default.default.createElement("a",{href:"#","aria-current":"page","aria-label":l.length>d?l:void 0},I(decodeURIComponent(l),d)))):e__default.default.createElement(f,{key:`${c?.name}-${g}`},e__default.default.createElement("span",{"aria-hidden":"true"},a),e__default.default.createElement("span",null,e__default.default.createElement(chunkX3EVB7VS_cjs.b,{href:B,"aria-label":l.length>d?l:void 0,...b},I(decodeURIComponent(l),d))))}):null)):e__default.default.createElement(e__default.default.Fragment,null)},_=m;m.displayName="BreadCrumb";m.Nav=N;m.List=C;m.Items=f;
-
-exports.a = m;
-exports.b = _;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-ECLD37WN.cjs.map