@popsure/dirty-swan 0.66.4 → 0.66.6
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/index.js +21 -17
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/lib/components/icon/icons/BrokenGlass.d.ts +4 -0
- package/dist/cjs/lib/components/icon/icons/index.d.ts +1 -0
- package/dist/esm/components/cards/card/index.stories.js +1 -1
- package/dist/esm/components/cards/infoCard/index.js +14 -15
- package/dist/esm/components/cards/infoCard/index.js.map +1 -1
- package/dist/esm/components/cards/infoCard/index.stories.js +1 -1
- package/dist/esm/components/cards/infoCard/index.stories.js.map +1 -1
- package/dist/esm/components/icon/icons/BrokenGlass.js +14 -0
- package/dist/esm/components/icon/icons/BrokenGlass.js.map +1 -0
- package/dist/esm/components/icon/icons.stories.js +2 -1
- package/dist/esm/components/icon/icons.stories.js.map +1 -1
- package/dist/esm/components/icon/index.stories.js +2 -1
- package/dist/esm/components/icon/index.stories.js.map +1 -1
- package/dist/esm/components/input/checkbox/index.stories.js +1 -1
- package/dist/esm/components/input/radio/index.stories.js +1 -1
- package/dist/esm/{index-sVpmwnLl.js → index-BWJpOVlt.js} +3 -1
- package/dist/esm/{index-sVpmwnLl.js.map → index-BWJpOVlt.js.map} +1 -1
- package/dist/esm/{index-C4hs4X-e.js → index-C5N_dS2f.js} +3 -3
- package/dist/esm/index-C5N_dS2f.js.map +1 -0
- package/dist/esm/index.js +2 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/lib/components/icon/icons/BrokenGlass.d.ts +4 -0
- package/dist/esm/lib/components/icon/icons/index.d.ts +1 -0
- package/dist/esm/util/images/index.stories.js +1 -1
- package/package.json +1 -1
- package/src/lib/components/cards/infoCard/index.stories.tsx +4 -5
- package/src/lib/components/cards/infoCard/index.tsx +12 -10
- package/src/lib/components/cards/infoCard/style.module.scss +34 -5
- package/src/lib/components/icon/assets/broken-glass.svg +4 -0
- package/src/lib/components/icon/icons/BrokenGlass.tsx +15 -0
- package/src/lib/components/icon/icons/index.ts +1 -0
- package/src/lib/util/images/index.ts +2 -2
- package/dist/esm/index-C4hs4X-e.js.map +0 -1
|
@@ -63,6 +63,7 @@ export { default as BoxesAdd2Icon } from './BoxesAdd2';
|
|
|
63
63
|
export { default as BoxesMultipleFilledIcon } from './BoxesMultipleFilled';
|
|
64
64
|
export { default as BoxesMultipleIcon } from './BoxesMultiple';
|
|
65
65
|
export { default as BriefcaseIcon } from './Briefcase';
|
|
66
|
+
export { default as BrokenGlassIcon } from './BrokenGlass';
|
|
66
67
|
export { default as CalculatorIcon } from './Calculator';
|
|
67
68
|
export { default as CalendarIcon } from './Calendar';
|
|
68
69
|
export { default as CameraOffIcon } from './CameraOff';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { Card } from './index.js';
|
|
3
|
-
import { a as illustrations } from '../../../index-
|
|
3
|
+
import { a as illustrations } from '../../../index-C5N_dS2f.js';
|
|
4
4
|
import { Button } from '../../button/index.js';
|
|
5
5
|
import { Badge } from '../../badge/index.js';
|
|
6
6
|
import 'react';
|
|
@@ -9,25 +9,24 @@ import '../../icon/IconWrapper/IconWrapper.js';
|
|
|
9
9
|
import '../../../_commonjsHelpers-BFTU3MAI.js';
|
|
10
10
|
import '../../icon/icons/ChevronRight.js';
|
|
11
11
|
|
|
12
|
-
var css_248z = ".style-module_bs-xs__2s8AD {\n box-shadow: 0 2px 12px rgba(38, 38, 46, 0.03);\n}\n\n.style-module_bs-sm__2KgTp {\n box-shadow: 0 2px 20px 0 rgba(38, 38, 46, 0.04);\n}\n\n.style-module_bs-md__3yrN1 {\n box-shadow: 0 2px 28px rgba(38, 38, 46, 0.08);\n}\n\n.style-module_bs-lg__Ydmy8 {\n box-shadow: 0 2px 32px rgba(38, 38, 46, 0.1);\n}\n\n.style-module_bs-xl__9OYoN {\n box-shadow: 0 2px 50px rgba(38, 38, 46, 0.18);\n}\n\n.style-module_bannerWrapper__1m3mn {\n padding-top: 124px;\n}\n\n.style-module_buttonWrapper__-dmFc:focus .style-module_wrapper__rVPyi {\n border-color: #696971;\n box-shadow: 0
|
|
13
|
-
var styles = {"bannerWrapper":"style-module_bannerWrapper__1m3mn","buttonWrapper":"style-module_buttonWrapper__-dmFc","
|
|
12
|
+
var css_248z = ".style-module_bs-xs__2s8AD {\n box-shadow: 0 2px 12px rgba(38, 38, 46, 0.03);\n}\n\n.style-module_bs-sm__2KgTp {\n box-shadow: 0 2px 20px 0 rgba(38, 38, 46, 0.04);\n}\n\n.style-module_bs-md__3yrN1 {\n box-shadow: 0 2px 28px rgba(38, 38, 46, 0.08);\n}\n\n.style-module_bs-lg__Ydmy8 {\n box-shadow: 0 2px 32px rgba(38, 38, 46, 0.1);\n}\n\n.style-module_bs-xl__9OYoN {\n box-shadow: 0 2px 50px rgba(38, 38, 46, 0.18);\n}\n\n.style-module_bannerWrapper__1m3mn {\n padding-top: 124px;\n}\n\n.style-module_wrapper__rVPyi {\n border-radius: 12px;\n border: 1px solid #e7e7ed;\n}\n\n.style-module_buttonWrapper__-dmFc {\n border-radius: 12px;\n}\n\n.style-module_buttonWrapper__-dmFc:focus .style-module_wrapper__rVPyi {\n border-color: #696971;\n box-shadow: 0 0 0 1px #696971;\n}\n\n.style-module_buttonWrapper__-dmFc:focus-visible .style-module_wrapper__rVPyi {\n overflow: hidden;\n border-color: #26262e;\n box-shadow: 0 0 0 1px #26262e;\n}\n\n.style-module_topIconWrapper__VYKR7 {\n position: absolute;\n width: 80px;\n height: 80px;\n border-radius: 12px;\n left: 50%;\n transform: translateX(-50%) translateY(-80px);\n}\n.style-module_topIconWrapper--muted__2a4Lq {\n opacity: 0.25;\n}\n\n.style-module_topIconImage__3NQMd {\n width: 80px;\n height: 80px;\n border-radius: 12px;\n background-color: #FDF2E2;\n overflow: hidden;\n}\n.style-module_topIconImage__3NQMd img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 12px;\n}\n\n.style-module_topIconBanner__31-Hc {\n position: absolute;\n top: -123px;\n left: -15px;\n right: -15px;\n height: 124px;\n width: calc(100% + 30px);\n overflow: hidden;\n}\n.style-module_topIconBanner__31-Hc img {\n position: absolute;\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n min-width: 100%;\n min-height: 100%;\n}\n\n.style-module_title__31OJa {\n margin-top: 20px;\n}\n\n.style-module_contentWrapper__B1Dn1 {\n gap: 0 !important;\n}\n\n.style-module_floatingLabel__1iIBj {\n position: relative;\n}\n\n.style-module_disabled__1u28- {\n opacity: 0.25;\n cursor: not-allowed;\n}";
|
|
13
|
+
var styles = {"bannerWrapper":"style-module_bannerWrapper__1m3mn","wrapper":"style-module_wrapper__rVPyi","buttonWrapper":"style-module_buttonWrapper__-dmFc","topIconWrapper":"style-module_topIconWrapper__VYKR7","topIconImage":"style-module_topIconImage__3NQMd","topIconBanner":"style-module_topIconBanner__31-Hc","title":"style-module_title__31OJa","contentWrapper":"style-module_contentWrapper__B1Dn1","floatingLabel":"style-module_floatingLabel__1iIBj","disabled":"style-module_disabled__1u28-"};
|
|
14
14
|
styleInject(css_248z);
|
|
15
15
|
|
|
16
16
|
var InfoCard = function (_a) {
|
|
17
|
-
var _b, _c, _d;
|
|
18
|
-
_a.className; var
|
|
17
|
+
var _b, _c, _d, _e;
|
|
18
|
+
_a.className; var _f = _a.showIcon, showIcon = _f === void 0 ? true : _f, title = _a.title, children = _a.children, topIcon = _a.topIcon, topIconType = _a.topIconType, _g = _a.disabled, disabled = _g === void 0 ? false : _g, onClick = _a.onClick, cardProps = __rest(_a, ["className", "showIcon", "title", "children", "topIcon", "topIconType", "disabled", "onClick"]);
|
|
19
19
|
var isIconType = topIconType === 'icon' || topIconType === 'iconWithBackground';
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
_d)), title: classNames({ 'mt16': topIcon && topIconType === 'banner' }, 'd-flex ai-center jc-center ta-center my8'), description: 'ta-center', contentWrapper: styles.contentWrapper }, (cardProps === null || cardProps === void 0 ? void 0 : cardProps.classNames) || {}), variant: 'default', onClick: disabled ? undefined : onClick, density: 'xsmall' })));
|
|
20
|
+
var isFloatingType = isIconType;
|
|
21
|
+
return (jsx(Card, __assign({}, cardProps, { label: topIcon && (jsx(Fragment, { children: isIconType ? (jsx("div", { className: classNames('d-flex ai-center jc-center p16 bg-orange-200', styles.topIconWrapper), children: topIcon })) : (jsx("div", { className: classNames('d-flex ai-center jc-center', (_b = {}, _b[styles.topIconBanner] = topIconType === 'banner', _b), (_c = {}, _c[styles.topIconImage] = topIconType === 'image', _c)), children: topIcon })) })), title: title && (jsxs(Fragment, { children: [title, showIcon && jsx(ArrowRight, { size: 20 })] })), titleVariant: 'medium', description: children, descriptionVariant: 'small', dropShadow: false, actionIcon: null, showActionIcon: false, classNames: __assign({ buttonWrapper: styles.buttonWrapper, wrapper: classNames((_d = {},
|
|
22
|
+
_d[styles.wrapper] = true,
|
|
23
|
+
_d[styles.disabled] = disabled,
|
|
24
|
+
_d['pt40'] = topIcon && isFloatingType,
|
|
25
|
+
_d['mt40'] = topIcon && isFloatingType,
|
|
26
|
+
_d[styles.bannerWrapper] = topIcon && topIconType === 'banner',
|
|
27
|
+
_d)), label: classNames('d-flex jc-center', (_e = {},
|
|
28
|
+
_e[styles.floatingLabel] = topIcon && (isFloatingType || topIconType === 'banner'),
|
|
29
|
+
_e)), title: classNames({ 'mt16': topIcon && topIconType === 'banner' }, 'd-flex ai-center jc-center ta-center mb8', styles.title), description: 'ta-center', contentWrapper: styles.contentWrapper }, (cardProps === null || cardProps === void 0 ? void 0 : cardProps.classNames) || {}), variant: 'default', onClick: disabled ? undefined : onClick, density: 'xsmall' })));
|
|
31
30
|
};
|
|
32
31
|
|
|
33
32
|
export { InfoCard };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/cards/infoCard/index.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport ArrowRight from '../../icon/icons/ArrowRight';\nimport { Card, CardProps } from '../card';\n\nimport styles from './style.module.scss';\nimport classNames from 'classnames';\n\nexport interface InfoCardProps extends CardProps {\n topIcon: ReactNode;\n showIcon?: boolean;\n topIconType?: 'image' | 'icon' | 'iconWithBackground' | 'banner';\n disabled?: boolean;\n};\n\nexport const InfoCard = ({\n className,\n showIcon = true,\n title,\n children,\n topIcon,\n topIconType,\n disabled = false,\n onClick,\n ...cardProps\n}: InfoCardProps) => {\n const isIconType = topIconType === 'icon' || topIconType === 'iconWithBackground';\n\n return (\n <Card\n {...cardProps}\n label={topIcon && (\n <>\n {isIconType ? (\n <div\n className={classNames(\n 'd-flex ai-center jc-center
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/cards/infoCard/index.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport ArrowRight from '../../icon/icons/ArrowRight';\nimport { Card, CardProps } from '../card';\n\nimport styles from './style.module.scss';\nimport classNames from 'classnames';\n\nexport interface InfoCardProps extends CardProps {\n topIcon: ReactNode;\n showIcon?: boolean;\n topIconType?: 'image' | 'icon' | 'iconWithBackground' | 'banner';\n disabled?: boolean;\n};\n\nexport const InfoCard = ({\n className,\n showIcon = true,\n title,\n children,\n topIcon,\n topIconType,\n disabled = false,\n onClick,\n ...cardProps\n}: InfoCardProps) => {\n const isIconType = topIconType === 'icon' || topIconType === 'iconWithBackground';\n const isFloatingType = isIconType;\n\n return (\n <Card\n {...cardProps}\n label={topIcon && (\n <>\n {isIconType ? (\n <div\n className={classNames(\n 'd-flex ai-center jc-center p16 bg-orange-200',\n styles.topIconWrapper,\n )}\n >\n {topIcon}\n </div>\n ) : (\n <div className={classNames(\n 'd-flex ai-center jc-center',\n { [styles.topIconBanner]: topIconType === 'banner' },\n { [styles.topIconImage]: topIconType === 'image' },\n )}>\n {topIcon}\n </div>\n )}\n </>\n )}\n title={title && (\n <>\n {title}\n\n {showIcon && <ArrowRight size={20} />}\n </>\n )}\n titleVariant='medium'\n description={children}\n descriptionVariant='small'\n dropShadow={false}\n actionIcon={null}\n showActionIcon={false}\n classNames={{\n buttonWrapper: styles.buttonWrapper,\n wrapper: classNames({\n [styles.wrapper]: true,\n [styles.disabled]: disabled,\n 'pt40': topIcon && isFloatingType,\n 'mt40': topIcon && isFloatingType,\n [styles.bannerWrapper]: topIcon && topIconType === 'banner',\n }),\n label: classNames('d-flex jc-center', {\n [styles.floatingLabel]: topIcon && (isFloatingType || topIconType === 'banner'),\n }),\n title: classNames(\n {'mt16': topIcon && topIconType === 'banner'},\n 'd-flex ai-center jc-center ta-center mb8',\n styles.title,\n ),\n description: 'ta-center',\n contentWrapper: styles.contentWrapper,\n ...cardProps?.classNames || {}\n }}\n variant='default'\n onClick={disabled ? undefined : onClick}\n density='xsmall'\n />\n );\n}\n"],"names":["_jsx","_Fragment","_jsxs"],"mappings":"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"}
|
|
@@ -69,7 +69,7 @@ var IconTypes = function () {
|
|
|
69
69
|
return (jsx("div", { className: "bg-neutral-50 p32", children: jsxs("div", { className: "d-flex gap32 flex-wrap", children: [jsxs("div", { className: "wmx4", children: [jsx("div", { className: "mb16 fw-bold", children: "Book Icon" }), jsx(InfoCard, { title: "Knowledge Base", topIcon: jsx(BookOpenIcon, { size: 40 }), topIconType: "iconWithBackground", onClick: function () { return console.log('Book clicked!'); }, children: "Find answers in our comprehensive library of articles." })] }), jsxs("div", { className: "wmx4", children: [jsx("div", { className: "mb16 fw-bold", children: "Heart Icon" }), jsx(InfoCard, { title: "Favorites", topIcon: jsx(HeartIcon, { size: 40 }), topIconType: "iconWithBackground", onClick: function () { return console.log('Heart clicked!'); }, children: "Save and organize your favorite items." })] }), jsxs("div", { className: "wmx4", children: [jsx("div", { className: "mb16 fw-bold", children: "Star Icon" }), jsx(InfoCard, { title: "Premium Features", topIcon: jsx(StarIcon, { size: 40 }), topIconType: "iconWithBackground", onClick: function () { return console.log('Star clicked!'); }, children: "Unlock advanced features with premium." })] })] }) }));
|
|
70
70
|
};
|
|
71
71
|
var TopIconTypes = function () {
|
|
72
|
-
return (jsxs("div", { className: "bg-neutral-50 p32 m-auto wmx12", children: [jsxs("div", { className: "d-flex gap32 flex-wrap", children: [jsxs("div", { className: "w50", children: [jsx("div", { className: "mb16 fw-bold", children: "Icon Type" }), jsx(InfoCard, { title: "Help Center", topIcon: jsx("img", { src: "https://placehold.co/80x80", alt: "Banner" }), topIconType: "icon", onClick: function () { return console.log('Icon type clicked!'); }, children: "Icon is displayed in a
|
|
72
|
+
return (jsxs("div", { className: "bg-neutral-50 p32 m-auto wmx12", children: [jsxs("div", { className: "d-flex gap32 flex-wrap", children: [jsxs("div", { className: "w50", children: [jsx("div", { className: "mb16 fw-bold", children: "Icon Type" }), jsx(InfoCard, { title: "Help Center", topIcon: jsx("img", { src: "https://placehold.co/80x80/transparent/F00", alt: "Banner" }), topIconType: "icon", onClick: function () { return console.log('Icon type clicked!'); }, children: "Icon is displayed in a rounded square with orange background." })] }), jsxs("div", { className: "w50", children: [jsx("div", { className: "mb16 fw-bold", children: "Icon with background Type" }), jsx(InfoCard, { title: "Help Center", topIcon: jsx(BookOpenIcon, { size: 40 }), topIconType: "iconWithBackground", onClick: function () { return console.log('Icon type clicked!'); }, children: "Icon is displayed in a rounded square with the orange background." })] })] }), jsxs("div", { className: "d-flex gap32 flex-wrap mt40", children: [jsxs("div", { className: "w50", children: [jsx("div", { className: "mb16 fw-bold", children: "Image Type" }), jsx(InfoCard, { title: "Image Gallery", topIcon: jsx("img", { src: "https://placehold.co/80x80/transparent/F00", alt: "Image" }), topIconType: "image", onClick: function () { return console.log('Image type clicked!'); }, children: "Image is displayed as-is without background." })] }), jsxs("div", { className: "w50", children: [jsx("div", { className: "mb16 fw-bold", children: "Banner Type" }), jsx(InfoCard, { title: "Featured Content", topIcon: jsx("img", { src: "https://placehold.co/600x200", alt: "Banner" }), topIconType: "banner", onClick: function () { return console.log('Banner type clicked!'); }, children: "Banner spans the full width of the card." })] })] })] }));
|
|
73
73
|
};
|
|
74
74
|
var States = function () {
|
|
75
75
|
return (jsx("div", { className: "bg-neutral-50 p32", children: jsxs("div", { className: "d-flex gap32 flex-wrap", children: [jsxs("div", { className: "wmx4", children: [jsx("div", { className: "mb16 fw-bold", children: "Default State" }), jsx(InfoCard, { title: "Default Card", topIcon: jsx(BookOpenIcon, { size: 40 }), topIconType: "icon", onClick: function () { return console.log('Default clicked!'); }, children: "This is a default interactive card." })] }), jsxs("div", { className: "wmx4", children: [jsx("div", { className: "mb16 fw-bold", children: "Disabled State" }), jsx(InfoCard, { title: "Disabled Card", topIcon: jsx(BookOpenIcon, { size: 40 }), topIconType: "icon", disabled: true, onClick: function () { return console.log('This should not fire'); }, children: "This card is disabled and non-interactive." })] }), jsxs("div", { className: "wmx4", children: [jsx("div", { className: "mb16 fw-bold", children: "Without Arrow Icon" }), jsx(InfoCard, { title: "No Arrow", topIcon: jsx(BookOpenIcon, { size: 40 }), topIconType: "icon", showIcon: false, onClick: function () { return console.log('No arrow clicked!'); }, children: "This card has no arrow icon in the title." })] })] }) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/cards/infoCard/index.stories.tsx"],"sourcesContent":["import { InfoCard, InfoCardProps } from '.';\nimport { images } from '../../../util/images';\nimport { BookOpenIcon, HeartIcon, StarIcon, ShieldIcon } from '../../icon';\n\nconst story = {\n title: 'JSX/Cards/InfoCard',\n component: InfoCard,\n argTypes: {\n title: {\n description: 'Title text that needs to be displayed',\n control: 'text',\n },\n children: {\n description: 'Content that is displayed inside the card',\n control: 'text',\n },\n topIcon: {\n description: 'Icon displayed on the top of the card',\n },\n topIconType: {\n description: 'Type of top icon display',\n control: 'select',\n options: ['icon', 'image', 'banner'],\n },\n showIcon: {\n description: 'Whether to show the arrow icon in the title',\n control: 'boolean',\n },\n disabled: {\n description: 'Whether the card is disabled',\n control: 'boolean',\n },\n onClick: {\n description: 'Click handler for the card',\n },\n className: {\n description: 'Class name for most top parent element',\n control: 'text',\n },\n },\n args: {\n title: 'Knowledge Base',\n children:\n \"Find the answers you're looking for in our comprehensive, fact-checked library of articles and resources.\",\n topIcon: <BookOpenIcon size={40} />,\n topIconType: 'iconWithBackground',\n showIcon: true,\n disabled: false,\n className: '',\n },\n};\n\nexport const InfoCardStory = {\n render: (args: InfoCardProps) => {\n return (\n <div className=\"bg-neutral-50 p32\">\n <div className=\"wmx4\">\n <InfoCard {...args} onClick={() => console.log('InfoCard clicked!')}>\n {args.children}\n </InfoCard>\n </div>\n </div>\n );\n },\n\n name: 'InfoCard',\n};\n\nexport const IconTypes = () => {\n return (\n <div className=\"bg-neutral-50 p32\">\n <div className=\"d-flex gap32 flex-wrap\">\n <div className=\"wmx4\">\n <div className=\"mb16 fw-bold\">Book Icon</div>\n <InfoCard\n title=\"Knowledge Base\"\n topIcon={<BookOpenIcon size={40} />}\n topIconType=\"iconWithBackground\"\n onClick={() => console.log('Book clicked!')}\n >\n Find answers in our comprehensive library of articles.\n </InfoCard>\n </div>\n <div className=\"wmx4\">\n <div className=\"mb16 fw-bold\">Heart Icon</div>\n <InfoCard\n title=\"Favorites\"\n topIcon={<HeartIcon size={40} />}\n topIconType=\"iconWithBackground\"\n onClick={() => console.log('Heart clicked!')}\n >\n Save and organize your favorite items.\n </InfoCard>\n </div>\n <div className=\"wmx4\">\n <div className=\"mb16 fw-bold\">Star Icon</div>\n <InfoCard\n title=\"Premium Features\"\n topIcon={<StarIcon size={40} />}\n topIconType=\"iconWithBackground\"\n onClick={() => console.log('Star clicked!')}\n >\n Unlock advanced features with premium.\n </InfoCard>\n </div>\n </div>\n </div>\n );\n};\n\nexport const TopIconTypes = () => {\n return (\n <div className=\"bg-neutral-50 p32 m-auto wmx12\">\n <div className=\"d-flex gap32 flex-wrap\">\n <div className=\"w50\">\n <div className=\"mb16 fw-bold\">Icon Type</div>\n <InfoCard\n title=\"Help Center\"\n topIcon={<img src=\"https://placehold.co/80x80\" alt=\"Banner\" />}\n topIconType=\"icon\"\n onClick={() => console.log('Icon type clicked!')}\n >\n Icon is displayed in a circular way without any background.\n </InfoCard>\n </div>\n <div className=\"w50\">\n <div className=\"mb16 fw-bold\">Icon with background Type</div>\n <InfoCard\n title=\"Help Center\"\n topIcon={<BookOpenIcon size={40} />}\n topIconType=\"iconWithBackground\"\n onClick={() => console.log('Icon type clicked!')}\n >\n Icon is displayed in a circular background with the orange color.\n </InfoCard>\n </div>\n </div>\n <div className=\"d-flex gap32 flex-wrap mt40\">\n <div className=\"w50\">\n <div className=\"mb16 fw-bold\">Image Type</div>\n <InfoCard\n title=\"Image Gallery\"\n topIcon={\n <img\n src=\"https://placehold.co/80x80\"\n alt=\"Image\"\n style={{ borderRadius: '8px' }}\n />\n }\n topIconType=\"image\"\n onClick={() => console.log('Image type clicked!')}\n >\n Image is displayed as-is without background.\n </InfoCard>\n </div>\n <div className=\"w50\">\n <div className=\"mb16 fw-bold\">Banner Type</div>\n <InfoCard\n title=\"Featured Content\"\n topIcon={<img src=\"https://placehold.co/600x200\" alt=\"Banner\" />}\n topIconType=\"banner\"\n onClick={() => console.log('Banner type clicked!')}\n >\n Banner spans the full width of the card.\n </InfoCard>\n </div>\n </div>\n </div>\n );\n};\n\nexport const States = () => {\n return (\n <div className=\"bg-neutral-50 p32\">\n <div className=\"d-flex gap32 flex-wrap\">\n <div className=\"wmx4\">\n <div className=\"mb16 fw-bold\">Default State</div>\n <InfoCard\n title=\"Default Card\"\n topIcon={<BookOpenIcon size={40} />}\n topIconType=\"icon\"\n onClick={() => console.log('Default clicked!')}\n >\n This is a default interactive card.\n </InfoCard>\n </div>\n <div className=\"wmx4\">\n <div className=\"mb16 fw-bold\">Disabled State</div>\n <InfoCard\n title=\"Disabled Card\"\n topIcon={<BookOpenIcon size={40} />}\n topIconType=\"icon\"\n disabled={true}\n onClick={() => console.log('This should not fire')}\n >\n This card is disabled and non-interactive.\n </InfoCard>\n </div>\n <div className=\"wmx4\">\n <div className=\"mb16 fw-bold\">Without Arrow Icon</div>\n <InfoCard\n title=\"No Arrow\"\n topIcon={<BookOpenIcon size={40} />}\n topIconType=\"icon\"\n showIcon={false}\n onClick={() => console.log('No arrow clicked!')}\n >\n This card has no arrow icon in the title.\n </InfoCard>\n </div>\n </div>\n </div>\n );\n};\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/cards/infoCard/index.stories.tsx"],"sourcesContent":["import { InfoCard, InfoCardProps } from '.';\nimport { images } from '../../../util/images';\nimport { BookOpenIcon, HeartIcon, StarIcon, ShieldIcon } from '../../icon';\n\nconst story = {\n title: 'JSX/Cards/InfoCard',\n component: InfoCard,\n argTypes: {\n title: {\n description: 'Title text that needs to be displayed',\n control: 'text',\n },\n children: {\n description: 'Content that is displayed inside the card',\n control: 'text',\n },\n topIcon: {\n description: 'Icon displayed on the top of the card',\n },\n topIconType: {\n description: 'Type of top icon display',\n control: 'select',\n options: ['icon', 'image', 'banner'],\n },\n showIcon: {\n description: 'Whether to show the arrow icon in the title',\n control: 'boolean',\n },\n disabled: {\n description: 'Whether the card is disabled',\n control: 'boolean',\n },\n onClick: {\n description: 'Click handler for the card',\n },\n className: {\n description: 'Class name for most top parent element',\n control: 'text',\n },\n },\n args: {\n title: 'Knowledge Base',\n children:\n \"Find the answers you're looking for in our comprehensive, fact-checked library of articles and resources.\",\n topIcon: <BookOpenIcon size={40} />,\n topIconType: 'iconWithBackground',\n showIcon: true,\n disabled: false,\n className: '',\n },\n};\n\nexport const InfoCardStory = {\n render: (args: InfoCardProps) => {\n return (\n <div className=\"bg-neutral-50 p32\">\n <div className=\"wmx4\">\n <InfoCard {...args} onClick={() => console.log('InfoCard clicked!')}>\n {args.children}\n </InfoCard>\n </div>\n </div>\n );\n },\n\n name: 'InfoCard',\n};\n\nexport const IconTypes = () => {\n return (\n <div className=\"bg-neutral-50 p32\">\n <div className=\"d-flex gap32 flex-wrap\">\n <div className=\"wmx4\">\n <div className=\"mb16 fw-bold\">Book Icon</div>\n <InfoCard\n title=\"Knowledge Base\"\n topIcon={<BookOpenIcon size={40} />}\n topIconType=\"iconWithBackground\"\n onClick={() => console.log('Book clicked!')}\n >\n Find answers in our comprehensive library of articles.\n </InfoCard>\n </div>\n <div className=\"wmx4\">\n <div className=\"mb16 fw-bold\">Heart Icon</div>\n <InfoCard\n title=\"Favorites\"\n topIcon={<HeartIcon size={40} />}\n topIconType=\"iconWithBackground\"\n onClick={() => console.log('Heart clicked!')}\n >\n Save and organize your favorite items.\n </InfoCard>\n </div>\n <div className=\"wmx4\">\n <div className=\"mb16 fw-bold\">Star Icon</div>\n <InfoCard\n title=\"Premium Features\"\n topIcon={<StarIcon size={40} />}\n topIconType=\"iconWithBackground\"\n onClick={() => console.log('Star clicked!')}\n >\n Unlock advanced features with premium.\n </InfoCard>\n </div>\n </div>\n </div>\n );\n};\n\nexport const TopIconTypes = () => {\n return (\n <div className=\"bg-neutral-50 p32 m-auto wmx12\">\n <div className=\"d-flex gap32 flex-wrap\">\n <div className=\"w50\">\n <div className=\"mb16 fw-bold\">Icon Type</div>\n <InfoCard\n title=\"Help Center\"\n topIcon={<img src=\"https://placehold.co/80x80/transparent/F00\" alt=\"Banner\" />}\n topIconType=\"icon\"\n onClick={() => console.log('Icon type clicked!')}\n >\n Icon is displayed in a rounded square with orange background.\n </InfoCard>\n </div>\n <div className=\"w50\">\n <div className=\"mb16 fw-bold\">Icon with background Type</div>\n <InfoCard\n title=\"Help Center\"\n topIcon={<BookOpenIcon size={40} />}\n topIconType=\"iconWithBackground\"\n onClick={() => console.log('Icon type clicked!')}\n >\n Icon is displayed in a rounded square with the orange background.\n </InfoCard>\n </div>\n </div>\n <div className=\"d-flex gap32 flex-wrap mt40\">\n <div className=\"w50\">\n <div className=\"mb16 fw-bold\">Image Type</div>\n <InfoCard\n title=\"Image Gallery\"\n topIcon={\n <img\n src=\"https://placehold.co/80x80/transparent/F00\"\n alt=\"Image\"\n />\n }\n topIconType=\"image\"\n onClick={() => console.log('Image type clicked!')}\n >\n Image is displayed as-is without background.\n </InfoCard>\n </div>\n <div className=\"w50\">\n <div className=\"mb16 fw-bold\">Banner Type</div>\n <InfoCard\n title=\"Featured Content\"\n topIcon={<img src=\"https://placehold.co/600x200\" alt=\"Banner\" />}\n topIconType=\"banner\"\n onClick={() => console.log('Banner type clicked!')}\n >\n Banner spans the full width of the card.\n </InfoCard>\n </div>\n </div>\n </div>\n );\n};\n\nexport const States = () => {\n return (\n <div className=\"bg-neutral-50 p32\">\n <div className=\"d-flex gap32 flex-wrap\">\n <div className=\"wmx4\">\n <div className=\"mb16 fw-bold\">Default State</div>\n <InfoCard\n title=\"Default Card\"\n topIcon={<BookOpenIcon size={40} />}\n topIconType=\"icon\"\n onClick={() => console.log('Default clicked!')}\n >\n This is a default interactive card.\n </InfoCard>\n </div>\n <div className=\"wmx4\">\n <div className=\"mb16 fw-bold\">Disabled State</div>\n <InfoCard\n title=\"Disabled Card\"\n topIcon={<BookOpenIcon size={40} />}\n topIconType=\"icon\"\n disabled={true}\n onClick={() => console.log('This should not fire')}\n >\n This card is disabled and non-interactive.\n </InfoCard>\n </div>\n <div className=\"wmx4\">\n <div className=\"mb16 fw-bold\">Without Arrow Icon</div>\n <InfoCard\n title=\"No Arrow\"\n topIcon={<BookOpenIcon size={40} />}\n topIconType=\"icon\"\n showIcon={false}\n onClick={() => console.log('No arrow clicked!')}\n >\n This card has no arrow icon in the title.\n </InfoCard>\n </div>\n </div>\n </div>\n );\n};\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { createElement } from 'react';
|
|
3
|
+
import { IconWrapper } from '../IconWrapper/IconWrapper.js';
|
|
4
|
+
import '../../../tslib.es6-CVlKGIvp.js';
|
|
5
|
+
import '../../../index-DLQEsiym.js';
|
|
6
|
+
import '../../../_commonjsHelpers-BFTU3MAI.js';
|
|
7
|
+
import '../../../style-inject.es-tgCJW-Cu.js';
|
|
8
|
+
|
|
9
|
+
var BrokenGlass = (function (props) {
|
|
10
|
+
return createElement(IconWrapper, props, jsx("path", { stroke: "#26262E", strokeLinecap: "round", strokeWidth: 2, d: "m10 6-.5 5L5 13m5-7 3 3 2-1m-5-2L8 2m7 6 3 3m-3-3 3-5m0 8-3 2 4 3m-1-5h3m-2 5h-6l-4 4m10-4 3 2m-3-2 2-5M9 20v-5l-4-2m4 7-.842 2M5 13l-3 1m20-3h-1M7 9 4 7" }));
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
export { BrokenGlass as default };
|
|
14
|
+
//# sourceMappingURL=BrokenGlass.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BrokenGlass.js","sources":["../../../../../../src/lib/components/icon/icons/BrokenGlass.tsx"],"sourcesContent":["/* Generated file. Do not modify. */\nimport { createElement } from 'react';\nimport { IconWrapper } from '../IconWrapper';\nimport type { IconWrapperProps } from '../IconWrapper';\nexport default (props: IconWrapperProps) =>\n createElement(\n IconWrapper,\n props,\n <path\n stroke=\"#26262E\"\n strokeLinecap=\"round\"\n strokeWidth={2}\n d=\"m10 6-.5 5L5 13m5-7 3 3 2-1m-5-2L8 2m7 6 3 3m-3-3 3-5m0 8-3 2 4 3m-1-5h3m-2 5h-6l-4 4m10-4 3 2m-3-2 2-5M9 20v-5l-4-2m4 7-.842 2M5 13l-3 1m20-3h-1M7 9 4 7\"\n />\n );\n"],"names":["_jsx"],"mappings":";;;;;;;;AAIA,kBAAA,CAAe,UAAC,KAAuB,EAAA;IACrC,OAAA,aAAa,CACX,WAAW,EACX,KAAK,EACLA,GAAA,CAAA,MAAA,EAAA,EACE,MAAM,EAAC,SAAS,EAChB,aAAa,EAAC,OAAO,EACrB,WAAW,EAAE,CAAC,EACd,CAAC,EAAC,2JAA2J,EAAA,CAC7J,CACH;AATD,CASC;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useState } from 'react';
|
|
3
3
|
import { Input } from '../input/index.js';
|
|
4
|
-
import { i as icons } from '../../index-
|
|
4
|
+
import { i as icons } from '../../index-BWJpOVlt.js';
|
|
5
5
|
import { Button } from '../button/index.js';
|
|
6
6
|
import { c as classNames } from '../../index-DLQEsiym.js';
|
|
7
7
|
import { s as styleInject } from '../../style-inject.es-tgCJW-Cu.js';
|
|
@@ -74,6 +74,7 @@ import './icons/BoxesAdd2.js';
|
|
|
74
74
|
import './icons/BoxesMultipleFilled.js';
|
|
75
75
|
import './icons/BoxesMultiple.js';
|
|
76
76
|
import './icons/Briefcase.js';
|
|
77
|
+
import './icons/BrokenGlass.js';
|
|
77
78
|
import './icons/Calculator.js';
|
|
78
79
|
import './icons/Calendar.js';
|
|
79
80
|
import './icons/CameraOff.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icons.stories.js","sources":["../../../../../src/lib/components/icon/icons.stories.tsx"],"sourcesContent":["import { ChangeEvent, useState } from 'react';\nimport { Input } from '../input';\nimport * as icons from './icons';\nimport { Button } from '../button';\nimport classNames from 'classnames';\nimport styles from './style.module.scss';\n\nconst story = {\n title: 'JSX/Icon/IconsList',\n};\n\nconst iconsList = Object.entries(icons);\n\nexport const IconsList = () => {\n const [value, setValue] = useState('');\n const [options, setOptions] = useState(iconsList);\n\n const clearSearch = () => {\n setValue('');\n setOptions(iconsList);\n };\n\n const handleOnSearch = (event: ChangeEvent<HTMLInputElement>) => {\n const searchValue = event.target.value;\n setValue(event.target.value);\n\n if (searchValue === '') {\n setOptions(iconsList);\n return;\n }\n\n setOptions(\n iconsList.filter(([key]) =>\n key.toLowerCase().includes(searchValue.toLowerCase())\n )\n );\n };\n\n return (\n <div>\n <div className={classNames(styles.searchBar, 'bg-white')}>\n <div className=\"d-flex gap8 wmx12 m-auto\">\n <Input\n className=\"w70\"\n onChange={handleOnSearch}\n placeholder=\"Search icon\"\n value={value}\n />\n <Button className=\"w30\" disabled={!value} onClick={clearSearch}>\n Clear search\n </Button>\n </div>\n </div>\n\n <div className=\"d-flex f-wrap mt80\">\n {options.map(([iconKey, Icon]) => (\n <div key={iconKey} className=\"w20 p8\">\n <div className=\"br4 p24 pt16 pb16 bg-neutral-50 w100 d-flex fd-column ai-center\">\n <Icon size={32} />\n <span className=\"p-p--small\">{iconKey}</span>\n </div>\n </div>\n ))}\n </div>\n </div>\n );\n};\n\nexport default story;\n"],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"icons.stories.js","sources":["../../../../../src/lib/components/icon/icons.stories.tsx"],"sourcesContent":["import { ChangeEvent, useState } from 'react';\nimport { Input } from '../input';\nimport * as icons from './icons';\nimport { Button } from '../button';\nimport classNames from 'classnames';\nimport styles from './style.module.scss';\n\nconst story = {\n title: 'JSX/Icon/IconsList',\n};\n\nconst iconsList = Object.entries(icons);\n\nexport const IconsList = () => {\n const [value, setValue] = useState('');\n const [options, setOptions] = useState(iconsList);\n\n const clearSearch = () => {\n setValue('');\n setOptions(iconsList);\n };\n\n const handleOnSearch = (event: ChangeEvent<HTMLInputElement>) => {\n const searchValue = event.target.value;\n setValue(event.target.value);\n\n if (searchValue === '') {\n setOptions(iconsList);\n return;\n }\n\n setOptions(\n iconsList.filter(([key]) =>\n key.toLowerCase().includes(searchValue.toLowerCase())\n )\n );\n };\n\n return (\n <div>\n <div className={classNames(styles.searchBar, 'bg-white')}>\n <div className=\"d-flex gap8 wmx12 m-auto\">\n <Input\n className=\"w70\"\n onChange={handleOnSearch}\n placeholder=\"Search icon\"\n value={value}\n />\n <Button className=\"w30\" disabled={!value} onClick={clearSearch}>\n Clear search\n </Button>\n </div>\n </div>\n\n <div className=\"d-flex f-wrap mt80\">\n {options.map(([iconKey, Icon]) => (\n <div key={iconKey} className=\"w20 p8\">\n <div className=\"br4 p24 pt16 pb16 bg-neutral-50 w100 d-flex fd-column ai-center\">\n <Icon size={32} />\n <span className=\"p-p--small\">{iconKey}</span>\n </div>\n </div>\n ))}\n </div>\n </div>\n );\n};\n\nexport default story;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { IconWrapper } from './IconWrapper/IconWrapper.js';
|
|
3
|
-
import { i as icons } from '../../index-
|
|
3
|
+
import { i as icons } from '../../index-BWJpOVlt.js';
|
|
4
4
|
import '../../tslib.es6-CVlKGIvp.js';
|
|
5
5
|
import '../../index-DLQEsiym.js';
|
|
6
6
|
import '../../_commonjsHelpers-BFTU3MAI.js';
|
|
@@ -71,6 +71,7 @@ import './icons/BoxesAdd2.js';
|
|
|
71
71
|
import './icons/BoxesMultipleFilled.js';
|
|
72
72
|
import './icons/BoxesMultiple.js';
|
|
73
73
|
import './icons/Briefcase.js';
|
|
74
|
+
import './icons/BrokenGlass.js';
|
|
74
75
|
import './icons/Calculator.js';
|
|
75
76
|
import './icons/Calendar.js';
|
|
76
77
|
import './icons/CameraOff.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/icon/index.stories.tsx"],"sourcesContent":["import { IconWrapper, IconWrapperProps } from './IconWrapper';\nimport * as icons from './icons';\n\nconst iconsList = Object.keys(icons);\ntype IconKey = (typeof iconsList)[number];\n\nconst story = {\n title: 'JSX/Icon',\n component: IconWrapper,\n argTypes: {\n icon: {\n description: 'Identifier key of the icon',\n table: {\n type: {\n summary: 'IconKey (see Available Icons story for all icons)',\n },\n },\n control: 'select',\n options: iconsList,\n },\n size: {\n description: 'Icon size',\n },\n color: {\n description: 'Icon color',\n },\n className: {\n description: 'Class name for updating components styles',\n control: 'text',\n table: {\n type: {\n summary: 'Your own custom classnames can be added here',\n },\n },\n },\n },\n args: {\n icon: 'InfoIcon',\n size: 32,\n color: 'purple-600',\n noMargin: false,\n className: '',\n },\n};\n\nexport const IconStory = {\n render: ({\n color,\n className,\n icon,\n size,\n }: IconWrapperProps & { icon: IconKey }) => {\n // @ts-ignore\n const Icon = icons?.[icon];\n\n return Icon && <Icon size={size} color={color} className={className} />;\n },\n\n name: 'Icon',\n};\n\nexport default story;\n"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/icon/index.stories.tsx"],"sourcesContent":["import { IconWrapper, IconWrapperProps } from './IconWrapper';\nimport * as icons from './icons';\n\nconst iconsList = Object.keys(icons);\ntype IconKey = (typeof iconsList)[number];\n\nconst story = {\n title: 'JSX/Icon',\n component: IconWrapper,\n argTypes: {\n icon: {\n description: 'Identifier key of the icon',\n table: {\n type: {\n summary: 'IconKey (see Available Icons story for all icons)',\n },\n },\n control: 'select',\n options: iconsList,\n },\n size: {\n description: 'Icon size',\n },\n color: {\n description: 'Icon color',\n },\n className: {\n description: 'Class name for updating components styles',\n control: 'text',\n table: {\n type: {\n summary: 'Your own custom classnames can be added here',\n },\n },\n },\n },\n args: {\n icon: 'InfoIcon',\n size: 32,\n color: 'purple-600',\n noMargin: false,\n className: '',\n },\n};\n\nexport const IconStory = {\n render: ({\n color,\n className,\n icon,\n size,\n }: IconWrapperProps & { icon: IconKey }) => {\n // @ts-ignore\n const Icon = icons?.[icon];\n\n return Icon && <Icon size={size} color={color} className={className} />;\n },\n\n name: 'Icon',\n};\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,IAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;AAGpC,IAAM,KAAK,GAAG;AACZ,IAAA,KAAK,EAAE,UAAU;AACjB,IAAA,SAAS,EAAE,WAAW;AACtB,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,WAAW,EAAE,4BAA4B;AACzC,YAAA,KAAK,EAAE;AACL,gBAAA,IAAI,EAAE;AACJ,oBAAA,OAAO,EAAE,mDAAmD;AAC7D,iBAAA;AACF,aAAA;AACD,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,WAAW,EAAE,WAAW;AACzB,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,WAAW,EAAE,YAAY;AAC1B,SAAA;AACD,QAAA,SAAS,EAAE;AACT,YAAA,WAAW,EAAE,2CAA2C;AACxD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,KAAK,EAAE;AACL,gBAAA,IAAI,EAAE;AACJ,oBAAA,OAAO,EAAE,8CAA8C;AACxD,iBAAA;AACF,aAAA;AACF,SAAA;AACF,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,IAAI,EAAE,EAAE;AACR,QAAA,KAAK,EAAE,YAAY;AACnB,QAAA,QAAQ,EAAE,KAAK;AACf,QAAA,SAAS,EAAE,EAAE;AACd,KAAA;;AAGI,IAAM,SAAS,GAAG;IACvB,MAAM,EAAE,UAAC,EAK8B,EAAA;YAJrC,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,IAAI,GAAA,EAAA,CAAA,IAAA;;QAGJ,IAAM,IAAI,GAAG,KAAK,KAAA,IAAA,IAAL,KAAK,uBAAL,KAAK,CAAG,IAAI,CAAC;AAE1B,QAAA,OAAO,IAAI,IAAIA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,GAAI;IACzE,CAAC;AAED,IAAA,IAAI,EAAE,MAAM;;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useState } from 'react';
|
|
3
3
|
import { Checkbox } from './index.js';
|
|
4
|
-
import { i as images } from '../../../index-
|
|
4
|
+
import { i as images } from '../../../index-C5N_dS2f.js';
|
|
5
5
|
import '../../../tslib.es6-CVlKGIvp.js';
|
|
6
6
|
import '../../../index-DLQEsiym.js';
|
|
7
7
|
import '../../../_commonjsHelpers-BFTU3MAI.js';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useState } from 'react';
|
|
3
3
|
import { Radio } from './index.js';
|
|
4
|
-
import { i as images } from '../../../index-
|
|
4
|
+
import { i as images } from '../../../index-C5N_dS2f.js';
|
|
5
5
|
import '../../../index-DLQEsiym.js';
|
|
6
6
|
import '../../../_commonjsHelpers-BFTU3MAI.js';
|
|
7
7
|
import '../../../style-inject.es-tgCJW-Cu.js';
|
|
@@ -63,6 +63,7 @@ import BoxesAdd2 from './components/icon/icons/BoxesAdd2.js';
|
|
|
63
63
|
import BoxesMultipleFilled from './components/icon/icons/BoxesMultipleFilled.js';
|
|
64
64
|
import BoxesMultiple from './components/icon/icons/BoxesMultiple.js';
|
|
65
65
|
import Briefcase from './components/icon/icons/Briefcase.js';
|
|
66
|
+
import BrokenGlass from './components/icon/icons/BrokenGlass.js';
|
|
66
67
|
import Calculator from './components/icon/icons/Calculator.js';
|
|
67
68
|
import CalendarIcon from './components/icon/icons/Calendar.js';
|
|
68
69
|
import CameraOff from './components/icon/icons/CameraOff.js';
|
|
@@ -448,6 +449,7 @@ var icons = /*#__PURE__*/Object.freeze({
|
|
|
448
449
|
BoxesMultipleFilledIcon: BoxesMultipleFilled,
|
|
449
450
|
BoxesMultipleIcon: BoxesMultiple,
|
|
450
451
|
BriefcaseIcon: Briefcase,
|
|
452
|
+
BrokenGlassIcon: BrokenGlass,
|
|
451
453
|
CalculatorIcon: Calculator,
|
|
452
454
|
CalendarIcon: CalendarIcon,
|
|
453
455
|
CameraIcon: Camera,
|
|
@@ -786,4 +788,4 @@ var icons = /*#__PURE__*/Object.freeze({
|
|
|
786
788
|
});
|
|
787
789
|
|
|
788
790
|
export { icons as i };
|
|
789
|
-
//# sourceMappingURL=index-
|
|
791
|
+
//# sourceMappingURL=index-BWJpOVlt.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-
|
|
1
|
+
{"version":3,"file":"index-BWJpOVlt.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
var basePath = 'https://assets.cdn.feather-insurance.com/assets/images';
|
|
2
|
-
var basePathIllustrations = "".concat(basePath, "/illustrations");
|
|
2
|
+
var basePathIllustrations = "".concat(basePath, "/illustrations/v2");
|
|
3
3
|
var images = {
|
|
4
4
|
aid: "".concat(basePath, "/aid.svg"),
|
|
5
5
|
bed: "".concat(basePath, "/bed.svg"),
|
|
@@ -90,7 +90,7 @@ var illustrations = {
|
|
|
90
90
|
mail: "".concat(basePathIllustrations, "/mail.svg"),
|
|
91
91
|
medicine: "".concat(basePathIllustrations, "/medicine.svg"),
|
|
92
92
|
mentalHealth: "".concat(basePathIllustrations, "/mental-health.svg"),
|
|
93
|
-
mentalIllness: "".concat(basePathIllustrations, "/mental-
|
|
93
|
+
mentalIllness: "".concat(basePathIllustrations, "/mental-illness.svg"),
|
|
94
94
|
miniJobExpat: "".concat(basePathIllustrations, "/minijob-expat.svg"),
|
|
95
95
|
moneyIncome: "".concat(basePathIllustrations, "/money-income.svg"),
|
|
96
96
|
movingTruck: "".concat(basePathIllustrations, "/moving-truck.svg"),
|
|
@@ -156,4 +156,4 @@ var illustrations = {
|
|
|
156
156
|
};
|
|
157
157
|
|
|
158
158
|
export { illustrations as a, images as i };
|
|
159
|
-
//# sourceMappingURL=index-
|
|
159
|
+
//# sourceMappingURL=index-C5N_dS2f.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index-C5N_dS2f.js","sources":["../../../src/lib/util/images/index.ts"],"sourcesContent":["const basePath = 'https://assets.cdn.feather-insurance.com/assets/images';\nconst basePathIllustrations = `${basePath}/illustrations/v2`;\n\nconst images = {\n aid: `${basePath}/aid.svg`,\n bed: `${basePath}/bed.svg`,\n bigDog: `${basePath}/bigDog.svg`,\n verticalIcons: {\n dogLiability: `${basePath}/dogLiabilityIcon.png`,\n dogLiability2x: `${basePath}/dogLiabilityIcon2x.png`,\n dogLiability3x: `${basePath}/dogLiabilityIcon3x.png`,\n lifeIcon: `${basePath}/lifeIcon.png`,\n lifeIcon2x: `${basePath}/lifeIcon2x.png`,\n lifeIcon3x: `${basePath}/lifeIcon3x.png`,\n },\n brokenAquarium: `${basePath}/brokenAquarium.svg`,\n brokenGlass: `${basePath}/brokenGlass.svg`,\n damagedLaptop: `${basePath}/damagedLaptop.svg`,\n moneyIncome: `${basePath}/moneyIncome.svg`,\n washingMachine: `${basePath}/washingMachine.svg`,\n bill: `${basePath}/bill.svg`,\n books: `${basePath}/books.svg`,\n finalExpenses: `${basePath}/finalExpenses.svg`,\n mortgage: `${basePath}/mortgage.svg`,\n};\n\nconst illustrations = {\n aids: `${basePathIllustrations}/aids.svg`,\n allInOneAccount: `${basePathIllustrations}/all-in-one-account.svg`,\n ambulance: `${basePathIllustrations}/ambulance.svg`,\n bank: `${basePathIllustrations}/bank.svg`,\n battery: `${basePathIllustrations}/battery.svg`,\n bed: `${basePathIllustrations}/bed.svg`,\n bigDog: `${basePathIllustrations}/big-dog.svg`,\n bikeDamage: `${basePathIllustrations}/bike-damage.svg`,\n bikeDestroyedDamaged: `${basePathIllustrations}/bike-destroyed-damaged.svg`,\n bikeDetails: `${basePathIllustrations}/bike-details.svg`,\n bikeFrameNumber: `${basePathIllustrations}/bike-frame-number.svg`,\n bikeLock: `${basePathIllustrations}/bike-lock.svg`,\n bikeParts: `${basePathIllustrations}/bike-parts.svg`,\n bikeRiding: `${basePathIllustrations}/bike-riding.svg`,\n bikeStolenBroken: `${basePathIllustrations}/bike-stolen-broken.svg`,\n bikeStolen: `${basePathIllustrations}/bike-stolen.svg`,\n bikeTrailer: `${basePathIllustrations}/bike-trailer.svg`,\n bikeWear: `${basePathIllustrations}/bike-wear.svg`,\n bike: `${basePathIllustrations}/bike.svg`,\n bill: `${basePathIllustrations}/bill.svg`,\n bookOpen: `${basePathIllustrations}/book-open.svg`,\n briefcase: `${basePathIllustrations}/briefcase.svg`,\n brokenAquarium: `${basePathIllustrations}/broken-aquarium.svg`,\n brokenGlass: `${basePathIllustrations}/broken-glass.svg`,\n calculating1: `${basePathIllustrations}/calculating-1.svg`,\n calculatingDone: `${basePathIllustrations}/calculating-done.svg`,\n calculating: `${basePathIllustrations}/calculating.svg`,\n calendar: `${basePathIllustrations}/calendar.svg`,\n car: `${basePathIllustrations}/car.svg`,\n checkDoc: `${basePathIllustrations}/check-doc.svg`,\n check: `${basePathIllustrations}/check.svg`,\n concierge: `${basePathIllustrations}/concierge.svg`,\n contract: `${basePathIllustrations}/contract.svg`,\n crash: `${basePathIllustrations}/crash.svg`,\n creditCard: `${basePathIllustrations}/credit-card.svg`,\n damagedLaptop: `${basePathIllustrations}/damaged-laptop.svg`,\n dentalCleaning: `${basePathIllustrations}/dental-cleaning.svg`,\n dentalTreatment: `${basePathIllustrations}/dental-treatment.svg`,\n dental: `${basePathIllustrations}/dental.svg`,\n dependents: `${basePathIllustrations}/dependents.svg`,\n document1: `${basePathIllustrations}/document-1.svg`,\n documentCheck: `${basePathIllustrations}/document-check.svg`,\n documentCross: `${basePathIllustrations}/document-cross.svg`,\n document: `${basePathIllustrations}/document.svg`,\n door: `${basePathIllustrations}/door.svg`,\n education: `${basePathIllustrations}/education.svg`,\n electricCar: `${basePathIllustrations}/electric-car.svg`,\n email: `${basePathIllustrations}/email.svg`,\n euroMoney: `${basePathIllustrations}/euro-money.svg`,\n fastEasy: `${basePathIllustrations}/fast-easy.svg`,\n fire: `${basePathIllustrations}/fire.svg`,\n freelancerExpat: `${basePathIllustrations}/freelancer-expat.svg`,\n funeralBurial: `${basePathIllustrations}/funeral-burial.svg`,\n fuse: `${basePathIllustrations}/fuse.svg`,\n giftPolicyOptionsQuote: `${basePathIllustrations}/gift-policy-options-quote.svg`,\n grandmother: `${basePathIllustrations}/grandmother.svg`,\n healthCard: `${basePathIllustrations}/health-card.svg`,\n heart: `${basePathIllustrations}/heart.svg`,\n helmet: `${basePathIllustrations}/helmet.svg`,\n householdHome: `${basePathIllustrations}/household-home.svg`,\n keys: `${basePathIllustrations}/keys.svg`,\n legalLawyer: `${basePathIllustrations}/legal-lawyer.svg`,\n location: `${basePathIllustrations}/location.svg`,\n lock: `${basePathIllustrations}/lock.svg`,\n mail: `${basePathIllustrations}/mail.svg`,\n medicine: `${basePathIllustrations}/medicine.svg`,\n mentalHealth: `${basePathIllustrations}/mental-health.svg`,\n mentalIllness: `${basePathIllustrations}/mental-illness.svg`,\n miniJobExpat: `${basePathIllustrations}/minijob-expat.svg`,\n moneyIncome: `${basePathIllustrations}/money-income.svg`,\n movingTruck: `${basePathIllustrations}/moving-truck.svg`,\n naturalRemedies: `${basePathIllustrations}/natural-remedies.svg`,\n newArrival: `${basePathIllustrations}/new-arrival.svg`,\n noPolicies: `${basePathIllustrations}/no-policies.svg`,\n passport: `${basePathIllustrations}/passport.svg`,\n pawPet: `${basePathIllustrations}/paw-pet.svg`,\n pen: `${basePathIllustrations}/pen.svg`,\n personB: `${basePathIllustrations}/person-b.svg`,\n person: `${basePathIllustrations}/person.svg`,\n petsBunny: `${basePathIllustrations}/pets-bunny.svg`,\n petsCat: `${basePathIllustrations}/pets-cat.svg`,\n phone1: `${basePathIllustrations}/phone-1.svg`,\n phone2Fa: `${basePathIllustrations}/phone-2-fa.svg`,\n phonePerson: `${basePathIllustrations}/phone-person.svg`,\n phonePhoto: `${basePathIllustrations}/phone-photo.svg`,\n phone: `${basePathIllustrations}/phone.svg`,\n photoPerson: `${basePathIllustrations}/photo-person.svg`,\n pipes: `${basePathIllustrations}/pipes.svg`,\n planeRepatriationFlight: `${basePathIllustrations}/plane-repatriation-flight.svg`,\n pregnancy: `${basePathIllustrations}/pregnancy.svg`,\n productionDown: `${basePathIllustrations}/production-down.svg`,\n pushNotifications: `${basePathIllustrations}/push-notifications.svg`,\n radioactive: `${basePathIllustrations}/radioactive.svg`,\n referral: `${basePathIllustrations}/referral.svg`,\n researcherExpat: `${basePathIllustrations}/researcher-expat.svg`,\n restrictions: `${basePathIllustrations}/restrictions.svg`,\n ring: `${basePathIllustrations}/ring.svg`,\n screen: `${basePathIllustrations}/screen.svg`,\n screenings: `${basePathIllustrations}/screenings.svg`,\n shield1: `${basePathIllustrations}/shield-1.svg`,\n shield2: `${basePathIllustrations}/shield-2.svg`,\n shield3: `${basePathIllustrations}/shield-3.svg`,\n shieldCross: `${basePathIllustrations}/shield-cross.svg`,\n shieldQuestionMark: `${basePathIllustrations}/shield-questionmark.svg`,\n shieldWarning: `${basePathIllustrations}/shield-warning.svg`,\n shield: `${basePathIllustrations}/shield.svg`,\n sign: `${basePathIllustrations}/sign.svg`,\n spinner: `${basePathIllustrations}/spinner.svg`,\n sportLifestyleBasketball: `${basePathIllustrations}/sport-lifestyle-basketball.svg`,\n storm: `${basePathIllustrations}/storm.svg`,\n studentExpat: `${basePathIllustrations}/student-expat.svg`,\n submit: `${basePathIllustrations}/submit.svg`,\n supportAgent: `${basePathIllustrations}/support-agent.svg`,\n supportSpeakingMessageChatTalk: `${basePathIllustrations}/support-speaking-message-chat-talk.svg`,\n theft: `${basePathIllustrations}/theft.svg`,\n time: `${basePathIllustrations}/time.svg`,\n traffic: `${basePathIllustrations}/traffic.svg`,\n tree: `${basePathIllustrations}/tree.svg`,\n user: `${basePathIllustrations}/user.svg`,\n vaccination: `${basePathIllustrations}/vaccination.svg`,\n vandalism: `${basePathIllustrations}/vandalism.svg`,\n videoCall: `${basePathIllustrations}/video-call.svg`,\n visaSeekerExpat: `${basePathIllustrations}/visa-seeker-expat.svg`,\n visa: `${basePathIllustrations}/visa.svg`,\n visualAid: `${basePathIllustrations}/visual-aid.svg`,\n visual: `${basePathIllustrations}/visual.svg`,\n washingMachine: `${basePathIllustrations}/washing-machine.svg`,\n water: `${basePathIllustrations}/water.svg`,\n wavingHand: `${basePathIllustrations}/waving-hand.svg`,\n worldwide: `${basePathIllustrations}/worldwide.svg`,\n};\n\ntype IllustrationKeys = keyof typeof illustrations;\n\nexport type { IllustrationKeys }\nexport { illustrations, images };\n"],"names":[],"mappings":"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"}
|
package/dist/esm/index.js
CHANGED
|
@@ -25,7 +25,7 @@ export { ComparisonTable } from './components/comparisonTable/index.js';
|
|
|
25
25
|
export { SegmentedControl } from './components/segmentedControl/index.js';
|
|
26
26
|
export { S as SearchableDropdown, u as useEscapeKey } from './index-B18M6b67.js';
|
|
27
27
|
export { Link } from './components/link/index.js';
|
|
28
|
-
export { a as illustrations, i as images } from './index-
|
|
28
|
+
export { a as illustrations, i as images } from './index-C5N_dS2f.js';
|
|
29
29
|
export { Spinner } from './components/spinner/index.js';
|
|
30
30
|
export { Toggle } from './components/input/toggle/index.js';
|
|
31
31
|
export { T as Toaster, t as toast } from './index-CT0_LjIR.js';
|
|
@@ -107,6 +107,7 @@ export { default as BoxesAdd2Icon } from './components/icon/icons/BoxesAdd2.js';
|
|
|
107
107
|
export { default as BoxesMultipleFilledIcon } from './components/icon/icons/BoxesMultipleFilled.js';
|
|
108
108
|
export { default as BoxesMultipleIcon } from './components/icon/icons/BoxesMultiple.js';
|
|
109
109
|
export { default as BriefcaseIcon } from './components/icon/icons/Briefcase.js';
|
|
110
|
+
export { default as BrokenGlassIcon } from './components/icon/icons/BrokenGlass.js';
|
|
110
111
|
export { default as CalculatorIcon } from './components/icon/icons/Calculator.js';
|
|
111
112
|
export { default as CalendarIcon } from './components/icon/icons/Calendar.js';
|
|
112
113
|
export { default as CameraOffIcon } from './components/icon/icons/CameraOff.js';
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/lib/hooks/useFocusWithin.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nexport const useFocusWithin = (\n ref: HTMLElement | null,\n callback: (isFocusWithin: boolean) => void\n) => {\n useEffect(() => {\n const handleOnFocusIn = () => {\n if (!ref) {\n return;\n }\n\n const hasFocus = ref?.contains(document.activeElement);\n\n callback(Boolean(hasFocus));\n };\n\n document.addEventListener('focusin', handleOnFocusIn);\n\n return () => document?.removeEventListener('focusin', handleOnFocusIn);\n }, [callback, ref]);\n};\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/lib/hooks/useFocusWithin.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nexport const useFocusWithin = (\n ref: HTMLElement | null,\n callback: (isFocusWithin: boolean) => void\n) => {\n useEffect(() => {\n const handleOnFocusIn = () => {\n if (!ref) {\n return;\n }\n\n const hasFocus = ref?.contains(document.activeElement);\n\n callback(Boolean(hasFocus));\n };\n\n document.addEventListener('focusin', handleOnFocusIn);\n\n return () => document?.removeEventListener('focusin', handleOnFocusIn);\n }, [callback, ref]);\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEO,IAAM,cAAc,GAAG,UAC5B,GAAuB,EACvB,QAA0C,EAAA;AAE1C,IAAA,SAAS,CAAC,YAAA;AACR,QAAA,IAAM,eAAe,GAAG,YAAA;YACtB,IAAI,CAAC,GAAG,EAAE;gBACR;YACF;AAEA,YAAA,IAAM,QAAQ,GAAG,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC;AAEtD,YAAA,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;AAC7B,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,eAAe,CAAC;AAErD,QAAA,OAAO,cAAM,OAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,uBAAR,QAAQ,CAAE,mBAAmB,CAAC,SAAS,EAAE,eAAe,CAAC,CAAA,CAAzD,CAAyD;AACxE,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;AACrB;;;;"}
|
|
@@ -63,6 +63,7 @@ export { default as BoxesAdd2Icon } from './BoxesAdd2';
|
|
|
63
63
|
export { default as BoxesMultipleFilledIcon } from './BoxesMultipleFilled';
|
|
64
64
|
export { default as BoxesMultipleIcon } from './BoxesMultiple';
|
|
65
65
|
export { default as BriefcaseIcon } from './Briefcase';
|
|
66
|
+
export { default as BrokenGlassIcon } from './BrokenGlass';
|
|
66
67
|
export { default as CalculatorIcon } from './Calculator';
|
|
67
68
|
export { default as CalendarIcon } from './Calendar';
|
|
68
69
|
export { default as CameraOffIcon } from './CameraOff';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useState } from 'react';
|
|
3
|
-
import { a as illustrations } from '../../index-
|
|
3
|
+
import { a as illustrations } from '../../index-C5N_dS2f.js';
|
|
4
4
|
import { c as classNames } from '../../index-DLQEsiym.js';
|
|
5
5
|
import '../../components/dateSelector/index.js';
|
|
6
6
|
import '../../components/signaturePad/index.js';
|
package/package.json
CHANGED
|
@@ -116,11 +116,11 @@ export const TopIconTypes = () => {
|
|
|
116
116
|
<div className="mb16 fw-bold">Icon Type</div>
|
|
117
117
|
<InfoCard
|
|
118
118
|
title="Help Center"
|
|
119
|
-
topIcon={<img src="https://placehold.co/80x80" alt="Banner" />}
|
|
119
|
+
topIcon={<img src="https://placehold.co/80x80/transparent/F00" alt="Banner" />}
|
|
120
120
|
topIconType="icon"
|
|
121
121
|
onClick={() => console.log('Icon type clicked!')}
|
|
122
122
|
>
|
|
123
|
-
Icon is displayed in a
|
|
123
|
+
Icon is displayed in a rounded square with orange background.
|
|
124
124
|
</InfoCard>
|
|
125
125
|
</div>
|
|
126
126
|
<div className="w50">
|
|
@@ -131,7 +131,7 @@ export const TopIconTypes = () => {
|
|
|
131
131
|
topIconType="iconWithBackground"
|
|
132
132
|
onClick={() => console.log('Icon type clicked!')}
|
|
133
133
|
>
|
|
134
|
-
Icon is displayed in a
|
|
134
|
+
Icon is displayed in a rounded square with the orange background.
|
|
135
135
|
</InfoCard>
|
|
136
136
|
</div>
|
|
137
137
|
</div>
|
|
@@ -142,9 +142,8 @@ export const TopIconTypes = () => {
|
|
|
142
142
|
title="Image Gallery"
|
|
143
143
|
topIcon={
|
|
144
144
|
<img
|
|
145
|
-
src="https://placehold.co/80x80"
|
|
145
|
+
src="https://placehold.co/80x80/transparent/F00"
|
|
146
146
|
alt="Image"
|
|
147
|
-
style={{ borderRadius: '8px' }}
|
|
148
147
|
/>
|
|
149
148
|
}
|
|
150
149
|
topIconType="image"
|
|
@@ -24,6 +24,7 @@ export const InfoCard = ({
|
|
|
24
24
|
...cardProps
|
|
25
25
|
}: InfoCardProps) => {
|
|
26
26
|
const isIconType = topIconType === 'icon' || topIconType === 'iconWithBackground';
|
|
27
|
+
const isFloatingType = isIconType;
|
|
27
28
|
|
|
28
29
|
return (
|
|
29
30
|
<Card
|
|
@@ -33,10 +34,8 @@ export const InfoCard = ({
|
|
|
33
34
|
{isIconType ? (
|
|
34
35
|
<div
|
|
35
36
|
className={classNames(
|
|
36
|
-
'd-flex ai-center jc-center
|
|
37
|
-
styles.topIconWrapper,
|
|
38
|
-
'bg-orange-200': topIconType === 'iconWithBackground'
|
|
39
|
-
}
|
|
37
|
+
'd-flex ai-center jc-center p16 bg-orange-200',
|
|
38
|
+
styles.topIconWrapper,
|
|
40
39
|
)}
|
|
41
40
|
>
|
|
42
41
|
{topIcon}
|
|
@@ -44,7 +43,8 @@ export const InfoCard = ({
|
|
|
44
43
|
) : (
|
|
45
44
|
<div className={classNames(
|
|
46
45
|
'd-flex ai-center jc-center',
|
|
47
|
-
{ [styles.topIconBanner]: topIconType === 'banner' }
|
|
46
|
+
{ [styles.topIconBanner]: topIconType === 'banner' },
|
|
47
|
+
{ [styles.topIconImage]: topIconType === 'image' },
|
|
48
48
|
)}>
|
|
49
49
|
{topIcon}
|
|
50
50
|
</div>
|
|
@@ -61,6 +61,7 @@ export const InfoCard = ({
|
|
|
61
61
|
titleVariant='medium'
|
|
62
62
|
description={children}
|
|
63
63
|
descriptionVariant='small'
|
|
64
|
+
dropShadow={false}
|
|
64
65
|
actionIcon={null}
|
|
65
66
|
showActionIcon={false}
|
|
66
67
|
classNames={{
|
|
@@ -68,16 +69,17 @@ export const InfoCard = ({
|
|
|
68
69
|
wrapper: classNames({
|
|
69
70
|
[styles.wrapper]: true,
|
|
70
71
|
[styles.disabled]: disabled,
|
|
71
|
-
'pt40': topIcon &&
|
|
72
|
-
'mt40': topIcon &&
|
|
72
|
+
'pt40': topIcon && isFloatingType,
|
|
73
|
+
'mt40': topIcon && isFloatingType,
|
|
73
74
|
[styles.bannerWrapper]: topIcon && topIconType === 'banner',
|
|
74
75
|
}),
|
|
75
|
-
label: classNames({
|
|
76
|
-
[styles.floatingLabel]: topIcon && topIconType
|
|
76
|
+
label: classNames('d-flex jc-center', {
|
|
77
|
+
[styles.floatingLabel]: topIcon && (isFloatingType || topIconType === 'banner'),
|
|
77
78
|
}),
|
|
78
79
|
title: classNames(
|
|
79
80
|
{'mt16': topIcon && topIconType === 'banner'},
|
|
80
|
-
'd-flex ai-center jc-center ta-center
|
|
81
|
+
'd-flex ai-center jc-center ta-center mb8',
|
|
82
|
+
styles.title,
|
|
81
83
|
),
|
|
82
84
|
description: 'ta-center',
|
|
83
85
|
contentWrapper: styles.contentWrapper,
|