@dotss/ui 0.0.4 → 0.0.7

package/dist/LineProgressIndicator/LineProgressIndicator.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from 'react';
+import { GeneralComponentProps, Size } from '../typings/component';
+
+export interface LineProgressIndicatorProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
+    size?: Extract<Size, 'large' | 'small'>;
+    value?: number;
+    transitionDuration?: number;
+    loop?: boolean;
+}
+declare const LineProgressIndicator: import('react').ForwardRefExoticComponent<LineProgressIndicatorProps & import('react').RefAttributes<HTMLDivElement>>;
+export default LineProgressIndicator;

package/dist/LineProgressIndicator/LineProgressIndicator.es.js

@@ -0,0 +1,69 @@
+import { jsxs as m, jsx as a } from "@emotion/react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { keyframes as g } from "@emotion/react";
+import r from "@emotion/styled";
+const h = g`
+    to {
+        transform: translateX(100%);
+    }
+`, u = r.div`
+  position: relative;
+  height: ${({ size: t }) => t === "large" ? 42 : 4}px;
+  border-radius: 100px;
+  background-color: ${({
+  theme: {
+    palette: { grey: t }
+  }
+}) => t[10]};
+  overflow: hidden;
+`, y = r.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 100px;
+  transition: transform ${({ transitionDuration: t }) => t}ms linear;
+  background-color: ${({
+  theme: {
+    palette: { brand: t }
+  }
+}) => t.primary.main};
+
+  ${({ loop: t }) => t ? {
+  animation: `${h} 1s infinite`
+} : {}};
+`, x = r.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  white-space: nowrap;
+`, v = p(
+  function({ children: o, size: i, value: n = 0, transitionDuration: l = 500, loop: s, inlineCSS: d, ...c }, f) {
+    let e = n - 100;
+    return e = n > 100 ? 0 : e, e = s ? -80 : e, /* @__PURE__ */ m(u, { ref: f, size: i, ...c, css: d, children: [
+      /* @__PURE__ */ a(
+        y,
+        {
+          transitionDuration: l,
+          loop: s,
+          style: {
+            transform: `translate3d(${e}%, 0, 0)`
+          }
+        }
+      ),
+      i === "large" && o && /* @__PURE__ */ a(x, { children: o })
+    ] });
+  }
+);
+export {
+  v as default
+};

package/dist/LineProgressIndicator/LineProgressIndicator.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./LineProgressIndicator').LineProgressIndicatorProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Loop: Story;
+export declare const Custom: Story;

package/dist/LineProgressIndicator/index.cjs

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

package/dist/LineProgressIndicator/index.d.ts

@@ -0,0 +1,3 @@
+import { default as LineProgressIndicator } from './LineProgressIndicator';
+
+export default LineProgressIndicator;

package/dist/LineProgressIndicator/index.es.js

@@ -0,0 +1,4 @@
+import o from "./LineProgressIndicator.es.js";
+export {
+  o as default
+};

package/dist/Menu/Menu.cjs

