@charcoal-ui/react 6.0.0-beta.1 → 6.0.0-rc.0

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 (87) hide show
  1. package/dist/components/Icon/index.d.ts +14 -1
  2. package/dist/components/Icon/index.d.ts.map +1 -1
  3. package/dist/components/Pagination/index.d.ts.map +1 -1
  4. package/dist/index.cjs +2 -2
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.css +161 -155
  7. package/dist/index.js +2 -2
  8. package/dist/index.js.map +1 -1
  9. package/dist/layered.css +161 -155
  10. package/dist/layered.css.map +1 -1
  11. package/package.json +5 -5
  12. package/src/__tests__/css-output.test.ts +1 -2
  13. package/src/__tests__/css-variables.test.ts +66 -0
  14. package/src/components/Button/__snapshots__/index.css.snap +30 -30
  15. package/src/components/Button/index.css +30 -30
  16. package/src/components/Button/index.story.tsx +18 -0
  17. package/src/components/Checkbox/CheckboxInput/index.css +10 -10
  18. package/src/components/Checkbox/__snapshots__/index.css.snap +1 -1
  19. package/src/components/Checkbox/index.css +1 -1
  20. package/src/components/Checkbox/index.story.tsx +18 -0
  21. package/src/components/Clickable/index.story.tsx +14 -0
  22. package/src/components/DropdownSelector/DropdownMenuItem/index.css +3 -3
  23. package/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot +2 -0
  24. package/src/components/DropdownSelector/ListItem/index.css +1 -1
  25. package/src/components/DropdownSelector/MenuItemGroup/index.css +1 -1
  26. package/src/components/DropdownSelector/Popover/index.css +2 -2
  27. package/src/components/DropdownSelector/__snapshots__/index.css.snap +6 -6
  28. package/src/components/DropdownSelector/__snapshots__/index.story.storyshot +26 -13
  29. package/src/components/DropdownSelector/index.css +6 -6
  30. package/src/components/DropdownSelector/index.story.tsx +49 -0
  31. package/src/components/FieldLabel/__snapshots__/index.css.snap +3 -3
  32. package/src/components/FieldLabel/index.css +3 -3
  33. package/src/components/HintText/__snapshots__/index.css.snap +3 -3
  34. package/src/components/HintText/__snapshots__/index.story.storyshot +4 -0
  35. package/src/components/HintText/index.css +3 -3
  36. package/src/components/HintText/index.story.tsx +12 -0
  37. package/src/components/Icon/__snapshots__/index.story.storyshot +2 -0
  38. package/src/components/Icon/index.browser.test.tsx +280 -0
  39. package/src/components/Icon/index.test.tsx +94 -0
  40. package/src/components/Icon/index.tsx +49 -4
  41. package/src/components/IconButton/__snapshots__/index.css.snap +16 -16
  42. package/src/components/IconButton/__snapshots__/index.story.storyshot +6 -0
  43. package/src/components/IconButton/index.css +16 -16
  44. package/src/components/IconButton/index.story.tsx +15 -0
  45. package/src/components/LoadingSpinner/__snapshots__/index.css.snap +7 -7
  46. package/src/components/LoadingSpinner/index.css +7 -7
  47. package/src/components/LoadingSpinner/index.story.tsx +13 -0
  48. package/src/components/Modal/Dialog/index.css +1 -1
  49. package/src/components/Modal/ModalPlumbing.css +1 -1
  50. package/src/components/Modal/__snapshots__/index.css.snap +2 -2
  51. package/src/components/Modal/__snapshots__/index.story.storyshot +12 -2
  52. package/src/components/Modal/index.css +2 -2
  53. package/src/components/Modal/index.story.tsx +20 -0
  54. package/src/components/MultiSelect/__snapshots__/index.css.snap +10 -10
  55. package/src/components/MultiSelect/__snapshots__/index.story.storyshot +32 -0
  56. package/src/components/MultiSelect/index.css +10 -10
  57. package/src/components/MultiSelect/index.story.tsx +50 -0
  58. package/src/components/MultiSelect/index.tsx +1 -1
  59. package/src/components/Pagination/Pagination.story.tsx +11 -0
  60. package/src/components/Pagination/__snapshots__/index.css.snap +12 -15
  61. package/src/components/Pagination/index.css +12 -14
  62. package/src/components/Pagination/index.tsx +2 -1
  63. package/src/components/Radio/RadioInput/index.css +10 -10
  64. package/src/components/Radio/__snapshots__/index.css.snap +1 -1
  65. package/src/components/Radio/index.css +1 -1
  66. package/src/components/Radio/index.story.tsx +40 -0
  67. package/src/components/SegmentedControl/__snapshots__/index.css.snap +4 -4
  68. package/src/components/SegmentedControl/index.css +4 -4
  69. package/src/components/SegmentedControl/index.story.tsx +20 -0
  70. package/src/components/Switch/SwitchInput/index.css +9 -9
  71. package/src/components/Switch/__snapshots__/index.css.snap +1 -1
  72. package/src/components/Switch/index.css +1 -1
  73. package/src/components/Switch/index.story.tsx +19 -0
  74. package/src/components/TagItem/__snapshots__/index.css.snap +5 -4
  75. package/src/components/TagItem/__snapshots__/index.story.storyshot +2 -0
  76. package/src/components/TagItem/index.css +5 -4
  77. package/src/components/TagItem/index.story.tsx +17 -0
  78. package/src/components/TextArea/TextArea.story.tsx +30 -0
  79. package/src/components/TextArea/__snapshots__/index.css.snap +7 -5
  80. package/src/components/TextArea/index.css +8 -5
  81. package/src/components/TextEllipsis/__snapshots__/index.css.snap +3 -0
  82. package/src/components/TextEllipsis/index.css +4 -0
  83. package/src/components/TextField/AssistiveText/index.css +2 -2
  84. package/src/components/TextField/TextField.story.tsx +30 -0
  85. package/src/components/TextField/__snapshots__/TextField.story.storyshot +2 -0
  86. package/src/components/TextField/__snapshots__/index.css.snap +6 -6
  87. package/src/components/TextField/index.css +6 -6
