@razorpay/blade 12.25.2 → 12.27.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/lib/native/components/Checkbox/CheckboxGroup/CheckboxGroup.js +1 -2
- package/build/lib/native/components/Checkbox/CheckboxGroup/CheckboxGroup.js.map +1 -1
- package/build/lib/native/components/Checkbox/checkboxTokens.js +1 -1
- package/build/lib/native/components/Checkbox/checkboxTokens.js.map +1 -1
- package/build/lib/native/components/Input/BaseInput/useTaggedInput.js +1 -1
- package/build/lib/native/components/Input/BaseInput/useTaggedInput.js.map +1 -1
- package/build/lib/native/components/Radio/RadioGroup/RadioGroup.js +1 -2
- package/build/lib/native/components/Radio/RadioGroup/RadioGroup.js.map +1 -1
- package/build/lib/native/components/Radio/radioTokens.js +1 -1
- package/build/lib/native/components/Radio/radioTokens.js.map +1 -1
- package/build/lib/native/components/StepGroup/StepItemMarker.js +1 -1
- package/build/lib/native/components/StepGroup/StepItemMarker.js.map +1 -1
- package/build/lib/native/tokens/theme/createTheme.js +1 -1
- package/build/lib/native/tokens/theme/createTheme.js.map +1 -1
- package/build/lib/web/development/components/Checkbox/CheckboxGroup/CheckboxGroup.js +5 -6
- package/build/lib/web/development/components/Checkbox/CheckboxGroup/CheckboxGroup.js.map +1 -1
- package/build/lib/web/development/components/Checkbox/checkboxTokens.js +4 -4
- package/build/lib/web/development/components/Checkbox/checkboxTokens.js.map +1 -1
- package/build/lib/web/development/components/Input/BaseInput/useTaggedInput.js +8 -32
- package/build/lib/web/development/components/Input/BaseInput/useTaggedInput.js.map +1 -1
- package/build/lib/web/development/components/Radio/RadioGroup/RadioGroup.js +5 -6
- package/build/lib/web/development/components/Radio/RadioGroup/RadioGroup.js.map +1 -1
- package/build/lib/web/development/components/Radio/radioTokens.js +3 -3
- package/build/lib/web/development/components/Radio/radioTokens.js.map +1 -1
- package/build/lib/web/development/components/StepGroup/StepItem.web.js +9 -5
- package/build/lib/web/development/components/StepGroup/StepItem.web.js.map +1 -1
- package/build/lib/web/development/components/StepGroup/StepItemMarker.js +4 -2
- package/build/lib/web/development/components/StepGroup/StepItemMarker.js.map +1 -1
- package/build/lib/web/development/components/StepGroup/StepLine.web.js +2 -10
- package/build/lib/web/development/components/StepGroup/StepLine.web.js.map +1 -1
- package/build/lib/web/development/tokens/theme/createTheme.js +4 -4
- package/build/lib/web/development/tokens/theme/createTheme.js.map +1 -1
- package/build/lib/web/production/components/Checkbox/CheckboxGroup/CheckboxGroup.js +5 -6
- package/build/lib/web/production/components/Checkbox/CheckboxGroup/CheckboxGroup.js.map +1 -1
- package/build/lib/web/production/components/Checkbox/checkboxTokens.js +4 -4
- package/build/lib/web/production/components/Checkbox/checkboxTokens.js.map +1 -1
- package/build/lib/web/production/components/Input/BaseInput/useTaggedInput.js +8 -32
- package/build/lib/web/production/components/Input/BaseInput/useTaggedInput.js.map +1 -1
- package/build/lib/web/production/components/Radio/RadioGroup/RadioGroup.js +5 -6
- package/build/lib/web/production/components/Radio/RadioGroup/RadioGroup.js.map +1 -1
- package/build/lib/web/production/components/Radio/radioTokens.js +3 -3
- package/build/lib/web/production/components/Radio/radioTokens.js.map +1 -1
- package/build/lib/web/production/components/StepGroup/StepItem.web.js +9 -5
- package/build/lib/web/production/components/StepGroup/StepItem.web.js.map +1 -1
- package/build/lib/web/production/components/StepGroup/StepItemMarker.js +4 -2
- package/build/lib/web/production/components/StepGroup/StepItemMarker.js.map +1 -1
- package/build/lib/web/production/components/StepGroup/StepLine.web.js +2 -10
- package/build/lib/web/production/components/StepGroup/StepLine.web.js.map +1 -1
- package/build/lib/web/production/tokens/theme/createTheme.js +4 -4
- package/build/lib/web/production/tokens/theme/createTheme.js.map +1 -1
- package/build/types/components/index.d.ts +16 -3
- package/build/types/components/index.native.d.ts +16 -3
- package/package.json +1 -1
|
@@ -240,11 +240,7 @@ var StepLineStart = function StepLineStart(_ref7) {
|
|
|
240
240
|
position: "relative",
|
|
241
241
|
display: "flex",
|
|
242
242
|
flexDirection: "column",
|
|
243
|
-
children: [/*#__PURE__*/jsx(
|
|
244
|
-
height: itemTopMargin,
|
|
245
|
-
visibility: shouldShowStartBranch ? 'visible' : 'hidden',
|
|
246
|
-
isDotted: stepProgress === 'none' || stepProgress === 'end'
|
|
247
|
-
}), /*#__PURE__*/jsx(StepTopCurveVertical, {
|
|
243
|
+
children: [/*#__PURE__*/jsx(StepTopCurveVertical, {
|
|
248
244
|
visibility: shouldShowStartBranch ? 'visible' : 'hidden',
|
|
249
245
|
isDotted: stepProgress === 'none' || stepProgress === 'end'
|
|
250
246
|
}), /*#__PURE__*/jsx(Box, {
|
|
@@ -326,11 +322,7 @@ var StepLineSingleItem = function StepLineSingleItem(_ref10) {
|
|
|
326
322
|
position: "relative",
|
|
327
323
|
display: "flex",
|
|
328
324
|
flexDirection: "column",
|
|
329
|
-
children: [/*#__PURE__*/jsx(
|
|
330
|
-
visibility: shouldShowStartBranch ? 'visible' : 'hidden',
|
|
331
|
-
height: itemTopMargin,
|
|
332
|
-
isDotted: stepProgress === 'none' || stepProgress === 'end'
|
|
333
|
-
}), /*#__PURE__*/jsx(StepTopCurveVertical, {
|
|
325
|
+
children: [/*#__PURE__*/jsx(StepTopCurveVertical, {
|
|
334
326
|
visibility: shouldShowStartBranch ? 'visible' : 'hidden',
|
|
335
327
|
isDotted: stepProgress === 'none' || stepProgress === 'end'
|
|
336
328
|
}), /*#__PURE__*/jsx(Box
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepLine.web.js","sources":["../../../../../../src/components/StepGroup/StepLine.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/restrict-plus-operands */\nimport type { StepItemProps } from './types';\nimport { StepItemIndicator } from './StepItemMarker';\nimport { useStepGroup } from './StepGroupContext';\nimport {\n getMarkerLineSpacings,\n itemTopMargin,\n markerLineDotSpacing,\n markerLineDotWidth,\n markerLineWidth,\n} from './tokens';\nimport { Box } from '~components/Box';\nimport type { BaseBoxProps } from '~components/Box/BaseBox';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport Svg, { Path } from '~components/Icons/_Svg';\nimport { makeSize, useTheme } from '~utils';\nimport { throwBladeError } from '~utils/logger';\n\n// universal base64 encode\nconst encode = (svgString: string): string => {\n try {\n if (typeof Buffer !== 'undefined') {\n return Buffer.from(svgString).toString('base64');\n }\n\n return window.btoa(svgString);\n } catch (error: unknown) {\n throwBladeError({\n message: `Failed to encode SVG string: ${error}`,\n moduleName: 'StepLine',\n });\n\n return '';\n }\n};\n\ntype StepLineSvgProps = {\n isDotted?: boolean;\n} & StyledPropsBlade;\n\nconst useDottedLineStyles = ({ isHorizontal }: { isHorizontal?: boolean } = {}): BaseBoxProps => {\n const { theme } = useTheme();\n\n const svgString = `<svg width=\"2\" height=\"2\" viewBox=\"0 0 2 2\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M0 1C0 0.447715 0.447715 0 1 0C1.55228 0 2 0.447715 2 1C2 1.55228 1.55228 2 1 2C0.447715 2 0 1.55228 0 1Z\"\n fill=\"${theme.colors.surface.border.gray.subtle}\"\n />\n </svg>\n `;\n\n const backgroundURL = `url(data:image/svg+xml;base64,${encode(svgString)})`;\n\n return {\n backgroundImage: backgroundURL,\n backgroundPosition: isHorizontal ? 'left' : 'top',\n backgroundSize: isHorizontal\n ? `${makeSize(markerLineDotWidth + markerLineDotSpacing)} ${makeSize(markerLineDotWidth)}`\n : `${makeSize(markerLineDotWidth)} ${makeSize(markerLineDotWidth + markerLineDotSpacing)} `,\n backgroundRepeat: isHorizontal ? 'round no-repeat' : 'no-repeat round',\n };\n};\n\nconst StepStraightLineHorizontal = ({\n isDotted,\n width,\n ...styledProps\n}: StepLineSvgProps & {\n width?: number;\n}): React.ReactElement => {\n const dottedStyles = useDottedLineStyles({ isHorizontal: true });\n const borderStyles: BaseBoxProps = isDotted\n ? dottedStyles\n : {\n borderTopWidth: 'thicker',\n borderTopColor: 'surface.border.gray.subtle',\n };\n\n return <BaseBox height={makeSize(markerLineWidth)} flex=\"1\" {...borderStyles} {...styledProps} />;\n};\n\nconst StepStraightLineVertical = ({\n height,\n isDotted,\n ...styledProps\n}: StepLineSvgProps & {\n height?: number;\n}): React.ReactElement => {\n const dottedStyles = useDottedLineStyles();\n const borderStyles: BaseBoxProps = isDotted\n ? dottedStyles\n : {\n borderLeftWidth: 'thicker',\n borderLeftColor: 'surface.border.gray.subtle',\n };\n return (\n <BaseBox\n height={height ? makeSize(height) : undefined}\n flex={height ? undefined : '1'}\n width={makeSize(markerLineWidth)}\n {...borderStyles}\n {...styledProps}\n />\n );\n};\n\nconst StepTopCurveVertical = ({\n isDotted,\n ...styledProps\n}: StepLineSvgProps): React.ReactElement => {\n const { theme } = useTheme();\n\n return isDotted ? (\n <Svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill={theme.colors.surface.border.gray.subtle}\n {...styledProps}\n >\n <Path d=\"M2 1C2 1.55228 1.55228 2 1 2C0.447715 2 0 1.55228 0 1C0 0.447715 0.447715 0 1 0C1.55228 0 2 0.447715 2 1Z\" />\n <Path d=\"M2 6C2 6.55228 1.55228 7 1 7C0.447715 7 0 6.55228 0 6C0 5.44772 0.447715 5 1 5C1.55228 5 2 5.44772 2 6Z\" />\n <Path d=\"M1 12C1.55228 12 2 11.5523 2 11C2 10.4477 1.55228 10 1 10C0.447715 10 0 10.4477 0 11C0 11.5523 0.447715 12 1 12Z\" />\n <Path d=\"M3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16C1 15.4477 1.44772 15 2 15C2.55228 15 3 15.4477 3 16Z\" />\n <Path d=\"M7 20C7.55228 20 8 19.5523 8 19C8 18.4477 7.55228 18 7 18C6.44772 18 6 18.4477 6 19C6 19.5523 6.44772 20 7 20Z\" />\n <Path d=\"M14 19C14 19.5523 13.5523 20 13 20C12.4477 20 12 19.5523 12 19C12 18.4477 12.4477 18 13 18C13.5523 18 14 18.4477 14 19Z\" />\n <Path d=\"M19 20C19.5523 20 20 19.5523 20 19C20 18.4477 19.5523 18 19 18C18.4477 18 18 18.4477 18 19C18 19.5523 18.4477 20 19 20Z\" />\n </Svg>\n ) : (\n <Svg width=\"20\" height=\"14\" viewBox=\"0 0 20 14\" fill=\"none\" {...styledProps}>\n <Path\n d=\"M1 0V5C1 9.41828 4.58172 13 9 13H20\"\n stroke={theme.colors.surface.border.gray.subtle}\n strokeWidth=\"2\"\n />\n </Svg>\n );\n};\n\nconst StepBottomCurveVertical = ({\n isDotted,\n ...styledProps\n}: StepLineSvgProps): React.ReactElement => {\n const { theme } = useTheme();\n const { size } = useStepGroup();\n\n if (size === 'medium') {\n return isDotted ? (\n <Svg\n width=\"42\"\n height=\"5\"\n viewBox=\"0 0 42 5\"\n fill={theme.colors.surface.border.gray.subtle}\n {...styledProps}\n >\n <Path d=\"M32 1C32 1.55228 31.5523 2 31 2C30.4477 2 30 1.55228 30 1C30 0.447715 30.4477 0 31 0C31.5523 0 32 0.447715 32 1Z\" />\n <Path d=\"M2 4C2 4.55228 1.55228 5 1 5C0.447715 5 0 4.55228 0 4C0 3.44772 0.447715 3 1 3C1.55228 3 2 3.44772 2 4Z\" />\n <Path d=\"M27.5 3.5C28.0523 3.5 28.5 3.05228 28.5 2.5C28.5 1.94772 28.0523 1.5 27.5 1.5C26.9477 1.5 26.5 1.94772 26.5 2.5C26.5 3.05228 26.9477 3.5 27.5 3.5Z\" />\n <Path d=\"M5.5 2.5C5.5 3.05228 5.05228 3.5 4.5 3.5C3.94772 3.5 3.5 3.05228 3.5 2.5C3.5 1.94772 3.94772 1.5 4.5 1.5C5.05228 1.5 5.5 1.94772 5.5 2.5Z\" />\n <Path d=\"M16.5 3.5C17.0523 3.5 17.5 3.05228 17.5 2.5C17.5 1.94772 17.0523 1.5 16.5 1.5C15.9477 1.5 15.5 1.94772 15.5 2.5C15.5 3.05228 15.9477 3.5 16.5 3.5Z\" />\n <Path d=\"M11.5 2.5C11.5 3.05228 11.0523 3.5 10.5 3.5C9.94771 3.5 9.5 3.05228 9.5 2.5C9.5 1.94772 9.94771 1.5 10.5 1.5C11.0523 1.5 11.5 1.94772 11.5 2.5Z\" />\n <Path d=\"M22.5 3.5C23.0523 3.5 23.5 3.05228 23.5 2.5C23.5 1.94772 23.0523 1.5 22.5 1.5C21.9477 1.5 21.5 1.94772 21.5 2.5C21.5 3.05228 21.9477 3.5 22.5 3.5Z\" />\n </Svg>\n ) : (\n <Svg width=\"33\" height=\"5\" viewBox=\"0 0 33 5\" fill=\"none\">\n <Path\n d=\"M1 5V5C1 3.63251 2.108 2.52363 3.47549 2.52255L29.5 2.50198C30.881 2.50088 32 1.38103 32 1.19209e-07V1.19209e-07\"\n stroke={theme.colors.surface.border.gray.subtle}\n strokeWidth=\"2\"\n />\n </Svg>\n );\n }\n\n return isDotted ? (\n <Svg\n width=\"46\"\n height=\"5\"\n viewBox=\"0 0 46 5\"\n fill={theme.colors.surface.border.gray.subtle}\n {...styledProps}\n >\n <Path d=\"M35 1C35 1.55228 34.5523 2 34 2C33.4477 2 33 1.55228 33 1C33 0.447715 33.4477 0 34 0C34.5523 0 35 0.447715 35 1Z\" />\n <Path d=\"M2 4C2 4.55228 1.55228 5 1 5C0.447715 5 0 4.55228 0 4C0 3.44772 0.447715 3 1 3C1.55228 3 2 3.44772 2 4Z\" />\n <Path d=\"M31.5 3.5C32.0523 3.5 32.5 3.05228 32.5 2.5C32.5 1.94772 32.0523 1.5 31.5 1.5C30.9477 1.5 30.5 1.94772 30.5 2.5C30.5 3.05228 30.9477 3.5 31.5 3.5Z\" />\n <Path d=\"M4.5 2.5C4.5 3.05228 4.05228 3.5 3.5 3.5C2.94772 3.5 2.5 3.05228 2.5 2.5C2.5 1.94772 2.94772 1.5 3.5 1.5C4.05228 1.5 4.5 1.94772 4.5 2.5Z\" />\n <Path d=\"M17.5 3.5C18.0523 3.5 18.5 3.05228 18.5 2.5C18.5 1.94772 18.0523 1.5 17.5 1.5C16.9477 1.5 16.5 1.94772 16.5 2.5C16.5 3.05228 16.9477 3.5 17.5 3.5Z\" />\n <Path d=\"M11.5 2.5C11.5 3.05228 11.0523 3.5 10.5 3.5C9.94771 3.5 9.5 3.05228 9.5 2.5C9.5 1.94772 9.94771 1.5 10.5 1.5C11.0523 1.5 11.5 1.94772 11.5 2.5Z\" />\n <Path d=\"M24.5 3.5C25.0523 3.5 25.5 3.05228 25.5 2.5C25.5 1.94772 25.0523 1.5 24.5 1.5C23.9477 1.5 23.5 1.94772 23.5 2.5C23.5 3.05228 23.9477 3.5 24.5 3.5Z\" />\n </Svg>\n ) : (\n <Svg width=\"35\" height=\"6\" viewBox=\"0 0 35 6\" fill=\"none\" {...styledProps}>\n <Path\n d=\"M1 6V6C1 4.36914 2.31973 3.04584 3.95058 3.04142L31.04 2.96802C32.6761 2.96359 34 1.63606 34 1.3411e-07V1.3411e-07\"\n stroke={theme.colors.surface.border.gray.subtle}\n strokeWidth=\"2\"\n />\n </Svg>\n );\n};\n\ntype StepLineProps = {\n stepType: 'single-item' | 'start' | 'middle' | 'end' | 'default';\n shouldShowStartBranch: boolean;\n shouldShowEndBranch: boolean;\n} & Pick<StepItemProps, 'stepProgress' | 'marker'>;\n\ntype StepLineSubComponentProps = Pick<\n StepLineProps,\n 'shouldShowStartBranch' | 'shouldShowEndBranch' | 'marker' | 'stepProgress'\n>;\n\nconst defaultMarker = <StepItemIndicator color=\"neutral\" />;\n\nconst StepLineVertical = ({\n marker = defaultMarker,\n stepProgress,\n isIndented,\n shouldShowStartBranch,\n shouldShowEndBranch,\n}: StepLineSubComponentProps & {\n isIndented?: boolean;\n}): React.ReactElement => {\n const { size } = useStepGroup();\n const spacingTokens = getMarkerLineSpacings(size);\n\n return (\n <Box\n position=\"relative\"\n marginLeft={isIndented ? makeSize(spacingTokens.indentationWidth) : undefined}\n display=\"flex\"\n flexDirection=\"column\"\n >\n <StepStraightLineVertical\n height={itemTopMargin}\n isDotted={stepProgress === 'none' || stepProgress === 'end'}\n visibility={shouldShowStartBranch ? 'visible' : 'hidden'}\n />\n <Box marginLeft={makeSize(-spacingTokens.markerLeftAlignment)}>{marker}</Box>\n <StepStraightLineVertical\n isDotted={stepProgress === 'none' || stepProgress === 'start'}\n visibility={shouldShowEndBranch ? 'visible' : 'hidden'}\n />\n </Box>\n );\n};\n\nconst StepLineStart = ({\n marker = defaultMarker,\n stepProgress,\n shouldShowStartBranch,\n shouldShowEndBranch,\n}: StepLineSubComponentProps): React.ReactElement => {\n const { size } = useStepGroup();\n const spacingTokens = getMarkerLineSpacings(size);\n\n return (\n <Box position=\"relative\" display=\"flex\" flexDirection=\"column\">\n <StepStraightLineVertical\n height={itemTopMargin}\n visibility={shouldShowStartBranch ? 'visible' : 'hidden'}\n isDotted={stepProgress === 'none' || stepProgress === 'end'}\n />\n <StepTopCurveVertical\n visibility={shouldShowStartBranch ? 'visible' : 'hidden'}\n isDotted={stepProgress === 'none' || stepProgress === 'end'}\n />\n <Box\n marginLeft={makeSize(-spacingTokens.markerLeftAlignment + spacingTokens.indentationWidth)}\n marginTop={makeSize(spacingTokens.markerTopAlignment)}\n >\n {marker}\n </Box>\n <StepStraightLineVertical\n visibility={shouldShowEndBranch ? 'visible' : 'hidden'}\n marginLeft={makeSize(spacingTokens.indentationWidth)}\n isDotted={stepProgress === 'none' || stepProgress === 'start'}\n />\n </Box>\n );\n};\n\nconst StepLineEnd = ({\n marker = defaultMarker,\n stepProgress,\n shouldShowStartBranch,\n shouldShowEndBranch,\n}: StepLineSubComponentProps): React.ReactElement => {\n const { size } = useStepGroup();\n const spacingTokens = getMarkerLineSpacings(size);\n return (\n <Box position=\"relative\" display=\"flex\" flexDirection=\"column\">\n <StepStraightLineVertical\n visibility={shouldShowStartBranch ? 'visible' : 'hidden'}\n marginLeft={makeSize(spacingTokens.indentationWidth)}\n height={itemTopMargin}\n isDotted={stepProgress === 'none' || stepProgress === 'end'}\n />\n <Box\n marginLeft={makeSize(-spacingTokens.markerLeftAlignment + spacingTokens.indentationWidth)}\n >\n {marker}\n </Box>\n <StepStraightLineVertical\n marginLeft={makeSize(spacingTokens.indentationWidth)}\n visibility={shouldShowEndBranch ? 'visible' : 'hidden'}\n isDotted={stepProgress === 'none' || stepProgress === 'start'}\n />\n <StepBottomCurveVertical\n isDotted={stepProgress === 'none' || stepProgress === 'start'}\n visibility={shouldShowEndBranch ? 'visible' : 'hidden'}\n />\n </Box>\n );\n};\n\nconst StepLineHorizontal = ({\n marker = defaultMarker,\n stepProgress,\n shouldShowStartBranch,\n shouldShowEndBranch,\n}: StepLineSubComponentProps): React.ReactElement => {\n return (\n <Box\n position=\"relative\"\n display=\"flex\"\n flexDirection=\"row\"\n width=\"100%\"\n justifyContent=\"center\"\n alignItems=\"center\"\n >\n <StepStraightLineHorizontal\n isDotted={stepProgress === 'none' || stepProgress === 'end'}\n visibility={shouldShowStartBranch ? 'visible' : 'hidden'}\n />\n <Box>{marker}</Box>\n <StepStraightLineHorizontal\n isDotted={stepProgress === 'none' || stepProgress === 'start'}\n visibility={shouldShowEndBranch ? 'visible' : 'hidden'}\n />\n </Box>\n );\n};\n\nconst StepLineSingleItem = ({\n marker = defaultMarker,\n stepProgress,\n shouldShowEndBranch,\n shouldShowStartBranch,\n}: StepLineSubComponentProps): React.ReactElement => {\n const { size } = useStepGroup();\n const spacingTokens = getMarkerLineSpacings(size);\n return (\n <Box position=\"relative\" display=\"flex\" flexDirection=\"column\">\n <StepStraightLineVertical\n visibility={shouldShowStartBranch ? 'visible' : 'hidden'}\n height={itemTopMargin}\n isDotted={stepProgress === 'none' || stepProgress === 'end'}\n />\n <StepTopCurveVertical\n visibility={shouldShowStartBranch ? 'visible' : 'hidden'}\n isDotted={stepProgress === 'none' || stepProgress === 'end'}\n />\n <Box\n // -12 (markerLeftAlginment) + 33 (indentationWidth)\n marginLeft={makeSize(-spacingTokens.markerLeftAlignment + spacingTokens.indentationWidth)}\n marginTop={makeSize(spacingTokens.markerTopAlignment)}\n >\n {marker}\n </Box>\n <StepStraightLineVertical\n marginLeft={makeSize(spacingTokens.indentationWidth)}\n visibility={shouldShowEndBranch ? 'visible' : 'hidden'}\n isDotted={stepProgress === 'none' || stepProgress === 'start'}\n />\n <StepBottomCurveVertical\n visibility={shouldShowEndBranch ? 'visible' : 'hidden'}\n isDotted={stepProgress === 'none' || stepProgress === 'start'}\n />\n </Box>\n );\n};\n\nconst StepLine = ({\n stepType = 'default',\n shouldShowStartBranch,\n shouldShowEndBranch,\n marker,\n stepProgress,\n}: StepLineProps): React.ReactElement => {\n const { orientation } = useStepGroup();\n const commonProps = {\n shouldShowStartBranch,\n shouldShowEndBranch,\n marker,\n stepProgress,\n };\n\n if (orientation === 'horizontal') {\n return <StepLineHorizontal {...commonProps} />;\n }\n\n if (stepType === 'start') {\n return <StepLineStart {...commonProps} />;\n }\n\n if (stepType === 'middle') {\n return <StepLineVertical {...commonProps} isIndented={true} />;\n }\n\n if (stepType === 'end') {\n return <StepLineEnd {...commonProps} />;\n }\n\n if (stepType === 'single-item') {\n return <StepLineSingleItem {...commonProps} />;\n }\n\n return <StepLineVertical {...commonProps} />;\n};\n\nexport type { StepLineProps };\nexport { StepLine };\n"],"names":["encode","svgString","Buffer","from","toString","window","btoa","error","throwBladeError","message","concat","moduleName","useDottedLineStyles","_ref","arguments","length","undefined","isHorizontal","_useTheme","useTheme","theme","colors","surface","border","gray","subtle","backgroundURL","backgroundImage","backgroundPosition","backgroundSize","makeSize","markerLineDotWidth","markerLineDotSpacing","backgroundRepeat","StepStraightLineHorizontal","_ref2","isDotted","width","styledProps","_objectWithoutProperties","_excluded","dottedStyles","borderStyles","borderTopWidth","borderTopColor","_jsx","BaseBox","_objectSpread","height","markerLineWidth","flex","StepStraightLineVertical","_ref3","_excluded2","borderLeftWidth","borderLeftColor","StepTopCurveVertical","_ref4","_excluded3","_useTheme2","_jsxs","Svg","viewBox","fill","children","Path","d","stroke","strokeWidth","StepBottomCurveVertical","_ref5","_excluded4","_useTheme3","_useStepGroup","useStepGroup","size","defaultMarker","StepItemIndicator","color","StepLineVertical","_ref6","_ref6$marker","marker","stepProgress","isIndented","shouldShowStartBranch","shouldShowEndBranch","_useStepGroup2","spacingTokens","getMarkerLineSpacings","Box","position","marginLeft","indentationWidth","display","flexDirection","itemTopMargin","visibility","markerLeftAlignment","StepLineStart","_ref7","_ref7$marker","_useStepGroup3","marginTop","markerTopAlignment","StepLineEnd","_ref8","_ref8$marker","_useStepGroup4","StepLineHorizontal","_ref9","_ref9$marker","justifyContent","alignItems","StepLineSingleItem","_ref10","_ref10$marker","_useStepGroup5","StepLine","_ref11","_ref11$stepType","stepType","_useStepGroup6","orientation","commonProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"StepLine.web.js","sources":["../../../../../../src/components/StepGroup/StepLine.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/restrict-plus-operands */\nimport type { StepItemProps } from './types';\nimport { StepItemIndicator } from './StepItemMarker';\nimport { useStepGroup } from './StepGroupContext';\nimport {\n getMarkerLineSpacings,\n itemTopMargin,\n markerLineDotSpacing,\n markerLineDotWidth,\n markerLineWidth,\n} from './tokens';\nimport { Box } from '~components/Box';\nimport type { BaseBoxProps } from '~components/Box/BaseBox';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport Svg, { Path } from '~components/Icons/_Svg';\nimport { makeSize, useTheme } from '~utils';\nimport { throwBladeError } from '~utils/logger';\n\n// universal base64 encode\nconst encode = (svgString: string): string => {\n try {\n if (typeof Buffer !== 'undefined') {\n return Buffer.from(svgString).toString('base64');\n }\n\n return window.btoa(svgString);\n } catch (error: unknown) {\n throwBladeError({\n message: `Failed to encode SVG string: ${error}`,\n moduleName: 'StepLine',\n });\n\n return '';\n }\n};\n\ntype StepLineSvgProps = {\n isDotted?: boolean;\n} & StyledPropsBlade;\n\nconst useDottedLineStyles = ({ isHorizontal }: { isHorizontal?: boolean } = {}): BaseBoxProps => {\n const { theme } = useTheme();\n\n const svgString = `<svg width=\"2\" height=\"2\" viewBox=\"0 0 2 2\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M0 1C0 0.447715 0.447715 0 1 0C1.55228 0 2 0.447715 2 1C2 1.55228 1.55228 2 1 2C0.447715 2 0 1.55228 0 1Z\"\n fill=\"${theme.colors.surface.border.gray.subtle}\"\n />\n </svg>\n `;\n\n const backgroundURL = `url(data:image/svg+xml;base64,${encode(svgString)})`;\n\n return {\n backgroundImage: backgroundURL,\n backgroundPosition: isHorizontal ? 'left' : 'top',\n backgroundSize: isHorizontal\n ? `${makeSize(markerLineDotWidth + markerLineDotSpacing)} ${makeSize(markerLineDotWidth)}`\n : `${makeSize(markerLineDotWidth)} ${makeSize(markerLineDotWidth + markerLineDotSpacing)} `,\n backgroundRepeat: isHorizontal ? 'round no-repeat' : 'no-repeat round',\n };\n};\n\nconst StepStraightLineHorizontal = ({\n isDotted,\n width,\n ...styledProps\n}: StepLineSvgProps & {\n width?: number;\n}): React.ReactElement => {\n const dottedStyles = useDottedLineStyles({ isHorizontal: true });\n const borderStyles: BaseBoxProps = isDotted\n ? dottedStyles\n : {\n borderTopWidth: 'thicker',\n borderTopColor: 'surface.border.gray.subtle',\n };\n\n return <BaseBox height={makeSize(markerLineWidth)} flex=\"1\" {...borderStyles} {...styledProps} />;\n};\n\nconst StepStraightLineVertical = ({\n height,\n isDotted,\n ...styledProps\n}: StepLineSvgProps & {\n height?: number;\n}): React.ReactElement => {\n const dottedStyles = useDottedLineStyles();\n const borderStyles: BaseBoxProps = isDotted\n ? dottedStyles\n : {\n borderLeftWidth: 'thicker',\n borderLeftColor: 'surface.border.gray.subtle',\n };\n return (\n <BaseBox\n height={height ? makeSize(height) : undefined}\n flex={height ? undefined : '1'}\n width={makeSize(markerLineWidth)}\n {...borderStyles}\n {...styledProps}\n />\n );\n};\n\nconst StepTopCurveVertical = ({\n isDotted,\n ...styledProps\n}: StepLineSvgProps): React.ReactElement => {\n const { theme } = useTheme();\n\n return isDotted ? (\n <Svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill={theme.colors.surface.border.gray.subtle}\n {...styledProps}\n >\n <Path d=\"M2 1C2 1.55228 1.55228 2 1 2C0.447715 2 0 1.55228 0 1C0 0.447715 0.447715 0 1 0C1.55228 0 2 0.447715 2 1Z\" />\n <Path d=\"M2 6C2 6.55228 1.55228 7 1 7C0.447715 7 0 6.55228 0 6C0 5.44772 0.447715 5 1 5C1.55228 5 2 5.44772 2 6Z\" />\n <Path d=\"M1 12C1.55228 12 2 11.5523 2 11C2 10.4477 1.55228 10 1 10C0.447715 10 0 10.4477 0 11C0 11.5523 0.447715 12 1 12Z\" />\n <Path d=\"M3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16C1 15.4477 1.44772 15 2 15C2.55228 15 3 15.4477 3 16Z\" />\n <Path d=\"M7 20C7.55228 20 8 19.5523 8 19C8 18.4477 7.55228 18 7 18C6.44772 18 6 18.4477 6 19C6 19.5523 6.44772 20 7 20Z\" />\n <Path d=\"M14 19C14 19.5523 13.5523 20 13 20C12.4477 20 12 19.5523 12 19C12 18.4477 12.4477 18 13 18C13.5523 18 14 18.4477 14 19Z\" />\n <Path d=\"M19 20C19.5523 20 20 19.5523 20 19C20 18.4477 19.5523 18 19 18C18.4477 18 18 18.4477 18 19C18 19.5523 18.4477 20 19 20Z\" />\n </Svg>\n ) : (\n <Svg width=\"20\" height=\"14\" viewBox=\"0 0 20 14\" fill=\"none\" {...styledProps}>\n <Path\n d=\"M1 0V5C1 9.41828 4.58172 13 9 13H20\"\n stroke={theme.colors.surface.border.gray.subtle}\n strokeWidth=\"2\"\n />\n </Svg>\n );\n};\n\nconst StepBottomCurveVertical = ({\n isDotted,\n ...styledProps\n}: StepLineSvgProps): React.ReactElement => {\n const { theme } = useTheme();\n const { size } = useStepGroup();\n\n if (size === 'medium') {\n return isDotted ? (\n <Svg\n width=\"42\"\n height=\"5\"\n viewBox=\"0 0 42 5\"\n fill={theme.colors.surface.border.gray.subtle}\n {...styledProps}\n >\n <Path d=\"M32 1C32 1.55228 31.5523 2 31 2C30.4477 2 30 1.55228 30 1C30 0.447715 30.4477 0 31 0C31.5523 0 32 0.447715 32 1Z\" />\n <Path d=\"M2 4C2 4.55228 1.55228 5 1 5C0.447715 5 0 4.55228 0 4C0 3.44772 0.447715 3 1 3C1.55228 3 2 3.44772 2 4Z\" />\n <Path d=\"M27.5 3.5C28.0523 3.5 28.5 3.05228 28.5 2.5C28.5 1.94772 28.0523 1.5 27.5 1.5C26.9477 1.5 26.5 1.94772 26.5 2.5C26.5 3.05228 26.9477 3.5 27.5 3.5Z\" />\n <Path d=\"M5.5 2.5C5.5 3.05228 5.05228 3.5 4.5 3.5C3.94772 3.5 3.5 3.05228 3.5 2.5C3.5 1.94772 3.94772 1.5 4.5 1.5C5.05228 1.5 5.5 1.94772 5.5 2.5Z\" />\n <Path d=\"M16.5 3.5C17.0523 3.5 17.5 3.05228 17.5 2.5C17.5 1.94772 17.0523 1.5 16.5 1.5C15.9477 1.5 15.5 1.94772 15.5 2.5C15.5 3.05228 15.9477 3.5 16.5 3.5Z\" />\n <Path d=\"M11.5 2.5C11.5 3.05228 11.0523 3.5 10.5 3.5C9.94771 3.5 9.5 3.05228 9.5 2.5C9.5 1.94772 9.94771 1.5 10.5 1.5C11.0523 1.5 11.5 1.94772 11.5 2.5Z\" />\n <Path d=\"M22.5 3.5C23.0523 3.5 23.5 3.05228 23.5 2.5C23.5 1.94772 23.0523 1.5 22.5 1.5C21.9477 1.5 21.5 1.94772 21.5 2.5C21.5 3.05228 21.9477 3.5 22.5 3.5Z\" />\n </Svg>\n ) : (\n <Svg width=\"33\" height=\"5\" viewBox=\"0 0 33 5\" fill=\"none\">\n <Path\n d=\"M1 5V5C1 3.63251 2.108 2.52363 3.47549 2.52255L29.5 2.50198C30.881 2.50088 32 1.38103 32 1.19209e-07V1.19209e-07\"\n stroke={theme.colors.surface.border.gray.subtle}\n strokeWidth=\"2\"\n />\n </Svg>\n );\n }\n\n return isDotted ? (\n <Svg\n width=\"46\"\n height=\"5\"\n viewBox=\"0 0 46 5\"\n fill={theme.colors.surface.border.gray.subtle}\n {...styledProps}\n >\n <Path d=\"M35 1C35 1.55228 34.5523 2 34 2C33.4477 2 33 1.55228 33 1C33 0.447715 33.4477 0 34 0C34.5523 0 35 0.447715 35 1Z\" />\n <Path d=\"M2 4C2 4.55228 1.55228 5 1 5C0.447715 5 0 4.55228 0 4C0 3.44772 0.447715 3 1 3C1.55228 3 2 3.44772 2 4Z\" />\n <Path d=\"M31.5 3.5C32.0523 3.5 32.5 3.05228 32.5 2.5C32.5 1.94772 32.0523 1.5 31.5 1.5C30.9477 1.5 30.5 1.94772 30.5 2.5C30.5 3.05228 30.9477 3.5 31.5 3.5Z\" />\n <Path d=\"M4.5 2.5C4.5 3.05228 4.05228 3.5 3.5 3.5C2.94772 3.5 2.5 3.05228 2.5 2.5C2.5 1.94772 2.94772 1.5 3.5 1.5C4.05228 1.5 4.5 1.94772 4.5 2.5Z\" />\n <Path d=\"M17.5 3.5C18.0523 3.5 18.5 3.05228 18.5 2.5C18.5 1.94772 18.0523 1.5 17.5 1.5C16.9477 1.5 16.5 1.94772 16.5 2.5C16.5 3.05228 16.9477 3.5 17.5 3.5Z\" />\n <Path d=\"M11.5 2.5C11.5 3.05228 11.0523 3.5 10.5 3.5C9.94771 3.5 9.5 3.05228 9.5 2.5C9.5 1.94772 9.94771 1.5 10.5 1.5C11.0523 1.5 11.5 1.94772 11.5 2.5Z\" />\n <Path d=\"M24.5 3.5C25.0523 3.5 25.5 3.05228 25.5 2.5C25.5 1.94772 25.0523 1.5 24.5 1.5C23.9477 1.5 23.5 1.94772 23.5 2.5C23.5 3.05228 23.9477 3.5 24.5 3.5Z\" />\n </Svg>\n ) : (\n <Svg width=\"35\" height=\"6\" viewBox=\"0 0 35 6\" fill=\"none\" {...styledProps}>\n <Path\n d=\"M1 6V6C1 4.36914 2.31973 3.04584 3.95058 3.04142L31.04 2.96802C32.6761 2.96359 34 1.63606 34 1.3411e-07V1.3411e-07\"\n stroke={theme.colors.surface.border.gray.subtle}\n strokeWidth=\"2\"\n />\n </Svg>\n );\n};\n\ntype StepLineProps = {\n stepType: 'single-item' | 'start' | 'middle' | 'end' | 'default';\n shouldShowStartBranch: boolean;\n shouldShowEndBranch: boolean;\n} & Pick<StepItemProps, 'stepProgress' | 'marker'>;\n\ntype StepLineSubComponentProps = Pick<\n StepLineProps,\n 'shouldShowStartBranch' | 'shouldShowEndBranch' | 'marker' | 'stepProgress'\n>;\n\nconst defaultMarker = <StepItemIndicator color=\"neutral\" />;\n\nconst StepLineVertical = ({\n marker = defaultMarker,\n stepProgress,\n isIndented,\n shouldShowStartBranch,\n shouldShowEndBranch,\n}: StepLineSubComponentProps & {\n isIndented?: boolean;\n}): React.ReactElement => {\n const { size } = useStepGroup();\n const spacingTokens = getMarkerLineSpacings(size);\n\n return (\n <Box\n position=\"relative\"\n marginLeft={isIndented ? makeSize(spacingTokens.indentationWidth) : undefined}\n display=\"flex\"\n flexDirection=\"column\"\n >\n <StepStraightLineVertical\n height={itemTopMargin}\n isDotted={stepProgress === 'none' || stepProgress === 'end'}\n visibility={shouldShowStartBranch ? 'visible' : 'hidden'}\n />\n <Box marginLeft={makeSize(-spacingTokens.markerLeftAlignment)}>{marker}</Box>\n <StepStraightLineVertical\n isDotted={stepProgress === 'none' || stepProgress === 'start'}\n visibility={shouldShowEndBranch ? 'visible' : 'hidden'}\n />\n </Box>\n );\n};\n\nconst StepLineStart = ({\n marker = defaultMarker,\n stepProgress,\n shouldShowStartBranch,\n shouldShowEndBranch,\n}: StepLineSubComponentProps): React.ReactElement => {\n const { size } = useStepGroup();\n const spacingTokens = getMarkerLineSpacings(size);\n\n return (\n <Box position=\"relative\" display=\"flex\" flexDirection=\"column\">\n <StepTopCurveVertical\n visibility={shouldShowStartBranch ? 'visible' : 'hidden'}\n isDotted={stepProgress === 'none' || stepProgress === 'end'}\n />\n <Box\n marginLeft={makeSize(-spacingTokens.markerLeftAlignment + spacingTokens.indentationWidth)}\n marginTop={makeSize(spacingTokens.markerTopAlignment)}\n >\n {marker}\n </Box>\n <StepStraightLineVertical\n visibility={shouldShowEndBranch ? 'visible' : 'hidden'}\n marginLeft={makeSize(spacingTokens.indentationWidth)}\n isDotted={stepProgress === 'none' || stepProgress === 'start'}\n />\n </Box>\n );\n};\n\nconst StepLineEnd = ({\n marker = defaultMarker,\n stepProgress,\n shouldShowStartBranch,\n shouldShowEndBranch,\n}: StepLineSubComponentProps): React.ReactElement => {\n const { size } = useStepGroup();\n const spacingTokens = getMarkerLineSpacings(size);\n return (\n <Box position=\"relative\" display=\"flex\" flexDirection=\"column\">\n <StepStraightLineVertical\n visibility={shouldShowStartBranch ? 'visible' : 'hidden'}\n marginLeft={makeSize(spacingTokens.indentationWidth)}\n height={itemTopMargin}\n isDotted={stepProgress === 'none' || stepProgress === 'end'}\n />\n <Box\n marginLeft={makeSize(-spacingTokens.markerLeftAlignment + spacingTokens.indentationWidth)}\n >\n {marker}\n </Box>\n <StepStraightLineVertical\n marginLeft={makeSize(spacingTokens.indentationWidth)}\n visibility={shouldShowEndBranch ? 'visible' : 'hidden'}\n isDotted={stepProgress === 'none' || stepProgress === 'start'}\n />\n <StepBottomCurveVertical\n isDotted={stepProgress === 'none' || stepProgress === 'start'}\n visibility={shouldShowEndBranch ? 'visible' : 'hidden'}\n />\n </Box>\n );\n};\n\nconst StepLineHorizontal = ({\n marker = defaultMarker,\n stepProgress,\n shouldShowStartBranch,\n shouldShowEndBranch,\n}: StepLineSubComponentProps): React.ReactElement => {\n return (\n <Box\n position=\"relative\"\n display=\"flex\"\n flexDirection=\"row\"\n width=\"100%\"\n justifyContent=\"center\"\n alignItems=\"center\"\n >\n <StepStraightLineHorizontal\n isDotted={stepProgress === 'none' || stepProgress === 'end'}\n visibility={shouldShowStartBranch ? 'visible' : 'hidden'}\n />\n <Box>{marker}</Box>\n <StepStraightLineHorizontal\n isDotted={stepProgress === 'none' || stepProgress === 'start'}\n visibility={shouldShowEndBranch ? 'visible' : 'hidden'}\n />\n </Box>\n );\n};\n\nconst StepLineSingleItem = ({\n marker = defaultMarker,\n stepProgress,\n shouldShowEndBranch,\n shouldShowStartBranch,\n}: StepLineSubComponentProps): React.ReactElement => {\n const { size } = useStepGroup();\n const spacingTokens = getMarkerLineSpacings(size);\n return (\n <Box position=\"relative\" display=\"flex\" flexDirection=\"column\">\n <StepTopCurveVertical\n visibility={shouldShowStartBranch ? 'visible' : 'hidden'}\n isDotted={stepProgress === 'none' || stepProgress === 'end'}\n />\n <Box\n // -12 (markerLeftAlginment) + 33 (indentationWidth)\n marginLeft={makeSize(-spacingTokens.markerLeftAlignment + spacingTokens.indentationWidth)}\n marginTop={makeSize(spacingTokens.markerTopAlignment)}\n >\n {marker}\n </Box>\n <StepStraightLineVertical\n marginLeft={makeSize(spacingTokens.indentationWidth)}\n visibility={shouldShowEndBranch ? 'visible' : 'hidden'}\n isDotted={stepProgress === 'none' || stepProgress === 'start'}\n />\n <StepBottomCurveVertical\n visibility={shouldShowEndBranch ? 'visible' : 'hidden'}\n isDotted={stepProgress === 'none' || stepProgress === 'start'}\n />\n </Box>\n );\n};\n\nconst StepLine = ({\n stepType = 'default',\n shouldShowStartBranch,\n shouldShowEndBranch,\n marker,\n stepProgress,\n}: StepLineProps): React.ReactElement => {\n const { orientation } = useStepGroup();\n const commonProps = {\n shouldShowStartBranch,\n shouldShowEndBranch,\n marker,\n stepProgress,\n };\n\n if (orientation === 'horizontal') {\n return <StepLineHorizontal {...commonProps} />;\n }\n\n if (stepType === 'start') {\n return <StepLineStart {...commonProps} />;\n }\n\n if (stepType === 'middle') {\n return <StepLineVertical {...commonProps} isIndented={true} />;\n }\n\n if (stepType === 'end') {\n return <StepLineEnd {...commonProps} />;\n }\n\n if (stepType === 'single-item') {\n return <StepLineSingleItem {...commonProps} />;\n }\n\n return <StepLineVertical {...commonProps} />;\n};\n\nexport type { StepLineProps };\nexport { StepLine };\n"],"names":["encode","svgString","Buffer","from","toString","window","btoa","error","throwBladeError","message","concat","moduleName","useDottedLineStyles","_ref","arguments","length","undefined","isHorizontal","_useTheme","useTheme","theme","colors","surface","border","gray","subtle","backgroundURL","backgroundImage","backgroundPosition","backgroundSize","makeSize","markerLineDotWidth","markerLineDotSpacing","backgroundRepeat","StepStraightLineHorizontal","_ref2","isDotted","width","styledProps","_objectWithoutProperties","_excluded","dottedStyles","borderStyles","borderTopWidth","borderTopColor","_jsx","BaseBox","_objectSpread","height","markerLineWidth","flex","StepStraightLineVertical","_ref3","_excluded2","borderLeftWidth","borderLeftColor","StepTopCurveVertical","_ref4","_excluded3","_useTheme2","_jsxs","Svg","viewBox","fill","children","Path","d","stroke","strokeWidth","StepBottomCurveVertical","_ref5","_excluded4","_useTheme3","_useStepGroup","useStepGroup","size","defaultMarker","StepItemIndicator","color","StepLineVertical","_ref6","_ref6$marker","marker","stepProgress","isIndented","shouldShowStartBranch","shouldShowEndBranch","_useStepGroup2","spacingTokens","getMarkerLineSpacings","Box","position","marginLeft","indentationWidth","display","flexDirection","itemTopMargin","visibility","markerLeftAlignment","StepLineStart","_ref7","_ref7$marker","_useStepGroup3","marginTop","markerTopAlignment","StepLineEnd","_ref8","_ref8$marker","_useStepGroup4","StepLineHorizontal","_ref9","_ref9$marker","justifyContent","alignItems","StepLineSingleItem","_ref10","_ref10$marker","_useStepGroup5","StepLine","_ref11","_ref11$stepType","stepType","_useStepGroup6","orientation","commonProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,IAAMA,MAAM,GAAG,SAATA,MAAMA,CAAIC,SAAiB,EAAa;EAC5C,IAAI;AACF,IAAA,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE;MACjC,OAAOA,MAAM,CAACC,IAAI,CAACF,SAAS,CAAC,CAACG,QAAQ,CAAC,QAAQ,CAAC,CAAA;AAClD,KAAA;AAEA,IAAA,OAAOC,MAAM,CAACC,IAAI,CAACL,SAAS,CAAC,CAAA;GAC9B,CAAC,OAAOM,KAAc,EAAE;AACvBC,IAAAA,eAAe,CAAC;AACdC,MAAAA,OAAO,EAAAC,+BAAAA,CAAAA,MAAA,CAAkCH,KAAK,CAAE;AAChDI,MAAAA,UAAU,EAAE,UAAA;AACd,KAAC,CAAC,CAAA;AAEF,IAAA,OAAO,EAAE,CAAA;AACX,GAAA;AACF,CAAC,CAAA;AAMD,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmBA,GAAwE;AAAA,EAAA,IAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAArB,EAAE;IAA/CG,YAAY,GAAAJ,IAAA,CAAZI,YAAY,CAAA;AACzC,EAAA,IAAAC,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;AAEb,EAAA,IAAMnB,SAAS,GAAA,wPAAA,CAAAS,MAAA,CAGHU,KAAK,CAACC,MAAM,CAACC,OAAO,CAACC,MAAM,CAACC,IAAI,CAACC,MAAM,EAGlD,0BAAA,CAAA,CAAA;EAED,IAAMC,aAAa,oCAAAhB,MAAA,CAAoCV,MAAM,CAACC,SAAS,CAAC,EAAG,GAAA,CAAA,CAAA;EAE3E,OAAO;AACL0B,IAAAA,eAAe,EAAED,aAAa;AAC9BE,IAAAA,kBAAkB,EAAEX,YAAY,GAAG,MAAM,GAAG,KAAK;AACjDY,IAAAA,cAAc,EAAEZ,YAAY,GAAAP,EAAAA,CAAAA,MAAA,CACrBoB,QAAQ,CAACC,kBAAkB,GAAGC,oBAAoB,CAAC,EAAA,GAAA,CAAA,CAAAtB,MAAA,CAAIoB,QAAQ,CAACC,kBAAkB,CAAC,CAAA,GAAA,EAAA,CAAArB,MAAA,CACnFoB,QAAQ,CAACC,kBAAkB,CAAC,EAAA,GAAA,CAAA,CAAArB,MAAA,CAAIoB,QAAQ,CAACC,kBAAkB,GAAGC,oBAAoB,CAAC,EAAG,GAAA,CAAA;AAC7FC,IAAAA,gBAAgB,EAAEhB,YAAY,GAAG,iBAAiB,GAAG,iBAAA;GACtD,CAAA;AACH,CAAC,CAAA;AAED,IAAMiB,0BAA0B,GAAG,SAA7BA,0BAA0BA,CAAAC,KAAA,EAMN;AAAA,EAAA,IALxBC,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IACRC,KAAK,GAAAF,KAAA,CAALE,KAAK;AACFC,IAAAA,WAAW,GAAAC,wBAAA,CAAAJ,KAAA,EAAAK,SAAA,CAAA,CAAA;EAId,IAAMC,YAAY,GAAG7B,mBAAmB,CAAC;AAAEK,IAAAA,YAAY,EAAE,IAAA;AAAK,GAAC,CAAC,CAAA;AAChE,EAAA,IAAMyB,YAA0B,GAAGN,QAAQ,GACvCK,YAAY,GACZ;AACEE,IAAAA,cAAc,EAAE,SAAS;AACzBC,IAAAA,cAAc,EAAE,4BAAA;GACjB,CAAA;AAEL,EAAA,oBAAOC,GAAA,CAACC,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAA;AAACC,IAAAA,MAAM,EAAElB,QAAQ,CAACmB,eAAe,CAAE;AAACC,IAAAA,IAAI,EAAC,GAAA;AAAG,GAAA,EAAKR,YAAY,CAAA,EAAMJ,WAAW,CAAG,CAAC,CAAA;AACnG,CAAC,CAAA;AAED,IAAMa,wBAAwB,GAAG,SAA3BA,wBAAwBA,CAAAC,KAAA,EAMJ;AAAA,EAAA,IALxBJ,MAAM,GAAAI,KAAA,CAANJ,MAAM;IACNZ,QAAQ,GAAAgB,KAAA,CAARhB,QAAQ;AACLE,IAAAA,WAAW,GAAAC,wBAAA,CAAAa,KAAA,EAAAC,UAAA,CAAA,CAAA;AAId,EAAA,IAAMZ,YAAY,GAAG7B,mBAAmB,EAAE,CAAA;AAC1C,EAAA,IAAM8B,YAA0B,GAAGN,QAAQ,GACvCK,YAAY,GACZ;AACEa,IAAAA,eAAe,EAAE,SAAS;AAC1BC,IAAAA,eAAe,EAAE,4BAAA;GAClB,CAAA;AACL,EAAA,oBACEV,GAAA,CAACC,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAA;IACNC,MAAM,EAAEA,MAAM,GAAGlB,QAAQ,CAACkB,MAAM,CAAC,GAAGhC,SAAU;AAC9CkC,IAAAA,IAAI,EAAEF,MAAM,GAAGhC,SAAS,GAAG,GAAI;IAC/BqB,KAAK,EAAEP,QAAQ,CAACmB,eAAe,CAAA;AAAE,GAAA,EAC7BP,YAAY,CAAA,EACZJ,WAAW,CAChB,CAAC,CAAA;AAEN,CAAC,CAAA;AAED,IAAMkB,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAAC,KAAA,EAGkB;AAAA,EAAA,IAF1CrB,QAAQ,GAAAqB,KAAA,CAARrB,QAAQ;AACLE,IAAAA,WAAW,GAAAC,wBAAA,CAAAkB,KAAA,EAAAC,UAAA,CAAA,CAAA;AAEd,EAAA,IAAAC,UAAA,GAAkBxC,QAAQ,EAAE;IAApBC,KAAK,GAAAuC,UAAA,CAALvC,KAAK,CAAA;EAEb,OAAOgB,QAAQ,gBACbwB,IAAA,CAACC,GAAG,EAAAd,aAAA,CAAAA,aAAA,CAAA;AACFV,IAAAA,KAAK,EAAC,IAAI;AACVW,IAAAA,MAAM,EAAC,IAAI;AACXc,IAAAA,OAAO,EAAC,WAAW;IACnBC,IAAI,EAAE3C,KAAK,CAACC,MAAM,CAACC,OAAO,CAACC,MAAM,CAACC,IAAI,CAACC,MAAAA;AAAO,GAAA,EAC1Ca,WAAW,CAAA,EAAA,EAAA,EAAA;IAAA0B,QAAA,EAAA,cAEfnB,GAAA,CAACoB,IAAI,EAAA;AAACC,MAAAA,CAAC,EAAC,2GAAA;AAA2G,KAAE,CAAC,eACtHrB,GAAA,CAACoB,IAAI,EAAA;AAACC,MAAAA,CAAC,EAAC,yGAAA;AAAyG,KAAE,CAAC,eACpHrB,GAAA,CAACoB,IAAI,EAAA;AAACC,MAAAA,CAAC,EAAC,kHAAA;AAAkH,KAAE,CAAC,eAC7HrB,GAAA,CAACoB,IAAI,EAAA;AAACC,MAAAA,CAAC,EAAC,gHAAA;AAAgH,KAAE,CAAC,eAC3HrB,GAAA,CAACoB,IAAI,EAAA;AAACC,MAAAA,CAAC,EAAC,gHAAA;AAAgH,KAAE,CAAC,eAC3HrB,GAAA,CAACoB,IAAI,EAAA;AAACC,MAAAA,CAAC,EAAC,yHAAA;AAAyH,KAAE,CAAC,eACpIrB,GAAA,CAACoB,IAAI,EAAA;AAACC,MAAAA,CAAC,EAAC,yHAAA;AAAyH,KAAE,CAAC,CAAA;GACjI,CAAA,CAAC,gBAENrB,GAAA,CAACgB,GAAG,EAAAd,aAAA,CAAAA,aAAA,CAAA;AAACV,IAAAA,KAAK,EAAC,IAAI;AAACW,IAAAA,MAAM,EAAC,IAAI;AAACc,IAAAA,OAAO,EAAC,WAAW;AAACC,IAAAA,IAAI,EAAC,MAAA;AAAM,GAAA,EAAKzB,WAAW,CAAA,EAAA,EAAA,EAAA;IAAA0B,QAAA,eACzEnB,GAAA,CAACoB,IAAI,EAAA;AACHC,MAAAA,CAAC,EAAC,qCAAqC;MACvCC,MAAM,EAAE/C,KAAK,CAACC,MAAM,CAACC,OAAO,CAACC,MAAM,CAACC,IAAI,CAACC,MAAO;AAChD2C,MAAAA,WAAW,EAAC,GAAA;KACb,CAAA;AAAC,GAAA,CACC,CACN,CAAA;AACH,CAAC,CAAA;AAED,IAAMC,uBAAuB,GAAG,SAA1BA,uBAAuBA,CAAAC,KAAA,EAGe;AAAA,EAAA,IAF1ClC,QAAQ,GAAAkC,KAAA,CAARlC,QAAQ;AACLE,IAAAA,WAAW,GAAAC,wBAAA,CAAA+B,KAAA,EAAAC,UAAA,CAAA,CAAA;AAEd,EAAA,IAAAC,UAAA,GAAkBrD,QAAQ,EAAE;IAApBC,KAAK,GAAAoD,UAAA,CAALpD,KAAK,CAAA;AACb,EAAA,IAAAqD,aAAA,GAAiBC,YAAY,EAAE;IAAvBC,IAAI,GAAAF,aAAA,CAAJE,IAAI,CAAA;EAEZ,IAAIA,IAAI,KAAK,QAAQ,EAAE;IACrB,OAAOvC,QAAQ,gBACbwB,IAAA,CAACC,GAAG,EAAAd,aAAA,CAAAA,aAAA,CAAA;AACFV,MAAAA,KAAK,EAAC,IAAI;AACVW,MAAAA,MAAM,EAAC,GAAG;AACVc,MAAAA,OAAO,EAAC,UAAU;MAClBC,IAAI,EAAE3C,KAAK,CAACC,MAAM,CAACC,OAAO,CAACC,MAAM,CAACC,IAAI,CAACC,MAAAA;AAAO,KAAA,EAC1Ca,WAAW,CAAA,EAAA,EAAA,EAAA;MAAA0B,QAAA,EAAA,cAEfnB,GAAA,CAACoB,IAAI,EAAA;AAACC,QAAAA,CAAC,EAAC,kHAAA;AAAkH,OAAE,CAAC,eAC7HrB,GAAA,CAACoB,IAAI,EAAA;AAACC,QAAAA,CAAC,EAAC,yGAAA;AAAyG,OAAE,CAAC,eACpHrB,GAAA,CAACoB,IAAI,EAAA;AAACC,QAAAA,CAAC,EAAC,oJAAA;AAAoJ,OAAE,CAAC,eAC/JrB,GAAA,CAACoB,IAAI,EAAA;AAACC,QAAAA,CAAC,EAAC,2IAAA;AAA2I,OAAE,CAAC,eACtJrB,GAAA,CAACoB,IAAI,EAAA;AAACC,QAAAA,CAAC,EAAC,oJAAA;AAAoJ,OAAE,CAAC,eAC/JrB,GAAA,CAACoB,IAAI,EAAA;AAACC,QAAAA,CAAC,EAAC,iJAAA;AAAiJ,OAAE,CAAC,eAC5JrB,GAAA,CAACoB,IAAI,EAAA;AAACC,QAAAA,CAAC,EAAC,oJAAA;AAAoJ,OAAE,CAAC,CAAA;AAAA,KAAA,CAC5J,CAAC,gBAENrB,GAAA,CAACgB,GAAG,EAAA;AAACxB,MAAAA,KAAK,EAAC,IAAI;AAACW,MAAAA,MAAM,EAAC,GAAG;AAACc,MAAAA,OAAO,EAAC,UAAU;AAACC,MAAAA,IAAI,EAAC,MAAM;MAAAC,QAAA,eACvDnB,GAAA,CAACoB,IAAI,EAAA;AACHC,QAAAA,CAAC,EAAC,kHAAkH;QACpHC,MAAM,EAAE/C,KAAK,CAACC,MAAM,CAACC,OAAO,CAACC,MAAM,CAACC,IAAI,CAACC,MAAO;AAChD2C,QAAAA,WAAW,EAAC,GAAA;OACb,CAAA;AAAC,KACC,CACN,CAAA;AACH,GAAA;EAEA,OAAOhC,QAAQ,gBACbwB,IAAA,CAACC,GAAG,EAAAd,aAAA,CAAAA,aAAA,CAAA;AACFV,IAAAA,KAAK,EAAC,IAAI;AACVW,IAAAA,MAAM,EAAC,GAAG;AACVc,IAAAA,OAAO,EAAC,UAAU;IAClBC,IAAI,EAAE3C,KAAK,CAACC,MAAM,CAACC,OAAO,CAACC,MAAM,CAACC,IAAI,CAACC,MAAAA;AAAO,GAAA,EAC1Ca,WAAW,CAAA,EAAA,EAAA,EAAA;IAAA0B,QAAA,EAAA,cAEfnB,GAAA,CAACoB,IAAI,EAAA;AAACC,MAAAA,CAAC,EAAC,kHAAA;AAAkH,KAAE,CAAC,eAC7HrB,GAAA,CAACoB,IAAI,EAAA;AAACC,MAAAA,CAAC,EAAC,yGAAA;AAAyG,KAAE,CAAC,eACpHrB,GAAA,CAACoB,IAAI,EAAA;AAACC,MAAAA,CAAC,EAAC,oJAAA;AAAoJ,KAAE,CAAC,eAC/JrB,GAAA,CAACoB,IAAI,EAAA;AAACC,MAAAA,CAAC,EAAC,2IAAA;AAA2I,KAAE,CAAC,eACtJrB,GAAA,CAACoB,IAAI,EAAA;AAACC,MAAAA,CAAC,EAAC,oJAAA;AAAoJ,KAAE,CAAC,eAC/JrB,GAAA,CAACoB,IAAI,EAAA;AAACC,MAAAA,CAAC,EAAC,iJAAA;AAAiJ,KAAE,CAAC,eAC5JrB,GAAA,CAACoB,IAAI,EAAA;AAACC,MAAAA,CAAC,EAAC,oJAAA;AAAoJ,KAAE,CAAC,CAAA;GAC5J,CAAA,CAAC,gBAENrB,GAAA,CAACgB,GAAG,EAAAd,aAAA,CAAAA,aAAA,CAAA;AAACV,IAAAA,KAAK,EAAC,IAAI;AAACW,IAAAA,MAAM,EAAC,GAAG;AAACc,IAAAA,OAAO,EAAC,UAAU;AAACC,IAAAA,IAAI,EAAC,MAAA;AAAM,GAAA,EAAKzB,WAAW,CAAA,EAAA,EAAA,EAAA;IAAA0B,QAAA,eACvEnB,GAAA,CAACoB,IAAI,EAAA;AACHC,MAAAA,CAAC,EAAC,oHAAoH;MACtHC,MAAM,EAAE/C,KAAK,CAACC,MAAM,CAACC,OAAO,CAACC,MAAM,CAACC,IAAI,CAACC,MAAO;AAChD2C,MAAAA,WAAW,EAAC,GAAA;KACb,CAAA;AAAC,GAAA,CACC,CACN,CAAA;AACH,CAAC,CAAA;AAaD,IAAMQ,aAAa,gBAAG/B,GAAA,CAACgC,iBAAiB,EAAA;AAACC,EAAAA,KAAK,EAAC,SAAA;AAAS,CAAE,CAAC,CAAA;AAE3D,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAAC,KAAA,EAQI;AAAA,EAAA,IAAAC,YAAA,GAAAD,KAAA,CAPxBE,MAAM;AAANA,IAAAA,MAAM,GAAAD,YAAA,KAAGL,KAAAA,CAAAA,GAAAA,aAAa,GAAAK,YAAA;IACtBE,YAAY,GAAAH,KAAA,CAAZG,YAAY;IACZC,UAAU,GAAAJ,KAAA,CAAVI,UAAU;IACVC,qBAAqB,GAAAL,KAAA,CAArBK,qBAAqB;IACrBC,mBAAmB,GAAAN,KAAA,CAAnBM,mBAAmB,CAAA;AAInB,EAAA,IAAAC,cAAA,GAAiBb,YAAY,EAAE;IAAvBC,IAAI,GAAAY,cAAA,CAAJZ,IAAI,CAAA;AACZ,EAAA,IAAMa,aAAa,GAAGC,qBAAqB,CAACd,IAAI,CAAC,CAAA;EAEjD,oBACEf,IAAA,CAAC8B,GAAG,EAAA;AACFC,IAAAA,QAAQ,EAAC,UAAU;IACnBC,UAAU,EAAER,UAAU,GAAGtD,QAAQ,CAAC0D,aAAa,CAACK,gBAAgB,CAAC,GAAG7E,SAAU;AAC9E8E,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,aAAa,EAAC,QAAQ;IAAA/B,QAAA,EAAA,cAEtBnB,GAAA,CAACM,wBAAwB,EAAA;AACvBH,MAAAA,MAAM,EAAEgD,aAAc;AACtB5D,MAAAA,QAAQ,EAAE+C,YAAY,KAAK,MAAM,IAAIA,YAAY,KAAK,KAAM;AAC5Dc,MAAAA,UAAU,EAAEZ,qBAAqB,GAAG,SAAS,GAAG,QAAA;AAAS,KAC1D,CAAC,eACFxC,GAAA,CAAC6C,GAAG,EAAA;AAACE,MAAAA,UAAU,EAAE9D,QAAQ,CAAC,CAAC0D,aAAa,CAACU,mBAAmB,CAAE;AAAAlC,MAAAA,QAAA,EAAEkB,MAAAA;AAAM,KAAM,CAAC,eAC7ErC,GAAA,CAACM,wBAAwB,EAAA;AACvBf,MAAAA,QAAQ,EAAE+C,YAAY,KAAK,MAAM,IAAIA,YAAY,KAAK,OAAQ;AAC9Dc,MAAAA,UAAU,EAAEX,mBAAmB,GAAG,SAAS,GAAG,QAAA;AAAS,KACxD,CAAC,CAAA;AAAA,GACC,CAAC,CAAA;AAEV,CAAC,CAAA;AAED,IAAMa,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,KAAA,EAKkC;AAAA,EAAA,IAAAC,YAAA,GAAAD,KAAA,CAJnDlB,MAAM;AAANA,IAAAA,MAAM,GAAAmB,YAAA,KAAGzB,KAAAA,CAAAA,GAAAA,aAAa,GAAAyB,YAAA;IACtBlB,YAAY,GAAAiB,KAAA,CAAZjB,YAAY;IACZE,qBAAqB,GAAAe,KAAA,CAArBf,qBAAqB;IACrBC,mBAAmB,GAAAc,KAAA,CAAnBd,mBAAmB,CAAA;AAEnB,EAAA,IAAAgB,cAAA,GAAiB5B,YAAY,EAAE;IAAvBC,IAAI,GAAA2B,cAAA,CAAJ3B,IAAI,CAAA;AACZ,EAAA,IAAMa,aAAa,GAAGC,qBAAqB,CAACd,IAAI,CAAC,CAAA;EAEjD,oBACEf,IAAA,CAAC8B,GAAG,EAAA;AAACC,IAAAA,QAAQ,EAAC,UAAU;AAACG,IAAAA,OAAO,EAAC,MAAM;AAACC,IAAAA,aAAa,EAAC,QAAQ;IAAA/B,QAAA,EAAA,cAC5DnB,GAAA,CAACW,oBAAoB,EAAA;AACnByC,MAAAA,UAAU,EAAEZ,qBAAqB,GAAG,SAAS,GAAG,QAAS;AACzDjD,MAAAA,QAAQ,EAAE+C,YAAY,KAAK,MAAM,IAAIA,YAAY,KAAK,KAAA;AAAM,KAC7D,CAAC,eACFtC,GAAA,CAAC6C,GAAG,EAAA;MACFE,UAAU,EAAE9D,QAAQ,CAAC,CAAC0D,aAAa,CAACU,mBAAmB,GAAGV,aAAa,CAACK,gBAAgB,CAAE;AAC1FU,MAAAA,SAAS,EAAEzE,QAAQ,CAAC0D,aAAa,CAACgB,kBAAkB,CAAE;AAAAxC,MAAAA,QAAA,EAErDkB,MAAAA;AAAM,KACJ,CAAC,eACNrC,GAAA,CAACM,wBAAwB,EAAA;AACvB8C,MAAAA,UAAU,EAAEX,mBAAmB,GAAG,SAAS,GAAG,QAAS;AACvDM,MAAAA,UAAU,EAAE9D,QAAQ,CAAC0D,aAAa,CAACK,gBAAgB,CAAE;AACrDzD,MAAAA,QAAQ,EAAE+C,YAAY,KAAK,MAAM,IAAIA,YAAY,KAAK,OAAA;AAAQ,KAC/D,CAAC,CAAA;AAAA,GACC,CAAC,CAAA;AAEV,CAAC,CAAA;AAED,IAAMsB,WAAW,GAAG,SAAdA,WAAWA,CAAAC,KAAA,EAKoC;AAAA,EAAA,IAAAC,YAAA,GAAAD,KAAA,CAJnDxB,MAAM;AAANA,IAAAA,MAAM,GAAAyB,YAAA,KAAG/B,KAAAA,CAAAA,GAAAA,aAAa,GAAA+B,YAAA;IACtBxB,YAAY,GAAAuB,KAAA,CAAZvB,YAAY;IACZE,qBAAqB,GAAAqB,KAAA,CAArBrB,qBAAqB;IACrBC,mBAAmB,GAAAoB,KAAA,CAAnBpB,mBAAmB,CAAA;AAEnB,EAAA,IAAAsB,cAAA,GAAiBlC,YAAY,EAAE;IAAvBC,IAAI,GAAAiC,cAAA,CAAJjC,IAAI,CAAA;AACZ,EAAA,IAAMa,aAAa,GAAGC,qBAAqB,CAACd,IAAI,CAAC,CAAA;EACjD,oBACEf,IAAA,CAAC8B,GAAG,EAAA;AAACC,IAAAA,QAAQ,EAAC,UAAU;AAACG,IAAAA,OAAO,EAAC,MAAM;AAACC,IAAAA,aAAa,EAAC,QAAQ;IAAA/B,QAAA,EAAA,cAC5DnB,GAAA,CAACM,wBAAwB,EAAA;AACvB8C,MAAAA,UAAU,EAAEZ,qBAAqB,GAAG,SAAS,GAAG,QAAS;AACzDO,MAAAA,UAAU,EAAE9D,QAAQ,CAAC0D,aAAa,CAACK,gBAAgB,CAAE;AACrD7C,MAAAA,MAAM,EAAEgD,aAAc;AACtB5D,MAAAA,QAAQ,EAAE+C,YAAY,KAAK,MAAM,IAAIA,YAAY,KAAK,KAAA;AAAM,KAC7D,CAAC,eACFtC,GAAA,CAAC6C,GAAG,EAAA;MACFE,UAAU,EAAE9D,QAAQ,CAAC,CAAC0D,aAAa,CAACU,mBAAmB,GAAGV,aAAa,CAACK,gBAAgB,CAAE;AAAA7B,MAAAA,QAAA,EAEzFkB,MAAAA;AAAM,KACJ,CAAC,eACNrC,GAAA,CAACM,wBAAwB,EAAA;AACvByC,MAAAA,UAAU,EAAE9D,QAAQ,CAAC0D,aAAa,CAACK,gBAAgB,CAAE;AACrDI,MAAAA,UAAU,EAAEX,mBAAmB,GAAG,SAAS,GAAG,QAAS;AACvDlD,MAAAA,QAAQ,EAAE+C,YAAY,KAAK,MAAM,IAAIA,YAAY,KAAK,OAAA;AAAQ,KAC/D,CAAC,eACFtC,GAAA,CAACwB,uBAAuB,EAAA;AACtBjC,MAAAA,QAAQ,EAAE+C,YAAY,KAAK,MAAM,IAAIA,YAAY,KAAK,OAAQ;AAC9Dc,MAAAA,UAAU,EAAEX,mBAAmB,GAAG,SAAS,GAAG,QAAA;AAAS,KACxD,CAAC,CAAA;AAAA,GACC,CAAC,CAAA;AAEV,CAAC,CAAA;AAED,IAAMuB,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAAC,KAAA,EAK6B;AAAA,EAAA,IAAAC,YAAA,GAAAD,KAAA,CAJnD5B,MAAM;AAANA,IAAAA,MAAM,GAAA6B,YAAA,KAAGnC,KAAAA,CAAAA,GAAAA,aAAa,GAAAmC,YAAA;IACtB5B,YAAY,GAAA2B,KAAA,CAAZ3B,YAAY;IACZE,qBAAqB,GAAAyB,KAAA,CAArBzB,qBAAqB;IACrBC,mBAAmB,GAAAwB,KAAA,CAAnBxB,mBAAmB,CAAA;EAEnB,oBACE1B,IAAA,CAAC8B,GAAG,EAAA;AACFC,IAAAA,QAAQ,EAAC,UAAU;AACnBG,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,aAAa,EAAC,KAAK;AACnB1D,IAAAA,KAAK,EAAC,MAAM;AACZ2E,IAAAA,cAAc,EAAC,QAAQ;AACvBC,IAAAA,UAAU,EAAC,QAAQ;IAAAjD,QAAA,EAAA,cAEnBnB,GAAA,CAACX,0BAA0B,EAAA;AACzBE,MAAAA,QAAQ,EAAE+C,YAAY,KAAK,MAAM,IAAIA,YAAY,KAAK,KAAM;AAC5Dc,MAAAA,UAAU,EAAEZ,qBAAqB,GAAG,SAAS,GAAG,QAAA;AAAS,KAC1D,CAAC,eACFxC,GAAA,CAAC6C,GAAG,EAAA;AAAA1B,MAAAA,QAAA,EAAEkB,MAAAA;AAAM,KAAM,CAAC,eACnBrC,GAAA,CAACX,0BAA0B,EAAA;AACzBE,MAAAA,QAAQ,EAAE+C,YAAY,KAAK,MAAM,IAAIA,YAAY,KAAK,OAAQ;AAC9Dc,MAAAA,UAAU,EAAEX,mBAAmB,GAAG,SAAS,GAAG,QAAA;AAAS,KACxD,CAAC,CAAA;AAAA,GACC,CAAC,CAAA;AAEV,CAAC,CAAA;AAED,IAAM4B,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAAC,MAAA,EAK6B;AAAA,EAAA,IAAAC,aAAA,GAAAD,MAAA,CAJnDjC,MAAM;AAANA,IAAAA,MAAM,GAAAkC,aAAA,KAAGxC,KAAAA,CAAAA,GAAAA,aAAa,GAAAwC,aAAA;IACtBjC,YAAY,GAAAgC,MAAA,CAAZhC,YAAY;IACZG,mBAAmB,GAAA6B,MAAA,CAAnB7B,mBAAmB;IACnBD,qBAAqB,GAAA8B,MAAA,CAArB9B,qBAAqB,CAAA;AAErB,EAAA,IAAAgC,cAAA,GAAiB3C,YAAY,EAAE;IAAvBC,IAAI,GAAA0C,cAAA,CAAJ1C,IAAI,CAAA;AACZ,EAAA,IAAMa,aAAa,GAAGC,qBAAqB,CAACd,IAAI,CAAC,CAAA;EACjD,oBACEf,IAAA,CAAC8B,GAAG,EAAA;AAACC,IAAAA,QAAQ,EAAC,UAAU;AAACG,IAAAA,OAAO,EAAC,MAAM;AAACC,IAAAA,aAAa,EAAC,QAAQ;IAAA/B,QAAA,EAAA,cAC5DnB,GAAA,CAACW,oBAAoB,EAAA;AACnByC,MAAAA,UAAU,EAAEZ,qBAAqB,GAAG,SAAS,GAAG,QAAS;AACzDjD,MAAAA,QAAQ,EAAE+C,YAAY,KAAK,MAAM,IAAIA,YAAY,KAAK,KAAA;KACvD,CAAC,eACFtC,GAAA,CAAC6C,GAAAA;AACC;AAAA,MAAA;MACAE,UAAU,EAAE9D,QAAQ,CAAC,CAAC0D,aAAa,CAACU,mBAAmB,GAAGV,aAAa,CAACK,gBAAgB,CAAE;AAC1FU,MAAAA,SAAS,EAAEzE,QAAQ,CAAC0D,aAAa,CAACgB,kBAAkB,CAAE;AAAAxC,MAAAA,QAAA,EAErDkB,MAAAA;AAAM,KACJ,CAAC,eACNrC,GAAA,CAACM,wBAAwB,EAAA;AACvByC,MAAAA,UAAU,EAAE9D,QAAQ,CAAC0D,aAAa,CAACK,gBAAgB,CAAE;AACrDI,MAAAA,UAAU,EAAEX,mBAAmB,GAAG,SAAS,GAAG,QAAS;AACvDlD,MAAAA,QAAQ,EAAE+C,YAAY,KAAK,MAAM,IAAIA,YAAY,KAAK,OAAA;AAAQ,KAC/D,CAAC,eACFtC,GAAA,CAACwB,uBAAuB,EAAA;AACtB4B,MAAAA,UAAU,EAAEX,mBAAmB,GAAG,SAAS,GAAG,QAAS;AACvDlD,MAAAA,QAAQ,EAAE+C,YAAY,KAAK,MAAM,IAAIA,YAAY,KAAK,OAAA;AAAQ,KAC/D,CAAC,CAAA;AAAA,GACC,CAAC,CAAA;AAEV,CAAC,CAAA;AAED,IAAMmC,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,MAAA,EAM2B;AAAA,EAAA,IAAAC,eAAA,GAAAD,MAAA,CALvCE,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,eAAA;IACpBnC,qBAAqB,GAAAkC,MAAA,CAArBlC,qBAAqB;IACrBC,mBAAmB,GAAAiC,MAAA,CAAnBjC,mBAAmB;IACnBJ,MAAM,GAAAqC,MAAA,CAANrC,MAAM;IACNC,YAAY,GAAAoC,MAAA,CAAZpC,YAAY,CAAA;AAEZ,EAAA,IAAAuC,cAAA,GAAwBhD,YAAY,EAAE;IAA9BiD,WAAW,GAAAD,cAAA,CAAXC,WAAW,CAAA;AACnB,EAAA,IAAMC,WAAW,GAAG;AAClBvC,IAAAA,qBAAqB,EAArBA,qBAAqB;AACrBC,IAAAA,mBAAmB,EAAnBA,mBAAmB;AACnBJ,IAAAA,MAAM,EAANA,MAAM;AACNC,IAAAA,YAAY,EAAZA,YAAAA;GACD,CAAA;EAED,IAAIwC,WAAW,KAAK,YAAY,EAAE;IAChC,oBAAO9E,GAAA,CAACgE,kBAAkB,EAAA9D,aAAA,CAAK6E,EAAAA,EAAAA,WAAW,CAAG,CAAC,CAAA;AAChD,GAAA;EAEA,IAAIH,QAAQ,KAAK,OAAO,EAAE;IACxB,oBAAO5E,GAAA,CAACsD,aAAa,EAAApD,aAAA,CAAK6E,EAAAA,EAAAA,WAAW,CAAG,CAAC,CAAA;AAC3C,GAAA;EAEA,IAAIH,QAAQ,KAAK,QAAQ,EAAE;IACzB,oBAAO5E,GAAA,CAACkC,gBAAgB,EAAAhC,aAAA,CAAAA,aAAA,KAAK6E,WAAW,CAAA,EAAA,EAAA,EAAA;AAAExC,MAAAA,UAAU,EAAE,IAAA;AAAK,KAAA,CAAE,CAAC,CAAA;AAChE,GAAA;EAEA,IAAIqC,QAAQ,KAAK,KAAK,EAAE;IACtB,oBAAO5E,GAAA,CAAC4D,WAAW,EAAA1D,aAAA,CAAK6E,EAAAA,EAAAA,WAAW,CAAG,CAAC,CAAA;AACzC,GAAA;EAEA,IAAIH,QAAQ,KAAK,aAAa,EAAE;IAC9B,oBAAO5E,GAAA,CAACqE,kBAAkB,EAAAnE,aAAA,CAAK6E,EAAAA,EAAAA,WAAW,CAAG,CAAC,CAAA;AAChD,GAAA;EAEA,oBAAO/E,GAAA,CAACkC,gBAAgB,EAAAhC,aAAA,CAAK6E,EAAAA,EAAAA,WAAW,CAAG,CAAC,CAAA;AAC9C;;;;"}
|
|
@@ -125,7 +125,7 @@ var getOnLightOverrides = function getOnLightOverrides(brandColors) {
|
|
|
125
125
|
text: {
|
|
126
126
|
primary: {
|
|
127
127
|
normal: foregroundOnSurface,
|
|
128
|
-
disabled:
|
|
128
|
+
disabled: brandColors.a200,
|
|
129
129
|
muted: foregroundOnSurface,
|
|
130
130
|
subtle: foregroundOnSurface
|
|
131
131
|
},
|
|
@@ -139,7 +139,7 @@ var getOnLightOverrides = function getOnLightOverrides(brandColors) {
|
|
|
139
139
|
icon: {
|
|
140
140
|
primary: {
|
|
141
141
|
normal: foregroundOnSurface,
|
|
142
|
-
disabled:
|
|
142
|
+
disabled: brandColors.a200,
|
|
143
143
|
muted: foregroundOnSurface,
|
|
144
144
|
subtle: foregroundOnSurface
|
|
145
145
|
},
|
|
@@ -208,7 +208,7 @@ var getOnDarkOverrides = function getOnDarkOverrides(brandColors) {
|
|
|
208
208
|
text: {
|
|
209
209
|
primary: {
|
|
210
210
|
normal: foregroundOnSurface,
|
|
211
|
-
disabled:
|
|
211
|
+
disabled: brandColors.a400,
|
|
212
212
|
muted: foregroundOnSurface,
|
|
213
213
|
subtle: foregroundOnSurface
|
|
214
214
|
},
|
|
@@ -222,7 +222,7 @@ var getOnDarkOverrides = function getOnDarkOverrides(brandColors) {
|
|
|
222
222
|
icon: {
|
|
223
223
|
primary: {
|
|
224
224
|
normal: foregroundOnSurface,
|
|
225
|
-
disabled:
|
|
225
|
+
disabled: brandColors.a400,
|
|
226
226
|
muted: foregroundOnSurface,
|
|
227
227
|
subtle: foregroundOnSurface
|
|
228
228
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createTheme.js","sources":["../../../../../../src/tokens/theme/createTheme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\nimport type { WCAG2Options, ColorInput } from 'tinycolor2';\nimport type { ThemeTokens } from './theme';\nimport overrideTheme from './overrideTheme';\nimport bladeTheme from './bladeTheme';\nimport { colors as globalColors, opacity } from '~tokens/global';\nimport type { ColorChromaticScale } from '~tokens/global/colors';\nimport { throwBladeError } from '~utils/logger';\nimport type { DeepPartial } from '~utils/isPartialMatchObjectKeys';\n\n// WCAG2ContrastOptions are the options used to determine if a color is readable\nconst WCAG2ContrastOptions: WCAG2Options = {\n level: 'AAA',\n size: 'large',\n};\n\n/**\n * getColorWithOpacity\n * @param color - The color to add opacity to\n * @param opacity - The opacity to add to the color\n * @returns The color with the opacity added\n * @example\n * getColorWithOpacity('#fff', 0.5) // returns 'hsla(0, 0%, 100%, 0.5)'\n *\n **/\nconst getColorWithOpacity = (color: ColorInput, opacity: number): string => {\n return tinycolor(color).setAlpha(opacity).toHslString();\n};\n\n/**\n *\n * @description\n * Generates a chromatic color palette based on the base color passed in.\n * The base color is used to generate a palette of 11 colors, 5 shades lighter and 5 shades darker than the base color.\n * @param baseColorInput - The base color to generate the chromatic color palette from in hex, rgb, or hsl format\n * @returns Array of chromatic color palette\n */\nconst generateChromaticBrandColors = (baseColorInput: ColorInput): ColorChromaticScale => {\n const baseColor = tinycolor(baseColorInput);\n const baseColorHslString = baseColor.toHslString();\n if (__DEV__) {\n if (!baseColor.isValid()) {\n throwBladeError({\n message: 'Invalid brandColor passed',\n moduleName: 'createTheme',\n });\n }\n }\n\n const palette = [baseColorHslString]; // Include the original color\n const brightness = tinycolor(baseColor).getBrightness();\n // Determine how much to lighten or darken the colors depending on the brightness of the base color\n const lightnessFactor = brightness > 150 ? 3 : 6;\n const darknessFactor = brightness < 50 ? 3 : 5;\n\n let currentColor = baseColor;\n\n // Generate shades lighter\n for (let lightShadeIndex = 0; lightShadeIndex < 6; lightShadeIndex++) {\n currentColor = currentColor.brighten(lightnessFactor);\n palette.push(currentColor.toHslString());\n }\n\n currentColor = tinycolor(baseColorHslString); // Reset to the base color\n\n // Generate shades darker\n for (let darkShadeIndex = 0; darkShadeIndex < 4; darkShadeIndex++) {\n currentColor = currentColor.darken(darknessFactor);\n palette.unshift(currentColor.toHslString()); // Add shades at the beginning of the palette\n }\n\n const colorPalette = palette.reverse();\n const brandPrimaryColor = colorPalette[6];\n\n const brandColors: ColorChromaticScale = {\n '50': colorPalette[0],\n '100': colorPalette[1],\n '200': colorPalette[2],\n '300': colorPalette[3],\n '400': colorPalette[4],\n '500': colorPalette[5],\n '600': brandPrimaryColor,\n '700': colorPalette[7],\n '800': colorPalette[8],\n '900': colorPalette[9],\n '1000': colorPalette[10],\n a50: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n a150: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n a100: getColorWithOpacity(brandPrimaryColor, opacity[200]),\n a200: getColorWithOpacity(brandPrimaryColor, opacity[300]),\n a400: getColorWithOpacity(brandPrimaryColor, opacity[400]),\n };\n\n return brandColors;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the light theme\n * @description Returns overrides for the light theme with the brand colors passed in\n * @returns Overrides for the light theme with the custom brand colors\n */\nconst getOnLightOverrides = (\n brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onLight']> => {\n // Select the most readable color to use as the foreground color on top of surface color\n // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n const foregroundOnSurface = tinycolor.isReadable(\n globalColors.neutral.blueGrayLight[50],\n brandColors[600],\n WCAG2ContrastOptions,\n )\n ? brandColors[600]\n : globalColors.neutral.blueGrayLight[1100];\n\n const foregroundOnBrand = tinycolor\n .mostReadable(\n brandColors[900],\n [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n WCAG2ContrastOptions,\n )\n .toHslString();\n\n // Overrides for the light theme with the brand colors passed in\n const lightThemeOverrides: DeepPartial<ThemeTokens['colors']['onLight']> = {\n interactive: {\n background: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n fadedHighlighted: brandColors.a150,\n },\n },\n border: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n },\n },\n text: {\n primary: {\n normal: foregroundOnSurface,\n disabled: foregroundOnSurface,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n icon: {\n primary: {\n normal: foregroundOnSurface,\n disabled: foregroundOnSurface,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n },\n surface: {\n background: {\n primary: {\n intense: brandColors[600],\n subtle: brandColors[200],\n },\n },\n icon: {\n primary: {\n normal: brandColors[600],\n },\n },\n text: {\n primary: {\n normal: brandColors[600],\n },\n },\n },\n };\n\n return lightThemeOverrides;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the dark theme\n * @description Returns overrides for the dark theme with the brand colors passed in\n * @returns Overrides for the dark theme with the custom brand colors\n */\nconst getOnDarkOverrides = (\n brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onDark']> => {\n // Select the most readable color to use as the foreground color on top of surface color\n // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n const foregroundOnSurface = tinycolor.isReadable(\n globalColors.neutral.blueGrayDark[1100],\n brandColors[400],\n WCAG2ContrastOptions,\n )\n ? brandColors[400]\n : globalColors.neutral.blueGrayDark[0];\n\n const foregroundOnBrand = tinycolor\n .mostReadable(\n brandColors[900],\n [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n WCAG2ContrastOptions,\n )\n .toHslString();\n\n // Overrides for the dark theme with the brand colors passed in\n const darkThemeOverrides: DeepPartial<ThemeTokens['colors']['onDark']> = {\n interactive: {\n background: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n fadedHighlighted: brandColors.a150,\n },\n },\n border: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n },\n },\n text: {\n primary: {\n normal: foregroundOnSurface,\n disabled: foregroundOnSurface,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n icon: {\n primary: {\n normal: foregroundOnSurface,\n disabled: foregroundOnSurface,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n },\n surface: {\n background: {\n primary: {\n intense: brandColors[600],\n subtle: brandColors[200],\n },\n },\n icon: {\n primary: {\n normal: brandColors[600],\n },\n },\n },\n };\n\n return darkThemeOverrides;\n};\n\n/**\n * @param {Object} themeConfig - The brand color and overrides to apply to the theme\n * @param {string} themeConfig.brandColor - The brand color to use to generate the theme. Can be in hex, rgb, or hsl format.\n * @description\n * Creates a Blade Theme based on the custom brand color\n * @returns The Theme Tokens with the custom brand colors\n * @example\n * const { theme, brandColors } = createTheme({ brandColor: '#19BEA2'})\n **/\nexport const createTheme = ({\n brandColor,\n}: {\n brandColor: ColorInput;\n}): { theme: ThemeTokens; brandColors: ColorChromaticScale } => {\n const chromaticBrandColors = generateChromaticBrandColors(brandColor);\n // Get onLight overrides\n const brandedLightTheme = getOnLightOverrides(chromaticBrandColors);\n // Get onDark overrides\n const brandedDarkTheme = getOnDarkOverrides(chromaticBrandColors);\n // Override the payment theme with the brand colors\n const brandedThemeTokens = overrideTheme({\n baseThemeTokens: bladeTheme,\n overrides: {\n name: `custom-${tinycolor(brandColor).toHex()}`,\n colors: {\n onLight: {\n ...brandedLightTheme,\n },\n onDark: {\n ...brandedDarkTheme,\n },\n },\n },\n });\n\n return { theme: brandedThemeTokens, brandColors: chromaticBrandColors };\n};\n"],"names":["WCAG2ContrastOptions","level","size","getColorWithOpacity","color","opacity","tinycolor","setAlpha","toHslString","generateChromaticBrandColors","baseColorInput","baseColor","baseColorHslString","isValid","throwBladeError","message","moduleName","palette","brightness","getBrightness","lightnessFactor","darknessFactor","currentColor","lightShadeIndex","brighten","push","darkShadeIndex","darken","unshift","colorPalette","reverse","brandPrimaryColor","brandColors","a50","a150","a100","a200","a400","getOnLightOverrides","foregroundOnSurface","isReadable","globalColors","neutral","blueGrayLight","foregroundOnBrand","mostReadable","white","black","lightThemeOverrides","interactive","background","primary","highlighted","disabled","faded","fadedHighlighted","border","text","normal","muted","subtle","onPrimary","icon","surface","intense","getOnDarkOverrides","blueGrayDark","darkThemeOverrides","createTheme","_ref","brandColor","chromaticBrandColors","brandedLightTheme","brandedDarkTheme","brandedThemeTokens","overrideTheme","baseThemeTokens","bladeTheme","overrides","name","concat","toHex","colors","onLight","_objectSpread","onDark","theme"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"createTheme.js","sources":["../../../../../../src/tokens/theme/createTheme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\nimport type { WCAG2Options, ColorInput } from 'tinycolor2';\nimport type { ThemeTokens } from './theme';\nimport overrideTheme from './overrideTheme';\nimport bladeTheme from './bladeTheme';\nimport { colors as globalColors, opacity } from '~tokens/global';\nimport type { ColorChromaticScale } from '~tokens/global/colors';\nimport { throwBladeError } from '~utils/logger';\nimport type { DeepPartial } from '~utils/isPartialMatchObjectKeys';\n\n// WCAG2ContrastOptions are the options used to determine if a color is readable\nconst WCAG2ContrastOptions: WCAG2Options = {\n level: 'AAA',\n size: 'large',\n};\n\n/**\n * getColorWithOpacity\n * @param color - The color to add opacity to\n * @param opacity - The opacity to add to the color\n * @returns The color with the opacity added\n * @example\n * getColorWithOpacity('#fff', 0.5) // returns 'hsla(0, 0%, 100%, 0.5)'\n *\n **/\nconst getColorWithOpacity = (color: ColorInput, opacity: number): string => {\n return tinycolor(color).setAlpha(opacity).toHslString();\n};\n\n/**\n *\n * @description\n * Generates a chromatic color palette based on the base color passed in.\n * The base color is used to generate a palette of 11 colors, 5 shades lighter and 5 shades darker than the base color.\n * @param baseColorInput - The base color to generate the chromatic color palette from in hex, rgb, or hsl format\n * @returns Array of chromatic color palette\n */\nconst generateChromaticBrandColors = (baseColorInput: ColorInput): ColorChromaticScale => {\n const baseColor = tinycolor(baseColorInput);\n const baseColorHslString = baseColor.toHslString();\n if (__DEV__) {\n if (!baseColor.isValid()) {\n throwBladeError({\n message: 'Invalid brandColor passed',\n moduleName: 'createTheme',\n });\n }\n }\n\n const palette = [baseColorHslString]; // Include the original color\n const brightness = tinycolor(baseColor).getBrightness();\n // Determine how much to lighten or darken the colors depending on the brightness of the base color\n const lightnessFactor = brightness > 150 ? 3 : 6;\n const darknessFactor = brightness < 50 ? 3 : 5;\n\n let currentColor = baseColor;\n\n // Generate shades lighter\n for (let lightShadeIndex = 0; lightShadeIndex < 6; lightShadeIndex++) {\n currentColor = currentColor.brighten(lightnessFactor);\n palette.push(currentColor.toHslString());\n }\n\n currentColor = tinycolor(baseColorHslString); // Reset to the base color\n\n // Generate shades darker\n for (let darkShadeIndex = 0; darkShadeIndex < 4; darkShadeIndex++) {\n currentColor = currentColor.darken(darknessFactor);\n palette.unshift(currentColor.toHslString()); // Add shades at the beginning of the palette\n }\n\n const colorPalette = palette.reverse();\n const brandPrimaryColor = colorPalette[6];\n\n const brandColors: ColorChromaticScale = {\n '50': colorPalette[0],\n '100': colorPalette[1],\n '200': colorPalette[2],\n '300': colorPalette[3],\n '400': colorPalette[4],\n '500': colorPalette[5],\n '600': brandPrimaryColor,\n '700': colorPalette[7],\n '800': colorPalette[8],\n '900': colorPalette[9],\n '1000': colorPalette[10],\n a50: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n a150: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n a100: getColorWithOpacity(brandPrimaryColor, opacity[200]),\n a200: getColorWithOpacity(brandPrimaryColor, opacity[300]),\n a400: getColorWithOpacity(brandPrimaryColor, opacity[400]),\n };\n\n return brandColors;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the light theme\n * @description Returns overrides for the light theme with the brand colors passed in\n * @returns Overrides for the light theme with the custom brand colors\n */\nconst getOnLightOverrides = (\n brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onLight']> => {\n // Select the most readable color to use as the foreground color on top of surface color\n // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n const foregroundOnSurface = tinycolor.isReadable(\n globalColors.neutral.blueGrayLight[50],\n brandColors[600],\n WCAG2ContrastOptions,\n )\n ? brandColors[600]\n : globalColors.neutral.blueGrayLight[1100];\n\n const foregroundOnBrand = tinycolor\n .mostReadable(\n brandColors[900],\n [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n WCAG2ContrastOptions,\n )\n .toHslString();\n\n // Overrides for the light theme with the brand colors passed in\n const lightThemeOverrides: DeepPartial<ThemeTokens['colors']['onLight']> = {\n interactive: {\n background: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n fadedHighlighted: brandColors.a150,\n },\n },\n border: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n },\n },\n text: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a200,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n icon: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a200,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n },\n surface: {\n background: {\n primary: {\n intense: brandColors[600],\n subtle: brandColors[200],\n },\n },\n icon: {\n primary: {\n normal: brandColors[600],\n },\n },\n text: {\n primary: {\n normal: brandColors[600],\n },\n },\n },\n };\n\n return lightThemeOverrides;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the dark theme\n * @description Returns overrides for the dark theme with the brand colors passed in\n * @returns Overrides for the dark theme with the custom brand colors\n */\nconst getOnDarkOverrides = (\n brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onDark']> => {\n // Select the most readable color to use as the foreground color on top of surface color\n // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n const foregroundOnSurface = tinycolor.isReadable(\n globalColors.neutral.blueGrayDark[1100],\n brandColors[400],\n WCAG2ContrastOptions,\n )\n ? brandColors[400]\n : globalColors.neutral.blueGrayDark[0];\n\n const foregroundOnBrand = tinycolor\n .mostReadable(\n brandColors[900],\n [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n WCAG2ContrastOptions,\n )\n .toHslString();\n\n // Overrides for the dark theme with the brand colors passed in\n const darkThemeOverrides: DeepPartial<ThemeTokens['colors']['onDark']> = {\n interactive: {\n background: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n fadedHighlighted: brandColors.a150,\n },\n },\n border: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n },\n },\n text: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a400,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n icon: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a400,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n },\n surface: {\n background: {\n primary: {\n intense: brandColors[600],\n subtle: brandColors[200],\n },\n },\n icon: {\n primary: {\n normal: brandColors[600],\n },\n },\n },\n };\n\n return darkThemeOverrides;\n};\n\n/**\n * @param {Object} themeConfig - The brand color and overrides to apply to the theme\n * @param {string} themeConfig.brandColor - The brand color to use to generate the theme. Can be in hex, rgb, or hsl format.\n * @description\n * Creates a Blade Theme based on the custom brand color\n * @returns The Theme Tokens with the custom brand colors\n * @example\n * const { theme, brandColors } = createTheme({ brandColor: '#19BEA2'})\n **/\nexport const createTheme = ({\n brandColor,\n}: {\n brandColor: ColorInput;\n}): { theme: ThemeTokens; brandColors: ColorChromaticScale } => {\n const chromaticBrandColors = generateChromaticBrandColors(brandColor);\n // Get onLight overrides\n const brandedLightTheme = getOnLightOverrides(chromaticBrandColors);\n // Get onDark overrides\n const brandedDarkTheme = getOnDarkOverrides(chromaticBrandColors);\n // Override the payment theme with the brand colors\n const brandedThemeTokens = overrideTheme({\n baseThemeTokens: bladeTheme,\n overrides: {\n name: `custom-${tinycolor(brandColor).toHex()}`,\n colors: {\n onLight: {\n ...brandedLightTheme,\n },\n onDark: {\n ...brandedDarkTheme,\n },\n },\n },\n });\n\n return { theme: brandedThemeTokens, brandColors: chromaticBrandColors };\n};\n"],"names":["WCAG2ContrastOptions","level","size","getColorWithOpacity","color","opacity","tinycolor","setAlpha","toHslString","generateChromaticBrandColors","baseColorInput","baseColor","baseColorHslString","isValid","throwBladeError","message","moduleName","palette","brightness","getBrightness","lightnessFactor","darknessFactor","currentColor","lightShadeIndex","brighten","push","darkShadeIndex","darken","unshift","colorPalette","reverse","brandPrimaryColor","brandColors","a50","a150","a100","a200","a400","getOnLightOverrides","foregroundOnSurface","isReadable","globalColors","neutral","blueGrayLight","foregroundOnBrand","mostReadable","white","black","lightThemeOverrides","interactive","background","primary","highlighted","disabled","faded","fadedHighlighted","border","text","normal","muted","subtle","onPrimary","icon","surface","intense","getOnDarkOverrides","blueGrayDark","darkThemeOverrides","createTheme","_ref","brandColor","chromaticBrandColors","brandedLightTheme","brandedDarkTheme","brandedThemeTokens","overrideTheme","baseThemeTokens","bladeTheme","overrides","name","concat","toHex","colors","onLight","_objectSpread","onDark","theme"],"mappings":"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"}
|
|
@@ -10,7 +10,6 @@ import { SelectorGroupField } from '../../Form/Selector/SelectorGroupField.js';
|
|
|
10
10
|
import '../../Box/styledProps/index.js';
|
|
11
11
|
import '../../../utils/index.js';
|
|
12
12
|
import '../../BladeProvider/index.js';
|
|
13
|
-
import '../../../utils/makeSize/index.js';
|
|
14
13
|
import '../../../utils/makeAnalyticsAttribute/index.js';
|
|
15
14
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
16
15
|
import useTheme from '../../BladeProvider/useTheme.js';
|
|
@@ -19,10 +18,9 @@ import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
|
|
|
19
18
|
import { getStyledProps } from '../../Box/styledProps/getStyledProps.js';
|
|
20
19
|
import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
|
|
21
20
|
import { FormLabel } from '../../Form/FormLabel.js';
|
|
22
|
-
import { makeSize } from '../../../utils/makeSize/makeSize.js';
|
|
23
21
|
import { FormHint } from '../../Form/FormHint.js';
|
|
24
22
|
|
|
25
|
-
var _excluded = ["children", "label", "helpText", "isDisabled", "isRequired", "necessityIndicator", "labelPosition", "validationState", "errorText", "name", "defaultValue", "onChange", "value", "size", "testID"];
|
|
23
|
+
var _excluded = ["children", "label", "helpText", "isDisabled", "isRequired", "necessityIndicator", "labelPosition", "validationState", "errorText", "name", "defaultValue", "onChange", "value", "size", "testID", "orientation"];
|
|
26
24
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
27
25
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
28
26
|
var CheckboxGroup = function CheckboxGroup(_ref) {
|
|
@@ -46,6 +44,8 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
|
|
|
46
44
|
_ref$size = _ref.size,
|
|
47
45
|
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
48
46
|
testID = _ref.testID,
|
|
47
|
+
_ref$orientation = _ref.orientation,
|
|
48
|
+
orientation = _ref$orientation === void 0 ? 'vertical' : _ref$orientation,
|
|
49
49
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
50
50
|
var _useCheckboxGroup = useCheckboxGroup({
|
|
51
51
|
defaultValue: defaultValue,
|
|
@@ -71,7 +71,6 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
|
|
|
71
71
|
}),
|
|
72
72
|
matchedDeviceType = _useBreakpoint.matchedDeviceType;
|
|
73
73
|
var gap = checkboxSizes.group.gap[size][matchedDeviceType];
|
|
74
|
-
var childCount = React__default.Children.count(children);
|
|
75
74
|
return /*#__PURE__*/jsx(CheckboxGroupProvider, {
|
|
76
75
|
value: contextValue,
|
|
77
76
|
children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, getStyledProps(rest)), {}, {
|
|
@@ -92,10 +91,10 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
|
|
|
92
91
|
}) : null, /*#__PURE__*/jsxs(BaseBox, {
|
|
93
92
|
children: [/*#__PURE__*/jsx(BaseBox, {
|
|
94
93
|
display: "flex",
|
|
95
|
-
flexDirection:
|
|
94
|
+
flexDirection: orientation === 'horizontal' ? 'row' : 'column',
|
|
95
|
+
gap: gap,
|
|
96
96
|
children: React__default.Children.map(children, function (child, index) {
|
|
97
97
|
return /*#__PURE__*/jsx(BaseBox, {
|
|
98
|
-
marginBottom: index === childCount - 1 ? makeSize(0) : gap,
|
|
99
98
|
children: child
|
|
100
99
|
}, index);
|
|
101
100
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxGroup.js","sources":["../../../../../../../src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { checkboxSizes } from '../checkboxTokens';\nimport { CheckboxGroupProvider } from './CheckboxGroupContext';\nimport { useCheckboxGroup } from './useCheckboxGroup';\nimport { FormLabel, FormHint } from '~components/Form';\nimport BaseBox from '~components/Box/BaseBox';\nimport { SelectorGroupField } from '~components/Form/Selector/SelectorGroupField';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useBreakpoint } from '~utils';\n\nimport { useTheme } from '~components/BladeProvider';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport {
|
|
1
|
+
{"version":3,"file":"CheckboxGroup.js","sources":["../../../../../../../src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { checkboxSizes } from '../checkboxTokens';\nimport { CheckboxGroupProvider } from './CheckboxGroupContext';\nimport { useCheckboxGroup } from './useCheckboxGroup';\nimport { FormLabel, FormHint } from '~components/Form';\nimport BaseBox from '~components/Box/BaseBox';\nimport { SelectorGroupField } from '~components/Form/Selector/SelectorGroupField';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useBreakpoint } from '~utils';\n\nimport { useTheme } from '~components/BladeProvider';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype CheckboxGroupProps = {\n /**\n * Accepts multiple checkboxes as children\n */\n children: React.ReactNode;\n /**\n * Help text of the checkbox group\n */\n helpText?: string;\n /**\n * Error text of the checkbox group\n * Renders when `validationState` is set to 'error'\n *\n * Overrides helpText\n */\n errorText?: string;\n /**\n * Sets the error state of the CheckboxGroup\n * If set to `error` it will render the `errorText` of the group,\n * and propagate `invalid` prop to every checkbox\n */\n validationState?: 'error' | 'none';\n /**\n * Renders a necessity indicator after CheckboxGroup label\n *\n * If set to `undefined` it renders nothing.\n */\n necessityIndicator?: 'required' | 'optional' | 'none';\n /**\n * Sets the disabled state of the CheckboxGroup\n * If set to `true` it propagate down to all the checkboxes\n *\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Sets the required state of the CheckboxGroup\n * @default false\n */\n isRequired?: boolean;\n /**\n * Renders the label of the checkbox group\n */\n label?: string;\n /**\n * Sets the position of the label\n *\n * @default 'top'\n */\n labelPosition?: 'top' | 'left';\n /**\n * Initial value of the checkbox group\n */\n defaultValue?: string[];\n /**\n * value of the checkbox group\n *\n * Use `onChange` to update its value\n */\n value?: string[];\n /**\n * The callback invoked when any of the checkbox's state changes\n */\n onChange?: ({ name, values }: { name: string; values: string[] }) => void;\n /**\n * The name of the input field in a checkbox\n * (Useful for form submission).\n */\n name?: string;\n /**\n * Size of the checkbox\n *\n * @default \"medium\"\n */\n size?: 'small' | 'medium' | 'large';\n /**\n * Orientation of the checkbox group\n *\n * @default \"vertical\"\n */\n orientation?: 'vertical' | 'horizontal';\n} & TestID &\n DataAnalyticsAttribute &\n StyledPropsBlade;\n\nconst CheckboxGroup = ({\n children,\n label,\n helpText,\n isDisabled = false,\n isRequired = false,\n necessityIndicator = 'none',\n labelPosition = 'top',\n validationState,\n errorText,\n name,\n defaultValue,\n onChange,\n value,\n size = 'medium',\n testID,\n orientation = 'vertical',\n ...rest\n}: CheckboxGroupProps): React.ReactElement => {\n const { contextValue, ids } = useCheckboxGroup({\n defaultValue,\n onChange,\n value,\n isDisabled,\n necessityIndicator,\n isRequired,\n name,\n labelPosition,\n validationState,\n size,\n });\n\n const { theme } = useTheme();\n const showError = validationState === 'error' && errorText;\n const showHelpText = !showError && helpText;\n const accessibilityText = `,${showError ? errorText : ''} ${showHelpText ? helpText : ''}`;\n const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n const gap = checkboxSizes.group.gap[size][matchedDeviceType];\n\n return (\n <CheckboxGroupProvider value={contextValue}>\n <BaseBox {...getStyledProps(rest)}>\n <SelectorGroupField\n position={labelPosition}\n labelledBy={ids.labelId}\n componentName=\"checkbox-group\"\n testID={testID}\n {...makeAnalyticsAttribute(rest)}\n >\n {label ? (\n <FormLabel\n as=\"span\"\n necessityIndicator={necessityIndicator}\n position={labelPosition}\n id={ids.labelId}\n accessibilityText={accessibilityText}\n size={size}\n >\n {label}\n </FormLabel>\n ) : null}\n <BaseBox>\n <BaseBox\n display=\"flex\"\n flexDirection={orientation === 'horizontal' ? 'row' : 'column'}\n gap={gap}\n >\n {React.Children.map(children, (child, index) => {\n return <BaseBox key={index}>{child}</BaseBox>;\n })}\n </BaseBox>\n <FormHint\n size={size}\n errorText={errorText}\n helpText={helpText}\n type={validationState === 'error' ? 'error' : 'help'}\n />\n </BaseBox>\n </SelectorGroupField>\n </BaseBox>\n </CheckboxGroupProvider>\n );\n};\n\nexport type { CheckboxGroupProps };\nexport { CheckboxGroup };\n"],"names":["CheckboxGroup","_ref","children","label","helpText","_ref$isDisabled","isDisabled","_ref$isRequired","isRequired","_ref$necessityIndicat","necessityIndicator","_ref$labelPosition","labelPosition","validationState","errorText","name","defaultValue","onChange","value","_ref$size","size","testID","_ref$orientation","orientation","rest","_objectWithoutProperties","_excluded","_useCheckboxGroup","useCheckboxGroup","contextValue","ids","_useTheme","useTheme","theme","showError","showHelpText","accessibilityText","concat","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","gap","checkboxSizes","group","_jsx","CheckboxGroupProvider","BaseBox","_objectSpread","getStyledProps","_jsxs","SelectorGroupField","position","labelledBy","labelId","componentName","makeAnalyticsAttribute","FormLabel","as","id","display","flexDirection","React","Children","map","child","index","FormHint","type"],"mappings":"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"}
|
|
@@ -5,16 +5,16 @@ var checkboxSizes = {
|
|
|
5
5
|
group: {
|
|
6
6
|
gap: {
|
|
7
7
|
small: {
|
|
8
|
-
mobile: 'spacing.
|
|
8
|
+
mobile: 'spacing.2',
|
|
9
9
|
desktop: 'spacing.2'
|
|
10
10
|
},
|
|
11
11
|
medium: {
|
|
12
|
-
mobile: 'spacing.
|
|
12
|
+
mobile: 'spacing.3',
|
|
13
13
|
desktop: 'spacing.3'
|
|
14
14
|
},
|
|
15
15
|
large: {
|
|
16
|
-
mobile: 'spacing.
|
|
17
|
-
desktop: 'spacing.
|
|
16
|
+
mobile: 'spacing.3',
|
|
17
|
+
desktop: 'spacing.3'
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkboxTokens.js","sources":["../../../../../../src/components/Checkbox/checkboxTokens.ts"],"sourcesContent":["import type { DotNotationToken } from '../../utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport { size } from '~tokens/global';\n\nconst checkboxSizes = {\n group: {\n gap: {\n small: {\n mobile: 'spacing.
|
|
1
|
+
{"version":3,"file":"checkboxTokens.js","sources":["../../../../../../src/components/Checkbox/checkboxTokens.ts"],"sourcesContent":["import type { DotNotationToken } from '../../utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport { size } from '~tokens/global';\n\nconst checkboxSizes = {\n group: {\n gap: {\n small: {\n mobile: 'spacing.2',\n desktop: 'spacing.2',\n },\n medium: {\n mobile: 'spacing.3',\n desktop: 'spacing.3',\n },\n large: {\n mobile: 'spacing.3',\n desktop: 'spacing.3',\n },\n },\n },\n icon: {\n small: {\n width: size[12],\n height: size[12],\n },\n medium: {\n width: size[16],\n height: size[16],\n },\n large: {\n width: size[20],\n height: size[20],\n },\n },\n} as const;\n\ntype ColorTokens = `colors.${DotNotationToken<Theme['colors']>}`;\ntype Variant = {\n border: {\n checked: ColorTokens;\n unchecked: ColorTokens;\n };\n background: {\n checked: ColorTokens;\n unchecked: ColorTokens;\n };\n};\n\ntype CheckboxIconColors = {\n variants: {\n default: Variant;\n disabled: Variant;\n negative: Variant;\n };\n};\n\nconst checkboxIconColors: CheckboxIconColors = {\n variants: {\n default: {\n border: {\n checked: 'colors.interactive.border.primary.default',\n unchecked: 'colors.interactive.border.gray.default',\n },\n background: {\n checked: 'colors.interactive.background.primary.default',\n unchecked: 'colors.transparent',\n },\n },\n disabled: {\n border: {\n checked: 'colors.interactive.border.primary.disabled',\n unchecked: 'colors.interactive.border.gray.disabled',\n },\n background: {\n checked: 'colors.interactive.background.primary.disabled',\n unchecked: 'colors.transparent',\n },\n },\n negative: {\n border: {\n checked: 'colors.interactive.border.negative.default',\n unchecked: 'colors.interactive.border.negative.default',\n },\n background: {\n checked: 'colors.interactive.background.negative.default',\n unchecked: 'colors.transparent',\n },\n },\n },\n} as const;\n\nconst checkboxHoverTokens: SelectorInputHoverTokens = {\n default: {\n background: {\n checked: 'colors.interactive.background.primary.highlighted',\n unchecked: 'colors.interactive.background.gray.faded',\n },\n border: {\n checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color\n unchecked: 'colors.interactive.border.gray.default',\n },\n },\n};\n\nexport { checkboxSizes, checkboxIconColors, checkboxHoverTokens };\n"],"names":["checkboxSizes","group","gap","small","mobile","desktop","medium","large","icon","width","size","height","checkboxIconColors","variants","border","checked","unchecked","background","disabled","negative","checkboxHoverTokens"],"mappings":";;;AAKA,IAAMA,aAAa,GAAG;AACpBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,GAAG,EAAE;AACHC,MAAAA,KAAK,EAAE;AACLC,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;OACV;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;OACV;AACDE,MAAAA,KAAK,EAAE;AACLH,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;AACX,OAAA;AACF,KAAA;GACD;AACDG,EAAAA,IAAI,EAAE;AACJL,IAAAA,KAAK,EAAE;AACLM,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;MACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;KAChB;AACDJ,IAAAA,MAAM,EAAE;AACNG,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;MACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;KAChB;AACDH,IAAAA,KAAK,EAAE;AACLE,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;MACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;AACjB,KAAA;AACF,GAAA;AACF,EAAU;AAsBV,IAAME,kBAAsC,GAAG;AAC7CC,EAAAA,QAAQ,EAAE;IACR,SAAS,EAAA;AACPC,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,2CAA2C;AACpDC,QAAAA,SAAS,EAAE,wCAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,+CAA+C;AACxDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDE,IAAAA,QAAQ,EAAE;AACRJ,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,4CAA4C;AACrDC,QAAAA,SAAS,EAAE,yCAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDG,IAAAA,QAAQ,EAAE;AACRL,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,4CAA4C;AACrDC,QAAAA,SAAS,EAAE,4CAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;AACF,KAAA;AACF,GAAA;AACF,EAAU;AAEV,IAAMI,mBAA6C,GAAG;EACpD,SAAS,EAAA;AACPH,IAAAA,UAAU,EAAE;AACVF,MAAAA,OAAO,EAAE,mDAAmD;AAC5DC,MAAAA,SAAS,EAAE,0CAAA;KACZ;AACDF,IAAAA,MAAM,EAAE;AACNC,MAAAA,OAAO,EAAE,mDAAmD;AAAE;AAC9DC,MAAAA,SAAS,EAAE,wCAAA;AACb,KAAA;AACF,GAAA;AACF;;;;"}
|
|
@@ -36,7 +36,6 @@ var useTaggedInput = function useTaggedInput(_ref) {
|
|
|
36
36
|
_useControllableState2 = _slicedToArray(_useControllableState, 2),
|
|
37
37
|
tagsValue = _useControllableState2[0],
|
|
38
38
|
setTagsValue = _useControllableState2[1];
|
|
39
|
-
var isTagsControlled = Boolean(tags);
|
|
40
39
|
var getNewTagsArray = function getNewTagsArray(indexToRemove) {
|
|
41
40
|
var currentTags = tagsValue;
|
|
42
41
|
if (!currentTags) {
|
|
@@ -62,16 +61,8 @@ var useTaggedInput = function useTaggedInput(_ref) {
|
|
|
62
61
|
isDisabled: isDisabled,
|
|
63
62
|
onDismiss: function onDismiss(_ref3) {
|
|
64
63
|
var tagIndex = _ref3.tagIndex;
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
});
|
|
68
|
-
if (!isTagsControlled) {
|
|
69
|
-
setTagsValue(function () {
|
|
70
|
-
return getNewTagsArray(tagIndex);
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
onTagChange === null || onTagChange === void 0 ? void 0 : onTagChange({
|
|
74
|
-
tags: getNewTagsArray(tagIndex)
|
|
64
|
+
setTagsValue(function () {
|
|
65
|
+
return getNewTagsArray(tagIndex);
|
|
75
66
|
});
|
|
76
67
|
}
|
|
77
68
|
});
|
|
@@ -90,13 +81,8 @@ var useTaggedInput = function useTaggedInput(_ref) {
|
|
|
90
81
|
if (!isTaggedInput) {
|
|
91
82
|
return;
|
|
92
83
|
}
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
return [];
|
|
96
|
-
});
|
|
97
|
-
}
|
|
98
|
-
onTagChange === null || onTagChange === void 0 ? void 0 : onTagChange({
|
|
99
|
-
tags: []
|
|
84
|
+
setTagsValue(function () {
|
|
85
|
+
return [];
|
|
100
86
|
});
|
|
101
87
|
};
|
|
102
88
|
var clearInput = function clearInput() {
|
|
@@ -135,26 +121,16 @@ var useTaggedInput = function useTaggedInput(_ref) {
|
|
|
135
121
|
var _e$event$preventDefau, _e$event;
|
|
136
122
|
(_e$event$preventDefau = (_e$event = e.event).preventDefault) === null || _e$event$preventDefau === void 0 ? void 0 : _e$event$preventDefau.call(_e$event); // we don't want textarea to treat enter as line break in tagged inputs
|
|
137
123
|
if (inputValue) {
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
return [].concat(_toConsumableArray(currentTags), [inputValue]);
|
|
141
|
-
});
|
|
142
|
-
}
|
|
143
|
-
onTagChange === null || onTagChange === void 0 ? void 0 : onTagChange({
|
|
144
|
-
tags: [].concat(_toConsumableArray(currentTags), [inputValue])
|
|
124
|
+
setTagsValue(function () {
|
|
125
|
+
return [].concat(_toConsumableArray(currentTags), [inputValue]);
|
|
145
126
|
});
|
|
146
127
|
clearInput();
|
|
147
128
|
setActiveTagIndex(-1);
|
|
148
129
|
}
|
|
149
130
|
}
|
|
150
131
|
if (e.key === 'Backspace' && !inputValue && activeTagIndex < 0 && currentTags.length > 0) {
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
return currentTags.slice(0, -1);
|
|
154
|
-
});
|
|
155
|
-
}
|
|
156
|
-
onTagChange === null || onTagChange === void 0 ? void 0 : onTagChange({
|
|
157
|
-
tags: currentTags.slice(0, -1)
|
|
132
|
+
setTagsValue(function () {
|
|
133
|
+
return currentTags.slice(0, -1);
|
|
158
134
|
});
|
|
159
135
|
}
|
|
160
136
|
};
|