@cfx-dev/ui-components 0.0.26 → 2.0.0

package/dist/components/InputDropzone/InputDropzoneShowcase.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+declare function InputDropzoneShowcase(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof InputDropzoneShowcase>;
+export default _default;

package/dist/components/InputDropzone/InputDropzoneShowcase.js

@@ -0,0 +1,27 @@
+import { jsx as c } from "react/jsx-runtime";
+import e from "react";
+import p from "./InputDropzone.js";
+function u() {
+  const [r, t] = e.useState([]), s = e.useCallback((o) => {
+    t(o);
+  }, []), a = e.useCallback((o) => {
+    t((i) => {
+      const n = [...i], l = n.indexOf(o);
+      return l !== -1 && n.splice(l, 1), n;
+    });
+  }, []);
+  return /* @__PURE__ */ c(
+    p,
+    {
+      value: r,
+      onRemoveFile: a,
+      onDrop: s,
+      text: "Drag and Drop file here or",
+      linkText: "Choose file."
+    }
+  );
+}
+const h = e.memo(u);
+export {
+  h as default
+};

package/dist/components/InputDropzone/ItemPreview.d.ts

@@ -1,8 +1,12 @@
+import { default as React } from 'react';
 import { FileWithPath } from 'react-dropzone';
 
 export interface ItemPreviewProps {
     file: FileWithPath;
     onRemoveFile: (file: FileWithPath) => void;
     removeAriaLabel?: string;
+    className?: string;
 }
-export declare function ItemPreview({ file, onRemoveFile, removeAriaLabel, }: ItemPreviewProps): import("react/jsx-runtime").JSX.Element;
+declare function ItemPreview({ file, onRemoveFile, removeAriaLabel, className, }: ItemPreviewProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ItemPreview>;
+export default _default;

package/dist/components/InputDropzone/ItemPreview.js

@@ -1,24 +1,27 @@
-import { jsxs as l, jsx as s } from "react/jsx-runtime";
-import c from "react";
-import { Button as i } from "../Button/Button.js";
-import { I as m } from "../../Icons-BlBKvJD8.js";
-import '../../assets/ItemPreview.css';const h = "_root_15ual_1", p = "_filePath_15ual_13", n = {
-  root: h,
-  filePath: p
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import e from "react";
+import { Button as l } from "../Button/Button.js";
+import { Text as f } from "../Text/Text.js";
+import { clsx as h } from "../../utils/clsx.js";
+import '../../assets/ItemPreview.css';const p = "_root_7ek6f_1", d = "_filePath_7ek6f_13", r = {
+  root: p,
+  filePath: d
 };
-function P({
+function _({
   file: t,
-  onRemoveFile: a,
-  removeAriaLabel: o = ""
+  onRemoveFile: s,
+  removeAriaLabel: o = "",
+  className: c
 }) {
-  const r = c.useCallback(() => {
-    a(t);
-  }, [t, a]), e = c.useMemo(() => `${o}${o ? ", " : ""}${t.path}`, [o, t.path]);
-  return /* @__PURE__ */ l("div", { className: n.root, children: [
-    /* @__PURE__ */ s("span", { className: n.filePath, children: t.path }),
-    /* @__PURE__ */ s(i, { ariaLabel: e, size: "small", icon: m.exit, onClick: r })
+  const m = e.useCallback(() => {
+    s(t);
+  }, [t, s]), n = e.useMemo(() => `${o}${o ? ", " : ""}${t.path}`, [o, t.path]);
+  return /* @__PURE__ */ i("div", { className: h(r.root, c), children: [
+    /* @__PURE__ */ a(f, { family: "secondary", className: r.filePath, children: t.path }),
+    /* @__PURE__ */ a(l, { theme: "secondary", ariaLabel: n, icon: "Close", onClick: m })
   ] });
 }
+const $ = e.memo(_);
 export {
-  P as ItemPreview
+  $ as default
 };

package/dist/components/InputDropzone/index.d.ts

@@ -0,0 +1,4 @@
+export { default as InputDropzone } from './InputDropzone';
+export type { FileWithPath, InputDropzoneProps } from './InputDropzone';
+export { default as ItemPreview } from './ItemPreview';
+export type { ItemPreviewProps } from './ItemPreview';

package/dist/components/InputDropzone/index.js

@@ -0,0 +1,6 @@
+import { default as r } from "./InputDropzone.js";
+import { default as a } from "./ItemPreview.js";
+export {
+  r as InputDropzone,
+  a as ItemPreview
+};

package/dist/components/Interactive/Interactive.d.ts

@@ -2,5 +2,6 @@ import { default as React } from 'react';
 
 export interface InteractiveProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     showPointer?: boolean;
+    as?: React.ElementType;
 }
 export declare const Interactive: React.ForwardRefExoticComponent<Omit<InteractiveProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Interactive/Interactive.js

@@ -1,17 +1,18 @@
-import { jsx as n } from "react/jsx-runtime";
-import a from "react";
-import { clsx as i } from "../../utils/clsx.js";
-import '../../assets/Interactive.css';const f = "_root_1o2df_1", m = {
+import { jsx as a } from "react/jsx-runtime";
+import i from "react";
+import { clsx as m } from "../../utils/clsx.js";
+import '../../assets/Interactive.css';const f = "_root_1o2df_1", l = {
   root: f
-}, h = a.forwardRef(function(o, t) {
+}, h = i.forwardRef(function(o, t) {
   const {
     showPointer: r = !0,
     className: e,
-    ...s
-  } = o, c = i(e, {
-    [m.root]: r
+    as: s = "div",
+    ...n
+  } = o, c = m(e, {
+    [l.root]: r
   });
-  return /* @__PURE__ */ n("div", { ref: t, className: c, ...s, children: o.children });
+  return /* @__PURE__ */ a(s, { ref: t, className: c, ...n, children: o.children });
 });
 export {
   h as Interactive

package/dist/components/Island/Island.js

@@ -1,34 +1,34 @@
-import { jsx as u } from "react/jsx-runtime";
-import h from "react";
-import { ui as d } from "../ui.js";
-import { clsx as c } from "../../utils/clsx.js";
-import '../../assets/Island.css';const a = "_root_aa951_1", w = "_grow_aa951_15", t = {
-  root: a,
-  grow: w,
-  "no-round-border-top-left": "_no-round-border-top-left_aa951_19",
-  "no-round-border-top-right": "_no-round-border-top-right_aa951_22",
-  "no-round-border-bottom-left": "_no-round-border-bottom-left_aa951_25",
-  "no-round-border-bottom-right": "_no-round-border-bottom-right_aa951_28"
+import { jsx as c } from "react/jsx-runtime";
+import b from "react";
+import { ui as p } from "../ui.js";
+import { clsx as h } from "../../utils/clsx.js";
+import '../../assets/Island.css';const w = "_root_mdgcu_1", R = "_grow_mdgcu_15", t = {
+  root: w,
+  grow: R,
+  "no-round-border-top-left": "_no-round-border-top-left_mdgcu_19",
+  "no-round-border-top-right": "_no-round-border-top-right_mdgcu_22",
+  "no-round-border-bottom-left": "_no-round-border-bottom-left_mdgcu_25",
+  "no-round-border-bottom-right": "_no-round-border-bottom-right_mdgcu_28"
 };
-var R = /* @__PURE__ */ ((o) => (o[o.TopLeft = 1] = "TopLeft", o[o.TopRight = 2] = "TopRight", o[o.BottomLeft = 4] = "BottomLeft", o[o.BottomRight = 8] = "BottomRight", o[o.Top = 3] = "Top", o[o.Left = 5] = "Left", o[o.Right = 10] = "Right", o[o.Bottom = 12] = "Bottom", o[o.All = 15] = "All", o))(R || {});
-const s = h.forwardRef(function(f, e) {
+var B = /* @__PURE__ */ ((o) => (o[o.TopLeft = 1] = "TopLeft", o[o.TopRight = 2] = "TopRight", o[o.BottomLeft = 4] = "BottomLeft", o[o.BottomRight = 8] = "BottomRight", o[o.Top = 3] = "Top", o[o.Left = 5] = "Left", o[o.Right = 10] = "Right", o[o.Bottom = 12] = "Bottom", o[o.All = 15] = "All", o))(B || {});
+const l = b.forwardRef(function(i, u) {
   const {
-    grow: _ = !1,
-    widthQ: i = 0,
+    grow: f = !1,
+    widthQ: m = 0,
     straightCorner: r = 0,
-    children: b,
-    className: g
-  } = f, p = c(t.root, g, {
-    [t.grow]: _,
+    children: d,
+    className: e
+  } = i, _ = h(t.root, e, {
+    [t.grow]: f,
     [t["no-round-border-top-left"]]: r & 1,
     [t["no-round-border-top-right"]]: r & 2,
     [t["no-round-border-bottom-left"]]: r & 4,
     [t["no-round-border-bottom-right"]]: r & 8
     /* BottomRight */
-  }), m = {};
-  return i > 0 && (m.width = d.q(i)), /* @__PURE__ */ u("div", { className: p, style: m, ref: e, children: b });
+  }), g = {};
+  return m > 0 && (g.width = p.q(m)), /* @__PURE__ */ c("div", { className: _, style: g, ref: u, children: d });
 });
 export {
-  s as Island,
-  R as IslandCorner
+  l as Island,
+  B as IslandCorner
 };

package/dist/components/Layout/Flex/Flex.js

@@ -1,51 +1,54 @@
 import { jsx as r } from "react/jsx-runtime";
 import w from "react";
-import { clsx as b } from "../../../utils/clsx.js";
-import { FlexRestricter as R } from "./FlexRestricter.js";
-import '../../../assets/Flex.css';const F = "_root_1audv_1", z = "_centered_1audv_11", C = "_vertical_1audv_30", N = "_repell_1audv_36", E = "_wrap_1audv_39", T = "_stretch_1audv_51", j = "_horizontal_1audv_57", e = {
-  root: F,
-  "full-width": "_full-width_1audv_5",
-  "full-height": "_full-height_1audv_8",
-  centered: z,
-  "centered-axis": "_centered-axis_1audv_15",
-  "centered-cross-axis": "_centered-cross-axis_1audv_18",
-  "baseline-axis": "_baseline-axis_1audv_21",
-  "baseline-cross-axis": "_baseline-cross-axis_1audv_24",
-  "reverse-order": "_reverse-order_1audv_27",
+import { clsx as v } from "../../../utils/clsx.js";
+import { FlexRestricter as z } from "./FlexRestricter.js";
+import '../../../assets/Flex.css';const R = "_root_1bx3e_1", F = "_centered_1bx3e_11", C = "_vertical_1bx3e_30", N = "_repell_1bx3e_36", E = "_wrap_1bx3e_39", T = "_stretch_1bx3e_51", j = "_horizontal_1bx3e_57", e = {
+  root: R,
+  "full-width": "_full-width_1bx3e_5",
+  "full-height": "_full-height_1bx3e_8",
+  centered: F,
+  "centered-axis": "_centered-axis_1bx3e_15",
+  "centered-cross-axis": "_centered-cross-axis_1bx3e_18",
+  "baseline-axis": "_baseline-axis_1bx3e_21",
+  "baseline-cross-axis": "_baseline-cross-axis_1bx3e_24",
+  "reverse-order": "_reverse-order_1bx3e_27",
   vertical: C,
   repell: N,
   wrap: E,
-  "align-to-end": "_align-to-end_1audv_42",
-  "align-to-end-axis": "_align-to-end-axis_1audv_45",
-  "space-between": "_space-between_1audv_48",
+  "align-to-end": "_align-to-end_1bx3e_42",
+  "align-to-end-axis": "_align-to-end-axis_1bx3e_45",
+  "space-between": "_space-between_1bx3e_48",
   stretch: T,
   horizontal: j,
-  "gap-none": "_gap-none_1audv_63",
-  "gap-thin": "_gap-thin_1audv_66",
-  "gap-xsmall": "_gap-xsmall_1audv_69",
-  "gap-small": "_gap-small_1audv_72",
-  "gap-normal": "_gap-normal_1audv_75",
-  "gap-large": "_gap-large_1audv_78",
-  "gap-xlarge": "_gap-xlarge_1audv_81"
+  "gap-none": "_gap-none_1bx3e_63",
+  "gap-hairthin": "_gap-hairthin_1bx3e_66",
+  "gap-thin": "_gap-thin_1bx3e_69",
+  "gap-xxsmall": "_gap-xxsmall_1bx3e_72",
+  "gap-xsmall": "_gap-xsmall_1bx3e_75",
+  "gap-small": "_gap-small_1bx3e_78",
+  "gap-normal": "_gap-normal_1bx3e_81",
+  "gap-large": "_gap-large_1bx3e_84",
+  "gap-xlarge": "_gap-xlarge_1bx3e_87",
+  "gap-safezone": "_gap-safezone_1bx3e_90"
 };
 function A(l, s) {
   const {
-    fullWidth: _ = !1,
+    fullWidth: n = !1,
     fullHeight: o = !1,
     vertical: t = !1,
     centered: a = !1,
     repell: i = !1,
-    stretch: d = !1,
+    stretch: x = !1,
     wrap: c = !1,
-    alignToEnd: u = !1,
-    alignToEndAxis: p = !1,
-    spaceBetween: v = !1,
-    reverseOrder: g = !1,
-    gap: x = "normal",
-    children: f,
-    className: h
-  } = l, m = b(e.root, h, e[`gap-${x}`], {
-    [e["full-width"]]: _,
+    alignToEnd: p = !1,
+    alignToEndAxis: b = !1,
+    spaceBetween: g = !1,
+    reverseOrder: d = !1,
+    gap: f = "normal",
+    children: h,
+    className: m
+  } = l, u = v(e.root, m, e[`gap-${f}`], {
+    [e["full-width"]]: n,
     [e["full-height"]]: o,
     [e.centered]: a === !0,
     [e["centered-axis"]]: a === "axis",
@@ -55,21 +58,21 @@ function A(l, s) {
     [e.vertical]: t,
     [e.horizontal]: !t,
     [e.repell]: i,
-    [e.stretch]: d,
+    [e.stretch]: x,
     [e.wrap]: c,
-    [e["align-to-end"]]: u,
-    [e["align-to-end-axis"]]: p,
-    [e["space-between"]]: v,
-    [e["reverse-order"]]: g
+    [e["align-to-end"]]: p,
+    [e["align-to-end-axis"]]: b,
+    [e["space-between"]]: g,
+    [e["reverse-order"]]: d
   });
-  return /* @__PURE__ */ r("div", { ref: s, className: m, children: f });
+  return /* @__PURE__ */ r("div", { ref: s, className: u, children: h });
 }
-const B = w.forwardRef(A), n = B;
-n.Restricted = function({
+const B = w.forwardRef(A), _ = B;
+_.Restricted = function({
   children: s
 }) {
-  return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(R, { children: s }) });
+  return /* @__PURE__ */ r(_, { children: /* @__PURE__ */ r(z, { children: s }) });
 };
 export {
-  n as Flex
+  _ as Flex
 };

package/dist/components/Layout/Pad/Pad.js

@@ -1,35 +1,38 @@
-import { jsx as i } from "react/jsx-runtime";
-import { clsx as q } from "../../../utils/clsx.js";
-import '../../../assets/Pad.css';const y = "_root_166qt_1", o = {
-  root: y,
-  "offset-none": "_offset-none_166qt_1",
-  "offset-thin": "_offset-thin_166qt_4",
-  "offset-xsmall": "_offset-xsmall_166qt_7",
-  "offset-small": "_offset-small_166qt_10",
-  "offset-normal": "_offset-normal_166qt_13",
-  "offset-large": "_offset-large_166qt_16",
-  "offset-xlarge": "_offset-xlarge_166qt_19",
-  "only-top": "_only-top_166qt_22",
-  "only-left": "_only-left_166qt_25",
-  "only-right": "_only-right_166qt_28",
-  "only-bottom": "_only-bottom_166qt_31"
+import { jsx as m } from "react/jsx-runtime";
+import { clsx as u } from "../../../utils/clsx.js";
+import '../../../assets/Pad.css';const i = "_root_1wpeu_1", o = {
+  root: i,
+  "offset-none": "_offset-none_1wpeu_1",
+  "offset-hairthin": "_offset-hairthin_1wpeu_4",
+  "offset-thin": "_offset-thin_1wpeu_7",
+  "offset-xxsmall": "_offset-xxsmall_1wpeu_10",
+  "offset-xsmall": "_offset-xsmall_1wpeu_13",
+  "offset-small": "_offset-small_1wpeu_16",
+  "offset-normal": "_offset-normal_1wpeu_19",
+  "offset-large": "_offset-large_1wpeu_22",
+  "offset-xlarge": "_offset-xlarge_1wpeu_25",
+  "offset-safezone": "_offset-safezone_1wpeu_28",
+  "only-top": "_only-top_1wpeu_31",
+  "only-left": "_only-left_1wpeu_34",
+  "only-right": "_only-right_1wpeu_37",
+  "only-bottom": "_only-bottom_1wpeu_40"
 };
 function h(_) {
   const {
-    top: f = !1,
-    left: l = !1,
+    top: t = !1,
+    left: f = !1,
     right: s = !1,
-    bottom: e = !1,
+    bottom: l = !1,
     size: n = "normal",
-    children: r,
-    className: a
-  } = _, t = !(f || l || s || e), m = q(o.root, a, o[`offset-${n}`], {
-    [o["only-top"]]: t || f,
-    [o["only-left"]]: t || l,
-    [o["only-right"]]: t || s,
-    [o["only-bottom"]]: t || e
+    children: a,
+    className: r
+  } = _, e = !(t || f || s || l), p = u(o.root, r, o[`offset-${n}`], {
+    [o["only-top"]]: e || t,
+    [o["only-left"]]: e || f,
+    [o["only-right"]]: e || s,
+    [o["only-bottom"]]: e || l
   });
-  return /* @__PURE__ */ i("div", { className: m, children: r });
+  return /* @__PURE__ */ m("div", { className: p, children: a });
 }
 export {
   h as Pad

package/dist/components/Layout/Scrollable/Rail.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 
-interface RailProps {
+export interface RailProps {
     axis: 'x' | 'y';
     pos: number;
     rootRef: React.RefObject<HTMLDivElement>;
@@ -10,4 +10,3 @@ interface RailProps {
     setRootActive(active: boolean): void;
 }
 export declare function Rail(props: RailProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Layout/Scrollable/Rail.js

@@ -2,9 +2,8 @@ import "react/jsx-runtime";
 import "react";
 import "../../Interactive/Interactive.js";
 import "../../../utils/clsx.js";
-import "../../../utils/hooks.js";
 import "../../../utils/math.js";
-import { R as e } from "../../../Rail-CCuyJpf6.js";
+import { R } from "../../../Rail-rtPENZs2.js";
 export {
-  e as Rail
+  R as Rail
 };

package/dist/components/Layout/Scrollable/Scrollable.js

@@ -1,25 +1,25 @@
-import { jsxs as j, jsx as n } from "react/jsx-runtime";
+import { jsxs as j, jsx as i } from "react/jsx-runtime";
 import r from "react";
 import { useContextualStyle as W } from "../../Style/Style.js";
 import { clsx as b } from "../../../utils/clsx.js";
 import { mergeRefs as k } from "../../../utils/mergeRefs.js";
-import { s as o, R as w } from "../../../Rail-CCuyJpf6.js";
+import { s as o, R as w } from "../../../Rail-rtPENZs2.js";
 const N = {
   size: 0,
   scrollPos: 0,
   scrollSize: 0
-}, K = r.forwardRef(function(f, P) {
+}, K = r.forwardRef(function(u, P) {
   const {
     children: y,
     className: A,
-    onScroll: i,
-    minThumbSize: S = 20,
-    verticalAsHorizontal: a = !1
-  } = f, e = r.useRef(null), u = r.useRef(null), [L, m] = r.useState(!1), [l, E] = r.useState(N), [T, g] = r.useState(0), [c, C] = r.useState(N), [I, X] = r.useState(0), Y = b(o.root, A, {
+    onScroll: l,
+    minThumbSize: f = 20,
+    verticalAsHorizontal: S = !1
+  } = u, e = r.useRef(null), a = r.useRef(null), [L, m] = r.useState(!1), [c, E] = r.useState(N), [T, g] = r.useState(0), [n, C] = r.useState(N), [I, X] = r.useState(0), Y = b(o.root, A, {
     [o.active]: L
   });
   r.useLayoutEffect(() => {
-    if (!u.current)
+    if (!a.current)
       throw new Error("No scrollable content ref");
     const s = new ResizeObserver(() => {
       var t, d, h, v, p, x;
@@ -33,16 +33,16 @@ const N = {
         scrollSize: ((x = e.current) == null ? void 0 : x.scrollWidth) || 0
       });
     });
-    return s.observe(u.current), () => s.disconnect();
+    return s.observe(a.current), () => s.disconnect();
   }, []);
   const _ = r.useCallback(
     (s) => {
-      e.current && (i == null || i(s), X(e.current.scrollTop), g(e.current.scrollLeft));
+      e.current && (l == null || l(s), X(e.current.scrollTop), g(e.current.scrollLeft));
     },
-    [a]
+    [l]
   );
   r.useEffect(() => {
-    if (!a || !e.current)
+    if (!S || !e.current)
       return;
     const s = (t) => {
       t.preventDefault(), t.stopPropagation(), e.current && (e.current.scrollLeft += t.deltaY);
@@ -51,35 +51,35 @@ const N = {
       var t;
       return (t = e.current) == null ? void 0 : t.removeEventListener("wheel", s);
     };
-  }, [a]);
-  const z = l.scrollSize - l.size > 1, R = c.scrollSize - c.size > 1, H = b(o.scroller, {
+  }, [S]);
+  const z = c.scrollSize - c.size > 1, R = n.scrollSize - n.size > 1, H = b(o.scroller, {
     [o["no-x-scroll"]]: !z,
     [o["no-y-scroll"]]: !R
   });
   return /* @__PURE__ */ j("div", { ref: P, style: W(), className: Y, children: [
-    /* @__PURE__ */ n("div", { ref: k(e, f.scrollerRef), className: H, onScroll: _, children: /* @__PURE__ */ n("div", { ref: u, className: o.content, children: y }) }),
-    R && /* @__PURE__ */ n(
+    /* @__PURE__ */ i("div", { ref: k(e, u.scrollerRef), className: H, onScroll: _, children: /* @__PURE__ */ i("div", { ref: a, className: o.content, children: y }) }),
+    R && /* @__PURE__ */ i(
       w,
       {
         rootRef: e,
         axis: "y",
-        size: c.size,
+        size: n.size,
         pos: I,
-        scrollSize: c.scrollSize,
+        scrollSize: n.scrollSize,
         setRootActive: m,
-        minThumbSize: S
+        minThumbSize: f
       }
     ),
-    z && /* @__PURE__ */ n(
+    z && /* @__PURE__ */ i(
       w,
       {
         rootRef: e,
         axis: "x",
-        size: l.size,
+        size: c.size,
         pos: T,
-        scrollSize: l.scrollSize,
+        scrollSize: c.scrollSize,
         setRootActive: m,
-        minThumbSize: S
+        minThumbSize: f
       }
     )
   ] });

package/dist/components/Layout/Scrollable/ScrollableShowcase.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+declare function ScrollableShowcase(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ScrollableShowcase>;
+export default _default;

package/dist/components/Layout/Scrollable/ScrollableShowcase.js

@@ -0,0 +1,112 @@
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import d from "react";
+import { Flex as i } from "../Flex/Flex.js";
+import { Text as t } from "../../Text/Text.js";
+import { LOREM_IPSUM as e } from "../../../utils/loremipsum.js";
+import { Scrollable as o } from "./Scrollable.js";
+function c() {
+  return /* @__PURE__ */ l("div", { children: [
+    /* @__PURE__ */ l(i, { vertical: !0, fullWidth: !0, children: [
+      /* @__PURE__ */ r(t, { size: "large", children: "Vertical" }),
+      /* @__PURE__ */ r(
+        "div",
+        {
+          style: {
+            height: "200px",
+            backgroundColor: "rgba(0, 0, 0, 0.75)"
+          },
+          children: /* @__PURE__ */ l(o, { children: [
+            e,
+            /* @__PURE__ */ r("br", {}),
+            e,
+            /* @__PURE__ */ r("br", {}),
+            e,
+            /* @__PURE__ */ r("br", {}),
+            e,
+            /* @__PURE__ */ r("br", {}),
+            e,
+            /* @__PURE__ */ r("br", {}),
+            e,
+            /* @__PURE__ */ r("br", {}),
+            e,
+            /* @__PURE__ */ r("br", {}),
+            e
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ l(i, { vertical: !0, fullWidth: !0, children: [
+      /* @__PURE__ */ r("br", {}),
+      /* @__PURE__ */ r(t, { size: "large", children: "Horizontal" }),
+      /* @__PURE__ */ r(
+        "div",
+        {
+          style: {
+            width: "600px",
+            backgroundColor: "rgba(0, 0, 0, 0.75)"
+          },
+          children: /* @__PURE__ */ r(o, { children: /* @__PURE__ */ l(
+            "div",
+            {
+              style: {
+                width: "1000px",
+                overflow: "hidden"
+              },
+              children: [
+                e,
+                /* @__PURE__ */ r("br", {}),
+                e,
+                /* @__PURE__ */ r("br", {}),
+                e
+              ]
+            }
+          ) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ l(i, { vertical: !0, fullWidth: !0, children: [
+      /* @__PURE__ */ r("br", {}),
+      /* @__PURE__ */ r(t, { size: "large", children: "Vertical + Horizontal" }),
+      /* @__PURE__ */ r(
+        "div",
+        {
+          style: {
+            height: "200px",
+            width: "600px",
+            backgroundColor: "rgba(0, 0, 0, 0.75)"
+          },
+          children: /* @__PURE__ */ r(o, { children: /* @__PURE__ */ l(
+            "div",
+            {
+              style: {
+                width: "1000px",
+                overflow: "hidden"
+              },
+              children: [
+                e,
+                /* @__PURE__ */ r("br", {}),
+                e,
+                /* @__PURE__ */ r("br", {}),
+                e,
+                /* @__PURE__ */ r("br", {}),
+                e,
+                /* @__PURE__ */ r("br", {}),
+                e,
+                /* @__PURE__ */ r("br", {}),
+                e,
+                /* @__PURE__ */ r("br", {}),
+                e,
+                /* @__PURE__ */ r("br", {}),
+                e
+              ]
+            }
+          ) })
+        }
+      )
+    ] })
+  ] });
+}
+const f = d.memo(c);
+export {
+  f as default
+};