@dotss/ui 0.0.4 → 0.0.7

package/dist/Dialog/Dialog.es.js

@@ -0,0 +1,136 @@
+import { jsx as n, jsxs as D } from "@emotion/react/jsx-runtime";
+import { forwardRef as H, useState as L, useRef as h, useEffect as d } from "react";
+import O from "../Backdrop/Backdrop.es.js";
+import g from "../Flexbox/Flexbox.es.js";
+import K from "../FocusBoundary/FocusBoundary.es.js";
+import P from "@emotion/styled";
+const Y = P.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  display: flex;
+  flex-direction: column;
+  width: ${({ fullWidth: e }) => e ? "100%" : "auto"};
+  max-width: ${({ maxWidth: e }) => typeof e == "number" ? `${e}px` : "auto"};
+  max-height: ${({ maxHeight: e }) => typeof e == "number" ? `${e}px` : "100%"};
+  border-radius: 16px;
+  background-color: ${({
+  theme: {
+    palette: { grey: e }
+  }
+}) => e.white};
+  box-shadow: ${({ theme: { elevation: e } }) => e[2]};
+  overflow-y: auto;
+
+  transition: transform ${({ transitionDuration: e }) => e}ms;
+  ${({ open: e }) => e ? {
+  transform: "translate3d(-50%, -50%, 0)"
+} : {
+  transform: "translate3d(-50%, -50%, 0) scale(0.97)"
+}};
+
+  ${({ fullScreen: e }) => e ? {
+  width: "100%",
+  height: "100%",
+  maxWidth: "100%",
+  maxHeight: "100%",
+  borderRadius: 0
+} : null}
+`, U = H(function({
+  children: b,
+  open: t,
+  onClose: i,
+  transitionDuration: l = 200,
+  fullWidth: x = !0,
+  fullScreen: r = !1,
+  maxWidth: y = 320,
+  maxHeight: w = 438,
+  inlineCSS: k,
+  backdropProps: v,
+  statusBarColor: $ = "transparent",
+  systemNavigationBarColor: F = "#FFFFFF",
+  disableFocusBoundary: T = !1,
+  hideStatusBar: S = !1,
+  hideSystemNavigationBar: R = !1,
+  ...C
+}, E) {
+  var u, f, m, p;
+  const [I, c] = L(!1), s = h(null), o = h(), j = (a) => a.stopPropagation(), q = ((f = (u = s.current) == null ? void 0 : u.querySelector('[id^="dialogTitle"]')) == null ? void 0 : f.getAttribute("id")) || "", A = ((p = (m = s.current) == null ? void 0 : m.querySelector('[id^="dialogText"]')) == null ? void 0 : p.getAttribute("id")) || "";
+  return d(() => {
+    t ? (o.current && clearTimeout(o.current), o.current = setTimeout(() => {
+      c(!0);
+    }, 100)) : c(!1);
+  }, [t]), d(() => {
+    const a = (B) => {
+      B.key === "Escape" && t && i && i();
+    };
+    return document.addEventListener("keydown", a), () => document.removeEventListener("keydown", a);
+  }, [t, i]), d(() => () => {
+    o.current && clearTimeout(o.current);
+  }, []), /* @__PURE__ */ n(
+    O,
+    {
+      ref: s,
+      open: t,
+      onClose: i,
+      transitionDuration: l,
+      centered: !r,
+      fullScreen: r,
+      ...v,
+      children: /* @__PURE__ */ n(
+        Y,
+        {
+          ref: E,
+          role: "dialog",
+          "aria-labelledby": q,
+          "aria-describedby": A,
+          open: I,
+          transitionDuration: l,
+          fullWidth: x,
+          fullScreen: r,
+          maxWidth: y,
+          maxHeight: w,
+          onClick: j,
+          ...C,
+          css: k,
+          children: /* @__PURE__ */ D(
+            K,
+            {
+              active: t,
+              disabled: T,
+              inlineCSS: {
+                flex: 1,
+                overflowY: "auto"
+              },
+              children: [
+                r && !S && /* @__PURE__ */ n(
+                  g,
+                  {
+                    inlineCSS: {
+                      minHeight: "var(--status-bar-height, 0px)",
+                      backgroundColor: $
+                    }
+                  }
+                ),
+                b,
+                r && !R && /* @__PURE__ */ n(
+                  g,
+                  {
+                    inlineCSS: {
+                      minHeight: "var(--system-navigation-bar-height, 0px)",
+                      backgroundColor: F
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+});
+export {
+  U as default
+};

package/dist/Dialog/Dialog.stories.d.ts

@@ -0,0 +1,30 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Dialog').DialogProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        backdropProps: {
+            control: {
+                disable: true;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const FullFeature: Story;
+export declare const WithDialogTitle: Story;
+export declare const WithDialogContent: Story;
+export declare const WithDialogAction: Story;
+export declare const Custom: Story;
+export declare const MaxHeight: Story;
+export declare const MaxHeightWithDialogContent: Story;
+export declare const FullWidth: Story;
+export declare const FullScreen: Story;
+export declare const InContainer: Story;

package/dist/Dialog/DialogAction/DialogAction.cjs

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("@emotion/react/jsx-runtime"),c=require("react"),s=require("@emotion/styled"),u=t=>t&&t.__esModule?t:{default:t},r=u(s),d=r.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({theme:{spacing:t}})=>t.content(2)}px;
+  width: 100%;
+  padding: ${({theme:{spacing:t}})=>`0 ${t.content(4)}px ${t.content(3)}px`};
+
+  & > button {
+    flex: 1;
+  }
+`,a=c.forwardRef(function({children:e,inlineCSS:n,...o},i){return l.jsx(d,{ref:i,...o,css:n,children:e})});exports.default=a;