package/dist/layered.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["<no source>","index.css"],"names":[],"mappings":"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","file":"layered.css","sourcesContent":[null,".charcoal-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: transparent;\n box-sizing: border-box;\n padding: 0 24px;\n border-style: none;\n outline: none;\n text-rendering: inherit;\n letter-spacing: inherit;\n word-spacing: inherit;\n text-decoration: none;\n font: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n width: -moz-min-content;\n width: min-content;\n display: inline-grid;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n white-space: nowrap;\n border-radius: 999999px;\n font-size: 14px;\n line-height: 22px;\n font-weight: bold;\n color: var(--charcoal-text2);\n background-color: var(--charcoal-surface3);\n transition:\n 0.2s color,\n 0.2s background-color,\n 0.2s box-shadow;\n height: 40px;\n}\n\n .charcoal-button:disabled,\n .charcoal-button[aria-disabled]:not([aria-disabled='false']) {\n cursor: default;\n opacity: 0.32;\n }\n\n .charcoal-button:not(:disabled):not([aria-disabled]):focus-visible,\n .charcoal-button[aria-disabled='false']:focus-visible {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n .charcoal-button:not(:disabled):not([aria-disabled]):hover,\n .charcoal-button[aria-disabled='false']:hover {\n color: var(--charcoal-text2-hover);\n background-color: var(--charcoal-surface3-hover);\n }\n\n .charcoal-button:not(:disabled):not([aria-disabled]):active,\n .charcoal-button[aria-disabled='false']:active,\n .charcoal-button[data-active='true'] {\n color: var(--charcoal-text2-press);\n background-color: var(--charcoal-surface3-press);\n }\n\n .charcoal-button[data-variant='Primary'] {\n color: var(--charcoal-text5);\n background-color: var(--charcoal-brand);\n }\n\n .charcoal-button[data-variant='Primary']:hover:not(:disabled):not([aria-disabled]),\n .charcoal-button[data-variant='Primary']:hover[aria-disabled='false'] {\n color: var(--charcoal-text5-hover);\n background-color: var(--charcoal-brand-hover);\n }\n\n .charcoal-button[data-variant='Primary']:active:not(:disabled):not([aria-disabled]),\n .charcoal-button[data-variant='Primary']:active[aria-disabled='false'],\n .charcoal-button[data-variant='Primary'][data-active='true'] {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-brand-press);\n }\n\n .charcoal-button[data-variant='Overlay'] {\n color: var(--charcoal-text5);\n background-color: var(--charcoal-surface4);\n }\n\n .charcoal-button[data-variant='Overlay']:hover:not(:disabled):not([aria-disabled]),\n .charcoal-button[data-variant='Overlay']:hover[aria-disabled='false'] {\n color: var(--charcoal-text5-hover);\n background-color: var(--charcoal-surface4-hover);\n }\n\n .charcoal-button[data-variant='Overlay']:active:not(:disabled):not([aria-disabled]),\n .charcoal-button[data-variant='Overlay']:active[aria-disabled='false'],\n .charcoal-button[data-variant='Overlay'][data-active='true'] {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-surface4-press);\n }\n\n .charcoal-button[data-variant='Navigation'] {\n color: var(--charcoal-text5);\n background-color: var(--charcoal-surface6);\n }\n\n .charcoal-button[data-variant='Navigation']:hover:not(:disabled):not([aria-disabled]),\n .charcoal-button[data-variant='Navigation']:hover[aria-disabled='false'] {\n color: var(--charcoal-text5-hover);\n background-color: var(--charcoal-surface6-hover);\n }\n\n .charcoal-button[data-variant='Navigation']:active:not(:disabled):not([aria-disabled]),\n .charcoal-button[data-variant='Navigation']:active[aria-disabled='false'],\n .charcoal-button[data-variant='Navigation'][data-active='true'] {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-surface6-press);\n }\n\n .charcoal-button[data-variant='Danger'] {\n color: var(--charcoal-text5);\n background-color: var(--charcoal-assertive);\n }\n\n .charcoal-button[data-variant='Danger']:hover:not(:disabled):not([aria-disabled]),\n .charcoal-button[data-variant='Danger']:hover[aria-disabled='false'] {\n color: var(--charcoal-text5-hover);\n background-color: var(--charcoal-assertive-hover);\n }\n\n .charcoal-button[data-variant='Danger']:active:not(:disabled):not([aria-disabled]),\n .charcoal-button[data-variant='Danger']:active[aria-disabled='false'],\n .charcoal-button[data-variant='Danger'][data-active='true'] {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-assertive-press);\n }\n\n .charcoal-button[data-size='S'] {\n padding: 0 16px;\n height: 32px;\n }\n\n .charcoal-button[data-full-width='true'] {\n width: 100%;\n }\n.charcoal-clickable {\n cursor: pointer;\n\n /* Reset button appearance */\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: transparent;\n padding: 0;\n border-style: none;\n outline: none;\n color: inherit;\n text-rendering: inherit;\n letter-spacing: inherit;\n word-spacing: inherit;\n text-decoration: none;\n\n /* Change the font styles in all browsers. */\n font: inherit;\n\n /* Remove the margin in Firefox and Safari. */\n margin: 0;\n\n /* Show the overflow in Edge. */\n overflow: visible;\n\n /* Remove the inheritance of text transform in Firefox. */\n text-transform: none;\n}\n\n .charcoal-clickable:disabled,\n .charcoal-clickable[aria-disabled]:not([aria-disabled='false']) {\n cursor: default;\n }\n\n .charcoal-clickable:focus {\n outline: none;\n }\n\n .charcoal-clickable::-moz-focus-inner {\n border-style: none;\n padding: 0;\n }\n.charcoal-icon-button {\n cursor: pointer;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: transparent;\n padding: 0;\n border-style: none;\n outline: none;\n color: inherit;\n text-rendering: inherit;\n letter-spacing: inherit;\n word-spacing: inherit;\n text-decoration: none;\n font: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n\n -webkit-user-select: none;\n\n -moz-user-select: none;\n\n user-select: none;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 999999px;\n transition:\n 0.2s background-color,\n 0.2s box-shadow;\n}\n\n .charcoal-icon-button:disabled,\n .charcoal-icon-button[aria-disabled]:not([aria-disabled='false']) {\n cursor: default;\n opacity: 0.32;\n }\n\n .charcoal-icon-button:focus {\n outline: none;\n }\n\n .charcoal-icon-button::-moz-focus-inner {\n border-style: none;\n padding: 0;\n }\n\n .charcoal-icon-button[data-size='XS'] {\n width: 20px;\n height: 20px;\n }\n\n .charcoal-icon-button[data-size='S'] {\n width: 32px;\n height: 32px;\n }\n\n .charcoal-icon-button[data-size='M'] {\n width: 40px;\n height: 40px;\n }\n\n .charcoal-icon-button[data-variant='Default'] {\n color: var(--charcoal-text3);\n background-color: var(--charcoal-transparent);\n }\n\n .charcoal-icon-button[data-variant='Default'][data-active='true']:not(:disabled):not([aria-disabled]),\n .charcoal-icon-button[data-variant='Default'][data-active='true'][aria-disabled='false'] {\n color: var(--charcoal-text3-press);\n background-color: var(--charcoal-transparent-press);\n }\n\n .charcoal-icon-button[data-variant='Default'][data-active='false']:not(:disabled):not([aria-disabled]):hover,\n .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:hover {\n color: var(--charcoal-text3-hover);\n background-color: var(--charcoal-transparent-hover);\n }\n\n .charcoal-icon-button[data-variant='Default'][data-active='false']:not(:disabled):not([aria-disabled]):active,\n .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:active {\n color: var(--charcoal-text3-press);\n background-color: var(--charcoal-transparent-press);\n }\n\n .charcoal-icon-button[data-variant='Overlay'] {\n color: var(--charcoal-text5);\n background-color: var(--charcoal-surface4);\n }\n\n .charcoal-icon-button[data-variant='Overlay'][data-active='true']:not(:disabled):not([aria-disabled]),\n .charcoal-icon-button[data-variant='Overlay'][data-active='true'][aria-disabled='false'] {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-surface4-press);\n }\n\n .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(:disabled):not([aria-disabled]):hover,\n .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:hover {\n color: var(--charcoal-text5-hover);\n background-color: var(--charcoal-surface4-hover);\n }\n\n .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(:disabled):not([aria-disabled]):active,\n .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:active {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-surface4-press);\n }\n\n .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus,\n .charcoal-icon-button[aria-disabled='false']:focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus-visible,\n .charcoal-icon-button[aria-disabled='false']:focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),\n .charcoal-icon-button[aria-disabled='false']:focus:not(:focus-visible) {\n box-shadow: none;\n }\n.charcoal-radio__label {\n display: grid;\n grid-template-columns: auto 1fr;\n grid-gap: 4px;\n align-items: center;\n cursor: pointer;\n}\n\n .charcoal-radio__label[aria-disabled]:not([aria-disabled='false']) {\n opacity: 0.32;\n cursor: default;\n }\n\n.charcoal-radio__label_div {\n font-size: 14px;\n line-height: 22px;\n color: var(--charcoal-text2);\n}\n.charcoal-radio-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: block;\n box-sizing: border-box;\n\n margin: 0;\n padding: 6px;\n\n width: 20px;\n height: 20px;\n cursor: pointer;\n border-radius: 999999px;\n background-color: var(--charcoal-surface1);\n transition:\n 0.2s background-color,\n 0.2s box-shadow;\n}\n\n.charcoal-radio-input:checked {\n background-color: var(--charcoal-brand);\n}\n\n.charcoal-radio-input:checked::after {\n content: '';\n display: block;\n width: 8px;\n height: 8px;\n pointer-events: none;\n background-color: var(--charcoal-text5);\n border-radius: 999999px;\n transition:\n 0.2s background-color,\n 0.2s box-shadow;\n}\n\n.charcoal-radio-input:not(:checked) {\n border-width: 2px;\n border-style: solid;\n border-color: var(--charcoal-text3);\n}\n\n.charcoal-radio-input:disabled {\n cursor: default;\n}\n\n.charcoal-radio-input:not(:disabled):hover {\n background-color: var(--charcoal-surface1-hover);\n}\n\n.charcoal-radio-input:not(:disabled):active {\n background-color: var(--charcoal-surface1-press);\n}\n\n.charcoal-radio-input:not(:disabled):focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n\n.charcoal-radio-input:not(:disabled):focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n\n.charcoal-radio-input:not(:disabled):focus:not(:focus-visible) {\n box-shadow: none;\n}\n\n.charcoal-radio-input:not(:disabled)[aria-invalid='true'],\n.charcoal-radio-input:not(:disabled)[aria-invalid='true']:focus {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n}\n\n.charcoal-radio-input:checked:not(:disabled):hover {\n background-color: var(--charcoal-brand-hover);\n}\n\n.charcoal-radio-input:checked:not(:disabled):hover::after {\n background-color: var(--charcoal-text5-hover);\n}\n\n.charcoal-radio-input:checked:not(:disabled):active {\n background-color: var(--charcoal-brand-press);\n}\n\n.charcoal-radio-input:checked:not(:disabled):active::after {\n background-color: var(--charcoal-text5-press);\n}\n.charcoal-radio-group {\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 8px;\n}\n.charcoal-multi-select {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n position: relative;\n cursor: pointer;\n gap: 4px;\n}\n\n .charcoal-multi-select:disabled,\n .charcoal-multi-select[aria-disabled]:not([aria-disabled='false']) {\n opacity: 0.32;\n cursor: default;\n }\n\n.charcoal-multi-select-label {\n display: flow-root;\n align-items: center;\n font-size: 14px;\n line-height: 22px;\n color: var(--charcoal-text2);\n}\n\n.charcoal-multi-select-label::before {\n display: block;\n width: 0;\n height: 0;\n content: '';\n margin-top: -4px;\n }\n\n.charcoal-multi-select-label::after {\n display: block;\n width: 0;\n height: 0;\n content: '';\n margin-bottom: -4px;\n }\n\n.charcoal-multi-select-input[type='checkbox'] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: block;\n width: 20px;\n height: 20px;\n margin: 0;\n background-color: var(--charcoal-text3);\n border-radius: 999999px;\n transition:\n 0.2s background-color,\n 0.2s box-shadow;\n}\n\n.charcoal-multi-select-input[type='checkbox']:checked {\n background-color: var(--charcoal-brand);\n }\n\n.charcoal-multi-select-input[type='checkbox']:focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n.charcoal-multi-select-input[type='checkbox']:focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n.charcoal-multi-select-input[type='checkbox']:focus:not(:focus-visible) {\n box-shadow: none;\n }\n\n.charcoal-multi-select-input[type='checkbox']:hover:not(:disabled):not([aria-disabled]),\n .charcoal-multi-select-input[type='checkbox']:hover[aria-disabled='false'] {\n background-color: var(--charcoal-text3-hover);\n }\n\n.charcoal-multi-select-input[type='checkbox']:active:not(:disabled):not([aria-disabled]),\n .charcoal-multi-select-input[type='checkbox']:active[aria-disabled='false'] {\n background-color: var(--charcoal-text3-press);\n }\n\n.charcoal-multi-select-input[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),\n .charcoal-multi-select-input[type='checkbox']:checked:hover[aria-disabled='false'] {\n background-color: var(--charcoal-brand-hover);\n }\n\n.charcoal-multi-select-input[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),\n .charcoal-multi-select-input[type='checkbox']:checked:active[aria-disabled='false'] {\n background-color: var(--charcoal-brand-press);\n }\n\n.charcoal-multi-select-input[type='checkbox'][aria-invalid='true'][data-overlay='false']:not(:disabled):not(\n [aria-disabled]\n ) {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n }\n\n.charcoal-multi-select-input[type='checkbox'][aria-invalid='true'][data-overlay='false'][aria-disabled='false'] {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n }\n\n.charcoal-multi-select-input[type='checkbox'][data-overlay='true'] {\n background-color: var(--charcoal-surface4);\n }\n\n.charcoal-multi-select-overlay {\n position: absolute;\n top: -2px;\n left: -2px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n border-radius: 999999px;\n color: var(--charcoal-text5);\n transition: 0.2s box-shadow;\n}\n\n.charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true']:not(:disabled):not(\n [aria-disabled]\n ) {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n }\n\n.charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true'][aria-disabled='false'] {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n }\n\n.charcoal-multi-select-overlay[data-overlay='true'] {\n border-color: var(--charcoal-text5);\n border-width: 2px;\n border-style: solid;\n }\n.charcoal-switch__label {\n display: inline-grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n cursor: pointer;\n outline: 0;\n gap: 4px;\n}\n\n .charcoal-switch__label[aria-disabled='true'] {\n opacity: 0.32;\n cursor: default;\n }\n\n .charcoal-switch__label[aria-disabled='true'] > input {\n opacity: 1;\n }\n\n.charcoal-switch__label_div {\n font-size: 14px;\n line-height: 22px;\n color: var(--charcoal-text2);\n}\n.charcoal-switch-input {\n cursor: pointer;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: inline-flex;\n position: relative;\n box-sizing: border-box;\n width: 28px;\n border: 2px solid transparent;\n\n transition-property: background-color, box-shadow;\n transition-duration: 0.2s;\n\n outline: none;\n border-radius: 16px;\n height: 16px;\n margin: 0;\n background-color: var(--charcoal-text4);\n}\n\n.charcoal-switch-input:disabled,\n.charcoal-switch-input[readonly] {\n opacity: 0.32;\n cursor: default;\n}\n\n.charcoal-switch-input::after {\n content: '';\n position: absolute;\n display: block;\n top: 0;\n left: 0;\n width: 12px;\n height: 12px;\n transform: translateX(0);\n transition: transform 0.2s;\n border-radius: 1024px;\n background-color: var(--charcoal-text5);\n}\n\n.charcoal-switch-input:checked::after {\n transform: translateX(12px);\n transition: transform 0.2s;\n}\n\n.charcoal-switch-input:checked {\n background-color: var(--charcoal-brand);\n}\n\n.charcoal-switch-input:not(:disabled):hover {\n background-color: var(--charcoal-text4-hover);\n}\n\n.charcoal-switch-input:not(:disabled):active {\n background-color: var(--charcoal-text4-press);\n}\n\n.charcoal-switch-input:not(:disabled):focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-switch-input:not(:disabled):focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-switch-input:not(:disabled):focus:not(:focus-visible) {\n box-shadow: none;\n}\n\n.charcoal-switch-input:not(:disabled)::after:hover {\n background-color: var(--charcoal-text5-hover);\n}\n\n.charcoal-switch-input:not(:disabled)::after:active {\n background-color: var(--charcoal-text5-press);\n}\n\n.charcoal-switch-input:not(:disabled):checked:hover {\n background-color: var(--charcoal-brand-hover);\n}\n\n.charcoal-switch-input:not(:disabled):checked:active {\n background-color: var(--charcoal-brand-press);\n}\n.charcoal-text-field-root {\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 4px;\n}\n\n .charcoal-text-field-root[aria-disabled='true'] {\n opacity: 0.32;\n }\n\n.charcoal-text-field-container {\n display: flex;\n height: 40px;\n transition:\n 0.2s background-color,\n 0.2s box-shadow;\n color: var(--charcoal-text2);\n background-color: var(--charcoal-surface3);\n border-radius: 4px;\n padding: 0 8px;\n line-height: 22px;\n font-size: 14px;\n}\n\n.charcoal-text-field-container[data-invalid='true'] {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n }\n\n.charcoal-text-field-container:not([aria-disabled='true']):hover {\n background-color: var(--charcoal-surface3-hover);\n }\n\n.charcoal-text-field-container:not([aria-disabled='true']):focus-within {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n.charcoal-text-field-container:not([aria-disabled='true'])[data-invalid='true']:focus-within {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n }\n\n.charcoal-text-field-prefix {\n display: flex;\n align-items: center;\n margin-right: 4px;\n}\n\n.charcoal-text-field-suffix {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-left: 4px;\n}\n\n.charcoal-text-field-input-root {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n}\n\n.charcoal-text-field-input {\n border: none;\n box-sizing: border-box;\n outline: none;\n font-family: inherit;\n\n /* Prevent zooming for iOS Safari */\n transform-origin: top left;\n transform: scale(0.875);\n width: calc(100% / 0.875);\n height: calc(100% / 0.875);\n font-size: calc(14px / 0.875);\n line-height: calc(22px / 0.875);\n padding-left: 0;\n padding-right: 0;\n border-radius: calc(4px / 0.875);\n\n /* Display box-shadow for iOS Safari */\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: transparent;\n\n color: var(--charcoal-text2);\n}\n\n.charcoal-text-field-input::-moz-placeholder {\n color: var(--charcoal-text3);\n }\n\n.charcoal-text-field-input::placeholder {\n color: var(--charcoal-text3);\n }\n\n.charcoal-text-field-line-counter {\n line-height: 22px;\n font-size: 14px;\n color: var(--charcoal-text3);\n}\n.charcoal-field-label {\n font-size: 14px;\n line-height: 22px;\n font-weight: bold;\n display: flow-root;\n color: var(--charcoal-text1);\n}\n\n.charcoal-field-label-required-text {\n font-size: 14px;\n line-height: 22px;\n display: flow-root;\n color: var(--charcoal-text2);\n}\n\n.charcoal-field-label-sub-label {\n font-size: 14px;\n line-height: 22px;\n display: flow-root;\n color: var(--charcoal-text3);\n transition:\n 0.2s color,\n 0.2s box-shadow;\n}\n\n.charcoal-field-label-root {\n display: inline-flex;\n align-items: center;\n}\n\n.charcoal-field-label-root > .charcoal-field-label-required-text {\n margin-left: 4px;\n }\n\n.charcoal-field-label-root > .charcoal-field-label-sub-label {\n margin-left: auto;\n }\n.charcoal-text-field-assistive-text {\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n color: var(--charcoal-text2);\n}\n\n.charcoal-text-field-assistive-text[data-invalid='true'] {\n color: var(--charcoal-assertive);\n}\n.charcoal-text-area-root {\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 4px;\n}\n\n .charcoal-text-area-root[aria-disabled='true'] {\n opacity: 0.32;\n }\n\n.charcoal-text-area-container {\n position: relative;\n overflow: hidden;\n\n color: var(--charcoal-text2);\n background-color: var(--charcoal-surface3);\n border-radius: 4px;\n transition:\n 0.2s background-color,\n 0.2s box-shadow;\n height: calc(22px * var(--charcoal-text-area-rows) + 18px);\n}\n\n.charcoal-text-area-container[aria-invalid='true'] {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n }\n\n.charcoal-text-area-container:focus-within {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n.charcoal-text-area-container:not([aria-disabled='true']):hover {\n background-color: var(--charcoal-surface3-hover);\n }\n\n.charcoal-text-area-container[aria-invalid='true']:focus-within {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n }\n\n.charcoal-text-area-textarea {\n border: none;\n outline: none;\n resize: none;\n font-family: inherit;\n color: inherit;\n box-sizing: border-box;\n\n /* Prevent zooming for iOS Safari */\n transform-origin: top left;\n transform: scale(0.875);\n width: calc(100% / 0.875);\n font-size: calc(14px / 0.875);\n line-height: calc(22px / 0.875);\n padding: calc(9px / 0.875) calc(8px / 0.875);\n height: calc(22px / 0.875 * var(--charcoal-text-area-rows) + 20px);\n\n /* Display box-shadow for iOS Safari */\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n\n background: none;\n}\n\n.charcoal-text-area-textarea[data-no-bottom-padding='true'] {\n padding: calc(9px / 0.875) calc(8px / 0.875) 0;\n height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px);\n }\n\n.charcoal-text-area-textarea::-moz-placeholder {\n color: var(--charcoal-text3);\n }\n\n.charcoal-text-area-textarea::placeholder {\n color: var(--charcoal-text3);\n }\n\n.charcoal-text-area-counter {\n position: absolute;\n bottom: 9px;\n right: 8px;\n\n line-height: 22px;\n font-size: 14px;\n color: var(--charcoal-text3);\n}\n.charcoal-modal-dialog {\n margin: auto;\n position: relative;\n height: -moz-fit-content;\n height: fit-content;\n width: 440px;\n\n background-color: var(--charcoal-surface1);\n border-radius: 24px;\n}\n\n.charcoal-modal-dialog[data-size='S'] {\n width: 336px;\n}\n\n.charcoal-modal-dialog[data-size='M'] {\n width: 440px;\n}\n\n.charcoal-modal-dialog[data-size='L'] {\n width: 648px;\n}\n\n@media (max-width: 743px) {\n .charcoal-modal-dialog {\n max-width: 440px;\n width: calc(100% - 48px);\n }\n\n .charcoal-modal-dialog[data-bottom-sheet='true'],\n .charcoal-modal-dialog[data-bottom-sheet='full'] {\n max-width: unset;\n width: 100%;\n border-radius: 0;\n margin: auto 0 0 0;\n }\n\n .charcoal-modal-dialog[data-bottom-sheet='full'] {\n min-height: 100%;\n }\n}\n\n.charcoal-modal-dialog:focus {\n outline: none;\n}\n.charcoal-modal-background {\n overflow: auto;\n display: flex;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n justify-content: center;\n padding: 40px 0;\n box-sizing: border-box;\n\n background-color: var(--charcoal-surface4);\n}\n\n @media (max-width: 743px) {\n .charcoal-modal-background[data-bottom-sheet='true'],\n .charcoal-modal-background[data-bottom-sheet='full'] {\n padding: 0;\n }\n }\n\n.charcoal-modal-close-button {\n position: absolute;\n top: 8px;\n right: 8px;\n\n color: var(--charcoal-text3);\n transition: 0.2s color;\n}\n\n.charcoal-modal-title {\n margin: 0;\n font-weight: inherit;\n font-size: inherit;\n}\n.charcoal-modal-header-root {\n height: 64px;\n display: grid;\n align-content: center;\n justify-content: center;\n}\n\n@media (max-width: 743px) {\n .charcoal-modal-header-root[data-bottom-sheet='true'],\n .charcoal-modal-header-root[data-bottom-sheet='full'] {\n height: 48px;\n }\n}\n\n.charcoal-modal-header-title {\n color: var(--charcoal-text1);\n font-size: 16px;\n line-height: 24px;\n font-weight: bold;\n display: flow-root;\n}\n\n.charcoal-modal-align {\n padding-left: 16px;\n padding-right: 16px;\n}\n\n.charcoal-modal-body {\n padding-bottom: 40px;\n}\n\n.charcoal-modal-buttons {\n display: grid;\n grid-auto-flow: row;\n grid-row-gap: 8px;\n\n padding-top: 16px;\n padding-left: 16px;\n padding-right: 16px;\n}\n.charcoal-loading-spinner {\n box-sizing: content-box;\n margin: auto;\n padding: var(--charcoal-loading-spinner-padding);\n border-radius: 8px;\n font-size: var(--charcoal-loading-spinner-size);\n width: var(--charcoal-loading-spinner-size);\n height: var(--charcoal-loading-spinner-size);\n opacity: 0.84;\n color: var(--charcoal-text4);\n background-color: var(--charcoal-background1);\n}\n\n .charcoal-loading-spinner[data-transparent='true'] {\n background-color: var(--charcoal-transparent);\n }\n\n@keyframes charcoal-loading-spinner-icon-scale-out {\n from {\n transform: scale(0);\n opacity: 1;\n }\n to {\n transform: scale(1);\n opacity: 0;\n }\n}\n\n.charcoal-loading-spinner-icon {\n width: 1em;\n height: 1em;\n border-radius: 1em;\n background-color: currentColor;\n animation: charcoal-loading-spinner-icon-scale-out 1s both ease-out;\n animation-iteration-count: infinite;\n}\n\n.charcoal-loading-spinner-icon[data-reset-animation] {\n animation: none;\n }\n\n.charcoal-loading-spinner-icon[data-once='true'] {\n animation-iteration-count: 1;\n }\n.charcoal-dropdown-selector-root {\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 4px;\n width: 100%;\n}\n\n .charcoal-dropdown-selector-root[aria-disabled='true'] {\n cursor: default;\n opacity: 0.32;\n }\n\n.charcoal-dropdown-selector-button {\n display: grid;\n grid-template-columns: 1fr auto;\n justify-content: space-between;\n align-items: center;\n\n height: 40px;\n width: 100%;\n box-sizing: border-box;\n border: none;\n cursor: pointer;\n gap: 4px;\n\n padding-right: 8px;\n padding-left: 8px;\n background-color: var(--charcoal-surface3);\n border-radius: 4px;\n\n transition:\n 0.2s box-shadow,\n 0.2s background-color;\n}\n\n.charcoal-dropdown-selector-button:disabled {\n cursor: default;\n }\n\n.charcoal-dropdown-selector-button:not(:disabled):focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n.charcoal-dropdown-selector-button:not(:disabled):focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n.charcoal-dropdown-selector-button:not(:disabled)[data-active='true'],\n .charcoal-dropdown-selector-button:not(:disabled):active {\n background-color: var(--charcoal-surface3-press);\n }\n\n.charcoal-dropdown-selector-button:not(:disabled):hover {\n background-color: var(--charcoal-surface3-hover);\n }\n\n.charcoal-dropdown-selector-button:not(:disabled):focus:not(:focus-visible) {\n box-shadow: none;\n }\n\n.charcoal-dropdown-selector-button[aria-invalid='true'],\n .charcoal-dropdown-selector-button:not(:disabled)[aria-invalid='true']:focus:not(:focus-visible) {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n }\n\n.charcoal-ui-dropdown-selector-text {\n text-align: left;\n font-size: 14px;\n line-height: 22px;\n display: flow-root;\n color: var(--charcoal-text2);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.charcoal-ui-dropdown-selector-text[data-placeholder='true'] {\n color: var(--charcoal-text3);\n }\n\n.charcoal-ui-dropdown-selector-icon {\n color: var(--charcoal-text2);\n}\n.charcoal-popover {\n margin: 4px 0;\n list-style: none;\n overflow: auto;\n max-height: inherit;\n background-color: var(--charcoal-background1);\n border: solid 1px var(--charcoal-border-default);\n border-radius: 8px;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n.charcoal-menu-list {\n padding: 0;\n margin: 0;\n}\n.charcoal-list-item {\n list-style: none;\n display: flex;\n align-items: center;\n min-height: 40px;\n cursor: pointer;\n outline: none;\n\n padding-right: 16px;\n padding-left: 16px;\n\n transition: background-color 0.2s;\n}\n\n.charcoal-list-item:not([aria-disabled='true']):hover,\n.charcoal-list-item:not([aria-disabled='true']):focus,\n.charcoal-list-item:not([aria-disabled='true']):focus-within {\n background-color: var(--charcoal-surface3);\n}\n\n.charcoal-list-item[aria-disabled='true'] {\n opacity: 0.32;\n cursor: default;\n}\n.charcoal-dropdown-selector-menu-item {\n font-size: 14px;\n line-height: 22px;\n color: var(--charcoal-text2);\n padding: 9px 0;\n\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 20px;\n}\n\n.charcoal-dropdown-selector-menu-item[data-selected='true'] {\n margin-left: 0px;\n}\n\n.charcoal-dropdown-selector-menu-item-icon {\n color: var(--charcoal-text2);\n padding-right: 4px;\n}\n\n.charcoal-dropdown-selector-menu-item-container {\n display: flex;\n align-items: center;\n}\n\n.charcoal-dropdown-selector-menu-secondary {\n font-size: 12px;\n line-height: 20px;\n color: var(--charcoal-text3);\n padding-bottom: 9px;\n\n display: flex;\n align-items: center;\n margin-left: 20px;\n}\n\n.charcoal-dropdown-selector-menu-fullwidth {\n width: 100%;\n}\n.charcoal-menu-item-group {\n display: block;\n}\n\n.charcoal-menu-item-group > span {\n display: block;\n color: var(--charcoal-text3);\n font-size: 12px;\n font-weight: bold;\n padding: 12px 0 8px 16px;\n}\n\n.charcoal-menu-item-group > ul {\n padding-left: 0;\n margin: 0;\n box-sizing: border-box;\n list-style: none;\n overflow: hidden;\n}\n.charcoal-segmented-control {\n display: inline-flex;\n align-items: center;\n\n background-color: var(--charcoal-surface3);\n border-radius: 16px;\n}\n\n .charcoal-segmented-control[data-uniform-segment-width='true'],\n .charcoal-segmented-control[data-full-width='true'] {\n display: inline-grid;\n grid-auto-columns: minmax(80px, 1fr);\n grid-auto-rows: 32px;\n grid-auto-flow: column;\n }\n\n .charcoal-segmented-control[data-full-width='true'] {\n width: 100%;\n }\n\n.charcoal-segmented-control-radio__label {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n height: 32px;\n\n padding-right: 16px;\n padding-left: 16px;\n border-radius: 16px;\n color: var(--charcoal-text2);\n\n font-size: 14px;\n line-height: 22px;\n}\n\n.charcoal-segmented-control-radio__label[aria-disabled]:not([aria-disabled='false']) {\n cursor: default;\n opacity: 0.32;\n }\n\n.charcoal-segmented-control-radio__label[data-checked='true'] {\n background-color: var(--charcoal-brand);\n color: var(--charcoal-text5);\n }\n\n.charcoal-segmented-control-radio__label[data-uniform-segment-width='true'],\n .charcoal-segmented-control-radio__label[data-full-width='true'] {\n justify-content: center;\n white-space: nowrap;\n }\n\n.charcoal-segmented-control-radio__input {\n position: absolute;\n\n height: 0px;\n width: 0px;\n padding: 0;\n margin: 0;\n\n -webkit-appearance: none;\n\n -moz-appearance: none;\n\n appearance: none;\n box-sizing: border-box;\n overflow: hidden;\n white-space: nowrap;\n opacity: 0;\n}\n.charcoal-checkbox__label {\n position: relative;\n cursor: pointer;\n display: flex;\n gap: 4px;\n}\n\n .charcoal-checkbox__label[aria-disabled='true'] {\n cursor: default;\n opacity: 0.32;\n }\n\n .charcoal-checkbox__label[aria-disabled='true'] > input {\n opacity: 1;\n }\n\n.charcoal-checkbox__label_div {\n flex: 1;\n color: var(--charcoal-text2);\n font-size: 14px;\n line-height: 20px;\n}\n.charcoal-checkbox-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: flex;\n cursor: pointer;\n margin: 0;\n width: 20px;\n height: 20px;\n border-radius: 4px;\n transition:\n 0.2s box-shadow,\n 0.2s background-color;\n position: relative;\n box-sizing: border-box;\n}\n\n.charcoal-checkbox-input:disabled,\n.charcoal-checkbox-input[readonly] {\n opacity: 0.32;\n cursor: default;\n}\n\n.charcoal-checkbox-input:checked {\n background-color: var(--charcoal-brand);\n}\n\n.charcoal-checkbox-input:checked::after {\n content: '';\n background-color: white;\n display: flex;\n margin: auto;\n width: 16px;\n height: 16px;\n clip-path: path(\n 'M10.6 5a1.3 1.3 0 0 1 1.8 1.9l-5.7 5.6-3-2.9a1.3 1.3 0 1 1 2-1.9l1 1z'\n );\n}\n\n.charcoal-checkbox-input:not(:checked) {\n border-width: 2px;\n border-style: solid;\n border-color: var(--charcoal-text4);\n}\n\n.charcoal-checkbox-input:not(:disabled):focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-checkbox-input:not(:disabled):focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-checkbox-input:not(:disabled):focus:not(:focus-visible) {\n box-shadow: none;\n}\n\n.charcoal-checkbox-input:checked:not(:disabled):hover {\n background-color: var(--charcoal-brand-hover);\n}\n.charcoal-checkbox-input:checked:not(:disabled):active {\n background-color: var(--charcoal-brand-press);\n}\n\n.charcoal-checkbox-input[aria-invalid='true'],\n.charcoal-checkbox-input[aria-invalid='true']:not(:disabled):focus {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n}\n\n.charcoal-checkbox-input[data-rounded='true'] {\n border-radius: 10px;\n background-color: var(--charcoal-surface3);\n border: 2px solid transparent;\n}\n\n.charcoal-checkbox-input[data-rounded='true']:checked {\n background-color: var(--charcoal-brand);\n}\n\n.charcoal-checkbox-input[data-rounded='true']:not(:disabled):hover {\n background-color: var(--charcoal-surface3-hover);\n}\n.charcoal-checkbox-input[data-rounded='true']:not(:disabled):active {\n background-color: var(--charcoal-surface3-press);\n}\n\n.charcoal-checkbox-input[data-rounded='true']:not(:disabled):focus-visible {\n box-shadow: 0 0 0 6px rgba(0, 150, 250, 0.32);\n}\n\n.charcoal-checkbox-input[data-rounded='true']:checked:not(:disabled):hover {\n background-color: var(--charcoal-brand-hover);\n}\n.charcoal-checkbox-input[data-rounded='true']:checked:not(:disabled):active {\n background-color: var(--charcoal-brand-press);\n}\n\n.charcoal-checkbox-input[data-rounded='true'][aria-invalid='true'],\n.charcoal-checkbox-input[data-rounded='true'][aria-invalid='true']:not(\n :disabled\n ):focus {\n box-shadow: 0 0 0 6px rgba(255, 43, 0, 0.32);\n}\n\n.charcoal-checkbox-input[data-rounded='true']::before {\n content: '';\n width: 24px;\n height: 24px;\n position: absolute;\n top: -4px;\n left: -4px;\n border-radius: 12px;\n border: 2px solid #fff;\n box-sizing: border-box;\n}\n.charcoal-tag-item {\n --charcoal-tag-item-color: var(--charcoal-text5);\n --charcoal-tag-item-size: 40px;\n --charcoal-tag-item-padding-left: 24px;\n --charcoal-tag-item-padding-right: 24px;\n\n isolation: isolate;\n position: relative;\n\n -webkit-appearance: none;\n\n -moz-appearance: none;\n\n appearance: none;\n outline: none;\n border-style: none;\n\n display: inline-flex;\n gap: 8px;\n align-items: center;\n justify-content: center;\n\n text-decoration: none;\n cursor: pointer;\n overflow: hidden;\n\n color: var(--charcoal-tag-item-color);\n height: var(--charcoal-tag-item-size);\n padding-top: 4px;\n padding-bottom: 4px;\n padding-left: var(--charcoal-tag-item-padding-left);\n padding-right: var(--charcoal-tag-item-padding-right);\n box-sizing: border-box;\n border-radius: 4px;\n\n transition: 0.2s box-shadow;\n}\n\n .charcoal-tag-item[data-size='M'] {\n --charcoal-tag-item-size: 40px;\n --charcoal-tag-item-padding-left: 24px;\n --charcoal-tag-item-padding-right: 24px;\n }\n\n .charcoal-tag-item[data-size='S'] {\n --charcoal-tag-item-size: 32px;\n --charcoal-tag-item-padding-left: 16px;\n --charcoal-tag-item-padding-right: 16px;\n }\n\n .charcoal-tag-item[data-state='inactive'] {\n --charcoal-tag-item-color: var(--charcoal-text2);\n }\n\n .charcoal-tag-item[data-state='active'] {\n --charcoal-tag-item-padding-left: 16px;\n --charcoal-tag-item-padding-right: 8px;\n }\n\n .charcoal-tag-item:disabled,\n .charcoal-tag-item[aria-disabled]:not([aria-disabled='false']) {\n opacity: 0.32;\n cursor: default;\n }\n\n .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus-visible,\n .charcoal-tag-item[aria-disabled='false']:focus-visible {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus,\n .charcoal-tag-item[aria-disabled='false']:focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),\n .charcoal-tag-item[aria-disabled='false']:focus:not(:focus-visible) {\n box-shadow: none;\n }\n\n.charcoal-tag-item__bg {\n background-color: var(--charcoal-tag-item-bg);\n}\n\n.charcoal-tag-item__bg[data-bg-variant='image'] {\n background-color: var(--charcoal-surface4);\n }\n\n.charcoal-tag-item__bg[data-bg-variant='image']::before {\n content: '';\n position: absolute;\n z-index: 1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-position: center;\n background-size: cover;\n background-image: var(--charcoal-tag-item-bg);\n mix-blend-mode: overlay;\n }\n\n.charcoal-tag-item__bg[data-state='inactive'] {\n background-color: var(--charcoal-surface3);\n }\n\n.charcoal-tag-item__label {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.charcoal-tag-item__label[data-has-translate='true'] {\n justify-content: space-between;\n }\n\n.charcoal-tag-item__label__translated {\n --charcoal-tag-item-text-font-size: 12px;\n --charcoal-tag-item-text-line-height: 20px;\n font-weight: bold;\n}\n\n.charcoal-tag-item__label__translated::before {\n display: none;\n }\n\n.charcoal-tag-item__label__text {\n --charcoal-tag-item-text-font-size: 14px;\n --charcoal-tag-item-text-line-height: 22px;\n\n max-width: 152px;\n overflow: hidden;\n font-weight: bold;\n\n color: inherit;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.charcoal-tag-item__label__text[data-has-translate='true'] {\n --charcoal-tag-item-text-font-size: 10px;\n --charcoal-tag-item-text-line-height: 14px;\n font-weight: normal;\n }\n\n/* Kept flat: different class name from .charcoal-tag-item__label__text (note: \"labe\" typo in original) */\n.charcoal-tag-item__labe__text[data-has-translate='true']::after {\n display: none;\n}\n.charcoal-hint-text {\n background-color: var(--charcoal-surface3);\n border-radius: 8px;\n padding: 12px 16px;\n display: flex;\n align-items: flex-start;\n}\n\n .charcoal-hint-text[data-context='page'] {\n justify-content: center;\n }\n\n @media (min-width: 744px) {\n\n .charcoal-hint-text[data-context='page'] {\n padding: 20px 40px\n }\n }\n\n.charcoal-hint-text-icon {\n display: flex;\n align-items: center;\n color: var(--charcoal-text3);\n height: 22px;\n margin: 0 4px 0 0;\n}\n\n.charcoal-hint-text-message {\n color: var(--charcoal-text2);\n font-size: 14px;\n line-height: 22px;\n display: flow-root;\n margin: 0;\n min-width: 0;\n overflow-wrap: break-word;\n}\n.charcoal-text-ellipsis {\n overflow: hidden;\n overflow-wrap: break-word;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--charcoal-text-ellipsis-line-limit);\n}\n\n .charcoal-text-ellipsis[data-has-line-height='true'] {\n line-height: var(--charcoal-text-ellipsis-line-height);\n }\n\n .charcoal-text-ellipsis[data-has-line-height='false'] {\n line-height: inherit;\n }\n\n .charcoal-text-ellipsis[data-line-limit='1'][data-use-nowrap='true'] {\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n.charcoal-pagination {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n .charcoal-pagination[data-size='S'] .charcoal-pagination-button {\n min-width: 32px;\n min-height: 32px;\n }\n\n .charcoal-pagination[data-size='M'] .charcoal-pagination-button {\n min-width: 40px;\n min-height: 40px;\n }\n\n/* stylelint-disable no-descending-specificity */\n.charcoal-pagination-button {\n cursor: pointer;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n border-style: none;\n outline: none;\n text-decoration: none;\n font: inherit;\n margin: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n font-weight: 700;\n line-height: 22px;\n\n /* HACK:\n * Safari doesn't correctly repaint the elements when they're reordered in response to interaction.\n * This forces it to repaint them. This doesn't work if put on the parents either, has to be here.\n */\n /* stylelint-disable-next-line property-no-vendor-prefix */\n -webkit-transform: translateZ(0);\n\n color: var(--charcoal-text3);\n background-color: var(--charcoal-transparent);\n border-radius: 20px;\n transition:\n 0.2s background-color,\n 0.2s box-shadow;\n}\n.charcoal-pagination-button:focus {\n outline: none;\n }\n.charcoal-pagination-button::-moz-focus-inner {\n border-style: none;\n padding: 0;\n }\n.charcoal-pagination-button[hidden] {\n visibility: hidden;\n display: block;\n }\n.charcoal-pagination-button:not(:disabled):not([aria-disabled]):hover,\n .charcoal-pagination-button[aria-disabled='false']:hover {\n color: var(--charcoal-text3);\n background-color: var(--charcoal-surface3);\n }\n.charcoal-pagination-button:not(:disabled):not([aria-disabled]):active,\n .charcoal-pagination-button[aria-disabled='false']:active {\n color: var(--charcoal-text3);\n background-color: var(--charcoal-surface10);\n }\n.charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus,\n .charcoal-pagination-button[aria-disabled='false']:focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n.charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus-visible,\n .charcoal-pagination-button[aria-disabled='false']:focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n.charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),\n .charcoal-pagination-button[aria-disabled='false']:focus:not(:focus-visible) {\n box-shadow: none;\n }\n.charcoal-pagination-button[aria-current] {\n cursor: default;\n background-color: var(--charcoal-surface6);\n color: var(--charcoal-text5);\n }\n.charcoal-pagination-button[aria-current]:not(:disabled):not([aria-disabled]):hover,\n .charcoal-pagination-button[aria-current]:not(:disabled):not([aria-disabled]):active {\n background-color: var(--charcoal-surface6);\n color: var(--charcoal-text5);\n }\n/* stylelint-enable no-descending-specificity */\n\n/* Kept flat: different root class from .charcoal-pagination-button */\n.charcoal-pagination-nav-button[hidden] {\n visibility: hidden;\n display: block;\n}\n\n.charcoal-pagination-spacer,\n .charcoal-pagination-spacer:hover,\n .charcoal-pagination-spacer:active {\n cursor: default;\n color: var(--charcoal-text3);\n background: none;\n }\n\n.charcoal-pagination-spacer.charcoal-icon-button:disabled {\n opacity: 1;\n }\n.charcoal-focus-ring:is(\n :not(:disabled):not([aria-disabled]),\n [aria-disabled='false']\n ):focus-visible {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n transition: 0.2s box-shadow;\n }\n"]}
1
+ {"version":3,"sources":["<no source>","index.css"],"names":[],"mappings":"AAAA,iBCAA;EACE,wBAAwB;KACrB,qBAAqB;UAChB,gBAAgB;EACxB,uBAAuB;EACvB,sBAAsB;EACtB,eAAe;EACf,kBAAkB;EAClB,aAAa;EACb,uBAAuB;EACvB,uBAAuB;EACvB,qBAAqB;EACrB,qBAAqB;EACrB,aAAa;EACb,SAAS;EACT,iBAAiB;EACjB,oBAAoB;EACpB,uBAAuB;EACvB,kBAAkB;EAClB,oBAAoB;EACpB,mBAAmB;EACnB,uBAAuB;EACvB,eAAe;EACf,yBAAyB;KACtB,sBAAsB;UACjB,iBAAiB;EACzB,mBAAmB;EACnB,uBAAuB;EACvB,eAAe;EACf,iBAAiB;EACjB,iBAAiB;EACjB,yCAAyC;EACzC,qEAAqE;EACrE;;;mBAGiB;EACjB,YAAY;AACd;;EAEE;;IAEE,eAAe;IACf,aAAa;EACf;;EAEA;;IAEE,aAAa;IACb,6CAA6C;EAC/C;;EAEA;;IAEE,uCAAuC;IACvC,mEAAmE;EACrE;;EAEA;;;IAGE,uCAAuC;IACvC,mEAAmE;EACrE;;EAEA;IACE,oDAAoD;IACpD,iEAAiE;EACnE;;EAEA;;MAEI,kDAAkD;MAClD,+DAA+D;IACjE;;EAEF;;;MAGI,kDAAkD;MAClD,+DAA+D;IACjE;;EAEF;IACE,mDAAmD;IACnD,gEAAgE;EAClE;;EAEA;;MAEI,iDAAiD;MACjD,8DAA8D;IAChE;;EAEF;;;MAGI,iDAAiD;MACjD,8DAA8D;IAChE;;EAEF;IACE,gDAAgD;IAChD,6DAA6D;EAC/D;;EAEA;;MAEI,8CAA8C;MAC9C,2DAA2D;IAC7D;;EAEF;;;MAGI,8CAA8C;MAC9C,2DAA2D;IAC7D;;EAEF;IACE,qDAAqD;IACrD,kEAAkE;EACpE;;EAEA;;MAEI,mDAAmD;MACnD,gEAAgE;IAClE;;EAEF;;;MAGI,mDAAmD;MACnD,gEAAgE;IAClE;;EAEF;IACE,eAAe;IACf,YAAY;EACd;;EAEA;IACE,WAAW;EACb;AACF;EACE,eAAe;;EAEf,4BAA4B;EAC5B,wBAAwB;KACrB,qBAAqB;UAChB,gBAAgB;EACxB,uBAAuB;EACvB,UAAU;EACV,kBAAkB;EAClB,aAAa;EACb,cAAc;EACd,uBAAuB;EACvB,uBAAuB;EACvB,qBAAqB;EACrB,qBAAqB;;EAErB,4CAA4C;EAC5C,aAAa;;EAEb,6CAA6C;EAC7C,SAAS;;EAET,+BAA+B;EAC/B,iBAAiB;;EAEjB,yDAAyD;EACzD,oBAAoB;AACtB;;EAEE;;IAEE,eAAe;EACjB;;EAEA;IACE,aAAa;EACf;;EAEA;IACE,kBAAkB;IAClB,UAAU;EACZ;AACF;EACE,eAAe;EACf,wBAAwB;KACrB,qBAAqB;UAChB,gBAAgB;EACxB,uBAAuB;EACvB,UAAU;EACV,kBAAkB;EAClB,aAAa;EACb,cAAc;EACd,uBAAuB;EACvB,uBAAuB;EACvB,qBAAqB;EACrB,qBAAqB;EACrB,aAAa;EACb,SAAS;EACT,iBAAiB;EACjB,oBAAoB;;EAEpB,yBAAyB;;KAEtB,sBAAsB;;UAEjB,iBAAiB;EACzB,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,uBAAuB;EACvB;;mBAEiB;AACnB;;EAEE;;IAEE,eAAe;IACf,aAAa;EACf;;EAEA;IACE,aAAa;EACf;;EAEA;IACE,kBAAkB;IAClB,UAAU;EACZ;;EAEA;IACE,WAAW;IACX,YAAY;EACd;;EAEA;IACE,WAAW;IACX,YAAY;EACd;;EAEA;IACE,WAAW;IACX,YAAY;EACd;;EAEA;IACE,kDAAkD;IAClD,2DAA2D;EAC7D;;EAEA;;MAEI,gDAAgD;MAChD,yDAAyD;IAC3D;;EAEF;;MAEI,gDAAgD;MAChD,yDAAyD;IAC3D;;EAEF;;MAEI,gDAAgD;MAChD,yDAAyD;IAC3D;;EAEF;IACE,mDAAmD;IACnD,gEAAgE;EAClE;;EAEA;;MAEI,iDAAiD;MACjD,8DAA8D;IAChE;;EAEF;;MAEI,iDAAiD;MACjD,8DAA8D;IAChE;;EAEF;;MAEI,iDAAiD;MACjD,8DAA8D;IAChE;;EAEF;;IAEE,aAAa;IACb,6CAA6C;EAC/C;;EAEA;;IAEE,6CAA6C;EAC/C;;EAEA;;IAEE,gBAAgB;EAClB;AACF;EACE,aAAa;EACb,+BAA+B;EAC/B,aAAa;EACb,mBAAmB;EACnB,eAAe;AACjB;;EAEE;IACE,aAAa;IACb,eAAe;EACjB;;AAEF;EACE,eAAe;EACf,iBAAiB;EACjB,yCAAyC;AAC3C;AACA;EACE,wBAAwB;KACrB,qBAAqB;UAChB,gBAAgB;EACxB,cAAc;EACd,sBAAsB;;EAEtB,SAAS;EACT,YAAY;;EAEZ,WAAW;EACX,YAAY;EACZ,eAAe;EACf,uBAAuB;EACvB,yDAAyD;EACzD;;mBAEiB;AACnB;;AAEA;EACE,iEAAiE;AACnE;;AAEA;EACE,WAAW;EACX,cAAc;EACd,UAAU;EACV,WAAW;EACX,oBAAoB;EACpB,+DAA+D;EAC/D,uBAAuB;EACvB;;mBAEiB;AACnB;;AAEA;EACE,iBAAiB;EACjB,mBAAmB;EACnB,kDAAkD;AACpD;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,uDAAuD;AACzD;;AAEA;EACE,uDAAuD;AACzD;;AAEA;EACE,aAAa;EACb,6CAA6C;AAC/C;;AAEA;EACE,6CAA6C;AAC/C;;AAEA;EACE,gBAAgB;AAClB;;AAEA;;EAEE,4CAA4C;AAC9C;;AAEA;EACE,+DAA+D;AACjE;;AAEA;EACE,6DAA6D;AAC/D;;AAEA;EACE,+DAA+D;AACjE;;AAEA;EACE,6DAA6D;AAC/D;AACA;EACE,aAAa;EACb,0BAA0B;EAC1B,aAAa;AACf;AACA;EACE,aAAa;EACb,+BAA+B;EAC/B,mBAAmB;EACnB,kBAAkB;EAClB,eAAe;EACf,QAAQ;AACV;;EAEE;;IAEE,aAAa;IACb,eAAe;EACjB;;AAEF;EACE,kBAAkB;EAClB,mBAAmB;EACnB,eAAe;EACf,iBAAiB;EACjB,yCAAyC;AAC3C;;AAEA;IACI,cAAc;IACd,QAAQ;IACR,SAAS;IACT,WAAW;IACX,gBAAgB;EAClB;;AAEF;IACI,cAAc;IACd,QAAQ;IACR,SAAS;IACT,WAAW;IACX,mBAAmB;EACrB;;AAEF;EACE,wBAAwB;KACrB,qBAAqB;UAChB,gBAAgB;EACxB,cAAc;EACd,WAAW;EACX,YAAY;EACZ,SAAS;EACT,iEAAiE;EACjE,uBAAuB;EACvB;;mBAEiB;AACnB;;AAEA;IACI,iEAAiE;EACnE;;AAEF;IACI,aAAa;IACb,6CAA6C;EAC/C;;AAEF;IACI,6CAA6C;EAC/C;;AAEF;IACI,gBAAgB;EAClB;;AAEF;;IAEI,+DAA+D;EACjE;;AAEF;;IAEI,+DAA+D;EACjE;;AAEF;;IAEI,+DAA+D;EACjE;;AAEF;;IAEI,+DAA+D;EACjE;;AAEF;;;IAGI,4CAA4C;EAC9C;;AAEF;IACI,4CAA4C;EAC9C;;AAEF;IACI,gEAAgE;EAClE;;AAEF;EACE,kBAAkB;EAClB,SAAS;EACT,UAAU;EACV,sBAAsB;EACtB,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,WAAW;EACX,YAAY;EACZ,uBAAuB;EACvB,oDAAoD;EACpD,2BAA2B;AAC7B;;AAEA;;;IAGI,4CAA4C;EAC9C;;AAEF;IACI,4CAA4C;EAC9C;;AAEF;IACI,8CAA8C;IAC9C,iBAAiB;IACjB,mBAAmB;EACrB;AACF;EACE,oBAAoB;EACpB,+BAA+B;EAC/B,mBAAmB;EACnB,eAAe;EACf,UAAU;EACV,QAAQ;AACV;;EAEE;IACE,aAAa;IACb,eAAe;EACjB;;EAEA;MACI,UAAU;IACZ;;AAEJ;EACE,eAAe;EACf,iBAAiB;EACjB,yCAAyC;AAC3C;AACA;EACE,eAAe;EACf,wBAAwB;KACrB,qBAAqB;UAChB,gBAAgB;EACxB,oBAAoB;EACpB,kBAAkB;EAClB,sBAAsB;EACtB,WAAW;EACX,6BAA6B;;EAE7B,iDAAiD;EACjD,yBAAyB;;EAEzB,aAAa;EACb,mBAAmB;EACnB,YAAY;EACZ,SAAS;EACT,iEAAiE;AACnE;;AAEA;;EAEE,aAAa;EACb,eAAe;AACjB;;AAEA;EACE,WAAW;EACX,kBAAkB;EAClB,cAAc;EACd,MAAM;EACN,OAAO;EACP,WAAW;EACX,YAAY;EACZ,wBAAwB;EACxB,0BAA0B;EAC1B,qBAAqB;EACrB,+DAA+D;AACjE;;AAEA;EACE,2BAA2B;EAC3B,0BAA0B;AAC5B;;AAEA;EACE,iEAAiE;AACnE;;AAEA;EACE,+DAA+D;AACjE;;AAEA;EACE,+DAA+D;AACjE;;AAEA;EACE,aAAa;EACb,6CAA6C;AAC/C;AACA;EACE,6CAA6C;AAC/C;AACA;EACE,gBAAgB;AAClB;;AAEA;EACE,6DAA6D;AAC/D;;AAEA;EACE,6DAA6D;AAC/D;;AAEA;EACE,+DAA+D;AACjE;;AAEA;EACE,+DAA+D;AACjE;AACA;EACE,aAAa;EACb,0BAA0B;EAC1B,aAAa;AACf;;EAEE;IACE,aAAa;EACf;;AAEF;EACE,aAAa;EACb,YAAY;EACZ;;mBAEiB;EACjB,mDAAmD;EACnD,qEAAqE;EACrE,kBAAkB;EAClB,cAAc;EACd,iBAAiB;EACjB,eAAe;AACjB;;AAEA;IACI,4CAA4C;EAC9C;;AAEF;IACI,mEAAmE;EACrE;;AAEF;IACI,aAAa;IACb,6CAA6C;EAC/C;;AAEF;IACI,4CAA4C;EAC9C;;AAEF;EACE,aAAa;EACb,mBAAmB;EACnB,iBAAiB;AACnB;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,QAAQ;EACR,gBAAgB;AAClB;;AAEA;EACE,OAAO;EACP,YAAY;EACZ,gBAAgB;AAClB;;AAEA;EACE,YAAY;EACZ,sBAAsB;EACtB,aAAa;EACb,oBAAoB;;EAEpB,mCAAmC;EACnC,0BAA0B;EAC1B,uBAAuB;EACvB,yBAAyB;EACzB,0BAA0B;EAC1B,6BAA6B;EAC7B,+BAA+B;EAC/B,eAAe;EACf,gBAAgB;EAChB,gCAAgC;;EAEhC,sCAAsC;EACtC,wBAAwB;KACrB,qBAAqB;UAChB,gBAAgB;EACxB,uBAAuB;;EAEvB,mDAAmD;AACrD;;AAEA;IACI,qDAAqD;EACvD;;AAEF;IACI,qDAAqD;EACvD;;AAEF;EACE,iBAAiB;EACjB,eAAe;EACf,kDAAkD;AACpD;AACA;EACE,eAAe;EACf,iBAAiB;EACjB,iBAAiB;EACjB,kBAAkB;EAClB,yCAAyC;AAC3C;;AAEA;EACE,eAAe;EACf,iBAAiB;EACjB,kBAAkB;EAClB,mDAAmD;AACrD;;AAEA;EACE,eAAe;EACf,iBAAiB;EACjB,kBAAkB;EAClB,kDAAkD;EAClD;;mBAEiB;AACnB;;AAEA;EACE,oBAAoB;EACpB,mBAAmB;AACrB;;AAEA;IACI,gBAAgB;EAClB;;AAEF;IACI,iBAAiB;EACnB;AACF;EACE,eAAe;EACf,iBAAiB;EACjB,SAAS;EACT,mDAAmD;AACrD;;AAEA;EACE,kDAAkD;AACpD;AACA;EACE,aAAa;EACb,0BAA0B;EAC1B,aAAa;AACf;;EAEE;IACE,aAAa;EACf;;AAEF;EACE,wDAAwD;EACxD,4BAA4B;;EAE5B,kBAAkB;EAClB,gBAAgB;;EAEhB,mDAAmD;EACnD,qEAAqE;EACrE,kBAAkB;EAClB;;mBAEiB;EACjB,0DAA0D;AAC5D;;AAEA;IACI,4CAA4C;EAC9C;;AAEF;IACI,aAAa;IACb,6CAA6C;EAC/C;;AAEF;IACI,mEAAmE;EACrE;;AAEF;IACI,4CAA4C;EAC9C;;AAEF;EACE,YAAY;EACZ,aAAa;EACb,YAAY;EACZ,oBAAoB;EACpB,cAAc;EACd,sBAAsB;;EAEtB,mCAAmC;EACnC,0BAA0B;EAC1B,uBAAuB;EACvB,yBAAyB;EACzB,6BAA6B;EAC7B,+BAA+B;EAC/B,4CAA4C;EAC5C,kEAAkE;;EAElE,sCAAsC;EACtC,wBAAwB;KACrB,qBAAqB;UAChB,gBAAgB;;EAExB,gBAAgB;AAClB;;AAEA;IACI,8CAA8C;IAC9C,uEAAuE;EACzE;;AAEF;IACI,qDAAqD;EACvD;;AAEF;IACI,qDAAqD;EACvD;;AAEF;EACE,kBAAkB;EAClB,WAAW;EACX,UAAU;;EAEV,iBAAiB;EACjB,eAAe;EACf,kDAAkD;AACpD;AACA;EACE,YAAY;EACZ,kBAAkB;EAClB,wBAAwB;EACxB,mBAAmB;EACnB,YAAY;;EAEZ,yDAAyD;EACzD,mBAAmB;AACrB;;AAEA;EACE,YAAY;AACd;;AAEA;EACE,YAAY;AACd;;AAEA;EACE,YAAY;AACd;;AAEA;EACE;IACE,gBAAgB;IAChB,wBAAwB;EAC1B;;EAEA;;IAEE,gBAAgB;IAChB,WAAW;IACX,gBAAgB;IAChB,kBAAkB;EACpB;;EAEA;IACE,gBAAgB;EAClB;AACF;;AAEA;EACE,aAAa;AACf;AACA;EACE,cAAc;EACd,aAAa;EACb,eAAe;EACf,MAAM;EACN,OAAO;EACP,WAAW;EACX,YAAY;EACZ,uBAAuB;EACvB,eAAe;EACf,sBAAsB;;EAEtB,iEAAiE;AACnE;;EAEE;IACE;;MAEE,UAAU;IACZ;EACF;;AAEF;EACE,kBAAkB;EAClB,QAAQ;EACR,UAAU;;EAEV,kDAAkD;EAClD,sBAAsB;AACxB;;AAEA;EACE,SAAS;EACT,oBAAoB;EACpB,kBAAkB;AACpB;AACA;EACE,YAAY;EACZ,aAAa;EACb,qBAAqB;EACrB,uBAAuB;AACzB;;AAEA;EACE;;IAEE,YAAY;EACd;AACF;;AAEA;EACE,yCAAyC;EACzC,eAAe;EACf,iBAAiB;EACjB,iBAAiB;EACjB,kBAAkB;AACpB;;AAEA;EACE,kBAAkB;EAClB,mBAAmB;AACrB;;AAEA;EACE,oBAAoB;AACtB;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,iBAAiB;;EAEjB,iBAAiB;EACjB,kBAAkB;EAClB,mBAAmB;AACrB;AACA;EACE,uBAAuB;EACvB,YAAY;EACZ,aAAa;EACb,kBAAkB;EAClB,eAAe;EACf,WAAW;EACX,YAAY;EACZ,aAAa;EACb,kDAAkD;EAClD,0DAA0D;AAC5D;;EAEE;IACE,2DAA2D;EAC7D;;AAEF;EACE;IACE,mBAAmB;IACnB,UAAU;EACZ;EACA;IACE,mBAAmB;IACnB,UAAU;EACZ;AACF;;AAEA;EACE,UAAU;EACV,WAAW;EACX,kBAAkB;EAClB,8BAA8B;EAC9B,mEAAmE;EACnE,mCAAmC;AACrC;;AAEA;IACI,eAAe;EACjB;;AAEF;IACI,4BAA4B;EAC9B;AACF;EACE,aAAa;EACb,0BAA0B;EAC1B,aAAa;EACb,WAAW;AACb;;EAEE;IACE,eAAe;IACf,aAAa;EACf;;AAEF;EACE,aAAa;EACb,+BAA+B;EAC/B,8BAA8B;EAC9B,mBAAmB;;EAEnB,YAAY;EACZ,WAAW;EACX,sBAAsB;EACtB,YAAY;EACZ,eAAe;EACf,QAAQ;;EAER,kBAAkB;EAClB,iBAAiB;EACjB,qEAAqE;EACrE,kBAAkB;;EAElB;;yBAEuB;AACzB;;AAEA;IACI,eAAe;EACjB;;AAEF;MACM,aAAa;MACb,6CAA6C;IAC/C;;AAEJ;MACM,6CAA6C;IAC/C;;AAEJ;;MAEM,mEAAmE;IACrE;;AAEJ;MACM,mEAAmE;IACrE;;AAEJ;MACM,gBAAgB;IAClB;;AAEJ;;IAEI,4CAA4C;EAC9C;;AAEF;EACE,gBAAgB;EAChB,eAAe;EACf,iBAAiB;EACjB,kBAAkB;EAClB,yCAAyC;EACzC,gBAAgB;EAChB,uBAAuB;EACvB,mBAAmB;AACrB;;AAEA;IACI,qDAAqD;EACvD;;AAEF;EACE,mDAAmD;AACrD;AACA;EACE,aAAa;EACb,gBAAgB;EAChB,cAAc;EACd,mBAAmB;EACnB,0DAA0D;EAC1D,wDAAwD;EACxD,kBAAkB;EAClB,gBAAgB;EAChB,mBAAmB;AACrB;AACA;EACE,UAAU;EACV,SAAS;AACX;AACA;EACE,gBAAgB;EAChB,aAAa;EACb,mBAAmB;EACnB,gBAAgB;EAChB,eAAe;EACf,aAAa;;EAEb,mBAAmB;EACnB,kBAAkB;;EAElB,iCAAiC;AACnC;;AAEA;;;EAGE,mEAAmE;AACrE;;AAEA;EACE,aAAa;EACb,eAAe;AACjB;AACA;EACE,eAAe;EACf,iBAAiB;EACjB,mDAAmD;EACnD,cAAc;;EAEd,aAAa;EACb,mBAAmB;EACnB,WAAW;EACX,iBAAiB;AACnB;;AAEA;EACE,gBAAgB;AAClB;;AAEA;EACE,mDAAmD;EACnD,kBAAkB;AACpB;;AAEA;EACE,aAAa;EACb,mBAAmB;AACrB;;AAEA;EACE,eAAe;EACf,iBAAiB;EACjB,kDAAkD;EAClD,mBAAmB;;EAEnB,aAAa;EACb,mBAAmB;EACnB,iBAAiB;AACnB;;AAEA;EACE,WAAW;AACb;AACA;EACE,cAAc;AAChB;;AAEA;EACE,cAAc;EACd,kDAAkD;EAClD,eAAe;EACf,iBAAiB;EACjB,wBAAwB;AAC1B;;AAEA;EACE,eAAe;EACf,SAAS;EACT,sBAAsB;EACtB,gBAAgB;EAChB,gBAAgB;AAClB;AACA;EACE,oBAAoB;EACpB,mBAAmB;;EAEnB,qEAAqE;EACrE,mBAAmB;AACrB;;EAEE;;IAEE,oBAAoB;IACpB,oCAAoC;IACpC,oBAAoB;IACpB,sBAAsB;EACxB;;EAEA;IACE,WAAW;EACb;;AAEF;EACE,kBAAkB;EAClB,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,eAAe;EACf,YAAY;;EAEZ,mBAAmB;EACnB,kBAAkB;EAClB,mBAAmB;EACnB,mDAAmD;;EAEnD,eAAe;EACf,iBAAiB;AACnB;;AAEA;IACI,eAAe;IACf,aAAa;EACf;;AAEF;IACI,iEAAiE;IACjE,oDAAoD;EACtD;;AAEF;;IAEI,uBAAuB;IACvB,mBAAmB;EACrB;;AAEF;EACE,kBAAkB;;EAElB,WAAW;EACX,UAAU;EACV,UAAU;EACV,SAAS;;EAET,wBAAwB;;KAErB,qBAAqB;;UAEhB,gBAAgB;EACxB,sBAAsB;EACtB,gBAAgB;EAChB,mBAAmB;EACnB,UAAU;AACZ;AACA;EACE,kBAAkB;EAClB,eAAe;EACf,aAAa;EACb,QAAQ;AACV;;EAEE;IACE,eAAe;IACf,aAAa;EACf;;EAEA;MACI,UAAU;IACZ;;AAEJ;EACE,OAAO;EACP,yCAAyC;EACzC,eAAe;EACf,iBAAiB;AACnB;AACA;EACE,wBAAwB;KACrB,qBAAqB;UAChB,gBAAgB;EACxB,aAAa;EACb,eAAe;EACf,SAAS;EACT,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB;;yBAEuB;EACvB,kBAAkB;EAClB,sBAAsB;AACxB;;AAEA;;EAEE,aAAa;EACb,eAAe;AACjB;;AAEA;EACE,iEAAiE;AACnE;;AAEA;EACE,WAAW;EACX,uBAAuB;EACvB,aAAa;EACb,YAAY;EACZ,WAAW;EACX,YAAY;EACZ;;GAEC;AACH;;AAEA;EACE,iBAAiB;EACjB,mBAAmB;EACnB,kDAAkD;AACpD;;AAEA;EACE,aAAa;EACb,6CAA6C;AAC/C;AACA;EACE,6CAA6C;AAC/C;AACA;EACE,gBAAgB;AAClB;;AAEA;EACE,+DAA+D;AACjE;AACA;EACE,+DAA+D;AACjE;;AAEA;;EAEE,4CAA4C;AAC9C;;AAEA;EACE,mBAAmB;EACnB,mEAAmE;EACnE,6BAA6B;AAC/B;;AAEA;EACE,iEAAiE;AACnE;;AAEA;EACE,iEAAiE;AACnE;AACA;EACE,iEAAiE;AACnE;;AAEA;EACE,6CAA6C;AAC/C;;AAEA;EACE,+DAA+D;AACjE;AACA;EACE,+DAA+D;AACjE;;AAEA;;;;EAIE,4CAA4C;AAC9C;;AAEA;EACE,WAAW;EACX,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,SAAS;EACT,UAAU;EACV,mBAAmB;EACnB,sBAAsB;EACtB,sBAAsB;AACxB;AACA;EACE,wEAAwE;EACxE,8BAA8B;EAC9B,sCAAsC;EACtC,uCAAuC;EACvC,wBAAwB;;EAExB,kBAAkB;EAClB,kBAAkB;;EAElB,wBAAwB;;KAErB,qBAAqB;;UAEhB,gBAAgB;EACxB,aAAa;EACb,kBAAkB;;EAElB,oBAAoB;EACpB,QAAQ;EACR,mBAAmB;EACnB,uBAAuB;;EAEvB,qBAAqB;EACrB,eAAe;EACf,gBAAgB;;EAEhB,qCAAqC;EACrC,qCAAqC;EACrC,gBAAgB;EAChB,mBAAmB;EACnB,mDAAmD;EACnD,qDAAqD;EACrD,sBAAsB;EACtB,kBAAkB;;EAElB,2BAA2B;AAC7B;;EAEE;IACE,8BAA8B;IAC9B,sCAAsC;IACtC,uCAAuC;EACzC;;EAEA;IACE,8BAA8B;IAC9B,sCAAsC;IACtC,uCAAuC;EACzC;;EAEA;IACE,uEAAuE;EACzE;;EAEA;IACE,sCAAsC;IACtC,sCAAsC;EACxC;;EAEA;;IAEE,aAAa;IACb,eAAe;EACjB;;EAEA;;IAEE,aAAa;IACb,6CAA6C;EAC/C;;EAEA;;IAEE,aAAa;IACb,6CAA6C;EAC/C;;EAEA;;IAEE,gBAAgB;EAClB;;AAEF;EACE,6CAA6C;AAC/C;;AAEA;IACI,gEAAgE;EAClE;;AAEF;MACM,WAAW;MACX,kBAAkB;MAClB,UAAU;MACV,MAAM;MACN,OAAO;MACP,WAAW;MACX,YAAY;MACZ,2BAA2B;MAC3B,sBAAsB;MACtB,6CAA6C;MAC7C,uBAAuB;IACzB;;AAEJ;IACI,mEAAmE;EACrE;;AAEF;EACE,YAAY;EACZ,aAAa;EACb,sBAAsB;EACtB,mBAAmB;EACnB,uBAAuB;AACzB;;AAEA;IACI,8BAA8B;EAChC;;AAEF;EACE,wCAAwC;EACxC,0CAA0C;EAC1C,iBAAiB;AACnB;;AAEA;IACI,aAAa;EACf;;AAEF;EACE,wCAAwC;EACxC,0CAA0C;;EAE1C,gBAAgB;EAChB,gBAAgB;EAChB,iBAAiB;;EAEjB,cAAc;EACd,mBAAmB;EACnB,uBAAuB;AACzB;;AAEA;IACI,wCAAwC;IACxC,0CAA0C;IAC1C,mBAAmB;EACrB;;AAEF,yGAAyG;AACzG;EACE,aAAa;AACf;AACA;EACE,mEAAmE;EACnE,kBAAkB;EAClB,kBAAkB;EAClB,aAAa;EACb,uBAAuB;AACzB;;EAEE;IACE,uBAAuB;EACzB;;EAEA;;EAEA;MACI;EACJ;IACE;;AAEJ;EACE,aAAa;EACb,mBAAmB;EACnB,kDAAkD;EAClD,YAAY;EACZ,iBAAiB;AACnB;;AAEA;EACE,mDAAmD;EACnD,eAAe;EACf,iBAAiB;EACjB,kBAAkB;EAClB,SAAS;EACT,YAAY;EACZ,yBAAyB;AAC3B;AACA;EACE,yDAAyD;EACzD,sCAAsC;EACtC,6CAA6C;;EAE7C,gBAAgB;EAChB,yBAAyB;EACzB,oBAAoB;EACpB,4BAA4B;EAC5B,4DAA4D;AAC9D;;EAEE;IACE,sDAAsD;EACxD;;EAEA;IACE,oBAAoB;EACtB;;EAEA;IACE,uBAAuB;IACvB,mBAAmB;EACrB;AACF;EACE,aAAa;EACb,uBAAuB;EACvB,mBAAmB;AACrB;;EAEE;IACE,eAAe;IACf,gBAAgB;EAClB;;EAEA;IACE,eAAe;IACf,gBAAgB;EAClB;;AAEF,gDAAgD;AAChD;EACE,eAAe;EACf,wBAAwB;KACrB,qBAAqB;UAChB,gBAAgB;EACxB,UAAU;EACV,kBAAkB;EAClB,aAAa;EACb,qBAAqB;EACrB,aAAa;EACb,SAAS;EACT,yBAAyB;KACtB,sBAAsB;UACjB,iBAAiB;;EAEzB,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,eAAe;EACf,gBAAgB;EAChB,iBAAiB;;EAEjB;;;IAGE;EACF,0DAA0D;EAC1D,gCAAgC;;EAEhC,kDAAkD;EAClD,2DAA2D;EAC3D,mBAAmB;EACnB;;mBAEiB;AACnB;AACA;IACI,aAAa;EACf;AACF;IACI,kBAAkB;IAClB,UAAU;EACZ;AACF;IACI,kBAAkB;IAClB,cAAc;EAChB;AACF;;IAEI,kDAAkD;IAClD,mEAAmE;EACrE;AACF;;IAEI,gDAAgD;IAChD,gEAAgE;EAClE;AACF;;IAEI,aAAa;IACb,6CAA6C;EAC/C;AACF;;IAEI,6CAA6C;EAC/C;AACF;;IAEI,gBAAgB;EAClB;AACF;IACI,eAAe;IACf,6DAA6D;IAC7D,gDAAgD;EAClD;AACF;;MAEM,6DAA6D;MAC7D,gDAAgD;IAClD;AACJ,+CAA+C;;AAE/C;EACE,kBAAkB;AACpB;;AAEA;;;IAGI,eAAe;IACf,kDAAkD;IAClD,gBAAgB;EAClB;;AAEF;IACI,UAAU;EACZ;AACF;;;;IAII,aAAa;IACb,6CAA6C;IAC7C,2BAA2B;EAC7B;CD9vDF","file":"layered.css","sourcesContent":[null,".charcoal-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: transparent;\n box-sizing: border-box;\n padding: 0 24px;\n border-style: none;\n outline: none;\n text-rendering: inherit;\n letter-spacing: inherit;\n word-spacing: inherit;\n text-decoration: none;\n font: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n width: -moz-min-content;\n width: min-content;\n display: inline-grid;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n white-space: nowrap;\n border-radius: 999999px;\n font-size: 14px;\n line-height: 22px;\n font-weight: bold;\n color: var(--charcoal-color-text-default);\n background-color: var(--charcoal-color-container-secondary-default-a);\n transition:\n 0.2s color,\n 0.2s background-color,\n 0.2s box-shadow;\n height: 40px;\n}\n\n .charcoal-button:disabled,\n .charcoal-button[aria-disabled]:not([aria-disabled='false']) {\n cursor: default;\n opacity: 0.32;\n }\n\n .charcoal-button:not(:disabled):not([aria-disabled]):focus-visible,\n .charcoal-button[aria-disabled='false']:focus-visible {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n .charcoal-button:not(:disabled):not([aria-disabled]):hover,\n .charcoal-button[aria-disabled='false']:hover {\n color: var(--charcoal-color-text-hover);\n background-color: var(--charcoal-color-container-secondary-hover-a);\n }\n\n .charcoal-button:not(:disabled):not([aria-disabled]):active,\n .charcoal-button[aria-disabled='false']:active,\n .charcoal-button[data-active='true'] {\n color: var(--charcoal-color-text-press);\n background-color: var(--charcoal-color-container-secondary-press-a);\n }\n\n .charcoal-button[data-variant='Primary'] {\n color: var(--charcoal-color-text-on-primary-default);\n background-color: var(--charcoal-color-container-primary-default);\n }\n\n .charcoal-button[data-variant='Primary']:hover:not(:disabled):not([aria-disabled]),\n .charcoal-button[data-variant='Primary']:hover[aria-disabled='false'] {\n color: var(--charcoal-color-text-on-primary-hover);\n background-color: var(--charcoal-color-container-primary-hover);\n }\n\n .charcoal-button[data-variant='Primary']:active:not(:disabled):not([aria-disabled]),\n .charcoal-button[data-variant='Primary']:active[aria-disabled='false'],\n .charcoal-button[data-variant='Primary'][data-active='true'] {\n color: var(--charcoal-color-text-on-primary-press);\n background-color: var(--charcoal-color-container-primary-press);\n }\n\n .charcoal-button[data-variant='Overlay'] {\n color: var(--charcoal-color-text-on-on-img-default);\n background-color: var(--charcoal-color-container-on-img-default);\n }\n\n .charcoal-button[data-variant='Overlay']:hover:not(:disabled):not([aria-disabled]),\n .charcoal-button[data-variant='Overlay']:hover[aria-disabled='false'] {\n color: var(--charcoal-color-text-on-on-img-hover);\n background-color: var(--charcoal-color-container-on-img-hover);\n }\n\n .charcoal-button[data-variant='Overlay']:active:not(:disabled):not([aria-disabled]),\n .charcoal-button[data-variant='Overlay']:active[aria-disabled='false'],\n .charcoal-button[data-variant='Overlay'][data-active='true'] {\n color: var(--charcoal-color-text-on-on-img-press);\n background-color: var(--charcoal-color-container-on-img-press);\n }\n\n .charcoal-button[data-variant='Navigation'] {\n color: var(--charcoal-color-text-on-hud-default);\n background-color: var(--charcoal-color-container-hud-default);\n }\n\n .charcoal-button[data-variant='Navigation']:hover:not(:disabled):not([aria-disabled]),\n .charcoal-button[data-variant='Navigation']:hover[aria-disabled='false'] {\n color: var(--charcoal-color-text-on-hud-hover);\n background-color: var(--charcoal-color-container-hud-hover);\n }\n\n .charcoal-button[data-variant='Navigation']:active:not(:disabled):not([aria-disabled]),\n .charcoal-button[data-variant='Navigation']:active[aria-disabled='false'],\n .charcoal-button[data-variant='Navigation'][data-active='true'] {\n color: var(--charcoal-color-text-on-hud-press);\n background-color: var(--charcoal-color-container-hud-press);\n }\n\n .charcoal-button[data-variant='Danger'] {\n color: var(--charcoal-color-text-on-negative-default);\n background-color: var(--charcoal-color-container-negative-default);\n }\n\n .charcoal-button[data-variant='Danger']:hover:not(:disabled):not([aria-disabled]),\n .charcoal-button[data-variant='Danger']:hover[aria-disabled='false'] {\n color: var(--charcoal-color-text-on-negative-hover);\n background-color: var(--charcoal-color-container-negative-hover);\n }\n\n .charcoal-button[data-variant='Danger']:active:not(:disabled):not([aria-disabled]),\n .charcoal-button[data-variant='Danger']:active[aria-disabled='false'],\n .charcoal-button[data-variant='Danger'][data-active='true'] {\n color: var(--charcoal-color-text-on-negative-press);\n background-color: var(--charcoal-color-container-negative-press);\n }\n\n .charcoal-button[data-size='S'] {\n padding: 0 16px;\n height: 32px;\n }\n\n .charcoal-button[data-full-width='true'] {\n width: 100%;\n }\n.charcoal-clickable {\n cursor: pointer;\n\n /* Reset button appearance */\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: transparent;\n padding: 0;\n border-style: none;\n outline: none;\n color: inherit;\n text-rendering: inherit;\n letter-spacing: inherit;\n word-spacing: inherit;\n text-decoration: none;\n\n /* Change the font styles in all browsers. */\n font: inherit;\n\n /* Remove the margin in Firefox and Safari. */\n margin: 0;\n\n /* Show the overflow in Edge. */\n overflow: visible;\n\n /* Remove the inheritance of text transform in Firefox. */\n text-transform: none;\n}\n\n .charcoal-clickable:disabled,\n .charcoal-clickable[aria-disabled]:not([aria-disabled='false']) {\n cursor: default;\n }\n\n .charcoal-clickable:focus {\n outline: none;\n }\n\n .charcoal-clickable::-moz-focus-inner {\n border-style: none;\n padding: 0;\n }\n.charcoal-icon-button {\n cursor: pointer;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: transparent;\n padding: 0;\n border-style: none;\n outline: none;\n color: inherit;\n text-rendering: inherit;\n letter-spacing: inherit;\n word-spacing: inherit;\n text-decoration: none;\n font: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n\n -webkit-user-select: none;\n\n -moz-user-select: none;\n\n user-select: none;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 999999px;\n transition:\n 0.2s background-color,\n 0.2s box-shadow;\n}\n\n .charcoal-icon-button:disabled,\n .charcoal-icon-button[aria-disabled]:not([aria-disabled='false']) {\n cursor: default;\n opacity: 0.32;\n }\n\n .charcoal-icon-button:focus {\n outline: none;\n }\n\n .charcoal-icon-button::-moz-focus-inner {\n border-style: none;\n padding: 0;\n }\n\n .charcoal-icon-button[data-size='XS'] {\n width: 20px;\n height: 20px;\n }\n\n .charcoal-icon-button[data-size='S'] {\n width: 32px;\n height: 32px;\n }\n\n .charcoal-icon-button[data-size='M'] {\n width: 40px;\n height: 40px;\n }\n\n .charcoal-icon-button[data-variant='Default'] {\n color: var(--charcoal-color-icon-tertiary-default);\n background-color: var(--charcoal-color-container-default-a);\n }\n\n .charcoal-icon-button[data-variant='Default'][data-active='true']:not(:disabled):not([aria-disabled]),\n .charcoal-icon-button[data-variant='Default'][data-active='true'][aria-disabled='false'] {\n color: var(--charcoal-color-icon-tertiary-press);\n background-color: var(--charcoal-color-container-press-a);\n }\n\n .charcoal-icon-button[data-variant='Default'][data-active='false']:not(:disabled):not([aria-disabled]):hover,\n .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:hover {\n color: var(--charcoal-color-icon-tertiary-hover);\n background-color: var(--charcoal-color-container-hover-a);\n }\n\n .charcoal-icon-button[data-variant='Default'][data-active='false']:not(:disabled):not([aria-disabled]):active,\n .charcoal-icon-button[data-variant='Default'][data-active='false'][aria-disabled='false']:active {\n color: var(--charcoal-color-icon-tertiary-press);\n background-color: var(--charcoal-color-container-press-a);\n }\n\n .charcoal-icon-button[data-variant='Overlay'] {\n color: var(--charcoal-color-icon-on-on-img-default);\n background-color: var(--charcoal-color-container-on-img-default);\n }\n\n .charcoal-icon-button[data-variant='Overlay'][data-active='true']:not(:disabled):not([aria-disabled]),\n .charcoal-icon-button[data-variant='Overlay'][data-active='true'][aria-disabled='false'] {\n color: var(--charcoal-color-icon-on-on-img-press);\n background-color: var(--charcoal-color-container-on-img-press);\n }\n\n .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(:disabled):not([aria-disabled]):hover,\n .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:hover {\n color: var(--charcoal-color-icon-on-on-img-hover);\n background-color: var(--charcoal-color-container-on-img-hover);\n }\n\n .charcoal-icon-button[data-variant='Overlay'][data-active='false']:not(:disabled):not([aria-disabled]):active,\n .charcoal-icon-button[data-variant='Overlay'][data-active='false'][aria-disabled='false']:active {\n color: var(--charcoal-color-icon-on-on-img-press);\n background-color: var(--charcoal-color-container-on-img-press);\n }\n\n .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus,\n .charcoal-icon-button[aria-disabled='false']:focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus-visible,\n .charcoal-icon-button[aria-disabled='false']:focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),\n .charcoal-icon-button[aria-disabled='false']:focus:not(:focus-visible) {\n box-shadow: none;\n }\n.charcoal-radio__label {\n display: grid;\n grid-template-columns: auto 1fr;\n grid-gap: 4px;\n align-items: center;\n cursor: pointer;\n}\n\n .charcoal-radio__label[aria-disabled]:not([aria-disabled='false']) {\n opacity: 0.32;\n cursor: default;\n }\n\n.charcoal-radio__label_div {\n font-size: 14px;\n line-height: 22px;\n color: var(--charcoal-color-text-default);\n}\n.charcoal-radio-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: block;\n box-sizing: border-box;\n\n margin: 0;\n padding: 6px;\n\n width: 20px;\n height: 20px;\n cursor: pointer;\n border-radius: 999999px;\n background-color: var(--charcoal-color-container-default);\n transition:\n 0.2s background-color,\n 0.2s box-shadow;\n}\n\n.charcoal-radio-input:checked {\n background-color: var(--charcoal-color-container-primary-default);\n}\n\n.charcoal-radio-input:checked::after {\n content: '';\n display: block;\n width: 8px;\n height: 8px;\n pointer-events: none;\n background-color: var(--charcoal-color-icon-on-primary-default);\n border-radius: 999999px;\n transition:\n 0.2s background-color,\n 0.2s box-shadow;\n}\n\n.charcoal-radio-input:not(:checked) {\n border-width: 2px;\n border-style: solid;\n border-color: var(--charcoal-color-border-default);\n}\n\n.charcoal-radio-input:disabled {\n cursor: default;\n}\n\n.charcoal-radio-input:not(:disabled):hover {\n background-color: var(--charcoal-color-container-hover);\n}\n\n.charcoal-radio-input:not(:disabled):active {\n background-color: var(--charcoal-color-container-press);\n}\n\n.charcoal-radio-input:not(:disabled):focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n\n.charcoal-radio-input:not(:disabled):focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n\n.charcoal-radio-input:not(:disabled):focus:not(:focus-visible) {\n box-shadow: none;\n}\n\n.charcoal-radio-input:not(:disabled)[aria-invalid='true'],\n.charcoal-radio-input:not(:disabled)[aria-invalid='true']:focus {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n}\n\n.charcoal-radio-input:checked:not(:disabled):hover {\n background-color: var(--charcoal-color-container-primary-hover);\n}\n\n.charcoal-radio-input:checked:not(:disabled):hover::after {\n background-color: var(--charcoal-color-icon-on-primary-hover);\n}\n\n.charcoal-radio-input:checked:not(:disabled):active {\n background-color: var(--charcoal-color-container-primary-press);\n}\n\n.charcoal-radio-input:checked:not(:disabled):active::after {\n background-color: var(--charcoal-color-icon-on-primary-press);\n}\n.charcoal-radio-group {\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 8px;\n}\n.charcoal-multi-select {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n position: relative;\n cursor: pointer;\n gap: 4px;\n}\n\n .charcoal-multi-select:disabled,\n .charcoal-multi-select[aria-disabled]:not([aria-disabled='false']) {\n opacity: 0.32;\n cursor: default;\n }\n\n.charcoal-multi-select-label {\n display: flow-root;\n align-items: center;\n font-size: 14px;\n line-height: 22px;\n color: var(--charcoal-color-text-default);\n}\n\n.charcoal-multi-select-label::before {\n display: block;\n width: 0;\n height: 0;\n content: '';\n margin-top: -4px;\n }\n\n.charcoal-multi-select-label::after {\n display: block;\n width: 0;\n height: 0;\n content: '';\n margin-bottom: -4px;\n }\n\n.charcoal-multi-select-input[type='checkbox'] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: block;\n width: 20px;\n height: 20px;\n margin: 0;\n background-color: var(--charcoal-color-container-neutral-default);\n border-radius: 999999px;\n transition:\n 0.2s background-color,\n 0.2s box-shadow;\n}\n\n.charcoal-multi-select-input[type='checkbox']:checked {\n background-color: var(--charcoal-color-container-primary-default);\n }\n\n.charcoal-multi-select-input[type='checkbox']:focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n.charcoal-multi-select-input[type='checkbox']:focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n.charcoal-multi-select-input[type='checkbox']:focus:not(:focus-visible) {\n box-shadow: none;\n }\n\n.charcoal-multi-select-input[type='checkbox']:hover:not(:disabled):not([aria-disabled]),\n .charcoal-multi-select-input[type='checkbox']:hover[aria-disabled='false'] {\n background-color: var(--charcoal-color-container-neutral-hover);\n }\n\n.charcoal-multi-select-input[type='checkbox']:active:not(:disabled):not([aria-disabled]),\n .charcoal-multi-select-input[type='checkbox']:active[aria-disabled='false'] {\n background-color: var(--charcoal-color-container-neutral-press);\n }\n\n.charcoal-multi-select-input[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),\n .charcoal-multi-select-input[type='checkbox']:checked:hover[aria-disabled='false'] {\n background-color: var(--charcoal-color-container-primary-hover);\n }\n\n.charcoal-multi-select-input[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),\n .charcoal-multi-select-input[type='checkbox']:checked:active[aria-disabled='false'] {\n background-color: var(--charcoal-color-container-primary-press);\n }\n\n.charcoal-multi-select-input[type='checkbox'][aria-invalid='true'][data-overlay='false']:not(:disabled):not(\n [aria-disabled]\n ) {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n }\n\n.charcoal-multi-select-input[type='checkbox'][aria-invalid='true'][data-overlay='false'][aria-disabled='false'] {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n }\n\n.charcoal-multi-select-input[type='checkbox'][data-overlay='true'] {\n background-color: var(--charcoal-color-container-on-img-default);\n }\n\n.charcoal-multi-select-overlay {\n position: absolute;\n top: -2px;\n left: -2px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n border-radius: 999999px;\n color: var(--charcoal-color-icon-on-primary-default);\n transition: 0.2s box-shadow;\n}\n\n.charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true']:not(:disabled):not(\n [aria-disabled]\n ) {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n }\n\n.charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true'][aria-disabled='false'] {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n }\n\n.charcoal-multi-select-overlay[data-overlay='true'] {\n border-color: var(--charcoal-color-border-hud);\n border-width: 2px;\n border-style: solid;\n }\n.charcoal-switch__label {\n display: inline-grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n cursor: pointer;\n outline: 0;\n gap: 4px;\n}\n\n .charcoal-switch__label[aria-disabled='true'] {\n opacity: 0.32;\n cursor: default;\n }\n\n .charcoal-switch__label[aria-disabled='true'] > input {\n opacity: 1;\n }\n\n.charcoal-switch__label_div {\n font-size: 14px;\n line-height: 22px;\n color: var(--charcoal-color-text-default);\n}\n.charcoal-switch-input {\n cursor: pointer;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: inline-flex;\n position: relative;\n box-sizing: border-box;\n width: 28px;\n border: 2px solid transparent;\n\n transition-property: background-color, box-shadow;\n transition-duration: 0.2s;\n\n outline: none;\n border-radius: 16px;\n height: 16px;\n margin: 0;\n background-color: var(--charcoal-color-container-neutral-default);\n}\n\n.charcoal-switch-input:disabled,\n.charcoal-switch-input[readonly] {\n opacity: 0.32;\n cursor: default;\n}\n\n.charcoal-switch-input::after {\n content: '';\n position: absolute;\n display: block;\n top: 0;\n left: 0;\n width: 12px;\n height: 12px;\n transform: translateX(0);\n transition: transform 0.2s;\n border-radius: 1024px;\n background-color: var(--charcoal-color-icon-on-primary-default);\n}\n\n.charcoal-switch-input:checked::after {\n transform: translateX(12px);\n transition: transform 0.2s;\n}\n\n.charcoal-switch-input:checked {\n background-color: var(--charcoal-color-container-primary-default);\n}\n\n.charcoal-switch-input:not(:disabled):hover {\n background-color: var(--charcoal-color-container-neutral-hover);\n}\n\n.charcoal-switch-input:not(:disabled):active {\n background-color: var(--charcoal-color-container-neutral-press);\n}\n\n.charcoal-switch-input:not(:disabled):focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-switch-input:not(:disabled):focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-switch-input:not(:disabled):focus:not(:focus-visible) {\n box-shadow: none;\n}\n\n.charcoal-switch-input:not(:disabled)::after:hover {\n background-color: var(--charcoal-color-icon-on-primary-hover);\n}\n\n.charcoal-switch-input:not(:disabled)::after:active {\n background-color: var(--charcoal-color-icon-on-primary-press);\n}\n\n.charcoal-switch-input:not(:disabled):checked:hover {\n background-color: var(--charcoal-color-container-primary-hover);\n}\n\n.charcoal-switch-input:not(:disabled):checked:active {\n background-color: var(--charcoal-color-container-primary-press);\n}\n.charcoal-text-field-root {\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 4px;\n}\n\n .charcoal-text-field-root[aria-disabled='true'] {\n opacity: 0.32;\n }\n\n.charcoal-text-field-container {\n display: flex;\n height: 40px;\n transition:\n 0.2s background-color,\n 0.2s box-shadow;\n color: var(--charcoal-color-text-secondary-default);\n background-color: var(--charcoal-color-container-secondary-default-a);\n border-radius: 4px;\n padding: 0 8px;\n line-height: 22px;\n font-size: 14px;\n}\n\n.charcoal-text-field-container[data-invalid='true'] {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n }\n\n.charcoal-text-field-container:not([aria-disabled='true']):hover {\n background-color: var(--charcoal-color-container-secondary-hover-a);\n }\n\n.charcoal-text-field-container:not([aria-disabled='true']):focus-within {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n.charcoal-text-field-container:not([aria-disabled='true'])[data-invalid='true']:focus-within {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n }\n\n.charcoal-text-field-prefix {\n display: flex;\n align-items: center;\n margin-right: 4px;\n}\n\n.charcoal-text-field-suffix {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-left: 4px;\n}\n\n.charcoal-text-field-input-root {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n}\n\n.charcoal-text-field-input {\n border: none;\n box-sizing: border-box;\n outline: none;\n font-family: inherit;\n\n /* Prevent zooming for iOS Safari */\n transform-origin: top left;\n transform: scale(0.875);\n width: calc(100% / 0.875);\n height: calc(100% / 0.875);\n font-size: calc(14px / 0.875);\n line-height: calc(22px / 0.875);\n padding-left: 0;\n padding-right: 0;\n border-radius: calc(4px / 0.875);\n\n /* Display box-shadow for iOS Safari */\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: transparent;\n\n color: var(--charcoal-color-text-secondary-default);\n}\n\n.charcoal-text-field-input::-moz-placeholder {\n color: var(--charcoal-color-text-placeholder-default);\n }\n\n.charcoal-text-field-input::placeholder {\n color: var(--charcoal-color-text-placeholder-default);\n }\n\n.charcoal-text-field-line-counter {\n line-height: 22px;\n font-size: 14px;\n color: var(--charcoal-color-text-tertiary-default);\n}\n.charcoal-field-label {\n font-size: 14px;\n line-height: 22px;\n font-weight: bold;\n display: flow-root;\n color: var(--charcoal-color-text-default);\n}\n\n.charcoal-field-label-required-text {\n font-size: 14px;\n line-height: 22px;\n display: flow-root;\n color: var(--charcoal-color-text-secondary-default);\n}\n\n.charcoal-field-label-sub-label {\n font-size: 14px;\n line-height: 22px;\n display: flow-root;\n color: var(--charcoal-color-text-tertiary-default);\n transition:\n 0.2s color,\n 0.2s box-shadow;\n}\n\n.charcoal-field-label-root {\n display: inline-flex;\n align-items: center;\n}\n\n.charcoal-field-label-root > .charcoal-field-label-required-text {\n margin-left: 4px;\n }\n\n.charcoal-field-label-root > .charcoal-field-label-sub-label {\n margin-left: auto;\n }\n.charcoal-text-field-assistive-text {\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n color: var(--charcoal-color-text-secondary-default);\n}\n\n.charcoal-text-field-assistive-text[data-invalid='true'] {\n color: var(--charcoal-color-text-negative-default);\n}\n.charcoal-text-area-root {\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 4px;\n}\n\n .charcoal-text-area-root[aria-disabled='true'] {\n opacity: 0.32;\n }\n\n.charcoal-text-area-container {\n /* Runtime variable overridden by the React component. */\n --charcoal-text-area-rows: 4;\n\n position: relative;\n overflow: hidden;\n\n color: var(--charcoal-color-text-secondary-default);\n background-color: var(--charcoal-color-container-secondary-default-a);\n border-radius: 4px;\n transition:\n 0.2s background-color,\n 0.2s box-shadow;\n height: calc(22px * var(--charcoal-text-area-rows) + 18px);\n}\n\n.charcoal-text-area-container[aria-invalid='true'] {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n }\n\n.charcoal-text-area-container:focus-within {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n.charcoal-text-area-container:not([aria-disabled='true']):hover {\n background-color: var(--charcoal-color-container-secondary-hover-a);\n }\n\n.charcoal-text-area-container[aria-invalid='true']:focus-within {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n }\n\n.charcoal-text-area-textarea {\n border: none;\n outline: none;\n resize: none;\n font-family: inherit;\n color: inherit;\n box-sizing: border-box;\n\n /* Prevent zooming for iOS Safari */\n transform-origin: top left;\n transform: scale(0.875);\n width: calc(100% / 0.875);\n font-size: calc(14px / 0.875);\n line-height: calc(22px / 0.875);\n padding: calc(9px / 0.875) calc(8px / 0.875);\n height: calc(22px / 0.875 * var(--charcoal-text-area-rows) + 20px);\n\n /* Display box-shadow for iOS Safari */\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n\n background: none;\n}\n\n.charcoal-text-area-textarea[data-no-bottom-padding='true'] {\n padding: calc(9px / 0.875) calc(8px / 0.875) 0;\n height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px);\n }\n\n.charcoal-text-area-textarea::-moz-placeholder {\n color: var(--charcoal-color-text-placeholder-default);\n }\n\n.charcoal-text-area-textarea::placeholder {\n color: var(--charcoal-color-text-placeholder-default);\n }\n\n.charcoal-text-area-counter {\n position: absolute;\n bottom: 9px;\n right: 8px;\n\n line-height: 22px;\n font-size: 14px;\n color: var(--charcoal-color-text-tertiary-default);\n}\n.charcoal-modal-dialog {\n margin: auto;\n position: relative;\n height: -moz-fit-content;\n height: fit-content;\n width: 440px;\n\n background-color: var(--charcoal-color-container-default);\n border-radius: 24px;\n}\n\n.charcoal-modal-dialog[data-size='S'] {\n width: 336px;\n}\n\n.charcoal-modal-dialog[data-size='M'] {\n width: 440px;\n}\n\n.charcoal-modal-dialog[data-size='L'] {\n width: 648px;\n}\n\n@media (max-width: 743px) {\n .charcoal-modal-dialog {\n max-width: 440px;\n width: calc(100% - 48px);\n }\n\n .charcoal-modal-dialog[data-bottom-sheet='true'],\n .charcoal-modal-dialog[data-bottom-sheet='full'] {\n max-width: unset;\n width: 100%;\n border-radius: 0;\n margin: auto 0 0 0;\n }\n\n .charcoal-modal-dialog[data-bottom-sheet='full'] {\n min-height: 100%;\n }\n}\n\n.charcoal-modal-dialog:focus {\n outline: none;\n}\n.charcoal-modal-background {\n overflow: auto;\n display: flex;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n justify-content: center;\n padding: 40px 0;\n box-sizing: border-box;\n\n background-color: var(--charcoal-color-container-neutral-default);\n}\n\n @media (max-width: 743px) {\n .charcoal-modal-background[data-bottom-sheet='true'],\n .charcoal-modal-background[data-bottom-sheet='full'] {\n padding: 0;\n }\n }\n\n.charcoal-modal-close-button {\n position: absolute;\n top: 8px;\n right: 8px;\n\n color: var(--charcoal-color-text-tertiary-default);\n transition: 0.2s color;\n}\n\n.charcoal-modal-title {\n margin: 0;\n font-weight: inherit;\n font-size: inherit;\n}\n.charcoal-modal-header-root {\n height: 64px;\n display: grid;\n align-content: center;\n justify-content: center;\n}\n\n@media (max-width: 743px) {\n .charcoal-modal-header-root[data-bottom-sheet='true'],\n .charcoal-modal-header-root[data-bottom-sheet='full'] {\n height: 48px;\n }\n}\n\n.charcoal-modal-header-title {\n color: var(--charcoal-color-text-default);\n font-size: 16px;\n line-height: 24px;\n font-weight: bold;\n display: flow-root;\n}\n\n.charcoal-modal-align {\n padding-left: 16px;\n padding-right: 16px;\n}\n\n.charcoal-modal-body {\n padding-bottom: 40px;\n}\n\n.charcoal-modal-buttons {\n display: grid;\n grid-auto-flow: row;\n grid-row-gap: 8px;\n\n padding-top: 16px;\n padding-left: 16px;\n padding-right: 16px;\n}\n.charcoal-loading-spinner {\n box-sizing: content-box;\n margin: auto;\n padding: 16px;\n border-radius: 8px;\n font-size: 48px;\n width: 48px;\n height: 48px;\n opacity: 0.84;\n color: var(--charcoal-color-icon-tertiary-default);\n background-color: var(--charcoal-color-background-default);\n}\n\n .charcoal-loading-spinner[data-transparent='true'] {\n background-color: var(--charcoal-color-container-default-a);\n }\n\n@keyframes charcoal-loading-spinner-icon-scale-out {\n from {\n transform: scale(0);\n opacity: 1;\n }\n to {\n transform: scale(1);\n opacity: 0;\n }\n}\n\n.charcoal-loading-spinner-icon {\n width: 1em;\n height: 1em;\n border-radius: 1em;\n background-color: currentColor;\n animation: charcoal-loading-spinner-icon-scale-out 1s both ease-out;\n animation-iteration-count: infinite;\n}\n\n.charcoal-loading-spinner-icon[data-reset-animation] {\n animation: none;\n }\n\n.charcoal-loading-spinner-icon[data-once='true'] {\n animation-iteration-count: 1;\n }\n.charcoal-dropdown-selector-root {\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 4px;\n width: 100%;\n}\n\n .charcoal-dropdown-selector-root[aria-disabled='true'] {\n cursor: default;\n opacity: 0.32;\n }\n\n.charcoal-dropdown-selector-button {\n display: grid;\n grid-template-columns: 1fr auto;\n justify-content: space-between;\n align-items: center;\n\n height: 40px;\n width: 100%;\n box-sizing: border-box;\n border: none;\n cursor: pointer;\n gap: 4px;\n\n padding-right: 8px;\n padding-left: 8px;\n background-color: var(--charcoal-color-container-secondary-default-a);\n border-radius: 4px;\n\n transition:\n 0.2s box-shadow,\n 0.2s background-color;\n}\n\n.charcoal-dropdown-selector-button:disabled {\n cursor: default;\n }\n\n.charcoal-dropdown-selector-button:not(:disabled):focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n.charcoal-dropdown-selector-button:not(:disabled):focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n.charcoal-dropdown-selector-button:not(:disabled)[data-active='true'],\n .charcoal-dropdown-selector-button:not(:disabled):active {\n background-color: var(--charcoal-color-container-secondary-press-a);\n }\n\n.charcoal-dropdown-selector-button:not(:disabled):hover {\n background-color: var(--charcoal-color-container-secondary-hover-a);\n }\n\n.charcoal-dropdown-selector-button:not(:disabled):focus:not(:focus-visible) {\n box-shadow: none;\n }\n\n.charcoal-dropdown-selector-button[aria-invalid='true'],\n .charcoal-dropdown-selector-button:not(:disabled)[aria-invalid='true']:focus:not(:focus-visible) {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n }\n\n.charcoal-ui-dropdown-selector-text {\n text-align: left;\n font-size: 14px;\n line-height: 22px;\n display: flow-root;\n color: var(--charcoal-color-text-default);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.charcoal-ui-dropdown-selector-text[data-placeholder='true'] {\n color: var(--charcoal-color-text-placeholder-default);\n }\n\n.charcoal-ui-dropdown-selector-icon {\n color: var(--charcoal-color-icon-secondary-default);\n}\n.charcoal-popover {\n margin: 4px 0;\n list-style: none;\n overflow: auto;\n max-height: inherit;\n background-color: var(--charcoal-color-background-default);\n border: solid 1px var(--charcoal-color-border-secondary);\n border-radius: 8px;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n.charcoal-menu-list {\n padding: 0;\n margin: 0;\n}\n.charcoal-list-item {\n list-style: none;\n display: flex;\n align-items: center;\n min-height: 40px;\n cursor: pointer;\n outline: none;\n\n padding-right: 16px;\n padding-left: 16px;\n\n transition: background-color 0.2s;\n}\n\n.charcoal-list-item:not([aria-disabled='true']):hover,\n.charcoal-list-item:not([aria-disabled='true']):focus,\n.charcoal-list-item:not([aria-disabled='true']):focus-within {\n background-color: var(--charcoal-color-container-secondary-default);\n}\n\n.charcoal-list-item[aria-disabled='true'] {\n opacity: 0.32;\n cursor: default;\n}\n.charcoal-dropdown-selector-menu-item {\n font-size: 14px;\n line-height: 22px;\n color: var(--charcoal-color-text-secondary-default);\n padding: 9px 0;\n\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 20px;\n}\n\n.charcoal-dropdown-selector-menu-item[data-selected='true'] {\n margin-left: 0px;\n}\n\n.charcoal-dropdown-selector-menu-item-icon {\n color: var(--charcoal-color-text-secondary-default);\n padding-right: 4px;\n}\n\n.charcoal-dropdown-selector-menu-item-container {\n display: flex;\n align-items: center;\n}\n\n.charcoal-dropdown-selector-menu-secondary {\n font-size: 12px;\n line-height: 20px;\n color: var(--charcoal-color-text-tertiary-default);\n padding-bottom: 9px;\n\n display: flex;\n align-items: center;\n margin-left: 20px;\n}\n\n.charcoal-dropdown-selector-menu-fullwidth {\n width: 100%;\n}\n.charcoal-menu-item-group {\n display: block;\n}\n\n.charcoal-menu-item-group > span {\n display: block;\n color: var(--charcoal-color-text-tertiary-default);\n font-size: 12px;\n font-weight: bold;\n padding: 12px 0 8px 16px;\n}\n\n.charcoal-menu-item-group > ul {\n padding-left: 0;\n margin: 0;\n box-sizing: border-box;\n list-style: none;\n overflow: hidden;\n}\n.charcoal-segmented-control {\n display: inline-flex;\n align-items: center;\n\n background-color: var(--charcoal-color-container-secondary-default-a);\n border-radius: 16px;\n}\n\n .charcoal-segmented-control[data-uniform-segment-width='true'],\n .charcoal-segmented-control[data-full-width='true'] {\n display: inline-grid;\n grid-auto-columns: minmax(80px, 1fr);\n grid-auto-rows: 32px;\n grid-auto-flow: column;\n }\n\n .charcoal-segmented-control[data-full-width='true'] {\n width: 100%;\n }\n\n.charcoal-segmented-control-radio__label {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n height: 32px;\n\n padding-right: 16px;\n padding-left: 16px;\n border-radius: 16px;\n color: var(--charcoal-color-text-secondary-default);\n\n font-size: 14px;\n line-height: 22px;\n}\n\n.charcoal-segmented-control-radio__label[aria-disabled]:not([aria-disabled='false']) {\n cursor: default;\n opacity: 0.32;\n }\n\n.charcoal-segmented-control-radio__label[data-checked='true'] {\n background-color: var(--charcoal-color-container-primary-default);\n color: var(--charcoal-color-text-on-primary-default);\n }\n\n.charcoal-segmented-control-radio__label[data-uniform-segment-width='true'],\n .charcoal-segmented-control-radio__label[data-full-width='true'] {\n justify-content: center;\n white-space: nowrap;\n }\n\n.charcoal-segmented-control-radio__input {\n position: absolute;\n\n height: 0px;\n width: 0px;\n padding: 0;\n margin: 0;\n\n -webkit-appearance: none;\n\n -moz-appearance: none;\n\n appearance: none;\n box-sizing: border-box;\n overflow: hidden;\n white-space: nowrap;\n opacity: 0;\n}\n.charcoal-checkbox__label {\n position: relative;\n cursor: pointer;\n display: flex;\n gap: 4px;\n}\n\n .charcoal-checkbox__label[aria-disabled='true'] {\n cursor: default;\n opacity: 0.32;\n }\n\n .charcoal-checkbox__label[aria-disabled='true'] > input {\n opacity: 1;\n }\n\n.charcoal-checkbox__label_div {\n flex: 1;\n color: var(--charcoal-color-text-default);\n font-size: 14px;\n line-height: 20px;\n}\n.charcoal-checkbox-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: flex;\n cursor: pointer;\n margin: 0;\n width: 20px;\n height: 20px;\n border-radius: 4px;\n transition:\n 0.2s box-shadow,\n 0.2s background-color;\n position: relative;\n box-sizing: border-box;\n}\n\n.charcoal-checkbox-input:disabled,\n.charcoal-checkbox-input[readonly] {\n opacity: 0.32;\n cursor: default;\n}\n\n.charcoal-checkbox-input:checked {\n background-color: var(--charcoal-color-container-primary-default);\n}\n\n.charcoal-checkbox-input:checked::after {\n content: '';\n background-color: white;\n display: flex;\n margin: auto;\n width: 16px;\n height: 16px;\n clip-path: path(\n 'M10.6 5a1.3 1.3 0 0 1 1.8 1.9l-5.7 5.6-3-2.9a1.3 1.3 0 1 1 2-1.9l1 1z'\n );\n}\n\n.charcoal-checkbox-input:not(:checked) {\n border-width: 2px;\n border-style: solid;\n border-color: var(--charcoal-color-border-default);\n}\n\n.charcoal-checkbox-input:not(:disabled):focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-checkbox-input:not(:disabled):focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-checkbox-input:not(:disabled):focus:not(:focus-visible) {\n box-shadow: none;\n}\n\n.charcoal-checkbox-input:checked:not(:disabled):hover {\n background-color: var(--charcoal-color-container-primary-hover);\n}\n.charcoal-checkbox-input:checked:not(:disabled):active {\n background-color: var(--charcoal-color-container-primary-press);\n}\n\n.charcoal-checkbox-input[aria-invalid='true'],\n.charcoal-checkbox-input[aria-invalid='true']:not(:disabled):focus {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n}\n\n.charcoal-checkbox-input[data-rounded='true'] {\n border-radius: 10px;\n background-color: var(--charcoal-color-container-secondary-default);\n border: 2px solid transparent;\n}\n\n.charcoal-checkbox-input[data-rounded='true']:checked {\n background-color: var(--charcoal-color-container-primary-default);\n}\n\n.charcoal-checkbox-input[data-rounded='true']:not(:disabled):hover {\n background-color: var(--charcoal-color-container-secondary-hover);\n}\n.charcoal-checkbox-input[data-rounded='true']:not(:disabled):active {\n background-color: var(--charcoal-color-container-secondary-press);\n}\n\n.charcoal-checkbox-input[data-rounded='true']:not(:disabled):focus-visible {\n box-shadow: 0 0 0 6px rgba(0, 150, 250, 0.32);\n}\n\n.charcoal-checkbox-input[data-rounded='true']:checked:not(:disabled):hover {\n background-color: var(--charcoal-color-container-primary-hover);\n}\n.charcoal-checkbox-input[data-rounded='true']:checked:not(:disabled):active {\n background-color: var(--charcoal-color-container-primary-press);\n}\n\n.charcoal-checkbox-input[data-rounded='true'][aria-invalid='true'],\n.charcoal-checkbox-input[data-rounded='true'][aria-invalid='true']:not(\n :disabled\n ):focus {\n box-shadow: 0 0 0 6px rgba(255, 43, 0, 0.32);\n}\n\n.charcoal-checkbox-input[data-rounded='true']::before {\n content: '';\n width: 24px;\n height: 24px;\n position: absolute;\n top: -4px;\n left: -4px;\n border-radius: 12px;\n border: 2px solid #fff;\n box-sizing: border-box;\n}\n.charcoal-tag-item {\n --charcoal-tag-item-color: var(--charcoal-color-text-on-primary-default);\n --charcoal-tag-item-size: 40px;\n --charcoal-tag-item-padding-left: 24px;\n --charcoal-tag-item-padding-right: 24px;\n --charcoal-tag-item-bg: ;\n\n isolation: isolate;\n position: relative;\n\n -webkit-appearance: none;\n\n -moz-appearance: none;\n\n appearance: none;\n outline: none;\n border-style: none;\n\n display: inline-flex;\n gap: 8px;\n align-items: center;\n justify-content: center;\n\n text-decoration: none;\n cursor: pointer;\n overflow: hidden;\n\n color: var(--charcoal-tag-item-color);\n height: var(--charcoal-tag-item-size);\n padding-top: 4px;\n padding-bottom: 4px;\n padding-left: var(--charcoal-tag-item-padding-left);\n padding-right: var(--charcoal-tag-item-padding-right);\n box-sizing: border-box;\n border-radius: 4px;\n\n transition: 0.2s box-shadow;\n}\n\n .charcoal-tag-item[data-size='M'] {\n --charcoal-tag-item-size: 40px;\n --charcoal-tag-item-padding-left: 24px;\n --charcoal-tag-item-padding-right: 24px;\n }\n\n .charcoal-tag-item[data-size='S'] {\n --charcoal-tag-item-size: 32px;\n --charcoal-tag-item-padding-left: 16px;\n --charcoal-tag-item-padding-right: 16px;\n }\n\n .charcoal-tag-item[data-state='inactive'] {\n --charcoal-tag-item-color: var(--charcoal-color-text-secondary-default);\n }\n\n .charcoal-tag-item[data-state='active'] {\n --charcoal-tag-item-padding-left: 16px;\n --charcoal-tag-item-padding-right: 8px;\n }\n\n .charcoal-tag-item:disabled,\n .charcoal-tag-item[aria-disabled]:not([aria-disabled='false']) {\n opacity: 0.32;\n cursor: default;\n }\n\n .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus-visible,\n .charcoal-tag-item[aria-disabled='false']:focus-visible {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus,\n .charcoal-tag-item[aria-disabled='false']:focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),\n .charcoal-tag-item[aria-disabled='false']:focus:not(:focus-visible) {\n box-shadow: none;\n }\n\n.charcoal-tag-item__bg {\n background-color: var(--charcoal-tag-item-bg);\n}\n\n.charcoal-tag-item__bg[data-bg-variant='image'] {\n background-color: var(--charcoal-color-container-on-img-default);\n }\n\n.charcoal-tag-item__bg[data-bg-variant='image']::before {\n content: '';\n position: absolute;\n z-index: 1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-position: center;\n background-size: cover;\n background-image: var(--charcoal-tag-item-bg);\n mix-blend-mode: overlay;\n }\n\n.charcoal-tag-item__bg[data-state='inactive'] {\n background-color: var(--charcoal-color-container-secondary-default);\n }\n\n.charcoal-tag-item__label {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.charcoal-tag-item__label[data-has-translate='true'] {\n justify-content: space-between;\n }\n\n.charcoal-tag-item__label__translated {\n --charcoal-tag-item-text-font-size: 12px;\n --charcoal-tag-item-text-line-height: 20px;\n font-weight: bold;\n}\n\n.charcoal-tag-item__label__translated::before {\n display: none;\n }\n\n.charcoal-tag-item__label__text {\n --charcoal-tag-item-text-font-size: 14px;\n --charcoal-tag-item-text-line-height: 22px;\n\n max-width: 152px;\n overflow: hidden;\n font-weight: bold;\n\n color: inherit;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.charcoal-tag-item__label__text[data-has-translate='true'] {\n --charcoal-tag-item-text-font-size: 10px;\n --charcoal-tag-item-text-line-height: 14px;\n font-weight: normal;\n }\n\n/* Kept flat: different class name from .charcoal-tag-item__label__text (note: \"labe\" typo in original) */\n.charcoal-tag-item__labe__text[data-has-translate='true']::after {\n display: none;\n}\n.charcoal-hint-text {\n background-color: var(--charcoal-color-container-secondary-default);\n border-radius: 8px;\n padding: 12px 16px;\n display: flex;\n align-items: flex-start;\n}\n\n .charcoal-hint-text[data-context='page'] {\n justify-content: center;\n }\n\n @media (min-width: 744px) {\n\n .charcoal-hint-text[data-context='page'] {\n padding: 20px 40px\n }\n }\n\n.charcoal-hint-text-icon {\n display: flex;\n align-items: center;\n color: var(--charcoal-color-icon-tertiary-default);\n height: 22px;\n margin: 0 4px 0 0;\n}\n\n.charcoal-hint-text-message {\n color: var(--charcoal-color-text-secondary-default);\n font-size: 14px;\n line-height: 22px;\n display: flow-root;\n margin: 0;\n min-width: 0;\n overflow-wrap: break-word;\n}\n.charcoal-text-ellipsis {\n /* Runtime variables overridden by the React component. */\n --charcoal-text-ellipsis-line-limit: 1;\n --charcoal-text-ellipsis-line-height: inherit;\n\n overflow: hidden;\n overflow-wrap: break-word;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--charcoal-text-ellipsis-line-limit);\n}\n\n .charcoal-text-ellipsis[data-has-line-height='true'] {\n line-height: var(--charcoal-text-ellipsis-line-height);\n }\n\n .charcoal-text-ellipsis[data-has-line-height='false'] {\n line-height: inherit;\n }\n\n .charcoal-text-ellipsis[data-line-limit='1'][data-use-nowrap='true'] {\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n.charcoal-pagination {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n .charcoal-pagination[data-size='S'] .charcoal-pagination-button {\n min-width: 32px;\n min-height: 32px;\n }\n\n .charcoal-pagination[data-size='M'] .charcoal-pagination-button {\n min-width: 40px;\n min-height: 40px;\n }\n\n/* stylelint-disable no-descending-specificity */\n.charcoal-pagination-button {\n cursor: pointer;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n border-style: none;\n outline: none;\n text-decoration: none;\n font: inherit;\n margin: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n font-weight: 700;\n line-height: 22px;\n\n /* HACK:\n * Safari doesn't correctly repaint the elements when they're reordered in response to interaction.\n * This forces it to repaint them. This doesn't work if put on the parents either, has to be here.\n */\n /* stylelint-disable-next-line property-no-vendor-prefix */\n -webkit-transform: translateZ(0);\n\n color: var(--charcoal-color-text-tertiary-default);\n background-color: var(--charcoal-color-container-default-a);\n border-radius: 20px;\n transition:\n 0.2s background-color,\n 0.2s box-shadow;\n}\n.charcoal-pagination-button:focus {\n outline: none;\n }\n.charcoal-pagination-button::-moz-focus-inner {\n border-style: none;\n padding: 0;\n }\n.charcoal-pagination-button[hidden] {\n visibility: hidden;\n display: block;\n }\n.charcoal-pagination-button:not(:disabled):not([aria-disabled]):hover,\n .charcoal-pagination-button[aria-disabled='false']:hover {\n color: var(--charcoal-color-text-tertiary-default);\n background-color: var(--charcoal-color-container-secondary-default);\n }\n.charcoal-pagination-button:not(:disabled):not([aria-disabled]):active,\n .charcoal-pagination-button[aria-disabled='false']:active {\n color: var(--charcoal-color-text-tertiary-press);\n background-color: var(--charcoal-color-container-tertiary-press);\n }\n.charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus,\n .charcoal-pagination-button[aria-disabled='false']:focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n.charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus-visible,\n .charcoal-pagination-button[aria-disabled='false']:focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n.charcoal-pagination-button:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),\n .charcoal-pagination-button[aria-disabled='false']:focus:not(:focus-visible) {\n box-shadow: none;\n }\n.charcoal-pagination-button[aria-current] {\n cursor: default;\n background-color: var(--charcoal-color-container-hud-default);\n color: var(--charcoal-color-text-on-hud-default);\n }\n.charcoal-pagination-button[aria-current]:not(:disabled):not([aria-disabled]):hover,\n .charcoal-pagination-button[aria-current]:not(:disabled):not([aria-disabled]):active {\n background-color: var(--charcoal-color-container-hud-default);\n color: var(--charcoal-color-text-on-hud-default);\n }\n/* stylelint-enable no-descending-specificity */\n\n.charcoal-pagination-nav-button[data-hidden] {\n visibility: hidden;\n}\n\n.charcoal-pagination-spacer,\n .charcoal-pagination-spacer:hover,\n .charcoal-pagination-spacer:active {\n cursor: default;\n color: var(--charcoal-color-text-tertiary-default);\n background: none;\n }\n\n.charcoal-pagination-spacer.charcoal-icon-button:disabled {\n opacity: 1;\n }\n.charcoal-focus-ring:is(\n :not(:disabled):not([aria-disabled]),\n [aria-disabled='false']\n ):focus-visible {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n transition: 0.2s box-shadow;\n }\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@charcoal-ui/react",
3
- "version": "6.0.0-beta.1",
3
+ "version": "6.0.0-rc.0",
4
4
  "license": "Apache-2.0",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -42,10 +42,10 @@
42
42
  "polished": "^4.1.4",
43
43
  "react-compiler-runtime": "1.0.0",
44
44
  "warning": "^4.0.3",
45
- "@charcoal-ui/foundation": "6.0.0-beta.1",
46
- "@charcoal-ui/utils": "6.0.0-beta.1",
47
- "@charcoal-ui/theme": "6.0.0-beta.1",
48
- "@charcoal-ui/icons": "6.0.0-beta.1"
45
+ "@charcoal-ui/icons": "6.0.0-rc.0",
46
+ "@charcoal-ui/foundation": "6.0.0-rc.0",
47
+ "@charcoal-ui/utils": "6.0.0-rc.0",
48
+ "@charcoal-ui/theme": "6.0.0-rc.0"
49
49
  },
50
50
  "peerDependencies": {
51
51
  "react": ">=17.0.0",
package/src/__tests__/css-output.test.ts CHANGED
@@ -72,7 +72,6 @@ describe('CSS nesting output equivalence', () => {
72
72
  '__snapshots__',
73
73
  'index.css.snap',
74
74
  )
75
- const expected = await fs.readFile(snapshotPath, 'utf-8')
76
- expect(canonicalize(result.root)).toBe(expected)
75
+ await expect(canonicalize(result.root)).toMatchFileSnapshot(snapshotPath)
77
76
  })
78
77
  })
