armtek-uikit-react 1.0.266 → 1.0.268

package/lib/cjs/ui/Modal/BaseModal.cjs

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const ui_Form_FormControls_FormControls = require("../Form/FormControls/FormControls.cjs");
+const ui_ButtonIcon_ButtonIcon = require("../ButtonIcon/ButtonIcon.cjs");
+const ui_Modal_const = require("./const.cjs");
+const BaseModal = (props) => {
+  const {
+    className,
+    title,
+    children,
+    onSubmit,
+    onClose,
+    onCancel,
+    submitProps,
+    cancelProps,
+    classes,
+    ...divProps
+  } = props;
+  const showControls = !!onSubmit || !!onCancel;
+  const titleId = React.useId();
+  const hasTitle = !!title;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "base-modal", ...divProps, role: "dialog", "aria-modal": true, "aria-labelledby": hasTitle ? titleId : void 0, tabIndex: -1, className: clsx(className, "arm-modal", classes == null ? void 0 : classes.root), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "arm-modal__inner", children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "base-modal-header", className: clsx("arm-modal__header", classes == null ? void 0 : classes.header), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { id: titleId, "data-testid": "base-modal-title", className: clsx("arm-modal__title", classes == null ? void 0 : classes.title), children: [
+      title,
+      onClose && /* @__PURE__ */ jsxRuntime.jsx(ui_ButtonIcon_ButtonIcon.default, { "data-testid": "base-modal-close", variant: "transparent", onClick: onClose, className: clsx("arm-modal__close", classes == null ? void 0 : classes.close), color: "neutral", size: "medium", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material_icon", children: "close" }) })
+    ] }) }),
+    !title && onClose && /* @__PURE__ */ jsxRuntime.jsx(ui_ButtonIcon_ButtonIcon.default, { "data-testid": "base-modal-close", variant: "transparent", onClick: onClose, className: clsx("arm-modal__close", "arm-modal__close_noHeader", classes == null ? void 0 : classes.close), color: "neutral", size: "medium", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material_icon", children: "close" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "base-modal-body", className: clsx(ui_Modal_const.MODAL_BODY_CLASSNAME, classes == null ? void 0 : classes.body), children: /* @__PURE__ */ jsxRuntime.jsx("div", { children }) }),
+    showControls && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "base-modal-footer", className: clsx(ui_Modal_const.MODAL_FOOTER_CLASSNAME, classes == null ? void 0 : classes.footer), children: /* @__PURE__ */ jsxRuntime.jsx(ui_Form_FormControls_FormControls.default, { "data-testid": "base-modal-controls", className: clsx(classes == null ? void 0 : classes.formControls, "arm-modal__controls"), onSubmit, onCancel, submitProps, cancelProps }) })
+  ] }) }) });
+};
+exports.BaseModal = BaseModal;

