test-stpr-ui-kit 0.6.15 → 1.0.0

package/dist/components/Input/types/index.d.ts

@@ -0,0 +1,40 @@
+import React, { ForwardedRef } from "react";
+import { ETooltipPosition } from "../../Tooltip";
+export type TInputVariant = "outlined" | "filled";
+export type TInputSize = "md" | "xl";
+export interface IInputProps {
+    name: string;
+    variant?: TInputVariant;
+    onChange?: TOnChangeInput;
+    onBlur?: TOnBlurInput;
+    value?: string;
+    error?: string;
+    isAbsolutePositionError?: boolean;
+    isClearable?: boolean;
+    pattern?: RegExp | string;
+    onMouseEnter?: () => void;
+    label?: string;
+    infoTooltipText?: string;
+    tooltipPosition?: ETooltipPosition;
+    disabled?: boolean;
+    required?: boolean;
+    isVisibleDefaultTitle?: boolean;
+    placeholder?: string;
+    classNameError?: string;
+    classNameLabel?: string;
+    classNameRoot?: string;
+    classNameBaseTooltipRoot?: string;
+    ref?: ForwardedRef<HTMLInputElement>;
+    mask?: string | (string | RegExp)[];
+    alwaysShowMask?: boolean;
+    maskChar?: string;
+    size?: TInputSize;
+}
+export type TOnChangeInput = (event: React.ChangeEvent<HTMLInputElement>, data: {
+    name: string;
+    value: string | null;
+}) => void;
+export type TOnBlurInput = (event: React.FocusEvent<HTMLInputElement>, data: {
+    name: string;
+    value: string | null;
+}) => void;

package/dist/components/Label/Label.css

@@ -0,0 +1 @@
+._spLabel_15xnk_1{--spui-label-font-size: 12px;display:flex;align-items:center;gap:var(--spui-spacing-1x);color:var(--spui-color-text-secondary);font-family:var(--spui-font-family-main),serif;font-weight:var(--spui-font-weight-regular);font-size:var(--spui-label-font-size);line-height:20px}._spLabel_15xnk_1{opacity:1;visibility:visible}._spLabel_15xnk_1{transition:all .3s ease-in-out}@starting-style{._spLabel_15xnk_1{opacity:0;visibility:hidden}}@media only screen and (min-width:768px){._spLabel_15xnk_1{--spui-label-font-size: 14px}}._spLabel__tooltipIcon_15xnk_30{width:var(--spui-icon-size-sm);height:var(--spui-icon-size-sm)}

package/dist/components/Label/Label.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { LabelProps } from "./types";
+export declare const Label: React.FC<LabelProps>;

package/dist/components/Label/Label.js

@@ -0,0 +1,36 @@
+import { jsxs as N, jsx as t } from "react/jsx-runtime";
+import e from "clsx";
+import a from "./Label.module.scss.js";
+import { InfoTooltip as T } from "../Tooltip/Tooltip.js";
+const R = (l) => {
+  const {
+    required: r,
+    label: i,
+    infoTooltipText: o,
+    tooltipPosition: p,
+    classNameRoot: s,
+    classNameBaseTooltipRoot: c
+  } = l, m = e({
+    [a.spLabel]: !0,
+    ...s && { [s]: !0 }
+  }), n = e({
+    [a.spLabel__tooltipIcon]: !0
+  });
+  return /* @__PURE__ */ N("label", { className: m, children: [
+    i,
+    r && /* @__PURE__ */ t("span", { children: "*" }),
+    o && /* @__PURE__ */ t(
+      T,
+      {
+        hover: !0,
+        position: p,
+        text: o,
+        classNameTriggerIcon: n,
+        classNameBaseTooltipRoot: c
+      }
+    )
+  ] });
+};
+export {
+  R as Label
+};

package/dist/components/Label/Label.module.scss.js

@@ -0,0 +1,9 @@
+import './Label.css';const o = "_spLabel_15xnk_1", s = "_spLabel__tooltipIcon_15xnk_30", t = {
+  spLabel: o,
+  spLabel__tooltipIcon: s
+};
+export {
+  t as default,
+  o as spLabel,
+  s as spLabel__tooltipIcon
+};

