@fluentui/react-tag-picker 9.8.7 → 9.9.0

package/lib-commonjs/components/TagPickerControl/useTagPickerControlStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerControl/useTagPickerControlStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type {\n  TagPickerControlInternalSlots,\n  TagPickerControlSlots,\n  TagPickerControlState,\n} from './TagPickerControl.types';\n\nexport const tagPickerControlClassNames: SlotClassNames<TagPickerControlSlots & TagPickerControlInternalSlots> = {\n  root: 'fui-TagPickerControl',\n  expandIcon: 'fui-TagPickerControl__expandIcon',\n  secondaryAction: 'fui-TagPickerControl__secondaryAction',\n  aside: 'fui-TagPickerControl__aside',\n};\n\nexport const tagPickerControlAsideWidthToken = '--fui-TagPickerControl-aside-width' as const;\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    borderRadius: tokens.borderRadiusMedium,\n    paddingRight: `calc(${tokens.spacingHorizontalM} + var(${tagPickerControlAsideWidthToken}, 0px))`,\n    paddingLeft: tokens.spacingHorizontalM,\n    alignItems: 'center',\n    columnGap: tokens.spacingHorizontalXXS,\n    boxSizing: 'border-box',\n    display: 'flex',\n    minWidth: '250px',\n    position: 'relative',\n    flexWrap: 'wrap',\n\n    // windows high contrast mode focus indicator\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n\n    // bottom focus border, shared with Input, Select, and SpinButton\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n      height: `max(2px, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n      borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n      clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within::after': {\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within:active::after': {\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n  },\n\n  listbox: {\n    boxShadow: `${tokens.shadow16}`,\n    borderRadius: tokens.borderRadiusMedium,\n    maxHeight: '80vh',\n    boxSizing: 'border-box',\n  },\n\n  listboxCollapsed: {\n    display: 'none',\n  },\n\n  // size variants\n  medium: {\n    minHeight: '32px',\n  },\n  large: {\n    minHeight: '40px',\n  },\n  'extra-large': {\n    minHeight: '44px',\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    '&:focus-within': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n    borderRadius: '0',\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  invalidUnderline: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      borderBottomColor: tokens.colorPaletteRedBorder2,\n    },\n  },\n\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n});\n\nconst useAsideStyles = makeStyles({\n  root: {\n    display: 'flex',\n    position: 'absolute',\n    top: '0',\n    right: tokens.spacingHorizontalM,\n    height: '100%',\n    cursor: 'text',\n  },\n  // size variants\n  medium: {\n    minHeight: '32px',\n  },\n  large: {\n    minHeight: '40px',\n  },\n  'extra-large': {\n    minHeight: '44px',\n  },\n});\n\nexport const iconSizes = {\n  small: '16px',\n  medium: '20px',\n  large: '24px',\n};\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    cursor: 'pointer',\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    alignSelf: 'flex-start',\n    fontSize: tokens.fontSizeBase500,\n    // the SVG must have display: block for accurate positioning\n    // otherwise an extra inline space is inserted after the svg element\n    '& svg': {\n      display: 'block',\n    },\n  },\n  // icon size variants\n  medium: {\n    fontSize: iconSizes.small,\n    marginLeft: tokens.spacingHorizontalXXS,\n    minHeight: '32px',\n  },\n  large: {\n    fontSize: iconSizes.medium,\n    marginLeft: tokens.spacingHorizontalXXS,\n    minHeight: '40px',\n  },\n  'extra-large': {\n    fontSize: iconSizes.large,\n    marginLeft: tokens.spacingHorizontalSNudge,\n    minHeight: '44px',\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n  },\n});\n\nconst useSecondaryActionStyles = makeStyles({\n  root: { display: 'flex' },\n});\n\n/**\n * Apply styling to the PickerControl slots based on the state\n */\nexport const useTagPickerControlStyles_unstable = (state: TagPickerControlState): TagPickerControlState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const iconStyles = useIconStyles();\n  const asideStyles = useAsideStyles();\n  const secondaryActionStyles = useSecondaryActionStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    tagPickerControlClassNames.root,\n    styles.root,\n    styles[state.size],\n    styles[state.appearance],\n    !state.disabled && state.appearance === 'outline' && styles.outlineInteractive,\n    state.invalid && state.appearance !== 'underline' && styles.invalid,\n    state.invalid && state.appearance === 'underline' && styles.invalidUnderline,\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.aside) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.aside.className = mergeClasses(\n      tagPickerControlClassNames.aside,\n      asideStyles.root,\n      asideStyles[state.size],\n      state.aside.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.expandIcon.className = mergeClasses(\n      tagPickerControlClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[state.size],\n      state.disabled && iconStyles.disabled,\n      state.expandIcon.className,\n    );\n  }\n\n  if (state.secondaryAction) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.secondaryAction.className = mergeClasses(\n      tagPickerControlClassNames.secondaryAction,\n      secondaryActionStyles.root,\n      state.secondaryAction.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","tagPickerControlClassNames","root","expandIcon","secondaryAction","aside","tagPickerControlAsideWidthToken","useStyles","borderRadius","borderRadiusMedium","paddingRight","spacingHorizontalM","paddingLeft","alignItems","columnGap","spacingHorizontalXXS","boxSizing","display","minWidth","position","flexWrap","outlineWidth","outlineStyle","outlineColor","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","strokeWidthThick","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","listbox","boxShadow","shadow16","maxHeight","listboxCollapsed","medium","minHeight","large","outline","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorTransparentBackground","colorTransparentStroke","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","cursor","colorNeutralStrokeDisabled","useAsideStyles","top","iconSizes","small","useIconStyles","icon","color","justifyContent","alignSelf","fontSize","fontSizeBase500","marginLeft","spacingHorizontalSNudge","colorNeutralForegroundDisabled","useSecondaryActionStyles","useTagPickerControlStyles_unstable","state","styles","iconStyles","asideStyles","secondaryActionStyles","className","size","appearance"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TagPickerControl/useTagPickerControlStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type {\n  TagPickerControlInternalSlots,\n  TagPickerControlSlots,\n  TagPickerControlState,\n} from './TagPickerControl.types';\n\nexport const tagPickerControlClassNames: SlotClassNames<TagPickerControlSlots & TagPickerControlInternalSlots> = {\n  root: 'fui-TagPickerControl',\n  expandIcon: 'fui-TagPickerControl__expandIcon',\n  secondaryAction: 'fui-TagPickerControl__secondaryAction',\n  aside: 'fui-TagPickerControl__aside',\n};\n\nexport const tagPickerControlAsideWidthToken = '--fui-TagPickerControl-aside-width' as const;\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    borderRadius: tokens.borderRadiusMedium,\n    paddingRight: `calc(${tokens.spacingHorizontalM} + var(${tagPickerControlAsideWidthToken}, 0px))`,\n    paddingLeft: tokens.spacingHorizontalM,\n    alignItems: 'center',\n    columnGap: tokens.spacingHorizontalXXS,\n    boxSizing: 'border-box',\n    display: 'flex',\n    minWidth: '250px',\n    position: 'relative',\n    flexWrap: 'wrap',\n\n    // windows high contrast mode focus indicator\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n\n    // bottom focus border, shared with Input, Select, and SpinButton\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n      height: `max(2px, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n      borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n      clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within::after': {\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within:active::after': {\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n  },\n\n  listbox: {\n    boxShadow: `${tokens.shadow16}`,\n    borderRadius: tokens.borderRadiusMedium,\n    maxHeight: '80vh',\n    boxSizing: 'border-box',\n  },\n\n  listboxCollapsed: {\n    display: 'none',\n  },\n\n  // size variants\n  medium: {\n    minHeight: '32px',\n  },\n  large: {\n    minHeight: '40px',\n  },\n  'extra-large': {\n    minHeight: '44px',\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    '&:focus-within': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n    borderRadius: '0',\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  invalidUnderline: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      borderBottomColor: tokens.colorPaletteRedBorder2,\n    },\n  },\n\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n});\n\nconst useAsideStyles = makeStyles({\n  root: {\n    display: 'flex',\n    position: 'absolute',\n    top: '0',\n    right: tokens.spacingHorizontalM,\n    height: '100%',\n    cursor: 'text',\n  },\n  // size variants\n  medium: {\n    minHeight: '32px',\n  },\n  large: {\n    minHeight: '40px',\n  },\n  'extra-large': {\n    minHeight: '44px',\n  },\n});\n\nexport const iconSizes = {\n  small: '16px',\n  medium: '20px',\n  large: '24px',\n};\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    cursor: 'pointer',\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    alignSelf: 'flex-start',\n    fontSize: tokens.fontSizeBase500,\n    // the SVG must have display: block for accurate positioning\n    // otherwise an extra inline space is inserted after the svg element\n    '& svg': {\n      display: 'block',\n    },\n  },\n  // icon size variants\n  medium: {\n    fontSize: iconSizes.small,\n    marginLeft: tokens.spacingHorizontalXXS,\n    minHeight: '32px',\n  },\n  large: {\n    fontSize: iconSizes.medium,\n    marginLeft: tokens.spacingHorizontalXXS,\n    minHeight: '40px',\n  },\n  'extra-large': {\n    fontSize: iconSizes.large,\n    marginLeft: tokens.spacingHorizontalSNudge,\n    minHeight: '44px',\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n  },\n});\n\nconst useSecondaryActionStyles = makeStyles({\n  root: { display: 'flex' },\n});\n\n/**\n * Apply styling to the PickerControl slots based on the state\n */\nexport const useTagPickerControlStyles_unstable = (state: TagPickerControlState): TagPickerControlState => {\n  const styles = useStyles();\n  const iconStyles = useIconStyles();\n  const asideStyles = useAsideStyles();\n  const secondaryActionStyles = useSecondaryActionStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    tagPickerControlClassNames.root,\n    styles.root,\n    styles[state.size],\n    styles[state.appearance],\n    !state.disabled && state.appearance === 'outline' && styles.outlineInteractive,\n    state.invalid && state.appearance !== 'underline' && styles.invalid,\n    state.invalid && state.appearance === 'underline' && styles.invalidUnderline,\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.aside) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.aside.className = mergeClasses(\n      tagPickerControlClassNames.aside,\n      asideStyles.root,\n      asideStyles[state.size],\n      state.aside.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.expandIcon.className = mergeClasses(\n      tagPickerControlClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[state.size],\n      state.disabled && iconStyles.disabled,\n      state.expandIcon.className,\n    );\n  }\n\n  if (state.secondaryAction) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.secondaryAction.className = mergeClasses(\n      tagPickerControlClassNames.secondaryAction,\n      secondaryActionStyles.root,\n      state.secondaryAction.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","tagPickerControlClassNames","root","expandIcon","secondaryAction","aside","tagPickerControlAsideWidthToken","useStyles","borderRadius","borderRadiusMedium","paddingRight","spacingHorizontalM","paddingLeft","alignItems","columnGap","spacingHorizontalXXS","boxSizing","display","minWidth","position","flexWrap","outlineWidth","outlineStyle","outlineColor","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","strokeWidthThick","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","listbox","boxShadow","shadow16","maxHeight","listboxCollapsed","medium","minHeight","large","outline","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorTransparentBackground","colorTransparentStroke","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","cursor","colorNeutralStrokeDisabled","useAsideStyles","top","iconSizes","small","useIconStyles","icon","color","justifyContent","alignSelf","fontSize","fontSizeBase500","marginLeft","spacingHorizontalSNudge","colorNeutralForegroundDisabled","useSecondaryActionStyles","useTagPickerControlStyles_unstable","state","styles","iconStyles","asideStyles","secondaryActionStyles","className","size","appearance"],"mappings":"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"}

package/lib-commonjs/components/TagPickerGroup/useTagPickerGroupStyles.styles.js

