entangle-ui 0.9.0 → 0.11.0

package/dist/esm/components/layout/Accordion/AccordionContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContent.js","sources":["../../../../../../src/components/layout/Accordion/AccordionContent.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAcA;AAEO;;;AAYL;AACA;AAEA;AACE;;AAGF;AAwBF;AAEA;;"}
+{"version":3,"file":"AccordionContent.js","sources":["src/components/layout/Accordion/AccordionContent.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { useAccordionContext, useAccordionItemContext } from './Accordion';\nimport {\n  contentWrapper,\n  contentWrapperExpanded,\n  contentWrapperCollapsed,\n  contentInner,\n  contentBody,\n} from './Accordion.css';\n\nimport type { AccordionContentProps } from './Accordion.types';\n\n// --- Component ---\n\nexport const AccordionContent: React.FC<AccordionContentProps> = ({\n  children,\n  keepMounted = false,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const { size, accordionId } = useAccordionContext();\n  const { value, isExpanded } = useAccordionItemContext();\n\n  const triggerId = `accordion-${accordionId}-trigger-${value}`;\n  const contentId = `accordion-${accordionId}-content-${value}`;\n\n  if (!isExpanded && !keepMounted) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cx(\n        contentWrapper,\n        isExpanded ? contentWrapperExpanded : contentWrapperCollapsed\n      )}\n      role=\"region\"\n      id={contentId}\n      aria-labelledby={triggerId}\n      hidden={!isExpanded || undefined}\n    >\n      <div className={contentInner}>\n        <div\n          ref={ref}\n          className={cx(contentBody({ size }), className)}\n          style={style}\n          data-testid={testId}\n          {...rest}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nAccordionContent.displayName = 'AccordionContent';\n"],"names":[],"mappings":";;;;;;AAiBA;AAEO;;;AAYL;AACA;AAEA;AACE;;AAGF;AAwBF;AAEA;;"}

package/dist/esm/components/layout/Accordion/AccordionItem.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useAccordionContext, AccordionItemContext } from './Accordion.js';
 import { cx } from '../../../utils/cx.js';
+import { useAccordionContext, AccordionItemContext } from './Accordion.js';
 import { accordionItem } from './Accordion.css.js';
 
 // --- Component ---

package/dist/esm/components/layout/Accordion/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","sources":["../../../../../../src/components/layout/Accordion/AccordionItem.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAWA;AAEO;AAUL;;AAGA;;;AAGE;;AAGF;AAaF;AAEA;;"}
+{"version":3,"file":"AccordionItem.js","sources":["src/components/layout/Accordion/AccordionItem.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { useAccordionContext, AccordionItemContext } from './Accordion';\nimport { accordionItem } from './Accordion.css';\n\nimport type {\n  AccordionItemContextValue,\n  AccordionItemProps,\n} from './Accordion.types';\n\n// --- Component ---\n\nexport const AccordionItem: React.FC<AccordionItemProps> = ({\n  value,\n  disabled = false,\n  children,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const { expandedItems } = useAccordionContext();\n  const isExpanded = expandedItems.includes(value);\n\n  const itemContext: AccordionItemContextValue = {\n    value,\n    isExpanded,\n    isDisabled: disabled,\n  };\n\n  return (\n    <AccordionItemContext.Provider value={itemContext}>\n      <div\n        ref={ref}\n        className={cx(accordionItem, className)}\n        style={style}\n        data-testid={testId}\n        {...rest}\n      >\n        {children}\n      </div>\n    </AccordionItemContext.Provider>\n  );\n};\n\nAccordionItem.displayName = 'AccordionItem';\n"],"names":[],"mappings":";;;;;;AAcA;AAEO;AAUL;;AAGA;;;AAGE;;AAGF;AAaF;AAEA;;"}

package/dist/esm/components/layout/Accordion/AccordionTrigger.js

@@ -2,8 +2,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import { ChevronRightIcon } from '../../Icons/ChevronRightIcon.js';
-import { useAccordionContext, useAccordionItemContext } from './Accordion.js';
 import { cx } from '../../../utils/cx.js';
+import { useAccordionContext, useAccordionItemContext } from './Accordion.js';
 import { chevronExpanded, chevronCollapsed, chevronStyle, iconArea, actionsArea, triggerButton } from './Accordion.css.js';
 
 const CHEVRON_SIZE_MAP = {
@@ -23,14 +23,19 @@ const AccordionTrigger = ({ children, icon, actions, indicator, className, style
             toggleItem(value);
         }
     }, [isDisabled, toggleItem, value]);
+    // Prevent clicks/keypresses originating from the actions area (which hosts
+    // its own interactive controls) from bubbling up and toggling the accordion.
     const handleActionsClick = useCallback((e) => {
         e.stopPropagation();
     }, []);
+    const handleActionsKeyDown = useCallback((e) => {
+        e.stopPropagation();
+    }, []);
     const showIndicator = indicator !== null;
     return (jsxs("button", { ref: ref, type: "button", id: triggerId, "aria-expanded": isExpanded, "aria-controls": contentId, "aria-disabled": isDisabled || undefined, disabled: isDisabled, onClick: handleClick, className: cx(triggerButton({ variant, size, disabled: isDisabled }), className), style: style, "data-testid": testId, ...rest, children: [showIndicator && (jsx("span", { className: cx(chevronStyle, isExpanded ? chevronExpanded : chevronCollapsed), style: {
                     width: `${sizeConfig.chevronSize}px`,
                     height: `${sizeConfig.chevronSize}px`,
-                }, children: indicator ?? (jsx(ChevronRightIcon, { size: sizeConfig.chevronSize, decorative: true })) })), icon && jsx("span", { className: iconArea, children: icon }), jsx("span", { children: children }), actions && (jsx("span", { className: actionsArea, onClick: handleActionsClick, children: actions }))] }));
+                }, children: indicator ?? (jsx(ChevronRightIcon, { size: sizeConfig.chevronSize, decorative: true })) })), icon && jsx("span", { className: iconArea, children: icon }), jsx("span", { children: children }), actions && (jsx("span", { className: actionsArea, role: "presentation", onClick: handleActionsClick, onKeyDown: handleActionsKeyDown, children: actions }))] }));
 };
 AccordionTrigger.displayName = 'AccordionTrigger';
 

package/dist/esm/components/layout/Accordion/AccordionTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionTrigger.js","sources":["../../../../../../src/components/layout/Accordion/AccordionTrigger.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAsBA;AACE;AACA;AACA;;AAGF;AAEO;AAWL;;AAEA;AAEA;AACA;AAEA;;;;;AAMA;;;AAIA;AAEA;AAyBU;AACA;;AAiBZ;AAEA;;"}
+{"version":3,"file":"AccordionTrigger.js","sources":["src/components/layout/Accordion/AccordionTrigger.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback } from 'react';\n\nimport { ChevronRightIcon } from '@/components/Icons/ChevronRightIcon';\nimport { cx } from '@/utils/cx';\n\nimport { useAccordionContext, useAccordionItemContext } from './Accordion';\nimport {\n  triggerButton,\n  chevronStyle,\n  chevronExpanded,\n  chevronCollapsed,\n  actionsArea,\n  iconArea,\n} from './Accordion.css';\n\nimport type { AccordionSize, AccordionTriggerProps } from './Accordion.types';\n\n// --- Size maps ---\n\ninterface ChevronSizeConfig {\n  chevronSize: number;\n}\n\nconst CHEVRON_SIZE_MAP: Record<AccordionSize, ChevronSizeConfig> = {\n  sm: { chevronSize: 10 },\n  md: { chevronSize: 12 },\n  lg: { chevronSize: 14 },\n};\n\n// --- Component ---\n\nexport const AccordionTrigger: React.FC<AccordionTriggerProps> = ({\n  children,\n  icon,\n  actions,\n  indicator,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const { toggleItem, variant, size, accordionId } = useAccordionContext();\n  const { value, isExpanded, isDisabled } = useAccordionItemContext();\n  const sizeConfig = CHEVRON_SIZE_MAP[size];\n\n  const triggerId = `accordion-${accordionId}-trigger-${value}`;\n  const contentId = `accordion-${accordionId}-content-${value}`;\n\n  const handleClick = useCallback(() => {\n    if (!isDisabled) {\n      toggleItem(value);\n    }\n  }, [isDisabled, toggleItem, value]);\n\n  // Prevent clicks/keypresses originating from the actions area (which hosts\n  // its own interactive controls) from bubbling up and toggling the accordion.\n  const handleActionsClick = useCallback((e: React.MouseEvent) => {\n    e.stopPropagation();\n  }, []);\n\n  const handleActionsKeyDown = useCallback((e: React.KeyboardEvent) => {\n    e.stopPropagation();\n  }, []);\n\n  const showIndicator = indicator !== null;\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      id={triggerId}\n      aria-expanded={isExpanded}\n      aria-controls={contentId}\n      aria-disabled={isDisabled || undefined}\n      disabled={isDisabled}\n      onClick={handleClick}\n      className={cx(\n        triggerButton({ variant, size, disabled: isDisabled }),\n        className\n      )}\n      style={style}\n      data-testid={testId}\n      {...rest}\n    >\n      {showIndicator && (\n        <span\n          className={cx(\n            chevronStyle,\n            isExpanded ? chevronExpanded : chevronCollapsed\n          )}\n          style={{\n            width: `${sizeConfig.chevronSize}px`,\n            height: `${sizeConfig.chevronSize}px`,\n          }}\n        >\n          {indicator ?? (\n            <ChevronRightIcon size={sizeConfig.chevronSize} decorative />\n          )}\n        </span>\n      )}\n      {icon && <span className={iconArea}>{icon}</span>}\n      <span>{children}</span>\n      {actions && (\n        <span\n          className={actionsArea}\n          role=\"presentation\"\n          onClick={handleActionsClick}\n          onKeyDown={handleActionsKeyDown}\n        >\n          {actions}\n        </span>\n      )}\n    </button>\n  );\n};\n\nAccordionTrigger.displayName = 'AccordionTrigger';\n"],"names":[],"mappings":";;;;;;;;AAyBA;AACE;AACA;AACA;;AAGF;AAEO;AAWL;;AAEA;AAEA;AACA;AAEA;;;;;;;AAQA;;;AAIA;;;AAIA;AAEA;AAyBU;AACA;;AAsBZ;AAEA;;"}

package/dist/esm/components/layout/Card/Card.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useCallback } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { useCallback } from 'react';
 import { cx } from '../../../utils/cx.js';
 import { cardRecipe, cardHeaderLeadingStyle, cardHeaderTextStyle, cardHeaderTitleStyle, cardHeaderSubtitleStyle, cardHeaderTrailingStyle, cardHeaderStyle, cardMediaImageStyle, cardMediaAspectVar, cardMediaStyle, cardBodyStyle, cardFooterStyle } from './Card.css.js';
 