package/dist/Dialog/DialogAction/DialogAction.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from 'react';
+
+declare const DialogAction: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('../../../typings/component').InlineCSS & import('react').RefAttributes<HTMLDivElement>>;
+export default DialogAction;

package/dist/Dialog/DialogAction/DialogAction.es.js

@@ -0,0 +1,20 @@
+import { jsx as r } from "@emotion/react/jsx-runtime";
+import { forwardRef as c } from "react";
+import f from "@emotion/styled";
+const l = f.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme: { spacing: t } }) => t.content(2)}px;
+  width: 100%;
+  padding: ${({ theme: { spacing: t } }) => `0 ${t.content(4)}px ${t.content(3)}px`};
+
+  & > button {
+    flex: 1;
+  }
+`, p = c(function({ children: o, inlineCSS: e, ...n }, i) {
+  return /* @__PURE__ */ r(l, { ref: i, ...n, css: e, children: o });
+});
+export {
+  p as default
+};

package/dist/Dialog/DialogAction/index.cjs

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

package/dist/Dialog/DialogAction/index.d.ts

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

package/dist/Dialog/DialogAction/index.es.js

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

package/dist/Dialog/DialogContent/DialogContent.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("@emotion/react/jsx-runtime"),r=require("react"),s=require("@emotion/styled"),d=e=>e&&e.__esModule?e:{default:e},i=d(s),a=i.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({theme:{spacing:e}})=>e.content(2)}px;
+  padding: ${({theme:{spacing:e}})=>`${e.content(5)}px ${e.content(4)}px`};
+  overflow-y: auto;
+  flex: 1;
+`,c=r.forwardRef(function({children:t,inlineCSS:o,...n},l){return u.jsx(a,{ref:l,...n,css:o,children:t})});exports.default=c;

package/dist/Dialog/DialogContent/DialogContent.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from 'react';
+
+declare const DialogContent: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('../../../typings/component').InlineCSS & import('react').RefAttributes<HTMLDivElement>>;
+export default DialogContent;