package/src/__tests__/css-variables.test.ts ADDED
@@ -0,0 +1,66 @@
1
+ import { describe, expect, it } from 'vitest'
2
+ import fs from 'node:fs/promises'
3
+ import path from 'node:path'
4
+
5
+ const componentsDir = path.resolve(import.meta.dirname, '../components')
6
+ const unstableCssDir = path.resolve(
7
+ import.meta.dirname,
8
+ '../../../theme/src/unstable-css',
9
+ )
10
+
11
+ async function getCssFiles(dir: string): Promise<string[]> {
12
+ const entries = await fs.readdir(dir, { withFileTypes: true })
13
+ const results = await Promise.all(
14
+ entries.map(async (entry) => {
15
+ const entryPath = path.join(dir, entry.name)
16
+ if (entry.isDirectory()) {
17
+ return getCssFiles(entryPath)
18
+ }
19
+ if (entry.isFile() && entry.name.endsWith('.css')) {
20
+ return [entryPath]
21
+ }
22
+ return []
23
+ }),
24
+ )
25
+ return results.flat()
26
+ }
27
+
28
+ function extractDefinedVariables(cssContent: string): string[] {
29
+ return [...cssContent.matchAll(/(--[\w-]+)\s*:/g)].map((match) => match[1])
30
+ }
31
+
32
+ function extractUsedVariables(cssContent: string): string[] {
33
+ return [...cssContent.matchAll(/var\(\s*(--[\w-]+)/g)].map(
34
+ (match) => match[1],
35
+ )
36
+ }
37
+
38
+ const unstableCssVariables = new Set<string>()
39
+
40
+ for (const cssFile of await getCssFiles(unstableCssDir)) {
41
+ const content = await fs.readFile(cssFile, 'utf-8')
42
+ for (const variable of extractDefinedVariables(content)) {
43
+ unstableCssVariables.add(variable)
44
+ }
45
+ }
46
+
47
+ const componentCssFiles = await getCssFiles(componentsDir)
48
+
49
+ describe('CSS variables', () => {
50
+ it.each(componentCssFiles)(
51
+ '%s uses only defined CSS variables',
52
+ async (file) => {
53
+ const content = await fs.readFile(file, 'utf-8')
54
+ const definedVariables = new Set(extractDefinedVariables(content))
55
+ const usedVariables = new Set(extractUsedVariables(content))
56
+
57
+ const undefinedVariables = [...usedVariables].filter(
58
+ (variable) =>
59
+ !unstableCssVariables.has(variable) &&
60
+ !definedVariables.has(variable),
61
+ )
62
+
63
+ expect(undefinedVariables).toEqual([])
64
+ },
65
+ )
66
+ })
package/src/components/Button/__snapshots__/index.css.snap CHANGED
@@ -24,8 +24,8 @@
24
24
  font-size: 14px;
25
25
  line-height: 22px;
26
26
  font-weight: bold;
27
- color: var(--charcoal-text2);
28
- background-color: var(--charcoal-surface3);
27
+ color: var(--charcoal-color-text-default);
28
+ background-color: var(--charcoal-color-container-secondary-default-a);
29
29
  transition: 0.2s color,
30
30
  0.2s background-color,
31
31
  0.2s box-shadow;
@@ -43,73 +43,73 @@
43
43
  }
