@vchasno/ui-kit 0.3.28 → 0.3.29

package/dist/SelectCreatable/types/components/Select/customComponents.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { ClearIndicatorProps, DropdownIndicatorProps } from 'react-select';
+import { ClearIndicatorProps, DropdownIndicatorProps, MultiValueRemoveProps } from 'react-select';
 declare const _default: {
+    MultiValueRemove: (props: MultiValueRemoveProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => React.JSX.Element;
     DropdownIndicator: (props: DropdownIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => React.JSX.Element;
     LoadingIndicator: () => React.JSX.Element;
     IndicatorSeparator: () => null;

package/dist/SelectCreatable/types/components/Title/Title.d.ts

@@ -5,6 +5,7 @@ import './Title.global.css';
 export interface TitleProps extends EllipsisText, TextAlign, HTMLAttributes<HTMLHeadingElement> {
     level?: 1 | 2 | 3 | 4 | 5;
     className?: string;
+    pretty?: boolean;
 }
 export declare const Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<HTMLHeadingElement>>;
 export default Title;

package/dist/Snackbar/index.cjs.js

@@ -282,7 +282,7 @@ var LabelText = function (_a) {
         React$1.createElement("sup", null, "*")));
 };
 
-var css_248z$k = ".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    min-height: 50px;\n    box-sizing: border-box;\n    align-items: center;\n    padding-right: 33px;\n    padding-left: 16px;\n    border: 1px solid var(--vchasno-ui-input-border-color-default);\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-input-bg-color);\n    outline: solid 3px transparent;\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    outline-color: var(--vchasno-ui-input-outline-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    outline-color: var(--vchasno-ui-input-outline-color-error);\n}\n\n.vchasno-ui-input.--disabled,\n.vchasno-ui-input.--disabled * {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n";
+var css_248z$k = ".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    min-height: 50px;\n    box-sizing: border-box;\n    align-items: center;\n    padding-right: 33px;\n    padding-left: 16px;\n    border: 1px solid var(--vchasno-ui-input-border-color-default);\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-input-bg-color);\n    outline: solid 3px transparent;\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    margin-right: 5px;\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    outline-color: var(--vchasno-ui-input-outline-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    outline-color: var(--vchasno-ui-input-outline-color-error);\n}\n\n.vchasno-ui-input.--disabled,\n.vchasno-ui-input.--disabled * {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n";
 styleInject(css_248z$k);
 
 var Input = function (_a) {
@@ -294,7 +294,7 @@ var Input = function (_a) {
             '--error': error,
         }, className) }, labelProps),
         React$1.createElement("span", { className: "vchasno-ui-input__wrapper" },
-            React$1.createElement("span", { className: "vchasno-ui-input__wrapper__start-element" }, startElement),
+            startElement && (React$1.createElement("span", { className: "vchasno-ui-input__wrapper__start-element" }, startElement)),
             children,
             React$1.createElement(LabelText, null, label),
             React$1.createElement("span", { className: "vchasno-ui-input__feedback" }, loading && React$1.createElement(Spinner, { height: "100%" })),
@@ -364,12 +364,12 @@ Text.displayName = 'Text';
 var css_248z$f = ".--text-start {\n  text-align: start;\n}\n\n.--text-center {\n  text-align: center;\n}\n\n.--text-end {\n  text-align: end;\n}\n\n.--text-justify {\n  text-align: justify;\n}\n";
 styleInject(css_248z$f);
 
-var css_248z$e = ".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";
+var css_248z$e = ".vchasno-ui-title {\n    color: var(--vchasno-ui-text-primary-color, #333);\n}\n\n.vchasno-ui-title.--pretty {\n    text-wrap: pretty;\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";
 styleInject(css_248z$e);
 
 var Title = React$1.forwardRef(function (_a, ref) {
-    var _b = _a.level, level = _b === void 0 ? 1 : _b, className = _a.className, _c = _a.ellipsis, ellipsis = _c === void 0 ? false : _c, textAlign = _a.textAlign, rest = __rest(_a, ["level", "className", "ellipsis", "textAlign"]);
-    var classes = cn('vchasno-ui-title', className, { '--ellipsis': ellipsis }, textAlign && "--text-".concat(textAlign));
+    var _b = _a.level, level = _b === void 0 ? 1 : _b, className = _a.className, _c = _a.ellipsis, ellipsis = _c === void 0 ? false : _c, textAlign = _a.textAlign, _d = _a.pretty, pretty = _d === void 0 ? true : _d, rest = __rest(_a, ["level", "className", "ellipsis", "textAlign", "pretty"]);
+    var classes = cn('vchasno-ui-title', className, { '--ellipsis': ellipsis, '--pretty': pretty }, textAlign && "--text-".concat(textAlign));
     switch (level) {
         case 2:
             return React$1.createElement("h2", __assign({}, rest, { ref: ref, className: classes }));