@bitrise/bitkit-v2 0.3.485-beta.3132 → 0.3.485-beta.3137
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/components/BitkitUIHeader/UIHeaderModeSwitch.js +1 -4
- package/dist/components/BitkitUIHeader/UIHeaderModeSwitch.js.map +1 -1
- package/dist/theme/slot-recipes/Menu.recipe.js +1 -1
- package/dist/theme/slot-recipes/Menu.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/UIHeader.recipe.js +4 -1
- package/dist/theme/slot-recipes/UIHeader.recipe.js.map +1 -1
- package/package.json +1 -1
|
@@ -60,10 +60,7 @@ var UIHeaderModeSwitch = forwardRef((props, ref) => {
|
|
|
60
60
|
children: /* @__PURE__ */ jsxs(Menu.Root, {
|
|
61
61
|
lazyMount: true,
|
|
62
62
|
positioning: {
|
|
63
|
-
offset: {
|
|
64
|
-
crossAxis: MENU_CROSS_OFFSET,
|
|
65
|
-
mainAxis: 0
|
|
66
|
-
},
|
|
63
|
+
offset: { crossAxis: MENU_CROSS_OFFSET },
|
|
67
64
|
placement: "bottom-end"
|
|
68
65
|
},
|
|
69
66
|
unmountOnExit: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UIHeaderModeSwitch.js","names":["_Fragment"],"sources":["../../../lib/components/BitkitUIHeader/UIHeaderModeSwitch.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useControllableState } from '@chakra-ui/react/hooks';\nimport { Menu } from '@chakra-ui/react/menu';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { forwardRef } from 'react';\n\nimport { type BitkitIconComponent, IconCheck, IconModeDark, IconModeLight, IconModeSystem } from '../../icons';\nimport { usePortalContext } from '../../utilities/BitkitPortalContext';\nimport { useUIHeaderContext } from './UIHeaderContext';\nimport { UIHeaderControlBase } from './UIHeaderControl';\nimport uiHeaderPart from './uiHeaderPart';\n\nexport type BitkitUIHeaderMode = 'dark' | 'light' | 'system';\n\nconst modes: Record<BitkitUIHeaderMode, { icon: BitkitIconComponent; label: string }> = {\n dark: { icon: IconModeDark, label: 'Dark' },\n light: { icon: IconModeLight, label: 'Light' },\n system: { icon: IconModeSystem, label: 'System' },\n};\n\nconst modeOrder = ['system', 'light', 'dark'] as const;\n\n// Lines the menu's check up with the trigger's icon: 1px content border + 24 row end padding +\n// half the 24 check − half the 48 button. Coupled to the menu row's end padding.\nconst MENU_CROSS_OFFSET = 13;\n\nexport interface BitkitUIHeaderModeSwitchProps extends Omit<BoxProps, 'children' | 'defaultValue' | 'onChange'> {\n /** The mode to start on when the switch is left uncontrolled. */\n defaultValue?: BitkitUIHeaderMode;\n /** The trigger's accessible name. It shows no text of its own. */\n label?: string;\n /** Fires with the mode picked from the menu. */\n onValueChange?: (value: BitkitUIHeaderMode) => void;\n /** The chosen mode. Pass it with `onValueChange` to hold the state in the product. */\n value?: BitkitUIHeaderMode;\n}\n\n/**\n * The appearance menu — System, Light or Dark — behind a separator at the trailing end of the bar.\n * Unlike the header's other controls it owns the menu it opens, because the three options are the\n * same everywhere; applying the mode is still the consumer's.\n *\n * The button shows the mode in force rather than the one chosen, so `system` draws a sun or a moon\n * rather than a screen. It reads that from the `light` / `dark` class every Bitkit colour token\n * already keys on, so the icon can never disagree with what is around it.\n */\nconst UIHeaderModeSwitch = forwardRef<HTMLButtonElement, BitkitUIHeaderModeSwitchProps>((props, ref) => {\n const { css, defaultValue = 'light', label, onValueChange, value: valueProp, ...rest } = props;\n\n const { styles } = useUIHeaderContext();\n const { disablePortal } = usePortalContext();\n const [value, setValue] = useControllableState<BitkitUIHeaderMode>({\n defaultValue,\n onChange: onValueChange,\n value: valueProp,\n });\n\n const { icon: ModeIcon, label: modeLabel } = modes[value];\n const accessibleName = label ?? `Appearance: ${modeLabel}`;\n\n return (\n // `Menu.Root` renders no element, so this box is the root: it carries the separator and the part.\n <Box {...uiHeaderPart('mode-switch')} {...rest} css={[styles.modeSwitch, css]}>\n <Menu.Root\n lazyMount\n positioning={{ offset: { crossAxis: MENU_CROSS_OFFSET
|
|
1
|
+
{"version":3,"file":"UIHeaderModeSwitch.js","names":["_Fragment"],"sources":["../../../lib/components/BitkitUIHeader/UIHeaderModeSwitch.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useControllableState } from '@chakra-ui/react/hooks';\nimport { Menu } from '@chakra-ui/react/menu';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { forwardRef } from 'react';\n\nimport { type BitkitIconComponent, IconCheck, IconModeDark, IconModeLight, IconModeSystem } from '../../icons';\nimport { usePortalContext } from '../../utilities/BitkitPortalContext';\nimport { useUIHeaderContext } from './UIHeaderContext';\nimport { UIHeaderControlBase } from './UIHeaderControl';\nimport uiHeaderPart from './uiHeaderPart';\n\nexport type BitkitUIHeaderMode = 'dark' | 'light' | 'system';\n\nconst modes: Record<BitkitUIHeaderMode, { icon: BitkitIconComponent; label: string }> = {\n dark: { icon: IconModeDark, label: 'Dark' },\n light: { icon: IconModeLight, label: 'Light' },\n system: { icon: IconModeSystem, label: 'System' },\n};\n\nconst modeOrder = ['system', 'light', 'dark'] as const;\n\n// Lines the menu's check up with the trigger's icon: 1px content border + 24 row end padding +\n// half the 24 check − half the 48 button. Coupled to the menu row's end padding.\nconst MENU_CROSS_OFFSET = 13;\n\nexport interface BitkitUIHeaderModeSwitchProps extends Omit<BoxProps, 'children' | 'defaultValue' | 'onChange'> {\n /** The mode to start on when the switch is left uncontrolled. */\n defaultValue?: BitkitUIHeaderMode;\n /** The trigger's accessible name. It shows no text of its own. */\n label?: string;\n /** Fires with the mode picked from the menu. */\n onValueChange?: (value: BitkitUIHeaderMode) => void;\n /** The chosen mode. Pass it with `onValueChange` to hold the state in the product. */\n value?: BitkitUIHeaderMode;\n}\n\n/**\n * The appearance menu — System, Light or Dark — behind a separator at the trailing end of the bar.\n * Unlike the header's other controls it owns the menu it opens, because the three options are the\n * same everywhere; applying the mode is still the consumer's.\n *\n * The button shows the mode in force rather than the one chosen, so `system` draws a sun or a moon\n * rather than a screen. It reads that from the `light` / `dark` class every Bitkit colour token\n * already keys on, so the icon can never disagree with what is around it.\n */\nconst UIHeaderModeSwitch = forwardRef<HTMLButtonElement, BitkitUIHeaderModeSwitchProps>((props, ref) => {\n const { css, defaultValue = 'light', label, onValueChange, value: valueProp, ...rest } = props;\n\n const { styles } = useUIHeaderContext();\n const { disablePortal } = usePortalContext();\n const [value, setValue] = useControllableState<BitkitUIHeaderMode>({\n defaultValue,\n onChange: onValueChange,\n value: valueProp,\n });\n\n const { icon: ModeIcon, label: modeLabel } = modes[value];\n const accessibleName = label ?? `Appearance: ${modeLabel}`;\n\n return (\n // `Menu.Root` renders no element, so this box is the root: it carries the separator and the part.\n <Box {...uiHeaderPart('mode-switch')} {...rest} css={[styles.modeSwitch, css]}>\n <Menu.Root\n lazyMount\n positioning={{ offset: { crossAxis: MENU_CROSS_OFFSET }, placement: 'bottom-end' }}\n unmountOnExit\n >\n <Menu.Trigger asChild>\n <UIHeaderControlBase ref={ref} css={styles.modeControl} footprint=\"control\" label={accessibleName}>\n {value === 'system' ? (\n <>\n <IconModeLight _dark={{ display: 'none' }} />\n <IconModeDark _dark={{ display: 'block' }} display=\"none\" />\n </>\n ) : (\n <ModeIcon />\n )}\n </UIHeaderControlBase>\n </Menu.Trigger>\n <Portal disabled={disablePortal}>\n <Menu.Positioner>\n <Menu.Content>\n <Menu.RadioItemGroup\n onValueChange={(details) => setValue(details.value as BitkitUIHeaderMode)}\n value={value}\n >\n {modeOrder.map((mode) => {\n const { icon: Icon, label: itemLabel } = modes[mode];\n\n return (\n <Menu.RadioItem key={mode} value={mode}>\n <Icon />\n <Menu.ItemText>{itemLabel}</Menu.ItemText>\n <Menu.ItemIndicator asChild>\n <IconCheck />\n </Menu.ItemIndicator>\n </Menu.RadioItem>\n );\n })}\n </Menu.RadioItemGroup>\n </Menu.Content>\n </Menu.Positioner>\n </Portal>\n </Menu.Root>\n </Box>\n );\n});\n\nUIHeaderModeSwitch.displayName = 'BitkitUIHeader.ModeSwitch';\n\nexport default UIHeaderModeSwitch;\n"],"mappings":";;;;;;;;;;;;;;;AAcA,IAAM,QAAkF;CACtF,MAAM;EAAE,MAAM;EAAc,OAAO;CAAO;CAC1C,OAAO;EAAE,MAAM;EAAe,OAAO;CAAQ;CAC7C,QAAQ;EAAE,MAAM;EAAgB,OAAO;CAAS;AAClD;AAEA,IAAM,YAAY;CAAC;CAAU;CAAS;AAAM;AAI5C,IAAM,oBAAoB;;;;;;;;;;AAsB1B,IAAM,qBAAqB,YAA8D,OAAO,QAAQ;CACtG,MAAM,EAAE,KAAK,eAAe,SAAS,OAAO,eAAe,OAAO,WAAW,GAAG,SAAS;CAEzF,MAAM,EAAE,WAAW,mBAAmB;CACtC,MAAM,EAAE,kBAAkB,iBAAiB;CAC3C,MAAM,CAAC,OAAO,YAAY,qBAAyC;EACjE;EACA,UAAU;EACV,OAAO;CACT,CAAC;CAED,MAAM,EAAE,MAAM,UAAU,OAAO,cAAc,MAAM;CACnD,MAAM,iBAAiB,SAAS,eAAe;CAE/C,OAEE,oBAAC,KAAD;EAAK,GAAI,aAAa,aAAa;EAAG,GAAI;EAAM,KAAK,CAAC,OAAO,YAAY,GAAG;EAC1E,UAAA,qBAAC,KAAK,MAAN;GACE,WAAA;GACA,aAAa;IAAE,QAAQ,EAAE,WAAW,kBAAkB;IAAG,WAAW;GAAa;GACjF,eAAA;GAHF,UAAA,CAKE,oBAAC,KAAK,SAAN;IAAc,SAAA;IACZ,UAAA,oBAAC,qBAAD;KAA0B;KAAK,KAAK,OAAO;KAAa,WAAU;KAAU,OAAO;KAChF,UAAA,UAAU,WACT,qBAAAA,YAAA,EAAA,UAAA,CACE,oBAAC,eAAD,EAAe,OAAO,EAAE,SAAS,OAAO,EAAI,CAAA,GAC5C,oBAAC,cAAD;MAAc,OAAO,EAAE,SAAS,QAAQ;MAAG,SAAQ;KAAQ,CAAA,CAC3D,EAAA,CAAA,IAEF,oBAAC,UAAD,CAAW,CAAA;IAEM,CAAA;GACT,CAAA,GACd,oBAAC,QAAD;IAAQ,UAAU;IAChB,UAAA,oBAAC,KAAK,YAAN,EAAA,UACE,oBAAC,KAAK,SAAN,EAAA,UACE,oBAAC,KAAK,gBAAN;KACE,gBAAgB,YAAY,SAAS,QAAQ,KAA2B;KACjE;KAEN,UAAA,UAAU,KAAK,SAAS;MACvB,MAAM,EAAE,MAAM,MAAM,OAAO,cAAc,MAAM;MAE/C,OACE,qBAAC,KAAK,WAAN;OAA2B,OAAO;OAAlC,UAAA;QACE,oBAAC,MAAD,CAAO,CAAA;QACP,oBAAC,KAAK,UAAN,EAAA,UAAgB,UAAyB,CAAA;QACzC,oBAAC,KAAK,eAAN;SAAoB,SAAA;SAClB,UAAA,oBAAC,WAAD,CAAY,CAAA;QACM,CAAA;OACN;MANK,GAAA,IAML;KAEpB,CAAC;IACkB,CAAA,EACT,CAAA,EACC,CAAA;GACX,CAAA,CACC;;CACR,CAAA;AAET,CAAC;AAED,mBAAmB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Menu.recipe.ts"],"sourcesContent":["import { menuAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nconst itemActive: SystemStyleObject = {\n background: 'button/secondary/bg-active',\n _icon: {\n color: 'icon/primary',\n },\n};\nconst itemActiveDanger: SystemStyleObject = {\n background: 'button/danger-secondary/bg-active',\n color: 'button/danger-secondary/fg-active',\n _icon: {\n color: 'button/danger-secondary/fg-active',\n },\n};\nconst menuSlotRecipe = defineSlotRecipe({\n className: 'menu',\n slots: [...menuAnatomy.keys(), 'itemHelper'],\n variants: {\n size: {\n lg: {\n item: {\n alignItems: 'center',\n paddingY: '12',\n textStyle: 'body/lg/regular',\n // With a helper line the item aligns to the top of the label and gets tighter padding.\n '&[data-helper]': {\n alignItems: 'flex-start',\n paddingY: '8',\n },\n },\n },\n md: {\n item: {\n alignItems: 'center',\n // The label line (20px) alone is shorter than the designed 40px row.\n minHeight: '40',\n paddingY: '8',\n textStyle: 'body/md/regular',\n '&[data-helper]': {\n _icon: {\n // Optically center the 16px icon against the 20px label line.\n marginTop: '2',\n },\n alignItems: 'flex-start',\n paddingY: '6',\n },\n },\n },\n },\n },\n base: {\n content: {\n // Sit above the legacy v1 full-dialog/drawer layer (zIndex.fullDialog = 1200); the menu\n // portals out, so without this it renders behind a v1 FloatingDrawer. Matches the content-slot\n // z-index convention of the other floating recipes (Popover, Tooltip, Combobox/Select).\n zIndex: 'popover',\n borderRadius: '4',\n paddingY: '8',\n border: '1px solid',\n borderColor: 'border/minimal',\n _focusVisible: { outline: 'none' },\n boxShadow: 'elevation/lg',\n background: 'background/primary',\n maxHeight: 'var(--available-height)',\n // The cap is useless without these: the positioner sets --available-height from the viewport,\n // and a longer list then spills out of the content box instead of scrolling inside it.\n overflow: 'hidden',\n overflowY: 'auto',\n _open: {\n animationStyle: 'slide-fade-in',\n animationDuration: 'fast',\n },\n _closed: {\n animationStyle: 'slide-fade-out',\n animationDuration: 'faster',\n },\n },\n itemHelper: {\n textStyle: 'body/sm/regular',\n color: 'text/secondary',\n },\n item: {\n _icon: {\n color: 'icon/secondary',\n _active: {\n color: 'icon/primary',\n },\n },\n cursor: 'pointer',\n display: 'flex',\n gap: '12',\n userSelect: 'none',\n flexDirection: 'row',\n paddingLeft: '16',\n paddingRight: '24',\n '&[data-danger]': {\n color: 'button/danger-secondary/fg',\n _icon: {\n color: 'button/danger-secondary/fg',\n },\n _active: itemActiveDanger,\n _highlighted: {\n background: 'button/danger-secondary/bg-hover',\n color: 'button/danger-secondary/fg-hover',\n _active: itemActiveDanger,\n _icon: {\n color: 'button/danger-secondary/fg-hover',\n },\n },\n },\n _active: itemActive,\n _highlighted: {\n background: 'button/secondary/bg-hover',\n _active: itemActive,\n },\n // After the danger and highlight blocks: equally specific, so the later one wins for a disabled danger item.\n _disabled: {\n color: 'text/disabled',\n cursor: 'not-allowed',\n _icon: {\n color: 'icon/disabled',\n },\n _highlighted: {\n background: 'transparent',\n },\n },\n // The \"leaves this page\" arrow is quieter than the leading icon, and stays that way in every\n // state — including the destructive one, which overrides `_icon` above.\n '& [data-suffix-icon]': {\n color: 'icon/tertiary',\n },\n },\n itemIndicator: {\n alignItems: 'center',\n color: '
|
|
1
|
+
{"version":3,"file":"Menu.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Menu.recipe.ts"],"sourcesContent":["import { menuAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nconst itemActive: SystemStyleObject = {\n background: 'button/secondary/bg-active',\n _icon: {\n color: 'icon/primary',\n },\n};\nconst itemActiveDanger: SystemStyleObject = {\n background: 'button/danger-secondary/bg-active',\n color: 'button/danger-secondary/fg-active',\n _icon: {\n color: 'button/danger-secondary/fg-active',\n },\n};\nconst menuSlotRecipe = defineSlotRecipe({\n className: 'menu',\n slots: [...menuAnatomy.keys(), 'itemHelper'],\n variants: {\n size: {\n lg: {\n item: {\n alignItems: 'center',\n paddingY: '12',\n textStyle: 'body/lg/regular',\n // With a helper line the item aligns to the top of the label and gets tighter padding.\n '&[data-helper]': {\n alignItems: 'flex-start',\n paddingY: '8',\n },\n },\n },\n md: {\n item: {\n alignItems: 'center',\n // The label line (20px) alone is shorter than the designed 40px row.\n minHeight: '40',\n paddingY: '8',\n textStyle: 'body/md/regular',\n '&[data-helper]': {\n _icon: {\n // Optically center the 16px icon against the 20px label line.\n marginTop: '2',\n },\n alignItems: 'flex-start',\n paddingY: '6',\n },\n },\n },\n },\n },\n base: {\n content: {\n // Sit above the legacy v1 full-dialog/drawer layer (zIndex.fullDialog = 1200); the menu\n // portals out, so without this it renders behind a v1 FloatingDrawer. Matches the content-slot\n // z-index convention of the other floating recipes (Popover, Tooltip, Combobox/Select).\n zIndex: 'popover',\n borderRadius: '4',\n paddingY: '8',\n border: '1px solid',\n borderColor: 'border/minimal',\n _focusVisible: { outline: 'none' },\n boxShadow: 'elevation/lg',\n background: 'background/primary',\n maxHeight: 'var(--available-height)',\n // The cap is useless without these: the positioner sets --available-height from the viewport,\n // and a longer list then spills out of the content box instead of scrolling inside it.\n overflow: 'hidden',\n overflowY: 'auto',\n _open: {\n animationStyle: 'slide-fade-in',\n animationDuration: 'fast',\n },\n _closed: {\n animationStyle: 'slide-fade-out',\n animationDuration: 'faster',\n },\n },\n itemHelper: {\n textStyle: 'body/sm/regular',\n color: 'text/secondary',\n },\n item: {\n _icon: {\n color: 'icon/secondary',\n _active: {\n color: 'icon/primary',\n },\n },\n cursor: 'pointer',\n display: 'flex',\n gap: '12',\n userSelect: 'none',\n flexDirection: 'row',\n paddingLeft: '16',\n paddingRight: '24',\n '&[data-danger]': {\n color: 'button/danger-secondary/fg',\n _icon: {\n color: 'button/danger-secondary/fg',\n },\n _active: itemActiveDanger,\n _highlighted: {\n background: 'button/danger-secondary/bg-hover',\n color: 'button/danger-secondary/fg-hover',\n _active: itemActiveDanger,\n _icon: {\n color: 'button/danger-secondary/fg-hover',\n },\n },\n },\n _active: itemActive,\n _highlighted: {\n background: 'button/secondary/bg-hover',\n _active: itemActive,\n },\n // After the danger and highlight blocks: equally specific, so the later one wins for a disabled danger item.\n _disabled: {\n color: 'text/disabled',\n cursor: 'not-allowed',\n _icon: {\n color: 'icon/disabled',\n },\n _highlighted: {\n background: 'transparent',\n },\n },\n // The \"leaves this page\" arrow is quieter than the leading icon, and stays that way in every\n // state — including the destructive one, which overrides `_icon` above.\n '& [data-suffix-icon]': {\n color: 'icon/tertiary',\n },\n },\n itemIndicator: {\n alignItems: 'center',\n color: 'interactive/bold',\n display: 'flex',\n justifyContent: 'center',\n marginInlineStart: 'auto',\n },\n itemGroupLabel: {\n // The rule after the label is a Chakra Separator, whose recipe base is `border/regular` — a\n // shade darker than the menu's own separator. Match `BitkitActionMenu.Separator`.\n '& .separator': {\n borderColor: 'border/minimal',\n },\n textStyle: 'heading/h6',\n color: 'text/tertiary',\n paddingTop: '12',\n paddingLeft: '16',\n paddingRight: '16',\n paddingBottom: '6',\n display: 'flex',\n gap: '8',\n flexDirection: 'row',\n alignItems: 'center',\n },\n separator: {\n color: 'border/minimal',\n marginY: '8',\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n});\n\nexport default menuSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,aAAgC;CACpC,YAAY;CACZ,OAAO,EACL,OAAO,eACT;AACF;AACA,IAAM,mBAAsC;CAC1C,YAAY;CACZ,OAAO;CACP,OAAO,EACL,OAAO,oCACT;AACF;AACA,IAAM,iBAAiB,iBAAiB;CACtC,WAAW;CACX,OAAO,CAAC,GAAG,YAAY,KAAK,GAAG,YAAY;CAC3C,UAAU,EACR,MAAM;EACJ,IAAI,EACF,MAAM;GACJ,YAAY;GACZ,UAAU;GACV,WAAW;GAEX,kBAAkB;IAChB,YAAY;IACZ,UAAU;GACZ;EACF,EACF;EACA,IAAI,EACF,MAAM;GACJ,YAAY;GAEZ,WAAW;GACX,UAAU;GACV,WAAW;GACX,kBAAkB;IAChB,OAAO,EAEL,WAAW,IACb;IACA,YAAY;IACZ,UAAU;GACZ;EACF,EACF;CACF,EACF;CACA,MAAM;EACJ,SAAS;GAIP,QAAQ;GACR,cAAc;GACd,UAAU;GACV,QAAQ;GACR,aAAa;GACb,eAAe,EAAE,SAAS,OAAO;GACjC,WAAW;GACX,YAAY;GACZ,WAAW;GAGX,UAAU;GACV,WAAW;GACX,OAAO;IACL,gBAAgB;IAChB,mBAAmB;GACrB;GACA,SAAS;IACP,gBAAgB;IAChB,mBAAmB;GACrB;EACF;EACA,YAAY;GACV,WAAW;GACX,OAAO;EACT;EACA,MAAM;GACJ,OAAO;IACL,OAAO;IACP,SAAS,EACP,OAAO,eACT;GACF;GACA,QAAQ;GACR,SAAS;GACT,KAAK;GACL,YAAY;GACZ,eAAe;GACf,aAAa;GACb,cAAc;GACd,kBAAkB;IAChB,OAAO;IACP,OAAO,EACL,OAAO,6BACT;IACA,SAAS;IACT,cAAc;KACZ,YAAY;KACZ,OAAO;KACP,SAAS;KACT,OAAO,EACL,OAAO,mCACT;IACF;GACF;GACA,SAAS;GACT,cAAc;IACZ,YAAY;IACZ,SAAS;GACX;GAEA,WAAW;IACT,OAAO;IACP,QAAQ;IACR,OAAO,EACL,OAAO,gBACT;IACA,cAAc,EACZ,YAAY,cACd;GACF;GAGA,wBAAwB,EACtB,OAAO,gBACT;EACF;EACA,eAAe;GACb,YAAY;GACZ,OAAO;GACP,SAAS;GACT,gBAAgB;GAChB,mBAAmB;EACrB;EACA,gBAAgB;GAGd,gBAAgB,EACd,aAAa,iBACf;GACA,WAAW;GACX,OAAO;GACP,YAAY;GACZ,aAAa;GACb,cAAc;GACd,eAAe;GACf,SAAS;GACT,KAAK;GACL,eAAe;GACf,YAAY;EACd;EACA,WAAW;GACT,OAAO;GACP,SAAS;EACX;CACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
|
|
@@ -145,7 +145,10 @@ var uiHeaderSlotRecipe = defineSlotRecipe({
|
|
|
145
145
|
width: "1"
|
|
146
146
|
}
|
|
147
147
|
},
|
|
148
|
-
modeControl: { _open: {
|
|
148
|
+
modeControl: { _open: {
|
|
149
|
+
background: "sys/ui/header/control/bg-active",
|
|
150
|
+
_hover: { background: "sys/ui/header/control/bg-active" }
|
|
151
|
+
} },
|
|
149
152
|
navButton: {
|
|
150
153
|
...controlBase,
|
|
151
154
|
paddingBlock: "8",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UIHeader.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/UIHeader.recipe.ts"],"sourcesContent":["import { defineSlotRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nimport { colorVar, rem } from '../themeUtils';\n\n/** `uiHeaderHeight` as a number, for a layout that needs one rather than a token. */\nexport const uiHeaderHeightPx = 48;\n\n/**\n * The height of the header's bar. A page that pins the header reserves this much room for it, and\n * anything anchored under the header starts here: a drawer's backdrop and positioner, a side\n * navigation's `insetBlockStart`.\n *\n * It is the bar alone. A `banner` sits below it inside the header, and its height is the\n * consumer's content, so a pinned header carrying one is taller than this — measure it rather than\n * assume it.\n */\nexport const uiHeaderHeight = rem(uiHeaderHeightPx);\n\nconst SEARCH_FIELD_WIDTH = rem(240);\n\nconst SEARCH_FIELD_TINT = colorVar('color/white/20');\n\nconst controlStates: SystemStyleObject = {\n background: 'sys/ui/header/control/bg',\n _hover: {\n background: 'sys/ui/header/control/bg-hover',\n _active: {\n background: 'sys/ui/header/control/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/header/control/bg-active',\n },\n _selected: {\n background: 'sys/ui/header/control/bg-selected',\n _hover: {\n background: 'sys/ui/header/control/bg-selected-hover',\n _active: {\n background: 'sys/ui/header/control/bg-selected',\n },\n },\n _active: {\n background: 'sys/ui/header/control/bg-selected',\n },\n },\n};\n\nconst controlBase: SystemStyleObject = {\n ...controlStates,\n alignItems: 'center',\n borderRadius: 0,\n color: 'icon/on-color',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n height: uiHeaderHeight,\n justifyContent: 'center',\n position: 'relative',\n textDecoration: 'none',\n _focusVisible: {\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n};\n\nconst uiHeaderSlotRecipe = defineSlotRecipe({\n className: 'ui-header',\n slots: [\n 'accountAvatar',\n 'accountIcon',\n 'actions',\n 'badge',\n 'banner',\n 'bar',\n 'control',\n 'indicator',\n 'leading',\n 'logoBlock',\n 'logoLink',\n 'modeControl',\n 'modeSwitch',\n 'navButton',\n 'navButtonBadge',\n 'navButtonIcon',\n 'root',\n 'search',\n 'searchButton',\n 'searchClear',\n 'searchField',\n 'searchIcon',\n 'searchInput',\n 'spacer',\n ],\n base: {\n root: {\n background: 'sys/ui/header/bg',\n color: 'text/on-color',\n display: 'flex',\n flexDirection: 'column',\n width: 'full',\n },\n bar: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n height: uiHeaderHeight,\n position: 'relative',\n tablet: {\n paddingInlineStart: '20',\n },\n },\n leading: {\n display: 'flex',\n flexShrink: 0,\n tablet: {\n display: 'none',\n },\n },\n spacer: {\n flexShrink: 1,\n width: '48',\n tablet: {\n display: 'none',\n },\n },\n logoBlock: {\n alignItems: 'center',\n display: 'flex',\n flex: 1,\n justifyContent: 'center',\n minWidth: 0,\n tablet: {\n flex: 'none',\n },\n },\n logoLink: {\n borderRadius: '4',\n color: 'text/on-color',\n display: 'flex',\n marginBlockEnd: rem(3),\n },\n actions: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n marginInlineStart: 'auto',\n tablet: {\n paddingInlineEnd: '32',\n },\n },\n banner: {\n width: 'full',\n },\n control: {\n ...controlBase,\n width: '48',\n },\n accountAvatar: {\n borderRadius: 'full',\n display: 'none',\n overflow: 'hidden',\n tablet: {\n display: 'inline-flex',\n },\n },\n accountIcon: {\n display: 'block',\n tablet: {\n display: 'none',\n },\n },\n modeSwitch: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n _before: {\n background: 'sys/ui/header/separator',\n content: '\"\"',\n height: '20',\n marginInlineEnd: '8',\n marginInlineStart: '12',\n width: '1',\n },\n },\n modeControl: {\n _open: {\n background: 'sys/ui/header/control/bg-active',\n },\n },\n navButton: {\n ...controlBase,\n paddingBlock: '8',\n paddingInlineEnd: '8',\n paddingInlineStart: '12',\n },\n navButtonBadge: {\n alignItems: 'flex-start',\n background: 'sys/ui/header/bg',\n borderStartStartRadius: '2',\n color: 'icon/on-color',\n display: 'flex',\n height: '12',\n insetBlockEnd: '8',\n insetInlineEnd: '8',\n overflow: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n width: '16',\n },\n navButtonIcon: {\n flexShrink: 0,\n marginBlockStart: rem(-1),\n marginInlineStart: '1',\n },\n badge: {\n background: 'sys/ui/header/badge/red',\n borderRadius: 'full',\n height: '8',\n insetBlockStart: '12',\n insetInlineStart: rem(28),\n pointerEvents: 'none',\n position: 'absolute',\n width: '8',\n '&[data-pulse]': {\n _after: {\n animation: 'ping',\n background: 'sys/ui/header/badge/red',\n borderRadius: 'full',\n content: '\"\"',\n inset: 0,\n opacity: 0.5,\n position: 'absolute',\n _motionReduce: {\n animation: 'none',\n },\n },\n },\n },\n indicator: {\n background: 'sys/ui/header/control/indicator',\n height: '4',\n insetBlockEnd: 0,\n insetInline: 0,\n pointerEvents: 'none',\n position: 'absolute',\n },\n search: {\n display: 'flex',\n flexShrink: 0,\n position: 'relative',\n },\n searchField: {\n alignItems: 'center',\n backgroundColor: 'sys/ui/header/bg',\n backgroundImage: `linear-gradient(0deg, ${SEARCH_FIELD_TINT} 0%, ${SEARCH_FIELD_TINT} 100%)`,\n borderColor: 'border/strong',\n borderRadius: '4',\n borderStyle: 'solid',\n borderWidth: '1',\n display: 'none',\n gap: '8',\n height: '40',\n insetBlockStart: '4',\n insetInlineEnd: 0,\n opacity: 0,\n paddingInlineEnd: '12',\n paddingInlineStart: '8',\n position: 'absolute',\n transitionDuration: 'fast',\n // `visibility` is what takes the closed field out of hit-testing, the tab order and the\n // accessibility tree in one go. Transitioning it keeps the field visible for the whole fade\n // and flips it at the end, which `opacity` alone could not do.\n transitionProperty: 'opacity, visibility',\n transitionTimingFunction: 'ease-out',\n visibility: 'hidden',\n width: SEARCH_FIELD_WIDTH,\n '&:has(input:focus-visible)': {\n boxShadow: '0 0 0 var(--focus-ring-width) var(--focus-ring-color) inset',\n },\n _open: {\n opacity: 1,\n visibility: 'visible',\n },\n _motionReduce: {\n transitionProperty: 'none',\n },\n tablet: {\n display: 'flex',\n },\n },\n searchButton: {\n tablet: {\n _open: {\n visibility: 'hidden',\n },\n },\n },\n searchClear: {\n color: 'icon/on-color',\n flexShrink: 0,\n },\n searchIcon: {\n color: 'icon/on-color',\n flexShrink: 0,\n },\n searchInput: {\n background: 'transparent',\n borderWidth: 0,\n color: 'text/on-color',\n flex: 1,\n minWidth: 0,\n padding: 0,\n textStyle: 'body/lg/regular',\n '&::-webkit-search-cancel-button': { display: 'none' },\n _focusVisible: {\n outline: 'none',\n outlineWidth: 0,\n },\n _placeholder: {\n color: 'text/on-color',\n opacity: 0.6,\n },\n },\n },\n});\n\nexport default uiHeaderSlotRecipe;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"UIHeader.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/UIHeader.recipe.ts"],"sourcesContent":["import { defineSlotRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nimport { colorVar, rem } from '../themeUtils';\n\n/** `uiHeaderHeight` as a number, for a layout that needs one rather than a token. */\nexport const uiHeaderHeightPx = 48;\n\n/**\n * The height of the header's bar. A page that pins the header reserves this much room for it, and\n * anything anchored under the header starts here: a drawer's backdrop and positioner, a side\n * navigation's `insetBlockStart`.\n *\n * It is the bar alone. A `banner` sits below it inside the header, and its height is the\n * consumer's content, so a pinned header carrying one is taller than this — measure it rather than\n * assume it.\n */\nexport const uiHeaderHeight = rem(uiHeaderHeightPx);\n\nconst SEARCH_FIELD_WIDTH = rem(240);\n\nconst SEARCH_FIELD_TINT = colorVar('color/white/20');\n\nconst controlStates: SystemStyleObject = {\n background: 'sys/ui/header/control/bg',\n _hover: {\n background: 'sys/ui/header/control/bg-hover',\n _active: {\n background: 'sys/ui/header/control/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/header/control/bg-active',\n },\n _selected: {\n background: 'sys/ui/header/control/bg-selected',\n _hover: {\n background: 'sys/ui/header/control/bg-selected-hover',\n _active: {\n background: 'sys/ui/header/control/bg-selected',\n },\n },\n _active: {\n background: 'sys/ui/header/control/bg-selected',\n },\n },\n};\n\nconst controlBase: SystemStyleObject = {\n ...controlStates,\n alignItems: 'center',\n borderRadius: 0,\n color: 'icon/on-color',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n height: uiHeaderHeight,\n justifyContent: 'center',\n position: 'relative',\n textDecoration: 'none',\n _focusVisible: {\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n};\n\nconst uiHeaderSlotRecipe = defineSlotRecipe({\n className: 'ui-header',\n slots: [\n 'accountAvatar',\n 'accountIcon',\n 'actions',\n 'badge',\n 'banner',\n 'bar',\n 'control',\n 'indicator',\n 'leading',\n 'logoBlock',\n 'logoLink',\n 'modeControl',\n 'modeSwitch',\n 'navButton',\n 'navButtonBadge',\n 'navButtonIcon',\n 'root',\n 'search',\n 'searchButton',\n 'searchClear',\n 'searchField',\n 'searchIcon',\n 'searchInput',\n 'spacer',\n ],\n base: {\n root: {\n background: 'sys/ui/header/bg',\n color: 'text/on-color',\n display: 'flex',\n flexDirection: 'column',\n width: 'full',\n },\n bar: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n height: uiHeaderHeight,\n position: 'relative',\n tablet: {\n paddingInlineStart: '20',\n },\n },\n leading: {\n display: 'flex',\n flexShrink: 0,\n tablet: {\n display: 'none',\n },\n },\n spacer: {\n flexShrink: 1,\n width: '48',\n tablet: {\n display: 'none',\n },\n },\n logoBlock: {\n alignItems: 'center',\n display: 'flex',\n flex: 1,\n justifyContent: 'center',\n minWidth: 0,\n tablet: {\n flex: 'none',\n },\n },\n logoLink: {\n borderRadius: '4',\n color: 'text/on-color',\n display: 'flex',\n marginBlockEnd: rem(3),\n },\n actions: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n marginInlineStart: 'auto',\n tablet: {\n paddingInlineEnd: '32',\n },\n },\n banner: {\n width: 'full',\n },\n control: {\n ...controlBase,\n width: '48',\n },\n accountAvatar: {\n borderRadius: 'full',\n display: 'none',\n overflow: 'hidden',\n tablet: {\n display: 'inline-flex',\n },\n },\n accountIcon: {\n display: 'block',\n tablet: {\n display: 'none',\n },\n },\n modeSwitch: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n _before: {\n background: 'sys/ui/header/separator',\n content: '\"\"',\n height: '20',\n marginInlineEnd: '8',\n marginInlineStart: '12',\n width: '1',\n },\n },\n modeControl: {\n _open: {\n background: 'sys/ui/header/control/bg-active',\n _hover: {\n background: 'sys/ui/header/control/bg-active',\n },\n },\n },\n navButton: {\n ...controlBase,\n paddingBlock: '8',\n paddingInlineEnd: '8',\n paddingInlineStart: '12',\n },\n navButtonBadge: {\n alignItems: 'flex-start',\n background: 'sys/ui/header/bg',\n borderStartStartRadius: '2',\n color: 'icon/on-color',\n display: 'flex',\n height: '12',\n insetBlockEnd: '8',\n insetInlineEnd: '8',\n overflow: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n width: '16',\n },\n navButtonIcon: {\n flexShrink: 0,\n marginBlockStart: rem(-1),\n marginInlineStart: '1',\n },\n badge: {\n background: 'sys/ui/header/badge/red',\n borderRadius: 'full',\n height: '8',\n insetBlockStart: '12',\n insetInlineStart: rem(28),\n pointerEvents: 'none',\n position: 'absolute',\n width: '8',\n '&[data-pulse]': {\n _after: {\n animation: 'ping',\n background: 'sys/ui/header/badge/red',\n borderRadius: 'full',\n content: '\"\"',\n inset: 0,\n opacity: 0.5,\n position: 'absolute',\n _motionReduce: {\n animation: 'none',\n },\n },\n },\n },\n indicator: {\n background: 'sys/ui/header/control/indicator',\n height: '4',\n insetBlockEnd: 0,\n insetInline: 0,\n pointerEvents: 'none',\n position: 'absolute',\n },\n search: {\n display: 'flex',\n flexShrink: 0,\n position: 'relative',\n },\n searchField: {\n alignItems: 'center',\n backgroundColor: 'sys/ui/header/bg',\n backgroundImage: `linear-gradient(0deg, ${SEARCH_FIELD_TINT} 0%, ${SEARCH_FIELD_TINT} 100%)`,\n borderColor: 'border/strong',\n borderRadius: '4',\n borderStyle: 'solid',\n borderWidth: '1',\n display: 'none',\n gap: '8',\n height: '40',\n insetBlockStart: '4',\n insetInlineEnd: 0,\n opacity: 0,\n paddingInlineEnd: '12',\n paddingInlineStart: '8',\n position: 'absolute',\n transitionDuration: 'fast',\n // `visibility` is what takes the closed field out of hit-testing, the tab order and the\n // accessibility tree in one go. Transitioning it keeps the field visible for the whole fade\n // and flips it at the end, which `opacity` alone could not do.\n transitionProperty: 'opacity, visibility',\n transitionTimingFunction: 'ease-out',\n visibility: 'hidden',\n width: SEARCH_FIELD_WIDTH,\n '&:has(input:focus-visible)': {\n boxShadow: '0 0 0 var(--focus-ring-width) var(--focus-ring-color) inset',\n },\n _open: {\n opacity: 1,\n visibility: 'visible',\n },\n _motionReduce: {\n transitionProperty: 'none',\n },\n tablet: {\n display: 'flex',\n },\n },\n searchButton: {\n tablet: {\n _open: {\n visibility: 'hidden',\n },\n },\n },\n searchClear: {\n color: 'icon/on-color',\n flexShrink: 0,\n },\n searchIcon: {\n color: 'icon/on-color',\n flexShrink: 0,\n },\n searchInput: {\n background: 'transparent',\n borderWidth: 0,\n color: 'text/on-color',\n flex: 1,\n minWidth: 0,\n padding: 0,\n textStyle: 'body/lg/regular',\n '&::-webkit-search-cancel-button': { display: 'none' },\n _focusVisible: {\n outline: 'none',\n outlineWidth: 0,\n },\n _placeholder: {\n color: 'text/on-color',\n opacity: 0.6,\n },\n },\n },\n});\n\nexport default uiHeaderSlotRecipe;\n"],"mappings":";;;;AAKA,IAAa,mBAAmB;;;;;;;;;;AAWhC,IAAa,iBAAiB,IAAA,EAAoB;AAElD,IAAM,qBAAqB,IAAI,GAAG;AAElC,IAAM,oBAAoB,SAAS,gBAAgB;AA2BnD,IAAM,cAAiC;CAxBrC,YAAY;CACZ,QAAQ;EACN,YAAY;EACZ,SAAS,EACP,YAAY,kCACd;CACF;CACA,SAAS,EACP,YAAY,kCACd;CACA,WAAW;EACT,YAAY;EACZ,QAAQ;GACN,YAAY;GACZ,SAAS,EACP,YAAY,oCACd;EACF;EACA,SAAS,EACP,YAAY,oCACd;CACF;CAKA,YAAY;CACZ,cAAc;CACd,OAAO;CACP,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,QAAQ;CACR,gBAAgB;CAChB,UAAU;CACV,gBAAgB;CAChB,eAAe,EACb,eAAe,qCACjB;AACF;AAEA,IAAM,qBAAqB,iBAAiB;CAC1C,WAAW;CACX,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,OAAO;GACP,SAAS;GACT,eAAe;GACf,OAAO;EACT;EACA,KAAK;GACH,YAAY;GACZ,SAAS;GACT,YAAY;GACZ,QAAQ;GACR,UAAU;GACV,QAAQ,EACN,oBAAoB,KACtB;EACF;EACA,SAAS;GACP,SAAS;GACT,YAAY;GACZ,QAAQ,EACN,SAAS,OACX;EACF;EACA,QAAQ;GACN,YAAY;GACZ,OAAO;GACP,QAAQ,EACN,SAAS,OACX;EACF;EACA,WAAW;GACT,YAAY;GACZ,SAAS;GACT,MAAM;GACN,gBAAgB;GAChB,UAAU;GACV,QAAQ,EACN,MAAM,OACR;EACF;EACA,UAAU;GACR,cAAc;GACd,OAAO;GACP,SAAS;GACT,gBAAgB,IAAI,CAAC;EACvB;EACA,SAAS;GACP,YAAY;GACZ,SAAS;GACT,YAAY;GACZ,mBAAmB;GACnB,QAAQ,EACN,kBAAkB,KACpB;EACF;EACA,QAAQ,EACN,OAAO,OACT;EACA,SAAS;GACP,GAAG;GACH,OAAO;EACT;EACA,eAAe;GACb,cAAc;GACd,SAAS;GACT,UAAU;GACV,QAAQ,EACN,SAAS,cACX;EACF;EACA,aAAa;GACX,SAAS;GACT,QAAQ,EACN,SAAS,OACX;EACF;EACA,YAAY;GACV,YAAY;GACZ,SAAS;GACT,YAAY;GACZ,SAAS;IACP,YAAY;IACZ,SAAS;IACT,QAAQ;IACR,iBAAiB;IACjB,mBAAmB;IACnB,OAAO;GACT;EACF;EACA,aAAa,EACX,OAAO;GACL,YAAY;GACZ,QAAQ,EACN,YAAY,kCACd;EACF,EACF;EACA,WAAW;GACT,GAAG;GACH,cAAc;GACd,kBAAkB;GAClB,oBAAoB;EACtB;EACA,gBAAgB;GACd,YAAY;GACZ,YAAY;GACZ,wBAAwB;GACxB,OAAO;GACP,SAAS;GACT,QAAQ;GACR,eAAe;GACf,gBAAgB;GAChB,UAAU;GACV,eAAe;GACf,UAAU;GACV,OAAO;EACT;EACA,eAAe;GACb,YAAY;GACZ,kBAAkB,IAAI,EAAE;GACxB,mBAAmB;EACrB;EACA,OAAO;GACL,YAAY;GACZ,cAAc;GACd,QAAQ;GACR,iBAAiB;GACjB,kBAAkB,IAAI,EAAE;GACxB,eAAe;GACf,UAAU;GACV,OAAO;GACP,iBAAiB,EACf,QAAQ;IACN,WAAW;IACX,YAAY;IACZ,cAAc;IACd,SAAS;IACT,OAAO;IACP,SAAS;IACT,UAAU;IACV,eAAe,EACb,WAAW,OACb;GACF,EACF;EACF;EACA,WAAW;GACT,YAAY;GACZ,QAAQ;GACR,eAAe;GACf,aAAa;GACb,eAAe;GACf,UAAU;EACZ;EACA,QAAQ;GACN,SAAS;GACT,YAAY;GACZ,UAAU;EACZ;EACA,aAAa;GACX,YAAY;GACZ,iBAAiB;GACjB,iBAAiB,yBAAyB,kBAAkB,OAAO,kBAAkB;GACrF,aAAa;GACb,cAAc;GACd,aAAa;GACb,aAAa;GACb,SAAS;GACT,KAAK;GACL,QAAQ;GACR,iBAAiB;GACjB,gBAAgB;GAChB,SAAS;GACT,kBAAkB;GAClB,oBAAoB;GACpB,UAAU;GACV,oBAAoB;GAIpB,oBAAoB;GACpB,0BAA0B;GAC1B,YAAY;GACZ,OAAO;GACP,8BAA8B,EAC5B,WAAW,8DACb;GACA,OAAO;IACL,SAAS;IACT,YAAY;GACd;GACA,eAAe,EACb,oBAAoB,OACtB;GACA,QAAQ,EACN,SAAS,OACX;EACF;EACA,cAAc,EACZ,QAAQ,EACN,OAAO,EACL,YAAY,SACd,EACF,EACF;EACA,aAAa;GACX,OAAO;GACP,YAAY;EACd;EACA,YAAY;GACV,OAAO;GACP,YAAY;EACd;EACA,aAAa;GACX,YAAY;GACZ,aAAa;GACb,OAAO;GACP,MAAM;GACN,UAAU;GACV,SAAS;GACT,WAAW;GACX,mCAAmC,EAAE,SAAS,OAAO;GACrD,eAAe;IACb,SAAS;IACT,cAAc;GAChB;GACA,cAAc;IACZ,OAAO;IACP,SAAS;GACX;EACF;CACF;AACF,CAAC"}
|