@dotss/ui 0.0.4 → 0.0.6

package/dist/BottomSheet/index.d.ts

@@ -0,0 +1,7 @@
+import { default as BottomSheet } from './BottomSheet';
+
+export { default as BottomSheetTitle } from './BottomSheetTitle';
+export { default as BottomSheetContent } from './BottomSheetContent';
+export { default as BottomSheetAction } from './BottomSheetAction';
+export { default as BottomSheetText } from './BottomSheetText';
+export default BottomSheet;

package/dist/BottomSheet/index.es.js

@@ -0,0 +1,12 @@
+import e from "./BottomSheet.es.js";
+import { default as r } from "./BottomSheetTitle/BottomSheetTitle.es.js";
+import { default as f } from "./BottomSheetContent/BottomSheetContent.es.js";
+import { default as p } from "./BottomSheetAction/BottomSheetAction.es.js";
+import { default as d } from "./BottomSheetText/BottomSheetText.es.js";
+export {
+  p as BottomSheetAction,
+  f as BottomSheetContent,
+  d as BottomSheetText,
+  r as BottomSheetTitle,
+  e as default
+};

package/dist/Box/Box.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("@emotion/react/jsx-runtime"),a=require("react"),f=require("@emotion/styled"),h=t=>t&&t.__esModule?t:{default:t},v=h(f),s=v.default.div`
+  ${({theme:{spacing:t},spacingType:e="content",m:o,mt:d,mb:n,ml:i,mr:l})=>!o&&(d||n||i||l)?{marginTop:d?t[e](d):void 0,marginBottom:n?t[e](n):void 0,marginLeft:i?t[e](i):void 0,marginRight:l?t[e](l):void 0}:null};
+  ${({theme:{spacing:t},spacingType:e="content",m:o})=>o?{margin:t[e](o)}:null};
+  ${({theme:{spacing:t},spacingType:e="content",p:o,pt:d,pb:n,pl:i,pr:l})=>!o&&(d||n||i||l)?{paddingTop:d?t[e](d):void 0,paddingBottom:n?t[e](n):void 0,paddingLeft:i?t[e](i):void 0,paddingRight:l?t[e](l):void 0}:null};
+  ${({theme:{spacing:t},spacingType:e="content",p:o})=>o?{padding:t[e](o)}:null};
+
+  ${({visuallyHidden:t})=>t?{clip:"rect(0 0 0 0)",clipPath:"inset(50%)",height:"1px",overflow:"hidden",position:"absolute",whiteSpace:"nowrap",width:"1px"}:null}
+`,c=a.forwardRef(function({children:e,tag:o,inlineCSS:d,spacingType:n="content",visuallyHidden:i=!1,...l},u){return r.jsx(s,{ref:u,as:o,spacingType:n,visuallyHidden:i,...l,css:d,children:e})});exports.default=c;

package/dist/Box/Box.d.ts

@@ -0,0 +1,9 @@
+import { ElementType, ReactNode } from 'react';
+import { PolymorphicComponentProps, Spacing } from '../typings/component';
+
+export type BoxProps<T extends ElementType = 'div'> = Spacing & PolymorphicComponentProps<T> & {
+    visuallyHidden?: boolean;
+};
+type BoxComponent<DT extends ElementType> = <T extends ElementType = DT>(props: BoxProps<T>) => ReactNode;
+declare const Box: BoxComponent<'div'>;
+export default Box;

package/dist/Box/Box.es.js

