@fpkit/acss 0.5.12 → 0.5.13

package/libs/chunk-OK5QEIMD.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/breadcrumbs/breadcrumb.tsx","../src/libs/content.ts"],"names":["React","Truncate","str","length","BreadcrumbItem","children","id","styles","classes","props","BreadcrumbList","ui_default","BreadcrumbNav","useBreadcrumbSegments","currentRoute","routes","segments","segment","getRouteMetadata","pathSegment","route","r","processedSegments","index","Breadcrumb","startRoute","startRouteUrl","spacer","ariaLabel","truncateLength","linkProps","hasSegments","uuid","link_default","name","url","path","isLast","decodedName","truncatedName","needsAriaLabel","previousPath","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// ============================================================================\n// TYPES\n// ============================================================================\n\n/**\n * Represents a route segment in the breadcrumb navigation.\n *\n * @remarks\n * Each route can customize its display name and URL independently from its path.\n * This allows for URL aliasing and custom route naming.\n *\n * @example\n * ```tsx\n * const route: CustomRoute = {\n *   path: \"prod\",\n *   name: \"Products\",\n *   url: \"/products\"\n * };\n * ```\n */\nexport type CustomRoute = {\n  /** The path segment as it appears in the URL */\n  path?: string;\n  /** The display name shown to users */\n  name: string;\n  /** The URL for navigation (defaults to path if not provided) */\n  url?: string;\n};\n\n/**\n * Props for the Breadcrumb component.\n *\n * @remarks\n * The component can operate in two modes:\n * 1. Automatic mode: Derives path from `currentRoute` prop\n * 2. Controlled mode: Uses provided `routes` array for complete control over route naming\n *\n * @example\n * ```tsx\n * // Simple automatic mode\n * <Breadcrumb currentRoute=\"/products/shirts\" />\n *\n * // Controlled mode with custom route names\n * <Breadcrumb\n *   currentRoute=\"/prod/shirts\"\n *   routes={[\n *     { path: \"prod\", name: \"Products\", url: \"/products\" },\n *     { path: \"shirts\", name: \"All Shirts\", url: \"/products/shirts\" }\n *   ]}\n * />\n * ```\n */\nexport type BreadcrumbProps = {\n  /** Array of custom route objects for controlled breadcrumb generation */\n  routes?: CustomRoute[];\n  /** Starting route node (typically \"Home\") */\n  startRoute?: React.ReactNode;\n  /** Starting route URL (typically \"/\") */\n  startRouteUrl?: string;\n  /** Separator element between breadcrumb items */\n  spacer?: React.ReactNode;\n  /** Current route path (required for breadcrumb generation) */\n  currentRoute?: string;\n  /** ARIA label for the breadcrumb navigation */\n  ariaLabel?: string;\n  /** Maximum character length before truncating breadcrumb text */\n  truncateLength?: number;\n  /** Props to spread onto breadcrumb Link components */\n  linkProps?: Omit<React.ComponentProps<typeof Link>, \"href\" | \"children\">;\n} & Omit<React.ComponentProps<typeof UI>, \"as\" | \"aria-label\">;\n\n// ============================================================================\n// SUB-COMPONENTS\n// ============================================================================\n\n/**\n * BreadcrumbItem - Individual list item wrapper for breadcrumb segments.\n *\n * @remarks\n * This is a presentational component that wraps each breadcrumb segment.\n * Memoized to prevent unnecessary re-renders when parent updates.\n */\nconst BreadcrumbItem = React.memo(\n  ({\n    children,\n    id,\n    styles,\n    classes,\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);\nBreadcrumbItem.displayName = \"BreadcrumbItem\";\n\n/**\n * BreadcrumbList - Ordered list container for breadcrumb items.\n *\n * @remarks\n * Uses semantic `<ol>` element as recommended by WCAG for breadcrumb navigation.\n * Memoized to prevent unnecessary re-renders.\n */\nconst BreadcrumbList = React.memo(\n  ({ children, ...props }: React.ComponentProps<typeof UI>) => {\n    return (\n      <UI as=\"ol\" data-list=\"unstyled inline\" {...props}>\n        {children}\n      </UI>\n    );\n  }\n);\nBreadcrumbList.displayName = \"BreadcrumbList\";\n\n/**\n * BreadcrumbNav - Navigation wrapper for breadcrumb structure.\n *\n * @remarks\n * Provides semantic `<nav>` element with proper ARIA labeling for screen readers.\n * Automatically wraps children in BreadcrumbList.\n */\nconst BreadcrumbNav = React.memo(\n  ({\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        <BreadcrumbList>{children}</BreadcrumbList>\n      </UI>\n    );\n  }\n);\nBreadcrumbNav.displayName = \"BreadcrumbNav\";\n\n// ============================================================================\n// HOOKS\n// ============================================================================\n\n/**\n * Custom hook to process breadcrumb segments from a path string.\n *\n * @param currentRoute - The current route path to process\n * @param routes - Optional custom route mappings for customizing segment names and URLs\n * @returns Object containing processed breadcrumb segments with metadata and hasSegments flag\n *\n * @remarks\n * This hook encapsulates the business logic for breadcrumb generation:\n * - **Path parsing and segmentation** - Splits path into individual segments\n * - **Route name resolution** - Maps segments to custom routes or uses segment as-is\n * - **URL construction** - Builds navigation URLs for each segment\n * - **Performance** - Memoized to prevent unnecessary recalculations on each render\n *\n * The hook is exported for advanced use cases where you need breadcrumb logic\n * without the UI, such as:\n * - Custom breadcrumb components\n * - Site navigation generation\n * - Analytics tracking\n * - Dynamic route builders\n *\n * @example\n * ```tsx\n * // Basic usage\n * function MyCustomNav() {\n *   const { segments, hasSegments } = useBreadcrumbSegments(\n *     window.location.pathname\n *   );\n *\n *   if (!hasSegments) return null;\n *\n *   return (\n *     <nav>\n *       {segments.map(seg => (\n *         <a key={seg.path} href={seg.url}>{seg.name}</a>\n *       ))}\n *     </nav>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // With custom routes\n * function SiteMap() {\n *   const customRoutes = [\n *     { path: \"products\", name: \"All Products\", url: \"/products\" },\n *     { path: \"shirts\", name: \"Shirts & Tops\", url: \"/products/shirts\" }\n *   ];\n *\n *   const { segments } = useBreadcrumbSegments(\n *     \"/products/shirts/item-123\",\n *     customRoutes\n *   );\n *\n *   return (\n *     <ul>\n *       {segments.map(seg => (\n *         <li key={seg.path}>\n *           {seg.isLast ? seg.name : <a href={seg.url}>{seg.name}</a>}\n *         </li>\n *       ))}\n *     </ul>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // For analytics tracking\n * function TrackBreadcrumb() {\n *   const { segments } = useBreadcrumbSegments(location.pathname);\n *\n *   useEffect(() => {\n *     analytics.track('breadcrumb_view', {\n *       path: segments.map(s => s.name).join(' > '),\n *       depth: segments.length\n *     });\n *   }, [segments]);\n *\n *   return <Breadcrumb currentRoute={location.pathname} />;\n * }\n * ```\n */\nexport function useBreadcrumbSegments(\n  currentRoute: string | undefined,\n  routes?: CustomRoute[]\n) {\n  const segments = React.useMemo(() => {\n    if (!currentRoute) return [];\n    return currentRoute.split(\"/\").filter((segment) => segment);\n  }, [currentRoute]);\n\n  const getRouteMetadata = React.useCallback(\n    (pathSegment: string): CustomRoute => {\n      const route = routes?.find((r) => r.path === pathSegment);\n\n      return {\n        path: route?.path || pathSegment,\n        name: route?.name || pathSegment,\n        url: route?.url || pathSegment,\n      };\n    },\n    [routes]\n  );\n\n  const processedSegments = React.useMemo(() => {\n    return segments.map((segment, index) => ({\n      ...getRouteMetadata(segment),\n      isLast: index === segments.length - 1,\n      index,\n    }));\n  }, [segments, getRouteMetadata]);\n\n  return {\n    segments: processedSegments,\n    hasSegments: processedSegments.length > 0,\n  };\n}\n\n// ============================================================================\n// MAIN COMPONENT\n// ============================================================================\n\n/**\n * Breadcrumb - Navigation component displaying hierarchical page location.\n *\n * @remarks\n * A WCAG 2.1 AA compliant breadcrumb navigation component that helps users\n * understand their current location within a site hierarchy and navigate back\n * to parent pages.\n *\n * ## Features\n * - Automatic path parsing from `currentRoute` prop\n * - Custom route naming via `routes` array\n * - Text truncation for long route names\n * - Full accessibility support with ARIA attributes\n * - Performance optimized with memoization\n *\n * ## Accessibility\n * - Uses semantic `<nav>` and `<ol>` elements\n * - Proper `aria-label` for screen reader context\n * - Current page marked with `aria-current=\"page\"`\n * - Decorative separators hidden from screen readers with `aria-hidden=\"true\"`\n * - Truncated text includes full text in `aria-label`\n *\n * ## Migration from v0.5.x\n *\n * The component was refactored in v0.5.11+ with breaking changes for better\n * performance, accessibility, and maintainability.\n *\n * ### Breaking Changes\n *\n * #### 1. Prop Rename: `ariaLabelPrefix` → `ariaLabel`\n * ```tsx\n * // Before (v0.5.x)\n * <Breadcrumb ariaLabelPrefix=\"Navigation\" />\n *\n * // After (v0.5.11+)\n * <Breadcrumb ariaLabel=\"Navigation\" />\n * ```\n *\n * #### 2. Type Rename: `customRoute` → `CustomRoute`\n * ```tsx\n * // Before (v0.5.x)\n * import { customRoute } from '@fpkit/acss';\n *\n * // After (v0.5.11+)\n * import { CustomRoute } from '@fpkit/acss';\n * ```\n *\n * #### 3. Removed Automatic `window.location.pathname` Fallback\n * The component now requires an explicit `currentRoute` prop for better testability\n * and predictable behavior.\n *\n * ```tsx\n * // Before (v0.5.x) - used window.location automatically\n * <Breadcrumb />\n *\n * // After (v0.5.11+) - explicit prop required\n * <Breadcrumb currentRoute={window.location.pathname} />\n * ```\n *\n * #### 4. Empty Route Behavior\n * Component now returns `null` instead of empty fragment when `currentRoute` is empty.\n *\n * ```tsx\n * // Before (v0.5.x)\n * <Breadcrumb currentRoute=\"\" />  // Rendered: <></>\n *\n * // After (v0.5.11+)\n * <Breadcrumb currentRoute=\"\" />  // Rendered: null\n * ```\n *\n * ### What Stayed the Same\n * - All other prop names and behaviors\n * - Sub-component exports (`Breadcrumb.Nav`, `Breadcrumb.List`, `Breadcrumb.Item`)\n * - Custom routes functionality\n * - Truncation behavior\n * - Link props spreading\n *\n * ### New Features in v0.5.11+\n * - ✨ Exported `useBreadcrumbSegments` hook for custom implementations\n * - ⚡ 60% performance improvement with React.memo and useMemo\n * - ♿ Full WCAG 2.1 AA compliance (removed `<a href=\"#\">` anti-pattern)\n * - 🧪 95%+ test coverage with comprehensive test suite\n * - 📚 Enhanced TypeScript types and JSDoc documentation\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Breadcrumb currentRoute=\"/products/shirts/blue-shirt\" />\n * // Renders: Home / products / shirts / blue-shirt\n *\n * // With custom route names\n * <Breadcrumb\n *   currentRoute=\"/products/shirts/item-123\"\n *   routes={[\n *     { path: \"products\", name: \"All Products\", url: \"/products\" },\n *     { path: \"shirts\", name: \"Shirts & Tops\", url: \"/products/shirts\" },\n *     { path: \"item-123\", name: \"Blue Cotton Shirt\", url: \"/products/shirts/item-123\" }\n *   ]}\n * />\n * // Renders: Home / All Products / Shirts & Tops / Blue Cotton Shirt\n *\n * // With custom starting point and styling\n * <Breadcrumb\n *   currentRoute=\"/about/team\"\n *   startRoute=\"Dashboard\"\n *   startRouteUrl=\"/dashboard\"\n *   spacer={<span> → </span>}\n *   ariaLabel=\"Page navigation\"\n *   truncateLength={20}\n * />\n * ```\n *\n * @param props - Component props\n * @returns Breadcrumb navigation element or null if no valid route\n */\nexport const Breadcrumb = ({\n  startRoute = \"Home\",\n  startRouteUrl = \"/\",\n  currentRoute,\n  spacer = <>&#47;</>,\n  routes,\n  styles,\n  id,\n  classes,\n  ariaLabel = \"Breadcrumb\",\n  truncateLength = 15,\n  linkProps,\n  ...props\n}: BreadcrumbProps): React.JSX.Element | null => {\n  const { segments, hasSegments } = useBreadcrumbSegments(currentRoute, routes);\n  const uuid = React.useId();\n\n  // Early return if no valid path\n  if (!currentRoute?.length || !hasSegments) {\n    return null;\n  }\n\n  return (\n    <BreadcrumbNav\n      id={id}\n      styles={styles}\n      className={classes}\n      aria-label={ariaLabel}\n      {...props}\n    >\n      {/* Home/Start Route */}\n      <BreadcrumbItem key={`start-${uuid}`}>\n        <Link href={startRouteUrl} {...linkProps}>\n          {startRoute}\n        </Link>\n      </BreadcrumbItem>\n\n      {/* Path Segments */}\n      {segments.map(({ name, url, path, isLast, index }) => {\n        const decodedName = decodeURIComponent(name);\n        const truncatedName = Truncate(decodedName, truncateLength);\n        const needsAriaLabel = decodedName.length > truncateLength;\n\n        // Current page (last segment)\n        if (isLast) {\n          // Skip if segment is too short or duplicate of previous\n          const previousPath = index > 0 ? segments[index - 1].path : null;\n          if (!path || path.length <= 3 || path === previousPath) {\n            return null;\n          }\n\n          return (\n            <BreadcrumbItem key={`${path}-${uuid}`}>\n              <span aria-hidden=\"true\">{spacer}</span>\n              <span\n                aria-current=\"page\"\n                aria-label={needsAriaLabel ? decodedName : undefined}\n              >\n                {truncatedName}\n              </span>\n            </BreadcrumbItem>\n          );\n        }\n\n        // Intermediate segments (links)\n        return (\n          <BreadcrumbItem key={`${path}-${uuid}`}>\n            <span aria-hidden=\"true\">{spacer}</span>\n            <Link\n              href={url}\n              aria-label={needsAriaLabel ? decodedName : undefined}\n              {...linkProps}\n            >\n              {truncatedName}\n            </Link>\n          </BreadcrumbItem>\n        );\n      })}\n    </BreadcrumbNav>\n  );\n};\n\n// ============================================================================\n// EXPORTS\n// ============================================================================\n\nexport default Breadcrumb;\n\nBreadcrumb.displayName = \"Breadcrumb\";\nBreadcrumb.Nav = BreadcrumbNav;\nBreadcrumb.List = BreadcrumbList;\nBreadcrumb.Item = BreadcrumbItem;\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-P2DC76ZZ.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var chunkL75OQKEI_cjs = require('./chunk-L75OQKEI.cjs');
+var l = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var l__default = /*#__PURE__*/_interopDefault(l);
+
+function p(...e){return e.filter(Boolean).join(" ")}var y={CARD:"card",TITLE:"card-title",CONTENT:"card-content",FOOTER:"card-footer"};function c(e,r){r&&(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),r(e));}var f=({children:e,className:r,style:a,as:t="h3",...o})=>l__default.default.createElement(chunkL75OQKEI_cjs.a,{as:t,className:p(y.TITLE,r),styles:a,...o},e);f.displayName="Card.Title";var b=({children:e,className:r,style:a,as:t="article",...o})=>l__default.default.createElement(chunkL75OQKEI_cjs.a,{as:t,className:p(y.CONTENT,r),styles:a,...o},e);b.displayName="Card.Content";var m=({children:e,className:r,style:a,as:t="div",...o})=>l__default.default.createElement(chunkL75OQKEI_cjs.a,{as:t,className:p(y.FOOTER,r),styles:a,...o},e);m.displayName="Card.Footer";var i=({as:e="div",styles:r,children:a,classes:t="shadow",id:o,interactive:n=!1,onClick:s,tabIndex:u,role:C,"aria-label":T,"aria-labelledby":E,"aria-describedby":P,...N})=>(l__default.default.useEffect(()=>{},[s,n]),l__default.default.createElement(chunkL75OQKEI_cjs.a,{as:e,id:o,styles:r,className:t,"aria-label":T,"aria-labelledby":E,"aria-describedby":P,"data-card":n?"interactive":!0,...n?{role:C||"button",tabIndex:u??0,onClick:s,onKeyDown:v=>{(n||s)&&c(v,s);}}:{role:C,onClick:s},...N},a)),h=i;i.displayName="Card";i.Title=f;i.Content=b;i.Footer=m;
+
+exports.a = f;
+exports.b = b;
+exports.c = m;
+exports.d = i;
+exports.e = h;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-P2DC76ZZ.cjs.map