package/dist/Dialog/DialogContent/DialogContent.es.js

@@ -0,0 +1,16 @@
+import { jsx as l } from "@emotion/react/jsx-runtime";
+import { forwardRef as f } from "react";
+import i from "@emotion/styled";
+const a = i.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: { spacing: t } }) => t.content(2)}px;
+  padding: ${({ theme: { spacing: t } }) => `${t.content(5)}px ${t.content(4)}px`};
+  overflow-y: auto;
+  flex: 1;
+`, c = f(function({ children: o, inlineCSS: e, ...n }, r) {
+  return /* @__PURE__ */ l(a, { ref: r, ...n, css: e, children: o });
+});
+export {
+  c as default
+};

package/dist/Dialog/DialogContent/index.cjs

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

package/dist/Dialog/DialogContent/index.d.ts

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

package/dist/Dialog/DialogContent/index.es.js

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

package/dist/Dialog/DialogText/DialogText.cjs

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("@emotion/react/jsx-runtime"),l=require("react"),g=require("@emotion/styled"),c=e=>e&&e.__esModule?e:{default:e},d=c(g),f=d.default.div`
+  text-align: ${({textAlign:e})=>e};
+
+  ${({theme:{palette:{grey:e},typography:{b2R:t,b4R:i}},type:n})=>n==="sub"?{fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,color:e[70]}:{fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing}}
+`,h=l.forwardRef(function({children:t,type:i="main",textAlign:n="center",inlineCSS:o,...r},s){const a=l.useId();return u.jsx(f,{ref:s,type:i,textAlign:n,...r,id:`dialogText${a}`,css:o,children:t})});exports.default=h;

package/dist/Dialog/DialogText/DialogText.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+import { Property } from 'csstype';
+import { GeneralComponentProps } from '../../typings/component';
+
+export interface DialogTextProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
+    type?: 'main' | 'sub';
+    textAlign?: Property.TextAlign;
+}
+declare const DialogText: import('react').ForwardRefExoticComponent<DialogTextProps & import('react').RefAttributes<HTMLDivElement>>;
+export default DialogText;

package/dist/Dialog/DialogText/DialogText.es.js

@@ -0,0 +1,42 @@
+import { jsx as a } from "@emotion/react/jsx-runtime";
+import { forwardRef as f, useId as s } from "react";
+import c from "@emotion/styled";
+const p = c.div`
+  text-align: ${({ textAlign: i }) => i};
+
+  ${({
+  theme: {
+    palette: { grey: i },
+    typography: { b2R: t, b4R: e }
+  },
+  type: n
+}) => n === "sub" ? {
+  fontSize: e.size,
+  fontWeight: e.weight,
+  lineHeight: e.lineHeight,
+  letterSpacing: e.letterSpacing,
+  color: i[70]
+} : {
+  fontSize: t.size,
+  fontWeight: t.weight,
+  lineHeight: t.lineHeight,
+  letterSpacing: t.letterSpacing
+}}
+`, u = f(function({ children: t, type: e = "main", textAlign: n = "center", inlineCSS: o, ...r }, g) {
+  const l = s();
+  return /* @__PURE__ */ a(
+    p,
+    {
+      ref: g,
+      type: e,
+      textAlign: n,
+      ...r,
+      id: `dialogText${l}`,
+      css: o,
+      children: t
+    }
+  );
+});
+export {
+  u as default
+};

package/dist/Dialog/DialogText/index.cjs

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

package/dist/Dialog/DialogText/index.d.ts

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

package/dist/Dialog/DialogText/index.es.js

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

package/dist/Dialog/DialogTitle/DialogTitle.cjs

@@ -0,0 +1,24 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("@emotion/react/jsx-runtime"),s=require("react"),p=require("../../Icon/Icon.cjs"),f=require("@emotion/styled"),g=e=>e&&e.__esModule?e:{default:e},n=g(f),x=n.default.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({theme:{spacing:e}})=>e.content(2)}px;
+
+  ${({theme:{spacing:e,palette:{grey:o}},fullScreen:l})=>{let i={padding:`${e.content(3)}px ${e.content(4)}px`,borderBottom:`1px solid ${o[10]}`,maxHeight:48};return l&&(i={padding:e.content(4),maxHeight:56}),i}};
+`,m=n.default.div`
+  flex-grow: 1;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+
+  ${({theme:{typography:{h4B:e}}})=>({fontSize:e.size,fontWeight:e.weight,lineHeight:e.lineHeight,letterSpacing:e.letterSpacing})};
+`,h=n.default.button`
+  position: absolute;
+  top: 50%;
+  right: ${({theme:{spacing:e}})=>e.content(4)}px;
+  transform: translateY(-50%);
+`,a=n.default.div`
+  min-width: 24px;
+`,j=s.forwardRef(function({children:o,onClose:l,hideCloseButton:i,inlineCSS:r,...c},d){const u=s.useId();return t.jsxs(x,{ref:d,...c,id:`dialogTitle${u}`,css:r,children:[t.jsx(a,{}),t.jsx(m,{children:o}),t.jsx(a,{}),!i&&t.jsx(h,{className:"closeButton",onClick:l,"aria-label":"창 닫기",children:t.jsx(p.default,{name:"CloseLine"})})]})});exports.default=j;