@@ -105,7 +105,6 @@ const tagPickerGroupClassNames = {
     ]
 });
 const useTagPickerGroupStyles_unstable = (state)=>{
-    'use no memo';
     (0, _reacttags.useTagGroupStyles_unstable)(state);
     const styles = useStyles();
     // eslint-disable-next-line react-hooks/immutability

package/lib-commonjs/components/TagPickerGroup/useTagPickerGroupStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTagPickerGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useTagGroupStyles_unstable } from '@fluentui/react-tags';\nimport { tokens } from '@fluentui/react-theme';\nimport { tagSizeToTagPickerSize } from '../../utils/tagPicker2Tag';\nexport const tagPickerGroupClassNames = {\n    root: 'fui-TagPickerGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        flexWrap: 'wrap',\n        boxSizing: 'border-box',\n        cursor: 'text'\n    },\n    // size variants\n    medium: {\n        padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`,\n        gap: tokens.spacingHorizontalXS\n    },\n    large: {\n        padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n        gap: tokens.spacingHorizontalSNudge\n    },\n    'extra-large': {\n        padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n        gap: tokens.spacingHorizontalSNudge\n    }\n});\n/**\n * Apply styling to the TagPickerGroup slots based on the state\n */ export const useTagPickerGroupStyles_unstable = (state)=>{\n    'use no memo';\n    useTagGroupStyles_unstable(state);\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(tagPickerGroupClassNames.root, styles[tagSizeToTagPickerSize(state.size)], styles.root, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","useTagGroupStyles_unstable","tokens","tagSizeToTagPickerSize","tagPickerGroupClassNames","root","useStyles","Eh141a","B7ck84d","Bceei9c","medium","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","i8kkvl","Belr9w4","rmohyg","large","d","p","useTagPickerGroupStyles_unstable","state","styles","className","size"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAKCK,wBAAwB;;;IA2BpBkB,gCAAgC;;;;uBA/BR,gBAAgB;2BACd,sBAAsB;+BAE1B,2BAA2B;AAC3D,iCAAiC;IACpCjB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAR,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAA,eAAA;QAAAP,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAmBrB,CAAC;AAGS,0CAA0CE,KAAK,IAAG;IACzD,aAAa;QACbtB,qCAA0B,EAACsB,KAAK,CAAC;IACjC,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAiB,KAAK,CAAClB,IAAI,CAACoB,SAAS,OAAGzB,mBAAY,EAACI,wBAAwB,CAACC,IAAI,EAAEmB,MAAM,KAACrB,qCAAsB,EAACoB,KAAK,CAACG,IAAI,CAAC,CAAC,EAAEF,MAAM,CAACnB,IAAI,EAAEkB,KAAK,CAAClB,IAAI,CAACoB,SAAS,CAAC;IACjJ,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useTagPickerGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useTagGroupStyles_unstable } from '@fluentui/react-tags';\nimport { tokens } from '@fluentui/react-theme';\nimport { tagSizeToTagPickerSize } from '../../utils/tagPicker2Tag';\nexport const tagPickerGroupClassNames = {\n    root: 'fui-TagPickerGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        flexWrap: 'wrap',\n        boxSizing: 'border-box',\n        cursor: 'text'\n    },\n    // size variants\n    medium: {\n        padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`,\n        gap: tokens.spacingHorizontalXS\n    },\n    large: {\n        padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n        gap: tokens.spacingHorizontalSNudge\n    },\n    'extra-large': {\n        padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n        gap: tokens.spacingHorizontalSNudge\n    }\n});\n/**\n * Apply styling to the TagPickerGroup slots based on the state\n */ export const useTagPickerGroupStyles_unstable = (state)=>{\n    useTagGroupStyles_unstable(state);\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(tagPickerGroupClassNames.root, styles[tagSizeToTagPickerSize(state.size)], styles.root, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","useTagGroupStyles_unstable","tokens","tagSizeToTagPickerSize","tagPickerGroupClassNames","root","useStyles","Eh141a","B7ck84d","Bceei9c","medium","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","i8kkvl","Belr9w4","rmohyg","large","d","p","useTagPickerGroupStyles_unstable","state","styles","className","size"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAKCK,wBAAwB;;;IA2BpBkB,gCAAgC;;;;uBA/BR,gBAAgB;2BACd,sBAAsB;+BAE1B,2BAA2B;AAC3D,iCAAiC;IACpCjB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAR,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAA,eAAA;QAAAP,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAmBrB,CAAC;AAGS,0CAA0CE,KAAK,IAAG;QACzDtB,qCAA0B,EAACsB,KAAK,CAAC;IACjC,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAiB,KAAK,CAAClB,IAAI,CAACoB,SAAS,GAAGzB,uBAAY,EAACI,wBAAwB,CAACC,IAAI,EAAEmB,MAAM,KAACrB,qCAAsB,EAACoB,KAAK,CAACG,IAAI,CAAC,CAAC,EAAEF,MAAM,CAACnB,IAAI,EAAEkB,KAAK,CAAClB,IAAI,CAACoB,SAAS,CAAC;IACjJ,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/TagPickerGroup/useTagPickerGroupStyles.styles.raw.js

@@ -47,7 +47,6 @@ const tagPickerGroupClassNames = {
     }
 });
 const useTagPickerGroupStyles_unstable = (state)=>{
-    'use no memo';
     (0, _reacttags.useTagGroupStyles_unstable)(state);
     const styles = useStyles();
     // eslint-disable-next-line react-hooks/immutability

package/lib-commonjs/components/TagPickerGroup/useTagPickerGroupStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerGroup/useTagPickerGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerGroupSlots, TagPickerGroupState } from './TagPickerGroup.types';\nimport { useTagGroupStyles_unstable } from '@fluentui/react-tags';\nimport { tokens } from '@fluentui/react-theme';\nimport { tagSizeToTagPickerSize } from '../../utils/tagPicker2Tag';\n\nexport const tagPickerGroupClassNames: SlotClassNames<TagPickerGroupSlots> = {\n  root: 'fui-TagPickerGroup',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    flexWrap: 'wrap',\n    boxSizing: 'border-box',\n    cursor: 'text',\n  },\n  // size variants\n  medium: {\n    padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`,\n    gap: tokens.spacingHorizontalXS,\n  },\n  large: {\n    padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n    gap: tokens.spacingHorizontalSNudge,\n  },\n  'extra-large': {\n    padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n    gap: tokens.spacingHorizontalSNudge,\n  },\n});\n\n/**\n * Apply styling to the TagPickerGroup slots based on the state\n */\nexport const useTagPickerGroupStyles_unstable = (state: TagPickerGroupState): TagPickerGroupState => {\n  'use no memo';\n\n  useTagGroupStyles_unstable(state);\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    tagPickerGroupClassNames.root,\n    styles[tagSizeToTagPickerSize(state.size)],\n    styles.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useTagGroupStyles_unstable","tokens","tagSizeToTagPickerSize","tagPickerGroupClassNames","root","useStyles","flexWrap","boxSizing","cursor","medium","padding","spacingVerticalSNudge","gap","spacingHorizontalXS","large","spacingVerticalS","spacingHorizontalSNudge","useTagPickerGroupStyles_unstable","state","styles","className","size"],"mappings":"AAAA;;;;;;;;;;;;IASaK,wBAAAA;;;oCA+BAc;eAAAA;;;uBAtC4B,iBAAiB;2BAGf,uBAAuB;4BAC3C,wBAAwB;+BACR,4BAA4B;AAE5D,iCAAsE;IAC3Eb,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,iBAAAA,EAAW;IAC3BM,MAAM;QACJE,UAAU;QACVC,WAAW;QACXC,QAAQ;IACV;IACA,gBAAgB;IAChBC,QAAQ;QACNC,SAAS,GAAGT,kBAAAA,CAAOU,qBAAqB,CAAC,GAAG,EAAEV,kBAAAA,CAAOU,qBAAqB,CAAC,EAAE,CAAC;QAC9EC,KAAKX,kBAAAA,CAAOY,mBAAmB;IACjC;IACAC,OAAO;QACLJ,SAAS,GAAGT,kBAAAA,CAAOc,gBAAgB,CAAC,GAAG,EAAEd,kBAAAA,CAAOc,gBAAgB,CAAC,EAAE,CAAC;QACpEH,KAAKX,kBAAAA,CAAOe,uBAAuB;IACrC;IACA,eAAe;QACbN,SAAS,GAAGT,kBAAAA,CAAOc,gBAAgB,CAAC,GAAG,EAAEd,kBAAAA,CAAOc,gBAAgB,CAAC,EAAE,CAAC;QACpEH,KAAKX,kBAAAA,CAAOe,uBAAuB;IACrC;AACF;AAKO,yCAAyC,CAACE;IAC/C;QAEAlB,qCAAAA,EAA2BkB;IAC3B,MAAMC,SAASd;IACf,oDAAoD;IACpDa,MAAMd,IAAI,CAACgB,SAAS,OAAGrB,mBAAAA,EACrBI,yBAAyBC,IAAI,EAC7Be,MAAM,KAACjB,qCAAAA,EAAuBgB,MAAMG,IAAI,EAAE,EAC1CF,OAAOf,IAAI,EACXc,MAAMd,IAAI,CAACgB,SAAS;IAGtB,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TagPickerGroup/useTagPickerGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerGroupSlots, TagPickerGroupState } from './TagPickerGroup.types';\nimport { useTagGroupStyles_unstable } from '@fluentui/react-tags';\nimport { tokens } from '@fluentui/react-theme';\nimport { tagSizeToTagPickerSize } from '../../utils/tagPicker2Tag';\n\nexport const tagPickerGroupClassNames: SlotClassNames<TagPickerGroupSlots> = {\n  root: 'fui-TagPickerGroup',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    flexWrap: 'wrap',\n    boxSizing: 'border-box',\n    cursor: 'text',\n  },\n  // size variants\n  medium: {\n    padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`,\n    gap: tokens.spacingHorizontalXS,\n  },\n  large: {\n    padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n    gap: tokens.spacingHorizontalSNudge,\n  },\n  'extra-large': {\n    padding: `${tokens.spacingVerticalS} 0 ${tokens.spacingVerticalS} 0`,\n    gap: tokens.spacingHorizontalSNudge,\n  },\n});\n\n/**\n * Apply styling to the TagPickerGroup slots based on the state\n */\nexport const useTagPickerGroupStyles_unstable = (state: TagPickerGroupState): TagPickerGroupState => {\n  useTagGroupStyles_unstable(state);\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    tagPickerGroupClassNames.root,\n    styles[tagSizeToTagPickerSize(state.size)],\n    styles.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","useTagGroupStyles_unstable","tokens","tagSizeToTagPickerSize","tagPickerGroupClassNames","root","useStyles","flexWrap","boxSizing","cursor","medium","padding","spacingVerticalSNudge","gap","spacingHorizontalXS","large","spacingVerticalS","spacingHorizontalSNudge","useTagPickerGroupStyles_unstable","state","styles","className","size"],"mappings":"AAAA;;;;;;;;;;;;IASaK,wBAAAA;;;oCA+BAc;eAAAA;;;uBAtC4B,iBAAiB;2BAGf,uBAAuB;4BAC3C,wBAAwB;+BACR,4BAA4B;AAE5D,iCAAsE;IAC3Eb,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,iBAAAA,EAAW;IAC3BM,MAAM;QACJE,UAAU;QACVC,WAAW;QACXC,QAAQ;IACV;IACA,gBAAgB;IAChBC,QAAQ;QACNC,SAAS,GAAGT,kBAAAA,CAAOU,qBAAqB,CAAC,GAAG,EAAEV,kBAAAA,CAAOU,qBAAqB,CAAC,EAAE,CAAC;QAC9EC,KAAKX,kBAAAA,CAAOY,mBAAmB;IACjC;IACAC,OAAO;QACLJ,SAAS,GAAGT,kBAAAA,CAAOc,gBAAgB,CAAC,GAAG,EAAEd,kBAAAA,CAAOc,gBAAgB,CAAC,EAAE,CAAC;QACpEH,KAAKX,kBAAAA,CAAOe,uBAAuB;IACrC;IACA,eAAe;QACbN,SAAS,GAAGT,kBAAAA,CAAOc,gBAAgB,CAAC,GAAG,EAAEd,kBAAAA,CAAOc,gBAAgB,CAAC,EAAE,CAAC;QACpEH,KAAKX,kBAAAA,CAAOe,uBAAuB;IACrC;AACF;AAKO,yCAAyC,CAACE;QAC/ClB,qCAAAA,EAA2BkB;IAC3B,MAAMC,SAASd;IACf,oDAAoD;IACpDa,MAAMd,IAAI,CAACgB,SAAS,OAAGrB,mBAAAA,EACrBI,yBAAyBC,IAAI,EAC7Be,MAAM,KAACjB,qCAAAA,EAAuBgB,MAAMG,IAAI,EAAE,EAC1CF,OAAOf,IAAI,EACXc,MAAMd,IAAI,CAACgB,SAAS;IAGtB,OAAOF;AACT,EAAE"}

package/lib-commonjs/components/TagPickerInput/TagPickerInput.types.js

@@ -1,5 +1,5 @@
 /**
- * State used in rendering TagPickerInput
+ * TagPickerInput Base State - omits design-only state
  */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/TagPickerInput/TagPickerInput.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerInput/TagPickerInput.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ComboboxProps } from '@fluentui/react-combobox';\nimport type { TagPickerContextValue } from '../../contexts/TagPickerContext';\n\nexport type TagPickerInputSlots = {\n  root: NonNullable<Slot<'input'>>;\n};\n\n/**\n * TagPickerInput Props\n */\nexport type TagPickerInputProps = Omit<\n  ComponentProps<Partial<TagPickerInputSlots>>,\n  'children' | 'size' | 'defaultValue'\n> &\n  Pick<ComboboxProps, 'clearable' | 'appearance'> & {\n    disabled?: boolean;\n    value?: string;\n  };\n\n/**\n * State used in rendering TagPickerInput\n */\nexport type TagPickerInputState = ComponentState<TagPickerInputSlots> &\n  Pick<TagPickerContextValue, 'size' | 'disabled'>;\n"],"names":[],"mappings":"AAoBA;;CAEC,GACD,WACmD"}
