@charcoal-ui/react 6.0.0-rc.4 → 6.0.0-rc.6

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 (38) hide show
  1. package/dist/_lib/useIsomorphicLayoutEffect.d.ts +6 -0
  2. package/dist/_lib/useIsomorphicLayoutEffect.d.ts.map +1 -0
  3. package/dist/components/Carousel/index.d.ts +2 -6
  4. package/dist/components/Carousel/index.d.ts.map +1 -1
  5. package/dist/components/Carousel/useCarouselScroller.d.ts.map +1 -1
  6. package/dist/components/Modal/index.d.ts.map +1 -1
  7. package/dist/components/Modal/useTransitionPresence.d.ts +19 -0
  8. package/dist/components/Modal/useTransitionPresence.d.ts.map +1 -0
  9. package/dist/index.cjs +2 -2
  10. package/dist/index.cjs.map +1 -1
  11. package/dist/index.css +124 -49
  12. package/dist/index.d.ts +1 -1
  13. package/dist/index.d.ts.map +1 -1
  14. package/dist/index.js +2 -2
  15. package/dist/index.js.map +1 -1
  16. package/dist/layered.css +124 -49
  17. package/dist/layered.css.map +1 -1
  18. package/package.json +5 -6
  19. package/src/__tests__/token-v1-compat.test.ts +0 -1
  20. package/src/_lib/useIsomorphicLayoutEffect.ts +7 -0
  21. package/src/components/Carousel/MIGRATION.md +39 -39
  22. package/src/components/Carousel/__snapshots__/index.css.snap +63 -39
  23. package/src/components/Carousel/index.browser.test.tsx +102 -0
  24. package/src/components/Carousel/index.css +68 -46
  25. package/src/components/Carousel/index.story.tsx +87 -68
  26. package/src/components/Carousel/index.test.tsx +120 -47
  27. package/src/components/Carousel/index.tsx +30 -14
  28. package/src/components/Carousel/useCarouselScroller.ts +8 -12
  29. package/src/components/FieldLabel/__snapshots__/index.css.snap +1 -1
  30. package/src/components/FieldLabel/index.css +1 -1
  31. package/src/components/IconButton/__snapshots__/index.css.snap +1 -1
  32. package/src/components/IconButton/index.css +1 -1
  33. package/src/components/Modal/__snapshots__/index.css.snap +32 -1
  34. package/src/components/Modal/index.css +34 -0
  35. package/src/components/Modal/index.test.tsx +200 -0
  36. package/src/components/Modal/index.tsx +48 -78
  37. package/src/components/Modal/useTransitionPresence.ts +95 -0
  38. package/src/index.ts +0 -1
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-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-icon {\n display: inline-flex;\n width: var(--charcoal-icon-size);\n height: var(--charcoal-icon-size);\n}\n\npixiv-icon:not(:defined) {\n --pixiv-icon-base: 24px;\n --pixiv-icon-scale: 1;\n --pixiv-icon-size: calc(var(--pixiv-icon-base) * var(--pixiv-icon-scale));\n\n display: inline-flex;\n /* --charcoal-icon-size がセットされていればそれを優先、\n なければ name / scale から導出した --pixiv-icon-size をフォールバック */\n width: var(--charcoal-icon-size, var(--pixiv-icon-size));\n height: var(--charcoal-icon-size, var(--pixiv-icon-size));\n}\n\npixiv-icon:not(:defined)[name^='16/'] {\n --pixiv-icon-base: 16px;\n --pixiv-icon-size: 16px;\n }\n\npixiv-icon:not(:defined)[name^='24/'][scale='2'] {\n --pixiv-icon-scale: 2;\n }\n\npixiv-icon:not(:defined)[name^='24/'][scale='3'] {\n --pixiv-icon-scale: 3;\n }\n\npixiv-icon:not(:defined)[name^='32/'] {\n --pixiv-icon-base: 32px;\n --pixiv-icon-size: 32px;\n }\n\npixiv-icon:not(:defined)[name^='Inline/'] {\n --pixiv-icon-base: 16px;\n }\n\npixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {\n --pixiv-icon-scale: 2;\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-background-overlay);\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-carousel {\n position: relative;\n display: block;\n}\n\n .charcoal-carousel[data-full-width='true'] {\n width: 100vw;\n margin-inline: calc(50% - 50vw);\n }\n\n.charcoal-carousel__viewport {\n position: relative;\n}\n\n.charcoal-carousel__scroller {\n position: relative;\n display: flex;\n gap: 24px;\n overflow-x: auto;\n overflow-y: hidden;\n overscroll-behavior-x: contain;\n scroll-behavior: smooth;\n scrollbar-width: none;\n outline: none;\n}\n\n.charcoal-carousel__scroller::-webkit-scrollbar {\n display: none;\n }\n\n.charcoal-carousel__scroller[data-focus-visible] {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n.charcoal-carousel[data-size='S'] .charcoal-carousel__scroller {\n gap: 0;\n}\n\n/* スクロールスナップ type は prop（scrollSnap.type）で scroller に出し分ける。\n align は基底 .charcoal-carousel__item の後（後述）に置く（no-descending-specificity 回避）。\n 未指定時の既定（M=none / S=mandatory / align=center）は JS 側で data 属性に解決する。 */\n.charcoal-carousel[data-scroll-snap-type='none'] .charcoal-carousel__scroller {\n scroll-snap-type: none;\n}\n\n.charcoal-carousel[data-scroll-snap-type='proximity']\n .charcoal-carousel__scroller {\n scroll-snap-type: x proximity;\n}\n\n.charcoal-carousel[data-scroll-snap-type='mandatory']\n .charcoal-carousel__scroller {\n scroll-snap-type: x mandatory;\n}\n\n/* グラデーション: はみ出してスクロール可能な側のみ、端のアイテムを背景色（白）へ\n フェードさせる。mask による透過ではなく、72px の「背景色→透明」オーバーレイを\n ビューポートに重ねて白で覆う。スクロール可能な側だけ data-can-prev/next で出し分ける。 */\n.charcoal-carousel[data-has-gradient='true']\n .charcoal-carousel__viewport::before,\n.charcoal-carousel[data-has-gradient='true']\n .charcoal-carousel__viewport::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n width: 72px;\n pointer-events: none;\n opacity: 0;\n transition: 0.2s opacity;\n z-index: 1;\n}\n\n.charcoal-carousel[data-has-gradient='true']\n .charcoal-carousel__viewport::before {\n left: 0;\n background: linear-gradient(to right, #fff, transparent);\n}\n\n.charcoal-carousel[data-has-gradient='true']\n .charcoal-carousel__viewport::after {\n right: 0;\n background: linear-gradient(to left, #fff, transparent);\n}\n\n.charcoal-carousel[data-has-gradient='true'][data-can-prev='true']\n .charcoal-carousel__viewport::before {\n opacity: 1;\n}\n\n.charcoal-carousel[data-has-gradient='true'][data-can-next='true']\n .charcoal-carousel__viewport::after {\n opacity: 1;\n}\n\n.charcoal-carousel__item {\n flex: 0 0 auto;\n min-width: 0;\n}\n\n.charcoal-carousel[data-size='S'] .charcoal-carousel__item {\n flex: 0 0 100%;\n}\n\n/* scroll-snap-align は prop（scrollSnap.align）で出し分ける。基底 .charcoal-carousel__item\n より後に置くことで no-descending-specificity を回避する。 */\n.charcoal-carousel[data-scroll-snap-align='center'] .charcoal-carousel__item {\n scroll-snap-align: center;\n}\n\n.charcoal-carousel[data-scroll-snap-align='start'] .charcoal-carousel__item {\n scroll-snap-align: start;\n}\n\n/* ── Navigation Buttons (charcoal IconButton, variant=Overlay size=S) ── */\n\n/* マスクと同じ 72px 1fr 72px グリッド。各ボタンは 72px ゾーンの中央に置く。 */\n.charcoal-carousel__navigation {\n position: absolute;\n inset: 0;\n pointer-events: none;\n display: grid;\n grid-template-columns: 72px 1fr 72px;\n align-items: center;\n /* 白フェード（z-index: 1）より上にボタンを表示する */\n z-index: 2;\n /* sandbox 同様、通常は隠してカルーセル hover 時にフェードイン表示する。 */\n opacity: 0;\n transition: 0.4s opacity;\n}\n.charcoal-carousel__navigation[data-visible='false'] {\n display: none;\n }\n\n/* hover で表示。キーボード操作でも到達できるよう focus-within でも表示する。 */\n.charcoal-carousel:hover .charcoal-carousel__navigation,\n.charcoal-carousel:focus-within .charcoal-carousel__navigation {\n opacity: 1;\n}\n\n.charcoal-carousel__navigation__item {\n pointer-events: auto;\n}\n\n.charcoal-carousel__navigation__item[data-direction='prev'] {\n grid-column: 1;\n justify-self: center;\n }\n\n.charcoal-carousel__navigation__item[data-direction='next'] {\n grid-column: 3;\n justify-self: center;\n }\n\n/* スクロール端では非表示。IconButton の disabled スタイル(opacity:0.32)より\n 高い詳細度で打ち消すため、ルートを前置する。 */\n.charcoal-carousel .charcoal-carousel__navigation__item[data-hidden='true'] {\n opacity: 0;\n pointer-events: none;\n}\n\n/* タッチデバイスではナビゲーションボタンを出さず、スワイプ操作に委ねる。 */\n@media (hover: none) and (pointer: coarse) {\n .charcoal-carousel__navigation {\n display: none;\n }\n}\n\n/* ── Indicator: JS Fallback ── */\n\n.charcoal-carousel__indicator {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 40px;\n gap: 8px;\n}\n\n.charcoal-carousel__indicator[data-visible='false'] {\n display: none;\n }\n\n.charcoal-carousel__indicator__item {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n box-sizing: border-box;\n width: 8px;\n height: 8px;\n padding: 0;\n border: 0;\n border-radius: 50%;\n background-color: var(--charcoal-color-text-tertiary-default);\n cursor: pointer;\n transition: 0.2s background-color;\n}\n\n.charcoal-carousel__indicator__item:hover {\n background-color: var(--charcoal-color-text-secondary-default);\n }\n\n.charcoal-carousel__indicator__item:focus-visible {\n outline: 2px solid rgba(0, 150, 250, 0.56);\n outline-offset: 2px;\n }\n\n.charcoal-carousel__indicator__item[data-active='true'] {\n background-color: var(--charcoal-color-text-default);\n }\n\n/* ── CSS Scroll Markers (progressive enhancement) ── */\n\n/* CSS Scroll Markers / Anchor Positioning は新しい仕様で、stylelint がプロパティ・\n 擬似要素・擬似クラスを未知と判定するため、この @supports ブロックでは該当ルールを無効化する。 */\n/* stylelint-disable property-no-unknown, selector-pseudo-element-no-unknown, selector-pseudo-class-no-unknown */\n@supports (scroll-marker-group: after) {\n .charcoal-carousel[data-indicator='true'] {\n padding-bottom: 40px;\n }\n\n .charcoal-carousel__scroller {\n anchor-name: --charcoal-carousel;\n scroll-marker-group: after;\n }\n\n .charcoal-carousel__scroller::scroll-button(*) {\n content: none;\n }\n\n .charcoal-carousel__scroller::scroll-marker-group {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 40px;\n gap: 8px;\n\n position: absolute;\n position-anchor: --charcoal-carousel;\n top: anchor(bottom);\n justify-self: anchor-center;\n }\n\n .charcoal-carousel[data-indicator='false'] .charcoal-carousel__scroller {\n scroll-marker-group: none;\n }\n\n .charcoal-carousel__item::scroll-marker {\n content: '';\n width: 8px;\n height: 8px;\n border: 0;\n border-radius: 50%;\n background-color: var(--charcoal-color-text-tertiary-default);\n cursor: pointer;\n transition: 0.2s background-color;\n }\n\n .charcoal-carousel__item::scroll-marker:hover {\n background-color: var(--charcoal-color-text-secondary-default);\n }\n\n .charcoal-carousel__item::scroll-marker:focus {\n outline: 2px solid rgba(0, 150, 250, 0.56);\n outline-offset: 2px;\n }\n\n .charcoal-carousel__item::scroll-marker:target-current {\n background-color: var(--charcoal-color-text-default);\n }\n\n .charcoal-carousel__indicator {\n display: none;\n }\n}\n/* stylelint-enable property-no-unknown, selector-pseudo-element-no-unknown, selector-pseudo-class-no-unknown */\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":"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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-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: 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-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-icon {\n display: inline-flex;\n width: var(--charcoal-icon-size);\n height: var(--charcoal-icon-size);\n}\n\npixiv-icon:not(:defined) {\n --pixiv-icon-base: 24px;\n --pixiv-icon-scale: 1;\n --pixiv-icon-size: calc(var(--pixiv-icon-base) * var(--pixiv-icon-scale));\n\n display: inline-flex;\n /* --charcoal-icon-size がセットされていればそれを優先、\n なければ name / scale から導出した --pixiv-icon-size をフォールバック */\n width: var(--charcoal-icon-size, var(--pixiv-icon-size));\n height: var(--charcoal-icon-size, var(--pixiv-icon-size));\n}\n\npixiv-icon:not(:defined)[name^='16/'] {\n --pixiv-icon-base: 16px;\n --pixiv-icon-size: 16px;\n }\n\npixiv-icon:not(:defined)[name^='24/'][scale='2'] {\n --pixiv-icon-scale: 2;\n }\n\npixiv-icon:not(:defined)[name^='24/'][scale='3'] {\n --pixiv-icon-scale: 3;\n }\n\npixiv-icon:not(:defined)[name^='32/'] {\n --pixiv-icon-base: 32px;\n --pixiv-icon-size: 32px;\n }\n\npixiv-icon:not(:defined)[name^='Inline/'] {\n --pixiv-icon-base: 16px;\n }\n\npixiv-icon:not(:defined)[name^='Inline/'][scale='2'] {\n --pixiv-icon-scale: 2;\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-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-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-background-overlay);\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/* easeOutQuart。duration は useTransitionPresence の MODAL_TRANSITION_DURATION_MS と一致させること。\n transition は entering / exiting に限定し、開いたままテーマ切り替え等で\n 色や transform が変わってもアニメーションしないようにする */\n.charcoal-modal-background[data-animation] {\n overflow: hidden;\n}\n\n.charcoal-modal-background[data-animation='entering'],\n.charcoal-modal-background[data-animation='exiting'] {\n transition: background-color 400ms cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n/* 閉じアニメーション中はクリックを下のページへ通す（transitionend が来ない環境で\n 透明なオーバーレイがタップを奪い続けるのも防ぐ） */\n.charcoal-modal-background[data-animation='exited'],\n.charcoal-modal-background[data-animation='exiting'] {\n background-color: transparent;\n pointer-events: none;\n}\n\n.charcoal-modal-background[data-animation='entered'] {\n overflow: auto;\n}\n\n.charcoal-modal-background[data-animation='entering'] > .charcoal-modal-dialog,\n.charcoal-modal-background[data-animation='exiting'] > .charcoal-modal-dialog {\n transition: transform 400ms cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n.charcoal-modal-background[data-animation='exited'] > .charcoal-modal-dialog,\n.charcoal-modal-background[data-animation='exiting'] > .charcoal-modal-dialog {\n transform: translateY(100%);\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-carousel {\n position: relative;\n display: block;\n}\n\n .charcoal-carousel[data-full-width='true'] {\n width: 100vw;\n margin-inline: calc(50% - 50vw);\n }\n\n.charcoal-carousel__viewport {\n position: relative;\n}\n\n/* フォーカスリングは scroller ではなく viewport に描く。scroller に置くと\n hasGradient の mask（mask-clip: border-box）で外側の box-shadow ごと消えるため。 */\n\n.charcoal-carousel__viewport[data-focus-visible] {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n/* スライド間隔は所有しない（sandbox 同様、利用者が children 側で注入する）。\n このコンポーネントの責務はスクロールと indicator / arrow によるページ送りのみ。 */\n.charcoal-carousel__scroller {\n position: relative;\n display: flex;\n overflow-x: auto;\n overflow-y: hidden;\n overscroll-behavior-x: contain;\n scroll-behavior: smooth;\n scrollbar-width: none;\n outline: none;\n}\n.charcoal-carousel__scroller::-webkit-scrollbar {\n display: none;\n }\n\n/* スクロールスナップ type は prop（scrollSnap.type）で scroller に出し分ける。\n align は基底 .charcoal-carousel__item の後（後述）に置く（no-descending-specificity 回避）。\n 未指定時の既定（M=none / S=mandatory / align=center）は JS 側で data 属性に解決する。 */\n.charcoal-carousel[data-scroll-snap-type='none'] .charcoal-carousel__scroller {\n scroll-snap-type: none;\n}\n\n.charcoal-carousel[data-scroll-snap-type='proximity']\n .charcoal-carousel__scroller {\n scroll-snap-type: x proximity;\n}\n\n.charcoal-carousel[data-scroll-snap-type='mandatory']\n .charcoal-carousel__scroller {\n scroll-snap-type: x mandatory;\n}\n\n/* グラデーション: mask で端のアイテム自体を透明へフェードさせる（下の背景色を\n 問わない）。mask の色はアルファとしてだけ効く（#000=表示 / transparent=透過）。\n 左フェード・右フェードの 2 レイヤーを intersect で合成し、はみ出して\n スクロール可能な側のみ data-can-prev/next で 72px のフェード帯を枠内に置く。\n 無効な側はフェード帯ごと枠外へスライドして隠す（mask-image と違い\n mask-position は補間可能なので、切替が 0.2s のフェードになる）。 */\n.charcoal-carousel[data-has-gradient='true'] .charcoal-carousel__scroller {\n -webkit-mask-image:\n linear-gradient(to right, transparent, #000 72px),\n linear-gradient(to left, transparent, #000 72px);\n mask-image:\n linear-gradient(to right, transparent, #000 72px),\n linear-gradient(to left, transparent, #000 72px);\n /* 枠外へ 72px スライドしても反対側の端が欠けないよう、レイヤー幅に 72px 足す */\n -webkit-mask-size: calc(100% + 72px) 100%;\n mask-size: calc(100% + 72px) 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-composite: source-in, xor;\n mask-composite: intersect;\n -webkit-mask-position:\n -72px 0,\n 0 0;\n mask-position:\n -72px 0,\n 0 0;\n /* 0.2s ease-in は react-sandbox の LeftGradient と同じ値 */\n transition: 0.2s ease-in mask-position;\n}\n\n.charcoal-carousel[data-has-gradient='true'][data-can-prev='true']\n .charcoal-carousel__scroller {\n -webkit-mask-position:\n 0 0,\n 0 0;\n mask-position:\n 0 0,\n 0 0;\n}\n\n.charcoal-carousel[data-has-gradient='true'][data-can-next='true']\n .charcoal-carousel__scroller {\n -webkit-mask-position:\n -72px 0,\n -72px 0;\n mask-position:\n -72px 0,\n -72px 0;\n}\n\n.charcoal-carousel[data-has-gradient='true'][data-can-prev='true'][data-can-next='true']\n .charcoal-carousel__scroller {\n -webkit-mask-position:\n 0 0,\n -72px 0;\n mask-position:\n 0 0,\n -72px 0;\n}\n\n.charcoal-carousel__item {\n flex: 0 0 auto;\n min-width: 0;\n}\n\n.charcoal-carousel[data-size='S'] .charcoal-carousel__item {\n flex: 0 0 100%;\n}\n\n/* scroll-snap-align は prop（scrollSnap.align）で出し分ける。基底 .charcoal-carousel__item\n より後に置くことで no-descending-specificity を回避する。 */\n.charcoal-carousel[data-scroll-snap-align='center'] .charcoal-carousel__item {\n scroll-snap-align: center;\n}\n\n.charcoal-carousel[data-scroll-snap-align='start'] .charcoal-carousel__item {\n scroll-snap-align: start;\n}\n\n/* ── Navigation Buttons (charcoal IconButton, variant=Overlay size=S) ── */\n\n/* マスクの透過域と同じ 72px 1fr 72px グリッド。各ボタンは 72px ゾーンの中央に置く。 */\n.charcoal-carousel__navigation {\n position: absolute;\n inset: 0;\n pointer-events: none;\n display: grid;\n grid-template-columns: 72px 1fr 72px;\n align-items: center;\n /* アイテム内のコンテンツより上にボタンを表示する */\n z-index: 1;\n /* sandbox 同様、通常は隠してカルーセル hover 時にフェードイン表示する。 */\n opacity: 0;\n transition: 0.4s opacity;\n}\n.charcoal-carousel__navigation[data-visible='false'] {\n display: none;\n }\n\n/* hover で表示。キーボード操作でも到達できるよう、キーボード由来のフォーカスが\n カルーセル内にある間も表示する（:focus-within だとクリックで残ったフォーカスでも\n 表示され続けるため、react-aria が付与する data 属性で判定する）。 */\n.charcoal-carousel:hover .charcoal-carousel__navigation,\n.charcoal-carousel[data-focus-visible-within] .charcoal-carousel__navigation {\n opacity: 1;\n}\n\n.charcoal-carousel__navigation__item {\n pointer-events: auto;\n}\n\n/* ヒットエリアをグリッド端列（= mask のフェード帯と同じ 72px）全体へ広げる。\n 擬似要素上のクリックは元の button に届くため、帯のどこを押してもページ送りになる。\n position: absolute の基準は positioned な .charcoal-carousel__navigation（inset: 0）。 */\n\n.charcoal-carousel__navigation__item::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n width: 72px;\n }\n\n.charcoal-carousel__navigation__item[data-direction='prev'] {\n grid-column: 1;\n justify-self: center;\n }\n\n.charcoal-carousel__navigation__item[data-direction='prev']::after {\n left: 0;\n }\n\n.charcoal-carousel__navigation__item[data-direction='next'] {\n grid-column: 3;\n justify-self: center;\n }\n\n.charcoal-carousel__navigation__item[data-direction='next']::after {\n right: 0;\n }\n\n/* スクロール端では非表示。IconButton の disabled スタイル(opacity:0.32)より\n 高い詳細度で打ち消すため、ルートを前置する。 */\n.charcoal-carousel .charcoal-carousel__navigation__item[data-hidden='true'] {\n opacity: 0;\n pointer-events: none;\n}\n\n/* タッチデバイスではナビゲーションボタンを出さず、スワイプ操作に委ねる。 */\n@media (hover: none) and (pointer: coarse) {\n .charcoal-carousel__navigation {\n display: none;\n }\n}\n\n/* ── Indicator: JS Fallback ── */\n\n.charcoal-carousel__indicator {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 40px;\n gap: 8px;\n}\n\n.charcoal-carousel__indicator[data-visible='false'] {\n display: none;\n }\n\n.charcoal-carousel__indicator__item {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n box-sizing: border-box;\n width: 8px;\n height: 8px;\n padding: 0;\n border: 0;\n border-radius: 50%;\n background-color: var(--charcoal-color-text-tertiary-default);\n cursor: pointer;\n transition: 0.2s background-color;\n}\n\n.charcoal-carousel__indicator__item:hover {\n background-color: var(--charcoal-color-text-secondary-default);\n }\n\n.charcoal-carousel__indicator__item:focus-visible {\n outline: 2px solid rgba(0, 150, 250, 0.56);\n outline-offset: 2px;\n }\n\n.charcoal-carousel__indicator__item[data-active='true'] {\n background-color: var(--charcoal-color-text-default);\n }\n\n/* ── CSS Scroll Markers (progressive enhancement) ── */\n\n/* CSS Scroll Markers / Anchor Positioning は新しい仕様で、stylelint がプロパティ・\n 擬似要素・擬似クラスを未知と判定するため、この @supports ブロックでは該当ルールを無効化する。 */\n/* stylelint-disable property-no-unknown, selector-pseudo-element-no-unknown, selector-pseudo-class-no-unknown */\n@supports (scroll-marker-group: after) {\n .charcoal-carousel[data-indicator='true'] {\n padding-bottom: 40px;\n }\n\n .charcoal-carousel__scroller {\n anchor-name: --charcoal-carousel;\n scroll-marker-group: after;\n }\n\n .charcoal-carousel__scroller::scroll-button(*) {\n content: none;\n }\n\n .charcoal-carousel__scroller::scroll-marker-group {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 40px;\n gap: 8px;\n\n position: absolute;\n position-anchor: --charcoal-carousel;\n top: anchor(bottom);\n justify-self: anchor-center;\n }\n\n .charcoal-carousel[data-indicator='false'] .charcoal-carousel__scroller {\n scroll-marker-group: none;\n }\n\n .charcoal-carousel__item::scroll-marker {\n content: '';\n width: 8px;\n height: 8px;\n border: 0;\n border-radius: 50%;\n background-color: var(--charcoal-color-text-tertiary-default);\n cursor: pointer;\n transition: 0.2s background-color;\n }\n\n .charcoal-carousel__item::scroll-marker:hover {\n background-color: var(--charcoal-color-text-secondary-default);\n }\n\n .charcoal-carousel__item::scroll-marker:focus {\n outline: 2px solid rgba(0, 150, 250, 0.56);\n outline-offset: 2px;\n }\n\n .charcoal-carousel__item::scroll-marker:target-current {\n background-color: var(--charcoal-color-text-default);\n }\n\n .charcoal-carousel__indicator {\n display: none;\n }\n}\n/* stylelint-enable property-no-unknown, selector-pseudo-element-no-unknown, selector-pseudo-class-no-unknown */\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-rc.4",
3
+ "version": "6.0.0-rc.6",
4
4
  "license": "Apache-2.0",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -38,14 +38,13 @@
38
38
  "react-stately": "3.46.0"
39
39
  },
40
40
  "dependencies": {
41
- "@react-spring/web": "^10",
42
41
  "polished": "^4.1.4",
43
42
  "react-compiler-runtime": "1.0.0",
44
43
  "warning": "^4.0.3",
45
- "@charcoal-ui/theme": "6.0.0-rc.4",
46
- "@charcoal-ui/foundation": "6.0.0-rc.4",
47
- "@charcoal-ui/utils": "6.0.0-rc.4",
48
- "@charcoal-ui/icons": "6.0.0-rc.4"
44
+ "@charcoal-ui/foundation": "6.0.0-rc.6",
45
+ "@charcoal-ui/icons": "6.0.0-rc.6",
46
+ "@charcoal-ui/utils": "6.0.0-rc.6",
47
+ "@charcoal-ui/theme": "6.0.0-rc.6"
49
48
  },
50
49
  "peerDependencies": {
51
50
  "react": ">=17.0.0",
package/src/__tests__/token-v1-compat.test.ts CHANGED
@@ -99,7 +99,6 @@ describe('Design Token 1.0互換: 旧 index.css の見た目を壊さない', ()
99
99
  - .charcoal-button | color → --charcoal-text2
100
100
  - .charcoal-checkbox__label_div | color → --charcoal-text2
101
101
  - .charcoal-ui-dropdown-selector-text | color → --charcoal-text2
102
- - .charcoal-field-label | color → --charcoal-text1
103
102
  - .charcoal-modal-header-title | color → --charcoal-text1
104
103
  - .charcoal-multi-select-label | color → --charcoal-text2
105
104
  - .charcoal-radio__label_div | color → --charcoal-text2
package/src/_lib/useIsomorphicLayoutEffect.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { useEffect, useLayoutEffect } from 'react'
2
+
3
+ /**
4
+ * SSR では useLayoutEffect が警告を出すため、サーバーでは useEffect にフォールバックする
5
+ */
6
+ export const useIsomorphicLayoutEffect =
7
+ typeof window !== 'undefined' ? useLayoutEffect : useEffect
package/src/components/Carousel/MIGRATION.md CHANGED
@@ -5,7 +5,9 @@
5
5
 
6
6
  ## 移行の要点
7
7
 
8
- - **import 差し替え + `children` → `items` がほぼ唯一の必須変更**。
8
+ - **import 差し替えがほぼ唯一の必須変更**。`children` はそのまま渡せる（ただし自前の
9
+ `flex` ラッパーは外して **1 スライド 1 直接子要素**にし、ラッパーの `gap` は
10
+ 各スライドの `margin` に置き換える）。
9
11
  - `onScroll` / `onResize` / `onScrollStateChange` / `ref`（`resetScroll()`）/ `defaultScroll` /
10
12
  `hasGradient` は **sandbox と同じシグネチャ**で利用できる（drop-in 互換）。
11
13
  - `scrollAmountCoef` は `scrollStep`（関数も可）に名称変更。`fadeInGradient` / `buttonOffset` 系 /
@@ -17,7 +19,7 @@
17
19
  | | sandbox (`@charcoal-ui/react-sandbox`) | react (`@charcoal-ui/react`) |
18
20
  | -------------- | -------------------------------------- | ----------------------------------------------- |
19
21
  | スクロール | react-spring による JS アニメーション | ネイティブ overflow + CSS `scroll-snap` |
20
- | 子要素 | `children`（任意のノード） | `items: { id; children }[]` |
22
+ | 子要素 | `children`（任意のノード） | `children`（1 直接子要素 = 1 スライド） |
21
23
  | インジケーター | なし | CSS `::scroll-marker` / JS フォールバックの dot |
22
24
  | スタイル | styled-components | プレーン CSS（`index.css`） |
23
25
 
@@ -28,14 +30,15 @@
28
30
  + import { Carousel } from '@charcoal-ui/react'
29
31
  ```
30
32
 
31
- 公開型: `CarouselProps` / `CarouselItem` / `CarouselHandlerRef` / `ScrollAlign` / `ScrollStep` /
33
+ 公開型: `CarouselProps` / `CarouselHandlerRef` / `ScrollAlign` / `ScrollStep` /
32
34
  `ScrollStepContext` / `ScrollSnap` / `ScrollSnapType` / `ScrollSnapAlign`。
33
35
 
34
- ## 子要素: `children` → `items`
36
+ ## 子要素: `children`（そのまま渡せる）
35
37
 
36
- 最大の変更点。子ノードを直接渡す形から、`id` 付きの配列に変える。
37
- sandbox では自前で `flex` ラッパーや `gap` を組んでいたが、新版はレイアウト（`gap: 24px`、S は `0`）を
38
- コンポーネント側 CSS が持つので、**ラッパーで囲まず 1 スライド 1 要素**で渡す。
38
+ sandbox と同じく子ノードを直接渡し、スライドの寸法・間隔も sandbox 同様に利用者が持つ
39
+ （コンポーネントの責務はスクロールと indicator / arrow によるページ送りのみ）。
40
+ ただし**直接子要素 1 つを 1 スライド**として数えるので、`flex` ラッパーは外し、
41
+ `gap` の代わりに各スライドの `margin` などで間隔を注入する。
39
42
 
40
43
  ```diff
41
44
  - <Carousel hasGradient defaultScroll={{ align: 'center' }} scrollAmountCoef={0.75}>
@@ -45,38 +48,36 @@ sandbox では自前で `flex` ラッパーや `gap` を組んでいたが、新
45
48
  - ))}