@@ -0,0 +1,45 @@
+import { jsx as h } from "@emotion/react/jsx-runtime";
+import { forwardRef as f } from "react";
+import v from "@emotion/styled";
+const u = v.div`
+  ${({ theme: { spacing: o }, spacingType: t = "content", m: d, mt: e, mb: i, ml: n, mr: r }) => !d && (e || i || n || r) ? {
+  marginTop: e ? o[t](e) : void 0,
+  marginBottom: i ? o[t](i) : void 0,
+  marginLeft: n ? o[t](n) : void 0,
+  marginRight: r ? o[t](r) : void 0
+} : null};
+  ${({ theme: { spacing: o }, spacingType: t = "content", m: d }) => d ? { margin: o[t](d) } : null};
+  ${({ theme: { spacing: o }, spacingType: t = "content", p: d, pt: e, pb: i, pl: n, pr: r }) => !d && (e || i || n || r) ? {
+  paddingTop: e ? o[t](e) : void 0,
+  paddingBottom: i ? o[t](i) : void 0,
+  paddingLeft: n ? o[t](n) : void 0,
+  paddingRight: r ? o[t](r) : void 0
+} : null};
+  ${({ theme: { spacing: o }, spacingType: t = "content", p: d }) => d ? { padding: o[t](d) } : null};
+
+  ${({ visuallyHidden: o }) => o ? {
+  clip: "rect(0 0 0 0)",
+  clipPath: "inset(50%)",
+  height: "1px",
+  overflow: "hidden",
+  position: "absolute",
+  whiteSpace: "nowrap",
+  width: "1px"
+} : null}
+`, w = f(function({ children: t, tag: d, inlineCSS: e, spacingType: i = "content", visuallyHidden: n = !1, ...r }, l) {
+  return /* @__PURE__ */ h(
+    u,
+    {
+      ref: l,
+      as: d,
+      spacingType: i,
+      visuallyHidden: n,
+      ...r,
+      css: e,
+      children: t
+    }
+  );
+});
+export {
+  w as default
+};

package/dist/Box/Box.stories.d.ts

