@ledgerhq/react-ui 0.8.2-nightly.1 → 0.8.2
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/cta/Button/Button.stories.js +1 -6
- package/lib/cjs/components/cta/Button/Button.stories.js.map +2 -2
- package/lib/cjs/components/cta/Button/index.js +2 -16
- package/lib/cjs/components/cta/Button/index.js.map +2 -2
- package/lib/components/cta/Button/index.d.ts +0 -7
- package/lib/components/cta/Button/index.js +2 -15
- package/package.json +1 -1
|
@@ -48,10 +48,6 @@ var Button_stories_default = {
|
|
|
48
48
|
type: "radio"
|
|
49
49
|
}
|
|
50
50
|
},
|
|
51
|
-
size: {
|
|
52
|
-
options: [void 0, "small", "medium", "large"],
|
|
53
|
-
control: { type: "radio" }
|
|
54
|
-
},
|
|
55
51
|
fontSize: {
|
|
56
52
|
options: [void 0, 0, 1, 2, 3, 4, 5, 6, 7, 8],
|
|
57
53
|
control: {
|
|
@@ -75,7 +71,7 @@ var Button_stories_default = {
|
|
|
75
71
|
}
|
|
76
72
|
}
|
|
77
73
|
};
|
|
78
|
-
const Overview = ((
|
|
74
|
+
const Overview = (() => {
|
|
79
75
|
const templateProps = { Icon: import_react2.PlusMedium, children: "Try me", onClick: () => {
|
|
80
76
|
} };
|
|
81
77
|
const propsArr = [
|
|
@@ -98,7 +94,6 @@ const Overview = ((args) => {
|
|
|
98
94
|
flex: 1,
|
|
99
95
|
columnGap: 4
|
|
100
96
|
}, [false, true].map((disabled) => /* @__PURE__ */ import_react.default.createElement(import_index.default, {
|
|
101
|
-
size: args.size,
|
|
102
97
|
variant: buttonType,
|
|
103
98
|
outline,
|
|
104
99
|
disabled,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/cta/Button/Button.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { Fragment } from \"react\";\nimport Button, { ButtonExpandProps, ButtonProps, ButtonVariants, IconPosition } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport { PlusMedium, WalletAddMedium } from \"@ledgerhq/icons-ui/react/\";\nimport { InvertTheme } from \"../../../styles/InvertTheme\";\nimport Flex from \"../../layout/Flex\";\nimport Grid from \"../../layout/Grid\";\nimport { StoryTemplate } from \"../../helpers\";\n\nconst iconPositions: IconPosition[] = [\"left\", \"right\"];\nconst buttonVariants: ButtonVariants[] = [\"main\", \"shade\", \"color\", \"error\"];\n\nexport default {\n title: \"cta/Button\",\n component: Button,\n argTypes: {\n variant: {\n options: [undefined, ...buttonVariants],\n control: {\n type: \"radio\",\n },\n },\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,mBAAqF;AACrF,kBAAiB;AACjB,oBAA4C;AAC5C,yBAA4B;AAC5B,kBAAiB;AACjB,kBAAiB;AAGjB,MAAM,gBAAgC,CAAC,QAAQ;AAC/C,MAAM,iBAAmC,CAAC,QAAQ,SAAS,SAAS;AAEpE,IAAO,yBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,QAAW,GAAG;AAAA,MACxB,SAAS;AAAA,QACP,MAAM;AAAA;AAAA;AAAA,IAGV,
|
|
4
|
+
"sourcesContent": ["import React, { Fragment } from \"react\";\nimport Button, { ButtonExpandProps, ButtonProps, ButtonVariants, IconPosition } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport { PlusMedium, WalletAddMedium } from \"@ledgerhq/icons-ui/react/\";\nimport { InvertTheme } from \"../../../styles/InvertTheme\";\nimport Flex from \"../../layout/Flex\";\nimport Grid from \"../../layout/Grid\";\nimport { StoryTemplate } from \"../../helpers\";\n\nconst iconPositions: IconPosition[] = [\"left\", \"right\"];\nconst buttonVariants: ButtonVariants[] = [\"main\", \"shade\", \"color\", \"error\"];\n\nexport default {\n title: \"cta/Button\",\n component: Button,\n argTypes: {\n variant: {\n options: [undefined, ...buttonVariants],\n control: {\n type: \"radio\",\n },\n },\n fontSize: {\n options: [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8],\n control: {\n type: \"radio\",\n },\n },\n children: {\n type: \"text\",\n },\n iconPosition: {\n options: iconPositions,\n control: {\n type: \"radio\",\n },\n },\n disabled: {\n type: \"boolean\",\n },\n outline: {\n type: \"boolean\",\n },\n },\n};\n\nexport const Overview = (() => {\n const templateProps = { Icon: PlusMedium, children: \"Try me\", onClick: () => {} };\n const propsArr = [\n { ...templateProps, Icon: undefined },\n { ...templateProps, iconPosition: iconPositions[0] },\n { ...templateProps, iconPosition: iconPositions[1] },\n { ...templateProps, children: \"\" },\n ];\n return (\n <Grid columns=\"none\" gridTemplateColumns=\"max-content repeat(4, 1fr)\" columnGap={8} rowGap={8}>\n {buttonVariants.flatMap((buttonType, i) =>\n [false, true].map((outline, j) => (\n <Fragment key={`${i}:${j}`}>\n <Text variant=\"small\" color=\"neutral.c70\">\n variant=\"{buttonType}\"<br />\n outline={`{${outline.toString()}}`}\n </Text>\n {propsArr.map((buttonProps) => (\n <Flex flex={1} columnGap={4}>\n {[false, true].map((disabled) => (\n <Button\n variant={buttonType}\n outline={outline}\n disabled={disabled}\n {...buttonProps}\n />\n ))}\n </Flex>\n ))}\n </Fragment>\n )),\n )}\n </Grid>\n );\n}).bind({});\n\nexport const Default: StoryTemplate<ButtonProps> = (args) => {\n return <Button {...args}>{args.children || \"Regular button\"}</Button>;\n};\n\nexport const Inverted: StoryTemplate<ButtonProps> = (args) => {\n return (\n <Flex flexDirection=\"column\">\n <Flex flex=\"0 0 1\" p={4} alignItems=\"center\" bg=\"background.main\">\n <Button {...args}>{args.children || \"Regular button\"}</Button>\n </Flex>\n <InvertTheme>\n <Flex flex=\"0 0 1\" p={4} alignItems=\"center\" bg=\"background.main\">\n <Button {...args}>{args.children || \"Inverted button\"}</Button>\n </Flex>\n </InvertTheme>\n </Flex>\n );\n};\n\nexport const IconButton: StoryTemplate<ButtonProps> = (args) => {\n return <Button {...args}>{args.children || \"Regular button\"}</Button>;\n};\nIconButton.args = {\n children: \"\",\n Icon: WalletAddMedium,\n iconPosition: \"right\",\n};\n\nexport const Expand: StoryTemplate<ButtonProps> = (args: ButtonExpandProps) => {\n const [show, setShow] = React.useState(false);\n return (\n <>\n <Button.Expand {...args} onToggle={setShow}>\n {args.children}\n </Button.Expand>\n {show && (\n <div\n style={{\n padding: \"1rem\",\n }}\n >\n Hello world!\n </div>\n )}\n </>\n );\n};\nExpand.args = {\n children: \"Show all\",\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -25,7 +25,6 @@ __export(exports, {
|
|
|
25
25
|
Base: () => Base,
|
|
26
26
|
ButtonExpand: () => ButtonExpand,
|
|
27
27
|
ButtonUnstyled: () => ButtonUnstyled,
|
|
28
|
-
buttonSizeStyle: () => buttonSizeStyle,
|
|
29
28
|
default: () => Button_default
|
|
30
29
|
});
|
|
31
30
|
var import_react = __toModule(require("react"));
|
|
@@ -157,13 +156,14 @@ const Base = import_styled.default.button.attrs((p) => ({
|
|
|
157
156
|
border-width: ${(p) => p.outline || p.variant === "shade" ? 1 : 0}px;
|
|
158
157
|
font-weight: 600;
|
|
159
158
|
${(0, import_styled_system.compose)(import_fontFamily.default, import_styled_system.fontSize, import_styled_system.border)};
|
|
159
|
+
height: ${(p) => p.theme.space[13]}px;
|
|
160
160
|
line-height: ${(p) => p.theme.fontSizes[p.fontSize]}px;
|
|
161
161
|
text-align: center;
|
|
162
162
|
display: inline-flex;
|
|
163
163
|
align-items: center;
|
|
164
164
|
justify-content: center;
|
|
165
|
+
padding: 0 2em;
|
|
165
166
|
overflow: hidden;
|
|
166
|
-
${(p) => buttonSizeStyle[p.size || "medium"]}
|
|
167
167
|
text-overflow: ellipsis;
|
|
168
168
|
white-space: nowrap;
|
|
169
169
|
max-width: 100%;
|
|
@@ -254,20 +254,6 @@ function ButtonExpand({ onToggle, onClick, ...props }, ref) {
|
|
|
254
254
|
}
|
|
255
255
|
});
|
|
256
256
|
}
|
|
257
|
-
const buttonSizeStyle = {
|
|
258
|
-
small: {
|
|
259
|
-
padding: "0 20px",
|
|
260
|
-
height: "32px"
|
|
261
|
-
},
|
|
262
|
-
medium: {
|
|
263
|
-
padding: "0 24px",
|
|
264
|
-
height: "40px"
|
|
265
|
-
},
|
|
266
|
-
large: {
|
|
267
|
-
padding: "0 28px",
|
|
268
|
-
height: "48px"
|
|
269
|
-
}
|
|
270
|
-
};
|
|
271
257
|
Button.Unstyled = ButtonUnstyled;
|
|
272
258
|
Button.Expand = import_react.default.forwardRef(ButtonExpand);
|
|
273
259
|
ButtonWithRef.Unstyled = Button.Unstyled;
|
|
@@ -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/ChevronBottomRegular\";\nimport IconComponent from \"../../asorted/Icon\";\n\nexport type ButtonVariants = \"main\" | \"shade\" | \"error\" | \"color\";\nexport type IconPosition = \"right\" | \"left\";\ninterface BaseProps extends BaseStyledProps, BordersProps {\n ff?: string;\n color?: string;\n backgroundColor?: string;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;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/ChevronBottomRegular\";\nimport IconComponent from \"../../asorted/Icon\";\n\nexport type ButtonVariants = \"main\" | \"shade\" | \"error\" | \"color\";\nexport type IconPosition = \"right\" | \"left\";\ninterface BaseProps extends BaseStyledProps, BordersProps {\n ff?: string;\n color?: string;\n backgroundColor?: string;\n fontSize?: number;\n variant?: ButtonVariants;\n outline?: boolean;\n iconPosition?: IconPosition;\n iconButton?: boolean;\n disabled?: boolean;\n}\n\nexport interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {\n iconName?: string;\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 background-color: ${p.theme.colors.neutral.c00};\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.c100};\n color: ${p.theme.colors.error.c100};\n background-color: transparent;\n &:hover {\n background-color: ${rgba(p.theme.colors.error.c100, 0.02)};\n }\n &:active {\n background-color: ${rgba(p.theme.colors.error.c100, 0.05)};\n }\n `,\n filled: `\n color: ${p.theme.colors.neutral.c00};\n background-color: ${p.theme.colors.error.c100};\n &:hover {\n background-color: ${p.theme.colors.error.c80};\n }\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 height: ${(p) => p.theme.space[13]}px;\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 padding: 0 2em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: 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 \"default\":\n default:\n return variants.default;\n }\n }}\n ${(p) =>\n p.iconButton\n ? css`\n width: ${p.theme.space[13]}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 {\n Icon,\n iconPosition = \"right\",\n iconSize = 16,\n children,\n onClick,\n iconName,\n ...props\n }: ButtonProps,\n ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement => {\n const iconNodeSize = iconSize || fontSizes[props.fontSize ?? 4];\n const IconNode = useMemo(\n () =>\n (iconName && <IconComponent name={iconName} size={iconNodeSize} />) ||\n (Icon && <Icon size={iconNodeSize} />),\n [iconName, iconNodeSize, Icon],\n );\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\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": []
|
|
7
7
|
}
|
|
@@ -7,7 +7,6 @@ interface BaseProps extends BaseStyledProps, BordersProps {
|
|
|
7
7
|
ff?: string;
|
|
8
8
|
color?: string;
|
|
9
9
|
backgroundColor?: string;
|
|
10
|
-
size?: "small" | "medium" | "large";
|
|
11
10
|
fontSize?: number;
|
|
12
11
|
variant?: ButtonVariants;
|
|
13
12
|
outline?: boolean;
|
|
@@ -42,10 +41,4 @@ export declare type ButtonExpandProps = React.PropsWithChildren<ButtonProps & {
|
|
|
42
41
|
onToggle?: (arg0: boolean) => void;
|
|
43
42
|
}>;
|
|
44
43
|
export declare function ButtonExpand({ onToggle, onClick, ...props }: ButtonExpandProps, ref?: React.ForwardedRef<HTMLButtonElement>): React.ReactElement;
|
|
45
|
-
export declare const buttonSizeStyle: {
|
|
46
|
-
[index: string]: {
|
|
47
|
-
padding: string;
|
|
48
|
-
height: string;
|
|
49
|
-
};
|
|
50
|
-
};
|
|
51
44
|
export default ButtonWithRef;
|
|
@@ -141,13 +141,14 @@ export const Base = baseStyled.button.attrs((p) => {
|
|
|
141
141
|
border-width: ${(p) => (p.outline || p.variant === "shade" ? 1 : 0)}px;
|
|
142
142
|
font-weight: 600;
|
|
143
143
|
${compose(fontFamily, fontSize, border)};
|
|
144
|
+
height: ${(p) => p.theme.space[13]}px;
|
|
144
145
|
line-height: ${(p) => p.theme.fontSizes[p.fontSize]}px;
|
|
145
146
|
text-align: center;
|
|
146
147
|
display: inline-flex;
|
|
147
148
|
align-items: center;
|
|
148
149
|
justify-content: center;
|
|
150
|
+
padding: 0 2em;
|
|
149
151
|
overflow: hidden;
|
|
150
|
-
${(p) => buttonSizeStyle[p.size || "medium"]}
|
|
151
152
|
text-overflow: ellipsis;
|
|
152
153
|
white-space: nowrap;
|
|
153
154
|
max-width: 100%;
|
|
@@ -225,20 +226,6 @@ export function ButtonExpand(_a, ref) {
|
|
|
225
226
|
onClick != null && onClick(event);
|
|
226
227
|
} })));
|
|
227
228
|
}
|
|
228
|
-
export const buttonSizeStyle = {
|
|
229
|
-
small: {
|
|
230
|
-
padding: "0 20px",
|
|
231
|
-
height: "32px",
|
|
232
|
-
},
|
|
233
|
-
medium: {
|
|
234
|
-
padding: "0 24px",
|
|
235
|
-
height: "40px",
|
|
236
|
-
},
|
|
237
|
-
large: {
|
|
238
|
-
padding: "0 28px",
|
|
239
|
-
height: "48px",
|
|
240
|
-
},
|
|
241
|
-
};
|
|
242
229
|
Button.Unstyled = ButtonUnstyled;
|
|
243
230
|
Button.Expand = React.forwardRef(ButtonExpand);
|
|
244
231
|
ButtonWithRef.Unstyled = Button.Unstyled;
|