@fluentui/react-tabs 9.8.2 → 9.9.0

package/lib/components/Tab/useTabStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tab/useTabStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TabSlots, TabState } from './Tab.types';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator.styles';\n\nexport const tabClassNames: SlotClassNames<TabSlots> = {\n  root: 'fui-Tab',\n  icon: 'fui-Tab__icon',\n  content: 'fui-Tab__content',\n};\n\nconst reservedSpaceClassNames = {\n  content: 'fui-Tab__content--reserved-space',\n};\n\n// These should match the constants defined in @fluentui/react-icons\n// This package avoids taking a dependency on the icons package for only the constants.\nconst iconClassNames = {\n  filled: 'fui-Icon-filled',\n  regular: 'fui-Icon-regular',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: {\n    alignItems: 'center',\n    display: 'grid',\n    flexShrink: 0,\n    gridAutoFlow: 'column',\n    gridTemplateColumns: 'auto',\n    gridTemplateRows: 'auto',\n    outlineStyle: 'none',\n    position: 'relative',\n  },\n  button: {\n    alignItems: 'center',\n    border: 'none',\n    borderRadius: tokens.borderRadiusMedium,\n    cursor: 'pointer',\n    display: 'grid',\n    flexShrink: 0,\n    gridAutoFlow: 'column',\n    gridTemplateColumns: 'auto',\n    gridTemplateRows: 'auto',\n    fontFamily: tokens.fontFamilyBase,\n    lineHeight: tokens.lineHeightBase300,\n    outlineStyle: 'none',\n    position: 'relative',\n    overflow: 'hidden',\n    textTransform: 'none',\n  },\n  horizontal: {\n    justifyContent: 'center',\n  },\n  vertical: {\n    justifyContent: 'start',\n  },\n  smallHorizontal: {\n    columnGap: tokens.spacingHorizontalXXS,\n    padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalSNudge}`,\n  },\n  smallVertical: {\n    // horizontal spacing is deliberate. This is the gap between icon and content.\n    columnGap: tokens.spacingHorizontalXXS,\n    padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`,\n  },\n  mediumHorizontal: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalMNudge}`,\n  },\n  mediumVertical: {\n    // horizontal spacing is deliberate. This is the gap between icon and content.\n    columnGap: tokens.spacingHorizontalSNudge,\n    padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalMNudge}`,\n  },\n  largeHorizontal: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalMNudge}`,\n  },\n  largeVertical: {\n    // horizontal spacing is deliberate. This is the gap between icon and content.\n    columnGap: tokens.spacingHorizontalSNudge,\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalMNudge}`,\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ':enabled:hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n    ':enabled:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n    [`& .${tabClassNames.icon}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n    [`:enabled:hover .${tabClassNames.icon}`]: {\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    [`:enabled:active .${tabClassNames.icon}`]: {\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n    [`& .${tabClassNames.content}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n    [`:enabled:hover .${tabClassNames.content}`]: {\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    [`:enabled:active .${tabClassNames.content}`]: {\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackground,\n    ':enabled:hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':enabled:active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n    [`& .${tabClassNames.icon}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n    [`:enabled:hover .${tabClassNames.icon}`]: {\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    [`:enabled:active .${tabClassNames.icon}`]: {\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n    [`& .${tabClassNames.content}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n    [`:enabled:hover .${tabClassNames.content}`]: {\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    [`:enabled:active .${tabClassNames.content}`]: {\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n  },\n  disabledCursor: {\n    cursor: 'not-allowed',\n  },\n  disabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n\n    [`& .${tabClassNames.icon}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n    [`& .${tabClassNames.content}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  selected: {\n    [`& .${tabClassNames.icon}`]: {\n      color: tokens.colorCompoundBrandForeground1,\n    },\n    [`:enabled:hover .${tabClassNames.icon}`]: {\n      color: tokens.colorCompoundBrandForeground1Hover,\n    },\n    [`:enabled:active .${tabClassNames.icon}`]: {\n      color: tokens.colorCompoundBrandForeground1Pressed,\n    },\n    [`& .${tabClassNames.content}`]: {\n      color: tokens.colorNeutralForeground1,\n    },\n    [`:enabled:hover .${tabClassNames.content}`]: {\n      color: tokens.colorNeutralForeground1Hover,\n    },\n    [`:enabled:active .${tabClassNames.content}`]: {\n      color: tokens.colorNeutralForeground1Pressed,\n    },\n  },\n});\n\nconst useCircularAppearanceStyles = makeStyles({\n  base: {\n    borderRadius: tokens.borderRadiusCircular,\n    border: `solid ${tokens.strokeWidthThin} ${tokens.colorTransparentStroke}`,\n    [`& .${tabClassNames.icon}`]: {\n      color: 'inherit',\n    },\n    [`& .${tabClassNames.content}`]: {\n      color: 'inherit',\n    },\n  },\n  medium: {\n    paddingBlock: `${tokens.spacingVerticalSNudge}`,\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackground,\n    color: tokens.colorNeutralForeground2,\n    ':enabled:hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStroke1Hover}`,\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':enabled:active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStroke1Pressed}`,\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n    '@media (forced-colors: active)': {\n      border: `solid ${tokens.strokeWidthThin} Canvas`,\n    },\n  },\n  subtleSelected: {\n    backgroundColor: tokens.colorBrandBackground2,\n    border: `solid ${tokens.strokeWidthThin} ${tokens.colorCompoundBrandStroke}`,\n    color: tokens.colorBrandForeground2,\n    ':enabled:hover': {\n      backgroundColor: tokens.colorBrandBackground2Hover,\n      border: `solid ${tokens.strokeWidthThin} ${tokens.colorCompoundBrandStrokeHover}`,\n      color: tokens.colorBrandForeground2Hover,\n    },\n    ':enabled:active': {\n      backgroundColor: tokens.colorBrandBackground2Pressed,\n      border: `solid ${tokens.strokeWidthThin} ${tokens.colorCompoundBrandStrokePressed}`,\n      color: tokens.colorBrandForeground2Pressed,\n    },\n    '@media (forced-colors: active)': {\n      border: `solid ${tokens.strokeWidthThin} Highlight`,\n    },\n  },\n  subtleDisabled: {\n    backgroundColor: tokens.colorSubtleBackground,\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n  subtleDisabledSelected: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStrokeDisabled}`,\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n  filled: {\n    backgroundColor: tokens.colorNeutralBackground3,\n    color: tokens.colorNeutralForeground2,\n    ':enabled:hover': {\n      backgroundColor: tokens.colorNeutralBackground3Hover,\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':enabled:active': {\n      backgroundColor: tokens.colorNeutralBackground3Pressed,\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n    '@media (forced-colors: active)': {\n      ':enabled:hover': {\n        backgroundColor: 'Highlight',\n        forcedColorAdjust: 'none',\n        [`& .${tabClassNames.content}`]: {\n          color: 'HighlightText',\n        },\n        [`& .${iconClassNames.filled}`]: {\n          color: 'HighlightText',\n        },\n        [`& .${iconClassNames.regular}`]: {\n          color: 'HighlightText',\n        },\n      },\n    },\n  },\n  filledSelected: {\n    backgroundColor: tokens.colorBrandBackground,\n    color: tokens.colorNeutralForegroundOnBrand,\n    ':enabled:hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n    ':enabled:active': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n    '@media (forced-colors: active)': {\n      ':enabled': {\n        backgroundColor: 'ButtonText',\n        [`& .${tabClassNames.content}`]: {\n          color: 'ButtonFace',\n          forcedColorAdjust: 'none',\n        },\n      },\n      [`:enabled .${tabClassNames.icon}`]: {\n        color: 'ButtonFace',\n      },\n    },\n  },\n  filledDisabled: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n  filledDisabledSelected: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStrokeDisabled}`,\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n});\n\n/**\n * Focus styles for the root slot\n */\nconst useFocusStyles = makeStyles({\n  // Tab creates a custom focus indicator because the default focus indicator\n  // is applied using an ::after pseudo-element on the root. Since the selection\n  // indicator uses an ::after pseudo-element on the root, there is a conflict.\n  base: createCustomFocusIndicatorStyle(\n    {\n      ...shorthands.borderColor('transparent'),\n      outlineWidth: tokens.strokeWidthThick,\n      outlineColor: 'transparent',\n      outlineStyle: 'solid',\n      boxShadow: `\n      ${tokens.shadow4},\n      0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n    `,\n      zIndex: 1,\n    },\n    { enableOutline: true },\n  ),\n  circular: createCustomFocusIndicatorStyle(\n    {\n      ...shorthands.borderColor('transparent'),\n      outlineWidth: tokens.strokeWidthThick,\n      outlineColor: 'transparent',\n      outlineStyle: 'solid',\n      boxShadow: `\n        ${tokens.shadow4},\n        0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2},\n        0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralStrokeOnBrand} inset\n      `,\n      zIndex: 1,\n    },\n    { enableOutline: true },\n  ),\n});\n\n/** Indicator styles for when pending selection */\nconst usePendingIndicatorStyles = makeStyles({\n  base: {\n    ':hover::before': {\n      backgroundColor: tokens.colorNeutralStroke1Hover,\n      borderRadius: tokens.borderRadiusCircular,\n      content: '\"\"',\n      position: 'absolute',\n    },\n    ':active::before': {\n      backgroundColor: tokens.colorNeutralStroke1Pressed,\n      borderRadius: tokens.borderRadiusCircular,\n      content: '\"\"',\n      position: 'absolute',\n    },\n    '@media (forced-colors: active)': {\n      ':hover::before': {\n        backgroundColor: 'Highlight',\n      },\n      ':active::before': {\n        backgroundColor: 'Highlight',\n      },\n    },\n  },\n  disabled: {\n    ':hover::before': {\n      backgroundColor: tokens.colorTransparentStroke,\n    },\n    ':active::before': {\n      backgroundColor: tokens.colorTransparentStroke,\n    },\n    '@media (forced-colors: active)': {\n      ':hover::before': {\n        backgroundColor: 'transparent',\n      },\n      ':active::before': {\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n  smallHorizontal: {\n    '::before': {\n      bottom: 0,\n      height: tokens.strokeWidthThick,\n      left: tokens.spacingHorizontalSNudge,\n      right: tokens.spacingHorizontalSNudge,\n    },\n  },\n  smallVertical: {\n    '::before': {\n      bottom: tokens.spacingVerticalXS,\n      left: 0,\n      top: tokens.spacingVerticalXS,\n      width: tokens.strokeWidthThicker,\n    },\n  },\n  mediumHorizontal: {\n    '::before': {\n      bottom: 0,\n      height: tokens.strokeWidthThicker,\n      left: tokens.spacingHorizontalM,\n      right: tokens.spacingHorizontalM,\n    },\n  },\n  mediumVertical: {\n    '::before': {\n      bottom: tokens.spacingVerticalS,\n      left: 0,\n      top: tokens.spacingVerticalS,\n      width: tokens.strokeWidthThicker,\n    },\n  },\n  largeHorizontal: {\n    '::before': {\n      bottom: 0,\n      height: tokens.strokeWidthThicker,\n      left: tokens.spacingHorizontalM,\n      right: tokens.spacingHorizontalM,\n    },\n  },\n  largeVertical: {\n    '::before': {\n      bottom: tokens.spacingVerticalMNudge,\n      left: 0,\n      top: tokens.spacingVerticalMNudge,\n      width: tokens.strokeWidthThicker,\n    },\n  },\n});\n\nconst useActiveIndicatorStyles = makeStyles({\n  base: {\n    '::after': {\n      backgroundColor: tokens.colorTransparentStroke,\n      borderRadius: tokens.borderRadiusCircular,\n      content: '\"\"',\n      position: 'absolute',\n    },\n  },\n  selected: {\n    '::after': {\n      backgroundColor: tokens.colorCompoundBrandStroke,\n    },\n    ':enabled:hover::after': {\n      backgroundColor: tokens.colorCompoundBrandStrokeHover,\n    },\n    ':enabled:active::after': {\n      backgroundColor: tokens.colorCompoundBrandStrokePressed,\n    },\n    '@media (forced-colors: active)': {\n      '::after': {\n        backgroundColor: 'ButtonText',\n      },\n      ':enabled:hover::after': {\n        backgroundColor: 'ButtonText',\n      },\n      ':enabled:active::after': {\n        backgroundColor: 'ButtonText',\n      },\n    },\n  },\n  disabled: {\n    '::after': {\n      backgroundColor: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  smallHorizontal: {\n    '::after': {\n      bottom: 0,\n      height: tokens.strokeWidthThick,\n      left: tokens.spacingHorizontalSNudge,\n      right: tokens.spacingHorizontalSNudge,\n    },\n  },\n  smallVertical: {\n    '::after': {\n      bottom: tokens.spacingVerticalXS,\n      left: '0',\n      top: tokens.spacingVerticalXS,\n      width: tokens.strokeWidthThicker,\n    },\n  },\n  mediumHorizontal: {\n    '::after': {\n      bottom: '0',\n      height: tokens.strokeWidthThicker,\n      left: tokens.spacingHorizontalM,\n      right: tokens.spacingHorizontalM,\n    },\n  },\n  mediumVertical: {\n    '::after': {\n      bottom: tokens.spacingVerticalS,\n      left: 0,\n      top: tokens.spacingVerticalS,\n      width: tokens.strokeWidthThicker,\n    },\n  },\n  largeHorizontal: {\n    '::after': {\n      bottom: 0,\n      height: tokens.strokeWidthThicker,\n      left: tokens.spacingHorizontalM,\n      right: tokens.spacingHorizontalM,\n    },\n  },\n  largeVertical: {\n    '::after': {\n      bottom: tokens.spacingVerticalMNudge,\n      left: 0,\n      top: tokens.spacingVerticalMNudge,\n      width: tokens.strokeWidthThicker,\n    },\n  },\n});\n\n/**\n * Styles for the icon slot.\n */\nconst useIconStyles = makeStyles({\n  base: {\n    gridColumnStart: 1,\n    gridRowStart: 1,\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    [`& .${iconClassNames.filled}`]: {\n      display: 'none',\n    },\n    [`& .${iconClassNames.regular}`]: {\n      display: 'inline',\n    },\n  },\n  // per design, the small and medium font sizes are the same.\n  // the size prop only affects spacing.\n  small: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  medium: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  large: {\n    fontSize: '24px',\n    height: '24px',\n    width: '24px',\n  },\n  selected: {\n    [`& .${iconClassNames.filled}`]: {\n      display: 'inline',\n    },\n    [`& .${iconClassNames.regular}`]: {\n      display: 'none',\n    },\n  },\n});\n\n/**\n * Styles for the content slot (children)\n */\nconst useContentStyles = makeStyles({\n  base: {\n    ...typographyStyles.body1,\n    overflow: 'hidden',\n    // content padding is the same for medium & small, horizontal & vertical\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalXXS}`,\n  },\n  selected: {\n    ...typographyStyles.body1Strong,\n  },\n  large: {\n    ...typographyStyles.body2,\n  },\n  largeSelected: {\n    ...typographyStyles.subtitle2,\n  },\n  noIconBefore: {\n    gridColumnStart: 1,\n    gridRowStart: 1,\n  },\n  iconBefore: {\n    gridColumnStart: 2,\n    gridRowStart: 1,\n  },\n  placeholder: {\n    visibility: 'hidden',\n  },\n});\n\n/**\n * Apply styling to the Tab slots based on the state\n */\nexport const useTabStyles_unstable = (state: TabState): TabState => {\n  'use no memo';\n\n  useTabIndicatorStyles_unstable(state);\n\n  useTabButtonStyles_unstable(state, state.root);\n\n  useTabContentStyles_unstable(state);\n\n  return state;\n};\n\n/**\n * Applies styles for the Tab indicator based on its current state.\n *\n * This hook is typically used internally by `useTabStyles_unstable`. You should\n * only use it directly if you're creating a custom `Tab` component.\n *\n * @param state - The `Tab` component's current state\n * @returns The state object with updated button styles\n */\nexport const useTabIndicatorStyles_unstable = (state: TabState): TabState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const pendingIndicatorStyles = usePendingIndicatorStyles();\n  const activeIndicatorStyles = useActiveIndicatorStyles();\n\n  const { appearance, disabled, selected, size, vertical } = state;\n\n  const classes: Parameters<typeof mergeClasses> = [tabClassNames.root, rootStyles.root];\n\n  if (appearance !== 'subtle-circular' && appearance !== 'filled-circular') {\n    classes.push(\n      // pending indicator (before pseudo element)\n      pendingIndicatorStyles.base,\n      size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal),\n      size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal),\n      size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal),\n      disabled && pendingIndicatorStyles.disabled,\n\n      // active indicator (after pseudo element)\n      selected && activeIndicatorStyles.base,\n      selected && !disabled && activeIndicatorStyles.selected,\n      selected &&\n        size === 'small' &&\n        (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal),\n      selected &&\n        size === 'medium' &&\n        (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal),\n      selected &&\n        size === 'large' &&\n        (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal),\n      selected && disabled && activeIndicatorStyles.disabled,\n    );\n  }\n\n  state.root.className = mergeClasses(...classes, state.root.className);\n\n  useTabAnimatedIndicatorStyles_unstable(state);\n\n  return state;\n};\n\n/**\n * Applies styles to the Tab button slot based on its current state.\n *\n * This hook is typically used internally by `useTabStyles_unstable`. You should\n * only use it directly if you're creating a custom `Tab` component.\n *\n * @param state - The Tab component's current state\n * @param slot - The button slot of the Tab component\n * @returns The state object with updated button styles\n */\nexport const useTabButtonStyles_unstable = (state: TabState, slot: TabState['root']): TabState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const focusStyles = useFocusStyles();\n  const circularStyles = useCircularAppearanceStyles();\n\n  const { appearance, disabled, selected, size, vertical } = state;\n\n  const isSubtleCircular = appearance === 'subtle-circular';\n  const isFilledCircular = appearance === 'filled-circular';\n  const isCircular = isSubtleCircular || isFilledCircular;\n\n  const circularAppearance = [\n    circularStyles.base,\n    focusStyles.circular,\n    // sizes\n    size === 'medium' && circularStyles.medium,\n    // subtle-circular appearance\n    isSubtleCircular && circularStyles.subtle,\n    selected && isSubtleCircular && circularStyles.subtleSelected,\n    disabled && isSubtleCircular && circularStyles.subtleDisabled,\n    selected && disabled && isSubtleCircular && circularStyles.subtleDisabledSelected,\n    // filled-circular appearance\n    isFilledCircular && circularStyles.filled,\n    selected && isFilledCircular && circularStyles.filledSelected,\n    disabled && isFilledCircular && circularStyles.filledDisabled,\n    selected && disabled && isFilledCircular && circularStyles.filledDisabledSelected,\n  ];\n\n  const regularAppearance = [\n    focusStyles.base,\n    !disabled && appearance === 'subtle' && rootStyles.subtle,\n    !disabled && appearance === 'transparent' && rootStyles.transparent,\n    !disabled && selected && rootStyles.selected,\n    disabled && rootStyles.disabled,\n  ];\n\n  slot.className = mergeClasses(\n    rootStyles.button,\n    // orientation\n    vertical ? rootStyles.vertical : rootStyles.horizontal,\n    // size\n    size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),\n    size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),\n    size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal),\n    ...(isCircular ? circularAppearance : regularAppearance),\n    disabled && rootStyles.disabledCursor,\n    slot.className,\n  );\n\n  return state;\n};\n\n/**\n * Applies styles to the Tab content slot based on its current state.\n *\n * This hook is typically used internally by `useTabStyles_unstable`. You should\n * only use it directly if you're creating a custom `Tab` component.\n *\n * @param state - The Tab component's current state\n * @returns The state object with updated content styles\n */\nexport const useTabContentStyles_unstable = (state: TabState): TabState => {\n  'use no memo';\n\n  const iconStyles = useIconStyles();\n  const contentStyles = useContentStyles();\n\n  const { selected, size } = state;\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      tabClassNames.icon,\n      iconStyles.base,\n      iconStyles[size],\n      selected && iconStyles.selected,\n      state.icon.className,\n    );\n  }\n\n  // This needs to be before state.content.className is updated\n  if (state.contentReservedSpace) {\n    state.contentReservedSpace.className = mergeClasses(\n      reservedSpaceClassNames.content,\n      contentStyles.base,\n      size === 'large' ? contentStyles.largeSelected : contentStyles.selected,\n      state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore,\n      contentStyles.placeholder,\n      state.content.className,\n    );\n    // FIXME: this is a deprecated API\n    // should be removed in the next major version\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    state.contentReservedSpaceClassName = state.contentReservedSpace.className;\n  }\n\n  state.content.className = mergeClasses(\n    tabClassNames.content,\n    contentStyles.base,\n    size === 'large' && contentStyles.large,\n    selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected),\n    state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore,\n    state.content.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","typographyStyles","useTabAnimatedIndicatorStyles_unstable","tabClassNames","root","icon","content","reservedSpaceClassNames","iconClassNames","filled","regular","useRootStyles","alignItems","display","flexShrink","gridAutoFlow","gridTemplateColumns","gridTemplateRows","outlineStyle","position","button","border","borderRadius","borderRadiusMedium","cursor","fontFamily","fontFamilyBase","lineHeight","lineHeightBase300","overflow","textTransform","horizontal","justifyContent","vertical","smallHorizontal","columnGap","spacingHorizontalXXS","padding","spacingVerticalSNudge","spacingHorizontalSNudge","smallVertical","spacingVerticalXXS","mediumHorizontal","spacingVerticalM","spacingHorizontalMNudge","mediumVertical","largeHorizontal","spacingVerticalL","largeVertical","spacingVerticalS","transparent","backgroundColor","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","color","colorNeutralForeground2","colorNeutralForeground2Hover","colorNeutralForeground2Pressed","subtle","colorSubtleBackground","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","disabledCursor","disabled","colorNeutralForegroundDisabled","selected","colorCompoundBrandForeground1","colorCompoundBrandForeground1Hover","colorCompoundBrandForeground1Pressed","colorNeutralForeground1","colorNeutralForeground1Hover","colorNeutralForeground1Pressed","useCircularAppearanceStyles","base","borderRadiusCircular","strokeWidthThin","colorTransparentStroke","medium","paddingBlock","colorNeutralStroke1Hover","colorNeutralStroke1Pressed","subtleSelected","colorBrandBackground2","colorCompoundBrandStroke","colorBrandForeground2","colorBrandBackground2Hover","colorCompoundBrandStrokeHover","colorBrandForeground2Hover","colorBrandBackground2Pressed","colorCompoundBrandStrokePressed","colorBrandForeground2Pressed","subtleDisabled","subtleDisabledSelected","colorNeutralBackgroundDisabled","colorNeutralStrokeDisabled","colorNeutralBackground3","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","forcedColorAdjust","filledSelected","colorBrandBackground","colorNeutralForegroundOnBrand","colorBrandBackgroundHover","colorBrandBackgroundPressed","filledDisabled","filledDisabledSelected","useFocusStyles","borderColor","outlineWidth","strokeWidthThick","outlineColor","boxShadow","shadow4","colorStrokeFocus2","zIndex","enableOutline","circular","colorNeutralStrokeOnBrand","usePendingIndicatorStyles","bottom","height","left","right","spacingVerticalXS","top","width","strokeWidthThicker","spacingHorizontalM","spacingVerticalMNudge","useActiveIndicatorStyles","useIconStyles","gridColumnStart","gridRowStart","small","fontSize","large","useContentStyles","body1","spacingVerticalNone","body1Strong","body2","largeSelected","subtitle2","noIconBefore","iconBefore","placeholder","visibility","useTabStyles_unstable","state","useTabIndicatorStyles_unstable","useTabButtonStyles_unstable","useTabContentStyles_unstable","rootStyles","pendingIndicatorStyles","activeIndicatorStyles","appearance","size","classes","push","className","slot","focusStyles","circularStyles","isSubtleCircular","isFilledCircular","isCircular","circularAppearance","regularAppearance","iconStyles","contentStyles","contentReservedSpace","contentReservedSpaceClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AACtE,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAGjE,SAASC,sCAAsC,QAAQ,mCAAmC;AAE1F,OAAO,MAAMC,gBAA0C;IACrDC,MAAM;IACNC,MAAM;IACNC,SAAS;AACX,EAAE;AAEF,MAAMC,0BAA0B;IAC9BD,SAAS;AACX;AAEA,oEAAoE;AACpE,uFAAuF;AACvF,MAAME,iBAAiB;IACrBC,QAAQ;IACRC,SAAS;AACX;AAEA;;CAEC,GACD,MAAMC,gBAAgBf,WAAW;IAC/BQ,MAAM;QACJQ,YAAY;QACZC,SAAS;QACTC,YAAY;QACZC,cAAc;QACdC,qBAAqB;QACrBC,kBAAkB;QAClBC,cAAc;QACdC,UAAU;IACZ;IACAC,QAAQ;QACNR,YAAY;QACZS,QAAQ;QACRC,cAActB,OAAOuB,kBAAkB;QACvCC,QAAQ;QACRX,SAAS;QACTC,YAAY;QACZC,cAAc;QACdC,qBAAqB;QACrBC,kBAAkB;QAClBQ,YAAYzB,OAAO0B,cAAc;QACjCC,YAAY3B,OAAO4B,iBAAiB;QACpCV,cAAc;QACdC,UAAU;QACVU,UAAU;QACVC,eAAe;IACjB;IACAC,YAAY;QACVC,gBAAgB;IAClB;IACAC,UAAU;QACRD,gBAAgB;IAClB;IACAE,iBAAiB;QACfC,WAAWnC,OAAOoC,oBAAoB;QACtCC,SAAS,CAAC,EAAErC,OAAOsC,qBAAqB,CAAC,CAAC,EAAEtC,OAAOuC,uBAAuB,CAAC,CAAC;IAC9E;IACAC,eAAe;QACb,8EAA8E;QAC9EL,WAAWnC,OAAOoC,oBAAoB;QACtCC,SAAS,CAAC,EAAErC,OAAOyC,kBAAkB,CAAC,CAAC,EAAEzC,OAAOuC,uBAAuB,CAAC,CAAC;IAC3E;IACAG,kBAAkB;QAChBP,WAAWnC,OAAOuC,uBAAuB;QACzCF,SAAS,CAAC,EAAErC,OAAO2C,gBAAgB,CAAC,CAAC,EAAE3C,OAAO4C,uBAAuB,CAAC,CAAC;IACzE;IACAC,gBAAgB;QACd,8EAA8E;QAC9EV,WAAWnC,OAAOuC,uBAAuB;QACzCF,SAAS,CAAC,EAAErC,OAAOsC,qBAAqB,CAAC,CAAC,EAAEtC,OAAO4C,uBAAuB,CAAC,CAAC;IAC9E;IACAE,iBAAiB;QACfX,WAAWnC,OAAOuC,uBAAuB;QACzCF,SAAS,CAAC,EAAErC,OAAO+C,gBAAgB,CAAC,CAAC,EAAE/C,OAAO4C,uBAAuB,CAAC,CAAC;IACzE;IACAI,eAAe;QACb,8EAA8E;QAC9Eb,WAAWnC,OAAOuC,uBAAuB;QACzCF,SAAS,CAAC,EAAErC,OAAOiD,gBAAgB,CAAC,CAAC,EAAEjD,OAAO4C,uBAAuB,CAAC,CAAC;IACzE;IACAM,aAAa;QACXC,iBAAiBnD,OAAOoD,0BAA0B;QAClD,kBAAkB;YAChBD,iBAAiBnD,OAAOqD,+BAA+B;QACzD;QACA,mBAAmB;YACjBF,iBAAiBnD,OAAOsD,iCAAiC;QAC3D;QACA,CAAC,CAAC,GAAG,EAAEnD,cAAcE,IAAI,CAAC,CAAC,CAAC,EAAE;YAC5BkD,OAAOvD,OAAOwD,uBAAuB;QACvC;QACA,CAAC,CAAC,gBAAgB,EAAErD,cAAcE,IAAI,CAAC,CAAC,CAAC,EAAE;YACzCkD,OAAOvD,OAAOyD,4BAA4B;QAC5C;QACA,CAAC,CAAC,iBAAiB,EAAEtD,cAAcE,IAAI,CAAC,CAAC,CAAC,EAAE;YAC1CkD,OAAOvD,OAAO0D,8BAA8B;QAC9C;QACA,CAAC,CAAC,GAAG,EAAEvD,cAAcG,OAAO,CAAC,CAAC,CAAC,EAAE;YAC/BiD,OAAOvD,OAAOwD,uBAAuB;QACvC;QACA,CAAC,CAAC,gBAAgB,EAAErD,cAAcG,OAAO,CAAC,CAAC,CAAC,EAAE;YAC5CiD,OAAOvD,OAAOyD,4BAA4B;QAC5C;QACA,CAAC,CAAC,iBAAiB,EAAEtD,cAAcG,OAAO,CAAC,CAAC,CAAC,EAAE;YAC7CiD,OAAOvD,OAAO0D,8BAA8B;QAC9C;IACF;IACAC,QAAQ;QACNR,iBAAiBnD,OAAO4D,qBAAqB;QAC7C,kBAAkB;YAChBT,iBAAiBnD,OAAO6D,0BAA0B;QACpD;QACA,mBAAmB;YACjBV,iBAAiBnD,OAAO8D,4BAA4B;QACtD;QACA,CAAC,CAAC,GAAG,EAAE3D,cAAcE,IAAI,CAAC,CAAC,CAAC,EAAE;YAC5BkD,OAAOvD,OAAOwD,uBAAuB;QACvC;QACA,CAAC,CAAC,gBAAgB,EAAErD,cAAcE,IAAI,CAAC,CAAC,CAAC,EAAE;YACzCkD,OAAOvD,OAAOyD,4BAA4B;QAC5C;QACA,CAAC,CAAC,iBAAiB,EAAEtD,cAAcE,IAAI,CAAC,CAAC,CAAC,EAAE;YAC1CkD,OAAOvD,OAAO0D,8BAA8B;QAC9C;QACA,CAAC,CAAC,GAAG,EAAEvD,cAAcG,OAAO,CAAC,CAAC,CAAC,EAAE;YAC/BiD,OAAOvD,OAAOwD,uBAAuB;QACvC;QACA,CAAC,CAAC,gBAAgB,EAAErD,cAAcG,OAAO,CAAC,CAAC,CAAC,EAAE;YAC5CiD,OAAOvD,OAAOyD,4BAA4B;QAC5C;QACA,CAAC,CAAC,iBAAiB,EAAEtD,cAAcG,OAAO,CAAC,CAAC,CAAC,EAAE;YAC7CiD,OAAOvD,OAAO0D,8BAA8B;QAC9C;IACF;IACAK,gBAAgB;QACdvC,QAAQ;IACV;IACAwC,UAAU;QACRb,iBAAiBnD,OAAOoD,0BAA0B;QAElD,CAAC,CAAC,GAAG,EAAEjD,cAAcE,IAAI,CAAC,CAAC,CAAC,EAAE;YAC5BkD,OAAOvD,OAAOiE,8BAA8B;QAC9C;QACA,CAAC,CAAC,GAAG,EAAE9D,cAAcG,OAAO,CAAC,CAAC,CAAC,EAAE;YAC/BiD,OAAOvD,OAAOiE,8BAA8B;QAC9C;IACF;IACAC,UAAU;QACR,CAAC,CAAC,GAAG,EAAE/D,cAAcE,IAAI,CAAC,CAAC,CAAC,EAAE;YAC5BkD,OAAOvD,OAAOmE,6BAA6B;QAC7C;QACA,CAAC,CAAC,gBAAgB,EAAEhE,cAAcE,IAAI,CAAC,CAAC,CAAC,EAAE;YACzCkD,OAAOvD,OAAOoE,kCAAkC;QAClD;QACA,CAAC,CAAC,iBAAiB,EAAEjE,cAAcE,IAAI,CAAC,CAAC,CAAC,EAAE;YAC1CkD,OAAOvD,OAAOqE,oCAAoC;QACpD;QACA,CAAC,CAAC,GAAG,EAAElE,cAAcG,OAAO,CAAC,CAAC,CAAC,EAAE;YAC/BiD,OAAOvD,OAAOsE,uBAAuB;QACvC;QACA,CAAC,CAAC,gBAAgB,EAAEnE,cAAcG,OAAO,CAAC,CAAC,CAAC,EAAE;YAC5CiD,OAAOvD,OAAOuE,4BAA4B;QAC5C;QACA,CAAC,CAAC,iBAAiB,EAAEpE,cAAcG,OAAO,CAAC,CAAC,CAAC,EAAE;YAC7CiD,OAAOvD,OAAOwE,8BAA8B;QAC9C;IACF;AACF;AAEA,MAAMC,8BAA8B7E,WAAW;IAC7C8E,MAAM;QACJpD,cAActB,OAAO2E,oBAAoB;QACzCtD,QAAQ,CAAC,MAAM,EAAErB,OAAO4E,eAAe,CAAC,CAAC,EAAE5E,OAAO6E,sBAAsB,CAAC,CAAC;QAC1E,CAAC,CAAC,GAAG,EAAE1E,cAAcE,IAAI,CAAC,CAAC,CAAC,EAAE;YAC5BkD,OAAO;QACT;QACA,CAAC,CAAC,GAAG,EAAEpD,cAAcG,OAAO,CAAC,CAAC,CAAC,EAAE;YAC/BiD,OAAO;QACT;IACF;IACAuB,QAAQ;QACNC,cAAc,CAAC,EAAE/E,OAAOsC,qBAAqB,CAAC,CAAC;IACjD;IACAqB,QAAQ;QACNR,iBAAiBnD,OAAO4D,qBAAqB;QAC7CL,OAAOvD,OAAOwD,uBAAuB;QACrC,kBAAkB;YAChBL,iBAAiBnD,OAAO6D,0BAA0B;YAClDxC,QAAQ,CAAC,MAAM,EAAErB,OAAO4E,eAAe,CAAC,CAAC,EAAE5E,OAAOgF,wBAAwB,CAAC,CAAC;YAC5EzB,OAAOvD,OAAOyD,4BAA4B;QAC5C;QACA,mBAAmB;YACjBN,iBAAiBnD,OAAO8D,4BAA4B;YACpDzC,QAAQ,CAAC,MAAM,EAAErB,OAAO4E,eAAe,CAAC,CAAC,EAAE5E,OAAOiF,0BAA0B,CAAC,CAAC;YAC9E1B,OAAOvD,OAAO0D,8BAA8B;QAC9C;QACA,kCAAkC;YAChCrC,QAAQ,CAAC,MAAM,EAAErB,OAAO4E,eAAe,CAAC,OAAO,CAAC;QAClD;IACF;IACAM,gBAAgB;QACd/B,iBAAiBnD,OAAOmF,qBAAqB;QAC7C9D,QAAQ,CAAC,MAAM,EAAErB,OAAO4E,eAAe,CAAC,CAAC,EAAE5E,OAAOoF,wBAAwB,CAAC,CAAC;QAC5E7B,OAAOvD,OAAOqF,qBAAqB;QACnC,kBAAkB;YAChBlC,iBAAiBnD,OAAOsF,0BAA0B;YAClDjE,QAAQ,CAAC,MAAM,EAAErB,OAAO4E,eAAe,CAAC,CAAC,EAAE5E,OAAOuF,6BAA6B,CAAC,CAAC;YACjFhC,OAAOvD,OAAOwF,0BAA0B;QAC1C;QACA,mBAAmB;YACjBrC,iBAAiBnD,OAAOyF,4BAA4B;YACpDpE,QAAQ,CAAC,MAAM,EAAErB,OAAO4E,eAAe,CAAC,CAAC,EAAE5E,OAAO0F,+BAA+B,CAAC,CAAC;YACnFnC,OAAOvD,OAAO2F,4BAA4B;QAC5C;QACA,kCAAkC;YAChCtE,QAAQ,CAAC,MAAM,EAAErB,OAAO4E,eAAe,CAAC,UAAU,CAAC;QACrD;IACF;IACAgB,gBAAgB;QACdzC,iBAAiBnD,OAAO4D,qBAAqB;QAC7CL,OAAOvD,OAAOiE,8BAA8B;IAC9C;IACA4B,wBAAwB;QACtB1C,iBAAiBnD,OAAO8F,8BAA8B;QACtDzE,QAAQ,CAAC,MAAM,EAAErB,OAAO4E,eAAe,CAAC,CAAC,EAAE5E,OAAO+F,0BAA0B,CAAC,CAAC;QAC9ExC,OAAOvD,OAAOiE,8BAA8B;IAC9C;IACAxD,QAAQ;QACN0C,iBAAiBnD,OAAOgG,uBAAuB;QAC/CzC,OAAOvD,OAAOwD,uBAAuB;QACrC,kBAAkB;YAChBL,iBAAiBnD,OAAOiG,4BAA4B;YACpD1C,OAAOvD,OAAOyD,4BAA4B;QAC5C;QACA,mBAAmB;YACjBN,iBAAiBnD,OAAOkG,8BAA8B;YACtD3C,OAAOvD,OAAO0D,8BAA8B;QAC9C;QACA,kCAAkC;YAChC,kBAAkB;gBAChBP,iBAAiB;gBACjBgD,mBAAmB;gBACnB,CAAC,CAAC,GAAG,EAAEhG,cAAcG,OAAO,CAAC,CAAC,CAAC,EAAE;oBAC/BiD,OAAO;gBACT;gBACA,CAAC,CAAC,GAAG,EAAE/C,eAAeC,MAAM,CAAC,CAAC,CAAC,EAAE;oBAC/B8C,OAAO;gBACT;gBACA,CAAC,CAAC,GAAG,EAAE/C,eAAeE,OAAO,CAAC,CAAC,CAAC,EAAE;oBAChC6C,OAAO;gBACT;YACF;QACF;IACF;IACA6C,gBAAgB;QACdjD,iBAAiBnD,OAAOqG,oBAAoB;QAC5C9C,OAAOvD,OAAOsG,6BAA6B;QAC3C,kBAAkB;YAChBnD,iBAAiBnD,OAAOuG,yBAAyB;YACjDhD,OAAOvD,OAAOsG,6BAA6B;QAC7C;QACA,mBAAmB;YACjBnD,iBAAiBnD,OAAOwG,2BAA2B;YACnDjD,OAAOvD,OAAOsG,6BAA6B;QAC7C;QACA,kCAAkC;YAChC,YAAY;gBACVnD,iBAAiB;gBACjB,CAAC,CAAC,GAAG,EAAEhD,cAAcG,OAAO,CAAC,CAAC,CAAC,EAAE;oBAC/BiD,OAAO;oBACP4C,mBAAmB;gBACrB;YACF;YACA,CAAC,CAAC,UAAU,EAAEhG,cAAcE,IAAI,CAAC,CAAC,CAAC,EAAE;gBACnCkD,OAAO;YACT;QACF;IACF;IACAkD,gBAAgB;QACdtD,iBAAiBnD,OAAO8F,8BAA8B;QACtDvC,OAAOvD,OAAOiE,8BAA8B;IAC9C;IACAyC,wBAAwB;QACtBvD,iBAAiBnD,OAAO8F,8BAA8B;QACtDzE,QAAQ,CAAC,MAAM,EAAErB,OAAO4E,eAAe,CAAC,CAAC,EAAE5E,OAAO+F,0BAA0B,CAAC,CAAC;QAC9ExC,OAAOvD,OAAOiE,8BAA8B;IAC9C;AACF;AAEA;;CAEC,GACD,MAAM0C,iBAAiB/G,WAAW;IAChC,2EAA2E;IAC3E,8EAA8E;IAC9E,6EAA6E;IAC7E8E,MAAM3E,gCACJ;QACE,GAAGD,WAAW8G,WAAW,CAAC,cAAc;QACxCC,cAAc7G,OAAO8G,gBAAgB;QACrCC,cAAc;QACd7F,cAAc;QACd8F,WAAW,CAAC;MACZ,EAAEhH,OAAOiH,OAAO,CAAC;YACX,EAAEjH,OAAO8G,gBAAgB,CAAC,CAAC,EAAE9G,OAAOkH,iBAAiB,CAAC;IAC9D,CAAC;QACCC,QAAQ;IACV,GACA;QAAEC,eAAe;IAAK;IAExBC,UAAUtH,gCACR;QACE,GAAGD,WAAW8G,WAAW,CAAC,cAAc;QACxCC,cAAc7G,OAAO8G,gBAAgB;QACrCC,cAAc;QACd7F,cAAc;QACd8F,WAAW,CAAC;QACV,EAAEhH,OAAOiH,OAAO,CAAC;cACX,EAAEjH,OAAO8G,gBAAgB,CAAC,CAAC,EAAE9G,OAAOkH,iBAAiB,CAAC;cACtD,EAAElH,OAAO4E,eAAe,CAAC,CAAC,EAAE5E,OAAOsH,yBAAyB,CAAC;MACrE,CAAC;QACDH,QAAQ;IACV,GACA;QAAEC,eAAe;IAAK;AAE1B;AAEA,gDAAgD,GAChD,MAAMG,4BAA4B3H,WAAW;IAC3C8E,MAAM;QACJ,kBAAkB;YAChBvB,iBAAiBnD,OAAOgF,wBAAwB;YAChD1D,cAActB,OAAO2E,oBAAoB;YACzCrE,SAAS;YACTa,UAAU;QACZ;QACA,mBAAmB;YACjBgC,iBAAiBnD,OAAOiF,0BAA0B;YAClD3D,cAActB,OAAO2E,oBAAoB;YACzCrE,SAAS;YACTa,UAAU;QACZ;QACA,kCAAkC;YAChC,kBAAkB;gBAChBgC,iBAAiB;YACnB;YACA,mBAAmB;gBACjBA,iBAAiB;YACnB;QACF;IACF;IACAa,UAAU;QACR,kBAAkB;YAChBb,iBAAiBnD,OAAO6E,sBAAsB;QAChD;QACA,mBAAmB;YACjB1B,iBAAiBnD,OAAO6E,sBAAsB;QAChD;QACA,kCAAkC;YAChC,kBAAkB;gBAChB1B,iBAAiB;YACnB;YACA,mBAAmB;gBACjBA,iBAAiB;YACnB;QACF;IACF;IACAjB,iBAAiB;QACf,YAAY;YACVsF,QAAQ;YACRC,QAAQzH,OAAO8G,gBAAgB;YAC/BY,MAAM1H,OAAOuC,uBAAuB;YACpCoF,OAAO3H,OAAOuC,uBAAuB;QACvC;IACF;IACAC,eAAe;QACb,YAAY;YACVgF,QAAQxH,OAAO4H,iBAAiB;YAChCF,MAAM;YACNG,KAAK7H,OAAO4H,iBAAiB;YAC7BE,OAAO9H,OAAO+H,kBAAkB;QAClC;IACF;IACArF,kBAAkB;QAChB,YAAY;YACV8E,QAAQ;YACRC,QAAQzH,OAAO+H,kBAAkB;YACjCL,MAAM1H,OAAOgI,kBAAkB;YAC/BL,OAAO3H,OAAOgI,kBAAkB;QAClC;IACF;IACAnF,gBAAgB;QACd,YAAY;YACV2E,QAAQxH,OAAOiD,gBAAgB;YAC/ByE,MAAM;YACNG,KAAK7H,OAAOiD,gBAAgB;YAC5B6E,OAAO9H,OAAO+H,kBAAkB;QAClC;IACF;IACAjF,iBAAiB;QACf,YAAY;YACV0E,QAAQ;YACRC,QAAQzH,OAAO+H,kBAAkB;YACjCL,MAAM1H,OAAOgI,kBAAkB;YAC/BL,OAAO3H,OAAOgI,kBAAkB;QAClC;IACF;IACAhF,eAAe;QACb,YAAY;YACVwE,QAAQxH,OAAOiI,qBAAqB;YACpCP,MAAM;YACNG,KAAK7H,OAAOiI,qBAAqB;YACjCH,OAAO9H,OAAO+H,kBAAkB;QAClC;IACF;AACF;AAEA,MAAMG,2BAA2BtI,WAAW;IAC1C8E,MAAM;QACJ,WAAW;YACTvB,iBAAiBnD,OAAO6E,sBAAsB;YAC9CvD,cAActB,OAAO2E,oBAAoB;YACzCrE,SAAS;YACTa,UAAU;QACZ;IACF;IACA+C,UAAU;QACR,WAAW;YACTf,iBAAiBnD,OAAOoF,wBAAwB;QAClD;QACA,yBAAyB;YACvBjC,iBAAiBnD,OAAOuF,6BAA6B;QACvD;QACA,0BAA0B;YACxBpC,iBAAiBnD,OAAO0F,+BAA+B;QACzD;QACA,kCAAkC;YAChC,WAAW;gBACTvC,iBAAiB;YACnB;YACA,yBAAyB;gBACvBA,iBAAiB;YACnB;YACA,0BAA0B;gBACxBA,iBAAiB;YACnB;QACF;IACF;IACAa,UAAU;QACR,WAAW;YACTb,iBAAiBnD,OAAOiE,8BAA8B;QACxD;IACF;IACA/B,iBAAiB;QACf,WAAW;YACTsF,QAAQ;YACRC,QAAQzH,OAAO8G,gBAAgB;YAC/BY,MAAM1H,OAAOuC,uBAAuB;YACpCoF,OAAO3H,OAAOuC,uBAAuB;QACvC;IACF;IACAC,eAAe;QACb,WAAW;YACTgF,QAAQxH,OAAO4H,iBAAiB;YAChCF,MAAM;YACNG,KAAK7H,OAAO4H,iBAAiB;YAC7BE,OAAO9H,OAAO+H,kBAAkB;QAClC;IACF;IACArF,kBAAkB;QAChB,WAAW;YACT8E,QAAQ;YACRC,QAAQzH,OAAO+H,kBAAkB;YACjCL,MAAM1H,OAAOgI,kBAAkB;YAC/BL,OAAO3H,OAAOgI,kBAAkB;QAClC;IACF;IACAnF,gBAAgB;QACd,WAAW;YACT2E,QAAQxH,OAAOiD,gBAAgB;YAC/ByE,MAAM;YACNG,KAAK7H,OAAOiD,gBAAgB;YAC5B6E,OAAO9H,OAAO+H,kBAAkB;QAClC;IACF;IACAjF,iBAAiB;QACf,WAAW;YACT0E,QAAQ;YACRC,QAAQzH,OAAO+H,kBAAkB;YACjCL,MAAM1H,OAAOgI,kBAAkB;YAC/BL,OAAO3H,OAAOgI,kBAAkB;QAClC;IACF;IACAhF,eAAe;QACb,WAAW;YACTwE,QAAQxH,OAAOiI,qBAAqB;YACpCP,MAAM;YACNG,KAAK7H,OAAOiI,qBAAqB;YACjCH,OAAO9H,OAAO+H,kBAAkB;QAClC;IACF;AACF;AAEA;;CAEC,GACD,MAAMI,gBAAgBvI,WAAW;IAC/B8E,MAAM;QACJ0D,iBAAiB;QACjBC,cAAc;QACdzH,YAAY;QACZC,SAAS;QACTmB,gBAAgB;QAChBH,UAAU;QACV,CAAC,CAAC,GAAG,EAAErB,eAAeC,MAAM,CAAC,CAAC,CAAC,EAAE;YAC/BI,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEL,eAAeE,OAAO,CAAC,CAAC,CAAC,EAAE;YAChCG,SAAS;QACX;IACF;IACA,4DAA4D;IAC5D,sCAAsC;IACtCyH,OAAO;QACLC,UAAU;QACVd,QAAQ;QACRK,OAAO;IACT;IACAhD,QAAQ;QACNyD,UAAU;QACVd,QAAQ;QACRK,OAAO;IACT;IACAU,OAAO;QACLD,UAAU;QACVd,QAAQ;QACRK,OAAO;IACT;IACA5D,UAAU;QACR,CAAC,CAAC,GAAG,EAAE1D,eAAeC,MAAM,CAAC,CAAC,CAAC,EAAE;YAC/BI,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEL,eAAeE,OAAO,CAAC,CAAC,CAAC,EAAE;YAChCG,SAAS;QACX;IACF;AACF;AAEA;;CAEC,GACD,MAAM4H,mBAAmB7I,WAAW;IAClC8E,MAAM;QACJ,GAAGzE,iBAAiByI,KAAK;QACzB7G,UAAU;QACV,wEAAwE;QACxEQ,SAAS,CAAC,EAAErC,OAAO2I,mBAAmB,CAAC,CAAC,EAAE3I,OAAOoC,oBAAoB,CAAC,CAAC;IACzE;IACA8B,UAAU;QACR,GAAGjE,iBAAiB2I,WAAW;IACjC;IACAJ,OAAO;QACL,GAAGvI,iBAAiB4I,KAAK;IAC3B;IACAC,eAAe;QACb,GAAG7I,iBAAiB8I,SAAS;IAC/B;IACAC,cAAc;QACZZ,iBAAiB;QACjBC,cAAc;IAChB;IACAY,YAAY;QACVb,iBAAiB;QACjBC,cAAc;IAChB;IACAa,aAAa;QACXC,YAAY;IACd;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpC;IAEAC,+BAA+BD;IAE/BE,4BAA4BF,OAAOA,MAAMjJ,IAAI;IAE7CoJ,6BAA6BH;IAE7B,OAAOA;AACT,EAAE;AAEF;;;;;;;;CAQC,GACD,OAAO,MAAMC,iCAAiC,CAACD;IAC7C;IAEA,MAAMI,aAAa9I;IACnB,MAAM+I,yBAAyBnC;IAC/B,MAAMoC,wBAAwBzB;IAE9B,MAAM,EAAE0B,UAAU,EAAE5F,QAAQ,EAAEE,QAAQ,EAAE2F,IAAI,EAAE5H,QAAQ,EAAE,GAAGoH;IAE3D,MAAMS,UAA2C;QAAC3J,cAAcC,IAAI;QAAEqJ,WAAWrJ,IAAI;KAAC;IAEtF,IAAIwJ,eAAe,qBAAqBA,eAAe,mBAAmB;QACxEE,QAAQC,IAAI,CACV,4CAA4C;QAC5CL,uBAAuBhF,IAAI,EAC3BmF,SAAS,WAAY5H,CAAAA,WAAWyH,uBAAuBlH,aAAa,GAAGkH,uBAAuBxH,eAAe,AAAD,GAC5G2H,SAAS,YAAa5H,CAAAA,WAAWyH,uBAAuB7G,cAAc,GAAG6G,uBAAuBhH,gBAAgB,AAAD,GAC/GmH,SAAS,WAAY5H,CAAAA,WAAWyH,uBAAuB1G,aAAa,GAAG0G,uBAAuB5G,eAAe,AAAD,GAC5GkB,YAAY0F,uBAAuB1F,QAAQ,EAE3C,0CAA0C;QAC1CE,YAAYyF,sBAAsBjF,IAAI,EACtCR,YAAY,CAACF,YAAY2F,sBAAsBzF,QAAQ,EACvDA,YACE2F,SAAS,WACR5H,CAAAA,WAAW0H,sBAAsBnH,aAAa,GAAGmH,sBAAsBzH,eAAe,AAAD,GACxFgC,YACE2F,SAAS,YACR5H,CAAAA,WAAW0H,sBAAsB9G,cAAc,GAAG8G,sBAAsBjH,gBAAgB,AAAD,GAC1FwB,YACE2F,SAAS,WACR5H,CAAAA,WAAW0H,sBAAsB3G,aAAa,GAAG2G,sBAAsB7G,eAAe,AAAD,GACxFoB,YAAYF,YAAY2F,sBAAsB3F,QAAQ;IAE1D;IAEAqF,MAAMjJ,IAAI,CAAC4J,SAAS,GAAGnK,gBAAgBiK,SAAST,MAAMjJ,IAAI,CAAC4J,SAAS;IAEpE9J,uCAAuCmJ;IAEvC,OAAOA;AACT,EAAE;AAEF;;;;;;;;;CASC,GACD,OAAO,MAAME,8BAA8B,CAACF,OAAiBY;IAC3D;IAEA,MAAMR,aAAa9I;IACnB,MAAMuJ,cAAcvD;IACpB,MAAMwD,iBAAiB1F;IAEvB,MAAM,EAAEmF,UAAU,EAAE5F,QAAQ,EAAEE,QAAQ,EAAE2F,IAAI,EAAE5H,QAAQ,EAAE,GAAGoH;IAE3D,MAAMe,mBAAmBR,eAAe;IACxC,MAAMS,mBAAmBT,eAAe;IACxC,MAAMU,aAAaF,oBAAoBC;IAEvC,MAAME,qBAAqB;QACzBJ,eAAezF,IAAI;QACnBwF,YAAY7C,QAAQ;QACpB,QAAQ;QACRwC,SAAS,YAAYM,eAAerF,MAAM;QAC1C,6BAA6B;QAC7BsF,oBAAoBD,eAAexG,MAAM;QACzCO,YAAYkG,oBAAoBD,eAAejF,cAAc;QAC7DlB,YAAYoG,oBAAoBD,eAAevE,cAAc;QAC7D1B,YAAYF,YAAYoG,oBAAoBD,eAAetE,sBAAsB;QACjF,6BAA6B;QAC7BwE,oBAAoBF,eAAe1J,MAAM;QACzCyD,YAAYmG,oBAAoBF,eAAe/D,cAAc;QAC7DpC,YAAYqG,oBAAoBF,eAAe1D,cAAc;QAC7DvC,YAAYF,YAAYqG,oBAAoBF,eAAezD,sBAAsB;KAClF;IAED,MAAM8D,oBAAoB;QACxBN,YAAYxF,IAAI;QAChB,CAACV,YAAY4F,eAAe,YAAYH,WAAW9F,MAAM;QACzD,CAACK,YAAY4F,eAAe,iBAAiBH,WAAWvG,WAAW;QACnE,CAACc,YAAYE,YAAYuF,WAAWvF,QAAQ;QAC5CF,YAAYyF,WAAWzF,QAAQ;KAChC;IAEDiG,KAAKD,SAAS,GAAGnK,aACf4J,WAAWrI,MAAM,EACjB,cAAc;IACda,WAAWwH,WAAWxH,QAAQ,GAAGwH,WAAW1H,UAAU,EACtD,OAAO;IACP8H,SAAS,WAAY5H,CAAAA,WAAWwH,WAAWjH,aAAa,GAAGiH,WAAWvH,eAAe,AAAD,GACpF2H,SAAS,YAAa5H,CAAAA,WAAWwH,WAAW5G,cAAc,GAAG4G,WAAW/G,gBAAgB,AAAD,GACvFmH,SAAS,WAAY5H,CAAAA,WAAWwH,WAAWzG,aAAa,GAAGyG,WAAW3G,eAAe,AAAD,MAChFwH,aAAaC,qBAAqBC,mBACtCxG,YAAYyF,WAAW1F,cAAc,EACrCkG,KAAKD,SAAS;IAGhB,OAAOX;AACT,EAAE;AAEF;;;;;;;;CAQC,GACD,OAAO,MAAMG,+BAA+B,CAACH;IAC3C;IAEA,MAAMoB,aAAatC;IACnB,MAAMuC,gBAAgBjC;IAEtB,MAAM,EAAEvE,QAAQ,EAAE2F,IAAI,EAAE,GAAGR;IAE3B,IAAIA,MAAMhJ,IAAI,EAAE;QACdgJ,MAAMhJ,IAAI,CAAC2J,SAAS,GAAGnK,aACrBM,cAAcE,IAAI,EAClBoK,WAAW/F,IAAI,EACf+F,UAAU,CAACZ,KAAK,EAChB3F,YAAYuG,WAAWvG,QAAQ,EAC/BmF,MAAMhJ,IAAI,CAAC2J,SAAS;IAExB;IAEA,6DAA6D;IAC7D,IAAIX,MAAMsB,oBAAoB,EAAE;QAC9BtB,MAAMsB,oBAAoB,CAACX,SAAS,GAAGnK,aACrCU,wBAAwBD,OAAO,EAC/BoK,cAAchG,IAAI,EAClBmF,SAAS,UAAUa,cAAc5B,aAAa,GAAG4B,cAAcxG,QAAQ,EACvEmF,MAAMhJ,IAAI,GAAGqK,cAAczB,UAAU,GAAGyB,cAAc1B,YAAY,EAClE0B,cAAcxB,WAAW,EACzBG,MAAM/I,OAAO,CAAC0J,SAAS;QAEzB,kCAAkC;QAClC,8CAA8C;QAC9C,4DAA4D;QAC5DX,MAAMuB,6BAA6B,GAAGvB,MAAMsB,oBAAoB,CAACX,SAAS;IAC5E;IAEAX,MAAM/I,OAAO,CAAC0J,SAAS,GAAGnK,aACxBM,cAAcG,OAAO,EACrBoK,cAAchG,IAAI,EAClBmF,SAAS,WAAWa,cAAclC,KAAK,EACvCtE,YAAa2F,CAAAA,SAAS,UAAUa,cAAc5B,aAAa,GAAG4B,cAAcxG,QAAQ,AAAD,GACnFmF,MAAMhJ,IAAI,GAAGqK,cAAczB,UAAU,GAAGyB,cAAc1B,YAAY,EAClEK,MAAM/I,OAAO,CAAC0J,SAAS;IAGzB,OAAOX;AACT,EAAE"}

package/lib/components/TabList/useTabListStyles.styles.raw.js

@@ -0,0 +1,40 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const tabListClassNames = {
+    root: 'fui-TabList'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        flexDirection: 'row',
+        flexShrink: 0,
+        flexWrap: 'nowrap',
+        position: 'relative'
+    },
+    horizontal: {
+        alignItems: 'stretch',
+        flexDirection: 'row'
+    },
+    vertical: {
+        alignItems: 'stretch',
+        flexDirection: 'column'
+    },
+    roundedSmall: {
+        gap: tokens.spacingHorizontalSNudge
+    },
+    rounded: {
+        gap: tokens.spacingHorizontalS
+    }
+});
+/**
+ * Apply styling to the TabList slots based on the state
+ */ export const useTabListStyles_unstable = (state)=>{
+    'use no memo';
+    const { appearance, vertical, size } = state;
+    const styles = useStyles();
+    const isRounded = appearance === 'subtle-circular' || appearance === 'filled-circular';
+    state.root.className = mergeClasses(tabListClassNames.root, styles.root, vertical ? styles.vertical : styles.horizontal, isRounded && (size === 'small' ? styles.roundedSmall : styles.rounded), state.root.className);
+    return state;
+};

