@jiwambe/components 0.3.4 → 0.3.6

package/dist/components/List/List.js

@@ -1,6 +1,5 @@
 import { jsx } from "react/jsx-runtime";
 import { listItemSizeClassMap } from "../../types/list.js";
-import { gapMap } from "../../utils/spacing.js";
 const markerClassMap = {
   disc: "jiwambe-list--disc",
   decimal: "jiwambe-list--decimal",
@@ -15,6 +14,36 @@ function resolveIndent(indent) {
   if (indent.startsWith("space-")) return `var(--${indent})`;
   return indent;
 }
+function spacingCssVar(token) {
+  const key = token.startsWith("fluid-") ? `space-${token}` : token;
+  return `var(--${key})`;
+}
+function listRootLayoutStyle(marker, spacing, indent) {
+  const blockMarkers = marker === "disc" || marker === "decimal";
+  if (blockMarkers) {
+    const s2 = {
+      display: "block",
+      listStyleType: marker === "decimal" ? "decimal" : "disc",
+      listStylePosition: "outside"
+    };
+    if (indent != null) {
+      s2.paddingLeft = resolveIndent(indent);
+    }
+    return s2;
+  }
+  const s = {
+    display: "flex",
+    flexDirection: "column",
+    gap: spacingCssVar(spacing),
+    listStyleType: "none"
+  };
+  if (indent != null) {
+    s.paddingLeft = resolveIndent(indent);
+  } else {
+    s.paddingLeft = 0;
+  }
+  return s;
+}
 function List({
   marker = "disc",
   spacing = "space-2",
@@ -26,19 +55,19 @@ function List({
 }) {
   const Tag = marker === "decimal" ? "ol" : "ul";
   const markerClass = markerClassMap[marker];
-  const useBlockLayout = marker === "disc" || marker === "decimal";
-  const spacingClass = useBlockLayout ? `jiwambe-list--spacing-${listSpacingClassSuffix(spacing)}` : gapMap[spacing];
+  const spacingClass = marker === "disc" || marker === "decimal" ? `jiwambe-list--spacing-${listSpacingClassSuffix(spacing)}` : "";
   const itemPaddingClass = itemPadding === "none" ? "jiwambe-list--item-padding-none" : "";
   const classes = [
     "jiwambe-list",
     markerClass,
-    useBlockLayout ? "" : "flex flex-col",
     spacingClass,
     itemPaddingClass,
     className
   ].filter(Boolean).join(" ");
-  const resolvedIndent = resolveIndent(indent);
-  const combinedStyle = resolvedIndent != null ? { ...style, paddingLeft: resolvedIndent } : style;
+  const combinedStyle = {
+    ...listRootLayoutStyle(marker, spacing, indent),
+    ...style ?? {}
+  };
   return /* @__PURE__ */ jsx(Tag, { className: classes, style: combinedStyle, children });
 }
 List.Item = function ListItem({

package/dist/components/List/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sources":["../../../src/components/List/List.tsx"],"sourcesContent":["import {\n  listItemSizeClassMap,\n  type ListProps,\n  type ListItemProps,\n} from '../../types/list';\nimport { gapMap } from '../../utils/spacing';\nimport type { SpacingToken } from '../../types/spacing';\n\nconst markerClassMap: Record<string, string> = {\n  disc: 'jiwambe-list--disc',\n  decimal: 'jiwambe-list--decimal',\n  none: 'jiwambe-list--none',\n};\n\n/** Maps spacing prop to plugin class suffix (jiwambe-list--spacing-{suffix}). */\nfunction listSpacingClassSuffix(token: SpacingToken): string {\n  return token.startsWith('fluid-') ? `space-${token}` : token;\n}\n\n/** Resolves indent to CSS value: token → var(--space-X), custom string as-is. */\nfunction resolveIndent(indent: ListProps['indent']): string | undefined {\n  if (indent == null) return undefined;\n  if (indent.startsWith('fluid-')) return `var(--space-${indent})`;\n  if (indent.startsWith('space-')) return `var(--${indent})`;\n  return indent;\n}\n\n/**\n * Semantic list component. Renders a <ul> or <ol> with consistent\n * marker styling and item spacing using design system tokens.\n *\n * For marker=\"disc\" and marker=\"decimal\", the list uses block layout and\n * margin on items (not flex/gap) so list-style-position: outside and markers\n * render reliably. For marker=\"none\", flex + gap is used.\n *\n * Use indent (e.g. indent=\"space-list-indent\" for 27px) and itemPadding=\"none\"\n * for legal/body-copy lists.\n *\n * @example\n * // Unordered feature list\n * <List spacing=\"space-3\">\n *   <List.Item size=\"sm\">Fleet Taxi financing</List.Item>\n *   <List.Item size=\"sm\">Home improvement loans</List.Item>\n * </List>\n *\n * @example\n * // Legal/body-copy list (27px indent, no extra item padding)\n * <List indent=\"space-list-indent\" itemPadding=\"none\" spacing=\"space-2\">\n *   <List.Item size=\"md\">First term.</List.Item>\n *   <List.Item size=\"md\">Second term.</List.Item>\n * </List>\n *\n * @example\n * // Navigation links — no markers\n * <List marker=\"none\" spacing=\"space-1\">\n *   <List.Item><Link href=\"/about\">About</Link></List.Item>\n * </List>\n */\nexport function List({\n  marker = 'disc',\n  spacing = 'space-2',\n  indent,\n  itemPadding = 'default',\n  className = '',\n  style,\n  children,\n}: ListProps) {\n  const Tag = marker === 'decimal' ? 'ol' : 'ul';\n  const markerClass = markerClassMap[marker];\n  const useBlockLayout = marker === 'disc' || marker === 'decimal';\n  const spacingClass = useBlockLayout\n    ? `jiwambe-list--spacing-${listSpacingClassSuffix(spacing)}`\n    : gapMap[spacing];\n  const itemPaddingClass = itemPadding === 'none' ? 'jiwambe-list--item-padding-none' : '';\n\n  const classes = [\n    'jiwambe-list',\n    markerClass,\n    useBlockLayout ? '' : 'flex flex-col',\n    spacingClass,\n    itemPaddingClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const resolvedIndent = resolveIndent(indent);\n  const combinedStyle =\n    resolvedIndent != null\n      ? { ...style, paddingLeft: resolvedIndent }\n      : style;\n\n  return (\n    <Tag className={classes} style={combinedStyle}>\n      {children}\n    </Tag>\n  );\n}\n\n/**\n * Renders a single list item (<li>) with design system typography and\n * marker styling. Use only as a direct child of List.\n */\nList.Item = function ListItem({\n  size = 'sm',\n  className = '',\n  style,\n  children,\n}: ListItemProps) {\n  const typographyClass = listItemSizeClassMap[size];\n\n  const classes = ['jiwambe-list-item', typographyClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <li className={classes} style={style}>\n      {children}\n    </li>\n  );\n};\n"],"names":[],"mappings":";;;AAQA,MAAM,iBAAyC;AAAA,EAC7C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,MAAM;AACR;AAGA,SAAS,uBAAuB,OAA6B;AAC3D,SAAO,MAAM,WAAW,QAAQ,IAAI,SAAS,KAAK,KAAK;AACzD;AAGA,SAAS,cAAc,QAAiD;AACtE,MAAI,UAAU,KAAM,QAAO;AAC3B,MAAI,OAAO,WAAW,QAAQ,EAAG,QAAO,eAAe,MAAM;AAC7D,MAAI,OAAO,WAAW,QAAQ,EAAG,QAAO,SAAS,MAAM;AACvD,SAAO;AACT;AAiCO,SAAS,KAAK;AAAA,EACnB,SAAS;AAAA,EACT,UAAU;AAAA,EACV;AAAA,EACA,cAAc;AAAA,EACd,YAAY;AAAA,EACZ;AAAA,EACA;AACF,GAAc;AACZ,QAAM,MAAM,WAAW,YAAY,OAAO;AAC1C,QAAM,cAAc,eAAe,MAAM;AACzC,QAAM,iBAAiB,WAAW,UAAU,WAAW;AACvD,QAAM,eAAe,iBACjB,yBAAyB,uBAAuB,OAAO,CAAC,KACxD,OAAO,OAAO;AAClB,QAAM,mBAAmB,gBAAgB,SAAS,oCAAoC;AAEtF,QAAM,UAAU;AAAA,IACd;AAAA,IACA;AAAA,IACA,iBAAiB,KAAK;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,QAAM,iBAAiB,cAAc,MAAM;AAC3C,QAAM,gBACJ,kBAAkB,OACd,EAAE,GAAG,OAAO,aAAa,mBACzB;AAEN,6BACG,KAAA,EAAI,WAAW,SAAS,OAAO,eAC7B,UACH;AAEJ;AAMA,KAAK,OAAO,SAAS,SAAS;AAAA,EAC5B,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA;AACF,GAAkB;AAChB,QAAM,kBAAkB,qBAAqB,IAAI;AAEjD,QAAM,UAAU,CAAC,qBAAqB,iBAAiB,SAAS,EAC7D,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,oBAAC,MAAA,EAAG,WAAW,SAAS,OACrB,UACH;AAEJ;"}
+{"version":3,"file":"List.js","sources":["../../../src/components/List/List.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport {\n  listItemSizeClassMap,\n  type ListMarker,\n  type ListProps,\n  type ListItemProps,\n} from '../../types/list';\nimport type { SpacingToken } from '../../types/spacing';\n\nconst markerClassMap: Record<string, string> = {\n  disc: 'jiwambe-list--disc',\n  decimal: 'jiwambe-list--decimal',\n  none: 'jiwambe-list--none',\n};\n\n/** Maps spacing prop to plugin class suffix (jiwambe-list--spacing-{suffix}). */\nfunction listSpacingClassSuffix(token: SpacingToken): string {\n  return token.startsWith('fluid-') ? `space-${token}` : token;\n}\n\n/** Resolves indent to CSS value: token → var(--space-X), custom string as-is. */\nfunction resolveIndent(indent: ListProps['indent']): string | undefined {\n  if (indent == null) return undefined;\n  if (indent.startsWith('fluid-')) return `var(--space-${indent})`;\n  if (indent.startsWith('space-')) return `var(--${indent})`;\n  return indent;\n}\n\n/** Maps spacing token to `var(--space-*)` for inline gap (marker=\"none\"). */\nfunction spacingCssVar(token: SpacingToken): string {\n  const key = token.startsWith('fluid-') ? `space-${token}` : token;\n  return `var(--${key})`;\n}\n\n/**\n * Inline layout so disc/decimal lists stay `display: block` (flex on ul/ol hides\n * markers) and marker=\"none\" uses flex + gap without relying on Tailwind\n * `flex` / `gap-*` utilities in the consumer bundle.\n */\nfunction listRootLayoutStyle(\n  marker: ListMarker,\n  spacing: SpacingToken,\n  indent: ListProps['indent'],\n): CSSProperties {\n  const blockMarkers = marker === 'disc' || marker === 'decimal';\n  if (blockMarkers) {\n    const s: CSSProperties = {\n      display: 'block',\n      listStyleType: marker === 'decimal' ? 'decimal' : 'disc',\n      listStylePosition: 'outside',\n    };\n    if (indent != null) {\n      s.paddingLeft = resolveIndent(indent);\n    }\n    return s;\n  }\n\n  const s: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: spacingCssVar(spacing),\n    listStyleType: 'none',\n  };\n  if (indent != null) {\n    s.paddingLeft = resolveIndent(indent)!;\n  } else {\n    s.paddingLeft = 0;\n  }\n  return s;\n}\n\n/**\n * Semantic list component. Renders a <ul> or <ol> with consistent\n * marker styling and item spacing using design system tokens.\n *\n * For marker=\"disc\" and marker=\"decimal\", the root list uses inline block\n * layout and list-style so markers show even with Tailwind preflight; vertical\n * spacing uses item margins from the plugin. For marker=\"none\", inline flex,\n * column direction, and gap replace Tailwind utility classes so spacing works\n * without extra consumer CSS.\n *\n * Use indent (e.g. indent=\"space-list-indent\" for 27px) and itemPadding=\"none\"\n * for legal/body-copy lists.\n *\n * @example\n * // Unordered feature list\n * <List spacing=\"space-3\">\n *   <List.Item size=\"sm\">Fleet Taxi financing</List.Item>\n *   <List.Item size=\"sm\">Home improvement loans</List.Item>\n * </List>\n *\n * @example\n * // Legal/body-copy list (27px indent, no extra item padding)\n * <List indent=\"space-list-indent\" itemPadding=\"none\" spacing=\"space-2\">\n *   <List.Item size=\"md\">First term.</List.Item>\n *   <List.Item size=\"md\">Second term.</List.Item>\n * </List>\n *\n * @example\n * // Navigation links — no markers\n * <List marker=\"none\" spacing=\"space-1\">\n *   <List.Item><Link href=\"/about\">About</Link></List.Item>\n * </List>\n */\nexport function List({\n  marker = 'disc',\n  spacing = 'space-2',\n  indent,\n  itemPadding = 'default',\n  className = '',\n  style,\n  children,\n}: ListProps) {\n  const Tag = marker === 'decimal' ? 'ol' : 'ul';\n  const markerClass = markerClassMap[marker];\n  const spacingClass =\n    marker === 'disc' || marker === 'decimal'\n      ? `jiwambe-list--spacing-${listSpacingClassSuffix(spacing)}`\n      : '';\n  const itemPaddingClass = itemPadding === 'none' ? 'jiwambe-list--item-padding-none' : '';\n\n  const classes = [\n    'jiwambe-list',\n    markerClass,\n    spacingClass,\n    itemPaddingClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const combinedStyle: CSSProperties = {\n    ...listRootLayoutStyle(marker, spacing, indent),\n    ...(style ?? {}),\n  };\n\n  return (\n    <Tag className={classes} style={combinedStyle}>\n      {children}\n    </Tag>\n  );\n}\n\n/**\n * Renders a single list item (<li>) with design system typography and\n * marker styling. Use only as a direct child of List.\n */\nList.Item = function ListItem({\n  size = 'sm',\n  className = '',\n  style,\n  children,\n}: ListItemProps) {\n  const typographyClass = listItemSizeClassMap[size];\n\n  const classes = ['jiwambe-list-item', typographyClass, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <li className={classes} style={style}>\n      {children}\n    </li>\n  );\n};\n"],"names":["s"],"mappings":";;AASA,MAAM,iBAAyC;AAAA,EAC7C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,MAAM;AACR;AAGA,SAAS,uBAAuB,OAA6B;AAC3D,SAAO,MAAM,WAAW,QAAQ,IAAI,SAAS,KAAK,KAAK;AACzD;AAGA,SAAS,cAAc,QAAiD;AACtE,MAAI,UAAU,KAAM,QAAO;AAC3B,MAAI,OAAO,WAAW,QAAQ,EAAG,QAAO,eAAe,MAAM;AAC7D,MAAI,OAAO,WAAW,QAAQ,EAAG,QAAO,SAAS,MAAM;AACvD,SAAO;AACT;AAGA,SAAS,cAAc,OAA6B;AAClD,QAAM,MAAM,MAAM,WAAW,QAAQ,IAAI,SAAS,KAAK,KAAK;AAC5D,SAAO,SAAS,GAAG;AACrB;AAOA,SAAS,oBACP,QACA,SACA,QACe;AACf,QAAM,eAAe,WAAW,UAAU,WAAW;AACrD,MAAI,cAAc;AAChB,UAAMA,KAAmB;AAAA,MACvB,SAAS;AAAA,MACT,eAAe,WAAW,YAAY,YAAY;AAAA,MAClD,mBAAmB;AAAA,IAAA;AAErB,QAAI,UAAU,MAAM;AAClBA,SAAE,cAAc,cAAc,MAAM;AAAA,IACtC;AACA,WAAOA;AAAAA,EACT;AAEA,QAAM,IAAmB;AAAA,IACvB,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK,cAAc,OAAO;AAAA,IAC1B,eAAe;AAAA,EAAA;AAEjB,MAAI,UAAU,MAAM;AAClB,MAAE,cAAc,cAAc,MAAM;AAAA,EACtC,OAAO;AACL,MAAE,cAAc;AAAA,EAClB;AACA,SAAO;AACT;AAmCO,SAAS,KAAK;AAAA,EACnB,SAAS;AAAA,EACT,UAAU;AAAA,EACV;AAAA,EACA,cAAc;AAAA,EACd,YAAY;AAAA,EACZ;AAAA,EACA;AACF,GAAc;AACZ,QAAM,MAAM,WAAW,YAAY,OAAO;AAC1C,QAAM,cAAc,eAAe,MAAM;AACzC,QAAM,eACJ,WAAW,UAAU,WAAW,YAC5B,yBAAyB,uBAAuB,OAAO,CAAC,KACxD;AACN,QAAM,mBAAmB,gBAAgB,SAAS,oCAAoC;AAEtF,QAAM,UAAU;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,QAAM,gBAA+B;AAAA,IACnC,GAAG,oBAAoB,QAAQ,SAAS,MAAM;AAAA,IAC9C,GAAI,SAAS,CAAA;AAAA,EAAC;AAGhB,6BACG,KAAA,EAAI,WAAW,SAAS,OAAO,eAC7B,UACH;AAEJ;AAMA,KAAK,OAAO,SAAS,SAAS;AAAA,EAC5B,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA;AACF,GAAkB;AAChB,QAAM,kBAAkB,qBAAqB,IAAI;AAEjD,QAAM,UAAU,CAAC,qBAAqB,iBAAiB,SAAS,EAC7D,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,oBAAC,MAAA,EAAG,WAAW,SAAS,OACrB,UACH;AAEJ;"}

package/dist/components/List/List.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=List.test.d.ts.map

package/dist/components/List/List.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.test.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.test.tsx"],"names":[],"mappings":""}

package/dist/components/Overlay/Overlay.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Overlay.test.d.ts.map

package/dist/components/Overlay/Overlay.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.test.d.ts","sourceRoot":"","sources":["../../../src/components/Overlay/Overlay.test.tsx"],"names":[],"mappings":""}

package/dist/components/PhoneInput/PhoneInput.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PhoneInput.test.d.ts.map

package/dist/components/PhoneInput/PhoneInput.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.test.d.ts","sourceRoot":"","sources":["../../../src/components/PhoneInput/PhoneInput.test.tsx"],"names":[],"mappings":""}

package/dist/components/Popover/Popover.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Popover.test.d.ts.map

package/dist/components/Popover/Popover.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.test.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.test.tsx"],"names":[],"mappings":""}

package/dist/components/ProductCard/ProductCard.d.ts

@@ -20,6 +20,18 @@ export interface ProductCardProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     imageWidth?: number;
     /** Height for next/image (aspect 16:9). @default 162 */
     imageHeight?: number;
+    /**
+     * How the image fills the card image area. `cover` (default) fills the area and crops;
+     * `contain` shows the full image with padding and no crop.
+     * @default 'cover'
+     */
+    imageFit?: 'cover' | 'contain';
+    /**
+     * When imageFit is `cover`, controls which part of the image is visible (e.g. `'center'`, `'top'`).
+     * Ignored when imageFit is `contain`. Accepts any valid CSS object-position value.
+     * @default 'center'
+     */
+    imagePosition?: string;
     /** Show prev/next image nav overlay on hover (e.g. for carousel). @default false */
     showImageNav?: boolean;
     /** Called when the previous image control is clicked. Only relevant when showImageNav is true. */

package/dist/components/ProductCard/ProductCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductCard.d.ts","sourceRoot":"","sources":["../../../src/components/ProductCard/ProductCard.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ProductCard.d.ts","sourceRoot":"","sources":["../../../src/components/ProductCard/ProductCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAYxC;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEpD,6HAA6H;AAC7H,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5E,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9F,+GAA+G;IAC/G,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAG7B,8BAA8B;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oFAAoF;IACpF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kGAAkG;IAClG,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,8FAA8F;IAC9F,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAGzB,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAG1B,0CAA0C;IAC1C,UAAU,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,gEAAgE;IAChE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qEAAqE;IACrE,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,4EAA4E;IAC5E,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,iFAAiF;IACjF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,8EAA8E;IAC9E,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,mFAAmF;IACnF,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAG7B,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,uHAAuH;IACvH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,MAAM,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AA8RD,KAAK,qBAAqB,GAAG,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC;AAC/D,KAAK,sBAAsB,GAAG,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC;AAUhE,QAAA,MAAM,uBAAuB,2GAAqC,CAAC;AACnE,QAAA,MAAM,wBAAwB,4GAAsC,CAAC;AAIrE,QAAA,MAAM,WAAW,EAGX,KAAK,CAAC,yBAAyB,CACnC,IAAI,CAAC,gBAAgB,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CACpE,GAAG;IACF,KAAK,EAAE,OAAO,uBAAuB,CAAC;IACtC,MAAM,EAAE,OAAO,wBAAwB,CAAC;CACzC,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/ProductCard/ProductCard.js

@@ -4,6 +4,9 @@ import React, { useState } from "react";
 import Image from "next/image";
 import { Button } from "../Button/Button.js";
 import { Icon } from "../Icon/Icon.js";
+import d from "../../node_modules/.pnpm/@jiwambe_icons@0.3.1_react@19.2.4/node_modules/@jiwambe/icons/dist/icons/Check.js";
+import n from "../../node_modules/.pnpm/@jiwambe_icons@0.3.1_react@19.2.4/node_modules/@jiwambe/icons/dist/icons/ChevronLeft.js";
+import n$1 from "../../node_modules/.pnpm/@jiwambe_icons@0.3.1_react@19.2.4/node_modules/@jiwambe/icons/dist/icons/ChevronRight.js";
 import { Divider } from "../Divider/Divider.js";
 import { Link } from "../Link/Link.js";
 function SpecItem({ spec }) {
@@ -25,6 +28,8 @@ function ProductCardInner({
   imageAlt = "",
   imageWidth = 288,
   imageHeight = 162,
+  imageFit = "cover",
+  imagePosition,
   showImageNav = false,
   onPrevImage,
   onNextImage,
@@ -83,14 +88,24 @@ function ProductCardInner({
             onMouseEnter: () => setImageHover(true),
             onMouseLeave: () => setImageHover(false),
             children: [
-              /* @__PURE__ */ jsx("div", { className: "relative aspect-video w-full overflow-hidden shrink-0", children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "relative aspect-video w-full overflow-hidden shrink-0 bg-fill-bg-secondary", children: imageFit === "contain" ? /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center p-space-4", children: /* @__PURE__ */ jsx(
                 Image,
                 {
                   src: imageSrc,
                   alt: imageAlt,
                   width: imageWidth,
                   height: imageHeight,
-                  className: "h-full w-full object-cover"
+                  className: "max-h-full max-w-full object-contain"
+                }
+              ) }) : /* @__PURE__ */ jsx(
+                Image,
+                {
+                  src: imageSrc,
+                  alt: imageAlt,
+                  width: imageWidth,
+                  height: imageHeight,
+                  className: "h-full w-full object-cover",
+                  style: imagePosition != null ? { objectPosition: imagePosition } : void 0
                 }
               ) }),
               showNav && (onPrevImage ?? onNextImage) && /* @__PURE__ */ jsxs("div", { className: "absolute left-4 right-4 top-1/2 flex -translate-y-1/2 items-center justify-between pointer-events-none", children: [
@@ -99,7 +114,7 @@ function ProductCardInner({
                   {
                     variant: "inverse",
                     size: "small",
-                    iconOnly: /* @__PURE__ */ jsx(Icon, { name: "chevron-left" }),
+                    iconOnly: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(n, {}) }),
                     "aria-label": "Previous image",
                     onClick: onPrevImage
                   }
@@ -109,7 +124,7 @@ function ProductCardInner({
                   {
                     variant: "inverse",
                     size: "small",
-                    iconOnly: /* @__PURE__ */ jsx(Icon, { name: "chevron-right" }),
+                    iconOnly: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(n$1, {}) }),
                     "aria-label": "Next image",
                     onClick: onNextImage
                   }
@@ -131,19 +146,19 @@ function ProductCardInner({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(Divider, { variant: "light", className: "my-0" }),
+        /* @__PURE__ */ jsx(Divider, { variant: "light", className: "my-0 mx-space-4" }),
         specs.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
             "div",
             {
               className: `flex flex-col gap-space-2 px-space-4 ${contentMuted ? "text-text-disabled [&_*]:text-text-disabled" : ""}`,
               children: specs.map((spec, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-space-2", children: [
-                /* @__PURE__ */ jsx("span", { className: "shrink-0", children: /* @__PURE__ */ jsx(Icon, { name: "check", size: 10 }) }),
+                /* @__PURE__ */ jsx("span", { className: "shrink-0", children: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(d, {}), size: 10 }) }),
                 /* @__PURE__ */ jsx("p", { className: "text-text-xs tracking-[0.18px] leading-[1.4] min-w-0", children: /* @__PURE__ */ jsx(SpecItem, { spec }) })
               ] }, i))
             }
           ),
-          /* @__PURE__ */ jsx(Divider, { variant: "light", className: "my-0" })
+          /* @__PURE__ */ jsx(Divider, { variant: "light", className: "my-0 mx-space-4" })
         ] }),
         /* @__PURE__ */ jsxs(
           "div",
@@ -158,7 +173,7 @@ function ProductCardInner({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(Divider, { variant: "light", className: "my-0" }),
+        /* @__PURE__ */ jsx(Divider, { variant: "light", className: "my-0 mx-space-4" }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-space-2 px-space-4", children: [
           variant === "apply" && /* @__PURE__ */ jsxs(Fragment, { children: [
             primaryActionHref != null ? /* @__PURE__ */ jsx(
@@ -166,7 +181,7 @@ function ProductCardInner({
               {
                 href: primaryActionHref,
                 as: linkAs,
-                className: "h-10 w-full items-center justify-center rounded-rad-sm bg-fill-action-primary text-text-action-primary hover:bg-fill-action-primary-hover text-btn-small no-underline",
+                className: "flex h-10 w-full items-center justify-center rounded-rad-sm bg-fill-action-primary text-text-action-primary hover:bg-fill-action-primary-hover text-btn-small text-base font-medium no-underline",
                 children: primaryLabel
               }
             ) : /* @__PURE__ */ jsx(
@@ -185,7 +200,7 @@ function ProductCardInner({
               {
                 href: secondaryActionHref,
                 as: linkAs,
-                className: "h-10 w-full items-center justify-center rounded-rad-sm bg-fill-action-secondary text-text-action-secondary hover:bg-fill-action-secondary-hover text-btn-small no-underline",
+                className: "flex h-10 w-full items-center justify-center rounded-rad-sm bg-fill-action-secondary text-text-action-secondary hover:bg-fill-action-secondary-hover text-btn-small text-base font-medium no-underline",
                 children: secondaryLabel
               }
             ) : /* @__PURE__ */ jsx(

package/dist/components/ProductCard/ProductCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductCard.js","sources":["../../../src/components/ProductCard/ProductCard.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport Image from 'next/image';\nimport { Button } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\nimport { Divider } from '../Divider/Divider';\nimport { Link } from '../Link/Link';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/**\n * ProductCard variant from Figma: Apply (two CTAs) or Choose (single CTA with selected state).\n * Use variant=\"apply\" for apply + view-details flows; variant=\"choose\" for pick-one flows.\n */\nexport type ProductCardVariant = 'apply' | 'choose';\n\n/** One spec line: plain string or { text, secondary? } for text with muted suffix e.g. \"150km range (full day coverage)\". */\nexport type ProductCardSpec = string | { text: string; secondary?: string };\n\nexport interface ProductCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Which CTA layout to use: apply (two buttons) or choose (one button, optional selected). @default 'apply' */\n  variant?: ProductCardVariant;\n\n  // Image\n  /** Main product image URL. */\n  imageSrc: string;\n  /** Alt text for the image. @default '' */\n  imageAlt?: string;\n  /** Width for next/image. @default 288 */\n  imageWidth?: number;\n  /** Height for next/image (aspect 16:9). @default 162 */\n  imageHeight?: number;\n  /** Show prev/next image nav overlay on hover (e.g. for carousel). @default false */\n  showImageNav?: boolean;\n  /** Called when the previous image control is clicked. Only relevant when showImageNav is true. */\n  onPrevImage?: () => void;\n  /** Called when the next image control is clicked. Only relevant when showImageNav is true. */\n  onNextImage?: () => void;\n\n  // Head\n  /** Product name (e.g. \"Magnus 3000\"). */\n  name: string;\n  /** Brand or model line (e.g. \"Mazi\"). @default undefined */\n  brand?: string;\n  /** Short description or tagline below the name. @default undefined */\n  description?: string;\n\n  // Specs\n  /** List of feature lines; each can be a string or { text, secondary? }. */\n  specs?: ProductCardSpec[];\n\n  // Price\n  /** Daily price label (e.g. \"500 KES\"). */\n  priceDaily: string;\n  /** Optional unit after daily price (e.g. \"/day\"). @default '/day' */\n  priceUnit?: string;\n  /** Total or purchase price (e.g. \"280,732 KES\"). @default undefined */\n  priceTotal?: string;\n\n  // Apply variant — primary and secondary actions (labels configurable by client)\n  /** Label for the primary action button. @default 'Apply now' */\n  primaryActionLabel?: string;\n  /** Label for the secondary action button. @default 'View details' */\n  secondaryActionLabel?: string;\n  /** Called when the primary action is clicked. Used when variant=\"apply\". */\n  onPrimaryAction?: () => void;\n  /** When set, the primary action renders as a link. Used when variant=\"apply\". */\n  primaryActionHref?: string;\n  /** Called when the secondary action is clicked. Used when variant=\"apply\". */\n  onSecondaryAction?: () => void;\n  /** When set, the secondary action renders as a link. Used when variant=\"apply\". */\n  secondaryActionHref?: string;\n\n  // Choose variant\n  /** Label for the choose button when not selected. @default 'Choose' */\n  chooseLabel?: string;\n  /** Label for the choose button when selected. @default 'Selected' */\n  selectedLabel?: string;\n  /** Called when the choose button is clicked. Used when variant=\"choose\". */\n  onChoose?: () => void;\n  /** When true, card shows selected state (heavier border, muted content). Used when variant=\"choose\". @default false */\n  selected?: boolean;\n\n  // Common\n  /** Disables all actions and applies disabled styling. @default false */\n  disabled?: boolean;\n  /** Component to render link-style actions as (e.g. next/link). @default 'a' */\n  linkAs?: React.ElementType;\n  /** Additional class name for the root. */\n  className?: string;\n  /** Forwarded ref for the root div. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction SpecItem({ spec }: { spec: ProductCardSpec }) {\n  if (typeof spec === 'string') {\n    return <span>{spec}</span>;\n  }\n  return (\n    <>\n      <span>{spec.text}</span>\n      {spec.secondary != null && <span className=\"text-text-secondary\"> ({spec.secondary})</span>}\n    </>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// ProductCard\n// ---------------------------------------------------------------------------\n\n/**\n * Product card with two variants: apply (primary + secondary actions) or choose (single action with selected state).\n * Action labels are configurable: primaryActionLabel / secondaryActionLabel default to \"Apply now\" and \"View details\".\n * Use ProductCard.Apply or ProductCard.Choose for the same with variant fixed (less typing).\n *\n * @example\n * <ProductCard variant=\"apply\" imageSrc=\"...\" name=\"Product\" priceDaily=\"500 KES\" onPrimaryAction={...} onSecondaryAction={...} />\n *\n * @example\n * <ProductCard variant=\"apply\" primaryActionLabel=\"Get quote\" secondaryActionLabel=\"Learn more\" ... />\n *\n * @example\n * <ProductCard variant=\"choose\" imageSrc=\"...\" name=\"...\" priceDaily=\"500 KES\" onChoose={...} selected={isSelected} />\n */\nfunction ProductCardInner(\n  {\n    variant = 'apply',\n    imageSrc,\n    imageAlt = '',\n    imageWidth = 288,\n    imageHeight = 162,\n    showImageNav = false,\n    onPrevImage,\n    onNextImage,\n    name,\n    brand,\n    description,\n    specs = [],\n    priceDaily,\n    priceUnit = '/day',\n    priceTotal,\n    primaryActionLabel,\n    secondaryActionLabel,\n    onPrimaryAction,\n    primaryActionHref,\n    onSecondaryAction,\n    secondaryActionHref,\n    chooseLabel,\n    selectedLabel,\n    onChoose,\n    selected = false,\n    disabled = false,\n    linkAs = 'a',\n    className = '',\n    ...rest\n  }: ProductCardProps,\n  forwardedRef: React.Ref<HTMLDivElement>\n) {\n  const [imageHover, setImageHover] = useState(false);\n  const [cardHover, setCardHover] = useState(false);\n  const showNav = showImageNav && imageHover;\n  const isChoose = variant === 'choose';\n  const isSelected = isChoose && selected;\n  const contentMuted = disabled || isSelected;\n  const borderHeavy = cardHover || isSelected;\n\n  const borderClass = borderHeavy ? 'border-border-heavy' : 'border-border-light';\n\n  const primaryLabel = primaryActionLabel ?? 'Apply now';\n  const secondaryLabel = secondaryActionLabel ?? 'View details';\n  const chooseBtnLabel = chooseLabel ?? 'Choose';\n  const selectedBtnLabel = selectedLabel ?? 'Selected';\n\n  const rootClasses = [\n    'flex flex-col rounded-rad-md overflow-hidden bg-fill-bg-primary border border-solid pb-space-4 gap-space-4 w-full max-w-[288px]',\n    borderClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      ref={forwardedRef}\n      className={rootClasses}\n      onMouseEnter={() => setCardHover(true)}\n      onMouseLeave={() => setCardHover(false)}\n      {...rest}\n    >\n      {/* Image block */}\n      <div\n        className=\"relative flex flex-col gap-3 bg-fill-bg-secondary p-space-8 rounded-tl-rad-md rounded-tr-rad-md\"\n        onMouseEnter={() => setImageHover(true)}\n        onMouseLeave={() => setImageHover(false)}\n      >\n        <div className=\"relative aspect-video w-full overflow-hidden shrink-0\">\n          <Image\n            src={imageSrc}\n            alt={imageAlt}\n            width={imageWidth}\n            height={imageHeight}\n            className=\"h-full w-full object-cover\"\n          />\n        </div>\n        {showNav && (onPrevImage ?? onNextImage) && (\n          <div className=\"absolute left-4 right-4 top-1/2 flex -translate-y-1/2 items-center justify-between pointer-events-none\">\n            <span className=\"pointer-events-auto\">\n              {onPrevImage && (\n                <Button\n                  variant=\"inverse\"\n                  size=\"small\"\n                  iconOnly={<Icon name=\"chevron-left\" />}\n                  aria-label=\"Previous image\"\n                  onClick={onPrevImage}\n                />\n              )}\n            </span>\n            <span className=\"pointer-events-auto\">\n              {onNextImage && (\n                <Button\n                  variant=\"inverse\"\n                  size=\"small\"\n                  iconOnly={<Icon name=\"chevron-right\" />}\n                  aria-label=\"Next image\"\n                  onClick={onNextImage}\n                />\n              )}\n            </span>\n          </div>\n        )}\n      </div>\n\n      {/* Head */}\n      <div\n        className={`flex flex-col gap-space-1 px-space-4 ${contentMuted ? 'text-text-disabled [&_.text-text-primary]:text-text-disabled [&_.text-text-secondary]:text-text-disabled' : ''}`}\n      >\n        <div className=\"flex flex-col\">\n          <p className=\"text-title-md leading-[1.2] tracking-[0.19px] text-text-primary\">{name}</p>\n          {brand != null && (\n            <p className=\"text-text-sm leading-[1.4] tracking-[0.16px] text-text-secondary\">\n              {brand}\n            </p>\n          )}\n        </div>\n        {description != null && (\n          <p className=\"text-text-sm leading-[1.4] tracking-[0.16px] text-text-primary\">\n            {description}\n          </p>\n        )}\n      </div>\n\n      <Divider variant=\"light\" className=\"my-0\" />\n\n      {/* Specs */}\n      {specs.length > 0 && (\n        <>\n          <div\n            className={`flex flex-col gap-space-2 px-space-4 ${contentMuted ? 'text-text-disabled [&_*]:text-text-disabled' : ''}`}\n          >\n            {specs.map((spec, i) => (\n              <div key={i} className=\"flex items-center gap-space-2\">\n                <span className=\"shrink-0\">\n                  <Icon name=\"check\" size={10} />\n                </span>\n                <p className=\"text-text-xs tracking-[0.18px] leading-[1.4] min-w-0\">\n                  <SpecItem spec={spec} />\n                </p>\n              </div>\n            ))}\n          </div>\n          <Divider variant=\"light\" className=\"my-0\" />\n        </>\n      )}\n\n      {/* Price */}\n      <div\n        className={`flex flex-col gap-space-1 px-space-4 ${contentMuted ? 'text-text-disabled [&_*]:text-text-disabled' : ''}`}\n      >\n        <div className=\"flex items-center gap-space-1\">\n          <p className=\"text-title-md leading-[1.2] tracking-[0.19px] text-text-primary whitespace-nowrap\">\n            {priceDaily}\n          </p>\n          <p className=\"text-text-xs tracking-[0.18px] text-text-secondary\">{priceUnit}</p>\n        </div>\n        {priceTotal != null && (\n          <p className=\"text-text-xs tracking-[0.18px] text-text-secondary whitespace-nowrap\">\n            {priceTotal}\n          </p>\n        )}\n      </div>\n\n      <Divider variant=\"light\" className=\"my-0\" />\n\n      {/* Action */}\n      <div className=\"flex flex-col gap-space-2 px-space-4\">\n        {variant === 'apply' && (\n          <>\n            {primaryActionHref != null ? (\n              <Link\n                href={primaryActionHref}\n                as={linkAs}\n                className=\"h-10 w-full items-center justify-center rounded-rad-sm bg-fill-action-primary text-text-action-primary hover:bg-fill-action-primary-hover text-btn-small no-underline\"\n              >\n                {primaryLabel}\n              </Link>\n            ) : (\n              <Button\n                variant=\"primary\"\n                size=\"small\"\n                disabled={disabled}\n                className=\"w-full justify-center\"\n                onClick={onPrimaryAction}\n              >\n                {primaryLabel}\n              </Button>\n            )}\n            {secondaryActionHref != null ? (\n              <Link\n                href={secondaryActionHref}\n                as={linkAs}\n                className=\"h-10 w-full items-center justify-center rounded-rad-sm bg-fill-action-secondary text-text-action-secondary hover:bg-fill-action-secondary-hover text-btn-small no-underline\"\n              >\n                {secondaryLabel}\n              </Link>\n            ) : (\n              <Button\n                variant=\"secondary\"\n                size=\"small\"\n                disabled={disabled}\n                className=\"w-full justify-center\"\n                onClick={onSecondaryAction}\n              >\n                {secondaryLabel}\n              </Button>\n            )}\n          </>\n        )}\n        {variant === 'choose' && (\n          <Button\n            variant=\"primary\"\n            size=\"small\"\n            disabled={disabled}\n            className=\"w-full justify-center\"\n            onClick={onChoose}\n          >\n            {selected ? selectedBtnLabel : chooseBtnLabel}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Compound components for minimal typing\n// ---------------------------------------------------------------------------\n\ntype ProductCardApplyProps = Omit<ProductCardProps, 'variant'>;\ntype ProductCardChooseProps = Omit<ProductCardProps, 'variant'>;\n\nfunction ProductCardApply(props: ProductCardApplyProps, ref: React.Ref<HTMLDivElement>) {\n  return <ProductCardBase {...(props as ProductCardProps)} variant=\"apply\" ref={ref} />;\n}\n\nfunction ProductCardChoose(props: ProductCardChooseProps, ref: React.Ref<HTMLDivElement>) {\n  return <ProductCardBase {...(props as ProductCardProps)} variant=\"choose\" ref={ref} />;\n}\n\nconst ProductCardApplyWithRef = React.forwardRef(ProductCardApply);\nconst ProductCardChooseWithRef = React.forwardRef(ProductCardChoose);\n\nconst ProductCardBase = React.forwardRef(ProductCardInner);\n\nconst ProductCard = Object.assign(ProductCardBase, {\n  Apply: ProductCardApplyWithRef,\n  Choose: ProductCardChooseWithRef,\n}) as React.ForwardRefExoticComponent<\n  Omit<ProductCardProps, 'ref'> & React.RefAttributes<HTMLDivElement>\n> & {\n  Apply: typeof ProductCardApplyWithRef;\n  Choose: typeof ProductCardChooseWithRef;\n};\n\nexport { ProductCard };\n"],"names":[],"mappings":";;;;;;;;AAqGA;AACE;AACE;AAAmB;AAErB;AAEI;AAAiB;AACgD;AAAA;AAAQ;AAAU;AAAC;AAG1F;AAoBA;AACE;AACY;AACV;AACW;AACE;AACC;AACC;AACf;AACA;AACA;AACA;AACA;AACQ;AACR;AACY;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACW;AACA;AACF;AACG;AAEd;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AAEA;AAAoB;AAClB;AACA;AACA;AAKF;AACE;AAAC;AAAA;AACM;AACM;AAC0B;AACC;AAClC;AAGJ;AAAA;AAAC;AAAA;AACW;AAC4B;AACC;AAEvC;AACE;AAAC;AAAA;AACM;AACA;AACE;AACC;AACE;AAAA;AAEd;AAGI;AAEI;AAAC;AAAA;AACS;AACH;AAC+B;AACzB;AACF;AAAA;AAGf;AAGI;AAAC;AAAA;AACS;AACH;AACgC;AAC1B;AACF;AAAA;AAGf;AACF;AAAA;AAAA;AAAA;AAKJ;AAAC;AAAA;AACkL;AAEjL;AACE;AAAqF;AAInF;AAEJ;AAIE;AAAA;AAAA;AAAA;AAIsC;AAKtC;AAAA;AAAC;AAAA;AACqH;AAIhH;AAEA;AAGA;AAEH;AAAA;AAAA;AAEuC;AAC5C;AAIF;AAAC;AAAA;AACqH;AAEpH;AACE;AAEA;AAC6E;AAC/E;AAIE;AAAA;AAAA;AAAA;AAIsC;AAIvC;AAEI;AACC;AAAC;AAAA;AACO;AACF;AACM;AAET;AAAA;AAGH;AAAC;AAAA;AACS;AACH;AACL;AACU;AACD;AAER;AAAA;AAAA;AAIH;AAAC;AAAA;AACO;AACF;AACM;AAET;AAAA;AAGH;AAAC;AAAA;AACS;AACH;AACL;AACU;AACD;AAER;AAAA;AAAA;AAGP;AAGA;AAAC;AAAA;AACS;AACH;AACL;AACU;AACD;AAEsB;AAAA;AAAA;AAGrC;AAAA;AAAA;AAGN;AASA;AACE;AACF;AAEA;AACE;AACF;AAEA;AACA;AAEA;AAEA;AAAmD;AAC1C;AAET;;;;"}
+{"version":3,"file":"ProductCard.js","sources":["../../../src/components/ProductCard/ProductCard.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport Image from 'next/image';\nimport { Button } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\nimport { ChevronLeft, ChevronRight, Check } from '@jiwambe/icons';\nimport { Divider } from '../Divider/Divider';\nimport { Link } from '../Link/Link';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/**\n * ProductCard variant from Figma: Apply (two CTAs) or Choose (single CTA with selected state).\n * Use variant=\"apply\" for apply + view-details flows; variant=\"choose\" for pick-one flows.\n */\nexport type ProductCardVariant = 'apply' | 'choose';\n\n/** One spec line: plain string or { text, secondary? } for text with muted suffix e.g. \"150km range (full day coverage)\". */\nexport type ProductCardSpec = string | { text: string; secondary?: string };\n\nexport interface ProductCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Which CTA layout to use: apply (two buttons) or choose (one button, optional selected). @default 'apply' */\n  variant?: ProductCardVariant;\n\n  // Image\n  /** Main product image URL. */\n  imageSrc: string;\n  /** Alt text for the image. @default '' */\n  imageAlt?: string;\n  /** Width for next/image. @default 288 */\n  imageWidth?: number;\n  /** Height for next/image (aspect 16:9). @default 162 */\n  imageHeight?: number;\n  /**\n   * How the image fills the card image area. `cover` (default) fills the area and crops;\n   * `contain` shows the full image with padding and no crop.\n   * @default 'cover'\n   */\n  imageFit?: 'cover' | 'contain';\n  /**\n   * When imageFit is `cover`, controls which part of the image is visible (e.g. `'center'`, `'top'`).\n   * Ignored when imageFit is `contain`. Accepts any valid CSS object-position value.\n   * @default 'center'\n   */\n  imagePosition?: string;\n  /** Show prev/next image nav overlay on hover (e.g. for carousel). @default false */\n  showImageNav?: boolean;\n  /** Called when the previous image control is clicked. Only relevant when showImageNav is true. */\n  onPrevImage?: () => void;\n  /** Called when the next image control is clicked. Only relevant when showImageNav is true. */\n  onNextImage?: () => void;\n\n  // Head\n  /** Product name (e.g. \"Magnus 3000\"). */\n  name: string;\n  /** Brand or model line (e.g. \"Mazi\"). @default undefined */\n  brand?: string;\n  /** Short description or tagline below the name. @default undefined */\n  description?: string;\n\n  // Specs\n  /** List of feature lines; each can be a string or { text, secondary? }. */\n  specs?: ProductCardSpec[];\n\n  // Price\n  /** Daily price label (e.g. \"500 KES\"). */\n  priceDaily: string;\n  /** Optional unit after daily price (e.g. \"/day\"). @default '/day' */\n  priceUnit?: string;\n  /** Total or purchase price (e.g. \"280,732 KES\"). @default undefined */\n  priceTotal?: string;\n\n  // Apply variant — primary and secondary actions (labels configurable by client)\n  /** Label for the primary action button. @default 'Apply now' */\n  primaryActionLabel?: string;\n  /** Label for the secondary action button. @default 'View details' */\n  secondaryActionLabel?: string;\n  /** Called when the primary action is clicked. Used when variant=\"apply\". */\n  onPrimaryAction?: () => void;\n  /** When set, the primary action renders as a link. Used when variant=\"apply\". */\n  primaryActionHref?: string;\n  /** Called when the secondary action is clicked. Used when variant=\"apply\". */\n  onSecondaryAction?: () => void;\n  /** When set, the secondary action renders as a link. Used when variant=\"apply\". */\n  secondaryActionHref?: string;\n\n  // Choose variant\n  /** Label for the choose button when not selected. @default 'Choose' */\n  chooseLabel?: string;\n  /** Label for the choose button when selected. @default 'Selected' */\n  selectedLabel?: string;\n  /** Called when the choose button is clicked. Used when variant=\"choose\". */\n  onChoose?: () => void;\n  /** When true, card shows selected state (heavier border, muted content). Used when variant=\"choose\". @default false */\n  selected?: boolean;\n\n  // Common\n  /** Disables all actions and applies disabled styling. @default false */\n  disabled?: boolean;\n  /** Component to render link-style actions as (e.g. next/link). @default 'a' */\n  linkAs?: React.ElementType;\n  /** Additional class name for the root. */\n  className?: string;\n  /** Forwarded ref for the root div. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction SpecItem({ spec }: { spec: ProductCardSpec }) {\n  if (typeof spec === 'string') {\n    return <span>{spec}</span>;\n  }\n  return (\n    <>\n      <span>{spec.text}</span>\n      {spec.secondary != null && <span className=\"text-text-secondary\"> ({spec.secondary})</span>}\n    </>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// ProductCard\n// ---------------------------------------------------------------------------\n\n/**\n * Product card with two variants: apply (primary + secondary actions) or choose (single action with selected state).\n * Action labels are configurable: primaryActionLabel / secondaryActionLabel default to \"Apply now\" and \"View details\".\n * Use ProductCard.Apply or ProductCard.Choose for the same with variant fixed (less typing).\n *\n * @example\n * <ProductCard variant=\"apply\" imageSrc=\"...\" name=\"Product\" priceDaily=\"500 KES\" onPrimaryAction={...} onSecondaryAction={...} />\n *\n * @example\n * <ProductCard variant=\"apply\" primaryActionLabel=\"Get quote\" secondaryActionLabel=\"Learn more\" ... />\n *\n * @example\n * <ProductCard variant=\"choose\" imageSrc=\"...\" name=\"...\" priceDaily=\"500 KES\" onChoose={...} selected={isSelected} />\n */\nfunction ProductCardInner(\n  {\n    variant = 'apply',\n    imageSrc,\n    imageAlt = '',\n    imageWidth = 288,\n    imageHeight = 162,\n    imageFit = 'cover',\n    imagePosition,\n    showImageNav = false,\n    onPrevImage,\n    onNextImage,\n    name,\n    brand,\n    description,\n    specs = [],\n    priceDaily,\n    priceUnit = '/day',\n    priceTotal,\n    primaryActionLabel,\n    secondaryActionLabel,\n    onPrimaryAction,\n    primaryActionHref,\n    onSecondaryAction,\n    secondaryActionHref,\n    chooseLabel,\n    selectedLabel,\n    onChoose,\n    selected = false,\n    disabled = false,\n    linkAs = 'a',\n    className = '',\n    ...rest\n  }: ProductCardProps,\n  forwardedRef: React.Ref<HTMLDivElement>\n) {\n  const [imageHover, setImageHover] = useState(false);\n  const [cardHover, setCardHover] = useState(false);\n  const showNav = showImageNav && imageHover;\n  const isChoose = variant === 'choose';\n  const isSelected = isChoose && selected;\n  const contentMuted = disabled || isSelected;\n  const borderHeavy = cardHover || isSelected;\n\n  const borderClass = borderHeavy ? 'border-border-heavy' : 'border-border-light';\n\n  const primaryLabel = primaryActionLabel ?? 'Apply now';\n  const secondaryLabel = secondaryActionLabel ?? 'View details';\n  const chooseBtnLabel = chooseLabel ?? 'Choose';\n  const selectedBtnLabel = selectedLabel ?? 'Selected';\n\n  const rootClasses = [\n    'flex flex-col rounded-rad-md overflow-hidden bg-fill-bg-primary border border-solid pb-space-4 gap-space-4 w-full max-w-[288px]',\n    borderClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      ref={forwardedRef}\n      className={rootClasses}\n      onMouseEnter={() => setCardHover(true)}\n      onMouseLeave={() => setCardHover(false)}\n      {...rest}\n    >\n      {/* Image block */}\n      <div\n        className=\"relative flex flex-col gap-3 bg-fill-bg-secondary p-space-8 rounded-tl-rad-md rounded-tr-rad-md\"\n        onMouseEnter={() => setImageHover(true)}\n        onMouseLeave={() => setImageHover(false)}\n      >\n        <div className=\"relative aspect-video w-full overflow-hidden shrink-0 bg-fill-bg-secondary\">\n          {imageFit === 'contain' ? (\n            <div className=\"flex h-full w-full items-center justify-center p-space-4\">\n              <Image\n                src={imageSrc}\n                alt={imageAlt}\n                width={imageWidth}\n                height={imageHeight}\n                className=\"max-h-full max-w-full object-contain\"\n              />\n            </div>\n          ) : (\n            <Image\n              src={imageSrc}\n              alt={imageAlt}\n              width={imageWidth}\n              height={imageHeight}\n              className=\"h-full w-full object-cover\"\n              style={\n                imagePosition != null ? { objectPosition: imagePosition } : undefined\n              }\n            />\n          )}\n        </div>\n        {showNav && (onPrevImage ?? onNextImage) && (\n          <div className=\"absolute left-4 right-4 top-1/2 flex -translate-y-1/2 items-center justify-between pointer-events-none\">\n            <span className=\"pointer-events-auto\">\n              {onPrevImage && (\n                <Button\n                  variant=\"inverse\"\n                  size=\"small\"\n                  iconOnly={<Icon icon={<ChevronLeft />} />}\n                  aria-label=\"Previous image\"\n                  onClick={onPrevImage}\n                />\n              )}\n            </span>\n            <span className=\"pointer-events-auto\">\n              {onNextImage && (\n                <Button\n                  variant=\"inverse\"\n                  size=\"small\"\n                  iconOnly={<Icon icon={<ChevronRight />} />}\n                  aria-label=\"Next image\"\n                  onClick={onNextImage}\n                />\n              )}\n            </span>\n          </div>\n        )}\n      </div>\n\n      {/* Head */}\n      <div\n        className={`flex flex-col gap-space-1 px-space-4 ${contentMuted ? 'text-text-disabled [&_.text-text-primary]:text-text-disabled [&_.text-text-secondary]:text-text-disabled' : ''}`}\n      >\n        <div className=\"flex flex-col\">\n          <p className=\"text-title-md leading-[1.2] tracking-[0.19px] text-text-primary\">{name}</p>\n          {brand != null && (\n            <p className=\"text-text-sm leading-[1.4] tracking-[0.16px] text-text-secondary\">\n              {brand}\n            </p>\n          )}\n        </div>\n        {description != null && (\n          <p className=\"text-text-sm leading-[1.4] tracking-[0.16px] text-text-primary\">\n            {description}\n          </p>\n        )}\n      </div>\n\n      <Divider variant=\"light\" className=\"my-0 mx-space-4\" />\n\n      {/* Specs */}\n      {specs.length > 0 && (\n        <>\n          <div\n            className={`flex flex-col gap-space-2 px-space-4 ${contentMuted ? 'text-text-disabled [&_*]:text-text-disabled' : ''}`}\n          >\n            {specs.map((spec, i) => (\n              <div key={i} className=\"flex items-center gap-space-2\">\n                <span className=\"shrink-0\">\n                  <Icon icon={<Check />} size={10} />\n                </span>\n                <p className=\"text-text-xs tracking-[0.18px] leading-[1.4] min-w-0\">\n                  <SpecItem spec={spec} />\n                </p>\n              </div>\n            ))}\n          </div>\n          <Divider variant=\"light\" className=\"my-0 mx-space-4\" />\n        </>\n      )}\n\n      {/* Price */}\n      <div\n        className={`flex flex-col gap-space-1 px-space-4 ${contentMuted ? 'text-text-disabled [&_*]:text-text-disabled' : ''}`}\n      >\n        <div className=\"flex items-center gap-space-1\">\n          <p className=\"text-title-md leading-[1.2] tracking-[0.19px] text-text-primary whitespace-nowrap\">\n            {priceDaily}\n          </p>\n          <p className=\"text-text-xs tracking-[0.18px] text-text-secondary\">{priceUnit}</p>\n        </div>\n        {priceTotal != null && (\n          <p className=\"text-text-xs tracking-[0.18px] text-text-secondary whitespace-nowrap\">\n            {priceTotal}\n          </p>\n        )}\n      </div>\n\n      <Divider variant=\"light\" className=\"my-0 mx-space-4\" />\n\n      {/* Action */}\n      <div className=\"flex flex-col gap-space-2 px-space-4\">\n        {variant === 'apply' && (\n          <>\n            {primaryActionHref != null ? (\n              <Link\n                href={primaryActionHref}\n                as={linkAs}\n                className=\"flex h-10 w-full items-center justify-center rounded-rad-sm bg-fill-action-primary text-text-action-primary hover:bg-fill-action-primary-hover text-btn-small text-base font-medium no-underline\"\n              >\n                {primaryLabel}\n              </Link>\n            ) : (\n              <Button\n                variant=\"primary\"\n                size=\"small\"\n                disabled={disabled}\n                className=\"w-full justify-center\"\n                onClick={onPrimaryAction}\n              >\n                {primaryLabel}\n              </Button>\n            )}\n            {secondaryActionHref != null ? (\n              <Link\n                href={secondaryActionHref}\n                as={linkAs}\n                className=\"flex h-10 w-full items-center justify-center rounded-rad-sm bg-fill-action-secondary text-text-action-secondary hover:bg-fill-action-secondary-hover text-btn-small text-base font-medium no-underline\"\n              >\n                {secondaryLabel}\n              </Link>\n            ) : (\n              <Button\n                variant=\"secondary\"\n                size=\"small\"\n                disabled={disabled}\n                className=\"w-full justify-center\"\n                onClick={onSecondaryAction}\n              >\n                {secondaryLabel}\n              </Button>\n            )}\n          </>\n        )}\n        {variant === 'choose' && (\n          <Button\n            variant=\"primary\"\n            size=\"small\"\n            disabled={disabled}\n            className=\"w-full justify-center\"\n            onClick={onChoose}\n          >\n            {selected ? selectedBtnLabel : chooseBtnLabel}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Compound components for minimal typing\n// ---------------------------------------------------------------------------\n\ntype ProductCardApplyProps = Omit<ProductCardProps, 'variant'>;\ntype ProductCardChooseProps = Omit<ProductCardProps, 'variant'>;\n\nfunction ProductCardApply(props: ProductCardApplyProps, ref: React.Ref<HTMLDivElement>) {\n  return <ProductCardBase {...(props as ProductCardProps)} variant=\"apply\" ref={ref} />;\n}\n\nfunction ProductCardChoose(props: ProductCardChooseProps, ref: React.Ref<HTMLDivElement>) {\n  return <ProductCardBase {...(props as ProductCardProps)} variant=\"choose\" ref={ref} />;\n}\n\nconst ProductCardApplyWithRef = React.forwardRef(ProductCardApply);\nconst ProductCardChooseWithRef = React.forwardRef(ProductCardChoose);\n\nconst ProductCardBase = React.forwardRef(ProductCardInner);\n\nconst ProductCard = Object.assign(ProductCardBase, {\n  Apply: ProductCardApplyWithRef,\n  Choose: ProductCardChooseWithRef,\n}) as React.ForwardRefExoticComponent<\n  Omit<ProductCardProps, 'ref'> & React.RefAttributes<HTMLDivElement>\n> & {\n  Apply: typeof ProductCardApplyWithRef;\n  Choose: typeof ProductCardChooseWithRef;\n};\n\nexport { ProductCard };\n"],"names":[],"mappings":";;;;;;;;;;;AAkHA;AACE;AACE;AAAmB;AAErB;AAEI;AAAiB;AACgD;AAAA;AAAQ;AAAU;AAAC;AAG1F;AAoBA;AACE;AACY;AACV;AACW;AACE;AACC;AACH;AACX;AACe;AACf;AACA;AACA;AACA;AACA;AACQ;AACR;AACY;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACW;AACA;AACF;AACG;AAEd;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AAEA;AAAoB;AAClB;AACA;AACA;AAKF;AACE;AAAC;AAAA;AACM;AACM;AAC0B;AACC;AAClC;AAGJ;AAAA;AAAC;AAAA;AACW;AAC4B;AACC;AAEvC;AAGM;AAAC;AAAA;AACM;AACA;AACE;AACC;AACE;AAAA;AAId;AAAC;AAAA;AACM;AACA;AACE;AACC;AACE;AAEoD;AAAA;AAIpE;AAGI;AAEI;AAAC;AAAA;AACS;AACH;AACkC;AAC5B;AACF;AAAA;AAGf;AAGI;AAAC;AAAA;AACS;AACH;AACmC;AAC7B;AACF;AAAA;AAGf;AACF;AAAA;AAAA;AAAA;AAKJ;AAAC;AAAA;AACkL;AAEjL;AACE;AAAqF;AAInF;AAEJ;AAIE;AAAA;AAAA;AAAA;AAIiD;AAKjD;AAAA;AAAC;AAAA;AACqH;AAIhH;AAEA;AAGA;AAEH;AAAA;AAAA;AAEkD;AACvD;AAIF;AAAC;AAAA;AACqH;AAEpH;AACE;AAEA;AAC6E;AAC/E;AAIE;AAAA;AAAA;AAAA;AAIiD;AAIlD;AAEI;AACC;AAAC;AAAA;AACO;AACF;AACM;AAET;AAAA;AAGH;AAAC;AAAA;AACS;AACH;AACL;AACU;AACD;AAER;AAAA;AAAA;AAIH;AAAC;AAAA;AACO;AACF;AACM;AAET;AAAA;AAGH;AAAC;AAAA;AACS;AACH;AACL;AACU;AACD;AAER;AAAA;AAAA;AAGP;AAGA;AAAC;AAAA;AACS;AACH;AACL;AACU;AACD;AAEsB;AAAA;AAAA;AAGrC;AAAA;AAAA;AAGN;AASA;AACE;AACF;AAEA;AACE;AACF;AAEA;AACA;AAEA;AAEA;AAAmD;AAC1C;AAET;;;;"}

package/dist/components/ProductCard/ProductCard.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ProductCard.test.d.ts.map

package/dist/components/ProductCard/ProductCard.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCard.test.d.ts","sourceRoot":"","sources":["../../../src/components/ProductCard/ProductCard.test.tsx"],"names":[],"mappings":""}

package/dist/components/ProductImage/ProductImage.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ProductImage.test.d.ts.map

package/dist/components/ProductImage/ProductImage.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductImage.test.d.ts","sourceRoot":"","sources":["../../../src/components/ProductImage/ProductImage.test.tsx"],"names":[],"mappings":""}

package/dist/components/RadioGroup/RadioGroup.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=RadioGroup.test.d.ts.map

package/dist/components/RadioGroup/RadioGroup.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.test.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.test.tsx"],"names":[],"mappings":""}

package/dist/components/Section/Section.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Section.test.d.ts.map

package/dist/components/Section/Section.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.test.d.ts","sourceRoot":"","sources":["../../../src/components/Section/Section.test.tsx"],"names":[],"mappings":""}

package/dist/components/Select/Select.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Select.test.d.ts.map

package/dist/components/Select/Select.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.test.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.test.tsx"],"names":[],"mappings":""}

package/dist/components/SelectTab/SelectTab.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SelectTab.test.d.ts.map

package/dist/components/SelectTab/SelectTab.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTab.test.d.ts","sourceRoot":"","sources":["../../../src/components/SelectTab/SelectTab.test.tsx"],"names":[],"mappings":""}

package/dist/components/Skeleton/Skeleton.d.ts

@@ -8,7 +8,7 @@ import { SkeletonProps, SkeletonRadius } from '../../types/skeleton';
  * Three preset sub-components are available for common use cases:
  * - Skeleton.Text   — single line text placeholder
  * - Skeleton.Avatar — circular profile image placeholder
- * - Skeleton.Card   — rectangular card-shaped placeholder
+ * - Skeleton.JiwambeCard — rectangular card-shaped placeholder
  *
  * For custom shapes, use the Skeleton primitive directly with
  * explicit width, height, and radius props.
@@ -42,7 +42,7 @@ export declare function Skeleton({ width, height, radius, label, className, styl
 export declare namespace Skeleton {
     var Text: ({ width, size, className, style, }: SkeletonTextProps) => import("react/jsx-runtime").JSX.Element;
     var Avatar: ({ size, className, style, }: SkeletonAvatarProps) => import("react/jsx-runtime").JSX.Element;
-    var Card: ({ width, height, radius, className, style, }: SkeletonCardProps) => import("react/jsx-runtime").JSX.Element;
+    var JiwambeCard: ({ width, height, radius, className, style, }: SkeletonJiwambeCardProps) => import("react/jsx-runtime").JSX.Element;
 }
 /** Props for Skeleton.Text. Single-line text placeholder. */
 interface SkeletonTextProps {
@@ -70,8 +70,8 @@ interface SkeletonAvatarProps {
     /** Additional inline styles. @default undefined */
     style?: React.CSSProperties;
 }
-/** Props for Skeleton.Card. Rectangular card-shaped placeholder. */
-interface SkeletonCardProps {
+/** Props for Skeleton.JiwambeCard. Rectangular card-shaped placeholder. */
+interface SkeletonJiwambeCardProps {
     /** Width of the card. Number = rem. @default '100%' */
     width?: string | number;
     /** Height of the card. Number = rem. @default '8rem' */

package/dist/components/Skeleton/Skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,cAAc,EACpB,MAAM,sBAAsB,CAAC;AAQ9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,MAAM,EACN,MAAa,EACb,KAAoB,EACpB,SAAc,EACd,KAAK,GACN,EAAE,aAAa,2CAiBf;yBAxBe,QAAQ;mDAwDrB,iBAAiB;8CAiCjB,mBAAmB;6DAqCnB,iBAAiB;;AAlGpB,6DAA6D;AAC7D,UAAU,iBAAiB;IACzB,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AA8BD,8DAA8D;AAC9D,UAAU,mBAAmB;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAuBD,oEAAoE;AACpE,UAAU,iBAAiB;IACzB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,yCAAyC;IACzC,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,cAAc,EACpB,MAAM,sBAAsB,CAAC;AAQ9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,MAAM,EACN,MAAa,EACb,KAAoB,EACpB,SAAc,EACd,KAAK,GACN,EAAE,aAAa,2CAiBf;yBAxBe,QAAQ;mDAwDrB,iBAAiB;8CAiCjB,mBAAmB;oEAqCnB,wBAAwB;;AAlG3B,6DAA6D;AAC7D,UAAU,iBAAiB;IACzB,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AA8BD,8DAA8D;AAC9D,UAAU,mBAAmB;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAuBD,2EAA2E;AAC3E,UAAU,wBAAwB;IAChC,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,yCAAyC;IACzC,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B"}

package/dist/components/Skeleton/Skeleton.js

@@ -72,7 +72,7 @@ Skeleton.Avatar = function SkeletonAvatar({
     }
   );
 };
-Skeleton.Card = function SkeletonCard({
+Skeleton.JiwambeCard = function SkeletonJiwambeCard({
   width,
   height = "8rem",
   radius = "md",

package/dist/components/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  skeletonRadiusMap,\n  type SkeletonProps,\n  type SkeletonRadius,\n} from '../../types/skeleton';\n\nfunction resolveSize(value: string | number | undefined, fallback: string): string {\n  if (value === undefined) return fallback;\n  if (typeof value === 'number') return `${value}rem`;\n  return value;\n}\n\n/**\n * Loading placeholder primitive. Renders an animated shimmer shape\n * that communicates content is loading. Use in place of content\n * while data is being fetched.\n *\n * Three preset sub-components are available for common use cases:\n * - Skeleton.Text   — single line text placeholder\n * - Skeleton.Avatar — circular profile image placeholder\n * - Skeleton.Card   — rectangular card-shaped placeholder\n *\n * For custom shapes, use the Skeleton primitive directly with\n * explicit width, height, and radius props.\n *\n * The shimmer animation uses design system colour tokens:\n * background: var(--col-neutral-100), highlight: var(--col-neutral-50).\n *\n * @example\n * // Custom shape\n * <Skeleton width=\"100%\" height=\"2rem\" radius=\"xs\" />\n *\n * @example\n * // Paragraph placeholder\n * <Stack spacing=\"space-2\">\n *   <Skeleton.Text width=\"100%\" />\n *   <Skeleton.Text width=\"90%\" />\n *   <Skeleton.Text width=\"75%\" />\n * </Stack>\n *\n * @example\n * // Profile header placeholder\n * <Stack direction=\"row\" spacing=\"space-3\" alignItems=\"center\">\n *   <Skeleton.Avatar size=\"2.5rem\" />\n *   <Stack spacing=\"space-1\">\n *     <Skeleton.Text width=\"8rem\" />\n *     <Skeleton.Text width=\"5rem\" size=\"xs\" />\n *   </Stack>\n * </Stack>\n */\nexport function Skeleton({\n  width,\n  height,\n  radius = 'xs',\n  label = 'Loading...',\n  className = '',\n  style,\n}: SkeletonProps) {\n  const internalStyle: React.CSSProperties = {\n    width: resolveSize(width, '100%'),\n    height: resolveSize(height, '1rem'),\n    borderRadius: skeletonRadiusMap[radius],\n    display: 'block',\n    ...style,\n  };\n\n  return (\n    <div\n      role=\"status\"\n      aria-label={label}\n      className={['jiwambe-skeleton', className].filter(Boolean).join(' ')}\n      style={internalStyle}\n    />\n  );\n}\n\n// --- Skeleton.Text ---\n\n/** Props for Skeleton.Text. Single-line text placeholder. */\ninterface SkeletonTextProps {\n  /** Width of the text placeholder. Number = rem. @default '100%' */\n  width?: string | number;\n  /**\n   * Typography size to match. Controls height: xs=0.75rem, sm=1rem, md=1.125rem, lg=1.5rem.\n   * @default 'sm'\n   */\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  /** Additional className. @default undefined */\n  className?: string;\n  /** Additional inline styles. @default undefined */\n  style?: React.CSSProperties;\n}\n\nconst textHeightMap = {\n  xs: '0.75rem',\n  sm: '1rem',\n  md: '1.125rem',\n  lg: '1.5rem',\n};\n\n/** Single-line text loading placeholder. Height matches typography size. */\nSkeleton.Text = function SkeletonText({\n  width,\n  size = 'sm',\n  className,\n  style,\n}: SkeletonTextProps) {\n  return (\n    <Skeleton\n      width={width ?? '100%'}\n      height={textHeightMap[size]}\n      radius=\"xs\"\n      label=\"Loading text...\"\n      className={className}\n      style={style}\n    />\n  );\n};\n\n// --- Skeleton.Avatar ---\n\n/** Props for Skeleton.Avatar. Circular avatar placeholder. */\ninterface SkeletonAvatarProps {\n  /**\n   * Diameter of the avatar circle. Number = rem, string = used as-is.\n   * @default '2.5rem'\n   */\n  size?: string | number;\n  /** Additional className. @default undefined */\n  className?: string;\n  /** Additional inline styles. @default undefined */\n  style?: React.CSSProperties;\n}\n\n/** Circular profile image loading placeholder. Always uses radius=\"rounded\". */\nSkeleton.Avatar = function SkeletonAvatar({\n  size = '2.5rem',\n  className,\n  style,\n}: SkeletonAvatarProps) {\n  const resolved = typeof size === 'number' ? `${size}rem` : size;\n  return (\n    <Skeleton\n      width={resolved}\n      height={resolved}\n      radius=\"rounded\"\n      label=\"Loading avatar...\"\n      className={className}\n      style={style}\n    />\n  );\n};\n\n// --- Skeleton.Card ---\n\n/** Props for Skeleton.Card. Rectangular card-shaped placeholder. */\ninterface SkeletonCardProps {\n  /** Width of the card. Number = rem. @default '100%' */\n  width?: string | number;\n  /** Height of the card. Number = rem. @default '8rem' */\n  height?: string | number;\n  /** Border radius token. @default 'md' */\n  radius?: SkeletonRadius;\n  /** Additional className. @default undefined */\n  className?: string;\n  /** Additional inline styles. @default undefined */\n  style?: React.CSSProperties;\n}\n\n/** Card-shaped content block loading placeholder. */\nSkeleton.Card = function SkeletonCard({\n  width,\n  height = '8rem',\n  radius = 'md',\n  className,\n  style,\n}: SkeletonCardProps) {\n  return (\n    <Skeleton\n      width={width ?? '100%'}\n      height={height}\n      radius={radius}\n      label=\"Loading card...\"\n      className={className}\n      style={style}\n    />\n  );\n};\n"],"names":[],"mappings":";;AAOA,SAAS,YAAY,OAAoC,UAA0B;AACjF,MAAI,UAAU,OAAW,QAAO;AAChC,MAAI,OAAO,UAAU,SAAU,QAAO,GAAG,KAAK;AAC9C,SAAO;AACT;AAwCO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AACF,GAAkB;AAChB,QAAM,gBAAqC;AAAA,IACzC,OAAO,YAAY,OAAO,MAAM;AAAA,IAChC,QAAQ,YAAY,QAAQ,MAAM;AAAA,IAClC,cAAc,kBAAkB,MAAM;AAAA,IACtC,SAAS;AAAA,IACT,GAAG;AAAA,EAAA;AAGL,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAW,CAAC,oBAAoB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MACnE,OAAO;AAAA,IAAA;AAAA,EAAA;AAGb;AAmBA,MAAM,gBAAgB;AAAA,EACpB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,SAAS,OAAO,SAAS,aAAa;AAAA,EACpC;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAAsB;AACpB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,SAAS;AAAA,MAChB,QAAQ,cAAc,IAAI;AAAA,MAC1B,QAAO;AAAA,MACP,OAAM;AAAA,MACN;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAGN;AAkBA,SAAS,SAAS,SAAS,eAAe;AAAA,EACxC,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,WAAW,OAAO,SAAS,WAAW,GAAG,IAAI,QAAQ;AAC3D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAO;AAAA,MACP,OAAM;AAAA,MACN;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAGN;AAmBA,SAAS,OAAO,SAAS,aAAa;AAAA,EACpC;AAAA,EACA,SAAS;AAAA,EACT,SAAS;AAAA,EACT;AAAA,EACA;AACF,GAAsB;AACpB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,SAAS;AAAA,MAChB;AAAA,MACA;AAAA,MACA,OAAM;AAAA,MACN;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Skeleton.js","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  skeletonRadiusMap,\n  type SkeletonProps,\n  type SkeletonRadius,\n} from '../../types/skeleton';\n\nfunction resolveSize(value: string | number | undefined, fallback: string): string {\n  if (value === undefined) return fallback;\n  if (typeof value === 'number') return `${value}rem`;\n  return value;\n}\n\n/**\n * Loading placeholder primitive. Renders an animated shimmer shape\n * that communicates content is loading. Use in place of content\n * while data is being fetched.\n *\n * Three preset sub-components are available for common use cases:\n * - Skeleton.Text   — single line text placeholder\n * - Skeleton.Avatar — circular profile image placeholder\n * - Skeleton.JiwambeCard — rectangular card-shaped placeholder\n *\n * For custom shapes, use the Skeleton primitive directly with\n * explicit width, height, and radius props.\n *\n * The shimmer animation uses design system colour tokens:\n * background: var(--col-neutral-100), highlight: var(--col-neutral-50).\n *\n * @example\n * // Custom shape\n * <Skeleton width=\"100%\" height=\"2rem\" radius=\"xs\" />\n *\n * @example\n * // Paragraph placeholder\n * <Stack spacing=\"space-2\">\n *   <Skeleton.Text width=\"100%\" />\n *   <Skeleton.Text width=\"90%\" />\n *   <Skeleton.Text width=\"75%\" />\n * </Stack>\n *\n * @example\n * // Profile header placeholder\n * <Stack direction=\"row\" spacing=\"space-3\" alignItems=\"center\">\n *   <Skeleton.Avatar size=\"2.5rem\" />\n *   <Stack spacing=\"space-1\">\n *     <Skeleton.Text width=\"8rem\" />\n *     <Skeleton.Text width=\"5rem\" size=\"xs\" />\n *   </Stack>\n * </Stack>\n */\nexport function Skeleton({\n  width,\n  height,\n  radius = 'xs',\n  label = 'Loading...',\n  className = '',\n  style,\n}: SkeletonProps) {\n  const internalStyle: React.CSSProperties = {\n    width: resolveSize(width, '100%'),\n    height: resolveSize(height, '1rem'),\n    borderRadius: skeletonRadiusMap[radius],\n    display: 'block',\n    ...style,\n  };\n\n  return (\n    <div\n      role=\"status\"\n      aria-label={label}\n      className={['jiwambe-skeleton', className].filter(Boolean).join(' ')}\n      style={internalStyle}\n    />\n  );\n}\n\n// --- Skeleton.Text ---\n\n/** Props for Skeleton.Text. Single-line text placeholder. */\ninterface SkeletonTextProps {\n  /** Width of the text placeholder. Number = rem. @default '100%' */\n  width?: string | number;\n  /**\n   * Typography size to match. Controls height: xs=0.75rem, sm=1rem, md=1.125rem, lg=1.5rem.\n   * @default 'sm'\n   */\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  /** Additional className. @default undefined */\n  className?: string;\n  /** Additional inline styles. @default undefined */\n  style?: React.CSSProperties;\n}\n\nconst textHeightMap = {\n  xs: '0.75rem',\n  sm: '1rem',\n  md: '1.125rem',\n  lg: '1.5rem',\n};\n\n/** Single-line text loading placeholder. Height matches typography size. */\nSkeleton.Text = function SkeletonText({\n  width,\n  size = 'sm',\n  className,\n  style,\n}: SkeletonTextProps) {\n  return (\n    <Skeleton\n      width={width ?? '100%'}\n      height={textHeightMap[size]}\n      radius=\"xs\"\n      label=\"Loading text...\"\n      className={className}\n      style={style}\n    />\n  );\n};\n\n// --- Skeleton.Avatar ---\n\n/** Props for Skeleton.Avatar. Circular avatar placeholder. */\ninterface SkeletonAvatarProps {\n  /**\n   * Diameter of the avatar circle. Number = rem, string = used as-is.\n   * @default '2.5rem'\n   */\n  size?: string | number;\n  /** Additional className. @default undefined */\n  className?: string;\n  /** Additional inline styles. @default undefined */\n  style?: React.CSSProperties;\n}\n\n/** Circular profile image loading placeholder. Always uses radius=\"rounded\". */\nSkeleton.Avatar = function SkeletonAvatar({\n  size = '2.5rem',\n  className,\n  style,\n}: SkeletonAvatarProps) {\n  const resolved = typeof size === 'number' ? `${size}rem` : size;\n  return (\n    <Skeleton\n      width={resolved}\n      height={resolved}\n      radius=\"rounded\"\n      label=\"Loading avatar...\"\n      className={className}\n      style={style}\n    />\n  );\n};\n\n// --- Skeleton.JiwambeCard ---\n\n/** Props for Skeleton.JiwambeCard. Rectangular card-shaped placeholder. */\ninterface SkeletonJiwambeCardProps {\n  /** Width of the card. Number = rem. @default '100%' */\n  width?: string | number;\n  /** Height of the card. Number = rem. @default '8rem' */\n  height?: string | number;\n  /** Border radius token. @default 'md' */\n  radius?: SkeletonRadius;\n  /** Additional className. @default undefined */\n  className?: string;\n  /** Additional inline styles. @default undefined */\n  style?: React.CSSProperties;\n}\n\n/** Card-shaped content block loading placeholder. */\nSkeleton.JiwambeCard = function SkeletonJiwambeCard({\n  width,\n  height = '8rem',\n  radius = 'md',\n  className,\n  style,\n}: SkeletonJiwambeCardProps) {\n  return (\n    <Skeleton\n      width={width ?? '100%'}\n      height={height}\n      radius={radius}\n      label=\"Loading card...\"\n      className={className}\n      style={style}\n    />\n  );\n};\n"],"names":[],"mappings":";;AAOA,SAAS,YAAY,OAAoC,UAA0B;AACjF,MAAI,UAAU,OAAW,QAAO;AAChC,MAAI,OAAO,UAAU,SAAU,QAAO,GAAG,KAAK;AAC9C,SAAO;AACT;AAwCO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AACF,GAAkB;AAChB,QAAM,gBAAqC;AAAA,IACzC,OAAO,YAAY,OAAO,MAAM;AAAA,IAChC,QAAQ,YAAY,QAAQ,MAAM;AAAA,IAClC,cAAc,kBAAkB,MAAM;AAAA,IACtC,SAAS;AAAA,IACT,GAAG;AAAA,EAAA;AAGL,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAW,CAAC,oBAAoB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MACnE,OAAO;AAAA,IAAA;AAAA,EAAA;AAGb;AAmBA,MAAM,gBAAgB;AAAA,EACpB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,SAAS,OAAO,SAAS,aAAa;AAAA,EACpC;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAAsB;AACpB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,SAAS;AAAA,MAChB,QAAQ,cAAc,IAAI;AAAA,MAC1B,QAAO;AAAA,MACP,OAAM;AAAA,MACN;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAGN;AAkBA,SAAS,SAAS,SAAS,eAAe;AAAA,EACxC,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,WAAW,OAAO,SAAS,WAAW,GAAG,IAAI,QAAQ;AAC3D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAO;AAAA,MACP,OAAM;AAAA,MACN;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAGN;AAmBA,SAAS,cAAc,SAAS,oBAAoB;AAAA,EAClD;AAAA,EACA,SAAS;AAAA,EACT,SAAS;AAAA,EACT;AAAA,EACA;AACF,GAA6B;AAC3B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,SAAS;AAAA,MAChB;AAAA,MACA;AAAA,MACA,OAAM;AAAA,MACN;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Skeleton/Skeleton.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Skeleton.test.d.ts.map

package/dist/components/Skeleton/Skeleton.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.test.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.test.tsx"],"names":[],"mappings":""}

package/dist/components/Slider/Slider.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Slider.test.d.ts.map

package/dist/components/Slider/Slider.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.test.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.test.tsx"],"names":[],"mappings":""}

package/dist/components/Stack/Stack.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Stack.test.d.ts.map

package/dist/components/Stack/Stack.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.test.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.test.tsx"],"names":[],"mappings":""}

package/dist/components/Tab/Tab.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Tab.test.d.ts.map

package/dist/components/Tab/Tab.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.test.d.ts","sourceRoot":"","sources":["../../../src/components/Tab/Tab.test.tsx"],"names":[],"mappings":""}

package/dist/components/TextArea/TextArea.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TextArea.test.d.ts.map

package/dist/components/TextArea/TextArea.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.test.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.test.tsx"],"names":[],"mappings":""}

package/dist/components/TextInput/TextInput.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TextInput.test.d.ts.map

package/dist/components/TextInput/TextInput.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.test.d.ts","sourceRoot":"","sources":["../../../src/components/TextInput/TextInput.test.tsx"],"names":[],"mappings":""}

package/dist/components/Toggle/Toggle.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Toggle.test.d.ts.map

package/dist/components/Toggle/Toggle.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.test.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.test.tsx"],"names":[],"mappings":""}

package/dist/components/Typography/Typography.test.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Register Vitest matchers for JDS components.
+ */
+declare module 'vitest' {
+    interface Assertion<T = any> {
+        toHaveNoViolations(): Promise<T>;
+        toBeInTheDocument(): T;
+        toHaveTextContent(text: string | RegExp): T;
+        toBeVisible(): T;
+        toHaveClass(...classNames: string[]): T;
+        toHaveAttribute(attr: string, value?: string): T;
+        toBeInstanceOf(cls: any): T;
+    }
+}
+//# sourceMappingURL=Typography.test.d.ts.map

package/dist/components/Typography/Typography.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.test.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Typography.test.tsx"],"names":[],"mappings":"AAWA,OAAO,2BAA2B,CAAC;AAEnC;;GAEG;AACH,OAAO,QAAQ,QAAQ,CAAC;IACtB,UAAU,SAAS,CAAC,CAAC,GAAG,GAAG;QACzB,kBAAkB,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;QACjC,iBAAiB,IAAI,CAAC,CAAC;QACvB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC;QAC5C,WAAW,IAAI,CAAC,CAAC;QACjB,WAAW,CAAC,GAAG,UAAU,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;QACxC,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC;QACjD,cAAc,CAAC,GAAG,EAAE,GAAG,GAAG,CAAC,CAAC;KAC7B;CACF"}

package/dist/components/UploadInput/UploadInput.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=UploadInput.test.d.ts.map

package/dist/components/UploadInput/UploadInput.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadInput.test.d.ts","sourceRoot":"","sources":["../../../src/components/UploadInput/UploadInput.test.tsx"],"names":[],"mappings":""}