44
44
 
45
45
  .charcoal-button:not(:disabled):not([aria-disabled]):hover, .charcoal-button[aria-disabled='false']:hover {
46
- color: var(--charcoal-text2-hover);
47
- background-color: var(--charcoal-surface3-hover);
46
+ color: var(--charcoal-color-text-hover);
47
+ background-color: var(--charcoal-color-container-secondary-hover-a);
48
48
  }
49
49
 
50
50
  .charcoal-button:not(:disabled):not([aria-disabled]):active, .charcoal-button[aria-disabled='false']:active, .charcoal-button[data-active='true'] {
51
- color: var(--charcoal-text2-press);
52
- background-color: var(--charcoal-surface3-press);
51
+ color: var(--charcoal-color-text-press);
52
+ background-color: var(--charcoal-color-container-secondary-press-a);
53
53
  }
54
54
 
55
55
  .charcoal-button[data-variant='Primary'] {
56
- color: var(--charcoal-text5);
57
- background-color: var(--charcoal-brand);
56
+ color: var(--charcoal-color-text-on-primary-default);
57
+ background-color: var(--charcoal-color-container-primary-default);
58
58
  }
59
59
 
60
60
  .charcoal-button[data-variant='Primary']:hover:not(:disabled):not([aria-disabled]), .charcoal-button[data-variant='Primary']:hover[aria-disabled='false'] {
61
- color: var(--charcoal-text5-hover);
62
- background-color: var(--charcoal-brand-hover);
61
+ color: var(--charcoal-color-text-on-primary-hover);
62
+ background-color: var(--charcoal-color-container-primary-hover);
63
63
  }