package/lib/cjs/ui/Modal/Modal.cjs

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const ui_Modal_BaseModal = require("./BaseModal.cjs");
+const ui_BackDrop_BackDrop = require("../BackDrop/BackDrop.cjs");
+const reactTransitionGroup = require("react-transition-group");
+const ui_Form_FormControls_const = require("../Form/FormControls/const.cjs");
+const ui_Modal_const = require("./const.cjs");
+const lib_hooks_useEventCallback = require("../../lib/hooks/useEventCallback.cjs");
+const BACKDROP_CLASSNAME = "arm-modal__backdrop";
+function isTopmostModal(backdropContainer) {
+  let nextElement = backdropContainer.nextElementSibling;
+  while (nextElement) {
+    if (nextElement.classList.contains(BACKDROP_CLASSNAME)) {
+      return false;
+    }
+    nextElement = nextElement.nextElementSibling;
+  }
+  return true;
+}
+function replaceControlsIfExists(container, props) {
+  var _a, _b;
+  if (!container) return;
+  const body = container.querySelector(`.${ui_Modal_const.MODAL_BODY_CLASSNAME}`);
+  if (!body) return;
+  const controls = body.querySelectorAll(`.${ui_Form_FormControls_const.FORM_CONTROLS_CLASSNAME}`);
+  if (controls.length !== 1) return;
+  if (controls[0].querySelector(`.${ui_Form_FormControls_const.FORM_CONTROLS_SKIP_REPLACE_CLASSNAME}`)) return;
+  const footer = document.createElement("div");
+  footer.classList.add(ui_Modal_const.MODAL_FOOTER_CLASSNAME);
+  if ((_a = props.classes) == null ? void 0 : _a.footer) footer.classList.add((_b = props.classes) == null ? void 0 : _b.footer);
+  controls[0].remove();
+  footer.appendChild(controls[0]);
+  body.after(footer);
+}
+const Modal = (props) => {
+  const {
+    open,
+    width = 500,
+    transitionProps,
+    ...modalProps
+  } = props;
+  const nodeRef = React.useRef(null);
+  const handleClose = lib_hooks_useEventCallback.default((event) => {
+    var _a;
+    (_a = modalProps.onClose) == null ? void 0 : _a.call(modalProps, event);
+  });
+  const focusModal = lib_hooks_useEventCallback.default(() => {
+    var _a;
+    const modalElement = (_a = nodeRef.current) == null ? void 0 : _a.querySelector('[data-testid="base-modal"]');
+    modalElement == null ? void 0 : modalElement.focus();
+  });
+  React.useEffect(() => {
+    function subscribeToEsc(e) {
+      if (e.key !== "Escape" || !nodeRef.current) return;
+      if (!isTopmostModal(nodeRef.current)) return;
+      handleClose(e);
+    }
+    document.addEventListener("keyup", subscribeToEsc);
+    return () => {
+      document.removeEventListener("keyup", subscribeToEsc);
+    };
+  }, [handleClose]);
+  React.useEffect(() => {
+    replaceControlsIfExists(nodeRef.current, modalProps);
+  }, []);
+  const handleEntered = (isAppearing) => {
+    var _a;
+    replaceControlsIfExists(nodeRef.current, modalProps);
+    (_a = transitionProps == null ? void 0 : transitionProps.onEntering) == null ? void 0 : _a.call(transitionProps, isAppearing);
+  };
+  const handleEnteredDone = (isAppearing) => {
+    var _a;
+    focusModal();
+    (_a = transitionProps == null ? void 0 : transitionProps.onEntered) == null ? void 0 : _a.call(transitionProps, isAppearing);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(reactTransitionGroup.CSSTransition, { classNames: {
+    "enter": "arm-modal__ContentWrapperEnter",
+    "enterActive": "arm-modal__ContentWrapperEnterActive",
+    "exit": "arm-modal__ContentWrapperExit",
+    "exitActive": "arm-modal__ContentWrapperExitActive",
+    exitDone: "arm-modal__ContentWrapperExitDone",
+    enterDone: "arm-modal__ContentWrapperEnterDone"
+  }, in: !!open, timeout: 500, nodeRef, mountOnEnter: true, unmountOnExit: true, ...transitionProps, onEntering: handleEntered, onEntered: handleEnteredDone, children: /* @__PURE__ */ jsxRuntime.jsx(ui_BackDrop_BackDrop.default, { width, ref: nodeRef, onClick: modalProps.onClose, className: BACKDROP_CLASSNAME, children: /* @__PURE__ */ jsxRuntime.jsx(ui_Modal_BaseModal.BaseModal, { ...modalProps }) }) }) });
+};
+exports.default = Modal;

package/lib/cjs/ui/Modal/const.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const MODAL_BODY_CLASSNAME = "arm-modal__body";
+const MODAL_FOOTER_CLASSNAME = "arm-modal__footer";
+exports.MODAL_BODY_CLASSNAME = MODAL_BODY_CLASSNAME;
+exports.MODAL_FOOTER_CLASSNAME = MODAL_FOOTER_CLASSNAME;

