@vchasno/ui-kit 0.2.9 → 0.2.11
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/CHANGELOG.md +19 -0
- package/dist/Datepicker/index.cjs.js +3 -3
- package/dist/Datepicker/index.cjs.js.map +1 -1
- package/dist/Datepicker/index.js +3 -3
- package/dist/Datepicker/index.js.map +1 -1
- package/dist/Datepicker/types/components/BubbleBox/index.d.ts +1 -0
- package/dist/Datepicker/types/components/Select/Select.d.ts +27 -0
- package/dist/Datepicker/types/components/Select/index.d.ts +1 -1
- package/dist/Datepicker/types/components/SvgBorder/SvgBorder.d.ts +18 -0
- package/dist/Datepicker/types/components/SvgBorder/index.d.ts +3 -0
- package/dist/Datepicker/types/components/SvgBorder/utils.d.ts +1 -0
- package/dist/Datepicker/types/components/index.d.ts +3 -1
- package/dist/Datepicker/types/index.d.ts +1 -0
- package/dist/Select/index.cjs.js +8 -4
- package/dist/Select/index.cjs.js.map +1 -1
- package/dist/Select/index.d.ts +34 -2
- package/dist/Select/index.js +5 -4
- package/dist/Select/index.js.map +1 -1
- package/dist/Select/types/components/BubbleBox/index.d.ts +1 -0
- package/dist/Select/types/components/Select/Select.d.ts +27 -0
- package/dist/Select/types/components/Select/index.d.ts +1 -1
- package/dist/Select/types/components/SvgBorder/SvgBorder.d.ts +18 -0
- package/dist/Select/types/components/SvgBorder/index.d.ts +3 -0
- package/dist/Select/types/components/SvgBorder/utils.d.ts +1 -0
- package/dist/Select/types/components/index.d.ts +3 -1
- package/dist/Select/types/index.d.ts +1 -0
- package/dist/SelectCreatable/index.cjs.js +3 -3
- package/dist/SelectCreatable/index.cjs.js.map +1 -1
- package/dist/SelectCreatable/index.js +3 -3
- package/dist/SelectCreatable/index.js.map +1 -1
- package/dist/SelectCreatable/types/components/BubbleBox/index.d.ts +1 -0
- package/dist/SelectCreatable/types/components/Select/Select.d.ts +27 -0
- package/dist/SelectCreatable/types/components/Select/index.d.ts +1 -1
- package/dist/SelectCreatable/types/components/SvgBorder/SvgBorder.d.ts +18 -0
- package/dist/SelectCreatable/types/components/SvgBorder/index.d.ts +3 -0
- package/dist/SelectCreatable/types/components/SvgBorder/utils.d.ts +1 -0
- package/dist/SelectCreatable/types/components/index.d.ts +3 -1
- package/dist/SelectCreatable/types/index.d.ts +1 -0
- package/dist/index.d.ts +26 -1
- package/dist/index.js +83 -40
- package/dist/index.js.map +1 -1
- package/dist/types/components/BubbleBox/index.d.ts +1 -0
- package/dist/types/components/Select/Select.d.ts +27 -0
- package/dist/types/components/Select/index.d.ts +1 -1
- package/dist/types/components/SvgBorder/SvgBorder.d.ts +18 -0
- package/dist/types/components/SvgBorder/index.d.ts +3 -0
- package/dist/types/components/SvgBorder/utils.d.ts +1 -0
- package/dist/types/components/index.d.ts +3 -1
- package/dist/types/index.d.ts +1 -0
- package/package.json +1 -1
- /package/dist/Datepicker/types/{components/BubbleBox → hooks}/useClientRect.d.ts +0 -0
- /package/dist/Select/types/{components/BubbleBox → hooks}/useClientRect.d.ts +0 -0
- /package/dist/SelectCreatable/types/{components/BubbleBox → hooks}/useClientRect.d.ts +0 -0
- /package/dist/types/{components/BubbleBox → hooks}/useClientRect.d.ts +0 -0
|
@@ -9,4 +9,31 @@ export interface SelectProps extends ReactSelectProps, Partial<WithLabel & WithH
|
|
|
9
9
|
dataQa?: string;
|
|
10
10
|
}
|
|
11
11
|
declare const Select: React.FC<SelectProps>;
|
|
12
|
+
export declare const SelectComponents: {
|
|
13
|
+
ClearIndicator: <Option_1, IsMulti extends boolean, Group extends import("react-select").GroupBase<Option_1>>(props: import("react-select").ClearIndicatorProps<Option_1, IsMulti, Group>) => import("@emotion/react").jsx.JSX.Element;
|
|
14
|
+
Control: <Option_1, IsMulti_1 extends boolean, Group_1 extends import("react-select").GroupBase<Option_1>>(props: import("react-select").ControlProps<Option_1, IsMulti_1, Group_1>) => import("@emotion/react").jsx.JSX.Element;
|
|
15
|
+
DropdownIndicator: <Option_2, IsMulti_2 extends boolean, Group_2 extends import("react-select").GroupBase<Option_2>>(props: import("react-select").DropdownIndicatorProps<Option_2, IsMulti_2, Group_2>) => import("@emotion/react").jsx.JSX.Element;
|
|
16
|
+
DownChevron: (props: import("react-select/dist/declarations/src/components/indicators").DownChevronProps) => import("@emotion/react").jsx.JSX.Element;
|
|
17
|
+
CrossIcon: (props: import("react-select/dist/declarations/src/components/indicators").CrossIconProps) => import("@emotion/react").jsx.JSX.Element;
|
|
18
|
+
Group: <Option_3, IsMulti_3 extends boolean, Group_3 extends import("react-select").GroupBase<Option_3>>(props: import("react-select").GroupProps<Option_3, IsMulti_3, Group_3>) => import("@emotion/react").jsx.JSX.Element;
|
|
19
|
+
GroupHeading: <Option_4, IsMulti_4 extends boolean, Group_4 extends import("react-select").GroupBase<Option_4>>(props: import("react-select").GroupHeadingProps<Option_4, IsMulti_4, Group_4>) => import("@emotion/react").jsx.JSX.Element;
|
|
20
|
+
IndicatorsContainer: <Option_5, IsMulti_5 extends boolean, Group_5 extends import("react-select").GroupBase<Option_5>>(props: import("react-select").IndicatorsContainerProps<Option_5, IsMulti_5, Group_5>) => import("@emotion/react").jsx.JSX.Element;
|
|
21
|
+
IndicatorSeparator: <Option_6, IsMulti_6 extends boolean, Group_6 extends import("react-select").GroupBase<Option_6>>(props: import("react-select").IndicatorSeparatorProps<Option_6, IsMulti_6, Group_6>) => import("@emotion/react").jsx.JSX.Element;
|
|
22
|
+
Input: <Option_7, IsMulti_7 extends boolean, Group_7 extends import("react-select").GroupBase<Option_7>>(props: import("react-select").InputProps<Option_7, IsMulti_7, Group_7>) => import("@emotion/react").jsx.JSX.Element;
|
|
23
|
+
LoadingIndicator: <Option_8, IsMulti_8 extends boolean, Group_8 extends import("react-select").GroupBase<Option_8>>({ innerProps, isRtl, size, ...restProps }: import("react-select").LoadingIndicatorProps<Option_8, IsMulti_8, Group_8>) => import("@emotion/react").jsx.JSX.Element;
|
|
24
|
+
Menu: <Option_9, IsMulti_9 extends boolean, Group_9 extends import("react-select").GroupBase<Option_9>>(props: import("react-select").MenuProps<Option_9, IsMulti_9, Group_9>) => import("@emotion/react").jsx.JSX.Element;
|
|
25
|
+
MenuList: <Option_10, IsMulti_10 extends boolean, Group_10 extends import("react-select").GroupBase<Option_10>>(props: import("react-select").MenuListProps<Option_10, IsMulti_10, Group_10>) => import("@emotion/react").jsx.JSX.Element;
|
|
26
|
+
MenuPortal: <Option_11, IsMulti_11 extends boolean, Group_11 extends import("react-select").GroupBase<Option_11>>(props: import("react-select/dist/declarations/src/components/Menu").MenuPortalProps<Option_11, IsMulti_11, Group_11>) => import("@emotion/react").jsx.JSX.Element | null;
|
|
27
|
+
LoadingMessage: <Option_12, IsMulti_12 extends boolean, Group_12 extends import("react-select").GroupBase<Option_12>>({ children, innerProps, ...restProps }: import("react-select").NoticeProps<Option_12, IsMulti_12, Group_12>) => import("@emotion/react").jsx.JSX.Element;
|
|
28
|
+
NoOptionsMessage: <Option_13, IsMulti_13 extends boolean, Group_13 extends import("react-select").GroupBase<Option_13>>({ children, innerProps, ...restProps }: import("react-select").NoticeProps<Option_13, IsMulti_13, Group_13>) => import("@emotion/react").jsx.JSX.Element;
|
|
29
|
+
MultiValue: <Option_14, IsMulti_14 extends boolean, Group_14 extends import("react-select").GroupBase<Option_14>>(props: import("react-select").MultiValueProps<Option_14, IsMulti_14, Group_14>) => import("@emotion/react").jsx.JSX.Element;
|
|
30
|
+
MultiValueContainer: <Option_15, IsMulti_15 extends boolean, Group_15 extends import("react-select").GroupBase<Option_15>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
|
|
31
|
+
MultiValueLabel: <Option_15_1, IsMulti_15_1 extends boolean, Group_15_1 extends import("react-select").GroupBase<Option_15_1>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_15_1, IsMulti_15_1, Group_15_1>) => import("@emotion/react").jsx.JSX.Element;
|
|
32
|
+
MultiValueRemove: typeof import("react-select/dist/declarations/src/components/MultiValue").MultiValueRemove;
|
|
33
|
+
Option: <Option_16, IsMulti_16 extends boolean, Group_16 extends import("react-select").GroupBase<Option_16>>(props: import("react-select").OptionProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element;
|
|
34
|
+
Placeholder: <Option_17, IsMulti_17 extends boolean, Group_17 extends import("react-select").GroupBase<Option_17>>(props: import("react-select").PlaceholderProps<Option_17, IsMulti_17, Group_17>) => import("@emotion/react").jsx.JSX.Element;
|
|
35
|
+
SelectContainer: <Option_18, IsMulti_18 extends boolean, Group_18 extends import("react-select").GroupBase<Option_18>>(props: import("react-select").ContainerProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element;
|
|
36
|
+
SingleValue: <Option_19, IsMulti_19 extends boolean, Group_19 extends import("react-select").GroupBase<Option_19>>(props: import("react-select").SingleValueProps<Option_19, IsMulti_19, Group_19>) => import("@emotion/react").jsx.JSX.Element;
|
|
37
|
+
ValueContainer: <Option_20, IsMulti_20 extends boolean, Group_20 extends import("react-select").GroupBase<Option_20>>(props: import("react-select").ValueContainerProps<Option_20, IsMulti_20, Group_20>) => import("@emotion/react").jsx.JSX.Element;
|
|
38
|
+
};
|
|
12
39
|
export default Select;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React, { HTMLAttributes } from 'react';
|
|
2
|
+
import './SvgBorder.global.css';
|
|
3
|
+
export interface SvgBorderProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
svgClassName?: string;
|
|
5
|
+
strokeDasharray?: string;
|
|
6
|
+
strokeWidth?: number;
|
|
7
|
+
color?: string;
|
|
8
|
+
borderRadius?: number;
|
|
9
|
+
animation?: 'border-offset';
|
|
10
|
+
animationPlay?: boolean;
|
|
11
|
+
animationDurationSec?: number;
|
|
12
|
+
dashoffset?: number | string;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* @link <https://css-tricks.com/svg-line-animation-works/>
|
|
16
|
+
*/
|
|
17
|
+
declare const SvgBorder: React.FC<SvgBorderProps>;
|
|
18
|
+
export default SvgBorder;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const composeRoundedBorderPath: (width: number, height: number, radiusOffset: number) => string;
|
|
@@ -32,5 +32,7 @@ export { default as Checkbox } from './Checkbox';
|
|
|
32
32
|
export type { CheckboxProps } from './Checkbox';
|
|
33
33
|
export { default as PulseDot } from './PulseDot';
|
|
34
34
|
export type { PulseDotProps } from './PulseDot';
|
|
35
|
-
export { default as BubbleBox } from './BubbleBox';
|
|
35
|
+
export { default as BubbleBox, composeBubblePath } from './BubbleBox';
|
|
36
36
|
export type { BubbleBoxProps } from './BubbleBox';
|
|
37
|
+
export { default as SvgBorder, composeRoundedBorderPath } from './SvgBorder';
|
|
38
|
+
export type { SvgBorderProps } from './SvgBorder';
|
package/dist/index.d.ts
CHANGED
|
@@ -222,4 +222,29 @@ interface BubbleBoxProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
222
222
|
}
|
|
223
223
|
declare const BubbleBox: React.FC<BubbleBoxProps>;
|
|
224
224
|
|
|
225
|
-
|
|
225
|
+
declare const composeBubblePath: (width: number, height: number, bubble: number, radiusOffset: number) => string;
|
|
226
|
+
|
|
227
|
+
interface SvgBorderProps extends HTMLAttributes<HTMLDivElement> {
|
|
228
|
+
svgClassName?: string;
|
|
229
|
+
strokeDasharray?: string;
|
|
230
|
+
strokeWidth?: number;
|
|
231
|
+
color?: string;
|
|
232
|
+
borderRadius?: number;
|
|
233
|
+
animation?: 'border-offset';
|
|
234
|
+
animationPlay?: boolean;
|
|
235
|
+
animationDurationSec?: number;
|
|
236
|
+
dashoffset?: number | string;
|
|
237
|
+
}
|
|
238
|
+
/**
|
|
239
|
+
* @link <https://css-tricks.com/svg-line-animation-works/>
|
|
240
|
+
*/
|
|
241
|
+
declare const SvgBorder: React.FC<SvgBorderProps>;
|
|
242
|
+
|
|
243
|
+
declare const composeRoundedBorderPath: (width: number, height: number, radiusOffset: number) => string;
|
|
244
|
+
|
|
245
|
+
declare const useClientRect: () => {
|
|
246
|
+
rect: DOMRect | null;
|
|
247
|
+
ref: React.RefObject<HTMLDivElement>;
|
|
248
|
+
};
|
|
249
|
+
|
|
250
|
+
export { Alert, type AlertProps, BubbleBox, type BubbleBoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, FlexBox, type FlexBoxProps, Input, InputMeta, type InputMetaProps, type InputProps, MaskInput, type MaskInputProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, PulseDot, type PulseDotProps, Spinner, type SpinnerProps, SvgBorder, type SvgBorderProps, Switch, type SwitchProps, Tabs, type TabsProps, Text, TextAreaInput, type TextAreaInputProps, TextInput, type TextInputProps, type TextProps, Title, type TitleProps, composeBubblePath, composeRoundedBorderPath, useClientRect };
|
package/dist/index.js
CHANGED
|
@@ -171,8 +171,8 @@ function styleInject(css, ref) {
|
|
|
171
171
|
}
|
|
172
172
|
}
|
|
173
173
|
|
|
174
|
-
var css_248z$
|
|
175
|
-
styleInject(css_248z$
|
|
174
|
+
var css_248z$j = ".vchasno-ui-flex-box {\n display: flex;\n max-width: 100%;\n flex-direction: row;\n align-content: flex-start;\n gap: 10px;\n}\n";
|
|
175
|
+
styleInject(css_248z$j);
|
|
176
176
|
|
|
177
177
|
var FlexBox = React.forwardRef(function (_a, ref) {
|
|
178
178
|
var className = _a.className, _b = _a.tagName, tagName = _b === void 0 ? 'div' : _b, children = _a.children, direction = _a.direction, gap = _a.gap, wrap = _a.wrap, align = _a.align, justify = _a.justify, grow = _a.grow, shrink = _a.shrink, _c = _a.style, style = _c === void 0 ? {} : _c, rest = __rest(_a, ["className", "tagName", "children", "direction", "gap", "wrap", "align", "justify", "grow", "shrink", "style"]);
|
|
@@ -180,8 +180,8 @@ var FlexBox = React.forwardRef(function (_a, ref) {
|
|
|
180
180
|
});
|
|
181
181
|
FlexBox.displayName = 'FlexBox';
|
|
182
182
|
|
|
183
|
-
var css_248z$
|
|
184
|
-
styleInject(css_248z$
|
|
183
|
+
var css_248z$i = ".vchasno-ui-spinner {\n position: relative;\n display: inline-block;\n width: 20px;\n height: 20px;\n}\n\n.vchasno-ui-spinner__svg {\n position: absolute;\n width: 100%;\n height: 100%;\n margin: auto;\n animation: spinner-rotate 1.3s linear infinite;\n inset: 0;\n transform-origin: center center;\n}\n\n.vchasno-ui-spinner__svg__circle {\n animation: spinner-rotate-dash 2s ease-in-out infinite;\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n stroke-linecap: round;\n stroke-width: 5px;\n}\n\n@keyframes spinner-rotate {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes spinner-rotate-dash {\n 0% {\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n }\n\n 50% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -35px;\n }\n\n 100% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -124px;\n }\n}\n";
|
|
184
|
+
styleInject(css_248z$i);
|
|
185
185
|
|
|
186
186
|
var Spinner = function (_a) {
|
|
187
187
|
var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, width = _a.width, height = _a.height, className = _a.className, style = _a.style;
|
|
@@ -190,8 +190,8 @@ var Spinner = function (_a) {
|
|
|
190
190
|
React.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
|
|
191
191
|
};
|
|
192
192
|
|
|
193
|
-
var css_248z$
|
|
194
|
-
styleInject(css_248z$
|
|
193
|
+
var css_248z$h = ".vchasno-ui-button {\n display: inline-flex;\n min-height: 40px;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 3px;\n background-color: var(--vchasno-ui-btn-default-bg);\n color: var(--vchasno-ui-btn-default-color);\n font-size: var(--vchasno-ui-btn-font-size);\n font-weight: 700;\n gap: 5px;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n user-select: none;\n}\n\n.vchasno-ui-button:disabled {\n cursor: not-allowed;\n opacity: 0.8;\n}\n\n.vchasno-ui-button:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-default-hover-bg);\n color: var(--vchasno-ui-btn-default-hover-color);\n cursor: pointer;\n}\n\n.vchasno-ui-button.--sm {\n padding: 0 15px;\n}\n\n.vchasno-ui-button.--md {\n min-width: 145px;\n padding: 0 20px;\n}\n\n.vchasno-ui-button.--lg {\n min-width: 200px;\n padding: 0 20px;\n}\n\n.vchasno-ui-button.--wide {\n width: 100%;\n}\n\n.vchasno-ui-button.--primary {\n border: 1px solid transparent;\n background-color: var(--vchasno-ui-btn-primary-bg);\n box-shadow: inset 0 -2px 0 rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: var(--vchasno-ui-btn-primary-color);\n box-shadow: none;\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary {\n background-color: var(--vchasno-ui-btn-secondary-bg);\n box-shadow: inset 0 -2px 0 rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-secondary-color);\n}\n\n.vchasno-ui-button:disabled.--primary,\n.vchasno-ui-button:disabled.--secondary {\n border-color: #b6cadb;\n background-color: #b6cadb;\n box-shadow: inset 0 -2px 0 rgb(139 163 182 / 50%);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-primary-hover-bg);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: var(--vchasno-ui-btn-default-hover-bg);\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary.--outline {\n border: 1px solid var(--vchasno-ui-btn-secondary-bg);\n background-color: var(--vchasno-ui-btn-secondary-color);\n box-shadow: none;\n color: var(--vchasno-ui-btn-secondary-bg);\n}\n\n.vchasno-ui-button.--secondary:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-secondary-hover-bg);\n color: var(--vchasno-ui-btn-secondary-color);\n}\n\n.vchasno-ui-button.--secondary.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-secondary-bg);\n background-color: rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-secondary-bg);\n}\n\n.vchasno-ui-button.--danger {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: var(--vchasno-ui-btn-danger-bg, rgb(239 101 98 / 20%));\n box-shadow: none;\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--danger.--outline {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: transparent;\n box-shadow: none;\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button:disabled.--danger {\n border: 1px solid #b6cadb;\n background-color: rgb(182 202 219 / 20%);\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--danger:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-danger-hover-bg, #ef6562);\n color: var(--vchasno-ui-btn-danger-hover-color, #fff);\n}\n\n.vchasno-ui-button.--danger.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--transparent .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-btn-default-color);\n transition: stroke var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-button.--transparent:hover .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-btn-default-hover-color);\n}\n\n.vchasno-ui-button:disabled.--transparent {\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--light {\n border: 1px solid transparent;\n background-color: var(--vchasno-ui-btn-light-bg, #fff);\n box-shadow: 0 2px 4px rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-light-color);\n}\n\n.vchasno-ui-button:disabled.--light {\n border: none;\n background-color: rgb(182 202 219 / 20%);\n box-shadow: 0 2px 4px rgb(0 0 0 / 10%);\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--light.--outline {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: var(--vchasno-ui-btn-primary-color);\n box-shadow: none;\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--light:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-light-hover-bg);\n color: var(--vchasno-ui-btn-primary-bg);\n}\n";
|
|
194
|
+
styleInject(css_248z$h);
|
|
195
195
|
|
|
196
196
|
var Button = React.forwardRef(function (_a, ref) {
|
|
197
197
|
var _b = _a.theme, theme = _b === void 0 ? "primary" : _b, _c = _a.type, type = _c === void 0 ? "button" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, _e = _a.outline, outline = _e === void 0 ? false : _e, _f = _a.loading, loading = _f === void 0 ? false : _f, _g = _a.wide, wide = _g === void 0 ? false : _g, className = _a.className, children = _a.children, rest = __rest(_a, ["theme", "type", "size", "outline", "loading", "wide", "className", "children"]);
|
|
@@ -205,8 +205,8 @@ var Button = React.forwardRef(function (_a, ref) {
|
|
|
205
205
|
});
|
|
206
206
|
Button.displayName = "Button";
|
|
207
207
|
|
|
208
|
-
var css_248z$
|
|
209
|
-
styleInject(css_248z$
|
|
208
|
+
var css_248z$g = ".vchasno-ui-meta {\n display: block;\n max-width: 100%;\n height: calc(var(--vchasno-ui-input-font-size) * 0.9);\n font-size: calc(var(--vchasno-ui-input-font-size) * 0.8);\n line-height: calc(var(--vchasno-ui-input-font-size) * 0.9);\n}\n\n.vchasno-ui-meta__hint,\n.vchasno-ui-meta__error {\n display: inline-block;\n overflow: hidden;\n max-width: inherit;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.vchasno-ui-meta__hint {\n color: var(--vchasno-ui-label-color-default);\n}\n\n.vchasno-ui-meta__error {\n color: var(--vchasno-ui-input-color-error);\n}\n";
|
|
209
|
+
styleInject(css_248z$g);
|
|
210
210
|
|
|
211
211
|
var InputMeta = function (_a) {
|
|
212
212
|
var className = _a.className, error = _a.error, hint = _a.hint;
|
|
@@ -215,8 +215,8 @@ var InputMeta = function (_a) {
|
|
|
215
215
|
error && React.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
|
|
216
216
|
};
|
|
217
217
|
|
|
218
|
-
var css_248z$
|
|
219
|
-
styleInject(css_248z$
|
|
218
|
+
var css_248z$f = ".vchasno-ui-label-text {\n position: relative;\n display: inline-flex;\n max-width: 100%;\n height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n align-self: flex-start;\n color: var(--vchasno-ui-label-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n gap: 3px;\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n text-overflow: ellipsis;\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n white-space: nowrap;\n}\n\n[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n color: var(--vchasno-ui-label-color-focused);\n}\n\n[class^='vchasno-ui-']:not(.--disabled).--required .vchasno-ui-label-text:hover {\n cursor: pointer;\n}\n\n.vchasno-ui-label-text sup {\n position: relative;\n top: -0.2em;\n display: none;\n color: var(--vchasno-ui-input-color-error);\n font-size: calc(var(--vchasno-ui-input-font-size) * 1.4);\n vertical-align: top;\n}\n\n[class^='vchasno-ui-'].--required .vchasno-ui-label-text sup {\n display: inline-block;\n}\n\n.vchasno-ui-label-text__title-icon {\n display: none;\n color: var(--vchasno-ui-label-color-default);\n transform: scale(0.8);\n}\n\n.vchasno-ui-input[title] .vchasno-ui-label-text__title-icon {\n display: block;\n}\n\n.vchasno-ui-label-text__content {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
|
|
219
|
+
styleInject(css_248z$f);
|
|
220
220
|
|
|
221
221
|
var LabelText = function (_a) {
|
|
222
222
|
var className = _a.className, children = _a.children;
|
|
@@ -224,13 +224,13 @@ var LabelText = function (_a) {
|
|
|
224
224
|
React.createElement("svg", { className: "vchasno-ui-label-text__title-icon", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
225
225
|
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15 7.5C15 11.6422 11.6423 15 7.5 15C3.3577 15 0 11.6422 0 7.5C0 3.35781 3.3577 0 7.5 0C11.6423 0 15 3.35781 15 7.5ZM5.87799 5.82184H8.52997V11.4711C8.52997 12.0179 8.08667 12.4612 7.53983 12.4612C6.99299 12.4612 6.54968 12.0179 6.54968 11.4711V7.57782H5.87799C5.39309 7.57782 5 7.18473 5 6.69983C5 6.21493 5.39309 5.82184 5.87799 5.82184ZM6.26221 3.66559C6.26221 3.50973 6.2899 3.36436 6.34483 3.22949C6.40431 3.09045 6.48466 2.97036 6.58636 2.86924C6.68805 2.76812 6.80655 2.6881 6.94229 2.62907C7.00404 2.603 7.06759 2.58269 7.13342 2.56813C7.21696 2.54984 7.30367 2.54059 7.39356 2.54059C7.54611 2.54059 7.69002 2.57004 7.82577 2.62907C7.86254 2.64499 7.89795 2.66248 7.932 2.68144C8.02416 2.73279 8.10724 2.79543 8.1817 2.86924C8.28339 2.97036 8.36375 3.09045 8.42322 3.22949C8.4541 3.29981 8.47725 3.37294 8.49178 3.44889C8.5054 3.51876 8.51221 3.59099 8.51221 3.66559C8.51221 3.74956 8.50358 3.83116 8.48633 3.91027C8.4718 3.97799 8.45046 4.0439 8.42322 4.108C8.36375 4.24287 8.28339 4.36081 8.1817 4.46194C8.12949 4.51374 8.07319 4.56001 8.01236 4.60076C7.95425 4.63947 7.89205 4.67333 7.82577 4.70211C7.69002 4.76113 7.54611 4.79059 7.39356 4.79059C7.31411 4.79059 7.23739 4.78348 7.16339 4.76914C7.08666 4.75447 7.01311 4.73213 6.94229 4.70211C6.80655 4.64308 6.68805 4.56306 6.58636 4.46194C6.48466 4.36081 6.40431 4.24287 6.34483 4.108C6.2899 3.96896 6.26221 3.82145 6.26221 3.66559Z", fill: "currentColor" })),
|
|
226
226
|
' ',
|
|
227
|
-
children,
|
|
227
|
+
React.createElement("span", { className: "vchasno-ui-label-text__content" }, children),
|
|
228
228
|
" ",
|
|
229
229
|
React.createElement("sup", null, "*")));
|
|
230
230
|
};
|
|
231
231
|
|
|
232
|
-
var css_248z$
|
|
233
|
-
styleInject(css_248z$
|
|
232
|
+
var css_248z$e = ".vchasno-ui-input {\n display: inline-flex;\n max-width: 100%;\n flex-direction: column;\n gap: 5px;\n}\n\n.vchasno-ui-input input::placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input .vchasno-ui-text-input,\n.vchasno-ui-input .vchasno-ui-mask-input {\n flex-grow: 1;\n}\n\n.vchasno-ui-input.--wide {\n width: 100%;\n}\n\n.vchasno-ui-input__wrapper {\n position: relative;\n display: flex;\n height: 40px;\n box-sizing: border-box;\n align-items: center;\n padding-right: 33px;\n padding-left: 10px;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 4px;\n background-color: var(--vchasno-ui-input-bg-color);\n gap: 5px;\n transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input__wrapper > input {\n max-width: 100%;\n}\n\n.vchasno-ui-input__wrapper__start-element {\n display: flex;\n flex-grow: 0;\n flex-shrink: 0;\n align-items: center;\n font-size: var(--vchasno-ui-input-font-size, 14px);\n line-height: var(--vchasno-ui-input-font-size, 14px);\n}\n\n.vchasno-ui-input__feedback {\n position: absolute;\n top: 10px;\n right: 10px;\n display: block;\n width: 18px;\n height: 18px;\n}\n\n.vchasno-ui-input .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-input.--disabled .vchasno-ui-input__wrapper {\n background-color: var(--vchasno-ui-input-bg-color-disabled);\n color: var(--vchasno-ui-input-font-color-disabled);\n}\n\n.vchasno-ui-input:not(.--disabled) .vchasno-ui-input__wrapper:hover {\n cursor: text;\n}\n\n.vchasno-ui-input:not(.--disabled):hover .vchasno-ui-input__wrapper,\n.vchasno-ui-input:not(.--disabled):focus-within .vchasno-ui-input__wrapper {\n border-color: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-input:not(.--disabled).--error .vchasno-ui-input__wrapper {\n border-color: var(--vchasno-ui-input-color-error);\n background-color: var(--vchasno-ui-input-bg-error);\n}\n\n.vchasno-ui-input.--disabled,\n.vchasno-ui-input.--disabled * {\n cursor: not-allowed;\n opacity: 0.8;\n}\n";
|
|
233
|
+
styleInject(css_248z$e);
|
|
234
234
|
|
|
235
235
|
var Input = function (_a) {
|
|
236
236
|
var className = _a.className, disabled = _a.disabled, startElement = _a.startElement, endElement = _a.endElement, error = _a.error, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, labelProps = _a.labelProps, children = _a.children;
|
|
@@ -259,8 +259,8 @@ var reactTextMask = {exports: {}};
|
|
|
259
259
|
var reactTextMaskExports = reactTextMask.exports;
|
|
260
260
|
var MaskedInput = /*@__PURE__*/getDefaultExportFromCjs(reactTextMaskExports);
|
|
261
261
|
|
|
262
|
-
var css_248z$
|
|
263
|
-
styleInject(css_248z$
|
|
262
|
+
var css_248z$d = ".vchasno-ui-mask-input {\n position: relative;\n font-size: var(--vchasno-ui-input-font-size);\n line-height: var(--vchasno-ui-input-font-size);\n}\n\n.vchasno-ui-mask-input::placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-mask-input:focus::placeholder {\n color: transparent;\n}\n";
|
|
263
|
+
styleInject(css_248z$d);
|
|
264
264
|
|
|
265
265
|
var MaskInput = function (_a) {
|
|
266
266
|
var className = _a.className, disabled = _a.disabled, startElement = _a.startElement, endElement = _a.endElement, error = _a.error, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, inputClassName = _a.inputClassName, labelProps = _a.labelProps, rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "inputClassName", "labelProps"]);
|
|
@@ -283,8 +283,8 @@ var composePaginationSteps = function (total, current) {
|
|
|
283
283
|
return display;
|
|
284
284
|
};
|
|
285
285
|
|
|
286
|
-
var css_248z$
|
|
287
|
-
styleInject(css_248z$
|
|
286
|
+
var css_248z$c = ".vchasno-ui-pagination {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n font-size: 14px;\n gap: 10px;\n}\n\n.vchasno-ui-pagination__item {\n display: flex;\n min-width: var(--vchasno-ui-pagination-size);\n height: var(--vchasno-ui-pagination-size);\n flex-grow: 0;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 1px solid transparent;\n border-radius: 6px;\n background-color: #fff;\n cursor: pointer;\n outline: 0;\n text-align: center;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n border var(--vchasno-ui-transition-duration-sec, 0.3s);\n user-select: none;\n vertical-align: middle;\n}\n\n.vchasno-ui-pagination__item-arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.vchasno-ui-pagination__item:not(.vchasno-ui-pagination__item-disabled):hover {\n background-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-pagination__item-active {\n border-color: var(--vchasno-ui-pagination-border-color, #6b5fff);\n}\n\n.vchasno-ui-pagination__item-disabled {\n cursor: not-allowed;\n opacity: 0.8;\n}\n\n.vchasno-ui-pagination__item-hidden {\n display: none;\n}\n";
|
|
287
|
+
styleInject(css_248z$c);
|
|
288
288
|
|
|
289
289
|
var Pagination = function (_a) {
|
|
290
290
|
var _b, _c;
|
|
@@ -345,8 +345,8 @@ var Pagination = function (_a) {
|
|
|
345
345
|
React.createElement("path", { d: "M7 9.99253C7 9.73253 7.1 9.48252 7.29 9.28253L11.29 5.29253C11.68 4.90253 12.32 4.90253 12.71 5.29253C13.1 5.68253 13.1 6.32253 12.71 6.71253L9.42 9.99253L12.71 13.2825C13.1 13.6725 13.1 14.3125 12.71 14.7025C12.32 15.0925 11.68 15.0925 11.29 14.7025L7.3 10.7125C7.1 10.5125 7 10.2525 7 9.99253Z", fill: "currentColor" })))));
|
|
346
346
|
};
|
|
347
347
|
|
|
348
|
-
var css_248z$
|
|
349
|
-
styleInject(css_248z$
|
|
348
|
+
var css_248z$b = ".vchasno-ui-text-input {\n font-size: var(--vchasno-ui-input-font-size);\n line-height: var(--vchasno-ui-input-font-size);\n}\n\n.vchasno-ui-text-input::-webkit-outer-spin-button,\n.vchasno-ui-text-input::-webkit-inner-spin-button {\n margin: 0;\n appearance: none;\n}\n\n/* Firefox */\n.vchasno-ui-text-input[type='number'] {\n appearance: textfield;\n}\n\n.vchasno-ui-text-input::placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: var(--vchasno-ui-input-font-size);\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-text-input:focus::placeholder {\n color: transparent;\n}\n";
|
|
349
|
+
styleInject(css_248z$b);
|
|
350
350
|
|
|
351
351
|
var TextInput = React.forwardRef(function (_a, ref) {
|
|
352
352
|
var className = _a.className, disabled = _a.disabled, startElement = _a.startElement, endElement = _a.endElement, error = _a.error, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, inputClassName = _a.inputClassName, labelProps = _a.labelProps, rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "inputClassName", "labelProps"]);
|
|
@@ -355,8 +355,8 @@ var TextInput = React.forwardRef(function (_a, ref) {
|
|
|
355
355
|
});
|
|
356
356
|
TextInput.displayName = 'TextInput';
|
|
357
357
|
|
|
358
|
-
var css_248z$
|
|
359
|
-
styleInject(css_248z$
|
|
358
|
+
var css_248z$a = ".vchasno-ui-text {\n color: var(--vchasno-ui-text-primary-color, #333);\n}\n\n.vchasno-ui-text.--ellipsis {\n display: inline-block;\n overflow: hidden;\n max-width: 100%;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.vchasno-ui-text.--secondary {\n color: var(--vchasno-ui-text-secondary-color, #6b8091);\n}\n\n.vchasno-ui-text.--success {\n color: var(--vchasno-ui-text-success-color, #1cb800);\n}\n\n.vchasno-ui-text.--warning {\n color: var(--vchasno-ui-text-warning-color, #ffb200);\n}\n\n.vchasno-ui-text.--danger {\n color: var(--vchasno-ui-text-error-color, #ff5937);\n}\n\n.vchasno-ui-text.--code {\n padding: 0.2em 0.4em 0.1em;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 3px;\n margin: 0 0.2em;\n background: hsl(0deg 0% 58.8% / 10%);\n font-size: 85%;\n}\n\n.vchasno-ui-text.--inherit {\n font-size: inherit;\n}\n\n.vchasno-ui-text.--link,\n.vchasno-ui-text.--like-link {\n color: #087dc1;\n cursor: pointer;\n}\n\n.vchasno-ui-text.--link {\n text-decoration-line: underline;\n}\n\n.vchasno-ui-text.--normal {\n font-size: 1rem;\n line-height: 1.1rem;\n}\n\n.vchasno-ui-text.--small {\n font-size: 0.8rem;\n line-height: 0.9rem;\n}\n\n.vchasno-ui-text.--large {\n font-size: 1.2rem;\n line-height: 1.3rem;\n}\n\n.vchasno-ui-text.--required::after {\n position: relative;\n top: -3px;\n right: -2px;\n color: var(--vchasno-ui-text-error-color, #ff5937);\n content: '*';\n}\n";
|
|
359
|
+
styleInject(css_248z$a);
|
|
360
360
|
|
|
361
361
|
var typeToCN = {
|
|
362
362
|
warning: '--warning',
|
|
@@ -390,8 +390,8 @@ var Text = React.forwardRef(function (_a, ref) {
|
|
|
390
390
|
});
|
|
391
391
|
Text.displayName = 'Text';
|
|
392
392
|
|
|
393
|
-
var css_248z$
|
|
394
|
-
styleInject(css_248z$
|
|
393
|
+
var css_248z$9 = ".vchasno-ui-title {\n color: var(--vchasno-ui-text-primary-color, #333);\n}\n\n.vchasno-ui-title.--ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nh1.vchasno-ui-title,\n.vchasno-ui-title h1 {\n font-size: 32px;\n font-weight: 500;\n line-height: 1.35;\n}\n\nh2.vchasno-ui-title,\n.vchasno-ui-title h2 {\n font-size: 30px;\n font-weight: 500;\n line-height: 1.35;\n}\n\nh3.vchasno-ui-title,\n.vchasno-ui-title h3 {\n font-size: 24px;\n font-weight: 500;\n line-height: 1.35;\n}\n\nh4.vchasno-ui-title,\n.vchasno-ui-title h4 {\n font-size: 20px;\n font-weight: 400;\n line-height: 1.4;\n}\n\nh5.vchasno-ui-title,\n.vchasno-ui-title h5 {\n font-size: 16px;\n font-weight: 400;\n line-height: 1.5;\n}\n";
|
|
394
|
+
styleInject(css_248z$9);
|
|
395
395
|
|
|
396
396
|
var Title = React.forwardRef(function (_a, ref) {
|
|
397
397
|
var _b = _a.level, level = _b === void 0 ? 1 : _b, className = _a.className, _c = _a.ellipsis, ellipsis = _c === void 0 ? false : _c, rest = __rest(_a, ["level", "className", "ellipsis"]);
|
|
@@ -412,8 +412,8 @@ var Title = React.forwardRef(function (_a, ref) {
|
|
|
412
412
|
});
|
|
413
413
|
Title.displayName = 'Title';
|
|
414
414
|
|
|
415
|
-
var css_248z$
|
|
416
|
-
styleInject(css_248z$
|
|
415
|
+
var css_248z$8 = ".vchasno-ui-paragraph {\n color: var(--vchasno-ui-text-primary-color);\n}\n\n.vchasno-ui-paragraph.--ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
|
|
416
|
+
styleInject(css_248z$8);
|
|
417
417
|
|
|
418
418
|
var Paragraph = React.forwardRef(function (_a, ref) {
|
|
419
419
|
var _b = _a.ellipsis, ellipsis = _b === void 0 ? false : _b, children = _a.children, className = _a.className, rest = __rest(_a, ["ellipsis", "children", "className"]);
|
|
@@ -686,8 +686,8 @@ var index = /* #__PURE__ */React.forwardRef(TextareaAutosize);
|
|
|
686
686
|
|
|
687
687
|
var TextareaAutosize$1 = index;
|
|
688
688
|
|
|
689
|
-
var css_248z$
|
|
690
|
-
styleInject(css_248z$
|
|
689
|
+
var css_248z$7 = ".vchasno-ui-textarea-input-container .vchasno-ui-input__wrapper {\n height: auto;\n min-height: 40px;\n padding-top: 10px;\n padding-bottom: 10px;\n}\n\n.vchasno-ui-textarea-input {\n width: 100%;\n border: 0;\n color: var(--vchasno-ui-text-primary-color);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n resize: none;\n}\n\n.vchasno-ui-textarea-input::placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-textarea-input:focus::placeholder {\n color: transparent;\n}\n";
|
|
690
|
+
styleInject(css_248z$7);
|
|
691
691
|
|
|
692
692
|
var TextAreaInput = React.forwardRef(function (_a, ref) {
|
|
693
693
|
var className = _a.className, disabled = _a.disabled, startElement = _a.startElement, endElement = _a.endElement, error = _a.error, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, textareaClassName = _a.textareaClassName, labelProps = _a.labelProps, rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "textareaClassName", "labelProps"]);
|
|
@@ -696,8 +696,8 @@ var TextAreaInput = React.forwardRef(function (_a, ref) {
|
|
|
696
696
|
});
|
|
697
697
|
TextAreaInput.displayName = 'TextAreaInput';
|
|
698
698
|
|
|
699
|
-
var css_248z$
|
|
700
|
-
styleInject(css_248z$
|
|
699
|
+
var css_248z$6 = ".vchasno-ui-alert {\n display: inline-flex;\n min-height: 40px;\n box-sizing: border-box;\n align-items: center;\n padding: 10px;\n border: 1px solid transparent;\n border-radius: 3px;\n font-size: 14px;\n gap: 10px;\n}\n\n.vchasno-ui-alert.--wide {\n width: 100%;\n}\n\n.vchasno-ui-alert.--left-border {\n border-left-width: 3px;\n}\n\n.vchasno-ui-alert__icon-wrapper,\n.vchasno-ui-alert__close-icon {\n display: flex;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n}\n\n.vchasno-ui-alert.--info {\n border-color: var(--vchasno-ui-alert-info-color, #087dc1);\n background-color: var(--vchasno-ui-alert-info-bg, #e9f4ff);\n}\n\n.vchasno-ui-alert.--info .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-info-color, #087dc1);\n}\n\n.vchasno-ui-alert.--warning {\n border-color: var(--vchasno-ui-alert-warning-color, #ffb200);\n background-color: var(--vchasno-ui-alert-warning-bg, rgb(255 201 123 / 20%));\n}\n\n.vchasno-ui-alert.--warning .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-warning-color, #ffb200);\n}\n\n.vchasno-ui-alert.--error {\n border-color: var(--vchasno-ui-alert-error-color, #ef6562);\n background-color: var(--vchasno-ui-alert-error-bg, rgb(239 101 98 / 10%));\n}\n\n.vchasno-ui-alert.--error .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-error-color, #ef6562);\n}\n\n.vchasno-ui-alert.--success {\n border-color: var(--vchasno-ui-alert-success-color, #1cb800);\n background-color: var(--vchasno-ui-alert-success-bg, rgb(28 184 0 / 10%));\n}\n\n.vchasno-ui-alert.--success .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-success-color, #1cb800);\n}\n\n.vchasno-ui-alert__close-icon {\n border-radius: 3px;\n transition: background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-alert__close-icon:hover {\n background-color: rgb(0 0 0 / 10%);\n cursor: pointer;\n}\n\n.vchasno-ui-alert.--close {\n display: none;\n}\n";
|
|
700
|
+
styleInject(css_248z$6);
|
|
701
701
|
|
|
702
702
|
var iconMap = {
|
|
703
703
|
info: function () { return (React.createElement("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
@@ -734,8 +734,8 @@ var Alert = function (_a) {
|
|
|
734
734
|
closeNode));
|
|
735
735
|
};
|
|
736
736
|
|
|
737
|
-
var css_248z$
|
|
738
|
-
styleInject(css_248z$
|
|
737
|
+
var css_248z$5 = ".vchasno-ui-switch {\n display: inline-flex;\n align-content: center;\n cursor: pointer;\n line-height: 20px;\n}\n\n.vchasno-ui-switch--bg {\n position: relative;\n z-index: 0;\n display: inline-flex;\n width: 36px;\n height: 20px;\n box-sizing: border-box;\n flex-shrink: 0;\n border-radius: 100px;\n background: var(--vchasno-ui-switch-color-bg);\n box-shadow: inset 0 2px 0 rgb(57 96 131 / 20%);\n transition: background-color 0.3s;\n}\n\n.vchasno-ui-switch__active .vchasno-ui-switch--bg {\n background: var(--vchasno-ui-switch-active-color-bg);\n box-shadow: inset 0 2px 0 rgb(57 96 131 / 20%);\n}\n\n.vchasno-ui-switch__disabled {\n cursor: default;\n opacity: 0.7;\n}\n\n.vchasno-ui-switch--circle {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n width: 16px;\n height: 16px;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background-color: var(--vchasno-ui-switch-circle-color);\n transform: translate(2px, 2px);\n transition: transform 0.3s;\n}\n\n.vchasno-ui-switch--bg > input:checked + .vchasno-ui-switch--circle {\n transform: translate(18px, 2px);\n}\n\n.vchasno-ui-spinner {\n color: var(--vchasno-ui-switch-spinner-color);\n}\n\n.vchasno-ui-switch--label {\n margin-left: 12px;\n color: var(--vchasno-ui-input-font-color);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: 20px;\n user-select: none;\n}\n";
|
|
738
|
+
styleInject(css_248z$5);
|
|
739
739
|
|
|
740
740
|
var Switch = React.forwardRef(function (_a, ref) {
|
|
741
741
|
var className = _a.className, label = _a.label, onChange = _a.onChange, onChecked = _a.onChecked, value = _a.value, _b = _a.defaultChecked, defaultChecked = _b === void 0 ? false : _b, disabled = _a.disabled, loading = _a.loading, id = _a.id, rest = __rest(_a, ["className", "label", "onChange", "onChecked", "value", "defaultChecked", "disabled", "loading", "id"]);
|
|
@@ -757,8 +757,8 @@ var Switch = React.forwardRef(function (_a, ref) {
|
|
|
757
757
|
});
|
|
758
758
|
Switch.displayName = 'Switch';
|
|
759
759
|
|
|
760
|
-
var css_248z$
|
|
761
|
-
styleInject(css_248z$
|
|
760
|
+
var css_248z$4 = ".vchasno-ui-tabs-wrapper {\n position: relative;\n width: 100%;\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n\n.vchasno-ui-tabs-wrapper::-webkit-scrollbar {\n display: none;\n}\n\n.--h-scroll {\n overflow: auto;\n}\n\n.vchasno-ui-tabs-wrapper-root {\n position: relative;\n}\n\n.vchasno-ui-tabs-wrapper-root::after,\n.vchasno-ui-tabs-wrapper-root::before {\n position: absolute;\n top: 0;\n bottom: 0;\n display: block;\n width: 30px;\n content: '';\n pointer-events: none;\n}\n\n.--ping-right::after {\n right: 0;\n box-shadow: inset -12px 0 8px -8px rgb(0 0 0 / 8%);\n}\n\n.--ping-left::before {\n left: 0;\n box-shadow: inset 12px 0 8px -8px rgb(0 0 0 / 8%);\n}\n\n.vchasno-ui-tabs {\n --active-color: var(--vchasno-ui-tabs-active-color, #087dc1);\n\n position: relative;\n display: flex;\n font-size: 16px;\n font-weight: 500;\n}\n\n.vchasno-ui-tabs__indicator {\n position: absolute;\n z-index: 1;\n bottom: -1px;\n left: 0;\n display: block;\n width: 10px;\n height: 3px;\n border-radius: 3px;\n background-color: var(--active-color);\n transition:\n width var(--vchasno-ui-transition-duration-sec, 0.3s),\n left var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.--h-scroll .vchasno-ui-tabs__indicator {\n display: none;\n}\n\n.vchasno-ui-tabs-wrapper-root.--skip-animation .vchasno-ui-tabs__indicator {\n transition: none;\n}\n\n.vchasno-ui-tabs__label-item {\n position: relative;\n display: inline-flex;\n height: 50px;\n flex-grow: 0;\n flex-shrink: 0;\n align-items: center;\n padding: 0 15px;\n color: #333;\n cursor: pointer;\n transition:\n color var(--vchasno-ui-transition-duration-sec),\n background-color var(--vchasno-ui-transition-duration-sec);\n user-select: none;\n}\n\n.vchasno-ui-tabs__label-item::after {\n position: absolute;\n z-index: 1;\n right: 0;\n bottom: 0;\n left: 0;\n display: block;\n height: 0;\n border-radius: 3px;\n background-color: var(--active-color);\n content: '';\n transition: height var(--vchasno-ui-transition-duration-sec);\n}\n\n.--h-scroll .vchasno-ui-tabs__label-item.--active::after {\n height: 3px;\n}\n\n.vchasno-ui-tabs-wrapper:not(.--h-scroll) .vchasno-ui-tabs {\n border-bottom: 1px solid #dbe5ea;\n}\n\n.vchasno-ui-tabs__label-item.--active {\n color: var(--active-color);\n}\n\n.vchasno-ui-tabs__label-item:not(.--disabled):hover {\n color: var(--active-color);\n}\n\n.vchasno-ui-tabs__label-item.--disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n";
|
|
761
|
+
styleInject(css_248z$4);
|
|
762
762
|
|
|
763
763
|
var Tabs = function (_a) {
|
|
764
764
|
var _b, _c;
|
|
@@ -827,8 +827,8 @@ var Tabs = function (_a) {
|
|
|
827
827
|
React.createElement(Spinner, { color: "var(--vchasno-ui-tabs-active-color, #087dc1)" })))));
|
|
828
828
|
};
|
|
829
829
|
|
|
830
|
-
var css_248z$
|
|
831
|
-
styleInject(css_248z$
|
|
830
|
+
var css_248z$3 = ".vchasno-ui-checkbox {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n gap: 10px;\n user-select: none;\n}\n\n.vchasno-ui-checkbox__box {\n display: inline-flex;\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--vchasno-ui-checkbox-border-color, #b6cadb);\n border-radius: 3px;\n outline: 2px solid transparent;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n border var(--vchasno-ui-transition-duration-sec, 0.3s),\n outline var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-checkbox .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-checkbox-bg-color);\n}\n\n.vchasno-ui-checkbox__svg {\n color: transparent;\n transform: scale(0) translateZ(0);\n transition:\n color var(--vchasno-ui-transition-duration-sec),\n transform var(--vchasno-ui-transition-duration-sec) cubic-bezier(0.12, 0.4, 0.29, 1.46);\n}\n\n.vchasno-ui-checkbox.--loading .vchasno-ui-checkbox__svg {\n display: none;\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n background-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-checkbox__svg {\n color: var(--vchasno-ui-checkbox-icon-color);\n transform: scale(1) translateZ(0);\n}\n\n.vchasno-ui-checkbox:hover > input:not(:disabled) + .vchasno-ui-checkbox__box,\n.vchasno-ui-checkbox > input:not(:disabled):active + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n outline: 1.5px solid #ab9eff;\n}\n\n.vchasno-ui-checkbox > input:disabled:checked + .vchasno-ui-checkbox__box {\n background-color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-checkbox-icon-color);\n}\n\n.vchasno-ui-checkbox__label {\n font-size: var(--vchasno-ui-checkbox-font-size);\n line-height: 1;\n user-select: none;\n}\n\n.vchasno-ui-checkbox.--disabled {\n color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\n cursor: not-allowed;\n}\n";
|
|
831
|
+
styleInject(css_248z$3);
|
|
832
832
|
|
|
833
833
|
var Checkbox = React.forwardRef(function (_a, ref) {
|
|
834
834
|
var className = _a.className, label = _a.label, partial = _a.partial, disabled = _a.disabled, loading = _a.loading, rest = __rest(_a, ["className", "label", "partial", "disabled", "loading"]);
|
|
@@ -846,8 +846,8 @@ var Checkbox = React.forwardRef(function (_a, ref) {
|
|
|
846
846
|
});
|
|
847
847
|
Checkbox.displayName = 'Checkbox';
|
|
848
848
|
|
|
849
|
-
var css_248z$
|
|
850
|
-
styleInject(css_248z$
|
|
849
|
+
var css_248z$2 = ".vchasno-ui-PulseDot {\n position: relative;\n width: var(--vchasno-ui-pulse-dot-size);\n height: var(--vchasno-ui-pulse-dot-size);\n border-radius: 50%;\n background-color: var(--vchasno-ui-pulse-dot-color);\n}\n\n.vchasno-ui-PulseDot::before,\n.vchasno-ui-PulseDot::after {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background: inherit;\n content: '';\n pointer-events: none;\n}\n\n.vchasno-ui-PulseDot::before {\n animation: pulse 2s ease-out infinite;\n}\n\n.vchasno-ui-PulseDot::after {\n animation: pulse 2s 1s ease-out infinite;\n}\n\n@keyframes pulse {\n 100% {\n opacity: 0;\n transform: scale(2);\n }\n}\n";
|
|
850
|
+
styleInject(css_248z$2);
|
|
851
851
|
|
|
852
852
|
var PulseDot = function (_a) {
|
|
853
853
|
var className = _a.className, color = _a.color, style = _a.style, size = _a.size, rest = __rest(_a, ["className", "color", "style", "size"]);
|
|
@@ -902,8 +902,8 @@ var composeBubblePath = function (width, height, bubble, radiusOffset) {
|
|
|
902
902
|
].join(' ');
|
|
903
903
|
};
|
|
904
904
|
|
|
905
|
-
var css_248z = ".vchasno-ui-BubbleBox {\n --vchasno-ui-bubble-height: 40px;\n --vchasno-ui-bubble-width: 40px;\n --vchasno-ui-bubble-shadow: 2px 4px 6px rgb(0 0 0 / 20%);\n\n position: relative;\n min-height: calc(var(--vchasno-ui-bubble-height) * 2);\n box-sizing: border-box;\n transition: var(--vchasno-ui-transition-duration-sec);\n}\n\n.vchasno-ui-BubbleBox__svg {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n overflow: visible;\n pointer-events: none;\n transform: translateZ(0);\n transition: var(--vchasno-ui-transition-duration-sec);\n}\n\n.vchasno-ui-BubbleBox__svg path {\n transition: var(--vchasno-ui-transition-duration-sec);\n}\n\n.vchasno-ui-BubbleBox__svg.vchasno-ui-BubbleBox__shadow {\n filter: drop-shadow(var(--vchasno-ui-bubble-shadow));\n}\n\n.vchasno-ui-BubbleBox__bubble {\n position: absolute;\n z-index: 1;\n right: 0;\n bottom: 0;\n display: flex;\n width: var(--vchasno-ui-bubble-width);\n height: var(--vchasno-ui-bubble-height);\n align-items: center;\n justify-content: center;\n padding: 0;\n border: 0;\n border-radius: var(--vchasno-ui-bubble-width);\n margin: 0;\n cursor: pointer;\n transition: var(--vchasno-ui-transition-duration-sec);\n}\n";
|
|
906
|
-
styleInject(css_248z);
|
|
905
|
+
var css_248z$1 = ".vchasno-ui-BubbleBox {\n --vchasno-ui-bubble-height: 40px;\n --vchasno-ui-bubble-width: 40px;\n --vchasno-ui-bubble-shadow: 2px 4px 6px rgb(0 0 0 / 20%);\n\n position: relative;\n min-height: calc(var(--vchasno-ui-bubble-height) * 2);\n box-sizing: border-box;\n transition: var(--vchasno-ui-transition-duration-sec);\n}\n\n.vchasno-ui-BubbleBox__svg {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n overflow: visible;\n pointer-events: none;\n transform: translateZ(0);\n transition: var(--vchasno-ui-transition-duration-sec);\n}\n\n.vchasno-ui-BubbleBox__svg path {\n transition: var(--vchasno-ui-transition-duration-sec);\n}\n\n.vchasno-ui-BubbleBox__svg.vchasno-ui-BubbleBox__shadow {\n filter: drop-shadow(var(--vchasno-ui-bubble-shadow));\n}\n\n.vchasno-ui-BubbleBox__bubble {\n position: absolute;\n z-index: 1;\n right: 0;\n bottom: 0;\n display: flex;\n width: var(--vchasno-ui-bubble-width);\n height: var(--vchasno-ui-bubble-height);\n align-items: center;\n justify-content: center;\n padding: 0;\n border: 0;\n border-radius: var(--vchasno-ui-bubble-width);\n margin: 0;\n cursor: pointer;\n transition: var(--vchasno-ui-transition-duration-sec);\n}\n";
|
|
906
|
+
styleInject(css_248z$1);
|
|
907
907
|
|
|
908
908
|
var BubbleBox = function (_a) {
|
|
909
909
|
var className = _a.className, controlClassName = _a.controlClassName, svgClassName = _a.svgClassName, control = _a.control, children = _a.children, backgroundColor = _a.backgroundColor, shadow = _a.shadow, _b = _a.bubbleSize, bubbleSize = _b === void 0 ? 40 : _b, borderColor = _a.borderColor, _c = _a.innerOffset, innerOffset = _c === void 0 ? 5 : _c, _d = _a.radiusOffset, radiusOffset = _d === void 0 ? 8 : _d, _e = _a.borderWith, borderWith = _e === void 0 ? 1 : _e, rest = __rest(_a, ["className", "controlClassName", "svgClassName", "control", "children", "backgroundColor", "shadow", "bubbleSize", "borderColor", "innerOffset", "radiusOffset", "borderWith"]);
|
|
@@ -913,13 +913,52 @@ var BubbleBox = function (_a) {
|
|
|
913
913
|
var elementWidth = (rect === null || rect === void 0 ? void 0 : rect.width) || 0;
|
|
914
914
|
var height = (rect === null || rect === void 0 ? void 0 : rect.height) || 0;
|
|
915
915
|
var css = __assign({ '--vchasno-ui-bubble-width': "".concat(bubbleWidth, "px"), '--vchasno-ui-bubble-height': "".concat(bubbleHeight, "px") }, rest.style);
|
|
916
|
+
var d = React.useMemo(function () {
|
|
917
|
+
return composeBubblePath(elementWidth, height, Math.max(bubbleHeight, bubbleWidth) + innerOffset * 2, radiusOffset);
|
|
918
|
+
}, [elementWidth, height, bubbleHeight, bubbleWidth, innerOffset, radiusOffset]);
|
|
916
919
|
return (React.createElement("div", __assign({}, rest, { ref: ref, className: cn('vchasno-ui-BubbleBox', className), style: css }),
|
|
917
920
|
rect && (React.createElement("svg", { className: cn('vchasno-ui-BubbleBox__svg', { 'vchasno-ui-BubbleBox__shadow': shadow }, svgClassName), width: elementWidth, height: height, xmlns: "http://www.w3.org/2000/svg" },
|
|
918
|
-
React.createElement("path", { d:
|
|
921
|
+
React.createElement("path", { d: d, fill: backgroundColor || 'transparent', stroke: borderColor || backgroundColor || 'transparent', strokeLinejoin: "round", strokeLinecap: "round", strokeWidth: borderWith }))),
|
|
919
922
|
control && (React.createElement("div", { className: cn('vchasno-ui-BubbleBox__bubble', controlClassName) }, control)),
|
|
920
923
|
children));
|
|
921
924
|
};
|
|
922
925
|
|
|
926
|
+
var composeRoundedBorderPath = function (width, height, radiusOffset) {
|
|
927
|
+
return [
|
|
928
|
+
"M0 ".concat(radiusOffset),
|
|
929
|
+
"L0 ".concat(height - radiusOffset),
|
|
930
|
+
"Q0 ".concat(height, " ").concat(radiusOffset, " ").concat(height),
|
|
931
|
+
"H".concat(width - radiusOffset),
|
|
932
|
+
"Q".concat(width, " ").concat(height, " ").concat(width, " ").concat(height - radiusOffset),
|
|
933
|
+
"V".concat(radiusOffset),
|
|
934
|
+
"Q".concat(width, " 0 ").concat(width - radiusOffset, " 0"),
|
|
935
|
+
"H".concat(radiusOffset),
|
|
936
|
+
"Q0 0 0 ".concat(radiusOffset),
|
|
937
|
+
].join(' ');
|
|
938
|
+
};
|
|
939
|
+
|
|
940
|
+
var css_248z = ".vchasno-ui-SvgBorder {\n --vchasno-ui-svg-border-animation-duration-sec: 1s;\n --vchasno-ui-svg-border-stroke-dashoffset: 100%;\n\n position: relative;\n}\n\n.vchasno-ui-SvgBorder__svg {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n overflow: visible;\n pointer-events: none;\n transform: translateZ(0);\n transition: var(--vchasno-ui-transition-duration-sec);\n}\n\n.vchasno-ui-SvgBorder__svg--animation-border-offset {\n animation: stroke-offset var(--vchasno-ui-svg-border-animation-duration-sec) linear infinite;\n animation-play-state: paused;\n}\n\n.vchasno-ui-SvgBorder__svg--animation-play {\n animation-play-state: running;\n}\n\n@keyframes stroke-offset {\n to {\n stroke-dashoffset: var(--vchasno-ui-svg-border-stroke-dashoffset);\n }\n}\n";
|
|
941
|
+
styleInject(css_248z);
|
|
942
|
+
|
|
943
|
+
/**
|
|
944
|
+
* @link <https://css-tricks.com/svg-line-animation-works/>
|
|
945
|
+
*/
|
|
946
|
+
var SvgBorder = function (_a) {
|
|
947
|
+
var className = _a.className, svgClassName = _a.svgClassName, _b = _a.strokeDasharray, strokeDasharray = _b === void 0 ? '4' : _b, _c = _a.strokeWidth, strokeWidth = _c === void 0 ? 1 : _c, _d = _a.color, color = _d === void 0 ? 'inherit' : _d, _e = _a.borderRadius, borderRadius = _e === void 0 ? 8 : _e, animation = _a.animation, animationPlay = _a.animationPlay, _f = _a.animationDurationSec, animationDurationSec = _f === void 0 ? 5 : _f, _g = _a.dashoffset, dashoffset = _g === void 0 ? '100%' : _g, children = _a.children, rest = __rest(_a, ["className", "svgClassName", "strokeDasharray", "strokeWidth", "color", "borderRadius", "animation", "animationPlay", "animationDurationSec", "dashoffset", "children"]);
|
|
948
|
+
var _h = useClientRect(), rect = _h.rect, ref = _h.ref;
|
|
949
|
+
var width = (rect === null || rect === void 0 ? void 0 : rect.width) || 0;
|
|
950
|
+
var height = (rect === null || rect === void 0 ? void 0 : rect.height) || 0;
|
|
951
|
+
var d = React.useMemo(function () { return composeRoundedBorderPath(width, height, borderRadius); }, [width, height, borderRadius]);
|
|
952
|
+
var css = __assign({ '--vchasno-ui-svg-border-animation-duration-sec': "".concat(animationDurationSec, "s"), '--vchasno-ui-svg-border-stroke-dashoffset': dashoffset }, rest.style);
|
|
953
|
+
return (React.createElement("div", __assign({}, rest, { ref: ref, className: cn('vchasno-ui-SvgBorder', className), style: css }),
|
|
954
|
+
React.createElement("svg", { className: cn('vchasno-ui-SvgBorder__svg', {
|
|
955
|
+
'vchasno-ui-SvgBorder__svg--animation-border-offset': animation === 'border-offset',
|
|
956
|
+
'vchasno-ui-SvgBorder__svg--animation-play': animationPlay,
|
|
957
|
+
}, svgClassName), width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg" },
|
|
958
|
+
React.createElement("path", { d: d, strokeLinejoin: "round", strokeLinecap: "round", stroke: color, fill: "transparent", strokeDasharray: strokeDasharray, strokeWidth: strokeWidth })),
|
|
959
|
+
children));
|
|
960
|
+
};
|
|
961
|
+
|
|
923
962
|
exports.Alert = Alert;
|
|
924
963
|
exports.BubbleBox = BubbleBox;
|
|
925
964
|
exports.Button = Button;
|
|
@@ -932,10 +971,14 @@ exports.Pagination = Pagination;
|
|
|
932
971
|
exports.Paragraph = Paragraph;
|
|
933
972
|
exports.PulseDot = PulseDot;
|
|
934
973
|
exports.Spinner = Spinner;
|
|
974
|
+
exports.SvgBorder = SvgBorder;
|
|
935
975
|
exports.Switch = Switch;
|
|
936
976
|
exports.Tabs = Tabs;
|
|
937
977
|
exports.Text = Text;
|
|
938
978
|
exports.TextAreaInput = TextAreaInput;
|
|
939
979
|
exports.TextInput = TextInput;
|
|
940
980
|
exports.Title = Title;
|
|
981
|
+
exports.composeBubblePath = composeBubblePath;
|
|
982
|
+
exports.composeRoundedBorderPath = composeRoundedBorderPath;
|
|
983
|
+
exports.useClientRect = useClientRect;
|
|
941
984
|
//# sourceMappingURL=index.js.map
|