+{"version":3,"sources":["../src/components/TagPickerInput/TagPickerInput.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\nimport type { ComboboxProps } from '@fluentui/react-combobox';\nimport type { TagPickerContextValue } from '../../contexts/TagPickerContext';\n\nexport type TagPickerInputSlots = {\n  root: NonNullable<Slot<'input'>>;\n};\n\n/**\n * TagPickerInput Props\n */\nexport type TagPickerInputProps = Omit<\n  ComponentProps<Partial<TagPickerInputSlots>>,\n  'children' | 'size' | 'defaultValue'\n> &\n  Pick<ComboboxProps, 'clearable' | 'appearance'> & {\n    disabled?: boolean;\n    value?: string;\n  };\n\n/**\n * State used in rendering TagPickerInput\n */\nexport type TagPickerInputState = ComponentState<TagPickerInputSlots> &\n  Pick<TagPickerContextValue, 'size' | 'disabled'>;\n\n/**\n * TagPickerInput Base Props - omits design-only props\n */\nexport type TagPickerInputBaseProps = DistributiveOmit<TagPickerInputProps, 'appearance'>;\n\n/**\n * TagPickerInput Base State - omits design-only state\n */\nexport type TagPickerInputBaseState = DistributiveOmit<TagPickerInputState, 'size'>;\n"],"names":[],"mappings":"AA+BA;;CAEC,GACD,WAAoF"}

package/lib-commonjs/components/TagPickerInput/index.js

@@ -18,6 +18,9 @@ _export(exports, {
     tagPickerInputClassNames: function() {
         return _useTagPickerInputStylesstyles.tagPickerInputClassNames;
     },
+    useTagPickerInputBase_unstable: function() {
+        return _useTagPickerInput.useTagPickerInputBase_unstable;
+    },
     useTagPickerInputStyles_unstable: function() {
         return _useTagPickerInputStylesstyles.useTagPickerInputStyles_unstable;
     },

package/lib-commonjs/components/TagPickerInput/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerInput/index.ts"],"sourcesContent":["export { TagPickerInput } from './TagPickerInput';\nexport type { TagPickerInputProps, TagPickerInputSlots, TagPickerInputState } from './TagPickerInput.types';\nexport { renderTagPickerInput_unstable } from './renderTagPickerInput';\nexport { useTagPickerInput_unstable } from './useTagPickerInput';\nexport { tagPickerInputClassNames, useTagPickerInputStyles_unstable } from './useTagPickerInputStyles.styles';\n"],"names":["TagPickerInput","renderTagPickerInput_unstable","useTagPickerInput_unstable","tagPickerInputClassNames","useTagPickerInputStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,8BAAc;;;eAEdC,mDAA6B;;;eAE7BE,uDAAwB;;;eAAEC,+DAAgC;;;eAD1DF,6CAA0B;;;gCAHJ,mBAAmB;sCAEJ,yBAAyB;mCAC5B,sBAAsB;+CACU,mCAAmC"}
+{"version":3,"sources":["../src/components/TagPickerInput/index.ts"],"sourcesContent":["export { TagPickerInput } from './TagPickerInput';\nexport type {\n  TagPickerInputBaseProps,\n  TagPickerInputBaseState,\n  TagPickerInputProps,\n  TagPickerInputSlots,\n  TagPickerInputState,\n} from './TagPickerInput.types';\nexport { renderTagPickerInput_unstable } from './renderTagPickerInput';\nexport { useTagPickerInput_unstable, useTagPickerInputBase_unstable } from './useTagPickerInput';\nexport { tagPickerInputClassNames, useTagPickerInputStyles_unstable } from './useTagPickerInputStyles.styles';\n"],"names":["TagPickerInput","renderTagPickerInput_unstable","useTagPickerInput_unstable","useTagPickerInputBase_unstable","tagPickerInputClassNames","useTagPickerInputStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,8BAAc;;;eAQdC,mDAA6B;;;eAE7BG,uDAAwB;;;eADID,iDAA8B;;;eAChCE,+DAAgC;;;eAD1DH,6CAA0B;;;gCATJ,mBAAmB;sCAQJ,yBAAyB;mCACI,sBAAsB;+CACtB,mCAAmC"}

package/lib-commonjs/components/TagPickerInput/useTagPickerInput.js

@@ -3,9 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useTagPickerInput_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useTagPickerInputBase_unstable: function() {
+        return useTagPickerInputBase_unstable;
+    },
+    useTagPickerInput_unstable: function() {
         return useTagPickerInput_unstable;
     }
 });
@@ -20,16 +28,14 @@ const _reactcombobox = require("@fluentui/react-combobox");
 const _reactfield = require("@fluentui/react-field");
 const _tokens = require("../../utils/tokens");
 const _reacttabster = require("@fluentui/react-tabster");
-const useTagPickerInput_unstable = (propsArg, ref)=>{
-    const props = (0, _reactfield.useFieldControlProps_unstable)(propsArg, {
+const useTagPickerInputBase_unstable = (props, ref)=>{
+    const fieldProps = (0, _reactfield.useFieldControlProps_unstable)(props, {
         supportsLabelFor: true,
         supportsRequired: true,
         supportsSize: true
     });
     const { controller: activeDescendantController } = (0, _reactaria.useActiveDescendantContext)();
-    const size = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.size);
     const contextDisabled = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.disabled);
-    const tagPickerGroupRef = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.tagPickerGroupRef);
     const triggerRef = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.triggerRef);
     const selectedOptions = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.selectedOptions);
     const setValue = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.setValue);
@@ -62,22 +68,18 @@ const useTagPickerInput_unstable = (propsArg, ref)=>{
     }, [
         triggerRef
     ]);