package/dist/components/Label/index.d.ts

@@ -0,0 +1,2 @@
+export { Label } from "./Label";
+export type { LabelProps } from "./types";

package/dist/components/Label/types/index.d.ts

@@ -0,0 +1,9 @@
+import { ETooltipPosition } from "../../Tooltip";
+export interface LabelProps {
+    required?: boolean;
+    label?: string;
+    infoTooltipText?: string;
+    tooltipPosition?: ETooltipPosition;
+    classNameRoot?: string;
+    classNameBaseTooltipRoot?: string;
+}

package/dist/components/Layer/Layer.css

@@ -0,0 +1 @@
+._layer_o453j_1{position:fixed;inset:0;overflow:hidden;overflow-y:auto;z-index:1400;background:var(--spui-color-surface-mask);padding:20px}._layer_o453j_1{opacity:1;visibility:visible}._layer_o453j_1{transition:all .3s ease-in-out}@starting-style{._layer_o453j_1{opacity:0;visibility:hidden}}._layer_o453j_1::-webkit-scrollbar{width:var(--spui-scrollbar-width);height:var(--spui-scrollbar-width)}._layer_o453j_1::-webkit-scrollbar-track{background:var(--spui-color-surface-transparent)}._layer_o453j_1::-webkit-scrollbar-thumb{background:var(--color-aqua-blue)}._layer_o453j_1::-webkit-scrollbar-thumb:hover{background:var(--color-accent-blue)}._layer_o453j_1,._layer_o453j_1 *{box-sizing:border-box}@media only screen and (min-width:768px){._layer_o453j_1{padding:32px}}@media only screen and (min-width:1440px){._layer_o453j_1{padding:60px}}._layer_hidden_o453j_49{visibility:hidden}

package/dist/components/Layer/Layer.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { LayerProps } from "./types";
+export declare const Layer: React.FC<LayerProps>;

package/dist/components/Layer/Layer.js

@@ -0,0 +1,26 @@
+import { jsx as r } from "react/jsx-runtime";
+import c from "clsx";
+import { useEffect as i } from "react";
+import t from "./Layer.module.scss.js";
+import { Portal as y } from "../Portal/Potral.js";
+const N = (s) => {
+  const {
+    children: d,
+    zIndex: l = 999,
+    isHiddenModal: n = !1,
+    classNameRoot: o
+  } = s, a = document.body, m = c({
+    [t.layer]: !0,
+    [t.layer_hidden]: n,
+    ...o && { [o]: !0 }
+  });
+  return i(() => {
+    const e = document.body;
+    return e.style.overflow = "hidden", () => {
+      e.style.overflow = "";
+    };
+  }, []), /* @__PURE__ */ r(y, { node: a, children: /* @__PURE__ */ r("div", { style: { zIndex: l }, className: m, children: d }) });
+};
+export {
+  N as Layer
+};

package/dist/components/Layer/Layer.module.scss.js

@@ -0,0 +1,9 @@
+import './Layer.css';const e = "_layer_o453j_1", _ = "_layer_hidden_o453j_49", a = {
+  layer: e,
+  layer_hidden: _
+};
+export {
+  a as default,
+  e as layer,
+  _ as layer_hidden
+};

package/dist/components/Layer/index.d.ts

@@ -0,0 +1,2 @@
+export { Layer } from "./Layer";
+export type { LayerProps } from "./types";

package/dist/components/Layer/types/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface LayerProps {
+    children: React.ReactNode;
+    zIndex?: number;
+    isHiddenModal?: boolean;
+    classNameRoot?: string;
+}

package/dist/components/MediaContextProvider/MediaContextProvider.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { MediaContextProviderProps } from "./types";
+export declare const MediaContextProvider: React.FC<MediaContextProviderProps>;

package/dist/components/MediaContextProvider/MediaContextProvider.js

@@ -0,0 +1,25 @@
+import { jsx as r } from "react/jsx-runtime";
+import { MediaContext as d } from "./constants/index.js";
+import { useMediaContext as m } from "./hooks/index.js";
+const x = (t) => {
+  const {
+    breakpoints: e = {
+      desktop: { minWidth: 1440 },
+      tablet: { minWidth: 768, maxWidth: 1439 },
+      mobile: { maxWidth: 767 }
+    },
+    children: i
+  } = t, { device: o } = m(e);
+  return /* @__PURE__ */ r(
+    d.Provider,
+    {
+      value: {
+        device: o
+      },
+      children: i
+    }
+  );
+};
+export {
+  x as MediaContextProvider
+};

