@charcoal-ui/react 5.11.0-beta.0 → 5.11.0-beta.2

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 (26) hide show
  1. package/dist/components/TextArea/index.d.ts +15 -0
  2. package/dist/components/TextArea/index.d.ts.map +1 -1
  3. package/dist/components/TextField/index.d.ts.map +1 -1
  4. package/dist/core/themeHelper.d.ts.map +1 -1
  5. package/dist/index.cjs +2 -2
  6. package/dist/index.cjs.map +1 -1
  7. package/dist/index.css +300 -283
  8. package/dist/index.d.ts +2 -1
  9. package/dist/index.d.ts.map +1 -1
  10. package/dist/index.js +2 -2
  11. package/dist/index.js.map +1 -1
  12. package/dist/layered.css +300 -282
  13. package/dist/layered.css.map +1 -1
  14. package/package.json +5 -5
  15. package/src/components/FocusRing/__snapshots__/index.css.snap +6 -0
  16. package/src/components/FocusRing/index.css +10 -0
  17. package/src/components/FocusRing/index.story.tsx +33 -0
  18. package/src/components/TextArea/TextArea.story.tsx +88 -3
  19. package/src/components/TextArea/index.tsx +87 -37
  20. package/src/components/TextField/__snapshots__/index.css.snap +6 -0
  21. package/src/components/TextField/index.css +6 -0
  22. package/src/components/TextField/index.tsx +17 -15
  23. package/src/core/themeHelper.test.tsx +20 -0
  24. package/src/core/themeHelper.ts +26 -19
  25. package/src/index.ts +6 -1
  26. package/dist/index.css.map +0 -1