-    const { value = contextValue, disabled = contextDisabled } = props;
-    const { findLastFocusable } = (0, _reacttabster.useFocusFinders)();
+    const { value = contextValue, disabled = contextDisabled } = fieldProps;
     const isTypingRef = _react.useRef(false);
     const root = (0, _reactcombobox.useInputTriggerSlot)({
         type: 'text',
         value: value !== null && value !== void 0 ? value : '',
         'aria-controls': open ? popoverId : undefined,
         disabled,
-        ...(0, _reactutilities.getIntrinsicElementProps)('input', props),
+        ...(0, _reactutilities.getIntrinsicElementProps)('input', fieldProps),
         onKeyDown: (0, _reactutilities.useEventCallback)((event)=>{
-            var _props_onKeyDown;
-            (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);
-            if ((event.key === _keyboardkeys.ArrowLeft || event.key === _keyboardkeys.Backspace) && event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === 0 && tagPickerGroupRef.current) {
-                var _findLastFocusable;
-                (_findLastFocusable = findLastFocusable(tagPickerGroupRef.current)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();
-            } else if (event.key === _keyboardkeys.Space) {
+            var _fieldProps_onKeyDown;
+            (_fieldProps_onKeyDown = fieldProps.onKeyDown) === null || _fieldProps_onKeyDown === void 0 ? void 0 : _fieldProps_onKeyDown.call(fieldProps, event);
+            if (event.key === _keyboardkeys.Space) {
                 if (open && !isTypingRef.current) {
                     setOpen(event, false);
                 }
@@ -106,18 +108,37 @@ const useTagPickerInput_unstable = (propsArg, ref)=>{
             setOpen,
             setValue,
             multiselect: true,
-            value: props.value
+            value: fieldProps.value
         }
     });
-    const state = {
+    return {
         components: {
             root: 'input'
         },
         root,
-        disabled,
+        disabled
+    };
+};
+const useTagPickerInput_unstable = (props, ref)=>{
+    const tagPickerGroupRef = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.tagPickerGroupRef);
+    const { findLastFocusable } = (0, _reacttabster.useFocusFinders)();
+    const onKeyDown = (0, _reactutilities.useEventCallback)((event)=>{
+        var _props_onKeyDown;
+        (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);
+        if ((event.key === _keyboardkeys.ArrowLeft || event.key === _keyboardkeys.Backspace) && event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === 0 && tagPickerGroupRef.current) {
+            var _findLastFocusable;
+            (_findLastFocusable = findLastFocusable(tagPickerGroupRef.current)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();
+        }
+    });
+    const baseState = useTagPickerInputBase_unstable({
+        ...props,
+        onKeyDown
+    }, ref);
+    const size = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.size);
+    return {
+        ...baseState,
         size
     };
-    return state;
 };
 /**
  * while typing the user might need a bit more of space to see the text,

package/lib-commonjs/components/TagPickerInput/useTagPickerInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerInput/useTagPickerInput.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport type { TagPickerInputProps, TagPickerInputState } from './TagPickerInput.types';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport {\n  useMergedRefs,\n  getIntrinsicElementProps,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { ArrowLeft, Backspace, Enter, Space } from '@fluentui/keyboard-keys';\nimport { useInputTriggerSlot } from '@fluentui/react-combobox';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { tagPickerInputCSSRules } from '../../utils/tokens';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render TagPickerInput.\n *\n * The returned state can be modified with hooks such as useTagPickerInputStyles_unstable,\n * before being passed to renderTagPickerInput_unstable.\n *\n * @param props - props from this instance of TagPickerInput\n * @param ref - reference to root HTMLDivElement of TagPickerInput\n */\nexport const useTagPickerInput_unstable = (\n  propsArg: TagPickerInputProps,\n  ref: React.Ref<HTMLInputElement>,\n): TagPickerInputState => {\n  const props = useFieldControlProps_unstable(propsArg, {\n    supportsLabelFor: true,\n    supportsRequired: true,\n    supportsSize: true,\n  });\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n  const size = useTagPickerContext_unstable(ctx => ctx.size);\n  const contextDisabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n  const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef as React.RefObject<HTMLInputElement>);\n  const selectedOptions = useTagPickerContext_unstable(ctx => ctx.selectedOptions);\n  const setValue = useTagPickerContext_unstable(ctx => ctx.setValue);\n  const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n  const setHasFocus = useTagPickerContext_unstable(ctx => ctx.setHasFocus);\n  const clearSelection = useTagPickerContext_unstable(ctx => ctx.clearSelection);\n  const open = useTagPickerContext_unstable(ctx => ctx.open);\n  const popoverId = useTagPickerContext_unstable(ctx => (ctx.noPopover ? undefined : ctx.popoverId));\n  const selectOption = useTagPickerContext_unstable(ctx => ctx.selectOption);\n  const getOptionById = useTagPickerContext_unstable(ctx => ctx.getOptionById);\n  const contextValue = useTagPickerContext_unstable(ctx => ctx.value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n    setTagPickerInputStretchStyle(triggerRef.current);\n  }, [selectedOptions, triggerRef]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (triggerRef.current) {\n      const input = triggerRef.current;\n      const cb = () => setTagPickerInputStretchStyle(input);\n      input.addEventListener('input', cb);\n      return () => {\n        input.removeEventListener('input', cb);\n      };\n    }\n  }, [triggerRef]);\n\n  const { value = contextValue, disabled = contextDisabled } = props;\n  const { findLastFocusable } = useFocusFinders();\n\n  const isTypingRef = React.useRef(false);\n\n  const root = useInputTriggerSlot(\n    {\n      type: 'text',\n      value: value ?? '',\n      'aria-controls': open ? popoverId : undefined,\n      disabled,\n      ...getIntrinsicElementProps('input', props),\n      onKeyDown: useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n        props.onKeyDown?.(event);\n        if (\n          (event.key === ArrowLeft || event.key === Backspace) &&\n          event.currentTarget.selectionStart === 0 &&\n          event.currentTarget.selectionEnd === 0 &&\n          tagPickerGroupRef.current\n        ) {\n          findLastFocusable(tagPickerGroupRef.current)?.focus();\n        } else if (event.key === Space) {\n          if (open && !isTypingRef.current) {\n            setOpen(event, false);\n          }\n        } else if (event.key === Enter) {\n          if (open) {\n            ReactDOM.unstable_batchedUpdates(() => {\n              setValue(undefined);\n              setOpen(event, false);\n            });\n          } else {\n            setOpen(event, true);\n          }\n        }\n        isTypingRef.current =\n          event.key.length === 1 && event.code !== Space && !event.altKey && !event.ctrlKey && !event.metaKey;\n      }),\n    },\n    useMergedRefs(triggerRef, ref),\n    {\n      activeDescendantController,\n      freeform: false,\n      state: {\n        clearSelection,\n        getOptionById,\n        open,\n        selectedOptions,\n        selectOption,\n        setHasFocus,\n        setOpen,\n        setValue,\n        multiselect: true,\n        value: props.value,\n      },\n    },\n  );\n\n  const state: TagPickerInputState = {\n    components: {\n      root: 'input',\n    },\n    root,\n    disabled,\n    size,\n  };\n\n  return state;\n};\n\n/**\n * while typing the user might need a bit more of space to see the text,\n * which means the input should stretch to 100% width\n * occupying a whole new line.\n *\n * This function will set the CSS variable `--width` to `100%` if the scrollWidth is greater than the offsetWidth,\n * meaning the text is overflowing the input.\n *\n * @param input - input element to apply the style\n * @returns void\n */\nconst setTagPickerInputStretchStyle = (input: HTMLInputElement) => {\n  // first we need to remove the CSS variable\n  // to properly calculate the difference between scrollWidth and offsetWidth\n  input.style.removeProperty(tagPickerInputCSSRules.width);\n  if (input.scrollWidth > input.offsetWidth + 1) {\n    input.style.setProperty(tagPickerInputCSSRules.width, '100%');\n  } else {\n    input.style.removeProperty(tagPickerInputCSSRules.width);\n  }\n};\n"],"names":["React","ReactDOM","useActiveDescendantContext","useTagPickerContext_unstable","useMergedRefs","getIntrinsicElementProps","useEventCallback","useIsomorphicLayoutEffect","ArrowLeft","Backspace","Enter","Space","useInputTriggerSlot","useFieldControlProps_unstable","tagPickerInputCSSRules","useFocusFinders","useTagPickerInput_unstable","propsArg","ref","props","supportsLabelFor","supportsRequired","supportsSize","controller","activeDescendantController","size","ctx","contextDisabled","disabled","tagPickerGroupRef","triggerRef","selectedOptions","setValue","setOpen","setHasFocus","clearSelection","open","popoverId","noPopover","undefined","selectOption","getOptionById","contextValue","value","current","setTagPickerInputStretchStyle","input","cb","addEventListener","removeEventListener","findLastFocusable","isTypingRef","useRef","root","type","onKeyDown","event","key","currentTarget","selectionStart","selectionEnd","focus","unstable_batchedUpdates","length","code","altKey","ctrlKey","metaKey","freeform","state","multiselect","components","style","removeProperty","width","scrollWidth","offsetWidth","setProperty"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TagPickerInput/useTagPickerInput.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport type {\n  TagPickerInputBaseProps,\n  TagPickerInputBaseState,\n  TagPickerInputProps,\n  TagPickerInputState,\n} from './TagPickerInput.types';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport {\n  useMergedRefs,\n  getIntrinsicElementProps,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport { ArrowLeft, Backspace, Enter, Space } from '@fluentui/keyboard-keys';\nimport { useInputTriggerSlot } from '@fluentui/react-combobox';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { tagPickerInputCSSRules } from '../../utils/tokens';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\n/**\n * Create the base state required to render TagPickerInput, without design-only props.\n * The Base hook omits Tabster-driven focus management; consumers can re-add it via the\n * styled wrapper {@link useTagPickerInput_unstable} or by composing their own keydown handler.\n *\n * @param props - props from this instance of TagPickerInput (without appearance)\n * @param ref - reference to root HTMLInputElement of TagPickerInput\n */\nexport const useTagPickerInputBase_unstable = (\n  props: TagPickerInputBaseProps,\n  ref: React.Ref<HTMLInputElement>,\n): TagPickerInputBaseState => {\n  const fieldProps = useFieldControlProps_unstable(props, {\n    supportsLabelFor: true,\n    supportsRequired: true,\n    supportsSize: true,\n  });\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n  const contextDisabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef as React.RefObject<HTMLInputElement>);\n  const selectedOptions = useTagPickerContext_unstable(ctx => ctx.selectedOptions);\n  const setValue = useTagPickerContext_unstable(ctx => ctx.setValue);\n  const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n  const setHasFocus = useTagPickerContext_unstable(ctx => ctx.setHasFocus);\n  const clearSelection = useTagPickerContext_unstable(ctx => ctx.clearSelection);\n  const open = useTagPickerContext_unstable(ctx => ctx.open);\n  const popoverId = useTagPickerContext_unstable(ctx => (ctx.noPopover ? undefined : ctx.popoverId));\n  const selectOption = useTagPickerContext_unstable(ctx => ctx.selectOption);\n  const getOptionById = useTagPickerContext_unstable(ctx => ctx.getOptionById);\n  const contextValue = useTagPickerContext_unstable(ctx => ctx.value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n    setTagPickerInputStretchStyle(triggerRef.current);\n  }, [selectedOptions, triggerRef]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (triggerRef.current) {\n      const input = triggerRef.current;\n      const cb = () => setTagPickerInputStretchStyle(input);\n      input.addEventListener('input', cb);\n      return () => {\n        input.removeEventListener('input', cb);\n      };\n    }\n  }, [triggerRef]);\n\n  const { value = contextValue, disabled = contextDisabled } = fieldProps;\n\n  const isTypingRef = React.useRef(false);\n\n  const root = useInputTriggerSlot(\n    {\n      type: 'text',\n      value: value ?? '',\n      'aria-controls': open ? popoverId : undefined,\n      disabled,\n      ...getIntrinsicElementProps('input', fieldProps),\n      onKeyDown: useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n        fieldProps.onKeyDown?.(event);\n        if (event.key === Space) {\n          if (open && !isTypingRef.current) {\n            setOpen(event, false);\n          }\n        } else if (event.key === Enter) {\n          if (open) {\n            ReactDOM.unstable_batchedUpdates(() => {\n              setValue(undefined);\n              setOpen(event, false);\n            });\n          } else {\n            setOpen(event, true);\n          }\n        }\n        isTypingRef.current =\n          event.key.length === 1 && event.code !== Space && !event.altKey && !event.ctrlKey && !event.metaKey;\n      }),\n    },\n    useMergedRefs(triggerRef, ref),\n    {\n      activeDescendantController,\n      freeform: false,\n      state: {\n        clearSelection,\n        getOptionById,\n        open,\n        selectedOptions,\n        selectOption,\n        setHasFocus,\n        setOpen,\n        setValue,\n        multiselect: true,\n        value: fieldProps.value,\n      },\n    },\n  );\n\n  return {\n    components: {\n      root: 'input',\n    },\n    root,\n    disabled,\n  };\n};\n\n/**\n * Create the state required to render TagPickerInput.\n *\n * The returned state can be modified with hooks such as useTagPickerInputStyles_unstable,\n * before being passed to renderTagPickerInput_unstable.\n *\n * @param props - props from this instance of TagPickerInput\n * @param ref - reference to root HTMLInputElement of TagPickerInput\n */\nexport const useTagPickerInput_unstable = (\n  props: TagPickerInputProps,\n  ref: React.Ref<HTMLInputElement>,\n): TagPickerInputState => {\n  const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n  const { findLastFocusable } = useFocusFinders();\n\n  const onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n    props.onKeyDown?.(event);\n    if (\n      (event.key === ArrowLeft || event.key === Backspace) &&\n      event.currentTarget.selectionStart === 0 &&\n      event.currentTarget.selectionEnd === 0 &&\n      tagPickerGroupRef.current\n    ) {\n      findLastFocusable(tagPickerGroupRef.current)?.focus();\n    }\n  });\n\n  const baseState = useTagPickerInputBase_unstable({ ...props, onKeyDown }, ref);\n  const size = useTagPickerContext_unstable(ctx => ctx.size);\n\n  return {\n    ...baseState,\n    size,\n  };\n};\n\n/**\n * while typing the user might need a bit more of space to see the text,\n * which means the input should stretch to 100% width\n * occupying a whole new line.\n *\n * This function will set the CSS variable `--width` to `100%` if the scrollWidth is greater than the offsetWidth,\n * meaning the text is overflowing the input.\n *\n * @param input - input element to apply the style\n * @returns void\n */\nconst setTagPickerInputStretchStyle = (input: HTMLInputElement) => {\n  // first we need to remove the CSS variable\n  // to properly calculate the difference between scrollWidth and offsetWidth\n  input.style.removeProperty(tagPickerInputCSSRules.width);\n  if (input.scrollWidth > input.offsetWidth + 1) {\n    input.style.setProperty(tagPickerInputCSSRules.width, '100%');\n  } else {\n    input.style.removeProperty(tagPickerInputCSSRules.width);\n  }\n};\n"],"names":["React","ReactDOM","useActiveDescendantContext","useTagPickerContext_unstable","useMergedRefs","getIntrinsicElementProps","useEventCallback","useIsomorphicLayoutEffect","ArrowLeft","Backspace","Enter","Space","useInputTriggerSlot","useFieldControlProps_unstable","tagPickerInputCSSRules","useFocusFinders","useTagPickerInputBase_unstable","props","ref","fieldProps","supportsLabelFor","supportsRequired","supportsSize","controller","activeDescendantController","contextDisabled","ctx","disabled","triggerRef","selectedOptions","setValue","setOpen","setHasFocus","clearSelection","open","popoverId","noPopover","undefined","selectOption","getOptionById","contextValue","value","current","setTagPickerInputStretchStyle","input","cb","addEventListener","removeEventListener","isTypingRef","useRef","root","type","onKeyDown","event","key","unstable_batchedUpdates","length","code","altKey","ctrlKey","metaKey","freeform","state","multiselect","components","useTagPickerInput_unstable","tagPickerGroupRef","findLastFocusable","currentTarget","selectionStart","selectionEnd","focus","baseState","size","style","removeProperty","width","scrollWidth","offsetWidth","setProperty"],"mappings":"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"}

package/lib-commonjs/components/TagPickerInput/useTagPickerInputStyles.styles.js

@@ -103,7 +103,6 @@ const useBaseStyle = /*#__PURE__*/ (0, _react.__resetStyles)("r1hdk6fw", null, [
     ]
 });
 const useTagPickerInputStyles_unstable = (state)=>{
-    'use no memo';
     const baseStyle = useBaseStyle();
     const styles = useStyles();
     // eslint-disable-next-line react-hooks/immutability

package/lib-commonjs/components/TagPickerInput/useTagPickerInputStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTagPickerInputStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles, tokens } from '@fluentui/react-theme';\nimport { tagPickerInputTokens } from '../../utils/tokens';\nexport const tagPickerInputClassNames = {\n    root: 'fui-TagPickerInput'\n};\nconst useBaseStyle = makeResetStyles({\n    backgroundColor: tokens.colorTransparentBackground,\n    color: tokens.colorNeutralForeground1,\n    fontFamily: tokens.fontFamilyBase,\n    boxSizing: 'border-box',\n    '&:focus': {\n        outlineStyle: 'none'\n    },\n    '&::placeholder': {\n        color: tokens.colorNeutralForeground4,\n        opacity: 1\n    },\n    '&::after': {\n        visibility: 'hidden',\n        whiteSpace: 'pre-wrap'\n    },\n    border: 'none',\n    minWidth: '24px',\n    maxWidth: '100%',\n    // by default width is 0,\n    // it will be calculated based on the requirement of stretching the component to 100% width\n    // see setTagPickerInputStretchStyle method for more details\n    width: tagPickerInputTokens.width,\n    flexGrow: 1\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    // size variants\n    medium: {\n        ...typographyStyles.body1,\n        padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`\n    },\n    large: {\n        ...typographyStyles.body1,\n        padding: `${tokens.spacingVerticalMNudge} 0 ${tokens.spacingVerticalMNudge} 0`\n    },\n    'extra-large': {\n        ...typographyStyles.body1,\n        padding: `${tokens.spacingVerticalM} 0 ${tokens.spacingVerticalM} 0`\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: tokens.colorTransparentBackground,\n        cursor: 'not-allowed',\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    }\n});\n/**\n * Apply styling to the TagPickerInput slots based on the state\n */ export const useTagPickerInputStyles_unstable = (state)=>{\n    'use no memo';\n    const baseStyle = useBaseStyle();\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(tagPickerInputClassNames.root, baseStyle, styles[state.size], state.disabled && styles.disabled, state.root.className);\n    return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","typographyStyles","tokens","tagPickerInputTokens","tagPickerInputClassNames","root","useBaseStyle","useStyles","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","large","disabled","sj55zd","De3pzq","Bceei9c","yvdlaj","d","p","useTagPickerInputStyles_unstable","state","baseStyle","styles","className","size"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICM,wBAAwB;;;oCAuDY;;;;uBA1DS,gBAAgB;AAGnE,iCAAiC;IACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,YAAY,GAAA,WAAA,OAAGR,oBAAA,EAAA,YAAA,MAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CAwBpB,CAAC;AACF;;CAEA,GAAI,MAAMS,SAAS,GAAA,WAAA,OAAGR,eAAA,EAAA;IAAAS,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAT,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAA,eAAA;QAAAR,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAE,QAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAsBrB,CAAC;AAGS,MAAMC,oCAAoCC,KAAK,IAAG;IACzD,aAAa;IACb,MAAMC,SAAS,GAAGtB,YAAY,CAAC,CAAC;IAChC,MAAMuB,MAAM,GAAGtB,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAoB,KAAK,CAACtB,IAAI,CAACyB,SAAS,OAAG9B,mBAAY,EAACI,wBAAwB,CAACC,IAAI,EAAEuB,SAAS,EAAEC,MAAM,CAACF,KAAK,CAACI,IAAI,CAAC,EAAEJ,KAAK,CAACR,QAAQ,IAAIU,MAAM,CAACV,QAAQ,EAAEQ,KAAK,CAACtB,IAAI,CAACyB,SAAS,CAAC;IAC1J,OAAOH,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useTagPickerInputStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles, tokens } from '@fluentui/react-theme';\nimport { tagPickerInputTokens } from '../../utils/tokens';\nexport const tagPickerInputClassNames = {\n    root: 'fui-TagPickerInput'\n};\nconst useBaseStyle = makeResetStyles({\n    backgroundColor: tokens.colorTransparentBackground,\n    color: tokens.colorNeutralForeground1,\n    fontFamily: tokens.fontFamilyBase,\n    boxSizing: 'border-box',\n    '&:focus': {\n        outlineStyle: 'none'\n    },\n    '&::placeholder': {\n        color: tokens.colorNeutralForeground4,\n        opacity: 1\n    },\n    '&::after': {\n        visibility: 'hidden',\n        whiteSpace: 'pre-wrap'\n    },\n    border: 'none',\n    minWidth: '24px',\n    maxWidth: '100%',\n    // by default width is 0,\n    // it will be calculated based on the requirement of stretching the component to 100% width\n    // see setTagPickerInputStretchStyle method for more details\n    width: tagPickerInputTokens.width,\n    flexGrow: 1\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    // size variants\n    medium: {\n        ...typographyStyles.body1,\n        padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`\n    },\n    large: {\n        ...typographyStyles.body1,\n        padding: `${tokens.spacingVerticalMNudge} 0 ${tokens.spacingVerticalMNudge} 0`\n    },\n    'extra-large': {\n        ...typographyStyles.body1,\n        padding: `${tokens.spacingVerticalM} 0 ${tokens.spacingVerticalM} 0`\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: tokens.colorTransparentBackground,\n        cursor: 'not-allowed',\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    }\n});\n/**\n * Apply styling to the TagPickerInput slots based on the state\n */ export const useTagPickerInputStyles_unstable = (state)=>{\n    const baseStyle = useBaseStyle();\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(tagPickerInputClassNames.root, baseStyle, styles[state.size], state.disabled && styles.disabled, state.root.className);\n    return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","typographyStyles","tokens","tagPickerInputTokens","tagPickerInputClassNames","root","useBaseStyle","useStyles","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","large","disabled","sj55zd","De3pzq","Bceei9c","yvdlaj","d","p","useTagPickerInputStyles_unstable","state","baseStyle","styles","className","size"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICM,wBAAwB;;;oCAuDY;;;;uBA1DS,gBAAgB;AAGnE,iCAAiC;IACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,YAAY,GAAA,WAAA,OAAGR,oBAAA,EAAA,YAAA,MAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CAwBpB,CAAC;AACF;;CAEA,GAAI,MAAMS,SAAS,GAAA,WAAA,OAAGR,eAAA,EAAA;IAAAS,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAT,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAA,eAAA;QAAAR,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAE,QAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAsBrB,CAAC;AAGS,MAAMC,oCAAoCC,KAAK,IAAG;IACzD,MAAMC,SAAS,GAAGtB,YAAY,CAAC,CAAC;IAChC,MAAMuB,MAAM,GAAGtB,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAoB,KAAK,CAACtB,IAAI,CAACyB,SAAS,GAAG9B,uBAAY,EAACI,wBAAwB,CAACC,IAAI,EAAEuB,SAAS,EAAEC,MAAM,CAACF,KAAK,CAACI,IAAI,CAAC,EAAEJ,KAAK,CAACR,QAAQ,IAAIU,MAAM,CAACV,QAAQ,EAAEQ,KAAK,CAACtB,IAAI,CAACyB,SAAS,CAAC;IAC1J,OAAOH,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/TagPickerInput/useTagPickerInputStyles.styles.raw.js

@@ -74,7 +74,6 @@ const useBaseStyle = (0, _react.makeResetStyles)({
     }
 });
 const useTagPickerInputStyles_unstable = (state)=>{
-    'use no memo';
     const baseStyle = useBaseStyle();
     const styles = useStyles();
     // eslint-disable-next-line react-hooks/immutability

package/lib-commonjs/components/TagPickerInput/useTagPickerInputStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerInput/useTagPickerInputStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles, tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerInputSlots, TagPickerInputState } from './TagPickerInput.types';\nimport { tagPickerInputTokens } from '../../utils/tokens';\n\nexport const tagPickerInputClassNames: SlotClassNames<TagPickerInputSlots> = {\n  root: 'fui-TagPickerInput',\n};\n\nconst useBaseStyle = makeResetStyles({\n  backgroundColor: tokens.colorTransparentBackground,\n  color: tokens.colorNeutralForeground1,\n  fontFamily: tokens.fontFamilyBase,\n  boxSizing: 'border-box',\n\n  '&:focus': {\n    outlineStyle: 'none',\n  },\n  '&::placeholder': {\n    color: tokens.colorNeutralForeground4,\n    opacity: 1,\n  },\n  '&::after': {\n    visibility: 'hidden',\n    whiteSpace: 'pre-wrap',\n  },\n  border: 'none',\n  minWidth: '24px',\n  maxWidth: '100%',\n  // by default width is 0,\n  // it will be calculated based on the requirement of stretching the component to 100% width\n  // see setTagPickerInputStretchStyle method for more details\n  width: tagPickerInputTokens.width,\n  flexGrow: 1,\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  // size variants\n  medium: {\n    ...typographyStyles.body1,\n    padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`,\n  },\n  large: {\n    ...typographyStyles.body1,\n    padding: `${tokens.spacingVerticalMNudge} 0 ${tokens.spacingVerticalMNudge} 0`,\n  },\n  'extra-large': {\n    ...typographyStyles.body1,\n    padding: `${tokens.spacingVerticalM} 0 ${tokens.spacingVerticalM} 0`,\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    backgroundColor: tokens.colorTransparentBackground,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\n/**\n * Apply styling to the TagPickerInput slots based on the state\n */\nexport const useTagPickerInputStyles_unstable = (state: TagPickerInputState): TagPickerInputState => {\n  'use no memo';\n\n  const baseStyle = useBaseStyle();\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    tagPickerInputClassNames.root,\n    baseStyle,\n    styles[state.size],\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","typographyStyles","tokens","tagPickerInputTokens","tagPickerInputClassNames","root","useBaseStyle","backgroundColor","colorTransparentBackground","color","colorNeutralForeground1","fontFamily","fontFamilyBase","boxSizing","outlineStyle","colorNeutralForeground4","opacity","visibility","whiteSpace","border","minWidth","maxWidth","width","flexGrow","useStyles","medium","body1","padding","spacingVerticalSNudge","large","spacingVerticalMNudge","spacingVerticalM","disabled","colorNeutralForegroundDisabled","cursor","useTagPickerInputStyles_unstable","state","baseStyle","styles","className","size"],"mappings":"AAAA;;;;;;;;;;;;IAQaM,wBAAAA;;;oCA6DA+B;eAAAA;;;uBAnE6C,iBAAiB;4BAClC,wBAAwB;wBAG5B,qBAAqB;AAEnD,iCAAsE;IAC3E9B,MAAM;AACR,EAAE;AAEF,MAAMC,mBAAeR,sBAAAA,EAAgB;IACnCS,iBAAiBL,kBAAAA,CAAOM,0BAA0B;IAClDC,OAAOP,kBAAAA,CAAOQ,uBAAuB;IACrCC,YAAYT,kBAAAA,CAAOU,cAAc;IACjCC,WAAW;IAEX,WAAW;QACTC,cAAc;IAChB;IACA,kBAAkB;QAChBL,OAAOP,kBAAAA,CAAOa,uBAAuB;QACrCC,SAAS;IACX;IACA,YAAY;QACVC,YAAY;QACZC,YAAY;IACd;IACAC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACV,yBAAyB;IACzB,2FAA2F;IAC3F,4DAA4D;IAC5DC,OAAOnB,4BAAAA,CAAqBmB,KAAK;IACjCC,UAAU;AACZ;AAEA;;CAEC,GACD,MAAMC,gBAAYzB,iBAAAA,EAAW;IAC3B,gBAAgB;IAChB0B,QAAQ;QACN,GAAGxB,4BAAAA,CAAiByB,KAAK;QACzBC,SAAS,GAAGzB,kBAAAA,CAAO0B,qBAAqB,CAAC,GAAG,EAAE1B,kBAAAA,CAAO0B,qBAAqB,CAAC,EAAE,CAAC;IAChF;IACAC,OAAO;QACL,GAAG5B,4BAAAA,CAAiByB,KAAK;QACzBC,SAAS,GAAGzB,kBAAAA,CAAO4B,qBAAqB,CAAC,GAAG,EAAE5B,kBAAAA,CAAO4B,qBAAqB,CAAC,EAAE,CAAC;IAChF;IACA,eAAe;QACb,GAAG7B,4BAAAA,CAAiByB,KAAK;QACzBC,SAAS,GAAGzB,kBAAAA,CAAO6B,gBAAgB,CAAC,GAAG,EAAE7B,kBAAAA,CAAO6B,gBAAgB,CAAC,EAAE,CAAC;IACtE;IACAC,UAAU;QACRvB,OAAOP,kBAAAA,CAAO+B,8BAA8B;QAC5C1B,iBAAiBL,kBAAAA,CAAOM,0BAA0B;QAClD0B,QAAQ;QACR,iBAAiB;YACfzB,OAAOP,kBAAAA,CAAO+B,8BAA8B;QAC9C;IACF;AACF;AAKO,yCAAyC,CAACG;IAC/C;IAEA,MAAMC,YAAY/B;IAClB,MAAMgC,SAASd;IACf,oDAAoD;IACpDY,MAAM/B,IAAI,CAACkC,SAAS,OAAGvC,mBAAAA,EACrBI,yBAAyBC,IAAI,EAC7BgC,WACAC,MAAM,CAACF,MAAMI,IAAI,CAAC,EAClBJ,MAAMJ,QAAQ,IAAIM,OAAON,QAAQ,EACjCI,MAAM/B,IAAI,CAACkC,SAAS;IAEtB,OAAOH;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TagPickerInput/useTagPickerInputStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { typographyStyles, tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerInputSlots, TagPickerInputState } from './TagPickerInput.types';\nimport { tagPickerInputTokens } from '../../utils/tokens';\n\nexport const tagPickerInputClassNames: SlotClassNames<TagPickerInputSlots> = {\n  root: 'fui-TagPickerInput',\n};\n\nconst useBaseStyle = makeResetStyles({\n  backgroundColor: tokens.colorTransparentBackground,\n  color: tokens.colorNeutralForeground1,\n  fontFamily: tokens.fontFamilyBase,\n  boxSizing: 'border-box',\n\n  '&:focus': {\n    outlineStyle: 'none',\n  },\n  '&::placeholder': {\n    color: tokens.colorNeutralForeground4,\n    opacity: 1,\n  },\n  '&::after': {\n    visibility: 'hidden',\n    whiteSpace: 'pre-wrap',\n  },\n  border: 'none',\n  minWidth: '24px',\n  maxWidth: '100%',\n  // by default width is 0,\n  // it will be calculated based on the requirement of stretching the component to 100% width\n  // see setTagPickerInputStretchStyle method for more details\n  width: tagPickerInputTokens.width,\n  flexGrow: 1,\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  // size variants\n  medium: {\n    ...typographyStyles.body1,\n    padding: `${tokens.spacingVerticalSNudge} 0 ${tokens.spacingVerticalSNudge} 0`,\n  },\n  large: {\n    ...typographyStyles.body1,\n    padding: `${tokens.spacingVerticalMNudge} 0 ${tokens.spacingVerticalMNudge} 0`,\n  },\n  'extra-large': {\n    ...typographyStyles.body1,\n    padding: `${tokens.spacingVerticalM} 0 ${tokens.spacingVerticalM} 0`,\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    backgroundColor: tokens.colorTransparentBackground,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\n/**\n * Apply styling to the TagPickerInput slots based on the state\n */\nexport const useTagPickerInputStyles_unstable = (state: TagPickerInputState): TagPickerInputState => {\n  const baseStyle = useBaseStyle();\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    tagPickerInputClassNames.root,\n    baseStyle,\n    styles[state.size],\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","typographyStyles","tokens","tagPickerInputTokens","tagPickerInputClassNames","root","useBaseStyle","backgroundColor","colorTransparentBackground","color","colorNeutralForeground1","fontFamily","fontFamilyBase","boxSizing","outlineStyle","colorNeutralForeground4","opacity","visibility","whiteSpace","border","minWidth","maxWidth","width","flexGrow","useStyles","medium","body1","padding","spacingVerticalSNudge","large","spacingVerticalMNudge","spacingVerticalM","disabled","colorNeutralForegroundDisabled","cursor","useTagPickerInputStyles_unstable","state","baseStyle","styles","className","size"],"mappings":"AAAA;;;;;;;;;;;;IAQaM,wBAAAA;;;oCA6DA+B;eAAAA;;;uBAnE6C,iBAAiB;4BAClC,wBAAwB;wBAG5B,qBAAqB;AAEnD,iCAAsE;IAC3E9B,MAAM;AACR,EAAE;AAEF,MAAMC,mBAAeR,sBAAAA,EAAgB;IACnCS,iBAAiBL,kBAAAA,CAAOM,0BAA0B;IAClDC,OAAOP,kBAAAA,CAAOQ,uBAAuB;IACrCC,YAAYT,kBAAAA,CAAOU,cAAc;IACjCC,WAAW;IAEX,WAAW;QACTC,cAAc;IAChB;IACA,kBAAkB;QAChBL,OAAOP,kBAAAA,CAAOa,uBAAuB;QACrCC,SAAS;IACX;IACA,YAAY;QACVC,YAAY;QACZC,YAAY;IACd;IACAC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACV,yBAAyB;IACzB,2FAA2F;IAC3F,4DAA4D;IAC5DC,OAAOnB,4BAAAA,CAAqBmB,KAAK;IACjCC,UAAU;AACZ;AAEA;;CAEC,GACD,MAAMC,gBAAYzB,iBAAAA,EAAW;IAC3B,gBAAgB;IAChB0B,QAAQ;QACN,GAAGxB,4BAAAA,CAAiByB,KAAK;QACzBC,SAAS,GAAGzB,kBAAAA,CAAO0B,qBAAqB,CAAC,GAAG,EAAE1B,kBAAAA,CAAO0B,qBAAqB,CAAC,EAAE,CAAC;IAChF;IACAC,OAAO;QACL,GAAG5B,4BAAAA,CAAiByB,KAAK;QACzBC,SAAS,GAAGzB,kBAAAA,CAAO4B,qBAAqB,CAAC,GAAG,EAAE5B,kBAAAA,CAAO4B,qBAAqB,CAAC,EAAE,CAAC;IAChF;IACA,eAAe;QACb,GAAG7B,4BAAAA,CAAiByB,KAAK;QACzBC,SAAS,GAAGzB,kBAAAA,CAAO6B,gBAAgB,CAAC,GAAG,EAAE7B,kBAAAA,CAAO6B,gBAAgB,CAAC,EAAE,CAAC;IACtE;IACAC,UAAU;QACRvB,OAAOP,kBAAAA,CAAO+B,8BAA8B;QAC5C1B,iBAAiBL,kBAAAA,CAAOM,0BAA0B;QAClD0B,QAAQ;QACR,iBAAiB;YACfzB,OAAOP,kBAAAA,CAAO+B,8BAA8B;QAC9C;IACF;AACF;AAKO,yCAAyC,CAACG;IAC/C,MAAMC,YAAY/B;IAClB,MAAMgC,SAASd;IACf,oDAAoD;IACpDY,MAAM/B,IAAI,CAACkC,SAAS,OAAGvC,mBAAAA,EACrBI,yBAAyBC,IAAI,EAC7BgC,WACAC,MAAM,CAACF,MAAMI,IAAI,CAAC,EAClBJ,MAAMJ,QAAQ,IAAIM,OAAON,QAAQ,EACjCI,MAAM/B,IAAI,CAACkC,SAAS;IAEtB,OAAOH;AACT,EAAE"}

package/lib-commonjs/components/TagPickerList/useTagPickerListStyles.styles.js

@@ -52,7 +52,6 @@ const tagPickerListClassNames = {
     ]
 });
 const useTagPickerListStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
     // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(tagPickerListClassNames.root, styles.root, !state.open && styles.collapsed, state.root.className);

package/lib-commonjs/components/TagPickerList/useTagPickerListStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTagPickerListStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tagPickerListClassNames = {\n    root: 'fui-TagPickerList'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        boxShadow: `${tokens.shadow16}`,\n        borderRadius: tokens.borderRadiusMedium,\n        maxHeight: '80vh',\n        boxSizing: 'border-box'\n    },\n    collapsed: {\n        display: 'none'\n    }\n});\n/**\n * Apply styling to the TagPickerList slots based on the state\n */ export const useTagPickerListStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(tagPickerListClassNames.root, styles.root, !state.open && styles.collapsed, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","tokens","tagPickerListClassNames","root","useStyles","E5pizo","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bxyxcbc","B7ck84d","collapsed","mc9l5x","d","p","useTagPickerListStyles_unstable","state","styles","className","open"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,uBAAuB;;;mCAkBY;eAA/Be;;;uBApBwB,gBAAgB;AAElD,gCAAgC;IACnCd,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,SAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAUrB,CAAC;AAGS,yCAAyCE,KAAK,IAAG;IACxD,aAAa;IACb,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAc,KAAK,CAACf,IAAI,CAACiB,SAAS,OAAGpB,mBAAY,EAACE,uBAAuB,CAACC,IAAI,EAAEgB,MAAM,CAAChB,IAAI,EAAE,CAACe,KAAK,CAACG,IAAI,IAAIF,MAAM,CAACN,SAAS,EAAEK,KAAK,CAACf,IAAI,CAACiB,SAAS,CAAC;IACrI,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useTagPickerListStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tagPickerListClassNames = {\n    root: 'fui-TagPickerList'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        boxShadow: `${tokens.shadow16}`,\n        borderRadius: tokens.borderRadiusMedium,\n        maxHeight: '80vh',\n        boxSizing: 'border-box'\n    },\n    collapsed: {\n        display: 'none'\n    }\n});\n/**\n * Apply styling to the TagPickerList slots based on the state\n */ export const useTagPickerListStyles_unstable = (state)=>{\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(tagPickerListClassNames.root, styles.root, !state.open && styles.collapsed, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","tokens","tagPickerListClassNames","root","useStyles","E5pizo","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bxyxcbc","B7ck84d","collapsed","mc9l5x","d","p","useTagPickerListStyles_unstable","state","styles","className","open"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,uBAAuB;;;mCAkBY;eAA/Be;;;uBApBwB,gBAAgB;AAElD,gCAAgC;IACnCd,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,SAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAUrB,CAAC;AAGS,yCAAyCE,KAAK,IAAG;IACxD,MAAMC,MAAM,GAAGf,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAc,KAAK,CAACf,IAAI,CAACiB,SAAS,OAAGpB,mBAAY,EAACE,uBAAuB,CAACC,IAAI,EAAEgB,MAAM,CAAChB,IAAI,EAAE,CAACe,KAAK,CAACG,IAAI,IAAIF,MAAM,CAACN,SAAS,EAAEK,KAAK,CAACf,IAAI,CAACiB,SAAS,CAAC;IACrI,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/TagPickerList/useTagPickerListStyles.styles.raw.js

@@ -36,7 +36,6 @@ const tagPickerListClassNames = {
     }
 });
 const useTagPickerListStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
     // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(tagPickerListClassNames.root, styles.root, !state.open && styles.collapsed, state.root.className);

