@dotss/ui 0.0.4 → 0.0.6

package/dist/Card/Card.es.js

@@ -0,0 +1,152 @@
+import { jsx as u } from "@emotion/react/jsx-runtime";
+import { forwardRef as a } from "react";
+import c from "@emotion/styled";
+import k from "../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
+const h = c.div`
+  display: flex;
+  flex-direction: column;
+  color: ${({ theme: o }) => o.palette.grey[100]};
+  &[disabled] {
+    pointer-events: none;
+  }
+
+  ${({ theme: { spacing: o }, appearance: r, variant: l }) => {
+  if (r === "kiosk") {
+    let e = {
+      padding: `${o.content(8)}px ${o.content(6)}px`,
+      gap: o.content(2),
+      borderRadius: 20,
+      borderWidth: 4,
+      borderStyle: "solid"
+    };
+    return l === "outlined" && (e = {
+      ...e,
+      padding: `calc(${o.content(8) - 4}px) calc(${o.content(6) - 4}px)`
+    }), e;
+  }
+  if (r === "mobile") {
+    let e = {
+      padding: `${o.content(4)}px`,
+      gap: o.content(1),
+      borderRadius: 12,
+      borderWidth: 2,
+      borderStyle: "solid"
+    };
+    return l === "outlined" && (e = {
+      ...e,
+      padding: `calc(${o.content(4) - 2}px)`
+    }), e;
+  }
+  return {};
+}}
+
+  ${({
+  theme: {
+    palette: { brand: o, grey: r, background: l }
+  },
+  variant: e,
+  disabled: t,
+  active: n,
+  isHoverPossible: d
+}) => {
+  if (e === "outlined") {
+    if (!t && n)
+      return {
+        borderColor: o.primary.main,
+        backgroundColor: r.white,
+        "&:active": {
+          backgroundColor: o.primary.disable
+        },
+        ...d ? { "&:hover": { backgroundColor: o.primary.disable } } : {}
+      };
+    if (!t && !n)
+      return {
+        borderWidth: 2,
+        borderColor: r[30],
+        backgroundColor: r.white,
+        "&:active": {
+          backgroundColor: r[10]
+        },
+        ...d ? { "&:hover": { backgroundColor: r[10] } } : {}
+      };
+    if (t && n)
+      return {
+        borderColor: o.primary.disableLine,
+        backgroundColor: o.primary.disable
+      };
+    if (t && !n)
+      return {
+        borderWidth: 2,
+        borderColor: r[30],
+        backgroundColor: r[10]
+      };
+  }
+  if (e === "filled") {
+    if (!t && n)
+      return {
+        border: "none",
+        backgroundColor: o.primary.main,
+        "&:active": {
+          backgroundColor: o.primary.press
+        },
+        ...d ? { "&:hover": { backgroundColor: o.primary.press } } : {}
+      };
+    if (!t && !n)
+      return {
+        border: "none",
+        backgroundColor: l.primary,
+        "&:active": {
+          backgroundColor: r[10]
+        },
+        ...d ? { "&:hover": { backgroundColor: r[10] } } : {}
+      };
+    if (t && n)
+      return {
+        border: "none",
+        backgroundColor: o.primary.disable
+      };
+    if (t && !n)
+      return {
+        border: "none",
+        backgroundColor: r[20]
+      };
+  }
+  return {};
+}}
+
+  ${({ disabled: o }) => o ? {} : {}}
+`, s = c.div`
+  &[disabled] {
+    cursor: not-allowed;
+  }
+`, g = a(function({
+  children: r,
+  tag: l,
+  inlineCSS: e,
+  variant: t = "filled",
+  active: n = !1,
+  disabled: d = !1,
+  appearance: f = "mobile",
+  wrapperProps: i = {},
+  ...b
+}, C) {
+  const { isHoverPossible: m } = k();
+  return /* @__PURE__ */ u(s, { disabled: d, ...i, css: i == null ? void 0 : i.inlineCSS, children: /* @__PURE__ */ u(
+    h,
+    {
+      as: l,
+      variant: t,
+      active: n,
+      disabled: d,
+      appearance: f,
+      isHoverPossible: m,
+      ...b,
+      css: e,
+      ref: C,
+      children: r
+    }
+  ) });
+});
+export {
+  g as default
+};

package/dist/Card/Card.stories.d.ts