package/dist/Dialog/DialogTitle/DialogTitle.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+import { GeneralComponentProps } from '../../typings/component';
+
+export interface DialogTitleProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
+    onClose?: () => void;
+    fullScreen?: boolean;
+    hideCloseButton?: boolean;
+}
+declare const DialogTitle: import('react').ForwardRefExoticComponent<DialogTitleProps & import('react').RefAttributes<HTMLDivElement>>;
+export default DialogTitle;

package/dist/Dialog/DialogTitle/DialogTitle.es.js

@@ -0,0 +1,64 @@
+import { jsxs as d, jsx as e } from "@emotion/react/jsx-runtime";
+import { forwardRef as m, useId as g } from "react";
+import f from "../../Icon/Icon.es.js";
+import o from "@emotion/styled";
+const x = o.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme: { spacing: t } }) => t.content(2)}px;
+
+  ${({
+  theme: {
+    spacing: t,
+    palette: { grey: n }
+  },
+  fullScreen: l
+}) => {
+  let i = {
+    padding: `${t.content(3)}px ${t.content(4)}px`,
+    borderBottom: `1px solid ${n[10]}`,
+    maxHeight: 48
+  };
+  return l && (i = {
+    padding: t.content(4),
+    maxHeight: 56
+  }), i;
+}};
+`, h = o.div`
+  flex-grow: 1;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+
+  ${({
+  theme: {
+    typography: { h4B: t }
+  }
+}) => ({
+  fontSize: t.size,
+  fontWeight: t.weight,
+  lineHeight: t.lineHeight,
+  letterSpacing: t.letterSpacing
+})};
+`, u = o.button`
+  position: absolute;
+  top: 50%;
+  right: ${({ theme: { spacing: t } }) => t.content(4)}px;
+  transform: translateY(-50%);
+`, r = o.div`
+  min-width: 24px;
+`, b = m(function({ children: n, onClose: l, hideCloseButton: i, inlineCSS: s, ...a }, c) {
+  const p = g();
+  return /* @__PURE__ */ d(x, { ref: c, ...a, id: `dialogTitle${p}`, css: s, children: [
+    /* @__PURE__ */ e(r, {}),
+    /* @__PURE__ */ e(h, { children: n }),
+    /* @__PURE__ */ e(r, {}),
+    !i && /* @__PURE__ */ e(u, { className: "closeButton", onClick: l, "aria-label": "창 닫기", children: /* @__PURE__ */ e(f, { name: "CloseLine" }) })
+  ] });
+});
+export {
+  b as default
+};

package/dist/Dialog/DialogTitle/index.cjs

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

package/dist/Dialog/DialogTitle/index.d.ts

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

package/dist/Dialog/DialogTitle/index.es.js

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

package/dist/Dialog/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Dialog.cjs"),t=require("./DialogTitle/DialogTitle.cjs"),o=require("./DialogContent/DialogContent.cjs"),i=require("./DialogAction/DialogAction.cjs"),l=require("./DialogText/DialogText.cjs");exports.default=e.default;exports.DialogTitle=t.default;exports.DialogContent=o.default;exports.DialogAction=i.default;exports.DialogText=l.default;

package/dist/Dialog/index.d.ts

@@ -0,0 +1,7 @@
+import { default as Dialog } from './Dialog';
+
+export { default as DialogTitle } from './DialogTitle';
+export { default as DialogContent } from './DialogContent';
+export { default as DialogAction } from './DialogAction';
+export { default as DialogText } from './DialogText';
+export default Dialog;

package/dist/Dialog/index.es.js

@@ -0,0 +1,12 @@
+import t from "./Dialog.es.js";
+import { default as l } from "./DialogTitle/DialogTitle.es.js";
+import { default as f } from "./DialogContent/DialogContent.es.js";
+import { default as m } from "./DialogAction/DialogAction.es.js";
+import { default as x } from "./DialogText/DialogText.es.js";
+export {
+  m as DialogAction,
+  f as DialogContent,
+  x as DialogText,
+  l as DialogTitle,
+  t as default
+};

package/dist/Flexbox/Flexbox.cjs

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

package/dist/Flexbox/Flexbox.d.ts

@@ -0,0 +1,20 @@
+import { ElementType, ReactNode } from 'react';
+import { Property } from 'csstype';
+import { PolymorphicComponentProps, Spacing } from '../typings/component';
+
+export type FlexboxProps<T extends ElementType = 'div'> = Spacing & PolymorphicComponentProps<T> & {
+    alignItems?: Property.AlignItems;
+    justifyContent?: Property.JustifyContent;
+    gap?: number;
+    flexDirection?: Property.FlexDirection;
+    flexWrap?: Property.FlexWrap;
+    flex?: Property.Flex;
+    flexGrow?: Property.FlexGrow;
+    flexShrink?: Property.FlexShrink;
+    flexBasis?: Property.FlexBasis;
+    flexFlow?: Property.FlexFlow;
+    visuallyHidden?: boolean;
+};
+type FlexboxComponent<DT extends ElementType> = <T extends ElementType = DT>(props: FlexboxProps<T>) => ReactNode;
+declare const Flexbox: FlexboxComponent<'div'>;
+export default Flexbox;

package/dist/Flexbox/Flexbox.es.js

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

package/dist/Flexbox/Flexbox.stories.d.ts

@@ -0,0 +1,56 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: <T extends import('react').ElementType = "div">(props: import('./Flexbox').FlexboxProps<T>) => import('react').ReactNode;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        children: {
+            control: {
+                disable: true;
+            };
+        };
+        spacingType: {
+            options: string[];
+            control: {
+                type: "radio";
+            };
+        };
+        flexDirection: {
+            options: string[];
+            control: {
+                type: "radio";
+            };
+        };
+        flexWrap: {
+            options: string[];
+            control: {
+                type: "radio";
+            };
+        };
+        alignItems: {
+            options: string[];
+            control: {
+                type: "radio";
+            };
+        };
+        justifyContent: {
+            options: string[];
+            control: {
+                type: "radio";
+            };
+        };
+        visuallyHidden: {
+            control: {
+                type: "boolean";
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Spacing: Story;
+export declare const Gap: Story;

package/dist/Flexbox/index.cjs

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

package/dist/Flexbox/index.d.ts

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

package/dist/Flexbox/index.es.js

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