@ledgerhq/react-ui 0.9.0-nightly.0 → 0.9.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/cards/Carousel/Slide.js +1 -2
- package/lib/cjs/components/cards/Carousel/Slide.js.map +2 -2
- package/lib/cjs/components/form/BaseInput/index.js +3 -0
- package/lib/cjs/components/form/BaseInput/index.js.map +2 -2
- package/lib/cjs/components/message/Tooltip/styles.js +13 -13
- package/lib/cjs/components/message/Tooltip/styles.js.map +2 -2
- package/lib/cjs/components/navigation/progress/ProgressBar/Onboarding.js +1 -1
- package/lib/cjs/components/navigation/progress/ProgressBar/Onboarding.js.map +1 -1
- package/lib/cjs/styles/global.js +1 -1
- package/lib/cjs/styles/global.js.map +1 -1
- package/lib/components/cards/Carousel/Slide.js +1 -2
- package/lib/components/form/BaseInput/index.js +3 -0
- package/lib/components/message/Tooltip/styles.js +13 -13
- package/lib/components/navigation/progress/ProgressBar/Onboarding.js +1 -1
- package/lib/styles/global.js +1 -1
- package/package.json +8 -3
|
@@ -31,10 +31,9 @@ var import_Flex = __toModule(require("../../layout/Flex"));
|
|
|
31
31
|
const Wrapper = (0, import_styled_components.default)(import_Flex.default)`
|
|
32
32
|
width: 100%;
|
|
33
33
|
height: 100%;
|
|
34
|
-
background: gray;
|
|
35
34
|
flex-direction: column;
|
|
36
35
|
padding: ${(p) => p.theme.space[8]}px ${(p) => p.theme.space[10]}px;
|
|
37
|
-
padding-right: 280px;
|
|
36
|
+
padding-right: 280px; /* Nb gives air to not overlap the illustration */
|
|
38
37
|
z-index: ${(p) => p.theme.zIndexes[8]};
|
|
39
38
|
background: url(${(p) => p.image}) no-repeat ${(p) => p.theme.colors.neutral.c100};
|
|
40
39
|
background-size: contain;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/cards/Carousel/Slide.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport Flex from \"../../layout/Flex\";\n\nconst Wrapper = styled(Flex)<{ image?: string }>`\n width: 100%;\n height: 100%;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AACjB,kBAAiB;AAEjB,MAAM,UAAU,sCAAO;AAAA;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport Flex from \"../../layout/Flex\";\n\nconst Wrapper = styled(Flex)<{ image?: string }>`\n width: 100%;\n height: 100%;\n flex-direction: column;\n padding: ${(p) => p.theme.space[8]}px ${(p) => p.theme.space[10]}px;\n padding-right: 280px; /* Nb gives air to not overlap the illustration */\n z-index: ${(p) => p.theme.zIndexes[8]};\n background: url(${(p) => p.image}) no-repeat ${(p) => p.theme.colors.neutral.c100};\n background-size: contain;\n background-position: right 60px bottom;\n`;\n\nexport type Props = {\n onClick: () => void;\n title: string;\n description: string;\n image?: string;\n};\n\nconst Slide = ({ title, description, image, onClick }: Props): React.ReactElement => {\n return (\n <Wrapper key={\"key\"} image={image} onClick={onClick}>\n <Text variant={\"tiny\"} color=\"neutral.c00\" fontWeight=\"regular\">\n {title}\n </Text>\n <Text variant={\"h5\"} color=\"neutral.c00\" textTransform=\"uppercase\">\n {description}\n </Text>\n </Wrapper>\n );\n};\n\nexport default Slide;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AACjB,kBAAiB;AAEjB,MAAM,UAAU,sCAAO;AAAA;AAAA;AAAA;AAAA,aAIV,CAAC,MAAM,EAAE,MAAM,MAAM,QAAQ,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA,aAElD,CAAC,MAAM,EAAE,MAAM,SAAS;AAAA,oBACjB,CAAC,MAAM,EAAE,oBAAoB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAY/E,MAAM,QAAQ,CAAC,EAAE,OAAO,aAAa,OAAO,cAAyC;AACnF,SACE,mDAAC,SAAD;AAAA,IAAS,KAAK;AAAA,IAAO;AAAA,IAAc;AAAA,KACjC,mDAAC,qBAAD;AAAA,IAAM,SAAS;AAAA,IAAQ,OAAM;AAAA,IAAc,YAAW;AAAA,KACnD,QAEH,mDAAC,qBAAD;AAAA,IAAM,SAAS;AAAA,IAAM,OAAM;AAAA,IAAc,eAAc;AAAA,KACpD;AAAA;AAMT,IAAO,gBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -91,6 +91,8 @@ const BaseInput = import_styled_components.default.input.attrs({
|
|
|
91
91
|
color: ${(p) => p.disabled ? p.theme.colors.neutral.c50 : p.theme.colors.neutral.c70};
|
|
92
92
|
}
|
|
93
93
|
|
|
94
|
+
/* stylelint-disable property-no-vendor-prefix */
|
|
95
|
+
|
|
94
96
|
/* Hide type=number arrow for Chrome, Safari, Edge, Opera */
|
|
95
97
|
&::-webkit-outer-spin-button,
|
|
96
98
|
::-webkit-inner-spin-button {
|
|
@@ -102,6 +104,7 @@ const BaseInput = import_styled_components.default.input.attrs({
|
|
|
102
104
|
&[type="number"] {
|
|
103
105
|
-moz-appearance: textfield;
|
|
104
106
|
}
|
|
107
|
+
/* stylelint-enable property-no-vendor-prefix */
|
|
105
108
|
|
|
106
109
|
${import_styled_system.typography}
|
|
107
110
|
`;
|
|
@@ -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?: string;\n warning?: string;\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.c100};\n `};\n\n ${(p) =>\n !p.error &&\n p.warning &&\n !p.disabled &&\n css`\n border: 1px solid ${p.theme.colors.warning.c80};\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.c100 : 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-top: 14px;\n padding-bottom: 14px;\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 /* 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\n ${typography}\n`;\n\nexport const InputErrorContainer = styled(Text)`\n color: ${(p) => p.theme.colors.error.c100};\n margin-left: 12px;\n`;\nexport const InputWarningContainer = styled(Text)`\n color: ${(p) => p.theme.colors.warning.c80};\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 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 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) && !disabled && (\n <FlexBox flexDirection=\"column\" rowGap={2} mt={2}>\n {error && <InputErrorContainer variant=\"small\">{error}</InputErrorContainer>}\n {warning && <InputWarningContainer variant=\"small\">{warning}</InputWarningContainer>}\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
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAA4B;AAC5B,2BAA4C;AAC5C,mBAA2E;AAC3E,qCAAoC;AACpC,kBAAoB;AACpB,kBAAiB;AACjB,qBAAqB;AACrB,oBAA+B;AAuCxB,MAAM,iBAAiB,iCAAO;AAAA;AAAA;AAAA,YAGzB,CAAC,MAAM,aAAa,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,WAG5C,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,IAErC,CAAC,MACD,EAAE,SACF,CAAC,EAAE,SACH,CAAC,EAAE,WACH;AAAA,0BACsB,EAAE,MAAM,OAAO,QAAQ;AAAA,8BACnB,yBAAK,EAAE,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA,IAG3D,CAAC,MACD,EAAE,SACF,CAAC,EAAE,YACH;AAAA,0BACsB,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,IAG3C,CAAC,MACD,CAAC,EAAE,SACH,EAAE,WACF,CAAC,EAAE,YACH;AAAA,0BACsB,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,IAG7C,CAAC,MACD,CAAC,EAAE,SACH,CAAC,EAAE,WACH,CAAC,EAAE,YACH;AAAA;AAAA,kBAEc,CAAC,EAAE,YAAY,aAAa,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,IAIjE,CAAC,MACD,EAAE,YACF;AAAA,eACW,EAAE,MAAM,OAAO,QAAQ;AAAA,oBAClB,CAAC,OAAM,GAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI3C,MAAM,YAAY,iCAAO,MAAM,MAEpC;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKG,CAAC,MAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,MAAM,OAAO,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,YAG1E,CAAC,MAAO,EAAE,WAAW,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOpC,CAAC,MAAO,EAAE,WAAW,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
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?: string;\n warning?: string;\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.c100};\n `};\n\n ${(p) =>\n !p.error &&\n p.warning &&\n !p.disabled &&\n css`\n border: 1px solid ${p.theme.colors.warning.c80};\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.c100 : 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-top: 14px;\n padding-bottom: 14px;\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.c100};\n margin-left: 12px;\n`;\nexport const InputWarningContainer = styled(Text)`\n color: ${(p) => p.theme.colors.warning.c80};\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 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 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) && !disabled && (\n <FlexBox flexDirection=\"column\" rowGap={2} mt={2}>\n {error && <InputErrorContainer variant=\"small\">{error}</InputErrorContainer>}\n {warning && <InputWarningContainer variant=\"small\">{warning}</InputWarningContainer>}\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
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -45,6 +45,19 @@ var styles_default = import_styled_components.css`
|
|
|
45
45
|
transition-property: transform, visibility, opacity;
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
+
.tippy-arrow {
|
|
49
|
+
width: 16px;
|
|
50
|
+
height: 16px;
|
|
51
|
+
color: ${(p) => p.theme.colors.neutral.c100};
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.tippy-arrow:before {
|
|
55
|
+
content: "";
|
|
56
|
+
position: absolute;
|
|
57
|
+
border-color: transparent;
|
|
58
|
+
border-style: solid;
|
|
59
|
+
}
|
|
60
|
+
|
|
48
61
|
.tippy-box[data-placement^="top"] > .tippy-arrow {
|
|
49
62
|
bottom: 0;
|
|
50
63
|
}
|
|
@@ -95,19 +108,6 @@ var styles_default = import_styled_components.css`
|
|
|
95
108
|
transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
|
|
96
109
|
}
|
|
97
110
|
|
|
98
|
-
.tippy-arrow {
|
|
99
|
-
width: 16px;
|
|
100
|
-
height: 16px;
|
|
101
|
-
color: ${(p) => p.theme.colors.neutral.c100};
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
.tippy-arrow:before {
|
|
105
|
-
content: "";
|
|
106
|
-
position: absolute;
|
|
107
|
-
border-color: transparent;
|
|
108
|
-
border-style: solid;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
111
|
.tippy-content {
|
|
112
112
|
position: relative;
|
|
113
113
|
padding: 8px 10px;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/message/Tooltip/styles.ts"],
|
|
4
|
-
"sourcesContent": ["import { DefaultTheme, css } from \"styled-components\";\n\ntype Props = { theme: DefaultTheme };\n\nexport default css`\n .tippy-box[data-animation=\"fade\"][data-state=\"hidden\"] {\n opacity: 0;\n }\n\n [data-tippy-root] {\n max-width: calc(100vw - 10px);\n }\n\n .tippy-box {\n position: relative;\n background-color: ${(p: Props) => p.theme.colors.neutral.c100};\n color: ${(p: Props) => p.theme.colors.neutral.c00};\n border-radius: 4px;\n font-size: 14px;\n line-height: 1.4;\n outline: 0;\n transition-property: transform, visibility, opacity;\n }\n\n .tippy-box[data-placement^=\"top\"] > .tippy-arrow {\n bottom: 0;\n }\n\n .tippy-box[data-placement^=\"top\"] > .tippy-arrow:before {\n bottom: -4px;\n left: 0;\n border-width: 10px 10px 0;\n border-top-color: initial;\n transform-origin: center top;\n }\n\n .tippy-box[data-placement^=\"bottom\"] > .tippy-arrow {\n top: 0;\n }\n\n .tippy-box[data-placement^=\"bottom\"] > .tippy-arrow:before {\n top: -4px;\n left: 0;\n border-width: 0 10px 10px;\n border-bottom-color: initial;\n transform-origin: center bottom;\n }\n\n .tippy-box[data-placement^=\"left\"] > .tippy-arrow {\n right: 0;\n }\n\n .tippy-box[data-placement^=\"left\"] > .tippy-arrow:before {\n border-width: 10px 0 10px 10px;\n border-left-color: initial;\n right: -4px;\n transform-origin: center left;\n }\n\n .tippy-box[data-placement^=\"right\"] > .tippy-arrow {\n left: 0;\n }\n\n .tippy-box[data-placement^=\"right\"] > .tippy-arrow:before {\n left: -4px;\n border-width: 10px 10px 10px 0;\n border-right-color: initial;\n transform-origin: center right;\n }\n\n .tippy-box[data-inertia][data-state=\"visible\"] {\n transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);\n }\n\n .tippy-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,+BAAkC;AAIlC,IAAO,iBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAWS,CAAC,MAAa,EAAE,MAAM,OAAO,QAAQ;AAAA,aAChD,CAAC,MAAa,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["import { DefaultTheme, css } from \"styled-components\";\n\ntype Props = { theme: DefaultTheme };\n\nexport default css`\n .tippy-box[data-animation=\"fade\"][data-state=\"hidden\"] {\n opacity: 0;\n }\n\n [data-tippy-root] {\n max-width: calc(100vw - 10px);\n }\n\n .tippy-box {\n position: relative;\n background-color: ${(p: Props) => p.theme.colors.neutral.c100};\n color: ${(p: Props) => p.theme.colors.neutral.c00};\n border-radius: 4px;\n font-size: 14px;\n line-height: 1.4;\n outline: 0;\n transition-property: transform, visibility, opacity;\n }\n\n .tippy-arrow {\n width: 16px;\n height: 16px;\n color: ${(p: Props) => p.theme.colors.neutral.c100};\n }\n\n .tippy-arrow:before {\n content: \"\";\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n\n .tippy-box[data-placement^=\"top\"] > .tippy-arrow {\n bottom: 0;\n }\n\n .tippy-box[data-placement^=\"top\"] > .tippy-arrow:before {\n bottom: -4px;\n left: 0;\n border-width: 10px 10px 0;\n border-top-color: initial;\n transform-origin: center top;\n }\n\n .tippy-box[data-placement^=\"bottom\"] > .tippy-arrow {\n top: 0;\n }\n\n .tippy-box[data-placement^=\"bottom\"] > .tippy-arrow:before {\n top: -4px;\n left: 0;\n border-width: 0 10px 10px;\n border-bottom-color: initial;\n transform-origin: center bottom;\n }\n\n .tippy-box[data-placement^=\"left\"] > .tippy-arrow {\n right: 0;\n }\n\n .tippy-box[data-placement^=\"left\"] > .tippy-arrow:before {\n border-width: 10px 0 10px 10px;\n border-left-color: initial;\n right: -4px;\n transform-origin: center left;\n }\n\n .tippy-box[data-placement^=\"right\"] > .tippy-arrow {\n left: 0;\n }\n\n .tippy-box[data-placement^=\"right\"] > .tippy-arrow:before {\n left: -4px;\n border-width: 10px 10px 10px 0;\n border-right-color: initial;\n transform-origin: center right;\n }\n\n .tippy-box[data-inertia][data-state=\"visible\"] {\n transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);\n }\n\n .tippy-content {\n position: relative;\n padding: 8px 10px;\n z-index: 1;\n }\n`;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,+BAAkC;AAIlC,IAAO,iBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAWS,CAAC,MAAa,EAAE,MAAM,OAAO,QAAQ;AAAA,aAChD,CAAC,MAAa,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWrC,CAAC,MAAa,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -37,7 +37,7 @@ const Bar = import_styled_components.default.div`
|
|
|
37
37
|
transition: all 600ms linear;
|
|
38
38
|
height: 4px;
|
|
39
39
|
border-radius: 2px;
|
|
40
|
-
|
|
40
|
+
/* Disable left/right border radius to match the handler */
|
|
41
41
|
border-top-${(p) => p.on ? "right" : "left"}-radius: 0;
|
|
42
42
|
border-bottom-${(p) => p.on ? "right" : "left"}-radius: 0;
|
|
43
43
|
flex: ${(p) => p.fill};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/navigation/progress/ProgressBar/Onboarding.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../../asorted/Text\";\n\nconst Container = styled.div`\n display: flex;\n flex-direction: row;\n height: 24px;\n align-items: center;\n`;\n\nconst Bar = styled.div<{ on?: boolean; fill: string | number }>`\n transition: all 600ms linear;\n height: 4px;\n border-radius: 2px;\n
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../../asorted/Text\";\n\nconst Container = styled.div`\n display: flex;\n flex-direction: row;\n height: 24px;\n align-items: center;\n`;\n\nconst Bar = styled.div<{ on?: boolean; fill: string | number }>`\n transition: all 600ms linear;\n height: 4px;\n border-radius: 2px;\n /* Disable left/right border radius to match the handler */\n border-top-${(p) => (p.on ? \"right\" : \"left\")}-radius: 0;\n border-bottom-${(p) => (p.on ? \"right\" : \"left\")}-radius: 0;\n flex: ${(p) => p.fill};\n background: ${(p) => (p.on ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c40)};\n`;\n\nconst Handler = styled.div`\n transition: all 600ms linear;\n padding: 4px;\n background: ${(p) => p.theme.colors.neutral.c100};\n border-radius: ${(p) => `${p.theme.radii[1]}px`};\n\n display: flex;\n align-items: center;\n justify-content: center;\n column-gap: 6px;\n\n & span.index {\n display: flex;\n border-radius: 2px;\n height: 16px;\n width: 16px;\n justify-content: center;\n align-items: center;\n color: ${(p) => p.theme.colors.neutral.c100};\n background: ${(p) => p.theme.colors.neutral.c00};\n }\n`;\n\ninterface Step {\n key: string;\n label: string;\n}\n\nexport type OnboardingProps = {\n steps: Step[];\n currentIndex: number;\n};\n\nconst Onboarding = ({ steps, currentIndex }: OnboardingProps): JSX.Element => {\n const currentStep = steps[currentIndex];\n const fill = ((currentIndex / (steps.length - 1)) * 100).toFixed(2);\n\n return (\n <Container>\n <Bar on fill={fill} />\n <Handler key={currentStep.key}>\n <Text className=\"index\" color=\"neutral.c00\" fontWeight=\"medium\" variant={\"micro\"}>\n {currentIndex + 1}\n </Text>\n <Text color=\"neutral.c00\" fontWeight=\"medium\" textTransform=\"uppercase\" variant={\"micro\"}>\n {currentStep.label}\n </Text>\n </Handler>\n <Bar fill={100 - Number(fill)} />\n </Container>\n );\n};\n\nexport default Onboarding;\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AAEjB,MAAM,YAAY,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzB,MAAM,MAAM,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKJ,CAAC,MAAO,EAAE,KAAK,UAAU;AAAA,kBACtB,CAAC,MAAO,EAAE,KAAK,UAAU;AAAA,UACjC,CAAC,MAAM,EAAE;AAAA,gBACH,CAAC,MAAO,EAAE,KAAK,EAAE,MAAM,OAAO,QAAQ,OAAO,EAAE,MAAM,OAAO,QAAQ;AAAA;AAGpF,MAAM,UAAU,iCAAO;AAAA;AAAA;AAAA,gBAGP,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,mBAC3B,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAc9B,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,kBACzB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAchD,MAAM,aAAa,CAAC,EAAE,OAAO,mBAAiD;AAC5E,QAAM,cAAc,MAAM;AAC1B,QAAM,OAAS,gBAAgB,OAAM,SAAS,KAAM,KAAK,QAAQ;AAEjE,SACE,mDAAC,WAAD,MACE,mDAAC,KAAD;AAAA,IAAK,IAAE;AAAA,IAAC;AAAA,MACR,mDAAC,SAAD;AAAA,IAAS,KAAK,YAAY;AAAA,KACxB,mDAAC,qBAAD;AAAA,IAAM,WAAU;AAAA,IAAQ,OAAM;AAAA,IAAc,YAAW;AAAA,IAAS,SAAS;AAAA,KACtE,eAAe,IAElB,mDAAC,qBAAD;AAAA,IAAM,OAAM;AAAA,IAAc,YAAW;AAAA,IAAS,eAAc;AAAA,IAAY,SAAS;AAAA,KAC9E,YAAY,SAGjB,mDAAC,KAAD;AAAA,IAAK,MAAM,MAAM,OAAO;AAAA;AAAA;AAK9B,IAAO,qBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/lib/cjs/styles/global.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/styles/global.ts"],
|
|
4
|
-
"sourcesContent": ["import { createGlobalStyle } from \"styled-components\";\n\nimport { rgba } from \"./helpers\";\nimport tippyStyles from \"../components/message/Tooltip/styles\";\nimport { fontStyles } from \"../components/asorted/Text/styles\";\n\nexport type GlobalStyleProps = {\n fontsPath?: string;\n fontMappings?: (name: string) => string;\n};\n\nexport const GlobalStyle = createGlobalStyle<GlobalStyleProps>`\n html {\n box-sizing: border-box;\n }\n\n body {\n font-family: Inter;\n font-size: 100%;\n }\n\n * {\n margin: 0;\n padding: 0;\n font: inherit;\n color: inherit;\n user-select: inherit;\n cursor: inherit;\n outline: none;\n }\n\n ::selection {\n background: ${(p) => rgba(p.theme.colors.primary.c100, 0.1)};\n }\n\n --track-color: rgba(0,0,0,0);\n\n ${(props) => (typeof props.fontsPath === \"string\" ? fontStyles : \"\")}\n\n ${tippyStyles}\n\n ::-webkit-scrollbar {\n width: 12px;\n height: 12px;\n background-color: rgba(0,0,0,0);\n }\n ::-webkit-scrollbar-button {\n opacity: 0;\n height: 0;\n width: 0;\n }\n ::-webkit-scrollbar-track {\n background-color: rgba(0,0,0,0);\n }\n ::-webkit-scrollbar-thumb {\n box-shadow: inset 0 0 0 12px var(--track-color);\n border: 2px solid rgba(0,0,0,0);\n border-radius: 12px;\n }\n ::-webkit-scrollbar-corner {\n opacity: 0;\n }\n`;\n"],
|
|
4
|
+
"sourcesContent": ["import { createGlobalStyle } from \"styled-components\";\n\nimport { rgba } from \"./helpers\";\nimport tippyStyles from \"../components/message/Tooltip/styles\";\nimport { fontStyles } from \"../components/asorted/Text/styles\";\n\nexport type GlobalStyleProps = {\n fontsPath?: string;\n fontMappings?: (name: string) => string;\n};\n\nexport const GlobalStyle = createGlobalStyle<GlobalStyleProps>`\n html {\n box-sizing: border-box;\n }\n\n body {\n font-family: Inter, sans-serif;\n font-size: 100%;\n }\n\n * {\n margin: 0;\n padding: 0;\n font: inherit;\n color: inherit;\n user-select: inherit;\n cursor: inherit;\n outline: none;\n }\n\n ::selection {\n background: ${(p) => rgba(p.theme.colors.primary.c100, 0.1)};\n }\n\n --track-color: rgba(0,0,0,0);\n\n ${(props) => (typeof props.fontsPath === \"string\" ? fontStyles : \"\")}\n\n ${tippyStyles}\n\n ::-webkit-scrollbar {\n width: 12px;\n height: 12px;\n background-color: rgba(0,0,0,0);\n }\n ::-webkit-scrollbar-button {\n opacity: 0;\n height: 0;\n width: 0;\n }\n ::-webkit-scrollbar-track {\n background-color: rgba(0,0,0,0);\n }\n ::-webkit-scrollbar-thumb {\n box-shadow: inset 0 0 0 12px var(--track-color);\n border: 2px solid rgba(0,0,0,0);\n border-radius: 12px;\n }\n ::-webkit-scrollbar-corner {\n opacity: 0;\n }\n`;\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,+BAAkC;AAElC,qBAAqB;AACrB,oBAAwB;AACxB,qBAA2B;AAOpB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAqBT,CAAC,MAAM,yBAAK,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAKvD,CAAC,UAAW,OAAO,MAAM,cAAc,WAAW,4BAAa;AAAA;AAAA,IAE/D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,10 +5,9 @@ import Flex from "../../layout/Flex";
|
|
|
5
5
|
const Wrapper = styled(Flex) `
|
|
6
6
|
width: 100%;
|
|
7
7
|
height: 100%;
|
|
8
|
-
background: gray;
|
|
9
8
|
flex-direction: column;
|
|
10
9
|
padding: ${(p) => p.theme.space[8]}px ${(p) => p.theme.space[10]}px;
|
|
11
|
-
padding-right: 280px;
|
|
10
|
+
padding-right: 280px; /* Nb gives air to not overlap the illustration */
|
|
12
11
|
z-index: ${(p) => p.theme.zIndexes[8]};
|
|
13
12
|
background: url(${(p) => p.image}) no-repeat ${(p) => p.theme.colors.neutral.c100};
|
|
14
13
|
background-size: contain;
|
|
@@ -81,6 +81,8 @@ export const BaseInput = styled.input.attrs({
|
|
|
81
81
|
color: ${(p) => (p.disabled ? p.theme.colors.neutral.c50 : p.theme.colors.neutral.c70)};
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
+
/* stylelint-disable property-no-vendor-prefix */
|
|
85
|
+
|
|
84
86
|
/* Hide type=number arrow for Chrome, Safari, Edge, Opera */
|
|
85
87
|
&::-webkit-outer-spin-button,
|
|
86
88
|
::-webkit-inner-spin-button {
|
|
@@ -92,6 +94,7 @@ export const BaseInput = styled.input.attrs({
|
|
|
92
94
|
&[type="number"] {
|
|
93
95
|
-moz-appearance: textfield;
|
|
94
96
|
}
|
|
97
|
+
/* stylelint-enable property-no-vendor-prefix */
|
|
95
98
|
|
|
96
99
|
${typography}
|
|
97
100
|
`;
|
|
@@ -19,6 +19,19 @@ export default css `
|
|
|
19
19
|
transition-property: transform, visibility, opacity;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
+
.tippy-arrow {
|
|
23
|
+
width: 16px;
|
|
24
|
+
height: 16px;
|
|
25
|
+
color: ${(p) => p.theme.colors.neutral.c100};
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.tippy-arrow:before {
|
|
29
|
+
content: "";
|
|
30
|
+
position: absolute;
|
|
31
|
+
border-color: transparent;
|
|
32
|
+
border-style: solid;
|
|
33
|
+
}
|
|
34
|
+
|
|
22
35
|
.tippy-box[data-placement^="top"] > .tippy-arrow {
|
|
23
36
|
bottom: 0;
|
|
24
37
|
}
|
|
@@ -69,19 +82,6 @@ export default css `
|
|
|
69
82
|
transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
|
|
70
83
|
}
|
|
71
84
|
|
|
72
|
-
.tippy-arrow {
|
|
73
|
-
width: 16px;
|
|
74
|
-
height: 16px;
|
|
75
|
-
color: ${(p) => p.theme.colors.neutral.c100};
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.tippy-arrow:before {
|
|
79
|
-
content: "";
|
|
80
|
-
position: absolute;
|
|
81
|
-
border-color: transparent;
|
|
82
|
-
border-style: solid;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
85
|
.tippy-content {
|
|
86
86
|
position: relative;
|
|
87
87
|
padding: 8px 10px;
|
|
@@ -11,7 +11,7 @@ const Bar = styled.div `
|
|
|
11
11
|
transition: all 600ms linear;
|
|
12
12
|
height: 4px;
|
|
13
13
|
border-radius: 2px;
|
|
14
|
-
|
|
14
|
+
/* Disable left/right border radius to match the handler */
|
|
15
15
|
border-top-${(p) => (p.on ? "right" : "left")}-radius: 0;
|
|
16
16
|
border-bottom-${(p) => (p.on ? "right" : "left")}-radius: 0;
|
|
17
17
|
flex: ${(p) => p.fill};
|
package/lib/styles/global.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/react-ui",
|
|
3
|
-
"version": "0.9.0
|
|
3
|
+
"version": "0.9.0",
|
|
4
4
|
"description": "Ledger Live - Desktop UI",
|
|
5
5
|
"author": "Ledger Live Team <team-live@ledger.fr>",
|
|
6
6
|
"repository": {
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"dependencies": {
|
|
59
59
|
"@floating-ui/react-dom": "^0.4.0",
|
|
60
60
|
"@ledgerhq/icons-ui": "^0.2.7",
|
|
61
|
-
"@ledgerhq/crypto-icons-ui": "^0.2.0
|
|
61
|
+
"@ledgerhq/crypto-icons-ui": "^0.2.0",
|
|
62
62
|
"@ledgerhq/ui-shared": "^0.1.9",
|
|
63
63
|
"@tippyjs/react": "^4.2.6",
|
|
64
64
|
"@types/color": "^3.0.2",
|
|
@@ -112,7 +112,11 @@
|
|
|
112
112
|
"styled-components": "^5.3.3",
|
|
113
113
|
"tiny-glob": "^0.2.9",
|
|
114
114
|
"typescript": "^4.3.5",
|
|
115
|
-
"webpack": "*"
|
|
115
|
+
"webpack": "*",
|
|
116
|
+
"stylelint": "^14.9.1",
|
|
117
|
+
"stylelint-config-recommended": "^8.0.0",
|
|
118
|
+
"stylelint-config-styled-components": "^0.1.1",
|
|
119
|
+
"stylelint-processor-styled-components": "^1.10.0"
|
|
116
120
|
},
|
|
117
121
|
"scripts": {
|
|
118
122
|
"storybook": "start-storybook -p 6006 -s ./src",
|
|
@@ -123,6 +127,7 @@
|
|
|
123
127
|
"clean": "rimraf lib",
|
|
124
128
|
"lint": "eslint src --ext .js,.jsx,.ts,.tsx --cache",
|
|
125
129
|
"lint:fix": "pnpm lint --fix",
|
|
130
|
+
"lint:css": "stylelint './src/**/*.{js,jsx,ts,tsx}' --fix",
|
|
126
131
|
"typecheck": "tsc --p . --noEmit",
|
|
127
132
|
"test": "pnpm -w -F ui test:react"
|
|
128
133
|
}
|