@fluentui/react-tag-picker 9.6.6 → 9.7.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TagPickerOption/useTagPickerOptionStyles.styles.ts"],"sourcesContent":["import { 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  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    state.media.className = mergeClasses(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);\n  }\n\n  if (state.secondaryContent) {\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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,wBAAwB,QAAQ,2BAA2B;AACpE,SAASC,gBAAgB,QAAQ,wBAAwB;AAEzD,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;IACNC,OAAO;IACPC,kBAAkB;AACpB,EAAE;AAEF,MAAMC,mBAAmBT,gBAAgB;IACvCU,SAAS;IACTC,YAAY;AACd;AAEA,MAAMC,gBAAgBX,WAAW;IAC/BO,kBAAkB;QAChBE,SAAS;QACTG,qBAAqB;IACvB;AACF;AAEA,MAAMC,+BAA+Bd,gBAAgB;IACnDe,iBAAiB;IACjBC,cAAc;IACd,GAAGZ,iBAAiBa,QAAQ;AAC9B;AAEA,MAAMC,oBAAoBlB,gBAAgB;IACxCgB,cAAc;AAChB;AAEA;;CAEC,GACD,OAAO,MAAMG,oCAAoC,CAACC;IAChD;IAEA,MAAMC,gBAAgBZ;IACtB,MAAMa,aAAaV;IACnB,MAAMW,4BAA4BT;IAClC,MAAMU,iBAAiBN;IAEvBE,MAAMd,IAAI,CAACmB,SAAS,GAAGvB,aACrBG,0BAA0BC,IAAI,EAC9Be,eACAD,MAAMZ,gBAAgB,IAAIc,WAAWd,gBAAgB,EACrDY,MAAMd,IAAI,CAACmB,SAAS;IAEtBtB,yBAAyB;QACvB,GAAGiB,KAAK;QACRM,QAAQ;QACRC,UAAU;QACVC,cAAc;QACdC,WAAWC;QACXC,UAAU;IACZ;IACA,IAAIX,MAAMb,KAAK,EAAE;QACfa,MAAMb,KAAK,CAACkB,SAAS,GAAGvB,aAAaG,0BAA0BE,KAAK,EAAEiB,gBAAgBJ,MAAMb,KAAK,CAACkB,SAAS;IAC7G;IAEA,IAAIL,MAAMZ,gBAAgB,EAAE;QAC1BY,MAAMZ,gBAAgB,CAACiB,SAAS,GAAGvB,aACjCG,0BAA0BG,gBAAgB,EAC1Ce,2BACAH,MAAMZ,gBAAgB,CAACiB,SAAS;IAEpC;IAEA,OAAOL;AACT,EAAE"}

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

@@ -0,0 +1,17 @@
+import { mergeClasses } from '@griffel/react';
+import { useOptionGroupStyles_unstable } from '@fluentui/react-combobox';
+export const tagPickerOptionGroupClassNames = {
+    root: 'fui-TagPickerOptionGroup',
+    label: 'fui-TagPickerOptionGroup__label'
+};
+/**
+ * Apply styling to the TagPickerOptionGroup slots based on the state
+ */ export const useTagPickerOptionGroupStyles = (state)=>{
+    'use no memo';
+    useOptionGroupStyles_unstable(state);
+    state.root.className = mergeClasses(tagPickerOptionGroupClassNames.root, state.root.className);
+    if (state.label) {
+        state.label.className = mergeClasses(tagPickerOptionGroupClassNames.label, state.label.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.ts"],"sourcesContent":["import { 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  state.root.className = mergeClasses(tagPickerOptionGroupClassNames.root, state.root.className);\n\n  if (state.label) {\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"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,SAASC,6BAA6B,QAAQ,2BAA2B;AAEzE,OAAO,MAAMC,iCAA4E;IACvFC,MAAM;IACNC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEAL,8BAA8BK;IAC9BA,MAAMH,IAAI,CAACI,SAAS,GAAGP,aAAaE,+BAA+BC,IAAI,EAAEG,MAAMH,IAAI,CAACI,SAAS;IAE7F,IAAID,MAAMF,KAAK,EAAE;QACfE,MAAMF,KAAK,CAACG,SAAS,GAAGP,aAAaE,+BAA+BE,KAAK,EAAEE,MAAMF,KAAK,CAACG,SAAS;IAClG;IAEA,OAAOD;AACT,EAAE"}

package/lib-commonjs/components/TagPickerButton/useTagPickerButtonStyles.styles.raw.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    tagPickerButtonClassNames: function() {
+        return tagPickerButtonClassNames;
+    },
+    useTagPickerButtonStyles_unstable: function() {
+        return useTagPickerButtonStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const tagPickerButtonClassNames = {
+    root: 'fui-TagPickerButton'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    button: {
+        alignItems: 'center',
+        minHeight: '32px',
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        border: 'none',
+        boxSizing: 'border-box',
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        columnGap: _reacttheme.tokens.spacingHorizontalXXS,
+        cursor: 'pointer',
+        fontFamily: _reacttheme.tokens.fontFamilyBase,
+        textAlign: 'left',
+        flexGrow: 1,
+        '&:focus': {
+            outlineStyle: 'none'
+        }
+    },
+    placeholder: {
+        color: _reacttheme.tokens.colorNeutralForeground4
+    },
+    // size variants
+    medium: {
+        ..._reacttheme.typographyStyles.caption1,
+        padding: `3px ${_reacttheme.tokens.spacingHorizontalSNudge} 3px ${`calc(${_reacttheme.tokens.spacingHorizontalSNudge} + ${_reacttheme.tokens.spacingHorizontalXXS})`}`
+    },
+    large: {
+        ..._reacttheme.typographyStyles.body1,
+        padding: `5px ${_reacttheme.tokens.spacingHorizontalMNudge} 5px ${`calc(${_reacttheme.tokens.spacingHorizontalMNudge} + ${_reacttheme.tokens.spacingHorizontalXXS})`}`
+    },
+    'extra-large': {
+        columnGap: _reacttheme.tokens.spacingHorizontalSNudge,
+        ..._reacttheme.typographyStyles.body2,
+        padding: `7px ${_reacttheme.tokens.spacingHorizontalM} 7px ${`calc(${_reacttheme.tokens.spacingHorizontalM} + ${_reacttheme.tokens.spacingHorizontalSNudge})`}`
+    },
+    // appearance variants
+    outline: {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke1}`,
+        borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessible
+    },
+    outlineInteractive: {
+        '&:hover': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Hover),
+            borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessible
+        },
+        '&:active': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Pressed),
+            borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessible
+        }
+    },
+    underline: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        borderBottom: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStrokeAccessible}`,
+        borderRadius: '0'
+    },
+    'filled-lighter': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        border: `${_reacttheme.tokens.strokeWidthThin} solid transparent`
+    },
+    'filled-darker': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground3,
+        border: `${_reacttheme.tokens.strokeWidthThin} solid transparent`
+    },
+    invalid: {
+        ':not(:focus-within),:hover:not(:focus-within)': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder2)
+        }
+    },
+    invalidUnderline: {
+        ':not(:focus-within),:hover:not(:focus-within)': {
+            borderBottomColor: _reacttheme.tokens.colorPaletteRedBorder2
+        }
+    },
+    disabled: {
+        cursor: 'not-allowed',
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
+        '@media (forced-colors: active)': {
+            ..._react.shorthands.borderColor('GrayText')
+        }
+    },
+    disabledText: {
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        cursor: 'not-allowed'
+    },
+    hidden: {
+        display: 'none'
+    },
+    visuallyHidden: {
+        clip: 'rect(0px, 0px, 0px, 0px)',
+        height: '1px',
+        margin: '-1px',
+        overflow: 'hidden',
+        padding: '0px',
+        width: '1px',
+        position: 'absolute'
+    }
+});
+const useTagPickerButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(tagPickerButtonClassNames.root, styles.button, styles[state.size], state.hasSelectedOption && styles.visuallyHidden, state.root.className);
+    return state;
+};

