@fluentui/react-button 0.0.0-nightly-20240819-2137.1 → 0.0.0-nightly-20240820-2210.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/CHANGELOG.md +13 -13
  2. package/lib/components/Button/useButtonStyles.styles.js +79 -79
  3. package/lib/components/Button/useButtonStyles.styles.js.map +1 -1
  4. package/lib/components/CompoundButton/useCompoundButtonStyles.styles.js +40 -40
  5. package/lib/components/CompoundButton/useCompoundButtonStyles.styles.js.map +1 -1
  6. package/lib/components/MenuButton/useMenuButtonStyles.styles.js +19 -19
  7. package/lib/components/MenuButton/useMenuButtonStyles.styles.js.map +1 -1
  8. package/lib/components/SplitButton/useSplitButtonStyles.styles.js +14 -14
  9. package/lib/components/SplitButton/useSplitButtonStyles.styles.js.map +1 -1
  10. package/lib/components/ToggleButton/useToggleButtonStyles.styles.js +45 -45
  11. package/lib/components/ToggleButton/useToggleButtonStyles.styles.js.map +1 -1
  12. package/lib-commonjs/components/Button/useButtonStyles.styles.js +128 -128
  13. package/lib-commonjs/components/Button/useButtonStyles.styles.js.map +1 -1
  14. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.js +64 -64
  15. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.js.map +1 -1
  16. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.js +34 -34
  17. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.js.map +1 -1
  18. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.js +48 -48
  19. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.js.map +1 -1
  20. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.js +80 -80
  21. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.js.map +1 -1
  22. package/package.json +10 -10