64
64
 
65
65
  .charcoal-button[data-variant='Primary']:active:not(:disabled):not([aria-disabled]), .charcoal-button[data-variant='Primary']:active[aria-disabled='false'], .charcoal-button[data-variant='Primary'][data-active='true'] {
66
- color: var(--charcoal-text5-press);
67
- background-color: var(--charcoal-brand-press);
66
+ color: var(--charcoal-color-text-on-primary-press);
67
+ background-color: var(--charcoal-color-container-primary-press);
68
68
  }
69
69
 
70
70
  .charcoal-button[data-variant='Overlay'] {
71
- color: var(--charcoal-text5);
72
- background-color: var(--charcoal-surface4);
71
+ color: var(--charcoal-color-text-on-on-img-default);
72
+ background-color: var(--charcoal-color-container-on-img-default);
73
73
  }
74
74
 
75
75
  .charcoal-button[data-variant='Overlay']:hover:not(:disabled):not([aria-disabled]), .charcoal-button[data-variant='Overlay']:hover[aria-disabled='false'] {
76
- color: var(--charcoal-text5-hover);
77
- background-color: var(--charcoal-surface4-hover);
76
+ color: var(--charcoal-color-text-on-on-img-hover);
77
+ background-color: var(--charcoal-color-container-on-img-hover);
78
78
  }