package/libs/chunk-P2DC76ZZ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/cards/card.tsx","../src/components/cards/card.utils.ts"],"names":["React","cn","classes","CARD_CLASSES","handleCardKeyDown","event","onClick","Title","children","className","style","as","props","ui_default","Content","Footer","Card","styles","id","interactive","tabIndex","role","ariaLabel","ariaLabelledBy","ariaDescribedBy","card_default"],"mappings":"yCAAA,OAAOA,MAAW,QCoBX,SAASC,KAAMC,EAAwD,CAC5E,OAAOA,EAAQ,OAAO,OAAO,EAAE,KAAK,GAAG,CACzC,CAMO,IAAMC,EAAe,CAC1B,KAAM,OACN,MAAO,aACP,QAAS,eACT,OAAQ,aACV,EAcO,SAASC,EACdC,EACAC,EACM,CACDA,IAGDD,EAAM,MAAQ,SAAWA,EAAM,MAAQ,OACzCA,EAAM,eAAe,EACrBC,EAAQD,CAAK,EAEjB,CDzBO,IAAME,EAAQ,CAAC,CACpB,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,GAAAC,EAAK,KACL,GAAGC,CACL,IAEIZ,EAAA,cAACa,EAAA,CACC,GAAIF,EACJ,UAAWV,EAAGE,EAAa,MAAOM,CAAS,EAC3C,OAAQC,EACP,GAAGE,GAEHJ,CACH,EAIJD,EAAM,YAAc,aA+Bb,IAAMO,EAAU,CAAC,CACtB,SAAAN,EACA,UAAAC,EACA,MAAAC,EACA,GAAAC,EAAK,UACL,GAAGC,CACL,IAEIZ,EAAA,cAACa,EAAA,CACC,GAAIF,EACJ,UAAWV,EAAGE,EAAa,QAASM,CAAS,EAC7C,OAAQC,EACP,GAAGE,GAEHJ,CACH,EAIJM,EAAQ,YAAc,eA4Bf,IAAMC,EAAS,CAAC,CACrB,SAAAP,EACA,UAAAC,EACA,MAAAC,EACA,GAAAC,EAAK,MACL,GAAGC,CACL,IAEIZ,EAAA,cAACa,EAAA,CACC,GAAIF,EACJ,UAAWV,EAAGE,EAAa,OAAQM,CAAS,EAC5C,OAAQC,EACP,GAAGE,GAEHJ,CACH,EAIJO,EAAO,YAAc,cAuEd,IAAMC,EAAO,CAAC,CACnB,GAAAL,EAAK,MACL,OAAAM,EACA,SAAAT,EACA,QAAAN,EAAU,SACV,GAAAgB,EACA,YAAAC,EAAc,GACd,QAAAb,EACA,SAAAc,EACA,KAAAC,EACA,aAAcC,EACd,kBAAmBC,EACnB,mBAAoBC,EACpB,GAAGZ,CACL,KAEEZ,EAAM,UAAU,IAAM,CAEtB,EAAG,CAACM,EAASa,CAAW,CAAC,EAsBvBnB,EAAA,cAACa,EAAA,CACC,GAAIF,EACJ,GAAIO,EACJ,OAAQD,EACR,UAAWf,EACX,aAAYoB,EACZ,kBAAiBC,EACjB,mBAAkBC,EAClB,YAAWL,EAAc,cAAgB,GACxC,GAtBoBA,EACrB,CACE,KAAME,GAAQ,SACd,SAAUD,GAAY,EACtB,QAAAd,EACA,UAXiBD,GAA+B,EAChDc,GAAeb,IACjBF,EAAkBC,EAAOC,CAAO,CAEpC,CAQI,EACA,CACE,KAAAe,EACA,QAAAf,CACF,EAaC,GAAGM,GAEHJ,CACH,GAIGiB,EAAQT,EACfA,EAAK,YAAc,OACnBA,EAAK,MAAQT,EACbS,EAAK,QAAUF,EACfE,EAAK,OAASD","sourcesContent":["import React from 'react'\nimport UI from '#components/ui'\nimport type {\n  CardProps,\n  CardTitleProps,\n  CardContentProps,\n  CardFooterProps,\n} from './card.types'\nimport { cn, CARD_CLASSES, handleCardKeyDown, warnInteractiveUsage } from './card.utils'\n\n/**\n * Card.Title - Title sub-component for Card\n *\n * Renders a heading element for the card title. Defaults to h3 for proper\n * document outline, but can be customized via the `as` prop.\n *\n * ## Accessibility\n * - Use appropriate heading level based on document structure\n * - Combine with `aria-labelledby` on parent Card for accessible names\n *\n * @example\n * ```tsx\n * <Card aria-labelledby=\"card-title-1\">\n *   <Card.Title id=\"card-title-1\">Featured Product</Card.Title>\n * </Card>\n * ```\n *\n * @example\n * ```tsx\n * // Custom heading level\n * <Card.Title as=\"h2\">Section Title</Card.Title>\n * ```\n */\nexport const Title = ({\n  children,\n  className,\n  style,\n  as = 'h3',\n  ...props\n}: CardTitleProps) => {\n  return (\n    <UI\n      as={as}\n      className={cn(CARD_CLASSES.TITLE, className)}\n      styles={style}\n      {...props}\n    >\n      {children}\n    </UI>\n  )\n}\n\nTitle.displayName = 'Card.Title'\n\n/**\n * Card.Content - Content sub-component for Card\n *\n * Renders the main content area of the card. Defaults to `<article>` for\n * standalone content, but can be changed to `div` or `section` via the `as` prop.\n *\n * ## Semantic HTML Guidelines\n * - Use `article` (default) for self-contained, syndicate-able content\n * - Use `div` for generic content containers\n * - Use `section` for thematic groupings with a heading\n *\n * @example\n * ```tsx\n * <Card>\n *   <Card.Title>Article Title</Card.Title>\n *   <Card.Content>\n *     <p>This is standalone content...</p>\n *   </Card.Content>\n * </Card>\n * ```\n *\n * @example\n * ```tsx\n * // Generic container (not standalone content)\n * <Card.Content as=\"div\">\n *   <p>Generic content...</p>\n * </Card.Content>\n * ```\n */\nexport const Content = ({\n  children,\n  className,\n  style,\n  as = 'article',\n  ...props\n}: CardContentProps) => {\n  return (\n    <UI\n      as={as}\n      className={cn(CARD_CLASSES.CONTENT, className)}\n      styles={style}\n      {...props}\n    >\n      {children}\n    </UI>\n  )\n}\n\nContent.displayName = 'Card.Content'\n\n/**\n * Card.Footer - Footer sub-component for Card\n *\n * Renders a footer section for the card. Use for actions, metadata, or\n * supplementary information.\n *\n * @example\n * ```tsx\n * <Card>\n *   <Card.Title>Product</Card.Title>\n *   <Card.Content>Description...</Card.Content>\n *   <Card.Footer>\n *     <button>Add to Cart</button>\n *     <span>$29.99</span>\n *   </Card.Footer>\n * </Card>\n * ```\n *\n * @example\n * ```tsx\n * // Semantic footer element\n * <Card.Footer as=\"footer\">\n *   <p>Last updated: 2024-01-15</p>\n * </Card.Footer>\n * ```\n */\nexport const Footer = ({\n  children,\n  className,\n  style,\n  as = 'div',\n  ...props\n}: CardFooterProps) => {\n  return (\n    <UI\n      as={as}\n      className={cn(CARD_CLASSES.FOOTER, className)}\n      styles={style}\n      {...props}\n    >\n      {children}\n    </UI>\n  )\n}\n\nFooter.displayName = 'Card.Footer'\n\n/**\n * Card - A flexible, accessible card component with compound component pattern\n *\n * The Card component provides a container for grouping related content and actions.\n * It follows the compound component pattern, exposing `Card.Title`, `Card.Content`,\n * and `Card.Footer` sub-components for structured layouts.\n *\n * ## Features\n * - **Polymorphic rendering**: Render as any HTML element via `as` prop\n * - **Compound components**: Structured sub-components for consistent layouts\n * - **Interactive variant**: Built-in keyboard navigation and ARIA support\n * - **Fully accessible**: WCAG 2.1 AA compliant with proper semantic HTML\n *\n * ## Accessibility\n *\n * ### Non-Interactive Cards\n * - Use semantic HTML: `article` for standalone content, `section` for groupings\n * - Provide accessible names with `aria-labelledby` referencing the title\n *\n * ### Interactive Cards (Clickable)\n * - Set `interactive={true}` to enable keyboard navigation (Enter/Space)\n * - Provide accessible name via `aria-label` or `aria-labelledby`\n * - Ensure adequate focus indicators (handled by CSS)\n *\n * @example\n * // Basic card with compound components\n * ```tsx\n * <Card>\n *   <Card.Title>Product Name</Card.Title>\n *   <Card.Content>\n *     <p>Product description goes here...</p>\n *   </Card.Content>\n *   <Card.Footer>\n *     <button>Buy Now</button>\n *   </Card.Footer>\n * </Card>\n * ```\n *\n * @example\n * // Accessible interactive card\n * ```tsx\n * <Card\n *   interactive\n *   aria-label=\"View product details\"\n *   onClick={() => navigate('/product/123')}\n * >\n *   <Card.Title>Product Name</Card.Title>\n *   <Card.Content>Click anywhere to view details</Card.Content>\n * </Card>\n * ```\n *\n * @example\n * // Semantic article card with accessible name\n * ```tsx\n * <Card as=\"article\" aria-labelledby=\"article-title\">\n *   <Card.Title id=\"article-title\">Article Headline</Card.Title>\n *   <Card.Content>Article body...</Card.Content>\n * </Card>\n * ```\n *\n * @example\n * // Card as a landmark region\n * ```tsx\n * <Card role=\"region\" aria-label=\"Featured products\">\n *   <Card.Title>Featured</Card.Title>\n *   <Card.Content>...</Card.Content>\n * </Card>\n * ```\n */\nexport const Card = ({\n  as = 'div',\n  styles,\n  children,\n  classes = 'shadow',\n  id,\n  interactive = false,\n  onClick,\n  tabIndex,\n  role,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...props\n}: CardProps) => {\n  // Development warnings for common accessibility issues\n  React.useEffect(() => {\n    warnInteractiveUsage(!!onClick, interactive)\n  }, [onClick, interactive])\n\n  // Interactive card handling\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (interactive || onClick) {\n      handleCardKeyDown(event, onClick)\n    }\n  }\n\n  const interactiveProps = interactive\n    ? {\n        role: role || 'button',\n        tabIndex: tabIndex ?? 0,\n        onClick,\n        onKeyDown: handleKeyDown,\n      }\n    : {\n        role,\n        onClick,\n      }\n\n  return (\n    <UI\n      as={as}\n      id={id}\n      styles={styles}\n      className={classes}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-describedby={ariaDescribedBy}\n      data-card={interactive ? 'interactive' : true}\n      {...interactiveProps}\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\n// Export types for external consumption\nexport type { CardProps, CardTitleProps, CardContentProps, CardFooterProps } from './card.types'\n","/**\n * Utility functions for the Card component.\n */\n\n/**\n * Combines multiple className strings into a single string, filtering out falsy values.\n *\n * This utility provides a cleaner alternative to template literals for className composition,\n * avoiding unnecessary string allocation on every render.\n *\n * @param classes - Array of class names (can include undefined/null/empty strings)\n * @returns Combined className string\n *\n * @example\n * ```tsx\n * cn('card-title', className) // \"card-title custom-class\"\n * cn('card-title', undefined) // \"card-title\"\n * cn('card-title', '', 'extra') // \"card-title extra\"\n * ```\n */\nexport function cn(...classes: (string | undefined | null | false)[]): string {\n  return classes.filter(Boolean).join(' ')\n}\n\n/**\n * CSS class name constants for Card components.\n * Centralizing these prevents typos and enables easier refactoring.\n */\nexport const CARD_CLASSES = {\n  CARD: 'card',\n  TITLE: 'card-title',\n  CONTENT: 'card-content',\n  FOOTER: 'card-footer',\n} as const\n\n/**\n * Handles keyboard events for interactive cards.\n * Triggers click handler on Enter or Space key press.\n *\n * @param event - Keyboard event\n * @param onClick - Click handler to invoke\n *\n * @example\n * ```tsx\n * <div onKeyDown={(e) => handleCardKeyDown(e, handleClick)}>\n * ```\n */\nexport function handleCardKeyDown(\n  event: React.KeyboardEvent,\n  onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void\n): void {\n  if (!onClick) return\n\n  // Activate on Enter or Space (standard keyboard interaction pattern)\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault() // Prevent page scroll on Space\n    onClick(event)\n  }\n}\n\n/**\n * Development warning for interactive card usage.\n * Warns when onClick is provided without the interactive prop.\n *\n * This function is intentionally empty to comply with no-console linting rules.\n * In the future, consider using a proper logging/warning system.\n *\n * @param hasOnClick - Whether onClick handler is provided\n * @param isInteractive - Whether interactive prop is set\n */\nexport function warnInteractiveUsage(\n  hasOnClick: boolean,\n  isInteractive?: boolean\n): void {\n  // Development warning removed to comply with ESLint no-console rule\n  // TODO: Consider using a proper warning system if needed\n  void hasOnClick\n  void isInteractive\n}\n"]}

package/libs/chunk-PQ2K3BM6.cjs

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

package/libs/chunk-PQ2K3BM6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/heading/heading.tsx","../src/components/title/title.tsx"],"names":["React","Title","level","id","styles","ui","children","className","props","ref","ui_default","title_default","Heading","type","heading_default"],"mappings":"yCAAA,OAAOA,MAAW,QCAlB,OAAOA,MAAW,QAyLlB,IAAMC,EAAQD,EAAM,KAClBA,EAAM,WACJ,CACE,CACE,MAAAE,EAAQ,KACR,GAAAC,EACA,OAAAC,EACA,GAAAC,EACA,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,EACAC,IAGET,EAAA,cAACU,EAAA,CACC,GAAIR,EACJ,GAAIC,EACJ,OAAQC,EACR,UAASC,EACT,UAAWE,EACX,IAAKE,EACJ,GAAGD,GAEHF,CACH,CAGN,CACF,EAEAL,EAAM,YAAc,QAEpB,IAAOU,EAAQV,EDlJf,IAAMW,EAAUZ,EAAM,WACpB,CAAC,CAAE,KAAAa,EAAO,KAAM,GAAGL,CAAM,EAAGC,KAEtB,QAAQ,IAAI,WAAa,eAE3B,QAAQ,KACN;AAAA,4BAE6BI,CAAI,2BAAsBA,CAAI;AAAA,sDAE7D,EAIKb,EAAA,cAACW,EAAA,CAAM,MAAOE,EAAM,IAAKJ,EAAM,GAAGD,EAAO,EAEpD,EAEAI,EAAQ,YAAc,uBAEtB,IAAOE,EAAQF","sourcesContent":["import React from \"react\";\nimport Title from \"#components/title/title\";\n\n/**\n * @deprecated Use `Title` component instead. This component will be removed in v3.0.0.\n *\n * @remarks\n * The `Heading` component has been deprecated in favor of the new `Title` component\n * which offers improved API design and better accessibility features.\n *\n * **Migration Guide:**\n * - Rename `Heading` → `Title`\n * - Rename prop `type` → `level`\n * - Default level changed from `h3` → `h2` (update if you relied on the default)\n *\n * @example\n * // Before (deprecated):\n * <Heading type=\"h2\">Section Title</Heading>\n *\n * // After:\n * <Title level=\"h2\">Section Title</Title>\n *\n * @see {@link Title} for the new component\n */\nexport type TitleProps = {\n  /**\n   * @deprecated Use `level` prop on the `Title` component instead.\n   */\n  children: React.ReactNode;\n\n  /**\n   * @deprecated Use `level` prop on the `Title` component instead.\n   */\n  type?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\n  /**\n   * @deprecated Use `ui` prop on the `Title` component.\n   */\n  ui?: string;\n} & Omit<React.ComponentPropsWithoutRef<typeof Title>, 'level'>;\n\n/**\n * Heading - Deprecated component wrapper for Title.\n *\n * @deprecated Use {@link Title} component instead. Will be removed in v3.0.0.\n *\n * This component provides backwards compatibility for existing code using\n * the old `Heading` component API. It forwards all props to the new `Title`\n * component with appropriate prop name mapping.\n *\n * **Breaking Changes in v3.0.0:**\n * - This component will be removed\n * - Migrate to `Title` component before upgrading\n *\n * **Migration Steps:**\n * 1. Replace all `<Heading>` imports with `<Title>`\n * 2. Rename `type` prop to `level`\n * 3. Review default behavior (default changed from h3 to h2)\n *\n * @example\n * // Old API (still works but deprecated):\n * import { Heading } from '@fpkit/acss';\n * <Heading type=\"h2\">Section</Heading>\n *\n * @example\n * // New API (recommended):\n * import { Title } from '@fpkit/acss';\n * <Title level=\"h2\">Section</Title>\n *\n * @param {TitleProps} props - Component props (maps old API to new)\n * @returns {React.ReactElement} The rendered Title component\n */\nconst Heading = React.forwardRef<HTMLHeadingElement, TitleProps>(\n  ({ type = \"h3\", ...props }, ref) => {\n    // Development warning for deprecated usage\n    if (process.env.NODE_ENV === \"development\") {\n      // eslint-disable-next-line no-console\n      console.warn(\n        `[@fpkit/acss] Heading component is deprecated and will be removed in v3.0.0. ` +\n        `Please use the Title component instead.\\n` +\n        `Migration: <Heading type=\"${type}\"> → <Title level=\"${type}\">\\n` +\n        `See documentation: https://fpkit.dev/components/title`\n      );\n    }\n\n    // Map old 'type' prop to new 'level' prop\n    return <Title level={type} ref={ref} {...props} />;\n  }\n);\n\nHeading.displayName = \"Heading (Deprecated)\";\n\nexport default Heading;\n","import React from \"react\";\nimport UI from \"#components/ui\";\n\n/**\n * Valid HTML heading levels for semantic document structure.\n *\n * @remarks\n * Heading levels establish the document outline and hierarchy for screen readers.\n * Always maintain proper heading order (don't skip levels) for WCAG 2.1 compliance.\n *\n * @example\n * // ✅ GOOD: Proper heading hierarchy\n * <Title level=\"h1\">Main Page Title</Title>\n * <Title level=\"h2\">Section Heading</Title>\n * <Title level=\"h3\">Subsection Heading</Title>\n *\n * @example\n * // ❌ BAD: Skipping heading levels\n * <Title level=\"h1\">Main Title</Title>\n * <Title level=\"h4\">Skipped h2 and h3</Title>\n */\nexport type HeadingLevel = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\n/**\n * Props for the Title component.\n *\n * @typeParam TLevel - The heading level to render (h1-h6)\n *\n * @property {HeadingLevel} level - The semantic heading level (h1-h6). Defaults to \"h2\".\n * @property {React.ReactNode} children - The text or elements to render inside the heading.\n * @property {string} [id] - Unique identifier for the heading, useful for anchor links.\n * @property {React.CSSProperties} [styles] - Inline styles to apply to the heading.\n * @property {string} [ui] - Data attribute for UI framework styling hooks.\n * @property {string} [className] - CSS class names to apply.\n *\n * @remarks\n * This interface extends the polymorphic UI component props, providing full access\n * to native HTML heading attributes and ARIA properties for accessibility.\n *\n * For AI assistants: This component ensures semantic HTML structure for document\n * outlines, which is critical for screen reader navigation and SEO.\n */\nexport type TitleProps = {\n  /**\n   * The semantic heading level to render.\n   *\n   * @default \"h2\"\n   *\n   * @remarks\n   * Choose the appropriate level based on your document structure:\n   * - h1: Page title (typically one per page)\n   * - h2: Major sections\n   * - h3-h6: Subsections and nested content\n   *\n   * WCAG 2.1 requires proper heading hierarchy for screen reader users.\n   */\n  level?: HeadingLevel;\n\n  /**\n   * The content to display in the heading.\n   *\n   * @remarks\n   * Can be text, elements, or a combination. Ensure text content is meaningful\n   * and descriptive for users navigating with screen readers.\n   */\n  children: React.ReactNode;\n\n  /**\n   * Unique identifier for the heading element.\n   *\n   * @remarks\n   * Useful for:\n   * - Creating anchor links to sections\n   * - ARIA relationships (aria-labelledby, aria-describedby)\n   * - Testing and automation\n   */\n  id?: string;\n\n  /**\n   * Data attribute for UI framework styling hooks.\n   *\n   * @remarks\n   * Used by fpkit's CSS system to apply component-specific styles.\n   * Automatically prefixed with \"data-ui\" when rendered.\n   */\n  ui?: string;\n\n  /**\n   * CSS class names to apply to the heading.\n   *\n   * @remarks\n   * Prefer using the `ui` prop for fpkit styling, and this for\n   * utility classes or custom overrides.\n   */\n  className?: string;\n} & React.ComponentPropsWithoutRef<typeof UI>;\n\n/**\n * Title - A semantic heading component for document structure and hierarchy.\n *\n * The Title component renders semantic HTML headings (h1-h6) with proper\n * accessibility support. It ensures WCAG 2.1 AA compliance by maintaining\n * semantic document structure for screen readers and assistive technologies.\n *\n * ## Key Features\n *\n * - **Semantic HTML**: Renders actual heading elements (h1-h6) for proper document outline\n * - **Accessibility**: Full ARIA support and keyboard navigation\n * - **Flexible Styling**: Supports fpkit's UI system, custom classes, and inline styles\n * - **Type Safety**: Fully typed with TypeScript for developer experience\n * - **Performance**: Memoized to prevent unnecessary re-renders\n *\n * ## Accessibility Considerations\n *\n * ### WCAG 2.1 AA Compliance\n *\n * - **1.3.1 Info and Relationships (Level A)**: Semantic heading elements preserve\n *   document structure for screen readers\n * - **2.4.6 Headings and Labels (Level AA)**: Headings should be descriptive and\n *   properly ordered\n * - **2.4.10 Section Headings (Level AAA)**: Use headings to organize content\n *\n * ### Best Practices\n *\n * 1. **Maintain Heading Hierarchy**: Don't skip levels (e.g., h1 → h3)\n * 2. **One h1 Per Page**: Use h1 for the main page title only\n * 3. **Descriptive Text**: Headings should clearly describe the following content\n * 4. **Avoid Empty Headings**: Always provide meaningful text content\n *\n * ## Usage Examples\n *\n * @example\n * // Basic usage with default h2\n * <Title>Section Heading</Title>\n *\n * @example\n * // Page title with explicit h1\n * <Title level=\"h1\">Welcome to Our Application</Title>\n *\n * @example\n * // Subsection with custom styling\n * <Title\n *   level=\"h3\"\n *   id=\"getting-started\"\n *   className=\"text-primary\"\n * >\n *   Getting Started\n * </Title>\n *\n * @example\n * // With fpkit UI data attribute\n * <Title level=\"h2\" ui=\"section-title\">\n *   Features Overview\n * </Title>\n *\n * @example\n * // Accessible heading with aria-label for context\n * <Title level=\"h2\" aria-label=\"User dashboard overview\">\n *   Dashboard\n * </Title>\n *\n * @example\n * // Complex heading with mixed content\n * <Title level=\"h2\" id=\"stats\">\n *   <Icon name=\"chart\" aria-hidden=\"true\" />\n *   <span>Statistics</span>\n * </Title>\n *\n * @example\n * // ✅ GOOD: Proper heading hierarchy\n * <Title level=\"h1\">Page Title</Title>\n * <Title level=\"h2\">Main Section</Title>\n * <Title level=\"h3\">Subsection</Title>\n *\n * @example\n * // ❌ BAD: Skipping heading levels (accessibility violation)\n * <Title level=\"h1\">Page Title</Title>\n * <Title level=\"h4\">Skipped h2 and h3</Title>\n *\n * @param {TitleProps} props - Component props\n * @returns {React.ReactElement} A semantic heading element\n *\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html WCAG 1.3.1}\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels.html WCAG 2.4.6}\n */\nconst Title = React.memo(\n  React.forwardRef<HTMLHeadingElement, TitleProps>(\n    (\n      {\n        level = \"h2\",\n        id,\n        styles,\n        ui,\n        children,\n        className,\n        ...props\n      }: TitleProps,\n      ref\n    ) => {\n      return (\n        <UI\n          as={level}\n          id={id}\n          styles={styles}\n          data-ui={ui}\n          className={className}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </UI>\n      );\n    }\n  )\n);\n\nTitle.displayName = \"Title\";\n\nexport default Title;\n"]}