package/dist/components/MediaContextProvider/constants/index.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { IMediaContext } from "../types";
+export declare const MediaContext: React.Context<IMediaContext>;

package/dist/components/MediaContextProvider/constants/index.js

@@ -0,0 +1,11 @@
+import { createContext as e } from "react";
+const o = e({
+  device: {
+    isDesktop: !1,
+    isMobile: !1,
+    isTablet: !1
+  }
+});
+export {
+  o as MediaContext
+};

package/dist/components/MediaContextProvider/hooks/index.d.ts

@@ -0,0 +1,8 @@
+import { TBreakpoints } from "../types";
+export declare const useMediaContext: (breakpoints: TBreakpoints) => {
+    device: {
+        isDesktop: boolean;
+        isTablet: boolean;
+        isMobile: boolean;
+    };
+};

package/dist/components/MediaContextProvider/hooks/index.js

@@ -0,0 +1,14 @@
+import { useMediaQuery as e } from "react-responsive";
+const b = (t) => {
+  const { desktop: o, tablet: s, mobile: i } = t, n = e(o), c = e(s), r = e(i);
+  return {
+    device: {
+      isDesktop: n,
+      isTablet: c,
+      isMobile: r
+    }
+  };
+};
+export {
+  b as useMediaContext
+};

package/dist/components/MediaContextProvider/index.d.ts

@@ -0,0 +1,4 @@
+export { MediaContext } from "./constants";
+export { useMediaContext } from "./hooks";
+export { MediaContextProvider } from "./MediaContextProvider";
+export type { IMediaContext, MediaContextProviderProps, TBreakpoints } from "./types";

package/dist/components/MediaContextProvider/types/index.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+export type TBreakpoints = {
+    desktop: {
+        minWidth: number;
+    };
+    tablet: {
+        minWidth: number;
+        maxWidth: number;
+    };
+    mobile: {
+        maxWidth: number;
+    };
+};
+export interface MediaContextProviderProps extends React.PropsWithChildren {
+    breakpoints?: TBreakpoints;
+}
+export interface IMediaContext {
+    device: {
+        isDesktop: boolean;
+        isTablet: boolean;
+        isMobile: boolean;
+    };
+}

package/dist/components/Modal/Modal.css

