alicia-design-system 1.74.2 → 1.74.3
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/cjs/alicia/common/List/List.d.ts +10 -1
- package/dist/cjs/alicia/common/List/List.js +42 -40
- package/dist/cjs/alicia/common/List/List.js.map +1 -1
- package/dist/cjs/alicia/common/List/List.stories.d.ts +3 -3
- package/dist/esm/alicia/common/List/List.d.ts +10 -1
- package/dist/esm/alicia/common/List/List.js +41 -40
- package/dist/esm/alicia/common/List/List.js.map +1 -1
- package/dist/esm/alicia/common/List/List.stories.d.ts +3 -3
- package/package.json +1 -1
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const
|
|
2
|
+
export declare const CustomListItem: ({ list, withLeftIcon, rightIconColor, itemFontSize, withRightIcon, withLeftIconBackground, leftIconColor, onItemClick, isClickable, itemFont, itemColor, selectedItemColor, selectedItemBackgroundColor, enableVisualEffects, data, }: CustomListItemProps) => JSX.Element;
|
|
3
|
+
export declare const List: (props: ListProps) => JSX.Element;
|
|
3
4
|
export type ListProps = {
|
|
4
5
|
list: ListOption[];
|
|
5
6
|
withLeftIcon?: boolean;
|
|
@@ -19,6 +20,14 @@ export type ListProps = {
|
|
|
19
20
|
selectedItemColor?: string;
|
|
20
21
|
enableVisualEffects?: boolean;
|
|
21
22
|
};
|
|
23
|
+
export type CustomListItemProps = ListProps & {
|
|
24
|
+
data: {
|
|
25
|
+
value: string;
|
|
26
|
+
label: string;
|
|
27
|
+
description?: string;
|
|
28
|
+
index: number;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
22
31
|
type ListOption = {
|
|
23
32
|
value: string;
|
|
24
33
|
label: string;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.List = void 0;
|
|
3
|
+
exports.List = exports.CustomListItem = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const react_1 = require("@chakra-ui/react");
|
|
6
6
|
const framer_motion_1 = require("framer-motion");
|
|
@@ -10,51 +10,53 @@ const icons_1 = require("../icons");
|
|
|
10
10
|
const getRandomNumber = (min, max) => {
|
|
11
11
|
return Math.floor(Math.random() * (max - min + 1) + min);
|
|
12
12
|
};
|
|
13
|
-
const
|
|
13
|
+
const CustomListItem = ({ list, withLeftIcon, rightIconColor, itemFontSize, withRightIcon, withLeftIconBackground = true, leftIconColor = undefined, onItemClick, isClickable = false, itemFont = 'UntitledSansRegular', itemColor = 'text', selectedItemColor = '#00ec00', selectedItemBackgroundColor = '#00ec00', enableVisualEffects = true, data, }) => {
|
|
14
|
+
const [isHovered, setHovered] = (0, react_2.useState)(false);
|
|
15
|
+
const [degree] = (0, react_2.useState)(getRandomNumber(349, 367));
|
|
14
16
|
const onClickItem = (item) => {
|
|
15
17
|
if (isClickable && onItemClick) {
|
|
16
18
|
onItemClick(item);
|
|
17
19
|
}
|
|
18
20
|
};
|
|
19
|
-
const [hoverValue, setHoverValue] = (0, react_2.useState)(selectedValue);
|
|
20
|
-
(0, react_2.useEffect)(() => {
|
|
21
|
-
setHoverValue(selectedValue);
|
|
22
|
-
}, [selectedValue]);
|
|
23
21
|
const ArrowIcon = (0, icons_1.ArrowForwardCircleIcon)({ fillColor: itemColor });
|
|
24
|
-
return ((0, jsx_runtime_1.jsxs)(react_1.
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
22
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.ListItem, Object.assign({ pos: "relative", color: itemColor, cursor: isClickable ? 'pointer' : 'auto', onClick: () => {
|
|
23
|
+
data && onClickItem({ value: data === null || data === void 0 ? void 0 : data.value, label: data === null || data === void 0 ? void 0 : data.label });
|
|
24
|
+
}, zIndex: 4, display: ['flex', 'inherit'], alignItems: "center", fontFamily: itemFont, paddingY: 2, fontSize: "2xl", onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), w: "100%" }, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, Object.assign({ justifyContent: "space-between", w: "100%" }, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, Object.assign({ maxW: withRightIcon ? '90%' : '100%' }, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, Object.assign({ alignItems: "center" }, { children: [(data === null || data === void 0 ? void 0 : data.index) !== list.length - 1 && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { width: '0' }, animate: { width: '100%' }, style: {
|
|
25
|
+
width: '100%',
|
|
26
|
+
opacity: 0.3,
|
|
27
|
+
zIndex: '2',
|
|
28
|
+
position: 'absolute',
|
|
29
|
+
left: 0,
|
|
30
|
+
bottom: 0,
|
|
31
|
+
height: '1px',
|
|
32
|
+
background: itemColor,
|
|
33
|
+
}, transition: { duration: 0.5 } })), withLeftIcon && ((0, jsx_runtime_1.jsxs)(react_1.Flex, Object.assign({ zIndex: 1, pos: "relative", w: (0, polished_1.rem)(32), display: "inline-block", mr: "2.5", direction: "row" }, { children: [enableVisualEffects && withLeftIconBackground && ((0, jsx_runtime_1.jsx)(react_1.Box, Object.assign({ zIndex: -2, style: {
|
|
34
|
+
rotate: `${degree}deg`,
|
|
35
|
+
}, transform: "translate(-50%, -50%)", pos: "absolute", top: "50%", left: "50%", w: "120%" }, { children: (0, jsx_runtime_1.jsxs)("svg", Object.assign({ viewBox: "0 0 40 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("g", Object.assign({ clipPath: "url(#a)" }, { children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 0c6.131 0 12.198.216 18.313 1.008 7.2.932 14.393.935 21.61.871L40 21.977c-7.581.067-15.139.047-22.702-.93-5.779-.745-11.504-.949-17.298-.949V0Z", fill: leftIconColor !== null && leftIconColor !== void 0 ? leftIconColor : '#B5C9FF' }) })), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", Object.assign({ id: "a" }, { children: (0, jsx_runtime_1.jsx)("path", { fill: "#fff", d: "M0 0h40v22H0z" }) })) })] })) }))), (0, jsx_runtime_1.jsx)(react_1.Box, Object.assign({ zIndex: 2, pos: "relative", display: "inline-block", borderRadius: "full", w: (0, polished_1.rem)(32), textAlign: "center", border: `${(0, polished_1.rem)(1)} solid ${enableVisualEffects
|
|
36
|
+
? itemColor
|
|
37
|
+
: selectedItemBackgroundColor}`, mr: "1.5", fontSize: 20, bg: enableVisualEffects
|
|
38
|
+
? 'transparent'
|
|
39
|
+
: selectedItemBackgroundColor, color: enableVisualEffects ? undefined : 'white' }, { children: Number(data === null || data === void 0 ? void 0 : data.index) + 1 }))] })))] })), (0, jsx_runtime_1.jsxs)(react_1.Flex, Object.assign({ flexDirection: "column" }, { children: [(0, jsx_runtime_1.jsx)(react_1.Text, Object.assign({ as: "span", fontSize: itemFontSize, wordBreak: "break-all" }, { children: data === null || data === void 0 ? void 0 : data.label })), (data === null || data === void 0 ? void 0 : data.description) && ((0, jsx_runtime_1.jsx)(react_1.Text, Object.assign({ as: "span", fontSize: (0, polished_1.rem)(14) }, { children: data === null || data === void 0 ? void 0 : data.description })))] }))] })), withRightIcon && ((0, jsx_runtime_1.jsx)(ArrowIcon, { fill: rightIconColor, pr: (0, polished_1.rem)(10), float: "right", width: (0, polished_1.rem)(30), height: (0, polished_1.rem)(30) }))] })), isClickable && isHovered && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { width: '0', transform: "rotate('32deg')" }, animate: {
|
|
40
|
+
width: '100%',
|
|
41
|
+
transform: enableVisualEffects
|
|
42
|
+
? 'rotate(-0.4deg)'
|
|
43
|
+
: undefined,
|
|
44
|
+
}, style: {
|
|
45
|
+
width: '100%',
|
|
46
|
+
transform: enableVisualEffects
|
|
47
|
+
? 'rotate(-0.4deg)'
|
|
48
|
+
: undefined,
|
|
49
|
+
zIndex: '-1',
|
|
50
|
+
height: '100%',
|
|
51
|
+
background: selectedItemColor,
|
|
52
|
+
left: '0',
|
|
53
|
+
top: enableVisualEffects ? '-2px' : 0,
|
|
54
|
+
position: 'absolute',
|
|
55
|
+
}, transition: { duration: enableVisualEffects ? 0.5 : 0 } }))] }), data === null || data === void 0 ? void 0 : data.value));
|
|
56
|
+
};
|
|
57
|
+
exports.CustomListItem = CustomListItem;
|
|
58
|
+
const List = (props) => {
|
|
59
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.Flex, Object.assign({ flexDirection: "column" }, { children: [props.title && ((0, jsx_runtime_1.jsx)(react_1.Flex, Object.assign({ as: "span", mb: (0, polished_1.rem)(18), fontSize: (0, polished_1.rem)(14), fontWeight: "500" }, { children: props.title }))), props.type === 'ordered' && ((0, jsx_runtime_1.jsx)(react_1.List, { children: props.list.map(({ value, label, description }, index) => ((0, jsx_runtime_1.jsx)(exports.CustomListItem, Object.assign({ data: { value, label, description, index } }, props), index))) }))] })));
|
|
58
60
|
};
|
|
59
61
|
exports.List = List;
|
|
60
62
|
//# sourceMappingURL=List.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../../src/alicia/common/List/List.tsx"],"names":[],"mappings":";;;;AAAA,4CAM0B;AAC1B,iDAAuC;AACvC,uCAA+B;AAC/B,
|
|
1
|
+
{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../../src/alicia/common/List/List.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ComponentStory, ComponentMeta } from "@storybook/react";
|
|
3
|
-
declare const _default: ComponentMeta<(
|
|
3
|
+
declare const _default: ComponentMeta<(props: import("./List").ListProps) => JSX.Element>;
|
|
4
4
|
export default _default;
|
|
5
|
-
export declare const Ordered: ComponentStory<(
|
|
6
|
-
export declare const Unordered: ComponentStory<(
|
|
5
|
+
export declare const Ordered: ComponentStory<(props: import("./List").ListProps) => JSX.Element>;
|
|
6
|
+
export declare const Unordered: ComponentStory<(props: import("./List").ListProps) => JSX.Element>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const
|
|
2
|
+
export declare const CustomListItem: ({ list, withLeftIcon, rightIconColor, itemFontSize, withRightIcon, withLeftIconBackground, leftIconColor, onItemClick, isClickable, itemFont, itemColor, selectedItemColor, selectedItemBackgroundColor, enableVisualEffects, data, }: CustomListItemProps) => JSX.Element;
|
|
3
|
+
export declare const List: (props: ListProps) => JSX.Element;
|
|
3
4
|
export type ListProps = {
|
|
4
5
|
list: ListOption[];
|
|
5
6
|
withLeftIcon?: boolean;
|
|
@@ -19,6 +20,14 @@ export type ListProps = {
|
|
|
19
20
|
selectedItemColor?: string;
|
|
20
21
|
enableVisualEffects?: boolean;
|
|
21
22
|
};
|
|
23
|
+
export type CustomListItemProps = ListProps & {
|
|
24
|
+
data: {
|
|
25
|
+
value: string;
|
|
26
|
+
label: string;
|
|
27
|
+
description?: string;
|
|
28
|
+
index: number;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
22
31
|
type ListOption = {
|
|
23
32
|
value: string;
|
|
24
33
|
label: string;
|
|
@@ -2,55 +2,56 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { ListItem, List as ChakraList, Box, Flex, Text, } from '@chakra-ui/react';
|
|
3
3
|
import { motion } from 'framer-motion';
|
|
4
4
|
import { rem } from 'polished';
|
|
5
|
-
import {
|
|
5
|
+
import { useState } from 'react';
|
|
6
6
|
import { ArrowForwardCircleIcon } from '../icons';
|
|
7
7
|
const getRandomNumber = (min, max) => {
|
|
8
8
|
return Math.floor(Math.random() * (max - min + 1) + min);
|
|
9
9
|
};
|
|
10
|
-
export const
|
|
10
|
+
export const CustomListItem = ({ list, withLeftIcon, rightIconColor, itemFontSize, withRightIcon, withLeftIconBackground = true, leftIconColor = undefined, onItemClick, isClickable = false, itemFont = 'UntitledSansRegular', itemColor = 'text', selectedItemColor = '#00ec00', selectedItemBackgroundColor = '#00ec00', enableVisualEffects = true, data, }) => {
|
|
11
|
+
const [isHovered, setHovered] = useState(false);
|
|
12
|
+
const [degree] = useState(getRandomNumber(349, 367));
|
|
11
13
|
const onClickItem = (item) => {
|
|
12
14
|
if (isClickable && onItemClick) {
|
|
13
15
|
onItemClick(item);
|
|
14
16
|
}
|
|
15
17
|
};
|
|
16
|
-
const [hoverValue, setHoverValue] = useState(selectedValue);
|
|
17
|
-
useEffect(() => {
|
|
18
|
-
setHoverValue(selectedValue);
|
|
19
|
-
}, [selectedValue]);
|
|
20
18
|
const ArrowIcon = ArrowForwardCircleIcon({ fillColor: itemColor });
|
|
21
|
-
return (_jsxs(
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
19
|
+
return (_jsxs(ListItem, Object.assign({ pos: "relative", color: itemColor, cursor: isClickable ? 'pointer' : 'auto', onClick: () => {
|
|
20
|
+
data && onClickItem({ value: data === null || data === void 0 ? void 0 : data.value, label: data === null || data === void 0 ? void 0 : data.label });
|
|
21
|
+
}, zIndex: 4, display: ['flex', 'inherit'], alignItems: "center", fontFamily: itemFont, paddingY: 2, fontSize: "2xl", onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), w: "100%" }, { children: [_jsxs(Flex, Object.assign({ justifyContent: "space-between", w: "100%" }, { children: [_jsxs(Flex, Object.assign({ maxW: withRightIcon ? '90%' : '100%' }, { children: [_jsxs(Flex, Object.assign({ alignItems: "center" }, { children: [(data === null || data === void 0 ? void 0 : data.index) !== list.length - 1 && (_jsx(motion.div, { initial: { width: '0' }, animate: { width: '100%' }, style: {
|
|
22
|
+
width: '100%',
|
|
23
|
+
opacity: 0.3,
|
|
24
|
+
zIndex: '2',
|
|
25
|
+
position: 'absolute',
|
|
26
|
+
left: 0,
|
|
27
|
+
bottom: 0,
|
|
28
|
+
height: '1px',
|
|
29
|
+
background: itemColor,
|
|
30
|
+
}, transition: { duration: 0.5 } })), withLeftIcon && (_jsxs(Flex, Object.assign({ zIndex: 1, pos: "relative", w: rem(32), display: "inline-block", mr: "2.5", direction: "row" }, { children: [enableVisualEffects && withLeftIconBackground && (_jsx(Box, Object.assign({ zIndex: -2, style: {
|
|
31
|
+
rotate: `${degree}deg`,
|
|
32
|
+
}, transform: "translate(-50%, -50%)", pos: "absolute", top: "50%", left: "50%", w: "120%" }, { children: _jsxs("svg", Object.assign({ viewBox: "0 0 40 22", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("g", Object.assign({ clipPath: "url(#a)" }, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 0c6.131 0 12.198.216 18.313 1.008 7.2.932 14.393.935 21.61.871L40 21.977c-7.581.067-15.139.047-22.702-.93-5.779-.745-11.504-.949-17.298-.949V0Z", fill: leftIconColor !== null && leftIconColor !== void 0 ? leftIconColor : '#B5C9FF' }) })), _jsx("defs", { children: _jsx("clipPath", Object.assign({ id: "a" }, { children: _jsx("path", { fill: "#fff", d: "M0 0h40v22H0z" }) })) })] })) }))), _jsx(Box, Object.assign({ zIndex: 2, pos: "relative", display: "inline-block", borderRadius: "full", w: rem(32), textAlign: "center", border: `${rem(1)} solid ${enableVisualEffects
|
|
33
|
+
? itemColor
|
|
34
|
+
: selectedItemBackgroundColor}`, mr: "1.5", fontSize: 20, bg: enableVisualEffects
|
|
35
|
+
? 'transparent'
|
|
36
|
+
: selectedItemBackgroundColor, color: enableVisualEffects ? undefined : 'white' }, { children: Number(data === null || data === void 0 ? void 0 : data.index) + 1 }))] })))] })), _jsxs(Flex, Object.assign({ flexDirection: "column" }, { children: [_jsx(Text, Object.assign({ as: "span", fontSize: itemFontSize, wordBreak: "break-all" }, { children: data === null || data === void 0 ? void 0 : data.label })), (data === null || data === void 0 ? void 0 : data.description) && (_jsx(Text, Object.assign({ as: "span", fontSize: rem(14) }, { children: data === null || data === void 0 ? void 0 : data.description })))] }))] })), withRightIcon && (_jsx(ArrowIcon, { fill: rightIconColor, pr: rem(10), float: "right", width: rem(30), height: rem(30) }))] })), isClickable && isHovered && (_jsx(motion.div, { initial: { width: '0', transform: "rotate('32deg')" }, animate: {
|
|
37
|
+
width: '100%',
|
|
38
|
+
transform: enableVisualEffects
|
|
39
|
+
? 'rotate(-0.4deg)'
|
|
40
|
+
: undefined,
|
|
41
|
+
}, style: {
|
|
42
|
+
width: '100%',
|
|
43
|
+
transform: enableVisualEffects
|
|
44
|
+
? 'rotate(-0.4deg)'
|
|
45
|
+
: undefined,
|
|
46
|
+
zIndex: '-1',
|
|
47
|
+
height: '100%',
|
|
48
|
+
background: selectedItemColor,
|
|
49
|
+
left: '0',
|
|
50
|
+
top: enableVisualEffects ? '-2px' : 0,
|
|
51
|
+
position: 'absolute',
|
|
52
|
+
}, transition: { duration: enableVisualEffects ? 0.5 : 0 } }))] }), data === null || data === void 0 ? void 0 : data.value));
|
|
53
|
+
};
|
|
54
|
+
export const List = (props) => {
|
|
55
|
+
return (_jsxs(Flex, Object.assign({ flexDirection: "column" }, { children: [props.title && (_jsx(Flex, Object.assign({ as: "span", mb: rem(18), fontSize: rem(14), fontWeight: "500" }, { children: props.title }))), props.type === 'ordered' && (_jsx(ChakraList, { children: props.list.map(({ value, label, description }, index) => (_jsx(CustomListItem, Object.assign({ data: { value, label, description, index } }, props), index))) }))] })));
|
|
55
56
|
};
|
|
56
57
|
//# sourceMappingURL=List.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../../src/alicia/common/List/List.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,QAAQ,EACR,IAAI,IAAI,UAAU,EAClB,GAAG,EACH,IAAI,EACJ,IAAI,GACL,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../../src/alicia/common/List/List.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ComponentStory, ComponentMeta } from "@storybook/react";
|
|
3
|
-
declare const _default: ComponentMeta<(
|
|
3
|
+
declare const _default: ComponentMeta<(props: import("./List").ListProps) => JSX.Element>;
|
|
4
4
|
export default _default;
|
|
5
|
-
export declare const Ordered: ComponentStory<(
|
|
6
|
-
export declare const Unordered: ComponentStory<(
|
|
5
|
+
export declare const Ordered: ComponentStory<(props: import("./List").ListProps) => JSX.Element>;
|
|
6
|
+
export declare const Unordered: ComponentStory<(props: import("./List").ListProps) => JSX.Element>;
|