@@ -0,0 +1,34 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: <T extends import('react').ElementType = "div">(props: import('./Card').CardProps<T>) => import('react').ReactNode;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        variant: {
+            options: string[];
+            control: {
+                type: "radio";
+            };
+        };
+        appearance: {
+            options: string[];
+            control: {
+                type: "radio";
+            };
+        };
+        wrapperProps: {
+            control: {
+                disable: true;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Kiosk: Story;
+export declare const Mobile: Story;
+export declare const Toggled: Story;

package/dist/Card/index.cjs

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

package/dist/Card/index.d.ts

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

package/dist/Card/index.es.js

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

package/dist/ChainPicker/ChainPicker.cjs

@@ -0,0 +1,44 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("@emotion/react/jsx-runtime"),l=require("react"),A=require("@emotion/styled"),U=require("../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),B=a=>a&&a.__esModule?a:{default:a},T=B(A),G=T.default.ul`
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  width: 100%;
+  height: 162px;
+  position: relative;
+  cursor: grab;
+  transition: transform 0.3s ease-out;
+`,J=T.default.div`
+  position: relative;
+  width: auto;
+  height: fit-content;
+  overflow: hidden;
+  &:after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transform: translateY(-100%);
+    background: linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 1) 0%,
+      rgba(255, 255, 255, 0.6) 10%,
+      rgba(255, 255, 255, 0) 20%,
+      rgba(255, 255, 255, 0) 80%,
+      rgba(255, 255, 255, 0.6) 90%,
+      rgba(255, 255, 255, 1) 100%
+    );
+    pointer-events: none;
+  }
+`,x=T.default.li`
+  height: 54px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  scroll-snap-align: start;
+  position: relative;
+
+  ${({theme:{palette:{grey:a},typography:{h2M:e},spacing:{content:o}}})=>({fontSize:e.size,fontWeight:e.weight,lineHeight:e.lineHeight,letterSpacing:e.letterSpacing,color:a[100],padding:o(3)})};
+
+  ${({selected:a,theme:{palette:{grey:e},typography:{h4M:o}}})=>a?{"&, & *":{color:`${e[100]} !important`}}:{color:`${e[30]} !important`,fontSize:`${o.size} !important`,fontWeight:`${o.weight} !important`,lineHeight:`${o.lineHeight} !important`,letterSpacing:`${o.letterSpacing} !important`,"& *":{color:`${e[30]} !important`}}}
+`,k=3,K=l.forwardRef(function({column:e,value:o=e[0].value,onChange:y,renderLabel:P,inlineCSS:j,wrapperProps:S,...w},C){const s=l.useRef(null),r=54,L=e.findIndex(n=>n.value===o),[g,p]=l.useState(L*r),[M,I]=l.useState(!1),[_,O]=l.useState(0),[R,E]=l.useState(0),Y=l.useId(),{isHoverPossible:q}=U.default(),D=n=>{I(!0),E(n),O(g)},H=n=>{if(!M)return;const i=R-n;let t=_+i;const c=r*(e.length-1);t<0?t=0:t>c&&(t=c),p(t),s.current&&(s.current.children[0].scrollTop=t)},N=n=>D(n.clientY),W=n=>D(n.touches[0].clientY),z=n=>H(n.clientY),F=n=>H(n.touches[0].clientY),v=n=>{if(!M||(I(!1),!q&&n.type==="mouseup"))return;if(Math.abs(_-g)<k){const h=n.target.closest("[data-index]");if(h){const m=Number(h.dataset.index);if(e[m]&&s.current){const b=s.current.children[0];b.scrollTo({top:m*r,behavior:"smooth"});const $=()=>{Math.abs(b.scrollTop-m*r)<1&&(y(e[m].value),b.removeEventListener("scroll",$))};b.addEventListener("scroll",$)}}return}let i=Math.round(g/r),t=i*r;const c=r*(e.length-1);t<0?(t=0,i=0):t>c&&(t=c,i=e.length-1);const d=u=>{if(Math.abs(u-t)<1)p(t),s.current&&(s.current.children[0].scrollTop=t);else{const h=u+(t-u)/5;p(h),s.current&&(s.current.children[0].scrollTop=h),requestAnimationFrame(()=>d(h))}};requestAnimationFrame(()=>d(g)),e[i]&&y(e[i].value)};return l.useLayoutEffect(()=>{const i=e.findIndex(t=>t.value===o)*r;p(i),s.current&&(s.current.children[0].scrollTop=i)},[o,e,r]),f.jsx(J,{ref:s,...S,css:S==null?void 0:S.inlineCSS,children:f.jsx(G,{ref:C,css:j,...w,onMouseDown:N,onMouseMove:z,onMouseUp:v,onMouseLeave:v,onTouchStart:W,onTouchMove:F,onTouchEnd:v,onTouchCancel:v,children:e.map((n,i)=>{const t=e.findIndex(u=>u.value===o),c=t===0?0:Math.round(g/r),d=i===c;return f.jsxs(l.Fragment,{children:[i===0&&f.jsx(x,{className:"chain-picker-item","data-index":i,selected:!1,distance:(t+1)*-1}),f.jsx(x,{className:"chain-picker-item","data-index":i,"data-selected":d,selected:d,distance:i-t,children:P?P(n,d):n.label}),i===e.length-1&&f.jsx(x,{className:"chain-picker-item","data-index":i,selected:!1,distance:e.length-t})]},`${Y}_${n.label}`)})})})});exports.SCROLL_POSITION_THRESHOLD=k;exports.default=K;

package/dist/ChainPicker/ChainPicker.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { GeneralComponentProps } from '../typings/component';
+
+export declare const SCROLL_POSITION_THRESHOLD = 3;
+export interface ChainPickerItem {
+    label: string;
+    value: number;
+}
+export interface ChainPickerProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLUListElement>, 'onChange'>> {
+    column: ChainPickerItem[];
+    value?: number;
+    onChange: (selectedValue: number) => void;
+    renderLabel?: (item: ChainPickerItem, isSelected: boolean) => ReactNode;
+    wrapperProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
+}
+declare const ChainPicker: import('react').ForwardRefExoticComponent<ChainPickerProps & import('react').RefAttributes<HTMLUListElement>>;
+export default ChainPicker;

package/dist/ChainPicker/ChainPicker.es.js

@@ -0,0 +1,179 @@
+import { jsx as f, jsxs as q } from "@emotion/react/jsx-runtime";
+import { forwardRef as A, useRef as U, useState as b, useId as B, useLayoutEffect as G, Fragment as J } from "react";
+import T from "@emotion/styled";
+import K from "../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
+const Q = T.ul`
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  width: 100%;
+  height: 162px;
+  position: relative;
+  cursor: grab;
+  transition: transform 0.3s ease-out;
+`, V = T.div`
+  position: relative;
+  width: auto;
+  height: fit-content;
+  overflow: hidden;
+  &:after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transform: translateY(-100%);
+    background: linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 1) 0%,
+      rgba(255, 255, 255, 0.6) 10%,
+      rgba(255, 255, 255, 0) 20%,
+      rgba(255, 255, 255, 0) 80%,
+      rgba(255, 255, 255, 0.6) 90%,
+      rgba(255, 255, 255, 1) 100%
+    );
+    pointer-events: none;
+  }
+`, x = T.li`
+  height: 54px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  scroll-snap-align: start;
+  position: relative;
+
+  ${({
+  theme: {
+    palette: { grey: g },
+    typography: { h2M: e },
+    spacing: { content: o }
+  }
+}) => ({
+  fontSize: e.size,
+  fontWeight: e.weight,
+  lineHeight: e.lineHeight,
+  letterSpacing: e.letterSpacing,
+  color: g[100],
+  padding: o(3)
+})};
+
+  ${({
+  selected: g,
+  theme: {
+    palette: { grey: e },
+    typography: { h4M: o }
+  }
+}) => g ? {
+  "&, & *": {
+    color: `${e[100]} !important`
+  }
+} : {
+  color: `${e[30]} !important`,
+  fontSize: `${o.size} !important`,
+  fontWeight: `${o.weight} !important`,
+  lineHeight: `${o.lineHeight} !important`,
+  letterSpacing: `${o.letterSpacing} !important`,
+  "& *": {
+    color: `${e[30]} !important`
+  }
+}}
+`, X = 3, ie = A(function({ column: e, value: o = e[0].value, onChange: y, renderLabel: P, inlineCSS: H, wrapperProps: u, ...C }, Y) {
+  const s = U(null), r = 54, E = e.findIndex((n) => n.value === o), [h, p] = b(E * r), [$, k] = b(!1), [I, L] = b(0), [N, R] = b(0), W = B(), { isHoverPossible: z } = K(), M = (n) => {
+    k(!0), R(n), L(h);
+  }, w = (n) => {
+    if (!$) return;
+    const i = N - n;
+    let t = I + i;
+    const a = r * (e.length - 1);
+    t < 0 ? t = 0 : t > a && (t = a), p(t), s.current && (s.current.children[0].scrollTop = t);
+  }, O = (n) => M(n.clientY), j = (n) => M(n.touches[0].clientY), F = (n) => w(n.clientY), _ = (n) => w(n.touches[0].clientY), S = (n) => {
+    if (!$ || (k(!1), !z && n.type === "mouseup")) return;
+    if (Math.abs(I - h) < X) {
+      const d = n.target.closest("[data-index]");
+      if (d) {
+        const m = Number(d.dataset.index);
+        if (e[m] && s.current) {
+          const v = s.current.children[0];
+          v.scrollTo({
+            top: m * r,
+            behavior: "smooth"
+          });
+          const D = () => {
+            Math.abs(v.scrollTop - m * r) < 1 && (y(e[m].value), v.removeEventListener("scroll", D));
+          };
+          v.addEventListener("scroll", D);
+        }
+      }
+      return;
+    }
+    let i = Math.round(h / r), t = i * r;
+    const a = r * (e.length - 1);
+    t < 0 ? (t = 0, i = 0) : t > a && (t = a, i = e.length - 1);
+    const l = (c) => {
+      if (Math.abs(c - t) < 1)
+        p(t), s.current && (s.current.children[0].scrollTop = t);
+      else {
+        const d = c + (t - c) / 5;
+        p(d), s.current && (s.current.children[0].scrollTop = d), requestAnimationFrame(() => l(d));
+      }
+    };
+    requestAnimationFrame(() => l(h)), e[i] && y(e[i].value);
+  };
+  return G(() => {
+    const i = e.findIndex((t) => t.value === o) * r;
+    p(i), s.current && (s.current.children[0].scrollTop = i);
+  }, [o, e, r]), /* @__PURE__ */ f(V, { ref: s, ...u, css: u == null ? void 0 : u.inlineCSS, children: /* @__PURE__ */ f(
+    Q,
+    {
+      ref: Y,
+      css: H,
+      ...C,
+      onMouseDown: O,
+      onMouseMove: F,
+      onMouseUp: S,
+      onMouseLeave: S,
+      onTouchStart: j,
+      onTouchMove: _,
+      onTouchEnd: S,
+      onTouchCancel: S,
+      children: e.map((n, i) => {
+        const t = e.findIndex((c) => c.value === o), a = t === 0 ? 0 : Math.round(h / r), l = i === a;
+        return /* @__PURE__ */ q(J, { children: [
+          i === 0 && /* @__PURE__ */ f(
+            x,
+            {
+              className: "chain-picker-item",
+              "data-index": i,
+              selected: !1,
+              distance: (t + 1) * -1
+            }
+          ),
+          /* @__PURE__ */ f(
+            x,
+            {
+              className: "chain-picker-item",
+              "data-index": i,
+              "data-selected": l,
+              selected: l,
+              distance: i - t,
+              children: P ? P(n, l) : n.label
+            }
+          ),
+          i === e.length - 1 && /* @__PURE__ */ f(
+            x,
+            {
+              className: "chain-picker-item",
+              "data-index": i,
+              selected: !1,
+              distance: e.length - t
+            }
+          )
+        ] }, `${W}_${n.label}`);
+      })
+    }
+  ) });
+});
+export {
+  X as SCROLL_POSITION_THRESHOLD,
+  ie as default
+};

package/dist/ChainPicker/ChainPicker.stories.d.ts

@@ -0,0 +1,11 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./ChainPicker').ChainPickerProps & import('react').RefAttributes<HTMLUListElement>>;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Custom: Story;

package/dist/ChainPicker/index.cjs

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

package/dist/ChainPicker/index.d.ts

@@ -0,0 +1,4 @@
+import { default as ChainPicker } from './ChainPicker';
+
+export { type ChainPickerItem } from './ChainPicker';
+export default ChainPicker;

package/dist/ChainPicker/index.es.js

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

package/dist/Checkbox/Checkbox.cjs

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("@emotion/react/jsx-runtime"),C=require("react"),c=require("@emotion/styled"),f=require("../core/useTheme.cjs"),h=t=>t&&t.__esModule?t:{default:t},p=h(c),x=p.default.span`
+  position: relative;
+  display: inline-flex;
+`,m=p.default.input`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;function y({size:t,checked:n,disabled:s,color:i="primary"}){const{palette:{brand:r,grey:e,background:d}}=f.default();let o=e.white,a=e[50],u=e[20];return n&&(o=i==="primary"?r.primary.main:r[i],a=i==="primary"?r.primary.main:r[i],u=e.white),n&&s&&(o=e[30],a=e[30],u=e[10]),!n&&s&&(o=d.primary,a=e[30],u=e[20]),l.jsxs("svg",{width:t==="2xLarge"?48:24,height:t==="2xLarge"?48:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[l.jsx("path",{d:"M2 6C2 3.79086 3.79086 2 6 2H18C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6Z",fill:o}),l.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M18 3H6C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3ZM6 2C3.79086 2 2 3.79086 2 6V18C2 20.2091 3.79086 22 6 22H18C20.2091 22 22 20.2091 22 18V6C22 3.79086 20.2091 2 18 2H6Z",fill:a}),l.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M18.604 6.20309C19.0442 6.53668 19.1306 7.16392 18.797 7.60408L11.218 17.6041C11.0406 17.8382 10.7692 17.9824 10.4759 17.9985C10.1826 18.0147 9.89706 17.901 9.69505 17.6878L5.27405 13.0211C4.89422 12.6202 4.91133 11.9873 5.31227 11.6074C5.7132 11.2276 6.34613 11.2447 6.72596 11.6456L10.3362 15.4564L17.203 6.39603C17.5366 5.95588 18.1639 5.8695 18.604 6.20309Z",fill:u})]})}const g=C.forwardRef(function({size:n="medium",color:s="primary",checked:i,disabled:r,inlineCSS:e,...d},o){return l.jsxs(x,{ref:o,css:e,children:[l.jsx(m,{type:"checkbox",checked:i,disabled:r,...d}),l.jsx(y,{size:n,color:s,checked:i,disabled:r})]})});exports.default=g;