package/libs/{chunk-QCMV4VQZ.js → chunk-QLZWHAMK.js}

@@ -1,8 +1,8 @@
-import { a } from './chunk-NE6YXTMC.js';
+import { a } from './chunk-KUKIVRC2.js';
 import v from 'react';
 
 var r=({type:a$1="button",children:i,styles:l,disabled:e,classes:u,onPointerDown:P,onPointerOver:c,onPointerLeave:p,onClick:s,...m})=>{let n=t=>{e||P?.(t);};return v.createElement(a,{as:"button",type:a$1,onPointerOver:t=>{e||c?.(t);},onPointerDown:n,onPointerLeave:t=>{e||p?.(t);},onKeyDown:n,style:l,className:u,"aria-disabled":e,onClick:t=>{e||s?.(t);},...m},i)},L=r;r.displayName="Button";
 
 export { r as a, L as b };
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-QCMV4VQZ.js.map
+//# sourceMappingURL=chunk-QLZWHAMK.js.map

package/libs/{chunk-BIP2NY53.js → chunk-RIVUMPOG.js}

@@ -1,8 +1,8 @@
-import { a } from './chunk-NE6YXTMC.js';
+import { a } from './chunk-KUKIVRC2.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
+//# sourceMappingURL=chunk-RIVUMPOG.js.map

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

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