package/lib/cjs/ui/Modal/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const ui_Modal_Modal = require("./Modal.cjs");
+exports.default = ui_Modal_Modal.default;

package/lib/cjs/ui/Modal.cjs

@@ -0,0 +1,2 @@
+'use strict'
+module.exports = require('./Modal/index.cjs')

package/lib/cjs/ui/Pagination/Pagination.cjs

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const ui_Stack_Stack = require("../Stack/Stack.cjs");
+const ui_ButtonIcon_ButtonIcon = require("../ButtonIcon/ButtonIcon.cjs");
+const React = require("react");
+require("../Icon/Icon.cjs");
+const ui_Icon_Mi = require("../Icon/Mi.cjs");
+const ui_Button_Button = require("../Button/Button.cjs");
+const ui_Popover_Popover = require("../Popover/Popover.cjs");
+const ui_List_ListItem = require("../List/ListItem.cjs");
+const MAX_DISPLAY = 5;
+const Pagination = (props) => {
+  const {
+    pageSize,
+    pageSizes,
+    pageSizeLabel,
+    total,
+    page,
+    onPageSizeSelect,
+    onChange,
+    ...stackProps
+  } = props;
+  let displayFirst = page > 1;
+  let displayLast = page < total && page !== total;
+  let displayFirstDots = page >= MAX_DISPLAY && total > MAX_DISPLAY;
+  let displayLastDots = page < total - 2 && page <= total - MAX_DISPLAY;
+  let pageArr = [];
+  pageArr = [...Array(total)].map((_, item) => item + 1).filter((item) => {
+    if (displayFirst && displayLast) return item > 1 && item < total;
+    else if (displayFirst) return item > 1;
+    else if (displayLast) return item < total;
+    return true;
+  });
+  if (page >= MAX_DISPLAY && total > MAX_DISPLAY && page <= total - MAX_DISPLAY) pageArr = pageArr.slice(page - (MAX_DISPLAY - 2), page);
+  else if (page < MAX_DISPLAY && pageArr.length > MAX_DISPLAY) pageArr = pageArr.slice(0, displayFirst ? MAX_DISPLAY - 1 : MAX_DISPLAY);
+  else if (page > total - MAX_DISPLAY && pageArr.length > MAX_DISPLAY) pageArr = pageArr.slice(displayLast ? -4 : -MAX_DISPLAY);
+  const handleClick = (selectedPage) => () => {
+    if (selectedPage !== page) onChange(selectedPage);
+  };
+  if (total <= 1) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui_Stack_Stack.default, { spacing: "small", "data-testid": "pagination", children: [
+    pageSizes && onPageSizeSelect && /* @__PURE__ */ jsxRuntime.jsx(PaginationPerPage, { ...props, pageSizes, onPageSizeSelect }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui_Stack_Stack.default, { center: true, ...stackProps, children: [
+      page > 1 && /* @__PURE__ */ jsxRuntime.jsx(ui_ButtonIcon_ButtonIcon.default, { "data-testid": "pagination-prev", onClick: handleClick(page - 1), size: "small", variant: "transparent", color: "neutral", children: /* @__PURE__ */ jsxRuntime.jsx(ui_Icon_Mi.Mi, { icon: "chevron_left" }) }),
+      displayFirst && /* @__PURE__ */ jsxRuntime.jsx(ui_ButtonIcon_ButtonIcon.default, { "data-testid": "pagination-first", onClick: handleClick(1), size: "small", variant: "transparent", color: "neutral", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "arm-pagination__item", children: "1" }) }),
+      displayFirstDots && /* @__PURE__ */ jsxRuntime.jsx(ui_ButtonIcon_ButtonIcon.default, { "data-testid": "pagination-dots-prev", size: "small", disabled: true, children: "..." }),
+      pageArr.map((item) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(ui_ButtonIcon_ButtonIcon.default, { "data-testid": page === item ? "pagination-current" : "pagination-page", onClick: handleClick(item), size: "small", className: page === item ? "bg-gray-100" : "", variant: "transparent", color: "neutral", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "arm-pagination__item", children: item }) }, item);
+      }),
+      displayLastDots && /* @__PURE__ */ jsxRuntime.jsx(ui_ButtonIcon_ButtonIcon.default, { "data-testid": "pagination-dots-next", size: "small", disabled: true, children: "..." }),
+      displayLast && /* @__PURE__ */ jsxRuntime.jsx(ui_ButtonIcon_ButtonIcon.default, { "data-testid": "pagination-last", onClick: handleClick(total), size: "small", variant: "transparent", color: "neutral", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "arm-pagination__item", children: total }) }),
+      page !== total && /* @__PURE__ */ jsxRuntime.jsx(ui_ButtonIcon_ButtonIcon.default, { "data-testid": "pagination-next", onClick: handleClick(page + 1), size: "small", variant: "transparent", color: "neutral", children: /* @__PURE__ */ jsxRuntime.jsx(ui_Icon_Mi.Mi, { icon: "chevron_right" }) })
+    ] })
+  ] }) });
+};
+const PaginationPerPage = (props) => {
+  const {
+    pageSize,
+    pageSizes,
+    pageSizeLabel,
+    onPageSizeSelect
+  } = props;
+  const [visible, setVisible] = React.useState(false);
+  const btnRef = React.useRef(null);
+  const handleClose = () => setVisible(false);
+  const handleClick = (item) => {
+    onPageSizeSelect(item);
+    handleClose();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui_Stack_Stack.default, { spacing: "small", center: true, className: "flex items-center", "data-testid": "pagination-per-page", children: [
+    pageSizeLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "pagination-per-page-label", className: "text-small", children: pageSizeLabel }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui_Button_Button.default, { "data-testid": "pagination-per-page-button", variant: "transparent", onClick: () => setVisible(true), ref: btnRef, endAdornment: /* @__PURE__ */ jsxRuntime.jsx(ui_Icon_Mi.Mi, { icon: "expand_more" }), size: "small", color: "neutral", children: pageSize }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui_Popover_Popover.Popover, { placement: "bottom", open: visible, anchorEl: btnRef.current, onClose: handleClose, classes: {
+      paper: "p-0"
+    }, children: pageSizes.map((item) => /* @__PURE__ */ jsxRuntime.jsx(ui_List_ListItem.default, { onClick: () => handleClick(item), active: item === pageSize, children: item }, item)) })
+  ] });
+};
+exports.Pagination = Pagination;
+exports.default = Pagination;

