@dotss/ui 0.0.4 → 0.0.6

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @dotss/ui
 
+## 0.0.6
+
+## 0.0.5
+
 ## 0.0.4
 
 ## 0.0.2

package/dist/Accordion/Accordion.cjs

@@ -0,0 +1,34 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("@emotion/react/jsx-runtime"),i=require("react"),_=require("../Icon/Icon.cjs"),q=require("../utils/convertNumberToCSSValue.cjs"),C=require("@emotion/styled"),T=e=>e&&e.__esModule?e:{default:e},c=T(C),k=c.default.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  background-color: ${({theme:{palette:{grey:e,background:n}},disabled:t})=>t?n.secondary:e.white};
+
+  ${({fullWidth:e})=>e?{width:"100%"}:null};
+`,z=c.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: calc(24px + (${({theme:{spacing:e}})=>e.content(4)}px * 2));
+  gap: ${({theme:{spacing:e}})=>e.content(2)}px;
+  cursor: ${({disabled:e})=>e?"not-allowed":"pointer"};
+
+  ${({theme:{palette:{grey:e},typography:{h5M:n}},disabled:t})=>({fontSize:n.size,fontWeight:n.weight,lineHeight:n.lineHeight,letterSpacing:n.letterSpacing,color:t?e[50]:e[70],"& svg":{color:t?e[50]:e[70]}})};
+`,A=c.default.button`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({theme:{spacing:e}})=>e.content(2)}px;
+  padding: ${({theme:{spacing:e}})=>e.content(4)}px;
+`,D=c.default.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s;
+  transform: rotate(${({expand:e})=>e?"180deg":"0deg"});
+`,B=c.default.div`
+  transition: height 0.2s;
+  overflow: hidden;
+`,L=c.default.div`
+  padding: ${({theme:{spacing:e}})=>`0 ${e.content(4)}px ${e.content(4)}px ${e.content(4)}px`};
+`,N=i.forwardRef(function({children:n,expand:t=!1,title:S,endAdornment:v,onChange:h,disabled:u=!1,inlineCSS:E,headerProps:d,...w},I){const m=i.useId(),x=i.useId(),[r,g]=i.useState(t),[f,p]=i.useState(t?"auto":"0px"),o=i.useRef(null),b=s=>{u||(typeof h=="function"?h(s):g(a=>!a))};return i.useEffect(()=>{g(t)},[t]),i.useEffect(()=>{var y,$;let s;const a=q.default(((y=o.current)==null?void 0:y.scrollHeight)||0),H=!r&&f==="auto",R=!r&&f!=="auto";return($=o.current)!=null&&$.parentElement&&(r?(o.current.parentElement.style.height=a,s=setTimeout(()=>{var j;p("auto"),(j=o.current)!=null&&j.parentElement&&(o.current.parentElement.style.height="auto")},200)):H?(o.current.parentElement.style.height=a,p(a)):R&&(o.current.parentElement.style.height="0px",p("0px"))),()=>{s&&clearTimeout(s)}},[r,f]),l.jsxs(k,{ref:I,disabled:u,...w,css:E,children:[l.jsx(z,{as:(d==null?void 0:d.tag)||"h3",onClick:b,disabled:u,...d,children:l.jsxs(A,{id:m,"aria-disabled":u,"aria-expanded":r,"aria-controls":x,children:[S,l.jsx(D,{expand:r,children:v||l.jsx(_.default,{name:"ChevronDownLine",size:"xSmall"})})]})}),l.jsx(B,{children:l.jsx(L,{role:"region",id:x,"aria-labelledby":m,ref:o,children:n})})]})});exports.default=N;

package/dist/Accordion/Accordion.d.ts

@@ -0,0 +1,14 @@
+import { ElementType, HTMLAttributes, MouseEvent, ReactNode } from 'react';
+import { GeneralComponentProps, PolymorphicComponentProps } from '../typings/component';
+
+export interface AccordionProps extends Omit<GeneralComponentProps<HTMLAttributes<HTMLDivElement>>, 'title'> {
+    expand?: boolean;
+    onChange?: (e: MouseEvent<HTMLDivElement>) => void;
+    title: ReactNode;
+    endAdornment?: ReactNode;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    headerProps?: PolymorphicComponentProps<ElementType>;
+}
+declare const Accordion: import('react').ForwardRefExoticComponent<AccordionProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Accordion;

package/dist/Accordion/Accordion.es.js

@@ -0,0 +1,115 @@
+import { jsxs as v, jsx as s } from "@emotion/react/jsx-runtime";
+import { forwardRef as z, useId as w, useState as E, useRef as A, useEffect as S } from "react";
+import B from "../Icon/Icon.es.js";
+import D from "../utils/convertNumberToCSSValue.es.js";
+import r from "@emotion/styled";
+const L = r.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  background-color: ${({
+  theme: {
+    palette: { grey: e, background: n }
+  },
+  disabled: t
+}) => t ? n.secondary : e.white};
+
+  ${({ fullWidth: e }) => e ? { width: "100%" } : null};
+`, N = r.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: calc(24px + (${({ theme: { spacing: e } }) => e.content(4)}px * 2));
+  gap: ${({ theme: { spacing: e } }) => e.content(2)}px;
+  cursor: ${({ disabled: e }) => e ? "not-allowed" : "pointer"};
+
+  ${({
+  theme: {
+    palette: { grey: e },
+    typography: { h5M: n }
+  },
+  disabled: t
+}) => ({
+  fontSize: n.size,
+  fontWeight: n.weight,
+  lineHeight: n.lineHeight,
+  letterSpacing: n.letterSpacing,
+  color: t ? e[50] : e[70],
+  "& svg": {
+    color: t ? e[50] : e[70]
+  }
+})};
+`, V = r.button`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({ theme: { spacing: e } }) => e.content(2)}px;
+  padding: ${({ theme: { spacing: e } }) => e.content(4)}px;
+`, W = r.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s;
+  transform: rotate(${({ expand: e }) => e ? "180deg" : "0deg"});
+`, q = r.div`
+  transition: height 0.2s;
+  overflow: hidden;
+`, F = r.div`
+  padding: ${({ theme: { spacing: e } }) => `0 ${e.content(4)}px ${e.content(4)}px ${e.content(4)}px`};
+`, U = z(function({
+  children: n,
+  expand: t = !1,
+  title: I,
+  endAdornment: H,
+  onChange: p,
+  disabled: a = !1,
+  inlineCSS: b,
+  headerProps: d,
+  ...j
+}, C) {
+  const m = w(), h = w(), [i, g] = E(t), [f, u] = E(t ? "auto" : "0px"), o = A(null), R = (c) => {
+    a || (typeof p == "function" ? p(c) : g((l) => !l));
+  };
+  return S(() => {
+    g(t);
+  }, [t]), S(() => {
+    var x, y;
+    let c;
+    const l = D(
+      ((x = o.current) == null ? void 0 : x.scrollHeight) || 0
+    ), T = !i && f === "auto", k = !i && f !== "auto";
+    return (y = o.current) != null && y.parentElement && (i ? (o.current.parentElement.style.height = l, c = setTimeout(() => {
+      var $;
+      u("auto"), ($ = o.current) != null && $.parentElement && (o.current.parentElement.style.height = "auto");
+    }, 200)) : T ? (o.current.parentElement.style.height = l, u(l)) : k && (o.current.parentElement.style.height = "0px", u("0px"))), () => {
+      c && clearTimeout(c);
+    };
+  }, [i, f]), /* @__PURE__ */ v(L, { ref: C, disabled: a, ...j, css: b, children: [
+    /* @__PURE__ */ s(
+      N,
+      {
+        as: (d == null ? void 0 : d.tag) || "h3",
+        onClick: R,
+        disabled: a,
+        ...d,
+        children: /* @__PURE__ */ v(
+          V,
+          {
+            id: m,
+            "aria-disabled": a,
+            "aria-expanded": i,
+            "aria-controls": h,
+            children: [
+              I,
+              /* @__PURE__ */ s(W, { expand: i, children: H || /* @__PURE__ */ s(B, { name: "ChevronDownLine", size: "xSmall" }) })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ s(q, { children: /* @__PURE__ */ s(F, { role: "region", id: h, "aria-labelledby": m, ref: o, children: n }) })
+  ] });
+});
+export {
+  U as default
+};

package/dist/Accordion/Accordion.stories.d.ts

@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Accordion').AccordionProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Uncontrolled: Story;
+export declare const Controlled: Story;
+export declare const Nested: Story;
+export declare const FullWidth: Story;

package/dist/Accordion/index.cjs

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

package/dist/Accordion/index.d.ts

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

package/dist/Accordion/index.es.js

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

package/dist/Autocomplete/Autocomplete.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("@emotion/react/jsx-runtime"),n=require("react"),B=require("../CircularProgressIndicator/CircularProgressIndicator.cjs"),T=require("../Flexbox/Flexbox.cjs"),D=require("../Icon/Icon.cjs"),z=require("../Menu/Menu.cjs"),x=require("../Menu/MenuBlock/MenuBlock.cjs"),M=require("../TextField/TextField.cjs"),E=require("../Typography/Typography.cjs"),d=100,G=n.forwardRef(function({inputValue:l,onInputChange:c,menuValue:q,onMenuChange:i,inputProps:I,minInputLengthForMenu:m=0,options:g=[],isLoading:o=!1,renderOptions:f,renderEmpty:b,filterOptions:j,getOptionLabel:S},R){const h=n.useRef(null);n.useImperativeHandle(R,()=>h.current);const[k,a]=n.useState(!1),u=j?j(g):g.filter(e=>e.label.includes(l)),O=u.length>0,v=l.length>=m,y=()=>a(e=>!e),A=e=>{e.target.value.length>0?a(!0):i("",e,null),c(e.target.value,e)},N=()=>{v&&a(!0)},F=(e,r)=>{var C;if(e===void 0||!r||!((C=r==null?void 0:r.target)!=null&&C.textContent))return;const s=u.find(_=>_.value===e);if(S){s&&setTimeout(()=>{c(S(s),r),i(e.toString(),r,s)},d);return}setTimeout(()=>{c(r.target.textContent||"",r),i(e.toString(),r,s||null)},d)},P=e=>{a(!1),setTimeout(()=>{c("",e),i("",e,null)},d)};return t.jsxs(T.default,{ref:h,inlineCSS:{position:"relative"},children:[t.jsx(M.default,{value:l,onChange:A,onFocus:N,fullWidth:!0,endAdornment:l?t.jsx(D.default,{name:"InvalidFill",color:"grey.50",size:"medium",onClick:P,inlineCSS:{cursor:"pointer"}}):null,inlineCSS:{"& svg":{flexShrink:0}},...I}),t.jsxs(z.default,{value:q,anchorRef:h,open:k&&l.length>=m,onClose:y,onChange:F,transitionDuration:d,disablePadding:!v,disableClickOutside:!l,children:[o&&t.jsx(x.default,{value:"LOADING",disabled:!0,children:t.jsx(T.default,{justifyContent:"center",children:t.jsx(B.default,{size:"small",loop:!0})})}),!o&&O&&u.map((e,r)=>{if(f&&typeof f=="function")return f(e,r,u);if(l&&!e.label.includes(l)||!v)return;const s=e.label.indexOf(l);return t.jsx(x.default,{value:e.value,...e==null?void 0:e.menuBlockProps,children:l?t.jsxs(t.Fragment,{children:[e.label.slice(0,s),t.jsx(E.default,{tag:"span",variant:"h5B",color:"primary",children:e.label.slice(s,s+l.length)}),e.label.slice(s+l.length)]}):e.label},e.value)}),!o&&!O&&(b?(()=>{const e=b(l);return n.isValidElement(e)?n.cloneElement(e,{...e.props,disabled:!0}):e})():t.jsx(x.default,{value:"NO_OPTION",disabled:!0,children:"검색 결과가 없어요."}))]})]})});exports.default=G;

package/dist/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode, SyntheticEvent } from 'react';
+import { MenuProps } from '../Menu/Menu';
+import { MenuBlockProps } from '../Menu/MenuBlock/MenuBlock';
+import { TextFieldProps } from '../TextField/TextField';
+
+export interface Option {
+    value: string;
+    label: string;
+    menuBlockProps?: MenuBlockProps;
+}
+export interface AutocompleteProps {
+    inputValue: string;
+    onInputChange: (inputValue: string, e: SyntheticEvent) => void;
+    menuValue: Option['value'];
+    onMenuChange: (menuValue: string, e: SyntheticEvent, option: Option | null) => void;
+    options: Array<Option>;
+    minInputLengthForMenu?: number;
+    inputProps?: TextFieldProps;
+    menuProps?: MenuProps;
+    isLoading?: boolean;
+    renderOptions?: (option: Option, index: number, options: AutocompleteProps['options']) => ReactNode;
+    renderEmpty?: (searchText: string) => ReactNode;
+    filterOptions?: (options: AutocompleteProps['options']) => AutocompleteProps['options'];
+    getOptionLabel?: (option: Option) => Option['label'];
+}
+declare const Autocomplete: import('react').ForwardRefExoticComponent<AutocompleteProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Autocomplete;

package/dist/Autocomplete/Autocomplete.es.js

@@ -0,0 +1,108 @@
+import { jsxs as h, jsx as n, Fragment as D } from "@emotion/react/jsx-runtime";
+import { forwardRef as z, useRef as _, useImperativeHandle as E, useState as G, isValidElement as H, cloneElement as U } from "react";
+import W from "../CircularProgressIndicator/CircularProgressIndicator.es.js";
+import T from "../Flexbox/Flexbox.es.js";
+import p from "../Icon/Icon.es.js";
+import q from "../Menu/Menu.es.js";
+import v from "../Menu/MenuBlock/MenuBlock.es.js";
+import J from "../TextField/TextField.es.js";
+import K from "../Typography/Typography.es.js";
+const a = 100, re = z(function({
+  inputValue: l,
+  onInputChange: s,
+  menuValue: k,
+  onMenuChange: i,
+  inputProps: A,
+  minInputLengthForMenu: g = 0,
+  options: b = [],
+  isLoading: d = !1,
+  renderOptions: f,
+  renderEmpty: C,
+  filterOptions: x,
+  getOptionLabel: O
+}, N) {
+  const m = _(null);
+  E(N, () => m.current);
+  const [y, c] = G(!1), o = x ? x(b) : b.filter((e) => e.label.includes(l)), S = o.length > 0, u = l.length >= g, F = () => c((e) => !e), R = (e) => {
+    e.target.value.length > 0 ? c(!0) : i("", e, null), s(e.target.value, e);
+  }, P = () => {
+    u && c(!0);
+  }, j = (e, r) => {
+    var I;
+    if (e === void 0 || !r || !((I = r == null ? void 0 : r.target) != null && I.textContent)) return;
+    const t = o.find((B) => B.value === e);
+    if (O) {
+      t && setTimeout(() => {
+        s(O(t), r), i(e.toString(), r, t);
+      }, a);
+      return;
+    }
+    setTimeout(() => {
+      s(r.target.textContent || "", r), i(e.toString(), r, t || null);
+    }, a);
+  };
+  return /* @__PURE__ */ h(T, { ref: m, inlineCSS: { position: "relative" }, children: [
+    /* @__PURE__ */ n(
+      J,
+      {
+        value: l,
+        onChange: R,
+        onFocus: P,
+        fullWidth: !0,
+        endAdornment: l ? /* @__PURE__ */ n(
+          p,
+          {
+            name: "InvalidFill",
+            color: "grey.50",
+            size: "medium",
+            onClick: (e) => {
+              c(!1), setTimeout(() => {
+                s("", e), i("", e, null);
+              }, a);
+            },
+            inlineCSS: { cursor: "pointer" }
+          }
+        ) : null,
+        inlineCSS: { "& svg": { flexShrink: 0 } },
+        ...A
+      }
+    ),
+    /* @__PURE__ */ h(
+      q,
+      {
+        value: k,
+        anchorRef: m,
+        open: y && l.length >= g,
+        onClose: F,
+        onChange: j,
+        transitionDuration: a,
+        disablePadding: !u,
+        disableClickOutside: !l,
+        children: [
+          d && /* @__PURE__ */ n(v, { value: "LOADING", disabled: !0, children: /* @__PURE__ */ n(T, { justifyContent: "center", children: /* @__PURE__ */ n(W, { size: "small", loop: !0 }) }) }),
+          !d && S && o.map((e, r) => {
+            if (f && typeof f == "function")
+              return f(e, r, o);
+            if (l && !e.label.includes(l) || !u) return;
+            const t = e.label.indexOf(l);
+            return /* @__PURE__ */ n(v, { value: e.value, ...e == null ? void 0 : e.menuBlockProps, children: l ? /* @__PURE__ */ h(D, { children: [
+              e.label.slice(0, t),
+              /* @__PURE__ */ n(K, { tag: "span", variant: "h5B", color: "primary", children: e.label.slice(t, t + l.length) }),
+              e.label.slice(t + l.length)
+            ] }) : e.label }, e.value);
+          }),
+          !d && !S && (C ? (() => {
+            const e = C(l);
+            return H(e) ? U(e, {
+              ...e.props,
+              disabled: !0
+            }) : e;
+          })() : /* @__PURE__ */ n(v, { value: "NO_OPTION", disabled: !0, children: "검색 결과가 없어요." }))
+        ]
+      }
+    )
+  ] });
+});
+export {
+  re as default
+};

package/dist/Autocomplete/Autocomplete.stories.d.ts

@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Autocomplete').AutocompleteProps & 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 AsynchronousOptions: Story;
+export declare const CreatableOptions: Story;
+export declare const CustomRenderOptions: Story;

package/dist/Autocomplete/index.cjs

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

package/dist/Autocomplete/index.d.ts

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

package/dist/Autocomplete/index.es.js

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

package/dist/Backdrop/Backdrop.cjs

@@ -0,0 +1,17 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("@emotion/react/jsx-runtime"),r=require("react"),L=require("react-dom"),B=require("@emotion/styled"),H=e=>e&&e.__esModule?e:{default:e},p=H(B),M=p.default.div`
+  position: fixed;
+
+  ${({hasContainer:e,containerTop:u,containerLeft:o,containerWidth:d,containerHeight:i})=>e?{top:u,left:o,width:d,height:i}:{top:0,left:0,width:"100%",height:"100%"}};
+
+  z-index: 100000;
+
+  background-color: ${({theme:{palette:{etc:e}}})=>e.dimmed01};
+  transition: opacity ${({transitionDuration:e})=>e}ms;
+  opacity: ${({open:e})=>e?1:0};
+`,O=p.default.div`
+  position: relative;
+
+  ${({theme:{spacing:e},fullScreen:u})=>u?{width:"100%",height:"100%"}:{width:`calc(100% - ${e.content(10)}px)`,height:`calc(100% - ${e.content(10)}px)`,margin:e.content(5)}};
+  
+  ${({centered:e})=>e?{display:"flex",alignItems:"center",justifyContent:"center"}:null}}
+`,W=r.forwardRef(function({children:u,open:o,onClose:d,transitionDuration:i=200,fullScreen:y,centered:g,containerRef:s,inlineCSS:T,...v},w){const[C,f]=r.useState(!1),[b,a]=r.useState(!0),[x,S]=r.useState(0),[$,_]=r.useState(0),[j,k]=r.useState(0),[q,z]=r.useState(0),n=r.useRef(),c=r.useRef(),I=!!(s!=null&&s.current);return r.useEffect(()=>{o&&(c.current&&clearTimeout(c.current),document.body.style.overflow="hidden",a(!1),n.current=setTimeout(()=>{f(!0)},100))},[o]),r.useEffect(()=>{o||(n.current&&clearTimeout(n.current),document.body.removeAttribute("style"),f(!1),c.current=setTimeout(()=>{a(!0)},i))},[o,i]),r.useEffect(()=>{const t=s==null?void 0:s.current,l=()=>{var h;t&&(S((t==null?void 0:t.offsetTop)||0),_(((h=t.getBoundingClientRect())==null?void 0:h.left)||0),k((t==null?void 0:t.offsetWidth)||0),z((t==null?void 0:t.offsetHeight)||0))};return t&&(l(),window.addEventListener("resize",l)),()=>{t&&window.removeEventListener("resize",l)}},[s]),r.useEffect(()=>()=>{document.body.removeAttribute("style"),n.current&&clearTimeout(n.current),c.current&&clearTimeout(c.current)},[]),b?null:L.createPortal(m.jsx(M,{ref:w,open:C,transitionDuration:i,onClick:d,hasContainer:I,containerTop:x,containerLeft:$,containerWidth:j,containerHeight:q,...v,css:T,children:m.jsx(O,{fullScreen:y,centered:g,children:u})}),document.body)});exports.default=W;

package/dist/Backdrop/Backdrop.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes, RefObject } from 'react';
+import { GeneralComponentProps } from '../typings/component';
+
+export interface BackdropProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
+    open?: boolean;
+    onClose?: () => void;
+    transitionDuration?: number;
+    fullScreen?: boolean;
+    centered?: boolean;
+    containerRef?: RefObject<HTMLElement>;
+}
+declare const Backdrop: import('react').ForwardRefExoticComponent<BackdropProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Backdrop;

package/dist/Backdrop/Backdrop.es.js

@@ -0,0 +1,99 @@
+import { jsx as a } from "@emotion/react/jsx-runtime";
+import { forwardRef as O, useState as i, useRef as y, useEffect as d } from "react";
+import { createPortal as P } from "react-dom";
+import T from "@emotion/styled";
+const S = T.div`
+  position: fixed;
+
+  ${({ hasContainer: t, containerTop: s, containerLeft: o, containerWidth: f, containerHeight: n }) => t ? {
+  top: s,
+  left: o,
+  width: f,
+  height: n
+} : {
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%"
+}};
+
+  z-index: 100000;
+
+  background-color: ${({
+  theme: {
+    palette: { etc: t }
+  }
+}) => t.dimmed01};
+  transition: opacity ${({ transitionDuration: t }) => t}ms;
+  opacity: ${({ open: t }) => t ? 1 : 0};
+`, q = T.div`
+  position: relative;
+
+  ${({ theme: { spacing: t }, fullScreen: s }) => s ? {
+  width: "100%",
+  height: "100%"
+} : {
+  width: `calc(100% - ${t.content(10)}px)`,
+  height: `calc(100% - ${t.content(10)}px)`,
+  margin: t.content(5)
+}};
+  
+  ${({ centered: t }) => t ? {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+} : null}}
+`, K = O(function({
+  children: s,
+  open: o,
+  onClose: f,
+  transitionDuration: n = 200,
+  fullScreen: g,
+  centered: w,
+  containerRef: r,
+  inlineCSS: C,
+  ...v
+}, $) {
+  const [b, m] = i(!1), [x, h] = i(!0), [k, z] = i(0), [I, L] = i(0), [B, H] = i(0), [W, j] = i(0), c = y(), u = y(), A = !!(r != null && r.current);
+  return d(() => {
+    o && (u.current && clearTimeout(u.current), document.body.style.overflow = "hidden", h(!1), c.current = setTimeout(() => {
+      m(!0);
+    }, 100));
+  }, [o]), d(() => {
+    o || (c.current && clearTimeout(c.current), document.body.removeAttribute("style"), m(!1), u.current = setTimeout(() => {
+      h(!0);
+    }, n));
+  }, [o, n]), d(() => {
+    const e = r == null ? void 0 : r.current, l = () => {
+      var p;
+      e && (z((e == null ? void 0 : e.offsetTop) || 0), L(((p = e.getBoundingClientRect()) == null ? void 0 : p.left) || 0), H((e == null ? void 0 : e.offsetWidth) || 0), j((e == null ? void 0 : e.offsetHeight) || 0));
+    };
+    return e && (l(), window.addEventListener("resize", l)), () => {
+      e && window.removeEventListener("resize", l);
+    };
+  }, [r]), d(() => () => {
+    document.body.removeAttribute("style"), c.current && clearTimeout(c.current), u.current && clearTimeout(u.current);
+  }, []), x ? null : P(
+    /* @__PURE__ */ a(
+      S,
+      {
+        ref: $,
+        open: b,
+        transitionDuration: n,
+        onClick: f,
+        hasContainer: A,
+        containerTop: k,
+        containerLeft: I,
+        containerWidth: B,
+        containerHeight: W,
+        ...v,
+        css: C,
+        children: /* @__PURE__ */ a(q, { fullScreen: g, centered: w, children: s })
+      }
+    ),
+    document.body
+  );
+});
+export {
+  K as default
+};

package/dist/Backdrop/Backdrop.stories.d.ts

@@ -0,0 +1,14 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Backdrop').BackdropProps & 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 Centered: Story;

package/dist/Backdrop/index.cjs

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

package/dist/Backdrop/index.d.ts

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

package/dist/Backdrop/index.es.js

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

package/dist/Badge/Badge.cjs

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("@emotion/react/jsx-runtime"),f=require("react"),p=require("@emotion/styled"),j=e=>e&&e.__esModule?e:{default:e},n=j(p),b=n.default.div`
+  position: relative;
+  width: inherit;
+`,c=n.default.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: ${({position:e})=>e};
+  border-radius: 20px;
+
+  ${({theme:{palette:{pink:e,etc:t}},color:r})=>{let i={backgroundColor:e[90]};return r==="orange"&&(i={backgroundColor:t.orange}),i}};
+
+  ${({size:e,horizontal:t})=>{let r={height:8,minWidth:8,top:0,left:t==="left"?0:"auto",right:t==="right"?0:"auto"};return e==="large"&&(r={height:16,minWidth:16,top:-4,left:t==="left"?-8:"auto",right:t==="right"?-8:"auto"}),r}};
+`,h=n.default.span`
+  ${({theme:{palette:{grey:e},typography:{c4B:t}}})=>({fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing,color:e.white})}
+`,m=f.forwardRef(function({children:t,color:r,size:i="small",position:s="absolute",horizontal:d="right",content:a,inlineCSS:u,...g},o){return s==="static"?l.jsx(c,{ref:o,position:s,color:r,size:i,horizontal:d,...g,css:u,children:i==="large"&&a&&l.jsx(h,{children:a})}):l.jsxs(b,{children:[l.jsx(c,{ref:o,position:s,color:r,size:i,horizontal:d,...g,css:u,children:i==="large"&&a&&l.jsx(h,{children:a})}),t]})});exports.default=m;

package/dist/Badge/Badge.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes } from 'react';
+import { ColorScaleKey } from '../typings/color';
+import { GeneralComponentProps, Size } from '../typings/component';
+import { EtcColorKey } from '../typings/theme/core';
+
+export interface BadgeProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'content'>> {
+    color?: Extract<ColorScaleKey, 'pink'> | Extract<EtcColorKey, 'orange'>;
+    size?: Extract<Size, 'small' | 'large'>;
+    position?: 'absolute' | 'static';
+    horizontal?: 'left' | 'right';
+    content?: string | number;
+}
+declare const Badge: import('react').ForwardRefExoticComponent<BadgeProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Badge;