@bioturing/components 0.21.2 → 0.23.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/dist/components/button/style.css +1 -1
- package/dist/components/code-block/component.js +67 -66
- package/dist/components/code-block/component.js.map +1 -1
- package/dist/components/form/component.js +6 -4
- package/dist/components/form/component.js.map +1 -1
- package/dist/components/form/item.js +23 -38
- package/dist/components/form/item.js.map +1 -1
- package/dist/components/form/label.js +49 -0
- package/dist/components/form/label.js.map +1 -0
- package/dist/components/icon-button/component.js +42 -38
- package/dist/components/icon-button/component.js.map +1 -1
- package/dist/components/icon-button/style.css +1 -1
- package/dist/components/input/component.js +65 -21
- package/dist/components/input/component.js.map +1 -1
- package/dist/components/input/style.css +1 -0
- package/dist/components/modal/style.css +1 -1
- package/dist/components/popup-panel/component.js +63 -63
- package/dist/components/popup-panel/component.js.map +1 -1
- package/dist/components/select/style.css +1 -1
- package/dist/components/spin/component.js +16 -6
- package/dist/components/spin/component.js.map +1 -1
- package/dist/components/spin/style.css +1 -1
- package/dist/components/utils/WithRenderProp.js +9 -9
- package/dist/components/utils/WithRenderProp.js.map +1 -1
- package/dist/index.d.ts +24 -8
- package/package.json +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{span.ds-btn-icon{display:flex;align-items:center}.ds-btn-negative-margin-wrapper{display:inline-flex;flex-shrink:0}.ds-btn-negative-margin-wrapper,.ds-btn-negative-margin-wrapper.ds-btn-wrapper-lg{margin-inline:-1rem}.ds-btn-negative-margin-wrapper.ds-btn-wrapper-sm{margin-inline:-.5rem}.ds-btn-loading:not(.ds-btn-with-icon) .ds-btn-loading-icon{position:absolute}.ds-btn-loading:not(.ds-btn-with-icon)
|
|
1
|
+
@layer components{span.ds-btn-icon{display:flex;align-items:center}.ds-btn-negative-margin-wrapper{display:inline-flex;flex-shrink:0}.ds-btn-negative-margin-wrapper,.ds-btn-negative-margin-wrapper.ds-btn-wrapper-lg{margin-inline:-1rem}.ds-btn-negative-margin-wrapper.ds-btn-wrapper-sm{margin-inline:-.5rem}.ds-btn-loading:not(.ds-btn-with-icon) .ds-btn-loading-icon{position:absolute}.ds-btn-loading:not(.ds-btn-with-icon)>*:not(.ds-btn-loading-icon){opacity:0}}
|
|
@@ -1,77 +1,78 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as o, jsxs as
|
|
3
|
-
import {
|
|
4
|
-
import { Check as q, Copy as z } from "@bioturing/assets";
|
|
5
|
-
import { ThemeProvider as G } from "../theme-provider/component.js";
|
|
2
|
+
import { jsx as o, jsxs as q } from "react/jsx-runtime";
|
|
3
|
+
import { CheckIcon as z, CopyIcon as G } from "@bioturing/assets";
|
|
6
4
|
import { Highlight as J, themes as K } from "prism-react-renderer";
|
|
5
|
+
import { useState as p, useEffect as Q, useCallback as I } from "react";
|
|
6
|
+
import { ThemeProvider as R } from "../theme-provider/component.js";
|
|
7
7
|
import './style.css';/* empty css */
|
|
8
|
-
import { WithAntdTokens as Q } from "../utils/WithAntdTokens.js";
|
|
9
|
-
import { Segmented as R } from "../segmented/component.js";
|
|
10
8
|
import { reactNodeToString as U } from "../utils/reactToString.js";
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
9
|
+
import { WithAntdTokens as V } from "../utils/WithAntdTokens.js";
|
|
10
|
+
import { Segmented as X } from "../segmented/component.js";
|
|
11
|
+
import { useControlledState as Y } from "../hooks/useControlledState.js";
|
|
12
|
+
import { useCls as Z } from "../utils/antdUtils.js";
|
|
13
|
+
import { clsx as H } from "../utils/cn.js";
|
|
14
|
+
import { IconButton as N } from "../icon-button/component.js";
|
|
15
|
+
import { ScrollArea as oo } from "../scroll-area/component.js";
|
|
16
|
+
const vo = ({
|
|
17
|
+
code: s,
|
|
18
|
+
children: m,
|
|
19
19
|
// initial,
|
|
20
|
-
lang:
|
|
21
|
-
className:
|
|
20
|
+
lang: h = "tsx",
|
|
21
|
+
className: O,
|
|
22
22
|
options: n,
|
|
23
|
-
activeOption:
|
|
24
|
-
defaultActiveOption:
|
|
25
|
-
onActiveOptionChange:
|
|
26
|
-
copyText:
|
|
27
|
-
copySuccessText:
|
|
23
|
+
activeOption: j,
|
|
24
|
+
defaultActiveOption: b = 0,
|
|
25
|
+
onActiveOptionChange: x,
|
|
26
|
+
copyText: a = "Copy",
|
|
27
|
+
copySuccessText: g = "Copied",
|
|
28
28
|
classNames: e,
|
|
29
|
-
maxHeight:
|
|
30
|
-
|
|
29
|
+
maxHeight: i,
|
|
30
|
+
onCopy: C,
|
|
31
|
+
...A
|
|
31
32
|
}) => {
|
|
32
|
-
const [
|
|
33
|
+
const [l, y] = Y(
|
|
34
|
+
j,
|
|
33
35
|
x,
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
$(() => {
|
|
36
|
+
b
|
|
37
|
+
), [c, B] = p(s || ""), [L, M] = p(h), f = n && n.length > 0;
|
|
38
|
+
Q(() => {
|
|
38
39
|
var t, r;
|
|
39
|
-
if (
|
|
40
|
-
const
|
|
41
|
-
|
|
40
|
+
if (f) {
|
|
41
|
+
const v = ((t = n[l]) == null ? void 0 : t.code) || "", k = ((r = n[l]) == null ? void 0 : r.lang) || h;
|
|
42
|
+
B(v), M(k);
|
|
42
43
|
}
|
|
43
44
|
}, [
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
s,
|
|
46
|
+
l,
|
|
47
|
+
b,
|
|
47
48
|
n,
|
|
48
|
-
m,
|
|
49
49
|
h,
|
|
50
|
-
|
|
50
|
+
f,
|
|
51
|
+
y
|
|
51
52
|
]);
|
|
52
|
-
const [
|
|
53
|
-
const t =
|
|
53
|
+
const [T, u] = p(a), [D, S] = p(!1), E = I(() => {
|
|
54
|
+
const t = c || U(m);
|
|
54
55
|
try {
|
|
55
56
|
navigator.clipboard.writeText(t).then(() => {
|
|
56
|
-
|
|
57
|
+
u(g), S(!0), C && C(t);
|
|
57
58
|
});
|
|
58
59
|
} catch {
|
|
59
|
-
|
|
60
|
+
u("Failed to copy");
|
|
60
61
|
}
|
|
61
|
-
},
|
|
62
|
-
a
|
|
63
|
-
}, d =
|
|
64
|
-
return /* @__PURE__ */ o(
|
|
65
|
-
|
|
62
|
+
}, [c, m, g, C]), F = I(() => {
|
|
63
|
+
u(a), S(!1);
|
|
64
|
+
}, [a]), d = Z();
|
|
65
|
+
return /* @__PURE__ */ o(R, { theme: "dark", children: /* @__PURE__ */ q(
|
|
66
|
+
V,
|
|
66
67
|
{
|
|
67
|
-
className:
|
|
68
|
-
...
|
|
68
|
+
className: H(d("code-block"), O, e == null ? void 0 : e.root),
|
|
69
|
+
...A,
|
|
69
70
|
children: [
|
|
70
|
-
|
|
71
|
-
|
|
71
|
+
f && /* @__PURE__ */ o("div", { className: d("code-block-header", e == null ? void 0 : e.header), children: /* @__PURE__ */ o(
|
|
72
|
+
X,
|
|
72
73
|
{
|
|
73
|
-
value:
|
|
74
|
-
onChange:
|
|
74
|
+
value: l,
|
|
75
|
+
onChange: y,
|
|
75
76
|
options: n.map((t, r) => ({
|
|
76
77
|
label: t.label,
|
|
77
78
|
value: r
|
|
@@ -79,12 +80,12 @@ const fo = ({
|
|
|
79
80
|
}
|
|
80
81
|
) }),
|
|
81
82
|
/* @__PURE__ */ o("div", { className: d("code-block-copy"), children: /* @__PURE__ */ o(
|
|
82
|
-
|
|
83
|
+
N,
|
|
83
84
|
{
|
|
84
|
-
onClick:
|
|
85
|
-
label:
|
|
86
|
-
onMouseLeave:
|
|
87
|
-
children:
|
|
85
|
+
onClick: E,
|
|
86
|
+
label: T,
|
|
87
|
+
onMouseLeave: F,
|
|
88
|
+
children: D ? /* @__PURE__ */ o(z, {}) : /* @__PURE__ */ o(G, {})
|
|
88
89
|
}
|
|
89
90
|
) }),
|
|
90
91
|
/* @__PURE__ */ o(
|
|
@@ -92,30 +93,30 @@ const fo = ({
|
|
|
92
93
|
{
|
|
93
94
|
className: d("code-block-content", e == null ? void 0 : e.content),
|
|
94
95
|
style: {
|
|
95
|
-
maxHeight:
|
|
96
|
+
maxHeight: i && (typeof i == "number" ? `${i}px` : i)
|
|
96
97
|
},
|
|
97
|
-
children: /* @__PURE__ */ o(
|
|
98
|
+
children: /* @__PURE__ */ o(oo, { children: c ? /* @__PURE__ */ o(
|
|
98
99
|
J,
|
|
99
100
|
{
|
|
100
|
-
language:
|
|
101
|
-
code:
|
|
101
|
+
language: L,
|
|
102
|
+
code: c,
|
|
102
103
|
theme: K.vsDark,
|
|
103
104
|
children: ({
|
|
104
105
|
className: t,
|
|
105
106
|
style: r,
|
|
106
|
-
tokens:
|
|
107
|
-
getLineProps:
|
|
108
|
-
getTokenProps:
|
|
107
|
+
tokens: v,
|
|
108
|
+
getLineProps: k,
|
|
109
|
+
getTokenProps: P
|
|
109
110
|
}) => /* @__PURE__ */ o(
|
|
110
111
|
"pre",
|
|
111
112
|
{
|
|
112
113
|
style: { ...r, backgroundColor: "transparent" },
|
|
113
114
|
className: t,
|
|
114
|
-
children:
|
|
115
|
+
children: v.map((w, W) => /* @__PURE__ */ o("div", { ...k({ line: w }), children: w.map((_, $) => /* @__PURE__ */ o("span", { ...P({ token: _ }) }, $)) }, W))
|
|
115
116
|
}
|
|
116
117
|
)
|
|
117
118
|
}
|
|
118
|
-
) :
|
|
119
|
+
) : m })
|
|
119
120
|
}
|
|
120
121
|
)
|
|
121
122
|
]
|
|
@@ -123,6 +124,6 @@ const fo = ({
|
|
|
123
124
|
) });
|
|
124
125
|
};
|
|
125
126
|
export {
|
|
126
|
-
|
|
127
|
+
vo as CodeBlock
|
|
127
128
|
};
|
|
128
129
|
//# sourceMappingURL=component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../src/components/code-block/component.tsx"],"sourcesContent":["\"use client\";\nimport {
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../src/components/code-block/component.tsx"],"sourcesContent":["\"use client\";\nimport { CheckIcon, CopyIcon } from \"@bioturing/assets\";\nimport { Highlight, themes } from \"prism-react-renderer\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { useControlledState } from \"../hooks\";\nimport { IconButton } from \"../icon-button\";\nimport { ScrollArea } from \"../scroll-area\";\nimport { Segmented } from \"../segmented\";\nimport { ThemeProvider } from \"../theme-provider/component\";\nimport { clsx, reactNodeToString, useCls, WithAntdTokens } from \"../utils\";\nimport type { CodeBlockProps } from \"./types\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport const CodeBlock = ({\n code,\n children,\n // initial,\n lang: defaultLang = \"tsx\",\n className,\n options,\n activeOption: controlledActiveOption,\n defaultActiveOption = 0,\n onActiveOptionChange,\n copyText = \"Copy\",\n copySuccessText = \"Copied\",\n classNames,\n maxHeight,\n onCopy,\n ...rest\n}: CodeBlockProps) => {\n const [activeOption, setActiveOption] = useControlledState(\n controlledActiveOption,\n onActiveOptionChange,\n defaultActiveOption\n );\n\n const [currentCode, setCurrentCode] = useState(code || \"\");\n\n const [lang, setLang] = useState(defaultLang);\n\n const hasOptions = options && options.length > 0;\n\n useEffect(() => {\n if (hasOptions) {\n const newCode = options[activeOption]?.code || \"\";\n const newLang = options[activeOption]?.lang || defaultLang;\n setCurrentCode(newCode);\n setLang(newLang);\n }\n }, [\n code,\n activeOption,\n defaultActiveOption,\n options,\n defaultLang,\n hasOptions,\n setActiveOption,\n ]);\n\n const [tooltipContent, setTooltipContent] = useState(copyText);\n const [copySuccess, setCopySuccess] = useState(false);\n\n const handleCopy = useCallback(() => {\n const codeContent = currentCode ? currentCode : reactNodeToString(children);\n try {\n navigator.clipboard.writeText(codeContent).then(() => {\n setTooltipContent(copySuccessText);\n setCopySuccess(true);\n if (onCopy) onCopy(codeContent);\n });\n } catch (_) {\n setTooltipContent(\"Failed to copy\");\n }\n }, [currentCode, children, copySuccessText, onCopy]);\n\n const handleMouseLeave = useCallback(() => {\n setTooltipContent(copyText);\n setCopySuccess(false);\n }, [copyText]);\n\n const cls = useCls();\n\n return (\n <ThemeProvider theme={\"dark\"}>\n <WithAntdTokens\n className={clsx(cls(\"code-block\"), className, classNames?.root)}\n {...rest}\n >\n {hasOptions && (\n <div className={cls(\"code-block-header\", classNames?.header)}>\n <Segmented\n value={activeOption}\n onChange={setActiveOption}\n options={options.map((opt, index) => ({\n label: opt.label,\n value: index,\n }))}\n />\n </div>\n )}\n <div className={cls(\"code-block-copy\")}>\n <IconButton\n onClick={handleCopy}\n label={tooltipContent}\n onMouseLeave={handleMouseLeave}\n >\n {copySuccess ? <CheckIcon /> : <CopyIcon />}\n </IconButton>\n </div>\n <div\n className={cls(\"code-block-content\", classNames?.content)}\n style={{\n maxHeight:\n maxHeight &&\n (typeof maxHeight === \"number\" ? `${maxHeight}px` : maxHeight),\n }}\n >\n <ScrollArea>\n {currentCode ? (\n <Highlight\n language={lang}\n code={currentCode}\n theme={themes.vsDark}\n >\n {({\n className,\n style,\n tokens,\n getLineProps,\n getTokenProps,\n }) => (\n <pre\n style={{ ...style, backgroundColor: \"transparent\" }}\n className={className}\n >\n {tokens.map((line, i) => (\n <div key={i} {...getLineProps({ line })}>\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </pre>\n )}\n </Highlight>\n ) : (\n children\n )}\n </ScrollArea>\n </div>\n </WithAntdTokens>\n </ThemeProvider>\n );\n};\n"],"names":["CodeBlock","code","children","defaultLang","className","options","controlledActiveOption","defaultActiveOption","onActiveOptionChange","copyText","copySuccessText","classNames","maxHeight","onCopy","rest","activeOption","setActiveOption","useControlledState","currentCode","setCurrentCode","useState","lang","setLang","hasOptions","useEffect","newCode","_a","newLang","_b","tooltipContent","setTooltipContent","copySuccess","setCopySuccess","handleCopy","useCallback","codeContent","reactNodeToString","handleMouseLeave","cls","useCls","jsx","ThemeProvider","jsxs","WithAntdTokens","clsx","Segmented","opt","index","IconButton","CheckIcon","CopyIcon","ScrollArea","Highlight","themes","style","tokens","getLineProps","getTokenProps","line","i","token","key"],"mappings":"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"}
|
|
@@ -6,19 +6,21 @@ import s from "antd/es/form/FormList";
|
|
|
6
6
|
import { FormProvider as n } from "antd/es/form/context";
|
|
7
7
|
import p from "antd/es/form/hooks/useFormInstance";
|
|
8
8
|
import { FormItem as F } from "./item.js";
|
|
9
|
+
import { FormLabel as f } from "./label.js";
|
|
9
10
|
import './style.css';/* empty css */
|
|
10
|
-
const
|
|
11
|
+
const a = ({
|
|
11
12
|
...r
|
|
12
|
-
}) => /* @__PURE__ */ o(t, { ...r }),
|
|
13
|
+
}) => /* @__PURE__ */ o(t, { ...r }), x = Object.assign(a, {
|
|
13
14
|
useForm: i,
|
|
14
15
|
useFormInstance: p,
|
|
15
16
|
useWatch: e,
|
|
16
17
|
Item: F,
|
|
17
18
|
List: s,
|
|
18
19
|
ErrorList: m,
|
|
19
|
-
Provider: n
|
|
20
|
+
Provider: n,
|
|
21
|
+
Label: f
|
|
20
22
|
});
|
|
21
23
|
export {
|
|
22
|
-
|
|
24
|
+
x as Form
|
|
23
25
|
};
|
|
24
26
|
//# sourceMappingURL=component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../src/components/form/component.tsx"],"sourcesContent":["\"use client\";\nimport ErrorList from \"antd/es/form/ErrorList\";\nimport {\n FormProps as AntdFormProps,\n default as AntdInternalForm,\n useForm,\n useWatch,\n} from \"antd/es/form/Form\";\nimport FormList from \"antd/es/form/FormList\";\nimport { FormProvider } from \"antd/es/form/context\";\nimport useFormInstance from \"antd/es/form/hooks/useFormInstance\";\nimport * as React from \"react\";\nimport { FormItem, type FormItemProps } from \"./item\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface FormProps<Values =
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../src/components/form/component.tsx"],"sourcesContent":["\"use client\";\nimport ErrorList from \"antd/es/form/ErrorList\";\nimport {\n FormProps as AntdFormProps,\n default as AntdInternalForm,\n useForm,\n useWatch,\n} from \"antd/es/form/Form\";\nimport FormList from \"antd/es/form/FormList\";\nimport { FormProvider } from \"antd/es/form/context\";\nimport useFormInstance from \"antd/es/form/hooks/useFormInstance\";\nimport * as React from \"react\";\nimport { FormItem, type FormItemProps } from \"./item\";\nimport { FormLabel } from \"./label\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface FormProps<Values = unknown> extends AntdFormProps<Values> {}\n\ninterface InternalFormProps<Values = unknown>\n extends React.ComponentProps<typeof AntdInternalForm<Values>> {}\n\nconst InternalForm = <Values = unknown,>({\n ...rest\n}: InternalFormProps<Values>) => {\n return <AntdInternalForm {...rest} />;\n};\n\nexport const Form = Object.assign(InternalForm, {\n useForm,\n useFormInstance,\n useWatch,\n Item: FormItem,\n List: FormList,\n ErrorList,\n Provider: FormProvider,\n Label: FormLabel,\n});\n\nexport type { FormItemProps };\n"],"names":["InternalForm","rest","jsx","AntdInternalForm","Form","useForm","useFormInstance","useWatch","FormItem","FormList","ErrorList","FormProvider","FormLabel"],"mappings":";;;;;;;;;;AAuBA,MAAMA,IAAe,CAAoB;AAAA,EACvC,GAAGC;AACL,MACS,gBAAAC,EAACC,GAAkB,EAAA,GAAGF,EAAM,CAAA,GAGxBG,IAAO,OAAO,OAAOJ,GAAc;AAAA,EAC9C,SAAAK;AAAA,EACA,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAMC;AAAA,EACN,MAAMC;AAAA,EACN,WAAAC;AAAA,EACA,UAAUC;AAAA,EACV,OAAOC;AACT,CAAC;"}
|
|
@@ -1,45 +1,30 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
import { useCls as p } from "../utils/antdUtils.js";
|
|
7
|
-
import { IconButton as d } from "../icon-button/component.js";
|
|
8
|
-
const y = ({
|
|
2
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
3
|
+
import p from "antd/es/form/FormItem";
|
|
4
|
+
import { FormLabel as s } from "./label.js";
|
|
5
|
+
const f = ({
|
|
9
6
|
tooltip: m,
|
|
10
|
-
label:
|
|
11
|
-
optionalMark:
|
|
12
|
-
requiredMark:
|
|
13
|
-
...
|
|
14
|
-
}) =>
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
7
|
+
label: o,
|
|
8
|
+
optionalMark: t,
|
|
9
|
+
requiredMark: e = !0,
|
|
10
|
+
...n
|
|
11
|
+
}) => /* @__PURE__ */ r(
|
|
12
|
+
p,
|
|
13
|
+
{
|
|
14
|
+
label: /* @__PURE__ */ r(
|
|
15
|
+
s,
|
|
18
16
|
{
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
r,
|
|
25
|
-
m && /* @__PURE__ */ e(
|
|
26
|
-
d,
|
|
27
|
-
{
|
|
28
|
-
className: n("form-item-explaination-icon"),
|
|
29
|
-
label: typeof m == "string" || a(m) ? m : void 0,
|
|
30
|
-
children: /* @__PURE__ */ e(f, {})
|
|
31
|
-
}
|
|
32
|
-
),
|
|
33
|
-
s && /* @__PURE__ */ e("span", { className: n("form-item-label-optional-mark"), children: typeof s == "boolean" ? "(optional)" : s }),
|
|
34
|
-
o !== !1 && /* @__PURE__ */ e("span", { className: n("form-item-label-required-mark"), children: typeof o == "boolean" ? "*" : o })
|
|
35
|
-
]
|
|
17
|
+
label: o,
|
|
18
|
+
tooltip: m,
|
|
19
|
+
optionalMark: t,
|
|
20
|
+
requiredMark: e,
|
|
21
|
+
as: "span"
|
|
36
22
|
}
|
|
37
|
-
)
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
};
|
|
23
|
+
),
|
|
24
|
+
...n
|
|
25
|
+
}
|
|
26
|
+
);
|
|
42
27
|
export {
|
|
43
|
-
|
|
28
|
+
f as FormItem
|
|
44
29
|
};
|
|
45
30
|
//# sourceMappingURL=item.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.js","sources":["../../../src/components/form/item.tsx"],"sourcesContent":["\"use client\";\nimport {
|
|
1
|
+
{"version":3,"file":"item.js","sources":["../../../src/components/form/item.tsx"],"sourcesContent":["\"use client\";\nimport {\n default as AntdFormItem,\n type FormItemProps as AntdFormItemProps,\n} from \"antd/es/form/FormItem\";\nimport { FormLabel } from \"./label\";\n\nexport interface FormItemProps<Values = unknown>\n extends AntdFormItemProps<Values> {\n // tooltip?: React.ReactNode | TooltipProps;\n /**\n * Whether the field is optional. If true, the label will be marked as optional.\n * @default false\n */\n optionalMark?: boolean | React.ReactNode;\n /**\n * Whether show the asterisk when the field is required\n * @default true\n */\n requiredMark?: boolean | React.ReactNode;\n}\n\nexport const FormItem = <Values = unknown,>({\n tooltip,\n label,\n optionalMark,\n requiredMark = true,\n ...rest\n}: FormItemProps<Values>) => {\n return (\n <AntdFormItem\n label={\n <FormLabel\n label={label}\n tooltip={tooltip}\n optionalMark={optionalMark}\n requiredMark={requiredMark}\n as=\"span\"\n />\n }\n {...rest}\n />\n );\n};\n"],"names":["FormItem","tooltip","label","optionalMark","requiredMark","rest","jsx","AntdFormItem","FormLabel"],"mappings":";;;;AAsBO,MAAMA,IAAW,CAAoB;AAAA,EAC1C,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,OACE,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,OAAAN;AAAA,QACA,SAAAD;AAAA,QACA,cAAAE;AAAA,QACA,cAAAC;AAAA,QACA,IAAG;AAAA,MAAA;AAAA,IACL;AAAA,IAED,GAAGC;AAAA,EAAA;AACN;"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef as b, isValidElement as d } from "react";
|
|
4
|
+
import { QuestionIcon as h } from "@bioturing/assets";
|
|
5
|
+
import { useCls as u } from "../utils/antdUtils.js";
|
|
6
|
+
import { IconButton as N } from "../icon-button/component.js";
|
|
7
|
+
import { cn as x } from "../utils/cn.js";
|
|
8
|
+
import { WithRenderProp as y } from "../utils/WithRenderProp.js";
|
|
9
|
+
const I = ({
|
|
10
|
+
label: l,
|
|
11
|
+
tooltip: o,
|
|
12
|
+
optionalMark: n,
|
|
13
|
+
requiredMark: m = !0,
|
|
14
|
+
className: t,
|
|
15
|
+
as: i,
|
|
16
|
+
render: s,
|
|
17
|
+
...a
|
|
18
|
+
}, c) => {
|
|
19
|
+
const r = u(), f = [
|
|
20
|
+
l,
|
|
21
|
+
o && /* @__PURE__ */ e(
|
|
22
|
+
N,
|
|
23
|
+
{
|
|
24
|
+
className: r("form-item-explaination-icon"),
|
|
25
|
+
label: typeof o == "string" || d(o) ? o : void 0,
|
|
26
|
+
children: /* @__PURE__ */ e(h, {})
|
|
27
|
+
},
|
|
28
|
+
"tooltip"
|
|
29
|
+
),
|
|
30
|
+
n && /* @__PURE__ */ e("span", { className: r("form-item-label-optional-mark"), children: typeof n == "boolean" ? "(optional)" : n }, "optional"),
|
|
31
|
+
m !== !1 && /* @__PURE__ */ e("span", { className: r("form-item-label-required-mark"), children: typeof m == "boolean" ? "*" : m }, "required")
|
|
32
|
+
], p = {
|
|
33
|
+
ref: c,
|
|
34
|
+
className: x(
|
|
35
|
+
r(
|
|
36
|
+
"form-item-label-inner",
|
|
37
|
+
m && "form-item-label-with-required-mark"
|
|
38
|
+
),
|
|
39
|
+
t
|
|
40
|
+
),
|
|
41
|
+
children: f,
|
|
42
|
+
...a
|
|
43
|
+
};
|
|
44
|
+
return /* @__PURE__ */ e(y, { as: i || "span", render: s, ...p });
|
|
45
|
+
}, j = b(I);
|
|
46
|
+
export {
|
|
47
|
+
j as FormLabel
|
|
48
|
+
};
|
|
49
|
+
//# sourceMappingURL=label.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"label.js","sources":["../../../src/components/form/label.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n forwardRef,\n type ElementType,\n type Ref,\n ComponentPropsWithRef,\n isValidElement,\n} from \"react\";\nimport {\n useCls,\n WithRenderPropProps,\n WithRenderProp,\n ElementTypeToDOMType,\n cn,\n} from \"../utils\";\nimport { IconButton } from \"../icon-button\";\nimport { QuestionIcon } from \"@bioturing/assets\";\nimport { WrapperTooltipProps } from \"antd/es/form/FormItemLabel\";\n\nexport type FormLabelProps<E extends ElementType = \"label\"> =\n WithRenderPropProps<E> & {\n /**\n * Label content to display\n */\n label: React.ReactNode;\n /**\n * Optional tooltip to display next to the label\n */\n tooltip?: React.ReactNode | WrapperTooltipProps;\n /**\n * Whether to show optional mark or custom optional mark content\n * @default false\n */\n optionalMark?: boolean | React.ReactNode;\n /**\n * Whether to show required mark or custom required mark content\n * @default true\n */\n requiredMark?: boolean | React.ReactNode;\n };\n\n/**\n * Implementation of the FormLabel component\n */\nconst FormLabelImpl = <E extends ElementType = \"label\">(\n {\n label,\n tooltip,\n optionalMark,\n requiredMark = true,\n className,\n as,\n render,\n ...rest\n }: FormLabelProps<E>,\n ref: Ref<ElementTypeToDOMType<E>>\n) => {\n const cls = useCls();\n\n const labelContent = [\n label,\n tooltip && (\n <IconButton\n key=\"tooltip\"\n className={cls(\"form-item-explaination-icon\")}\n label={\n typeof tooltip === \"string\" || isValidElement(tooltip)\n ? tooltip\n : undefined\n }\n >\n <QuestionIcon />\n </IconButton>\n ),\n optionalMark && (\n <span key=\"optional\" className={cls(\"form-item-label-optional-mark\")}>\n {typeof optionalMark === \"boolean\" ? \"(optional)\" : optionalMark}\n </span>\n ),\n requiredMark !== false && (\n <span key=\"required\" className={cls(\"form-item-label-required-mark\")}>\n {typeof requiredMark === \"boolean\" ? \"*\" : requiredMark}\n </span>\n ),\n ];\n\n const elementProps = {\n ref,\n className: cn(\n cls(\n \"form-item-label-inner\",\n requiredMark && \"form-item-label-with-required-mark\"\n ),\n className\n ),\n children: labelContent,\n ...rest,\n };\n\n return <WithRenderProp as={as || \"span\"} render={render} {...elementProps} />;\n};\n\n// Export with correct typing\nexport const FormLabel = forwardRef(FormLabelImpl) as <\n E extends ElementType = \"label\"\n>(\n props: FormLabelProps<E> & { ref?: ComponentPropsWithRef<E>[\"ref\"] }\n) => ReturnType<typeof FormLabelImpl>;\n"],"names":["FormLabelImpl","label","tooltip","optionalMark","requiredMark","className","as","render","rest","ref","cls","useCls","labelContent","jsx","IconButton","isValidElement","QuestionIcon","elementProps","cn","WithRenderProp","FormLabel","forwardRef"],"mappings":";;;;;;;;AA4CA,MAAMA,IAAgB,CACpB;AAAA,EACE,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAMC,EAAO,GAEbC,IAAe;AAAA,IACnBX;AAAA,IACAC,KACE,gBAAAW;AAAA,MAACC;AAAA,MAAA;AAAA,QAEC,WAAWJ,EAAI,6BAA6B;AAAA,QAC5C,OACE,OAAOR,KAAY,YAAYa,EAAeb,CAAO,IACjDA,IACA;AAAA,QAGN,4BAACc,GAAa,CAAA,CAAA;AAAA,MAAA;AAAA,MARV;AAAA,IASN;AAAA,IAEFb,KACE,gBAAAU,EAAC,QAAoB,EAAA,WAAWH,EAAI,+BAA+B,GAChE,UAAA,OAAOP,KAAiB,YAAY,eAAeA,EAAA,GAD5C,UAEV;AAAA,IAEFC,MAAiB,MACd,gBAAAS,EAAA,QAAA,EAAoB,WAAWH,EAAI,+BAA+B,GAChE,UAAO,OAAAN,KAAiB,YAAY,MAAMA,KADnC,UAEV;AAAA,EAEJ,GAEMa,IAAe;AAAA,IACnB,KAAAR;AAAA,IACA,WAAWS;AAAA,MACTR;AAAA,QACE;AAAA,QACAN,KAAgB;AAAA,MAClB;AAAA,MACAC;AAAA,IACF;AAAA,IACA,UAAUO;AAAA,IACV,GAAGJ;AAAA,EACL;AAEA,2BAAQW,GAAe,EAAA,IAAIb,KAAM,QAAQ,QAAAC,GAAiB,GAAGU,GAAc;AAC7E,GAGaG,IAAYC,EAAWrB,CAAa;"}
|
|
@@ -1,65 +1,69 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import { forwardRef as
|
|
2
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef as N } from "react";
|
|
4
4
|
import './style.css';/* empty css */
|
|
5
|
-
import { Tooltip as
|
|
6
|
-
import { WithRenderProp as
|
|
7
|
-
import { Spin as
|
|
8
|
-
import { useCls as
|
|
9
|
-
import { clsx as
|
|
10
|
-
const
|
|
11
|
-
label:
|
|
12
|
-
size:
|
|
5
|
+
import { Tooltip as P } from "../tooltip/component.js";
|
|
6
|
+
import { WithRenderProp as S } from "../utils/WithRenderProp.js";
|
|
7
|
+
import { Spin as T } from "../spin/component.js";
|
|
8
|
+
import { useCls as W } from "../utils/antdUtils.js";
|
|
9
|
+
import { clsx as $ } from "../utils/cn.js";
|
|
10
|
+
const h = ({
|
|
11
|
+
label: m,
|
|
12
|
+
size: a = "medium",
|
|
13
13
|
negativeMargin: l = !0,
|
|
14
|
-
children:
|
|
15
|
-
className:
|
|
16
|
-
tooltipProps:
|
|
14
|
+
children: d,
|
|
15
|
+
className: b,
|
|
16
|
+
tooltipProps: f = {},
|
|
17
|
+
active: v = !1,
|
|
17
18
|
as: x,
|
|
18
19
|
href: t,
|
|
19
20
|
// Extract anchor-specific props
|
|
20
|
-
target:
|
|
21
|
+
target: s,
|
|
21
22
|
rel: e,
|
|
22
|
-
download:
|
|
23
|
-
hrefLang:
|
|
24
|
-
referrerPolicy:
|
|
23
|
+
download: r,
|
|
24
|
+
hrefLang: c,
|
|
25
|
+
referrerPolicy: p,
|
|
25
26
|
loading: o,
|
|
26
27
|
render: C,
|
|
27
28
|
...I
|
|
28
29
|
}, B) => {
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
30
|
+
const R = W(), j = $(
|
|
31
|
+
R(
|
|
32
|
+
"icon-button",
|
|
33
|
+
`icon-button-${a}`,
|
|
34
|
+
v && "icon-button-active",
|
|
35
|
+
l && "icon-button-negative-margin"
|
|
36
|
+
),
|
|
37
|
+
b
|
|
38
|
+
), n = x || (t ? "a" : "button"), w = {
|
|
35
39
|
ref: B,
|
|
36
|
-
className:
|
|
37
|
-
...
|
|
38
|
-
...
|
|
40
|
+
className: j,
|
|
41
|
+
...n === "button" && { type: "button" },
|
|
42
|
+
...n === "a" ? {
|
|
39
43
|
...t && { href: t },
|
|
40
|
-
...
|
|
44
|
+
...s !== void 0 && { target: s },
|
|
41
45
|
...e !== void 0 && { rel: e },
|
|
42
|
-
...
|
|
43
|
-
...
|
|
44
|
-
...
|
|
46
|
+
...r !== void 0 && { download: r },
|
|
47
|
+
...c !== void 0 && { hrefLang: c },
|
|
48
|
+
...p !== void 0 && { referrerPolicy: p }
|
|
45
49
|
} : {},
|
|
46
50
|
"data-loading": o,
|
|
47
|
-
children: o ? /* @__PURE__ */
|
|
51
|
+
children: o ? /* @__PURE__ */ i(T, {}) : d,
|
|
48
52
|
...I
|
|
49
|
-
},
|
|
50
|
-
|
|
53
|
+
}, u = /* @__PURE__ */ i(
|
|
54
|
+
S,
|
|
51
55
|
{
|
|
52
|
-
as:
|
|
56
|
+
as: n,
|
|
53
57
|
render: C,
|
|
54
|
-
...
|
|
58
|
+
...w,
|
|
55
59
|
state: {
|
|
56
60
|
loading: o
|
|
57
61
|
}
|
|
58
62
|
}
|
|
59
63
|
);
|
|
60
|
-
return
|
|
61
|
-
},
|
|
64
|
+
return m ? /* @__PURE__ */ i(P, { title: m, arrow: !1, ...f, children: u }) : u;
|
|
65
|
+
}, G = N(h);
|
|
62
66
|
export {
|
|
63
|
-
|
|
67
|
+
G as IconButton
|
|
64
68
|
};
|
|
65
69
|
//# sourceMappingURL=component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../src/components/icon-button/component.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n forwardRef,\n type ElementType,\n type
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../src/components/icon-button/component.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n forwardRef,\n type ElementType,\n type Ref,\n ComponentPropsWithRef,\n} from \"react\";\nimport { Tooltip, TooltipProps } from \"../tooltip\";\nimport {\n useCls,\n clsx,\n WithRenderPropProps,\n WithRenderProp,\n ElementTypeToDOMType,\n} from \"../utils\";\nimport { Spin } from \"../spin\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n// Base props without href/as handling\nexport type IconButtonProps<E extends ElementType = \"button\"> =\n WithRenderPropProps<E, { loading: boolean }> & {\n /**\n * Label text or element to display within tooltip\n * @default undefined\n */\n label?: React.ReactNode;\n /**\n * Size of the icon button: small (1.25rem) or medium (1.5rem)\n * @default medium\n */\n size?: \"small\" | \"medium\";\n /**\n * Whether to apply negative margin for better visual alignment\n * @default true\n */\n negativeMargin?: boolean;\n /**\n * Whether to show loading state\n * @default false\n */\n loading?: boolean;\n /**\n * Props to pass to the Tooltip component when wrapping the button\n */\n tooltipProps?: TooltipProps;\n /**\n * Whether to show active state\n * @default false\n */\n active?: boolean;\n };\n\n/**\n * Implementation of the IconButton component\n */\nconst IconButtonImpl = <E extends ElementType = \"button\">(\n {\n label,\n size = \"medium\",\n negativeMargin = true,\n children,\n className,\n tooltipProps = {},\n active = false,\n as,\n href,\n // Extract anchor-specific props\n target,\n rel,\n download,\n hrefLang,\n referrerPolicy,\n loading,\n render,\n ...rest\n }: IconButtonProps<E>,\n ref: Ref<ElementTypeToDOMType<E>>\n) => {\n const cls = useCls();\n const buttonClasses = clsx(\n cls(\n \"icon-button\",\n `icon-button-${size}`,\n active && \"icon-button-active\",\n negativeMargin && \"icon-button-negative-margin\"\n ),\n className\n );\n\n // Use a type assertion for the component to avoid TypeScript errors\n const Component = (as || (href ? \"a\" : \"button\")) as ElementType;\n\n const elementProps = {\n ref,\n className: buttonClasses,\n ...(Component === \"button\" && { type: \"button\" }),\n ...(Component === \"a\"\n ? {\n ...(href && { href }),\n ...(target !== undefined && { target }),\n ...(rel !== undefined && { rel }),\n ...(download !== undefined && { download }),\n ...(hrefLang !== undefined && { hrefLang }),\n ...(referrerPolicy !== undefined && { referrerPolicy }),\n }\n : {}),\n \"data-loading\": loading,\n children: loading ? <Spin /> : children,\n ...rest,\n };\n\n const element = (\n <WithRenderProp\n as={Component}\n render={render}\n {...elementProps}\n state={{\n loading,\n }}\n />\n );\n\n return label ? (\n <Tooltip title={label} arrow={false} {...tooltipProps}>\n {element}\n </Tooltip>\n ) : (\n element\n );\n};\n\n// Export with correct typing\nexport const IconButton = forwardRef(IconButtonImpl) as <\n E extends ElementType = \"button\"\n>(\n props: IconButtonProps<E> & { ref?: ComponentPropsWithRef<E>[\"ref\"] }\n) => ReturnType<typeof IconButtonImpl>;\n"],"names":["IconButtonImpl","label","size","negativeMargin","children","className","tooltipProps","active","as","href","target","rel","download","hrefLang","referrerPolicy","loading","render","rest","ref","cls","useCls","buttonClasses","clsx","Component","elementProps","jsx","Spin","element","WithRenderProp","Tooltip","IconButton","forwardRef"],"mappings":";;;;;;;;;AAyDA,MAAMA,IAAiB,CACrB;AAAA,EACE,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,gBAAAC,IAAiB;AAAA,EACjB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC,IAAe,CAAC;AAAA,EAChB,QAAAC,IAAS;AAAA,EACT,IAAAC;AAAA,EACA,MAAAC;AAAA;AAAA,EAEA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAMC,EAAO,GACbC,IAAgBC;AAAA,IACpBH;AAAA,MACE;AAAA,MACA,eAAejB,CAAI;AAAA,MACnBK,KAAU;AAAA,MACVJ,KAAkB;AAAA,IACpB;AAAA,IACAE;AAAA,EACF,GAGMkB,IAAaf,MAAOC,IAAO,MAAM,WAEjCe,IAAe;AAAA,IACnB,KAAAN;AAAA,IACA,WAAWG;AAAA,IACX,GAAIE,MAAc,YAAY,EAAE,MAAM,SAAS;AAAA,IAC/C,GAAIA,MAAc,MACd;AAAA,MACE,GAAId,KAAQ,EAAE,MAAAA,EAAK;AAAA,MACnB,GAAIC,MAAW,UAAa,EAAE,QAAAA,EAAO;AAAA,MACrC,GAAIC,MAAQ,UAAa,EAAE,KAAAA,EAAI;AAAA,MAC/B,GAAIC,MAAa,UAAa,EAAE,UAAAA,EAAS;AAAA,MACzC,GAAIC,MAAa,UAAa,EAAE,UAAAA,EAAS;AAAA,MACzC,GAAIC,MAAmB,UAAa,EAAE,gBAAAA,EAAe;AAAA,IAAA,IAEvD,CAAC;AAAA,IACL,gBAAgBC;AAAA,IAChB,UAAUA,IAAW,gBAAAU,EAAAC,GAAA,CAAA,CAAK,IAAKtB;AAAA,IAC/B,GAAGa;AAAA,EACL,GAEMU,IACJ,gBAAAF;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,IAAIL;AAAA,MACJ,QAAAP;AAAA,MACC,GAAGQ;AAAA,MACJ,OAAO;AAAA,QACL,SAAAT;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAGK,SAAAd,IACJ,gBAAAwB,EAAAI,GAAA,EAAQ,OAAO5B,GAAO,OAAO,IAAQ,GAAGK,GACtC,UAAAqB,EAAA,CACH,IAEAA;AAEJ,GAGaG,IAAaC,EAAW/B,CAAc;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.ds-icon-button{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:999px;cursor:pointer;background-color:transparent;color:var(--ds-color-icon);transition:all .2s}.ds-icon-button:hover{background-color:var(--ds-color-fill-secondary);color:var(--ds-color-icon-hover)}.ds-icon-button:active,.ds-icon-button.ds-popover-open{background-color:var(--ds-color-primary-bg);color:var(--ds-color-primary)}.ds-icon-button:focus{outline:none}.ds-icon-button:disabled{cursor:not-allowed;pointer-events:none;color:var(--ds-color-text-disabled)}.ds-icon-button.ds-icon-button-medium{padding:.25rem;font-size:1.25rem;height:1.75rem;width:1.75rem}.ds-icon-button.ds-icon-button-medium.ds-icon-button-negative-margin{margin:-.25rem}.ds-icon-button.ds-icon-button-small{padding:.25rem;font-size:1rem;height:1.5rem;width:1.5rem}.ds-icon-button.ds-icon-button-small.ds-icon-button-negative-margin{margin:-.25rem}.ds-icon-button .ds-spin{font-size:.8em;line-height:1;display:flex;align-items:center;justify-content:center}}
|
|
1
|
+
@layer components{.ds-icon-button{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:999px;cursor:pointer;background-color:transparent;color:var(--ds-color-icon);transition:all .2s}.ds-icon-button:hover{background-color:var(--ds-color-fill-secondary);color:var(--ds-color-icon-hover)}.ds-icon-button:active,.ds-icon-button.ds-icon-button-active,.ds-icon-button.ds-popover-open{background-color:var(--ds-color-primary-bg);color:var(--ds-color-primary)}.ds-icon-button:focus{outline:none}.ds-icon-button:focus-visible{outline:var(--ds-line-width-focus) solid var(--ds-color-primary-border);outline-offset:1px;transition:outline-offset 0s,outline 0s}.ds-icon-button:disabled{cursor:not-allowed;pointer-events:none;color:var(--ds-color-text-disabled)}.ds-icon-button.ds-icon-button-medium{padding:.25rem;font-size:1.25rem;height:1.75rem;width:1.75rem}.ds-icon-button.ds-icon-button-medium.ds-icon-button-negative-margin{margin:-.25rem}.ds-icon-button.ds-icon-button-small{padding:.25rem;font-size:1rem;height:1.5rem;width:1.5rem}.ds-icon-button.ds-icon-button-small.ds-icon-button-negative-margin{margin:-.25rem}.ds-icon-button .ds-spin{font-size:.8em;line-height:1;display:flex;align-items:center;justify-content:center}}
|