@@ -0,0 +1 @@
+._modalWrapper_r484v_1{display:flex;justify-content:center;height:100%;width:100%;--layer-padding: 20px;padding:var(--layer-padding)}@media only screen and (min-width:768px){._modalWrapper_r484v_1{--layer-padding: 32px}}@media only screen and (min-width:1440px){._modalWrapper_r484v_1{--layer-padding: 60px }}._modalWrapper--modalVerticalAlign-top_r484v_19{align-items:flex-start}._modalWrapper--modalVerticalAlign-center_r484v_22{align-items:center}._modalWrapper--textAlign-left_r484v_25{text-align:left}._modalWrapper--textAlign-center_r484v_28{text-align:center}._modalWrapper--textAlign-right_r484v_31{text-align:right}._modalWrapper__modal_r484v_34{display:flex;font-family:var(--spui-font-family-main),serif;font-weight:var(--spui-font-weight-regular);position:relative;background-color:var(--spui-color-surface-default);--modal-padding: 20px;padding:var(--modal-padding);flex-direction:column;gap:var(--modal-gap);width:100%;height:fit-content;min-width:335px}._modalWrapper__modal_r484v_34::-webkit-scrollbar{width:var(--spui-scrollbar-width);height:var(--spui-scrollbar-width)}._modalWrapper__modal_r484v_34::-webkit-scrollbar-track{background:var(--spui-color-surface-transparent)}._modalWrapper__modal_r484v_34::-webkit-scrollbar-thumb{background:var(--color-aqua-blue)}._modalWrapper__modal_r484v_34::-webkit-scrollbar-thumb:hover{background:var(--color-accent-blue)}._modalWrapper__modal--size-lg_r484v_61{--modal-gap: 32px}@media only screen and (min-width:768px){._modalWrapper__modal--size-lg_r484v_61{--modal-padding: 64px;--modal-gap: 48px;max-width:920px}}._modalWrapper__modal--size-md_r484v_71{--modal-gap: 24px}@media only screen and (min-width:768px){._modalWrapper__modal--size-md_r484v_71{--modal-padding: 32px;--modal-gap: 32px;max-width:600px}}._modalWrapper--modalVerticalAlign-center_r484v_22 ._modalWrapper__modal_r484v_34{max-height:calc(100vh - var(--layer-padding) * 2)}._modalWrapper__modal_disabled_r484v_84,._modalWrapper__modal_loading_r484v_84{pointer-events:none}._modalWrapper__content_r484v_87{width:100%}._modalWrapper--modalVerticalAlign-center_r484v_22 ._modalWrapper__content_r484v_87{width:calc(100% + var(--modal-padding) / 2);padding-right:calc(var(--modal-padding) / 2);overflow-y:auto;flex:1}._modalWrapper--modalVerticalAlign-center_r484v_22 ._modalWrapper__content_r484v_87::-webkit-scrollbar{width:var(--spui-scrollbar-width);height:var(--spui-scrollbar-width)}._modalWrapper--modalVerticalAlign-center_r484v_22 ._modalWrapper__content_r484v_87::-webkit-scrollbar-track{background:var(--spui-color-surface-secondary-hover)}._modalWrapper--modalVerticalAlign-center_r484v_22 ._modalWrapper__content_r484v_87::-webkit-scrollbar-thumb{background:var(--color-aqua-blue)}._modalWrapper--modalVerticalAlign-center_r484v_22 ._modalWrapper__content_r484v_87::-webkit-scrollbar-thumb:hover{background:var(--color-accent-blue)}._modalWrapper__content_disabled_r484v_109,._modalWrapper__content_loading_r484v_109{opacity:.5}._modalWrapper__header_r484v_112{width:calc(100% - 22px);display:flex;flex-direction:column;gap:12px}@media only screen and (min-width:768px){._modalWrapper__header_r484v_112{gap:16px;width:100%}}._modalWrapper__footer_r484v_124{width:100%}._modalWrapper__closeButton_r484v_127{padding:0;cursor:pointer;margin-left:0;position:absolute;top:20px;right:20px}@media only screen and (min-width:768px){._modalWrapper__closeButton--size-lg_r484v_136{top:37px;right:37px}._modalWrapper__closeButton--size-md_r484v_140{top:20px;right:20px}}._modalWrapper__closeButton_r484v_127 ._modalWrapper__closeButtonIconContainer--size-lg_r484v_145 svg{width:24px;height:24px}._modalWrapper__closeButton_r484v_127 ._modalWrapper__closeButtonIconContainer--size-md_r484v_149 svg{width:20px;height:20px}._modalWrapper__closeButton_disabled_r484v_153,._modalWrapper__closeButton_loading_r484v_153{opacity:.5}._modalWrapper__header_r484v_112,._modalWrapper__subHeader_r484v_156,._modalWrapper__footer_r484v_124{flex-shrink:0}._modalWrapper__header_disabled_r484v_159,._modalWrapper__header_loading_r484v_159,._modalWrapper__subHeader_disabled_r484v_159,._modalWrapper__subHeader_loading_r484v_159,._modalWrapper__footer_disabled_r484v_159,._modalWrapper__footer_loading_r484v_159{opacity:.5}._modalWrapper__spinnerOverlay_r484v_162{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#ffffffb3;z-index:10}

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ModalProps } from "./types";
+export declare const Modal: React.FC<ModalProps>;

package/dist/components/Modal/Modal.js