package/lib/cjs/ui/Pagination/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const ui_Pagination_Pagination = require("./Pagination.cjs");
+exports.default = ui_Pagination_Pagination.Pagination;

package/lib/cjs/ui/Pagination.cjs

@@ -0,0 +1,2 @@
+'use strict'
+module.exports = require('./Pagination/index.cjs')

package/lib/cjs/ui/Paper/Paper.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const clsx = require("clsx");
+const Paper = (props) => {
+  let {
+    children,
+    className,
+    theme,
+    variant = "elevation",
+    ...divPops
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("arm-paper", className, {
+    "arm-paper_elevation": variant === "elevation",
+    "arm-paper_outlined": variant === "outlined",
+    "arm-paper_dark": theme === "dark"
+  }), "data-testid": "paper", ...divPops, children }) });
+};
+exports.default = Paper;

package/lib/cjs/ui/Paper/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const ui_Paper_Paper = require("./Paper.cjs");
+exports.default = ui_Paper_Paper.default;

package/lib/cjs/ui/Paper.cjs

@@ -0,0 +1,2 @@
+'use strict'
+module.exports = require('./Paper/index.cjs')

package/lib/cjs/ui/Popover/Popover.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const ui_BackDrop_BackDrop = require("../BackDrop/BackDrop.cjs");
+const ui_Popper_PopperBase = require("../Popper/PopperBase.cjs");
+const ui_Paper_Paper = require("../Paper/Paper.cjs");
+const Popover = (props) => {
+  const {
+    onClose,
+    matchWidth = false,
+    children,
+    classes,
+    ...popperProps
+  } = props;
+  if (!props.open || !popperProps.anchorEl) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(ui_BackDrop_BackDrop.default, { onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(ui_Popper_PopperBase.PopperBase, { ...popperProps, anchorEl: popperProps.anchorEl, children: /* @__PURE__ */ jsxRuntime.jsx(ui_Paper_Paper.default, { className: classes == null ? void 0 : classes.paper, style: matchWidth ? {
+    width: popperProps.anchorEl.clientWidth
+  } : void 0, children }) }) }) });
+};
+exports.Popover = Popover;
+exports.default = Popover;