@@ -0,0 +1,26 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: <T extends import('react').ElementType = "div">(props: import('./Box').BoxProps<T>) => import('react').ReactNode;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        spacingType: {
+            options: string[];
+            control: {
+                type: "radio";
+            };
+        };
+        visuallyHidden: {
+            control: {
+                type: "boolean";
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Spacing: Story;

package/dist/Box/index.cjs

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

package/dist/Box/index.d.ts

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

package/dist/Box/index.es.js

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

package/dist/Button/Button.cjs

@@ -0,0 +1,24 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=require("@emotion/react/jsx-runtime"),h=require("react"),C=require("../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),H=require("../utils/getIconLabel/getIconLabel.cjs"),k=require("@emotion/styled"),a=require("../utils/getContrastingTextColor/getContrastingTextColor.cjs"),R=l=>l&&l.__esModule?l:{default:l},M=R(k),z=M.default.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  & svg {
+    color: inherit;
+  }
+
+  ${({theme:{palette:{brand:l,grey:e}},variant:i,color:u})=>{let p={backgroundColor:l.primary.main,color:a.default(l.primary.main,[e.white,e[100]])};return i==="filled"&&u==="secondary"&&(p={backgroundColor:l.secondary,color:a.default(l.secondary,[e.white,e[100]])}),i==="filled"&&u==="tertiary"&&(p={backgroundColor:l.tertiary,color:a.default(l.tertiary,[e.white,e[100]])}),i==="outlined"&&(p={borderColor:e[50],backgroundColor:e.white,color:a.default(e.white,[e.white,e[100]])}),i==="text"&&u==="primary"&&(p={backgroundColor:"transparent",color:a.default("transparent",[e.white,e[100]])}),i==="text"&&u==="secondary"&&(p={backgroundColor:"transparent",color:e[70]}),p}};
+
+  ${({theme:{spacing:l,typography:e},variant:i,size:u,startAdornment:p,endAdornment:o,iconOnly:r})=>{let f={gap:l.content(1),padding:10,borderRadius:8,fontSize:e.b4M.size,fontWeight:e.b4M.weight,lineHeight:e.b4M.lineHeight,letterSpacing:e.b4M.letterSpacing,"& svg":{width:20,height:20}};if(u==="2xLarge"){const{h0B:x}=e;let t="26px 24px";p&&(t=i==="text"?"26px 16px 26px 12px":"26px 36px 26px 24px"),o&&(t=i==="text"?"26px 12px 26px 16px":"26px 24px 26px 36px"),p&&o&&(t=i==="text"?"26px 12px":"26px 24px"),r&&(t="26px 25px"),f={gap:l.content(3),maxHeight:100,padding:t,borderRadius:20,fontSize:x.size,fontWeight:x.weight,lineHeight:x.lineHeight,letterSpacing:x.letterSpacing,"& svg":{width:48,height:48}}}if(u==="xLarge"){const{h4B:x}=e;let t="16px 12px";p&&(t=i==="text"?"16px 8px 16px 4px":"16px 16px 16px 12px"),o&&(t=i==="text"?"16px 4px 16px 8px":"16px 12px 16px 16px"),p&&o&&(t=i==="text"?"16px 4px":"16px 12px"),r&&(t="16px 15px"),f={gap:l.content(2),maxHeight:56,padding:t,borderRadius:12,fontSize:x.size,fontWeight:x.weight,lineHeight:x.lineHeight,letterSpacing:x.letterSpacing,"& svg":{width:24,height:24}}}if(u==="large"){const{b2M:x}=e;let t="12px 8px";p&&(t=i==="text"?"12px 8px 12px 4px":"12px 12px 12px 8px"),o&&(t=i==="text"?"12px 4px 12px 8px":"12px 8px 12px 12px"),p&&o&&(t=i==="text"?"12px 4px":"12px 8px"),r&&(t="12px 11px"),f={gap:6,maxHeight:48,padding:t,borderRadius:10,fontSize:x.size,fontWeight:x.weight,lineHeight:x.lineHeight,letterSpacing:x.letterSpacing,"& svg":{width:24,height:24}}}if(u==="medium"){const{b4M:x}=e;let t="10px 8px";p&&(t=i==="text"?"10px 8px 10px 4px":"10px 10px 10px 8px"),o&&(t=i==="text"?"10px 4px 10px 8px":"10px 8px 10px 10px"),p&&o&&(t=i==="text"?"10px 4px":"10px 8px"),r&&(t="10px 9px"),f={gap:l.content(1),maxHeight:40,padding:t,borderRadius:8,fontSize:x.size,fontWeight:x.weight,lineHeight:x.lineHeight,letterSpacing:x.letterSpacing,"& svg":{width:20,height:20}}}if(u==="small"){const{c3M:x}=e;let t="8px 6px";p&&(t=i==="text"?"8px 8px 8px 4px":"8px 8px 8px 6px"),o&&(t=i==="text"?"8px 4px 8px 8px":"8px 6px 8px 8px"),p&&o&&(t=i==="text"?"8px 6px":"8px 4px"),r&&(t="8px 7px"),f={gap:l.content(1),maxHeight:32,padding:t,borderRadius:6,fontSize:x.size,fontWeight:x.weight,lineHeight:x.lineHeight,letterSpacing:x.letterSpacing,"& svg":{width:16,height:16}}}if(u==="xSmall"){const{c3M:x}=e;let t="4px 6px";p&&(t=i==="text"?"4px 8px 4px 4px":"4px 8px 4px 6px"),o&&(t=i==="text"?"4px 4px 4px 8px":"4px 6px 4px 8px"),p&&o&&(t=i==="text"?"4px":"4px 6px"),r&&(t="4px 3px"),r?f={gap:l.content(1),maxHeight:24,width:24,height:24,borderRadius:6,fontSize:x.size,fontWeight:x.weight,lineHeight:x.lineHeight,letterSpacing:x.letterSpacing,"& svg":{width:16,height:16}}:f={gap:l.content(1),maxHeight:24,padding:t,borderRadius:6,fontSize:x.size,fontWeight:x.weight,lineHeight:x.lineHeight,letterSpacing:x.letterSpacing,"& svg":{width:16,height:16}}}return i==="text"&&u==="xLarge"&&(f={...f,borderWidth:1.5}),f}};
+
+  ${({rounded:l})=>l?{}:{borderRadius:"unset"}}
+
+  ${({theme:{palette:{brand:l,grey:e}},variant:i,color:u,isHoverPossible:p})=>{let o={'&:active:not([aria-disabled="true"])':{backgroundColor:l.primary.press},...p?{'&:hover:not([aria-disabled="true"])':{backgroundColor:l.primary.press}}:{}};return i==="filled"&&u==="secondary"&&(o={'&:active:not([aria-disabled="true"])':{backgroundColor:e[100]},...p?{'&:hover:not([aria-disabled="true"])':{backgroundColor:e[100]}}:{}}),i==="filled"&&u==="tertiary"&&(o={'&:active:not([aria-disabled="true"])':{backgroundColor:e[70]},...p?{'&:hover:not([aria-disabled="true"])':{backgroundColor:e[70]}}:{}}),(i==="outlined"||i==="text")&&(o={'&:active:not([aria-disabled="true"])':{backgroundColor:e[10]},...p?{'&:hover:not([aria-disabled="true"])':{backgroundColor:e[10]}}:{}}),o}}
+
+  &[aria-disabled="true"] {
+    cursor: not-allowed;
+    ${({theme:{palette:{brand:l,grey:e}},variant:i,color:u})=>{let p={backgroundColor:l.primary.disable,color:a.default(l.primary.disable,[e[30],e.white])};return i==="filled"&&u==="secondary"&&(p={backgroundColor:e[10],color:a.default(e[10],[e[30],e.white])}),i==="outlined"&&(p={borderColor:e[30],backgroundColor:e[10],color:a.default(e[30],[e[30],e.white])}),i==="text"&&(p={color:a.default(e[30],[e[30],e.white])}),p}};
+  }
+
+  ${({fullWidth:l})=>l?{width:"100%"}:null};
+`,W=h.forwardRef(function({children:e,variant:i="filled",size:u="medium",color:p="primary",startAdornment:o,endAdornment:r,iconOnly:f,fullWidth:x,inlineCSS:t,rounded:s=!0,disabled:g,...d},b){const{isHoverPossible:n}=C.default(),w=()=>{if(!f)return;if(d["aria-label"])return d["aria-label"];const c=o||r||e;if(h.isValidElement(c))return H.default(c.props.name)};return S.jsxs(z,{ref:b,variant:i,size:u,color:p,fullWidth:x,rounded:s,startAdornment:o,endAdornment:r,iconOnly:f,isHoverPossible:n,"aria-disabled":g,"aria-label":w(),...d,css:t,children:[o,!f&&e,r]})});exports.default=W;

package/dist/Button/Button.d.ts

@@ -0,0 +1,16 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { BrandColorKey } from '../typings/color';
+import { GeneralComponentProps, Size, Variant } from '../typings/component';
+
+export interface ButtonProps extends GeneralComponentProps<ButtonHTMLAttributes<HTMLButtonElement>> {
+    variant?: Extract<Variant, 'filled' | 'outlined' | 'text'>;
+    color?: BrandColorKey;
+    size?: Size;
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+    iconOnly?: boolean;
+    fullWidth?: boolean;
+    rounded?: boolean;
+}
+declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default Button;

package/dist/Button/Button.es.js

@@ -0,0 +1,300 @@
+import { jsxs as n } from "@emotion/react/jsx-runtime";
+import { forwardRef as w, isValidElement as S } from "react";
+import C from "../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
+import H from "../utils/getIconLabel/getIconLabel.es.js";
+import k from "@emotion/styled";
+import c from "../utils/getContrastingTextColor/getContrastingTextColor.es.js";
+const m = k.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  & svg {
+    color: inherit;
+  }
+
+  ${({
+  theme: {
+    palette: { brand: l, grey: e }
+  },
+  variant: i,
+  color: r
+}) => {
+  let p = {
+    backgroundColor: l.primary.main,
+    color: c(l.primary.main, [e.white, e[100]])
+  };
+  return i === "filled" && r === "secondary" && (p = {
+    backgroundColor: l.secondary,
+    color: c(l.secondary, [e.white, e[100]])
+  }), i === "filled" && r === "tertiary" && (p = {
+    backgroundColor: l.tertiary,
+    color: c(l.tertiary, [e.white, e[100]])
+  }), i === "outlined" && (p = {
+    borderColor: e[50],
+    backgroundColor: e.white,
+    color: c(e.white, [e.white, e[100]])
+  }), i === "text" && r === "primary" && (p = {
+    backgroundColor: "transparent",
+    color: c("transparent", [e.white, e[100]])
+  }), i === "text" && r === "secondary" && (p = {
+    backgroundColor: "transparent",
+    color: e[70]
+  }), p;
+}};
+
+  ${({
+  theme: { spacing: l, typography: e },
+  variant: i,
+  size: r,
+  startAdornment: p,
+  endAdornment: o,
+  iconOnly: f
+}) => {
+  let h = {
+    gap: l.content(1),
+    padding: 10,
+    borderRadius: 8,
+    fontSize: e.b4M.size,
+    fontWeight: e.b4M.weight,
+    lineHeight: e.b4M.lineHeight,
+    letterSpacing: e.b4M.letterSpacing,
+    "& svg": {
+      width: 20,
+      height: 20
+    }
+  };
+  if (r === "2xLarge") {
+    const { h0B: x } = e;
+    let t = "26px 24px";
+    p && (t = i === "text" ? "26px 16px 26px 12px" : "26px 36px 26px 24px"), o && (t = i === "text" ? "26px 12px 26px 16px" : "26px 24px 26px 36px"), p && o && (t = i === "text" ? "26px 12px" : "26px 24px"), f && (t = "26px 25px"), h = {
+      gap: l.content(3),
+      maxHeight: 100,
+      padding: t,
+      borderRadius: 20,
+      fontSize: x.size,
+      fontWeight: x.weight,
+      lineHeight: x.lineHeight,
+      letterSpacing: x.letterSpacing,
+      "& svg": {
+        width: 48,
+        height: 48
+      }
+    };
+  }
+  if (r === "xLarge") {
+    const { h4B: x } = e;
+    let t = "16px 12px";
+    p && (t = i === "text" ? "16px 8px 16px 4px" : "16px 16px 16px 12px"), o && (t = i === "text" ? "16px 4px 16px 8px" : "16px 12px 16px 16px"), p && o && (t = i === "text" ? "16px 4px" : "16px 12px"), f && (t = "16px 15px"), h = {
+      gap: l.content(2),
+      maxHeight: 56,
+      padding: t,
+      borderRadius: 12,
+      fontSize: x.size,
+      fontWeight: x.weight,
+      lineHeight: x.lineHeight,
+      letterSpacing: x.letterSpacing,
+      "& svg": {
+        width: 24,
+        height: 24
+      }
+    };
+  }
+  if (r === "large") {
+    const { b2M: x } = e;
+    let t = "12px 8px";
+    p && (t = i === "text" ? "12px 8px 12px 4px" : "12px 12px 12px 8px"), o && (t = i === "text" ? "12px 4px 12px 8px" : "12px 8px 12px 12px"), p && o && (t = i === "text" ? "12px 4px" : "12px 8px"), f && (t = "12px 11px"), h = {
+      gap: 6,
+      maxHeight: 48,
+      padding: t,
+      borderRadius: 10,
+      fontSize: x.size,
+      fontWeight: x.weight,
+      lineHeight: x.lineHeight,
+      letterSpacing: x.letterSpacing,
+      "& svg": {
+        width: 24,
+        height: 24
+      }
+    };
+  }
+  if (r === "medium") {
+    const { b4M: x } = e;
+    let t = "10px 8px";
+    p && (t = i === "text" ? "10px 8px 10px 4px" : "10px 10px 10px 8px"), o && (t = i === "text" ? "10px 4px 10px 8px" : "10px 8px 10px 10px"), p && o && (t = i === "text" ? "10px 4px" : "10px 8px"), f && (t = "10px 9px"), h = {
+      gap: l.content(1),
+      maxHeight: 40,
+      padding: t,
+      borderRadius: 8,
+      fontSize: x.size,
+      fontWeight: x.weight,
+      lineHeight: x.lineHeight,
+      letterSpacing: x.letterSpacing,
+      "& svg": {
+        width: 20,
+        height: 20
+      }
+    };
+  }
+  if (r === "small") {
+    const { c3M: x } = e;
+    let t = "8px 6px";
+    p && (t = i === "text" ? "8px 8px 8px 4px" : "8px 8px 8px 6px"), o && (t = i === "text" ? "8px 4px 8px 8px" : "8px 6px 8px 8px"), p && o && (t = i === "text" ? "8px 6px" : "8px 4px"), f && (t = "8px 7px"), h = {
+      gap: l.content(1),
+      maxHeight: 32,
+      padding: t,
+      borderRadius: 6,
+      fontSize: x.size,
+      fontWeight: x.weight,
+      lineHeight: x.lineHeight,
+      letterSpacing: x.letterSpacing,
+      "& svg": {
+        width: 16,
+        height: 16
+      }
+    };
+  }
+  if (r === "xSmall") {
+    const { c3M: x } = e;
+    let t = "4px 6px";
+    p && (t = i === "text" ? "4px 8px 4px 4px" : "4px 8px 4px 6px"), o && (t = i === "text" ? "4px 4px 4px 8px" : "4px 6px 4px 8px"), p && o && (t = i === "text" ? "4px" : "4px 6px"), f && (t = "4px 3px"), f ? h = {
+      gap: l.content(1),
+      maxHeight: 24,
+      width: 24,
+      height: 24,
+      borderRadius: 6,
+      fontSize: x.size,
+      fontWeight: x.weight,
+      lineHeight: x.lineHeight,
+      letterSpacing: x.letterSpacing,
+      "& svg": {
+        width: 16,
+        height: 16
+      }
+    } : h = {
+      gap: l.content(1),
+      maxHeight: 24,
+      padding: t,
+      borderRadius: 6,
+      fontSize: x.size,
+      fontWeight: x.weight,
+      lineHeight: x.lineHeight,
+      letterSpacing: x.letterSpacing,
+      "& svg": {
+        width: 16,
+        height: 16
+      }
+    };
+  }
+  return i === "text" && r === "xLarge" && (h = {
+    ...h,
+    borderWidth: 1.5
+  }), h;
+}};
+
+  ${({ rounded: l }) => l ? {} : {
+  borderRadius: "unset"
+}}
+
+  ${({
+  theme: {
+    palette: { brand: l, grey: e }
+  },
+  variant: i,
+  color: r,
+  isHoverPossible: p
+}) => {
+  let o = {
+    '&:active:not([aria-disabled="true"])': { backgroundColor: l.primary.press },
+    ...p ? { '&:hover:not([aria-disabled="true"])': { backgroundColor: l.primary.press } } : {}
+  };
+  return i === "filled" && r === "secondary" && (o = {
+    '&:active:not([aria-disabled="true"])': { backgroundColor: e[100] },
+    ...p ? { '&:hover:not([aria-disabled="true"])': { backgroundColor: e[100] } } : {}
+  }), i === "filled" && r === "tertiary" && (o = {
+    '&:active:not([aria-disabled="true"])': { backgroundColor: e[70] },
+    ...p ? { '&:hover:not([aria-disabled="true"])': { backgroundColor: e[70] } } : {}
+  }), (i === "outlined" || i === "text") && (o = {
+    '&:active:not([aria-disabled="true"])': { backgroundColor: e[10] },
+    ...p ? { '&:hover:not([aria-disabled="true"])': { backgroundColor: e[10] } } : {}
+  }), o;
+}}
+
+  &[aria-disabled="true"] {
+    cursor: not-allowed;
+    ${({
+  theme: {
+    palette: { brand: l, grey: e }
+  },
+  variant: i,
+  color: r
+}) => {
+  let p = {
+    backgroundColor: l.primary.disable,
+    color: c(l.primary.disable, [e[30], e.white])
+  };
+  return i === "filled" && r === "secondary" && (p = {
+    backgroundColor: e[10],
+    color: c(e[10], [e[30], e.white])
+  }), i === "outlined" && (p = {
+    borderColor: e[30],
+    backgroundColor: e[10],
+    color: c(e[30], [e[30], e.white])
+  }), i === "text" && (p = {
+    color: c(e[30], [e[30], e.white])
+  }), p;
+}};
+  }
+
+  ${({ fullWidth: l }) => l ? {
+  width: "100%"
+} : null};
+`, B = w(function({
+  children: e,
+  variant: i = "filled",
+  size: r = "medium",
+  color: p = "primary",
+  startAdornment: o,
+  endAdornment: f,
+  iconOnly: h,
+  fullWidth: x,
+  inlineCSS: t,
+  rounded: d = !0,
+  disabled: u,
+  ...a
+}, s) {
+  const { isHoverPossible: b } = C();
+  return /* @__PURE__ */ n(
+    m,
+    {
+      ref: s,
+      variant: i,
+      size: r,
+      color: p,
+      fullWidth: x,
+      rounded: d,
+      startAdornment: o,
+      endAdornment: f,
+      iconOnly: h,
+      isHoverPossible: b,
+      "aria-disabled": u,
+      "aria-label": (() => {
+        if (!h) return;
+        if (a["aria-label"]) return a["aria-label"];
+        const g = o || f || e;
+        if (S(g))
+          return H(g.props.name);
+      })(),
+      ...a,
+      css: t,
+      children: [
+        o,
+        !h && e,
+        f
+      ]
+    }
+  );
+});
+export {
+  B as default
+};

package/dist/Button/Button.stories.d.ts

@@ -0,0 +1,32 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Button').ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        startAdornment: {
+            control: {
+                disable: true;
+            };
+        };
+        endAdornment: {
+            control: {
+                disable: true;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Filled: Story;
+export declare const Outlined: Story;
+export declare const Text: Story;
+export declare const FullWidth: Story;
+export declare const StartAdornment: Story;
+export declare const EndAdornment: Story;
+export declare const BothAdornment: Story;
+export declare const IconOnly: Story;

package/dist/Button/index.cjs

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

package/dist/Button/index.d.ts

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

package/dist/Button/index.es.js

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

package/dist/Card/Card.cjs

@@ -0,0 +1,18 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("@emotion/react/jsx-runtime"),C=require("react"),k=require("@emotion/styled"),m=require("../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),h=o=>o&&o.__esModule?o:{default:o},c=h(k),x=c.default.div`
+  display: flex;
+  flex-direction: column;
+  color: ${({theme:o})=>o.palette.grey[100]};
+  &[disabled] {
+    pointer-events: none;
+  }
+
+  ${({theme:{spacing:o},appearance:r,variant:d})=>{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 d==="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 d==="outlined"&&(e={...e,padding:`calc(${o.content(4)-2}px)`}),e}return{}}}
+
+  ${({theme:{palette:{brand:o,grey:r,background:d}},variant:e,disabled:t,active:n,isHoverPossible:l})=>{if(e==="outlined"){if(!t&&n)return{borderColor:o.primary.main,backgroundColor:r.white,"&:active":{backgroundColor:o.primary.disable},...l?{"&:hover":{backgroundColor:o.primary.disable}}:{}};if(!t&&!n)return{borderWidth:2,borderColor:r[30],backgroundColor:r.white,"&:active":{backgroundColor:r[10]},...l?{"&: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},...l?{"&:hover":{backgroundColor:o.primary.press}}:{}};if(!t&&!n)return{border:"none",backgroundColor:d.primary,"&:active":{backgroundColor:r[10]},...l?{"&: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?{}:{}}
+`,y=c.default.div`
+  &[disabled] {
+    cursor: not-allowed;
+  }
+`,$=C.forwardRef(function({children:r,tag:d,inlineCSS:e,variant:t="filled",active:n=!1,disabled:l=!1,appearance:a="mobile",wrapperProps:u={},...f},b){const{isHoverPossible:s}=m.default();return i.jsx(y,{disabled:l,...u,css:u==null?void 0:u.inlineCSS,children:i.jsx(x,{as:d,variant:t,active:n,disabled:l,appearance:a,isHoverPossible:s,...f,css:e,ref:b,children:r})})});exports.default=$;

package/dist/Card/Card.d.ts

@@ -0,0 +1,13 @@
+import { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { GeneralComponentProps, PolymorphicComponentProps, Variant } from '../typings/component';
+
+export type CardProps<T extends ElementType = 'div'> = PolymorphicComponentProps<T> & {
+    variant?: Extract<Variant, 'filled' | 'outlined'>;
+    active?: boolean;
+    disabled?: boolean;
+    appearance?: 'kiosk' | 'mobile';
+    wrapperProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
+};
+type CardComponent<DT extends ElementType> = <T extends ElementType = DT>(props: CardProps<T>) => ReactNode;
+declare const Card: CardComponent<'div'>;
+export default Card;