@@ -0,0 +1,89 @@
+import { jsx as a, jsxs as g } from "react/jsx-runtime";
+import r from "clsx";
+import e from "./Modal.module.scss.js";
+import { Layer as S } from "../Layer/Layer.js";
+import { Text as b } from "../Text/Text.js";
+import { Button as $ } from "../Button/Button.js";
+import { EIconName as F } from "../Icons/types/index.js";
+import { Spinner as L } from "../Spinner/Spinner.js";
+const w = (h) => {
+  const {
+    zIndex: R = 999,
+    isHiddenModal: C = !1,
+    disabled: l = !1,
+    loading: o = !1,
+    isVisibleCloseButton: H = !0,
+    children: p,
+    classNameLayerRoot: m,
+    classNameRoot: n,
+    classNameHeaderRoot: i,
+    classNameSubHeaderRoot: _,
+    classNameFooterRoot: c,
+    style: y,
+    modalVerticalAlign: u = "top",
+    textAlign: N = "left",
+    onClose: W,
+    header: t,
+    subHeader: s,
+    footer: f,
+    size: d = "lg"
+  } = h, v = r({
+    [e.modalWrapper]: !0,
+    [e[`modalWrapper--modalVerticalAlign-${u}`]]: u,
+    [e[`modalWrapper--textAlign-${N}`]]: N,
+    ...m && { [m]: !0 }
+  }), x = r({
+    [e.modalWrapper__modal]: !0,
+    [e[`modalWrapper__modal--size-${d}`]]: d,
+    [e.modalWrapper__modal_disabled]: l,
+    [e.modalWrapper__modal_loading]: o,
+    ...n && { [n]: !0 }
+  }), B = r({
+    [e.modalWrapper__closeButton]: !0,
+    [e.modalWrapper__closeButton_disabled]: l,
+    [e.modalWrapper__closeButton_loading]: o,
+    [e[`modalWrapper__closeButton--size-${d}`]]: d
+  }), M = r({
+    [e.modalWrapper__content]: !0,
+    [e.modalWrapper__content_disabled]: l,
+    [e.modalWrapper__content_loading]: o
+  }), z = r({
+    [e.modalWrapper__header]: !0,
+    [e.modalWrapper__header_disabled]: l,
+    [e.modalWrapper__header_loading]: o,
+    ...i && { [i]: !0 }
+  }), A = r({
+    [e.modalWrapper__subHeader]: !0,
+    [e.modalWrapper__subHeader_disabled]: l,
+    [e.modalWrapper__subHeader_loading]: o,
+    ..._ && { [_]: !0 }
+  }), I = r({
+    [e.modalWrapper__footer]: !0,
+    [e.modalWrapper__footer_disabled]: l,
+    [e.modalWrapper__footer_loading]: o,
+    ...c && { [c]: !0 }
+  });
+  return /* @__PURE__ */ a(S, { zIndex: R, isHiddenModal: C, classNameRoot: v, children: /* @__PURE__ */ g("div", { className: x, style: y, children: [
+    (t || s) && /* @__PURE__ */ g("div", { className: z, children: [
+      typeof t == "string" ? /* @__PURE__ */ a(b, { type: "h3", children: t }) : t,
+      s && /* @__PURE__ */ a("div", { className: A, children: typeof s == "string" ? /* @__PURE__ */ a(b, { children: s }) : s })
+    ] }),
+    p && /* @__PURE__ */ a("div", { className: M, children: p }),
+    f && /* @__PURE__ */ a("div", { className: I, children: f }),
+    H && W && /* @__PURE__ */ a(
+      $,
+      {
+        classNameRoot: B,
+        onClick: W,
+        startIconName: F.Close,
+        variant: "link",
+        noPadding: !0,
+        isOnlyIcon: !0
+      }
+    ),
+    o && /* @__PURE__ */ a("div", { className: e.modalWrapper__spinnerOverlay, children: /* @__PURE__ */ a(L, { size: "lg" }) })
+  ] }) });
+};
+export {
+  w as Modal
+};

package/dist/components/Modal/Modal.module.scss.js