package/lib-commonjs/components/TagPickerList/useTagPickerListStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerList/useTagPickerListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerListSlots, TagPickerListState } from './TagPickerList.types';\n\nexport const tagPickerListClassNames: SlotClassNames<TagPickerListSlots> = {\n  root: 'fui-TagPickerList',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    boxShadow: `${tokens.shadow16}`,\n    borderRadius: tokens.borderRadiusMedium,\n    maxHeight: '80vh',\n    boxSizing: 'border-box',\n  },\n\n  collapsed: {\n    display: 'none',\n  },\n});\n\n/**\n * Apply styling to the TagPickerList slots based on the state\n */\nexport const useTagPickerListStyles_unstable = (state: TagPickerListState): TagPickerListState => {\n  'use no memo';\n\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    tagPickerListClassNames.root,\n    styles.root,\n    !state.open && styles.collapsed,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","tagPickerListClassNames","root","useStyles","boxShadow","shadow16","borderRadius","borderRadiusMedium","maxHeight","boxSizing","collapsed","display","useTagPickerListStyles_unstable","state","styles","className","open"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,uBAAAA;;;mCAuBAW;eAAAA;;;uBA5B4B,iBAAiB;4BACnC,wBAAwB;AAIxC,gCAAoE;IACzEV,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BI,MAAM;QACJE,WAAW,GAAGJ,kBAAAA,CAAOK,QAAQ,EAAE;QAC/BC,cAAcN,kBAAAA,CAAOO,kBAAkB;QACvCC,WAAW;QACXC,WAAW;IACb;IAEAC,WAAW;QACTC,SAAS;IACX;AACF;AAKO,wCAAwC,CAACE;IAC9C;IAEA,MAAMC,SAASX;IACf,oDAAoD;IACpDU,MAAMX,IAAI,CAACa,SAAS,OAAGhB,mBAAAA,EACrBE,wBAAwBC,IAAI,EAC5BY,OAAOZ,IAAI,EACX,CAACW,MAAMG,IAAI,IAAIF,OAAOJ,SAAS,EAC/BG,MAAMX,IAAI,CAACa,SAAS;IAEtB,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TagPickerList/useTagPickerListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerListSlots, TagPickerListState } from './TagPickerList.types';\n\nexport const tagPickerListClassNames: SlotClassNames<TagPickerListSlots> = {\n  root: 'fui-TagPickerList',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    boxShadow: `${tokens.shadow16}`,\n    borderRadius: tokens.borderRadiusMedium,\n    maxHeight: '80vh',\n    boxSizing: 'border-box',\n  },\n\n  collapsed: {\n    display: 'none',\n  },\n});\n\n/**\n * Apply styling to the TagPickerList slots based on the state\n */\nexport const useTagPickerListStyles_unstable = (state: TagPickerListState): TagPickerListState => {\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    tagPickerListClassNames.root,\n    styles.root,\n    !state.open && styles.collapsed,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","tagPickerListClassNames","root","useStyles","boxShadow","shadow16","borderRadius","borderRadiusMedium","maxHeight","boxSizing","collapsed","display","useTagPickerListStyles_unstable","state","styles","className","open"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,uBAAAA;;;mCAuBAW;eAAAA;;;uBA5B4B,iBAAiB;4BACnC,wBAAwB;AAIxC,gCAAoE;IACzEV,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BI,MAAM;QACJE,WAAW,GAAGJ,kBAAAA,CAAOK,QAAQ,EAAE;QAC/BC,cAAcN,kBAAAA,CAAOO,kBAAkB;QACvCC,WAAW;QACXC,WAAW;IACb;IAEAC,WAAW;QACTC,SAAS;IACX;AACF;AAKO,wCAAwC,CAACE;IAC9C,MAAMC,SAASX;IACf,oDAAoD;IACpDU,MAAMX,IAAI,CAACa,SAAS,OAAGhB,mBAAAA,EACrBE,wBAAwBC,IAAI,EAC5BY,OAAOZ,IAAI,EACX,CAACW,MAAMG,IAAI,IAAIF,OAAOJ,SAAS,EAC/BG,MAAMX,IAAI,CAACa,SAAS;IAEtB,OAAOF;AACT,EAAE"}

package/lib-commonjs/components/TagPickerOption/useTagPickerOptionStyles.styles.js

@@ -45,7 +45,6 @@ const useMediaBaseStyle = /*#__PURE__*/ (0, _react.__resetStyles)("rrip69g", nul
     ".rrip69g{grid-row-start:span 2;}"
 ]);
 const useTagPickerOptionStyles_unstable = (state)=>{
-    'use no memo';
     const rootBaseStyle = useRootBaseStyle();
     const rootStyles = useRootStyles();
     const secondaryContentBaseStyle = useSecondaryContentBaseStyle();

package/lib-commonjs/components/TagPickerOption/useTagPickerOptionStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTagPickerOptionStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { useOptionStyles_unstable } from '@fluentui/react-combobox';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const tagPickerOptionClassNames = {\n    root: 'fui-TagPickerOption',\n    media: 'fui-TagPickerOption__media',\n    secondaryContent: 'fui-TagPickerOption__secondaryContent'\n};\nconst useRootBaseStyle = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center'\n});\nconst useRootStyles = makeStyles({\n    secondaryContent: {\n        display: 'grid',\n        gridTemplateColumns: 'auto 1fr'\n    }\n});\nconst useSecondaryContentBaseStyle = makeResetStyles({\n    gridColumnStart: 2,\n    gridRowStart: 2,\n    ...typographyStyles.caption1\n});\nconst useMediaBaseStyle = makeResetStyles({\n    gridRowStart: 'span 2'\n});\n/**\n * Apply styling to the TagPickerOption slots based on the state\n */ export const useTagPickerOptionStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseStyle = useRootBaseStyle();\n    const rootStyles = useRootStyles();\n    const secondaryContentBaseStyle = useSecondaryContentBaseStyle();\n    const mediaBaseStyle = useMediaBaseStyle();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(tagPickerOptionClassNames.root, rootBaseStyle, state.secondaryContent && rootStyles.secondaryContent, state.root.className);\n    useOptionStyles_unstable({\n        ...state,\n        active: false,\n        disabled: false,\n        focusVisible: false,\n        checkIcon: undefined,\n        selected: false\n    });\n    if (state.media) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.media.className = mergeClasses(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);\n    }\n    if (state.secondaryContent) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.secondaryContent.className = mergeClasses(tagPickerOptionClassNames.secondaryContent, secondaryContentBaseStyle, state.secondaryContent.className);\n    }\n    return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","useOptionStyles_unstable","typographyStyles","tagPickerOptionClassNames","root","media","secondaryContent","useRootBaseStyle","useRootStyles","mc9l5x","Budl1dq","d","useSecondaryContentBaseStyle","useMediaBaseStyle","useTagPickerOptionStyles_unstable","state","rootBaseStyle","rootStyles","secondaryContentBaseStyle","mediaBaseStyle","className","active","disabled","focusVisible","checkIcon","undefined","selected"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,yBAAyB;;;qCAyBY;eAAjCW;;;uBA5ByC,gBAAgB;+BACjC,0BAA0B;AAE5D,kCAAkC;IACrCV,IAAI,EAAE,qBAAqB;IAC3BC,KAAK,EAAE,4BAA4B;IACnCC,gBAAgB,EAAE;AACtB,CAAC;AACD,MAAMC,gBAAgB,GAAA,WAAA,OAAGT,oBAAA,EAAA,WAAA,MAAA;IAAA;CAGxB,CAAC;AACF,MAAMU,aAAa,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAO,gBAAA,EAAA;QAAAG,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAKrB,CAAC;AACF,MAAMC,4BAA4B,GAAA,WAAA,OAAGd,oBAAA,EAAA,YAAA,MAAA;IAAA;CAIpC,CAAC;AACF,MAAMe,iBAAiB,GAAA,WAAA,OAAGf,oBAAA,EAAA,WAAA,MAAA;IAAA;CAEzB,CAAC;AAGS,2CAA2CiB,KAAK,IAAG;IAC1D,aAAa;IACb,MAAMC,aAAa,GAAGT,gBAAgB,CAAC,CAAC;IACxC,MAAMU,UAAU,GAAGT,aAAa,CAAC,CAAC;IAClC,MAAMU,yBAAyB,GAAGN,4BAA4B,CAAC,CAAC;IAChE,MAAMO,cAAc,GAAGN,iBAAiB,CAAC,CAAC;IAC1C,oDAAA;IACAE,KAAK,CAACX,IAAI,CAACgB,SAAS,GAAGpB,uBAAY,EAACG,yBAAyB,CAACC,IAAI,EAAEY,aAAa,EAAED,KAAK,CAACT,gBAAgB,IAAIW,UAAU,CAACX,gBAAgB,EAAES,KAAK,CAACX,IAAI,CAACgB,SAAS,CAAC;QAC/JnB,uCAAwB,EAAC;QACrB,GAAGc,KAAK;QACRM,MAAM,EAAE,KAAK;QACbC,QAAQ,EAAE,KAAK;QACfC,YAAY,EAAE,KAAK;QACnBC,SAAS,EAAEC,SAAS;QACpBC,QAAQ,EAAE;IACd,CAAC,CAAC;IACF,IAAIX,KAAK,CAACV,KAAK,EAAE;QACb,oDAAA;QACAU,KAAK,CAACV,KAAK,CAACe,SAAS,GAAGpB,uBAAY,EAACG,yBAAyB,CAACE,KAAK,EAAEc,cAAc,EAAEJ,KAAK,CAACV,KAAK,CAACe,SAAS,CAAC;IAChH;IACA,IAAIL,KAAK,CAACT,gBAAgB,EAAE;QACxB,oDAAA;QACAS,KAAK,CAACT,gBAAgB,CAACc,SAAS,OAAGpB,mBAAY,EAACG,yBAAyB,CAACG,gBAAgB,EAAEY,yBAAyB,EAAEH,KAAK,CAACT,gBAAgB,CAACc,SAAS,CAAC;IAC5J;IACA,OAAOL,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useTagPickerOptionStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { useOptionStyles_unstable } from '@fluentui/react-combobox';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const tagPickerOptionClassNames = {\n    root: 'fui-TagPickerOption',\n    media: 'fui-TagPickerOption__media',\n    secondaryContent: 'fui-TagPickerOption__secondaryContent'\n};\nconst useRootBaseStyle = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center'\n});\nconst useRootStyles = makeStyles({\n    secondaryContent: {\n        display: 'grid',\n        gridTemplateColumns: 'auto 1fr'\n    }\n});\nconst useSecondaryContentBaseStyle = makeResetStyles({\n    gridColumnStart: 2,\n    gridRowStart: 2,\n    ...typographyStyles.caption1\n});\nconst useMediaBaseStyle = makeResetStyles({\n    gridRowStart: 'span 2'\n});\n/**\n * Apply styling to the TagPickerOption slots based on the state\n */ export const useTagPickerOptionStyles_unstable = (state)=>{\n    const rootBaseStyle = useRootBaseStyle();\n    const rootStyles = useRootStyles();\n    const secondaryContentBaseStyle = useSecondaryContentBaseStyle();\n    const mediaBaseStyle = useMediaBaseStyle();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(tagPickerOptionClassNames.root, rootBaseStyle, state.secondaryContent && rootStyles.secondaryContent, state.root.className);\n    useOptionStyles_unstable({\n        ...state,\n        active: false,\n        disabled: false,\n        focusVisible: false,\n        checkIcon: undefined,\n        selected: false\n    });\n    if (state.media) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.media.className = mergeClasses(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);\n    }\n    if (state.secondaryContent) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.secondaryContent.className = mergeClasses(tagPickerOptionClassNames.secondaryContent, secondaryContentBaseStyle, state.secondaryContent.className);\n    }\n    return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","useOptionStyles_unstable","typographyStyles","tagPickerOptionClassNames","root","media","secondaryContent","useRootBaseStyle","useRootStyles","mc9l5x","Budl1dq","d","useSecondaryContentBaseStyle","useMediaBaseStyle","useTagPickerOptionStyles_unstable","state","rootBaseStyle","rootStyles","secondaryContentBaseStyle","mediaBaseStyle","className","active","disabled","focusVisible","checkIcon","undefined","selected"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,yBAAyB;;;qCAyBY;eAAjCW;;;uBA5ByC,gBAAgB;+BACjC,0BAA0B;AAE5D,kCAAkC;IACrCV,IAAI,EAAE,qBAAqB;IAC3BC,KAAK,EAAE,4BAA4B;IACnCC,gBAAgB,EAAE;AACtB,CAAC;AACD,MAAMC,gBAAgB,GAAA,WAAA,OAAGT,oBAAA,EAAA,WAAA,MAAA;IAAA;CAGxB,CAAC;AACF,MAAMU,aAAa,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAO,gBAAA,EAAA;QAAAG,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAKrB,CAAC;AACF,MAAMC,4BAA4B,GAAA,WAAA,OAAGd,oBAAA,EAAA,YAAA,MAAA;IAAA;CAIpC,CAAC;AACF,MAAMe,iBAAiB,GAAA,WAAA,OAAGf,oBAAA,EAAA,WAAA,MAAA;IAAA;CAEzB,CAAC;AAGS,2CAA2CiB,KAAK,IAAG;IAC1D,MAAMC,aAAa,GAAGT,gBAAgB,CAAC,CAAC;IACxC,MAAMU,UAAU,GAAGT,aAAa,CAAC,CAAC;IAClC,MAAMU,yBAAyB,GAAGN,4BAA4B,CAAC,CAAC;IAChE,MAAMO,cAAc,GAAGN,iBAAiB,CAAC,CAAC;IAC1C,oDAAA;IACAE,KAAK,CAACX,IAAI,CAACgB,SAAS,GAAGpB,uBAAY,EAACG,yBAAyB,CAACC,IAAI,EAAEY,aAAa,EAAED,KAAK,CAACT,gBAAgB,IAAIW,UAAU,CAACX,gBAAgB,EAAES,KAAK,CAACX,IAAI,CAACgB,SAAS,CAAC;QAC/JnB,uCAAwB,EAAC;QACrB,GAAGc,KAAK;QACRM,MAAM,EAAE,KAAK;QACbC,QAAQ,EAAE,KAAK;QACfC,YAAY,EAAE,KAAK;QACnBC,SAAS,EAAEC,SAAS;QACpBC,QAAQ,EAAE;IACd,CAAC,CAAC;IACF,IAAIX,KAAK,CAACV,KAAK,EAAE;QACb,oDAAA;QACAU,KAAK,CAACV,KAAK,CAACe,SAAS,OAAGpB,mBAAY,EAACG,yBAAyB,CAACE,KAAK,EAAEc,cAAc,EAAEJ,KAAK,CAACV,KAAK,CAACe,SAAS,CAAC;IAChH;IACA,IAAIL,KAAK,CAACT,gBAAgB,EAAE;QACxB,oDAAA;QACAS,KAAK,CAACT,gBAAgB,CAACc,SAAS,OAAGpB,mBAAY,EAACG,yBAAyB,CAACG,gBAAgB,EAAEY,yBAAyB,EAAEH,KAAK,CAACT,gBAAgB,CAACc,SAAS,CAAC;IAC5J;IACA,OAAOL,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/TagPickerOption/useTagPickerOptionStyles.styles.raw.js