46
49
  - </div>
47
50
  - </Carousel>
48
- + <Carousel
49
- + size="M"
50
- + hasGradient
51
- + defaultScroll={{ align: 'center' }}
52
- + scrollStep={0.75}
53
- + items={items.map((i) => ({ id: String(i), children: <Slide /> }))}
54
- + />
51
+ + <Carousel hasGradient defaultScroll={{ align: 'center' }} scrollStep={0.75}>
52
+ + {items.map((i) => (
53
+ + <Slide key={i} style={{ marginInlineEnd: 8 }} />
54
+ + ))}
55
+ + </Carousel>
55
56
  ```
56
57
 
57
- `id` はキー安定化（再レンダー・スクロール命令の宛先識別）に使うので、配列内で一意かつ安定した値にする。
58
+ `key` は再レンダー時のスライド識別に使うので、一意かつ安定した値にする。
58
59
 
59
60
  ## props 対応表
60
61
 
61
- | sandbox | react | 備考 |
62
- | ------------------------------------------------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
63
- | `children` | `items: { id: string; children: ReactNode }[]` | 上記参照 |
64
- | `scrollAmountCoef`（既定 `0.75`） | `scrollStep`（既定 `0.75`） | `number`（表示幅比）に加え `(ctx) => px` の関数も渡せる |
65
- | `defaultScroll: { align, offset }` | `defaultScroll: { align, offset }` | `align` は `'left' \| 'center' \| 'right'`。ほぼ同等 |
66
- | `hasGradient` | `hasGradient`（既定 `false`） | 実装が mask → 背景色オーバーレイに変更 |
67
- | `fadeInGradient` | （廃止） | 常にオーバーレイ式フェード |
68
- | `buttonOffset` / `buttonPadding` / `bottomOffset` | （廃止） | ボタン配置は CSS グリッド（左右 72px ゾーン）に固定 |
69
- | `centerItems` | （廃止） | レイアウトは `flex` + `gap` 固定 |
70
- | `onScroll(left)` | `onScroll(left)` | ✅ そのまま対応（scroll で発火） |
71
- | `onResize(width)` | `onResize(width)` | ✅ scroller 幅の変化で発火 |
72
- | `onScrollStateChange(canScroll)` | `onScrollStateChange(canScroll)` | ✅ `canPrev \|\| canNext` の変化で発火 |
73
- | `ref`（`CarouselHandlerRef.resetScroll()`） | `ref`（`CarouselHandlerRef.resetScroll()`） | ✅ `forwardRef` で対応。`defaultScroll` の初期位置へ戻す |
74
- | — | `size: 'S' \| 'M'`（既定 `'M'`） | 新規。`S` は 1 枚全幅 + `mandatory` スナップ |
75
- | — | `navigationButtons?: boolean` | 既定は `size === 'M'` |
76
- | — | `indicator?: boolean` | 既定は `size === 'S'` |
77
- | — | `fullWidth?: boolean`（既定 `false`） | `100vw` 表示 |
78
- | — | `className?: string` | ルートに付与 |
79
- | — | `scrollSnap?: { type?; align? }` | `type`: `none`/`proximity`/`mandatory`、`align`: `center`/`start`。未指定で M=none / S=mandatory / center |
62
+ | sandbox | react | 備考 |
63
+ | ------------------------------------------------- | ------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
64
+ | `children` | `children` | ✅ そのまま対応（1 直接子要素 = 1 スライド。ラッパーは外す。上記参照） |
65
+ | `scrollAmountCoef`（既定 `0.75`） | `scrollStep`（既定 `0.75`） | `number`（表示幅比）に加え `(ctx) => px` の関数も渡せる |
66
+ | `defaultScroll: { align, offset }` | `defaultScroll: { align, offset }` | `align` は `'left' \| 'center' \| 'right'`。ほぼ同等 |
67
+ | `hasGradient` | `hasGradient`（既定 `false`） | ✅ そのまま対応（mask による透過フェード） |
68
+ | `fadeInGradient` | （廃止） | スクロール可能な側のみ常にフェード |
69
+ | `buttonOffset` / `buttonPadding` / `bottomOffset` | （廃止） | ボタン配置は CSS グリッド（左右 72px ゾーン）に固定 |
70
+ | `centerItems` | （廃止） | スライドの寸法・間隔は children 側で注入する（sandbox 同様） |
71
+ | `onScroll(left)` | `onScroll(left)` | ✅ そのまま対応（scroll で発火） |
72
+ | `onResize(width)` | `onResize(width)` | ✅ scroller 幅の変化で発火 |
73
+ | `onScrollStateChange(canScroll)` | `onScrollStateChange(canScroll)` | ✅ `canPrev \|\| canNext` の変化で発火 |
74
+ | `ref`（`CarouselHandlerRef.resetScroll()`） | `ref`（`CarouselHandlerRef.resetScroll()`） | ✅ `forwardRef` で対応。`defaultScroll` の初期位置へ戻す |
75
+ | — | `size: 'S' \| 'M'`（既定 `'M'`） | 新規。`S` は 1 枚全幅 + `mandatory` スナップ |
76
+ | — | `navigationButtons?: boolean` | 既定は `size === 'M'` |
77
+ | — | `indicator?: boolean` | 既定は `size === 'S'` |
78
+ | — | `fullWidth?: boolean`（既定 `false`） | `100vw` 表示 |
79
+ | — | `className?: string` | ルートに付与 |
80
+ | — | `scrollSnap?: { type?; align? }` | `type`: `none`/`proximity`/`mandatory`、`align`: `center`/`start`。未指定で M=none / S=mandatory / center |
80
81
 
81
82
  ## 挙動の変更（移行時に確認すること）
82
83
 
@@ -92,8 +93,6 @@ sandbox では自前で `flex` ラッパーや `gap` を組んでいたが、新
92
93
  非対応環境では JS フォールバック）。
93
94
  - **キーボード操作**: スクローラーが `tabIndex={0}` でフォーカス可能になり、`←` / `→` で 1 ステップスクロール。
94
95
  フォーカスリングは charcoal 標準（`box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32)`）。
95
- - **グラデーション**: `mask` による透過から、背景色（`#fff`）オーバーレイ方式に変更。
96
- ダークモードは現状未対応（背景色固定）。
97
96
 
98
97
  ## スクロール量を細かく制御したい場合
99
98
 
@@ -101,17 +100,18 @@ sandbox では自前で `flex` ラッパーや `gap` を組んでいたが、新
101
100
 
102
101
  ```tsx
103
102
  // 表示幅の比率（sandbox の scrollAmountCoef 相当）
104
- <Carousel items={items} scrollStep={0.5} />
103
+ <Carousel scrollStep={0.5}>{slides}</Carousel>
105
104
 
106
105
  // 進む px を直接返す（端は残り全部、など）
107
106
  <Carousel
108
- items={items}
109
107
  scrollStep={({ clientWidth, scrollWidth, scrollLeft, direction }) =>
110
108
  direction === 'next'
111
109
  ? Math.min(clientWidth * 0.8, scrollWidth - clientWidth - scrollLeft)
112
110
  : Math.min(clientWidth * 0.8, scrollLeft)
113
111
  }
114
- />
112
+ >
113
+ {slides}
114
+ </Carousel>
115
115
  ```
116
116
 
117
117
  戻り値は「進む量の絶対値（px）」。符号（prev / next）はコンポーネント側で付与する。