@reitwagen/design-components 0.6.2 → 0.6.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Button/Button.d.ts +15 -2
- package/dist/components/Button/Button.d.ts.map +1 -1
- package/dist/components/Button/Button.stories.d.ts.map +1 -1
- package/dist/components/Button/Button.stories.js +10 -12
- package/dist/components/Button/Button.styles.d.ts.map +1 -1
- package/dist/components/Button/Button.styles.js +13 -3
- package/dist/components/TextInput/TextInput.d.ts +8 -4
- package/dist/components/TextInput/TextInput.d.ts.map +1 -1
- package/dist/components/TextInput/TextInput.js +2 -1
- package/dist/index.css +25 -21
- package/package.json +1 -1
|
@@ -2,11 +2,24 @@ import { ElementType, ReactNode } from "react";
|
|
|
2
2
|
import { type VariantProps } from "class-variance-authority";
|
|
3
3
|
import { ChildrenProps, PolymorphicComponentWithRef } from "../../types/props";
|
|
4
4
|
import { buttonVariants } from "./Button.styles";
|
|
5
|
-
type
|
|
5
|
+
type ButtonVariantsType = VariantProps<typeof buttonVariants>;
|
|
6
|
+
type CommonVariantsType = {
|
|
7
|
+
color?: ButtonVariantsType["color"];
|
|
8
|
+
disabled?: ButtonVariantsType["disabled"];
|
|
9
|
+
full?: ButtonVariantsType["full"];
|
|
10
|
+
};
|
|
11
|
+
type ButtonVariantProps = (CommonVariantsType & {
|
|
12
|
+
variant?: Exclude<ButtonVariantsType["variant"], "text">;
|
|
13
|
+
size?: ButtonVariantsType["size"];
|
|
14
|
+
}) | (CommonVariantsType & {
|
|
15
|
+
variant: "text";
|
|
16
|
+
size?: Exclude<ButtonVariantsType["size"], "large">;
|
|
17
|
+
});
|
|
18
|
+
type ButtonOwnProps = ButtonVariantProps & ChildrenProps & {
|
|
6
19
|
leftContent?: ReactNode;
|
|
7
20
|
rightContent?: ReactNode;
|
|
8
21
|
};
|
|
9
|
-
type ButtonProps<C extends ElementType> = PolymorphicComponentWithRef<C, ButtonOwnProps>;
|
|
22
|
+
export type ButtonProps<C extends ElementType> = PolymorphicComponentWithRef<C, ButtonOwnProps>;
|
|
10
23
|
/**
|
|
11
24
|
* `Button`: 버튼의 스타일을 변경하려면 variant, color, size 속성을 사용하세요. Button이 부모 요소의 전체 너비를 차지하게 하려면 full 속성을 지정하세요.
|
|
12
25
|
* @see [RDS Storybook: Button](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-button--docs)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAE9D,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAC1C,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;CACnC,CAAC;AAEF,KAAK,kBAAkB,GACnB,CAAC,kBAAkB,GAAG;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;IACzD,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;CACnC,CAAC,GACF,CAAC,kBAAkB,GAAG;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC;CACrD,CAAC,CAAC;AAEP,KAAK,cAAc,GAAG,kBAAkB,GACtC,aAAa,GAAG;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B,CAAC;AAEJ,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,IAAI,2BAA2B,CAC1E,CAAC,EACD,cAAc,CACf,CAAC;AAEF;;;;;;;;GAQG;AAEH,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,EAAE,EACvD,SAAS,EACT,EAAE,EACF,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,WAAW,CAAC,CAAC,CAAC,2CAuBhB;yBAnCe,MAAM"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KA+BtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAiCpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAiCnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAUnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAgBtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAalB,CAAC"}
|
|
@@ -66,7 +66,7 @@ exports.Variants = {
|
|
|
66
66
|
},
|
|
67
67
|
},
|
|
68
68
|
},
|
|
69
|
-
render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary",
|
|
69
|
+
render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "outlined", color: "primary", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", s: true, color: "primary", ...props, children: props.children })] })),
|
|
70
70
|
args: {
|
|
71
71
|
children: "Button Text",
|
|
72
72
|
color: "primary",
|
|
@@ -85,7 +85,7 @@ exports.Colors = {
|
|
|
85
85
|
},
|
|
86
86
|
},
|
|
87
87
|
},
|
|
88
|
-
render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary",
|
|
88
|
+
render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "black", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "gray", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "sky", ...props, children: props.children })] })),
|
|
89
89
|
args: {
|
|
90
90
|
children: "Button Text",
|
|
91
91
|
variant: "solid",
|
|
@@ -101,11 +101,12 @@ exports.Sizes = {
|
|
|
101
101
|
story: `
|
|
102
102
|
- Button의 크기를 변경하려면 <code>size</code> 속성을 사용하세요. 사용할 수 있는 값에는 <code>large</code>, <code>medium</code>, <code>small</code> 이 있어요. 기본값은 <code>large</code> 입니다.
|
|
103
103
|
- Button이 부모 요소의 전체 너비를 차지하게 하려면 <code>full</code> 속성을 지정하세요.
|
|
104
|
+
- Button의 variant가 <code>text</code>인 경우, <code>large</code> 크기는 사용하지 않으며 <code>medium</code>, <code>small</code>만 사용 가능합니다.
|
|
104
105
|
`,
|
|
105
106
|
},
|
|
106
107
|
},
|
|
107
108
|
},
|
|
108
|
-
render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary",
|
|
109
|
+
render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", size: "medium", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", size: "small", ...props, children: props.children })] })),
|
|
109
110
|
args: {
|
|
110
111
|
children: "Button Text",
|
|
111
112
|
variant: "solid",
|
|
@@ -115,7 +116,7 @@ exports.Sizes = {
|
|
|
115
116
|
},
|
|
116
117
|
};
|
|
117
118
|
exports.Solid = {
|
|
118
|
-
render: (props) => (
|
|
119
|
+
render: (props) => (0, jsx_runtime_1.jsx)(Button_1.Button, { ...props, children: props.children }),
|
|
119
120
|
args: {
|
|
120
121
|
children: "Button Text",
|
|
121
122
|
variant: "solid",
|
|
@@ -126,7 +127,7 @@ exports.Solid = {
|
|
|
126
127
|
},
|
|
127
128
|
};
|
|
128
129
|
exports.Outlined = {
|
|
129
|
-
render: (props) => (
|
|
130
|
+
render: (props) => (0, jsx_runtime_1.jsx)(Button_1.Button, { ...props, children: props.children }),
|
|
130
131
|
args: {
|
|
131
132
|
children: "Button Text",
|
|
132
133
|
variant: "outlined",
|
|
@@ -143,19 +144,16 @@ exports.Outlined = {
|
|
|
143
144
|
},
|
|
144
145
|
};
|
|
145
146
|
exports.Text = {
|
|
146
|
-
render: (props) => (
|
|
147
|
+
render: (props) => (0, jsx_runtime_1.jsx)(Button_1.Button, { ...props, children: props.children }),
|
|
147
148
|
args: {
|
|
148
149
|
children: "Button Text",
|
|
149
150
|
variant: "text",
|
|
150
|
-
|
|
151
|
-
size: "large",
|
|
152
|
-
disabled: false,
|
|
153
|
-
full: false,
|
|
151
|
+
size: "medium",
|
|
154
152
|
},
|
|
155
153
|
argTypes: {
|
|
156
|
-
|
|
154
|
+
size: {
|
|
157
155
|
control: { type: "radio" },
|
|
158
|
-
options: ["
|
|
156
|
+
options: ["small", "medium"],
|
|
159
157
|
},
|
|
160
158
|
},
|
|
161
159
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;;;;
|
|
1
|
+
{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;;;;8EAkJ1B,CAAC"}
|
|
@@ -16,9 +16,9 @@ exports.buttonVariants = (0, class_variance_authority_1.cva)("ui:flex ui:items-c
|
|
|
16
16
|
sky: "",
|
|
17
17
|
},
|
|
18
18
|
size: {
|
|
19
|
-
large: "ui:text-button1 ui:rounded-[14px] ui:h-[52px] ui:px-
|
|
20
|
-
medium: "ui:text-button2 ui:rounded-
|
|
21
|
-
small: "ui:text-button3 ui:rounded-[10px] ui:h-[34px] ui:px-
|
|
19
|
+
large: "ui:text-button1 ui:rounded-[14px] ui:h-[52px] ui:px-6 ui:py-3.5",
|
|
20
|
+
medium: "ui:text-button2 ui:rounded-xl ui:h-10 ui:px-5 ui:py-2.5",
|
|
21
|
+
small: "ui:text-button3 ui:rounded-[10px] ui:h-[34px] ui:px-3.5 ui:py-2",
|
|
22
22
|
},
|
|
23
23
|
disabled: {
|
|
24
24
|
true: "ui:pointer-events-none",
|
|
@@ -118,6 +118,16 @@ exports.buttonVariants = (0, class_variance_authority_1.cva)("ui:flex ui:items-c
|
|
|
118
118
|
disabled: true,
|
|
119
119
|
className: "ui:text-gray-300",
|
|
120
120
|
},
|
|
121
|
+
{
|
|
122
|
+
variant: "text",
|
|
123
|
+
size: "medium",
|
|
124
|
+
className: "ui:text-button1",
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
variant: "text",
|
|
128
|
+
size: "small",
|
|
129
|
+
className: "ui:text-button2",
|
|
130
|
+
},
|
|
121
131
|
],
|
|
122
132
|
defaultVariants: {
|
|
123
133
|
color: "primary",
|
|
@@ -2,6 +2,11 @@ import { ComponentPropsWithRef } from "react";
|
|
|
2
2
|
import { VariantProps } from "class-variance-authority";
|
|
3
3
|
import { inputVariants } from "./TextInput.styles";
|
|
4
4
|
export type TextInputProps = ComponentPropsWithRef<"input"> & VariantProps<typeof inputVariants> & {
|
|
5
|
+
/**
|
|
6
|
+
* 입력값의 단위 (예: "km", "원", "%")
|
|
7
|
+
* 입력 필드 오른쪽에 표시됩니다.
|
|
8
|
+
*/
|
|
9
|
+
unit?: string;
|
|
5
10
|
/**
|
|
6
11
|
* 클리어 버튼이 표시되는 조건
|
|
7
12
|
* - 'never': 표시 안 함
|
|
@@ -10,10 +15,9 @@ export type TextInputProps = ComponentPropsWithRef<"input"> & VariantProps<typeo
|
|
|
10
15
|
*/
|
|
11
16
|
clearButtonMode?: "always" | "while-editing" | "never";
|
|
12
17
|
/**
|
|
13
|
-
*
|
|
14
|
-
* 입력 필드 오른쪽에 표시됩니다.
|
|
18
|
+
* 클리어 버튼 클릭 시 호출되는 콜백 함수
|
|
15
19
|
*/
|
|
16
|
-
|
|
20
|
+
onClear?: () => void;
|
|
17
21
|
};
|
|
18
22
|
/**
|
|
19
23
|
* `TextInput`: 텍스트 입력을 위한 기본 컴포넌트입니다. FormControl과 함께 사용하면 label, validation 등의 기능을 자동으로 제공받습니다.
|
|
@@ -41,7 +45,7 @@ export type TextInputProps = ComponentPropsWithRef<"input"> & VariantProps<typeo
|
|
|
41
45
|
* />
|
|
42
46
|
* ```
|
|
43
47
|
*/
|
|
44
|
-
export declare function TextInput({ variant, disabled, className, clearButtonMode, unit, value: controlledValue, onChange, ...props }: TextInputProps): import("react/jsx-runtime").JSX.Element;
|
|
48
|
+
export declare function TextInput({ variant, disabled, className, clearButtonMode, unit, value: controlledValue, onChange, onClear, ...props }: TextInputProps): import("react/jsx-runtime").JSX.Element;
|
|
45
49
|
export declare namespace TextInput {
|
|
46
50
|
var displayName: string;
|
|
47
51
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/components/TextInput/TextInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,qBAAqB,EAKtB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAQnD,MAAM,MAAM,cAAc,GAAG,qBAAqB,CAAC,OAAO,CAAC,GACzD,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IACnC;;;;;OAKG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,eAAe,GAAG,OAAO,CAAC;IACvD
|
|
1
|
+
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/components/TextInput/TextInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,qBAAqB,EAKtB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAQnD,MAAM,MAAM,cAAc,GAAG,qBAAqB,CAAC,OAAO,CAAC,GACzD,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IACnC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,eAAe,GAAG,OAAO,CAAC;IACvD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,eAAiC,EACjC,IAAI,EACJ,KAAK,EAAE,eAAe,EACtB,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,2CA+GhB;yBAzHe,SAAS"}
|
|
@@ -37,7 +37,7 @@ const SPACING = {
|
|
|
37
37
|
* />
|
|
38
38
|
* ```
|
|
39
39
|
*/
|
|
40
|
-
function TextInput({ variant, disabled, className, clearButtonMode = "while-editing", unit, value: controlledValue, onChange, ...props }) {
|
|
40
|
+
function TextInput({ variant, disabled, className, clearButtonMode = "while-editing", unit, value: controlledValue, onChange, onClear, ...props }) {
|
|
41
41
|
const [internalValue, setInternalValue] = (0, react_1.useState)("");
|
|
42
42
|
const [isFocused, setIsFocused] = (0, react_1.useState)(false);
|
|
43
43
|
const [rightContentWidth, setRightContentWidth] = (0, react_1.useState)(0);
|
|
@@ -72,6 +72,7 @@ function TextInput({ variant, disabled, className, clearButtonMode = "while-edit
|
|
|
72
72
|
setInternalValue("");
|
|
73
73
|
}
|
|
74
74
|
onChange?.(syntheticEvent);
|
|
75
|
+
onClear?.();
|
|
75
76
|
};
|
|
76
77
|
(0, react_1.useEffect)(() => {
|
|
77
78
|
let totalWidth = 0;
|
package/dist/index.css
CHANGED
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
--ui-color-gray-900: #04041b;
|
|
30
30
|
--ui-color-white: #ffffff;
|
|
31
31
|
--ui-spacing: 0.25rem;
|
|
32
|
+
--ui-radius-xl: 0.75rem;
|
|
32
33
|
--ui-radius-2xl: 1rem;
|
|
33
34
|
--ui-default-transition-duration: 150ms;
|
|
34
35
|
--ui-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -313,6 +314,9 @@
|
|
|
313
314
|
.ui\:h-6 {
|
|
314
315
|
height: calc(var(--ui-spacing) * 6);
|
|
315
316
|
}
|
|
317
|
+
.ui\:h-10 {
|
|
318
|
+
height: calc(var(--ui-spacing) * 10);
|
|
319
|
+
}
|
|
316
320
|
.ui\:h-\[21px\] {
|
|
317
321
|
height: 21px;
|
|
318
322
|
}
|
|
@@ -337,9 +341,6 @@
|
|
|
337
341
|
.ui\:h-\[38px\] {
|
|
338
342
|
height: 38px;
|
|
339
343
|
}
|
|
340
|
-
.ui\:h-\[40px\] {
|
|
341
|
-
height: 40px;
|
|
342
|
-
}
|
|
343
344
|
.ui\:h-\[50px\] {
|
|
344
345
|
height: 50px;
|
|
345
346
|
}
|
|
@@ -449,15 +450,15 @@
|
|
|
449
450
|
.ui\:rounded-\[10px\] {
|
|
450
451
|
border-radius: 10px;
|
|
451
452
|
}
|
|
452
|
-
.ui\:rounded-\[12px\] {
|
|
453
|
-
border-radius: 12px;
|
|
454
|
-
}
|
|
455
453
|
.ui\:rounded-\[14px\] {
|
|
456
454
|
border-radius: 14px;
|
|
457
455
|
}
|
|
458
456
|
.ui\:rounded-full {
|
|
459
457
|
border-radius: calc(infinity * 1px);
|
|
460
458
|
}
|
|
459
|
+
.ui\:rounded-xl {
|
|
460
|
+
border-radius: var(--ui-radius-xl);
|
|
461
|
+
}
|
|
461
462
|
.ui\:border {
|
|
462
463
|
border-style: var(--tw-border-style);
|
|
463
464
|
border-width: 1px;
|
|
@@ -520,9 +521,18 @@
|
|
|
520
521
|
.ui\:bg-white {
|
|
521
522
|
background-color: var(--ui-color-white);
|
|
522
523
|
}
|
|
524
|
+
.ui\:px-3\.5 {
|
|
525
|
+
padding-inline: calc(var(--ui-spacing) * 3.5);
|
|
526
|
+
}
|
|
523
527
|
.ui\:px-4 {
|
|
524
528
|
padding-inline: calc(var(--ui-spacing) * 4);
|
|
525
529
|
}
|
|
530
|
+
.ui\:px-5 {
|
|
531
|
+
padding-inline: calc(var(--ui-spacing) * 5);
|
|
532
|
+
}
|
|
533
|
+
.ui\:px-6 {
|
|
534
|
+
padding-inline: calc(var(--ui-spacing) * 6);
|
|
535
|
+
}
|
|
526
536
|
.ui\:px-\[10px\] {
|
|
527
537
|
padding-inline: 10px;
|
|
528
538
|
}
|
|
@@ -532,33 +542,27 @@
|
|
|
532
542
|
.ui\:px-\[18px\] {
|
|
533
543
|
padding-inline: 18px;
|
|
534
544
|
}
|
|
535
|
-
.ui\:px-\[20px\] {
|
|
536
|
-
padding-inline: 20px;
|
|
537
|
-
}
|
|
538
|
-
.ui\:px-\[24px\] {
|
|
539
|
-
padding-inline: 24px;
|
|
540
|
-
}
|
|
541
545
|
.ui\:py-1 {
|
|
542
546
|
padding-block: calc(var(--ui-spacing) * 1);
|
|
543
547
|
}
|
|
548
|
+
.ui\:py-2 {
|
|
549
|
+
padding-block: calc(var(--ui-spacing) * 2);
|
|
550
|
+
}
|
|
551
|
+
.ui\:py-2\.5 {
|
|
552
|
+
padding-block: calc(var(--ui-spacing) * 2.5);
|
|
553
|
+
}
|
|
554
|
+
.ui\:py-3\.5 {
|
|
555
|
+
padding-block: calc(var(--ui-spacing) * 3.5);
|
|
556
|
+
}
|
|
544
557
|
.ui\:py-\[4\.5px\] {
|
|
545
558
|
padding-block: 4.5px;
|
|
546
559
|
}
|
|
547
560
|
.ui\:py-\[7px\] {
|
|
548
561
|
padding-block: 7px;
|
|
549
562
|
}
|
|
550
|
-
.ui\:py-\[8px\] {
|
|
551
|
-
padding-block: 8px;
|
|
552
|
-
}
|
|
553
563
|
.ui\:py-\[9px\] {
|
|
554
564
|
padding-block: 9px;
|
|
555
565
|
}
|
|
556
|
-
.ui\:py-\[10px\] {
|
|
557
|
-
padding-block: 10px;
|
|
558
|
-
}
|
|
559
|
-
.ui\:py-\[14px\] {
|
|
560
|
-
padding-block: 14px;
|
|
561
|
-
}
|
|
562
566
|
.ui\:text-body1 {
|
|
563
567
|
font-size: var(--ui-text-body1);
|
|
564
568
|
line-height: var(--tw-leading, var(--ui-text-body1--line-height));
|