package/lib/cjs/ui/Popover/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const ui_Popover_Popover = require("./Popover.cjs");
+exports.default = ui_Popover_Popover.Popover;

package/lib/cjs/ui/Popover.cjs

@@ -0,0 +1,2 @@
+'use strict'
+module.exports = require('./Popover/index.cjs')

package/lib/cjs/ui/Popper/Popper.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const reactDom = require("react-dom");
+const ui_Popper_PopperBase = require("./PopperBase.cjs");
+const Popper = (props) => {
+  if (!props.open) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx(ui_Popper_PopperBase.PopperBase, { ...props, children: props.children }), document.body) });
+};
+exports.Popper = Popper;
+exports.default = Popper;

package/lib/cjs/ui/Popper/Popper.d.ts

@@ -0,0 +1,4 @@
+import { PopperBaseProps } from './PopperBase';
+export type PopperProps = {} & PopperBaseProps;
+export declare const Popper: (props: PopperProps) => import("react/jsx-runtime").JSX.Element | null;
+export default Popper;

package/lib/cjs/ui/Popper/PopperBase.cjs

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const core = require("@popperjs/core");
+const clsx = require("clsx");
+const PopperBase = (props) => {
+  const {
+    anchorEl,
+    children,
+    placement,
+    className,
+    anchorPosition,
+    open
+  } = props;
+  const tooltipRef = React.useRef(null);
+  React.useEffect(() => {
+    let modifiers = [{
+      name: "offset",
+      options: {
+        offset: [0, 5]
+      }
+    }];
+    if (anchorPosition) {
+      modifiers.push({
+        name: "computeStyles",
+        options: {
+          gpuAcceleration: false,
+          // true by default
+          roundOffsets: () => ({
+            x: anchorPosition.x,
+            y: anchorPosition.y
+          })
+        }
+      });
+    }
+    const popper = core.createPopper(anchorEl, tooltipRef.current, {
+      placement,
+      modifiers
+    });
+    return () => {
+      popper.destroy();
+    };
+  }, [open, placement]);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: tooltipRef, className: clsx(className, "arm-popper"), "data-testid": "popper", children }) });
+};
+exports.PopperBase = PopperBase;
+exports.default = PopperBase;

package/lib/cjs/ui/Popper/PopperBase.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export type PopperBaseProps = {
+    children: ReactNode;
+    anchorEl: Element;
+    open?: boolean;
+    anchorPosition?: {
+        x: number;
+        y: number;
+    };
+    className?: string;
+    placement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
+};
+export declare const PopperBase: (props: PopperBaseProps) => import("react/jsx-runtime").JSX.Element;
+export default PopperBase;

package/lib/cjs/ui/Popper/index.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const ui_Popper_Popper = require("./Popper.cjs");
+const ui_Popper_PopperBase = require("./PopperBase.cjs");
+exports.default = ui_Popper_Popper.Popper;
+exports.PopperBase = ui_Popper_PopperBase.PopperBase;

package/lib/cjs/ui/Popper.cjs

@@ -0,0 +1,2 @@
+'use strict'
+module.exports = require('./Popper/index.cjs')

