@ledgerhq/react-ui 0.14.0 → 0.14.1-next.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/lib/cjs/components/Tag/index.js.map +2 -2
- package/lib/cjs/components/asorted/Divider/index.js +5 -1
- package/lib/cjs/components/asorted/Divider/index.js.map +2 -2
- package/lib/cjs/components/cta/Button/index.js +6 -0
- package/lib/cjs/components/cta/Button/index.js.map +2 -2
- package/lib/cjs/components/form/BaseInput/index.js.map +1 -1
- package/lib/cjs/components/form/Radio/RadioListElement.js.map +1 -1
- package/lib/cjs/components/form/SelectInput/ValueContainer.js.map +2 -2
- package/lib/cjs/components/layout/Flex/index.js.map +2 -2
- package/lib/cjs/components/layout/Popin/index.js.map +1 -1
- package/lib/cjs/components/loaders/ProgressLoader/ProgressLoader.stories.js +7 -0
- package/lib/cjs/components/loaders/ProgressLoader/ProgressLoader.stories.js.map +2 -2
- package/lib/cjs/components/loaders/ProgressLoader/index.js +26 -1
- package/lib/cjs/components/loaders/ProgressLoader/index.js.map +2 -2
- package/lib/components/Tag/index.d.ts +1 -1
- package/lib/components/Tag/index.js.map +1 -1
- package/lib/components/asorted/Divider/index.js +5 -1
- package/lib/components/asorted/Divider/index.js.map +1 -1
- package/lib/components/cta/Button/index.js +6 -0
- package/lib/components/cta/Button/index.js.map +1 -1
- package/lib/components/form/BaseInput/index.d.ts +3 -3
- package/lib/components/form/Radio/RadioListElement.d.ts +1 -1
- package/lib/components/form/Radio/index.d.ts +1 -1
- package/lib/components/form/SelectInput/ValueContainer.d.ts +2 -1
- package/lib/components/form/SelectInput/ValueContainer.js.map +1 -1
- package/lib/components/layout/Flex/index.d.ts +2 -1
- package/lib/components/layout/Flex/index.js.map +1 -1
- package/lib/components/layout/Popin/index.d.ts +2 -1
- package/lib/components/loaders/ProgressLoader/index.d.ts +5 -1
- package/lib/components/loaders/ProgressLoader/index.js +17 -2
- package/lib/components/loaders/ProgressLoader/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/Tag/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport { TextVariants } from \"src/styles/theme\";\nimport { border, BorderProps } from \"styled-system\";\nimport Text, { TextProps } from \"../asorted/Text\";\nimport baseStyled, { BaseStyledProps } from \"../styled\";\n\nexport type Size = \"large\" | \"medium\" | \"small\";\nexport type Type = \"plain\" | \"opacity\" | \"outlined\" | \"outlinedOpacity\";\n\nexport type TagProps = BaseStyledProps &\n BorderProps &\n React.PropsWithChildren<{\n /**\n * Changes the appearance based on the active state.\n */\n active?: boolean;\n /**\n * Tag style.\n */\n type?: Type;\n /**\n * Size of the tag, affects the padding and the casing (uppercase for small and medium)\n */\n size?: Size;\n /**\n * Props passed to the text component, overriding props set internally by Tag component\n */\n textProps?: TextProps;\n\n disabled?: boolean;\n }>;\n\nfunction getColor({ type, active, disabled }: TagProps) {\n switch (type) {\n case \"plain\":\n if (disabled) return active ? \"neutral.c00\" : \"neutral.c70\";\n return active ? \"neutral.c00\" : \"primary.c90\";\n default:\n return disabled ? \"neutral.c70\" : \"primary.c90\";\n }\n}\n\nfunction getBgColor({ type, active, disabled }: TagProps) {\n switch (type) {\n case \"plain\":\n return active ? (disabled ? \"neutral.c70\" : \"primary.c90\") : undefined;\n case \"opacity\":\n return active ? (disabled ? \"neutral.c30\" : \"primary.c20\") : undefined;\n default:\n return;\n }\n}\n\nfunction getBorderColor({ type, active, disabled }: TagProps) {\n if (!active) return;\n switch (type) {\n case \"outlined\":\n return disabled ? \"neutral.c70\" : \"primary.c90\";\n case \"outlinedOpacity\":\n return disabled ? \"neutral.c40\" : \"primary.c40\";\n }\n}\n\nfunction getPadding({ size }: TagProps) {\n switch (size) {\n case \"small\":\n return \"3px 5px\";\n case \"medium\":\n return \"6px 8px\";\n case \"large\":\n default:\n return \"9px 10px 10px\";\n }\n}\n\nfunction getTextProps({ size }: TagProps): {\n variant: TextVariants;\n fontWeight?: string;\n uppercase?: boolean;\n} {\n switch (size) {\n case \"small\":\n case \"medium\":\n return {\n variant: \"tiny\",\n fontWeight: \"semiBold\",\n };\n case \"large\":\n default:\n return {\n variant: \"extraSmall\",\n fontWeight: \"semiBold\",\n };\n }\n}\n\nconst TagContainer = baseStyled.div.attrs<TagProps, TagProps>((props) => ({\n backgroundColor: props.bg || props.backgroundColor || getBgColor(props),\n color: props.color || getColor(props),\n borderColor: getBorderColor(props),\n}))`\n display: inline-flex;\n justify-content: center;\n border: 1px solid transparent;\n border-radius: ${(p) => `${p.theme.radii[1]}px`};\n padding: ${(p) => getPadding(p)};\n ${border}\n`;\n\nexport default function Tag({\n children,\n textProps,\n size = \"large\",\n ...props\n}: TagProps): JSX.Element {\n const textColor = getColor(props);\n const baseTextProps = getTextProps({ size, ...props });\n return (\n <TagContainer size={size} {...props}>\n <Text {...baseTextProps} color={textColor} {...(textProps ? textProps : {})}>\n {children}\n </Text>\n </TagContainer>\n );\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,2BAAoC;AACpC,kBAAgC;AAChC,oBAA4C;
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport { TextVariants } from \"src/styles/theme\";\nimport { border, BorderProps } from \"styled-system\";\nimport Text, { TextProps } from \"../asorted/Text\";\nimport baseStyled, { BaseStyledProps } from \"../styled\";\n\nexport type Size = \"large\" | \"medium\" | \"small\";\nexport type Type = \"plain\" | \"opacity\" | \"outlined\" | \"outlinedOpacity\";\n\nexport type TagProps = BaseStyledProps &\n React.HTMLAttributes<HTMLDivElement> &\n BorderProps &\n React.PropsWithChildren<{\n /**\n * Changes the appearance based on the active state.\n */\n active?: boolean;\n /**\n * Tag style.\n */\n type?: Type;\n /**\n * Size of the tag, affects the padding and the casing (uppercase for small and medium)\n */\n size?: Size;\n /**\n * Props passed to the text component, overriding props set internally by Tag component\n */\n textProps?: TextProps;\n\n disabled?: boolean;\n }>;\n\nfunction getColor({ type, active, disabled }: TagProps) {\n switch (type) {\n case \"plain\":\n if (disabled) return active ? \"neutral.c00\" : \"neutral.c70\";\n return active ? \"neutral.c00\" : \"primary.c90\";\n default:\n return disabled ? \"neutral.c70\" : \"primary.c90\";\n }\n}\n\nfunction getBgColor({ type, active, disabled }: TagProps) {\n switch (type) {\n case \"plain\":\n return active ? (disabled ? \"neutral.c70\" : \"primary.c90\") : undefined;\n case \"opacity\":\n return active ? (disabled ? \"neutral.c30\" : \"primary.c20\") : undefined;\n default:\n return;\n }\n}\n\nfunction getBorderColor({ type, active, disabled }: TagProps) {\n if (!active) return;\n switch (type) {\n case \"outlined\":\n return disabled ? \"neutral.c70\" : \"primary.c90\";\n case \"outlinedOpacity\":\n return disabled ? \"neutral.c40\" : \"primary.c40\";\n }\n}\n\nfunction getPadding({ size }: TagProps) {\n switch (size) {\n case \"small\":\n return \"3px 5px\";\n case \"medium\":\n return \"6px 8px\";\n case \"large\":\n default:\n return \"9px 10px 10px\";\n }\n}\n\nfunction getTextProps({ size }: TagProps): {\n variant: TextVariants;\n fontWeight?: string;\n uppercase?: boolean;\n} {\n switch (size) {\n case \"small\":\n case \"medium\":\n return {\n variant: \"tiny\",\n fontWeight: \"semiBold\",\n };\n case \"large\":\n default:\n return {\n variant: \"extraSmall\",\n fontWeight: \"semiBold\",\n };\n }\n}\n\nconst TagContainer = baseStyled.div.attrs<TagProps, TagProps>((props) => ({\n backgroundColor: props.bg || props.backgroundColor || getBgColor(props),\n color: props.color || getColor(props),\n borderColor: getBorderColor(props),\n}))`\n display: inline-flex;\n justify-content: center;\n border: 1px solid transparent;\n border-radius: ${(p) => `${p.theme.radii[1]}px`};\n padding: ${(p) => getPadding(p)};\n ${border}\n`;\n\nexport default function Tag({\n children,\n textProps,\n size = \"large\",\n ...props\n}: TagProps): JSX.Element {\n const textColor = getColor(props);\n const baseTextProps = getTextProps({ size, ...props });\n return (\n <TagContainer size={size} {...props}>\n <Text {...baseTextProps} color={textColor} {...(textProps ? textProps : {})}>\n {children}\n </Text>\n </TagContainer>\n );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,2BAAoC;AACpC,kBAAgC;AAChC,oBAA4C;AA6B5C,SAAS,SAAS,EAAE,MAAM,QAAQ,SAAS,GAAa;AACtD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,UAAI;AAAU,eAAO,SAAS,gBAAgB;AAC9C,aAAO,SAAS,gBAAgB;AAAA,IAClC;AACE,aAAO,WAAW,gBAAgB;AAAA,EACtC;AACF;AAEA,SAAS,WAAW,EAAE,MAAM,QAAQ,SAAS,GAAa;AACxD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,SAAU,WAAW,gBAAgB,gBAAiB;AAAA,IAC/D,KAAK;AACH,aAAO,SAAU,WAAW,gBAAgB,gBAAiB;AAAA,IAC/D;AACE;AAAA,EACJ;AACF;AAEA,SAAS,eAAe,EAAE,MAAM,QAAQ,SAAS,GAAa;AAC5D,MAAI,CAAC;AAAQ;AACb,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,WAAW,gBAAgB;AAAA,IACpC,KAAK;AACH,aAAO,WAAW,gBAAgB;AAAA,EACtC;AACF;AAEA,SAAS,WAAW,EAAE,KAAK,GAAa;AACtC,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAEA,SAAS,aAAa,EAAE,KAAK,GAI3B;AACA,UAAQ,MAAM;AAAA,IACZ,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,MACd;AAAA,IACF,KAAK;AAAA,IACL;AACE,aAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,MACd;AAAA,EACJ;AACF;AAEA,MAAM,eAAe,cAAAA,QAAW,IAAI,MAA0B,CAAC,WAAW;AAAA,EACxE,iBAAiB,MAAM,MAAM,MAAM,mBAAmB,WAAW,KAAK;AAAA,EACtE,OAAO,MAAM,SAAS,SAAS,KAAK;AAAA,EACpC,aAAa,eAAe,KAAK;AACnC,EAAE;AAAA;AAAA;AAAA;AAAA,mBAIiB,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA,aAC/B,CAAC,MAAM,WAAW,CAAC;AAAA,IAC5B;AAAA;AAGW,SAAR,IAAqB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAA0B;AACxB,QAAM,YAAY,SAAS,KAAK;AAChC,QAAM,gBAAgB,aAAa,EAAE,MAAM,GAAG,MAAM,CAAC;AACrD,SACE,6BAAAC,QAAA,cAAC,gBAAa,MAAa,GAAG,SAC5B,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAM,GAAG,eAAe,OAAO,WAAY,GAAI,YAAY,YAAY,CAAC,KACtE,QACH,CACF;AAEJ;",
|
|
6
6
|
"names": ["baseStyled", "React", "Text"]
|
|
7
7
|
}
|
|
@@ -39,7 +39,11 @@ const DividerBase = (0, import_styled_components.default)(import_Flex.default).a
|
|
|
39
39
|
my: p.my || 0,
|
|
40
40
|
height: 1,
|
|
41
41
|
backgroundColor: "neutral.c40"
|
|
42
|
-
}))
|
|
42
|
+
}))`
|
|
43
|
+
&[data-variant="light"] {
|
|
44
|
+
background: ${(p) => p.theme.colors.neutral.c30};
|
|
45
|
+
}
|
|
46
|
+
`;
|
|
43
47
|
const Divider = (props) => {
|
|
44
48
|
if (!props.text)
|
|
45
49
|
return /* @__PURE__ */ import_react.default.createElement(DividerBase, { ...props });
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/asorted/Divider/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Flex, { FlexBoxProps } from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\n\nconst DividerBase = styled(Flex).attrs<FlexBoxProps>((p: FlexBoxProps) => ({\n my: p.my || 0,\n height: 1,\n backgroundColor: \"neutral.c40\",\n}))
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAmC;AACnC,kBAAiB;
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Flex, { FlexBoxProps } from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\n\nexport type Props = FlexBoxProps & { text?: string };\nconst DividerBase = styled(Flex).attrs<FlexBoxProps>((p: FlexBoxProps) => ({\n my: p.my || 0,\n height: 1,\n backgroundColor: \"neutral.c40\",\n}))`\n &[data-variant=\"light\"] {\n background: ${(p) => p.theme.colors.neutral.c30};\n }\n`;\n\nconst Divider: React.FC<Props> = (props) => {\n if (!props.text) return <DividerBase {...props} />;\n return (\n <Flex {...props} flexDirection=\"row\" alignItems=\"center\">\n <DividerBase my={6} flex={1} />\n <Text variant=\"bodyLineHeight\" color=\"neutral.c60\" mx={6}>\n {props.text}\n </Text>\n <DividerBase my={6} flex={1} />\n </Flex>\n );\n};\n\nexport default Divider;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAmC;AACnC,kBAAiB;AAGjB,MAAM,kBAAc,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAoB,CAAC,OAAqB;AAAA,EACzE,IAAI,EAAE,MAAM;AAAA,EACZ,QAAQ;AAAA,EACR,iBAAiB;AACnB,EAAE;AAAA;AAAA,kBAEgB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAIhD,MAAM,UAA2B,CAAC,UAAU;AAC1C,MAAI,CAAC,MAAM;AAAM,WAAO,6BAAAC,QAAA,cAAC,eAAa,GAAG,OAAO;AAChD,SACE,6BAAAA,QAAA,cAAC,YAAAD,SAAA,EAAM,GAAG,OAAO,eAAc,OAAM,YAAW,YAC9C,6BAAAC,QAAA,cAAC,eAAY,IAAI,GAAG,MAAM,GAAG,GAC7B,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAQ,kBAAiB,OAAM,eAAc,IAAI,KACpD,MAAM,IACT,GACA,6BAAAD,QAAA,cAAC,eAAY,IAAI,GAAG,MAAM,GAAG,CAC/B;AAEJ;AAEA,IAAO,kBAAQ;",
|
|
6
6
|
"names": ["styled", "Flex", "React", "Text"]
|
|
7
7
|
}
|
|
@@ -136,10 +136,16 @@ const getVariantColors = (p) => ({
|
|
|
136
136
|
border-color: ${p.theme.colors.neutral.c50};
|
|
137
137
|
color: ${p.theme.colors.neutral.c50};
|
|
138
138
|
background-color: transparent;
|
|
139
|
+
&:focus, &:hover {
|
|
140
|
+
box-shadow: none;
|
|
141
|
+
}
|
|
139
142
|
`,
|
|
140
143
|
filled: `
|
|
141
144
|
color: ${p.theme.colors.neutral.c50};
|
|
142
145
|
background-color: ${p.theme.colors.neutral.c30};
|
|
146
|
+
&:focus, &:hover {
|
|
147
|
+
box-shadow: none;
|
|
148
|
+
}
|
|
143
149
|
`
|
|
144
150
|
},
|
|
145
151
|
default: `
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/cta/Button/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState, useMemo } from \"react\";\nimport styled, { css, StyledProps } from \"styled-components\";\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport { fontSize, border, BordersProps, compose } from \"styled-system\";\nimport fontFamily from \"../../../styles/styled/fontFamily\";\nimport { fontSizes } from \"../../../styles/theme\";\nimport { rgba } from \"../../../styles/helpers\";\nimport ChevronBottom from \"@ledgerhq/icons-ui/react/ChevronBottomMedium\";\n\nexport type ButtonVariants = \"main\" | \"shade\" | \"error\" | \"color\" | \"neutral\";\nexport type IconPosition = \"right\" | \"left\";\ninterface BaseProps extends BaseStyledProps, BordersProps {\n ff?: string;\n color?: string;\n backgroundColor?: string;\n size?: \"small\" | \"medium\" | \"large\";\n fontSize?: number;\n variant?: ButtonVariants;\n outline?: boolean;\n iconPosition?: IconPosition;\n iconButton?: boolean;\n disabled?: boolean;\n whiteSpace?: string;\n}\n\nexport interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {\n Icon?: React.ComponentType<{ size: number; color?: string }>;\n children?: React.ReactNode;\n onClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;\n iconSize?: number;\n style?: React.CSSProperties;\n}\nconst IconContainer = styled.div<{\n iconPosition: IconPosition;\n}>`\n display: inline-block;\n ${(p) => `${p.iconPosition === \"left\" ? \"margin-right\" : \"margin-left\"}: ${p.theme.space[4]}px;`}\n padding-top: 0.2em;\n`;\n\nconst getVariantColors = (p: StyledProps<BaseProps>) => ({\n main: {\n outline: `\n border-color: ${p.theme.colors.neutral.c100};\n color: ${p.theme.colors.neutral.c100};\n background-color: transparent;\n &:hover, &:focus {\n background-color: ${rgba(p.theme.colors.neutral.c100, 0.03)};\n }\n &:active {\n background-color: ${rgba(p.theme.colors.neutral.c100, 0.05)};\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c00};\n background-color: ${p.theme.colors.neutral.c100};\n &:hover, &:focus {\n background-color: ${p.theme.colors.neutral.c90};\n }\n `,\n },\n shade: `\n border-color: ${p.theme.colors.neutral.c40};\n color: ${p.theme.colors.neutral.c100};\n &:focus {\n border-color: ${p.theme.colors.primary.c80};\n }\n\n &:hover, &:focus {\n background-color: ${p.theme.colors.neutral.c20};\n }\n\n &:active {\n background-color: ${p.theme.colors.neutral.c30};\n }\n `,\n error: {\n outline: `\n border-color: ${p.theme.colors.error.c50};\n color: ${p.theme.colors.error.c50};\n background-color: transparent;\n &:hover {\n background-color: ${rgba(p.theme.colors.error.c50, 0.02)};\n }\n &:active {\n background-color: ${rgba(p.theme.colors.error.c50, 0.05)};\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c00};\n background-color: ${p.theme.colors.error.c50};\n &:hover {\n background-color: ${p.theme.colors.error.c40};\n }\n `,\n },\n neutral: `\n color: ${p.theme.colors.neutral.c100};\n background-color: ${p.theme.colors.neutral.c30};\n &:hover {\n background-color: ${p.theme.colors.neutral.c40};\n }\n `,\n color: {\n outline: `\n border-color: ${p.theme.colors.primary.c80};\n color: ${p.theme.colors.primary.c80};\n background-color: transparent;\n &:hover {\n background-color: ${rgba(p.theme.colors.primary.c100, 0.02)};\n }\n &:active {\n background-color: ${rgba(p.theme.colors.primary.c100, 0.05)};\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c00};\n background-color: ${p.theme.colors.primary.c80};\n &:hover {\n background-color: ${p.theme.colors.primary.c70};\n }\n `,\n },\n disabled: {\n outline: `\n border-color: ${p.theme.colors.neutral.c50};\n color: ${p.theme.colors.neutral.c50};\n background-color: transparent;\n `,\n filled: `\n color: ${p.theme.colors.neutral.c50};\n background-color: ${p.theme.colors.neutral.c30};\n `,\n },\n default: `\n color: ${p.theme.colors.neutral.c100};\n background-color: transparent;\n &:hover {\n text-decoration: underline;\n }\n `,\n});\n\nexport const ButtonUnstyled = baseStyled.button`\n all: unset;\n cursor: pointer;\n\n &:disabled {\n cursor: default;\n }\n`;\n\nexport const Base = baseStyled.button.attrs((p: BaseProps) => ({\n fontFamily: \"Inter\",\n fontSize: p.fontSize ?? 4,\n}))<BaseProps>`\n background-color: transparent;\n border-color: transparent;\n border-radius: ${(p) => p.theme.space[13]}px;\n border-style: solid;\n border-width: ${(p) => (p.outline || p.variant === \"shade\" ? 1 : 0)}px;\n font-weight: 600;\n ${compose(fontFamily, fontSize, border)};\n line-height: ${(p) => p.theme.fontSizes[p.fontSize]}px;\n text-align: center;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n ${(p) => buttonSizeStyle[p.size || \"medium\"]}\n text-overflow: ellipsis;\n white-space: ${(p) => (p.whiteSpace ? p.whiteSpace : \"nowrap\")};\n max-width: 100%;\n position: relative;\n cursor: ${(p) => (p.disabled ? \"default\" : \"pointer\")};\n &:active {\n box-shadow: 0 0 0 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};\n }\n &:focus, &:hover {\n box-shadow: 0 0 0 2px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};\n }\n\n ${(p) => {\n const variants = getVariantColors(p);\n if (p.disabled) {\n return p.outline || p.variant === \"shade\"\n ? variants.disabled.outline\n : variants.disabled.filled;\n }\n\n const variant: ButtonVariants | \"default\" =\n p.variant ?? (\"default\" as ButtonVariants | \"default\");\n switch (variant) {\n case \"main\":\n return p.outline ? variants.main.outline : variants.main.filled;\n case \"shade\":\n return variants.shade;\n\n case \"error\":\n return p.outline ? variants.error.outline : variants.error.filled;\n\n case \"color\":\n return p.outline ? variants.color.outline : variants.color.filled;\n\n case \"neutral\":\n return variants.neutral;\n\n case \"default\":\n default:\n return variants.default;\n }\n }}\n ${(p) =>\n p.iconButton\n ? css`\n width: ${p.theme.space[12]}px;\n padding: 0;\n ${IconContainer} {\n margin: 0;\n }\n `\n : \"\"}\n ${(p) => p.theme.transition([\"background-color\", \"color\", \"border-color\", \"box-shadow\"], \"0.2s\")}\n`;\n\nconst ContentContainer = styled.div``;\n\nconst Button = (\n { Icon, iconPosition = \"right\", iconSize = 16, children, onClick, ...props }: ButtonProps,\n ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement => {\n const iconNodeSize = iconSize || fontSizes[props.fontSize ?? 4];\n const IconNode = useMemo(() => Icon && <Icon size={iconNodeSize} />, [iconNodeSize, Icon]);\n\n return (\n <Base {...props} ref={ref} iconButton={!(Icon == null) && !children} onClick={onClick}>\n {iconPosition === \"right\" ? <ContentContainer>{children}</ContentContainer> : null}\n {IconNode && <IconContainer iconPosition={iconPosition}>{IconNode}</IconContainer>}\n {iconPosition === \"left\" ? <ContentContainer>{children}</ContentContainer> : null}\n </Base>\n );\n};\nconst ButtonWithRef = React.forwardRef(Button) as unknown as typeof Button;\n\nexport type ButtonExpandProps = React.PropsWithChildren<\n ButtonProps & {\n onToggle?: (arg0: boolean) => void;\n }\n>;\n\nconst StyledButtonExpand = styled(ButtonWithRef).attrs((props) => ({\n Icon: props.Icon != null || ChevronBottom,\n iconPosition: props.iconPosition || \"right\",\n}))<{ expanded: boolean }>`\n ${IconContainer} {\n transition: transform 0.25s;\n ${(p) => (p.expanded ? \"transform: rotate(180deg)\" : \"\")}\n }\n`;\nexport function ButtonExpand(\n { onToggle, onClick, ...props }: ButtonExpandProps,\n ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement {\n const [expanded, setExpanded] = useState(false);\n return (\n <StyledButtonExpand\n {...props}\n ref={ref}\n expanded={expanded}\n onClick={(event: React.SyntheticEvent<HTMLButtonElement>) => {\n setExpanded((expanded) => !expanded);\n onToggle != null && onToggle(!expanded);\n onClick != null && onClick(event);\n }}\n />\n );\n}\n\nexport const buttonSizeStyle: {\n [index: string]: {\n padding: string;\n height: string;\n };\n} = {\n small: {\n padding: \"0 20px\",\n height: \"32px\",\n },\n medium: {\n padding: \"0 24px\",\n height: \"40px\",\n },\n large: {\n padding: \"0 28px\",\n height: \"48px\",\n },\n};\n\nButton.Unstyled = ButtonUnstyled;\nButton.Expand = React.forwardRef(ButtonExpand);\nButtonWithRef.Unstyled = Button.Unstyled;\nButtonWithRef.Expand = Button.Expand;\nexport default ButtonWithRef;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyC;AACzC,+BAAyC;AACzC,oBAA4C;AAC5C,2BAAwD;AACxD,wBAAuB;AACvB,mBAA0B;AAC1B,qBAAqB;AACrB,iCAA0B;AAyB1B,MAAM,gBAAgB,yBAAAA,QAAO;AAAA;AAAA,IAIzB,CAAC,MAAM,GAAG,EAAE,iBAAiB,SAAS,iBAAiB,kBAAkB,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAI5F,MAAM,mBAAmB,CAAC,OAA+B;AAAA,EACvD,MAAM;AAAA,IACJ,SAAS;AAAA,wBACW,EAAE,MAAM,OAAO,QAAQ;AAAA,iBAC9B,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,kCAGV,qBAAK,EAAE,MAAM,OAAO,QAAQ,MAAM,IAAI;AAAA;AAAA;AAAA,kCAGtC,qBAAK,EAAE,MAAM,OAAO,QAAQ,MAAM,IAAI;AAAA;AAAA;AAAA,IAGhE,QAAQ;AAAA,iBACK,EAAE,MAAM,OAAO,QAAQ;AAAA,4BACZ,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,8BAErB,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,EAGnD;AAAA,EACA,OAAO;AAAA,sBACa,EAAE,MAAM,OAAO,QAAQ;AAAA,eAC9B,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,wBAEd,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,4BAInB,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,4BAIvB,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,EAGjD,OAAO;AAAA,IACL,SAAS;AAAA,sBACS,EAAE,MAAM,OAAO,MAAM;AAAA,eAC5B,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,gCAGR,qBAAK,EAAE,MAAM,OAAO,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,gCAGnC,qBAAK,EAAE,MAAM,OAAO,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,IAG3D,QAAQ;AAAA,eACG,EAAE,MAAM,OAAO,QAAQ;AAAA,0BACZ,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA,4BAEnB,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,EAG/C;AAAA,EACA,SAAS;AAAA,aACE,EAAE,MAAM,OAAO,QAAQ;AAAA,wBACZ,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,0BAErB,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,EAG/C,OAAO;AAAA,IACL,SAAS;AAAA,sBACS,EAAE,MAAM,OAAO,QAAQ;AAAA,eAC9B,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,gCAGV,qBAAK,EAAE,MAAM,OAAO,QAAQ,MAAM,IAAI;AAAA;AAAA;AAAA,gCAGtC,qBAAK,EAAE,MAAM,OAAO,QAAQ,MAAM,IAAI;AAAA;AAAA;AAAA,IAG9D,QAAQ;AAAA,eACG,EAAE,MAAM,OAAO,QAAQ;AAAA,0BACZ,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,4BAErB,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,EAGjD;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,wBACW,EAAE,MAAM,OAAO,QAAQ;AAAA,iBAC9B,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import React, { useState, useMemo } from \"react\";\nimport styled, { css, StyledProps } from \"styled-components\";\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport { fontSize, border, BordersProps, compose } from \"styled-system\";\nimport fontFamily from \"../../../styles/styled/fontFamily\";\nimport { fontSizes } from \"../../../styles/theme\";\nimport { rgba } from \"../../../styles/helpers\";\nimport ChevronBottom from \"@ledgerhq/icons-ui/react/ChevronBottomMedium\";\n\nexport type ButtonVariants = \"main\" | \"shade\" | \"error\" | \"color\" | \"neutral\";\nexport type IconPosition = \"right\" | \"left\";\ninterface BaseProps extends BaseStyledProps, BordersProps {\n ff?: string;\n color?: string;\n backgroundColor?: string;\n size?: \"small\" | \"medium\" | \"large\";\n fontSize?: number;\n variant?: ButtonVariants;\n outline?: boolean;\n iconPosition?: IconPosition;\n iconButton?: boolean;\n disabled?: boolean;\n whiteSpace?: string;\n}\n\nexport interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {\n Icon?: React.ComponentType<{ size: number; color?: string }>;\n children?: React.ReactNode;\n onClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;\n iconSize?: number;\n style?: React.CSSProperties;\n}\nconst IconContainer = styled.div<{\n iconPosition: IconPosition;\n}>`\n display: inline-block;\n ${(p) => `${p.iconPosition === \"left\" ? \"margin-right\" : \"margin-left\"}: ${p.theme.space[4]}px;`}\n padding-top: 0.2em;\n`;\n\nconst getVariantColors = (p: StyledProps<BaseProps>) => ({\n main: {\n outline: `\n border-color: ${p.theme.colors.neutral.c100};\n color: ${p.theme.colors.neutral.c100};\n background-color: transparent;\n &:hover, &:focus {\n background-color: ${rgba(p.theme.colors.neutral.c100, 0.03)};\n }\n &:active {\n background-color: ${rgba(p.theme.colors.neutral.c100, 0.05)};\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c00};\n background-color: ${p.theme.colors.neutral.c100};\n &:hover, &:focus {\n background-color: ${p.theme.colors.neutral.c90};\n }\n `,\n },\n shade: `\n border-color: ${p.theme.colors.neutral.c40};\n color: ${p.theme.colors.neutral.c100};\n &:focus {\n border-color: ${p.theme.colors.primary.c80};\n }\n\n &:hover, &:focus {\n background-color: ${p.theme.colors.neutral.c20};\n }\n\n &:active {\n background-color: ${p.theme.colors.neutral.c30};\n }\n `,\n error: {\n outline: `\n border-color: ${p.theme.colors.error.c50};\n color: ${p.theme.colors.error.c50};\n background-color: transparent;\n &:hover {\n background-color: ${rgba(p.theme.colors.error.c50, 0.02)};\n }\n &:active {\n background-color: ${rgba(p.theme.colors.error.c50, 0.05)};\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c00};\n background-color: ${p.theme.colors.error.c50};\n &:hover {\n background-color: ${p.theme.colors.error.c40};\n }\n `,\n },\n neutral: `\n color: ${p.theme.colors.neutral.c100};\n background-color: ${p.theme.colors.neutral.c30};\n &:hover {\n background-color: ${p.theme.colors.neutral.c40};\n }\n `,\n color: {\n outline: `\n border-color: ${p.theme.colors.primary.c80};\n color: ${p.theme.colors.primary.c80};\n background-color: transparent;\n &:hover {\n background-color: ${rgba(p.theme.colors.primary.c100, 0.02)};\n }\n &:active {\n background-color: ${rgba(p.theme.colors.primary.c100, 0.05)};\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c00};\n background-color: ${p.theme.colors.primary.c80};\n &:hover {\n background-color: ${p.theme.colors.primary.c70};\n }\n `,\n },\n disabled: {\n outline: `\n border-color: ${p.theme.colors.neutral.c50};\n color: ${p.theme.colors.neutral.c50};\n background-color: transparent;\n &:focus, &:hover {\n box-shadow: none;\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c50};\n background-color: ${p.theme.colors.neutral.c30};\n &:focus, &:hover {\n box-shadow: none;\n }\n `,\n },\n default: `\n color: ${p.theme.colors.neutral.c100};\n background-color: transparent;\n &:hover {\n text-decoration: underline;\n }\n `,\n});\n\nexport const ButtonUnstyled = baseStyled.button`\n all: unset;\n cursor: pointer;\n\n &:disabled {\n cursor: default;\n }\n`;\n\nexport const Base = baseStyled.button.attrs((p: BaseProps) => ({\n fontFamily: \"Inter\",\n fontSize: p.fontSize ?? 4,\n}))<BaseProps>`\n background-color: transparent;\n border-color: transparent;\n border-radius: ${(p) => p.theme.space[13]}px;\n border-style: solid;\n border-width: ${(p) => (p.outline || p.variant === \"shade\" ? 1 : 0)}px;\n font-weight: 600;\n ${compose(fontFamily, fontSize, border)};\n line-height: ${(p) => p.theme.fontSizes[p.fontSize]}px;\n text-align: center;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n ${(p) => buttonSizeStyle[p.size || \"medium\"]}\n text-overflow: ellipsis;\n white-space: ${(p) => (p.whiteSpace ? p.whiteSpace : \"nowrap\")};\n max-width: 100%;\n position: relative;\n cursor: ${(p) => (p.disabled ? \"default\" : \"pointer\")};\n &:active {\n box-shadow: 0 0 0 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};\n }\n &:focus, &:hover {\n box-shadow: 0 0 0 2px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};\n }\n\n ${(p) => {\n const variants = getVariantColors(p);\n if (p.disabled) {\n return p.outline || p.variant === \"shade\"\n ? variants.disabled.outline\n : variants.disabled.filled;\n }\n\n const variant: ButtonVariants | \"default\" =\n p.variant ?? (\"default\" as ButtonVariants | \"default\");\n switch (variant) {\n case \"main\":\n return p.outline ? variants.main.outline : variants.main.filled;\n case \"shade\":\n return variants.shade;\n\n case \"error\":\n return p.outline ? variants.error.outline : variants.error.filled;\n\n case \"color\":\n return p.outline ? variants.color.outline : variants.color.filled;\n\n case \"neutral\":\n return variants.neutral;\n\n case \"default\":\n default:\n return variants.default;\n }\n }}\n ${(p) =>\n p.iconButton\n ? css`\n width: ${p.theme.space[12]}px;\n padding: 0;\n ${IconContainer} {\n margin: 0;\n }\n `\n : \"\"}\n ${(p) => p.theme.transition([\"background-color\", \"color\", \"border-color\", \"box-shadow\"], \"0.2s\")}\n`;\n\nconst ContentContainer = styled.div``;\n\nconst Button = (\n { Icon, iconPosition = \"right\", iconSize = 16, children, onClick, ...props }: ButtonProps,\n ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement => {\n const iconNodeSize = iconSize || fontSizes[props.fontSize ?? 4];\n const IconNode = useMemo(() => Icon && <Icon size={iconNodeSize} />, [iconNodeSize, Icon]);\n\n return (\n <Base {...props} ref={ref} iconButton={!(Icon == null) && !children} onClick={onClick}>\n {iconPosition === \"right\" ? <ContentContainer>{children}</ContentContainer> : null}\n {IconNode && <IconContainer iconPosition={iconPosition}>{IconNode}</IconContainer>}\n {iconPosition === \"left\" ? <ContentContainer>{children}</ContentContainer> : null}\n </Base>\n );\n};\nconst ButtonWithRef = React.forwardRef(Button) as unknown as typeof Button;\n\nexport type ButtonExpandProps = React.PropsWithChildren<\n ButtonProps & {\n onToggle?: (arg0: boolean) => void;\n }\n>;\n\nconst StyledButtonExpand = styled(ButtonWithRef).attrs((props) => ({\n Icon: props.Icon != null || ChevronBottom,\n iconPosition: props.iconPosition || \"right\",\n}))<{ expanded: boolean }>`\n ${IconContainer} {\n transition: transform 0.25s;\n ${(p) => (p.expanded ? \"transform: rotate(180deg)\" : \"\")}\n }\n`;\nexport function ButtonExpand(\n { onToggle, onClick, ...props }: ButtonExpandProps,\n ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement {\n const [expanded, setExpanded] = useState(false);\n return (\n <StyledButtonExpand\n {...props}\n ref={ref}\n expanded={expanded}\n onClick={(event: React.SyntheticEvent<HTMLButtonElement>) => {\n setExpanded((expanded) => !expanded);\n onToggle != null && onToggle(!expanded);\n onClick != null && onClick(event);\n }}\n />\n );\n}\n\nexport const buttonSizeStyle: {\n [index: string]: {\n padding: string;\n height: string;\n };\n} = {\n small: {\n padding: \"0 20px\",\n height: \"32px\",\n },\n medium: {\n padding: \"0 24px\",\n height: \"40px\",\n },\n large: {\n padding: \"0 28px\",\n height: \"48px\",\n },\n};\n\nButton.Unstyled = ButtonUnstyled;\nButton.Expand = React.forwardRef(ButtonExpand);\nButtonWithRef.Unstyled = Button.Unstyled;\nButtonWithRef.Expand = Button.Expand;\nexport default ButtonWithRef;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["styled", "baseStyled", "fontFamily", "React", "ChevronBottom", "expanded"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/form/BaseInput/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import styled, { css } from \"styled-components\";\nimport { typography, TypographyProps } from \"styled-system\";\nimport React, { InputHTMLAttributes, useState, useMemo, useCallback } from \"react\";\nimport CircledCrossSolidMedium from \"@ledgerhq/icons-ui/react/CircledCrossSolidMedium\";\nimport FlexBox from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\nimport { rgba } from \"../../../styles/helpers\";\nimport { ButtonUnstyled } from \"../../cta/Button\";\n\ntype ValueType = HTMLInputElement[\"value\"];\n\nexport type CommonProps = InputHTMLAttributes<HTMLInputElement> &\n TypographyProps & {\n disabled?: boolean;\n error?:
|
|
4
|
+
"sourcesContent": ["import styled, { css } from \"styled-components\";\nimport { typography, TypographyProps } from \"styled-system\";\nimport React, { InputHTMLAttributes, useState, useMemo, useCallback } from \"react\";\nimport CircledCrossSolidMedium from \"@ledgerhq/icons-ui/react/CircledCrossSolidMedium\";\nimport FlexBox from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\nimport { rgba } from \"../../../styles/helpers\";\nimport { ButtonUnstyled } from \"../../cta/Button\";\n\ntype ValueType = HTMLInputElement[\"value\"];\n\nexport type CommonProps = InputHTMLAttributes<HTMLInputElement> &\n TypographyProps & {\n disabled?: boolean;\n error?: React.ReactNode;\n warning?: React.ReactNode;\n info?: React.ReactNode;\n };\n\nexport type InputProps<T = ValueType> = Omit<CommonProps, \"value\" | \"onChange\"> & {\n value: T;\n onChange?: (value: T) => void;\n onChangeEvent?: InputHTMLAttributes<HTMLInputElement>[\"onChange\"];\n renderLeft?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;\n renderRight?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;\n unwrapped?: boolean;\n containerProps?: InputContainerProps;\n clearable?: boolean;\n /**\n * A function can be provided to serialize a value of any type to a string.\n *\n * This can be useful to wrap the `<BaseInput />` component (which expects a string)\n * and create higher-level components that will automatically perform the input/output\n * conversion to other types.\n *\n * *A serializer function should always be used in conjunction with a deserializer function.*\n */\n serialize?: (value: T) => ValueType;\n /**\n * A deserializer can be provided to convert the html input value from a string to any other type.\n *\n * *A deserializer function should always be used in conjunction with a serializer function.*\n */\n deserialize?: (value: ValueType) => T;\n};\n\nexport type InputContainerProps = React.ComponentProps<typeof InputContainer>;\nexport const InputContainer = styled.div<Partial<CommonProps> & { focus?: boolean }>`\n display: flex;\n height: 48px;\n border: ${(p) => `1px solid ${p.theme.colors.neutral.c40}`};\n border-radius: 24px;\n transition: all 0.2s ease;\n color: ${(p) => p.theme.colors.neutral.c100};\n\n ${(p) =>\n p.focus &&\n !p.error &&\n !p.warning &&\n css`\n border: 1px solid ${p.theme.colors.primary.c80};\n box-shadow: 0 0 0 4px ${rgba(p.theme.colors.primary.c60, 0.4)};\n `};\n\n ${(p) =>\n p.error &&\n !p.disabled &&\n css`\n border: 1px solid ${p.theme.colors.error.c50};\n `};\n\n ${(p) =>\n !p.error &&\n p.warning &&\n !p.disabled &&\n css`\n border: 1px solid ${p.theme.colors.warning.c40};\n `};\n\n ${(p) =>\n !p.error &&\n !p.warning &&\n !p.disabled &&\n css`\n &:hover {\n border: ${!p.disabled && `1px solid ${p.theme.colors.primary.c80}`};\n }\n `};\n\n ${(p) =>\n p.disabled &&\n css`\n color: ${p.theme.colors.neutral.c60};\n background: ${(p) => p.theme.colors.neutral.c20};\n `};\n`;\n\nexport const BaseInput = styled.input.attrs<\n Partial<CommonProps> & { focus?: boolean } & TypographyProps\n>({\n fontSize: \"paragraph\",\n fontWeight: \"medium\",\n})<Partial<CommonProps> & { focus?: boolean } & TypographyProps>`\n height: 100%;\n width: 100%;\n border: 0;\n caret-color: ${(p) => (p.error ? p.theme.colors.error.c50 : p.theme.colors.primary.c80)};\n background: none;\n outline: none;\n cursor: ${(p) => (p.disabled ? \"not-allowed\" : \"text\")};\n flex-shrink: 1;\n padding-left: 20px;\n padding-right: 20px;\n &::placeholder {\n color: ${(p) => (p.disabled ? p.theme.colors.neutral.c50 : p.theme.colors.neutral.c70)};\n }\n\n /* stylelint-disable property-no-vendor-prefix */\n\n /* Hide type=number arrow for Chrome, Safari, Edge, Opera */\n &::-webkit-outer-spin-button,\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n /* Hide type=number arrow for Firefox */\n &[type=\"number\"] {\n -moz-appearance: textfield;\n }\n /* stylelint-enable property-no-vendor-prefix */\n\n ${typography}\n`;\n\nexport const InputErrorContainer = styled(Text)`\n color: ${(p) => p.theme.colors.error.c50};\n margin-left: 12px;\n`;\nexport const InputWarningContainer = styled(Text)`\n color: ${(p) => p.theme.colors.warning.c40};\n margin-left: 12px;\n`;\nexport const InputInfoContainer = styled(Text)`\n color: ${(p) => p.theme.colors.neutral.c60};\n margin-left: 12px;\n`;\n\nexport const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({\n alignItems: \"center\",\n pl: \"16px\",\n}))``;\n\nexport const InputRenderRightContainer = styled(FlexBox).attrs(() => ({\n alignItems: \"center\",\n pr: \"16px\",\n}))``;\n\nexport const ClearableButtonUnstyled = styled(ButtonUnstyled)`\n display: flex;\n`;\n\n// Yes, this is dirty. If you can figure out a better way please change the code :).\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst IDENTITY = (_: any): any => _;\n\nfunction Input<T = ValueType>(\n props: InputProps<T>,\n ref?: React.ForwardedRef<HTMLInputElement>,\n): JSX.Element {\n const {\n value,\n disabled,\n error,\n warning,\n info,\n onChange,\n onChangeEvent,\n renderLeft,\n renderRight,\n unwrapped,\n containerProps,\n serialize = IDENTITY,\n deserialize = IDENTITY,\n clearable,\n ...htmlInputProps\n } = props;\n const [focus, setFocus] = useState(false);\n const inputValue = useMemo(() => serialize(value), [serialize, value]);\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange && onChange(deserialize(e.target.value));\n onChangeEvent && onChangeEvent(e);\n },\n [onChange, onChangeEvent, deserialize],\n );\n\n const handleClear = useCallback(() => {\n onChange && onChange(deserialize(\"\"));\n }, [onChange, deserialize]);\n\n const inner = (\n <>\n {typeof renderLeft === \"function\" ? renderLeft(props) : renderLeft}\n <BaseInput\n ref={ref}\n {...htmlInputProps}\n disabled={disabled}\n error={error}\n warning={warning}\n info={info}\n onChange={handleChange}\n value={inputValue}\n onFocus={(event: React.FocusEvent<HTMLInputElement>) => {\n setFocus(true);\n htmlInputProps.onFocus && htmlInputProps.onFocus(event);\n }}\n onBlur={(event: React.FocusEvent<HTMLInputElement>) => {\n setFocus(false);\n htmlInputProps.onBlur && htmlInputProps.onBlur(event);\n }}\n />\n {clearable && inputValue && (\n <FlexBox alignItems={\"center\"} mr={7}>\n <ClearableButtonUnstyled onClick={handleClear}>\n <CircledCrossSolidMedium size={18} color={\"neutral.c50\"} />\n </ClearableButtonUnstyled>\n </FlexBox>\n )}\n {typeof renderRight === \"function\" ? renderRight(props) : renderRight}\n </>\n );\n\n if (unwrapped) {\n return (\n <FlexBox alignItems=\"stretch\" style={{ height: \"100%\" }}>\n {inner}\n </FlexBox>\n );\n }\n\n return (\n <div>\n <InputContainer\n disabled={disabled}\n focus={focus}\n error={error}\n warning={warning}\n {...containerProps}\n >\n {inner}\n </InputContainer>\n {(error || warning || info) && !disabled && (\n <FlexBox flexDirection=\"column\" rowGap={2} mt={2}>\n {error ? (\n <InputErrorContainer variant=\"small\">{error}</InputErrorContainer>\n ) : warning ? (\n <InputWarningContainer variant=\"small\">{warning}</InputWarningContainer>\n ) : info ? (\n <InputInfoContainer variant=\"small\">{info}</InputInfoContainer>\n ) : null}\n </FlexBox>\n )}\n </div>\n );\n}\n\nexport default React.forwardRef(Input) as <T>(\n props: InputProps<T> & { ref?: React.ForwardedRef<HTMLInputElement> },\n) => ReturnType<typeof Input>;\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["styled", "p", "Text", "FlexBox", "React", "CircledCrossSolidMedium"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/form/Radio/RadioListElement.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { InputHTMLAttributes, useContext } from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport Flex, { FlexBoxProps } from \"../../layout/Flex\";\nimport { rgba } from \"../../../styles/helpers\";\nimport { RadioContext } from \"./index\";\n\ntype ElementState = {\n checked: boolean;\n disabled
|
|
4
|
+
"sourcesContent": ["import React, { InputHTMLAttributes, useContext } from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport Flex, { FlexBoxProps } from \"../../layout/Flex\";\nimport { rgba } from \"../../../styles/helpers\";\nimport { RadioContext } from \"./index\";\n\ntype ElementState = {\n checked: boolean;\n disabled?: boolean | undefined;\n};\n\nexport const Label = styled(Text)<ElementState>`\n color: ${(p) =>\n p.disabled\n ? p.theme.colors.neutral.c50\n : p.checked\n ? p.theme.colors.primary.c90\n : p.theme.colors.neutral.c100};\n`;\n\nconst Container = styled(Flex)<ElementState>`\n cursor: ${(p) => (p.disabled ? \"\" : \"pointer\")};\n justify-content: center;\n align-items: center;\n background-color: ${(p) => (p.checked ? p.theme.colors.primary.c20 : \"\")};\n border: 1px solid ${(p) => (p.checked ? p.theme.colors.primary.c50 : p.theme.colors.neutral.c40)};\n border-radius: ${(p) => `${p.theme.radii[2]}px`};\n padding: ${(p) => p.theme.space[6]}px;\n\n :hover {\n border-color: ${(p) => (p.disabled || p.checked ? \"\" : p.theme.colors.primary.c80)};\n }\n`;\n\nconst Input = styled.input`\n position: relative;\n appearance: none;\n &:focus ~ ${Container} {\n box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.48)};\n }\n`;\n\nconst RadioListElement = styled.label.attrs({ tabIndex: -1 })`\n display: inline-flex;\n align-items: center;\n`;\n\ntype InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"onChange\" | \"name\">;\n\nexport type RadioListElementProps = InputAttributes & {\n /**\n * The string or component that will be rendered as label of this radio element\n * If it's a component, it's rendered with these props: { checked:boolean; disabled:boolean }\n * */\n label: string | React.ComponentType<ElementState> | ((arg1: ElementState) => JSX.Element);\n /** Flex props to pass to the container */\n containerProps?: FlexBoxProps;\n};\n\nconst ListElement = ({\n label,\n value,\n disabled,\n containerProps,\n ...props\n}: RadioListElementProps): JSX.Element => {\n const context = useContext(RadioContext);\n if (context === undefined) throw new Error(\"RadioElement must be used within a RadioProvider\");\n\n const isChecked = context.currentValue === value;\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n context.onChange(event.target.value);\n };\n\n return (\n <RadioListElement>\n <Input\n type=\"radio\"\n checked={isChecked}\n disabled={disabled}\n onChange={handleChange}\n value={value}\n name={context.name}\n {...props}\n />\n <Container checked={isChecked} disabled={disabled} {...containerProps}>\n {typeof label === \"string\" ? (\n <Label checked={isChecked} disabled={disabled} variant=\"paragraph\">\n {label}\n </Label>\n ) : (\n React.createElement(label, { checked: isChecked, disabled })\n )}\n </Container>\n </RadioListElement>\n );\n};\n\nListElement.displayName = \"Radio.ListElement\"; // For easy identification in the React devtools & in storybook\nListElement.Label = Label;\n\nexport default ListElement;\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAuD;AACvD,+BAAmB;AACnB,kBAAiB;AACjB,kBAAmC;AACnC,qBAAqB;AACrB,mBAA6B;AAOtB,MAAM,YAAQ,yBAAAA,SAAO,YAAAC,OAAI;AAAA,WACrB,CAAC,MACR,EAAE,WACE,EAAE,MAAM,OAAO,QAAQ,MACvB,EAAE,UACF,EAAE,MAAM,OAAO,QAAQ,MACvB,EAAE,MAAM,OAAO,QAAQ;AAAA;AAG/B,MAAM,gBAAY,yBAAAD,SAAO,YAAAE,OAAI;AAAA,YACjB,CAAC,MAAO,EAAE,WAAW,KAAK;AAAA;AAAA;AAAA,sBAGhB,CAAC,MAAO,EAAE,UAAU,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA,sBACjD,CAAC,MAAO,EAAE,UAAU,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,mBAC3E,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA,aAC/B,CAAC,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA,oBAGf,CAAC,MAAO,EAAE,YAAY,EAAE,UAAU,KAAK,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAIlF,MAAM,QAAQ,yBAAAF,QAAO;AAAA;AAAA;AAAA,cAGP;AAAA,kCACoB,CAAC,UAAM,qBAAK,EAAE,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA;AAAA;AAI9E,MAAM,mBAAmB,yBAAAA,QAAO,MAAM,MAAM,EAAE,UAAU,GAAG,CAAC;AAAA;AAAA;AAAA;AAiB5D,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA0C;AACxC,QAAM,cAAU,yBAAW,yBAAY;AACvC,MAAI,YAAY;AAAW,UAAM,IAAI,MAAM,kDAAkD;AAE7F,QAAM,YAAY,QAAQ,iBAAiB;AAE3C,QAAM,eAAe,CAAC,UAA+C;AACnE,YAAQ,SAAS,MAAM,OAAO,KAAK;AAAA,EACrC;AAEA,SACE,6BAAAG,QAAA,cAAC,wBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,MAAM,QAAQ;AAAA,MACb,GAAG;AAAA;AAAA,EACN,GACA,6BAAAA,QAAA,cAAC,aAAU,SAAS,WAAW,UAAqB,GAAG,kBACpD,OAAO,UAAU,WAChB,6BAAAA,QAAA,cAAC,SAAM,SAAS,WAAW,UAAoB,SAAQ,eACpD,KACH,IAEA,aAAAA,QAAM,cAAc,OAAO,EAAE,SAAS,WAAW,SAAS,CAAC,CAE/D,CACF;AAEJ;AAEA,YAAY,cAAc;AAC1B,YAAY,QAAQ;AAEpB,IAAO,2BAAQ;",
|
|
6
6
|
"names": ["styled", "Text", "Flex", "React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/form/SelectInput/ValueContainer.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport { components, GroupBase, StylesConfig, ValueContainerProps } from \"react-select\";\nimport Text from \"../../asorted/Text\";\n\nexport function getStyles<\n O = unknown,\n M extends boolean = false,\n G extends GroupBase<O> = GroupBase<O>,\n>(): StylesConfig<O, M, G>[\"valueContainer\"] {\n return (provided) => ({\n ...provided,\n padding: 0,\n });\n}\n\ntype ExtraProps<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>> = {\n /* A render function to customize the contents. */\n render?: (props: React.PropsWithChildren<ValueContainerProps<O, M, G>>) => React.ReactNode;\n};\nexport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAAyE;AACzE,kBAAiB;AAEV,SAAS,YAI6B;AAC3C,SAAO,CAAC,cAAc;AAAA,IACpB,GAAG;AAAA,IACH,SAAS;AAAA,EACX;AACF;
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport { components, GroupBase, StylesConfig, ValueContainerProps } from \"react-select\";\nimport Text from \"../../asorted/Text\";\n\nexport function getStyles<\n O = unknown,\n M extends boolean = false,\n G extends GroupBase<O> = GroupBase<O>,\n>(): StylesConfig<O, M, G>[\"valueContainer\"] {\n return (provided) => ({\n ...provided,\n padding: 0,\n });\n}\n\ntype ExtraProps<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>> = {\n /* A render function to customize the contents. */\n render?: (props: React.PropsWithChildren<ValueContainerProps<O, M, G>>) => React.ReactNode;\n};\n\nexport type MixedProps<\n O = unknown,\n M extends boolean = false,\n G extends GroupBase<O> = GroupBase<O>,\n> = ValueContainerProps<O, M, G> & ExtraProps<O, M, G>;\n\nexport function ValueContainer<\n O = unknown,\n M extends boolean = false,\n G extends GroupBase<O> = GroupBase<O>,\n>(props: MixedProps<O, M, G>): JSX.Element {\n const color = props.selectProps.isDisabled ? \"neutral.c60\" : \"neutral.c100\";\n return (\n <components.ValueContainer {...props}>\n <Text\n as=\"div\"\n variant=\"paragraph\"\n color={color}\n style={{ display: \"inherit\", alignItems: \"center\" }}\n >\n {props.render ? props.render(props) : props.children}\n </Text>\n </components.ValueContainer>\n );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAAyE;AACzE,kBAAiB;AAEV,SAAS,YAI6B;AAC3C,SAAO,CAAC,cAAc;AAAA,IACpB,GAAG;AAAA,IACH,SAAS;AAAA,EACX;AACF;AAaO,SAAS,eAId,OAAyC;AACzC,QAAM,QAAQ,MAAM,YAAY,aAAa,gBAAgB;AAC7D,SACE,6BAAAA,QAAA,cAAC,+BAAW,gBAAX,EAA2B,GAAG,SAC7B,6BAAAA,QAAA;AAAA,IAAC,YAAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,SAAQ;AAAA,MACR;AAAA,MACA,OAAO,EAAE,SAAS,WAAW,YAAY,SAAS;AAAA;AAAA,IAEjD,MAAM,SAAS,MAAM,OAAO,KAAK,IAAI,MAAM;AAAA,EAC9C,CACF;AAEJ;",
|
|
6
6
|
"names": ["React", "Text"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/layout/Flex/index.ts"],
|
|
4
|
-
"sourcesContent": ["import baseStyled, { BaseStyledProps } from \"../../styled\";\n\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA4C;
|
|
4
|
+
"sourcesContent": ["import baseStyled, { BaseStyledProps } from \"../../styled\";\n\nconst FlexBox = baseStyled.div.attrs<BaseStyledProps, BaseStyledProps>({ display: \"flex\" })``;\nexport type FlexBoxProps = BaseStyledProps & React.HTMLAttributes<HTMLDivElement>;\n\nexport default FlexBox;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA4C;AAE5C,MAAM,UAAU,cAAAA,QAAW,IAAI,MAAwC,EAAE,SAAS,OAAO,CAAC;AAG1F,IAAO,eAAQ;",
|
|
6
6
|
"names": ["baseStyled"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/layout/Popin/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport styled from \"styled-components\";\nimport CloseIcon from \"@ledgerhq/icons-ui/react/CloseMedium\";\nimport ArrowLeftIcon from \"@ledgerhq/icons-ui/react/ArrowLeftMedium\";\n\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport Flex from \"../../layout/Flex\";\nimport type { FlexBoxProps } from \"../../layout/Flex\";\nimport Button from \"../../cta/Button\";\nimport TransitionInOut from \"../../transitions/TransitionInOut\";\nimport TransitionScale from \"../../transitions/TransitionScale\";\n\nexport interface PopinProps extends
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport styled from \"styled-components\";\nimport CloseIcon from \"@ledgerhq/icons-ui/react/CloseMedium\";\nimport ArrowLeftIcon from \"@ledgerhq/icons-ui/react/ArrowLeftMedium\";\n\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport Flex from \"../../layout/Flex\";\nimport type { FlexBoxProps } from \"../../layout/Flex\";\nimport Button from \"../../cta/Button\";\nimport TransitionInOut from \"../../transitions/TransitionInOut\";\nimport TransitionScale from \"../../transitions/TransitionScale\";\n\nexport interface PopinProps extends FlexBoxProps {\n isOpen: boolean;\n children: React.ReactNode;\n menuPortalTarget?: Element | null;\n}\n\nexport type PopinHeaderProps = BaseStyledProps & {\n onClose?: () => void;\n onBack?: () => void;\n children: React.ReactNode;\n};\n\nconst ICON_SIZE = 20;\n\nconst Wrapper = styled(Flex).attrs<FlexBoxProps>((p) => ({\n flexDirection: \"column\",\n alignItems: \"stretch\",\n justifyContent: \"space-between\",\n height: p.height || `${p.theme.sizes.drawer.popin.max.height}px`,\n width: p.width || `${p.theme.sizes.drawer.popin.max.width}px`,\n minHeight: `${p.theme.sizes.drawer.popin.min.height}px`,\n minWidth: `${p.theme.sizes.drawer.popin.min.width}px`,\n maxHeight: `${p.theme.sizes.drawer.popin.max.height}px`,\n maxWidth: `${p.theme.sizes.drawer.popin.max.width}px`,\n zIndex: p.theme.zIndexes[8],\n p: p.p !== undefined ? p.p : p.theme.space[10],\n rowGap: 6,\n backgroundColor: \"background.main\",\n}))``;\n\nconst Overlay = styled(Flex).attrs((p) => ({\n justifyContent: \"center\",\n alignItems: \"center\",\n width: \"100vw\",\n height: \"100vh\",\n zIndex: p.theme.zIndexes[8],\n position: \"fixed\",\n top: 0,\n left: 0,\n backgroundColor: \"constant.overlay\",\n}))``;\n\nconst Header = baseStyled.section`\n display: grid;\n grid-template-columns: [icon] ${ICON_SIZE}px [title] 1fr [icon] ${ICON_SIZE}px;\n column-gap: 12px;\n`;\n\nconst HeaderTitleContainer = styled(Flex).attrs(() => ({\n justifyContent: \"center\",\n}))``;\n\nconst PopinBody = baseStyled(Flex).attrs({\n as: \"section\",\n flexDirection: \"column\",\n flex: 1,\n overflow: \"auto\",\n})``;\n\nconst PopinFooter = baseStyled(Flex).attrs({ as: \"section\" })``;\n\nconst IconContainer = styled(Button.Unstyled)`\n display: flex;\n align-items: center;\n`;\n\nconst PopinHeader = ({ children, onClose, onBack, ...props }: PopinHeaderProps) => (\n <Header {...props}>\n <Flex>\n {onBack ? (\n <IconContainer onClick={onBack}>\n <ArrowLeftIcon size={ICON_SIZE} color=\"neutral.c100\" />\n </IconContainer>\n ) : null}\n </Flex>\n <HeaderTitleContainer>{children}</HeaderTitleContainer>\n <Flex>\n {onClose ? (\n <IconContainer onClick={onClose}>\n <CloseIcon size={ICON_SIZE} color=\"neutral.c100\" />\n </IconContainer>\n ) : null}\n </Flex>\n </Header>\n);\n\nconst Popin = ({ isOpen, children, width, height, ...props }: PopinProps) => (\n <TransitionInOut in={isOpen} appear mountOnEnter unmountOnExit>\n <Overlay>\n <TransitionScale in={isOpen} appear>\n <Wrapper width={width} height={height} {...props}>\n {children}\n </Wrapper>\n </TransitionScale>\n </Overlay>\n </TransitionInOut>\n);\n\nconst PopinWrapper = ({\n children,\n menuPortalTarget,\n ...popinProps\n}: PopinProps): React.ReactElement => {\n const $root = React.useMemo(\n () =>\n menuPortalTarget === undefined && typeof document !== undefined\n ? document.querySelector(\"body\")\n : menuPortalTarget,\n [menuPortalTarget],\n );\n if (!$root) {\n return <Popin {...popinProps}>{children}</Popin>;\n } else {\n return ReactDOM.createPortal(<Popin {...popinProps}>{children}</Popin>, $root);\n }\n};\n\nPopinWrapper.Header = PopinHeader;\nPopinWrapper.Body = PopinBody;\nPopinWrapper.Footer = PopinFooter;\n\nexport default PopinWrapper;\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["styled", "Flex", "baseStyled", "Button", "React", "ArrowLeftIcon", "CloseIcon", "TransitionInOut", "TransitionScale", "ReactDOM"]
|
|
7
7
|
}
|
|
@@ -62,6 +62,12 @@ var ProgressLoader_stories_default = {
|
|
|
62
62
|
type: "boolean"
|
|
63
63
|
}
|
|
64
64
|
},
|
|
65
|
+
infinite: {
|
|
66
|
+
defaultValue: false,
|
|
67
|
+
control: {
|
|
68
|
+
type: "boolean"
|
|
69
|
+
}
|
|
70
|
+
},
|
|
65
71
|
frontStrokeColor: {
|
|
66
72
|
type: "string",
|
|
67
73
|
control: {
|
|
@@ -88,6 +94,7 @@ const Default = (args) => {
|
|
|
88
94
|
{
|
|
89
95
|
radius: args.radius,
|
|
90
96
|
progress: args.progress,
|
|
97
|
+
infinite: args.infinite,
|
|
91
98
|
stroke: args.stroke,
|
|
92
99
|
showPercentage: args.showPercentage,
|
|
93
100
|
frontStrokeColor: args.frontStrokeColor,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/loaders/ProgressLoader/ProgressLoader.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport ProgressLoader, { Props } from \"./index\";\n\nexport default {\n title: \"Loaders/ProgressLoader\",\n component: ProgressLoader,\n argTypes: {\n radius: {\n control: {\n type: \"number\",\n },\n defaultValue: 32,\n },\n progress: {\n control: {\n type: \"number\",\n },\n defaultValue: 20,\n },\n stroke: {\n control: {\n type: \"number\",\n },\n defaultValue: 6,\n },\n showPercentage: {\n defaultValue: true,\n control: {\n type: \"boolean\",\n },\n },\n frontStrokeColor: {\n type: \"string\",\n control: {\n control: \"color\",\n },\n },\n backgroundStrokeColor: {\n type: \"string\",\n control: {\n control: \"color\",\n },\n },\n textColor: {\n type: \"string\",\n control: {\n control: \"color\",\n },\n },\n },\n};\n\nexport const Default = (args: Props): JSX.Element => {\n return (\n <ProgressLoader\n radius={args.radius}\n progress={args.progress}\n stroke={args.stroke}\n showPercentage={args.showPercentage}\n frontStrokeColor={args.frontStrokeColor}\n backgroundStrokeColor={args.backgroundStrokeColor}\n frontStrokeLinecap={args.frontStrokeLinecap}\n textColor={args.textColor}\n />\n );\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAAsC;AAEtC,IAAO,iCAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,IACA,QAAQ;AAAA,MACN,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,IACA,gBAAgB;AAAA,MACd,cAAc;AAAA,MACd,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,QACP,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,uBAAuB;AAAA,MACrB,MAAM;AAAA,MACN,SAAS;AAAA,QACP,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,QACP,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,UAAU,CAAC,SAA6B;AACnD,SACE,6BAAAC,QAAA;AAAA,IAAC,aAAAD;AAAA,IAAA;AAAA,MACC,QAAQ,KAAK;AAAA,MACb,UAAU,KAAK;AAAA,MACf,QAAQ,KAAK;AAAA,MACb,gBAAgB,KAAK;AAAA,MACrB,kBAAkB,KAAK;AAAA,MACvB,uBAAuB,KAAK;AAAA,MAC5B,oBAAoB,KAAK;AAAA,MACzB,WAAW,KAAK;AAAA;AAAA,EAClB;AAEJ;",
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport ProgressLoader, { Props } from \"./index\";\n\nexport default {\n title: \"Loaders/ProgressLoader\",\n component: ProgressLoader,\n argTypes: {\n radius: {\n control: {\n type: \"number\",\n },\n defaultValue: 32,\n },\n progress: {\n control: {\n type: \"number\",\n },\n defaultValue: 20,\n },\n stroke: {\n control: {\n type: \"number\",\n },\n defaultValue: 6,\n },\n showPercentage: {\n defaultValue: true,\n control: {\n type: \"boolean\",\n },\n },\n infinite: {\n defaultValue: false,\n control: {\n type: \"boolean\",\n },\n },\n frontStrokeColor: {\n type: \"string\",\n control: {\n control: \"color\",\n },\n },\n backgroundStrokeColor: {\n type: \"string\",\n control: {\n control: \"color\",\n },\n },\n textColor: {\n type: \"string\",\n control: {\n control: \"color\",\n },\n },\n },\n};\n\nexport const Default = (args: Props): JSX.Element => {\n return (\n <ProgressLoader\n radius={args.radius}\n progress={args.progress}\n infinite={args.infinite}\n stroke={args.stroke}\n showPercentage={args.showPercentage}\n frontStrokeColor={args.frontStrokeColor}\n backgroundStrokeColor={args.backgroundStrokeColor}\n frontStrokeLinecap={args.frontStrokeLinecap}\n textColor={args.textColor}\n />\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAAsC;AAEtC,IAAO,iCAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,IACA,QAAQ;AAAA,MACN,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,IACA,gBAAgB;AAAA,MACd,cAAc;AAAA,MACd,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,UAAU;AAAA,MACR,cAAc;AAAA,MACd,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,QACP,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,uBAAuB;AAAA,MACrB,MAAM;AAAA,MACN,SAAS;AAAA,QACP,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,QACP,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,UAAU,CAAC,SAA6B;AACnD,SACE,6BAAAC,QAAA;AAAA,IAAC,aAAAD;AAAA,IAAA;AAAA,MACC,QAAQ,KAAK;AAAA,MACb,UAAU,KAAK;AAAA,MACf,UAAU,KAAK;AAAA,MACf,QAAQ,KAAK;AAAA,MACb,gBAAgB,KAAK;AAAA,MACrB,kBAAkB,KAAK;AAAA,MACvB,uBAAuB,KAAK;AAAA,MAC5B,oBAAoB,KAAK;AAAA,MACzB,WAAW,KAAK;AAAA;AAAA,EAClB;AAEJ;",
|
|
6
6
|
"names": ["ProgressLoader", "React"]
|
|
7
7
|
}
|
|
@@ -60,6 +60,20 @@ const StyledProgressLoaderContainer = import_styled_components.default.div`
|
|
|
60
60
|
display: flex;
|
|
61
61
|
position: absolute;
|
|
62
62
|
`;
|
|
63
|
+
const StyledSpinningContainer = import_styled_components.default.div`
|
|
64
|
+
animation: rotation 1s infinite linear;
|
|
65
|
+
display: flex;
|
|
66
|
+
align-items: center;
|
|
67
|
+
justify-content: center;
|
|
68
|
+
@keyframes rotation {
|
|
69
|
+
from {
|
|
70
|
+
transform: rotate(0deg);
|
|
71
|
+
}
|
|
72
|
+
to {
|
|
73
|
+
transform: rotate(360deg);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
`;
|
|
63
77
|
function ProgressCircleSvg({
|
|
64
78
|
radius,
|
|
65
79
|
stroke,
|
|
@@ -97,12 +111,23 @@ function ProgressLoader({
|
|
|
97
111
|
stroke = 6,
|
|
98
112
|
progress = 0,
|
|
99
113
|
showPercentage = true,
|
|
114
|
+
infinite,
|
|
100
115
|
textColor,
|
|
101
116
|
frontStrokeColor,
|
|
102
117
|
frontStrokeLinecap,
|
|
103
118
|
backgroundStrokeColor
|
|
104
119
|
}) {
|
|
105
|
-
return /* @__PURE__ */ import_react.default.createElement(StyledProgressLoaderContainer, null, showPercentage && /* @__PURE__ */ import_react.default.createElement(StyledCenteredText, { variant: "body", color: textColor || "primary.c80" }, progress, "%"), /* @__PURE__ */ import_react.default.createElement(
|
|
120
|
+
return /* @__PURE__ */ import_react.default.createElement(StyledProgressLoaderContainer, null, showPercentage && /* @__PURE__ */ import_react.default.createElement(StyledCenteredText, { variant: "body", color: textColor || "primary.c80" }, progress, "%"), infinite ? /* @__PURE__ */ import_react.default.createElement(StyledSpinningContainer, null, /* @__PURE__ */ import_react.default.createElement(
|
|
121
|
+
ProgressCircleSvg,
|
|
122
|
+
{
|
|
123
|
+
radius,
|
|
124
|
+
stroke,
|
|
125
|
+
progress: 25,
|
|
126
|
+
frontStrokeColor,
|
|
127
|
+
frontStrokeLinecap,
|
|
128
|
+
backgroundStrokeColor
|
|
129
|
+
}
|
|
130
|
+
)) : /* @__PURE__ */ import_react.default.createElement(
|
|
106
131
|
ProgressCircleSvg,
|
|
107
132
|
{
|
|
108
133
|
radius,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/loaders/ProgressLoader/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\n\nexport interface Props {\n /**\n * Radius of the progress ring.\n */\n radius?: number;\n\n /**\n * Thickness of the progress ring.\n */\n stroke?: number;\n\n /**\n * Progress of the loader, in percent, between 0 and 100.\n */\n progress?: number;\n\n /**\n * Whether to display the progress, defaults to true.\n */\n showPercentage?: boolean;\n\n /**\n * Percentage text color\n */\n textColor?: string;\n\n /**\n * Front stroke color.\n */\n frontStrokeColor?: string;\n\n /**\n * Front stroke linecap.\n * https://developer.mozilla.org/fr/docs/Web/SVG/Attribute/stroke-linecap\n */\n frontStrokeLinecap?: \"butt\" | \"round\";\n\n /**\n * Background stroke color.\n */\n backgroundStrokeColor?: string;\n}\n\nconst StyledCircle = styled.circle.attrs({\n fill: \"transparent\",\n cx: \"50%\",\n cy: \"50%\",\n})`\n transition: stroke-dashoffset 0.35s;\n transform: rotate(-90deg);\n transform-origin: 50% 50%;\n`;\n\nconst StyledCircleBackground = styled(StyledCircle).attrs((props) => ({\n stroke: props.stroke || props.theme.colors.primary.c30,\n}))``;\n\nconst StyledCircleFront = styled(StyledCircle).attrs((props) => ({\n stroke: props.stroke || props.theme.colors.primary.c80,\n}))``;\n\nconst StyledCenteredText = styled(Text)`\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n`;\n\nconst StyledProgressLoaderContainer = styled.div`\n display: flex;\n position: absolute;\n`;\n\nfunction ProgressCircleSvg({\n radius,\n stroke,\n progress,\n backgroundStrokeColor,\n frontStrokeColor,\n frontStrokeLinecap,\n}: {\n radius: number;\n stroke: number;\n progress: number;\n backgroundStrokeColor?: string;\n frontStrokeColor?: string;\n frontStrokeLinecap?: \"butt\" | \"round\" | \"square\";\n}) {\n const normalizedRadius = radius - stroke / 2;\n const circumference = normalizedRadius * 2 * Math.PI;\n const strokeDashoffset = circumference - (progress / 100) * circumference;\n return (\n <svg height={radius * 2} width={radius * 2}>\n <StyledCircleBackground\n strokeWidth={stroke}\n strokeDasharray={circumference + \" \" + circumference}\n style={{ strokeDashoffset: 0 }}\n stroke={backgroundStrokeColor}\n r={normalizedRadius}\n />\n <StyledCircleFront\n strokeWidth={stroke}\n strokeDasharray={circumference + \" \" + circumference}\n style={{ strokeDashoffset }}\n stroke={frontStrokeColor}\n strokeLinecap={frontStrokeLinecap}\n r={normalizedRadius}\n />\n </svg>\n );\n}\n\nexport default function ProgressLoader({\n radius = 32,\n stroke = 6,\n progress = 0,\n showPercentage = true,\n textColor,\n frontStrokeColor,\n frontStrokeLinecap,\n backgroundStrokeColor,\n}: Props): JSX.Element {\n return (\n <StyledProgressLoaderContainer>\n {showPercentage && (\n <StyledCenteredText variant=\"body\" color={textColor || \"primary.c80\"}>\n {progress}%\n </StyledCenteredText>\n )}\n <ProgressCircleSvg\n radius={radius}\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\n\nexport interface Props {\n /**\n * Radius of the progress ring.\n */\n radius?: number;\n\n /**\n * Thickness of the progress ring.\n */\n stroke?: number;\n\n /**\n * Progress of the loader, in percent, between 0 and 100.\n */\n progress?: number;\n\n /**\n * Whether to make it infinite, with spinning and whatnot.\n */\n infinite?: boolean;\n\n /**\n * Whether to display the progress, defaults to true.\n */\n showPercentage?: boolean;\n\n /**\n * Percentage text color\n */\n textColor?: string;\n\n /**\n * Front stroke color.\n */\n frontStrokeColor?: string;\n\n /**\n * Front stroke linecap.\n * https://developer.mozilla.org/fr/docs/Web/SVG/Attribute/stroke-linecap\n */\n frontStrokeLinecap?: \"butt\" | \"round\";\n\n /**\n * Background stroke color.\n */\n backgroundStrokeColor?: string;\n}\n\nconst StyledCircle = styled.circle.attrs({\n fill: \"transparent\",\n cx: \"50%\",\n cy: \"50%\",\n})`\n transition: stroke-dashoffset 0.35s;\n transform: rotate(-90deg);\n transform-origin: 50% 50%;\n`;\n\nconst StyledCircleBackground = styled(StyledCircle).attrs((props) => ({\n stroke: props.stroke || props.theme.colors.primary.c30,\n}))``;\n\nconst StyledCircleFront = styled(StyledCircle).attrs((props) => ({\n stroke: props.stroke || props.theme.colors.primary.c80,\n}))``;\n\nconst StyledCenteredText = styled(Text)`\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n`;\n\nconst StyledProgressLoaderContainer = styled.div`\n display: flex;\n position: absolute;\n`;\nconst StyledSpinningContainer = styled.div`\n animation: rotation 1s infinite linear;\n display: flex;\n align-items: center;\n justify-content: center;\n @keyframes rotation {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n`;\n\nfunction ProgressCircleSvg({\n radius,\n stroke,\n progress,\n backgroundStrokeColor,\n frontStrokeColor,\n frontStrokeLinecap,\n}: {\n radius: number;\n stroke: number;\n progress: number;\n backgroundStrokeColor?: string;\n frontStrokeColor?: string;\n frontStrokeLinecap?: \"butt\" | \"round\" | \"square\";\n}) {\n const normalizedRadius = radius - stroke / 2;\n const circumference = normalizedRadius * 2 * Math.PI;\n const strokeDashoffset = circumference - (progress / 100) * circumference;\n return (\n <svg height={radius * 2} width={radius * 2}>\n <StyledCircleBackground\n strokeWidth={stroke}\n strokeDasharray={circumference + \" \" + circumference}\n style={{ strokeDashoffset: 0 }}\n stroke={backgroundStrokeColor}\n r={normalizedRadius}\n />\n <StyledCircleFront\n strokeWidth={stroke}\n strokeDasharray={circumference + \" \" + circumference}\n style={{ strokeDashoffset }}\n stroke={frontStrokeColor}\n strokeLinecap={frontStrokeLinecap}\n r={normalizedRadius}\n />\n </svg>\n );\n}\n\nexport default function ProgressLoader({\n radius = 32,\n stroke = 6,\n progress = 0,\n showPercentage = true,\n infinite,\n textColor,\n frontStrokeColor,\n frontStrokeLinecap,\n backgroundStrokeColor,\n}: Props): JSX.Element {\n return (\n <StyledProgressLoaderContainer>\n {showPercentage && (\n <StyledCenteredText variant=\"body\" color={textColor || \"primary.c80\"}>\n {progress}%\n </StyledCenteredText>\n )}\n {infinite ? (\n <StyledSpinningContainer>\n <ProgressCircleSvg\n radius={radius}\n stroke={stroke}\n progress={25}\n frontStrokeColor={frontStrokeColor}\n frontStrokeLinecap={frontStrokeLinecap}\n backgroundStrokeColor={backgroundStrokeColor}\n />\n </StyledSpinningContainer>\n ) : (\n <ProgressCircleSvg\n radius={radius}\n stroke={stroke}\n progress={progress}\n frontStrokeColor={frontStrokeColor}\n frontStrokeLinecap={frontStrokeLinecap}\n backgroundStrokeColor={backgroundStrokeColor}\n />\n )}\n </StyledProgressLoaderContainer>\n );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AAkDjB,MAAM,eAAe,yBAAAA,QAAO,OAAO,MAAM;AAAA,EACvC,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AACN,CAAC;AAAA;AAAA;AAAA;AAAA;AAMD,MAAM,6BAAyB,yBAAAA,SAAO,YAAY,EAAE,MAAM,CAAC,WAAW;AAAA,EACpE,QAAQ,MAAM,UAAU,MAAM,MAAM,OAAO,QAAQ;AACrD,EAAE;AAEF,MAAM,wBAAoB,yBAAAA,SAAO,YAAY,EAAE,MAAM,CAAC,WAAW;AAAA,EAC/D,QAAQ,MAAM,UAAU,MAAM,MAAM,OAAO,QAAQ;AACrD,EAAE;AAEF,MAAM,yBAAqB,yBAAAA,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQtC,MAAM,gCAAgC,yBAAAD,QAAO;AAAA;AAAA;AAAA;AAI7C,MAAM,0BAA0B,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAevC,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,mBAAmB,SAAS,SAAS;AAC3C,QAAM,gBAAgB,mBAAmB,IAAI,KAAK;AAClD,QAAM,mBAAmB,gBAAiB,WAAW,MAAO;AAC5D,SACE,6BAAAE,QAAA,cAAC,SAAI,QAAQ,SAAS,GAAG,OAAO,SAAS,KACvC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,iBAAiB,gBAAgB,MAAM;AAAA,MACvC,OAAO,EAAE,kBAAkB,EAAE;AAAA,MAC7B,QAAQ;AAAA,MACR,GAAG;AAAA;AAAA,EACL,GACA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,iBAAiB,gBAAgB,MAAM;AAAA,MACvC,OAAO,EAAE,iBAAiB;AAAA,MAC1B,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,GAAG;AAAA;AAAA,EACL,CACF;AAEJ;AAEe,SAAR,eAAgC;AAAA,EACrC,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,SACE,6BAAAA,QAAA,cAAC,qCACE,kBACC,6BAAAA,QAAA,cAAC,sBAAmB,SAAQ,QAAO,OAAO,aAAa,iBACpD,UAAS,GACZ,GAED,WACC,6BAAAA,QAAA,cAAC,+BACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,CACF,IAEA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,CAEJ;AAEJ;",
|
|
6
6
|
"names": ["styled", "Text", "React"]
|
|
7
7
|
}
|
|
@@ -4,7 +4,7 @@ import { TextProps } from "../asorted/Text";
|
|
|
4
4
|
import { BaseStyledProps } from "../styled";
|
|
5
5
|
export type Size = "large" | "medium" | "small";
|
|
6
6
|
export type Type = "plain" | "opacity" | "outlined" | "outlinedOpacity";
|
|
7
|
-
export type TagProps = BaseStyledProps & BorderProps & React.PropsWithChildren<{
|
|
7
|
+
export type TagProps = BaseStyledProps & React.HTMLAttributes<HTMLDivElement> & BorderProps & React.PropsWithChildren<{
|
|
8
8
|
/**
|
|
9
9
|
* Changes the appearance based on the active state.
|
|
10
10
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAe,MAAM,eAAe,CAAC;AACpD,OAAO,IAAmB,MAAM,iBAAiB,CAAC;AAClD,OAAO,UAA+B,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,7 +6,11 @@ const DividerBase = styled(Flex).attrs((p) => ({
|
|
|
6
6
|
my: p.my || 0,
|
|
7
7
|
height: 1,
|
|
8
8
|
backgroundColor: "neutral.c40",
|
|
9
|
-
}))
|
|
9
|
+
})) `
|
|
10
|
+
&[data-variant="light"] {
|
|
11
|
+
background: ${(p) => p.theme.colors.neutral.c30};
|
|
12
|
+
}
|
|
13
|
+
`;
|
|
10
14
|
const Divider = (props) => {
|
|
11
15
|
if (!props.text)
|
|
12
16
|
return React.createElement(DividerBase, Object.assign({}, props));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/asorted/Divider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,IAAsB,MAAM,mBAAmB,CAAC;AACvD,OAAO,IAAI,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/asorted/Divider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,IAAsB,MAAM,mBAAmB,CAAC;AACvD,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAGtC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAe,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC;IACzE,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC;IACb,MAAM,EAAE,CAAC;IACT,eAAe,EAAE,aAAa;CAC/B,CAAC,CAAC,CAAA;;kBAEe,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;CAElD,CAAC;AAEF,MAAM,OAAO,GAAoB,CAAC,KAAK,EAAE,EAAE;IACzC,IAAI,CAAC,KAAK,CAAC,IAAI;QAAE,OAAO,oBAAC,WAAW,oBAAK,KAAK,EAAI,CAAC;IACnD,OAAO,CACL,oBAAC,IAAI,oBAAK,KAAK,IAAE,aAAa,EAAC,KAAK,EAAC,UAAU,EAAC,QAAQ;QACtD,oBAAC,WAAW,IAAC,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,GAAI;QAC/B,oBAAC,IAAI,IAAC,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,aAAa,EAAC,EAAE,EAAE,CAAC,IACrD,KAAK,CAAC,IAAI,CACN;QACP,oBAAC,WAAW,IAAC,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,GAAI,CAC1B,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -110,10 +110,16 @@ const getVariantColors = (p) => ({
|
|
|
110
110
|
border-color: ${p.theme.colors.neutral.c50};
|
|
111
111
|
color: ${p.theme.colors.neutral.c50};
|
|
112
112
|
background-color: transparent;
|
|
113
|
+
&:focus, &:hover {
|
|
114
|
+
box-shadow: none;
|
|
115
|
+
}
|
|
113
116
|
`,
|
|
114
117
|
filled: `
|
|
115
118
|
color: ${p.theme.colors.neutral.c50};
|
|
116
119
|
background-color: ${p.theme.colors.neutral.c30};
|
|
120
|
+
&:focus, &:hover {
|
|
121
|
+
box-shadow: none;
|
|
122
|
+
}
|
|
117
123
|
`,
|
|
118
124
|
},
|
|
119
125
|
default: `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/cta/Button/index.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/cta/Button/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,9 +3,9 @@ import React, { InputHTMLAttributes } from "react";
|
|
|
3
3
|
type ValueType = HTMLInputElement["value"];
|
|
4
4
|
export type CommonProps = InputHTMLAttributes<HTMLInputElement> & TypographyProps & {
|
|
5
5
|
disabled?: boolean;
|
|
6
|
-
error?:
|
|
7
|
-
warning?:
|
|
8
|
-
info?:
|
|
6
|
+
error?: React.ReactNode;
|
|
7
|
+
warning?: React.ReactNode;
|
|
8
|
+
info?: React.ReactNode;
|
|
9
9
|
};
|
|
10
10
|
export type InputProps<T = ValueType> = Omit<CommonProps, "value" | "onChange"> & {
|
|
11
11
|
value: T;
|
|
@@ -2,7 +2,7 @@ import React, { InputHTMLAttributes } from "react";
|
|
|
2
2
|
import { FlexBoxProps } from "../../layout/Flex";
|
|
3
3
|
type ElementState = {
|
|
4
4
|
checked: boolean;
|
|
5
|
-
disabled
|
|
5
|
+
disabled?: boolean | undefined;
|
|
6
6
|
};
|
|
7
7
|
export declare const Label: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../asorted/Text").TextProps & ElementState, keyof import("../../asorted/Text").TextProps>;
|
|
8
8
|
type InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange" | "name">;
|
|
@@ -20,7 +20,7 @@ declare const Radio: {
|
|
|
20
20
|
displayName: string;
|
|
21
21
|
Label: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../asorted/Text").TextProps & {
|
|
22
22
|
checked: boolean;
|
|
23
|
-
disabled
|
|
23
|
+
disabled?: boolean | undefined;
|
|
24
24
|
}, keyof import("../../asorted/Text").TextProps>;
|
|
25
25
|
};
|
|
26
26
|
};
|
|
@@ -4,5 +4,6 @@ export declare function getStyles<O = unknown, M extends boolean = false, G exte
|
|
|
4
4
|
type ExtraProps<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>> = {
|
|
5
5
|
render?: (props: React.PropsWithChildren<ValueContainerProps<O, M, G>>) => React.ReactNode;
|
|
6
6
|
};
|
|
7
|
-
export
|
|
7
|
+
export type MixedProps<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>> = ValueContainerProps<O, M, G> & ExtraProps<O, M, G>;
|
|
8
|
+
export declare function ValueContainer<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(props: MixedProps<O, M, G>): JSX.Element;
|
|
8
9
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ValueContainer.js","sourceRoot":"","sources":["../../../../src/components/form/SelectInput/ValueContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAgD,MAAM,cAAc,CAAC;AACxF,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAEtC,MAAM,UAAU,SAAS;IAKvB,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,iCAChB,QAAQ,KACX,OAAO,EAAE,CAAC,IACV,CAAC;AACL,CAAC;
|
|
1
|
+
{"version":3,"file":"ValueContainer.js","sourceRoot":"","sources":["../../../../src/components/form/SelectInput/ValueContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAgD,MAAM,cAAc,CAAC;AACxF,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAEtC,MAAM,UAAU,SAAS;IAKvB,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,iCAChB,QAAQ,KACX,OAAO,EAAE,CAAC,IACV,CAAC;AACL,CAAC;AAaD,MAAM,UAAU,cAAc,CAI5B,KAA0B;IAC1B,MAAM,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,CAAC;IAC5E,OAAO,CACL,oBAAC,UAAU,CAAC,cAAc,oBAAK,KAAK;QAClC,oBAAC,IAAI,IACH,EAAE,EAAC,KAAK,EACR,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,IAElD,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAC/C,CACmB,CAC7B,CAAC;AACJ,CAAC"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { BaseStyledProps } from "../../styled";
|
|
2
|
-
export type FlexBoxProps = BaseStyledProps;
|
|
3
3
|
declare const FlexBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
|
|
4
4
|
columnGap?: string | number | undefined;
|
|
5
5
|
rowGap?: string | number | undefined;
|
|
6
6
|
color?: string | undefined;
|
|
7
7
|
}, "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "overflow" | "padding" | "p" | "size" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
|
|
8
|
+
export type FlexBoxProps = BaseStyledProps & React.HTMLAttributes<HTMLDivElement>;
|
|
8
9
|
export default FlexBox;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/layout/Flex/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAA+B,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/layout/Flex/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAA+B,MAAM,cAAc,CAAC;AAE3D,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,CAAC,KAAK,CAAmC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAA,EAAE,CAAC;AAG9F,eAAe,OAAO,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { BaseStyledProps } from "../../styled";
|
|
3
|
-
|
|
3
|
+
import type { FlexBoxProps } from "../../layout/Flex";
|
|
4
|
+
export interface PopinProps extends FlexBoxProps {
|
|
4
5
|
isOpen: boolean;
|
|
5
6
|
children: React.ReactNode;
|
|
6
7
|
menuPortalTarget?: Element | null;
|
|
@@ -12,6 +12,10 @@ export interface Props {
|
|
|
12
12
|
* Progress of the loader, in percent, between 0 and 100.
|
|
13
13
|
*/
|
|
14
14
|
progress?: number;
|
|
15
|
+
/**
|
|
16
|
+
* Whether to make it infinite, with spinning and whatnot.
|
|
17
|
+
*/
|
|
18
|
+
infinite?: boolean;
|
|
15
19
|
/**
|
|
16
20
|
* Whether to display the progress, defaults to true.
|
|
17
21
|
*/
|
|
@@ -34,4 +38,4 @@ export interface Props {
|
|
|
34
38
|
*/
|
|
35
39
|
backgroundStrokeColor?: string;
|
|
36
40
|
}
|
|
37
|
-
export default function ProgressLoader({ radius, stroke, progress, showPercentage, textColor, frontStrokeColor, frontStrokeLinecap, backgroundStrokeColor, }: Props): JSX.Element;
|
|
41
|
+
export default function ProgressLoader({ radius, stroke, progress, showPercentage, infinite, textColor, frontStrokeColor, frontStrokeLinecap, backgroundStrokeColor, }: Props): JSX.Element;
|
|
@@ -27,6 +27,20 @@ const StyledProgressLoaderContainer = styled.div `
|
|
|
27
27
|
display: flex;
|
|
28
28
|
position: absolute;
|
|
29
29
|
`;
|
|
30
|
+
const StyledSpinningContainer = styled.div `
|
|
31
|
+
animation: rotation 1s infinite linear;
|
|
32
|
+
display: flex;
|
|
33
|
+
align-items: center;
|
|
34
|
+
justify-content: center;
|
|
35
|
+
@keyframes rotation {
|
|
36
|
+
from {
|
|
37
|
+
transform: rotate(0deg);
|
|
38
|
+
}
|
|
39
|
+
to {
|
|
40
|
+
transform: rotate(360deg);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
`;
|
|
30
44
|
function ProgressCircleSvg({ radius, stroke, progress, backgroundStrokeColor, frontStrokeColor, frontStrokeLinecap, }) {
|
|
31
45
|
const normalizedRadius = radius - stroke / 2;
|
|
32
46
|
const circumference = normalizedRadius * 2 * Math.PI;
|
|
@@ -35,11 +49,12 @@ function ProgressCircleSvg({ radius, stroke, progress, backgroundStrokeColor, fr
|
|
|
35
49
|
React.createElement(StyledCircleBackground, { strokeWidth: stroke, strokeDasharray: circumference + " " + circumference, style: { strokeDashoffset: 0 }, stroke: backgroundStrokeColor, r: normalizedRadius }),
|
|
36
50
|
React.createElement(StyledCircleFront, { strokeWidth: stroke, strokeDasharray: circumference + " " + circumference, style: { strokeDashoffset }, stroke: frontStrokeColor, strokeLinecap: frontStrokeLinecap, r: normalizedRadius })));
|
|
37
51
|
}
|
|
38
|
-
export default function ProgressLoader({ radius = 32, stroke = 6, progress = 0, showPercentage = true, textColor, frontStrokeColor, frontStrokeLinecap, backgroundStrokeColor, }) {
|
|
52
|
+
export default function ProgressLoader({ radius = 32, stroke = 6, progress = 0, showPercentage = true, infinite, textColor, frontStrokeColor, frontStrokeLinecap, backgroundStrokeColor, }) {
|
|
39
53
|
return (React.createElement(StyledProgressLoaderContainer, null,
|
|
40
54
|
showPercentage && (React.createElement(StyledCenteredText, { variant: "body", color: textColor || "primary.c80" },
|
|
41
55
|
progress,
|
|
42
56
|
"%")),
|
|
43
|
-
React.createElement(
|
|
57
|
+
infinite ? (React.createElement(StyledSpinningContainer, null,
|
|
58
|
+
React.createElement(ProgressCircleSvg, { radius: radius, stroke: stroke, progress: 25, frontStrokeColor: frontStrokeColor, frontStrokeLinecap: frontStrokeLinecap, backgroundStrokeColor: backgroundStrokeColor }))) : (React.createElement(ProgressCircleSvg, { radius: radius, stroke: stroke, progress: progress, frontStrokeColor: frontStrokeColor, frontStrokeLinecap: frontStrokeLinecap, backgroundStrokeColor: backgroundStrokeColor }))));
|
|
44
59
|
}
|
|
45
60
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/loaders/ProgressLoader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,IAAI,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/loaders/ProgressLoader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAkDtC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;IACvC,IAAI,EAAE,aAAa;IACnB,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;CACV,CAAC,CAAA;;;;CAID,CAAC;AAEF,MAAM,sBAAsB,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IACpE,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;CACvD,CAAC,CAAC,CAAA,EAAE,CAAC;AAEN,MAAM,iBAAiB,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IAC/D,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;CACvD,CAAC,CAAC,CAAA,EAAE,CAAC;AAEN,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;CAMtC,CAAC;AAEF,MAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG/C,CAAC;AACF,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;CAazC,CAAC;AAEF,SAAS,iBAAiB,CAAC,EACzB,MAAM,EACN,MAAM,EACN,QAAQ,EACR,qBAAqB,EACrB,gBAAgB,EAChB,kBAAkB,GAQnB;IACC,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC;IAC7C,MAAM,aAAa,GAAG,gBAAgB,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC;IACrD,MAAM,gBAAgB,GAAG,aAAa,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,GAAG,aAAa,CAAC;IAC1E,OAAO,CACL,6BAAK,MAAM,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC;QACxC,oBAAC,sBAAsB,IACrB,WAAW,EAAE,MAAM,EACnB,eAAe,EAAE,aAAa,GAAG,GAAG,GAAG,aAAa,EACpD,KAAK,EAAE,EAAE,gBAAgB,EAAE,CAAC,EAAE,EAC9B,MAAM,EAAE,qBAAqB,EAC7B,CAAC,EAAE,gBAAgB,GACnB;QACF,oBAAC,iBAAiB,IAChB,WAAW,EAAE,MAAM,EACnB,eAAe,EAAE,aAAa,GAAG,GAAG,GAAG,aAAa,EACpD,KAAK,EAAE,EAAE,gBAAgB,EAAE,EAC3B,MAAM,EAAE,gBAAgB,EACxB,aAAa,EAAE,kBAAkB,EACjC,CAAC,EAAE,gBAAgB,GACnB,CACE,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,MAAM,GAAG,EAAE,EACX,MAAM,GAAG,CAAC,EACV,QAAQ,GAAG,CAAC,EACZ,cAAc,GAAG,IAAI,EACrB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,kBAAkB,EAClB,qBAAqB,GACf;IACN,OAAO,CACL,oBAAC,6BAA6B;QAC3B,cAAc,IAAI,CACjB,oBAAC,kBAAkB,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,SAAS,IAAI,aAAa;YACjE,QAAQ;gBACU,CACtB;QACA,QAAQ,CAAC,CAAC,CAAC,CACV,oBAAC,uBAAuB;YACtB,oBAAC,iBAAiB,IAChB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,EAAE,EACZ,gBAAgB,EAAE,gBAAgB,EAClC,kBAAkB,EAAE,kBAAkB,EACtC,qBAAqB,EAAE,qBAAqB,GAC5C,CACsB,CAC3B,CAAC,CAAC,CAAC,CACF,oBAAC,iBAAiB,IAChB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,gBAAgB,EAClC,kBAAkB,EAAE,kBAAkB,EACtC,qBAAqB,EAAE,qBAAqB,GAC5C,CACH,CAC6B,CACjC,CAAC;AACJ,CAAC"}
|