package/lib-commonjs/components/TagPickerButton/useTagPickerButtonStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TagPickerButton/useTagPickerButtonStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerButtonSlots, TagPickerButtonState } from './TagPickerButton.types';\n\nexport const tagPickerButtonClassNames: SlotClassNames<TagPickerButtonSlots> = {\n  root: 'fui-TagPickerButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  button: {\n    alignItems: 'center',\n    minHeight: '32px',\n    backgroundColor: tokens.colorTransparentBackground,\n    border: 'none',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    columnGap: tokens.spacingHorizontalXXS,\n    cursor: 'pointer',\n    fontFamily: tokens.fontFamilyBase,\n    textAlign: 'left',\n    flexGrow: 1,\n\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n  },\n\n  placeholder: {\n    color: tokens.colorNeutralForeground4,\n  },\n\n  // size variants\n  medium: {\n    ...typographyStyles.caption1,\n    padding: `3px ${\n      tokens.spacingHorizontalSNudge\n    } 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  large: {\n    ...typographyStyles.body1,\n    padding: `5px ${\n      tokens.spacingHorizontalMNudge\n    } 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  'extra-large': {\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...typographyStyles.body2,\n    padding: `7px ${\n      tokens.spacingHorizontalM\n    } 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`,\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\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 transparent`,\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    border: `${tokens.strokeWidthThin} solid transparent`,\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  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  disabledText: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n  },\n\n  hidden: {\n    display: 'none',\n  },\n  visuallyHidden: {\n    clip: 'rect(0px, 0px, 0px, 0px)',\n    height: '1px',\n    margin: '-1px',\n    overflow: 'hidden',\n    padding: '0px',\n    width: '1px',\n    position: 'absolute',\n  },\n});\n\n/**\n * Apply styling to the PickerButton slots based on the state\n */\nexport const useTagPickerButtonStyles_unstable = (state: TagPickerButtonState): TagPickerButtonState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    tagPickerButtonClassNames.root,\n    styles.button,\n    styles[state.size],\n    state.hasSelectedOption && styles.visuallyHidden,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["tagPickerButtonClassNames","useTagPickerButtonStyles_unstable","root","useStyles","makeStyles","button","alignItems","minHeight","backgroundColor","tokens","colorTransparentBackground","border","boxSizing","color","colorNeutralForeground1","columnGap","spacingHorizontalXXS","cursor","fontFamily","fontFamilyBase","textAlign","flexGrow","outlineStyle","placeholder","colorNeutralForeground4","medium","typographyStyles","caption1","padding","spacingHorizontalSNudge","large","body1","spacingHorizontalMNudge","body2","spacingHorizontalM","outline","colorNeutralBackground1","strokeWidthThin","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","outlineInteractive","shorthands","borderColor","colorNeutralStroke1Hover","colorNeutralStroke1Pressed","underline","borderBottom","borderRadius","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","colorNeutralStrokeDisabled","disabledText","colorNeutralForegroundDisabled","hidden","display","visuallyHidden","clip","height","margin","overflow","width","position","state","styles","className","mergeClasses","size","hasSelectedOption"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -0,0 +1,245 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    iconSizes: function() {
+        return iconSizes;
+    },
+    tagPickerControlAsideWidthToken: function() {
+        return tagPickerControlAsideWidthToken;
+    },
+    tagPickerControlClassNames: function() {
+        return tagPickerControlClassNames;
+    },
+    useTagPickerControlStyles_unstable: function() {
+        return useTagPickerControlStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const tagPickerControlClassNames = {
+    root: 'fui-TagPickerControl',
+    expandIcon: 'fui-TagPickerControl__expandIcon',
+    secondaryAction: 'fui-TagPickerControl__secondaryAction',
+    aside: 'fui-TagPickerControl__aside'
+};
+const tagPickerControlAsideWidthToken = '--fui-TagPickerControl-aside-width';
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        paddingRight: `calc(${_reacttheme.tokens.spacingHorizontalM} + var(${tagPickerControlAsideWidthToken}, 0px))`,
+        paddingLeft: _reacttheme.tokens.spacingHorizontalM,
+        alignItems: 'center',
+        columnGap: _reacttheme.tokens.spacingHorizontalXXS,
+        boxSizing: 'border-box',
+        display: 'flex',
+        minWidth: '250px',
+        position: 'relative',
+        flexWrap: 'wrap',
+        // windows high contrast mode focus indicator
+        ':focus-within': {
+            outlineWidth: '2px',
+            outlineStyle: 'solid',
+            outlineColor: 'transparent'
+        },
+        // bottom focus border, shared with Input, Select, and SpinButton
+        '::after': {
+            boxSizing: 'border-box',
+            content: '""',
+            position: 'absolute',
+            left: '-1px',
+            bottom: '-1px',
+            right: '-1px',
+            height: `max(2px, ${_reacttheme.tokens.borderRadiusMedium})`,
+            borderBottomLeftRadius: _reacttheme.tokens.borderRadiusMedium,
+            borderBottomRightRadius: _reacttheme.tokens.borderRadiusMedium,
+            borderBottom: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorCompoundBrandStroke}`,
+            clipPath: 'inset(calc(100% - 2px) 0 0 0)',
+            transform: 'scaleX(0)',
+            transitionProperty: 'transform',
+            transitionDuration: _reacttheme.tokens.durationUltraFast,
+            transitionDelay: _reacttheme.tokens.curveAccelerateMid,
+            '@media screen and (prefers-reduced-motion: reduce)': {
+                transitionDuration: '0.01ms',
+                transitionDelay: '0.01ms'
+            }
+        },
+        ':focus-within::after': {
+            transform: 'scaleX(1)',
+            transitionProperty: 'transform',
+            transitionDuration: _reacttheme.tokens.durationNormal,
+            transitionDelay: _reacttheme.tokens.curveDecelerateMid,
+            '@media screen and (prefers-reduced-motion: reduce)': {
+                transitionDuration: '0.01ms',
+                transitionDelay: '0.01ms'
+            }
+        },
+        ':focus-within:active::after': {
+            borderBottomColor: _reacttheme.tokens.colorCompoundBrandStrokePressed
+        }
+    },
+    listbox: {
+        boxShadow: `${_reacttheme.tokens.shadow16}`,
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        maxHeight: '80vh',
+        boxSizing: 'border-box'
+    },
+    listboxCollapsed: {
+        display: 'none'
+    },
+    // size variants
+    medium: {
+        minHeight: '32px'
+    },
+    large: {
+        minHeight: '40px'
+    },
+    'extra-large': {
+        minHeight: '44px'
+    },
+    // appearance variants
+    outline: {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke1}`,
+        borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessible
+    },
+    outlineInteractive: {
+        '&:hover': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Hover),
+            borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessibleHover
+        },
+        '&:active': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Pressed),
+            borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed
+        },
+        '&:focus-within': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Pressed),
+            borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed
+        }
+    },
+    underline: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        borderBottom: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStrokeAccessible}`,
+        borderRadius: '0'
+    },
+    'filled-lighter': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorTransparentStroke}`
+    },
+    'filled-darker': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground3,
+        border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorTransparentStroke}`
+    },
+    invalid: {
+        ':not(:focus-within),:hover:not(:focus-within)': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder2)
+        }
+    },
+    invalidUnderline: {
+        ':not(:focus-within),:hover:not(:focus-within)': {
+            borderBottomColor: _reacttheme.tokens.colorPaletteRedBorder2
+        }
+    },
+    disabled: {
+        cursor: 'not-allowed',
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
+        '@media (forced-colors: active)': {
+            ..._react.shorthands.borderColor('GrayText')
+        }
+    }
+});
+const useAsideStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        position: 'absolute',
+        top: '0',
+        right: _reacttheme.tokens.spacingHorizontalM,
+        height: '100%',
+        cursor: 'text'
+    },
+    // size variants
+    medium: {
+        minHeight: '32px'
+    },
+    large: {
+        minHeight: '40px'
+    },
+    'extra-large': {
+        minHeight: '44px'
+    }
+});
+const iconSizes = {
+    small: '16px',
+    medium: '20px',
+    large: '24px'
+};
+const useIconStyles = (0, _react.makeStyles)({
+    icon: {
+        boxSizing: 'border-box',
+        color: _reacttheme.tokens.colorNeutralStrokeAccessible,
+        cursor: 'pointer',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        alignSelf: 'flex-start',
+        fontSize: _reacttheme.tokens.fontSizeBase500,
+        // the SVG must have display: block for accurate positioning
+        // otherwise an extra inline space is inserted after the svg element
+        '& svg': {
+            display: 'block'
+        }
+    },
+    // icon size variants
+    medium: {
+        fontSize: iconSizes.small,
+        marginLeft: _reacttheme.tokens.spacingHorizontalXXS,
+        minHeight: '32px'
+    },
+    large: {
+        fontSize: iconSizes.medium,
+        marginLeft: _reacttheme.tokens.spacingHorizontalXXS,
+        minHeight: '40px'
+    },
+    'extra-large': {
+        fontSize: iconSizes.large,
+        marginLeft: _reacttheme.tokens.spacingHorizontalSNudge,
+        minHeight: '44px'
+    },
+    disabled: {
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        cursor: 'not-allowed'
+    }
+});
+const useSecondaryActionStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'flex'
+    }
+});
+const useTagPickerControlStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const iconStyles = useIconStyles();
+    const asideStyles = useAsideStyles();
+    const secondaryActionStyles = useSecondaryActionStyles();
+    state.root.className = (0, _react.mergeClasses)(tagPickerControlClassNames.root, styles.root, styles[state.size], styles[state.appearance], !state.disabled && state.appearance === 'outline' && styles.outlineInteractive, state.invalid && state.appearance !== 'underline' && styles.invalid, state.invalid && state.appearance === 'underline' && styles.invalidUnderline, state.disabled && styles.disabled, state.root.className);
+    if (state.aside) {
+        state.aside.className = (0, _react.mergeClasses)(tagPickerControlClassNames.aside, asideStyles.root, asideStyles[state.size], state.aside.className);
+    }
+    if (state.expandIcon) {
+        state.expandIcon.className = (0, _react.mergeClasses)(tagPickerControlClassNames.expandIcon, iconStyles.icon, iconStyles[state.size], state.disabled && iconStyles.disabled, state.expandIcon.className);
+    }
+    if (state.secondaryAction) {
+        state.secondaryAction.className = (0, _react.mergeClasses)(tagPickerControlClassNames.secondaryAction, secondaryActionStyles.root, state.secondaryAction.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TagPickerControl/useTagPickerControlStyles.styles.ts"],"sourcesContent":["import { 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  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    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    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    state.secondaryAction.className = mergeClasses(\n      tagPickerControlClassNames.secondaryAction,\n      secondaryActionStyles.root,\n      state.secondaryAction.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["iconSizes","tagPickerControlAsideWidthToken","tagPickerControlClassNames","useTagPickerControlStyles_unstable","root","expandIcon","secondaryAction","aside","useStyles","makeStyles","borderRadius","tokens","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","shorthands","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorTransparentBackground","colorTransparentStroke","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","cursor","colorNeutralStrokeDisabled","useAsideStyles","top","small","useIconStyles","icon","color","justifyContent","alignSelf","fontSize","fontSizeBase500","marginLeft","spacingHorizontalSNudge","colorNeutralForegroundDisabled","useSecondaryActionStyles","state","styles","iconStyles","asideStyles","secondaryActionStyles","className","mergeClasses","size","appearance"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    tagPickerGroupClassNames: function() {
+        return tagPickerGroupClassNames;
+    },
+    useTagPickerGroupStyles_unstable: function() {
+        return useTagPickerGroupStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttags = require("@fluentui/react-tags");
+const _reacttheme = require("@fluentui/react-theme");
+const _tagPicker2Tag = require("../../utils/tagPicker2Tag");
+const tagPickerGroupClassNames = {
+    root: 'fui-TagPickerGroup'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        flexWrap: 'wrap',
+        boxSizing: 'border-box',
+        cursor: 'text'
+    },
+    // size variants
+    medium: {
+        padding: `${_reacttheme.tokens.spacingVerticalSNudge} 0 ${_reacttheme.tokens.spacingVerticalSNudge} 0`,
+        gap: _reacttheme.tokens.spacingHorizontalXS
+    },
+    large: {
+        padding: `${_reacttheme.tokens.spacingVerticalS} 0 ${_reacttheme.tokens.spacingVerticalS} 0`,
+        gap: _reacttheme.tokens.spacingHorizontalSNudge
+    },
+    'extra-large': {
+        padding: `${_reacttheme.tokens.spacingVerticalS} 0 ${_reacttheme.tokens.spacingVerticalS} 0`,
+        gap: _reacttheme.tokens.spacingHorizontalSNudge
+    }
+});
+const useTagPickerGroupStyles_unstable = (state)=>{
+    'use no memo';
+    (0, _reacttags.useTagGroupStyles_unstable)(state);
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(tagPickerGroupClassNames.root, styles[(0, _tagPicker2Tag.tagSizeToTagPickerSize)(state.size)], styles.root, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TagPickerGroup/useTagPickerGroupStyles.styles.ts"],"sourcesContent":["import { 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  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":["tagPickerGroupClassNames","useTagPickerGroupStyles_unstable","root","useStyles","makeStyles","flexWrap","boxSizing","cursor","medium","padding","tokens","spacingVerticalSNudge","gap","spacingHorizontalXS","large","spacingVerticalS","spacingHorizontalSNudge","state","useTagGroupStyles_unstable","styles","className","mergeClasses","tagSizeToTagPickerSize","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAOaA,wBAAAA;eAAAA;;IA+BAC,gCAAAA;eAAAA;;;uBAtC4B;2BAGE;4BACpB;+BACgB;AAEhC,MAAMD,2BAAgE;IAC3EE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,UAAU;QACVC,WAAW;QACXC,QAAQ;IACV;IACA,gBAAgB;IAChBC,QAAQ;QACNC,SAAS,CAAC,EAAEC,kBAAAA,CAAOC,qBAAqB,CAAC,GAAG,EAAED,kBAAAA,CAAOC,qBAAqB,CAAC,EAAE,CAAC;QAC9EC,KAAKF,kBAAAA,CAAOG,mBAAmB;IACjC;IACAC,OAAO;QACLL,SAAS,CAAC,EAAEC,kBAAAA,CAAOK,gBAAgB,CAAC,GAAG,EAAEL,kBAAAA,CAAOK,gBAAgB,CAAC,EAAE,CAAC;QACpEH,KAAKF,kBAAAA,CAAOM,uBAAuB;IACrC;IACA,eAAe;QACbP,SAAS,CAAC,EAAEC,kBAAAA,CAAOK,gBAAgB,CAAC,GAAG,EAAEL,kBAAAA,CAAOK,gBAAgB,CAAC,EAAE,CAAC;QACpEH,KAAKF,kBAAAA,CAAOM,uBAAuB;IACrC;AACF;AAKO,MAAMf,mCAAmC,CAACgB;IAC/C;IAEAC,IAAAA,qCAAAA,EAA2BD;IAC3B,MAAME,SAAShB;IACfc,MAAMf,IAAI,CAACkB,SAAS,GAAGC,IAAAA,mBAAAA,EACrBrB,yBAAyBE,IAAI,EAC7BiB,MAAM,CAACG,IAAAA,qCAAAA,EAAuBL,MAAMM,IAAI,EAAE,EAC1CJ,OAAOjB,IAAI,EACXe,MAAMf,IAAI,CAACkB,SAAS;IAGtB,OAAOH;AACT"}

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

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    tagPickerInputClassNames: function() {
+        return tagPickerInputClassNames;
+    },
+    useTagPickerInputStyles_unstable: function() {
+        return useTagPickerInputStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _tokens = require("../../utils/tokens");
+const tagPickerInputClassNames = {
+    root: 'fui-TagPickerInput'
+};
+const useBaseStyle = (0, _react.makeResetStyles)({
+    backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+    color: _reacttheme.tokens.colorNeutralForeground1,
+    fontFamily: _reacttheme.tokens.fontFamilyBase,
+    boxSizing: 'border-box',
+    '&:focus': {
+        outlineStyle: 'none'
+    },
+    '&::placeholder': {
+        color: _reacttheme.tokens.colorNeutralForeground4,
+        opacity: 1
+    },
+    '&::after': {
+        visibility: 'hidden',
+        whiteSpace: 'pre-wrap'
+    },
+    border: 'none',
+    minWidth: '24px',
+    maxWidth: '100%',
+    // by default width is 0,
+    // it will be calculated based on the requirement of stretching the component to 100% width
+    // see setTagPickerInputStretchStyle method for more details
+    width: _tokens.tagPickerInputTokens.width,
+    flexGrow: 1
+});
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    // size variants
+    medium: {
+        ..._reacttheme.typographyStyles.body1,
+        padding: `${_reacttheme.tokens.spacingVerticalSNudge} 0 ${_reacttheme.tokens.spacingVerticalSNudge} 0`
+    },
+    large: {
+        ..._reacttheme.typographyStyles.body1,
+        padding: `${_reacttheme.tokens.spacingVerticalMNudge} 0 ${_reacttheme.tokens.spacingVerticalMNudge} 0`
+    },
+    'extra-large': {
+        ..._reacttheme.typographyStyles.body1,
+        padding: `${_reacttheme.tokens.spacingVerticalM} 0 ${_reacttheme.tokens.spacingVerticalM} 0`
+    },
+    disabled: {
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        cursor: 'not-allowed',
+        '::placeholder': {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled
+        }
+    }
+});
+const useTagPickerInputStyles_unstable = (state)=>{
+    'use no memo';
+    const baseStyle = useBaseStyle();
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(tagPickerInputClassNames.root, baseStyle, styles[state.size], state.disabled && styles.disabled, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TagPickerInput/useTagPickerInputStyles.styles.ts"],"sourcesContent":["import { 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  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":["tagPickerInputClassNames","useTagPickerInputStyles_unstable","root","useBaseStyle","makeResetStyles","backgroundColor","tokens","colorTransparentBackground","color","colorNeutralForeground1","fontFamily","fontFamilyBase","boxSizing","outlineStyle","colorNeutralForeground4","opacity","visibility","whiteSpace","border","minWidth","maxWidth","width","tagPickerInputTokens","flexGrow","useStyles","makeStyles","medium","typographyStyles","body1","padding","spacingVerticalSNudge","large","spacingVerticalMNudge","spacingVerticalM","disabled","colorNeutralForegroundDisabled","cursor","state","baseStyle","styles","className","mergeClasses","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,wBAAAA;eAAAA;;IA6DAC,gCAAAA;eAAAA;;;uBAnE6C;4BACjB;wBAGJ;AAE9B,MAAMD,2BAAgE;IAC3EE,MAAM;AACR;AAEA,MAAMC,eAAeC,IAAAA,sBAAAA,EAAgB;IACnCC,iBAAiBC,kBAAAA,CAAOC,0BAA0B;IAClDC,OAAOF,kBAAAA,CAAOG,uBAAuB;IACrCC,YAAYJ,kBAAAA,CAAOK,cAAc;IACjCC,WAAW;IAEX,WAAW;QACTC,cAAc;IAChB;IACA,kBAAkB;QAChBL,OAAOF,kBAAAA,CAAOQ,uBAAuB;QACrCC,SAAS;IACX;IACA,YAAY;QACVC,YAAY;QACZC,YAAY;IACd;IACAC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACV,yBAAyB;IACzB,2FAA2F;IAC3F,4DAA4D;IAC5DC,OAAOC,4BAAAA,CAAqBD,KAAK;IACjCE,UAAU;AACZ;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3B,gBAAgB;IAChBC,QAAQ;QACN,GAAGC,4BAAAA,CAAiBC,KAAK;QACzBC,SAAS,CAAC,EAAEvB,kBAAAA,CAAOwB,qBAAqB,CAAC,GAAG,EAAExB,kBAAAA,CAAOwB,qBAAqB,CAAC,EAAE,CAAC;IAChF;IACAC,OAAO;QACL,GAAGJ,4BAAAA,CAAiBC,KAAK;QACzBC,SAAS,CAAC,EAAEvB,kBAAAA,CAAO0B,qBAAqB,CAAC,GAAG,EAAE1B,kBAAAA,CAAO0B,qBAAqB,CAAC,EAAE,CAAC;IAChF;IACA,eAAe;QACb,GAAGL,4BAAAA,CAAiBC,KAAK;QACzBC,SAAS,CAAC,EAAEvB,kBAAAA,CAAO2B,gBAAgB,CAAC,GAAG,EAAE3B,kBAAAA,CAAO2B,gBAAgB,CAAC,EAAE,CAAC;IACtE;IACAC,UAAU;QACR1B,OAAOF,kBAAAA,CAAO6B,8BAA8B;QAC5C9B,iBAAiBC,kBAAAA,CAAOC,0BAA0B;QAClD6B,QAAQ;QACR,iBAAiB;YACf5B,OAAOF,kBAAAA,CAAO6B,8BAA8B;QAC9C;IACF;AACF;AAKO,MAAMlC,mCAAmC,CAACoC;IAC/C;IAEA,MAAMC,YAAYnC;IAClB,MAAMoC,SAASf;IACfa,MAAMnC,IAAI,CAACsC,SAAS,GAAGC,IAAAA,mBAAAA,EACrBzC,yBAAyBE,IAAI,EAC7BoC,WACAC,MAAM,CAACF,MAAMK,IAAI,CAAC,EAClBL,MAAMH,QAAQ,IAAIK,OAAOL,QAAQ,EACjCG,MAAMnC,IAAI,CAACsC,SAAS;IAEtB,OAAOH;AACT"}