package/lib/components/TabList/useTabListStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TabList/useTabListStyles.styles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TabListSlots, TabListState } from './TabList.types';\n\nexport const tabListClassNames: SlotClassNames<TabListSlots> = {\n  root: 'fui-TabList',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    flexShrink: 0,\n    flexWrap: 'nowrap',\n    position: 'relative',\n  },\n  horizontal: {\n    alignItems: 'stretch',\n    flexDirection: 'row',\n  },\n  vertical: {\n    alignItems: 'stretch',\n    flexDirection: 'column',\n  },\n  roundedSmall: {\n    gap: tokens.spacingHorizontalSNudge,\n  },\n  rounded: {\n    gap: tokens.spacingHorizontalS,\n  },\n});\n\n/**\n * Apply styling to the TabList slots based on the state\n */\nexport const useTabListStyles_unstable = (state: TabListState): TabListState => {\n  'use no memo';\n\n  const { appearance, vertical, size } = state;\n\n  const styles = useStyles();\n\n  const isRounded = appearance === 'subtle-circular' || appearance === 'filled-circular';\n\n  state.root.className = mergeClasses(\n    tabListClassNames.root,\n    styles.root,\n    vertical ? styles.vertical : styles.horizontal,\n    isRounded && (size === 'small' ? styles.roundedSmall : styles.rounded),\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","tabListClassNames","root","useStyles","display","flexDirection","flexShrink","flexWrap","position","horizontal","alignItems","vertical","roundedSmall","gap","spacingHorizontalSNudge","rounded","spacingHorizontalS","useTabListStyles_unstable","state","appearance","size","styles","isRounded","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,OAAO,MAAMC,oBAAkD;IAC7DC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,YAAY;QACZC,UAAU;QACVC,UAAU;IACZ;IACAC,YAAY;QACVC,YAAY;QACZL,eAAe;IACjB;IACAM,UAAU;QACRD,YAAY;QACZL,eAAe;IACjB;IACAO,cAAc;QACZC,KAAKb,OAAOc,uBAAuB;IACrC;IACAC,SAAS;QACPF,KAAKb,OAAOgB,kBAAkB;IAChC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxC;IAEA,MAAM,EAAEC,UAAU,EAAER,QAAQ,EAAES,IAAI,EAAE,GAAGF;IAEvC,MAAMG,SAASlB;IAEf,MAAMmB,YAAYH,eAAe,qBAAqBA,eAAe;IAErED,MAAMhB,IAAI,CAACqB,SAAS,GAAGxB,aACrBE,kBAAkBC,IAAI,EACtBmB,OAAOnB,IAAI,EACXS,WAAWU,OAAOV,QAAQ,GAAGU,OAAOZ,UAAU,EAC9Ca,aAAcF,CAAAA,SAAS,UAAUC,OAAOT,YAAY,GAAGS,OAAON,OAAO,AAAD,GACpEG,MAAMhB,IAAI,CAACqB,SAAS;IAGtB,OAAOL;AACT,EAAE"}

package/lib-commonjs/components/Tab/useTab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Tab/useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n  omit,\n} from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { SelectTabEvent } from '../TabList/TabList.types';\n\n/**\n * Create the state required to render Tab.\n *\n * The returned state can be modified with hooks such as useTabStyles_unstable,\n * before being passed to renderTab_unstable.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\nexport const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): TabState => {\n  const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value } = props;\n\n  const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n  const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\n  const selectTabOnFocus = useTabListContext_unstable(ctx => ctx.selectTabOnFocus);\n  const listDisabled = useTabListContext_unstable(ctx => ctx.disabled);\n  const selected = useTabListContext_unstable(ctx => ctx.selectedValue === value);\n  const onRegister = useTabListContext_unstable(ctx => ctx.onRegister);\n  const onUnregister = useTabListContext_unstable(ctx => ctx.onUnregister);\n  const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);\n  const size = useTabListContext_unstable(ctx => ctx.size);\n  const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);\n  const disabled = listDisabled || tabDisabled;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n  const onSelectCallback = (event: SelectTabEvent) => onSelect(event, { value });\n  const onTabClick = useEventCallback(mergeCallbacks(onClick, onSelectCallback));\n  const onTabFocus = useEventCallback(mergeCallbacks(onFocus, onSelectCallback));\n\n  const focusProps = useTabsterAttributes({\n    focusable: { isDefault: selected },\n  });\n\n  React.useEffect(() => {\n    onRegister({\n      value,\n      ref: innerRef,\n    });\n\n    return () => {\n      onUnregister({ value, ref: innerRef });\n    };\n  }, [onRegister, onUnregister, innerRef, value]);\n\n  const iconSlot = slot.optional(icon, { elementType: 'span' });\n  const contentSlot = slot.always(content, {\n    defaultProps: { children: props.children },\n    elementType: 'span',\n  });\n  const contentReservedSpace: typeof content =\n    content && typeof content === 'object' ? omit(content, ['ref' as keyof typeof content]) : content;\n  const iconOnly = Boolean(iconSlot?.children && !contentSlot.children);\n  return {\n    components: { root: 'button', icon: 'span', content: 'span', contentReservedSpace: 'span' },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLButtonElement>,\n        role: 'tab',\n        type: 'button',\n        // aria-selected undefined indicates it is not selectable\n        // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected\n        'aria-selected': disabled ? undefined : (`${selected}` as 'true' | 'false'),\n        ...focusProps,\n        ...props,\n        disabled,\n        onClick: onTabClick,\n        onFocus: selectTabOnFocus ? onTabFocus : onFocus,\n      }),\n      { elementType: 'button' },\n    ),\n    icon: iconSlot,\n    iconOnly,\n    content: contentSlot,\n    contentReservedSpace: slot.optional(contentReservedSpace, {\n      renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,\n      defaultProps: { children: props.children },\n      elementType: 'span',\n    }),\n    appearance,\n    disabled,\n    selected,\n    size,\n    value,\n    vertical,\n  };\n};\n"],"names":["useTab_unstable","props","ref","content","disabled","tabDisabled","icon","onClick","onFocus","value","appearance","useTabListContext_unstable","ctx","reserveSelectedTabSpace","selectTabOnFocus","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","React","useRef","onSelectCallback","event","onTabClick","useEventCallback","mergeCallbacks","onTabFocus","focusProps","useTabsterAttributes","focusable","isDefault","useEffect","iconSlot","slot","optional","elementType","contentSlot","always","defaultProps","children","contentReservedSpace","omit","iconOnly","Boolean","components","root","getIntrinsicElementProps","useMergedRefs","role","type","undefined","renderByDefault"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/Tab/useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport { useTabsterAttributes } from '@fluentui/react-tabster';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n  slot,\n  omit,\n} from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { SelectTabEvent } from '../TabList/TabList.types';\n\n/**\n * Create the state required to render Tab.\n *\n * The returned state can be modified with hooks such as useTabStyles_unstable,\n * before being passed to renderTab_unstable.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\nexport const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): TabState => {\n  const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value } = props;\n\n  const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n  const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\n  const selectTabOnFocus = useTabListContext_unstable(ctx => ctx.selectTabOnFocus);\n  const listDisabled = useTabListContext_unstable(ctx => ctx.disabled);\n  const selected = useTabListContext_unstable(ctx => ctx.selectedValue === value);\n  const onRegister = useTabListContext_unstable(ctx => ctx.onRegister);\n  const onUnregister = useTabListContext_unstable(ctx => ctx.onUnregister);\n  const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);\n  const size = useTabListContext_unstable(ctx => ctx.size);\n  const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);\n  const disabled = listDisabled || tabDisabled;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n  const onSelectCallback = (event: SelectTabEvent) => onSelect(event, { value });\n  const onTabClick = useEventCallback(mergeCallbacks(onClick, onSelectCallback));\n  const onTabFocus = useEventCallback(mergeCallbacks(onFocus, onSelectCallback));\n\n  const focusProps = useTabsterAttributes({\n    focusable: { isDefault: selected },\n  });\n\n  React.useEffect(() => {\n    onRegister({\n      value,\n      ref: innerRef,\n    });\n\n    return () => {\n      onUnregister({ value, ref: innerRef });\n    };\n  }, [onRegister, onUnregister, innerRef, value]);\n\n  const iconSlot = slot.optional(icon, { elementType: 'span' });\n  const contentSlot = slot.always(content, {\n    defaultProps: { children: props.children },\n    elementType: 'span',\n  });\n  const contentReservedSpace: typeof content =\n    content && typeof content === 'object' ? omit(content, ['ref' as keyof typeof content]) : content;\n  const iconOnly = Boolean(iconSlot?.children && !contentSlot.children);\n  return {\n    components: { root: 'button', icon: 'span', content: 'span', contentReservedSpace: 'span' },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLButtonElement>,\n        role: 'tab',\n        type: 'button',\n        // aria-selected undefined indicates it is not selectable\n        // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected\n        'aria-selected': disabled ? undefined : (`${selected}` as 'true' | 'false'),\n        ...focusProps,\n        ...props,\n        disabled,\n        onClick: onTabClick,\n        onFocus: selectTabOnFocus ? onTabFocus : onFocus,\n      }),\n      { elementType: 'button' },\n    ) as TabState['root'],\n    icon: iconSlot,\n    iconOnly,\n    content: contentSlot,\n    contentReservedSpace: slot.optional(contentReservedSpace, {\n      renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,\n      defaultProps: { children: props.children },\n      elementType: 'span',\n    }),\n    appearance,\n    disabled,\n    selected,\n    size,\n    value,\n    vertical,\n  };\n};\n"],"names":["useTab_unstable","props","ref","content","disabled","tabDisabled","icon","onClick","onFocus","value","appearance","useTabListContext_unstable","ctx","reserveSelectedTabSpace","selectTabOnFocus","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","React","useRef","onSelectCallback","event","onTabClick","useEventCallback","mergeCallbacks","onTabFocus","focusProps","useTabsterAttributes","focusable","isDefault","useEffect","iconSlot","slot","optional","elementType","contentSlot","always","defaultProps","children","contentReservedSpace","omit","iconOnly","Boolean","components","root","getIntrinsicElementProps","useMergedRefs","role","type","undefined","renderByDefault"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/Tab/useTabAnimatedIndicator.styles.raw.js

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTabAnimatedIndicatorStyles_unstable", {
+    enumerable: true,
+    get: function() {
+        return useTabAnimatedIndicatorStyles_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _react1 = require("@griffel/react");
+const _TabListContext = require("../TabList/TabListContext");
+const _reacttheme = require("@fluentui/react-theme");
+const _reactutilities = require("@fluentui/react-utilities");
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const tabIndicatorCssVars_unstable = {
+    offsetVar: '--fui-Tab__indicator--offset',
+    scaleVar: '--fui-Tab__indicator--scale'
+};
+const useActiveIndicatorStyles = (0, _react1.makeStyles)({
+    base: {
+        // overflow is required to allow the selection indicator to animate outside the tab area.
+        overflow: 'visible'
+    },
+    animated: {
+        '::after': {
+            transitionProperty: 'transform',
+            transitionDuration: `${_reacttheme.tokens.durationSlow}`,
+            transitionTimingFunction: `${_reacttheme.tokens.curveDecelerateMax}`
+        },
+        '@media (prefers-reduced-motion: reduce)': {
+            '::after': {
+                transitionProperty: 'none',
+                transitionDuration: '0.01ms'
+            }
+        }
+    },
+    horizontal: {
+        '::after': {
+            transformOrigin: 'left',
+            transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))
+    scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`
+        }
+    },
+    vertical: {
+        '::after': {
+            transformOrigin: 'top',
+            transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))
+        scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`
+        }
+    }
+});
+const calculateTabRect = (element)=>{
+    if (element) {
+        var _element_parentElement;
+        const parentRect = ((_element_parentElement = element.parentElement) === null || _element_parentElement === void 0 ? void 0 : _element_parentElement.getBoundingClientRect()) || {
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+        };
+        const tabRect = element.getBoundingClientRect();
+        return {
+            x: tabRect.x - parentRect.x,
+            y: tabRect.y - parentRect.y,
+            width: tabRect.width,
+            height: tabRect.height
+        };
+    }
+    return undefined;
+};
+const getRegisteredTabRect = (registeredTabs, value)=>{
+    var _registeredTabs_JSON_stringify;
+    const element = isValueDefined(value) ? (_registeredTabs_JSON_stringify = registeredTabs[JSON.stringify(value)]) === null || _registeredTabs_JSON_stringify === void 0 ? void 0 : _registeredTabs_JSON_stringify.ref.current : undefined;
+    return element ? calculateTabRect(element) : undefined;
+};
+// eslint-disable-next-line eqeqeq
+const isValueDefined = (value)=>value != null;
+const useTabAnimatedIndicatorStyles_unstable = (state)=>{
+    const { disabled, selected, vertical } = state;
+    const activeIndicatorStyles = useActiveIndicatorStyles();
+    const [lastAnimatedFrom, setLastAnimatedFrom] = _react.useState();
+    const [animationValues, setAnimationValues] = _react.useState({
+        offset: 0,
+        scale: 1
+    });
+    const getRegisteredTabs = (0, _TabListContext.useTabListContext_unstable)((ctx)=>ctx.getRegisteredTabs);
+    const [requestAnimationFrame] = (0, _reactutilities.useAnimationFrame)();
+    if (selected) {
+        const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();
+        if (isValueDefined(previousSelectedValue) && lastAnimatedFrom !== previousSelectedValue) {
+            const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);
+            const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);
+            if (selectedTabRect && previousSelectedTabRect) {
+                const offset = vertical ? previousSelectedTabRect.y - selectedTabRect.y : previousSelectedTabRect.x - selectedTabRect.x;
+                const scale = vertical ? previousSelectedTabRect.height / selectedTabRect.height : previousSelectedTabRect.width / selectedTabRect.width;
+                setAnimationValues({
+                    offset,
+                    scale
+                });
+                setLastAnimatedFrom(previousSelectedValue);
+                // Reset the animation values after the animation is complete
+                requestAnimationFrame(()=>setAnimationValues({
+                        offset: 0,
+                        scale: 1
+                    }));
+            }
+        }
+    } else if (isValueDefined(lastAnimatedFrom)) {
+        // need to clear the last animated from so that if this tab is selected again
+        // from the same previous tab as last time, that animation still happens.
+        setLastAnimatedFrom(undefined);
+    }
+    // do not apply any animation if the tab is disabled
+    if (disabled) {
+        return state;
+    }
+    // the animation should only happen as the selection indicator returns to its
+    // original position and not when set at the previous tabs position.
+    const animating = animationValues.offset === 0 && animationValues.scale === 1;
+    state.root.className = (0, _react1.mergeClasses)(state.root.className, selected && activeIndicatorStyles.base, selected && animating && activeIndicatorStyles.animated, selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal));
+    const rootCssVars = {
+        [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,
+        [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`
+    };
+    state.root.style = {
+        ...rootCssVars,
+        ...state.root.style
+    };
+    return state;
+};

package/lib-commonjs/components/Tab/useTabAnimatedIndicator.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tab/useTabAnimatedIndicator.styles.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TabState, TabValue } from './Tab.types';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { TabRegisterData } from '../TabList/TabList.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useAnimationFrame } from '@fluentui/react-utilities';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst tabIndicatorCssVars_unstable = {\n  offsetVar: '--fui-Tab__indicator--offset',\n  scaleVar: '--fui-Tab__indicator--scale',\n};\n\nconst useActiveIndicatorStyles = makeStyles({\n  base: {\n    // overflow is required to allow the selection indicator to animate outside the tab area.\n    overflow: 'visible',\n  },\n  animated: {\n    '::after': {\n      transitionProperty: 'transform',\n      transitionDuration: `${tokens.durationSlow}`,\n      transitionTimingFunction: `${tokens.curveDecelerateMax}`,\n    },\n    '@media (prefers-reduced-motion: reduce)': {\n      '::after': {\n        transitionProperty: 'none',\n        transitionDuration: '0.01ms',\n      },\n    },\n  },\n  horizontal: {\n    '::after': {\n      transformOrigin: 'left',\n      transform: `translateX(var(${tabIndicatorCssVars_unstable.offsetVar}))\n    scaleX(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n    },\n  },\n  vertical: {\n    '::after': {\n      transformOrigin: 'top',\n      transform: `translateY(var(${tabIndicatorCssVars_unstable.offsetVar}))\n        scaleY(var(${tabIndicatorCssVars_unstable.scaleVar}))`,\n    },\n  },\n});\n\nconst calculateTabRect = (element: HTMLElement) => {\n  if (element) {\n    const parentRect = element.parentElement?.getBoundingClientRect() || { x: 0, y: 0, width: 0, height: 0 };\n    const tabRect = element.getBoundingClientRect();\n\n    return {\n      x: tabRect.x - parentRect.x,\n      y: tabRect.y - parentRect.y,\n      width: tabRect.width,\n      height: tabRect.height,\n    };\n  }\n  return undefined;\n};\n\nconst getRegisteredTabRect = (registeredTabs: Record<string, TabRegisterData>, value?: TabValue) => {\n  const element = isValueDefined(value) ? registeredTabs[JSON.stringify(value)]?.ref.current : undefined;\n  return element ? calculateTabRect(element) : undefined;\n};\n\n// eslint-disable-next-line eqeqeq\nconst isValueDefined = (value: TabValue) => value != null;\n\n/**\n * Adds additional styling to the active tab selection indicator to create a sliding animation.\n */\nexport const useTabAnimatedIndicatorStyles_unstable = (state: TabState): TabState => {\n  const { disabled, selected, vertical } = state;\n\n  const activeIndicatorStyles = useActiveIndicatorStyles();\n  const [lastAnimatedFrom, setLastAnimatedFrom] = React.useState<TabValue>();\n  const [animationValues, setAnimationValues] = React.useState({ offset: 0, scale: 1 });\n  const getRegisteredTabs = useTabListContext_unstable(ctx => ctx.getRegisteredTabs);\n\n  const [requestAnimationFrame] = useAnimationFrame();\n\n  if (selected) {\n    const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();\n\n    if (isValueDefined(previousSelectedValue) && lastAnimatedFrom !== previousSelectedValue) {\n      const previousSelectedTabRect = getRegisteredTabRect(registeredTabs, previousSelectedValue);\n      const selectedTabRect = getRegisteredTabRect(registeredTabs, selectedValue);\n\n      if (selectedTabRect && previousSelectedTabRect) {\n        const offset = vertical\n          ? previousSelectedTabRect.y - selectedTabRect.y\n          : previousSelectedTabRect.x - selectedTabRect.x;\n\n        const scale = vertical\n          ? previousSelectedTabRect.height / selectedTabRect.height\n          : previousSelectedTabRect.width / selectedTabRect.width;\n\n        setAnimationValues({ offset, scale });\n        setLastAnimatedFrom(previousSelectedValue);\n\n        // Reset the animation values after the animation is complete\n        requestAnimationFrame(() => setAnimationValues({ offset: 0, scale: 1 }));\n      }\n    }\n  } else if (isValueDefined(lastAnimatedFrom)) {\n    // need to clear the last animated from so that if this tab is selected again\n    // from the same previous tab as last time, that animation still happens.\n    setLastAnimatedFrom(undefined);\n  }\n\n  // do not apply any animation if the tab is disabled\n  if (disabled) {\n    return state;\n  }\n\n  // the animation should only happen as the selection indicator returns to its\n  // original position and not when set at the previous tabs position.\n  const animating = animationValues.offset === 0 && animationValues.scale === 1;\n\n  state.root.className = mergeClasses(\n    state.root.className,\n    selected && activeIndicatorStyles.base,\n    selected && animating && activeIndicatorStyles.animated,\n    selected && (vertical ? activeIndicatorStyles.vertical : activeIndicatorStyles.horizontal),\n  );\n\n  const rootCssVars = {\n    [tabIndicatorCssVars_unstable.offsetVar]: `${animationValues.offset}px`,\n    [tabIndicatorCssVars_unstable.scaleVar]: `${animationValues.scale}`,\n  };\n\n  state.root.style = {\n    ...rootCssVars,\n    ...state.root.style,\n  };\n\n  return state;\n};\n"],"names":["useTabAnimatedIndicatorStyles_unstable","tabIndicatorCssVars_unstable","offsetVar","scaleVar","useActiveIndicatorStyles","makeStyles","base","overflow","animated","transitionProperty","transitionDuration","tokens","durationSlow","transitionTimingFunction","curveDecelerateMax","horizontal","transformOrigin","transform","vertical","calculateTabRect","element","parentRect","parentElement","getBoundingClientRect","x","y","width","height","tabRect","undefined","getRegisteredTabRect","registeredTabs","value","isValueDefined","JSON","stringify","ref","current","state","disabled","selected","activeIndicatorStyles","lastAnimatedFrom","setLastAnimatedFrom","React","useState","animationValues","setAnimationValues","offset","scale","getRegisteredTabs","useTabListContext_unstable","ctx","requestAnimationFrame","useAnimationFrame","previousSelectedValue","selectedValue","previousSelectedTabRect","selectedTabRect","animating","root","className","mergeClasses","rootCssVars","style"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA2EaA;;;eAAAA;;;;iEA3EU;wBAGkB;gCACE;4BAEpB;gCACW;AAElC,gEAAgE;AAChE,MAAMC,+BAA+B;IACnCC,WAAW;IACXC,UAAU;AACZ;AAEA,MAAMC,2BAA2BC,IAAAA,kBAAAA,EAAW;IAC1CC,MAAM;QACJ,yFAAyF;QACzFC,UAAU;IACZ;IACAC,UAAU;QACR,WAAW;YACTC,oBAAoB;YACpBC,oBAAoB,CAAC,EAAEC,kBAAAA,CAAOC,YAAY,CAAC,CAAC;YAC5CC,0BAA0B,CAAC,EAAEF,kBAAAA,CAAOG,kBAAkB,CAAC,CAAC;QAC1D;QACA,2CAA2C;YACzC,WAAW;gBACTL,oBAAoB;gBACpBC,oBAAoB;YACtB;QACF;IACF;IACAK,YAAY;QACV,WAAW;YACTC,iBAAiB;YACjBC,WAAW,CAAC,eAAe,EAAEhB,6BAA6BC,SAAS,CAAC;eAC3D,EAAED,6BAA6BE,QAAQ,CAAC,EAAE,CAAC;QACtD;IACF;IACAe,UAAU;QACR,WAAW;YACTF,iBAAiB;YACjBC,WAAW,CAAC,eAAe,EAAEhB,6BAA6BC,SAAS,CAAC;mBACvD,EAAED,6BAA6BE,QAAQ,CAAC,EAAE,CAAC;QAC1D;IACF;AACF;AAEA,MAAMgB,mBAAmB,CAACC;IACxB,IAAIA,SAAS;YACQA;QAAnB,MAAMC,aAAaD,CAAAA,CAAAA,yBAAAA,QAAQE,aAAa,AAAbA,MAAa,QAArBF,2BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,uBAAuBG,qBAAqB,EAAA,KAAM;YAAEC,GAAG;YAAGC,GAAG;YAAGC,OAAO;YAAGC,QAAQ;QAAE;QACvG,MAAMC,UAAUR,QAAQG,qBAAqB;QAE7C,OAAO;YACLC,GAAGI,QAAQJ,CAAC,GAAGH,WAAWG,CAAC;YAC3BC,GAAGG,QAAQH,CAAC,GAAGJ,WAAWI,CAAC;YAC3BC,OAAOE,QAAQF,KAAK;YACpBC,QAAQC,QAAQD,MAAM;QACxB;IACF;IACA,OAAOE;AACT;AAEA,MAAMC,uBAAuB,CAACC,gBAAiDC;QACrCD;IAAxC,MAAMX,UAAUa,eAAeD,SAAAA,AAASD,CAAAA,iCAAAA,cAAc,CAACG,KAAKC,SAAS,CAACH,OAAO,AAAPA,MAAO,QAArCD,mCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,+BAAuCK,GAAG,CAACC,OAAO,GAAGR;IAC7F,OAAOT,UAAUD,iBAAiBC,WAAWS;AAC/C;AAEA,kCAAkC;AAClC,MAAMI,iBAAiB,CAACD,QAAoBA,SAAS;AAK9C,MAAMhC,yCAAyC,CAACsC;IACrD,MAAM,EAAEC,QAAQ,EAAEC,QAAQ,EAAEtB,QAAQ,EAAE,GAAGoB;IAEzC,MAAMG,wBAAwBrC;IAC9B,MAAM,CAACsC,kBAAkBC,oBAAoB,GAAGC,OAAMC,QAAQ;IAC9D,MAAM,CAACC,iBAAiBC,mBAAmB,GAAGH,OAAMC,QAAQ,CAAC;QAAEG,QAAQ;QAAGC,OAAO;IAAE;IACnF,MAAMC,oBAAoBC,IAAAA,0CAAAA,EAA2BC,CAAAA,MAAOA,IAAIF,iBAAiB;IAEjF,MAAM,CAACG,sBAAsB,GAAGC,IAAAA,iCAAAA;IAEhC,IAAId,UAAU;QACZ,MAAM,EAAEe,qBAAqB,EAAEC,aAAa,EAAEzB,cAAc,EAAE,GAAGmB;QAEjE,IAAIjB,eAAesB,0BAA0Bb,qBAAqBa,uBAAuB;YACvF,MAAME,0BAA0B3B,qBAAqBC,gBAAgBwB;YACrE,MAAMG,kBAAkB5B,qBAAqBC,gBAAgByB;YAE7D,IAAIE,mBAAmBD,yBAAyB;gBAC9C,MAAMT,SAAS9B,WACXuC,wBAAwBhC,CAAC,GAAGiC,gBAAgBjC,CAAC,GAC7CgC,wBAAwBjC,CAAC,GAAGkC,gBAAgBlC,CAAC;gBAEjD,MAAMyB,QAAQ/B,WACVuC,wBAAwB9B,MAAM,GAAG+B,gBAAgB/B,MAAM,GACvD8B,wBAAwB/B,KAAK,GAAGgC,gBAAgBhC,KAAK;gBAEzDqB,mBAAmB;oBAAEC;oBAAQC;gBAAM;gBACnCN,oBAAoBY;gBAEpB,6DAA6D;gBAC7DF,sBAAsB,IAAMN,mBAAmB;wBAAEC,QAAQ;wBAAGC,OAAO;oBAAE;YACvE;QACF;IACF,OAAO,IAAIhB,eAAeS,mBAAmB;QAC3C,6EAA6E;QAC7E,yEAAyE;QACzEC,oBAAoBd;IACtB;IAEA,oDAAoD;IACpD,IAAIU,UAAU;QACZ,OAAOD;IACT;IAEA,6EAA6E;IAC7E,oEAAoE;IACpE,MAAMqB,YAAYb,gBAAgBE,MAAM,KAAK,KAAKF,gBAAgBG,KAAK,KAAK;IAE5EX,MAAMsB,IAAI,CAACC,SAAS,GAAGC,IAAAA,oBAAAA,EACrBxB,MAAMsB,IAAI,CAACC,SAAS,EACpBrB,YAAYC,sBAAsBnC,IAAI,EACtCkC,YAAYmB,aAAalB,sBAAsBjC,QAAQ,EACvDgC,YAAatB,CAAAA,WAAWuB,sBAAsBvB,QAAQ,GAAGuB,sBAAsB1B,UAAU,AAAVA;IAGjF,MAAMgD,cAAc;QAClB,CAAC9D,6BAA6BC,SAAS,CAAC,EAAE,CAAC,EAAE4C,gBAAgBE,MAAM,CAAC,EAAE,CAAC;QACvE,CAAC/C,6BAA6BE,QAAQ,CAAC,EAAE,CAAC,EAAE2C,gBAAgBG,KAAK,CAAC,CAAC;IACrE;IAEAX,MAAMsB,IAAI,CAACI,KAAK,GAAG;QACjB,GAAGD,WAAW;QACd,GAAGzB,MAAMsB,IAAI,CAACI,KAAK;IACrB;IAEA,OAAO1B;AACT"}