@@ -29,7 +29,7 @@ import { cardRecipe, cardHeaderLeadingStyle, cardHeaderTextStyle, cardHeaderTitl
 const CardRoot = ({ variant = 'outlined', onClick, selected = false, disabled = false, className, style, testId, children, ref, ...rest }) => {
     const interactive = onClick !== undefined && !disabled;
     const handleKeyDown = useCallback((event) => {
-        if (!interactive || !onClick)
+        if (!interactive)
             return;
         if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();

package/dist/esm/components/layout/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../../../src/components/layout/Card/Card.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAkCA;;;;;;;;;;;;;;;;;;;;AAoBG;AACH;;AAcE;AAEI;;AACA;;;;AAIF;;;;;;AAaK;AAgBT;AAEA;AAEA;AAgCA;AAEA;AAeM;AACA;AACD;AAYL;AAEA;AAmBA;AAEA;AAoBA;;AAGE;AACA;AACA;AACA;AACD;;"}
+{"version":3,"file":"Card.js","sources":["src/components/layout/Card/Card.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { useCallback } from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport {\n  cardBodyStyle,\n  cardFooterStyle,\n  cardHeaderLeadingStyle,\n  cardHeaderStyle,\n  cardHeaderSubtitleStyle,\n  cardHeaderTextStyle,\n  cardHeaderTitleStyle,\n  cardHeaderTrailingStyle,\n  cardMediaAspectVar,\n  cardMediaImageStyle,\n  cardMediaStyle,\n  cardRecipe,\n} from './Card.css';\n\nimport type {\n  CardBodyProps,\n  CardFooterProps,\n  CardHeaderProps,\n  CardMediaProps,\n  CardProps,\n} from './Card.types';\n\ninterface CardComponent extends React.FC<CardProps> {\n  Header: React.FC<CardHeaderProps>;\n  Media: React.FC<CardMediaProps>;\n  Body: React.FC<CardBodyProps>;\n  Footer: React.FC<CardFooterProps>;\n}\n\n/**\n * A bounded surface representing a single semantic unit (item, summary,\n * preview). Distinct from `Paper` (a generic surface): a Card has a\n * header / media / body / footer convention and can be made interactive.\n *\n * @example\n * ```tsx\n * <Card variant=\"elevated\" onClick={open}>\n *   <Card.Header\n *     title=\"Asset\"\n *     subtitle=\"Updated 2h ago\"\n *     trailing={<IconButton icon={<MoreIcon />} />}\n *   />\n *   <Card.Media src=\"/preview.png\" alt=\"Preview\" />\n *   <Card.Body>Description...</Card.Body>\n *   <Card.Footer>\n *     <Button>Open</Button>\n *   </Card.Footer>\n * </Card>\n * ```\n */\nconst CardRoot: React.FC<CardProps> = ({\n  variant = 'outlined',\n  onClick,\n  selected = false,\n  disabled = false,\n  className,\n  style,\n  testId,\n  children,\n  ref,\n  ...rest\n}) => {\n  const interactive = onClick !== undefined && !disabled;\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!interactive) return;\n      if (event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault();\n        onClick(event as unknown as React.MouseEvent<HTMLDivElement>);\n      }\n    },\n    [interactive, onClick]\n  );\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        cardRecipe({\n          variant,\n          interactive: interactive || undefined,\n          selected: selected || undefined,\n          disabled: disabled || undefined,\n        }),\n        className\n      )}\n      style={style}\n      data-testid={testId}\n      onClick={interactive ? onClick : undefined}\n      onKeyDown={interactive ? handleKeyDown : undefined}\n      role={interactive ? 'button' : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      aria-disabled={disabled || undefined}\n      aria-pressed={interactive && selected ? true : undefined}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n\nCardRoot.displayName = 'Card';\n\nconst CardHeader: React.FC<CardHeaderProps> = ({\n  title,\n  subtitle,\n  leading,\n  trailing,\n  children,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => (\n  <div\n    ref={ref}\n    className={cx(cardHeaderStyle, className)}\n    style={style}\n    data-testid={testId}\n    {...rest}\n  >\n    {leading && <div className={cardHeaderLeadingStyle}>{leading}</div>}\n    <div className={cardHeaderTextStyle}>\n      {children ?? (\n        <>\n          {title && <h3 className={cardHeaderTitleStyle}>{title}</h3>}\n          {subtitle && <p className={cardHeaderSubtitleStyle}>{subtitle}</p>}\n        </>\n      )}\n    </div>\n    {trailing && <div className={cardHeaderTrailingStyle}>{trailing}</div>}\n  </div>\n);\n\nCardHeader.displayName = 'Card.Header';\n\nconst CardMedia: React.FC<CardMediaProps> = ({\n  src,\n  alt,\n  aspectRatio = 16 / 9,\n  className,\n  style,\n  testId,\n  children,\n  ref,\n  ...rest\n}) => (\n  <div\n    ref={ref}\n    className={cx(cardMediaStyle, className)}\n    style={{\n      ...assignInlineVars({ [cardMediaAspectVar]: String(aspectRatio) }),\n      ...style,\n    }}\n    data-testid={testId}\n    {...rest}\n  >\n    {src ? (\n      <img className={cardMediaImageStyle} src={src} alt={alt ?? ''} />\n    ) : (\n      children\n    )}\n  </div>\n);\n\nCardMedia.displayName = 'Card.Media';\n\nconst CardBody: React.FC<CardBodyProps> = ({\n  className,\n  style,\n  testId,\n  children,\n  ref,\n  ...rest\n}) => (\n  <div\n    ref={ref}\n    className={cx(cardBodyStyle, className)}\n    style={style}\n    data-testid={testId}\n    {...rest}\n  >\n    {children}\n  </div>\n);\n\nCardBody.displayName = 'Card.Body';\n\nconst CardFooter: React.FC<CardFooterProps> = ({\n  align = 'right',\n  className,\n  style,\n  testId,\n  children,\n  ref,\n  ...rest\n}) => (\n  <div\n    ref={ref}\n    className={cx(cardFooterStyle({ align }), className)}\n    style={style}\n    data-testid={testId}\n    {...rest}\n  >\n    {children}\n  </div>\n);\n\nCardFooter.displayName = 'Card.Footer';\n\nexport const Card = Object.assign(CardRoot, {\n  Header: CardHeader,\n  Media: CardMedia,\n  Body: CardBody,\n  Footer: CardFooter,\n}) as CardComponent;\n"],"names":[],"mappings":";;;;;;;AAqCA;;;;;;;;;;;;;;;;;;;;AAoBG;AACH;;AAcE;AAEI;;AACA;;;;AAIF;;;;;;AAaK;AAgBT;AAEA;AAEA;AAgCA;AAEA;AAeM;AACA;AACD;AAYL;AAEA;AAmBA;AAEA;AAoBA;;AAGE;AACA;AACA;AACA;AACD;;"}

package/dist/esm/components/layout/Divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sources":["../../../../../../src/components/layout/Divider/Divider.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAWA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGF;;AAC6B;;AACM;AACjC;AACF;AAEA;;;;;;;;;;;;;AAaG;AACI;AAYH;AACA;;;AAKA;;;AAgBA;AAWF;AAGF;;"}
+{"version":3,"file":"Divider.js","sources":["src/components/layout/Divider/Divider.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport {\n  dividerLabelTextStyle,\n  dividerRecipe,\n  dividerWithLabelRecipe,\n} from './Divider.css';\n\nimport type { DividerProps, DividerSpacing } from './Divider.types';\n\nconst SPACING_MAP: Record<number, string> = {\n  0: '0',\n  1: 'var(--etui-spacing-xs)',\n  2: 'var(--etui-spacing-sm)',\n  3: 'var(--etui-spacing-md)',\n  4: 'var(--etui-spacing-lg)',\n  5: 'var(--etui-spacing-xl)',\n  6: 'var(--etui-spacing-xxl)',\n  7: 'var(--etui-spacing-xxxl)',\n};\n\nfunction resolveSpacing(spacing: DividerSpacing | string | undefined): string {\n  if (spacing === undefined) return '0';\n  if (typeof spacing === 'number') return SPACING_MAP[spacing] ?? '0';\n  return spacing;\n}\n\n/**\n * Thin horizontal or vertical rule, optionally with an inline label.\n *\n * @example\n * ```tsx\n * <Stack>\n *   <SectionA />\n *   <Divider spacing={3} />\n *   <SectionB />\n * </Stack>\n *\n * <Divider label=\"Advanced\" />\n * ```\n */\nexport const Divider = /*#__PURE__*/ React.memo<DividerProps>(\n  ({\n    orientation = 'horizontal',\n    variant = 'solid',\n    spacing = 0,\n    label,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const spacingValue = resolveSpacing(spacing);\n    const marginStyle =\n      orientation === 'horizontal'\n        ? { marginTop: spacingValue, marginBottom: spacingValue }\n        : { marginLeft: spacingValue, marginRight: spacingValue };\n\n    if (label && orientation === 'horizontal') {\n      return (\n        <div\n          ref={ref}\n          role=\"separator\"\n          aria-orientation=\"horizontal\"\n          className={cx(dividerWithLabelRecipe({ variant }), className)}\n          style={{ ...marginStyle, ...style }}\n          data-testid={testId}\n          {...rest}\n        >\n          <span className={dividerLabelTextStyle}>{label}</span>\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"separator\"\n        aria-orientation={orientation}\n        className={cx(dividerRecipe({ orientation, variant }), className)}\n        style={{ ...marginStyle, ...style }}\n        data-testid={testId}\n        {...rest}\n      />\n    );\n  }\n);\n\nDivider.displayName = 'Divider';\n"],"names":[],"mappings":";;;;;;AAcA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGF;;AAC6B;;AACM;AACjC;AACF;AAEA;;;;;;;;;;;;;AAaG;AACI;AAYH;AACA;;;AAKA;;;AAgBA;AAWF;AAGF;;"}

package/dist/esm/components/layout/Flex/Flex.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { cx } from '../../../utils/cx.js';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { cx } from '../../../utils/cx.js';
 import { basisVar, shrinkVar, growVar, gapVar, flexRecipe } from './Flex.css.js';
 
 /** Base spacing unit in px */

package/dist/esm/components/layout/Flex/Flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","sources":["../../../../../../src/components/layout/Flex/Flex.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAkMA;AACA;AAEA;;AAEG;AACH;AACE;AACE;;AAEF;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DG;AACI;AA0BL;AAEA;AACE;;AAEE;AACA;;;;AAIA;AACI;AAED;;;AAGH;;AAEF;;;;AAKF;AAAQ;AACR;AAAQ;AACR;AAAQ;AACR;AAAQ;;;;;;;;;AAcD;AAWT;AAEA;;"}
+{"version":3,"file":"Flex.js","sources":["src/components/layout/Flex/Flex.tsx"],"sourcesContent":["'use client';\n\n// src/components/layout/Flex/Flex.tsx\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { flexRecipe, gapVar, growVar, shrinkVar, basisVar } from './Flex.css';\n\nimport type { BaseComponent } from '@/types/common';\nimport type { Prettify } from '@/types/utilities';\n\n/**\n * Flex direction options\n */\nexport type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';\n\n/**\n * Flex wrap options\n */\nexport type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';\n\n/**\n * Justify content options\n */\nexport type FlexJustify =\n  | 'flex-start'\n  | 'flex-end'\n  | 'center'\n  | 'space-between'\n  | 'space-around'\n  | 'space-evenly';\n\n/**\n * Align items options\n */\nexport type FlexAlign =\n  | 'flex-start'\n  | 'flex-end'\n  | 'center'\n  | 'stretch'\n  | 'baseline';\n\n/**\n * Align content options (for wrapped flex containers)\n */\nexport type FlexAlignContent =\n  | 'flex-start'\n  | 'flex-end'\n  | 'center'\n  | 'stretch'\n  | 'space-between'\n  | 'space-around';\n\n/**\n * Spacing multiplier (0-8) based on theme spacing unit\n */\nexport type FlexSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\n\nexport interface FlexBaseProps extends BaseComponent {\n  /**\n   * Flex content - any React elements\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Flex direction - controls main axis orientation\n   * - `row`: Left to right (default)\n   * - `row-reverse`: Right to left\n   * - `column`: Top to bottom\n   * - `column-reverse`: Bottom to top\n   * @default \"row\"\n   */\n  direction?: FlexDirection | undefined;\n\n  /**\n   * Responsive flex direction\n   * Allows different directions at different breakpoints\n   */\n  sm?: FlexDirection | undefined;\n  md?: FlexDirection | undefined;\n  lg?: FlexDirection | undefined;\n  xl?: FlexDirection | undefined;\n\n  /**\n   * Flex wrap behavior\n   * - `nowrap`: Items stay on one line (default)\n   * - `wrap`: Items wrap to new lines as needed\n   * - `wrap-reverse`: Items wrap in reverse order\n   * @default \"nowrap\"\n   */\n  wrap?: FlexWrap | undefined;\n\n  /**\n   * Justify content - distributes space along main axis\n   * - `flex-start`: Items packed to start (default)\n   * - `flex-end`: Items packed to end\n   * - `center`: Items centered\n   * - `space-between`: Even space between items\n   * - `space-around`: Even space around items\n   * - `space-evenly`: Equal space between and around items\n   * @default \"flex-start\"\n   */\n  justify?: FlexJustify | undefined;\n\n  /**\n   * Align items - aligns items along cross axis\n   * - `stretch`: Items stretch to fill container (default)\n   * - `flex-start`: Items align to start of cross axis\n   * - `flex-end`: Items align to end of cross axis\n   * - `center`: Items centered on cross axis\n   * - `baseline`: Items align to text baseline\n   * @default \"stretch\"\n   */\n  align?: FlexAlign | undefined;\n\n  /**\n   * Align content - aligns wrapped lines\n   * Only applies when wrap is enabled and there are multiple lines\n   * - `stretch`: Lines stretch to fill container (default)\n   * - `flex-start`: Lines packed to start\n   * - `flex-end`: Lines packed to end\n   * - `center`: Lines centered\n   * - `space-between`: Even space between lines\n   * - `space-around`: Even space around lines\n   * @default \"stretch\"\n   */\n  alignContent?: FlexAlignContent | undefined;\n\n  /**\n   * Gap between flex items (multiplier of base spacing unit)\n   * - `0`: No gap (0px)\n   * - `1`: 1x base unit (4px)\n   * - `2`: 2x base unit (8px)\n   * - `3`: 3x base unit (12px)\n   * - `4`: 4x base unit (16px)\n   * @default 0\n   */\n  gap?: FlexSpacing | undefined;\n\n  /**\n   * Custom gap override (CSS value)\n   * Overrides gap prop if provided\n   * @example \"16px\", \"1rem\", \"2rem 1rem\"\n   */\n  customGap?: string | number | undefined;\n\n  /**\n   * Flex grow - how much item should grow\n   * @default 0\n   */\n  grow?: number | undefined;\n\n  /**\n   * Flex shrink - how much item should shrink\n   * @default 1\n   */\n  shrink?: number | undefined;\n\n  /**\n   * Flex basis - initial size before free space is distributed\n   * @example \"auto\", \"100px\", \"50%\", \"0\"\n   * @default \"auto\"\n   */\n  basis?: string | number | undefined;\n\n  /**\n   * Whether this flex container should fill available width\n   * @default false\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Whether this flex container should fill available height\n   * @default false\n   */\n  fullHeight?: boolean;\n\n  /**\n   * Minimum height for the flex container\n   * @example \"100vh\", \"300px\", \"50%\"\n   */\n  minHeight?: string | number | undefined;\n\n  /**\n   * Maximum width for the flex container\n   * @example \"1200px\", \"100%\", \"50vw\"\n   */\n  maxWidth?: string | number | undefined;\n}\n\n/**\n * Props for the Flex component with prettified type for better IntelliSense\n */\nexport type FlexProps = Prettify<FlexBaseProps>;\n\n/** Base spacing unit in px */\nconst SPACING_UNIT = 4;\n\n/**\n * Calculate gap value based on spacing multiplier\n */\nconst getGapValue = (gap: FlexSpacing, customGap?: string | number): string => {\n  if (customGap !== undefined) {\n    return typeof customGap === 'number' ? `${customGap}px` : customGap;\n  }\n  return `${gap * SPACING_UNIT}px`;\n};\n\n/**\n * A comprehensive flexbox component providing full control over flex properties.\n *\n * More powerful than Stack for complex layouts requiring precise flexbox control.\n * Supports all flexbox properties, responsive direction changes, and flexible sizing.\n * Perfect for complex layouts, navigation bars, form layouts, and sophisticated arrangements.\n *\n * @example\n * ```tsx\n * // Basic horizontal flex\n * <Flex justify=\"space-between\" align=\"center\">\n *   <div>Left content</div>\n *   <div>Right content</div>\n * </Flex>\n *\n * // Vertical stack with gap\n * <Flex direction=\"column\" gap={3}>\n *   <Card>Item 1</Card>\n *   <Card>Item 2</Card>\n *   <Card>Item 3</Card>\n * </Flex>\n *\n * // Responsive navigation\n * <Flex\n *   direction=\"column\"\n *   md=\"row\"\n *   justify=\"space-between\"\n *   align=\"center\"\n *   gap={2}\n * >\n *   <Logo />\n *   <Navigation />\n *   <UserMenu />\n * </Flex>\n *\n * // Flexible form layout\n * <Flex direction=\"column\" gap={2} maxWidth=\"400px\">\n *   <Input label=\"Email\" />\n *   <Input label=\"Password\" />\n *   <Flex justify=\"space-between\" gap={2}>\n *     <Button fullWidth variant=\"ghost\">Cancel</Button>\n *     <Button fullWidth variant=\"filled\">Login</Button>\n *   </Flex>\n * </Flex>\n *\n * // Card grid with wrapping\n * <Flex wrap=\"wrap\" gap={3} justify=\"center\">\n *   <Card basis=\"300px\">Card 1</Card>\n *   <Card basis=\"300px\">Card 2</Card>\n *   <Card basis=\"300px\">Card 3</Card>\n * </Flex>\n *\n * // Complex layout with nesting\n * <Flex direction=\"column\" fullHeight>\n *   <Header />\n *   <Flex grow={1}>\n *     <Sidebar basis=\"200px\" />\n *     <MainContent grow={1} />\n *   </Flex>\n *   <Footer />\n * </Flex>\n * ```\n */\nexport const Flex: React.FC<FlexProps> = ({\n  children,\n  direction = 'row',\n  sm,\n  md,\n  lg,\n  xl,\n  wrap = 'nowrap',\n  justify = 'flex-start',\n  align = 'stretch',\n  alignContent = 'stretch',\n  gap = 0,\n  customGap,\n  grow = 0,\n  shrink = 1,\n  basis = 'auto',\n  fullWidth = false,\n  fullHeight = false,\n  minHeight,\n  maxWidth,\n  className,\n  testId,\n  style,\n  ref,\n  ...htmlProps\n}) => {\n  const basisValue = typeof basis === 'number' ? `${basis}px` : basis;\n\n  const dynamicStyle: React.CSSProperties = {\n    ...assignInlineVars({\n      [gapVar]: getGapValue(gap, customGap),\n      [growVar]: String(grow),\n      [shrinkVar]: String(shrink),\n      [basisVar]: basisValue,\n    }),\n    ...(minHeight !== undefined\n      ? {\n          minHeight:\n            typeof minHeight === 'number' ? `${minHeight}px` : minHeight,\n        }\n      : undefined),\n    ...(maxWidth !== undefined\n      ? { maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth }\n      : undefined),\n    ...style,\n  };\n\n  // Build data attributes for responsive direction overrides\n  const dataAttrs: Record<string, string> = {};\n  if (sm) dataAttrs['data-sm-dir'] = sm;\n  if (md) dataAttrs['data-md-dir'] = md;\n  if (lg) dataAttrs['data-lg-dir'] = lg;\n  if (xl) dataAttrs['data-xl-dir'] = xl;\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        flexRecipe({\n          direction,\n          wrap,\n          justify,\n          align,\n          alignContent,\n          fullWidth: fullWidth || undefined,\n          fullHeight: fullHeight || undefined,\n        }),\n        className\n      )}\n      data-testid={testId}\n      style={dynamicStyle}\n      {...dataAttrs}\n      {...htmlProps}\n    >\n      {children}\n    </div>\n  );\n};\n\nFlex.displayName = 'Flex';\n"],"names":[],"mappings":";;;;;;AAqMA;AACA;AAEA;;AAEG;AACH;AACE;AACE;;AAEF;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DG;AACI;AA0BL;AAEA;AACE;;AAEE;AACA;;;;AAIA;AACI;AAED;;;AAGH;;AAEF;;;;AAKF;AAAQ;AACR;AAAQ;AACR;AAAQ;AACR;AAAQ;;;;;;;;;AAcD;AAWT;AAEA;;"}

package/dist/esm/components/layout/Grid/Grid.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { cx } from '../../../utils/cx.js';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { cx } from '../../../utils/cx.js';
 import { columnsVar, gapVar, gridContainer, gridItem } from './Grid.css.js';
 
 /** Base spacing unit in px */

package/dist/esm/components/layout/Grid/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sources":["../../../../../../src/components/layout/Grid/Grid.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAoGA;AACA;AAEA;;AAEG;AACH;AAIE;AACE;;AAEF;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCG;;;AAoBC;AACE;;AAEE;;AAEF;;;;;;;;;;;;;;;;AA2BJ;;AAEI;;AAEF;;AAGF;AAYF;AAEA;;"}
+{"version":3,"file":"Grid.js","sources":["src/components/layout/Grid/Grid.tsx"],"sourcesContent":["'use client';\n\n// src/components/layout/Grid/Grid.tsx\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { gridContainer, gridItem, gapVar, columnsVar } from './Grid.css';\n\nimport type { BaseComponent } from '@/types/common';\nimport type { Prettify } from '@/types/utilities';\n\n/**\n * Grid size variants from 1-12 columns or auto-sizing\n */\nexport type GridSize =\n  | 1\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6\n  | 7\n  | 8\n  | 9\n  | 10\n  | 11\n  | 12\n  | 'auto';\n\n/**\n * Spacing multiplier (0-8) based on theme spacing unit\n * 0 = no spacing, 1 = 1x base unit, 2 = 2x base unit, etc.\n */\nexport type GridSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\n\nexport interface GridBaseProps extends Omit<BaseComponent, 'children'> {\n  /**\n   * Grid content - other Grid components or any React elements\n   */\n  children: React.ReactNode;\n\n  /**\n   * Whether this Grid acts as a container (enables CSS Grid)\n   * When true, this Grid becomes a container for child Grid items\n   * @default false\n   */\n  container?: boolean;\n\n  /**\n   * Grid item size (1-12 columns)\n   * Only used when this Grid is a child of a container Grid\n   * @example 6 // Takes 6 out of 12 columns (50% width)\n   */\n  size?: GridSize | undefined;\n\n  /**\n   * Responsive grid sizes\n   * Allows different column spans at different breakpoints\n   * @example xs={12} sm={6} md={4} // Full width on mobile, half on tablet, third on desktop\n   */\n  xs?: GridSize | undefined;\n  sm?: GridSize | undefined;\n  md?: GridSize | undefined;\n  lg?: GridSize | undefined;\n  xl?: GridSize | undefined;\n\n  /**\n   * Spacing between grid items (multiplier of base spacing unit)\n   * Only applies when container=true\n   * - `0`: No spacing (0px)\n   * - `1`: 1x base unit (4px)\n   * - `2`: 2x base unit (8px)\n   * - `3`: 3x base unit (12px)\n   * - `4`: 4x base unit (16px)\n   * @default 2\n   */\n  spacing?: GridSpacing | undefined;\n\n  /**\n   * Total number of columns in the grid\n   * Only applies when container=true\n   * @default 12\n   */\n  columns?: number | undefined;\n\n  /**\n   * Custom gap override (CSS value)\n   * Overrides spacing prop if provided\n   * @example \"16px\", \"1rem\", \"2\"\n   */\n  gap?: string | number | undefined;\n}\n\n/**\n * Props for the Grid component with prettified type for better IntelliSense\n */\nexport type GridProps = Prettify<GridBaseProps>;\n\n/** Base spacing unit in px */\nconst SPACING_UNIT = 4;\n\n/**\n * Calculate gap value based on spacing multiplier\n */\nconst getGapValue = (\n  spacing: GridSpacing,\n  customGap?: string | number\n): string => {\n  if (customGap !== undefined) {\n    return typeof customGap === 'number' ? `${customGap}px` : customGap;\n  }\n  return `${spacing * SPACING_UNIT}px`;\n};\n\n/**\n * A flexible 12-column grid system component for creating responsive layouts.\n *\n * Supports both container and item modes. Container grids create the grid layout,\n * while item grids define how much space each child should occupy.\n * Built on CSS Grid for modern, flexible layouts.\n *\n * @example\n * ```tsx\n * // Basic two-column layout\n * <Grid container spacing=\"md\">\n *   <Grid size={6}>Left content</Grid>\n *   <Grid size={6}>Right content</Grid>\n * </Grid>\n *\n * // Responsive three-column layout\n * <Grid container spacing=\"lg\">\n *   <Grid xs={12} sm={6} md={4}>Card 1</Grid>\n *   <Grid xs={12} sm={6} md={4}>Card 2</Grid>\n *   <Grid xs={12} sm={12} md={4}>Card 3</Grid>\n * </Grid>\n *\n * // Nested grids\n * <Grid container spacing=\"md\">\n *   <Grid size={8}>\n *     <Grid container spacing=\"sm\">\n *       <Grid size={6}>Nested left</Grid>\n *       <Grid size={6}>Nested right</Grid>\n *     </Grid>\n *   </Grid>\n *   <Grid size={4}>Sidebar</Grid>\n * </Grid>\n *\n * // Custom gap\n * <Grid container gap=\"2rem\">\n *   <Grid size={4}>Item 1</Grid>\n *   <Grid size={4}>Item 2</Grid>\n *   <Grid size={4}>Item 3</Grid>\n * </Grid>\n * ```\n */\nexport const Grid: React.FC<GridProps> = ({\n  children,\n  container = false,\n  size,\n  xs,\n  sm,\n  md,\n  lg,\n  xl,\n  spacing = 2,\n  columns = 12,\n  gap,\n  className,\n  testId,\n  style,\n  ref,\n  ...htmlProps\n}) => {\n  if (container) {\n    const containerStyle: React.CSSProperties = {\n      ...assignInlineVars({\n        [gapVar]: getGapValue(spacing, gap),\n        [columnsVar]: String(columns),\n      }),\n      ...style,\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cx(gridContainer, className)}\n        data-testid={testId}\n        style={containerStyle}\n        {...htmlProps}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  // Item mode — use data attributes for responsive grid-column spans\n  const dataAttrs: Record<string, string> = {};\n  if (size !== undefined) {\n    // Base size applied via inline style for simplicity\n  }\n  if (xs !== undefined) dataAttrs['data-xs'] = String(xs);\n  if (sm !== undefined) dataAttrs['data-sm'] = String(sm);\n  if (md !== undefined) dataAttrs['data-md'] = String(md);\n  if (lg !== undefined) dataAttrs['data-lg'] = String(lg);\n  if (xl !== undefined) dataAttrs['data-xl'] = String(xl);\n\n  const itemStyle: React.CSSProperties = {\n    ...(size !== undefined\n      ? { gridColumn: `span ${size === 'auto' ? 'auto' : size}` }\n      : undefined),\n    ...style,\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={cx(gridItem, className)}\n      data-testid={testId}\n      style={itemStyle}\n      {...dataAttrs}\n      {...htmlProps}\n    >\n      {children}\n    </div>\n  );\n};\n\nGrid.displayName = 'Grid';\n"],"names":[],"mappings":";;;;;;AAoGA;AACA;AAEA;;AAEG;AACH;AAIE;AACE;;AAEF;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCG;;;AAoBC;AACE;;AAEE;;AAEF;;;;;;;;;;;;;;;;AA2BJ;;AAEI;;AAEF;;AAGF;AAYF;AAEA;;"}

package/dist/esm/components/layout/ListItem/ListItem.js

@@ -28,7 +28,7 @@ const ListItem = /*#__PURE__*/ React.memo(({ onClick, leading, trailing, selecte
             return;
         if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();
-            onClick?.(event);
+            onClick(event);
         }
     }, [clickable, onClick]);
     return (jsxs("div", { ref: ref, role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, "aria-disabled": disabled || undefined, "data-disabled": disabled ? 'true' : 'false', "data-selected": selected ? 'true' : undefined, "data-active": active ? 'true' : undefined, onClick: clickable ? onClick : undefined, onKeyDown: handleKeyDown, className: cx(listItemRecipe({

package/dist/esm/components/layout/ListItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../../../../../src/components/layout/ListItem/ListItem.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAYA;;;;;;;;;;;;;;;;AAgBG;;;AAmBC;AAEI;;AACA;;AAEE;;AAIJ;AAIF;;;;;;AAkBO;AAYT;AAGF;;"}
+{"version":3,"file":"ListItem.js","sources":["src/components/layout/ListItem/ListItem.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback } from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport {\n  listItemContentStyle,\n  listItemLeadingStyle,\n  listItemRecipe,\n  listItemTrailingStyle,\n} from './ListItem.css';\n\nimport type { ListItemProps } from './ListItem.types';\n\n/**\n * Reusable list row with leading / trailing slots and hover/selected/active\n * states. Becomes keyboard-activatable when `onClick` is provided (Enter\n * and Space trigger the handler).\n *\n * @example\n * ```tsx\n * <ListItem\n *   leading={<FileIcon />}\n *   trailing={<Badge color=\"success\">done</Badge>}\n *   selected={id === activeId}\n *   onClick={() => select(id)}\n * >\n *   scene.blend\n * </ListItem>\n * ```\n */\nexport const ListItem = /*#__PURE__*/ React.memo<ListItemProps>(\n  ({\n    onClick,\n    leading,\n    trailing,\n    selected = false,\n    active = false,\n    disabled = false,\n    density = 'comfortable',\n    children,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const clickable = !!onClick && !disabled;\n\n    const handleKeyDown = useCallback(\n      (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (!clickable) return;\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault();\n          onClick(event as unknown as React.MouseEvent<HTMLDivElement>);\n        }\n      },\n      [clickable, onClick]\n    );\n\n    return (\n      <div\n        ref={ref}\n        role={clickable ? 'button' : undefined}\n        tabIndex={clickable ? 0 : undefined}\n        aria-disabled={disabled || undefined}\n        data-disabled={disabled ? 'true' : 'false'}\n        data-selected={selected ? 'true' : undefined}\n        data-active={active ? 'true' : undefined}\n        onClick={clickable ? onClick : undefined}\n        onKeyDown={handleKeyDown}\n        className={cx(\n          listItemRecipe({\n            density,\n            clickable: clickable || undefined,\n            selected: selected || undefined,\n            active: active || undefined,\n            disabled: disabled || undefined,\n          }),\n          className\n        )}\n        style={style}\n        data-testid={testId}\n        {...rest}\n      >\n        {leading && <span className={listItemLeadingStyle}>{leading}</span>}\n        <span className={listItemContentStyle}>{children}</span>\n        {trailing && <span className={listItemTrailingStyle}>{trailing}</span>}\n      </div>\n    );\n  }\n);\n\nListItem.displayName = 'ListItem';\n"],"names":[],"mappings":";;;;;;AAeA;;;;;;;;;;;;;;;;AAgBG;;;AAmBC;AAEI;;AACA;;;;AAIF;AAIF;;;;;;AAkBO;AAYT;AAGF;;"}

package/dist/esm/components/layout/PageHeader/PageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.js","sources":["../../../../../../src/components/layout/PageHeader/PageHeader.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAeA;;;;;;;;;;;;;;;AAeG;AACI;;AAsCL;AAGF;;"}
+{"version":3,"file":"PageHeader.js","sources":["src/components/layout/PageHeader/PageHeader.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport {\n  pageHeaderActionsStyle,\n  pageHeaderBreadcrumbsStyle,\n  pageHeaderIconStyle,\n  pageHeaderRecipe,\n  pageHeaderSubtitleStyle,\n  pageHeaderTitleColumnStyle,\n  pageHeaderTitleRecipe,\n} from './PageHeader.css';\n\nimport type { PageHeaderProps } from './PageHeader.types';\n\n/**\n * Structural page/view header with optional breadcrumbs, subtitle,\n * leading icon, and right-aligned actions.\n *\n * Renders a semantic `<header>` element.\n *\n * @example\n * ```tsx\n * <PageHeader\n *   icon={<FolderIcon size=\"lg\" />}\n *   title=\"Project Assets\"\n *   subtitle=\"124 items\"\n *   actions={<Button variant=\"filled\">Upload</Button>}\n * />\n * ```\n */\nexport const PageHeader = /*#__PURE__*/ React.memo<PageHeaderProps>(\n  ({\n    icon,\n    title,\n    subtitle,\n    actions,\n    breadcrumbs,\n    size = 'md',\n    bordered = true,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    return (\n      <header\n        ref={ref}\n        className={cx(pageHeaderRecipe({ size, bordered }), className)}\n        style={style}\n        data-testid={testId}\n        {...rest}\n      >\n        {icon && <span className={pageHeaderIconStyle}>{icon}</span>}\n\n        <div className={pageHeaderTitleColumnStyle}>\n          {breadcrumbs && (\n            <div className={pageHeaderBreadcrumbsStyle}>{breadcrumbs}</div>\n          )}\n          <h1 className={pageHeaderTitleRecipe({ size })}>{title}</h1>\n          {subtitle && (\n            <div className={pageHeaderSubtitleStyle}>{subtitle}</div>\n          )}\n        </div>\n\n        {actions && <div className={pageHeaderActionsStyle}>{actions}</div>}\n      </header>\n    );\n  }\n);\n\nPageHeader.displayName = 'PageHeader';\n"],"names":[],"mappings":";;;;;;AAkBA;;;;;;;;;;;;;;;AAeG;AACI;;AAsCL;AAGF;;"}

package/dist/esm/components/layout/PanelSurface/PanelSurface.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { useMemo, createContext, useContext } from 'react';
+import { vars } from '../../../theme/contract.css.js';
 import { cx } from '../../../utils/cx.js';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { backgroundVar, rootBordered, rootNoBorder, rootStyle, footerRecipe, bodyScrollable, bodyHidden, bodyStyle, headerActions, headerRecipe } from './PanelSurface.css.js';
-import { vars } from '../../../theme/contract.css.js';
 
 const PanelSurfaceContext = 
 /*#__PURE__*/ createContext({
@@ -17,7 +17,7 @@ const PanelSurfaceHeader = ({ children, actions, className, style, testId, ref,
 };
 PanelSurfaceHeader.displayName = 'PanelSurface.Header';
 const PanelSurfaceBody = ({ children, scroll = false, padding = 0, className, style, testId, ref, ...rest }) => {
-    const resolvedPadding = typeof padding === 'number' ? `${padding}px` : String(padding);
+    const resolvedPadding = typeof padding === 'number' ? `${padding}px` : padding;
     const mergedStyle = {
         padding: resolvedPadding,
         ...style,

package/dist/esm/components/layout/PanelSurface/PanelSurface.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelSurface.js","sources":["../../../../../../src/components/layout/PanelSurface/PanelSurface.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AA0BA;AACE;AACE;AACD;AAEH;AAEA;AASE;;AAcF;AAEA;AAEA;AAUE;AAGA;AACE;AACA;;AAGF;AAWF;AAEA;AAEA;AAQE;AAEA;AAWF;AAEA;AAEA;AAWE;AAEA;AACE;;;AAGA;;;AAoBJ;AAEA;AAEO;AACL;AACA;AACA;AACD;;"}
+{"version":3,"file":"PanelSurface.js","sources":["src/components/layout/PanelSurface/PanelSurface.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { createContext, useContext, useMemo } from 'react';\n\nimport { vars } from '@/theme/contract.css';\nimport { cx } from '@/utils/cx';\n\nimport {\n  rootStyle,\n  rootBordered,\n  rootNoBorder,\n  backgroundVar,\n  headerRecipe,\n  headerActions,\n  bodyStyle,\n  bodyScrollable,\n  bodyHidden,\n  footerRecipe,\n} from './PanelSurface.css';\n\nimport type {\n  PanelSurfaceBodyProps,\n  PanelSurfaceContextValue,\n  PanelSurfaceFooterProps,\n  PanelSurfaceHeaderProps,\n  PanelSurfaceProps,\n} from './PanelSurface.types';\n\nconst PanelSurfaceContext =\n  /*#__PURE__*/ createContext<PanelSurfaceContextValue>({\n    size: 'md',\n  });\n\nconst usePanelSurface = () => useContext(PanelSurfaceContext);\n\nconst PanelSurfaceHeader: React.FC<PanelSurfaceHeaderProps> = ({\n  children,\n  actions,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const { size } = usePanelSurface();\n\n  return (\n    <div\n      ref={ref}\n      className={cx(headerRecipe({ size }), className)}\n      style={style}\n      data-testid={testId}\n      {...rest}\n    >\n      <span>{children}</span>\n      {actions ? <div className={headerActions}>{actions}</div> : null}\n    </div>\n  );\n};\n\nPanelSurfaceHeader.displayName = 'PanelSurface.Header';\n\nconst PanelSurfaceBody: React.FC<PanelSurfaceBodyProps> = ({\n  children,\n  scroll = false,\n  padding = 0,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const resolvedPadding =\n    typeof padding === 'number' ? `${padding}px` : padding;\n\n  const mergedStyle: React.CSSProperties = {\n    padding: resolvedPadding,\n    ...style,\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={cx(bodyStyle, scroll ? bodyScrollable : bodyHidden, className)}\n      style={mergedStyle}\n      data-testid={testId}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n\nPanelSurfaceBody.displayName = 'PanelSurface.Body';\n\nconst PanelSurfaceFooter: React.FC<PanelSurfaceFooterProps> = ({\n  children,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const { size } = usePanelSurface();\n\n  return (\n    <div\n      ref={ref}\n      className={cx(footerRecipe({ size }), className)}\n      style={style}\n      data-testid={testId}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n\nPanelSurfaceFooter.displayName = 'PanelSurface.Footer';\n\nconst PanelSurfaceRoot: React.FC<PanelSurfaceProps> = ({\n  children,\n  size = 'md',\n  bordered = true,\n  background,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const contextValue = useMemo(() => ({ size }), [size]);\n\n  const mergedStyle: React.CSSProperties = {\n    ...assignInlineVars({\n      [backgroundVar]: background ?? vars.colors.background.secondary,\n    }),\n    ...style,\n  };\n\n  return (\n    <PanelSurfaceContext.Provider value={contextValue}>\n      <div\n        ref={ref}\n        className={cx(\n          rootStyle,\n          bordered ? rootBordered : rootNoBorder,\n          className\n        )}\n        style={mergedStyle}\n        data-testid={testId}\n        {...rest}\n      >\n        {children}\n      </div>\n    </PanelSurfaceContext.Provider>\n  );\n};\n\nPanelSurfaceRoot.displayName = 'PanelSurface';\n\nexport const PanelSurface = /*#__PURE__*/ Object.assign(PanelSurfaceRoot, {\n  Header: PanelSurfaceHeader,\n  Body: PanelSurfaceBody,\n  Footer: PanelSurfaceFooter,\n});\n"],"names":[],"mappings":";;;;;;;;AA6BA;AACE;AACE;AACD;AAEH;AAEA;AASE;;AAcF;AAEA;AAEA;AAUE;AAGA;AACE;AACA;;AAGF;AAWF;AAEA;AAEA;AAQE;AAEA;AAWF;AAEA;AAEA;AAWE;AAEA;AACE;;;AAGA;;;AAoBJ;AAEA;AAEO;AACL;AACA;AACA;AACD;;"}

package/dist/esm/components/layout/ScrollArea/ScrollArea.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { useId, useRef, useState, useCallback, useEffect } from 'react';
-import { cx } from '../../../utils/cx.js';
 import { useMergedRef } from '../../../hooks/useMergedRef/useMergedRef.js';
 import { useResizeObserver } from '../../../hooks/useResizeObserver/useResizeObserver.js';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { cx } from '../../../utils/cx.js';
 import { fadeMaskSizeVar, scrollbarPaddingVar, scrollbarWidthVar, viewportRecipe, fadeMaskVisible, fadeMaskHiddenStyle, fadeMaskTop, fadeMaskBase, fadeMaskBottom, fadeMaskLeft, fadeMaskRight, thumbDragging, thumbVertical, thumbBase, scrollbarVisible, scrollbarHidden, scrollbarVertical, thumbHorizontal, scrollbarHorizontal, rootAutoFill, rootStyle } from './ScrollArea.css.js';
 
 // --- Component ---
@@ -19,11 +19,19 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
     const [hThumbOffset, setHThumbOffset] = useState(0);
     const [hasVOverflow, setHasVOverflow] = useState(false);
     const [hasHOverflow, setHasHOverflow] = useState(false);
+    // Scroll position as a 0–100 percentage, exposed via aria-valuenow. Kept in
+    // state (updated in recalculate) so it stays reactive instead of being read
+    // from the viewport ref during render.
+    const [vScrollPercent, setVScrollPercent] = useState(0);
+    const [hScrollPercent, setHScrollPercent] = useState(0);
     // Visibility state
     const [scrollbarVisibleState, setScrollbarVisibleState] = useState(scrollbarVisibility === 'always');
     const hideTimerRef = useRef(null);
     const [isDragging, setIsDragging] = useState(false);
+    // Ref drives synchronous reads in the move handler; the state mirror is used
+    // for the thumb's dragging class during render.
     const dragAxisRef = useRef(null);
+    const [dragAxis, setDragAxis] = useState(null);
     const dragStartRef = useRef({ pointerPos: 0, scrollPos: 0 });
     // Fade mask state
     const [atTop, setAtTop] = useState(true);
@@ -41,12 +49,13 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
             const ratio = vp.clientHeight / vp.scrollHeight;
             const overflow = ratio < 1;
             setHasVOverflow(overflow);
+            const maxScroll = vp.scrollHeight - vp.clientHeight;
+            const scrollRatio = maxScroll > 0 ? vp.scrollTop / maxScroll : 0;
+            setVScrollPercent(Math.round(scrollRatio * 100));
             if (overflow) {
                 const trackHeight = vp.clientHeight - scrollbarPadding * 2;
                 const thumbH = Math.max(minThumbLength, ratio * trackHeight);
                 setVThumbSize(thumbH);
-                const maxScroll = vp.scrollHeight - vp.clientHeight;
-                const scrollRatio = maxScroll > 0 ? vp.scrollTop / maxScroll : 0;
                 setVThumbOffset(scrollRatio * (trackHeight - thumbH));
             }
         }
@@ -54,12 +63,13 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
             const ratio = vp.clientWidth / vp.scrollWidth;
             const overflow = ratio < 1;
             setHasHOverflow(overflow);
+            const maxScroll = vp.scrollWidth - vp.clientWidth;
+            const scrollRatio = maxScroll > 0 ? vp.scrollLeft / maxScroll : 0;
+            setHScrollPercent(Math.round(scrollRatio * 100));
             if (overflow) {
                 const trackWidth = vp.clientWidth - scrollbarPadding * 2;
                 const thumbW = Math.max(minThumbLength, ratio * trackWidth);
                 setHThumbSize(thumbW);
-                const maxScroll = vp.scrollWidth - vp.clientWidth;
-                const scrollRatio = maxScroll > 0 ? vp.scrollLeft / maxScroll : 0;
                 setHThumbOffset(scrollRatio * (trackWidth - thumbW));
             }
         }
@@ -131,6 +141,7 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
             return;
         setIsDragging(true);
         dragAxisRef.current = axis;
+        setDragAxis(axis);
         e.target.setPointerCapture(e.pointerId);
         if (axis === 'vertical') {
             dragStartRef.current = {
@@ -170,6 +181,7 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
     const handleThumbPointerUp = useCallback(() => {
         setIsDragging(false);
         dragAxisRef.current = null;
+        setDragAxis(null);
     }, []);
     // Track click handler
     const handleTrackClick = useCallback((axis, e) => {
@@ -186,6 +198,53 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
             vp.scrollLeft = clickRatio * (vp.scrollWidth - vp.clientWidth);
         }
     }, []);
+    // Keyboard scrolling for the focusable scrollbar role, mirroring the native
+    // scrollbar interaction model (arrows step, PageUp/Down page, Home/End jump).
+    const handleTrackKeyDown = useCallback((axis, e) => {
+        const vp = viewportRef.current;
+        if (!vp)
+            return;
+        const step = 40;
+        const isVertical = axis === 'vertical';
+        const page = isVertical ? vp.clientHeight : vp.clientWidth;
+        const maxScroll = isVertical
+            ? vp.scrollHeight - vp.clientHeight
+            : vp.scrollWidth - vp.clientWidth;
+        const current = isVertical ? vp.scrollTop : vp.scrollLeft;
+        let next;
+        const decKey = isVertical ? 'ArrowUp' : 'ArrowLeft';
+        const incKey = isVertical ? 'ArrowDown' : 'ArrowRight';
+        switch (e.key) {
+            case decKey:
+                next = current - step;
+                break;
+            case incKey:
+                next = current + step;
+                break;
+            case 'PageUp':
+                next = current - page;
+                break;
+            case 'PageDown':
+                next = current + page;
+                break;
+            case 'Home':
+                next = 0;
+                break;
+            case 'End':
+                next = maxScroll;
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        const clamped = Math.max(0, Math.min(next, maxScroll));
+        if (isVertical) {
+            vp.scrollTop = clamped;
+        }
+        else {
+            vp.scrollLeft = clamped;
+        }
+    }, []);
     // Initial measurement once the viewport is mounted.
     useEffect(() => {
         if (viewportRef.current)
@@ -202,9 +261,13 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
         const child = vp.firstElementChild;
         if (!child || typeof ResizeObserver === 'undefined')
             return;
-        const ro = new ResizeObserver(() => recalculate());
+        const ro = new ResizeObserver(() => {
+            recalculate();
+        });
         ro.observe(child);
-        return () => ro.disconnect();
+        return () => {
+            ro.disconnect();
+        };
     }, [recalculate]);
     // Cleanup timer
     useEffect(() => {
@@ -234,25 +297,30 @@ const ScrollArea = ({ children, direction = 'vertical', scrollbarVisibility = 'a
             : undefined),
         ...style,
     };
-    return (jsxs("div", { className: cx(rootStyle, autoFill && rootAutoFill, className), style: rootInlineStyle, "data-testid": testId, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...rest, children: [jsx("div", { ref: setViewportRef, id: viewportId, role: "region", tabIndex: 0, className: viewportRecipe({ direction }), onScroll: handleScroll, children: children }), fadeMask && showV && (jsxs(Fragment, { children: [jsx("div", { className: cx(fadeMaskBase, fadeMaskTop, !atTop ? fadeMaskVisible : fadeMaskHiddenStyle), "data-testid": testId ? `${testId}-fade-top` : undefined }), jsx("div", { className: cx(fadeMaskBase, fadeMaskBottom, !atBottom ? fadeMaskVisible : fadeMaskHiddenStyle), "data-testid": testId ? `${testId}-fade-bottom` : undefined })] })), fadeMask && showH && (jsxs(Fragment, { children: [jsx("div", { className: cx(fadeMaskBase, fadeMaskLeft, !atLeft ? fadeMaskVisible : fadeMaskHiddenStyle) }), jsx("div", { className: cx(fadeMaskBase, fadeMaskRight, !atRight ? fadeMaskVisible : fadeMaskHiddenStyle) })] })), showV && hasVOverflow && (jsx("div", { className: cx(scrollbarVertical, isScrollbarShown ? scrollbarVisible : scrollbarHidden), role: "scrollbar", "aria-controls": viewportId, "aria-orientation": "vertical", "aria-valuenow": Math.round(viewportRef.current
-                    ? (viewportRef.current.scrollTop /
-                        Math.max(1, viewportRef.current.scrollHeight -
-                            viewportRef.current.clientHeight)) *
-                        100
-                    : 0), "aria-valuemin": 0, "aria-valuemax": 100, "data-testid": testId ? `${testId}-scrollbar-v` : undefined, onClick: e => handleTrackClick('vertical', e), children: jsx("div", { className: cx(thumbBase, thumbVertical, isDragging && dragAxisRef.current === 'vertical' && thumbDragging), style: {
+    return (jsxs("div", { className: cx(rootStyle, autoFill && rootAutoFill, className), style: rootInlineStyle, "data-testid": testId, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...rest, children: [jsx("div", { ref: setViewportRef, id: viewportId, role: "region", 
+                // The scroll viewport is intentionally focusable so keyboard users can
+                // scroll overflowing content with the arrow/page keys (native behavior
+                // of a focused scroll container).
+                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                tabIndex: 0, className: viewportRecipe({ direction }), onScroll: handleScroll, children: children }), fadeMask && showV && (jsxs(Fragment, { children: [jsx("div", { className: cx(fadeMaskBase, fadeMaskTop, !atTop ? fadeMaskVisible : fadeMaskHiddenStyle), "data-testid": testId ? `${testId}-fade-top` : undefined }), jsx("div", { className: cx(fadeMaskBase, fadeMaskBottom, !atBottom ? fadeMaskVisible : fadeMaskHiddenStyle), "data-testid": testId ? `${testId}-fade-bottom` : undefined })] })), fadeMask && showH && (jsxs(Fragment, { children: [jsx("div", { className: cx(fadeMaskBase, fadeMaskLeft, !atLeft ? fadeMaskVisible : fadeMaskHiddenStyle) }), jsx("div", { className: cx(fadeMaskBase, fadeMaskRight, !atRight ? fadeMaskVisible : fadeMaskHiddenStyle) })] })), showV && hasVOverflow && (jsx("div", { className: cx(scrollbarVertical, isScrollbarShown ? scrollbarVisible : scrollbarHidden), role: "scrollbar", tabIndex: 0, "aria-controls": viewportId, "aria-orientation": "vertical", "aria-valuenow": vScrollPercent, "aria-valuemin": 0, "aria-valuemax": 100, "data-testid": testId ? `${testId}-scrollbar-v` : undefined, onClick: e => {
+                    handleTrackClick('vertical', e);
+                }, onKeyDown: e => {
+                    handleTrackKeyDown('vertical', e);
+                }, children: jsx("div", { className: cx(thumbBase, thumbVertical, isDragging && dragAxis === 'vertical' && thumbDragging), style: {
                         height: `${vThumbSize}px`,
                         transform: `translateY(${vThumbOffset}px)`,
-                    }, onPointerDown: e => handleThumbPointerDown('vertical', e), onPointerMove: handleThumbPointerMove, onPointerUp: handleThumbPointerUp, "data-testid": testId ? `${testId}-thumb-v` : undefined }) })), showH && hasHOverflow && (jsx("div", { className: cx(scrollbarHorizontal, isScrollbarShown ? scrollbarVisible : scrollbarHidden), role: "scrollbar", "aria-controls": viewportId, "aria-orientation": "horizontal", "aria-valuenow": Math.round(viewportRef.current
-                    ? (viewportRef.current.scrollLeft /
-                        Math.max(1, viewportRef.current.scrollWidth -
-                            viewportRef.current.clientWidth)) *
-                        100
-                    : 0), "aria-valuemin": 0, "aria-valuemax": 100, "data-testid": testId ? `${testId}-scrollbar-h` : undefined, onClick: e => handleTrackClick('horizontal', e), children: jsx("div", { className: cx(thumbBase, thumbHorizontal, isDragging &&
-                        dragAxisRef.current === 'horizontal' &&
-                        thumbDragging), style: {
+                    }, onPointerDown: e => {
+                        handleThumbPointerDown('vertical', e);
+                    }, onPointerMove: handleThumbPointerMove, onPointerUp: handleThumbPointerUp, "data-testid": testId ? `${testId}-thumb-v` : undefined }) })), showH && hasHOverflow && (jsx("div", { className: cx(scrollbarHorizontal, isScrollbarShown ? scrollbarVisible : scrollbarHidden), role: "scrollbar", tabIndex: 0, "aria-controls": viewportId, "aria-orientation": "horizontal", "aria-valuenow": hScrollPercent, "aria-valuemin": 0, "aria-valuemax": 100, "data-testid": testId ? `${testId}-scrollbar-h` : undefined, onClick: e => {
+                    handleTrackClick('horizontal', e);
+                }, onKeyDown: e => {
+                    handleTrackKeyDown('horizontal', e);
+                }, children: jsx("div", { className: cx(thumbBase, thumbHorizontal, isDragging && dragAxis === 'horizontal' && thumbDragging), style: {
                         width: `${hThumbSize}px`,
                         transform: `translateX(${hThumbOffset}px)`,
-                    }, onPointerDown: e => handleThumbPointerDown('horizontal', e), onPointerMove: handleThumbPointerMove, onPointerUp: handleThumbPointerUp, "data-testid": testId ? `${testId}-thumb-h` : undefined }) }))] }));
+                    }, onPointerDown: e => {
+                        handleThumbPointerDown('horizontal', e);
+                    }, onPointerMove: handleThumbPointerMove, onPointerUp: handleThumbPointerUp, "data-testid": testId ? `${testId}-thumb-h` : undefined }) }))] }));
 };
 ScrollArea.displayName = 'ScrollArea';
 

package/dist/esm/components/layout/ScrollArea/ScrollArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.js","sources":["../../../../../../src/components/layout/ScrollArea/ScrollArea.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAgCA;AAEO;AAsBL;AACA;AACA;;;;;;;;;AAWA;AAGA;;AAEA;AACA;;;;;;;;;AAYA;AACE;AACA;;;;AAIE;;;;AAIE;;;AAGA;;;;;;AAOF;;;;AAIE;;;AAGA;;;;;;AAOF;AACA;AACA;AACA;;AAEJ;;AAGA;;;;;;AAKE;AACE;;AAGF;AACE;;;;;;;;AASJ;AAEI;AACA;AACA;AAEA;AACA;;;AAGA;;;AAGF;;AAKF;;;AAGI;AACE;AACA;;;AAGN;AAEA;AACE;;;AAEO;AACL;;;;;;;;;AAWA;AACA;;;AAGA;;AAGA;;;;;;;;;;;;;AAeJ;AAEI;;AACA;AACA;;AAEA;AAEA;;;;AAIE;;;;;;;AAMA;;;;AAON;;AAEE;;;;AAME;AACA;;;AAMA;AACE;AACA;;;AAEA;AACA;;;;;;AAQqB;AAC3B;AAEA;;;;;AAME;AACA;;AACA;AACA;;;AAGA;AACA;AACF;;;AAIE;AACE;AACE;;AAEJ;;;AAKF;AAGA;AACE;AACE;AACA;AACA;;;AAGA;AACI;AAED;;;AAGH;AACI;AACD;;AAEL;;;AA2EU;;AAIQ;;;;;AAmBT;AAqBC;;AAIQ;;AAGR;;;;;AAkBD;AAUb;AAEA;;"}
+{"version":3,"file":"ScrollArea.js","sources":["src/components/layout/ScrollArea/ScrollArea.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { useCallback, useEffect, useId, useRef, useState } from 'react';\n\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { useResizeObserver } from '@/hooks/useResizeObserver';\nimport { cx } from '@/utils/cx';\n\nimport {\n  rootStyle,\n  rootAutoFill,\n  viewportRecipe,\n  scrollbarVertical,\n  scrollbarHorizontal,\n  scrollbarVisible,\n  scrollbarHidden,\n  thumbBase,\n  thumbVertical,\n  thumbHorizontal,\n  thumbDragging,\n  fadeMaskBase,\n  fadeMaskVisible,\n  fadeMaskHiddenStyle,\n  fadeMaskTop,\n  fadeMaskBottom,\n  fadeMaskLeft,\n  fadeMaskRight,\n  scrollbarWidthVar,\n  scrollbarPaddingVar,\n  fadeMaskSizeVar,\n} from './ScrollArea.css';\n\nimport type { ScrollAreaProps } from './ScrollArea.types';\n\n// --- Component ---\n\nexport const ScrollArea: React.FC<ScrollAreaProps> = ({\n  children,\n  direction = 'vertical',\n  scrollbarVisibility = 'auto',\n  hideDelay = 1000,\n  scrollbarWidth = 6,\n  minThumbLength = 30,\n  scrollbarPadding = 2,\n  fadeMask = false,\n  fadeMaskHeight = 24,\n  maxHeight,\n  maxWidth,\n  autoFill = false,\n  onScroll,\n  onScrollTop,\n  onScrollBottom,\n  className,\n  style,\n  testId,\n  ref: externalRef,\n  ...rest\n}) => {\n  const autoId = useId();\n  const viewportId = `scrollarea-${autoId}-viewport`;\n  const viewportRef = useRef<HTMLDivElement | null>(null);\n\n  // Thumb state\n  const [vThumbSize, setVThumbSize] = useState(0);\n  const [vThumbOffset, setVThumbOffset] = useState(0);\n  const [hThumbSize, setHThumbSize] = useState(0);\n  const [hThumbOffset, setHThumbOffset] = useState(0);\n  const [hasVOverflow, setHasVOverflow] = useState(false);\n  const [hasHOverflow, setHasHOverflow] = useState(false);\n  // Scroll position as a 0–100 percentage, exposed via aria-valuenow. Kept in\n  // state (updated in recalculate) so it stays reactive instead of being read\n  // from the viewport ref during render.\n  const [vScrollPercent, setVScrollPercent] = useState(0);\n  const [hScrollPercent, setHScrollPercent] = useState(0);\n\n  // Visibility state\n  const [scrollbarVisibleState, setScrollbarVisibleState] = useState(\n    scrollbarVisibility === 'always'\n  );\n  const hideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const [isDragging, setIsDragging] = useState(false);\n  // Ref drives synchronous reads in the move handler; the state mirror is used\n  // for the thumb's dragging class during render.\n  const dragAxisRef = useRef<'vertical' | 'horizontal' | null>(null);\n  const [dragAxis, setDragAxis] = useState<'vertical' | 'horizontal' | null>(\n    null\n  );\n  const dragStartRef = useRef({ pointerPos: 0, scrollPos: 0 });\n\n  // Fade mask state\n  const [atTop, setAtTop] = useState(true);\n  const [atBottom, setAtBottom] = useState(false);\n  const [atLeft, setAtLeft] = useState(true);\n  const [atRight, setAtRight] = useState(false);\n\n  const showV = direction === 'vertical' || direction === 'both';\n  const showH = direction === 'horizontal' || direction === 'both';\n\n  // Recalculate thumb sizes\n  const recalculate = useCallback(() => {\n    const vp = viewportRef.current;\n    if (!vp) return;\n\n    if (showV) {\n      const ratio = vp.clientHeight / vp.scrollHeight;\n      const overflow = ratio < 1;\n      setHasVOverflow(overflow);\n      const maxScroll = vp.scrollHeight - vp.clientHeight;\n      const scrollRatio = maxScroll > 0 ? vp.scrollTop / maxScroll : 0;\n      setVScrollPercent(Math.round(scrollRatio * 100));\n      if (overflow) {\n        const trackHeight = vp.clientHeight - scrollbarPadding * 2;\n        const thumbH = Math.max(minThumbLength, ratio * trackHeight);\n        setVThumbSize(thumbH);\n        setVThumbOffset(scrollRatio * (trackHeight - thumbH));\n      }\n    }\n\n    if (showH) {\n      const ratio = vp.clientWidth / vp.scrollWidth;\n      const overflow = ratio < 1;\n      setHasHOverflow(overflow);\n      const maxScroll = vp.scrollWidth - vp.clientWidth;\n      const scrollRatio = maxScroll > 0 ? vp.scrollLeft / maxScroll : 0;\n      setHScrollPercent(Math.round(scrollRatio * 100));\n      if (overflow) {\n        const trackWidth = vp.clientWidth - scrollbarPadding * 2;\n        const thumbW = Math.max(minThumbLength, ratio * trackWidth);\n        setHThumbSize(thumbW);\n        setHThumbOffset(scrollRatio * (trackWidth - thumbW));\n      }\n    }\n\n    // Update fade mask state\n    if (fadeMask) {\n      setAtTop(vp.scrollTop <= 0);\n      setAtBottom(vp.scrollTop + vp.clientHeight >= vp.scrollHeight - 1);\n      setAtLeft(vp.scrollLeft <= 0);\n      setAtRight(vp.scrollLeft + vp.clientWidth >= vp.scrollWidth - 1);\n    }\n  }, [showV, showH, scrollbarPadding, minThumbLength, fadeMask]);\n\n  // Show scrollbar with auto-hide\n  const showScrollbar = useCallback(() => {\n    if (scrollbarVisibility === 'never') return;\n    if (scrollbarVisibility === 'always') return;\n\n    setScrollbarVisibleState(true);\n    if (hideTimerRef.current) {\n      clearTimeout(hideTimerRef.current);\n    }\n\n    if (scrollbarVisibility === 'auto') {\n      hideTimerRef.current = setTimeout(() => {\n        if (!isDragging) {\n          setScrollbarVisibleState(false);\n        }\n      }, hideDelay);\n    }\n  }, [scrollbarVisibility, hideDelay, isDragging]);\n\n  // Handle scroll\n  const handleScroll = useCallback(\n    (e: React.UIEvent<HTMLDivElement>) => {\n      recalculate();\n      showScrollbar();\n      onScroll?.(e);\n\n      const vp = e.currentTarget;\n      if (vp.scrollTop <= 0) {\n        onScrollTop?.();\n      }\n      if (vp.scrollTop + vp.clientHeight >= vp.scrollHeight - 1) {\n        onScrollBottom?.();\n      }\n    },\n    [recalculate, showScrollbar, onScroll, onScrollTop, onScrollBottom]\n  );\n\n  // Handle hover\n  const handleMouseEnter = useCallback(() => {\n    if (scrollbarVisibility === 'hover' || scrollbarVisibility === 'auto') {\n      setScrollbarVisibleState(true);\n      if (hideTimerRef.current) {\n        clearTimeout(hideTimerRef.current);\n        hideTimerRef.current = null;\n      }\n    }\n  }, [scrollbarVisibility]);\n\n  const handleMouseLeave = useCallback(() => {\n    if (scrollbarVisibility === 'hover') {\n      setScrollbarVisibleState(false);\n    } else if (scrollbarVisibility === 'auto' && !isDragging) {\n      hideTimerRef.current = setTimeout(() => {\n        setScrollbarVisibleState(false);\n      }, hideDelay);\n    }\n  }, [scrollbarVisibility, isDragging, hideDelay]);\n\n  // Thumb drag handlers\n  const handleThumbPointerDown = useCallback(\n    (axis: 'vertical' | 'horizontal', e: React.PointerEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      const vp = viewportRef.current;\n      if (!vp) return;\n\n      setIsDragging(true);\n      dragAxisRef.current = axis;\n      setDragAxis(axis);\n      (e.target as HTMLElement).setPointerCapture(e.pointerId);\n\n      if (axis === 'vertical') {\n        dragStartRef.current = {\n          pointerPos: e.clientY,\n          scrollPos: vp.scrollTop,\n        };\n      } else {\n        dragStartRef.current = {\n          pointerPos: e.clientX,\n          scrollPos: vp.scrollLeft,\n        };\n      }\n    },\n    []\n  );\n\n  const handleThumbPointerMove = useCallback(\n    (e: React.PointerEvent) => {\n      if (!isDragging || !dragAxisRef.current) return;\n      const vp = viewportRef.current;\n      if (!vp) return;\n\n      const axis = dragAxisRef.current;\n\n      if (axis === 'vertical') {\n        const trackHeight = vp.clientHeight - scrollbarPadding * 2;\n        const maxScroll = vp.scrollHeight - vp.clientHeight;\n        const delta = e.clientY - dragStartRef.current.pointerPos;\n        const scrollDelta = (delta / (trackHeight - vThumbSize)) * maxScroll;\n        vp.scrollTop = dragStartRef.current.scrollPos + scrollDelta;\n      } else {\n        const trackWidth = vp.clientWidth - scrollbarPadding * 2;\n        const maxScroll = vp.scrollWidth - vp.clientWidth;\n        const delta = e.clientX - dragStartRef.current.pointerPos;\n        const scrollDelta = (delta / (trackWidth - hThumbSize)) * maxScroll;\n        vp.scrollLeft = dragStartRef.current.scrollPos + scrollDelta;\n      }\n    },\n    [isDragging, scrollbarPadding, vThumbSize, hThumbSize]\n  );\n\n  const handleThumbPointerUp = useCallback(() => {\n    setIsDragging(false);\n    dragAxisRef.current = null;\n    setDragAxis(null);\n  }, []);\n\n  // Track click handler\n  const handleTrackClick = useCallback(\n    (axis: 'vertical' | 'horizontal', e: React.MouseEvent) => {\n      const vp = viewportRef.current;\n      if (!vp) return;\n\n      const trackRect = (\n        e.currentTarget as HTMLElement\n      ).getBoundingClientRect();\n\n      if (axis === 'vertical') {\n        const clickRatio = (e.clientY - trackRect.top) / trackRect.height;\n        vp.scrollTop = clickRatio * (vp.scrollHeight - vp.clientHeight);\n      } else {\n        const clickRatio = (e.clientX - trackRect.left) / trackRect.width;\n        vp.scrollLeft = clickRatio * (vp.scrollWidth - vp.clientWidth);\n      }\n    },\n    []\n  );\n\n  // Keyboard scrolling for the focusable scrollbar role, mirroring the native\n  // scrollbar interaction model (arrows step, PageUp/Down page, Home/End jump).\n  const handleTrackKeyDown = useCallback(\n    (axis: 'vertical' | 'horizontal', e: React.KeyboardEvent) => {\n      const vp = viewportRef.current;\n      if (!vp) return;\n\n      const step = 40;\n      const isVertical = axis === 'vertical';\n      const page = isVertical ? vp.clientHeight : vp.clientWidth;\n      const maxScroll = isVertical\n        ? vp.scrollHeight - vp.clientHeight\n        : vp.scrollWidth - vp.clientWidth;\n      const current = isVertical ? vp.scrollTop : vp.scrollLeft;\n\n      let next: number | undefined;\n      const decKey = isVertical ? 'ArrowUp' : 'ArrowLeft';\n      const incKey = isVertical ? 'ArrowDown' : 'ArrowRight';\n\n      switch (e.key) {\n        case decKey:\n          next = current - step;\n          break;\n        case incKey:\n          next = current + step;\n          break;\n        case 'PageUp':\n          next = current - page;\n          break;\n        case 'PageDown':\n          next = current + page;\n          break;\n        case 'Home':\n          next = 0;\n          break;\n        case 'End':\n          next = maxScroll;\n          break;\n        default:\n          return;\n      }\n\n      e.preventDefault();\n      const clamped = Math.max(0, Math.min(next, maxScroll));\n      if (isVertical) {\n        vp.scrollTop = clamped;\n      } else {\n        vp.scrollLeft = clamped;\n      }\n    },\n    []\n  );\n\n  // Initial measurement once the viewport is mounted.\n  useEffect(() => {\n    if (viewportRef.current) recalculate();\n  }, [recalculate]);\n\n  useResizeObserver(viewportRef, recalculate);\n\n  // Also observe the first child so the scrollbar reacts to content growth.\n  // The child is user-supplied content with no stable ref — kept inline since\n  // useResizeObserver is single-target.\n  useEffect(() => {\n    const vp = viewportRef.current;\n    if (!vp) return;\n    const child = vp.firstElementChild;\n    if (!child || typeof ResizeObserver === 'undefined') return;\n\n    const ro = new ResizeObserver(() => {\n      recalculate();\n    });\n    ro.observe(child);\n    return () => {\n      ro.disconnect();\n    };\n  }, [recalculate]);\n\n  // Cleanup timer\n  useEffect(() => {\n    return () => {\n      if (hideTimerRef.current) {\n        clearTimeout(hideTimerRef.current);\n      }\n    };\n  }, []);\n\n  const setViewportRef = useMergedRef<HTMLDivElement>(viewportRef, externalRef);\n\n  const isScrollbarShown =\n    scrollbarVisibility === 'never' ? false : scrollbarVisibleState;\n\n  const rootInlineStyle: React.CSSProperties = {\n    ...assignInlineVars({\n      [scrollbarWidthVar]: `${scrollbarWidth}px`,\n      [scrollbarPaddingVar]: `${scrollbarPadding}px`,\n      [fadeMaskSizeVar]: `${fadeMaskHeight}px`,\n    }),\n    ...(maxHeight != null\n      ? {\n          maxHeight:\n            typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,\n        }\n      : undefined),\n    ...(maxWidth != null\n      ? {\n          maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,\n        }\n      : undefined),\n    ...style,\n  };\n\n  return (\n    <div\n      className={cx(rootStyle, autoFill && rootAutoFill, className)}\n      style={rootInlineStyle}\n      data-testid={testId}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      {...rest}\n    >\n      <div\n        ref={setViewportRef}\n        id={viewportId}\n        role=\"region\"\n        // The scroll viewport is intentionally focusable so keyboard users can\n        // scroll overflowing content with the arrow/page keys (native behavior\n        // of a focused scroll container).\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n        tabIndex={0}\n        className={viewportRecipe({ direction })}\n        onScroll={handleScroll}\n      >\n        {children}\n      </div>\n\n      {/* Fade masks */}\n      {fadeMask && showV && (\n        <>\n          <div\n            className={cx(\n              fadeMaskBase,\n              fadeMaskTop,\n              !atTop ? fadeMaskVisible : fadeMaskHiddenStyle\n            )}\n            data-testid={testId ? `${testId}-fade-top` : undefined}\n          />\n          <div\n            className={cx(\n              fadeMaskBase,\n              fadeMaskBottom,\n              !atBottom ? fadeMaskVisible : fadeMaskHiddenStyle\n            )}\n            data-testid={testId ? `${testId}-fade-bottom` : undefined}\n          />\n        </>\n      )}\n      {fadeMask && showH && (\n        <>\n          <div\n            className={cx(\n              fadeMaskBase,\n              fadeMaskLeft,\n              !atLeft ? fadeMaskVisible : fadeMaskHiddenStyle\n            )}\n          />\n          <div\n            className={cx(\n              fadeMaskBase,\n              fadeMaskRight,\n              !atRight ? fadeMaskVisible : fadeMaskHiddenStyle\n            )}\n          />\n        </>\n      )}\n\n      {/* Vertical scrollbar */}\n      {showV && hasVOverflow && (\n        <div\n          className={cx(\n            scrollbarVertical,\n            isScrollbarShown ? scrollbarVisible : scrollbarHidden\n          )}\n          role=\"scrollbar\"\n          tabIndex={0}\n          aria-controls={viewportId}\n          aria-orientation=\"vertical\"\n          aria-valuenow={vScrollPercent}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          data-testid={testId ? `${testId}-scrollbar-v` : undefined}\n          onClick={e => {\n            handleTrackClick('vertical', e);\n          }}\n          onKeyDown={e => {\n            handleTrackKeyDown('vertical', e);\n          }}\n        >\n          <div\n            className={cx(\n              thumbBase,\n              thumbVertical,\n              isDragging && dragAxis === 'vertical' && thumbDragging\n            )}\n            style={{\n              height: `${vThumbSize}px`,\n              transform: `translateY(${vThumbOffset}px)`,\n            }}\n            onPointerDown={e => {\n              handleThumbPointerDown('vertical', e);\n            }}\n            onPointerMove={handleThumbPointerMove}\n            onPointerUp={handleThumbPointerUp}\n            data-testid={testId ? `${testId}-thumb-v` : undefined}\n          />\n        </div>\n      )}\n\n      {/* Horizontal scrollbar */}\n      {showH && hasHOverflow && (\n        <div\n          className={cx(\n            scrollbarHorizontal,\n            isScrollbarShown ? scrollbarVisible : scrollbarHidden\n          )}\n          role=\"scrollbar\"\n          tabIndex={0}\n          aria-controls={viewportId}\n          aria-orientation=\"horizontal\"\n          aria-valuenow={hScrollPercent}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          data-testid={testId ? `${testId}-scrollbar-h` : undefined}\n          onClick={e => {\n            handleTrackClick('horizontal', e);\n          }}\n          onKeyDown={e => {\n            handleTrackKeyDown('horizontal', e);\n          }}\n        >\n          <div\n            className={cx(\n              thumbBase,\n              thumbHorizontal,\n              isDragging && dragAxis === 'horizontal' && thumbDragging\n            )}\n            style={{\n              width: `${hThumbSize}px`,\n              transform: `translateX(${hThumbOffset}px)`,\n            }}\n            onPointerDown={e => {\n              handleThumbPointerDown('horizontal', e);\n            }}\n            onPointerMove={handleThumbPointerMove}\n            onPointerUp={handleThumbPointerUp}\n            data-testid={testId ? `${testId}-thumb-h` : undefined}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nScrollArea.displayName = 'ScrollArea';\n"],"names":[],"mappings":";;;;;;;;;AAmCA;AAEO;AAsBL;AACA;AACA;;;;;;;;;;;;;;AAgBA;AAGA;;;;AAIA;;AAIA;;;;;;;;;AAYA;AACE;AACA;;;;AAIE;;;AAGA;;;;AAIE;;;;;;;AAQF;;;AAGA;;;;AAIE;;;;;;;AAQF;AACA;AACA;AACA;;AAEJ;;AAGA;;;;;;AAKE;AACE;;AAGF;AACE;;;;;;;;AASJ;AAEI;AACA;AACA;AAEA;AACA;;;AAGA;;;AAGF;;AAKF;;;AAGI;AACE;AACA;;;AAGN;AAEA;AACE;;;AAEO;AACL;;;;;;;;;AAWA;AACA;;;AAGA;;;AAIA;;;;;;;;;;;;;AAeJ;AAEI;;AACA;AACA;;AAEA;AAEA;;;;AAIE;;;;;;;AAMA;;;;AAON;;AAEE;;;;;AAOE;AACA;;;AAMA;AACE;AACA;;;AAEA;AACA;;;;;;AAUF;AACA;;;AAGA;AACA;;AAEE;;AAEF;AAEA;;;AAIA;AACE;AACE;;AAEF;AACE;;AAEF;AACE;;AAEF;AACE;;AAEF;;;AAGA;;;AAGA;;;;AAKF;;AAEE;;;AAEA;;;;;;AAQqB;AAC3B;AAEA;;;;;AAME;AACA;;AACA;AACA;;AAEA;AACE;AACF;AACA;AACA;;AAEA;AACF;;;AAIE;AACE;AACE;;AAEJ;;;AAKF;AAGA;AACE;AACE;AACA;AACA;;;AAGA;AACI;AAED;;;AAGH;AACI;AACD;;AAEL;;AAGF;;;;;;AAgFU;AACF;AAEE;;;;AAYC;AAEC;AACF;AAwBA;AACF;AAEE;;;;AAYC;AAEC;;AAUd;AAEA;;"}

package/dist/esm/components/layout/Spacer/Spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","sources":["../../../../../../src/components/layout/Spacer/Spacer.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AA+BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCG;AACI;AAEH;AAEI;;AAEE;;AAGN;AAEI;;AAGJ;AAaF;AAGF;;"}
+{"version":3,"file":"Spacer.js","sources":["src/components/layout/Spacer/Spacer.tsx"],"sourcesContent":["'use client';\n\n// src/components/layout/Spacer/Spacer.tsx\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { spacerBase, spacerFixed, spacerFlexible } from './Spacer.css';\n\nimport type { BaseComponent } from '@/types/common';\nimport type { Prettify } from '@/types/utilities';\n\nexport interface SpacerBaseProps extends Omit<BaseComponent, 'children'> {\n  /**\n   * Fixed size instead of auto-expanding.\n   * When provided, spacer will have a fixed dimension instead of flexible growth.\n   *\n   * Note: In fixed mode, both width and height are set to the same value.\n   * The parent flex container's direction determines which dimension is used —\n   * the cross-axis dimension is typically overridden by `align-items: stretch`.\n   *\n   * @example \"20px\", \"1rem\", \"2em\", 40\n   */\n  size?: string | number | undefined;\n}\n\n/**\n * Props for the Spacer component with prettified type for better IntelliSense\n */\nexport type SpacerProps = Prettify<SpacerBaseProps>;\n\n/**\n * A flexible spacer component that expands to fill available space.\n *\n * Perfect for pushing elements apart in flex layouts (Stack, Flex components).\n * By default, it grows to fill available space. Can also be used with fixed size.\n *\n * @example\n * ```tsx\n * // Auto-expanding spacer (pushes elements apart)\n * <Stack direction=\"row\">\n *   <Button>Left</Button>\n *   <Spacer />\n *   <Button>Right</Button>\n * </Stack>\n *\n * // Fixed size spacer\n * <Stack direction=\"column\">\n *   <Title>Header</Title>\n *   <Spacer size=\"2rem\" />\n *   <Content>Body</Content>\n * </Stack>\n *\n * // Multiple spacers for even distribution\n * <Flex direction=\"row\">\n *   <Logo />\n *   <Spacer />\n *   <Navigation />\n *   <Spacer />\n *   <UserMenu />\n * </Flex>\n *\n * // Numeric size\n * <Stack>\n *   <Item />\n *   <Spacer size={20} />\n *   <Item />\n * </Stack>\n * ```\n */\nexport const Spacer = /*#__PURE__*/ React.memo<SpacerProps>(\n  ({ size, className, testId, style, ref, ...htmlProps }) => {\n    const sizeValue =\n      size !== undefined\n        ? typeof size === 'number'\n          ? `${size}px`\n          : size\n        : undefined;\n\n    const inlineStyle: React.CSSProperties | undefined =\n      sizeValue !== undefined\n        ? { ...style, width: sizeValue, height: sizeValue }\n        : style;\n\n    return (\n      <div\n        ref={ref}\n        className={cx(\n          spacerBase,\n          size !== undefined ? spacerFixed : spacerFlexible,\n          className\n        )}\n        data-testid={testId}\n        style={inlineStyle}\n        {...htmlProps}\n      />\n    );\n  }\n);\n\nSpacer.displayName = 'Spacer';\n"],"names":[],"mappings":";;;;;;AA+BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCG;AACI;AAEH;AAEI;;AAEE;;AAGN;AAEI;;AAGJ;AAaF;AAGF;;"}