@tamagui/checkbox 1.28.1 → 1.28.3
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.
- package/dist/cjs/Checkbox.js +131 -124
- package/dist/cjs/Checkbox.js.map +1 -1
- package/dist/esm/Checkbox.js +131 -124
- package/dist/esm/Checkbox.js.map +1 -1
- package/dist/jsx/Checkbox.js +118 -112
- package/dist/jsx/Checkbox.js.map +1 -1
- package/dist/jsx/Checkbox.mjs +118 -112
- package/dist/jsx/Checkbox.mjs.map +1 -1
- package/package.json +11 -11
- package/src/Checkbox.tsx +151 -142
- package/types/Checkbox.d.ts +10 -0
- package/types/Checkbox.d.ts.map +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Checkbox.tsx"],
|
|
4
|
-
"mappings": "AAGA,SAAS,mBAAmB;AAC5B;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,eAAkC;AAC3C,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,YAAY,WAAW;
|
|
4
|
+
"mappings": "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",
|
|
5
5
|
"names": ["Checkbox"]
|
|
6
6
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/checkbox",
|
|
3
|
-
"version": "1.28.
|
|
3
|
+
"version": "1.28.3",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -20,15 +20,15 @@
|
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@radix-ui/react-use-previous": "^1.0.0",
|
|
23
|
-
"@tamagui/core": "1.28.
|
|
24
|
-
"@tamagui/create-context": "1.28.
|
|
25
|
-
"@tamagui/focusable": "1.28.
|
|
26
|
-
"@tamagui/font-size": "1.28.
|
|
27
|
-
"@tamagui/get-token": "1.28.
|
|
28
|
-
"@tamagui/helpers-tamagui": "1.28.
|
|
29
|
-
"@tamagui/label": "1.28.
|
|
30
|
-
"@tamagui/stacks": "1.28.
|
|
31
|
-
"@tamagui/use-controllable-state": "1.28.
|
|
23
|
+
"@tamagui/core": "1.28.3",
|
|
24
|
+
"@tamagui/create-context": "1.28.3",
|
|
25
|
+
"@tamagui/focusable": "1.28.3",
|
|
26
|
+
"@tamagui/font-size": "1.28.3",
|
|
27
|
+
"@tamagui/get-token": "1.28.3",
|
|
28
|
+
"@tamagui/helpers-tamagui": "1.28.3",
|
|
29
|
+
"@tamagui/label": "1.28.3",
|
|
30
|
+
"@tamagui/stacks": "1.28.3",
|
|
31
|
+
"@tamagui/use-controllable-state": "1.28.3"
|
|
32
32
|
},
|
|
33
33
|
"exports": {
|
|
34
34
|
"./package.json": "./package.json",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"react": "*"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@tamagui/build": "1.28.
|
|
45
|
+
"@tamagui/build": "1.28.3",
|
|
46
46
|
"react": "^18.2.0"
|
|
47
47
|
},
|
|
48
48
|
"publishConfig": {
|
package/src/Checkbox.tsx
CHANGED
|
@@ -7,6 +7,7 @@ import {
|
|
|
7
7
|
SizeTokens,
|
|
8
8
|
TamaguiElement,
|
|
9
9
|
composeEventHandlers,
|
|
10
|
+
createStyledContext,
|
|
10
11
|
getVariableValue,
|
|
11
12
|
isWeb,
|
|
12
13
|
styled,
|
|
@@ -26,6 +27,11 @@ import { ThemeableStack } from '@tamagui/stacks'
|
|
|
26
27
|
import { useControllableState } from '@tamagui/use-controllable-state'
|
|
27
28
|
import * as React from 'react'
|
|
28
29
|
|
|
30
|
+
export const CheckboxStyledContext = createStyledContext({
|
|
31
|
+
size: '$true' as SizeTokens,
|
|
32
|
+
scaleIcon: 1,
|
|
33
|
+
})
|
|
34
|
+
|
|
29
35
|
export type CheckedState = boolean | 'indeterminate'
|
|
30
36
|
|
|
31
37
|
export function isIndeterminate(checked?: CheckedState): checked is 'indeterminate' {
|
|
@@ -106,6 +112,7 @@ const INDICATOR_NAME = 'CheckboxIndicator'
|
|
|
106
112
|
const CheckboxIndicatorFrame = styled(ThemeableStack, {
|
|
107
113
|
// use Checkbox for easier themes
|
|
108
114
|
name: INDICATOR_NAME,
|
|
115
|
+
context: CheckboxStyledContext,
|
|
109
116
|
})
|
|
110
117
|
|
|
111
118
|
type CheckboxIndicatorFrameProps = GetProps<typeof CheckboxIndicatorFrame>
|
|
@@ -133,10 +140,11 @@ const CheckboxIndicator = CheckboxIndicatorFrame.extractable(
|
|
|
133
140
|
...indicatorProps
|
|
134
141
|
} = props
|
|
135
142
|
const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox)
|
|
143
|
+
const styledContext = React.useContext(CheckboxStyledContext)
|
|
136
144
|
const iconSize =
|
|
137
|
-
(typeof
|
|
138
|
-
?
|
|
139
|
-
: getFontSize(
|
|
145
|
+
(typeof styledContext.size === 'number'
|
|
146
|
+
? styledContext.size * 0.65
|
|
147
|
+
: getFontSize(styledContext.size)) * styledContext.scaleIcon
|
|
140
148
|
const theme = useTheme()
|
|
141
149
|
const getThemedIcon = useGetThemedIcon({ size: iconSize, color: theme.color })
|
|
142
150
|
|
|
@@ -178,6 +186,7 @@ export const CheckboxFrame = styled(ThemeableStack, {
|
|
|
178
186
|
name: CHECKBOX_NAME,
|
|
179
187
|
tag: 'button',
|
|
180
188
|
|
|
189
|
+
context: CheckboxStyledContext,
|
|
181
190
|
variants: {
|
|
182
191
|
unstyled: {
|
|
183
192
|
false: {
|
|
@@ -221,8 +230,6 @@ const [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX
|
|
|
221
230
|
type CheckboxContextValue = {
|
|
222
231
|
state: CheckedState
|
|
223
232
|
disabled?: boolean
|
|
224
|
-
size: SizeTokens
|
|
225
|
-
scaleIcon: number
|
|
226
233
|
}
|
|
227
234
|
|
|
228
235
|
const [CheckboxProvider, useCheckboxContext] =
|
|
@@ -244,148 +251,150 @@ export interface CheckboxProps
|
|
|
244
251
|
sizeAdjust?: number
|
|
245
252
|
}
|
|
246
253
|
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
? button
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
})
|
|
254
|
+
const CheckboxComponent = CheckboxFrame.extractable(
|
|
255
|
+
React.forwardRef<HTMLButtonElement, CheckboxProps>(function Checkbox(
|
|
256
|
+
props: ScopedProps<CheckboxProps>,
|
|
257
|
+
forwardedRef
|
|
258
|
+
) {
|
|
259
|
+
const {
|
|
260
|
+
__scopeCheckbox,
|
|
261
|
+
labelledBy: ariaLabelledby,
|
|
262
|
+
name,
|
|
263
|
+
checked: checkedProp,
|
|
264
|
+
defaultChecked,
|
|
265
|
+
required,
|
|
266
|
+
scaleSize = 0.45,
|
|
267
|
+
sizeAdjust = 0,
|
|
268
|
+
disabled,
|
|
269
|
+
value = 'on',
|
|
270
|
+
onCheckedChange,
|
|
271
|
+
native,
|
|
272
|
+
scaleIcon,
|
|
273
|
+
...checkboxProps
|
|
274
|
+
} = props
|
|
275
|
+
const [button, setButton] = React.useState<HTMLButtonElement | null>(null)
|
|
276
|
+
const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node))
|
|
277
|
+
const hasConsumerStoppedPropagationRef = React.useRef(false)
|
|
278
|
+
const propsActive = useProps(props)
|
|
279
|
+
// We set this to true by default so that events bubble to forms without JS (SSR)
|
|
280
|
+
const isFormControl = isWeb
|
|
281
|
+
? button
|
|
282
|
+
? Boolean(button.closest('form'))
|
|
283
|
+
: true
|
|
284
|
+
: false
|
|
285
|
+
const [checked = false, setChecked] = useControllableState({
|
|
286
|
+
prop: checkedProp,
|
|
287
|
+
defaultProp: defaultChecked!,
|
|
288
|
+
onChange: onCheckedChange,
|
|
289
|
+
})
|
|
284
290
|
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
291
|
+
// TODO: this could be null - fix the type
|
|
292
|
+
const styledContext = React.useContext(CheckboxStyledContext)
|
|
293
|
+
const adjustedSize = getVariableValue(
|
|
294
|
+
getSize(propsActive.size ?? styledContext?.size ?? '$true', {
|
|
295
|
+
shift: sizeAdjust,
|
|
296
|
+
})
|
|
297
|
+
) as number
|
|
298
|
+
const size = scaleSize ? Math.round(adjustedSize * scaleSize) : adjustedSize
|
|
299
|
+
|
|
300
|
+
const labelId = useLabelContext(button)
|
|
301
|
+
const labelledBy = ariaLabelledby || labelId
|
|
302
|
+
|
|
303
|
+
if (process.env.TAMAGUI_TARGET === 'native') {
|
|
304
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
305
|
+
React.useEffect(() => {
|
|
306
|
+
if (!props.id) return
|
|
307
|
+
return registerFocusable(props.id, {
|
|
308
|
+
focusAndSelect: () => {
|
|
309
|
+
setChecked((x) => !x)
|
|
310
|
+
},
|
|
311
|
+
focus: () => {},
|
|
288
312
|
})
|
|
289
|
-
)
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
}
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
<BubbleInput
|
|
318
|
-
control={button}
|
|
319
|
-
bubbles={!hasConsumerStoppedPropagationRef.current}
|
|
320
|
-
name={name}
|
|
321
|
-
value={value}
|
|
322
|
-
checked={checked}
|
|
323
|
-
required={required}
|
|
313
|
+
}, [props.id, setChecked])
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
return (
|
|
317
|
+
<CheckboxProvider scope={__scopeCheckbox} state={checked} disabled={disabled}>
|
|
318
|
+
{isWeb && native ? (
|
|
319
|
+
<BubbleInput
|
|
320
|
+
control={button}
|
|
321
|
+
bubbles={!hasConsumerStoppedPropagationRef.current}
|
|
322
|
+
name={name}
|
|
323
|
+
value={value}
|
|
324
|
+
checked={checked}
|
|
325
|
+
required={required}
|
|
326
|
+
disabled={disabled}
|
|
327
|
+
id={props.id}
|
|
328
|
+
/>
|
|
329
|
+
) : (
|
|
330
|
+
<>
|
|
331
|
+
<CheckboxFrame
|
|
332
|
+
width={size}
|
|
333
|
+
height={size}
|
|
334
|
+
tag="button"
|
|
335
|
+
role="checkbox"
|
|
336
|
+
aria-labelledby={labelledBy}
|
|
337
|
+
aria-checked={isIndeterminate(checked) ? 'mixed' : checked}
|
|
338
|
+
aria-required={required}
|
|
339
|
+
data-state={getState(checked)}
|
|
340
|
+
data-disabled={disabled ? '' : undefined}
|
|
324
341
|
disabled={disabled}
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
aria-checked={isIndeterminate(checked) ? 'mixed' : checked}
|
|
336
|
-
aria-required={required}
|
|
337
|
-
data-state={getState(checked)}
|
|
338
|
-
data-disabled={disabled ? '' : undefined}
|
|
339
|
-
disabled={disabled}
|
|
340
|
-
{...checkboxProps}
|
|
341
|
-
ref={composedRefs}
|
|
342
|
-
{...(isWeb && {
|
|
343
|
-
type: 'button',
|
|
344
|
-
value,
|
|
345
|
-
onKeyDown: composeEventHandlers(
|
|
346
|
-
(props as React.HTMLProps<HTMLButtonElement>).onKeyDown,
|
|
347
|
-
(event) => {
|
|
348
|
-
// According to WAI ARIA, Checkboxes don't activate on enter keypress
|
|
349
|
-
if (event.key === 'Enter') event.preventDefault()
|
|
350
|
-
}
|
|
351
|
-
),
|
|
352
|
-
})}
|
|
353
|
-
onPress={composeEventHandlers(props.onPress as any, (event) => {
|
|
354
|
-
setChecked((prevChecked) =>
|
|
355
|
-
isIndeterminate(prevChecked) ? true : !prevChecked
|
|
356
|
-
)
|
|
357
|
-
if (isFormControl) {
|
|
358
|
-
hasConsumerStoppedPropagationRef.current =
|
|
359
|
-
event.isPropagationStopped()
|
|
360
|
-
// if checkbox is in a form, stop propagation from the button so that we only propagate
|
|
361
|
-
// one click event (from the input). We propagate changes from an input so that native
|
|
362
|
-
// form validation works and form events reflect checkbox updates.
|
|
363
|
-
if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()
|
|
342
|
+
{...checkboxProps}
|
|
343
|
+
ref={composedRefs}
|
|
344
|
+
{...(isWeb && {
|
|
345
|
+
type: 'button',
|
|
346
|
+
value,
|
|
347
|
+
onKeyDown: composeEventHandlers(
|
|
348
|
+
(props as React.HTMLProps<HTMLButtonElement>).onKeyDown,
|
|
349
|
+
(event) => {
|
|
350
|
+
// According to WAI ARIA, Checkboxes don't activate on enter keypress
|
|
351
|
+
if (event.key === 'Enter') event.preventDefault()
|
|
364
352
|
}
|
|
365
|
-
|
|
353
|
+
),
|
|
354
|
+
})}
|
|
355
|
+
onPress={composeEventHandlers(props.onPress as any, (event) => {
|
|
356
|
+
setChecked((prevChecked) =>
|
|
357
|
+
isIndeterminate(prevChecked) ? true : !prevChecked
|
|
358
|
+
)
|
|
359
|
+
if (isFormControl) {
|
|
360
|
+
hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()
|
|
361
|
+
// if checkbox is in a form, stop propagation from the button so that we only propagate
|
|
362
|
+
// one click event (from the input). We propagate changes from an input so that native
|
|
363
|
+
// form validation works and form events reflect checkbox updates.
|
|
364
|
+
if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()
|
|
365
|
+
}
|
|
366
|
+
})}
|
|
367
|
+
>
|
|
368
|
+
<CheckboxStyledContext.Provider
|
|
369
|
+
size={propsActive.size ?? styledContext?.size ?? '$true'}
|
|
370
|
+
scaleIcon={scaleIcon ?? styledContext?.scaleIcon ?? 1}
|
|
371
|
+
>
|
|
372
|
+
{propsActive.children}
|
|
373
|
+
</CheckboxStyledContext.Provider>
|
|
374
|
+
</CheckboxFrame>
|
|
375
|
+
|
|
376
|
+
{isWeb && isFormControl ? (
|
|
377
|
+
<BubbleInput
|
|
378
|
+
isHidden
|
|
379
|
+
control={button}
|
|
380
|
+
bubbles={!hasConsumerStoppedPropagationRef.current}
|
|
381
|
+
name={name}
|
|
382
|
+
value={value}
|
|
383
|
+
checked={checked}
|
|
384
|
+
required={required}
|
|
385
|
+
disabled={disabled}
|
|
366
386
|
/>
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
name={name}
|
|
374
|
-
value={value}
|
|
375
|
-
checked={checked}
|
|
376
|
-
required={required}
|
|
377
|
-
disabled={disabled}
|
|
378
|
-
/>
|
|
379
|
-
) : null}
|
|
380
|
-
</>
|
|
381
|
-
)}
|
|
382
|
-
</CheckboxProvider>
|
|
383
|
-
)
|
|
384
|
-
})
|
|
385
|
-
),
|
|
386
|
-
{
|
|
387
|
-
Indicator: CheckboxIndicator,
|
|
388
|
-
}
|
|
387
|
+
) : null}
|
|
388
|
+
</>
|
|
389
|
+
)}
|
|
390
|
+
</CheckboxProvider>
|
|
391
|
+
)
|
|
392
|
+
})
|
|
389
393
|
)
|
|
390
394
|
|
|
395
|
+
export const Checkbox = withStaticProperties(CheckboxComponent, {
|
|
396
|
+
Indicator: CheckboxIndicator,
|
|
397
|
+
Props: CheckboxStyledContext.Provider,
|
|
398
|
+
})
|
|
399
|
+
|
|
391
400
|
export { createCheckboxScope }
|
package/types/Checkbox.d.ts
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import { GetProps, SizeTokens, TamaguiElement } from '@tamagui/core';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
+
export declare const CheckboxStyledContext: import("@tamagui/core").StyledContext<{
|
|
4
|
+
size: SizeTokens;
|
|
5
|
+
scaleIcon: number;
|
|
6
|
+
}>;
|
|
3
7
|
export type CheckedState = boolean | 'indeterminate';
|
|
4
8
|
export declare function isIndeterminate(checked?: CheckedState): checked is 'indeterminate';
|
|
5
9
|
export declare function getState(checked: CheckedState): "indeterminate" | "checked" | "unchecked";
|
|
@@ -347,6 +351,12 @@ export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & R
|
|
|
347
351
|
*/
|
|
348
352
|
disablePassStyles?: boolean | undefined;
|
|
349
353
|
}, "ref">) & React.RefAttributes<TamaguiElement>>;
|
|
354
|
+
Props: React.ProviderExoticComponent<Partial<{
|
|
355
|
+
size: SizeTokens;
|
|
356
|
+
scaleIcon: number;
|
|
357
|
+
}> & {
|
|
358
|
+
children?: React.ReactNode;
|
|
359
|
+
}>;
|
|
350
360
|
};
|
|
351
361
|
export { createCheckboxScope };
|
|
352
362
|
//# sourceMappingURL=Checkbox.d.ts.map
|
package/types/Checkbox.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,QAAQ,EACR,UAAU,EACV,cAAc,
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,QAAQ,EACR,UAAU,EACV,cAAc,EAUf,MAAM,eAAe,CAAA;AAUtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,eAAO,MAAM,qBAAqB;;;EAGhC,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,eAAe,CAAA;AAEpD,wBAAgB,eAAe,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,OAAO,IAAI,eAAe,CAElF;AAED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,YAAY,6CAE7C;AAED,KAAK,UAAU,GAAG,GAAG,CAAA;AACrB,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC;IAC5D,OAAO,EAAE,YAAY,CAAA;IACrB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,OAAO,EAAE,OAAO,CAAA;IAEhB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,WAAW,UAAW,gBAAgB,gBAkDlD,CAAA;AAQD,QAAA,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAI1B,CAAA;AAEF,KAAK,2BAA2B,GAAG,QAAQ,CAAC,OAAO,sBAAsB,CAAC,CAAA;AAE1E,MAAM,MAAM,sBAAsB,GAAG,2BAA2B,GAAG;IACjE;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAA;IACjB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAuDD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCxB,CAAA;AAGF,QAAA,MAA8B,mBAAmB,+CAAqC,CAAA;AAUtF,KAAK,kBAAkB,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAA;AACxD,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,SAAS,GAAG,gBAAgB,CAAC;IAC9D,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,cAAc,CAAC,EAAE,YAAY,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,CAAC,OAAO,EAAE,YAAY,GAAG,IAAI,CAAA;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AA+ID,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAlRnB;;;WAGG;;QAEH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;;WAGG;;QAEH;;WAEG;;;;;;;;;CA8QH,CAAA;AAEF,OAAO,EAAE,mBAAmB,EAAE,CAAA"}
|