package/lib/cjs/ui/Skeleton/Skeleton.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const clsx = require("clsx");
+const Skeleton = (props) => {
+  const {
+    width = "100%",
+    height,
+    className,
+    circle,
+    ...divProps
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "skeleton", ...divProps, className: clsx(className, "arm-skeleton", {
+    "arm-skeleton_circle": !!circle
+  }), style: {
+    width: typeof width === "number" ? width + "px" : width,
+    height: typeof height === "number" ? height + "px" : height
+  } });
+};
+exports.default = Skeleton;

package/lib/cjs/ui/Skeleton/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const ui_Skeleton_Skeleton = require("./Skeleton.cjs");
+exports.default = ui_Skeleton_Skeleton.default;

package/lib/cjs/ui/Skeleton.cjs

@@ -0,0 +1,2 @@
+'use strict'
+module.exports = require('./Skeleton/index.cjs')

package/lib/cjs/ui/Slider/RcSlider.cjs

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/ui/Slider/Slider.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const RcSlider = require("rc-slider");
+;/* empty css             */
+const ui_HelperText_HelperText = require("../HelperText/HelperText.cjs");
+const clsx = require("clsx");
+function Slider(props) {
+  const {
+    size = "large",
+    color = "primary",
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "slider", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RcSlider, { ...restProps, className: clsx("_" + size, {
+      ["arm-slider__" + color]: !!color
+    }) }),
+    restProps.min !== void 0 && restProps.max !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "arm-slider__text", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "slider_min", children: /* @__PURE__ */ jsxRuntime.jsx(ui_HelperText_HelperText.default, { children: restProps.min }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "slider_max", children: /* @__PURE__ */ jsxRuntime.jsx(ui_HelperText_HelperText.default, { children: restProps.max }) })
+    ] })
+  ] }) });
+}
+exports.default = Slider;

package/lib/cjs/ui/Slider/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const ui_Slider_Slider = require("./Slider.cjs");
+exports.default = ui_Slider_Slider.default;

package/lib/cjs/ui/Slider.cjs

@@ -0,0 +1,2 @@
+'use strict'
+module.exports = require('./Slider/index.cjs')

package/lib/cjs/ui/Stack/Stack.cjs

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const wrapItem = (item, spacing, index) => {
+  if (!Array.isArray(item)) return [React.cloneElement(/* @__PURE__ */ jsxRuntime.jsx(StackItem, { spacing, children: item }, index))];
+  return item.map((item2, index2) => wrapItem(item2, spacing, index2));
+};
+const Stack = (props) => {
+  const {
+    className,
+    children,
+    spacing,
+    wrap,
+    center,
+    ...divProps
+  } = props;
+  let childrenProp;
+  if (Array.isArray(children)) {
+    childrenProp = wrapItem(children.filter(Boolean), spacing).flat();
+  } else childrenProp = /* @__PURE__ */ jsxRuntime.jsx(StackItem, { spacing, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "stack", ...divProps, className: clsx("arm-stack", "flex", className, {
+    "flex-wrap": !!wrap,
+    "items-center": center,
+    ["arm-stack_spacing_" + spacing]: !!spacing
+  }), children: childrenProp }) });
+};
+const StackItem = (props) => {
+  const {
+    children,
+    spacing
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "stack-item", className: clsx({
+    ["arm-stack-item_spacing_" + spacing]: !!spacing
+  }), children });
+};
+exports.default = Stack;

package/lib/cjs/ui/Stack/Stack.d.ts

@@ -0,0 +1,10 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { SizeType } from '../../types/theme';
+type OwnProps = {
+    spacing?: SizeType;
+    wrap?: boolean;
+    center?: boolean;
+};
+export type StackProps = OwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof OwnProps>;
+declare const Stack: (props: StackProps) => import("react/jsx-runtime").JSX.Element;
+export default Stack;

package/lib/cjs/ui/Stack/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const ui_Stack_Stack = require("./Stack.cjs");
+exports.default = ui_Stack_Stack.default;