@@ -44,7 +44,6 @@ const useMediaBaseStyle = (0, _react.makeResetStyles)({
     gridRowStart: 'span 2'
 });
 const useTagPickerOptionStyles_unstable = (state)=>{
-    'use no memo';
     const rootBaseStyle = useRootBaseStyle();
     const rootStyles = useRootStyles();
     const secondaryContentBaseStyle = useSecondaryContentBaseStyle();

package/lib-commonjs/components/TagPickerOption/useTagPickerOptionStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerOption/useTagPickerOptionStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerOptionSlots, TagPickerOptionState } from './TagPickerOption.types';\nimport { useOptionStyles_unstable } from '@fluentui/react-combobox';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const tagPickerOptionClassNames: SlotClassNames<TagPickerOptionSlots> = {\n  root: 'fui-TagPickerOption',\n  media: 'fui-TagPickerOption__media',\n  secondaryContent: 'fui-TagPickerOption__secondaryContent',\n};\n\nconst useRootBaseStyle = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n});\n\nconst useRootStyles = makeStyles({\n  secondaryContent: {\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr',\n  },\n});\n\nconst useSecondaryContentBaseStyle = makeResetStyles({\n  gridColumnStart: 2,\n  gridRowStart: 2,\n  ...typographyStyles.caption1,\n});\n\nconst useMediaBaseStyle = makeResetStyles({\n  gridRowStart: 'span 2',\n});\n\n/**\n * Apply styling to the TagPickerOption slots based on the state\n */\nexport const useTagPickerOptionStyles_unstable = (state: TagPickerOptionState): TagPickerOptionState => {\n  'use no memo';\n\n  const rootBaseStyle = useRootBaseStyle();\n  const rootStyles = useRootStyles();\n  const secondaryContentBaseStyle = useSecondaryContentBaseStyle();\n  const mediaBaseStyle = useMediaBaseStyle();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    tagPickerOptionClassNames.root,\n    rootBaseStyle,\n    state.secondaryContent && rootStyles.secondaryContent,\n    state.root.className,\n  );\n  useOptionStyles_unstable({\n    ...state,\n    active: false,\n    disabled: false,\n    focusVisible: false,\n    checkIcon: undefined,\n    selected: false,\n  });\n  if (state.media) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.media.className = mergeClasses(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);\n  }\n\n  if (state.secondaryContent) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.secondaryContent.className = mergeClasses(\n      tagPickerOptionClassNames.secondaryContent,\n      secondaryContentBaseStyle,\n      state.secondaryContent.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","useOptionStyles_unstable","typographyStyles","tagPickerOptionClassNames","root","media","secondaryContent","useRootBaseStyle","display","alignItems","useRootStyles","gridTemplateColumns","useSecondaryContentBaseStyle","gridColumnStart","gridRowStart","caption1","useMediaBaseStyle","useTagPickerOptionStyles_unstable","state","rootBaseStyle","rootStyles","secondaryContentBaseStyle","mediaBaseStyle","className","active","disabled","focusVisible","checkIcon","undefined","selected"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,yBAAAA;;;qCA+BAc;eAAAA;;;uBArC6C,iBAAiB;+BAGlC,2BAA2B;4BACnC,wBAAwB;AAElD,kCAAwE;IAC7Eb,MAAM;IACNC,OAAO;IACPC,kBAAkB;AACpB,EAAE;AAEF,MAAMC,uBAAmBT,sBAAAA,EAAgB;IACvCU,SAAS;IACTC,YAAY;AACd;AAEA,MAAMC,oBAAgBX,iBAAAA,EAAW;IAC/BO,kBAAkB;QAChBE,SAAS;QACTG,qBAAqB;IACvB;AACF;AAEA,MAAMC,mCAA+Bd,sBAAAA,EAAgB;IACnDe,iBAAiB;IACjBC,cAAc;IACd,GAAGZ,4BAAAA,CAAiBa,QAAQ;AAC9B;AAEA,MAAMC,wBAAoBlB,sBAAAA,EAAgB;IACxCgB,cAAc;AAChB;AAKO,0CAA0C,CAACI;IAChD;IAEA,MAAMC,gBAAgBZ;IACtB,MAAMa,aAAaV;IACnB,MAAMW,4BAA4BT;IAClC,MAAMU,iBAAiBN;IAEvB,oDAAoD;IACpDE,MAAMd,IAAI,CAACmB,SAAS,OAAGvB,mBAAAA,EACrBG,0BAA0BC,IAAI,EAC9Be,eACAD,MAAMZ,gBAAgB,IAAIc,WAAWd,gBAAgB,EACrDY,MAAMd,IAAI,CAACmB,SAAS;QAEtBtB,uCAAAA,EAAyB;QACvB,GAAGiB,KAAK;QACRM,QAAQ;QACRC,UAAU;QACVC,cAAc;QACdC,WAAWC;QACXC,UAAU;IACZ;IACA,IAAIX,MAAMb,KAAK,EAAE;QACf,oDAAoD;QACpDa,MAAMb,KAAK,CAACkB,SAAS,GAAGvB,uBAAAA,EAAaG,0BAA0BE,KAAK,EAAEiB,gBAAgBJ,MAAMb,KAAK,CAACkB,SAAS;IAC7G;IAEA,IAAIL,MAAMZ,gBAAgB,EAAE;QAC1B,oDAAoD;QACpDY,MAAMZ,gBAAgB,CAACiB,SAAS,OAAGvB,mBAAAA,EACjCG,0BAA0BG,gBAAgB,EAC1Ce,2BACAH,MAAMZ,gBAAgB,CAACiB,SAAS;IAEpC;IAEA,OAAOL;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TagPickerOption/useTagPickerOptionStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerOptionSlots, TagPickerOptionState } from './TagPickerOption.types';\nimport { useOptionStyles_unstable } from '@fluentui/react-combobox';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const tagPickerOptionClassNames: SlotClassNames<TagPickerOptionSlots> = {\n  root: 'fui-TagPickerOption',\n  media: 'fui-TagPickerOption__media',\n  secondaryContent: 'fui-TagPickerOption__secondaryContent',\n};\n\nconst useRootBaseStyle = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n});\n\nconst useRootStyles = makeStyles({\n  secondaryContent: {\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr',\n  },\n});\n\nconst useSecondaryContentBaseStyle = makeResetStyles({\n  gridColumnStart: 2,\n  gridRowStart: 2,\n  ...typographyStyles.caption1,\n});\n\nconst useMediaBaseStyle = makeResetStyles({\n  gridRowStart: 'span 2',\n});\n\n/**\n * Apply styling to the TagPickerOption slots based on the state\n */\nexport const useTagPickerOptionStyles_unstable = (state: TagPickerOptionState): TagPickerOptionState => {\n  const rootBaseStyle = useRootBaseStyle();\n  const rootStyles = useRootStyles();\n  const secondaryContentBaseStyle = useSecondaryContentBaseStyle();\n  const mediaBaseStyle = useMediaBaseStyle();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    tagPickerOptionClassNames.root,\n    rootBaseStyle,\n    state.secondaryContent && rootStyles.secondaryContent,\n    state.root.className,\n  );\n  useOptionStyles_unstable({\n    ...state,\n    active: false,\n    disabled: false,\n    focusVisible: false,\n    checkIcon: undefined,\n    selected: false,\n  });\n  if (state.media) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.media.className = mergeClasses(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);\n  }\n\n  if (state.secondaryContent) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.secondaryContent.className = mergeClasses(\n      tagPickerOptionClassNames.secondaryContent,\n      secondaryContentBaseStyle,\n      state.secondaryContent.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","useOptionStyles_unstable","typographyStyles","tagPickerOptionClassNames","root","media","secondaryContent","useRootBaseStyle","display","alignItems","useRootStyles","gridTemplateColumns","useSecondaryContentBaseStyle","gridColumnStart","gridRowStart","caption1","useMediaBaseStyle","useTagPickerOptionStyles_unstable","state","rootBaseStyle","rootStyles","secondaryContentBaseStyle","mediaBaseStyle","className","active","disabled","focusVisible","checkIcon","undefined","selected"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,yBAAAA;;;qCA+BAc;eAAAA;;;uBArC6C,iBAAiB;+BAGlC,2BAA2B;4BACnC,wBAAwB;AAElD,kCAAwE;IAC7Eb,MAAM;IACNC,OAAO;IACPC,kBAAkB;AACpB,EAAE;AAEF,MAAMC,uBAAmBT,sBAAAA,EAAgB;IACvCU,SAAS;IACTC,YAAY;AACd;AAEA,MAAMC,oBAAgBX,iBAAAA,EAAW;IAC/BO,kBAAkB;QAChBE,SAAS;QACTG,qBAAqB;IACvB;AACF;AAEA,MAAMC,mCAA+Bd,sBAAAA,EAAgB;IACnDe,iBAAiB;IACjBC,cAAc;IACd,GAAGZ,4BAAAA,CAAiBa,QAAQ;AAC9B;AAEA,MAAMC,wBAAoBlB,sBAAAA,EAAgB;IACxCgB,cAAc;AAChB;AAKO,0CAA0C,CAACI;IAChD,MAAMC,gBAAgBZ;IACtB,MAAMa,aAAaV;IACnB,MAAMW,4BAA4BT;IAClC,MAAMU,iBAAiBN;IAEvB,oDAAoD;IACpDE,MAAMd,IAAI,CAACmB,SAAS,OAAGvB,mBAAAA,EACrBG,0BAA0BC,IAAI,EAC9Be,eACAD,MAAMZ,gBAAgB,IAAIc,WAAWd,gBAAgB,EACrDY,MAAMd,IAAI,CAACmB,SAAS;QAEtBtB,uCAAAA,EAAyB;QACvB,GAAGiB,KAAK;QACRM,QAAQ;QACRC,UAAU;QACVC,cAAc;QACdC,WAAWC;QACXC,UAAU;IACZ;IACA,IAAIX,MAAMb,KAAK,EAAE;QACf,oDAAoD;QACpDa,MAAMb,KAAK,CAACkB,SAAS,OAAGvB,mBAAAA,EAAaG,0BAA0BE,KAAK,EAAEiB,gBAAgBJ,MAAMb,KAAK,CAACkB,SAAS;IAC7G;IAEA,IAAIL,MAAMZ,gBAAgB,EAAE;QAC1B,oDAAoD;QACpDY,MAAMZ,gBAAgB,CAACiB,SAAS,OAAGvB,mBAAAA,EACjCG,0BAA0BG,gBAAgB,EAC1Ce,2BACAH,MAAMZ,gBAAgB,CAACiB,SAAS;IAEpC;IAEA,OAAOL;AACT,EAAE"}