@@ -0,0 +1,56 @@
+import './Modal.css';const _ = "_modalWrapper_r484v_1", a = "_modalWrapper__modal_r484v_34", r = "_modalWrapper__modal_disabled_r484v_84", e = "_modalWrapper__modal_loading_r484v_84", o = "_modalWrapper__content_r484v_87", l = "_modalWrapper__content_disabled_r484v_109", d = "_modalWrapper__content_loading_r484v_109", p = "_modalWrapper__header_r484v_112", t = "_modalWrapper__footer_r484v_124", n = "_modalWrapper__closeButton_r484v_127", m = "_modalWrapper__closeButton_disabled_r484v_153", s = "_modalWrapper__closeButton_loading_r484v_153", W = "_modalWrapper__subHeader_r484v_156", i = "_modalWrapper__header_disabled_r484v_159", c = "_modalWrapper__header_loading_r484v_159", g = "_modalWrapper__subHeader_disabled_r484v_159", v = "_modalWrapper__subHeader_loading_r484v_159", b = "_modalWrapper__footer_disabled_r484v_159", u = "_modalWrapper__footer_loading_r484v_159", B = "_modalWrapper__spinnerOverlay_r484v_162", f = {
+  modalWrapper: _,
+  "modalWrapper--modalVerticalAlign-top": "_modalWrapper--modalVerticalAlign-top_r484v_19",
+  "modalWrapper--modalVerticalAlign-center": "_modalWrapper--modalVerticalAlign-center_r484v_22",
+  "modalWrapper--textAlign-left": "_modalWrapper--textAlign-left_r484v_25",
+  "modalWrapper--textAlign-center": "_modalWrapper--textAlign-center_r484v_28",
+  "modalWrapper--textAlign-right": "_modalWrapper--textAlign-right_r484v_31",
+  modalWrapper__modal: a,
+  "modalWrapper__modal--size-lg": "_modalWrapper__modal--size-lg_r484v_61",
+  "modalWrapper__modal--size-md": "_modalWrapper__modal--size-md_r484v_71",
+  modalWrapper__modal_disabled: r,
+  modalWrapper__modal_loading: e,
+  modalWrapper__content: o,
+  modalWrapper__content_disabled: l,
+  modalWrapper__content_loading: d,
+  modalWrapper__header: p,
+  modalWrapper__footer: t,
+  modalWrapper__closeButton: n,
+  "modalWrapper__closeButton--size-lg": "_modalWrapper__closeButton--size-lg_r484v_136",
+  "modalWrapper__closeButton--size-md": "_modalWrapper__closeButton--size-md_r484v_140",
+  "modalWrapper__closeButtonIconContainer--size-lg": "_modalWrapper__closeButtonIconContainer--size-lg_r484v_145",
+  "modalWrapper__closeButtonIconContainer--size-md": "_modalWrapper__closeButtonIconContainer--size-md_r484v_149",
+  modalWrapper__closeButton_disabled: m,
+  modalWrapper__closeButton_loading: s,
+  modalWrapper__subHeader: W,
+  modalWrapper__header_disabled: i,
+  modalWrapper__header_loading: c,
+  modalWrapper__subHeader_disabled: g,
+  modalWrapper__subHeader_loading: v,
+  modalWrapper__footer_disabled: b,
+  modalWrapper__footer_loading: u,
+  modalWrapper__spinnerOverlay: B
+};
+export {
+  f as default,
+  _ as modalWrapper,
+  n as modalWrapper__closeButton,
+  m as modalWrapper__closeButton_disabled,
+  s as modalWrapper__closeButton_loading,
+  o as modalWrapper__content,
+  l as modalWrapper__content_disabled,
+  d as modalWrapper__content_loading,
+  t as modalWrapper__footer,
+  b as modalWrapper__footer_disabled,
+  u as modalWrapper__footer_loading,
+  p as modalWrapper__header,
+  i as modalWrapper__header_disabled,
+  c as modalWrapper__header_loading,
+  a as modalWrapper__modal,
+  r as modalWrapper__modal_disabled,
+  e as modalWrapper__modal_loading,
+  B as modalWrapper__spinnerOverlay,
+  W as modalWrapper__subHeader,
+  g as modalWrapper__subHeader_disabled,
+  v as modalWrapper__subHeader_loading
+};

package/dist/components/Modal/hooks/index.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+interface UseModalParams {
+    initialValue?: never;
+}
+export declare const useModal: (params?: UseModalParams) => {
+    isOpen: boolean;
+    modalData: {
+        [name: string]: any;
+    } | null;
+    onOpenModal: (modalData: {
+        [name: string]: boolean | NonNullable<unknown>;
+    }, isKeepRest?: boolean) => void;
+    onCloseModal: (_event?: React.MouseEvent<HTMLButtonElement>, closeData?: {
+        [name: string]: boolean | NonNullable<unknown>;
+    }) => void;
+};
+export {};