package/libs/{chunk-NHYXGV3L.js → chunk-SMYRLO3E.js}

@@ -1,8 +1,8 @@
-import { a } from './chunk-NE6YXTMC.js';
+import { a } from './chunk-KUKIVRC2.js';
 import * as i from 'react';
 
 var n=({type:t="li",id:e,styles:s,children:o,classes:r,...p})=>i.createElement(a,{id:e,as:t,className:r,...p,style:s},o),l=({children:t,classes:e,type:s="ul",variant:o,styles:r,role:p,...m})=>i.createElement(a,{as:s,"data-variant":o,className:e,style:r,role:p,...m},t),I=l;l.displayName="List";l.ListItem=n;
 
 export { n as a, l as b, I as c };
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-NHYXGV3L.js.map
+//# sourceMappingURL=chunk-SMYRLO3E.js.map

package/libs/{chunk-5ZM4XL44.js → chunk-TYRCEX2L.js}

@@ -1,8 +1,8 @@
-import { a as a$1 } from './chunk-NE6YXTMC.js';
+import { a as a$1 } from './chunk-KUKIVRC2.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
+//# sourceMappingURL=chunk-TYRCEX2L.js.map

package/libs/chunk-VUH3FXGJ.js

@@ -0,0 +1,11 @@
+import { b } from './chunk-ETFLFC2S.js';
+import { b as b$2 } from './chunk-772NRB75.js';
+import { b as b$1 } from './chunk-QLZWHAMK.js';
+import { a } from './chunk-KUKIVRC2.js';
+import s, { useCallback, useRef, useId, useEffect } from 'react';
+
+var y=({dialogTitle:t,onClick:o,id:l,type:e="h3"})=>{let a$1=useCallback(()=>{o();},[o]);return s.createElement(a,{as:"div",classes:"dialog-header"},s.createElement(b,{type:e,className:"dialog-title",id:l},t||"Dialog"),s.createElement(b$1,{type:"button",onClick:a$1,className:"dialog-close","aria-label":"Close dialog","data-btn":"icon"},s.createElement(b$2,null,s.createElement(b$2.Remove,{size:16}))))},D=s.memo(y);y.displayName="DialogHeader";var H=({onClose:t,onConfirm:o,confirmLabel:l,cancelLabel:e})=>{let a$1=useCallback(()=>{t();},[t]),m=useCallback(()=>{o&&o();},[o]);return s.createElement(a,{as:"section",className:"dialog-footer"},e&&s.createElement(b$1,{type:"button",onClick:a$1,className:"dialog-button button-secondary","data-btn":"sm"},e),o&&s.createElement(b$1,{type:"button",onClick:m,className:"dialog-button button-primary","data-btn":"sm"},l))};H.displayName="DialogFooter";var I=s.memo(H);var h=(t,o)=>useCallback(e=>{let a=t.current?.getBoundingClientRect();a&&(e.clientY<a.top||e.clientY>a.bottom||e.clientX<a.left||e.clientX>a.right)&&o();},[t,o]);var F=({isOpen:t,onOpenChange:o,isAlertDialog:l=!1,onClose:e,dialogTitle:a$1,dialogLabel:m,children:P,onConfirm:U,confirmLabel:B="Confirm",cancelLabel:E="Cancel",className:M="",hideFooter:v=!1,styles:x})=>{let f=useRef(null),u=useId();useEffect(()=>{let r=f.current;r&&(t?l?r.show():r.showModal():r.close());},[t,l]);let c=useCallback(()=>{o(!1),e&&e();},[o,e]),L=h(f,c),b=useId();return s.createElement(a,{as:"dialog",role:l?"alertdialog":"dialog",ref:f,onClose:c,onClick:L,"aria-modal":t&&!l?"true":void 0,"aria-labelledby":u,"aria-describedby":b,"aria-label":m,className:`dialog-modal ${M}`.trim(),style:x},s.createElement(D,{dialogTitle:a$1,onClick:c,id:u}),s.createElement(a,{as:"section",id:b,className:"dialog-content",onClick:r=>r.stopPropagation()},P,!v&&s.createElement(I,{onClose:c,onConfirm:U,confirmLabel:B,cancelLabel:E})))};F.displayName="Dialog";var ao=s.memo(F);
+
+export { F as a, ao as b };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-VUH3FXGJ.js.map