package/lib-commonjs/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.js

@@ -24,7 +24,6 @@ const tagPickerOptionGroupClassNames = {
     label: 'fui-TagPickerOptionGroup__label'
 };
 const useTagPickerOptionGroupStyles = (state)=>{
-    'use no memo';
     (0, _reactcombobox.useOptionGroupStyles_unstable)(state);
     // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(tagPickerOptionGroupClassNames.root, state.root.className);

package/lib-commonjs/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTagPickerOptionGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses } from '@griffel/react';\nimport { useOptionGroupStyles_unstable } from '@fluentui/react-combobox';\nexport const tagPickerOptionGroupClassNames = {\n    root: 'fui-TagPickerOptionGroup',\n    label: 'fui-TagPickerOptionGroup__label'\n};\n/**\n * Apply styling to the TagPickerOptionGroup slots based on the state\n */ export const useTagPickerOptionGroupStyles = (state)=>{\n    'use no memo';\n    useOptionGroupStyles_unstable(state);\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(tagPickerOptionGroupClassNames.root, state.root.className);\n    if (state.label) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.label.className = mergeClasses(tagPickerOptionGroupClassNames.label, state.label.className);\n    }\n    return state;\n};\n"],"names":["mergeClasses","useOptionGroupStyles_unstable","tagPickerOptionGroupClassNames","root","label","useTagPickerOptionGroupStyles","state","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCE,8BAA8B;;;iCAMG;eAA7BG;;;uBARY,gBAAgB;+BACC,0BAA0B;AACjE,uCAAuC;IAC1CF,IAAI,EAAE,0BAA0B;IAChCC,KAAK,EAAE;AACX,CAAC;AAGU,uCAAuCE,KAAK,IAAG;IACtD,aAAa;QACbL,4CAA6B,EAACK,KAAK,CAAC;IACpC,oDAAA;IACAA,KAAK,CAACH,IAAI,CAACI,SAAS,OAAGP,mBAAY,EAACE,8BAA8B,CAACC,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACI,SAAS,CAAC;IAC9F,IAAID,KAAK,CAACF,KAAK,EAAE;QACb,oDAAA;QACAE,KAAK,CAACF,KAAK,CAACG,SAAS,OAAGP,mBAAY,EAACE,8BAA8B,CAACE,KAAK,EAAEE,KAAK,CAACF,KAAK,CAACG,SAAS,CAAC;IACrG;IACA,OAAOD,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useTagPickerOptionGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses } from '@griffel/react';\nimport { useOptionGroupStyles_unstable } from '@fluentui/react-combobox';\nexport const tagPickerOptionGroupClassNames = {\n    root: 'fui-TagPickerOptionGroup',\n    label: 'fui-TagPickerOptionGroup__label'\n};\n/**\n * Apply styling to the TagPickerOptionGroup slots based on the state\n */ export const useTagPickerOptionGroupStyles = (state)=>{\n    useOptionGroupStyles_unstable(state);\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(tagPickerOptionGroupClassNames.root, state.root.className);\n    if (state.label) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.label.className = mergeClasses(tagPickerOptionGroupClassNames.label, state.label.className);\n    }\n    return state;\n};\n"],"names":["mergeClasses","useOptionGroupStyles_unstable","tagPickerOptionGroupClassNames","root","label","useTagPickerOptionGroupStyles","state","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCE,8BAA8B;;;iCAMG;eAA7BG;;;uBARY,gBAAgB;+BACC,0BAA0B;AACjE,uCAAuC;IAC1CF,IAAI,EAAE,0BAA0B;IAChCC,KAAK,EAAE;AACX,CAAC;AAGU,uCAAuCE,KAAK,IAAG;QACtDL,4CAA6B,EAACK,KAAK,CAAC;IACpC,oDAAA;IACAA,KAAK,CAACH,IAAI,CAACI,SAAS,OAAGP,mBAAY,EAACE,8BAA8B,CAACC,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACI,SAAS,CAAC;IAC9F,IAAID,KAAK,CAACF,KAAK,EAAE;QACb,oDAAA;QACAE,KAAK,CAACF,KAAK,CAACG,SAAS,OAAGP,mBAAY,EAACE,8BAA8B,CAACE,KAAK,EAAEE,KAAK,CAACF,KAAK,CAACG,SAAS,CAAC;IACrG;IACA,OAAOD,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.raw.js