package/dist/components/Modal/hooks/index.js

@@ -0,0 +1,25 @@
+import { useState as r } from "react";
+const M = (s = {}) => {
+  const { initialValue: a = null } = s, [l, o] = r(a);
+  return {
+    isOpen: !!l,
+    modalData: l,
+    onOpenModal: (e, n = !1) => {
+      if (n) {
+        o((t) => ({ ...t, ...e }));
+        return;
+      }
+      o(e);
+    },
+    onCloseModal: (e, n) => {
+      if (n && Object.keys(n).length > 0) {
+        o((t) => ({ ...t, ...n }));
+        return;
+      }
+      o(null);
+    }
+  };
+};
+export {
+  M as useModal
+};

package/dist/components/Modal/index.d.ts

@@ -0,0 +1,3 @@
+export { useModal } from "./hooks";
+export { Modal } from "./Modal";
+export type { ModalProps } from "./types";

package/dist/components/Modal/types/index.d.ts

@@ -0,0 +1,24 @@
+import React, { CSSProperties, ReactNode } from "react";
+export type TModalVerticalAlign = "center" | "top";
+export type TTextAlign = "center" | "left" | "right";
+export type TModalSize = "md" | "lg";
+export interface ModalProps extends React.PropsWithChildren {
+    zIndex?: number;
+    size?: TModalSize;
+    modalVerticalAlign?: TModalVerticalAlign;
+    textAlign?: TTextAlign;
+    isHiddenModal?: boolean;
+    isVisibleCloseButton?: boolean;
+    classNameRoot?: string;
+    classNameHeaderRoot?: string;
+    classNameSubHeaderRoot?: string;
+    classNameFooterRoot?: string;
+    classNameLayerRoot?: string;
+    header: string | ReactNode;
+    footer?: ReactNode;
+    style?: CSSProperties;
+    subHeader?: ReactNode;
+    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+    loading?: boolean;
+}

package/dist/components/Portal/Potral.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { PortalProps } from "./types";
+export declare const Portal: React.FC<PortalProps>;

package/dist/components/Portal/Potral.js

@@ -0,0 +1,18 @@
+import { useState as u, useEffect as c } from "react";
+import a from "react-dom";
+const f = ({ children: i, node: t, classNameRoot: r }) => {
+  const [n, o] = u(() => t ?? null);
+  return c(() => {
+    if (t) {
+      o(t);
+      return;
+    }
+    const e = document.createElement("div");
+    return r && (e.className = r), document.body.appendChild(e), o(e), () => {
+      document.body.removeChild(e);
+    };
+  }, [t, r]), n ? a.createPortal(i, n) : null;
+};
+export {
+  f as Portal
+};

package/dist/components/Portal/index.d.ts

@@ -0,0 +1,2 @@
+export { Portal } from "./Potral";
+export type { PortalProps } from "./types";

package/dist/components/Portal/types/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface PortalProps extends React.PropsWithChildren {
+    node?: Element | DocumentFragment | null;
+    classNameRoot?: string;
+}

package/dist/components/ProgressWrapper/ProgressWrapper.css

@@ -0,0 +1 @@
+@charset "UTF-8";._progressWrapper_iry74_2{position:relative;width:100%;z-index:1;transition:background .3s ease}._progressWrapper_iry74_2{opacity:1;visibility:visible}._progressWrapper_iry74_2{transition:all .3s ease-in-out}@starting-style{._progressWrapper_iry74_2{opacity:0;visibility:hidden}}._progressWrapper_loading_iry74_21{opacity:.7;pointer-events:none;cursor:not-allowed}._progressWrapper_loading_iry74_21._progressWrapper--animated-pulse_iry74_26{animation:_pulse_iry74_1 2s infinite}._progressWrapper_loading_iry74_21._progressWrapper--animated-backgroundProgress_iry74_29{background:linear-gradient(to right,var(--spui-color-blue-50) var(--progress, 0%),var(--spui-color-surface-default) var(--progress, 0%))}._progressWrapper__progressBadge_iry74_32{z-index:2;position:absolute;top:2px;right:2px;padding:var(--spui-spacing-1x);padding-left:var(--spui-spacing-2x);font-size:12px;font-weight:var(--spui-font-weight-medium);font-variant-numeric:tabular-nums;color:var(--spui-color-text-secondary);transition:all .5s ease}._progressWrapper__progressBadge_loading_iry74_45{color:var(--spui-color-text-action)}@media only screen and (min-width:768px){._progressWrapper__progressBadge_iry74_32{padding:var(--spui-spacing-2x);padding-left:var(--spui-spacing-3x);font-size:14px}}@keyframes _pulse_iry74_1{0%{opacity:1}50%{opacity:.5}to{opacity:1}}