package/lib/components/SplitButton/useSplitButtonStyles.styles.js CHANGED
@@ -34,31 +34,31 @@ const useRootStyles = /*#__PURE__*/__styles({
34
34
  },
35
35
  outline: {},
36
36
  primary: {
37
- B1l9wao: ["f8iww82", "fp1eu0m"],
38
- lcnrd8: ["fuizv1t", "f19kwtzy"],
39
- Brbpp8k: ["f12aeckf", "f1pqs2oh"],
37
+ B1l9wao: ["ftvqy83", "fnfyj41"],
38
+ lcnrd8: ["f9xh180", "f1w8ntad"],
39
+ Brbpp8k: ["fxn1fl2", "fgyet80"],
40
40
  Bcsxniv: ["ff0tx2l", "fnrj3rw"],
41
41
  tl7e51: ["f3jppgx", "f1m2s8ie"],
42
42
  mba178: ["f96h41g", "fdxf0pi"]
43
43
  },
44
44
  secondary: {},
45
45
  subtle: {
46
- B1l9wao: ["f90ssbj", "f171kakz"],
47
- lcnrd8: ["f1qfbe7", "f1w6ad1x"],
48
- Brbpp8k: ["f1ut8iav", "f1l02e3d"]
46
+ B1l9wao: ["f1yo4dgb", "ff6yatw"],
47
+ lcnrd8: ["f1afbnnz", "f9myr3o"],
48
+ Brbpp8k: ["fbqtpi2", "f1njbwn0"]
49
49
  },
50
50
  transparent: {
51
- B1l9wao: ["f1fctejb", "fetekt1"],
52
- lcnrd8: ["f189lcxo", "fjbrolj"],
53
- Brbpp8k: ["f1aediod", "f10cqcnz"]
51
+ B1l9wao: ["f1ebgnyd", "f8coqc"],
52
+ lcnrd8: ["f152rz25", "f1fm6l08"],
53
+ Brbpp8k: ["fx9f09k", "fsc52d9"]
54
54
  },
55
55
  circular: {},
56
56
  rounded: {},
57
57
  square: {},
58
58
  disabled: {
59
- B1l9wao: ["fegwyvo", "fmvcv9w"],
60
- lcnrd8: ["f1ohjkvm", "f13os6i2"],
61
- Brbpp8k: ["fli1pn0", "fsdmtgg"]
59
+ B1l9wao: ["f1t6iz8f", "fe4c7e8"],
60
+ lcnrd8: ["fs0yi99", "f13k3mky"],
61
+ Brbpp8k: ["fb9uzha", "f472bms"]
62
62
  },
63
63
  disabledHighContrast: {
64
64
  Bcsxniv: ["fj2q5vi", "f13tct40"],
@@ -66,8 +66,8 @@ const useRootStyles = /*#__PURE__*/__styles({
66
66
  mba178: ["f1ma39qa", "f1nzpdru"]
67
67
  }
68
68
  }, {
69
- d: [".ftuwxu6{display:inline-flex;}", ".fsxf2b5{justify-content:stretch;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f14uur2j .fui-SplitButton__primaryActionButton{border-top-right-radius:0;}", ".fc1btbj .fui-SplitButton__primaryActionButton{border-top-left-radius:0;}", ".fye5tvs .fui-SplitButton__primaryActionButton{border-bottom-right-radius:0;}", ".fc597qq .fui-SplitButton__primaryActionButton{border-bottom-left-radius:0;}", ".f1e8brtx .fui-SplitButton__menuButton{border-left-width:0;}", ".fr36rk3 .fui-SplitButton__menuButton{border-right-width:0;}", ".fxp12j1 .fui-SplitButton__menuButton{border-top-left-radius:0;}", ".f1m6nt2y .fui-SplitButton__menuButton{border-top-right-radius:0;}", ".fr7y8no .fui-SplitButton__menuButton{border-bottom-left-radius:0;}", ".f1dn0c6m .fui-SplitButton__menuButton{border-bottom-right-radius:0;}", ".f1hvqvul .fui-SplitButton__menuButton{min-width:0;}", ".f8iww82 .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-93, var(--semantic-token-SplitButton-94, var(--colorNeutralStrokeOnBrand)));}", ".fp1eu0m .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-93, var(--semantic-token-SplitButton-94, var(--colorNeutralStrokeOnBrand)));}", ".f90ssbj .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-99, var(--semantic-token-SplitButton-100, var(--colorNeutralStroke1)));}", ".f171kakz .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-99, var(--semantic-token-SplitButton-100, var(--colorNeutralStroke1)));}", ".f1fctejb .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-105, var(--semantic-token-SplitButton-106, var(--colorNeutralStroke1)));}", ".fetekt1 .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-105, var(--semantic-token-SplitButton-106, var(--colorNeutralStroke1)));}", ".fegwyvo .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-111, var(--semantic-token-SplitButton-112, var(--colorNeutralStrokeDisabled)));}", ".fmvcv9w .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-111, var(--semantic-token-SplitButton-112, var(--colorNeutralStrokeDisabled)));}"],
70
- h: [".fuizv1t:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-95, var(--semantic-token-SplitButton-96, var(--colorNeutralStrokeOnBrand)));}", ".f19kwtzy:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-95, var(--semantic-token-SplitButton-96, var(--colorNeutralStrokeOnBrand)));}", ".f12aeckf:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-97, var(--semantic-token-SplitButton-98, var(--colorNeutralStrokeOnBrand)));}", ".f1pqs2oh:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-97, var(--semantic-token-SplitButton-98, var(--colorNeutralStrokeOnBrand)));}", ".f1qfbe7:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-101, var(--semantic-token-SplitButton-102, var(--colorNeutralStroke1Hover)));}", ".f1w6ad1x:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-101, var(--semantic-token-SplitButton-102, var(--colorNeutralStroke1Hover)));}", ".f1ut8iav:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-103, var(--semantic-token-SplitButton-104, var(--colorNeutralStroke1Pressed)));}", ".f1l02e3d:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-103, var(--semantic-token-SplitButton-104, var(--colorNeutralStroke1Pressed)));}", ".f189lcxo:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-107, var(--semantic-token-SplitButton-108, var(--colorNeutralStroke1Hover)));}", ".fjbrolj:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-107, var(--semantic-token-SplitButton-108, var(--colorNeutralStroke1Hover)));}", ".f1aediod:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-109, var(--semantic-token-SplitButton-110, var(--colorNeutralStroke1Pressed)));}", ".f10cqcnz:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-109, var(--semantic-token-SplitButton-110, var(--colorNeutralStroke1Pressed)));}", ".f1ohjkvm:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-113, var(--semantic-token-SplitButton-114, var(--colorNeutralStrokeDisabled)));}", ".f13os6i2:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-113, var(--semantic-token-SplitButton-114, var(--colorNeutralStrokeDisabled)));}", ".fli1pn0:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--ctrl-token-SplitButton-115, var(--semantic-token-SplitButton-116, var(--colorNeutralStrokeDisabled)));}", ".fsdmtgg:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--ctrl-token-SplitButton-115, var(--semantic-token-SplitButton-116, var(--colorNeutralStrokeDisabled)));}"],
69
+ d: [".ftuwxu6{display:inline-flex;}", ".fsxf2b5{justify-content:stretch;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f14uur2j .fui-SplitButton__primaryActionButton{border-top-right-radius:0;}", ".fc1btbj .fui-SplitButton__primaryActionButton{border-top-left-radius:0;}", ".fye5tvs .fui-SplitButton__primaryActionButton{border-bottom-right-radius:0;}", ".fc597qq .fui-SplitButton__primaryActionButton{border-bottom-left-radius:0;}", ".f1e8brtx .fui-SplitButton__menuButton{border-left-width:0;}", ".fr36rk3 .fui-SplitButton__menuButton{border-right-width:0;}", ".fxp12j1 .fui-SplitButton__menuButton{border-top-left-radius:0;}", ".f1m6nt2y .fui-SplitButton__menuButton{border-top-right-radius:0;}", ".fr7y8no .fui-SplitButton__menuButton{border-bottom-left-radius:0;}", ".f1dn0c6m .fui-SplitButton__menuButton{border-bottom-right-radius:0;}", ".f1hvqvul .fui-SplitButton__menuButton{min-width:0;}", ".ftvqy83 .fui-SplitButton__primaryActionButton{border-right-color:var(--93, var(--94, var(--colorNeutralStrokeOnBrand)));}", ".fnfyj41 .fui-SplitButton__primaryActionButton{border-left-color:var(--93, var(--94, var(--colorNeutralStrokeOnBrand)));}", ".f1yo4dgb .fui-SplitButton__primaryActionButton{border-right-color:var(--99, var(--100, var(--colorNeutralStroke1)));}", ".ff6yatw .fui-SplitButton__primaryActionButton{border-left-color:var(--99, var(--100, var(--colorNeutralStroke1)));}", ".f1ebgnyd .fui-SplitButton__primaryActionButton{border-right-color:var(--105, var(--106, var(--colorNeutralStroke1)));}", ".f8coqc .fui-SplitButton__primaryActionButton{border-left-color:var(--105, var(--106, var(--colorNeutralStroke1)));}", ".f1t6iz8f .fui-SplitButton__primaryActionButton{border-right-color:var(--111, var(--112, var(--colorNeutralStrokeDisabled)));}", ".fe4c7e8 .fui-SplitButton__primaryActionButton{border-left-color:var(--111, var(--112, var(--colorNeutralStrokeDisabled)));}"],
70
+ h: [".f9xh180:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--95, var(--96, var(--colorNeutralStrokeOnBrand)));}", ".f1w8ntad:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--95, var(--96, var(--colorNeutralStrokeOnBrand)));}", ".fxn1fl2:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--97, var(--98, var(--colorNeutralStrokeOnBrand)));}", ".fgyet80:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--97, var(--98, var(--colorNeutralStrokeOnBrand)));}", ".f1afbnnz:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--101, var(--102, var(--colorNeutralStroke1Hover)));}", ".f9myr3o:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--101, var(--102, var(--colorNeutralStroke1Hover)));}", ".fbqtpi2:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--103, var(--104, var(--colorNeutralStroke1Pressed)));}", ".f1njbwn0:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--103, var(--104, var(--colorNeutralStroke1Pressed)));}", ".f152rz25:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--107, var(--108, var(--colorNeutralStroke1Hover)));}", ".f1fm6l08:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--107, var(--108, var(--colorNeutralStroke1Hover)));}", ".fx9f09k:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--109, var(--110, var(--colorNeutralStroke1Pressed)));}", ".fsc52d9:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--109, var(--110, var(--colorNeutralStroke1Pressed)));}", ".fs0yi99:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--113, var(--114, var(--colorNeutralStrokeDisabled)));}", ".f13k3mky:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--113, var(--114, var(--colorNeutralStrokeDisabled)));}", ".fb9uzha:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--115, var(--116, var(--colorNeutralStrokeDisabled)));}", ".f472bms:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--115, var(--116, var(--colorNeutralStrokeDisabled)));}"],
71
71
  m: [["@media (forced-colors: active){.ff0tx2l .fui-SplitButton__primaryActionButton{border-right-color:HighlightText;}.fnrj3rw .fui-SplitButton__primaryActionButton{border-left-color:HighlightText;}}", {
72
72
  m: "(forced-colors: active)"
73
73
  }], ["@media (forced-colors: active){.f1m2s8ie:hover .fui-SplitButton__primaryActionButton{border-left-color:Highlight;}.f3jppgx:hover .fui-SplitButton__primaryActionButton{border-right-color:Highlight;}}", {
package/lib/components/SplitButton/useSplitButtonStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","useFocusStyles","B6xbmo0","kdpuga","lbo84a","dm238s","Bw81rd7","d","useRootStyles","base","mc9l5x","Brf1p80","qhf8xq","ha4doy","kn2xc0","Bs76p8a","cuxpm9","Biffepf","Defnvf","z0pv9t","outline","primary","B1l9wao","lcnrd8","Brbpp8k","Bcsxniv","tl7e51","mba178","secondary","subtle","transparent","circular","rounded","square","disabled","disabledHighContrast","h","m","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"sources":["useSplitButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const splitButtonClassNames = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton'\n};\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0\n }),\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0\n })\n});\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0\n },\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n minWidth: 0\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-93, var(--semantic-token-SplitButton-94, ${tokens.colorNeutralStrokeOnBrand}))`\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-95, var(--semantic-token-SplitButton-96, ${tokens.colorNeutralStrokeOnBrand}))`\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-97, var(--semantic-token-SplitButton-98, ${tokens.colorNeutralStrokeOnBrand}))`\n }\n },\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'HighlightText'\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight'\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight'\n }\n }\n }\n },\n secondary: {\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-99, var(--semantic-token-SplitButton-100, ${tokens.colorNeutralStroke1}))`\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-101, var(--semantic-token-SplitButton-102, ${tokens.colorNeutralStroke1Hover}))`\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-103, var(--semantic-token-SplitButton-104, ${tokens.colorNeutralStroke1Pressed}))`\n }\n }\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-105, var(--semantic-token-SplitButton-106, ${tokens.colorNeutralStroke1}))`\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-107, var(--semantic-token-SplitButton-108, ${tokens.colorNeutralStroke1Hover}))`\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-109, var(--semantic-token-SplitButton-110, ${tokens.colorNeutralStroke1Pressed}))`\n }\n }\n },\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n // Disabled styles\n disabled: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-111, var(--semantic-token-SplitButton-112, ${tokens.colorNeutralStrokeDisabled}))`\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-113, var(--semantic-token-SplitButton-114, ${tokens.colorNeutralStrokeDisabled}))`\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--ctrl-token-SplitButton-115, var(--semantic-token-SplitButton-116, ${tokens.colorNeutralStrokeDisabled}))`\n }\n }\n },\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n }\n }\n }\n }\n});\nexport const useSplitButtonStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const { appearance, disabled, disabledFocusable } = state;\n state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);\n }\n if (state.primaryActionButton) {\n state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,UAAU,EAAE,6BAA6B;EACzCC,mBAAmB,EAAE;AACzB,CAAC;AACD,MAAMC,cAAc,gBAAGR,QAAA;EAAAO,mBAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;EAAAJ,UAAA;IAAAK,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUtB,CAAC;AACF,MAAMC,aAAa,gBAAGf,QAAA;EAAAgB,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;EAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;EAAAC,MAAA;IAAAP,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAM,WAAA;IAAAR,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAO,QAAA;EAAAC,OAAA;EAAAC,MAAA;EAAAC,QAAA;IAAAZ,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAW,oBAAA;IAAAV,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAApB,CAAA;EAAA6B,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAyHrB,CAAC;AACF,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EAClD,aAAa;;EACb,MAAMC,UAAU,GAAGhC,aAAa,CAAC,CAAC;EAClC,MAAMiC,WAAW,GAAGxC,cAAc,CAAC,CAAC;EACpC,MAAM;IAAEyC,UAAU;IAAER,QAAQ;IAAES;EAAkB,CAAC,GAAGJ,KAAK;EACzDA,KAAK,CAACzC,IAAI,CAAC8C,SAAS,GAAGlD,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAE0C,UAAU,CAAC/B,IAAI,EAAEiC,UAAU,IAAIF,UAAU,CAACE,UAAU,CAAC,EAAE,CAACR,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACN,QAAQ,EAAE,CAACA,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACL,oBAAoB,EAAEI,KAAK,CAACzC,IAAI,CAAC8C,SAAS,CAAC;EACxQ,IAAIL,KAAK,CAACxC,UAAU,EAAE;IAClBwC,KAAK,CAACxC,UAAU,CAAC6C,SAAS,GAAGlD,YAAY,CAACG,qBAAqB,CAACE,UAAU,EAAE0C,WAAW,CAAC1C,UAAU,EAAEwC,KAAK,CAACxC,UAAU,CAAC6C,SAAS,CAAC;EACnI;EACA,IAAIL,KAAK,CAACvC,mBAAmB,EAAE;IAC3BuC,KAAK,CAACvC,mBAAmB,CAAC4C,SAAS,GAAGlD,YAAY,CAACG,qBAAqB,CAACG,mBAAmB,EAAEyC,WAAW,CAACzC,mBAAmB,EAAEuC,KAAK,CAACvC,mBAAmB,CAAC4C,SAAS,CAAC;EACvK;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","useFocusStyles","B6xbmo0","kdpuga","lbo84a","dm238s","Bw81rd7","d","useRootStyles","base","mc9l5x","Brf1p80","qhf8xq","ha4doy","kn2xc0","Bs76p8a","cuxpm9","Biffepf","Defnvf","z0pv9t","outline","primary","B1l9wao","lcnrd8","Brbpp8k","Bcsxniv","tl7e51","mba178","secondary","subtle","transparent","circular","rounded","square","disabled","disabledHighContrast","h","m","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"sources":["useSplitButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const splitButtonClassNames = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton'\n};\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0\n }),\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0\n })\n});\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0\n },\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n minWidth: 0\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--93, var(--94, ${tokens.colorNeutralStrokeOnBrand}))`\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--95, var(--96, ${tokens.colorNeutralStrokeOnBrand}))`\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--97, var(--98, ${tokens.colorNeutralStrokeOnBrand}))`\n }\n },\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'HighlightText'\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight'\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight'\n }\n }\n }\n },\n secondary: {\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--99, var(--100, ${tokens.colorNeutralStroke1}))`\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--101, var(--102, ${tokens.colorNeutralStroke1Hover}))`\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--103, var(--104, ${tokens.colorNeutralStroke1Pressed}))`\n }\n }\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--105, var(--106, ${tokens.colorNeutralStroke1}))`\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--107, var(--108, ${tokens.colorNeutralStroke1Hover}))`\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--109, var(--110, ${tokens.colorNeutralStroke1Pressed}))`\n }\n }\n },\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n // Disabled styles\n disabled: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--111, var(--112, ${tokens.colorNeutralStrokeDisabled}))`\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--113, var(--114, ${tokens.colorNeutralStrokeDisabled}))`\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: `var(--115, var(--116, ${tokens.colorNeutralStrokeDisabled}))`\n }\n }\n },\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n }\n }\n }\n }\n});\nexport const useSplitButtonStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const { appearance, disabled, disabledFocusable } = state;\n state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);\n }\n if (state.primaryActionButton) {\n state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,UAAU,EAAE,6BAA6B;EACzCC,mBAAmB,EAAE;AACzB,CAAC;AACD,MAAMC,cAAc,gBAAGR,QAAA;EAAAO,mBAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;EAAAJ,UAAA;IAAAK,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUtB,CAAC;AACF,MAAMC,aAAa,gBAAGf,QAAA;EAAAgB,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;EAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;EAAAC,MAAA;IAAAP,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAM,WAAA;IAAAR,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAO,QAAA;EAAAC,OAAA;EAAAC,MAAA;EAAAC,QAAA;IAAAZ,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAW,oBAAA;IAAAV,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAApB,CAAA;EAAA6B,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAyHrB,CAAC;AACF,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EAClD,aAAa;;EACb,MAAMC,UAAU,GAAGhC,aAAa,CAAC,CAAC;EAClC,MAAMiC,WAAW,GAAGxC,cAAc,CAAC,CAAC;EACpC,MAAM;IAAEyC,UAAU;IAAER,QAAQ;IAAES;EAAkB,CAAC,GAAGJ,KAAK;EACzDA,KAAK,CAACzC,IAAI,CAAC8C,SAAS,GAAGlD,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAE0C,UAAU,CAAC/B,IAAI,EAAEiC,UAAU,IAAIF,UAAU,CAACE,UAAU,CAAC,EAAE,CAACR,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACN,QAAQ,EAAE,CAACA,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACL,oBAAoB,EAAEI,KAAK,CAACzC,IAAI,CAAC8C,SAAS,CAAC;EACxQ,IAAIL,KAAK,CAACxC,UAAU,EAAE;IAClBwC,KAAK,CAACxC,UAAU,CAAC6C,SAAS,GAAGlD,YAAY,CAACG,qBAAqB,CAACE,UAAU,EAAE0C,WAAW,CAAC1C,UAAU,EAAEwC,KAAK,CAACxC,UAAU,CAAC6C,SAAS,CAAC;EACnI;EACA,IAAIL,KAAK,CAACvC,mBAAmB,EAAE;IAC3BuC,KAAK,CAACvC,mBAAmB,CAAC4C,SAAS,GAAGlD,YAAY,CAACG,qBAAqB,CAACG,mBAAmB,EAAEyC,WAAW,CAACzC,mBAAmB,EAAEuC,KAAK,CAACvC,mBAAmB,CAAC4C,SAAS,CAAC;EACvK;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
package/lib/components/ToggleButton/useToggleButtonStyles.styles.js CHANGED
@@ -9,30 +9,30 @@ export const toggleButtonClassNames = {
9
9
  };
10
10
  const useRootCheckedStyles = /*#__PURE__*/__styles({
11
11
  base: {
12
- De3pzq: "f18kwpo5",
12
+ De3pzq: "f1quyamg",
13
13
  g2u3we: "fj3muxo",
14
14
  h3c5rm: ["f1akhkt", "f1lxtadh"],
15
15
  B9xav0g: "f1aperda",
16
16
  zhjwy3: ["f1lxtadh", "f1akhkt"],
17
- sj55zd: "f1csp37j",
17
+ sj55zd: "ftobqpq",
18
18
  B4j52fo: "f192inf7",
19
19
  Bekrc4i: ["f5tn483", "f1ojsxk5"],
20
20
  Bn0qgzm: "f1vxd6vx",
21
21
  ibv6hh: ["f1ojsxk5", "f5tn483"],
22
22
  D0sxk3: "fxoiby5",
23
23
  t6yez3: "f15q0o9g",
24
- Jwef8y: "f15sokxw",
24
+ Jwef8y: "f1ufrqid",
25
25
  Bgoe8wy: "fvcxoqz",
26
26
  Bwzppfd: ["f1ub3y4t", "f1m52nbi"],
27
27
  oetu4i: "f1xlaoq0",
28
28
  gg5e9n: ["f1m52nbi", "f1ub3y4t"],
29
- Bi91k9c: "f16ytb1",
30
- iro3zm: "f1ofp345",
29
+ Bi91k9c: "frsn5jk",
30
+ iro3zm: "fld24mq",
31
31
  b661bw: "f11v6sdu",
32
32
  Bk6r4ia: ["f9yn8i4", "f1ajwf28"],
33
33
  B9zn80p: "f1uwu36w",
34
34
  Bpld233: ["f1ajwf28", "f9yn8i4"],
35
- B2d53fq: "f1scj889"
35
+ B2d53fq: "f13xdy7n"
36
36
  },
37
37
  highContrast: {
38
38
  Bsw6fvg: "f1rirnrt",
@@ -74,7 +74,7 @@ const useRootCheckedStyles = /*#__PURE__*/__styles({
74
74
  B7d2ofm: "fkom8lu"
75
75
  },
76
76
  outline: {
77
- De3pzq: "f1vm7n5g",
77
+ De3pzq: "f172tr4g",
78
78
  g2u3we: "fj3muxo",
79
79
  h3c5rm: ["f1akhkt", "f1lxtadh"],
80
80
  B9xav0g: "f1aperda",
@@ -83,77 +83,77 @@ const useRootCheckedStyles = /*#__PURE__*/__styles({
83
83
  Bekrc4i: ["f130t4y6", "f1efpmoh"],
84
84
  Bn0qgzm: "fv51ejd",
85
85
  ibv6hh: ["f1efpmoh", "f130t4y6"],
86
- Jwef8y: "fjc9ezv",
87
- iro3zm: "f1isutwh",
86
+ Jwef8y: "fy73arb",
87
+ iro3zm: "f1n3kqpp",
88
88
  B8q5s1w: "fcaw57c",
89
89
  Bci5o5g: ["fpwd27e", "f1999bjr"],
90
90
  n8qw10: "f1hi52o4",
91
91
  Bdrgwmp: ["f1999bjr", "fpwd27e"]
92
92
  },
93
93
  primary: {
94
- De3pzq: "f1uy0udz",
94
+ De3pzq: "f1lf224m",
95
95
  g2u3we: "f1p3nwhy",
96
96
  h3c5rm: ["f11589ue", "f1pdflbu"],
97
97
  B9xav0g: "f1q5o8ev",
98
98
  zhjwy3: ["f1pdflbu", "f11589ue"],
99
- sj55zd: "fl6npt0",
100
- Jwef8y: "f1jl89bf",
99
+ sj55zd: "fg5qrus",
100
+ Jwef8y: "fxswv3b",
101
101
  Bgoe8wy: "f1s2uweq",
102
102
  Bwzppfd: ["fr80ssc", "fecsdlb"],
103
103
  oetu4i: "f1ukrpxl",
104
104
  gg5e9n: ["fecsdlb", "fr80ssc"],
105
- Bi91k9c: "f55wp2b",
106
- iro3zm: "f13jzei3",
105
+ Bi91k9c: "fuwkukp",
106
+ iro3zm: "f1psmnu2",
107
107
  b661bw: "f1h0usnq",
108
108
  Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
109
109
  B9zn80p: "f16h9ulv",
110
110
  Bpld233: ["fx2bmrt", "fs4ktlq"],
111
- B2d53fq: "fi40r0w"
111
+ B2d53fq: "f2ivi1s"
112
112
  },
113
113
  secondary: {},
114
114
  subtle: {
115
- De3pzq: "f15oh68g",
115
+ De3pzq: "f1ftzvcr",
116
116
  g2u3we: "f1p3nwhy",
117
117
  h3c5rm: ["f11589ue", "f1pdflbu"],
118
118
  B9xav0g: "f1q5o8ev",
119
119
  zhjwy3: ["f1pdflbu", "f11589ue"],
120
- sj55zd: "f21mm76",
121
- Jwef8y: "f1y622at",
120
+ sj55zd: "ffjioa1",
121
+ Jwef8y: "f1d9twxa",
122
122
  Bgoe8wy: "f1s2uweq",
123
123
  Bwzppfd: ["fr80ssc", "fecsdlb"],
124
124
  oetu4i: "f1ukrpxl",
125
125
  gg5e9n: ["fecsdlb", "fr80ssc"],
126
- Bi91k9c: "fmfdhz9",
127
- iro3zm: "f129df0b",
126
+ Bi91k9c: "f1bnsls0",
127
+ iro3zm: "f2qeqlu",
128
128
  b661bw: "f1h0usnq",
129
129
  Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
130
130
  B9zn80p: "f16h9ulv",
131
131
  Bpld233: ["fx2bmrt", "fs4ktlq"],
132
- B2d53fq: "f1dbhjl3"
132
+ B2d53fq: "fmikl02"
133
133
  },
134
134
  transparent: {
135
- De3pzq: "fqs746z",
135
+ De3pzq: "f13l10xp",
136
136
  g2u3we: "f1p3nwhy",
137
137
  h3c5rm: ["f11589ue", "f1pdflbu"],
138
138
  B9xav0g: "f1q5o8ev",
139
139
  zhjwy3: ["f1pdflbu", "f11589ue"],
140
- sj55zd: "femyvo7",
141
- Jwef8y: "f1kdwvt",
140
+ sj55zd: "f1qj54ry",
141
+ Jwef8y: "f7m7ne2",
142
142
  Bgoe8wy: "f1s2uweq",
143
143
  Bwzppfd: ["fr80ssc", "fecsdlb"],
144
144
  oetu4i: "f1ukrpxl",
145
145
  gg5e9n: ["fecsdlb", "fr80ssc"],
146
- Bi91k9c: "f1uifz6n",
147
- iro3zm: "fcvsot5",
146
+ Bi91k9c: "f1svx1ee",
147
+ iro3zm: "f1qy32lw",
148
148
  b661bw: "f1h0usnq",
149
149
  Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
150
150
  B9zn80p: "f16h9ulv",
151
151
  Bpld233: ["fx2bmrt", "fs4ktlq"],
152
- B2d53fq: "fyf9bfy"
152
+ B2d53fq: "fjg449s"
153
153
  }
154
154
  }, {
155
- d: [".f18kwpo5{background-color:var(--ctrl-token-ToggleButton-117, var(--semantic-token-ToggleButton-118, var(--colorNeutralBackground1Selected)));}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f1csp37j{color:var(--ctrl-token-ToggleButton-119, var(--semantic-token-ToggleButton-120, var(--colorNeutralForeground1Selected)));}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fxoiby5 .fui-Icon-filled{display:inline;}", ".f15q0o9g .fui-Icon-regular{display:none;}", ".f1vm7n5g{background-color:var(--ctrl-token-ToggleButton-129, var(--semantic-token-ToggleButton-130, var(--colorTransparentBackgroundSelected)));}", ".fgx37oo{border-top-width:var(--strokeWidthThicker);}", ".f130t4y6{border-right-width:var(--strokeWidthThicker);}", ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}", ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}", ".fcaw57c[data-fui-focus-visible]{border-top-color:var(--colorNeutralStroke1);}", ".fpwd27e[data-fui-focus-visible]{border-right-color:var(--colorNeutralStroke1);}", ".f1999bjr[data-fui-focus-visible]{border-left-color:var(--colorNeutralStroke1);}", ".f1hi52o4[data-fui-focus-visible]{border-bottom-color:var(--colorNeutralStroke1);}", ".f1uy0udz{background-color:var(--ctrl-token-ToggleButton-135, var(--semantic-token-ToggleButton-136, var(--colorBrandBackgroundSelected)));}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".fl6npt0{color:var(--ctrl-token-ToggleButton-137, var(--semantic-token-ToggleButton-138, var(--colorNeutralForegroundOnBrand)));}", ".f15oh68g{background-color:var(--ctrl-token-ToggleButton-147, var(--semantic-token-ToggleButton-148, var(--colorSubtleBackgroundSelected)));}", ".f21mm76{color:var(--ctrl-token-ToggleButton-149, var(--semantic-token-ToggleButton-150, var(--colorNeutralForeground2Selected)));}", ".fqs746z{background-color:var(--ctrl-token-ToggleButton-159, var(--semantic-token-ToggleButton-160, var(--colorTransparentBackgroundSelected)));}", ".femyvo7{color:var(--ctrl-token-ToggleButton-161, var(--semantic-token-ToggleButton-162, var(--colorNeutralForeground2BrandSelected)));}"],
156
- h: [".f15sokxw:hover{background-color:var(--ctrl-token-ToggleButton-121, var(--semantic-token-ToggleButton-122, var(--colorNeutralBackground1Hover)));}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".f16ytb1:hover{color:var(--ctrl-token-ToggleButton-123, var(--semantic-token-ToggleButton-124, var(--colorNeutralForeground1Hover)));}", ".f1ofp345:hover:active{background-color:var(--ctrl-token-ToggleButton-125, var(--semantic-token-ToggleButton-126, var(--colorNeutralBackground1Pressed)));}", ".f11v6sdu:hover:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f9yn8i4:hover:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1ajwf28:hover:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1uwu36w:hover:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1scj889:hover:active{color:var(--ctrl-token-ToggleButton-127, var(--semantic-token-ToggleButton-128, var(--colorNeutralForeground1Pressed)));}", ".fjc9ezv:hover{background-color:var(--ctrl-token-ToggleButton-131, var(--semantic-token-ToggleButton-132, var(--colorTransparentBackgroundHover)));}", ".f1isutwh:hover:active{background-color:var(--ctrl-token-ToggleButton-133, var(--semantic-token-ToggleButton-134, var(--colorTransparentBackgroundPressed)));}", ".f1jl89bf:hover{background-color:var(--ctrl-token-ToggleButton-139, var(--semantic-token-ToggleButton-140, var(--colorBrandBackgroundHover)));}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f55wp2b:hover{color:var(--ctrl-token-ToggleButton-141, var(--semantic-token-ToggleButton-142, var(--colorNeutralForegroundOnBrand)));}", ".f13jzei3:hover:active{background-color:var(--ctrl-token-ToggleButton-143, var(--semantic-token-ToggleButton-144, var(--colorBrandBackgroundPressed)));}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".fi40r0w:hover:active{color:var(--ctrl-token-ToggleButton-145, var(--semantic-token-ToggleButton-146, var(--colorNeutralForegroundOnBrand)));}", ".f1y622at:hover{background-color:var(--ctrl-token-ToggleButton-151, var(--semantic-token-ToggleButton-152, var(--colorSubtleBackgroundHover)));}", ".fmfdhz9:hover{color:var(--ctrl-token-ToggleButton-153, var(--semantic-token-ToggleButton-154, var(--colorNeutralForeground2Hover)));}", ".f129df0b:hover:active{background-color:var(--ctrl-token-ToggleButton-155, var(--semantic-token-ToggleButton-156, var(--colorSubtleBackgroundPressed)));}", ".f1dbhjl3:hover:active{color:var(--ctrl-token-ToggleButton-157, var(--semantic-token-ToggleButton-158, var(--colorNeutralForeground2Pressed)));}", ".f1kdwvt:hover{background-color:var(--ctrl-token-ToggleButton-163, var(--semantic-token-ToggleButton-164, var(--colorTransparentBackgroundHover)));}", ".f1uifz6n:hover{color:var(--ctrl-token-ToggleButton-165, var(--semantic-token-ToggleButton-166, var(--colorNeutralForeground2BrandHover)));}", ".fcvsot5:hover:active{background-color:var(--ctrl-token-ToggleButton-167, var(--semantic-token-ToggleButton-168, var(--colorTransparentBackgroundPressed)));}", ".fyf9bfy:hover:active{color:var(--ctrl-token-ToggleButton-169, var(--semantic-token-ToggleButton-170, var(--colorNeutralForeground2BrandPressed)));}"],
155
+ d: [".f1quyamg{background-color:var(--117, var(--118, var(--colorNeutralBackground1Selected)));}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".ftobqpq{color:var(--119, var(--120, var(--colorNeutralForeground1Selected)));}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fxoiby5 .fui-Icon-filled{display:inline;}", ".f15q0o9g .fui-Icon-regular{display:none;}", ".f172tr4g{background-color:var(--129, var(--130, var(--colorTransparentBackgroundSelected)));}", ".fgx37oo{border-top-width:var(--strokeWidthThicker);}", ".f130t4y6{border-right-width:var(--strokeWidthThicker);}", ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}", ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}", ".fcaw57c[data-fui-focus-visible]{border-top-color:var(--colorNeutralStroke1);}", ".fpwd27e[data-fui-focus-visible]{border-right-color:var(--colorNeutralStroke1);}", ".f1999bjr[data-fui-focus-visible]{border-left-color:var(--colorNeutralStroke1);}", ".f1hi52o4[data-fui-focus-visible]{border-bottom-color:var(--colorNeutralStroke1);}", ".f1lf224m{background-color:var(--135, var(--136, var(--colorBrandBackgroundSelected)));}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".fg5qrus{color:var(--137, var(--138, var(--colorNeutralForegroundOnBrand)));}", ".f1ftzvcr{background-color:var(--147, var(--148, var(--colorSubtleBackgroundSelected)));}", ".ffjioa1{color:var(--149, var(--150, var(--colorNeutralForeground2Selected)));}", ".f13l10xp{background-color:var(--159, var(--160, var(--colorTransparentBackgroundSelected)));}", ".f1qj54ry{color:var(--161, var(--162, var(--colorNeutralForeground2BrandSelected)));}"],
156
+ h: [".f1ufrqid:hover{background-color:var(--121, var(--122, var(--colorNeutralBackground1Hover)));}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".frsn5jk:hover{color:var(--123, var(--124, var(--colorNeutralForeground1Hover)));}", ".fld24mq:hover:active{background-color:var(--125, var(--126, var(--colorNeutralBackground1Pressed)));}", ".f11v6sdu:hover:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f9yn8i4:hover:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1ajwf28:hover:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1uwu36w:hover:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f13xdy7n:hover:active{color:var(--127, var(--128, var(--colorNeutralForeground1Pressed)));}", ".fy73arb:hover{background-color:var(--131, var(--132, var(--colorTransparentBackgroundHover)));}", ".f1n3kqpp:hover:active{background-color:var(--133, var(--134, var(--colorTransparentBackgroundPressed)));}", ".fxswv3b:hover{background-color:var(--139, var(--140, var(--colorBrandBackgroundHover)));}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".fuwkukp:hover{color:var(--141, var(--142, var(--colorNeutralForegroundOnBrand)));}", ".f1psmnu2:hover:active{background-color:var(--143, var(--144, var(--colorBrandBackgroundPressed)));}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".f2ivi1s:hover:active{color:var(--145, var(--146, var(--colorNeutralForegroundOnBrand)));}", ".f1d9twxa:hover{background-color:var(--151, var(--152, var(--colorSubtleBackgroundHover)));}", ".f1bnsls0:hover{color:var(--153, var(--154, var(--colorNeutralForeground2Hover)));}", ".f2qeqlu:hover:active{background-color:var(--155, var(--156, var(--colorSubtleBackgroundPressed)));}", ".fmikl02:hover:active{color:var(--157, var(--158, var(--colorNeutralForeground2Pressed)));}", ".f7m7ne2:hover{background-color:var(--163, var(--164, var(--colorTransparentBackgroundHover)));}", ".f1svx1ee:hover{color:var(--165, var(--166, var(--colorNeutralForeground2BrandHover)));}", ".f1qy32lw:hover:active{background-color:var(--167, var(--168, var(--colorTransparentBackgroundPressed)));}", ".fjg449s:hover:active{color:var(--169, var(--170, var(--colorNeutralForeground2BrandPressed)));}"],
157
157
  m: [["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
158
158
  m: "(forced-colors: active)"
159
159
  }], ["@media (forced-colors: active){.f132fbg1{border-top-color:Highlight;}}", {
@@ -195,24 +195,24 @@ const useRootCheckedStyles = /*#__PURE__*/__styles({
195
195
  });
196
196
  const useRootDisabledStyles = /*#__PURE__*/__styles({
197
197
  base: {
198
- De3pzq: "f1k23yoa",
198
+ De3pzq: "f1osjf8k",
199
199
  g2u3we: "f1jj8ep1",
200
200
  h3c5rm: ["f15xbau", "fy0fskl"],
201
201
  B9xav0g: "f4ikngz",
202
202
  zhjwy3: ["fy0fskl", "f15xbau"],
203
- sj55zd: "fjspjct",
204
- Jwef8y: "f1n2t4ql",
203
+ sj55zd: "fvc80cw",
204
+ Jwef8y: "f1drr2o5",
205
205
  Bgoe8wy: "f12mpcsy",
206
206
  Bwzppfd: ["f1gwvigk", "f18rmfxp"],
207
207
  oetu4i: "f1jnshp0",
208
208
  gg5e9n: ["f18rmfxp", "f1gwvigk"],
209
- Bi91k9c: "f1ue51li",
210
- iro3zm: "f1jom5jg",
209
+ Bi91k9c: "fbgtw56",
210
+ iro3zm: "f1skfleq",
211
211
  b661bw: "f10ztigi",
212
212
  Bk6r4ia: ["f1ft5sdu", "f1gzf82w"],
213
213
  B9zn80p: "f12zbtn2",
214
214
  Bpld233: ["f1gzf82w", "f1ft5sdu"],
215
- B2d53fq: "f1sv745"
215
+ B2d53fq: "f1h9k2a9"
216
216
  },
217
217
  outline: {},
218
218
  primary: {
@@ -231,52 +231,52 @@ const useRootDisabledStyles = /*#__PURE__*/__styles({
231
231
  },
232
232
  secondary: {},
233
233
  subtle: {
234
- De3pzq: "fxu8n6m",
234
+ De3pzq: "f1p2r5mf",
235
235
  g2u3we: "f1p3nwhy",
236
236
  h3c5rm: ["f11589ue", "f1pdflbu"],
237
237
  B9xav0g: "f1q5o8ev",
238
238
  zhjwy3: ["f1pdflbu", "f11589ue"],
239
- Jwef8y: "f1jvt5m3",
239
+ Jwef8y: "fi2y0pq",
240
240
  Bgoe8wy: "f1s2uweq",
241
241
  Bwzppfd: ["fr80ssc", "fecsdlb"],
242
242
  oetu4i: "f1ukrpxl",
243
243
  gg5e9n: ["fecsdlb", "fr80ssc"],
244
- iro3zm: "f3n1mc4",
244
+ iro3zm: "fzki9cu",
245
245
  b661bw: "f1h0usnq",
246
246
  Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
247
247
  B9zn80p: "f16h9ulv",
248
248
  Bpld233: ["fx2bmrt", "fs4ktlq"]
249
249
  },
250
250
  transparent: {
251
- De3pzq: "fgg7zh1",
251
+ De3pzq: "f1ps6dp4",
252
252
  g2u3we: "f1p3nwhy",
253
253
  h3c5rm: ["f11589ue", "f1pdflbu"],
254
254
  B9xav0g: "f1q5o8ev",
255
255
  zhjwy3: ["f1pdflbu", "f11589ue"],
256
- Jwef8y: "f1atjbej",
256
+ Jwef8y: "f1599wiw",
257
257
  Bgoe8wy: "f1s2uweq",
258
258
  Bwzppfd: ["fr80ssc", "fecsdlb"],
259
259
  oetu4i: "f1ukrpxl",
260
260
  gg5e9n: ["fecsdlb", "fr80ssc"],
261
- iro3zm: "flu360c",
261
+ iro3zm: "f18qe6cd",
262
262
  b661bw: "f1h0usnq",
263
263
  Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
264
264
  B9zn80p: "f16h9ulv",
265
265
  Bpld233: ["fx2bmrt", "fs4ktlq"]
266
266
  }
267
267
  }, {
268
- d: [".f1k23yoa{background-color:var(--ctrl-token-ToggleButton-171, var(--semantic-token-ToggleButton-172, var(--colorNeutralBackgroundDisabled)));}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fjspjct{color:var(--ctrl-token-ToggleButton-173, var(--semantic-token-ToggleButton-174, var(--colorNeutralForegroundDisabled)));}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".fxu8n6m{background-color:var(--ctrl-token-ToggleButton-183, var(--semantic-token-ToggleButton-184, var(--colorTransparentBackground)));}", ".fgg7zh1{background-color:var(--ctrl-token-ToggleButton-189, var(--semantic-token-ToggleButton-190, var(--colorTransparentBackground)));}"],
269
- h: [".f1n2t4ql:hover{background-color:var(--ctrl-token-ToggleButton-175, var(--semantic-token-ToggleButton-176, var(--colorNeutralBackgroundDisabled)));}", ".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1ue51li:hover{color:var(--ctrl-token-ToggleButton-177, var(--semantic-token-ToggleButton-178, var(--colorNeutralForegroundDisabled)));}", ".f1jom5jg:hover:active{background-color:var(--ctrl-token-ToggleButton-179, var(--semantic-token-ToggleButton-180, var(--colorNeutralBackgroundDisabled)));}", ".f10ztigi:hover:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1ft5sdu:hover:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1gzf82w:hover:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f12zbtn2:hover:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1sv745:hover:active{color:var(--ctrl-token-ToggleButton-181, var(--semantic-token-ToggleButton-182, var(--colorNeutralForegroundDisabled)));}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".f1jvt5m3:hover{background-color:var(--ctrl-token-ToggleButton-185, var(--semantic-token-ToggleButton-186, var(--colorTransparentBackgroundHover)));}", ".f3n1mc4:hover:active{background-color:var(--ctrl-token-ToggleButton-187, var(--semantic-token-ToggleButton-188, var(--colorTransparentBackgroundPressed)));}", ".f1atjbej:hover{background-color:var(--ctrl-token-ToggleButton-191, var(--semantic-token-ToggleButton-192, var(--colorTransparentBackgroundHover)));}", ".flu360c:hover:active{background-color:var(--ctrl-token-ToggleButton-193, var(--semantic-token-ToggleButton-194, var(--colorTransparentBackgroundPressed)));}"]
268
+ d: [".f1osjf8k{background-color:var(--171, var(--172, var(--colorNeutralBackgroundDisabled)));}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fvc80cw{color:var(--173, var(--174, var(--colorNeutralForegroundDisabled)));}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1p2r5mf{background-color:var(--183, var(--184, var(--colorTransparentBackground)));}", ".f1ps6dp4{background-color:var(--189, var(--190, var(--colorTransparentBackground)));}"],
269
+ h: [".f1drr2o5:hover{background-color:var(--175, var(--176, var(--colorNeutralBackgroundDisabled)));}", ".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fbgtw56:hover{color:var(--177, var(--178, var(--colorNeutralForegroundDisabled)));}", ".f1skfleq:hover:active{background-color:var(--179, var(--180, var(--colorNeutralBackgroundDisabled)));}", ".f10ztigi:hover:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1ft5sdu:hover:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1gzf82w:hover:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f12zbtn2:hover:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1h9k2a9:hover:active{color:var(--181, var(--182, var(--colorNeutralForegroundDisabled)));}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".fi2y0pq:hover{background-color:var(--185, var(--186, var(--colorTransparentBackgroundHover)));}", ".fzki9cu:hover:active{background-color:var(--187, var(--188, var(--colorTransparentBackgroundPressed)));}", ".f1599wiw:hover{background-color:var(--191, var(--192, var(--colorTransparentBackgroundHover)));}", ".f18qe6cd:hover:active{background-color:var(--193, var(--194, var(--colorTransparentBackgroundPressed)));}"]
270
270
  });
271
271
  const useIconCheckedStyles = /*#__PURE__*/__styles({
272
272
  subtleOrTransparent: {
273
- sj55zd: "f9x7xpk"
273
+ sj55zd: "f1hg606s"
274
274
  },
275
275
  highContrast: {
276
276
  ycbfsm: "fg4l7m0"
277
277
  }
278
278
  }, {
279
- d: [".f9x7xpk{color:var(--ctrl-token-ToggleButton-195, var(--semantic-token-ToggleButton-196, var(--colorNeutralForeground2BrandSelected)));}"],
279
+ d: [".f1hg606s{color:var(--195, var(--196, var(--colorNeutralForeground2BrandSelected)));}"],
280
280
  m: [["@media (forced-colors: active){.fg4l7m0{forced-color-adjust:auto;}}", {
281
281
  m: "(forced-colors: active)"
282
282
  }]]
package/lib/components/ToggleButton/useToggleButtonStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","__styles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","D0sxk3","t6yez3","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","B2d53fq","highContrast","Bsw6fvg","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Bbusuzp","ycbfsm","Bqrx1nm","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","ze5xyy","g2kj27","Bf756sw","Bow2dr7","Bvhedfk","Gye4lf","pc6evw","F3bflw","mxns5l","B0tp99d","l9kbep","Bg4echp","o3nasb","B55dcl7","By5cl00","Bnk1xnq","gdbnj","Bw5jppy","B8jyv7h","ka51wi","G867l3","abbn9y","Btyszwp","Bi9mhhg","B7d2ofm","outline","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","primary","secondary","subtle","transparent","d","h","m","p","useRootDisabledStyles","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","className"],"sources":["useToggleButtonStyles.styles.js"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const toggleButtonClassNames = {\n root: 'fui-ToggleButton',\n icon: 'fui-ToggleButton__icon'\n};\nconst useRootCheckedStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: `var(--ctrl-token-ToggleButton-117, var(--semantic-token-ToggleButton-118, ${tokens.colorNeutralBackground1Selected}))`,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n color: `var(--ctrl-token-ToggleButton-119, var(--semantic-token-ToggleButton-120, ${tokens.colorNeutralForeground1Selected}))`,\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n },\n ':hover': {\n backgroundColor: `var(--ctrl-token-ToggleButton-121, var(--semantic-token-ToggleButton-122, ${tokens.colorNeutralBackground1Hover}))`,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: `var(--ctrl-token-ToggleButton-123, var(--semantic-token-ToggleButton-124, ${tokens.colorNeutralForeground1Hover}))`\n },\n ':hover:active': {\n backgroundColor: `var(--ctrl-token-ToggleButton-125, var(--semantic-token-ToggleButton-126, ${tokens.colorNeutralBackground1Pressed}))`,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: `var(--ctrl-token-ToggleButton-127, var(--semantic-token-ToggleButton-128, ${tokens.colorNeutralForeground1Pressed}))`\n }\n },\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('Highlight'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight'\n },\n ':hover:active': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight'\n },\n ':focus': {\n border: '1px solid HighlightText',\n outlineColor: 'Highlight'\n }\n }\n },\n // Appearance variations\n outline: {\n backgroundColor: `var(--ctrl-token-ToggleButton-129, var(--semantic-token-ToggleButton-130, ${tokens.colorTransparentBackgroundSelected}))`,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n ':hover': {\n backgroundColor: `var(--ctrl-token-ToggleButton-131, var(--semantic-token-ToggleButton-132, ${tokens.colorTransparentBackgroundHover}))`\n },\n ':hover:active': {\n backgroundColor: `var(--ctrl-token-ToggleButton-133, var(--semantic-token-ToggleButton-134, ${tokens.colorTransparentBackgroundPressed}))`\n },\n ...createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n })\n },\n primary: {\n backgroundColor: `var(--ctrl-token-ToggleButton-135, var(--semantic-token-ToggleButton-136, ${tokens.colorBrandBackgroundSelected}))`,\n ...shorthands.borderColor('transparent'),\n color: `var(--ctrl-token-ToggleButton-137, var(--semantic-token-ToggleButton-138, ${tokens.colorNeutralForegroundOnBrand}))`,\n ':hover': {\n backgroundColor: `var(--ctrl-token-ToggleButton-139, var(--semantic-token-ToggleButton-140, ${tokens.colorBrandBackgroundHover}))`,\n ...shorthands.borderColor('transparent'),\n color: `var(--ctrl-token-ToggleButton-141, var(--semantic-token-ToggleButton-142, ${tokens.colorNeutralForegroundOnBrand}))`\n },\n ':hover:active': {\n backgroundColor: `var(--ctrl-token-ToggleButton-143, var(--semantic-token-ToggleButton-144, ${tokens.colorBrandBackgroundPressed}))`,\n ...shorthands.borderColor('transparent'),\n color: `var(--ctrl-token-ToggleButton-145, var(--semantic-token-ToggleButton-146, ${tokens.colorNeutralForegroundOnBrand}))`\n }\n },\n secondary: {\n },\n subtle: {\n backgroundColor: `var(--ctrl-token-ToggleButton-147, var(--semantic-token-ToggleButton-148, ${tokens.colorSubtleBackgroundSelected}))`,\n ...shorthands.borderColor('transparent'),\n color: `var(--ctrl-token-ToggleButton-149, var(--semantic-token-ToggleButton-150, ${tokens.colorNeutralForeground2Selected}))`,\n ':hover': {\n backgroundColor: `var(--ctrl-token-ToggleButton-151, var(--semantic-token-ToggleButton-152, ${tokens.colorSubtleBackgroundHover}))`,\n ...shorthands.borderColor('transparent'),\n color: `var(--ctrl-token-ToggleButton-153, var(--semantic-token-ToggleButton-154, ${tokens.colorNeutralForeground2Hover}))`\n },\n ':hover:active': {\n backgroundColor: `var(--ctrl-token-ToggleButton-155, var(--semantic-token-ToggleButton-156, ${tokens.colorSubtleBackgroundPressed}))`,\n ...shorthands.borderColor('transparent'),\n color: `var(--ctrl-token-ToggleButton-157, var(--semantic-token-ToggleButton-158, ${tokens.colorNeutralForeground2Pressed}))`\n }\n },\n transparent: {\n backgroundColor: `var(--ctrl-token-ToggleButton-159, var(--semantic-token-ToggleButton-160, ${tokens.colorTransparentBackgroundSelected}))`,\n ...shorthands.borderColor('transparent'),\n color: `var(--ctrl-token-ToggleButton-161, var(--semantic-token-ToggleButton-162, ${tokens.colorNeutralForeground2BrandSelected}))`,\n ':hover': {\n backgroundColor: `var(--ctrl-token-ToggleButton-163, var(--semantic-token-ToggleButton-164, ${tokens.colorTransparentBackgroundHover}))`,\n ...shorthands.borderColor('transparent'),\n color: `var(--ctrl-token-ToggleButton-165, var(--semantic-token-ToggleButton-166, ${tokens.colorNeutralForeground2BrandHover}))`\n },\n ':hover:active': {\n backgroundColor: `var(--ctrl-token-ToggleButton-167, var(--semantic-token-ToggleButton-168, ${tokens.colorTransparentBackgroundPressed}))`,\n ...shorthands.borderColor('transparent'),\n color: `var(--ctrl-token-ToggleButton-169, var(--semantic-token-ToggleButton-170, ${tokens.colorNeutralForeground2BrandPressed}))`\n }\n }\n});\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: `var(--ctrl-token-ToggleButton-171, var(--semantic-token-ToggleButton-172, ${tokens.colorNeutralBackgroundDisabled}))`,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: `var(--ctrl-token-ToggleButton-173, var(--semantic-token-ToggleButton-174, ${tokens.colorNeutralForegroundDisabled}))`,\n ':hover': {\n backgroundColor: `var(--ctrl-token-ToggleButton-175, var(--semantic-token-ToggleButton-176, ${tokens.colorNeutralBackgroundDisabled}))`,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: `var(--ctrl-token-ToggleButton-177, var(--semantic-token-ToggleButton-178, ${tokens.colorNeutralForegroundDisabled}))`\n },\n ':hover:active': {\n backgroundColor: `var(--ctrl-token-ToggleButton-179, var(--semantic-token-ToggleButton-180, ${tokens.colorNeutralBackgroundDisabled}))`,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: `var(--ctrl-token-ToggleButton-181, var(--semantic-token-ToggleButton-182, ${tokens.colorNeutralForegroundDisabled}))`\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n ':hover': {\n ...shorthands.borderColor('transparent')\n },\n ':hover:active': {\n ...shorthands.borderColor('transparent')\n }\n },\n secondary: {\n },\n subtle: {\n backgroundColor: `var(--ctrl-token-ToggleButton-183, var(--semantic-token-ToggleButton-184, ${tokens.colorTransparentBackground}))`,\n ...shorthands.borderColor('transparent'),\n ':hover': {\n backgroundColor: `var(--ctrl-token-ToggleButton-185, var(--semantic-token-ToggleButton-186, ${tokens.colorTransparentBackgroundHover}))`,\n ...shorthands.borderColor('transparent')\n },\n ':hover:active': {\n backgroundColor: `var(--ctrl-token-ToggleButton-187, var(--semantic-token-ToggleButton-188, ${tokens.colorTransparentBackgroundPressed}))`,\n ...shorthands.borderColor('transparent')\n }\n },\n transparent: {\n backgroundColor: `var(--ctrl-token-ToggleButton-189, var(--semantic-token-ToggleButton-190, ${tokens.colorTransparentBackground}))`,\n ...shorthands.borderColor('transparent'),\n ':hover': {\n backgroundColor: `var(--ctrl-token-ToggleButton-191, var(--semantic-token-ToggleButton-192, ${tokens.colorTransparentBackgroundHover}))`,\n ...shorthands.borderColor('transparent')\n },\n ':hover:active': {\n backgroundColor: `var(--ctrl-token-ToggleButton-193, var(--semantic-token-ToggleButton-194, ${tokens.colorTransparentBackgroundPressed}))`,\n ...shorthands.borderColor('transparent')\n }\n }\n});\nconst useIconCheckedStyles = makeStyles({\n // Appearance variations\n subtleOrTransparent: {\n color: `var(--ctrl-token-ToggleButton-195, var(--semantic-token-ToggleButton-196, ${tokens.colorNeutralForeground2BrandSelected}))`\n },\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'auto'\n }\n }\n});\nconst usePrimaryHighContrastStyles = makeStyles({\n // Do not use primary variant high contrast styles for toggle buttons\n // otherwise there isn't enough difference between on/off states\n base: {\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('ButtonBorder'),\n color: 'ButtonText',\n forcedColorAdjust: 'auto'\n }\n },\n disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n ':focus': {\n ...shorthands.borderColor('GrayText')\n }\n }\n }\n});\nexport const useToggleButtonStyles_unstable = (state)=>{\n 'use no memo';\n const rootCheckedStyles = useRootCheckedStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n const { appearance, checked, disabled, disabledFocusable } = state;\n state.root.className = mergeClasses(toggleButtonClassNames.root, // Primary high contrast styles\n appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, // Checked styles\n checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // User provided class name\n state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(toggleButtonClassNames.icon, checked && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);\n }\n useButtonStyles_unstable(state);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","__styles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","D0sxk3","t6yez3","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","B2d53fq","highContrast","Bsw6fvg","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Bbusuzp","ycbfsm","Bqrx1nm","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","ze5xyy","g2kj27","Bf756sw","Bow2dr7","Bvhedfk","Gye4lf","pc6evw","F3bflw","mxns5l","B0tp99d","l9kbep","Bg4echp","o3nasb","B55dcl7","By5cl00","Bnk1xnq","gdbnj","Bw5jppy","B8jyv7h","ka51wi","G867l3","abbn9y","Btyszwp","Bi9mhhg","B7d2ofm","outline","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","primary","secondary","subtle","transparent","d","h","m","p","useRootDisabledStyles","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","className"],"sources":["useToggleButtonStyles.styles.js"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const toggleButtonClassNames = {\n root: 'fui-ToggleButton',\n icon: 'fui-ToggleButton__icon'\n};\nconst useRootCheckedStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: `var(--117, var(--118, ${tokens.colorNeutralBackground1Selected}))`,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n color: `var(--119, var(--120, ${tokens.colorNeutralForeground1Selected}))`,\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n },\n ':hover': {\n backgroundColor: `var(--121, var(--122, ${tokens.colorNeutralBackground1Hover}))`,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: `var(--123, var(--124, ${tokens.colorNeutralForeground1Hover}))`\n },\n ':hover:active': {\n backgroundColor: `var(--125, var(--126, ${tokens.colorNeutralBackground1Pressed}))`,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: `var(--127, var(--128, ${tokens.colorNeutralForeground1Pressed}))`\n }\n },\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('Highlight'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight'\n },\n ':hover:active': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight'\n },\n ':focus': {\n border: '1px solid HighlightText',\n outlineColor: 'Highlight'\n }\n }\n },\n // Appearance variations\n outline: {\n backgroundColor: `var(--129, var(--130, ${tokens.colorTransparentBackgroundSelected}))`,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n ':hover': {\n backgroundColor: `var(--131, var(--132, ${tokens.colorTransparentBackgroundHover}))`\n },\n ':hover:active': {\n backgroundColor: `var(--133, var(--134, ${tokens.colorTransparentBackgroundPressed}))`\n },\n ...createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n })\n },\n primary: {\n backgroundColor: `var(--135, var(--136, ${tokens.colorBrandBackgroundSelected}))`,\n ...shorthands.borderColor('transparent'),\n color: `var(--137, var(--138, ${tokens.colorNeutralForegroundOnBrand}))`,\n ':hover': {\n backgroundColor: `var(--139, var(--140, ${tokens.colorBrandBackgroundHover}))`,\n ...shorthands.borderColor('transparent'),\n color: `var(--141, var(--142, ${tokens.colorNeutralForegroundOnBrand}))`\n },\n ':hover:active': {\n backgroundColor: `var(--143, var(--144, ${tokens.colorBrandBackgroundPressed}))`,\n ...shorthands.borderColor('transparent'),\n color: `var(--145, var(--146, ${tokens.colorNeutralForegroundOnBrand}))`\n }\n },\n secondary: {\n },\n subtle: {\n backgroundColor: `var(--147, var(--148, ${tokens.colorSubtleBackgroundSelected}))`,\n ...shorthands.borderColor('transparent'),\n color: `var(--149, var(--150, ${tokens.colorNeutralForeground2Selected}))`,\n ':hover': {\n backgroundColor: `var(--151, var(--152, ${tokens.colorSubtleBackgroundHover}))`,\n ...shorthands.borderColor('transparent'),\n color: `var(--153, var(--154, ${tokens.colorNeutralForeground2Hover}))`\n },\n ':hover:active': {\n backgroundColor: `var(--155, var(--156, ${tokens.colorSubtleBackgroundPressed}))`,\n ...shorthands.borderColor('transparent'),\n color: `var(--157, var(--158, ${tokens.colorNeutralForeground2Pressed}))`\n }\n },\n transparent: {\n backgroundColor: `var(--159, var(--160, ${tokens.colorTransparentBackgroundSelected}))`,\n ...shorthands.borderColor('transparent'),\n color: `var(--161, var(--162, ${tokens.colorNeutralForeground2BrandSelected}))`,\n ':hover': {\n backgroundColor: `var(--163, var(--164, ${tokens.colorTransparentBackgroundHover}))`,\n ...shorthands.borderColor('transparent'),\n color: `var(--165, var(--166, ${tokens.colorNeutralForeground2BrandHover}))`\n },\n ':hover:active': {\n backgroundColor: `var(--167, var(--168, ${tokens.colorTransparentBackgroundPressed}))`,\n ...shorthands.borderColor('transparent'),\n color: `var(--169, var(--170, ${tokens.colorNeutralForeground2BrandPressed}))`\n }\n }\n});\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: `var(--171, var(--172, ${tokens.colorNeutralBackgroundDisabled}))`,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: `var(--173, var(--174, ${tokens.colorNeutralForegroundDisabled}))`,\n ':hover': {\n backgroundColor: `var(--175, var(--176, ${tokens.colorNeutralBackgroundDisabled}))`,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: `var(--177, var(--178, ${tokens.colorNeutralForegroundDisabled}))`\n },\n ':hover:active': {\n backgroundColor: `var(--179, var(--180, ${tokens.colorNeutralBackgroundDisabled}))`,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: `var(--181, var(--182, ${tokens.colorNeutralForegroundDisabled}))`\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n ':hover': {\n ...shorthands.borderColor('transparent')\n },\n ':hover:active': {\n ...shorthands.borderColor('transparent')\n }\n },\n secondary: {\n },\n subtle: {\n backgroundColor: `var(--183, var(--184, ${tokens.colorTransparentBackground}))`,\n ...shorthands.borderColor('transparent'),\n ':hover': {\n backgroundColor: `var(--185, var(--186, ${tokens.colorTransparentBackgroundHover}))`,\n ...shorthands.borderColor('transparent')\n },\n ':hover:active': {\n backgroundColor: `var(--187, var(--188, ${tokens.colorTransparentBackgroundPressed}))`,\n ...shorthands.borderColor('transparent')\n }\n },\n transparent: {\n backgroundColor: `var(--189, var(--190, ${tokens.colorTransparentBackground}))`,\n ...shorthands.borderColor('transparent'),\n ':hover': {\n backgroundColor: `var(--191, var(--192, ${tokens.colorTransparentBackgroundHover}))`,\n ...shorthands.borderColor('transparent')\n },\n ':hover:active': {\n backgroundColor: `var(--193, var(--194, ${tokens.colorTransparentBackgroundPressed}))`,\n ...shorthands.borderColor('transparent')\n }\n }\n});\nconst useIconCheckedStyles = makeStyles({\n // Appearance variations\n subtleOrTransparent: {\n color: `var(--195, var(--196, ${tokens.colorNeutralForeground2BrandSelected}))`\n },\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'auto'\n }\n }\n});\nconst usePrimaryHighContrastStyles = makeStyles({\n // Do not use primary variant high contrast styles for toggle buttons\n // otherwise there isn't enough difference between on/off states\n base: {\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('ButtonBorder'),\n color: 'ButtonText',\n forcedColorAdjust: 'auto'\n }\n },\n disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n ':focus': {\n ...shorthands.borderColor('GrayText')\n }\n }\n }\n});\nexport const useToggleButtonStyles_unstable = (state)=>{\n 'use no memo';\n const rootCheckedStyles = useRootCheckedStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n const { appearance, checked, disabled, disabledFocusable } = state;\n state.root.className = mergeClasses(toggleButtonClassNames.root, // Primary high contrast styles\n appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, // Checked styles\n checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // User provided class name\n state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(toggleButtonClassNames.icon, checked && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);\n }\n useButtonStyles_unstable(state);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}