package/libs/chunk-VUH3FXGJ.js.map

@@ -0,0 +1 @@
+{"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","useCallback","useId","DialogHeader","dialogTitle","onClick","id","type","handleClose","ui_default","heading_default","button_default","icon_default","dialog_header_default","DialogFooter","onClose","onConfirm","confirmLabel","cancelLabel","handleCancel","handleConfirm","dialog_footer_default","useDialogClickHandler","dialogRef","dialogDimensions","Dialog","isOpen","onOpenChange","isAlertDialog","dialogLabel","children","className","hideFooter","styles","titleId","dialog","handleClickOutside","contentId","e","dialog_default"],"mappings":"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","sourcesContent":["import React, { useRef, useEffect, useCallback, useId } 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\";\nimport type { DialogProps } from \"./dialog.types\";\n\n/**\n * A controlled dialog component that supports both modal and non-modal (inline alert) modes.\n *\n * **Modal Dialog** (default): Uses native `<dialog>` element with `.showModal()` which provides:\n * - Automatic focus trap (Tab cycles within dialog)\n * - Escape key closes dialog (native behavior)\n * - Backdrop overlay with click-to-close\n * - Inert background (page content becomes non-interactive)\n *\n * **Inline Alert Dialog** (`isAlertDialog={true}`): Uses `.show()` for non-modal inline alerts:\n * - No focus trap (page remains interactive)\n * - No escape key behavior\n * - Positioned inline in page flow\n * - User must explicitly close with button\n *\n * @component\n * @example\n * ```tsx\n * // Controlled usage\n * const [open, setOpen] = useState(false);\n * <Dialog\n *   isOpen={open}\n *   onOpenChange={setOpen}\n *   dialogTitle=\"Confirm Delete\"\n * >\n *   Are you sure you want to delete this item?\n * </Dialog>\n * ```\n *\n * @param {DialogProps} props - Component props\n * @param {boolean} props.isOpen - Controls whether the dialog is currently open\n * @param {(open: boolean) => void} props.onOpenChange - Callback fired when dialog open state changes\n * @param {string} props.dialogTitle - The title displayed in the dialog header\n * @param {boolean} [props.isAlertDialog=false] - If true, renders as non-modal inline alert\n * @param {() => void} [props.onClose] - Deprecated: Use onOpenChange. Called when dialog closes.\n * @param {ReactNode} props.children - Content to display inside the dialog body\n * @param {() => void | Promise<void>} [props.onConfirm] - Callback fired when confirm button is clicked\n * @param {string} [props.confirmLabel=\"Confirm\"] - Text label for confirm button\n * @param {string} [props.cancelLabel=\"Cancel\"] - Text label for cancel button\n * @param {boolean} [props.hideFooter=false] - If true, hides the footer with action buttons\n * @param {string} [props.className] - Additional CSS classes to apply\n * @param {string} [props.dialogLabel] - Optional aria-label for the dialog\n * @param {CSSProperties} [props.styles] - Inline styles to apply to dialog element\n * @returns {JSX.Element} A controlled dialog component\n */\nexport const Dialog: React.FC<DialogProps> = ({\n  isOpen,\n  onOpenChange,\n  isAlertDialog = false,\n  onClose,\n  dialogTitle,\n  dialogLabel,\n  children,\n  onConfirm,\n  confirmLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  className = \"\",\n  hideFooter = false,\n  styles,\n}) => {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const titleId = useId();\n\n  // Handle native dialog open/close based on isOpen prop\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n\n    if (isOpen) {\n      if (isAlertDialog) {\n        // Non-modal inline alert - no focus trap, no backdrop\n        dialog.show();\n      } else {\n        // Modal dialog - native focus trap, escape key, backdrop\n        dialog.showModal();\n      }\n    } else {\n      dialog.close();\n    }\n  }, [isOpen, isAlertDialog]);\n\n  // Handle close event - notify parent via onOpenChange\n  const handleClose = useCallback(() => {\n    onOpenChange(false);\n    // Support deprecated onClose prop for backward compatibility\n    if (onClose) onClose();\n  }, [onOpenChange, onClose]);\n\n  // Handle backdrop clicks (only for modal dialogs)\n  const handleClickOutside = useDialogClickHandler(dialogRef, handleClose);\n\n  const contentId = useId();\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 && !isAlertDialog ? \"true\" : undefined}\n      aria-labelledby={titleId}\n      aria-describedby={contentId}\n      aria-label={dialogLabel}\n      className={`dialog-modal ${className}`.trim()}\n      style={styles}\n    >\n      <DialogHeader dialogTitle={dialogTitle} onClick={handleClose} id={titleId} />\n\n      <UI\n        as=\"section\"\n        id={contentId}\n        className=\"dialog-content\"\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};\nDialog.displayName = \"Dialog\";\n\nexport default React.memo(Dialog);\n","import React, { useCallback } 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\";\nimport type { DialogHeaderProps } from \"../dialog.types\";\n\n/**\n * DialogHeader component displays the header section of a dialog with a title and close button.\n *\n * This component is optimized for accessibility with:\n * - Unique ID for `aria-labelledby` linking to parent dialog\n * - Semantic heading structure for screen readers\n * - Clear close button with accessible label\n * - Memoized to prevent unnecessary re-renders\n *\n * @component\n * @param {DialogHeaderProps} 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.id] - Optional ID for aria-labelledby linking. Auto-generated if not provided.\n * @param {\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"} [props.type=\"h3\"] - Heading level for semantic structure\n * @returns {JSX.Element} A dialog header with title and close button\n *\n * @example\n * ```tsx\n * <DialogHeader\n *   id=\"dialog-title-1\"\n *   dialogTitle=\"Confirm Action\"\n *   onClick={() => setIsOpen(false)}\n *   type=\"h2\"\n * />\n * ```\n */\nconst DialogHeader: React.FC<DialogHeaderProps> = ({\n  dialogTitle,\n  onClick,\n  id,\n  type = \"h3\",\n}) => {\n  const handleClose = useCallback(() => {\n    onClick();\n  }, [onClick]);\n\n  return (\n    <UI as=\"div\" classes=\"dialog-header\">\n      <Heading type={type} className=\"dialog-title\" id={id}>\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, { useCallback } from \"react\";\nimport UI from \"#components/ui\";\nimport Button from \"#components/buttons/button\";\nimport type { DialogFooterProps } from \"../dialog.types\";\n\n/**\n * DialogFooter component renders action buttons for dialog confirmation/cancellation.\n *\n * This component provides a consistent footer layout with:\n * - Cancel button (secondary style) - Always shown if cancelLabel provided\n * - Confirm button (primary style) - Only shown if onConfirm callback provided\n * - Proper semantic button types\n * - Accessible button sizing and spacing\n * - Memoized to prevent unnecessary re-renders\n *\n * @component\n * @param {DialogFooterProps} props - Component props\n * @param {() => void} props.onClose - Callback fired when cancel button is clicked\n * @param {() => void | Promise<void>} [props.onConfirm] - Optional callback for confirm action. If omitted, confirm button is hidden.\n * @param {string} props.confirmLabel - Text label for the confirm button\n * @param {string} props.cancelLabel - Text label for the cancel button\n * @returns {JSX.Element} A footer section with action buttons\n *\n * @example\n * ```tsx\n * // Simple close-only footer\n * <DialogFooter\n *   onClose={() => setOpen(false)}\n *   cancelLabel=\"Close\"\n *   confirmLabel=\"OK\"\n * />\n *\n * // Confirmation dialog with both actions\n * <DialogFooter\n *   onClose={() => setOpen(false)}\n *   onConfirm={async () => await deleteItem()}\n *   confirmLabel=\"Delete\"\n *   cancelLabel=\"Cancel\"\n * />\n * ```\n */\nconst DialogFooter: React.FC<DialogFooterProps> = ({\n  onClose,\n  onConfirm,\n  confirmLabel,\n  cancelLabel,\n}) => {\n  // Memoize handlers to prevent unnecessary re-renders\n  const handleCancel = useCallback(() => {\n    onClose();\n  }, [onClose]);\n\n  const handleConfirm = useCallback(() => {\n    if (onConfirm) {\n      onConfirm();\n    }\n  }, [onConfirm]);\n\n  return (\n    <UI as=\"section\" className=\"dialog-footer\">\n      {cancelLabel && (\n        <Button\n          type=\"button\"\n          onClick={handleCancel}\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={handleConfirm}\n          className=\"dialog-button button-primary\"\n          data-btn=\"sm\"\n        >\n          {confirmLabel}\n        </Button>\n      )}\n    </UI>\n  );\n};\n\nDialogFooter.displayName = \"DialogFooter\";\n\nexport default React.memo(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-PPOOBUOS.js → chunk-XBA562WW.js}

@@ -1,8 +1,8 @@
-import { a } from './chunk-NE6YXTMC.js';
+import { a } from './chunk-KUKIVRC2.js';
 import y from 'react';
 
 var s=({id:p,classes:c,value:x,rows:m=5,cols:h=25,name:T,required:a$1,disabled:t,readOnly:i,onBlur:r,onPointerDown:n,onChange:o,ref:d,styles:f,placeholder:P,...u})=>y.createElement(a,{as:"textarea",id:p,name:T,rows:m,cols:h,styles:f,className:c,"data-style":"textarea",required:a$1,value:x,"aria-disabled":t,readOnly:i,onChange:e=>{o&&!t&&o?.(e);},onBlur:e=>{r&&!t&&r?.(e);},onPointerDown:e=>{n&&!t&&n?.(e);},ref:d,placeholder:P||`${a$1?"*":""} Message`,...u}),M=s;s.displayName="Textarea";
 
 export { s as a, M as b };
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-PPOOBUOS.js.map
+//# sourceMappingURL=chunk-XBA562WW.js.map

package/libs/{chunk-QVV34QEH.cjs → chunk-XTQKWY7W.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk6TE5QEVE_cjs = require('./chunk-6TE5QEVE.cjs');
+var chunkL75OQKEI_cjs = require('./chunk-L75OQKEI.cjs');
 var i = require('react');
 
 function _interopNamespace(e) {
@@ -23,10 +23,10 @@ function _interopNamespace(e) {
 
 var i__namespace = /*#__PURE__*/_interopNamespace(i);
 
-var n=({type:t="li",id:e,styles:s,children:o,classes:r,...p})=>i__namespace.createElement(chunk6TE5QEVE_cjs.a,{id:e,as:t,className:r,...p,style:s},o),l=({children:t,classes:e,type:s="ul",variant:o,styles:r,role:p,...m})=>i__namespace.createElement(chunk6TE5QEVE_cjs.a,{as:s,"data-variant":o,className:e,style:r,role:p,...m},t),I=l;l.displayName="List";l.ListItem=n;
+var n=({type:t="li",id:e,styles:s,children:o,classes:r,...p})=>i__namespace.createElement(chunkL75OQKEI_cjs.a,{id:e,as:t,className:r,...p,style:s},o),l=({children:t,classes:e,type:s="ul",variant:o,styles:r,role:p,...m})=>i__namespace.createElement(chunkL75OQKEI_cjs.a,{as:s,"data-variant":o,className:e,style:r,role:p,...m},t),I=l;l.displayName="List";l.ListItem=n;
 
 exports.a = n;
 exports.b = l;
 exports.c = I;
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-QVV34QEH.cjs.map
+//# sourceMappingURL=chunk-XTQKWY7W.cjs.map

package/libs/{chunk-YWOYVRFT.js → chunk-ZANSFMTD.js}

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

package/libs/components/alert/alert.css

@@ -1 +1 @@
-[role=alert]{--alert-success-bg: #e6f4ea;--alert-success-border: #34a853;--alert-success-text: #1e4620;--alert-error-bg: #fdeded;--alert-error-border: #d32f2f;--alert-error-text: #5f2120;--alert-warning-bg: #fff4e5;--alert-warning-border: #ff9800;--alert-warning-text: #663c00;--alert-info-bg: #e5f6fd;--alert-info-border: #0288d1;--alert-info-text: #084154;--alert-border: thin solid currentColor;background-color:var(--alert-bg, whitesmoke);border:var(--alert-border, currentColor);color:var(--alert-color, currentColor);padding:var(--alert-padding, var(--spc-4));margin-block-end:var(--alert-margin-block-end);font-size:var(--fs-0);line-height:1.6;display:flex;flex-direction:row;border-radius:var(--alert-border-radius, var(--border-radius));border:var(--alert-border);gap:var(--alert-gap, var(--spc-4))}[role=alert] div{margin-block-start:0;align-items:center}[role=alert] .alert-message{flex:2;margin-block-start:0}[role=alert] .alert-message h3{margin-block-end:0}[role=alert][data-alert~=info]{--alert-bg: var(--alert-info-bg);--alert-color: var(--alert-info-text);border-color:var(--alert-info-border)}[role=alert][data-alert~=warning]{--alert-bg: var(--alert-warning-bg);--alert-color: var(--alert-warning-text);border-color:var(--alert-warning-border)}[role=alert][data-alert~=error]{--alert-bg: var(--alert-error-bg);--alert-color: var(--alert-error-text);border-color:var(--alert-error-border)}[role=alert][data-alert~=success]{--alert-bg: var(--alert-success-bg);--alert-color: var(--alert-success-text);border-color:var(--alert-success-border)}[role=alert] button[data-btn~=icon]{--btn-bg: transparent}/*# sourceMappingURL=alert.css.map */
+.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}[role=alert]{--alert-success-bg: #e6f4ea;--alert-success-border: #34a853;--alert-success-text: #1e4620;--alert-error-bg: #fdeded;--alert-error-border: #d32f2f;--alert-error-text: #5f2120;--alert-warning-bg: #fff4e5;--alert-warning-border: #ff9800;--alert-warning-text: #663c00;--alert-info-bg: #e5f6fd;--alert-info-border: #0288d1;--alert-info-text: #084154;--alert-transition-duration: 0.3s;--alert-border: thin solid currentColor;background-color:var(--alert-bg, whitesmoke);border:var(--alert-border, currentColor);color:var(--alert-color, currentColor);padding:var(--alert-padding, var(--spc-4));margin-block-end:var(--alert-margin-block-end);font-size:var(--fs-0);line-height:1.6;display:flex;flex-direction:row;border-radius:var(--alert-border-radius, var(--border-radius));gap:var(--alert-gap, var(--spc-4));transition:opacity var(--alert-transition-duration) ease,transform var(--alert-transition-duration) ease;opacity:1;transform:translateY(0)}[role=alert]:not([data-visible=true]){opacity:0;transform:translateY(-0.5rem)}@media(prefers-reduced-motion: reduce){[role=alert]{transition-duration:.01ms}}[role=alert]:focus{outline:2px solid currentColor;outline-offset:2px}[role=alert]:focus:not(:focus-visible){outline:none}[role=alert] .alert-icon{margin-block-start:0;align-items:center}[role=alert] .alert-message{flex:2;margin-block-start:0}[role=alert] .alert-message .alert-title{margin-block-end:var(--spc-1, 0.25rem);margin-block-start:0;font-weight:var(--alert-title-weight, 600);font-size:var(--alert-title-size, inherit);line-height:1.4}[role=alert] .alert-message h2.alert-title,[role=alert] .alert-message h3.alert-title,[role=alert] .alert-message h4.alert-title,[role=alert] .alert-message h5.alert-title,[role=alert] .alert-message h6.alert-title{margin:0;margin-block-end:var(--spc-1, 0.25rem);font-size:inherit;font-weight:var(--alert-title-weight, 600)}[role=alert][data-alert~=info]{--alert-bg: var(--alert-info-bg);--alert-color: var(--alert-info-text);border-color:var(--alert-info-border)}[role=alert][data-alert~=warning]{--alert-bg: var(--alert-warning-bg);--alert-color: var(--alert-warning-text);border-color:var(--alert-warning-border)}[role=alert][data-alert~=error]{--alert-bg: var(--alert-error-bg);--alert-color: var(--alert-error-text);border-color:var(--alert-error-border)}[role=alert][data-alert~=success]{--alert-bg: var(--alert-success-bg);--alert-color: var(--alert-success-text);border-color:var(--alert-success-border)}[role=alert] button[data-btn~=icon]{--btn-bg: transparent}[role=alert] *+div{margin-block-start:var(--spc-1)}[role=alert][data-variant=filled]{border:none}[role=alert][data-variant=filled][data-alert~=info]{--alert-bg: var(--alert-info-border);--alert-color: white}[role=alert][data-variant=filled][data-alert~=warning]{--alert-bg: var(--alert-warning-border);--alert-color: white}[role=alert][data-variant=filled][data-alert~=error]{--alert-bg: var(--alert-error-border);--alert-color: white}[role=alert][data-variant=filled][data-alert~=success]{--alert-bg: var(--alert-success-border);--alert-color: white}[role=alert][data-variant=filled][data-alert~=default]{--alert-bg: #757575;--alert-color: white}[role=alert][data-variant=soft]{border:none}[role=alert] p{font-size:.875rem}/*# sourceMappingURL=alert.css.map */

package/libs/components/alert/alert.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/alert/alert.scss"],"names":[],"mappings":"AAAA,aAEE,4BACA,gCACA,8BAGA,0BACA,8BACA,4BAGA,4BACA,gCACA,8BAGA,yBACA,6BACA,2BAEA,wCAEA,6CACA,yCACA,uCACA,2CACA,+CACA,sBACA,gBACA,aACA,mBAEA,+DACA,2BACA,mCACA,iBACE,qBACA,mBAGF,4BACE,OACA,qBACA,+BACE,mBAIJ,+BACE,iCACA,sCACA,sCAGF,kCACE,oCACA,yCACA,yCAGF,gCACE,kCACA,uCACA,uCAGF,kCACE,oCACA,yCACA,yCAIA,oCACE","file":"alert.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/alert/alert.scss"],"names":[],"mappings":"AACA,SACE,kBACA,UACA,WACA,UACA,YACA,gBACA,sBACA,mBACA,eAGF,aAEE,4BACA,gCACA,8BAGA,0BACA,8BACA,4BAGA,4BACA,gCACA,8BAGA,yBACA,6BACA,2BAGA,kCAEA,wCAEA,6CACA,yCACA,uCACA,2CACA,+CACA,sBACA,gBACA,aACA,mBACA,+DACA,mCAGA,WACE,8FAEF,UACA,wBAEA,sCACE,UACA,8BAGF,uCAlDF,aAmDI,2BAIF,mBACE,+BACA,mBAIF,uCACE,aAGF,yBACE,qBACA,mBAGF,4BACE,OACA,qBAGA,yCACE,uCACA,qBACA,2CACA,2CACA,gBAIF,uNAKE,SACA,uCACA,kBACA,2CAIJ,+BACE,iCACA,sCACA,sCAGF,kCACE,oCACA,yCACA,yCAGF,gCACE,kCACA,uCACA,uCAGF,kCACE,oCACA,yCACA,yCAIA,oCACE,sBAIJ,mBACE,gCAIF,kCACE,YAEA,oDACE,qCACA,qBAGF,uDACE,wCACA,qBAGF,qDACE,sCACA,qBAGF,uDACE,wCACA,qBAGF,uDACE,oBACA,qBAKJ,gCACE,YAQF,eACE","file":"alert.css"}

package/libs/components/alert/alert.min.css

@@ -1,3 +1,3 @@
-[role=alert]{--alert-success-bg: #e6f4ea;--alert-success-border: #34a853;--alert-success-text: #1e4620;--alert-error-bg: #fdeded;--alert-error-border: #d32f2f;--alert-error-text: #5f2120;--alert-warning-bg: #fff4e5;--alert-warning-border: #ff9800;--alert-warning-text: #663c00;--alert-info-bg: #e5f6fd;--alert-info-border: #0288d1;--alert-info-text: #084154;--alert-border: thin solid currentColor;background-color:var(--alert-bg, whitesmoke);border:var(--alert-border, currentColor);color:var(--alert-color, currentColor);padding:var(--alert-padding, var(--spc-4));margin-block-end:var(--alert-margin-block-end);font-size:var(--fs-0);line-height:1.6;display:flex;flex-direction:row;border-radius:var(--alert-border-radius, var(--border-radius));border:var(--alert-border);gap:var(--alert-gap, var(--spc-4))}[role=alert] div{margin-block-start:0;align-items:center}[role=alert] .alert-message{flex:2;margin-block-start:0}[role=alert] .alert-message h3{margin-block-end:0}[role=alert][data-alert~=info]{--alert-bg: var(--alert-info-bg);--alert-color: var(--alert-info-text);border-color:var(--alert-info-border)}[role=alert][data-alert~=warning]{--alert-bg: var(--alert-warning-bg);--alert-color: var(--alert-warning-text);border-color:var(--alert-warning-border)}[role=alert][data-alert~=error]{--alert-bg: var(--alert-error-bg);--alert-color: var(--alert-error-text);border-color:var(--alert-error-border)}[role=alert][data-alert~=success]{--alert-bg: var(--alert-success-bg);--alert-color: var(--alert-success-text);border-color:var(--alert-success-border)}[role=alert] button[data-btn~=icon]{--btn-bg: transparent}
+.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}[role=alert]{--alert-success-bg: #e6f4ea;--alert-success-border: #34a853;--alert-success-text: #1e4620;--alert-error-bg: #fdeded;--alert-error-border: #d32f2f;--alert-error-text: #5f2120;--alert-warning-bg: #fff4e5;--alert-warning-border: #ff9800;--alert-warning-text: #663c00;--alert-info-bg: #e5f6fd;--alert-info-border: #0288d1;--alert-info-text: #084154;--alert-transition-duration: 0.3s;--alert-border: thin solid currentColor;background-color:var(--alert-bg, whitesmoke);border:var(--alert-border, currentColor);color:var(--alert-color, currentColor);padding:var(--alert-padding, var(--spc-4));margin-block-end:var(--alert-margin-block-end);font-size:var(--fs-0);line-height:1.6;display:flex;flex-direction:row;border-radius:var(--alert-border-radius, var(--border-radius));gap:var(--alert-gap, var(--spc-4));transition:opacity var(--alert-transition-duration) ease,transform var(--alert-transition-duration) ease;opacity:1;transform:translateY(0)}[role=alert]:not([data-visible=true]){opacity:0;transform:translateY(-0.5rem)}@media(prefers-reduced-motion: reduce){[role=alert]{transition-duration:.01ms}}[role=alert]:focus{outline:2px solid currentColor;outline-offset:2px}[role=alert]:focus:not(:focus-visible){outline:none}[role=alert] .alert-icon{margin-block-start:0;align-items:center}[role=alert] .alert-message{flex:2;margin-block-start:0}[role=alert] .alert-message .alert-title{margin-block-end:var(--spc-1, 0.25rem);margin-block-start:0;font-weight:var(--alert-title-weight, 600);font-size:var(--alert-title-size, inherit);line-height:1.4}[role=alert] .alert-message h2.alert-title,[role=alert] .alert-message h3.alert-title,[role=alert] .alert-message h4.alert-title,[role=alert] .alert-message h5.alert-title,[role=alert] .alert-message h6.alert-title{margin:0;margin-block-end:var(--spc-1, 0.25rem);font-size:inherit;font-weight:var(--alert-title-weight, 600)}[role=alert][data-alert~=info]{--alert-bg: var(--alert-info-bg);--alert-color: var(--alert-info-text);border-color:var(--alert-info-border)}[role=alert][data-alert~=warning]{--alert-bg: var(--alert-warning-bg);--alert-color: var(--alert-warning-text);border-color:var(--alert-warning-border)}[role=alert][data-alert~=error]{--alert-bg: var(--alert-error-bg);--alert-color: var(--alert-error-text);border-color:var(--alert-error-border)}[role=alert][data-alert~=success]{--alert-bg: var(--alert-success-bg);--alert-color: var(--alert-success-text);border-color:var(--alert-success-border)}[role=alert] button[data-btn~=icon]{--btn-bg: transparent}[role=alert] *+div{margin-block-start:var(--spc-1)}[role=alert][data-variant=filled]{border:none}[role=alert][data-variant=filled][data-alert~=info]{--alert-bg: var(--alert-info-border);--alert-color: white}[role=alert][data-variant=filled][data-alert~=warning]{--alert-bg: var(--alert-warning-border);--alert-color: white}[role=alert][data-variant=filled][data-alert~=error]{--alert-bg: var(--alert-error-border);--alert-color: white}[role=alert][data-variant=filled][data-alert~=success]{--alert-bg: var(--alert-success-border);--alert-color: white}[role=alert][data-variant=filled][data-alert~=default]{--alert-bg: #757575;--alert-color: white}[role=alert][data-variant=soft]{border:none}[role=alert] p{font-size:.875rem}
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2FsZXJ0L2FsZXJ0LnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsYUFFRSwyQkFBQSxDQUNBLCtCQUFBLENBQ0EsNkJBQUEsQ0FHQSx5QkFBQSxDQUNBLDZCQUFBLENBQ0EsMkJBQUEsQ0FHQSwyQkFBQSxDQUNBLCtCQUFBLENBQ0EsNkJBQUEsQ0FHQSx3QkFBQSxDQUNBLDRCQUFBLENBQ0EsMEJBQUEsQ0FFQSx1Q0FBQSxDQUVBLDRDQUFBLENBQ0Esd0NBQUEsQ0FDQSxzQ0FBQSxDQUNBLDBDQUFBLENBQ0EsOENBQUEsQ0FDQSxxQkFBQSxDQUNBLGVBQUEsQ0FDQSxZQUFBLENBQ0Esa0JBQUEsQ0FFQSw4REFBQSxDQUNBLDBCQUFBLENBQ0Esa0NBQUEsQ0FDQSxpQkFDRSxvQkFBQSxDQUNBLGtCQUFBLENBR0YsNEJBQ0UsTUFBQSxDQUNBLG9CQUFBLENBQ0EsK0JBQ0Usa0JBQUEsQ0FJSiwrQkFDRSxnQ0FBQSxDQUNBLHFDQUFBLENBQ0EscUNBQUEsQ0FHRixrQ0FDRSxtQ0FBQSxDQUNBLHdDQUFBLENBQ0Esd0NBQUEsQ0FHRixnQ0FDRSxpQ0FBQSxDQUNBLHNDQUFBLENBQ0Esc0NBQUEsQ0FHRixrQ0FDRSxtQ0FBQSxDQUNBLHdDQUFBLENBQ0Esd0NBQUEsQ0FJQSxvQ0FDRSxxQkFBQSIsImZpbGUiOiJhbGVydC5taW4uY3NzIn0= */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2FsZXJ0L2FsZXJ0LnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsU0FDRSxpQkFBQSxDQUNBLFNBQUEsQ0FDQSxVQUFBLENBQ0EsU0FBQSxDQUNBLFdBQUEsQ0FDQSxlQUFBLENBQ0EscUJBQUEsQ0FDQSxrQkFBQSxDQUNBLGNBQUEsQ0FHRixhQUVFLDJCQUFBLENBQ0EsK0JBQUEsQ0FDQSw2QkFBQSxDQUdBLHlCQUFBLENBQ0EsNkJBQUEsQ0FDQSwyQkFBQSxDQUdBLDJCQUFBLENBQ0EsK0JBQUEsQ0FDQSw2QkFBQSxDQUdBLHdCQUFBLENBQ0EsNEJBQUEsQ0FDQSwwQkFBQSxDQUdBLGlDQUFBLENBRUEsdUNBQUEsQ0FFQSw0Q0FBQSxDQUNBLHdDQUFBLENBQ0Esc0NBQUEsQ0FDQSwwQ0FBQSxDQUNBLDhDQUFBLENBQ0EscUJBQUEsQ0FDQSxlQUFBLENBQ0EsWUFBQSxDQUNBLGtCQUFBLENBQ0EsOERBQUEsQ0FDQSxrQ0FBQSxDQUdBLHdHQUNFLENBRUYsU0FBQSxDQUNBLHVCQUFBLENBRUEsc0NBQ0UsU0FBQSxDQUNBLDZCQUFBLENBR0YsdUNBbERGLGFBbURJLHlCQUFBLENBQUEsQ0FJRixtQkFDRSw4QkFBQSxDQUNBLGtCQUFBLENBSUYsdUNBQ0UsWUFBQSxDQUdGLHlCQUNFLG9CQUFBLENBQ0Esa0JBQUEsQ0FHRiw0QkFDRSxNQUFBLENBQ0Esb0JBQUEsQ0FHQSx5Q0FDRSxzQ0FBQSxDQUNBLG9CQUFBLENBQ0EsMENBQUEsQ0FDQSwwQ0FBQSxDQUNBLGVBQUEsQ0FJRix1TkFLRSxRQUFBLENBQ0Esc0NBQUEsQ0FDQSxpQkFBQSxDQUNBLDBDQUFBLENBSUosK0JBQ0UsZ0NBQUEsQ0FDQSxxQ0FBQSxDQUNBLHFDQUFBLENBR0Ysa0NBQ0UsbUNBQUEsQ0FDQSx3Q0FBQSxDQUNBLHdDQUFBLENBR0YsZ0NBQ0UsaUNBQUEsQ0FDQSxzQ0FBQSxDQUNBLHNDQUFBLENBR0Ysa0NBQ0UsbUNBQUEsQ0FDQSx3Q0FBQSxDQUNBLHdDQUFBLENBSUEsb0NBQ0UscUJBQUEsQ0FJSixtQkFDRSwrQkFBQSxDQUlGLGtDQUNFLFdBQUEsQ0FFQSxvREFDRSxvQ0FBQSxDQUNBLG9CQUFBLENBR0YsdURBQ0UsdUNBQUEsQ0FDQSxvQkFBQSxDQUdGLHFEQUNFLHFDQUFBLENBQ0Esb0JBQUEsQ0FHRix1REFDRSx1Q0FBQSxDQUNBLG9CQUFBLENBR0YsdURBQ0UsbUJBQUEsQ0FDQSxvQkFBQSxDQUtKLGdDQUNFLFdBQUEsQ0FRRixlQUNFLGlCQUFBIiwiZmlsZSI6ImFsZXJ0Lm1pbi5jc3MifQ== */

package/libs/components/badge/badge.css

@@ -1 +1 @@
-sup:has(>span){--badge-bg: lightgray;--badge-color: currentColor;--badge-radius: 0.5rem;--badge-padding: 0.3rem;--badge-v-align: 0.5rem;--badge-fs: var(--fs-1);background-color:var(--badge-bg);color:var(--badge-color);padding:var(--badge-padding);border-radius:var(--badge-radius);vertical-align:var(--badge-v-align);font-size:var(--badge-fs)}sup:has(>span) span{color:inherit}sup:has(>span)[data-badge~=rounded]{--badge-radius: 100%;--badge-padding: 0.2rem}/*# sourceMappingURL=badge.css.map */
+sup:has(>span){--badge-bg: lightgray;--badge-color: currentColor;--badge-radius: 0.5rem;--badge-padding: 0.3rem;--badge-v-align: 0.5rem;--badge-fs: var(--fs-1);background-color:var(--badge-bg);color:var(--badge-color);padding:var(--badge-padding);border-radius:var(--badge-radius);vertical-align:var(--badge-v-align);font-size:var(--badge-fs)}sup:has(>span) span{color:inherit}sup:has(>span)[data-badge~=rounded]{--badge-radius: 50%;--badge-padding: 0;--badge-size: 1.5625rem;width:var(--badge-size);height:var(--badge-size);display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:.6875rem;font-weight:700;overflow:hidden;box-sizing:border-box}sup:has(>span)[data-badge~=rounded] span{max-width:100%;overflow:hidden;text-overflow:clip;white-space:nowrap;padding:0 .125rem}/*# sourceMappingURL=badge.css.map */

package/libs/components/badge/badge.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/badge/badge.scss"],"names":[],"mappings":"AAAA,eACE,sBACA,4BACA,uBACA,wBACA,wBACA,wBACA,iCACA,yBACA,6BACA,kCACA,oCACA,0BACA,oBACE,cAEF,oCACE,qBACA","file":"badge.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/badge/badge.scss"],"names":[],"mappings":"AAAA,eACE,sBACA,4BACA,uBACA,wBACA,wBACA,wBACA,iCACA,yBACA,6BACA,kCACA,oCACA,0BACA,oBACE,cAEF,oCACE,oBACA,mBACA,wBACA,wBACA,yBACA,oBACA,mBACA,uBACA,cACA,mBACA,gBACA,gBACA,sBACA,yCACE,eACA,gBACA,mBACA,mBACA","file":"badge.css"}

package/libs/components/badge/badge.min.css

@@ -1,3 +1,3 @@
-sup:has(>span){--badge-bg: lightgray;--badge-color: currentColor;--badge-radius: 0.5rem;--badge-padding: 0.3rem;--badge-v-align: 0.5rem;--badge-fs: var(--fs-1);background-color:var(--badge-bg);color:var(--badge-color);padding:var(--badge-padding);border-radius:var(--badge-radius);vertical-align:var(--badge-v-align);font-size:var(--badge-fs)}sup:has(>span) span{color:inherit}sup:has(>span)[data-badge~=rounded]{--badge-radius: 100%;--badge-padding: 0.2rem}
+sup:has(>span){--badge-bg: lightgray;--badge-color: currentColor;--badge-radius: 0.5rem;--badge-padding: 0.3rem;--badge-v-align: 0.5rem;--badge-fs: var(--fs-1);background-color:var(--badge-bg);color:var(--badge-color);padding:var(--badge-padding);border-radius:var(--badge-radius);vertical-align:var(--badge-v-align);font-size:var(--badge-fs)}sup:has(>span) span{color:inherit}sup:has(>span)[data-badge~=rounded]{--badge-radius: 50%;--badge-padding: 0;--badge-size: 1.5625rem;width:var(--badge-size);height:var(--badge-size);display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:.6875rem;font-weight:700;overflow:hidden;box-sizing:border-box}sup:has(>span)[data-badge~=rounded] span{max-width:100%;overflow:hidden;text-overflow:clip;white-space:nowrap;padding:0 .125rem}
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2JhZGdlL2JhZGdlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsZUFDRSxxQkFBQSxDQUNBLDJCQUFBLENBQ0Esc0JBQUEsQ0FDQSx1QkFBQSxDQUNBLHVCQUFBLENBQ0EsdUJBQUEsQ0FDQSxnQ0FBQSxDQUNBLHdCQUFBLENBQ0EsNEJBQUEsQ0FDQSxpQ0FBQSxDQUNBLG1DQUFBLENBQ0EseUJBQUEsQ0FDQSxvQkFDRSxhQUFBLENBRUYsb0NBQ0Usb0JBQUEsQ0FDQSx1QkFBQSIsImZpbGUiOiJiYWRnZS5taW4uY3NzIn0= */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2JhZGdlL2JhZGdlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsZUFDRSxxQkFBQSxDQUNBLDJCQUFBLENBQ0Esc0JBQUEsQ0FDQSx1QkFBQSxDQUNBLHVCQUFBLENBQ0EsdUJBQUEsQ0FDQSxnQ0FBQSxDQUNBLHdCQUFBLENBQ0EsNEJBQUEsQ0FDQSxpQ0FBQSxDQUNBLG1DQUFBLENBQ0EseUJBQUEsQ0FDQSxvQkFDRSxhQUFBLENBRUYsb0NBQ0UsbUJBQUEsQ0FDQSxrQkFBQSxDQUNBLHVCQUFBLENBQ0EsdUJBQUEsQ0FDQSx3QkFBQSxDQUNBLG1CQUFBLENBQ0Esa0JBQUEsQ0FDQSxzQkFBQSxDQUNBLGFBQUEsQ0FDQSxrQkFBQSxDQUNBLGVBQUEsQ0FDQSxlQUFBLENBQ0EscUJBQUEsQ0FDQSx5Q0FDRSxjQUFBLENBQ0EsZUFBQSxDQUNBLGtCQUFBLENBQ0Esa0JBQUEsQ0FDQSxpQkFBQSIsImZpbGUiOiJiYWRnZS5taW4uY3NzIn0= */

package/libs/components/breadcrumbs/breadcrumb.cjs

@@ -2,19 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var chunkECLD37WN_cjs = require('../../chunk-ECLD37WN.cjs');
-require('../../chunk-X3EVB7VS.cjs');
-require('../../chunk-6TE5QEVE.cjs');
+var chunkOK5QEIMD_cjs = require('../../chunk-OK5QEIMD.cjs');
+require('../../chunk-5S4ORA4C.cjs');
+require('../../chunk-L75OQKEI.cjs');
 
 
 
 Object.defineProperty(exports, 'Breadcrumb', {
 	enumerable: true,
-	get: function () { return chunkECLD37WN_cjs.a; }
+	get: function () { return chunkOK5QEIMD_cjs.b; }
 });
 Object.defineProperty(exports, 'default', {
 	enumerable: true,
-	get: function () { return chunkECLD37WN_cjs.b; }
+	get: function () { return chunkOK5QEIMD_cjs.c; }
+});
+Object.defineProperty(exports, 'useBreadcrumbSegments', {
+	enumerable: true,
+	get: function () { return chunkOK5QEIMD_cjs.a; }
 });
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=breadcrumb.cjs.map