package/dist/components/ProgressWrapper/ProgressWrapper.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ProgressWrapperProps } from "./types";
+export declare const ProgressWrapper: React.FC<ProgressWrapperProps>;

package/dist/components/ProgressWrapper/ProgressWrapper.js

@@ -0,0 +1,50 @@
+import { jsxs as g } from "react/jsx-runtime";
+import n from "clsx";
+import { useAnimatedValue as R } from "./hooks/index.js";
+import r from "./ProgressWrapper.module.scss.js";
+import { Text as W } from "../Text/Text.js";
+const b = (d) => {
+  const {
+    value: m,
+    classNameRoot: o,
+    classNameProgressBadgeRoot: a,
+    duration: c = 2e3,
+    children: i,
+    doneValue: t = 100,
+    animationVariant: s = "backgroundProgress",
+    onSuccessLoaded: l
+  } = d, { animatedValue: p, isLoading: e } = R({
+    targetValue: m,
+    duration: c,
+    doneValue: t,
+    onSuccessLoaded: l
+  }), u = n({
+    [r.progressWrapper]: !0,
+    [r[`progressWrapper--animated-${s}`]]: s,
+    [r.progressWrapper_loading]: e,
+    ...o && { [o]: !0 }
+  }), N = n({
+    [r.progressWrapper__progressBadge]: !0,
+    [r.progressWrapper__progressBadge_loading]: e,
+    ...a && { [a]: !0 }
+  }), P = {
+    "--progress": `${p / t * 100}%`
+  };
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      className: u,
+      style: s === "backgroundProgress" ? P : void 0,
+      children: [
+        i,
+        e && /* @__PURE__ */ g(W, { classNameRoot: N, children: [
+          p,
+          "%"
+        ] })
+      ]
+    }
+  );
+};
+export {
+  b as ProgressWrapper
+};

package/dist/components/ProgressWrapper/ProgressWrapper.module.scss.js

@@ -0,0 +1,17 @@
+import './ProgressWrapper.css';const r = "_progressWrapper_iry74_2", s = "_progressWrapper_loading_iry74_21", p = "_pulse_iry74_1", e = "_progressWrapper__progressBadge_iry74_32", a = "_progressWrapper__progressBadge_loading_iry74_45", o = {
+  progressWrapper: r,
+  progressWrapper_loading: s,
+  "progressWrapper--animated-pulse": "_progressWrapper--animated-pulse_iry74_26",
+  pulse: p,
+  "progressWrapper--animated-backgroundProgress": "_progressWrapper--animated-backgroundProgress_iry74_29",
+  progressWrapper__progressBadge: e,
+  progressWrapper__progressBadge_loading: a
+};
+export {
+  o as default,
+  r as progressWrapper,
+  e as progressWrapper__progressBadge,
+  a as progressWrapper__progressBadge_loading,
+  s as progressWrapper_loading,
+  p as pulse
+};

package/dist/components/ProgressWrapper/constants/index.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_DURATION = 2000;

package/dist/components/ProgressWrapper/constants/index.js

@@ -0,0 +1,4 @@
+const e = 2e3;
+export {
+  e as DEFAULT_DURATION
+};

package/dist/components/ProgressWrapper/hooks/index.d.ts

@@ -0,0 +1,5 @@
+import { TUseAnimatedValueProps } from "../types";
+export declare const useAnimatedValue: (props: TUseAnimatedValueProps) => {
+    animatedValue: number;
+    isLoading: boolean;
+};