79
79
 
80
80
  .charcoal-button[data-variant='Overlay']:active:not(:disabled):not([aria-disabled]), .charcoal-button[data-variant='Overlay']:active[aria-disabled='false'], .charcoal-button[data-variant='Overlay'][data-active='true'] {
81
- color: var(--charcoal-text5-press);
82
- background-color: var(--charcoal-surface4-press);
81
+ color: var(--charcoal-color-text-on-on-img-press);
82
+ background-color: var(--charcoal-color-container-on-img-press);
83
83
  }
84
84
 
85
85
  .charcoal-button[data-variant='Navigation'] {
86
- color: var(--charcoal-text5);
87
- background-color: var(--charcoal-surface6);
86
+ color: var(--charcoal-color-text-on-hud-default);
87
+ background-color: var(--charcoal-color-container-hud-default);
88
88
  }
89
89
 
90
90
  .charcoal-button[data-variant='Navigation']:hover:not(:disabled):not([aria-disabled]), .charcoal-button[data-variant='Navigation']:hover[aria-disabled='false'] {
91
- color: var(--charcoal-text5-hover);
92
- background-color: var(--charcoal-surface6-hover);
91
+ color: var(--charcoal-color-text-on-hud-hover);
92
+ background-color: var(--charcoal-color-container-hud-hover);
93
93
  }