package/src/components/TextArea/index.tsx CHANGED
@@ -5,6 +5,7 @@ import {
5
5
  forwardRef,
6
6
  useCallback,
7
7
  useEffect,
8
+ useImperativeHandle,
8
9
  useMemo,
9
10
  useRef,
10
11
  useState,
@@ -16,9 +17,24 @@ import { useId } from '@react-aria/utils'
16
17
  import { AssistiveText } from '../TextField/AssistiveText'
17
18
  import { useClassNames } from '../../_lib/useClassNames'
18
19
 
20
+ /**
21
+ * `TextArea` を `imperativeRef` から操作するためのハンドル
22
+ */
23
+ export type TextAreaImperativeHandle = {
24
+ /**
25
+ * textarea の値を更新し、文字数や高さなどの内部状態を同期する
26
+ */
27
+ setValue: (value: string) => void
28
+ /**
29
+ * textarea の現在の値をもとに、文字数や高さなどの内部状態を同期する
30
+ */
31
+ sync: () => void
32
+ }
33
+
19
34
  export type TextAreaProps = {
20
35
  value?: string
21
36
  onChange?: (value: string) => void
37
+ imperativeRef?: React.Ref<TextAreaImperativeHandle>
22
38
 
23
39
  showCount?: boolean
24
40
  showLabel?: boolean
@@ -57,20 +73,29 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
57
73
  invalid,
58
74
  getCount = countCodePointsInString,
59
75
  defaultValue,
76
+ imperativeRef,
60
77
  ...props
61
78
  },
62
79
  forwardRef,
63
80
  ) {
64
- const { visuallyHiddenProps } = useVisuallyHidden()
65
- const textareaRef = useRef<HTMLTextAreaElement>(null)
81
+ const [rows, setRows] = useState(initialRows)
66
82
  const [count, setCount] = useState(
67
83
  getCount(value ?? defaultValue?.toString() ?? ''),
68
84
  )
69
- const [rows, setRows] = useState(initialRows)
85
+
86
+ const textareaRef = useRef<HTMLTextAreaElement>(null)
87
+ const containerRef = useRef(null)
88
+ useFocusWithClick(containerRef, textareaRef)
89
+ const { visuallyHiddenProps } = useVisuallyHidden()
90
+
91
+ const isUncontrolled = value === undefined
70
92
  const isEnableAutoHeight = useMemo(
71
93
  () => autoHeight || (maxRows && maxRows >= 0),
72
94
  [autoHeight, maxRows],
73
95
  )
96
+ const classNames = useClassNames('charcoal-text-area-root', className)
97
+ const showAssistiveText =
98
+ assistiveText != null && assistiveText.length !== 0
74
99
 
75
100
  const syncHeight = useCallback(
76
101
  (textarea: HTMLTextAreaElement) => {
@@ -79,64 +104,89 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
79
104
  const hasValidMaxRows = maxRows !== undefined && maxRows >= 1
80
105
  const nextRows = initialRows <= currentRows ? currentRows : initialRows
81
106
 
82
- if (!hasValidMaxRows || maxRows <= initialRows) {
107
+ if (!hasValidMaxRows) {
83
108
  setRows(nextRows)
84
109
  return
85
110
  }
86
111
 
87
- setRows(nextRows <= maxRows ? nextRows : maxRows)
112
+ setRows(Math.min(nextRows, maxRows))
88
113
  },
89
114
  [initialRows, maxRows],
90
115
  )
91
116
 
92
- const nonControlled = value === undefined
117
+ const syncTextAreaState = useCallback(
118
+ (textarea: HTMLTextAreaElement) => {
119
+ const count = getCount(textarea.value)
120
+
121
+ if (isUncontrolled) {
122
+ setCount(count)
123
+ }
124
+
125
+ if (isEnableAutoHeight) {
126
+ syncHeight(textarea)
127
+ }
128
+
129
+ return count
130
+ },
131
+ [getCount, isEnableAutoHeight, isUncontrolled, syncHeight],
132
+ )
133
+
93
134
  const handleChange = useCallback(
94
135
  (e: React.ChangeEvent<HTMLTextAreaElement>) => {
95
- const value = e.target.value
136
+ const value = e.currentTarget.value
96
137
  const count = getCount(value)
97
138
  if (maxLength !== undefined && count > maxLength) {
98
139
  return
99
140
  }
100
- if (nonControlled) {
101
- setCount(count)
102
- }
103
- if (isEnableAutoHeight && textareaRef.current !== null) {
104
- syncHeight(textareaRef.current)
105
- }
141
+
142
+ syncTextAreaState(e.currentTarget)
106
143
  onChange?.(value)
107
144
  },
108
- [
109
- isEnableAutoHeight,
110
- getCount,
111
- maxLength,
112
- nonControlled,
113
- onChange,
114
- syncHeight,
115
- ],
145
+ [getCount, maxLength, onChange, syncTextAreaState],
116
146
  )
117
147
 
118
- useEffect(() => {
119
- setCount(getCount(value ?? defaultValue?.toString() ?? ''))
120
- }, [getCount, value, defaultValue])
121
-
122
- useEffect(() => {
123
- if (isEnableAutoHeight && textareaRef.current !== null) {
124
- syncHeight(textareaRef.current)
125
- }
126
- }, [isEnableAutoHeight, syncHeight])
127
-
128
- const containerRef = useRef(null)
129
-
130
- useFocusWithClick(containerRef, textareaRef)
148
+ useImperativeHandle(
149
+ imperativeRef,
150
+ () => ({
151
+ setValue: (value: string) => {
152
+ if (textareaRef.current === null) {
153
+ return
154
+ }
155
+
156
+ textareaRef.current.value = value
157
+ syncTextAreaState(textareaRef.current)
158
+ },
159
+ sync: () => {
160
+ if (textareaRef.current !== null) {
161
+ syncTextAreaState(textareaRef.current)
162
+ }
163
+ },
164
+ }),
165
+ [syncTextAreaState],
166
+ )
131
167
 
132
168
  const textAreaId = useId(props.id)
133
169
  const describedbyId = useId()
134
170
  const labelledbyId = useId()
135
171
 
136
- const classNames = useClassNames('charcoal-text-area-root', className)
172
+ useEffect(() => {
173
+ // 制御コンポーネントの時の挙動
174
+ if (!isUncontrolled) {
175
+ setCount(getCount(value))
176
+ }
137
177
 
138
- const showAssistiveText =
139
- assistiveText != null && assistiveText.length !== 0
178
+ //　autoHeight同期(valueが変更された時にsyncHeightしたい)
179
+ if (isEnableAutoHeight && textareaRef.current !== null) {
180
+ syncHeight(textareaRef.current)
181
+ }
182
+ }, [
183
+ isUncontrolled,
184
+ value,
185
+ getCount,
186
+ isEnableAutoHeight,
187
+ textareaRef,
188
+ syncHeight,
189
+ ])
140
190
 
141
191
  return (
142
192
  <div className={classNames} aria-disabled={disabled}>
package/src/components/TextField/__snapshots__/index.css.snap CHANGED
@@ -51,6 +51,12 @@
51
51
  margin-left: 4px;
52
52
  }
53
53
 
54
+ .charcoal-text-field-input-root {
55
+ flex: 1;
56
+ min-width: 0;
57
+ overflow: hidden;
58
+ }
59
+
54
60
  .charcoal-text-field-input {
55
61
  border: none;
56
62
  box-sizing: border-box;
package/src/components/TextField/index.css CHANGED
@@ -52,6 +52,12 @@
52
52
  margin-left: 4px;
53
53
  }
54
54
 
55
+ .charcoal-text-field-input-root {
56
+ flex: 1;
57
+ min-width: 0;
58
+ overflow: hidden;
59
+ }
60
+
55
61
  .charcoal-text-field-input {
56
62
  border: none;
57
63
  box-sizing: border-box;
package/src/components/TextField/index.tsx CHANGED
@@ -109,21 +109,23 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
109
109
  ref={containerRef}
110
110
  >
111
111
  {prefix && <div className="charcoal-text-field-prefix">{prefix}</div>}
112
- <input
113
- className="charcoal-text-field-input"
114
- aria-describedby={showAssistiveText ? describedbyId : undefined}
115
- aria-invalid={invalid}
116
- aria-labelledby={labelledbyId}
117
- id={inputId}
118
- data-invalid={invalid === true}
119
- maxLength={maxLength}
120
- onChange={handleChange}
121
- disabled={disabled}
122
- ref={mergeRefs(forwardRef, inputRef)}
123
- type={type}
124
- value={value}
125
- {...props}
126
- />
112
+ <div className="charcoal-text-field-input-root">
113
+ <input
114
+ className="charcoal-text-field-input"
115
+ aria-describedby={showAssistiveText ? describedbyId : undefined}
116
+ aria-invalid={invalid}
117
+ aria-labelledby={labelledbyId}
118
+ id={inputId}
119
+ data-invalid={invalid === true}
120
+ maxLength={maxLength}
121
+ onChange={handleChange}
122
+ disabled={disabled}
123
+ ref={mergeRefs(forwardRef, inputRef)}
124
+ type={type}
125
+ value={value}
126
+ {...props}
127
+ />
128
+ </div>
127
129
  {(suffix || showCount) && (
128
130
  <div className="charcoal-text-field-suffix">
129
131
  {suffix}
package/src/core/themeHelper.test.tsx ADDED
@@ -0,0 +1,20 @@
1
+ import { renderHook } from '@testing-library/react'
2
+ import { beforeEach, describe, expect, it } from 'vitest'
3
+ import { useLocalStorage } from './themeHelper'
4
+
5
+ describe('themeHelper', () => {
6
+ beforeEach(() => {
7
+ localStorage.clear()
8
+ })
9
+
10
+ it('does not enter an update loop when localStorage contains JSON', () => {
11
+ localStorage.setItem('theme', JSON.stringify({ mode: 'dark' }))
12
+
13
+ const { result } = renderHook(() =>
14
+ useLocalStorage<{ mode: string }>('theme'),
15
+ )
16
+
17
+ expect(result.current[0]).toEqual({ mode: 'dark' })
18
+ expect(result.current[2]).toBe(true)
19
+ })
20
+ })
package/src/core/themeHelper.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { useEffect, useMemo, useState } from 'react'
1
+ import { useCallback, useEffect, useMemo, useState } from 'react'
2
2
 
3
3
  export const LOCAL_STORAGE_KEY = 'charcoal-theme'
4
4
  export const DEFAULT_ROOT_ATTRIBUTE = 'theme'
@@ -29,6 +29,9 @@ export const themeSetter =
29
29
  }
30
30
  }
31
31
 
32
+ // デフォルト引数で生成すると毎レンダー新しい関数になり、effect が再実行される
33
+ const defaultThemeSetter = themeSetter()
34
+
32
35
  /**
33
36
  * `<html data-theme="dark">` にマッチするセレクタを生成する
34
37
  */
@@ -51,7 +54,7 @@ export function prefersColorScheme<T extends 'light' | 'dark'>(theme: T) {
51
54
  */
52
55
  export function useThemeSetter({
53
56
  key = LOCAL_STORAGE_KEY,
54
- setter = themeSetter(),
57
+ setter = defaultThemeSetter,
55
58
  }: { key?: string; setter?: (theme: string | undefined) => void } = {}) {
56
59
  const [theme, , system] = useTheme(key)
57
60
 
@@ -93,29 +96,33 @@ export function useLocalStorage<T>(key: string, defaultValue?: () => T) {
93
96
  const [state, setState] = useState<T>()
94
97
  const defaultValueMemo = useMemo(() => defaultValue?.(), [defaultValue])
95
98
 
99
+ const fetch = useCallback(() => {
100
+ const raw = localStorage.getItem(key)
101
+ setState((raw !== null ? deserialize(raw) : null) ?? defaultValueMemo)
102
+ setReady(true)
103
+ }, [defaultValueMemo, key])
104
+
105
+ const handleStorage = useCallback(
106
+ (e: StorageEvent) => {
107
+ if (e.storageArea !== localStorage) {
108
+ return
109
+ }
110
+ if (e.key !== key) {
111
+ return
112
+ }
113
+ fetch()
114
+ },
115
+ [fetch, key],
116
+ )
117
+
118
+ // JSON は deserialize のたびに新しい object になるため、入力変更時だけ再取得する
96
119
  useEffect(() => {
97
120
  fetch()
98
121
  window.addEventListener('storage', handleStorage)
99
122
  return () => {
100
123
  window.removeEventListener('storage', handleStorage)
101
124
  }
102
- })
103
-
104
- const handleStorage = (e: StorageEvent) => {
105
- if (e.storageArea !== localStorage) {
106
- return
107
- }
108
- if (e.key !== key) {
109
- return
110
- }
111
- fetch()
112
- }
113
-
114
- const fetch = () => {
115
- const raw = localStorage.getItem(key)
116
- setState((raw !== null ? deserialize(raw) : null) ?? defaultValueMemo)
117
- setReady(true)
118
- }
125
+ }, [fetch, handleStorage])
119
126
 
120
127
  const set = (value: T | undefined) => {
121
128
  if (value === undefined) {
package/src/index.ts CHANGED
@@ -38,7 +38,11 @@ export {
38
38
  default as TextField,
39
39
  type TextFieldProps,
40
40
  } from './components/TextField'
41
- export { default as TextArea, type TextAreaProps } from './components/TextArea'
41
+ export {
42
+ default as TextArea,
43
+ type TextAreaImperativeHandle,
44
+ type TextAreaProps,
45
+ } from './components/TextArea'
42
46
  export { default as Icon, type IconProps } from './components/Icon'
43
47
  export {
44
48
  default as Modal,
@@ -91,3 +95,4 @@ export {
91
95
  default as UnstablePagination,
92
96
  type PaginationProps,
93
97
  } from './components/Pagination'
98
+ import './components/FocusRing/index.css'
package/dist/index.css.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.css","names":[],"sources":["../src/components/Button/index.css","../src/components/Clickable/index.css","../src/components/IconButton/index.css","../src/components/Radio/index.css","../src/components/Radio/RadioInput/index.css","../src/components/Radio/RadioGroup/index.css","../src/components/MultiSelect/index.css","../src/components/Switch/index.css","../src/components/Switch/SwitchInput/index.css","../src/components/TextField/index.css","../src/components/FieldLabel/index.css","../src/components/TextField/AssistiveText/index.css","../src/components/TextArea/index.css","../src/components/Modal/Dialog/index.css","../src/components/Modal/index.css","../src/components/Modal/ModalPlumbing.css","../src/components/LoadingSpinner/index.css","../src/components/DropdownSelector/index.css","../src/components/DropdownSelector/Popover/index.css","../src/components/DropdownSelector/MenuList/index.css","../src/components/DropdownSelector/ListItem/index.css","../src/components/DropdownSelector/DropdownMenuItem/index.css","../src/components/DropdownSelector/MenuItemGroup/index.css","../src/components/SegmentedControl/index.css","../src/components/Checkbox/index.css","../src/components/Checkbox/CheckboxInput/index.css","../src/components/TagItem/index.css","../src/components/HintText/index.css","../src/components/TextEllipsis/index.css","../src/components/Pagination/index.css"],"sourcesContent":[".charcoal-button {\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: min-content;\n display: inline-grid;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n user-select: none;\n white-space: nowrap;\n border-radius: 999999px;\n font-size: 14px;\n line-height: 22px;\n font-weight: bold;\n color: var(--charcoal-text2);\n background-color: var(--charcoal-surface3);\n transition:\n 0.2s color,\n 0.2s background-color,\n 0.2s box-shadow;\n height: 40px;\n\n &:disabled,\n &[aria-disabled]:not([aria-disabled='false']) {\n cursor: default;\n opacity: 0.32;\n }\n\n &:not(:disabled):not([aria-disabled]):focus-visible,\n &[aria-disabled='false']:focus-visible {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n &:not(:disabled):not([aria-disabled]):hover,\n &[aria-disabled='false']:hover {\n color: var(--charcoal-text2-hover);\n background-color: var(--charcoal-surface3-hover);\n }\n\n &:not(:disabled):not([aria-disabled]):active,\n &[aria-disabled='false']:active,\n &[data-active='true'] {\n color: var(--charcoal-text2-press);\n background-color: var(--charcoal-surface3-press);\n }\n\n &[data-variant='Primary'] {\n color: var(--charcoal-text5);\n background-color: var(--charcoal-brand);\n\n &:hover:not(:disabled):not([aria-disabled]),\n &:hover[aria-disabled='false'] {\n color: var(--charcoal-text5-hover);\n background-color: var(--charcoal-brand-hover);\n }\n\n &:active:not(:disabled):not([aria-disabled]),\n &:active[aria-disabled='false'],\n &[data-active='true'] {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-brand-press);\n }\n }\n\n &[data-variant='Overlay'] {\n color: var(--charcoal-text5);\n background-color: var(--charcoal-surface4);\n\n &:hover:not(:disabled):not([aria-disabled]),\n &:hover[aria-disabled='false'] {\n color: var(--charcoal-text5-hover);\n background-color: var(--charcoal-surface4-hover);\n }\n\n &:active:not(:disabled):not([aria-disabled]),\n &:active[aria-disabled='false'],\n &[data-active='true'] {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-surface4-press);\n }\n }\n\n &[data-variant='Navigation'] {\n color: var(--charcoal-text5);\n background-color: var(--charcoal-surface6);\n\n &:hover:not(:disabled):not([aria-disabled]),\n &:hover[aria-disabled='false'] {\n color: var(--charcoal-text5-hover);\n background-color: var(--charcoal-surface6-hover);\n }\n\n &:active:not(:disabled):not([aria-disabled]),\n &:active[aria-disabled='false'],\n &[data-active='true'] {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-surface6-press);\n }\n }\n\n &[data-variant='Danger'] {\n color: var(--charcoal-text5);\n background-color: var(--charcoal-assertive);\n\n &:hover:not(:disabled):not([aria-disabled]),\n &:hover[aria-disabled='false'] {\n color: var(--charcoal-text5-hover);\n background-color: var(--charcoal-assertive-hover);\n }\n\n &:active:not(:disabled):not([aria-disabled]),\n &:active[aria-disabled='false'],\n &[data-active='true'] {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-assertive-press);\n }\n }\n\n &[data-size='S'] {\n padding: 0 16px;\n height: 32px;\n }\n\n &[data-full-width='true'] {\n width: 100%;\n }\n}\n",".charcoal-clickable {\n cursor: pointer;\n\n /* Reset button appearance */\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 &:disabled,\n &[aria-disabled]:not([aria-disabled='false']) {\n cursor: default;\n }\n\n &:focus {\n outline: none;\n }\n\n &::-moz-focus-inner {\n border-style: none;\n padding: 0;\n }\n}\n",".charcoal-icon-button {\n cursor: pointer;\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 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 &:disabled,\n &[aria-disabled]:not([aria-disabled='false']) {\n cursor: default;\n opacity: 0.32;\n }\n\n &:focus {\n outline: none;\n }\n\n &::-moz-focus-inner {\n border-style: none;\n padding: 0;\n }\n\n &[data-size='XS'] {\n width: 20px;\n height: 20px;\n }\n\n &[data-size='S'] {\n width: 32px;\n height: 32px;\n }\n\n &[data-size='M'] {\n width: 40px;\n height: 40px;\n }\n\n &[data-variant='Default'] {\n color: var(--charcoal-text3);\n background-color: var(--charcoal-transparent);\n\n &[data-active='true']:not(:disabled):not([aria-disabled]),\n &[data-active='true'][aria-disabled='false'] {\n color: var(--charcoal-text3-press);\n background-color: var(--charcoal-transparent-press);\n }\n\n &[data-active='false']:not(:disabled):not([aria-disabled]):hover,\n &[data-active='false'][aria-disabled='false']:hover {\n color: var(--charcoal-text3-hover);\n background-color: var(--charcoal-transparent-hover);\n }\n\n &[data-active='false']:not(:disabled):not([aria-disabled]):active,\n &[data-active='false'][aria-disabled='false']:active {\n color: var(--charcoal-text3-press);\n background-color: var(--charcoal-transparent-press);\n }\n }\n\n &[data-variant='Overlay'] {\n color: var(--charcoal-text5);\n background-color: var(--charcoal-surface4);\n\n &[data-active='true']:not(:disabled):not([aria-disabled]),\n &[data-active='true'][aria-disabled='false'] {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-surface4-press);\n }\n\n &[data-active='false']:not(:disabled):not([aria-disabled]):hover,\n &[data-active='false'][aria-disabled='false']:hover {\n color: var(--charcoal-text5-hover);\n background-color: var(--charcoal-surface4-hover);\n }\n\n &[data-active='false']:not(:disabled):not([aria-disabled]):active,\n &[data-active='false'][aria-disabled='false']:active {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-surface4-press);\n }\n }\n\n &:not(:disabled):not([aria-disabled]):focus,\n &[aria-disabled='false']:focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n &:not(:disabled):not([aria-disabled]):focus-visible,\n &[aria-disabled='false']:focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n &:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),\n &[aria-disabled='false']:focus:not(:focus-visible) {\n box-shadow: none;\n }\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 &[aria-disabled]:not([aria-disabled='false']) {\n opacity: 0.32;\n cursor: default;\n }\n}\n\n.charcoal-radio__label_div {\n font-size: 14px;\n line-height: 22px;\n color: var(--charcoal-text2);\n}\n",".charcoal-radio-input {\n appearance: none;\n display: block;\n box-sizing: border-box;\n\n margin: 0;\n padding: 6px;\n\n width: 20px;\n height: 20px;\n cursor: pointer;\n border-radius: 999999px;\n background-color: var(--charcoal-surface1);\n transition:\n 0.2s background-color,\n 0.2s box-shadow;\n}\n\n.charcoal-radio-input:checked {\n background-color: var(--charcoal-brand);\n}\n\n.charcoal-radio-input:checked::after {\n content: '';\n display: block;\n width: 8px;\n height: 8px;\n pointer-events: none;\n background-color: var(--charcoal-text5);\n border-radius: 999999px;\n transition:\n 0.2s background-color,\n 0.2s box-shadow;\n}\n\n.charcoal-radio-input:not(:checked) {\n border-width: 2px;\n border-style: solid;\n border-color: var(--charcoal-text3);\n}\n\n.charcoal-radio-input:disabled {\n cursor: default;\n}\n\n.charcoal-radio-input:not(:disabled):hover {\n background-color: var(--charcoal-surface1-hover);\n}\n\n.charcoal-radio-input:not(:disabled):active {\n background-color: var(--charcoal-surface1-press);\n}\n\n.charcoal-radio-input:not(:disabled):focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n\n.charcoal-radio-input:not(:disabled):focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n\n.charcoal-radio-input:not(:disabled):focus:not(:focus-visible) {\n box-shadow: none;\n}\n\n.charcoal-radio-input:not(:disabled)[aria-invalid='true'],\n.charcoal-radio-input:not(:disabled)[aria-invalid='true']:focus {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n}\n\n.charcoal-radio-input:checked:not(:disabled):hover {\n background-color: var(--charcoal-brand-hover);\n}\n\n.charcoal-radio-input:checked:not(:disabled):hover::after {\n background-color: var(--charcoal-text5-hover);\n}\n\n.charcoal-radio-input:checked:not(:disabled):active {\n background-color: var(--charcoal-brand-press);\n}\n\n.charcoal-radio-input:checked:not(:disabled):active::after {\n background-color: var(--charcoal-text5-press);\n}\n",".charcoal-radio-group {\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 8px;\n}\n",".charcoal-multi-select {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n position: relative;\n cursor: pointer;\n gap: 4px;\n\n &:disabled,\n &[aria-disabled]:not([aria-disabled='false']) {\n opacity: 0.32;\n cursor: default;\n }\n}\n\n.charcoal-multi-select-label {\n display: flow-root;\n align-items: center;\n font-size: 14px;\n line-height: 22px;\n color: var(--charcoal-text2);\n\n &::before {\n display: block;\n width: 0;\n height: 0;\n content: '';\n margin-top: -4px;\n }\n\n &::after {\n display: block;\n width: 0;\n height: 0;\n content: '';\n margin-bottom: -4px;\n }\n}\n\n.charcoal-multi-select-input[type='checkbox'] {\n appearance: none;\n display: block;\n width: 20px;\n height: 20px;\n margin: 0;\n background-color: var(--charcoal-text3);\n border-radius: 999999px;\n transition:\n 0.2s background-color,\n 0.2s box-shadow;\n\n &:checked {\n background-color: var(--charcoal-brand);\n }\n\n &:focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n &:focus:not(:focus-visible) {\n box-shadow: none;\n }\n\n &:hover:not(:disabled):not([aria-disabled]),\n &:hover[aria-disabled='false'] {\n background-color: var(--charcoal-text3-hover);\n }\n\n &:active:not(:disabled):not([aria-disabled]),\n &:active[aria-disabled='false'] {\n background-color: var(--charcoal-text3-press);\n }\n\n &:checked:hover:not(:disabled):not([aria-disabled]),\n &:checked:hover[aria-disabled='false'] {\n background-color: var(--charcoal-brand-hover);\n }\n\n &:checked:active:not(:disabled):not([aria-disabled]),\n &:checked:active[aria-disabled='false'] {\n background-color: var(--charcoal-brand-press);\n }\n\n &[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 &[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 &[data-overlay='true'] {\n background-color: var(--charcoal-surface4);\n }\n}\n\n.charcoal-multi-select-overlay {\n position: absolute;\n top: -2px;\n left: -2px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n border-radius: 999999px;\n color: var(--charcoal-text5);\n transition: 0.2s box-shadow;\n\n &[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 &[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 &[data-overlay='true'] {\n border-color: var(--charcoal-text5);\n border-width: 2px;\n border-style: solid;\n }\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 &[aria-disabled='true'] {\n opacity: 0.32;\n cursor: default;\n\n & > input {\n opacity: 1;\n }\n }\n}\n\n.charcoal-switch__label_div {\n font-size: 14px;\n line-height: 22px;\n color: var(--charcoal-text2);\n}\n",".charcoal-switch-input {\n cursor: pointer;\n appearance: none;\n display: inline-flex;\n position: relative;\n box-sizing: border-box;\n width: 28px;\n border: 2px solid transparent;\n\n transition-property: background-color, box-shadow;\n transition-duration: 0.2s;\n\n outline: none;\n border-radius: 16px;\n height: 16px;\n margin: 0;\n background-color: var(--charcoal-text4);\n}\n\n.charcoal-switch-input:disabled,\n.charcoal-switch-input[readonly] {\n opacity: 0.32;\n cursor: default;\n}\n\n.charcoal-switch-input::after {\n content: '';\n position: absolute;\n display: block;\n top: 0;\n left: 0;\n width: 12px;\n height: 12px;\n transform: translateX(0);\n transition: transform 0.2s;\n border-radius: 1024px;\n background-color: var(--charcoal-text5);\n}\n\n.charcoal-switch-input:checked::after {\n transform: translateX(12px);\n transition: transform 0.2s;\n}\n\n.charcoal-switch-input:checked {\n background-color: var(--charcoal-brand);\n}\n\n.charcoal-switch-input:not(:disabled):hover {\n background-color: var(--charcoal-text4-hover);\n}\n\n.charcoal-switch-input:not(:disabled):active {\n background-color: var(--charcoal-text4-press);\n}\n\n.charcoal-switch-input:not(:disabled):focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-switch-input:not(:disabled):focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-switch-input:not(:disabled):focus:not(:focus-visible) {\n box-shadow: none;\n}\n\n.charcoal-switch-input:not(:disabled)::after:hover {\n background-color: var(--charcoal-text5-hover);\n}\n\n.charcoal-switch-input:not(:disabled)::after:active {\n background-color: var(--charcoal-text5-press);\n}\n\n.charcoal-switch-input:not(:disabled):checked:hover {\n background-color: var(--charcoal-brand-hover);\n}\n\n.charcoal-switch-input:not(:disabled):checked:active {\n background-color: var(--charcoal-brand-press);\n}\n",".charcoal-text-field-root {\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 4px;\n\n &[aria-disabled='true'] {\n opacity: 0.32;\n }\n}\n\n.charcoal-text-field-container {\n display: flex;\n height: 40px;\n transition:\n 0.2s background-color,\n 0.2s box-shadow;\n color: var(--charcoal-text2);\n background-color: var(--charcoal-surface3);\n border-radius: 4px;\n padding: 0 8px;\n line-height: 22px;\n font-size: 14px;\n\n &[data-invalid='true'] {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n }\n\n &:not([aria-disabled='true']):hover {\n background-color: var(--charcoal-surface3-hover);\n }\n\n &: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 &: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\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 {\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 appearance: none;\n background: transparent;\n\n color: var(--charcoal-text2);\n\n &::placeholder {\n color: var(--charcoal-text3);\n }\n}\n\n.charcoal-text-field-line-counter {\n line-height: 22px;\n font-size: 14px;\n color: var(--charcoal-text3);\n}\n",".charcoal-field-label {\n font-size: 14px;\n line-height: 22px;\n font-weight: bold;\n display: flow-root;\n color: var(--charcoal-text1);\n}\n\n.charcoal-field-label-required-text {\n font-size: 14px;\n line-height: 22px;\n display: flow-root;\n color: var(--charcoal-text2);\n}\n\n.charcoal-field-label-sub-label {\n font-size: 14px;\n line-height: 22px;\n display: flow-root;\n color: var(--charcoal-text3);\n transition:\n 0.2s color,\n 0.2s box-shadow;\n}\n\n.charcoal-field-label-root {\n display: inline-flex;\n align-items: center;\n\n & > .charcoal-field-label-required-text {\n margin-left: 4px;\n }\n\n & > .charcoal-field-label-sub-label {\n margin-left: auto;\n }\n}\n",".charcoal-text-field-assistive-text {\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n color: var(--charcoal-text2);\n}\n\n.charcoal-text-field-assistive-text[data-invalid='true'] {\n color: var(--charcoal-assertive);\n}\n",".charcoal-text-area-root {\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 4px;\n\n &[aria-disabled='true'] {\n opacity: 0.32;\n }\n}\n\n.charcoal-text-area-container {\n position: relative;\n overflow: hidden;\n\n color: var(--charcoal-text2);\n background-color: var(--charcoal-surface3);\n border-radius: 4px;\n transition:\n 0.2s background-color,\n 0.2s box-shadow;\n height: calc(22px * var(--charcoal-text-area-rows) + 18px);\n\n &[aria-invalid='true'] {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n }\n\n &:focus-within {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n &:not([aria-disabled='true']):hover {\n background-color: var(--charcoal-surface3-hover);\n }\n\n &[aria-invalid='true']:focus-within {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n }\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 appearance: none;\n\n background: none;\n\n &[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 &::placeholder {\n color: var(--charcoal-text3);\n }\n}\n\n.charcoal-text-area-counter {\n position: absolute;\n bottom: 9px;\n right: 8px;\n\n line-height: 22px;\n font-size: 14px;\n color: var(--charcoal-text3);\n}\n",".charcoal-modal-dialog {\n margin: auto;\n position: relative;\n height: fit-content;\n width: 440px;\n\n background-color: var(--charcoal-surface1);\n border-radius: 24px;\n}\n\n.charcoal-modal-dialog[data-size='S'] {\n width: 336px;\n}\n\n.charcoal-modal-dialog[data-size='M'] {\n width: 440px;\n}\n\n.charcoal-modal-dialog[data-size='L'] {\n width: 648px;\n}\n\n@media (max-width: 743px) {\n .charcoal-modal-dialog {\n max-width: 440px;\n width: calc(100% - 48px);\n }\n\n .charcoal-modal-dialog[data-bottom-sheet='true'],\n .charcoal-modal-dialog[data-bottom-sheet='full'] {\n max-width: unset;\n width: 100%;\n border-radius: 0;\n margin: auto 0 0 0;\n }\n\n .charcoal-modal-dialog[data-bottom-sheet='full'] {\n min-height: 100%;\n }\n}\n\n.charcoal-modal-dialog:focus {\n outline: none;\n}\n",".charcoal-modal-background {\n overflow: auto;\n display: flex;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n justify-content: center;\n padding: 40px 0;\n box-sizing: border-box;\n\n background-color: var(--charcoal-surface4);\n\n @media (max-width: 743px) {\n &[data-bottom-sheet='true'],\n &[data-bottom-sheet='full'] {\n padding: 0;\n }\n }\n}\n\n.charcoal-modal-close-button {\n position: absolute;\n top: 8px;\n right: 8px;\n\n color: var(--charcoal-text3);\n transition: 0.2s color;\n}\n\n.charcoal-modal-title {\n margin: 0;\n font-weight: inherit;\n font-size: inherit;\n}\n",".charcoal-modal-header-root {\n height: 64px;\n display: grid;\n align-content: center;\n justify-content: center;\n}\n\n@media (max-width: 743px) {\n .charcoal-modal-header-root[data-bottom-sheet='true'],\n .charcoal-modal-header-root[data-bottom-sheet='full'] {\n height: 48px;\n }\n}\n\n.charcoal-modal-header-title {\n color: var(--charcoal-text1);\n font-size: 16px;\n line-height: 24px;\n font-weight: bold;\n display: flow-root;\n}\n\n.charcoal-modal-align {\n padding-left: 16px;\n padding-right: 16px;\n}\n\n.charcoal-modal-body {\n padding-bottom: 40px;\n}\n\n.charcoal-modal-buttons {\n display: grid;\n grid-auto-flow: row;\n grid-row-gap: 8px;\n\n padding-top: 16px;\n padding-left: 16px;\n padding-right: 16px;\n}\n",".charcoal-loading-spinner {\n box-sizing: content-box;\n margin: auto;\n padding: var(--charcoal-loading-spinner-padding);\n border-radius: 8px;\n font-size: var(--charcoal-loading-spinner-size);\n width: var(--charcoal-loading-spinner-size);\n height: var(--charcoal-loading-spinner-size);\n opacity: 0.84;\n color: var(--charcoal-text4);\n background-color: var(--charcoal-background1);\n\n &[data-transparent='true'] {\n background-color: var(--charcoal-transparent);\n }\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 &[data-reset-animation] {\n animation: none;\n }\n\n &[data-once='true'] {\n animation-iteration-count: 1;\n }\n}\n",".charcoal-dropdown-selector-root {\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 4px;\n width: 100%;\n\n &[aria-disabled='true'] {\n cursor: default;\n opacity: 0.32;\n }\n}\n\n.charcoal-dropdown-selector-button {\n display: grid;\n grid-template-columns: 1fr auto;\n justify-content: space-between;\n align-items: center;\n\n height: 40px;\n width: 100%;\n box-sizing: border-box;\n border: none;\n cursor: pointer;\n gap: 4px;\n\n padding-right: 8px;\n padding-left: 8px;\n background-color: var(--charcoal-surface3);\n border-radius: 4px;\n\n transition:\n 0.2s box-shadow,\n 0.2s background-color;\n\n &:disabled {\n cursor: default;\n }\n\n &:not(:disabled) {\n &:focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n &[data-active='true'],\n &:active {\n background-color: var(--charcoal-surface3-press);\n }\n\n &:hover {\n background-color: var(--charcoal-surface3-hover);\n }\n\n &:focus:not(:focus-visible) {\n box-shadow: none;\n }\n }\n\n &[aria-invalid='true'],\n &: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\n.charcoal-ui-dropdown-selector-text {\n text-align: left;\n font-size: 14px;\n line-height: 22px;\n display: flow-root;\n color: var(--charcoal-text2);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &[data-placeholder='true'] {\n color: var(--charcoal-text3);\n }\n}\n\n.charcoal-ui-dropdown-selector-icon {\n color: var(--charcoal-text2);\n}\n",".charcoal-popover {\n margin: 4px 0;\n list-style: none;\n overflow: auto;\n max-height: inherit;\n background-color: var(--charcoal-background1);\n border: solid 1px var(--charcoal-border-default);\n border-radius: 8px;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n",".charcoal-menu-list {\n padding: 0;\n margin: 0;\n}\n",".charcoal-list-item {\n list-style: none;\n display: flex;\n align-items: center;\n min-height: 40px;\n cursor: pointer;\n outline: none;\n\n padding-right: 16px;\n padding-left: 16px;\n\n transition: background-color 0.2s;\n}\n\n.charcoal-list-item:not([aria-disabled='true']):hover,\n.charcoal-list-item:not([aria-disabled='true']):focus,\n.charcoal-list-item:not([aria-disabled='true']):focus-within {\n background-color: var(--charcoal-surface3);\n}\n\n.charcoal-list-item[aria-disabled='true'] {\n opacity: 0.32;\n cursor: default;\n}\n",".charcoal-dropdown-selector-menu-item {\n font-size: 14px;\n line-height: 22px;\n color: var(--charcoal-text2);\n padding: 9px 0;\n\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 20px;\n}\n\n.charcoal-dropdown-selector-menu-item[data-selected='true'] {\n margin-left: 0px;\n}\n\n.charcoal-dropdown-selector-menu-item-icon {\n color: var(--charcoal-text2);\n padding-right: 4px;\n}\n\n.charcoal-dropdown-selector-menu-item-container {\n display: flex;\n align-items: center;\n}\n\n.charcoal-dropdown-selector-menu-secondary {\n font-size: 12px;\n line-height: 20px;\n color: var(--charcoal-text3);\n padding-bottom: 9px;\n\n display: flex;\n align-items: center;\n margin-left: 20px;\n}\n\n.charcoal-dropdown-selector-menu-fullwidth {\n width: 100%;\n}\n",".charcoal-menu-item-group {\n display: block;\n}\n\n.charcoal-menu-item-group > span {\n display: block;\n color: var(--charcoal-text3);\n font-size: 12px;\n font-weight: bold;\n padding: 12px 0 8px 16px;\n}\n\n.charcoal-menu-item-group > ul {\n padding-left: 0;\n margin: 0;\n box-sizing: border-box;\n list-style: none;\n overflow: hidden;\n}\n",".charcoal-segmented-control {\n display: inline-flex;\n align-items: center;\n\n background-color: var(--charcoal-surface3);\n border-radius: 16px;\n\n &[data-uniform-segment-width='true'],\n &[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 &[data-full-width='true'] {\n width: 100%;\n }\n}\n\n.charcoal-segmented-control-radio__label {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n height: 32px;\n\n padding-right: 16px;\n padding-left: 16px;\n border-radius: 16px;\n color: var(--charcoal-text2);\n\n font-size: 14px;\n line-height: 22px;\n\n &[aria-disabled]:not([aria-disabled='false']) {\n cursor: default;\n opacity: 0.32;\n }\n\n &[data-checked='true'] {\n background-color: var(--charcoal-brand);\n color: var(--charcoal-text5);\n }\n\n &[data-uniform-segment-width='true'],\n &[data-full-width='true'] {\n justify-content: center;\n white-space: nowrap;\n }\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 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 &[aria-disabled='true'] {\n cursor: default;\n opacity: 0.32;\n\n & > input {\n opacity: 1;\n }\n }\n}\n\n.charcoal-checkbox__label_div {\n flex: 1;\n color: var(--charcoal-text2);\n font-size: 14px;\n line-height: 20px;\n}\n",".charcoal-checkbox-input {\n appearance: none;\n display: flex;\n cursor: pointer;\n margin: 0;\n width: 20px;\n height: 20px;\n border-radius: 4px;\n transition:\n 0.2s box-shadow,\n 0.2s background-color;\n position: relative;\n box-sizing: border-box;\n}\n\n.charcoal-checkbox-input:disabled,\n.charcoal-checkbox-input[readonly] {\n opacity: 0.32;\n cursor: default;\n}\n\n.charcoal-checkbox-input:checked {\n background-color: var(--charcoal-brand);\n}\n\n.charcoal-checkbox-input:checked::after {\n content: '';\n background-color: white;\n display: flex;\n margin: auto;\n width: 16px;\n height: 16px;\n clip-path: path(\n 'M10.6 5a1.3 1.3 0 0 1 1.8 1.9l-5.7 5.6-3-2.9a1.3 1.3 0 1 1 2-1.9l1 1z'\n );\n}\n\n.charcoal-checkbox-input:not(:checked) {\n border-width: 2px;\n border-style: solid;\n border-color: var(--charcoal-text4);\n}\n\n.charcoal-checkbox-input:not(:disabled):focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-checkbox-input:not(:disabled):focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-checkbox-input:not(:disabled):focus:not(:focus-visible) {\n box-shadow: none;\n}\n\n.charcoal-checkbox-input:checked:not(:disabled):hover {\n background-color: var(--charcoal-brand-hover);\n}\n.charcoal-checkbox-input:checked:not(:disabled):active {\n background-color: var(--charcoal-brand-press);\n}\n\n.charcoal-checkbox-input[aria-invalid='true'],\n.charcoal-checkbox-input[aria-invalid='true']:not(:disabled):focus {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n}\n\n.charcoal-checkbox-input[data-rounded='true'] {\n border-radius: 10px;\n background-color: var(--charcoal-surface3);\n border: 2px solid transparent;\n}\n\n.charcoal-checkbox-input[data-rounded='true']:checked {\n background-color: var(--charcoal-brand);\n}\n\n.charcoal-checkbox-input[data-rounded='true']:not(:disabled):hover {\n background-color: var(--charcoal-surface3-hover);\n}\n.charcoal-checkbox-input[data-rounded='true']:not(:disabled):active {\n background-color: var(--charcoal-surface3-press);\n}\n\n.charcoal-checkbox-input[data-rounded='true']:not(:disabled):focus-visible {\n box-shadow: 0 0 0 6px rgba(0, 150, 250, 0.32);\n}\n\n.charcoal-checkbox-input[data-rounded='true']:checked:not(:disabled):hover {\n background-color: var(--charcoal-brand-hover);\n}\n.charcoal-checkbox-input[data-rounded='true']:checked:not(:disabled):active {\n background-color: var(--charcoal-brand-press);\n}\n\n.charcoal-checkbox-input[data-rounded='true'][aria-invalid='true'],\n.charcoal-checkbox-input[data-rounded='true'][aria-invalid='true']:not(\n :disabled\n ):focus {\n box-shadow: 0 0 0 6px rgba(255, 43, 0, 0.32);\n}\n\n.charcoal-checkbox-input[data-rounded='true']::before {\n content: '';\n width: 24px;\n height: 24px;\n position: absolute;\n top: -4px;\n left: -4px;\n border-radius: 12px;\n border: 2px solid #fff;\n box-sizing: border-box;\n}\n",".charcoal-tag-item {\n --charcoal-tag-item-color: var(--charcoal-text5);\n --charcoal-tag-item-size: 40px;\n --charcoal-tag-item-padding-left: 24px;\n --charcoal-tag-item-padding-right: 24px;\n\n isolation: isolate;\n position: relative;\n\n 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 &[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 &[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 &[data-state='inactive'] {\n --charcoal-tag-item-color: var(--charcoal-text2);\n }\n\n &[data-state='active'] {\n --charcoal-tag-item-padding-left: 16px;\n --charcoal-tag-item-padding-right: 8px;\n }\n\n &:disabled,\n &[aria-disabled]:not([aria-disabled='false']) {\n opacity: 0.32;\n cursor: default;\n }\n\n &:not(:disabled):not([aria-disabled]):focus-visible,\n &[aria-disabled='false']:focus-visible {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n &:not(:disabled):not([aria-disabled]):focus,\n &[aria-disabled='false']:focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n &:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),\n &[aria-disabled='false']:focus:not(:focus-visible) {\n box-shadow: none;\n }\n}\n\n.charcoal-tag-item__bg {\n background-color: var(--charcoal-tag-item-bg);\n\n &[data-bg-variant='image'] {\n background-color: var(--charcoal-surface4);\n\n &::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\n &[data-state='inactive'] {\n background-color: var(--charcoal-surface3);\n }\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 &[data-has-translate='true'] {\n justify-content: space-between;\n }\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 &::before {\n display: none;\n }\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 &[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\n/* Kept flat: different class name from .charcoal-tag-item__label__text (note: \"labe\" typo in original) */\n.charcoal-tag-item__labe__text[data-has-translate='true']::after {\n display: none;\n}\n",".charcoal-hint-text {\n background-color: var(--charcoal-surface3);\n border-radius: 8px;\n padding: 12px 16px;\n display: flex;\n align-items: flex-start;\n\n &[data-context='page'] {\n justify-content: center;\n\n @media (min-width: 744px) {\n padding: 20px 40px;\n }\n }\n}\n\n.charcoal-hint-text-icon {\n display: flex;\n align-items: center;\n color: var(--charcoal-text3);\n height: 22px;\n margin: 0 4px 0 0;\n}\n\n.charcoal-hint-text-message {\n color: var(--charcoal-text2);\n font-size: 14px;\n line-height: 22px;\n display: flow-root;\n margin: 0;\n min-width: 0;\n overflow-wrap: break-word;\n}\n",".charcoal-text-ellipsis {\n overflow: hidden;\n overflow-wrap: break-word;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--charcoal-text-ellipsis-line-limit);\n\n &[data-has-line-height='true'] {\n line-height: var(--charcoal-text-ellipsis-line-height);\n }\n\n &[data-has-line-height='false'] {\n line-height: inherit;\n }\n\n &[data-line-limit='1'][data-use-nowrap='true'] {\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n",".charcoal-pagination {\n display: flex;\n justify-content: center;\n align-items: center;\n\n &[data-size='S'] .charcoal-pagination-button {\n min-width: 32px;\n min-height: 32px;\n }\n\n &[data-size='M'] .charcoal-pagination-button {\n min-width: 40px;\n min-height: 40px;\n }\n}\n\n/* stylelint-disable no-descending-specificity */\n.charcoal-pagination-button {\n cursor: pointer;\n appearance: none;\n padding: 0;\n border-style: none;\n outline: none;\n text-decoration: none;\n font: inherit;\n margin: 0;\n user-select: none;\n\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n font-weight: 700;\n line-height: 22px;\n\n /* HACK:\n * Safari doesn't correctly repaint the elements when they're reordered in response to interaction.\n * This forces it to repaint them. This doesn't work if put on the parents either, has to be here.\n */\n /* stylelint-disable-next-line property-no-vendor-prefix */\n -webkit-transform: translateZ(0);\n\n color: var(--charcoal-text3);\n background-color: var(--charcoal-transparent);\n border-radius: 20px;\n transition:\n 0.2s background-color,\n 0.2s box-shadow;\n\n &:focus {\n outline: none;\n }\n\n &::-moz-focus-inner {\n border-style: none;\n padding: 0;\n }\n\n &[hidden] {\n visibility: hidden;\n display: block;\n }\n\n &:not(:disabled):not([aria-disabled]):hover,\n &[aria-disabled='false']:hover {\n color: var(--charcoal-text3);\n background-color: var(--charcoal-surface3);\n }\n\n &:not(:disabled):not([aria-disabled]):active,\n &[aria-disabled='false']:active {\n color: var(--charcoal-text3);\n background-color: var(--charcoal-surface10);\n }\n\n &:not(:disabled):not([aria-disabled]):focus,\n &[aria-disabled='false']:focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n &:not(:disabled):not([aria-disabled]):focus-visible,\n &[aria-disabled='false']:focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n }\n\n &:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),\n &[aria-disabled='false']:focus:not(:focus-visible) {\n box-shadow: none;\n }\n\n &[aria-current] {\n cursor: default;\n background-color: var(--charcoal-surface6);\n color: var(--charcoal-text5);\n\n &:not(:disabled):not([aria-disabled]):hover,\n &:not(:disabled):not([aria-disabled]):active {\n background-color: var(--charcoal-surface6);\n color: var(--charcoal-text5);\n }\n }\n}\n/* stylelint-enable no-descending-specificity */\n\n/* Kept flat: different root class from .charcoal-pagination-button */\n.charcoal-pagination-nav-button[hidden] {\n visibility: hidden;\n display: block;\n}\n\n.charcoal-pagination-spacer {\n &,\n &:hover,\n &:active {\n cursor: default;\n color: var(--charcoal-text3);\n background: none;\n }\n\n &.charcoal-icon-button:disabled {\n opacity: 1;\n }\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AC3IA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;ACxCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;ACrHA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;ACjBA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;ACrFA;AACA;AACA;AACA;AACA;;ACJA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;ACpIA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;ACtBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;ACjFA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;ACtFA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;ACpCA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;ACTA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AChFA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AC3CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;ACnCA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;ACvCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AC3CA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;ACrFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACVA;AACA;AACA;AACA;;ACHA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;ACvBA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;ACvCA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AClBA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AClEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;ACrBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AC/GA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;ACpJA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AChCA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;ACnBA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA"}