@@ -0,0 +1,35 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("@emotion/react/jsx-runtime"),o=require("react"),X=require("react-dom"),Y=require("@emotion/styled"),Z=t=>t&&t.__esModule?t:{default:t},x=Z(Y),tt=x.default.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100003;
+
+    ${({disableClickOutside:t})=>t?null:{pointerEvents:"none","& *":{pointerEvents:"auto"}}}}
+
+`,et=x.default.div`
+  position: fixed;
+  max-width: calc(100% - ${({theme:{spacing:t}})=>t.layout(4)}px);
+  border-radius: 10px;
+  overflow: hidden;
+  background-color: ${({theme:{palette:{grey:t}}})=>t.white};
+  box-shadow: ${({theme:{elevation:t}})=>t[4]};
+  transition:
+    transform ${({transitionDuration:t})=>t}ms,
+    opacity ${({transitionDuration:t=0})=>t/2}ms;
+  transform: scale(${({open:t})=>t?1:.97});
+  opacity: ${({open:t})=>t?1:0};
+  z-index: 100003;
+`,ot=x.default.ul`
+  display: flex;
+  flex-direction: column;
+  max-height: ${({maxHeight:t})=>t}px;
+  overflow-y: auto;
+
+    ${({theme:{spacing:t},disablePadding:c})=>c?null:{padding:`${t.content(1)}px 0`}}}
+`,st=x.default.div`
+  width: 100%;
+  height: 1px;
+  background-color: ${({theme:{palette:{grey:t}}})=>t[20]};
+`,b=24,it=o.forwardRef(function({children:c,anchorRef:u,open:v,onClose:m,spacing:f=4,transitionDuration:g=200,onChange:T,value:L,showDivider:P,placement:_="bottom-center",disablePadding:q,disableClickOutside:z=!0,width:E,fitToAnchorWidth:$=!0,maxHeight:H=476,style:R,inlineCSS:B,...D},G){const[h,j]=o.useState(0),[k,S]=o.useState(0),[w,F]=o.useState(0),[M,C]=o.useState(!1),[N,V]=o.useState(!1),[A,O]=o.useState(!0),l=o.useRef(),a=o.useRef(),W=o.useRef(null),J=(e,i)=>r=>{r.stopPropagation(),typeof m=="function"&&m(),typeof T=="function"&&T(e,r),typeof i=="function"&&i(r)};return o.useEffect(()=>{v&&(a.current&&clearTimeout(a.current),document.body.style.overflow="hidden",O(!1),l.current=setTimeout(()=>{C(!0)},100))},[v]),o.useEffect(()=>{v||(l.current&&clearTimeout(l.current),C(!1),document.body.removeAttribute("style"),a.current=setTimeout(()=>{O(!0)},g))},[v,g]),o.useEffect(()=>{const e=()=>{var I;const{offsetWidth:i=0,offsetHeight:r=0}=(u==null?void 0:u.current)||{},s=((I=u==null?void 0:u.current)==null?void 0:I.getBoundingClientRect())||{top:0,left:0,bottom:0},{offsetWidth:p=0,offsetHeight:n=0}=W.current||{},[y,K]=_.split("-");F(E||i);const Q=(s.top||0)-n-f-b<b,U=(s.bottom||0)+n+f+b>window.innerHeight;switch(y){case"top":j(Q?b:s.top-n-f);break;default:j(U?"auto":s.top+r+f);break}switch(K){case"left":S(s.left);break;case"right":S(s.left-Math.abs(i-p));break;default:S(s.left+i/2-p/2);break}};return e(),window.addEventListener("scroll",e),window.addEventListener("resize",e),()=>{window.removeEventListener("scroll",e),window.removeEventListener("resize",e)}},[u,f,_,M,c,E]),o.useEffect(()=>{V(M&&!!h&&!!k&&!!w)},[M,h,k,w]),o.useEffect(()=>()=>{l.current&&clearTimeout(l.current),a.current&&clearTimeout(a.current)},[]),A?null:X.createPortal(d.jsx(tt,{onClick:m,disableClickOutside:z,children:d.jsx(et,{ref:G,open:N,transitionDuration:g,...D,css:B,style:{...R,top:h,left:k,bottom:h==="auto"?24:void 0,width:$?w:void 0},children:d.jsx(ot,{ref:W,disablePadding:q,maxHeight:H,children:o.Children.map(c,(e,i)=>{var r,s,p,n,y;return o.isValidElement(e)?d.jsxs(d.Fragment,{children:[o.cloneElement(e,{...e.props,selected:!!((r=e==null?void 0:e.props)!=null&&r.value)&&((s=e==null?void 0:e.props)==null?void 0:s.value)===L,onClick:J((p=e==null?void 0:e.props)==null?void 0:p.value,(n=e==null?void 0:e.props)==null?void 0:n.onClick),style:{...(y=e==null?void 0:e.props)==null?void 0:y.style,[E?"width":"minWidth"]:$?void 0:w,maxWidth:$?void 0:"100%"}}),P&&o.Children.count(c)!==i+1&&d.jsx(st,{})]}):null})})})}),document.body)});exports.default=it;

package/dist/Menu/Menu.d.ts

@@ -0,0 +1,23 @@
+import { HTMLAttributes, MouseEvent, ReactElement, ReactNode, RefObject } from 'react';
+import { GeneralComponentProps } from '../typings/component';
+import { default as MenuBlock } from './MenuBlock';
+
+export interface MenuProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {
+    anchorRef: RefObject<HTMLElement> | null;
+    open?: boolean;
+    onClose?: () => void;
+    spacing?: number;
+    transitionDuration?: number;
+    onChange?: (newValue?: string | number, e?: MouseEvent) => void;
+    value?: string | number;
+    showDivider?: boolean;
+    placement?: 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-right' | 'top-center';
+    disablePadding?: boolean;
+    disableClickOutside?: boolean;
+    children?: ReactElement<typeof MenuBlock> | ReactElement<typeof MenuBlock>[] | ReactNode;
+    width?: number;
+    fitToAnchorWidth?: boolean;
+    maxHeight?: number;
+}
+declare const Menu: import('react').ForwardRefExoticComponent<MenuProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Menu;

package/dist/Menu/Menu.es.js

@@ -0,0 +1,163 @@
+import { jsx as y, jsxs as tt, Fragment as ot } from "@emotion/react/jsx-runtime";
+import { forwardRef as et, useState as u, useRef as W, useEffect as a, Children as j, isValidElement as it, cloneElement as rt } from "react";
+import { createPortal as st } from "react-dom";
+import x from "@emotion/styled";
+const nt = x.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100003;
+
+    ${({ disableClickOutside: o }) => o ? null : {
+  pointerEvents: "none",
+  "& *": {
+    pointerEvents: "auto"
+  }
+}}}
+
+`, ut = x.div`
+  position: fixed;
+  max-width: calc(100% - ${({ theme: { spacing: o } }) => o.layout(4)}px);
+  border-radius: 10px;
+  overflow: hidden;
+  background-color: ${({
+  theme: {
+    palette: { grey: o }
+  }
+}) => o.white};
+  box-shadow: ${({ theme: { elevation: o } }) => o[4]};
+  transition:
+    transform ${({ transitionDuration: o }) => o}ms,
+    opacity ${({ transitionDuration: o = 0 }) => o / 2}ms;
+  transform: scale(${({ open: o }) => o ? 1 : 0.97});
+  opacity: ${({ open: o }) => o ? 1 : 0};
+  z-index: 100003;
+`, dt = x.ul`
+  display: flex;
+  flex-direction: column;
+  max-height: ${({ maxHeight: o }) => o}px;
+  overflow-y: auto;
+
+    ${({ theme: { spacing: o }, disablePadding: d }) => d ? null : {
+  padding: `${o.content(1)}px 0`
+}}}
+`, ct = x.div`
+  width: 100%;
+  height: 1px;
+  background-color: ${({
+  theme: {
+    palette: { grey: o }
+  }
+}) => o[20]};
+`, b = 24, vt = et(function({
+  children: d,
+  anchorRef: s,
+  open: v,
+  onClose: g,
+  spacing: c = 4,
+  transitionDuration: $ = 200,
+  onChange: I,
+  value: B,
+  showDivider: G,
+  placement: L = "bottom-center",
+  disablePadding: F,
+  disableClickOutside: N = !0,
+  width: E,
+  fitToAnchorWidth: k = !0,
+  maxHeight: V = 476,
+  style: _,
+  inlineCSS: q,
+  ...A
+}, D) {
+  const [w, O] = u(0), [T, C] = u(0), [h, J] = u(0), [M, z] = u(!1), [K, Q] = u(!1), [U, H] = u(!0), f = W(), l = W(), P = W(null), X = (t, i) => (r) => {
+    r.stopPropagation(), typeof g == "function" && g(), typeof I == "function" && I(t, r), typeof i == "function" && i(r);
+  };
+  return a(() => {
+    v && (l.current && clearTimeout(l.current), document.body.style.overflow = "hidden", H(!1), f.current = setTimeout(() => {
+      z(!0);
+    }, 100));
+  }, [v]), a(() => {
+    v || (f.current && clearTimeout(f.current), z(!1), document.body.removeAttribute("style"), l.current = setTimeout(() => {
+      H(!0);
+    }, $));
+  }, [v, $]), a(() => {
+    const t = () => {
+      var S;
+      const { offsetWidth: i = 0, offsetHeight: r = 0 } = (s == null ? void 0 : s.current) || {}, e = ((S = s == null ? void 0 : s.current) == null ? void 0 : S.getBoundingClientRect()) || {
+        top: 0,
+        left: 0,
+        bottom: 0
+      }, { offsetWidth: p = 0, offsetHeight: n = 0 } = P.current || {}, [m, Y] = L.split("-");
+      J(E || i);
+      const Z = (e.top || 0) - n - c - b < b, R = (e.bottom || 0) + n + c + b > window.innerHeight;
+      switch (m) {
+        case "top":
+          O(
+            Z ? b : e.top - n - c
+          );
+          break;
+        default:
+          O(R ? "auto" : e.top + r + c);
+          break;
+      }
+      switch (Y) {
+        case "left":
+          C(e.left);
+          break;
+        case "right":
+          C(e.left - Math.abs(i - p));
+          break;
+        default:
+          C(e.left + i / 2 - p / 2);
+          break;
+      }
+    };
+    return t(), window.addEventListener("scroll", t), window.addEventListener("resize", t), () => {
+      window.removeEventListener("scroll", t), window.removeEventListener("resize", t);
+    };
+  }, [s, c, L, M, d, E]), a(() => {
+    Q(M && !!w && !!T && !!h);
+  }, [M, w, T, h]), a(() => () => {
+    f.current && clearTimeout(f.current), l.current && clearTimeout(l.current);
+  }, []), U ? null : st(
+    /* @__PURE__ */ y(nt, { onClick: g, disableClickOutside: N, children: /* @__PURE__ */ y(
+      ut,
+      {
+        ref: D,
+        open: K,
+        transitionDuration: $,
+        ...A,
+        css: q,
+        style: {
+          ..._,
+          top: w,
+          left: T,
+          bottom: w === "auto" ? 24 : void 0,
+          width: k ? h : void 0
+        },
+        children: /* @__PURE__ */ y(dt, { ref: P, disablePadding: F, maxHeight: V, children: j.map(d, (t, i) => {
+          var r, e, p, n, m;
+          return it(t) ? /* @__PURE__ */ tt(ot, { children: [
+            rt(t, {
+              ...t.props,
+              selected: !!((r = t == null ? void 0 : t.props) != null && r.value) && ((e = t == null ? void 0 : t.props) == null ? void 0 : e.value) === B,
+              onClick: X((p = t == null ? void 0 : t.props) == null ? void 0 : p.value, (n = t == null ? void 0 : t.props) == null ? void 0 : n.onClick),
+              style: {
+                ...(m = t == null ? void 0 : t.props) == null ? void 0 : m.style,
+                [E ? "width" : "minWidth"]: k ? void 0 : h,
+                maxWidth: k ? void 0 : "100%"
+              }
+            }),
+            G && j.count(d) !== i + 1 && /* @__PURE__ */ y(ct, {})
+          ] }) : null;
+        }) })
+      }
+    ) }),
+    document.body
+  );
+});
+export {
+  vt as default
+};