@@ -24,7 +24,6 @@ const tagPickerOptionGroupClassNames = {
     label: 'fui-TagPickerOptionGroup__label'
 };
 const useTagPickerOptionGroupStyles = (state)=>{
-    'use no memo';
     (0, _reactcombobox.useOptionGroupStyles_unstable)(state);
     // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(tagPickerOptionGroupClassNames.root, state.root.className);

package/lib-commonjs/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerOptionGroupSlots, TagPickerOptionGroupState } from './TagPickerOptionGroup.types';\nimport { useOptionGroupStyles_unstable } from '@fluentui/react-combobox';\n\nexport const tagPickerOptionGroupClassNames: SlotClassNames<TagPickerOptionGroupSlots> = {\n  root: 'fui-TagPickerOptionGroup',\n  label: 'fui-TagPickerOptionGroup__label',\n};\n\n/**\n * Apply styling to the TagPickerOptionGroup slots based on the state\n */\nexport const useTagPickerOptionGroupStyles = (state: TagPickerOptionGroupState): TagPickerOptionGroupState => {\n  'use no memo';\n\n  useOptionGroupStyles_unstable(state);\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(tagPickerOptionGroupClassNames.root, state.root.className);\n\n  if (state.label) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.label.className = mergeClasses(tagPickerOptionGroupClassNames.label, state.label.className);\n  }\n\n  return state;\n};\n"],"names":["mergeClasses","useOptionGroupStyles_unstable","tagPickerOptionGroupClassNames","root","label","useTagPickerOptionGroupStyles","state","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaE,8BAAAA;;;iCAQAG;eAAAA;;;uBAbgB,iBAAiB;+BAGA,2BAA2B;AAElE,uCAAkF;IACvFF,MAAM;IACNC,OAAO;AACT,EAAE;AAKK,sCAAsC,CAACE;IAC5C;QAEAL,4CAAAA,EAA8BK;IAC9B,oDAAoD;IACpDA,MAAMH,IAAI,CAACI,SAAS,OAAGP,mBAAAA,EAAaE,+BAA+BC,IAAI,EAAEG,MAAMH,IAAI,CAACI,SAAS;IAE7F,IAAID,MAAMF,KAAK,EAAE;QACf,oDAAoD;QACpDE,MAAMF,KAAK,CAACG,SAAS,OAAGP,mBAAAA,EAAaE,+BAA+BE,KAAK,EAAEE,MAAMF,KAAK,CAACG,SAAS;IAClG;IAEA,OAAOD;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerOptionGroupSlots, TagPickerOptionGroupState } from './TagPickerOptionGroup.types';\nimport { useOptionGroupStyles_unstable } from '@fluentui/react-combobox';\n\nexport const tagPickerOptionGroupClassNames: SlotClassNames<TagPickerOptionGroupSlots> = {\n  root: 'fui-TagPickerOptionGroup',\n  label: 'fui-TagPickerOptionGroup__label',\n};\n\n/**\n * Apply styling to the TagPickerOptionGroup slots based on the state\n */\nexport const useTagPickerOptionGroupStyles = (state: TagPickerOptionGroupState): TagPickerOptionGroupState => {\n  useOptionGroupStyles_unstable(state);\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(tagPickerOptionGroupClassNames.root, state.root.className);\n\n  if (state.label) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.label.className = mergeClasses(tagPickerOptionGroupClassNames.label, state.label.className);\n  }\n\n  return state;\n};\n"],"names":["mergeClasses","useOptionGroupStyles_unstable","tagPickerOptionGroupClassNames","root","label","useTagPickerOptionGroupStyles","state","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaE,8BAAAA;;;iCAQAG;eAAAA;;;uBAbgB,iBAAiB;+BAGA,2BAA2B;AAElE,uCAAkF;IACvFF,MAAM;IACNC,OAAO;AACT,EAAE;AAKK,sCAAsC,CAACE;QAC5CL,4CAAAA,EAA8BK;IAC9B,oDAAoD;IACpDA,MAAMH,IAAI,CAACI,SAAS,OAAGP,mBAAAA,EAAaE,+BAA+BC,IAAI,EAAEG,MAAMH,IAAI,CAACI,SAAS;IAE7F,IAAID,MAAMF,KAAK,EAAE;QACf,oDAAoD;QACpDE,MAAMF,KAAK,CAACG,SAAS,OAAGP,mBAAAA,EAAaE,+BAA+BE,KAAK,EAAEE,MAAMF,KAAK,CAACG,SAAS;IAClG;IAEA,OAAOD;AACT,EAAE"}