package/lib/cjs/ui/Stack.cjs

@@ -0,0 +1,2 @@
+'use strict'
+module.exports = require('./Stack/index.cjs')

package/lib/cjs/ui/Status/Status.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const clsx = require("clsx");
+function Status(props) {
+  let {
+    color,
+    icon,
+    text,
+    children,
+    as,
+    className,
+    size,
+    ...restProps
+  } = props;
+  const Component = as || "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(Component, { "data-testid": "status", ...restProps, className: clsx("arm-status", ["arm-status_" + color], className, {
+    ["arm-status_size_" + size]: !!size
+  }), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "arm-status__content", children: text || children }),
+    icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx("arm-status__icon", "material_icon"), children: icon })
+  ] }) });
+}
+exports.default = Status;

package/lib/cjs/ui/Status/Status.d.ts

@@ -0,0 +1,13 @@
+import { ColorStatusType, ColorType, SizeType } from '../../types/theme';
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+type OwnProps<T extends ElementType = 'span'> = {
+    color?: ColorType | ColorStatusType;
+    text?: string;
+    children?: ReactNode;
+    icon?: string;
+    size?: SizeType;
+    as?: T;
+};
+type StatusProps<T extends ElementType = 'span'> = OwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof OwnProps<T>>;
+declare function Status<T extends ElementType = 'span'>(props: StatusProps<T>): import("react/jsx-runtime").JSX.Element;
+export default Status;

package/lib/cjs/ui/Status/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const ui_Status_Status = require("./Status.cjs");
+exports.default = ui_Status_Status.default;

package/lib/cjs/ui/Status.cjs

@@ -0,0 +1,2 @@
+'use strict'
+module.exports = require('./Status/index.cjs')

package/lib/cjs/ui/Stepper/StepItem.cjs

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const ui_Stepper_StepItemIcon = require("./StepItemIcon.cjs");
+const clsx = require("clsx");
+const ui_Button_Button = require("../Button/Button.cjs");
+const StepItem = (props) => {
+  let {
+    title,
+    children,
+    content,
+    button,
+    buttonProps,
+    last,
+    orientation = "horizontal",
+    ...iconProps
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "step_item", className: clsx("arm-step-item", ["arm-step-item_" + props.size], {
+    "arm-step-item_last": last,
+    "arm-step-item_horizontal": orientation === "horizontal"
+  }), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "arm-step-item__inner", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "arm-step-item__icon", children: /* @__PURE__ */ jsxRuntime.jsx(ui_Stepper_StepItemIcon.default, { ...iconProps }) }),
+      !!title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: clsx("arm-step-item__title", {
+        "arm-step-item__title_error": iconProps.error,
+        "arm-step-item__title_with_content": content || children
+      }), children: title })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "arm-step-item__content", children: [
+      content || children,
+      !!button && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "arm-step-item__button", children: /* @__PURE__ */ jsxRuntime.jsx(ui_Button_Button.default, { ...buttonProps, children: button }) })
+    ] })
+  ] }) });
+};
+exports.default = StepItem;

package/lib/cjs/ui/Stepper/StepItemIcon.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const clsx = require("clsx");
+const StepItemIcon = (props) => {
+  let icon = "";
+  if (!props.number) {
+    if (props.active) icon = "schedule";
+    else if (props.complete) icon = "done";
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "step_item_icon", className: clsx("arm-step-item-icon", ["arm-step-item-icon_" + props.size], {
+    ["arm-step-item-icon_active"]: props.active,
+    ["arm-step-item-icon_error"]: props.error,
+    ["arm-step-item-icon_complete"]: props.complete,
+    ["arm-step-item-icon_icon"]: !props.icon
+  }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "arm-step-item-icon__inner", children: !props.error ? !props.number ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material_icon_solid", children: icon }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "arm-step-item-icon__number", children: props.number }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material_icon_solid", children: "warning" }) }) }) });
+};
+exports.default = StepItemIcon;