package/dist/Menu/Menu.stories.d.ts

@@ -0,0 +1,30 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Menu').MenuProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        anchorRef: {
+            control: {
+                disable: true;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const StartAdornment: Story;
+export declare const EndAdornment: Story;
+export declare const BothAdornment: Story;
+export declare const VariableWidth: Story;
+export declare const MaxHeight: Story;
+export declare const MaxWidth: Story;
+export declare const ShowDivider: Story;
+export declare const Placement: Story;
+export declare const Custom: Story;
+export declare const FitToAnchorWidth: Story;

package/dist/Menu/MenuBlock/MenuBlock.cjs

@@ -0,0 +1,26 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("@emotion/react/jsx-runtime"),w=require("react"),y=require("../../Icon/Icon.cjs"),v=require("../../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),S=require("@emotion/styled"),j=e=>e&&e.__esModule?e:{default:e},u=j(S),$=u.default.li`
+  display: flex;
+  align-items: center;
+  gap: ${({theme:{spacing:e}})=>e.content(2)}px;
+  padding: 10px ${({theme:{spacing:e}})=>e.content(3)}px;
+  background-color: ${({theme:{palette:{grey:e}}})=>e.white};
+  cursor: ${({disabled:e})=>e?"not-allowed":"pointer"};
+
+  & svg {
+    width: 20px;
+    height: 20px;
+    color: ${({theme:{palette:{brand:e,grey:i}},selected:t,disabled:r})=>t?e.primary.main:r?i[30]:"inherit"};
+  }
+
+  ${({ellipsis:e})=>e?{maxHeight:"40px"}:{}};
+
+  ${({theme:{palette:{brand:e,grey:i}},selected:t,isHoverPossible:r})=>r?{"&:hover:not([disabled])":{backgroundColor:t?e.primary.bg:i[10]}}:{}}
+`,k=u.default.div`
+  flex-grow: 1;
+
+  ${({ellipsis:e})=>e?{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}:{}};
+
+  ${({theme:{palette:{brand:e,grey:i},typography:{h5B:t,b4R:r}},selected:c,disabled:o})=>{let n={fontSize:r.size,fontWeight:r.weight,letterSpacing:r.letterSpacing,lineHeight:r.lineHeight};return c&&(n={fontSize:t.size,fontWeight:t.weight,letterSpacing:t.letterSpacing,lineHeight:t.lineHeight,color:e.primary.text}),o&&(n.color=i[30]),n}}}
+`,a=u.default.div`
+  white-space: nowrap;
+`,H=w.forwardRef(function({children:i,startAdornment:t,endAdornment:r,inlineCSS:c,selected:o,disabled:n,value:h,onClick:s,ellipsis:p=!0,...d},g){const{isHoverPossible:x}=v.default(),m=f=>{f.stopPropagation(),!n&&typeof s=="function"&&s(f)};return l.jsxs($,{ref:g,selected:o,disabled:n,"data-value":h,isHoverPossible:x,onClick:m,ellipsis:p,...d,css:c,children:[t&&l.jsx(a,{children:t}),l.jsx(k,{selected:o,disabled:n,ellipsis:p,children:i}),!o&&r&&l.jsx(a,{children:r}),o&&l.jsx(a,{children:l.jsx(y.default,{name:"CheckLine",color:"primary"})})]})});exports.default=H;

package/dist/Menu/MenuBlock/MenuBlock.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { GeneralComponentProps } from '../../typings/component';
+
+export interface MenuBlockProps extends GeneralComponentProps<HTMLAttributes<HTMLLIElement>> {
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+    selected?: boolean;
+    disabled?: boolean;
+    value?: string | number;
+    ellipsis?: boolean;
+}
+declare const MenuBlock: import('react').ForwardRefExoticComponent<MenuBlockProps & import('react').RefAttributes<HTMLLIElement>>;
+export default MenuBlock;

package/dist/Menu/MenuBlock/MenuBlock.es.js

@@ -0,0 +1,116 @@
+import { jsxs as x, jsx as l } from "@emotion/react/jsx-runtime";
+import { forwardRef as w } from "react";
+import y from "../../Icon/Icon.es.js";
+import k from "../../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
+import a from "@emotion/styled";
+const v = a.li`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: { spacing: e } }) => e.content(2)}px;
+  padding: 10px ${({ theme: { spacing: e } }) => e.content(3)}px;
+  background-color: ${({
+  theme: {
+    palette: { grey: e }
+  }
+}) => e.white};
+  cursor: ${({ disabled: e }) => e ? "not-allowed" : "pointer"};
+
+  & svg {
+    width: 20px;
+    height: 20px;
+    color: ${({
+  theme: {
+    palette: { brand: e, grey: i }
+  },
+  selected: t,
+  disabled: r
+}) => t ? e.primary.main : r ? i[30] : "inherit"};
+  }
+
+  ${({ ellipsis: e }) => e ? {
+  maxHeight: "40px"
+} : {}};
+
+  ${({
+  theme: {
+    palette: { brand: e, grey: i }
+  },
+  selected: t,
+  isHoverPossible: r
+}) => r ? {
+  "&:hover:not([disabled])": {
+    backgroundColor: t ? e.primary.bg : i[10]
+  }
+} : {}}
+`, $ = a.div`
+  flex-grow: 1;
+
+  ${({ ellipsis: e }) => e ? {
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+} : {}};
+
+  ${({
+  theme: {
+    palette: { brand: e, grey: i },
+    typography: { h5B: t, b4R: r }
+  },
+  selected: c,
+  disabled: n
+}) => {
+  let o = {
+    fontSize: r.size,
+    fontWeight: r.weight,
+    letterSpacing: r.letterSpacing,
+    lineHeight: r.lineHeight
+  };
+  return c && (o = {
+    fontSize: t.size,
+    fontWeight: t.weight,
+    letterSpacing: t.letterSpacing,
+    lineHeight: t.lineHeight,
+    color: e.primary.text
+  }), n && (o.color = i[30]), o;
+}}}
+`, p = a.div`
+  white-space: nowrap;
+`, P = w(function({
+  children: i,
+  startAdornment: t,
+  endAdornment: r,
+  inlineCSS: c,
+  selected: n,
+  disabled: o,
+  value: s,
+  onClick: h,
+  ellipsis: f = !0,
+  ...u
+}, m) {
+  const { isHoverPossible: d } = k();
+  return /* @__PURE__ */ x(
+    v,
+    {
+      ref: m,
+      selected: n,
+      disabled: o,
+      "data-value": s,
+      isHoverPossible: d,
+      onClick: (g) => {
+        g.stopPropagation(), !o && typeof h == "function" && h(g);
+      },
+      ellipsis: f,
+      ...u,
+      css: c,
+      children: [
+        t && /* @__PURE__ */ l(p, { children: t }),
+        /* @__PURE__ */ l($, { selected: n, disabled: o, ellipsis: f, children: i }),
+        !n && r && /* @__PURE__ */ l(p, { children: r }),
+        n && /* @__PURE__ */ l(p, { children: /* @__PURE__ */ l(y, { name: "CheckLine", color: "primary" }) })
+      ]
+    }
+  );
+});
+export {
+  P as default
+};

package/dist/Menu/MenuBlock/index.cjs

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

package/dist/Menu/MenuBlock/index.d.ts

@@ -0,0 +1,3 @@
+import { default as MenuBlock } from './MenuBlock';
+
+export default MenuBlock;

package/dist/Menu/MenuBlock/index.es.js

@@ -0,0 +1,4 @@
+import e from "./MenuBlock.es.js";
+export {
+  e as default
+};

package/dist/Menu/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Menu.cjs"),u=require("./MenuBlock/MenuBlock.cjs");exports.default=e.default;exports.MenuBlock=u.default;

package/dist/Menu/index.d.ts

@@ -0,0 +1,4 @@
+import { default as Menu } from './Menu';
+
+export { default as MenuBlock } from './MenuBlock';
+export default Menu;

package/dist/Menu/index.es.js

@@ -0,0 +1,6 @@
+import o from "./Menu.es.js";
+import { default as a } from "./MenuBlock/MenuBlock.es.js";
+export {
+  a as MenuBlock,
+  o as default
+};

package/dist/NumberKeypad/NumberKeypad.cjs

@@ -0,0 +1,9 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("@emotion/react/jsx-runtime"),l=require("react"),m=require("@emotion/styled"),_=e=>e&&e.__esModule?e:{default:e},b=_(m),x=b.default.div`
+  display: flex;
+  align-content: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: ${({theme:{spacing:e}})=>e.content(3)}px;
+
+  ${({maxWidth:e})=>({maxWidth:e})}
+`,g=l.forwardRef(function({children:s,maxWidth:u,size:o="small",onChange:a,disabled:i,inlineCSS:c,...d},p){const f=(t,r)=>n=>{n.stopPropagation(),typeof a=="function"&&a(t,r)};return y.jsx(x,{ref:p,maxWidth:u||(o==="large"?264:228),...d,css:c,children:l.Children.map(s,t=>{var r,n;return l.isValidElement(t)?l.cloneElement(t,{disabled:i,size:o,onClick:f((r=t.props)==null?void 0:r.value,(n=t.props)==null?void 0:n.children),...t.props}):null})})});exports.default=g;

package/dist/NumberKeypad/NumberKeypad.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes, ReactElement, ReactNode } from 'react';
+import { GeneralComponentProps, Size } from '../typings/component';
+import { CSSValue } from '../typings/utility';
+import { default as NumberKeypadBlock } from './NumberKeypadBlock';
+
+export interface NumberKeypadProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {
+    maxWidth?: CSSValue;
+    size?: Extract<Size, 'large' | 'small'>;
+    disabled?: boolean;
+    children?: ReactElement<typeof NumberKeypadBlock> | ReactElement<typeof NumberKeypadBlock>[];
+    onChange?: (value?: string | number, children?: ReactNode) => void;
+}
+declare const NumberKeypad: import('react').ForwardRefExoticComponent<NumberKeypadProps & import('react').RefAttributes<HTMLDivElement>>;
+export default NumberKeypad;

package/dist/NumberKeypad/NumberKeypad.es.js

@@ -0,0 +1,37 @@
+import { jsx as u } from "@emotion/react/jsx-runtime";
+import { forwardRef as m, Children as y, isValidElement as x, cloneElement as h } from "react";
+import b from "@emotion/styled";
+const w = b.div`
+  display: flex;
+  align-content: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: ${({ theme: { spacing: t } }) => t.content(3)}px;
+
+  ${({ maxWidth: t }) => ({ maxWidth: t })}
+`, j = m(function({ children: a, maxWidth: i, size: n = "small", onChange: p, disabled: l, inlineCSS: c, ...s }, d) {
+  const f = (r, e) => (o) => {
+    o.stopPropagation(), typeof p == "function" && p(r, e);
+  };
+  return /* @__PURE__ */ u(
+    w,
+    {
+      ref: d,
+      maxWidth: i || (n === "large" ? 264 : 228),
+      ...s,
+      css: c,
+      children: y.map(a, (r) => {
+        var e, o;
+        return x(r) ? h(r, {
+          disabled: l,
+          size: n,
+          onClick: f((e = r.props) == null ? void 0 : e.value, (o = r.props) == null ? void 0 : o.children),
+          ...r.props
+        }) : null;
+      })
+    }
+  );
+});
+export {
+  j as default
+};

package/dist/NumberKeypad/NumberKeypad.stories.d.ts

@@ -0,0 +1,14 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./NumberKeypad').NumberKeypadProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Usage: Story;