94
94
 
95
95
  .charcoal-button[data-variant='Navigation']:active:not(:disabled):not([aria-disabled]), .charcoal-button[data-variant='Navigation']:active[aria-disabled='false'], .charcoal-button[data-variant='Navigation'][data-active='true'] {
96
- color: var(--charcoal-text5-press);
97
- background-color: var(--charcoal-surface6-press);
96
+ color: var(--charcoal-color-text-on-hud-press);
97
+ background-color: var(--charcoal-color-container-hud-press);
98
98
  }
99
99
 
100
100
  .charcoal-button[data-variant='Danger'] {
101
- color: var(--charcoal-text5);
102
- background-color: var(--charcoal-assertive);
101
+ color: var(--charcoal-color-text-on-negative-default);
102
+ background-color: var(--charcoal-color-container-negative-default);
103
103
  }
104
104
 
105
105
  .charcoal-button[data-variant='Danger']:hover:not(:disabled):not([aria-disabled]), .charcoal-button[data-variant='Danger']:hover[aria-disabled='false'] {
106
- color: var(--charcoal-text5-hover);
107
- background-color: var(--charcoal-assertive-hover);
106
+ color: var(--charcoal-color-text-on-negative-hover);
107
+ background-color: var(--charcoal-color-container-negative-hover);
108
108
  }
109
109
 
110
110
  .charcoal-button[data-variant='Danger']:active:not(:disabled):not([aria-disabled]), .charcoal-button[data-variant='Danger']:active[aria-disabled='false'], .charcoal-button[data-variant='Danger'][data-active='true'] {
111
- color: var(--charcoal-text5-press);
112
- background-color: var(--charcoal-assertive-press);
111
+ color: var(--charcoal-color-text-on-negative-press);
112
+ background-color: var(--charcoal-color-container-negative-press);
113
113
  }
114
114
 
115
115
  .charcoal-button[data-size='S'] {