@cube-dev/ui-kit 0.118.0 → 0.119.1

package/dist/components/content/Item/Item.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.js","names":["HotKeys"],"sources":["../../../../src/components/content/Item/Item.tsx"],"sourcesContent":["import {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  isValidElement,\n  KeyboardEvent,\n  MouseEvent,\n  PointerEvent,\n  ReactNode,\n  RefObject,\n  useMemo,\n} from 'react';\nimport { OverlayProps } from 'react-aria';\nimport { useHotkeys } from 'react-hotkeys-hook';\n\nimport { useWarn } from '../../../_internal/hooks/use-warn';\nimport {\n  DANGER_CARD_STYLES,\n  DANGER_CLEAR_STYLES,\n  DANGER_ITEM_STYLES,\n  DANGER_LINK_STYLES,\n  DANGER_NEUTRAL_STYLES,\n  DANGER_OUTLINE_STYLES,\n  DANGER_PRIMARY_STYLES,\n  DANGER_SECONDARY_STYLES,\n  DEFAULT_CARD_STYLES,\n  DEFAULT_CLEAR_STYLES,\n  DEFAULT_ITEM_STYLES,\n  DEFAULT_LINK_STYLES,\n  DEFAULT_NEUTRAL_STYLES,\n  DEFAULT_OUTLINE_STYLES,\n  DEFAULT_PRIMARY_STYLES,\n  DEFAULT_SECONDARY_STYLES,\n  ItemVariant,\n  NOTE_CARD_STYLES,\n  NOTE_CLEAR_STYLES,\n  NOTE_ITEM_STYLES,\n  NOTE_LINK_STYLES,\n  NOTE_NEUTRAL_STYLES,\n  NOTE_OUTLINE_STYLES,\n  NOTE_PRIMARY_STYLES,\n  NOTE_SECONDARY_STYLES,\n  SPECIAL_CLEAR_STYLES,\n  SPECIAL_ITEM_STYLES,\n  SPECIAL_LINK_STYLES,\n  SPECIAL_NEUTRAL_STYLES,\n  SPECIAL_OUTLINE_STYLES,\n  SPECIAL_PRIMARY_STYLES,\n  SPECIAL_SECONDARY_STYLES,\n  SUCCESS_CARD_STYLES,\n  SUCCESS_CLEAR_STYLES,\n  SUCCESS_ITEM_STYLES,\n  SUCCESS_LINK_STYLES,\n  SUCCESS_NEUTRAL_STYLES,\n  SUCCESS_OUTLINE_STYLES,\n  SUCCESS_PRIMARY_STYLES,\n  SUCCESS_SECONDARY_STYLES,\n  WARNING_CARD_STYLES,\n  WARNING_CLEAR_STYLES,\n  WARNING_ITEM_STYLES,\n  WARNING_LINK_STYLES,\n  WARNING_NEUTRAL_STYLES,\n  WARNING_OUTLINE_STYLES,\n  WARNING_PRIMARY_STYLES,\n  WARNING_SECONDARY_STYLES,\n} from '../../../data/item-themes';\nimport { CheckIcon } from '../../../icons/CheckIcon';\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Mods,\n  Props,\n  Styles,\n  tasty,\n} from '../../../tasty';\nimport { DynamicIcon, mergeProps, resolveIcon } from '../../../utils/react';\nimport { ItemAction } from '../../actions/ItemAction';\nimport { ItemActionProvider } from '../../actions/ItemActionContext';\nimport { IconSwitch } from '../../helpers/IconSwitch/IconSwitch';\nimport { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';\nimport { highlightText } from '../highlightText';\nimport { HotKeys } from '../HotKeys';\nimport { ItemBadge } from '../ItemBadge';\nimport { useAutoTooltip } from '../use-auto-tooltip';\n\nconst ITEM_SIZE_VALUES = [\n  'xsmall',\n  'small',\n  'medium',\n  'large',\n  'xlarge',\n  'inline',\n] as const;\n\n/** Known modifiers for Item component */\nexport type ItemMods = Mods<{\n  'has-icon'?: boolean;\n  'has-start-content'?: boolean;\n  'has-end-content'?: boolean;\n  'has-right-icon'?: boolean;\n  'has-label'?: boolean;\n  'has-prefix'?: boolean;\n  'has-suffix'?: boolean;\n  'has-description'?: boolean;\n  'has-actions'?: boolean;\n  'has-actions-content'?: boolean;\n  'auto-hide-actions'?: boolean;\n  'preserve-actions-space'?: boolean;\n  checkbox?: boolean;\n  disabled?: boolean;\n  selected?: boolean;\n  loading?: boolean;\n  size?: string;\n  description?: string;\n  type?: string;\n  theme?: string;\n  shape?: string;\n}>;\n\nexport interface CubeItemProps extends BaseProps, ContainerStyleProps {\n  icon?: DynamicIcon<ItemMods> | 'checkbox';\n  rightIcon?: DynamicIcon<ItemMods>;\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  description?: ReactNode;\n  descriptionPlacement?: 'inline' | 'block';\n  /**\n   * When true, the item is rendered inside a wrapper element to separate the actions from the item.\n   * @default false\n   */\n  insideWrapper?: boolean;\n  /**\n   * Whether the item is selected.\n   * @default false\n   */\n  isSelected?: boolean;\n  /**\n   * Actions to render inline or placeholder mode for ItemButton wrapper.\n   * - ReactNode: renders actions inline as part of the grid layout\n   * - true: placeholder mode for ItemButton (enables --actions-width calculation)\n   */\n  actions?: ReactNode | true;\n  /**\n   * When true, actions are hidden by default and shown only on hover, focus, or focus-within.\n   * Uses opacity transition for visual hiding while maintaining layout space.\n   */\n  autoHideActions?: boolean;\n  /**\n   * When true and insideWrapper is true, this controls the visibility of the actions.\n   * @default false\n   */\n  showActions?: boolean;\n  /**\n   * When true, preserves the actions width when hidden (only changes opacity).\n   * Only applies when autoHideActions is true.\n   * @default false\n   */\n  preserveActionsSpace?: boolean;\n  /**\n   * When true, disables focus on action buttons by setting tabIndex={-1}.\n   * @default true\n   */\n  disableActionsFocus?: boolean;\n  size?:\n    | 'xsmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xlarge'\n    | 'inline'\n    | number\n    | (string & {});\n  type?:\n    | 'item'\n    | 'header'\n    | 'primary'\n    | 'secondary'\n    | 'outline'\n    | 'neutral'\n    | 'clear'\n    | 'link'\n    | 'card'\n    | (string & {});\n  theme?:\n    | 'default'\n    | 'danger'\n    | 'success'\n    | 'special'\n    | 'warning'\n    | 'note'\n    | (string & {});\n  /** Keyboard shortcut that triggers the element when pressed */\n  hotkeys?: string;\n  /**\n   * Tooltip content and configuration:\n   * - string: simple tooltip text\n   * - true: auto tooltip on overflow (shows children as tooltip when truncated)\n   * - object: advanced configuration with optional auto property\n   */\n  tooltip?:\n    | string\n    | boolean\n    | (Omit<CubeTooltipProviderProps, 'children'> & { auto?: boolean });\n  /**\n   * HTML button type to avoid implicit form submission when used as `as=\"button\"`.\n   * Kept separate from visual `type` prop.\n   */\n  htmlType?: 'button' | 'submit' | 'reset';\n  labelProps?: Props;\n  descriptionProps?: Props;\n  keyboardShortcutProps?: Props;\n  /**\n   * The slot which the loading icon should replace in loading state.\n   * - \"auto\": Smart selection - prefers icon if present, then rightIcon, fallback to icon\n   * - Specific slot names: Always use that slot\n   * @default \"auto\"\n   */\n  loadingSlot?: 'auto' | 'icon' | 'rightIcon' | 'prefix' | 'suffix';\n  /**\n   * When true, shows loading state by replacing the specified slot with LoadingIcon\n   * and makes the component disabled.\n   */\n  isLoading?: boolean;\n  /**\n   * Shape of the item's border radius.\n   * - `card` - Card shape with larger border radius (`1cr`)\n   * - `button` - Button shape with default border radius (default)\n   * - `sharp` - Sharp corners with no border radius (`0`)\n   * - `pill` - Pill shape with fully rounded ends (`round`)\n   * @default \"button\"\n   */\n  shape?: 'card' | 'button' | 'sharp' | 'pill';\n  /**\n   * @private\n   * Default tooltip placement for the item.\n   * @default \"top\"\n   */\n  defaultTooltipPlacement?: OverlayProps['placement'];\n  /**\n   * Ref to access the label element directly\n   */\n  labelRef?: RefObject<HTMLElement>;\n  /**\n   * Heading level for the Label element when type=\"header\" or type=\"card\".\n   * Changes the Label's HTML tag to the corresponding heading (h1-h6).\n   * @default 3\n   */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * String to highlight within children.\n   * Only works when children is a plain string.\n   */\n  highlight?: string;\n  /**\n   * Whether highlight matching is case-sensitive.\n   * @default false\n   */\n  highlightCaseSensitive?: boolean;\n  /**\n   * Custom styles for highlighted text.\n   */\n  highlightStyles?: Styles;\n  /**\n   * Variant of the item.\n   */\n  variant?: ItemVariant;\n}\n\nconst DEFAULT_ICON_STYLES: Styles = {\n  $: '>',\n  display: 'grid',\n  placeItems: 'center',\n  placeContent: 'stretch',\n  aspectRatio: '1 / 1',\n  width: '($size - 2bw)',\n  opacity: {\n    '': 1,\n    'checkbox & selected': 1,\n    'checkbox & !selected': 0,\n    'checkbox & !selected & hovered': 0.4,\n  },\n};\n\nconst ADDITION_STYLES: Styles = {\n  $: '>',\n  display: 'grid',\n  flow: 'column',\n  placeItems: 'center',\n  placeContent: 'stretch',\n};\n\nconst ACTIONS_EVENT_HANDLERS = {\n  onClick: (e: MouseEvent) => e.stopPropagation(),\n  onPointerDown: (e: PointerEvent) => e.stopPropagation(),\n  onPointerUp: (e: PointerEvent) => e.stopPropagation(),\n  onMouseDown: (e: MouseEvent) => e.stopPropagation(),\n  onMouseUp: (e: MouseEvent) => e.stopPropagation(),\n  onKeyDown: (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.stopPropagation();\n    }\n  },\n};\n\nconst ItemElement = tasty({\n  as: 'div',\n  styles: {\n    '@interacted':\n      'active | :hover | :focus | :focus-within | :has([data-pressed])',\n\n    display: 'inline-grid',\n    flow: 'column dense',\n    gap: 0,\n    outline: 0,\n    placeItems: 'stretch',\n    placeContent: 'stretch',\n    gridTemplate: {\n      '': '\"icon prefix label suffix rightIcon actions\" auto \"icon prefix label suffix rightIcon actions\" auto / max-content max-content 1sf max-content max-content max-content',\n      'description=inline':\n        '\"icon prefix description suffix rightIcon actions\" auto / max-content max-content 1sf max-content max-content max-content',\n      'description=inline & has-label':\n        '\"icon prefix label suffix rightIcon actions\" auto \"icon prefix description suffix rightIcon actions\" auto / max-content max-content 1sf max-content max-content max-content',\n      'description=block':\n        '\"icon prefix label suffix rightIcon actions\" auto \"description description description description description description\" auto / max-content max-content 1sf max-content max-content max-content',\n    },\n    // Prevent items from shrinking inside vertical flex layouts (Menu, ListBox, etc)\n    flexShrink: {\n      '': 'initial',\n      'menuitem | listboxitem': 0,\n    },\n    position: 'relative',\n    padding: {\n      '': 0,\n      'type=card': '.5x',\n    },\n    margin: 0,\n    radius: {\n      '': true,\n      'shape=card': '1cr',\n      'shape=button': true,\n      'shape=sharp': '0',\n      'shape=pill': 'round',\n    },\n    height: {\n      '': 'min $size',\n      'size=inline': '(1lh + 2bw)',\n    },\n    width: {\n      '': 'min $size',\n      'has-icon & has-right-icon': 'min ($size * 2)',\n      'size=inline': 'min (1lh + 2bw)',\n    },\n    border: '#clear',\n    fill: {\n      '': '#dark.0',\n      'hovered | focused': '#dark.03',\n      selected: '#dark.09',\n      'selected & (hovered | focused)': '#dark.12',\n      pressed: '#dark.09',\n      disabled: '#clear',\n    },\n    color: {\n      '': '#dark-02',\n      hovered: '#dark-02',\n      pressed: '#dark',\n      disabled: '#dark-04',\n    },\n    preset: {\n      '': 't3',\n      '!type=item': 't3m',\n      'size=xsmall': 't4',\n      'size=xlarge': 't2',\n      'size=inline': 'inline',\n      '!type=item & (size=medium | size=small | size=large)': 't3m',\n      '!type=item & size=xlarge': 't2m',\n      '(type=header | type=card) & (size=xsmall | size=small | size=medium)':\n        'h6',\n      '(type=header | type=card) & size=large': 'h5',\n      '(type=header | type=card) & size=xlarge': 'h4',\n    },\n    recipe: 'reset button',\n    transition: 'theme',\n    outlineOffset: 1,\n    cursor: {\n      '': 'inherit',\n      ':is(a)': 'pointer',\n      ':is(button) | listboxitem | menuitem': '$pointer',\n      disabled: 'not-allowed',\n    },\n\n    $size: {\n      '': '$size-md',\n      'size=xsmall': '$size-xs',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n      'size=xlarge': '$size-xl',\n      'size=inline': '(1lh + 2bw)',\n    },\n    '$inline-padding':\n      'max($min-inline-padding, (($size - 1lh - 2bw) / 2 + $inline-compensation))',\n    '$block-padding': {\n      '': '.5x',\n      'size=xsmall | size=small': '.25x',\n      'size=inline': 0,\n    },\n    '$inline-compensation': '.5x',\n    '$min-inline-padding': '(1x - 1bw)',\n\n    '$label-padding-left': {\n      '': '$inline-padding',\n      'has-start-content': '0',\n    },\n    '$label-padding-right': {\n      '': '$inline-padding',\n      'has-end-content': '0',\n      // Restore padding when actions are hidden AND no other visible end content\n      '!inside-wrapper & !has-suffix & !has-right-icon & auto-hide-actions & !preserve-actions-space & !@interacted':\n        '$inline-padding',\n      'inside-wrapper & !has-suffix & !has-right-icon & !preserve-actions-space & !actions-shown':\n        '$inline-padding',\n    },\n    '$label-padding-bottom': {\n      '': '$block-padding',\n      'description=inline': '0',\n    },\n    '$description-padding-left': {\n      '': '$inline-padding',\n      'has-start-content': 0,\n      'description=block': '($inline-padding - $inline-compensation + 1bw)',\n      'description=block & !has-start-content': '$inline-padding',\n    },\n    '$description-padding-right': {\n      '': '$inline-padding',\n      'has-end-content': 0,\n      'description=block': '($inline-padding - $inline-compensation + 1bw)',\n      'description=block & !has-end-content': '$inline-padding',\n    },\n    '$description-padding-bottom': {\n      '': 0,\n      'has-label & description=inline': '$block-padding',\n      'has-label & description=block':\n        'max($block-padding, (($size - 4x) / 2) + $block-padding)',\n    },\n\n    Icon: { ...DEFAULT_ICON_STYLES, gridArea: 'icon' },\n\n    RightIcon: { ...DEFAULT_ICON_STYLES, gridArea: 'rightIcon' },\n\n    Label: {\n      $: '>',\n      margin: 0,\n      gridArea: 'label',\n      display: 'block',\n      placeSelf: 'center start',\n      boxSizing: 'border-box',\n      placeContent: 'stretch',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      width: '0 100%',\n      preset: 'inherit',\n      transition: 'padding',\n      padding:\n        '$block-padding $label-padding-right $label-padding-bottom $label-padding-left',\n    },\n\n    Description: {\n      $: '>',\n      gridArea: 'description',\n      preset: {\n        '': 't4',\n        'type=card | type=header': 't3',\n      },\n      placeSelf: 'center start',\n      boxSizing: 'border-box',\n      color: 'inherit',\n      opacity: {\n        '': 0.75,\n        'type=card | type=header': 1,\n      },\n      overflow: 'hidden',\n      whiteSpace: {\n        '': 'nowrap',\n        'type=card | type=header': 'normal',\n      },\n      textOverflow: 'ellipsis',\n      width: 'initial 100% 100%',\n      textAlign: 'left',\n      padding:\n        '0 $description-padding-right $description-padding-bottom $description-padding-left',\n    },\n\n    Prefix: {\n      ...ADDITION_STYLES,\n      gridArea: 'prefix',\n      padding: {\n        '': '$inline-padding left',\n        'has-icon': 0,\n      },\n    },\n\n    Suffix: {\n      ...ADDITION_STYLES,\n      gridArea: 'suffix',\n      padding: {\n        '': '$inline-padding right',\n        'has-right-icon': 0,\n      },\n    },\n\n    Actions: {\n      $: '>',\n      gridArea: 'actions',\n      display: 'flex',\n      gap: '1bw',\n      placeItems: 'center',\n      placeContent: 'end',\n      placeSelf: 'stretch',\n      padding: {\n        '': '0 $side-padding',\n        'inside-wrapper & !actions-shown': 0,\n      },\n      boxSizing: 'border-box',\n      height: 'min ($size - 2bw)',\n      width: {\n        '': 'fixed ($actions-width, 0px)',\n        'has-actions-content & !auto-hide-actions':\n          'max calc-size(max-content, size)',\n        'has-actions-content & auto-hide-actions & !preserve-actions-space':\n          'max 0px',\n        'has-actions-content & auto-hide-actions & (!preserve-actions-space & ((@interacted & !inside-wrapper) | (inside-wrapper & actions-shown)))':\n          'max calc-size(max-content, size)',\n        'has-actions-content & auto-hide-actions & preserve-actions-space':\n          'max calc-size(max-content, size)',\n      },\n      opacity: {\n        '': 1,\n        'auto-hide-actions': 0,\n        'auto-hide-actions & ((@interacted & !inside-wrapper) | (inside-wrapper & actions-shown))': 1,\n      },\n      transition:\n        'width $transition ease-out, opacity $transition ease-out, padding $transition ease-out',\n      interpolateSize: 'allow-keywords',\n\n      // Size for the action buttons\n      '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))',\n      // Side padding for the button\n      '$side-padding': '(($size - $action-size - 2bw) / 2)',\n    },\n  },\n  variants: {\n    // Default theme\n    'default.primary': DEFAULT_PRIMARY_STYLES,\n    'default.secondary': DEFAULT_SECONDARY_STYLES,\n    'default.outline': DEFAULT_OUTLINE_STYLES,\n    'default.neutral': DEFAULT_NEUTRAL_STYLES,\n    'default.clear': DEFAULT_CLEAR_STYLES,\n    'default.link': DEFAULT_LINK_STYLES,\n    'default.item': DEFAULT_ITEM_STYLES,\n    'default.card': DEFAULT_CARD_STYLES,\n    // Danger theme\n    'danger.primary': DANGER_PRIMARY_STYLES,\n    'danger.secondary': DANGER_SECONDARY_STYLES,\n    'danger.outline': DANGER_OUTLINE_STYLES,\n    'danger.neutral': DANGER_NEUTRAL_STYLES,\n    'danger.clear': DANGER_CLEAR_STYLES,\n    'danger.link': DANGER_LINK_STYLES,\n    'danger.item': DANGER_ITEM_STYLES,\n    'danger.card': DANGER_CARD_STYLES,\n    // Success theme\n    'success.primary': SUCCESS_PRIMARY_STYLES,\n    'success.secondary': SUCCESS_SECONDARY_STYLES,\n    'success.outline': SUCCESS_OUTLINE_STYLES,\n    'success.neutral': SUCCESS_NEUTRAL_STYLES,\n    'success.clear': SUCCESS_CLEAR_STYLES,\n    'success.link': SUCCESS_LINK_STYLES,\n    'success.item': SUCCESS_ITEM_STYLES,\n    'success.card': SUCCESS_CARD_STYLES,\n    // Warning theme\n    'warning.primary': WARNING_PRIMARY_STYLES,\n    'warning.secondary': WARNING_SECONDARY_STYLES,\n    'warning.outline': WARNING_OUTLINE_STYLES,\n    'warning.neutral': WARNING_NEUTRAL_STYLES,\n    'warning.clear': WARNING_CLEAR_STYLES,\n    'warning.link': WARNING_LINK_STYLES,\n    'warning.item': WARNING_ITEM_STYLES,\n    'warning.card': WARNING_CARD_STYLES,\n    // Note theme\n    'note.primary': NOTE_PRIMARY_STYLES,\n    'note.secondary': NOTE_SECONDARY_STYLES,\n    'note.outline': NOTE_OUTLINE_STYLES,\n    'note.neutral': NOTE_NEUTRAL_STYLES,\n    'note.clear': NOTE_CLEAR_STYLES,\n    'note.link': NOTE_LINK_STYLES,\n    'note.item': NOTE_ITEM_STYLES,\n    'note.card': NOTE_CARD_STYLES,\n    // Special theme\n    'special.primary': SPECIAL_PRIMARY_STYLES,\n    'special.secondary': SPECIAL_SECONDARY_STYLES,\n    'special.outline': SPECIAL_OUTLINE_STYLES,\n    'special.neutral': SPECIAL_NEUTRAL_STYLES,\n    'special.clear': SPECIAL_CLEAR_STYLES,\n    'special.link': SPECIAL_LINK_STYLES,\n    'special.item': SPECIAL_ITEM_STYLES,\n  },\n  styleProps: CONTAINER_STYLES,\n});\n\nconst Item = <T extends HTMLElement = HTMLDivElement>(\n  props: CubeItemProps,\n  ref: ForwardedRef<T>,\n) => {\n  let {\n    children,\n    size = 'medium',\n    type = 'item',\n    theme = 'default',\n    mods,\n    icon: iconProp,\n    rightIcon: rightIconProp,\n    prefix,\n    suffix,\n    description,\n    descriptionPlacement,\n    labelProps,\n    descriptionProps,\n    keyboardShortcutProps,\n    styles,\n    htmlType,\n    isSelected,\n    hotkeys,\n    tooltip = true,\n    isDisabled,\n    style,\n    loadingSlot = 'auto',\n    isLoading = false,\n    actions,\n    autoHideActions = false,\n    preserveActionsSpace = false,\n    disableActionsFocus = false,\n    shape,\n    defaultTooltipPlacement = 'top',\n    level = 3,\n    highlight,\n    highlightCaseSensitive = false,\n    highlightStyles,\n    insideWrapper = false,\n    showActions = false,\n    ...rest\n  } = props;\n\n  // Determine if Label will be rendered\n  const hasLabel = !!(children || labelProps);\n\n  // Set default descriptionPlacement based on type\n  // For card/header types, use 'block' only when Label is rendered\n  const finalDescriptionPlacement =\n    descriptionPlacement ??\n    ((type === 'card' || type === 'header') && hasLabel ? 'block' : 'inline');\n\n  // Set default shape based on type\n  const finalShape = shape ?? (type === 'card' ? 'card' : 'button');\n\n  // Loading state makes the component disabled\n  const finalIsDisabled =\n    isDisabled === true || (isLoading && isDisabled !== false);\n\n  // Validate type+theme combinations\n  const STANDARD_THEMES = [\n    'default',\n    'success',\n    'danger',\n    'warning',\n    'note',\n    'special',\n  ];\n  const CARD_THEMES = ['default', 'success', 'danger', 'warning', 'note'];\n  const HEADER_THEMES = ['default'];\n\n  const isInvalidCombination =\n    (type === 'header' && !HEADER_THEMES.includes(theme)) ||\n    (type === 'card' && !CARD_THEMES.includes(theme)) ||\n    (!['header', 'card'].includes(type) && !STANDARD_THEMES.includes(theme));\n\n  useWarn(isInvalidCombination, {\n    key: ['Item', 'invalid-type-theme', type, theme],\n    args: [\n      `Item: Invalid type+theme combination. type=\"${type}\" does not support theme=\"${theme}\".` +\n        (type === 'header'\n          ? ' The \"header\" type only supports theme: default.'\n          : type === 'card'\n            ? ' The \"card\" type only supports themes: default, success, danger, warning, note.'\n            : ' Standard types support themes: default, success, danger, warning, note, special.'),\n    ],\n  });\n\n  // Warn if link type is used with icons or loading state\n  const hasLinkWithIcons = type === 'link' && (iconProp || rightIconProp);\n  const hasLinkWithLoading = type === 'link' && isLoading;\n  const hasLinkRestrictions = hasLinkWithIcons || hasLinkWithLoading;\n\n  const linkRestrictionMessages: string[] = [];\n  if (hasLinkWithIcons) {\n    linkRestrictionMessages.push('icons (`icon` or `rightIcon` props)');\n  }\n  if (hasLinkWithLoading) {\n    linkRestrictionMessages.push('loading state (`isLoading` prop)');\n  }\n\n  useWarn(hasLinkRestrictions, {\n    key: ['Item', 'link-restrictions'],\n    args: [\n      `Item: The \"link\" type does not support ${linkRestrictionMessages.join(' or ')}. Remove these props when using type=\"link\".`,\n    ],\n  });\n\n  // Determine if we should show checkbox instead of icon\n  const hasCheckbox = iconProp === 'checkbox';\n\n  // Determine if size is custom (number or unrecognized string)\n  const isCustomSize =\n    typeof size === 'number' ||\n    !(ITEM_SIZE_VALUES as readonly string[]).includes(size);\n  const sizeTokenValue =\n    typeof size === 'number' ? `${size}px` : isCustomSize ? size : undefined;\n\n  // Base mods for icon resolution (without icon-dependent mods)\n  const baseMods = useMemo<ItemMods>(\n    () => ({\n      disabled: finalIsDisabled,\n      selected: isSelected === true,\n      loading: isLoading,\n      ...(!isCustomSize && { size: size as string }),\n      type,\n      theme,\n      shape: finalShape,\n      ...mods,\n    }),\n    [\n      finalIsDisabled,\n      isSelected,\n      isLoading,\n      size,\n      isCustomSize,\n      type,\n      theme,\n      finalShape,\n      mods,\n    ],\n  );\n\n  // Resolve dynamic icon props (skip resolution for 'checkbox' special value)\n  const resolvedIcon = useMemo(() => {\n    if (hasCheckbox) {\n      return { content: null, hasSlot: true };\n    }\n    return resolveIcon(iconProp as DynamicIcon<ItemMods>, baseMods);\n  }, [iconProp, baseMods, hasCheckbox]);\n\n  const resolvedRightIcon = useMemo(\n    () => resolveIcon(rightIconProp, baseMods),\n    [rightIconProp, baseMods],\n  );\n\n  // Determine which slot to use for loading when \"auto\" is selected\n  // Must be computed before hasIconSlot/hasRightIconSlot since they depend on it\n  const resolvedLoadingSlot = useMemo(() => {\n    if (loadingSlot !== 'auto') return loadingSlot;\n\n    // Auto logic: prefer icon if present, then rightIcon, fallback to icon\n    if (resolvedRightIcon.hasSlot && !resolvedIcon.hasSlot) return 'rightIcon';\n    return 'icon'; // fallback\n  }, [loadingSlot, resolvedIcon.hasSlot, resolvedRightIcon.hasSlot]);\n\n  // Determine if icon slots should render (original slot OR loading state targets this slot)\n  const hasIconSlot =\n    resolvedIcon.hasSlot || (isLoading && resolvedLoadingSlot === 'icon');\n  const hasRightIconSlot =\n    resolvedRightIcon.hasSlot ||\n    (isLoading && resolvedLoadingSlot === 'rightIcon');\n\n  const showDescription = useMemo(() => {\n    const copyProps = { ...descriptionProps };\n    delete copyProps.id;\n    return !!(description || Object.keys(copyProps).length > 0);\n  }, [description, descriptionProps]);\n\n  // Apply loading state to appropriate slots\n  const finalIcon =\n    isLoading && resolvedLoadingSlot === 'icon' ? (\n      <LoadingIcon />\n    ) : (\n      resolvedIcon.content\n    );\n  const finalRightIcon =\n    isLoading && resolvedLoadingSlot === 'rightIcon' ? (\n      <LoadingIcon />\n    ) : (\n      resolvedRightIcon.content\n    );\n\n  // Generate stable keys for icon transitions based on icon type\n  const iconKey = hasCheckbox\n    ? 'checkbox'\n    : isLoading && resolvedLoadingSlot === 'icon'\n      ? 'loading'\n      : isValidElement(finalIcon)\n        ? (finalIcon.type as any)?.displayName ||\n          (finalIcon.type as any)?.name ||\n          'icon'\n        : finalIcon\n          ? 'icon'\n          : 'empty';\n\n  const rightIconKey =\n    isLoading && resolvedLoadingSlot === 'rightIcon'\n      ? 'loading'\n      : isValidElement(finalRightIcon)\n        ? (finalRightIcon.type as any)?.displayName ||\n          (finalRightIcon.type as any)?.name ||\n          'icon'\n        : finalRightIcon\n          ? 'icon'\n          : 'empty';\n  const finalPrefix =\n    isLoading && resolvedLoadingSlot === 'prefix' ? <LoadingIcon /> : prefix;\n\n  // Build final suffix: loading icon, custom suffix, or HotKeys hint\n  const finalSuffix =\n    isLoading && resolvedLoadingSlot === 'suffix' ? (\n      <LoadingIcon />\n    ) : (\n      suffix ??\n      (hotkeys ? (\n        <HotKeys\n          {...(keyboardShortcutProps as any)}\n          type={type === 'primary' ? 'primary' : 'default'}\n          styles={{ padding: '1x left', opacity: finalIsDisabled ? 0.5 : 1 }}\n        >\n          {hotkeys}\n        </HotKeys>\n      ) : undefined)\n    );\n\n  // Register global hotkey if provided\n  useHotkeys(\n    typeof hotkeys === 'string' ? hotkeys.toLowerCase() : '',\n    () => {\n      if (!hotkeys) return;\n      if (finalIsDisabled) return;\n      // Simulate a click on the element so all existing handlers run\n      if (ref && typeof ref === 'object' && ref.current) {\n        (ref.current as HTMLElement).click();\n      }\n    },\n    {\n      enableOnContentEditable: true,\n      enabled: !!hotkeys,\n      preventDefault: true,\n      enableOnFormTags: true,\n    },\n    [hotkeys, finalIsDisabled],\n  );\n\n  const finalMods = useMemo<ItemMods>(() => {\n    return {\n      ...baseMods,\n      'has-icon': hasIconSlot,\n      'has-start-content': !!(hasIconSlot || finalPrefix),\n      'has-end-content': !!(hasRightIconSlot || finalSuffix || actions),\n      'has-right-icon': hasRightIconSlot,\n      'has-label': hasLabel,\n      'has-prefix': !!finalPrefix,\n      'has-suffix': !!finalSuffix,\n      'has-description': showDescription,\n      'has-actions': !!actions,\n      'has-actions-content': !!(actions && actions !== true),\n      'auto-hide-actions': autoHideActions === true,\n      'preserve-actions-space': preserveActionsSpace === true,\n      'inside-wrapper': insideWrapper,\n      'actions-shown': showActions && insideWrapper,\n      checkbox: hasCheckbox,\n      description: showDescription ? finalDescriptionPlacement : 'none',\n    };\n  }, [\n    baseMods,\n    hasIconSlot,\n    hasRightIconSlot,\n    finalPrefix,\n    finalSuffix,\n    showDescription,\n    finalDescriptionPlacement,\n    hasCheckbox,\n    actions,\n    autoHideActions,\n    preserveActionsSpace,\n    hasLabel,\n    showActions,\n    insideWrapper,\n  ]);\n\n  const {\n    labelProps: finalLabelProps,\n    labelRef,\n    renderWithTooltip,\n  } = useAutoTooltip({\n    tooltip,\n    children,\n    labelProps,\n    isDynamicLabel: !!actions,\n  });\n\n  // Process children with highlight if applicable\n  const processedChildren = useMemo(() => {\n    if (typeof children === 'string' && highlight) {\n      return highlightText(\n        children,\n        highlight,\n        highlightCaseSensitive,\n        highlightStyles,\n      );\n    }\n    return children;\n  }, [children, highlight, highlightCaseSensitive, highlightStyles]);\n\n  // Render function that creates the item element\n  const renderItemElement = (\n    tooltipTriggerProps?: HTMLAttributes<HTMLElement>,\n    tooltipRef?: RefObject<HTMLElement>,\n  ) => {\n    // Use callback ref to merge multiple refs without calling hooks\n    const handleRef = (element: HTMLElement | null) => {\n      // Set the component's forwarded ref\n      if (typeof ref === 'function') {\n        ref(element as T | null);\n      } else if (ref) {\n        (ref as any).current = element;\n      }\n      // Set the tooltip ref if provided\n      if (tooltipRef) {\n        (tooltipRef as any).current = element;\n      }\n    };\n\n    return (\n      <ItemElement\n        ref={handleRef}\n        variant={\n          theme && type\n            ? (`${type === 'header' ? 'default' : theme}.${type === 'header' ? 'item' : type}` as ItemVariant)\n            : undefined\n        }\n        disabled={finalIsDisabled}\n        aria-disabled={finalIsDisabled}\n        aria-selected={isSelected}\n        mods={finalMods}\n        styles={styles}\n        tokens={sizeTokenValue ? { $size: sizeTokenValue } : undefined}\n        type={htmlType as any}\n        {...mergeProps(rest, tooltipTriggerProps || {})}\n        style={style}\n      >\n        {hasIconSlot && (\n          <div data-element=\"Icon\">\n            <IconSwitch noWrapper contentKey={iconKey}>\n              {hasCheckbox ? <CheckIcon /> : finalIcon}\n            </IconSwitch>\n          </div>\n        )}\n        {finalPrefix && <div data-element=\"Prefix\">{finalPrefix}</div>}\n        {children || labelProps\n          ? (() => {\n              const LabelTag =\n                type === 'header' || type === 'card'\n                  ? (`h${level}` as const)\n                  : 'div';\n              return (\n                <LabelTag\n                  data-element=\"Label\"\n                  {...finalLabelProps}\n                  ref={labelRef}\n                >\n                  {processedChildren}\n                </LabelTag>\n              );\n            })()\n          : null}\n        {showDescription ? (\n          <div data-element=\"Description\" {...descriptionProps}>\n            {description}\n          </div>\n        ) : null}\n        {finalSuffix && <div data-element=\"Suffix\">{finalSuffix}</div>}\n        {hasRightIconSlot && (\n          <div data-element=\"RightIcon\">\n            <IconSwitch noWrapper contentKey={rightIconKey}>\n              {finalRightIcon}\n            </IconSwitch>\n          </div>\n        )}\n        {actions && (\n          <div data-element=\"Actions\" {...ACTIONS_EVENT_HANDLERS}>\n            {actions !== true ? (\n              <ItemActionProvider\n                type={type}\n                theme={theme}\n                disableActionsFocus={disableActionsFocus}\n                isDisabled={finalIsDisabled}\n              >\n                {actions}\n              </ItemActionProvider>\n            ) : null}\n          </div>\n        )}\n      </ItemElement>\n    );\n  };\n\n  return renderWithTooltip(renderItemElement, defaultTooltipPlacement);\n};\n\nconst _Item = Object.assign(forwardRef(Item), {\n  Action: ItemAction,\n  Badge: ItemBadge,\n});\n\nexport { _Item as Item };\n\n/**\n * @deprecated Use `Item` instead. This export will be removed in a future version.\n */\nexport { _Item as ItemBase };\nexport type { CubeItemProps as CubeItemBaseProps };\n"],"mappings":"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"}
+{"version":3,"file":"Item.js","names":["HotKeys"],"sources":["../../../../src/components/content/Item/Item.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Mods,\n  Props,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  isValidElement,\n  KeyboardEvent,\n  MouseEvent,\n  PointerEvent,\n  ReactNode,\n  RefObject,\n  useMemo,\n} from 'react';\nimport { OverlayProps } from 'react-aria';\nimport { useHotkeys } from 'react-hotkeys-hook';\n\nimport { useWarn } from '../../../_internal/hooks/use-warn';\nimport {\n  DANGER_CARD_STYLES,\n  DANGER_CLEAR_STYLES,\n  DANGER_ITEM_STYLES,\n  DANGER_LINK_STYLES,\n  DANGER_NEUTRAL_STYLES,\n  DANGER_OUTLINE_STYLES,\n  DANGER_PRIMARY_STYLES,\n  DANGER_SECONDARY_STYLES,\n  DEFAULT_CARD_STYLES,\n  DEFAULT_CLEAR_STYLES,\n  DEFAULT_ITEM_STYLES,\n  DEFAULT_LINK_STYLES,\n  DEFAULT_NEUTRAL_STYLES,\n  DEFAULT_OUTLINE_STYLES,\n  DEFAULT_PRIMARY_STYLES,\n  DEFAULT_SECONDARY_STYLES,\n  ItemVariant,\n  NOTE_CARD_STYLES,\n  NOTE_CLEAR_STYLES,\n  NOTE_ITEM_STYLES,\n  NOTE_LINK_STYLES,\n  NOTE_NEUTRAL_STYLES,\n  NOTE_OUTLINE_STYLES,\n  NOTE_PRIMARY_STYLES,\n  NOTE_SECONDARY_STYLES,\n  SPECIAL_CLEAR_STYLES,\n  SPECIAL_ITEM_STYLES,\n  SPECIAL_LINK_STYLES,\n  SPECIAL_NEUTRAL_STYLES,\n  SPECIAL_OUTLINE_STYLES,\n  SPECIAL_PRIMARY_STYLES,\n  SPECIAL_SECONDARY_STYLES,\n  SUCCESS_CARD_STYLES,\n  SUCCESS_CLEAR_STYLES,\n  SUCCESS_ITEM_STYLES,\n  SUCCESS_LINK_STYLES,\n  SUCCESS_NEUTRAL_STYLES,\n  SUCCESS_OUTLINE_STYLES,\n  SUCCESS_PRIMARY_STYLES,\n  SUCCESS_SECONDARY_STYLES,\n  WARNING_CARD_STYLES,\n  WARNING_CLEAR_STYLES,\n  WARNING_ITEM_STYLES,\n  WARNING_LINK_STYLES,\n  WARNING_NEUTRAL_STYLES,\n  WARNING_OUTLINE_STYLES,\n  WARNING_PRIMARY_STYLES,\n  WARNING_SECONDARY_STYLES,\n} from '../../../data/item-themes';\nimport { CheckIcon } from '../../../icons/CheckIcon';\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { DynamicIcon, mergeProps, resolveIcon } from '../../../utils/react';\nimport { ItemAction } from '../../actions/ItemAction';\nimport { ItemActionProvider } from '../../actions/ItemActionContext';\nimport { IconSwitch } from '../../helpers/IconSwitch/IconSwitch';\nimport { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';\nimport { highlightText } from '../highlightText';\nimport { HotKeys } from '../HotKeys';\nimport { ItemBadge } from '../ItemBadge';\nimport { useAutoTooltip } from '../use-auto-tooltip';\n\nconst ITEM_SIZE_VALUES = [\n  'xsmall',\n  'small',\n  'medium',\n  'large',\n  'xlarge',\n  'inline',\n] as const;\n\n/** Known modifiers for Item component */\nexport type ItemMods = Mods<{\n  'has-icon'?: boolean;\n  'has-start-content'?: boolean;\n  'has-end-content'?: boolean;\n  'has-right-icon'?: boolean;\n  'has-label'?: boolean;\n  'has-prefix'?: boolean;\n  'has-suffix'?: boolean;\n  'has-description'?: boolean;\n  'has-actions'?: boolean;\n  'has-actions-content'?: boolean;\n  'auto-hide-actions'?: boolean;\n  'preserve-actions-space'?: boolean;\n  checkbox?: boolean;\n  disabled?: boolean;\n  selected?: boolean;\n  loading?: boolean;\n  size?: string;\n  description?: string;\n  type?: string;\n  theme?: string;\n  shape?: string;\n}>;\n\nexport interface CubeItemProps extends BaseProps, ContainerStyleProps {\n  icon?: DynamicIcon<ItemMods> | 'checkbox';\n  rightIcon?: DynamicIcon<ItemMods>;\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  description?: ReactNode;\n  descriptionPlacement?: 'inline' | 'block';\n  /**\n   * When true, the item is rendered inside a wrapper element to separate the actions from the item.\n   * @default false\n   */\n  insideWrapper?: boolean;\n  /**\n   * Whether the item is selected.\n   * @default false\n   */\n  isSelected?: boolean;\n  /**\n   * Actions to render inline or placeholder mode for ItemButton wrapper.\n   * - ReactNode: renders actions inline as part of the grid layout\n   * - true: placeholder mode for ItemButton (enables --actions-width calculation)\n   */\n  actions?: ReactNode | true;\n  /**\n   * When true, actions are hidden by default and shown only on hover, focus, or focus-within.\n   * Uses opacity transition for visual hiding while maintaining layout space.\n   */\n  autoHideActions?: boolean;\n  /**\n   * When true and insideWrapper is true, this controls the visibility of the actions.\n   * @default false\n   */\n  showActions?: boolean;\n  /**\n   * When true, preserves the actions width when hidden (only changes opacity).\n   * Only applies when autoHideActions is true.\n   * @default false\n   */\n  preserveActionsSpace?: boolean;\n  /**\n   * When true, disables focus on action buttons by setting tabIndex={-1}.\n   * @default true\n   */\n  disableActionsFocus?: boolean;\n  size?:\n    | 'xsmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xlarge'\n    | 'inline'\n    | number\n    | (string & {});\n  type?:\n    | 'item'\n    | 'header'\n    | 'primary'\n    | 'secondary'\n    | 'outline'\n    | 'neutral'\n    | 'clear'\n    | 'link'\n    | 'card'\n    | (string & {});\n  theme?:\n    | 'default'\n    | 'danger'\n    | 'success'\n    | 'special'\n    | 'warning'\n    | 'note'\n    | (string & {});\n  /** Keyboard shortcut that triggers the element when pressed */\n  hotkeys?: string;\n  /**\n   * Tooltip content and configuration:\n   * - string: simple tooltip text\n   * - true: auto tooltip on overflow (shows children as tooltip when truncated)\n   * - object: advanced configuration with optional auto property\n   */\n  tooltip?:\n    | string\n    | boolean\n    | (Omit<CubeTooltipProviderProps, 'children'> & { auto?: boolean });\n  /**\n   * HTML button type to avoid implicit form submission when used as `as=\"button\"`.\n   * Kept separate from visual `type` prop.\n   */\n  htmlType?: 'button' | 'submit' | 'reset';\n  labelProps?: Props;\n  descriptionProps?: Props;\n  keyboardShortcutProps?: Props;\n  /**\n   * The slot which the loading icon should replace in loading state.\n   * - \"auto\": Smart selection - prefers icon if present, then rightIcon, fallback to icon\n   * - Specific slot names: Always use that slot\n   * @default \"auto\"\n   */\n  loadingSlot?: 'auto' | 'icon' | 'rightIcon' | 'prefix' | 'suffix';\n  /**\n   * When true, shows loading state by replacing the specified slot with LoadingIcon\n   * and makes the component disabled.\n   */\n  isLoading?: boolean;\n  /**\n   * Shape of the item's border radius.\n   * - `card` - Card shape with larger border radius (`1cr`)\n   * - `button` - Button shape with default border radius (default)\n   * - `sharp` - Sharp corners with no border radius (`0`)\n   * - `pill` - Pill shape with fully rounded ends (`round`)\n   * @default \"button\"\n   */\n  shape?: 'card' | 'button' | 'sharp' | 'pill';\n  /**\n   * @private\n   * Default tooltip placement for the item.\n   * @default \"top\"\n   */\n  defaultTooltipPlacement?: OverlayProps['placement'];\n  /**\n   * Ref to access the label element directly\n   */\n  labelRef?: RefObject<HTMLElement>;\n  /**\n   * Heading level for the Label element when type=\"header\" or type=\"card\".\n   * Changes the Label's HTML tag to the corresponding heading (h1-h6).\n   * @default 3\n   */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * String to highlight within children.\n   * Only works when children is a plain string.\n   */\n  highlight?: string;\n  /**\n   * Whether highlight matching is case-sensitive.\n   * @default false\n   */\n  highlightCaseSensitive?: boolean;\n  /**\n   * Custom styles for highlighted text.\n   */\n  highlightStyles?: Styles;\n  /**\n   * Variant of the item.\n   */\n  variant?: ItemVariant;\n}\n\nconst DEFAULT_ICON_STYLES: Styles = {\n  $: '>',\n  display: 'grid',\n  placeItems: 'center',\n  placeContent: 'stretch',\n  aspectRatio: '1 / 1',\n  width: '($size - 2bw)',\n  opacity: {\n    '': 1,\n    'checkbox & selected': 1,\n    'checkbox & !selected': 0,\n    'checkbox & !selected & hovered': 0.4,\n  },\n};\n\nconst ADDITION_STYLES: Styles = {\n  $: '>',\n  display: 'grid',\n  flow: 'column',\n  placeItems: 'center',\n  placeContent: 'stretch',\n};\n\nconst ACTIONS_EVENT_HANDLERS = {\n  onClick: (e: MouseEvent) => e.stopPropagation(),\n  onPointerDown: (e: PointerEvent) => e.stopPropagation(),\n  onPointerUp: (e: PointerEvent) => e.stopPropagation(),\n  onMouseDown: (e: MouseEvent) => e.stopPropagation(),\n  onMouseUp: (e: MouseEvent) => e.stopPropagation(),\n  onKeyDown: (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.stopPropagation();\n    }\n  },\n};\n\nconst ItemElement = tasty({\n  as: 'div',\n  styles: {\n    '@interacted':\n      'active | :hover | :focus | :focus-within | :has([data-pressed])',\n\n    display: 'inline-grid',\n    flow: 'column dense',\n    gap: 0,\n    outline: 0,\n    placeItems: 'stretch',\n    placeContent: 'stretch',\n    gridTemplate: {\n      '': '\"icon prefix label suffix rightIcon actions\" auto \"icon prefix label suffix rightIcon actions\" auto / max-content max-content 1sf max-content max-content max-content',\n      'description=inline':\n        '\"icon prefix description suffix rightIcon actions\" auto / max-content max-content 1sf max-content max-content max-content',\n      'description=inline & has-label':\n        '\"icon prefix label suffix rightIcon actions\" auto \"icon prefix description suffix rightIcon actions\" auto / max-content max-content 1sf max-content max-content max-content',\n      'description=block':\n        '\"icon prefix label suffix rightIcon actions\" auto \"description description description description description description\" auto / max-content max-content 1sf max-content max-content max-content',\n    },\n    // Prevent items from shrinking inside vertical flex layouts (Menu, ListBox, etc)\n    flexShrink: {\n      '': 'initial',\n      'menuitem | listboxitem': 0,\n    },\n    position: 'relative',\n    padding: {\n      '': 0,\n      'type=card': '.5x',\n    },\n    margin: 0,\n    radius: {\n      '': true,\n      'shape=card': '1cr',\n      'shape=button': true,\n      'shape=sharp': '0',\n      'shape=pill': 'round',\n    },\n    height: {\n      '': 'min $size',\n      'size=inline': '(1lh + 2bw)',\n    },\n    width: {\n      '': 'min $size',\n      'has-icon & has-right-icon': 'min ($size * 2)',\n      'size=inline': 'min (1lh + 2bw)',\n    },\n    border: '#clear',\n    fill: {\n      '': '#dark.0',\n      'hovered | focused': '#dark.03',\n      selected: '#dark.09',\n      'selected & (hovered | focused)': '#dark.12',\n      pressed: '#dark.09',\n      disabled: '#clear',\n    },\n    color: {\n      '': '#dark-02',\n      hovered: '#dark-02',\n      pressed: '#dark',\n      disabled: '#dark-04',\n    },\n    preset: {\n      '': 't3',\n      '!type=item': 't3m',\n      'size=xsmall': 't4',\n      'size=xlarge': 't2',\n      'size=inline': 'inline',\n      '!type=item & (size=medium | size=small | size=large)': 't3m',\n      '!type=item & size=xlarge': 't2m',\n      '(type=header | type=card) & (size=xsmall | size=small | size=medium)':\n        'h6',\n      '(type=header | type=card) & size=large': 'h5',\n      '(type=header | type=card) & size=xlarge': 'h4',\n    },\n    recipe: 'reset button',\n    transition: 'theme',\n    outlineOffset: 1,\n    cursor: {\n      '': 'inherit',\n      ':is(a)': 'pointer',\n      ':is(button) | listboxitem | menuitem': '$pointer',\n      disabled: 'not-allowed',\n    },\n\n    $size: {\n      '': '$size-md',\n      'size=xsmall': '$size-xs',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n      'size=xlarge': '$size-xl',\n      'size=inline': '(1lh + 2bw)',\n    },\n    '$inline-padding':\n      'max($min-inline-padding, (($size - 1lh - 2bw) / 2 + $inline-compensation))',\n    '$block-padding': {\n      '': '.5x',\n      'size=xsmall | size=small': '.25x',\n      'size=inline': 0,\n    },\n    '$inline-compensation': '.5x',\n    '$min-inline-padding': '(1x - 1bw)',\n\n    '$label-padding-left': {\n      '': '$inline-padding',\n      'has-start-content': '0',\n    },\n    '$label-padding-right': {\n      '': '$inline-padding',\n      'has-end-content': '0',\n      // Restore padding when actions are hidden AND no other visible end content\n      '!inside-wrapper & !has-suffix & !has-right-icon & auto-hide-actions & !preserve-actions-space & !@interacted':\n        '$inline-padding',\n      'inside-wrapper & !has-suffix & !has-right-icon & !preserve-actions-space & !actions-shown':\n        '$inline-padding',\n    },\n    '$label-padding-bottom': {\n      '': '$block-padding',\n      'description=inline': '0',\n    },\n    '$description-padding-left': {\n      '': '$inline-padding',\n      'has-start-content': 0,\n      'description=block': '($inline-padding - $inline-compensation + 1bw)',\n      'description=block & !has-start-content': '$inline-padding',\n    },\n    '$description-padding-right': {\n      '': '$inline-padding',\n      'has-end-content': 0,\n      'description=block': '($inline-padding - $inline-compensation + 1bw)',\n      'description=block & !has-end-content': '$inline-padding',\n    },\n    '$description-padding-bottom': {\n      '': 0,\n      'has-label & description=inline': '$block-padding',\n      'has-label & description=block':\n        'max($block-padding, (($size - 4x) / 2) + $block-padding)',\n    },\n\n    Icon: { ...DEFAULT_ICON_STYLES, gridArea: 'icon' },\n\n    RightIcon: { ...DEFAULT_ICON_STYLES, gridArea: 'rightIcon' },\n\n    Label: {\n      $: '>',\n      margin: 0,\n      gridArea: 'label',\n      display: 'block',\n      placeSelf: 'center start',\n      boxSizing: 'border-box',\n      placeContent: 'stretch',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      width: '0 100%',\n      preset: 'inherit',\n      transition: 'padding',\n      padding:\n        '$block-padding $label-padding-right $label-padding-bottom $label-padding-left',\n    },\n\n    Description: {\n      $: '>',\n      gridArea: 'description',\n      preset: {\n        '': 't4',\n        'type=card | type=header': 't3',\n      },\n      placeSelf: 'center start',\n      boxSizing: 'border-box',\n      color: 'inherit',\n      opacity: {\n        '': 0.75,\n        'type=card | type=header': 1,\n      },\n      overflow: 'hidden',\n      whiteSpace: {\n        '': 'nowrap',\n        'type=card | type=header': 'normal',\n      },\n      textOverflow: 'ellipsis',\n      width: 'initial 100% 100%',\n      textAlign: 'left',\n      padding:\n        '0 $description-padding-right $description-padding-bottom $description-padding-left',\n    },\n\n    Prefix: {\n      ...ADDITION_STYLES,\n      gridArea: 'prefix',\n      padding: {\n        '': '$inline-padding left',\n        'has-icon': 0,\n      },\n    },\n\n    Suffix: {\n      ...ADDITION_STYLES,\n      gridArea: 'suffix',\n      padding: {\n        '': '$inline-padding right',\n        'has-right-icon': 0,\n      },\n    },\n\n    Actions: {\n      $: '>',\n      gridArea: 'actions',\n      display: 'flex',\n      gap: '1bw',\n      placeItems: 'center',\n      placeContent: 'end',\n      placeSelf: 'stretch',\n      padding: {\n        '': '0 $side-padding',\n        'inside-wrapper & !actions-shown': 0,\n      },\n      boxSizing: 'border-box',\n      height: 'min ($size - 2bw)',\n      width: {\n        '': 'fixed ($actions-width, 0px)',\n        'has-actions-content & !auto-hide-actions':\n          'max calc-size(max-content, size)',\n        'has-actions-content & auto-hide-actions & !preserve-actions-space':\n          'max 0px',\n        'has-actions-content & auto-hide-actions & (!preserve-actions-space & ((@interacted & !inside-wrapper) | (inside-wrapper & actions-shown)))':\n          'max calc-size(max-content, size)',\n        'has-actions-content & auto-hide-actions & preserve-actions-space':\n          'max calc-size(max-content, size)',\n      },\n      opacity: {\n        '': 1,\n        'auto-hide-actions': 0,\n        'auto-hide-actions & ((@interacted & !inside-wrapper) | (inside-wrapper & actions-shown))': 1,\n      },\n      transition:\n        'width $transition ease-out, opacity $transition ease-out, padding $transition ease-out',\n      interpolateSize: 'allow-keywords',\n\n      // Size for the action buttons\n      '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))',\n      // Side padding for the button\n      '$side-padding': '(($size - $action-size - 2bw) / 2)',\n    },\n  },\n  variants: {\n    // Default theme\n    'default.primary': DEFAULT_PRIMARY_STYLES,\n    'default.secondary': DEFAULT_SECONDARY_STYLES,\n    'default.outline': DEFAULT_OUTLINE_STYLES,\n    'default.neutral': DEFAULT_NEUTRAL_STYLES,\n    'default.clear': DEFAULT_CLEAR_STYLES,\n    'default.link': DEFAULT_LINK_STYLES,\n    'default.item': DEFAULT_ITEM_STYLES,\n    'default.card': DEFAULT_CARD_STYLES,\n    // Danger theme\n    'danger.primary': DANGER_PRIMARY_STYLES,\n    'danger.secondary': DANGER_SECONDARY_STYLES,\n    'danger.outline': DANGER_OUTLINE_STYLES,\n    'danger.neutral': DANGER_NEUTRAL_STYLES,\n    'danger.clear': DANGER_CLEAR_STYLES,\n    'danger.link': DANGER_LINK_STYLES,\n    'danger.item': DANGER_ITEM_STYLES,\n    'danger.card': DANGER_CARD_STYLES,\n    // Success theme\n    'success.primary': SUCCESS_PRIMARY_STYLES,\n    'success.secondary': SUCCESS_SECONDARY_STYLES,\n    'success.outline': SUCCESS_OUTLINE_STYLES,\n    'success.neutral': SUCCESS_NEUTRAL_STYLES,\n    'success.clear': SUCCESS_CLEAR_STYLES,\n    'success.link': SUCCESS_LINK_STYLES,\n    'success.item': SUCCESS_ITEM_STYLES,\n    'success.card': SUCCESS_CARD_STYLES,\n    // Warning theme\n    'warning.primary': WARNING_PRIMARY_STYLES,\n    'warning.secondary': WARNING_SECONDARY_STYLES,\n    'warning.outline': WARNING_OUTLINE_STYLES,\n    'warning.neutral': WARNING_NEUTRAL_STYLES,\n    'warning.clear': WARNING_CLEAR_STYLES,\n    'warning.link': WARNING_LINK_STYLES,\n    'warning.item': WARNING_ITEM_STYLES,\n    'warning.card': WARNING_CARD_STYLES,\n    // Note theme\n    'note.primary': NOTE_PRIMARY_STYLES,\n    'note.secondary': NOTE_SECONDARY_STYLES,\n    'note.outline': NOTE_OUTLINE_STYLES,\n    'note.neutral': NOTE_NEUTRAL_STYLES,\n    'note.clear': NOTE_CLEAR_STYLES,\n    'note.link': NOTE_LINK_STYLES,\n    'note.item': NOTE_ITEM_STYLES,\n    'note.card': NOTE_CARD_STYLES,\n    // Special theme\n    'special.primary': SPECIAL_PRIMARY_STYLES,\n    'special.secondary': SPECIAL_SECONDARY_STYLES,\n    'special.outline': SPECIAL_OUTLINE_STYLES,\n    'special.neutral': SPECIAL_NEUTRAL_STYLES,\n    'special.clear': SPECIAL_CLEAR_STYLES,\n    'special.link': SPECIAL_LINK_STYLES,\n    'special.item': SPECIAL_ITEM_STYLES,\n  },\n  styleProps: CONTAINER_STYLES,\n});\n\nconst Item = <T extends HTMLElement = HTMLDivElement>(\n  props: CubeItemProps,\n  ref: ForwardedRef<T>,\n) => {\n  let {\n    children,\n    size = 'medium',\n    type = 'item',\n    theme = 'default',\n    mods,\n    icon: iconProp,\n    rightIcon: rightIconProp,\n    prefix,\n    suffix,\n    description,\n    descriptionPlacement,\n    labelProps,\n    descriptionProps,\n    keyboardShortcutProps,\n    styles,\n    htmlType,\n    isSelected,\n    hotkeys,\n    tooltip = true,\n    isDisabled,\n    style,\n    loadingSlot = 'auto',\n    isLoading = false,\n    actions,\n    autoHideActions = false,\n    preserveActionsSpace = false,\n    disableActionsFocus = false,\n    shape,\n    defaultTooltipPlacement = 'top',\n    level = 3,\n    highlight,\n    highlightCaseSensitive = false,\n    highlightStyles,\n    insideWrapper = false,\n    showActions = false,\n    ...rest\n  } = props;\n\n  // Determine if Label will be rendered\n  const hasLabel = !!(children || labelProps);\n\n  // Set default descriptionPlacement based on type\n  // For card/header types, use 'block' only when Label is rendered\n  const finalDescriptionPlacement =\n    descriptionPlacement ??\n    ((type === 'card' || type === 'header') && hasLabel ? 'block' : 'inline');\n\n  // Set default shape based on type\n  const finalShape = shape ?? (type === 'card' ? 'card' : 'button');\n\n  // Loading state makes the component disabled\n  const finalIsDisabled =\n    isDisabled === true || (isLoading && isDisabled !== false);\n\n  // Validate type+theme combinations\n  const STANDARD_THEMES = [\n    'default',\n    'success',\n    'danger',\n    'warning',\n    'note',\n    'special',\n  ];\n  const CARD_THEMES = ['default', 'success', 'danger', 'warning', 'note'];\n  const HEADER_THEMES = ['default'];\n\n  const isInvalidCombination =\n    (type === 'header' && !HEADER_THEMES.includes(theme)) ||\n    (type === 'card' && !CARD_THEMES.includes(theme)) ||\n    (!['header', 'card'].includes(type) && !STANDARD_THEMES.includes(theme));\n\n  useWarn(isInvalidCombination, {\n    key: ['Item', 'invalid-type-theme', type, theme],\n    args: [\n      `Item: Invalid type+theme combination. type=\"${type}\" does not support theme=\"${theme}\".` +\n        (type === 'header'\n          ? ' The \"header\" type only supports theme: default.'\n          : type === 'card'\n            ? ' The \"card\" type only supports themes: default, success, danger, warning, note.'\n            : ' Standard types support themes: default, success, danger, warning, note, special.'),\n    ],\n  });\n\n  // Warn if link type is used with icons or loading state\n  const hasLinkWithIcons = type === 'link' && (iconProp || rightIconProp);\n  const hasLinkWithLoading = type === 'link' && isLoading;\n  const hasLinkRestrictions = hasLinkWithIcons || hasLinkWithLoading;\n\n  const linkRestrictionMessages: string[] = [];\n  if (hasLinkWithIcons) {\n    linkRestrictionMessages.push('icons (`icon` or `rightIcon` props)');\n  }\n  if (hasLinkWithLoading) {\n    linkRestrictionMessages.push('loading state (`isLoading` prop)');\n  }\n\n  useWarn(hasLinkRestrictions, {\n    key: ['Item', 'link-restrictions'],\n    args: [\n      `Item: The \"link\" type does not support ${linkRestrictionMessages.join(' or ')}. Remove these props when using type=\"link\".`,\n    ],\n  });\n\n  // Determine if we should show checkbox instead of icon\n  const hasCheckbox = iconProp === 'checkbox';\n\n  // Determine if size is custom (number or unrecognized string)\n  const isCustomSize =\n    typeof size === 'number' ||\n    !(ITEM_SIZE_VALUES as readonly string[]).includes(size);\n  const sizeTokenValue =\n    typeof size === 'number' ? `${size}px` : isCustomSize ? size : undefined;\n\n  // Base mods for icon resolution (without icon-dependent mods)\n  const baseMods = useMemo<ItemMods>(\n    () => ({\n      disabled: finalIsDisabled,\n      selected: isSelected === true,\n      loading: isLoading,\n      ...(!isCustomSize && { size: size as string }),\n      type,\n      theme,\n      shape: finalShape,\n      ...mods,\n    }),\n    [\n      finalIsDisabled,\n      isSelected,\n      isLoading,\n      size,\n      isCustomSize,\n      type,\n      theme,\n      finalShape,\n      mods,\n    ],\n  );\n\n  // Resolve dynamic icon props (skip resolution for 'checkbox' special value)\n  const resolvedIcon = useMemo(() => {\n    if (hasCheckbox) {\n      return { content: null, hasSlot: true };\n    }\n    return resolveIcon(iconProp as DynamicIcon<ItemMods>, baseMods);\n  }, [iconProp, baseMods, hasCheckbox]);\n\n  const resolvedRightIcon = useMemo(\n    () => resolveIcon(rightIconProp, baseMods),\n    [rightIconProp, baseMods],\n  );\n\n  // Determine which slot to use for loading when \"auto\" is selected\n  // Must be computed before hasIconSlot/hasRightIconSlot since they depend on it\n  const resolvedLoadingSlot = useMemo(() => {\n    if (loadingSlot !== 'auto') return loadingSlot;\n\n    // Auto logic: prefer icon if present, then rightIcon, fallback to icon\n    if (resolvedRightIcon.hasSlot && !resolvedIcon.hasSlot) return 'rightIcon';\n    return 'icon'; // fallback\n  }, [loadingSlot, resolvedIcon.hasSlot, resolvedRightIcon.hasSlot]);\n\n  // Determine if icon slots should render (original slot OR loading state targets this slot)\n  const hasIconSlot =\n    resolvedIcon.hasSlot || (isLoading && resolvedLoadingSlot === 'icon');\n  const hasRightIconSlot =\n    resolvedRightIcon.hasSlot ||\n    (isLoading && resolvedLoadingSlot === 'rightIcon');\n\n  const showDescription = useMemo(() => {\n    const copyProps = { ...descriptionProps };\n    delete copyProps.id;\n    return !!(description || Object.keys(copyProps).length > 0);\n  }, [description, descriptionProps]);\n\n  // Apply loading state to appropriate slots\n  const finalIcon =\n    isLoading && resolvedLoadingSlot === 'icon' ? (\n      <LoadingIcon />\n    ) : (\n      resolvedIcon.content\n    );\n  const finalRightIcon =\n    isLoading && resolvedLoadingSlot === 'rightIcon' ? (\n      <LoadingIcon />\n    ) : (\n      resolvedRightIcon.content\n    );\n\n  // Generate stable keys for icon transitions based on icon type\n  const iconKey = hasCheckbox\n    ? 'checkbox'\n    : isLoading && resolvedLoadingSlot === 'icon'\n      ? 'loading'\n      : isValidElement(finalIcon)\n        ? (finalIcon.type as any)?.displayName ||\n          (finalIcon.type as any)?.name ||\n          'icon'\n        : finalIcon\n          ? 'icon'\n          : 'empty';\n\n  const rightIconKey =\n    isLoading && resolvedLoadingSlot === 'rightIcon'\n      ? 'loading'\n      : isValidElement(finalRightIcon)\n        ? (finalRightIcon.type as any)?.displayName ||\n          (finalRightIcon.type as any)?.name ||\n          'icon'\n        : finalRightIcon\n          ? 'icon'\n          : 'empty';\n  const finalPrefix =\n    isLoading && resolvedLoadingSlot === 'prefix' ? <LoadingIcon /> : prefix;\n\n  // Build final suffix: loading icon, custom suffix, or HotKeys hint\n  const finalSuffix =\n    isLoading && resolvedLoadingSlot === 'suffix' ? (\n      <LoadingIcon />\n    ) : (\n      suffix ??\n      (hotkeys ? (\n        <HotKeys\n          {...(keyboardShortcutProps as any)}\n          type={type === 'primary' ? 'primary' : 'default'}\n          styles={{ padding: '1x left', opacity: finalIsDisabled ? 0.5 : 1 }}\n        >\n          {hotkeys}\n        </HotKeys>\n      ) : undefined)\n    );\n\n  // Register global hotkey if provided\n  useHotkeys(\n    typeof hotkeys === 'string' ? hotkeys.toLowerCase() : '',\n    () => {\n      if (!hotkeys) return;\n      if (finalIsDisabled) return;\n      // Simulate a click on the element so all existing handlers run\n      if (ref && typeof ref === 'object' && ref.current) {\n        (ref.current as HTMLElement).click();\n      }\n    },\n    {\n      enableOnContentEditable: true,\n      enabled: !!hotkeys,\n      preventDefault: true,\n      enableOnFormTags: true,\n    },\n    [hotkeys, finalIsDisabled],\n  );\n\n  const finalMods = useMemo<ItemMods>(() => {\n    return {\n      ...baseMods,\n      'has-icon': hasIconSlot,\n      'has-start-content': !!(hasIconSlot || finalPrefix),\n      'has-end-content': !!(hasRightIconSlot || finalSuffix || actions),\n      'has-right-icon': hasRightIconSlot,\n      'has-label': hasLabel,\n      'has-prefix': !!finalPrefix,\n      'has-suffix': !!finalSuffix,\n      'has-description': showDescription,\n      'has-actions': !!actions,\n      'has-actions-content': !!(actions && actions !== true),\n      'auto-hide-actions': autoHideActions === true,\n      'preserve-actions-space': preserveActionsSpace === true,\n      'inside-wrapper': insideWrapper,\n      'actions-shown': showActions && insideWrapper,\n      checkbox: hasCheckbox,\n      description: showDescription ? finalDescriptionPlacement : 'none',\n    };\n  }, [\n    baseMods,\n    hasIconSlot,\n    hasRightIconSlot,\n    finalPrefix,\n    finalSuffix,\n    showDescription,\n    finalDescriptionPlacement,\n    hasCheckbox,\n    actions,\n    autoHideActions,\n    preserveActionsSpace,\n    hasLabel,\n    showActions,\n    insideWrapper,\n  ]);\n\n  const {\n    labelProps: finalLabelProps,\n    labelRef,\n    renderWithTooltip,\n  } = useAutoTooltip({\n    tooltip,\n    children,\n    labelProps,\n    isDynamicLabel: !!actions,\n  });\n\n  // Process children with highlight if applicable\n  const processedChildren = useMemo(() => {\n    if (typeof children === 'string' && highlight) {\n      return highlightText(\n        children,\n        highlight,\n        highlightCaseSensitive,\n        highlightStyles,\n      );\n    }\n    return children;\n  }, [children, highlight, highlightCaseSensitive, highlightStyles]);\n\n  // Render function that creates the item element\n  const renderItemElement = (\n    tooltipTriggerProps?: HTMLAttributes<HTMLElement>,\n    tooltipRef?: RefObject<HTMLElement>,\n  ) => {\n    // Use callback ref to merge multiple refs without calling hooks\n    const handleRef = (element: HTMLElement | null) => {\n      // Set the component's forwarded ref\n      if (typeof ref === 'function') {\n        ref(element as T | null);\n      } else if (ref) {\n        (ref as any).current = element;\n      }\n      // Set the tooltip ref if provided\n      if (tooltipRef) {\n        (tooltipRef as any).current = element;\n      }\n    };\n\n    return (\n      <ItemElement\n        ref={handleRef}\n        variant={\n          theme && type\n            ? (`${type === 'header' ? 'default' : theme}.${type === 'header' ? 'item' : type}` as ItemVariant)\n            : undefined\n        }\n        disabled={finalIsDisabled}\n        aria-disabled={finalIsDisabled}\n        aria-selected={isSelected}\n        mods={finalMods}\n        styles={styles}\n        tokens={sizeTokenValue ? { $size: sizeTokenValue } : undefined}\n        type={htmlType as any}\n        {...mergeProps(rest, tooltipTriggerProps || {})}\n        style={style}\n      >\n        {hasIconSlot && (\n          <div data-element=\"Icon\">\n            <IconSwitch noWrapper contentKey={iconKey}>\n              {hasCheckbox ? <CheckIcon /> : finalIcon}\n            </IconSwitch>\n          </div>\n        )}\n        {finalPrefix && <div data-element=\"Prefix\">{finalPrefix}</div>}\n        {children || labelProps\n          ? (() => {\n              const LabelTag =\n                type === 'header' || type === 'card'\n                  ? (`h${level}` as const)\n                  : 'div';\n              return (\n                <LabelTag\n                  data-element=\"Label\"\n                  {...finalLabelProps}\n                  ref={labelRef}\n                >\n                  {processedChildren}\n                </LabelTag>\n              );\n            })()\n          : null}\n        {showDescription ? (\n          <div data-element=\"Description\" {...descriptionProps}>\n            {description}\n          </div>\n        ) : null}\n        {finalSuffix && <div data-element=\"Suffix\">{finalSuffix}</div>}\n        {hasRightIconSlot && (\n          <div data-element=\"RightIcon\">\n            <IconSwitch noWrapper contentKey={rightIconKey}>\n              {finalRightIcon}\n            </IconSwitch>\n          </div>\n        )}\n        {actions && (\n          <div data-element=\"Actions\" {...ACTIONS_EVENT_HANDLERS}>\n            {actions !== true ? (\n              <ItemActionProvider\n                type={type}\n                theme={theme}\n                disableActionsFocus={disableActionsFocus}\n                isDisabled={finalIsDisabled}\n              >\n                {actions}\n              </ItemActionProvider>\n            ) : null}\n          </div>\n        )}\n      </ItemElement>\n    );\n  };\n\n  return renderWithTooltip(renderItemElement, defaultTooltipPlacement);\n};\n\nconst _Item = Object.assign(forwardRef(Item), {\n  Action: ItemAction,\n  Badge: ItemBadge,\n});\n\nexport { _Item as Item };\n\n/**\n * @deprecated Use `Item` instead. This export will be removed in a future version.\n */\nexport { _Item as ItemBase };\nexport type { CubeItemProps as CubeItemBaseProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuFA,MAAM,mBAAmB;CACvB;CACA;CACA;CACA;CACA;CACA;CACD;AAgLD,MAAM,sBAA8B;CAClC,GAAG;CACH,SAAS;CACT,YAAY;CACZ,cAAc;CACd,aAAa;CACb,OAAO;CACP,SAAS;EACP,IAAI;EACJ,uBAAuB;EACvB,wBAAwB;EACxB,kCAAkC;EACnC;CACF;AAED,MAAM,kBAA0B;CAC9B,GAAG;CACH,SAAS;CACT,MAAM;CACN,YAAY;CACZ,cAAc;CACf;AAED,MAAM,yBAAyB;CAC7B,UAAU,MAAkB,EAAE,iBAAiB;CAC/C,gBAAgB,MAAoB,EAAE,iBAAiB;CACvD,cAAc,MAAoB,EAAE,iBAAiB;CACrD,cAAc,MAAkB,EAAE,iBAAiB;CACnD,YAAY,MAAkB,EAAE,iBAAiB;CACjD,YAAY,MAAqB;AAC/B,MAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,IACjC,GAAE,iBAAiB;;CAGxB;AAED,MAAM,cAAc,MAAM;CACxB,IAAI;CACJ,QAAQ;EACN,eACE;EAEF,SAAS;EACT,MAAM;EACN,KAAK;EACL,SAAS;EACT,YAAY;EACZ,cAAc;EACd,cAAc;GACZ,IAAI;GACJ,sBACE;GACF,kCACE;GACF,qBACE;GACH;EAED,YAAY;GACV,IAAI;GACJ,0BAA0B;GAC3B;EACD,UAAU;EACV,SAAS;GACP,IAAI;GACJ,aAAa;GACd;EACD,QAAQ;EACR,QAAQ;GACN,IAAI;GACJ,cAAc;GACd,gBAAgB;GAChB,eAAe;GACf,cAAc;GACf;EACD,QAAQ;GACN,IAAI;GACJ,eAAe;GAChB;EACD,OAAO;GACL,IAAI;GACJ,6BAA6B;GAC7B,eAAe;GAChB;EACD,QAAQ;EACR,MAAM;GACJ,IAAI;GACJ,qBAAqB;GACrB,UAAU;GACV,kCAAkC;GAClC,SAAS;GACT,UAAU;GACX;EACD,OAAO;GACL,IAAI;GACJ,SAAS;GACT,SAAS;GACT,UAAU;GACX;EACD,QAAQ;GACN,IAAI;GACJ,cAAc;GACd,eAAe;GACf,eAAe;GACf,eAAe;GACf,wDAAwD;GACxD,4BAA4B;GAC5B,wEACE;GACF,0CAA0C;GAC1C,2CAA2C;GAC5C;EACD,QAAQ;EACR,YAAY;EACZ,eAAe;EACf,QAAQ;GACN,IAAI;GACJ,UAAU;GACV,wCAAwC;GACxC,UAAU;GACX;EAED,OAAO;GACL,IAAI;GACJ,eAAe;GACf,cAAc;GACd,eAAe;GACf,cAAc;GACd,eAAe;GACf,eAAe;GAChB;EACD,mBACE;EACF,kBAAkB;GAChB,IAAI;GACJ,4BAA4B;GAC5B,eAAe;GAChB;EACD,wBAAwB;EACxB,uBAAuB;EAEvB,uBAAuB;GACrB,IAAI;GACJ,qBAAqB;GACtB;EACD,wBAAwB;GACtB,IAAI;GACJ,mBAAmB;GAEnB,gHACE;GACF,6FACE;GACH;EACD,yBAAyB;GACvB,IAAI;GACJ,sBAAsB;GACvB;EACD,6BAA6B;GAC3B,IAAI;GACJ,qBAAqB;GACrB,qBAAqB;GACrB,0CAA0C;GAC3C;EACD,8BAA8B;GAC5B,IAAI;GACJ,mBAAmB;GACnB,qBAAqB;GACrB,wCAAwC;GACzC;EACD,+BAA+B;GAC7B,IAAI;GACJ,kCAAkC;GAClC,iCACE;GACH;EAED,MAAM;GAAE,GAAG;GAAqB,UAAU;GAAQ;EAElD,WAAW;GAAE,GAAG;GAAqB,UAAU;GAAa;EAE5D,OAAO;GACL,GAAG;GACH,QAAQ;GACR,UAAU;GACV,SAAS;GACT,WAAW;GACX,WAAW;GACX,cAAc;GACd,YAAY;GACZ,UAAU;GACV,cAAc;GACd,OAAO;GACP,QAAQ;GACR,YAAY;GACZ,SACE;GACH;EAED,aAAa;GACX,GAAG;GACH,UAAU;GACV,QAAQ;IACN,IAAI;IACJ,2BAA2B;IAC5B;GACD,WAAW;GACX,WAAW;GACX,OAAO;GACP,SAAS;IACP,IAAI;IACJ,2BAA2B;IAC5B;GACD,UAAU;GACV,YAAY;IACV,IAAI;IACJ,2BAA2B;IAC5B;GACD,cAAc;GACd,OAAO;GACP,WAAW;GACX,SACE;GACH;EAED,QAAQ;GACN,GAAG;GACH,UAAU;GACV,SAAS;IACP,IAAI;IACJ,YAAY;IACb;GACF;EAED,QAAQ;GACN,GAAG;GACH,UAAU;GACV,SAAS;IACP,IAAI;IACJ,kBAAkB;IACnB;GACF;EAED,SAAS;GACP,GAAG;GACH,UAAU;GACV,SAAS;GACT,KAAK;GACL,YAAY;GACZ,cAAc;GACd,WAAW;GACX,SAAS;IACP,IAAI;IACJ,mCAAmC;IACpC;GACD,WAAW;GACX,QAAQ;GACR,OAAO;IACL,IAAI;IACJ,4CACE;IACF,qEACE;IACF,8IACE;IACF,oEACE;IACH;GACD,SAAS;IACP,IAAI;IACJ,qBAAqB;IACrB,4FAA4F;IAC7F;GACD,YACE;GACF,iBAAiB;GAGjB,gBAAgB;GAEhB,iBAAiB;GAClB;EACF;CACD,UAAU;EAER,mBAAmB;EACnB,qBAAqB;EACrB,mBAAmB;EACnB,mBAAmB;EACnB,iBAAiB;EACjB,gBAAgB;EAChB,gBAAgB;EAChB,gBAAgB;EAEhB,kBAAkB;EAClB,oBAAoB;EACpB,kBAAkB;EAClB,kBAAkB;EAClB,gBAAgB;EAChB,eAAe;EACf,eAAe;EACf,eAAe;EAEf,mBAAmB;EACnB,qBAAqB;EACrB,mBAAmB;EACnB,mBAAmB;EACnB,iBAAiB;EACjB,gBAAgB;EAChB,gBAAgB;EAChB,gBAAgB;EAEhB,mBAAmB;EACnB,qBAAqB;EACrB,mBAAmB;EACnB,mBAAmB;EACnB,iBAAiB;EACjB,gBAAgB;EAChB,gBAAgB;EAChB,gBAAgB;EAEhB,gBAAgB;EAChB,kBAAkB;EAClB,gBAAgB;EAChB,gBAAgB;EAChB,cAAc;EACd,aAAa;EACb,aAAa;EACb,aAAa;EAEb,mBAAmB;EACnB,qBAAqB;EACrB,mBAAmB;EACnB,mBAAmB;EACnB,iBAAiB;EACjB,gBAAgB;EAChB,gBAAgB;EACjB;CACD,YAAY;CACb,CAAC;AAEF,MAAM,QACJ,OACA,QACG;CACH,IAAI,EACF,UACA,OAAO,UACP,OAAO,QACP,QAAQ,WACR,MACA,MAAM,UACN,WAAW,eACX,QACA,QACA,aACA,sBACA,YACA,kBACA,uBACA,QACA,UACA,YACA,SACA,UAAU,MACV,YACA,OACA,cAAc,QACd,YAAY,OACZ,SACA,kBAAkB,OAClB,uBAAuB,OACvB,sBAAsB,OACtB,OACA,0BAA0B,OAC1B,QAAQ,GACR,WACA,yBAAyB,OACzB,iBACA,gBAAgB,OAChB,cAAc,OACd,GAAG,SACD;CAGJ,MAAM,WAAW,CAAC,EAAE,YAAY;CAIhC,MAAM,4BACJ,0BACE,SAAS,UAAU,SAAS,aAAa,WAAW,UAAU;CAGlE,MAAM,aAAa,UAAU,SAAS,SAAS,SAAS;CAGxD,MAAM,kBACJ,eAAe,QAAS,aAAa,eAAe;AAmBtD,SAJG,SAAS,YAAY,CAHF,CAAC,UAAU,CAGM,SAAS,MAAM,IACnD,SAAS,UAAU,CALF;EAAC;EAAW;EAAW;EAAU;EAAW;EAAO,CAKpC,SAAS,MAAM,IAC/C,CAAC,CAAC,UAAU,OAAO,CAAC,SAAS,KAAK,IAAI,CAdjB;EACtB;EACA;EACA;EACA;EACA;EACA;EACD,CAOyD,SAAS,MAAM,EAE3C;EAC5B,KAAK;GAAC;GAAQ;GAAsB;GAAM;GAAM;EAChD,MAAM,CACJ,+CAA+C,KAAK,4BAA4B,MAAM,OACnF,SAAS,WACN,uDACA,SAAS,SACP,sFACA,qFACT;EACF,CAAC;CAGF,MAAM,mBAAmB,SAAS,WAAW,YAAY;CACzD,MAAM,qBAAqB,SAAS,UAAU;CAC9C,MAAM,sBAAsB,oBAAoB;CAEhD,MAAM,0BAAoC,EAAE;AAC5C,KAAI,iBACF,yBAAwB,KAAK,sCAAsC;AAErE,KAAI,mBACF,yBAAwB,KAAK,mCAAmC;AAGlE,SAAQ,qBAAqB;EAC3B,KAAK,CAAC,QAAQ,oBAAoB;EAClC,MAAM,CACJ,0CAA0C,wBAAwB,KAAK,OAAO,CAAC,8CAChF;EACF,CAAC;CAGF,MAAM,cAAc,aAAa;CAGjC,MAAM,eACJ,OAAO,SAAS,YAChB,CAAE,iBAAuC,SAAS,KAAK;CACzD,MAAM,iBACJ,OAAO,SAAS,WAAW,GAAG,KAAK,MAAM,eAAe,OAAO;CAGjE,MAAM,WAAW,eACR;EACL,UAAU;EACV,UAAU,eAAe;EACzB,SAAS;EACT,GAAI,CAAC,gBAAgB,EAAQ,MAAgB;EAC7C;EACA;EACA,OAAO;EACP,GAAG;EACJ,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAGD,MAAM,eAAe,cAAc;AACjC,MAAI,YACF,QAAO;GAAE,SAAS;GAAM,SAAS;GAAM;AAEzC,SAAO,YAAY,UAAmC,SAAS;IAC9D;EAAC;EAAU;EAAU;EAAY,CAAC;CAErC,MAAM,oBAAoB,cAClB,YAAY,eAAe,SAAS,EAC1C,CAAC,eAAe,SAAS,CAC1B;CAID,MAAM,sBAAsB,cAAc;AACxC,MAAI,gBAAgB,OAAQ,QAAO;AAGnC,MAAI,kBAAkB,WAAW,CAAC,aAAa,QAAS,QAAO;AAC/D,SAAO;IACN;EAAC;EAAa,aAAa;EAAS,kBAAkB;EAAQ,CAAC;CAGlE,MAAM,cACJ,aAAa,WAAY,aAAa,wBAAwB;CAChE,MAAM,mBACJ,kBAAkB,WACjB,aAAa,wBAAwB;CAExC,MAAM,kBAAkB,cAAc;EACpC,MAAM,YAAY,EAAE,GAAG,kBAAkB;AACzC,SAAO,UAAU;AACjB,SAAO,CAAC,EAAE,eAAe,OAAO,KAAK,UAAU,CAAC,SAAS;IACxD,CAAC,aAAa,iBAAiB,CAAC;CAGnC,MAAM,YACJ,aAAa,wBAAwB,SACnC,oBAAC,gBAAc,GAEf,aAAa;CAEjB,MAAM,iBACJ,aAAa,wBAAwB,cACnC,oBAAC,gBAAc,GAEf,kBAAkB;CAItB,MAAM,UAAU,cACZ,aACA,aAAa,wBAAwB,SACnC,YACA,eAAe,UAAU,GACtB,UAAU,MAAc,eACxB,UAAU,MAAc,QACzB,SACA,YACE,SACA;CAEV,MAAM,eACJ,aAAa,wBAAwB,cACjC,YACA,eAAe,eAAe,GAC3B,eAAe,MAAc,eAC7B,eAAe,MAAc,QAC9B,SACA,iBACE,SACA;CACV,MAAM,cACJ,aAAa,wBAAwB,WAAW,oBAAC,gBAAc,GAAG;CAGpE,MAAM,cACJ,aAAa,wBAAwB,WACnC,oBAAC,gBAAc,GAEf,WACC,UACC,oBAACA;EACC,GAAK;EACL,MAAM,SAAS,YAAY,YAAY;EACvC,QAAQ;GAAE,SAAS;GAAW,SAAS,kBAAkB,KAAM;GAAG;YAEjE;GACO,GACR;AAIR,YACE,OAAO,YAAY,WAAW,QAAQ,aAAa,GAAG,UAChD;AACJ,MAAI,CAAC,QAAS;AACd,MAAI,gBAAiB;AAErB,MAAI,OAAO,OAAO,QAAQ,YAAY,IAAI,QACxC,CAAC,IAAI,QAAwB,OAAO;IAGxC;EACE,yBAAyB;EACzB,SAAS,CAAC,CAAC;EACX,gBAAgB;EAChB,kBAAkB;EACnB,EACD,CAAC,SAAS,gBAAgB,CAC3B;CAED,MAAM,YAAY,cAAwB;AACxC,SAAO;GACL,GAAG;GACH,YAAY;GACZ,qBAAqB,CAAC,EAAE,eAAe;GACvC,mBAAmB,CAAC,EAAE,oBAAoB,eAAe;GACzD,kBAAkB;GAClB,aAAa;GACb,cAAc,CAAC,CAAC;GAChB,cAAc,CAAC,CAAC;GAChB,mBAAmB;GACnB,eAAe,CAAC,CAAC;GACjB,uBAAuB,CAAC,EAAE,WAAW,YAAY;GACjD,qBAAqB,oBAAoB;GACzC,0BAA0B,yBAAyB;GACnD,kBAAkB;GAClB,iBAAiB,eAAe;GAChC,UAAU;GACV,aAAa,kBAAkB,4BAA4B;GAC5D;IACA;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,EACJ,YAAY,iBACZ,UACA,sBACE,eAAe;EACjB;EACA;EACA;EACA,gBAAgB,CAAC,CAAC;EACnB,CAAC;CAGF,MAAM,oBAAoB,cAAc;AACtC,MAAI,OAAO,aAAa,YAAY,UAClC,QAAO,cACL,UACA,WACA,wBACA,gBACD;AAEH,SAAO;IACN;EAAC;EAAU;EAAW;EAAwB;EAAgB,CAAC;CAGlE,MAAM,qBACJ,qBACA,eACG;EAEH,MAAM,aAAa,YAAgC;AAEjD,OAAI,OAAO,QAAQ,WACjB,KAAI,QAAoB;YACf,IACT,CAAC,IAAY,UAAU;AAGzB,OAAI,WACF,CAAC,WAAmB,UAAU;;AAIlC,SACE,qBAAC;GACC,KAAK;GACL,SACE,SAAS,OACJ,GAAG,SAAS,WAAW,YAAY,MAAM,GAAG,SAAS,WAAW,SAAS,SAC1E;GAEN,UAAU;GACV,iBAAe;GACf,iBAAe;GACf,MAAM;GACE;GACR,QAAQ,iBAAiB,EAAE,OAAO,gBAAgB,GAAG;GACrD,MAAM;GACN,GAAI,WAAW,MAAM,uBAAuB,EAAE,CAAC;GACxC;;IAEN,eACC,oBAAC;KAAI,gBAAa;eAChB,oBAAC;MAAW;MAAU,YAAY;gBAC/B,cAAc,oBAAC,cAAY,GAAG;OACpB;MACT;IAEP,eAAe,oBAAC;KAAI,gBAAa;eAAU;MAAkB;IAC7D,YAAY,aAOL,oBAJA,SAAS,YAAY,SAAS,SACzB,IAAI,UACL;KAGF,gBAAa;KACb,GAAI;KACJ,KAAK;eAEJ;MACQ,GAGf;IACH,kBACC,oBAAC;KAAI,gBAAa;KAAc,GAAI;eACjC;MACG,GACJ;IACH,eAAe,oBAAC;KAAI,gBAAa;eAAU;MAAkB;IAC7D,oBACC,oBAAC;KAAI,gBAAa;eAChB,oBAAC;MAAW;MAAU,YAAY;gBAC/B;OACU;MACT;IAEP,WACC,oBAAC;KAAI,gBAAa;KAAU,GAAI;eAC7B,YAAY,OACX,oBAAC;MACO;MACC;MACc;MACrB,YAAY;gBAEX;OACkB,GACnB;MACA;;IAEI;;AAIlB,QAAO,kBAAkB,mBAAmB,wBAAwB;;AAGtE,MAAM,QAAQ,OAAO,OAAO,WAAW,KAAK,EAAE;CAC5C,QAAQ;CACR,OAAO;CACR,CAAC"}

package/dist/components/content/ItemBadge/ItemBadge.d.ts

@@ -1,7 +1,6 @@
 
-import { BaseProps } from "../../../tasty/types.js";
-import "../../../tasty/index.js";
 import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";
+import { BaseProps } from "@tenphi/tasty";
 import * as react from "react";
 import { ComponentProps, ReactNode } from "react";
 

package/dist/components/content/ItemBadge/ItemBadge.js

@@ -1,11 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
-import { tasty } from "../../../tasty/tasty.js";
+/** @license MIT | @cube-dev/ui-kit v0.119.1 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";
 import { DANGER_CLEAR_STYLES, DANGER_NEUTRAL_STYLES, DANGER_PRIMARY_STYLES, DANGER_SECONDARY_STYLES, DEFAULT_CLEAR_STYLES, DEFAULT_NEUTRAL_STYLES, DEFAULT_PRIMARY_STYLES, DEFAULT_SECONDARY_STYLES, ITEM_ACTION_BASE_STYLES, SPECIAL_CLEAR_STYLES, SPECIAL_NEUTRAL_STYLES, SPECIAL_PRIMARY_STYLES, SPECIAL_SECONDARY_STYLES, SUCCESS_CLEAR_STYLES, SUCCESS_NEUTRAL_STYLES, SUCCESS_PRIMARY_STYLES, SUCCESS_SECONDARY_STYLES } from "../../../data/item-themes.js";
 import { CheckIcon } from "../../../icons/CheckIcon.js";
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";
 import { useItemActionContext } from "../../actions/ItemActionContext.js";
+import { tasty } from "@tenphi/tasty";
 import { forwardRef, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 

package/dist/components/content/ItemBadge/ItemBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"ItemBadge.js","names":[],"sources":["../../../../src/components/content/ItemBadge/ItemBadge.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  RefObject,\n  useMemo,\n} from 'react';\n\nimport {\n  DANGER_CLEAR_STYLES,\n  DANGER_NEUTRAL_STYLES,\n  DANGER_PRIMARY_STYLES,\n  DANGER_SECONDARY_STYLES,\n  DEFAULT_CLEAR_STYLES,\n  DEFAULT_NEUTRAL_STYLES,\n  DEFAULT_PRIMARY_STYLES,\n  DEFAULT_SECONDARY_STYLES,\n  ITEM_ACTION_BASE_STYLES,\n  SPECIAL_CLEAR_STYLES,\n  SPECIAL_NEUTRAL_STYLES,\n  SPECIAL_PRIMARY_STYLES,\n  SPECIAL_SECONDARY_STYLES,\n  SUCCESS_CLEAR_STYLES,\n  SUCCESS_NEUTRAL_STYLES,\n  SUCCESS_PRIMARY_STYLES,\n  SUCCESS_SECONDARY_STYLES,\n} from '../../../data/item-themes';\nimport { CheckIcon } from '../../../icons/CheckIcon';\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { BaseProps, tasty } from '../../../tasty';\nimport { mergeProps } from '../../../utils/react';\nimport { useItemActionContext } from '../../actions/ItemActionContext';\nimport { TooltipProvider } from '../../overlays/Tooltip/TooltipProvider';\n\nexport interface CubeItemBadgeProps extends BaseProps {\n  icon?: ReactNode | 'checkbox';\n  children?: ReactNode;\n  isLoading?: boolean;\n  isSelected?: boolean;\n  type?: 'primary' | 'secondary' | 'neutral' | 'clear' | (string & {});\n  theme?: 'default' | 'danger' | 'success' | 'special' | (string & {});\n  tooltip?:\n    | string\n    | (Omit<ComponentProps<typeof TooltipProvider>, 'children'> & {\n        title?: string;\n      });\n}\n\ntype ItemBadgeVariant =\n  | 'default.primary'\n  | 'default.secondary'\n  | 'default.neutral'\n  | 'default.clear'\n  | 'danger.primary'\n  | 'danger.secondary'\n  | 'danger.neutral'\n  | 'danger.clear'\n  | 'success.primary'\n  | 'success.secondary'\n  | 'success.neutral'\n  | 'success.clear'\n  | 'special.primary'\n  | 'special.secondary'\n  | 'special.neutral'\n  | 'special.clear';\n\nconst ItemBadgeElement = tasty({\n  qa: 'ItemBadge',\n  styles: {\n    ...ITEM_ACTION_BASE_STYLES,\n    cursor: 'default',\n  },\n  variants: {\n    // Default theme\n    'default.primary': DEFAULT_PRIMARY_STYLES,\n    'default.secondary': DEFAULT_SECONDARY_STYLES,\n    'default.neutral': DEFAULT_NEUTRAL_STYLES,\n    'default.clear': DEFAULT_CLEAR_STYLES,\n\n    // Danger theme\n    'danger.primary': DANGER_PRIMARY_STYLES,\n    'danger.secondary': DANGER_SECONDARY_STYLES,\n    'danger.neutral': DANGER_NEUTRAL_STYLES,\n    'danger.clear': DANGER_CLEAR_STYLES,\n\n    // Success theme\n    'success.primary': SUCCESS_PRIMARY_STYLES,\n    'success.secondary': SUCCESS_SECONDARY_STYLES,\n    'success.neutral': SUCCESS_NEUTRAL_STYLES,\n    'success.clear': SUCCESS_CLEAR_STYLES,\n\n    // Special theme\n    'special.primary': SPECIAL_PRIMARY_STYLES,\n    'special.secondary': SPECIAL_SECONDARY_STYLES,\n    'special.neutral': SPECIAL_NEUTRAL_STYLES,\n    'special.clear': SPECIAL_CLEAR_STYLES,\n  },\n});\n\nexport const ItemBadge = forwardRef<HTMLDivElement, CubeItemBadgeProps>(\n  function ItemBadge(allProps, ref) {\n    const { type: contextType, theme: contextTheme } = useItemActionContext();\n\n    const {\n      type = contextType ?? 'neutral',\n      theme = contextTheme ?? 'default',\n      icon,\n      children,\n      isLoading = false,\n      isSelected = false,\n      tooltip,\n      mods,\n      ...rest\n    } = allProps;\n\n    // Determine if we should show checkbox\n    const hasCheckbox = icon === 'checkbox';\n\n    // Determine final icon (loading takes precedence)\n    const finalIcon = isLoading ? (\n      <LoadingIcon />\n    ) : hasCheckbox ? (\n      <CheckIcon />\n    ) : (\n      icon\n    );\n\n    // Build modifiers\n    const finalMods = useMemo(\n      () => ({\n        checkbox: hasCheckbox,\n        selected: isSelected,\n        loading: isLoading,\n        'has-label': !!children,\n        context: !!contextType,\n        ...mods,\n      }),\n      [hasCheckbox, isSelected, isLoading, children, contextType, mods],\n    );\n\n    // Extract aria-label from tooltip if needed\n    const ariaLabel = useMemo(() => {\n      if (typeof tooltip === 'string') {\n        return tooltip;\n      }\n      if (typeof tooltip === 'object' && tooltip.title) {\n        return tooltip.title;\n      }\n      return rest['aria-label'];\n    }, [tooltip, rest]);\n\n    // Determine if we should show tooltip (icon-only badges)\n    const showTooltip = !children && tooltip;\n\n    // Extract tooltip content and props\n    const tooltipContent = useMemo(() => {\n      if (typeof tooltip === 'string') {\n        return tooltip;\n      }\n      if (typeof tooltip === 'object' && tooltip.title) {\n        return tooltip.title;\n      }\n      return undefined;\n    }, [tooltip]);\n\n    const tooltipProps = useMemo(() => {\n      if (typeof tooltip === 'object') {\n        const { title, ...rest } = tooltip;\n        return rest;\n      }\n      return {};\n    }, [tooltip]);\n\n    const finalType = useMemo(() => {\n      return theme !== 'default' && type === 'neutral' ? 'clear' : type;\n    }, [theme, type]);\n\n    // Render function that accepts tooltip trigger props and ref\n    const renderBadge = (\n      tooltipTriggerProps?: HTMLAttributes<HTMLElement>,\n      tooltipRef?: RefObject<HTMLElement>,\n    ) => {\n      // Merge tooltip ref with component ref if provided\n      const handleRef = (element: HTMLDivElement | null) => {\n        // Set the component ref\n        if (typeof ref === 'function') {\n          ref(element);\n        } else if (ref) {\n          (ref as any).current = element;\n        }\n        // Set the tooltip ref\n        if (tooltipRef) {\n          (tooltipRef as any).current = element;\n        }\n      };\n\n      return (\n        <ItemBadgeElement\n          ref={handleRef}\n          variant={`${theme}.${finalType}` as ItemBadgeVariant}\n          data-theme={theme}\n          data-type={finalType}\n          aria-label={ariaLabel}\n          mods={finalMods}\n          {...mergeProps(rest, tooltipTriggerProps || {})}\n        >\n          {finalIcon && <div data-element=\"Icon\">{finalIcon}</div>}\n          {children}\n        </ItemBadgeElement>\n      );\n    };\n\n    // Wrap with tooltip if needed\n    if (showTooltip && tooltipContent) {\n      return (\n        <TooltipProvider title={tooltipContent} {...tooltipProps}>\n          {(triggerProps, tooltipRef) => renderBadge(triggerProps, tooltipRef)}\n        </TooltipProvider>\n      );\n    }\n\n    return renderBadge();\n  },\n);\n\nexport type { CubeItemBadgeProps as ItemBadgeProps };\n"],"mappings":";;;;;;;;;;;;AAmEA,MAAM,mBAAmB,MAAM;CAC7B,IAAI;CACJ,QAAQ;EACN,GAAG;EACH,QAAQ;EACT;CACD,UAAU;EAER,mBAAmB;EACnB,qBAAqB;EACrB,mBAAmB;EACnB,iBAAiB;EAGjB,kBAAkB;EAClB,oBAAoB;EACpB,kBAAkB;EAClB,gBAAgB;EAGhB,mBAAmB;EACnB,qBAAqB;EACrB,mBAAmB;EACnB,iBAAiB;EAGjB,mBAAmB;EACnB,qBAAqB;EACrB,mBAAmB;EACnB,iBAAiB;EAClB;CACF,CAAC;AAEF,MAAa,YAAY,WACvB,SAAS,UAAU,UAAU,KAAK;CAChC,MAAM,EAAE,MAAM,aAAa,OAAO,iBAAiB,sBAAsB;CAEzE,MAAM,EACJ,OAAO,eAAe,WACtB,QAAQ,gBAAgB,WACxB,MACA,UACA,YAAY,OACZ,aAAa,OACb,SACA,MACA,GAAG,SACD;CAGJ,MAAM,cAAc,SAAS;CAG7B,MAAM,YAAY,YAChB,oBAAC,gBAAc,GACb,cACF,oBAAC,cAAY,GAEb;CAIF,MAAM,YAAY,eACT;EACL,UAAU;EACV,UAAU;EACV,SAAS;EACT,aAAa,CAAC,CAAC;EACf,SAAS,CAAC,CAAC;EACX,GAAG;EACJ,GACD;EAAC;EAAa;EAAY;EAAW;EAAU;EAAa;EAAK,CAClE;CAGD,MAAM,YAAY,cAAc;AAC9B,MAAI,OAAO,YAAY,SACrB,QAAO;AAET,MAAI,OAAO,YAAY,YAAY,QAAQ,MACzC,QAAO,QAAQ;AAEjB,SAAO,KAAK;IACX,CAAC,SAAS,KAAK,CAAC;CAGnB,MAAM,cAAc,CAAC,YAAY;CAGjC,MAAM,iBAAiB,cAAc;AACnC,MAAI,OAAO,YAAY,SACrB,QAAO;AAET,MAAI,OAAO,YAAY,YAAY,QAAQ,MACzC,QAAO,QAAQ;IAGhB,CAAC,QAAQ,CAAC;CAEb,MAAM,eAAe,cAAc;AACjC,MAAI,OAAO,YAAY,UAAU;GAC/B,MAAM,EAAE,OAAO,GAAG,SAAS;AAC3B,UAAO;;AAET,SAAO,EAAE;IACR,CAAC,QAAQ,CAAC;CAEb,MAAM,YAAY,cAAc;AAC9B,SAAO,UAAU,aAAa,SAAS,YAAY,UAAU;IAC5D,CAAC,OAAO,KAAK,CAAC;CAGjB,MAAM,eACJ,qBACA,eACG;EAEH,MAAM,aAAa,YAAmC;AAEpD,OAAI,OAAO,QAAQ,WACjB,KAAI,QAAQ;YACH,IACT,CAAC,IAAY,UAAU;AAGzB,OAAI,WACF,CAAC,WAAmB,UAAU;;AAIlC,SACE,qBAAC;GACC,KAAK;GACL,SAAS,GAAG,MAAM,GAAG;GACrB,cAAY;GACZ,aAAW;GACX,cAAY;GACZ,MAAM;GACN,GAAI,WAAW,MAAM,uBAAuB,EAAE,CAAC;cAE9C,aAAa,oBAAC;IAAI,gBAAa;cAAQ;KAAgB,EACvD;IACgB;;AAKvB,KAAI,eAAe,eACjB,QACE,oBAAC;EAAgB,OAAO;EAAgB,GAAI;aACxC,cAAc,eAAe,YAAY,cAAc,WAAW;GACpD;AAItB,QAAO,aAAa;EAEvB"}
+{"version":3,"file":"ItemBadge.js","names":[],"sources":["../../../../src/components/content/ItemBadge/ItemBadge.tsx"],"sourcesContent":["import { BaseProps, tasty } from '@tenphi/tasty';\nimport {\n  ComponentProps,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  RefObject,\n  useMemo,\n} from 'react';\n\nimport {\n  DANGER_CLEAR_STYLES,\n  DANGER_NEUTRAL_STYLES,\n  DANGER_PRIMARY_STYLES,\n  DANGER_SECONDARY_STYLES,\n  DEFAULT_CLEAR_STYLES,\n  DEFAULT_NEUTRAL_STYLES,\n  DEFAULT_PRIMARY_STYLES,\n  DEFAULT_SECONDARY_STYLES,\n  ITEM_ACTION_BASE_STYLES,\n  SPECIAL_CLEAR_STYLES,\n  SPECIAL_NEUTRAL_STYLES,\n  SPECIAL_PRIMARY_STYLES,\n  SPECIAL_SECONDARY_STYLES,\n  SUCCESS_CLEAR_STYLES,\n  SUCCESS_NEUTRAL_STYLES,\n  SUCCESS_PRIMARY_STYLES,\n  SUCCESS_SECONDARY_STYLES,\n} from '../../../data/item-themes';\nimport { CheckIcon } from '../../../icons/CheckIcon';\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { mergeProps } from '../../../utils/react';\nimport { useItemActionContext } from '../../actions/ItemActionContext';\nimport { TooltipProvider } from '../../overlays/Tooltip/TooltipProvider';\n\nexport interface CubeItemBadgeProps extends BaseProps {\n  icon?: ReactNode | 'checkbox';\n  children?: ReactNode;\n  isLoading?: boolean;\n  isSelected?: boolean;\n  type?: 'primary' | 'secondary' | 'neutral' | 'clear' | (string & {});\n  theme?: 'default' | 'danger' | 'success' | 'special' | (string & {});\n  tooltip?:\n    | string\n    | (Omit<ComponentProps<typeof TooltipProvider>, 'children'> & {\n        title?: string;\n      });\n}\n\ntype ItemBadgeVariant =\n  | 'default.primary'\n  | 'default.secondary'\n  | 'default.neutral'\n  | 'default.clear'\n  | 'danger.primary'\n  | 'danger.secondary'\n  | 'danger.neutral'\n  | 'danger.clear'\n  | 'success.primary'\n  | 'success.secondary'\n  | 'success.neutral'\n  | 'success.clear'\n  | 'special.primary'\n  | 'special.secondary'\n  | 'special.neutral'\n  | 'special.clear';\n\nconst ItemBadgeElement = tasty({\n  qa: 'ItemBadge',\n  styles: {\n    ...ITEM_ACTION_BASE_STYLES,\n    cursor: 'default',\n  },\n  variants: {\n    // Default theme\n    'default.primary': DEFAULT_PRIMARY_STYLES,\n    'default.secondary': DEFAULT_SECONDARY_STYLES,\n    'default.neutral': DEFAULT_NEUTRAL_STYLES,\n    'default.clear': DEFAULT_CLEAR_STYLES,\n\n    // Danger theme\n    'danger.primary': DANGER_PRIMARY_STYLES,\n    'danger.secondary': DANGER_SECONDARY_STYLES,\n    'danger.neutral': DANGER_NEUTRAL_STYLES,\n    'danger.clear': DANGER_CLEAR_STYLES,\n\n    // Success theme\n    'success.primary': SUCCESS_PRIMARY_STYLES,\n    'success.secondary': SUCCESS_SECONDARY_STYLES,\n    'success.neutral': SUCCESS_NEUTRAL_STYLES,\n    'success.clear': SUCCESS_CLEAR_STYLES,\n\n    // Special theme\n    'special.primary': SPECIAL_PRIMARY_STYLES,\n    'special.secondary': SPECIAL_SECONDARY_STYLES,\n    'special.neutral': SPECIAL_NEUTRAL_STYLES,\n    'special.clear': SPECIAL_CLEAR_STYLES,\n  },\n});\n\nexport const ItemBadge = forwardRef<HTMLDivElement, CubeItemBadgeProps>(\n  function ItemBadge(allProps, ref) {\n    const { type: contextType, theme: contextTheme } = useItemActionContext();\n\n    const {\n      type = contextType ?? 'neutral',\n      theme = contextTheme ?? 'default',\n      icon,\n      children,\n      isLoading = false,\n      isSelected = false,\n      tooltip,\n      mods,\n      ...rest\n    } = allProps;\n\n    // Determine if we should show checkbox\n    const hasCheckbox = icon === 'checkbox';\n\n    // Determine final icon (loading takes precedence)\n    const finalIcon = isLoading ? (\n      <LoadingIcon />\n    ) : hasCheckbox ? (\n      <CheckIcon />\n    ) : (\n      icon\n    );\n\n    // Build modifiers\n    const finalMods = useMemo(\n      () => ({\n        checkbox: hasCheckbox,\n        selected: isSelected,\n        loading: isLoading,\n        'has-label': !!children,\n        context: !!contextType,\n        ...mods,\n      }),\n      [hasCheckbox, isSelected, isLoading, children, contextType, mods],\n    );\n\n    // Extract aria-label from tooltip if needed\n    const ariaLabel = useMemo(() => {\n      if (typeof tooltip === 'string') {\n        return tooltip;\n      }\n      if (typeof tooltip === 'object' && tooltip.title) {\n        return tooltip.title;\n      }\n      return rest['aria-label'];\n    }, [tooltip, rest]);\n\n    // Determine if we should show tooltip (icon-only badges)\n    const showTooltip = !children && tooltip;\n\n    // Extract tooltip content and props\n    const tooltipContent = useMemo(() => {\n      if (typeof tooltip === 'string') {\n        return tooltip;\n      }\n      if (typeof tooltip === 'object' && tooltip.title) {\n        return tooltip.title;\n      }\n      return undefined;\n    }, [tooltip]);\n\n    const tooltipProps = useMemo(() => {\n      if (typeof tooltip === 'object') {\n        const { title, ...rest } = tooltip;\n        return rest;\n      }\n      return {};\n    }, [tooltip]);\n\n    const finalType = useMemo(() => {\n      return theme !== 'default' && type === 'neutral' ? 'clear' : type;\n    }, [theme, type]);\n\n    // Render function that accepts tooltip trigger props and ref\n    const renderBadge = (\n      tooltipTriggerProps?: HTMLAttributes<HTMLElement>,\n      tooltipRef?: RefObject<HTMLElement>,\n    ) => {\n      // Merge tooltip ref with component ref if provided\n      const handleRef = (element: HTMLDivElement | null) => {\n        // Set the component ref\n        if (typeof ref === 'function') {\n          ref(element);\n        } else if (ref) {\n          (ref as any).current = element;\n        }\n        // Set the tooltip ref\n        if (tooltipRef) {\n          (tooltipRef as any).current = element;\n        }\n      };\n\n      return (\n        <ItemBadgeElement\n          ref={handleRef}\n          variant={`${theme}.${finalType}` as ItemBadgeVariant}\n          data-theme={theme}\n          data-type={finalType}\n          aria-label={ariaLabel}\n          mods={finalMods}\n          {...mergeProps(rest, tooltipTriggerProps || {})}\n        >\n          {finalIcon && <div data-element=\"Icon\">{finalIcon}</div>}\n          {children}\n        </ItemBadgeElement>\n      );\n    };\n\n    // Wrap with tooltip if needed\n    if (showTooltip && tooltipContent) {\n      return (\n        <TooltipProvider title={tooltipContent} {...tooltipProps}>\n          {(triggerProps, tooltipRef) => renderBadge(triggerProps, tooltipRef)}\n        </TooltipProvider>\n      );\n    }\n\n    return renderBadge();\n  },\n);\n\nexport type { CubeItemBadgeProps as ItemBadgeProps };\n"],"mappings":";;;;;;;;;;;;AAmEA,MAAM,mBAAmB,MAAM;CAC7B,IAAI;CACJ,QAAQ;EACN,GAAG;EACH,QAAQ;EACT;CACD,UAAU;EAER,mBAAmB;EACnB,qBAAqB;EACrB,mBAAmB;EACnB,iBAAiB;EAGjB,kBAAkB;EAClB,oBAAoB;EACpB,kBAAkB;EAClB,gBAAgB;EAGhB,mBAAmB;EACnB,qBAAqB;EACrB,mBAAmB;EACnB,iBAAiB;EAGjB,mBAAmB;EACnB,qBAAqB;EACrB,mBAAmB;EACnB,iBAAiB;EAClB;CACF,CAAC;AAEF,MAAa,YAAY,WACvB,SAAS,UAAU,UAAU,KAAK;CAChC,MAAM,EAAE,MAAM,aAAa,OAAO,iBAAiB,sBAAsB;CAEzE,MAAM,EACJ,OAAO,eAAe,WACtB,QAAQ,gBAAgB,WACxB,MACA,UACA,YAAY,OACZ,aAAa,OACb,SACA,MACA,GAAG,SACD;CAGJ,MAAM,cAAc,SAAS;CAG7B,MAAM,YAAY,YAChB,oBAAC,gBAAc,GACb,cACF,oBAAC,cAAY,GAEb;CAIF,MAAM,YAAY,eACT;EACL,UAAU;EACV,UAAU;EACV,SAAS;EACT,aAAa,CAAC,CAAC;EACf,SAAS,CAAC,CAAC;EACX,GAAG;EACJ,GACD;EAAC;EAAa;EAAY;EAAW;EAAU;EAAa;EAAK,CAClE;CAGD,MAAM,YAAY,cAAc;AAC9B,MAAI,OAAO,YAAY,SACrB,QAAO;AAET,MAAI,OAAO,YAAY,YAAY,QAAQ,MACzC,QAAO,QAAQ;AAEjB,SAAO,KAAK;IACX,CAAC,SAAS,KAAK,CAAC;CAGnB,MAAM,cAAc,CAAC,YAAY;CAGjC,MAAM,iBAAiB,cAAc;AACnC,MAAI,OAAO,YAAY,SACrB,QAAO;AAET,MAAI,OAAO,YAAY,YAAY,QAAQ,MACzC,QAAO,QAAQ;IAGhB,CAAC,QAAQ,CAAC;CAEb,MAAM,eAAe,cAAc;AACjC,MAAI,OAAO,YAAY,UAAU;GAC/B,MAAM,EAAE,OAAO,GAAG,SAAS;AAC3B,UAAO;;AAET,SAAO,EAAE;IACR,CAAC,QAAQ,CAAC;CAEb,MAAM,YAAY,cAAc;AAC9B,SAAO,UAAU,aAAa,SAAS,YAAY,UAAU;IAC5D,CAAC,OAAO,KAAK,CAAC;CAGjB,MAAM,eACJ,qBACA,eACG;EAEH,MAAM,aAAa,YAAmC;AAEpD,OAAI,OAAO,QAAQ,WACjB,KAAI,QAAQ;YACH,IACT,CAAC,IAAY,UAAU;AAGzB,OAAI,WACF,CAAC,WAAmB,UAAU;;AAIlC,SACE,qBAAC;GACC,KAAK;GACL,SAAS,GAAG,MAAM,GAAG;GACrB,cAAY;GACZ,aAAW;GACX,cAAY;GACZ,MAAM;GACN,GAAI,WAAW,MAAM,uBAAuB,EAAE,CAAC;cAE9C,aAAa,oBAAC;IAAI,gBAAa;cAAQ;KAAgB,EACvD;IACgB;;AAKvB,KAAI,eAAe,eACjB,QACE,oBAAC;EAAgB,OAAO;EAAgB,GAAI;aACxC,cAAc,eAAe,YAAY,cAAc,WAAW;GACpD;AAItB,QAAO,aAAa;EAEvB"}

package/dist/components/content/Layout/GridLayout.d.ts

@@ -1,6 +1,4 @@
 
-import { Styles } from "../../../tasty/styles/types.js";
-import "../../../tasty/index.js";
 import { CubeLayoutProps } from "./Layout.js";
 import { _LayoutContent } from "./LayoutContent.js";
 import { _LayoutBlock } from "./LayoutBlock.js";
@@ -12,6 +10,7 @@ import { _LayoutPane } from "./LayoutPane.js";
 import { _LayoutPanel } from "./LayoutPanel.js";
 import { _LayoutPanelHeader } from "./LayoutPanelHeader.js";
 import { _LayoutToolbar } from "./LayoutToolbar.js";
+import { Styles } from "@tenphi/tasty";
 import { ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
 
 //#region src/components/content/Layout/GridLayout.d.ts

package/dist/components/content/Layout/GridLayout.js

@@ -1,5 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
-import { tasty } from "../../../tasty/tasty.js";
+/** @license MIT | @cube-dev/ui-kit v0.119.1 | Cube Dev Team */
 import { _Layout } from "./Layout.js";
 import { _LayoutContent } from "./LayoutContent.js";
 import { _LayoutBlock } from "./LayoutBlock.js";
@@ -11,6 +10,7 @@ import { _LayoutPane } from "./LayoutPane.js";
 import { _LayoutPanel } from "./LayoutPanel.js";
 import { _LayoutPanelHeader } from "./LayoutPanelHeader.js";
 import { _LayoutToolbar } from "./LayoutToolbar.js";
+import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/content/Layout/GridLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.js","names":["Layout","LayoutToolbar","LayoutHeader","LayoutFooter","LayoutContent","LayoutBlock","LayoutFlex","LayoutGrid","LayoutPane","LayoutPanel","LayoutPanelHeader"],"sources":["../../../../src/components/content/Layout/GridLayout.tsx"],"sourcesContent":["import {\n  ForwardedRef,\n  forwardRef,\n  ForwardRefExoticComponent,\n  ReactNode,\n  RefAttributes,\n} from 'react';\n\nimport { Styles, tasty } from '../../../tasty';\n\nimport { CubeLayoutProps, Layout } from './Layout';\nimport { LayoutBlock } from './LayoutBlock';\nimport { LayoutContent } from './LayoutContent';\nimport { LayoutFlex } from './LayoutFlex';\nimport { LayoutFooter } from './LayoutFooter';\nimport { LayoutGrid } from './LayoutGrid';\nimport { LayoutHeader } from './LayoutHeader';\nimport { LayoutPane } from './LayoutPane';\nimport { LayoutPanel } from './LayoutPanel';\nimport { LayoutPanelHeader } from './LayoutPanelHeader';\nimport { LayoutToolbar } from './LayoutToolbar';\n\nconst GridLayoutElement = tasty(Layout, {\n  qa: 'GridLayout',\n  styles: {\n    Inner: {\n      display: 'grid',\n    },\n  },\n});\n\nexport interface CubeGridLayoutProps extends CubeLayoutProps {\n  /** Grid template columns */\n  columns?: Styles['gridColumns'];\n  /** Grid template rows */\n  rows?: Styles['gridRows'];\n  /** Grid template shorthand */\n  template?: Styles['gridTemplate'];\n  children?: ReactNode;\n}\n\nfunction GridLayoutBase(\n  props: CubeGridLayoutProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { columns, rows, template, ...otherProps } = props;\n\n  return (\n    <GridLayoutElement\n      ref={ref}\n      isGrid\n      gridColumns={columns}\n      gridRows={rows}\n      gridTemplate={template}\n      {...otherProps}\n    />\n  );\n}\n\nconst _GridLayout = forwardRef(GridLayoutBase);\n\n_GridLayout.displayName = 'GridLayout';\n\n// Create the GridLayout with all sub-components aliased\ninterface GridLayoutComponent\n  extends ForwardRefExoticComponent<\n    CubeGridLayoutProps & RefAttributes<HTMLDivElement>\n  > {\n  Toolbar: typeof LayoutToolbar;\n  Header: typeof LayoutHeader;\n  Footer: typeof LayoutFooter;\n  Content: typeof LayoutContent;\n  Block: typeof LayoutBlock;\n  Flex: typeof LayoutFlex;\n  Grid: typeof LayoutGrid;\n  Pane: typeof LayoutPane;\n  Panel: typeof LayoutPanel;\n  PanelHeader: typeof LayoutPanelHeader;\n}\n\nconst GridLayout = Object.assign(_GridLayout, {\n  Toolbar: LayoutToolbar,\n  Header: LayoutHeader,\n  Footer: LayoutFooter,\n  Content: LayoutContent,\n  Block: LayoutBlock,\n  Flex: LayoutFlex,\n  Grid: LayoutGrid,\n  Pane: LayoutPane,\n  Panel: LayoutPanel,\n  PanelHeader: LayoutPanelHeader,\n}) as GridLayoutComponent;\n\nexport { GridLayout };\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,MAAM,oBAAoB,MAAMA,SAAQ;CACtC,IAAI;CACJ,QAAQ,EACN,OAAO,EACL,SAAS,QACV,EACF;CACF,CAAC;AAYF,SAAS,eACP,OACA,KACA;CACA,MAAM,EAAE,SAAS,MAAM,UAAU,GAAG,eAAe;AAEnD,QACE,oBAAC;EACM;EACL;EACA,aAAa;EACb,UAAU;EACV,cAAc;EACd,GAAI;GACJ;;AAIN,MAAM,cAAc,WAAW,eAAe;AAE9C,YAAY,cAAc;AAmB1B,MAAM,aAAa,OAAO,OAAO,aAAa;CAC5C,SAASC;CACT,QAAQC;CACR,QAAQC;CACR,SAASC;CACT,OAAOC;CACP,MAAMC;CACN,MAAMC;CACN,MAAMC;CACN,OAAOC;CACP,aAAaC;CACd,CAAC"}
+{"version":3,"file":"GridLayout.js","names":["Layout","LayoutToolbar","LayoutHeader","LayoutFooter","LayoutContent","LayoutBlock","LayoutFlex","LayoutGrid","LayoutPane","LayoutPanel","LayoutPanelHeader"],"sources":["../../../../src/components/content/Layout/GridLayout.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  ForwardRefExoticComponent,\n  ReactNode,\n  RefAttributes,\n} from 'react';\n\nimport { CubeLayoutProps, Layout } from './Layout';\nimport { LayoutBlock } from './LayoutBlock';\nimport { LayoutContent } from './LayoutContent';\nimport { LayoutFlex } from './LayoutFlex';\nimport { LayoutFooter } from './LayoutFooter';\nimport { LayoutGrid } from './LayoutGrid';\nimport { LayoutHeader } from './LayoutHeader';\nimport { LayoutPane } from './LayoutPane';\nimport { LayoutPanel } from './LayoutPanel';\nimport { LayoutPanelHeader } from './LayoutPanelHeader';\nimport { LayoutToolbar } from './LayoutToolbar';\n\nconst GridLayoutElement = tasty(Layout, {\n  qa: 'GridLayout',\n  styles: {\n    Inner: {\n      display: 'grid',\n    },\n  },\n});\n\nexport interface CubeGridLayoutProps extends CubeLayoutProps {\n  /** Grid template columns */\n  columns?: Styles['gridColumns'];\n  /** Grid template rows */\n  rows?: Styles['gridRows'];\n  /** Grid template shorthand */\n  template?: Styles['gridTemplate'];\n  children?: ReactNode;\n}\n\nfunction GridLayoutBase(\n  props: CubeGridLayoutProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { columns, rows, template, ...otherProps } = props;\n\n  return (\n    <GridLayoutElement\n      ref={ref}\n      isGrid\n      gridColumns={columns}\n      gridRows={rows}\n      gridTemplate={template}\n      {...otherProps}\n    />\n  );\n}\n\nconst _GridLayout = forwardRef(GridLayoutBase);\n\n_GridLayout.displayName = 'GridLayout';\n\n// Create the GridLayout with all sub-components aliased\ninterface GridLayoutComponent\n  extends ForwardRefExoticComponent<\n    CubeGridLayoutProps & RefAttributes<HTMLDivElement>\n  > {\n  Toolbar: typeof LayoutToolbar;\n  Header: typeof LayoutHeader;\n  Footer: typeof LayoutFooter;\n  Content: typeof LayoutContent;\n  Block: typeof LayoutBlock;\n  Flex: typeof LayoutFlex;\n  Grid: typeof LayoutGrid;\n  Pane: typeof LayoutPane;\n  Panel: typeof LayoutPanel;\n  PanelHeader: typeof LayoutPanelHeader;\n}\n\nconst GridLayout = Object.assign(_GridLayout, {\n  Toolbar: LayoutToolbar,\n  Header: LayoutHeader,\n  Footer: LayoutFooter,\n  Content: LayoutContent,\n  Block: LayoutBlock,\n  Flex: LayoutFlex,\n  Grid: LayoutGrid,\n  Pane: LayoutPane,\n  Panel: LayoutPanel,\n  PanelHeader: LayoutPanelHeader,\n}) as GridLayoutComponent;\n\nexport { GridLayout };\n"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,MAAM,oBAAoB,MAAMA,SAAQ;CACtC,IAAI;CACJ,QAAQ,EACN,OAAO,EACL,SAAS,QACV,EACF;CACF,CAAC;AAYF,SAAS,eACP,OACA,KACA;CACA,MAAM,EAAE,SAAS,MAAM,UAAU,GAAG,eAAe;AAEnD,QACE,oBAAC;EACM;EACL;EACA,aAAa;EACb,UAAU;EACV,cAAc;EACd,GAAI;GACJ;;AAIN,MAAM,cAAc,WAAW,eAAe;AAE9C,YAAY,cAAc;AAmB1B,MAAM,aAAa,OAAO,OAAO,aAAa;CAC5C,SAASC;CACT,QAAQC;CACR,QAAQC;CACR,SAASC;CACT,OAAOC;CACP,MAAMC;CACN,MAAMC;CACN,MAAMC;CACN,OAAOC;CACP,aAAaC;CACd,CAAC"}

package/dist/components/content/Layout/Layout.d.ts

@@ -1,7 +1,5 @@
 
-import { Styles } from "../../../tasty/styles/types.js";
-import { BaseProps, BlockStyleProps, ColorStyleProps, FlowStyleProps, OuterStyleProps } from "../../../tasty/types.js";
-import "../../../tasty/index.js";
+import { BaseProps, BlockStyleProps, ColorStyleProps, FlowStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
 import { ForwardedRef, HTMLAttributes, ReactNode } from "react";
 
 //#region src/components/content/Layout/Layout.d.ts

package/dist/components/content/Layout/Layout.js

@@ -1,13 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
-import { extractStyles } from "../../../tasty/utils/styles.js";
-import { isDevEnv } from "../../../tasty/utils/is-dev-env.js";
-import { mergeStyles } from "../../../tasty/utils/merge-styles.js";
-import { INNER_STYLES, OUTER_STYLES } from "../../../tasty/styles/list.js";
-import { tasty } from "../../../tasty/tasty.js";
-import { filterBaseProps } from "../../../tasty/utils/filter-base-props.js";
+/** @license MIT | @cube-dev/ui-kit v0.119.1 | Cube Dev Team */
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { Alert } from "../Alert/Alert.js";
+import { isDevEnv } from "../../../utils/is-dev-env.js";
 import { LayoutProvider, useLayoutActionsContext, useLayoutRefsContext, useLayoutStateContext } from "./LayoutContext.js";
+import { INNER_STYLES, OUTER_STYLES, extractStyles, filterBaseProps, mergeStyles, tasty } from "@tenphi/tasty";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useResizeObserver } from "@react-aria/utils";

package/dist/components/content/Layout/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","names":[],"sources":["../../../../src/components/content/Layout/Layout.tsx"],"sourcesContent":["import { useResizeObserver } from '@react-aria/utils';\nimport {\n  CSSProperties,\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  BaseProps,\n  BlockStyleProps,\n  ColorStyleProps,\n  extractStyles,\n  filterBaseProps,\n  FlowStyleProps,\n  INNER_STYLES,\n  mergeStyles,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '../../../tasty';\nimport { isDevEnv } from '../../../tasty/utils/is-dev-env';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { Alert } from '../Alert';\n\nimport {\n  LayoutProvider,\n  useLayoutActionsContext,\n  useLayoutRefsContext,\n  useLayoutStateContext,\n} from './LayoutContext';\n\nconst LayoutElement = tasty({\n  as: 'div',\n  qa: 'Layout',\n  styles: {\n    position: 'relative',\n    display: 'block',\n    overflow: {\n      '': 'visible',\n      'do-not-overflow': 'hidden',\n    },\n    flexGrow: 1,\n    placeSelf: 'stretch',\n    height: {\n      '': 'auto',\n      'auto-height': 'fixed 100%',\n      collapsed: '6x',\n    },\n\n    '$content-padding': '1x',\n    // Auto-border size for sub-components (set when layout is vertical)\n    '$layout-border-size': {\n      '': '0',\n      vertical: '1bw',\n    },\n\n    Inner: {\n      // .base-class[data-hover] > [data-element=\"Inner\"] { ...}\n      // Direct child selector required for nested layouts\n      $: '>',\n      container: 'layout / inline-size',\n      position: 'absolute',\n      inset: '$inset-top $inset-right $inset-bottom $inset-left',\n      display: 'flex',\n      flow: 'column',\n      placeContent: 'stretch',\n      placeItems: 'stretch',\n      // Disable transition during panel resize for snappy feedback\n      // Also disable transition when not ready to prevent initial animation\n      // Only animate when has-transition is enabled (and not dragging/not-ready)\n      transition: {\n        '': 'none',\n        'has-transition': 'inset $transition ease-out',\n        'dragging | not-ready': 'none',\n      },\n    },\n  },\n});\n\nexport interface CubeLayoutProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    ColorStyleProps,\n    FlowStyleProps {\n  /** Switch to grid display mode */\n  isGrid?: boolean;\n  /** Grid template columns (when isGrid=true) */\n  columns?: Styles['gridColumns'];\n  /** Grid template rows (when isGrid=true) */\n  rows?: Styles['gridRows'];\n  /** Grid template shorthand */\n  template?: Styles['gridTemplate'];\n  /** Padding for content areas (Layout.Content components). Default: '1x' */\n  contentPadding?: Styles['padding'];\n  /** Enable transition animation for Inner content when panels open/close */\n  hasTransition?: boolean;\n  /** Minimum size reserved for the content area between panels. Default: 320 */\n  minContentSize?: number;\n  /** Styles for wrapper and Inner sub-element */\n  styles?: Styles;\n  children?: ReactNode;\n  /** Ref for the inner content element */\n  innerRef?: ForwardedRef<HTMLDivElement>;\n  /** Props to spread on the Inner sub-element */\n  innerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * @internal Force show dev warning even in production (for storybook testing)\n   */\n  _forceShowDevWarning?: boolean;\n  /**\n   * When true, applies overflow: hidden to the root element.\n   * By default, overflow is visible.\n   */\n  doNotOverflow?: boolean;\n}\n\nfunction LayoutInner(\n  props: CubeLayoutProps & { forwardedRef?: ForwardedRef<HTMLDivElement> },\n) {\n  const layoutActions = useLayoutActionsContext();\n  const layoutState = useLayoutStateContext();\n  const layoutRefs = useLayoutRefsContext();\n  const localRef = useRef<HTMLDivElement>(null);\n  const [isAutoHeight, setIsAutoHeight] = useState(false);\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const {\n    isGrid,\n    columns,\n    rows,\n    template,\n    contentPadding,\n    hasTransition = false,\n    minContentSize,\n    styles,\n    children,\n    style,\n    forwardedRef,\n    innerRef: innerRefProp,\n    innerProps,\n    _forceShowDevWarning,\n    doNotOverflow,\n    ...otherProps\n  } = props;\n\n  const combinedInnerRef = useCombinedRefs(innerRefProp);\n  const updateContainerSize = layoutActions?.updateContainerSize;\n\n  useResizeObserver({\n    ref: localRef,\n    onResize: useCallback(() => {\n      if (localRef.current) {\n        updateContainerSize?.(\n          localRef.current.offsetWidth,\n          localRef.current.offsetHeight,\n        );\n      }\n    }, [updateContainerSize]),\n  });\n\n  // Extract outer wrapper styles and inner content styles\n  const outerStyles = extractStyles(otherProps, OUTER_STYLES);\n  const innerStyles = extractStyles(otherProps, INNER_STYLES);\n\n  // Calculate if the layout flow is vertical (for auto-border feature)\n  // Default flow is 'column' (vertical), only horizontal when explicitly set to 'row'\n  const isVertical = useMemo(() => {\n    const flowFromProp = innerStyles?.flow;\n    const flowFromStyles = (styles?.Inner as Record<string, unknown>)?.flow;\n    const flowValue = flowFromProp ?? flowFromStyles;\n\n    return typeof flowValue !== 'string' || !flowValue.startsWith('row');\n  }, [innerStyles?.flow, styles?.Inner]);\n\n  // Merge styles using the same pattern as LayoutPane\n  const finalStyles = useMemo(() => {\n    // Handle grid mode and grid properties\n    const gridStyles: Styles = {};\n\n    if (isGrid) {\n      gridStyles.display = 'grid';\n    }\n\n    if (columns) {\n      gridStyles.gridColumns = columns;\n    }\n\n    if (rows) {\n      gridStyles.gridRows = rows;\n    }\n\n    if (template) {\n      gridStyles.gridTemplate = template;\n    }\n\n    return mergeStyles(\n      outerStyles,\n      contentPadding != null ? { '$content-padding': contentPadding } : null,\n      styles,\n      { Inner: mergeStyles(innerStyles, gridStyles, styles?.Inner as Styles) },\n    );\n  }, [\n    outerStyles,\n    innerStyles,\n    contentPadding,\n    styles,\n    isGrid,\n    columns,\n    rows,\n    template,\n  ]);\n\n  // Calculate inset values from panel sizes\n  const panelSizes = layoutState?.panelSizes ?? {\n    left: 0,\n    top: 0,\n    right: 0,\n    bottom: 0,\n  };\n\n  const isDragging = layoutState?.isDragging ?? false;\n  const isReady = layoutState?.isReady ?? true;\n  const markReady = layoutActions?.markReady;\n  const dismissOverlayPanels = layoutActions?.dismissOverlayPanels;\n  const hasOverlayPanels = layoutState?.hasOverlayPanels ?? false;\n\n  // Mark layout as ready after first paint\n  // Using useEffect + requestAnimationFrame ensures:\n  // 1. Panels register in useLayoutEffect → correct insets before first paint\n  // 2. First paint with not-ready=true (transition disabled)\n  // 3. After paint completes → enables transitions for subsequent changes\n  useEffect(() => {\n    const frameId = requestAnimationFrame(() => {\n      markReady?.();\n    });\n\n    return () => cancelAnimationFrame(frameId);\n  }, [markReady]);\n\n  // Auto-height detection: if layout collapses to 0 height after initialization,\n  // automatically set height to 100% to prevent invisible layout\n  useEffect(() => {\n    if (isReady && localRef.current && localRef.current.offsetHeight === 0) {\n      setIsAutoHeight(true);\n    }\n  }, [isReady]);\n\n  // Second check: if still 0 height after auto-height was applied,\n  // show collapsed state with warning\n  useEffect(() => {\n    if (isAutoHeight && localRef.current) {\n      // Use requestAnimationFrame to check after styles have been applied\n      const frameId = requestAnimationFrame(() => {\n        if (localRef.current && localRef.current.offsetHeight === 0) {\n          setIsCollapsed(true);\n        }\n      });\n\n      return () => cancelAnimationFrame(frameId);\n    }\n  }, [isAutoHeight]);\n\n  const insetStyle = useMemo(() => {\n    const baseStyle: Record<string, string> = {\n      '--inset-top': `${panelSizes.top}px`,\n      '--inset-right': `${panelSizes.right}px`,\n      '--inset-bottom': `${panelSizes.bottom}px`,\n      '--inset-left': `${panelSizes.left}px`,\n    };\n\n    if (style) {\n      return { ...baseStyle, ...style } as CSSProperties;\n    }\n\n    return baseStyle as CSSProperties;\n  }, [panelSizes, style]);\n\n  const mods = useMemo(\n    () => ({\n      dragging: isDragging,\n      'not-ready': !isReady,\n      'has-transition': hasTransition,\n      'auto-height': isAutoHeight && !isCollapsed,\n      collapsed: isCollapsed,\n      vertical: isVertical,\n      'do-not-overflow': doNotOverflow,\n    }),\n    [\n      isDragging,\n      isReady,\n      hasTransition,\n      isAutoHeight,\n      isCollapsed,\n      isVertical,\n      doNotOverflow,\n    ],\n  );\n\n  // Combine local ref with forwarded ref\n  const setRefs = (element: HTMLDivElement | null) => {\n    localRef.current = element;\n\n    if (typeof forwardedRef === 'function') {\n      forwardedRef(element);\n    } else if (forwardedRef) {\n      forwardedRef.current = element;\n    }\n  };\n\n  // Show dev warning when collapsed and in dev mode (or forced for stories)\n  const showDevWarning = isCollapsed && (_forceShowDevWarning || isDevEnv());\n\n  // Handle focus entering the Inner element - dismiss overlay panels\n  const handleInnerFocus = useCallback(\n    (e: FocusEvent<HTMLDivElement>) => {\n      // Only dismiss if there are overlay panels\n      if (!hasOverlayPanels) return;\n\n      // Check if focus is coming from outside the Inner element\n      const inner = e.currentTarget;\n      const relatedTarget = e.relatedTarget as Node | null;\n\n      // If relatedTarget is null or not inside the Inner element,\n      // focus is entering from outside - dismiss overlay panels\n      if (!relatedTarget || !inner.contains(relatedTarget)) {\n        dismissOverlayPanels?.();\n      }\n    },\n    [hasOverlayPanels, dismissOverlayPanels],\n  );\n\n  // Handle Escape key anywhere in the Layout - dismiss overlay panels\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (hasOverlayPanels && e.key === 'Escape') {\n        e.preventDefault();\n        e.stopPropagation();\n        dismissOverlayPanels?.();\n      }\n    },\n    [hasOverlayPanels, dismissOverlayPanels],\n  );\n\n  return (\n    <LayoutElement\n      ref={setRefs}\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      mods={mods}\n      styles={finalStyles}\n      style={insetStyle}\n      onKeyDown={hasOverlayPanels ? handleKeyDown : undefined}\n    >\n      {showDevWarning ? (\n        <Alert theme=\"danger\">\n          <b>UIKit:</b> <b>&lt;Layout/&gt;</b> has collapsed to <b>0</b> height.\n          Ensure the parent container has a defined height or use the{' '}\n          <b>height</b> prop on <b>&lt;Layout/&gt;</b>.\n        </Alert>\n      ) : (\n        <>\n          {/* All children go inside the Inner element - panels will portal themselves out */}\n          <div\n            ref={combinedInnerRef}\n            data-element=\"Inner\"\n            onFocus={handleInnerFocus}\n            {...innerProps}\n          >\n            {children}\n          </div>\n          {/* Container for panels to portal into - rendered after Inner so panels paint on top via DOM order */}\n          <div\n            ref={layoutRefs?.setPanelContainer}\n            data-element=\"PanelContainer\"\n          />\n        </>\n      )}\n    </LayoutElement>\n  );\n}\n\n/**\n * Layout component provides a vertical flex layout with overflow-safe content.\n * Uses a two-element architecture (wrapper + content) to ensure content never overflows.\n */\nfunction Layout(props: CubeLayoutProps, ref: ForwardedRef<HTMLDivElement>) {\n  const { hasTransition, minContentSize } = props;\n\n  return (\n    <LayoutProvider\n      hasTransition={hasTransition}\n      minContentSize={minContentSize}\n    >\n      <LayoutInner {...props} forwardedRef={ref} />\n    </LayoutProvider>\n  );\n}\n\nconst _Layout = forwardRef(Layout);\n\n_Layout.displayName = 'Layout';\n\nexport { _Layout as Layout };\n"],"mappings":"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"}
+{"version":3,"file":"Layout.js","names":[],"sources":["../../../../src/components/content/Layout/Layout.tsx"],"sourcesContent":["import { useResizeObserver } from '@react-aria/utils';\nimport {\n  BaseProps,\n  BlockStyleProps,\n  ColorStyleProps,\n  extractStyles,\n  filterBaseProps,\n  FlowStyleProps,\n  INNER_STYLES,\n  mergeStyles,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  CSSProperties,\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { isDevEnv } from '../../../utils/is-dev-env';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { Alert } from '../Alert';\n\nimport {\n  LayoutProvider,\n  useLayoutActionsContext,\n  useLayoutRefsContext,\n  useLayoutStateContext,\n} from './LayoutContext';\n\nconst LayoutElement = tasty({\n  as: 'div',\n  qa: 'Layout',\n  styles: {\n    position: 'relative',\n    display: 'block',\n    overflow: {\n      '': 'visible',\n      'do-not-overflow': 'hidden',\n    },\n    flexGrow: 1,\n    placeSelf: 'stretch',\n    height: {\n      '': 'auto',\n      'auto-height': 'fixed 100%',\n      collapsed: '6x',\n    },\n\n    '$content-padding': '1x',\n    // Auto-border size for sub-components (set when layout is vertical)\n    '$layout-border-size': {\n      '': '0',\n      vertical: '1bw',\n    },\n\n    Inner: {\n      // .base-class[data-hover] > [data-element=\"Inner\"] { ...}\n      // Direct child selector required for nested layouts\n      $: '>',\n      container: 'layout / inline-size',\n      position: 'absolute',\n      inset: '$inset-top $inset-right $inset-bottom $inset-left',\n      display: 'flex',\n      flow: 'column',\n      placeContent: 'stretch',\n      placeItems: 'stretch',\n      // Disable transition during panel resize for snappy feedback\n      // Also disable transition when not ready to prevent initial animation\n      // Only animate when has-transition is enabled (and not dragging/not-ready)\n      transition: {\n        '': 'none',\n        'has-transition': 'inset $transition ease-out',\n        'dragging | not-ready': 'none',\n      },\n    },\n  },\n});\n\nexport interface CubeLayoutProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    ColorStyleProps,\n    FlowStyleProps {\n  /** Switch to grid display mode */\n  isGrid?: boolean;\n  /** Grid template columns (when isGrid=true) */\n  columns?: Styles['gridColumns'];\n  /** Grid template rows (when isGrid=true) */\n  rows?: Styles['gridRows'];\n  /** Grid template shorthand */\n  template?: Styles['gridTemplate'];\n  /** Padding for content areas (Layout.Content components). Default: '1x' */\n  contentPadding?: Styles['padding'];\n  /** Enable transition animation for Inner content when panels open/close */\n  hasTransition?: boolean;\n  /** Minimum size reserved for the content area between panels. Default: 320 */\n  minContentSize?: number;\n  /** Styles for wrapper and Inner sub-element */\n  styles?: Styles;\n  children?: ReactNode;\n  /** Ref for the inner content element */\n  innerRef?: ForwardedRef<HTMLDivElement>;\n  /** Props to spread on the Inner sub-element */\n  innerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * @internal Force show dev warning even in production (for storybook testing)\n   */\n  _forceShowDevWarning?: boolean;\n  /**\n   * When true, applies overflow: hidden to the root element.\n   * By default, overflow is visible.\n   */\n  doNotOverflow?: boolean;\n}\n\nfunction LayoutInner(\n  props: CubeLayoutProps & { forwardedRef?: ForwardedRef<HTMLDivElement> },\n) {\n  const layoutActions = useLayoutActionsContext();\n  const layoutState = useLayoutStateContext();\n  const layoutRefs = useLayoutRefsContext();\n  const localRef = useRef<HTMLDivElement>(null);\n  const [isAutoHeight, setIsAutoHeight] = useState(false);\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const {\n    isGrid,\n    columns,\n    rows,\n    template,\n    contentPadding,\n    hasTransition = false,\n    minContentSize,\n    styles,\n    children,\n    style,\n    forwardedRef,\n    innerRef: innerRefProp,\n    innerProps,\n    _forceShowDevWarning,\n    doNotOverflow,\n    ...otherProps\n  } = props;\n\n  const combinedInnerRef = useCombinedRefs(innerRefProp);\n  const updateContainerSize = layoutActions?.updateContainerSize;\n\n  useResizeObserver({\n    ref: localRef,\n    onResize: useCallback(() => {\n      if (localRef.current) {\n        updateContainerSize?.(\n          localRef.current.offsetWidth,\n          localRef.current.offsetHeight,\n        );\n      }\n    }, [updateContainerSize]),\n  });\n\n  // Extract outer wrapper styles and inner content styles\n  const outerStyles = extractStyles(otherProps, OUTER_STYLES);\n  const innerStyles = extractStyles(otherProps, INNER_STYLES);\n\n  // Calculate if the layout flow is vertical (for auto-border feature)\n  // Default flow is 'column' (vertical), only horizontal when explicitly set to 'row'\n  const isVertical = useMemo(() => {\n    const flowFromProp = innerStyles?.flow;\n    const flowFromStyles = (styles?.Inner as Record<string, unknown>)?.flow;\n    const flowValue = flowFromProp ?? flowFromStyles;\n\n    return typeof flowValue !== 'string' || !flowValue.startsWith('row');\n  }, [innerStyles?.flow, styles?.Inner]);\n\n  // Merge styles using the same pattern as LayoutPane\n  const finalStyles = useMemo(() => {\n    // Handle grid mode and grid properties\n    const gridStyles: Styles = {};\n\n    if (isGrid) {\n      gridStyles.display = 'grid';\n    }\n\n    if (columns) {\n      gridStyles.gridColumns = columns;\n    }\n\n    if (rows) {\n      gridStyles.gridRows = rows;\n    }\n\n    if (template) {\n      gridStyles.gridTemplate = template;\n    }\n\n    return mergeStyles(\n      outerStyles,\n      contentPadding != null ? { '$content-padding': contentPadding } : null,\n      styles,\n      { Inner: mergeStyles(innerStyles, gridStyles, styles?.Inner as Styles) },\n    );\n  }, [\n    outerStyles,\n    innerStyles,\n    contentPadding,\n    styles,\n    isGrid,\n    columns,\n    rows,\n    template,\n  ]);\n\n  // Calculate inset values from panel sizes\n  const panelSizes = layoutState?.panelSizes ?? {\n    left: 0,\n    top: 0,\n    right: 0,\n    bottom: 0,\n  };\n\n  const isDragging = layoutState?.isDragging ?? false;\n  const isReady = layoutState?.isReady ?? true;\n  const markReady = layoutActions?.markReady;\n  const dismissOverlayPanels = layoutActions?.dismissOverlayPanels;\n  const hasOverlayPanels = layoutState?.hasOverlayPanels ?? false;\n\n  // Mark layout as ready after first paint\n  // Using useEffect + requestAnimationFrame ensures:\n  // 1. Panels register in useLayoutEffect → correct insets before first paint\n  // 2. First paint with not-ready=true (transition disabled)\n  // 3. After paint completes → enables transitions for subsequent changes\n  useEffect(() => {\n    const frameId = requestAnimationFrame(() => {\n      markReady?.();\n    });\n\n    return () => cancelAnimationFrame(frameId);\n  }, [markReady]);\n\n  // Auto-height detection: if layout collapses to 0 height after initialization,\n  // automatically set height to 100% to prevent invisible layout\n  useEffect(() => {\n    if (isReady && localRef.current && localRef.current.offsetHeight === 0) {\n      setIsAutoHeight(true);\n    }\n  }, [isReady]);\n\n  // Second check: if still 0 height after auto-height was applied,\n  // show collapsed state with warning\n  useEffect(() => {\n    if (isAutoHeight && localRef.current) {\n      // Use requestAnimationFrame to check after styles have been applied\n      const frameId = requestAnimationFrame(() => {\n        if (localRef.current && localRef.current.offsetHeight === 0) {\n          setIsCollapsed(true);\n        }\n      });\n\n      return () => cancelAnimationFrame(frameId);\n    }\n  }, [isAutoHeight]);\n\n  const insetStyle = useMemo(() => {\n    const baseStyle: Record<string, string> = {\n      '--inset-top': `${panelSizes.top}px`,\n      '--inset-right': `${panelSizes.right}px`,\n      '--inset-bottom': `${panelSizes.bottom}px`,\n      '--inset-left': `${panelSizes.left}px`,\n    };\n\n    if (style) {\n      return { ...baseStyle, ...style } as CSSProperties;\n    }\n\n    return baseStyle as CSSProperties;\n  }, [panelSizes, style]);\n\n  const mods = useMemo(\n    () => ({\n      dragging: isDragging,\n      'not-ready': !isReady,\n      'has-transition': hasTransition,\n      'auto-height': isAutoHeight && !isCollapsed,\n      collapsed: isCollapsed,\n      vertical: isVertical,\n      'do-not-overflow': doNotOverflow,\n    }),\n    [\n      isDragging,\n      isReady,\n      hasTransition,\n      isAutoHeight,\n      isCollapsed,\n      isVertical,\n      doNotOverflow,\n    ],\n  );\n\n  // Combine local ref with forwarded ref\n  const setRefs = (element: HTMLDivElement | null) => {\n    localRef.current = element;\n\n    if (typeof forwardedRef === 'function') {\n      forwardedRef(element);\n    } else if (forwardedRef) {\n      forwardedRef.current = element;\n    }\n  };\n\n  // Show dev warning when collapsed and in dev mode (or forced for stories)\n  const showDevWarning = isCollapsed && (_forceShowDevWarning || isDevEnv());\n\n  // Handle focus entering the Inner element - dismiss overlay panels\n  const handleInnerFocus = useCallback(\n    (e: FocusEvent<HTMLDivElement>) => {\n      // Only dismiss if there are overlay panels\n      if (!hasOverlayPanels) return;\n\n      // Check if focus is coming from outside the Inner element\n      const inner = e.currentTarget;\n      const relatedTarget = e.relatedTarget as Node | null;\n\n      // If relatedTarget is null or not inside the Inner element,\n      // focus is entering from outside - dismiss overlay panels\n      if (!relatedTarget || !inner.contains(relatedTarget)) {\n        dismissOverlayPanels?.();\n      }\n    },\n    [hasOverlayPanels, dismissOverlayPanels],\n  );\n\n  // Handle Escape key anywhere in the Layout - dismiss overlay panels\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (hasOverlayPanels && e.key === 'Escape') {\n        e.preventDefault();\n        e.stopPropagation();\n        dismissOverlayPanels?.();\n      }\n    },\n    [hasOverlayPanels, dismissOverlayPanels],\n  );\n\n  return (\n    <LayoutElement\n      ref={setRefs}\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      mods={mods}\n      styles={finalStyles}\n      style={insetStyle}\n      onKeyDown={hasOverlayPanels ? handleKeyDown : undefined}\n    >\n      {showDevWarning ? (\n        <Alert theme=\"danger\">\n          <b>UIKit:</b> <b>&lt;Layout/&gt;</b> has collapsed to <b>0</b> height.\n          Ensure the parent container has a defined height or use the{' '}\n          <b>height</b> prop on <b>&lt;Layout/&gt;</b>.\n        </Alert>\n      ) : (\n        <>\n          {/* All children go inside the Inner element - panels will portal themselves out */}\n          <div\n            ref={combinedInnerRef}\n            data-element=\"Inner\"\n            onFocus={handleInnerFocus}\n            {...innerProps}\n          >\n            {children}\n          </div>\n          {/* Container for panels to portal into - rendered after Inner so panels paint on top via DOM order */}\n          <div\n            ref={layoutRefs?.setPanelContainer}\n            data-element=\"PanelContainer\"\n          />\n        </>\n      )}\n    </LayoutElement>\n  );\n}\n\n/**\n * Layout component provides a vertical flex layout with overflow-safe content.\n * Uses a two-element architecture (wrapper + content) to ensure content never overflows.\n */\nfunction Layout(props: CubeLayoutProps, ref: ForwardedRef<HTMLDivElement>) {\n  const { hasTransition, minContentSize } = props;\n\n  return (\n    <LayoutProvider\n      hasTransition={hasTransition}\n      minContentSize={minContentSize}\n    >\n      <LayoutInner {...props} forwardedRef={ref} />\n    </LayoutProvider>\n  );\n}\n\nconst _Layout = forwardRef(Layout);\n\n_Layout.displayName = 'Layout';\n\nexport { _Layout as Layout };\n"],"mappings":"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"}

package/dist/components/content/Layout/LayoutBlock.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
-import { tasty } from "../../../tasty/tasty.js";
+/** @license MIT | @cube-dev/ui-kit v0.119.1 | Cube Dev Team */
 import { _LayoutContent } from "./LayoutContent.js";
+import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/content/Layout/LayoutBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutBlock.js","names":["LayoutContent"],"sources":["../../../../src/components/content/Layout/LayoutBlock.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react';\n\nimport { tasty } from '../../../tasty';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst BlockElement = tasty(LayoutContent, {\n  qa: 'LayoutBlock',\n  styles: {\n    container: 'none',\n    flexShrink: 0,\n    flexGrow: 0,\n\n    Inner: {\n      display: 'block',\n    },\n  },\n});\n\nexport interface CubeLayoutBlockProps extends CubeLayoutContentProps {}\n\nfunction LayoutBlock(\n  props: CubeLayoutBlockProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { children, scrollbar = 'tiny', ...otherProps } = props;\n\n  return (\n    <BlockElement {...otherProps} ref={ref} scrollbar={scrollbar}>\n      {children}\n    </BlockElement>\n  );\n}\n\nconst _LayoutBlock = forwardRef(LayoutBlock);\n\n_LayoutBlock.displayName = 'Layout.Block';\n\nexport { _LayoutBlock as LayoutBlock };\n"],"mappings":";;;;;;;AAMA,MAAM,eAAe,MAAMA,gBAAe;CACxC,IAAI;CACJ,QAAQ;EACN,WAAW;EACX,YAAY;EACZ,UAAU;EAEV,OAAO,EACL,SAAS,SACV;EACF;CACF,CAAC;AAIF,SAAS,YACP,OACA,KACA;CACA,MAAM,EAAE,UAAU,YAAY,QAAQ,GAAG,eAAe;AAExD,QACE,oBAAC;EAAa,GAAI;EAAiB;EAAgB;EAChD;GACY;;AAInB,MAAM,eAAe,WAAW,YAAY;AAE5C,aAAa,cAAc"}
+{"version":3,"file":"LayoutBlock.js","names":["LayoutContent"],"sources":["../../../../src/components/content/Layout/LayoutBlock.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef } from 'react';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst BlockElement = tasty(LayoutContent, {\n  qa: 'LayoutBlock',\n  styles: {\n    container: 'none',\n    flexShrink: 0,\n    flexGrow: 0,\n\n    Inner: {\n      display: 'block',\n    },\n  },\n});\n\nexport interface CubeLayoutBlockProps extends CubeLayoutContentProps {}\n\nfunction LayoutBlock(\n  props: CubeLayoutBlockProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { children, scrollbar = 'tiny', ...otherProps } = props;\n\n  return (\n    <BlockElement {...otherProps} ref={ref} scrollbar={scrollbar}>\n      {children}\n    </BlockElement>\n  );\n}\n\nconst _LayoutBlock = forwardRef(LayoutBlock);\n\n_LayoutBlock.displayName = 'Layout.Block';\n\nexport { _LayoutBlock as LayoutBlock };\n"],"mappings":";;;;;;;AAKA,MAAM,eAAe,MAAMA,gBAAe;CACxC,IAAI;CACJ,QAAQ;EACN,WAAW;EACX,YAAY;EACZ,UAAU;EAEV,OAAO,EACL,SAAS,SACV;EACF;CACF,CAAC;AAIF,SAAS,YACP,OACA,KACA;CACA,MAAM,EAAE,UAAU,YAAY,QAAQ,GAAG,eAAe;AAExD,QACE,oBAAC;EAAa,GAAI;EAAiB;EAAgB;EAChD;GACY;;AAInB,MAAM,eAAe,WAAW,YAAY;AAE5C,aAAa,cAAc"}

package/dist/components/content/Layout/LayoutCenter.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
-import { tasty } from "../../../tasty/tasty.js";
+/** @license MIT | @cube-dev/ui-kit v0.119.1 | Cube Dev Team */
 import { _LayoutContainer } from "./LayoutContainer.js";
+import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/content/Layout/LayoutCenter.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutCenter.js","names":["LayoutContainer"],"sources":["../../../../src/components/content/Layout/LayoutCenter.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react';\n\nimport { tasty } from '../../../tasty';\n\nimport { CubeLayoutContainerProps, LayoutContainer } from './LayoutContainer';\n\nconst CenterElement = tasty(LayoutContainer, {\n  qa: 'LayoutCenter',\n  styles: {\n    placeItems: 'stretch',\n    placeContent: 'stretch',\n\n    Inner: {\n      textAlign: 'center',\n      placeItems: 'center',\n      placeContent: 'center',\n    },\n  },\n});\n\nexport interface CubeLayoutCenterProps extends CubeLayoutContainerProps {}\n\nfunction LayoutCenter(\n  props: CubeLayoutCenterProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { children, ...otherProps } = props;\n\n  return (\n    <CenterElement {...otherProps} ref={ref}>\n      {children}\n    </CenterElement>\n  );\n}\n\nconst _LayoutCenter = forwardRef(LayoutCenter);\n\n_LayoutCenter.displayName = 'Layout.Center';\n\nexport { _LayoutCenter as LayoutCenter };\n"],"mappings":";;;;;;;AAMA,MAAM,gBAAgB,MAAMA,kBAAiB;CAC3C,IAAI;CACJ,QAAQ;EACN,YAAY;EACZ,cAAc;EAEd,OAAO;GACL,WAAW;GACX,YAAY;GACZ,cAAc;GACf;EACF;CACF,CAAC;AAIF,SAAS,aACP,OACA,KACA;CACA,MAAM,EAAE,UAAU,GAAG,eAAe;AAEpC,QACE,oBAAC;EAAc,GAAI;EAAiB;EACjC;GACa;;AAIpB,MAAM,gBAAgB,WAAW,aAAa;AAE9C,cAAc,cAAc"}
+{"version":3,"file":"LayoutCenter.js","names":["LayoutContainer"],"sources":["../../../../src/components/content/Layout/LayoutCenter.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef } from 'react';\n\nimport { CubeLayoutContainerProps, LayoutContainer } from './LayoutContainer';\n\nconst CenterElement = tasty(LayoutContainer, {\n  qa: 'LayoutCenter',\n  styles: {\n    placeItems: 'stretch',\n    placeContent: 'stretch',\n\n    Inner: {\n      textAlign: 'center',\n      placeItems: 'center',\n      placeContent: 'center',\n    },\n  },\n});\n\nexport interface CubeLayoutCenterProps extends CubeLayoutContainerProps {}\n\nfunction LayoutCenter(\n  props: CubeLayoutCenterProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { children, ...otherProps } = props;\n\n  return (\n    <CenterElement {...otherProps} ref={ref}>\n      {children}\n    </CenterElement>\n  );\n}\n\nconst _LayoutCenter = forwardRef(LayoutCenter);\n\n_LayoutCenter.displayName = 'Layout.Center';\n\nexport { _LayoutCenter as LayoutCenter };\n"],"mappings":";;;;;;;AAKA,MAAM,gBAAgB,MAAMA,kBAAiB;CAC3C,IAAI;CACJ,QAAQ;EACN,YAAY;EACZ,cAAc;EAEd,OAAO;GACL,WAAW;GACX,YAAY;GACZ,cAAc;GACf;EACF;CACF,CAAC;AAIF,SAAS,aACP,OACA,KACA;CACA,MAAM,EAAE,UAAU,GAAG,eAAe;AAEpC,QACE,oBAAC;EAAc,GAAI;EAAiB;EACjC;GACa;;AAIpB,MAAM,gBAAgB,WAAW,aAAa;AAE9C,cAAc,cAAc"}

package/dist/components/content/Layout/LayoutContainer.d.ts

@@ -1,7 +1,5 @@
 
-import { Styles } from "../../../tasty/styles/types.js";
-import { BaseProps, ContainerStyleProps } from "../../../tasty/types.js";
-import "../../../tasty/index.js";
+import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
 import * as react from "react";
 import { ForwardedRef, HTMLAttributes, ReactNode } from "react";
 

package/dist/components/content/Layout/LayoutContainer.js

@@ -1,11 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
-import { extractStyles } from "../../../tasty/utils/styles.js";
-import { mergeStyles } from "../../../tasty/utils/merge-styles.js";
-import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
-import { tasty } from "../../../tasty/tasty.js";
-import { filterBaseProps } from "../../../tasty/utils/filter-base-props.js";
+/** @license MIT | @cube-dev/ui-kit v0.119.1 | Cube Dev Team */
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { LayoutContextReset } from "./LayoutContext.js";
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, mergeStyles, tasty } from "@tenphi/tasty";
 import { forwardRef, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/content/Layout/LayoutContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutContainer.js","names":[],"sources":["../../../../src/components/content/Layout/LayoutContainer.tsx"],"sourcesContent":["import {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  useMemo,\n} from 'react';\n\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  mergeStyles,\n  Styles,\n  tasty,\n} from '../../../tasty';\nimport { useCombinedRefs } from '../../../utils/react';\n\nimport { LayoutContextReset } from './LayoutContext';\n\nconst ContainerElement = tasty({\n  as: 'div',\n  qa: 'LayoutContainer',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    flexGrow: 1,\n    flexShrink: 1,\n    placeItems: 'center start',\n    placeContent: 'stretch',\n    overflow: 'auto',\n    scrollbar: 'thin',\n    padding: '$content-padding',\n    placeSelf: 'stretch',\n    border: {\n      '': 0,\n      '!:last-child': '($layout-border-size, 1bw) solid #border bottom',\n    },\n\n    Inner: {\n      $: '>',\n      placeSelf: 'center',\n      display: 'flex',\n      flow: 'column',\n      boxSizing: 'border-box',\n      width: '40x 100% 120x',\n      flexGrow: 1,\n\n      '$layout-border-size': '0',\n    },\n  },\n});\n\nexport interface CubeLayoutContainerProps\n  extends BaseProps,\n    ContainerStyleProps {\n  children?: ReactNode;\n  /** Custom styles for container and inner elements */\n  styles?: Styles;\n  /** Custom styles for the inner element */\n  innerStyles?: Styles;\n  /** Ref for the inner content element */\n  innerRef?: ForwardedRef<HTMLDivElement>;\n  /** Props to spread on the Inner sub-element */\n  innerProps?: HTMLAttributes<HTMLDivElement>;\n}\n\nfunction LayoutContainer(\n  props: CubeLayoutContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    styles,\n    innerStyles: innerStylesProp,\n    innerRef: innerRefProp,\n    innerProps,\n    ...otherProps\n  } = props;\n  const innerStyles = extractStyles(\n    otherProps,\n    CONTAINER_STYLES,\n    innerStylesProp,\n  );\n\n  const hasInnerStyles = Object.keys(innerStyles).length > 0;\n\n  const finalStyles = useMemo(() => {\n    return mergeStyles(styles, hasInnerStyles ? { Inner: innerStyles } : null);\n  }, [styles, hasInnerStyles, innerStyles]);\n\n  const combinedInnerRef = useCombinedRefs(innerRefProp);\n\n  return (\n    <ContainerElement\n      ref={ref}\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      styles={finalStyles}\n    >\n      <div ref={combinedInnerRef} data-element=\"Inner\" {...innerProps}>\n        <LayoutContextReset>{children}</LayoutContextReset>\n      </div>\n    </ContainerElement>\n  );\n}\n\nconst _LayoutContainer = forwardRef(LayoutContainer);\n\n_LayoutContainer.displayName = 'Layout.Container';\n\nexport { _LayoutContainer as LayoutContainer };\n"],"mappings":";;;;;;;;;;;;AAsBA,MAAM,mBAAmB,MAAM;CAC7B,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,UAAU;EACV,YAAY;EACZ,YAAY;EACZ,cAAc;EACd,UAAU;EACV,WAAW;EACX,SAAS;EACT,WAAW;EACX,QAAQ;GACN,IAAI;GACJ,gBAAgB;GACjB;EAED,OAAO;GACL,GAAG;GACH,WAAW;GACX,SAAS;GACT,MAAM;GACN,WAAW;GACX,OAAO;GACP,UAAU;GAEV,uBAAuB;GACxB;EACF;CACF,CAAC;AAgBF,SAAS,gBACP,OACA,KACA;CACA,MAAM,EACJ,UACA,QACA,aAAa,iBACb,UAAU,cACV,YACA,GAAG,eACD;CACJ,MAAM,cAAc,cAClB,YACA,kBACA,gBACD;CAED,MAAM,iBAAiB,OAAO,KAAK,YAAY,CAAC,SAAS;CAEzD,MAAM,cAAc,cAAc;AAChC,SAAO,YAAY,QAAQ,iBAAiB,EAAE,OAAO,aAAa,GAAG,KAAK;IACzE;EAAC;EAAQ;EAAgB;EAAY,CAAC;CAEzC,MAAM,mBAAmB,gBAAgB,aAAa;AAEtD,QACE,oBAAC;EACM;EACL,GAAI,gBAAgB,YAAY,EAAE,YAAY,MAAM,CAAC;EACrD,QAAQ;YAER,oBAAC;GAAI,KAAK;GAAkB,gBAAa;GAAQ,GAAI;aACnD,oBAAC,sBAAoB,WAA8B;IAC/C;GACW;;AAIvB,MAAM,mBAAmB,WAAW,gBAAgB;AAEpD,iBAAiB,cAAc"}
+{"version":3,"file":"LayoutContainer.js","names":[],"sources":["../../../../src/components/content/Layout/LayoutContainer.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  mergeStyles,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  useMemo,\n} from 'react';\n\nimport { useCombinedRefs } from '../../../utils/react';\n\nimport { LayoutContextReset } from './LayoutContext';\n\nconst ContainerElement = tasty({\n  as: 'div',\n  qa: 'LayoutContainer',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    flexGrow: 1,\n    flexShrink: 1,\n    placeItems: 'center start',\n    placeContent: 'stretch',\n    overflow: 'auto',\n    scrollbar: 'thin',\n    padding: '$content-padding',\n    placeSelf: 'stretch',\n    border: {\n      '': 0,\n      '!:last-child': '($layout-border-size, 1bw) solid #border bottom',\n    },\n\n    Inner: {\n      $: '>',\n      placeSelf: 'center',\n      display: 'flex',\n      flow: 'column',\n      boxSizing: 'border-box',\n      width: '40x 100% 120x',\n      flexGrow: 1,\n\n      '$layout-border-size': '0',\n    },\n  },\n});\n\nexport interface CubeLayoutContainerProps\n  extends BaseProps,\n    ContainerStyleProps {\n  children?: ReactNode;\n  /** Custom styles for container and inner elements */\n  styles?: Styles;\n  /** Custom styles for the inner element */\n  innerStyles?: Styles;\n  /** Ref for the inner content element */\n  innerRef?: ForwardedRef<HTMLDivElement>;\n  /** Props to spread on the Inner sub-element */\n  innerProps?: HTMLAttributes<HTMLDivElement>;\n}\n\nfunction LayoutContainer(\n  props: CubeLayoutContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    styles,\n    innerStyles: innerStylesProp,\n    innerRef: innerRefProp,\n    innerProps,\n    ...otherProps\n  } = props;\n  const innerStyles = extractStyles(\n    otherProps,\n    CONTAINER_STYLES,\n    innerStylesProp,\n  );\n\n  const hasInnerStyles = Object.keys(innerStyles).length > 0;\n\n  const finalStyles = useMemo(() => {\n    return mergeStyles(styles, hasInnerStyles ? { Inner: innerStyles } : null);\n  }, [styles, hasInnerStyles, innerStyles]);\n\n  const combinedInnerRef = useCombinedRefs(innerRefProp);\n\n  return (\n    <ContainerElement\n      ref={ref}\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      styles={finalStyles}\n    >\n      <div ref={combinedInnerRef} data-element=\"Inner\" {...innerProps}>\n        <LayoutContextReset>{children}</LayoutContextReset>\n      </div>\n    </ContainerElement>\n  );\n}\n\nconst _LayoutContainer = forwardRef(LayoutContainer);\n\n_LayoutContainer.displayName = 'Layout.Container';\n\nexport { _LayoutContainer as LayoutContainer };\n"],"mappings":";;;;;;;;AAsBA,MAAM,mBAAmB,MAAM;CAC7B,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,UAAU;EACV,YAAY;EACZ,YAAY;EACZ,cAAc;EACd,UAAU;EACV,WAAW;EACX,SAAS;EACT,WAAW;EACX,QAAQ;GACN,IAAI;GACJ,gBAAgB;GACjB;EAED,OAAO;GACL,GAAG;GACH,WAAW;GACX,SAAS;GACT,MAAM;GACN,WAAW;GACX,OAAO;GACP,UAAU;GAEV,uBAAuB;GACxB;EACF;CACF,CAAC;AAgBF,SAAS,gBACP,OACA,KACA;CACA,MAAM,EACJ,UACA,QACA,aAAa,iBACb,UAAU,cACV,YACA,GAAG,eACD;CACJ,MAAM,cAAc,cAClB,YACA,kBACA,gBACD;CAED,MAAM,iBAAiB,OAAO,KAAK,YAAY,CAAC,SAAS;CAEzD,MAAM,cAAc,cAAc;AAChC,SAAO,YAAY,QAAQ,iBAAiB,EAAE,OAAO,aAAa,GAAG,KAAK;IACzE;EAAC;EAAQ;EAAgB;EAAY,CAAC;CAEzC,MAAM,mBAAmB,gBAAgB,aAAa;AAEtD,QACE,oBAAC;EACM;EACL,GAAI,gBAAgB,YAAY,EAAE,YAAY,MAAM,CAAC;EACrD,QAAQ;YAER,oBAAC;GAAI,KAAK;GAAkB,gBAAa;GAAQ,GAAI;aACnD,oBAAC,sBAAoB,WAA8B;IAC/C;GACW;;AAIvB,MAAM,mBAAmB,WAAW,gBAAgB;AAEpD,iBAAiB,cAAc"}

package/dist/components/content/Layout/LayoutContent.d.ts

@@ -1,6 +1,5 @@
 
-import { BaseProps, ContainerStyleProps, Mods } from "../../../tasty/types.js";
-import "../../../tasty/index.js";
+import { BaseProps, ContainerStyleProps, Mods } from "@tenphi/tasty";
 import * as react from "react";
 import { ForwardedRef, HTMLAttributes, ReactNode } from "react";
 

package/dist/components/content/Layout/LayoutContent.js

@@ -1,12 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.118.0 | Cube Dev Team */
-import { extractStyles } from "../../../tasty/utils/styles.js";
-import { mergeStyles } from "../../../tasty/utils/merge-styles.js";
-import { INNER_STYLES, OUTER_STYLES } from "../../../tasty/styles/list.js";
-import { tasty } from "../../../tasty/tasty.js";
-import { filterBaseProps } from "../../../tasty/utils/filter-base-props.js";
+/** @license MIT | @cube-dev/ui-kit v0.119.1 | Cube Dev Team */
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { LayoutContextReset } from "./LayoutContext.js";
 import { useTinyScrollbar } from "./hooks/useTinyScrollbar.js";
+import { INNER_STYLES, OUTER_STYLES, extractStyles, filterBaseProps, mergeStyles, tasty } from "@tenphi/tasty";
 import { forwardRef, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useHover } from "react-aria";