package/dist/Checkbox/Checkbox.d.ts

@@ -0,0 +1,10 @@
+import { InputHTMLAttributes } from 'react';
+import { BrandColorKey } from '../typings/color';
+import { GeneralComponentProps, Size } from '../typings/component';
+
+export interface CheckboxProps extends GeneralComponentProps<Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>> {
+    size?: Extract<Size, 'medium' | '2xLarge'>;
+    color?: BrandColorKey;
+}
+declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLSpanElement>>;
+export default Checkbox;

package/dist/Checkbox/Checkbox.es.js

@@ -0,0 +1,77 @@
+import { jsxs as f, jsx as l } from "@emotion/react/jsx-runtime";
+import { forwardRef as s } from "react";
+import m from "@emotion/styled";
+import u from "../core/useTheme.es.js";
+const h = m.span`
+  position: relative;
+  display: inline-flex;
+`, c = m.input`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+function x({
+  size: C,
+  checked: o,
+  disabled: n,
+  color: r = "primary"
+}) {
+  const {
+    palette: { brand: i, grey: e, background: d }
+  } = u();
+  let t = e.white, p = e[50], a = e[20];
+  return o && (t = r === "primary" ? i.primary.main : i[r], p = r === "primary" ? i.primary.main : i[r], a = e.white), o && n && (t = e[30], p = e[30], a = e[10]), !o && n && (t = d.primary, p = e[30], a = e[20]), /* @__PURE__ */ f(
+    "svg",
+    {
+      width: C === "2xLarge" ? 48 : 24,
+      height: C === "2xLarge" ? 48 : 24,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ l(
+          "path",
+          {
+            d: "M2 6C2 3.79086 3.79086 2 6 2H18C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6Z",
+            fill: t
+          }
+        ),
+        /* @__PURE__ */ l(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M18 3H6C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3ZM6 2C3.79086 2 2 3.79086 2 6V18C2 20.2091 3.79086 22 6 22H18C20.2091 22 22 20.2091 22 18V6C22 3.79086 20.2091 2 18 2H6Z",
+            fill: p
+          }
+        ),
+        /* @__PURE__ */ l(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M18.604 6.20309C19.0442 6.53668 19.1306 7.16392 18.797 7.60408L11.218 17.6041C11.0406 17.8382 10.7692 17.9824 10.4759 17.9985C10.1826 18.0147 9.89706 17.901 9.69505 17.6878L5.27405 13.0211C4.89422 12.6202 4.91133 11.9873 5.31227 11.6074C5.7132 11.2276 6.34613 11.2447 6.72596 11.6456L10.3362 15.4564L17.203 6.39603C17.5366 5.95588 18.1639 5.8695 18.604 6.20309Z",
+            fill: a
+          }
+        )
+      ]
+    }
+  );
+}
+const v = s(function({ size: o = "medium", color: n = "primary", checked: r, disabled: i, inlineCSS: e, ...d }, t) {
+  return /* @__PURE__ */ f(h, { ref: t, css: e, children: [
+    /* @__PURE__ */ l(c, { type: "checkbox", checked: r, disabled: i, ...d }),
+    /* @__PURE__ */ l(x, { size: o, color: n, checked: r, disabled: i })
+  ] });
+});
+export {
+  v as default
+};

package/dist/Checkbox/Checkbox.stories.d.ts

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

package/dist/Checkbox/index.cjs

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

package/dist/Checkbox/index.d.ts

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

package/dist/Checkbox/index.es.js

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

package/dist/Chip/Chip.cjs

@@ -0,0 +1,15 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("@emotion/react/jsx-runtime"),b=require("react"),f=require("@emotion/styled"),m=require("../utils/getContrastingTextColor/getContrastingTextColor.cjs"),h=require("../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),x=i=>i&&i.__esModule?i:{default:i},C=x(f),g=C.default.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({theme:{spacing:i}})=>i.content(1)}px;
+  border-radius: 18px;
+  box-sizing: border-box;
+  color: ${({theme:i})=>i.palette.grey[100]};
+  cursor: ${({disabled:i})=>i?"not-allowed":"pointer"};
+  pointer-events: ${({disabled:i})=>i?"none":"auto"};
+
+  ${({theme:{palette:{brand:i,grey:o,background:t}},variant:l,selected:e,isHoverPossible:n})=>{let r={};return l==="filled"?(r={backgroundColor:e?i.primary.main:t.primary,color:m.default(e?i.primary.main:t.primary,[o.white,o[100]]),border:"1px solid transparent","&:active:not([disabled])":{backgroundColor:e?i.primary.press:o[10]},"&[disabled]":{backgroundColor:e?i.primary.disable:o[10],color:o[30]},"& svg":{color:"inherit"}},n&&(r={...r,"&:hover:not([disabled])":{backgroundColor:e?i.primary.press:o[10]}}),r):(l==="outlined"&&(r={backgroundColor:o.white,color:o[70],border:`1px solid ${e?i.primary.main:o[30]}`,"&:active:not([disabled])":{backgroundColor:e?i.primary.disable:o[10]},"&[disabled]":{backgroundColor:e?i.primary.disable:o[10],borderColor:e?i.primary.disableLine:o[30],color:o[30]},"& svg":{color:"inherit"}},n&&(r={...r,"&:hover:not([disabled])":{backgroundColor:e?i.primary.disable:o[10]}})),r)}}
+
+  ${({theme:{typography:i}})=>({padding:"8px 11px",maxHeight:36,fontSize:i.b4M.size,fontWeight:i.b4M.weight,lineHeight:i.b4M.lineHeight,letterSpacing:i.b4M.letterSpacing,textAlign:"center","& svg":{width:16,height:16}})}
+`,v=b.forwardRef(({children:i,tag:o,variant:t="filled",startAdornment:l,endAdornment:e,iconOnly:n,selected:r=!1,disabled:a=!1,inlineCSS:s,...d},u)=>{const{isHoverPossible:c}=h.default();return p.jsxs(g,{as:o,ref:u,variant:t,selected:r,disabled:a,isHoverPossible:c,...d,css:s,children:[l,!n&&i,e]})});exports.default=v;

package/dist/Chip/Chip.d.ts

@@ -0,0 +1,14 @@
+import { ElementType, ReactNode } from 'react';
+import { PolymorphicComponentProps, Variant } from '../typings/component';
+
+export type ChipProps<T extends ElementType = 'div'> = PolymorphicComponentProps<T> & {
+    variant?: Extract<Variant, 'filled' | 'outlined'>;
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+    iconOnly?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+};
+type ChipComponent<DT extends ElementType> = <T extends ElementType = DT>(props: ChipProps<T>) => ReactNode;
+declare const Chip: ChipComponent<'div'>;
+export default Chip;