@luscii-healthtech/web-ui 2.1.0 → 2.3.1
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/Accordion/Accordion.d.ts +10 -0
- package/dist/components/Accordion/AccordionItem.d.ts +9 -0
- package/dist/components/List/List.d.ts +1 -1
- package/dist/components/List/List.types.d.ts +1 -0
- package/dist/components/List/ListItemSkeleton.d.ts +2 -0
- package/dist/components/List/ListSkeleton.d.ts +7 -0
- package/dist/web-ui-tailwind.css +16 -0
- package/dist/web-ui.cjs.development.js +96 -25
- package/dist/web-ui.cjs.development.js.map +1 -1
- package/dist/web-ui.cjs.production.min.js +1 -1
- package/dist/web-ui.cjs.production.min.js.map +1 -1
- package/dist/web-ui.esm.js +96 -25
- package/dist/web-ui.esm.js.map +1 -1
- package/package.json +5 -8
- package/src/components/Accordion/Accordion.tsx +33 -0
- package/src/components/Accordion/AccordionItem.tsx +50 -0
- package/src/components/List/List.tsx +13 -9
- package/src/components/List/List.types.ts +1 -0
- package/src/components/List/ListItemSkeleton.tsx +26 -0
- package/src/components/List/ListSkeleton.scss +5 -0
- package/src/components/List/ListSkeleton.tsx +30 -0
- package/src/styles/_skeleton.scss +63 -0
- package/src/types/general.types.ts +1 -1
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { AccordionItemProps } from "./AccordionItem";
|
|
3
|
+
export interface AccordionProps {
|
|
4
|
+
dataTestId?: string;
|
|
5
|
+
items: AccordionItemProps[];
|
|
6
|
+
className?: string;
|
|
7
|
+
isCollapsedByDefault?: boolean;
|
|
8
|
+
}
|
|
9
|
+
declare const Accordion: React.VFC<AccordionProps>;
|
|
10
|
+
export default Accordion;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ListProps, ListItemProps, OnAssetLoadErrorPayload } from "./List.types";
|
|
3
3
|
export { ListProps, ListItemProps, OnAssetLoadErrorPayload };
|
|
4
|
-
export declare const List: ({ title, headerButton, headerTransparent, items, onAssetLoadError, onDragEnd, emptyStateMessage, }: ListProps) => JSX.Element;
|
|
4
|
+
export declare const List: ({ title, headerButton, headerTransparent, items, onAssetLoadError, onDragEnd, emptyStateMessage, isLoading, }: ListProps) => JSX.Element;
|
|
5
5
|
export default List;
|
|
@@ -30,6 +30,7 @@ export declare type ListProps = {
|
|
|
30
30
|
onAssetLoadError?: (payload: OnAssetLoadErrorPayload) => void;
|
|
31
31
|
onDragEnd?: (itemId: string | number, newIndex: number) => void;
|
|
32
32
|
emptyStateMessage?: string;
|
|
33
|
+
isLoading?: boolean;
|
|
33
34
|
};
|
|
34
35
|
export interface Dragula {
|
|
35
36
|
destroy?: () => void;
|
package/dist/web-ui-tailwind.css
CHANGED
|
@@ -651,6 +651,18 @@ video {
|
|
|
651
651
|
margin-left: calc(1.5rem * calc(1 - var(--space-x-reverse)));
|
|
652
652
|
}
|
|
653
653
|
|
|
654
|
+
.divide-y > :not(template) ~ :not(template) {
|
|
655
|
+
--divide-y-reverse: 0;
|
|
656
|
+
border-top-width: calc(1px * calc(1 - var(--divide-y-reverse)));
|
|
657
|
+
border-bottom-width: calc(1px * var(--divide-y-reverse));
|
|
658
|
+
}
|
|
659
|
+
|
|
660
|
+
.divide-slate-200 > :not(template) ~ :not(template) {
|
|
661
|
+
--divide-opacity: 1;
|
|
662
|
+
border-color: #e2e8f0;
|
|
663
|
+
border-color: rgba(226, 232, 240, var(--divide-opacity));
|
|
664
|
+
}
|
|
665
|
+
|
|
654
666
|
.appearance-none {
|
|
655
667
|
appearance: none;
|
|
656
668
|
}
|
|
@@ -1733,6 +1745,10 @@ video {
|
|
|
1733
1745
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
1734
1746
|
}
|
|
1735
1747
|
|
|
1748
|
+
.shadow {
|
|
1749
|
+
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
|
|
1750
|
+
}
|
|
1751
|
+
|
|
1736
1752
|
.shadow-md {
|
|
1737
1753
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
1738
1754
|
}
|
|
@@ -2726,6 +2726,69 @@ var ListItem = function ListItem(_ref) {
|
|
|
2726
2726
|
}), accessories);
|
|
2727
2727
|
};
|
|
2728
2728
|
|
|
2729
|
+
var css_248z$g = ".list-skeleton .skeleton-box {\n display: inline-block;\n height: 1em;\n position: relative;\n overflow: hidden;\n background-color: #cbd5e1;\n border-radius: 3px;\n}\n\n.list-skeleton .skeleton-box::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));\n animation: shimmer 800ms infinite;\n content: \"\";\n}\n\n.list-skeleton .skeleton-box.is-circle {\n border-radius: 50%;\n}\n\n.list-skeleton .skeleton-box.is-button {\n background-color: #e2e8f0;\n border-radius: 9999px;\n}\n\n.list-skeleton .skeleton-box.is-button::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(90deg, rgba(221, 221, 221, 0) 0, rgba(221, 221, 221, 0.2) 20%, rgba(221, 221, 221, 0.5) 60%, rgba(221, 221, 221, 0));\n animation: shimmer 800ms infinite;\n content: \"\";\n}\n\n@keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n}\n";
|
|
2730
|
+
styleInject(css_248z$g);
|
|
2731
|
+
|
|
2732
|
+
var ListItemSkeleton = function ListItemSkeleton() {
|
|
2733
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
2734
|
+
className: "flex flex-row items-center p-4"
|
|
2735
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
2736
|
+
className: "skeleton-box is-circle mr-2",
|
|
2737
|
+
style: {
|
|
2738
|
+
width: 32 + "px",
|
|
2739
|
+
height: 32 + "px"
|
|
2740
|
+
}
|
|
2741
|
+
}), /*#__PURE__*/React__default.createElement("div", {
|
|
2742
|
+
className: "flex flex-col"
|
|
2743
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
2744
|
+
className: "skeleton-box mb-1",
|
|
2745
|
+
style: {
|
|
2746
|
+
width: 160 + "px",
|
|
2747
|
+
height: 14 + "px"
|
|
2748
|
+
}
|
|
2749
|
+
}), /*#__PURE__*/React__default.createElement("div", {
|
|
2750
|
+
className: "skeleton-box",
|
|
2751
|
+
style: {
|
|
2752
|
+
width: 110 + "px",
|
|
2753
|
+
height: 14 + "px"
|
|
2754
|
+
}
|
|
2755
|
+
})), /*#__PURE__*/React__default.createElement("div", {
|
|
2756
|
+
className: "skeleton-box is-button ml-auto rounded-full",
|
|
2757
|
+
style: {
|
|
2758
|
+
width: 24 + "px",
|
|
2759
|
+
height: 24 + "px"
|
|
2760
|
+
}
|
|
2761
|
+
}));
|
|
2762
|
+
};
|
|
2763
|
+
|
|
2764
|
+
var ListSkeleton = function ListSkeleton(_ref) {
|
|
2765
|
+
var items = _ref.items;
|
|
2766
|
+
var skeletonItems = Array.from({
|
|
2767
|
+
length: items || 5
|
|
2768
|
+
}, function (_, i) {
|
|
2769
|
+
return /*#__PURE__*/React__default.createElement(ListItemSkeleton, {
|
|
2770
|
+
key: i
|
|
2771
|
+
});
|
|
2772
|
+
});
|
|
2773
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
2774
|
+
className: "flex flex-col divide-y divide-slate-200 bg-white border-slate-50 border rounded-lg shadow list-skeleton"
|
|
2775
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
2776
|
+
className: "flex flex-row items-center px-4 py-2"
|
|
2777
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
2778
|
+
className: "skeleton-box",
|
|
2779
|
+
style: {
|
|
2780
|
+
width: 160 + "px",
|
|
2781
|
+
height: 14 + "px"
|
|
2782
|
+
}
|
|
2783
|
+
}), /*#__PURE__*/React__default.createElement("div", {
|
|
2784
|
+
className: "skeleton-box is-button ml-auto",
|
|
2785
|
+
style: {
|
|
2786
|
+
width: 110 + "px",
|
|
2787
|
+
height: 44 + "px"
|
|
2788
|
+
}
|
|
2789
|
+
})), skeletonItems);
|
|
2790
|
+
};
|
|
2791
|
+
|
|
2729
2792
|
var List = function List(_ref) {
|
|
2730
2793
|
var title = _ref.title,
|
|
2731
2794
|
headerButton = _ref.headerButton,
|
|
@@ -2733,7 +2796,8 @@ var List = function List(_ref) {
|
|
|
2733
2796
|
items = _ref.items,
|
|
2734
2797
|
onAssetLoadError = _ref.onAssetLoadError,
|
|
2735
2798
|
onDragEnd = _ref.onDragEnd,
|
|
2736
|
-
emptyStateMessage = _ref.emptyStateMessage
|
|
2799
|
+
emptyStateMessage = _ref.emptyStateMessage,
|
|
2800
|
+
isLoading = _ref.isLoading;
|
|
2737
2801
|
var listRef = React.useRef(null);
|
|
2738
2802
|
var dragulaRef = React.useRef(null);
|
|
2739
2803
|
var hasHeader = !!(title || headerButton);
|
|
@@ -2783,6 +2847,13 @@ var List = function List(_ref) {
|
|
|
2783
2847
|
};
|
|
2784
2848
|
|
|
2785
2849
|
var roundTop = !hasHeader || hasHeader && headerTransparent;
|
|
2850
|
+
|
|
2851
|
+
if (isLoading) {
|
|
2852
|
+
return /*#__PURE__*/React__default.createElement(ListSkeleton, {
|
|
2853
|
+
items: items.length
|
|
2854
|
+
});
|
|
2855
|
+
}
|
|
2856
|
+
|
|
2786
2857
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
2787
2858
|
"data-test-id": "list-component"
|
|
2788
2859
|
}, (title || headerButton) && /*#__PURE__*/React__default.createElement("div", {
|
|
@@ -3087,8 +3158,8 @@ function handleImplicitSelect(implicitSelected, event, list, property) {
|
|
|
3087
3158
|
return newList;
|
|
3088
3159
|
}
|
|
3089
3160
|
|
|
3090
|
-
var css_248z$
|
|
3091
|
-
styleInject(css_248z$
|
|
3161
|
+
var css_248z$h = ".cweb-multiselect {\n display: flex;\n}\n\n.cweb-multiselect .cweb-multiselect-checkbox {\n margin-bottom: 0px;\n margin-top: 0.5rem;\n width: 100%;\n text-transform: capitalize;\n}\n\n.cweb-multiselect .cweb-switch-wrapper {\n display: flex;\n}\n\n.cweb-multiselect .cweb-switch-wrapper .cweb-multiselect-switch {\n width: 50px;\n}\n\n.cweb-multiselect .cweb-switch-wrapper .cweb-multiselect-switch .cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container {\n background-color: #6abfa5;\n}\n\n.cweb-multiselect .cweb-switch-wrapper .cweb-switch-title {\n width: 100px;\n color: #737373;\n font-size: 16px;\n line-height: 1.8em;\n}\n";
|
|
3162
|
+
styleInject(css_248z$h);
|
|
3092
3163
|
|
|
3093
3164
|
function MultiSelect(_ref) {
|
|
3094
3165
|
var checkboxList = _ref.checkboxList,
|
|
@@ -3434,8 +3505,8 @@ NotificationBanner.defaultProps = {
|
|
|
3434
3505
|
onButtonClick: undefined
|
|
3435
3506
|
};
|
|
3436
3507
|
|
|
3437
|
-
var css_248z$
|
|
3438
|
-
styleInject(css_248z$
|
|
3508
|
+
var css_248z$i = ".cweb-page {\n width: 100%;\n max-width: 1140px;\n margin: 32px auto 0 auto;\n}\n\n.cweb-page .cweb-page-breadcrumbs {\n margin-bottom: 16px;\n}\n\n.cweb-page .page-spinner {\n margin-left: 8px;\n margin-bottom: 4px;\n}\n\n.cweb-page .page-spinner img {\n width: 21px;\n}\n\n.cweb-page .cweb-page-header {\n display: flex;\n align-items: center;\n width: 100%;\n flex-grow: 0;\n}\n\n.cweb-page .cweb-page-header .cweb-page-title {\n display: inline;\n}\n\n.cweb-page .cweb-page-header.accessory-right {\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n}\n\n.cweb-page .cweb-page-header.accessory-bottom {\n flex-direction: column;\n align-items: flex-start;\n}\n\n@media screen and (max-width: 426px) {\n .cweb-page .cweb-page-header.accessory-bottom {\n max-width: 75vw;\n }\n\n .cweb-page .cweb-page-header.accessory-bottom img {\n max-width: 10vw;\n }\n\n .cweb-page .cweb-page-header.accessory-bottom button p {\n font-size: 4vw;\n }\n}\n\n.cweb-page .cweb-page-header.accessory-bottom .cweb-page-title {\n margin-bottom: 8px;\n display: inline;\n}\n";
|
|
3509
|
+
styleInject(css_248z$i);
|
|
3439
3510
|
|
|
3440
3511
|
/**
|
|
3441
3512
|
* Renders page's content, if `isLoading` is false otherwise shows loading indicator.
|
|
@@ -3615,8 +3686,8 @@ var Steps = function Steps(_ref) {
|
|
|
3615
3686
|
}, renderedSteps);
|
|
3616
3687
|
};
|
|
3617
3688
|
|
|
3618
|
-
var css_248z$
|
|
3619
|
-
styleInject(css_248z$
|
|
3689
|
+
var css_248z$j = ".cweb-crud-page {\n width: 100%;\n margin: 36px auto 0;\n}\n\n.cweb-crud-page-form-container {\n background-color: #fff;\n border-radius: 8px;\n padding: 24px;\n margin-top: 16px;\n}\n\n.cweb-crud-page-button-line {\n border-top: 1px solid #eeeeee;\n padding-top: 16px;\n margin-top: 16px;\n}\n\n.cweb-crud-page-loading-container {\n height: 90vh;\n /* puting this in 100vh causes an overflow bug */\n overflow-y: hidden;\n position: relative;\n}\n\n.cweb-crud-page-loading-container .crud-page-loader {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n";
|
|
3690
|
+
styleInject(css_248z$j);
|
|
3620
3691
|
|
|
3621
3692
|
function CRUDPage(_ref) {
|
|
3622
3693
|
var _ref$dataTestId = _ref.dataTestId,
|
|
@@ -3822,8 +3893,8 @@ var PreviewPhone = function PreviewPhone(_ref) {
|
|
|
3822
3893
|
}))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
|
|
3823
3894
|
};
|
|
3824
3895
|
|
|
3825
|
-
var css_248z$
|
|
3826
|
-
styleInject(css_248z$
|
|
3896
|
+
var css_248z$k = ".cweb-radio {\n outline: none;\n}\n\n.cweb-radio .cweb-radio-input {\n -webkit-appearance: none;\n height: 1px;\n opacity: 0;\n width: 1px;\n}\n\n.cweb-radio .cweb-radio-label-text {\n margin-left: 8px;\n -ms-user-select: none;\n user-select: none;\n text-align: left;\n}\n\n.cweb-radio .cweb-radio-label {\n display: flex;\n align-items: center;\n margin-bottom: 0;\n}\n\n.cweb-radio .cweb-radio-icon-container {\n width: 16px;\n height: 16px;\n position: relative;\n border: 1px solid #cccccc;\n border-radius: 50%;\n transition: background-color 0.3s ease-in-out;\n}\n\n.cweb-radio .cweb-radio-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: block;\n}\n\n.cweb-radio.is-focused .cweb-radio-icon-container {\n border-color: #0074dd;\n}\n\n.cweb-radio.is-checked .cweb-radio-icon {\n width: 5px;\n height: 5px;\n background-color: #ffffff;\n border-radius: 50%;\n}\n";
|
|
3897
|
+
styleInject(css_248z$k);
|
|
3827
3898
|
|
|
3828
3899
|
/**
|
|
3829
3900
|
* @deprecated: use RadioV2 instead
|
|
@@ -3925,8 +3996,8 @@ Radio.propTypes = {
|
|
|
3925
3996
|
onChange: PropTypes.func
|
|
3926
3997
|
};
|
|
3927
3998
|
|
|
3928
|
-
var css_248z$
|
|
3929
|
-
styleInject(css_248z$
|
|
3999
|
+
var css_248z$l = ".cweb-radio-group {\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n}\n\n.cweb-radio-group > .cweb-radio {\n flex: 0 0 auto;\n margin-right: 8px;\n}\n\n.cweb-radio-group .cweb-form-field {\n margin-bottom: 12px;\n}\n\n.cweb-radio-group .cweb-form-info-text {\n margin-left: 1.5rem;\n}\n\n.cweb-radio-group.vertical {\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n align-items: flex-start;\n}\n\n.cweb-radio-group.vertical .cweb-form-field:not(:last-child) {\n margin-bottom: 8px;\n}\n\n.cweb-radio-group.vertical > .cweb-radio {\n flex: 0 0 auto;\n margin-bottom: 8px;\n}\n\n.cweb-radio-group.hasError > .cweb-radio .cweb-radio-icon-container {\n border: 1px solid #ff6266 !important;\n}\n";
|
|
4000
|
+
styleInject(css_248z$l);
|
|
3930
4001
|
|
|
3931
4002
|
var _excluded$b = ["className", "radioClassName", "name", "selectedOption", "isVertical", "radioOptions", "onChange", "error", "isDisabled"];
|
|
3932
4003
|
/**
|
|
@@ -3986,8 +4057,8 @@ RadioGroup.propTypes = {
|
|
|
3986
4057
|
onChange: PropTypes.func
|
|
3987
4058
|
};
|
|
3988
4059
|
|
|
3989
|
-
var css_248z$
|
|
3990
|
-
styleInject(css_248z$
|
|
4060
|
+
var css_248z$m = ".cweb-section .cweb-button:last-of-type {\n margin-right: 24px;\n}\n\n.cweb-section .cweb-button:not(:last-of-type) {\n margin-right: 8px;\n}\n\n.cweb-section .cweb-button.add-button, .cweb-section .cweb-button.edit-button, .cweb-section .cweb-button.delete-button {\n margin-left: auto;\n width: 32px;\n height: 32px;\n}\n\n.cweb-section .cweb-button.add-button {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2222%22 cy%3D%2222%22 r%3D%2222%22 fill%3D%22white%22%2F%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23009FE3%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M22 32C23.1046 32 24 31.1046 24 30L24 24H30C31.1046 24 32 23.1046 32 22C32 20.8954 31.1046 20 30 20H24L24 14C24 12.8954 23.1046 12 22 12C20.8954 12 20 12.8954 20 14L20 20H14C12.8954 20 12 20.8954 12 22C12 23.1046 12.8954 24 14 24H20L20 30C20 31.1046 20.8954 32 22 32Z%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section .cweb-button.add-button:hover, .cweb-section .cweb-button.add-button:active, .cweb-section .cweb-button.add-button:focus {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%230A78B2%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M21 12C19.8954 12 19 12.8954 19 14V19L14 19C12.8954 19 12 19.8954 12 21V23C12 24.1046 12.8954 25 14 25H19V30C19 31.1046 19.8954 32 21 32H23C24.1046 32 25 31.1046 25 30V25H30C31.1046 25 32 24.1046 32 23V21C32 19.8954 31.1046 19 30 19L25 19V14C25 12.8954 24.1046 12 23 12H21Z%22 fill%3D%22%23007BBB%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section .cweb-button.edit-button {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M13.5643 27.1001C13.4169 26.9527 13.1433 27.0159 13.1012 27.2266L12.0065 31.6507C11.9644 31.8614 12.1328 32.051 12.3433 31.9878L16.7851 30.9134C16.9956 30.8712 17.0799 30.5973 16.9114 30.4499L13.5643 27.1001Z%22 fill%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M26.2161 14.1222C26.1109 14.0169 25.9214 14.0169 25.8161 14.1222L14.4484 25.4987C14.3432 25.604 14.3432 25.7936 14.4484 25.8989L18.1114 29.5647C18.2166 29.67 18.4061 29.67 18.5113 29.5647L29.879 18.1882C29.9843 18.0829 29.9843 17.8933 29.879 17.788L26.2161 14.1222Z%22 fill%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M31.1633 12.8374C30.0475 11.7209 28.2161 11.7209 27.1004 12.8374C27.0583 12.8796 27.0583 12.9217 27.1004 12.9638L31.037 16.9035C31.0791 16.9456 31.1212 16.9456 31.1633 16.9035C32.279 15.7869 32.279 13.954 31.1633 12.8374Z%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section .cweb-button.edit-button:hover, .cweb-section .cweb-button.edit-button:active, .cweb-section .cweb-button.edit-button:focus {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23007BBB%22%2F%3E%3Cpath d%3D%22M13.5643 27.1001C13.4169 26.9527 13.1433 27.0159 13.1012 27.2266L12.0065 31.6507C11.9644 31.8614 12.1328 32.051 12.3433 31.9878L16.7851 30.9134C16.9956 30.8712 17.0799 30.5973 16.9114 30.4499L13.5643 27.1001Z%22 fill%3D%22%230A78B2%22%2F%3E%3Cpath d%3D%22M26.2161 14.1222C26.1109 14.0169 25.9214 14.0169 25.8161 14.1222L14.4484 25.4987C14.3432 25.604 14.3432 25.7936 14.4484 25.8989L18.1114 29.5647C18.2166 29.67 18.4061 29.67 18.5113 29.5647L29.879 18.1882C29.9843 18.0829 29.9843 17.8933 29.879 17.788L26.2161 14.1222Z%22 fill%3D%22%230A78B2%22%2F%3E%3Cpath d%3D%22M31.1633 12.8374C30.0475 11.7209 28.2161 11.7209 27.1004 12.8374C27.0583 12.8796 27.0583 12.9217 27.1004 12.9638L31.037 16.9035C31.0791 16.9456 31.1212 16.9456 31.1633 16.9035C32.279 15.7869 32.279 13.954 31.1633 12.8374Z%22 fill%3D%22%230A78B2%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section .cweb-button.delete-button {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23FF6266%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M13 12C12.4477 12 12 12.4477 12 13C12 13.5523 12.4477 14 13 14H31C31.5523 14 32 13.5523 32 13C32 12.4477 31.5523 12 31 12H13ZM14 16H30V30C30 31.1046 29.1046 32 28 32H16C14.8954 32 14 31.1046 14 30V16ZM17 18H19V30H17V18ZM21 18H23V30H21V18ZM27 18H25V30H27V18Z%22 fill%3D%22%23FF6266%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section .cweb-button.delete-button:hover, .cweb-section .cweb-button.delete-button:active, .cweb-section .cweb-button.delete-button:focus {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M13 12C12.4477 12 12 12.4477 12 13C12 13.5523 12.4477 14 13 14H31C31.5523 14 32 13.5523 32 13C32 12.4477 31.5523 12 31 12H13ZM14 16H30V30C30 31.1046 29.1046 32 28 32H16C14.8954 32 14 31.1046 14 30V16ZM17 18H19V30H17V18ZM21 18H23V30H21V18ZM27 18H25V30H27V18Z%22 fill%3D%22%23FC494E%22%2F%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23FC494E%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section > .cweb-section-header {\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n align-items: center;\n border-bottom: 1px solid #eeeeee;\n width: 100%;\n padding: 18px 24px;\n}\n\n.cweb-section > .cweb-section-footer {\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n align-items: center;\n border-top: 1px solid #eeeeee;\n width: 100%;\n padding: 1rem 24px 1rem 24px;\n}\n\n.cweb-section > .cweb-section-footer img {\n width: 32px;\n height: 32px;\n}\n";
|
|
4061
|
+
styleInject(css_248z$m);
|
|
3991
4062
|
|
|
3992
4063
|
var _excluded$c = ["title", "buttons", "footer", "children", "className", "isLoading", "loadingIndicatorProps"];
|
|
3993
4064
|
function Section(_ref) {
|
|
@@ -4027,8 +4098,8 @@ function Section(_ref) {
|
|
|
4027
4098
|
}, footer));
|
|
4028
4099
|
}
|
|
4029
4100
|
|
|
4030
|
-
var css_248z$
|
|
4031
|
-
styleInject(css_248z$
|
|
4101
|
+
var css_248z$n = ".cweb-list-item {\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n padding: 16px 0 16px 0;\n border-bottom: 1px solid #eeeeee;\n}\n\n.cweb-list-item:last-child {\n border-bottom: none;\n}\n\n.cweb-list-item.cweb-list-item-clickable {\n cursor: pointer;\n}\n\n.cweb-list-item.cweb-list-item-clickable:hover {\n background-color: #f2fafd;\n}\n";
|
|
4102
|
+
styleInject(css_248z$n);
|
|
4032
4103
|
|
|
4033
4104
|
var _excluded$d = ["children", "className", "onClick"];
|
|
4034
4105
|
var SectionItem = function SectionItem(props) {
|
|
@@ -4176,8 +4247,8 @@ var SettingsMenuButton = function SettingsMenuButton(props) {
|
|
|
4176
4247
|
})));
|
|
4177
4248
|
};
|
|
4178
4249
|
|
|
4179
|
-
var css_248z$
|
|
4180
|
-
styleInject(css_248z$
|
|
4250
|
+
var css_248z$o = ".cweb-switcher-item {\n display: flex;\n justify-content: center;\n flex-direction: row;\n align-items: center;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link {\n display: flex;\n align-items: center;\n text-decoration: none;\n padding: 0.5rem 1rem;\n cursor: pointer;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon {\n display: flex;\n align-items: center;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default,\n .cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n width: 20px;\n height: 20px;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n display: none;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-text {\n color: #737373;\n transition: color 0.4s ease;\n padding-bottom: 0;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon + .cweb-switcher-item-link-text {\n margin-left: 8px;\n padding: 0;\n}\n\n.cweb-switcher-item.is-selected, .cweb-switcher-item:hover, .cweb-switcher-item:active {\n border-color: #0074dd;\n z-index: 1;\n}\n\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default {\n display: none;\n}\n\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n display: inherit;\n}\n\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-text, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-text, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-text {\n color: #0074dd;\n}\n\n.cweb-switcher-item.is-disabled {\n pointer-events: none;\n}\n";
|
|
4251
|
+
styleInject(css_248z$o);
|
|
4181
4252
|
|
|
4182
4253
|
SwitcherItem.propTypes = {
|
|
4183
4254
|
name: PropTypes.string,
|
|
@@ -4510,8 +4581,8 @@ var TagGroup = function TagGroup(_ref) {
|
|
|
4510
4581
|
}));
|
|
4511
4582
|
};
|
|
4512
4583
|
|
|
4513
|
-
var css_248z$
|
|
4514
|
-
styleInject(css_248z$
|
|
4584
|
+
var css_248z$p = ".cweb-textarea {\n border: 1px solid #cccccc;\n border-radius: 4px;\n outline: none;\n background-color: #ffffff;\n resize: none;\n}\n\n.cweb-textarea.has-icon {\n background-size: 24px;\n background-position: 10px 10px;\n background-repeat: no-repeat;\n padding-left: 44px;\n}\n\n.cweb-textarea.resizable {\n resize: both;\n}\n\n.cweb-textarea.resizable-x {\n resize: horizontal;\n}\n\n.cweb-textarea.resizable-y {\n resize: vertical;\n}\n\n.cweb-textarea:-ms-input-placeholder {\n color: #737373;\n}\n\n.cweb-textarea::placeholder {\n color: #737373;\n}\n\n.cweb-textarea:-ms-input-placeholder {\n color: #64748b !important;\n}\n\n.cweb-textarea::-ms-input-placeholder {\n color: #64748b;\n}\n\n.cweb-textarea:focus {\n border-color: #0074dd;\n}\n\n.cweb-textarea:disabled {\n cursor: not-allowed;\n}\n\n.cweb-textarea.has-error {\n border: 1px solid #ff6266;\n color: #ff6266;\n}\n";
|
|
4585
|
+
styleInject(css_248z$p);
|
|
4515
4586
|
|
|
4516
4587
|
var _excluded$f = ["className", "value", "name", "placeholder", "maxLength", "rows", "resizable", "isDisabled", "icon", "onChange", "onBlur", "onFocus", "onKeyPress", "onKeyDown", "onCtrlEnter"];
|
|
4517
4588
|
var RESIZE_TYPES = {
|
|
@@ -4598,8 +4669,8 @@ function Textarea(props) {
|
|
|
4598
4669
|
}));
|
|
4599
4670
|
}
|
|
4600
4671
|
|
|
4601
|
-
var css_248z$
|
|
4602
|
-
styleInject(css_248z$
|
|
4672
|
+
var css_248z$q = ".ql-editor {\n resize: vertical;\n min-height: 10rem;\n}\n\n.ql-snow.ql-toolbar {\n display: block;\n background: #f1f5f9;\n border-top-left-radius: 0.5em;\n border-top-right-radius: 0.5em;\n margin-top: 0.5em;\n}\n";
|
|
4673
|
+
styleInject(css_248z$q);
|
|
4603
4674
|
|
|
4604
4675
|
function TextEditor(_ref) {
|
|
4605
4676
|
var defaultValue = _ref.defaultValue,
|
|
@@ -4653,8 +4724,8 @@ TextEditor.propTypes = {
|
|
|
4653
4724
|
onValueChange: PropTypes.func.isRequired
|
|
4654
4725
|
};
|
|
4655
4726
|
|
|
4656
|
-
var css_248z$
|
|
4657
|
-
styleInject(css_248z$
|
|
4727
|
+
var css_248z$r = ".editor .rdw-editor {\n overflow-y: auto;\n}\n\n.editor .rdw-editor .rdw-link-modal {\n width: 20rem;\n height: 19rem;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-label,\n .editor .rdw-editor .rdw-link-modal .rdw-link-modal-target-option {\n font-weight: normal;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-input {\n margin-bottom: 1rem;\n font-size: 16px;\n font-weight: normal;\n line-height: 21px;\n color: #2d2d2d;\n height: 44px;\n border: 1px solid #cccccc;\n border-radius: 4px;\n outline: none;\n background-color: #ffffff;\n padding: 12px;\n caret-color: #0a78b2;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection {\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn {\n border-radius: 1.375rem;\n width: 6.5rem;\n height: 2.75rem;\n border: 1px solid #009fe3;\n background-color: transparent;\n color: #009fe3;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn:first-child,\n .editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn:disabled {\n background: #009fe3;\n color: #ffffff;\n}\n\n.editor .rdw-editor .rdw-embedded-modal {\n width: 22rem;\n height: 15rem;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-link-input,\n .editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-size-input {\n font-size: 16px;\n font-weight: normal;\n line-height: 21px;\n color: #2d2d2d;\n height: 44px;\n border: 1px solid #cccccc;\n border-radius: 4px;\n outline: none;\n background-color: #ffffff;\n padding: 12px;\n caret-color: #0a78b2;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-link-input {\n width: 100%;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-size-input {\n width: 90%;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn {\n border-radius: 1.375rem;\n width: 6.5rem;\n height: 2.75rem;\n border: 1px solid #009fe3;\n background-color: transparent;\n color: #009fe3;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn:first-child,\n .editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn:disabled {\n background: #009fe3;\n color: #ffffff;\n}\n\n.editor .rdw-editor .rdw-editor-main {\n min-height: 14rem;\n overflow: hidden;\n}\n\n.editor .rdw-editor .rdw-editor-main .DraftEditor-root {\n margin: 0 12px;\n}\n";
|
|
4728
|
+
styleInject(css_248z$r);
|
|
4658
4729
|
|
|
4659
4730
|
var TextEditorV2 = function TextEditorV2(_ref) {
|
|
4660
4731
|
var defaultValue = _ref.defaultValue,
|
|
@@ -4895,8 +4966,8 @@ var FormInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
|
|
|
4895
4966
|
}));
|
|
4896
4967
|
});
|
|
4897
4968
|
|
|
4898
|
-
var css_248z$
|
|
4899
|
-
styleInject(css_248z$
|
|
4969
|
+
var css_248z$s = ".radio-form-field-label input[type=\"radio\"]:checked + .radio-circle {\n --bg-opacity: 1;\n background-color: #0074DD;\n background-color: rgba(0, 116, 221, var(--bg-opacity));\n}\n\n.radio-form-field-label[data-has-error=\"true\"] .radio-circle {\n --border-opacity: 1;\n border-color: #c53030;\n border-color: rgba(197, 48, 48, var(--border-opacity));\n outline: 4px solid rgba(255, 98, 102, 0.3);\n outline-offset: 0;\n}\n\n.radio-form-field-label\n input[type=\"radio\"]:checked\n + .radio-circle\n .radio-inner-circle {\n --bg-opacity: 1;\n background-color: #fff;\n background-color: rgba(255, 255, 255, var(--bg-opacity));\n}\n";
|
|
4970
|
+
styleInject(css_248z$s);
|
|
4900
4971
|
|
|
4901
4972
|
var _excluded$i = ["text", "info", "isError", "innerRef", "className"];
|
|
4902
4973
|
|