@cfx-dev/ui-components 4.2.24 → 4.3.0

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

@@ -3,5 +3,6 @@ import { default as React } from 'react';
 export interface InteractiveProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     showPointer?: boolean;
     as?: React.ElementType;
+    ref?: React.Ref<HTMLDivElement>;
 }
-export declare const Interactive: React.ForwardRefExoticComponent<Omit<InteractiveProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare function Interactive(props: InteractiveProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Interactive/Interactive.js

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

package/dist/components/Island/Island.d.ts

@@ -21,6 +21,7 @@ export interface IslandProps {
      */
     straightCorner?: number;
     children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
     className?: string;
 }
-export declare const Island: React.ForwardRefExoticComponent<IslandProps & React.RefAttributes<HTMLDivElement>>;
+export declare function Island(props: IslandProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Island/Island.js

@@ -1,34 +1,34 @@
-import { jsx as b } from "react/jsx-runtime";
-import g from "react";
-import { clsx as p } from "../../utils/clsx.js";
-import { ui as h } from "../../utils/ui/ui.js";
-const n = "cfxui__Island__root__24fd9", s = "cfxui__Island__grow__c1786", t = {
-  root: n,
-  grow: s,
+import { jsx as c } from "react/jsx-runtime";
+import { clsx as b } from "../../utils/clsx.js";
+import { ui as g } from "../../utils/ui/ui.js";
+const h = "cfxui__Island__root__24fd9", p = "cfxui__Island__grow__c1786", t = {
+  root: h,
+  grow: p,
   "no-round-border-top-left": "cfxui__Island__no-round-border-top-left__599e3",
   "no-round-border-top-right": "cfxui__Island__no-round-border-top-right__83fe5",
   "no-round-border-bottom-left": "cfxui__Island__no-round-border-bottom-left__8d1c9",
   "no-round-border-bottom-right": "cfxui__Island__no-round-border-bottom-right__f8472"
 };
-var l = /* @__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))(l || {});
-const L = g.forwardRef(function(i, d) {
+var n = /* @__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))(n || {});
+function w(o) {
   const {
-    grow: m = !1,
-    widthQ: _ = 0,
-    straightCorner: r = 0,
+    grow: f = !1,
+    widthQ: r = 0,
+    straightCorner: _ = 0,
     children: u,
-    className: e
-  } = i, c = p(t.root, e, {
-    [t.grow]: m,
-    [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
+    className: m,
+    ref: d
+  } = o, e = b(t.root, m, {
+    [t.grow]: f,
+    [t["no-round-border-top-left"]]: _ & 1,
+    [t["no-round-border-top-right"]]: _ & 2,
+    [t["no-round-border-bottom-left"]]: _ & 4,
+    [t["no-round-border-bottom-right"]]: _ & 8
     /* BottomRight */
-  }), f = {};
-  return _ > 0 && (f.width = h.q(_)), /* @__PURE__ */ b("div", { className: c, style: f, ref: d, children: u });
-});
+  }), i = {};
+  return r > 0 && (i.width = g.q(r)), /* @__PURE__ */ c("div", { className: e, style: i, ref: d, children: u });
+}
 export {
-  L as Island,
-  l as IslandCorner
+  w as Island,
+  n as IslandCorner
 };

package/dist/components/Layout/Box/Box.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { MPProps, ResponsiveValueType } from '../../../utils/ui';
+import { BoxDisplayType } from './Box.types';
 
 export interface BoxProps extends MPProps {
     noOverflow?: boolean;
@@ -8,12 +9,17 @@ export interface BoxProps extends MPProps {
     fullWidth?: boolean;
     fullHeight?: boolean;
     fitContentWidth?: boolean;
+    display?: ResponsiveValueType<BoxDisplayType>;
     width?: ResponsiveValueType;
     height?: ResponsiveValueType;
     flex?: ResponsiveValueType<string>;
     children?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
+    ref?: React.Ref<HTMLDivElement>;
+    as?: React.ElementType;
 }
-export declare const flexPropFormater: (val: string) => string;
-export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;
+export declare const stringPropFormater: (val: string) => string;
+declare function Box(props: BoxProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Box>;
+export default _default;

package/dist/components/Layout/Box/Box.js

@@ -1,70 +1,72 @@
-import { jsx as R } from "react/jsx-runtime";
-import c from "react";
-import { useContextualStyle as S } from "../../Style/Style.js";
+import { jsx as B } from "react/jsx-runtime";
+import R from "react";
 import { clsx as C } from "../../../utils/clsx.js";
 import { ui as o } from "../../../utils/ui/ui.js";
-const k = "cfxui__Box__root__299ae", M = "cfxui__Box__grow__7ee8d", t = {
-  root: k,
+const S = "cfxui__Box__root__299ae", k = "cfxui__Box__grow__7ee8d", e = {
+  root: S,
   "full-width": "cfxui__Box__full-width__2b253",
   "fit-content-width": "cfxui__Box__fit-content-width__eff85",
   "full-height": "cfxui__Box__full-height__1d61f",
   "no-overflow": "cfxui__Box__no-overflow__68f14",
   "no-shrink": "cfxui__Box__no-shrink__fbd72",
-  grow: M,
+  grow: k,
   "no-grow": "cfxui__Box__no-grow__7c039"
-}, N = (r) => r, F = c.forwardRef(function(x, u) {
+}, h = (t) => t;
+function N(t) {
   const {
     noOverflow: a = !1,
-    noShrink: w = !1,
-    grow: e = void 0,
-    width: s,
-    height: i,
+    noShrink: c = !1,
+    grow: s = void 0,
+    width: l,
+    height: n,
     children: g,
-    className: d,
-    fullWidth: m,
-    fullHeight: p,
-    fitContentWidth: v,
-    flex: l,
-    style: f,
-    ...n
-  } = x, h = S(), B = C(
-    t.root,
-    d,
-    o.getResponsiveClassnames("width", s),
-    o.getResponsiveClassnames("height", i),
-    o.getResponsiveClassnames("flex", l),
-    o.getAllMPClassnames(n),
+    className: x,
+    fullWidth: d,
+    fullHeight: w,
+    fitContentWidth: u,
+    flex: _,
+    display: f,
+    style: p,
+    ref: m,
+    as: v = "div",
+    ...r
+  } = t, y = C(
+    e.root,
+    x,
+    o.getResponsiveClassnames("width", l),
+    o.getResponsiveClassnames("height", n),
+    o.getResponsiveClassnames("flex", _),
+    o.getResponsiveClassnames("display", f),
+    o.getAllMPClassnames(r),
     {
-      [t["full-width"]]: m,
-      [t["full-height"]]: p,
-      [t["fit-content-width"]]: v,
-      [t["no-overflow"]]: a,
-      [t["no-shrink"]]: w,
-      [t["no-grow"]]: e === !1,
-      [t.grow]: e === !0
+      [e["full-width"]]: d,
+      [e["full-height"]]: w,
+      [e["fit-content-width"]]: u,
+      [e["no-overflow"]]: a,
+      [e["no-shrink"]]: c,
+      [e["no-grow"]]: s === !1,
+      [e.grow]: s === !0
     }
-  ), y = c.useMemo(() => {
-    const _ = {
-      ...o.getResponsiveStyles("width", s),
-      ...o.getResponsiveStyles("height", i),
-      ...o.getResponsiveStyles("flex", l, N),
-      ...o.getAllMPStyles(n),
-      ...h,
-      ...f || {}
-    };
-    return !_.width && e === !0 && (_.width = "1px"), _;
-  }, [s, i, n, h, f, e, l]);
-  return /* @__PURE__ */ R(
-    "div",
+  ), i = {
+    ...o.getResponsiveStyles("width", l),
+    ...o.getResponsiveStyles("height", n),
+    ...o.getResponsiveStyles("flex", _, h),
+    ...o.getResponsiveStyles("display", f, h),
+    ...o.getAllMPStyles(r),
+    ...p || {}
+  };
+  return !i.width && s === !0 && (i.width = "1px"), /* @__PURE__ */ B(
+    v,
     {
-      ref: u,
-      className: B,
-      style: y,
+      ref: m,
+      className: y,
+      style: i,
       children: g
     }
   );
-});
+}
+const W = R.memo(N);
 export {
-  F as Box,
-  N as flexPropFormater
+  W as default,
+  h as stringPropFormater
 };

package/dist/components/Layout/Box/Box.types.d.ts

@@ -0,0 +1,22 @@
+export declare enum BoxDisplayEnum {
+    block = "block",
+    inline = "inline",
+    'inline-block' = "inline-block",
+    flex = "flex",
+    'inline-flex' = "inline-flex",
+    grid = "grid",
+    'inline-grid' = "inline-grid",
+    'flow-root' = "flow-root",
+    table = "table",
+    'table-row' = "table-row",
+    'table-cell' = "table-cell",
+    'list-item' = "list-item",
+    inherit = "inherit",
+    initial = "initial",
+    unset = "unset",
+    none = "none",
+    contents = "contents",
+    revert = "revert",
+    'revert-layer' = "revert-layer"
+}
+export type BoxDisplayType = keyof typeof BoxDisplayEnum;

package/dist/components/Layout/Box/Box.types.js

@@ -0,0 +1,4 @@
+var t = /* @__PURE__ */ ((e) => (e.block = "block", e.inline = "inline", e["inline-block"] = "inline-block", e.flex = "flex", e["inline-flex"] = "inline-flex", e.grid = "grid", e["inline-grid"] = "inline-grid", e["flow-root"] = "flow-root", e.table = "table", e["table-row"] = "table-row", e["table-cell"] = "table-cell", e["list-item"] = "list-item", e.inherit = "inherit", e.initial = "initial", e.unset = "unset", e.none = "none", e.contents = "contents", e.revert = "revert", e["revert-layer"] = "revert-layer", e))(t || {});
+export {
+  t as BoxDisplayEnum
+};

package/dist/components/Layout/Box/index.d.ts

@@ -1,2 +1,2 @@
-export { Box, flexPropFormater } from './Box';
+export { default as Box, stringPropFormater } from './Box';
 export type { BoxProps } from './Box';

package/dist/components/Layout/Box/index.js

@@ -1,5 +1,5 @@
-import { Box as e, flexPropFormater as x } from "./Box.js";
+import { default as t, stringPropFormater as a } from "./Box.js";
 export {
-  e as Box,
-  x as flexPropFormater
+  t as Box,
+  a as stringPropFormater
 };

package/dist/components/Layout/Center/Center.d.ts

@@ -5,5 +5,6 @@ export interface CenterProps {
     horizontal?: boolean;
     className?: string;
     children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
 }
-export declare const Center: React.ForwardRefExoticComponent<CenterProps & React.RefAttributes<HTMLDivElement>>;
+export declare function Center(props: CenterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Layout/Center/Center.js

@@ -1,22 +1,23 @@
-import { jsx as i } from "react/jsx-runtime";
-import l from "react";
-import { clsx as s } from "../../../utils/clsx.js";
-const f = "cfxui__Center__root__e3435", m = "cfxui__Center__vertical__a517d", h = "cfxui__Center__horizontal__21f93", o = {
-  root: f,
-  vertical: m,
-  horizontal: h
-}, d = l.forwardRef(function(t, r) {
+import { jsx as _ } from "react/jsx-runtime";
+import { clsx as l } from "../../../utils/clsx.js";
+const s = "cfxui__Center__root__e3435", f = "cfxui__Center__vertical__a517d", m = "cfxui__Center__horizontal__21f93", o = {
+  root: s,
+  vertical: f,
+  horizontal: m
+};
+function x(t) {
   const {
-    vertical: e = !1,
-    horizontal: a = !1,
-    className: c,
-    children: n
-  } = t, _ = s(o.root, c, {
-    [o.vertical]: e,
-    [o.horizontal]: a
+    vertical: r = !1,
+    horizontal: e = !1,
+    className: a,
+    children: c,
+    ref: n
+  } = t, i = l(o.root, a, {
+    [o.vertical]: r,
+    [o.horizontal]: e
   });
-  return /* @__PURE__ */ i("div", { ref: r, className: _, children: n });
-});
+  return /* @__PURE__ */ _("div", { ref: n, className: i, children: c });
+}
 export {
-  d as Center
+  x as Center
 };

package/dist/components/Layout/Flex/Flex.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { BoxProps } from '../Box/Box';
+import { BoxProps } from '../Box';
 import { ResponsiveOffsetType, ResponsiveValueType } from '../../../utils/ui';
 import { FlexAlignItemsType, FlexCentredType, FlexDirectionType, FlexJustifyContentType, FlexWrapType } from './Flex.types';
 
@@ -16,15 +16,11 @@ export interface FlexProps extends BoxProps {
     alignItems?: ResponsiveValueType<FlexAlignItemsType>;
     justifyContent?: ResponsiveValueType<FlexJustifyContentType>;
     wrap?: ResponsiveValueType<FlexWrapType | boolean>;
-    children?: React.ReactNode;
     className?: string;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
 }
 export declare function flexWrapResponsiveFormatter(val: FlexWrapType | boolean): string;
-declare const FlexComponentReffed: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
-export type FlexType = typeof FlexComponentReffed & {
-    Restricted: React.FC<{
-        children?: React.ReactNode;
-    }>;
-};
-export declare const Flex: FlexType;
-export {};
+declare function Flex(props: FlexProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Flex>;
+export default _default;

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

@@ -1,95 +1,84 @@
-import { jsx as c } from "react/jsx-runtime";
-import d from "react";
-import { Box as y } from "../Box/Box.js";
-import { clsx as C } from "../../../utils/clsx.js";
+import { jsx as R } from "react/jsx-runtime";
+import l from "react";
+import h from "../Box/Box.js";
+import { clsx as y } from "../../../utils/clsx.js";
 import { ui as s } from "../../../utils/ui/ui.js";
-import { FlexRestricter as S } from "./FlexRestricter.js";
-const j = "cfxui__Flex__root__d860a", z = "cfxui__Flex__centered__e911c", N = "cfxui__Flex__vertical__552db", B = "cfxui__Flex__repell__6ea3f", E = "cfxui__Flex__wrap__9d0d6", O = "cfxui__Flex__stretch__5c1ce", T = "cfxui__Flex__horizontal__d64f7", e = {
-  root: j,
-  "full-width": "cfxui__Flex__full-width__b7146",
-  "full-height": "cfxui__Flex__full-height__d3475",
-  centered: z,
+const w = "cfxui__Flex__root__d860a", C = "cfxui__Flex__centered__e911c", S = "cfxui__Flex__vertical__552db", j = "cfxui__Flex__stretch__5c1ce", z = "cfxui__Flex__horizontal__d64f7", e = {
+  root: w,
+  centered: C,
   "centered-axis": "cfxui__Flex__centered-axis__8458f",
   "centered-cross-axis": "cfxui__Flex__centered-cross-axis__f7db7",
   "baseline-axis": "cfxui__Flex__baseline-axis__9ac0d",
   "baseline-cross-axis": "cfxui__Flex__baseline-cross-axis__b4492",
   "reverse-order": "cfxui__Flex__reverse-order__65a69",
-  vertical: N,
-  repell: B,
-  wrap: E,
+  vertical: S,
   "align-to-end": "cfxui__Flex__align-to-end__4b5ea",
   "align-to-end-axis": "cfxui__Flex__align-to-end-axis__db8aa",
   "space-between": "cfxui__Flex__space-between__98493",
-  stretch: O,
-  horizontal: T
+  stretch: j,
+  horizontal: z
 };
-function A(t) {
+function N(t) {
   return t == null ? "" : typeof t == "boolean" ? t ? "wrap" : "nowrap" : t.toString();
 }
-function I(t, r) {
+function B(t) {
   const {
     centered: i = !1,
-    vertical: x = !1,
-    reverseOrder: p = !1,
-    stretch: u = !1,
-    spaceBetween: g = !1,
-    alignToEnd: m = !1,
-    alignToEndAxis: F = !1,
-    children: b,
-    className: h,
+    vertical: c = !1,
+    reverseOrder: x = !1,
+    stretch: f = !1,
+    spaceBetween: d = !1,
+    alignToEnd: p = !1,
+    alignToEndAxis: u = !1,
+    children: g,
+    className: m,
     gap: n,
-    direction: _,
-    alignItems: o,
-    justifyContent: a,
-    wrap: l,
-    ...v
-  } = t, R = C(
+    direction: a,
+    alignItems: r,
+    justifyContent: o,
+    wrap: _,
+    ...b
+  } = t, v = y(
     e.root,
-    h,
+    m,
     s.getResponsiveClassnames("gap", n),
-    s.getResponsiveClassnames("flex-direction", _),
-    s.getResponsiveClassnames("align-items", o),
-    s.getResponsiveClassnames("justify-content", a),
-    s.getResponsiveClassnames("flex-wrap", l),
+    s.getResponsiveClassnames("flex-direction", a),
+    s.getResponsiveClassnames("align-items", r),
+    s.getResponsiveClassnames("justify-content", o),
+    s.getResponsiveClassnames("flex-wrap", _),
     {
       [e.centered]: i === !0,
       [e["centered-axis"]]: i === "axis",
       [e["centered-cross-axis"]]: i === "cross-axis",
       [e["baseline-axis"]]: i === "baseline-axis",
       [e["baseline-cross-axis"]]: i === "baseline-cross-axis",
-      [e.vertical]: x,
-      [e.horizontal]: !x,
-      [e.stretch]: u,
-      [e["align-to-end"]]: m,
-      [e["align-to-end-axis"]]: F,
-      [e["space-between"]]: g,
-      [e["reverse-order"]]: p
+      [e.vertical]: c,
+      [e.horizontal]: !c,
+      [e.stretch]: f,
+      [e["align-to-end"]]: p,
+      [e["align-to-end-axis"]]: u,
+      [e["space-between"]]: d,
+      [e["reverse-order"]]: x
     }
-  ), w = d.useMemo(() => ({
+  ), F = l.useMemo(() => ({
     ...s.getOffsetStyles("gap", n),
-    ...s.getResponsiveStyles("flex-direction", _),
-    ...s.getResponsiveStyles("align-items", o),
-    ...s.getResponsiveStyles("justify-content", a),
-    ...s.getResponsiveStyles("flex-wrap", l, A)
-  }), [n, _, o, a, l]);
-  return /* @__PURE__ */ c(
-    y,
+    ...s.getResponsiveStyles("flex-direction", a),
+    ...s.getResponsiveStyles("align-items", r),
+    ...s.getResponsiveStyles("justify-content", o),
+    ...s.getResponsiveStyles("flex-wrap", _, N)
+  }), [n, a, r, o, _]);
+  return /* @__PURE__ */ R(
+    h,
     {
-      ref: r,
-      className: R,
-      style: w,
-      ...v,
-      children: b
+      className: v,
+      style: F,
+      ...b,
+      children: g
     }
   );
 }
-const M = d.forwardRef(I), f = M;
-f.Restricted = function({
-  children: r
-}) {
-  return /* @__PURE__ */ c(f, { children: /* @__PURE__ */ c(S, { children: r }) });
-};
+const M = l.memo(B);
 export {
-  f as Flex,
-  A as flexWrapResponsiveFormatter
+  M as default,
+  N as flexWrapResponsiveFormatter
 };

package/dist/components/Layout/Flex/FlexRestricter.d.ts

@@ -3,10 +3,11 @@ import { default as React } from 'react';
 export interface FlexRestricterProps {
     vertical?: boolean;
     children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
 }
 /**
  * Useful when you have some flex layout and need to restrict something within to the limits of layout itself
  *
  * To allow scrollable strictly within flex layout, for example
  */
-export declare const FlexRestricter: React.ForwardRefExoticComponent<FlexRestricterProps & React.RefAttributes<HTMLDivElement>>;
+export declare function FlexRestricter(props: FlexRestricterProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,20 +1,21 @@
 import { jsx as l } from "react/jsx-runtime";
-import s from "react";
-import { clsx as _ } from "../../../utils/clsx.js";
-const a = "cfxui__FlexRestricter__root__a1583", n = "cfxui__FlexRestricter__vertical__27ce9", f = "cfxui__FlexRestricter__horizontal__2ab15", t = {
-  root: a,
-  vertical: n,
-  horizontal: f
-}, v = s.forwardRef(function(o, e) {
+import { clsx as s } from "../../../utils/clsx.js";
+const _ = "cfxui__FlexRestricter__root__a1583", a = "cfxui__FlexRestricter__vertical__27ce9", n = "cfxui__FlexRestricter__horizontal__2ab15", t = {
+  root: _,
+  vertical: a,
+  horizontal: n
+};
+function m(o) {
   const {
     vertical: r = !1,
-    children: c
-  } = o, i = _(t.root, {
+    children: e,
+    ref: c
+  } = o, i = s(t.root, {
     [t.vertical]: r,
     [t.horizontal]: !r
   });
-  return /* @__PURE__ */ l("div", { ref: e, className: i, children: c });
-});
+  return /* @__PURE__ */ l("div", { ref: c, className: i, children: e });
+}
 export {
-  v as FlexRestricter
+  m as FlexRestricter
 };

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

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
 import l from "react";
-import { Flex as s } from "./Flex.js";
+import s from "./Flex.js";
 const x = "cfxui__FlexShowcase__box__d5286", o = {
   box: x
 };

package/dist/components/Layout/Flex/index.d.ts

@@ -1,5 +1,5 @@
-export { Flex } from './Flex';
-export type { FlexType, FlexProps } from './Flex';
+export { default as Flex } from './Flex';
+export type { FlexProps } from './Flex';
 export type { FlexDirectionType, FlexAlignItemsType, FlexJustifyContentType, FlexWrapType, FlexCentredType, } from './Flex.types';
 export { FlexDirectionEnum, FlexAlignItemsEnum, FlexJustifyContentEnum, FlexWrapEnum, FlexCentredEnum, } from './Flex.types';
 export { FlexRestricter } from './FlexRestricter';

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

@@ -1,12 +1,12 @@
-import { Flex as t } from "./Flex.js";
-import { FlexAlignItemsEnum as x, FlexCentredEnum as m, FlexDirectionEnum as l, FlexJustifyContentEnum as o, FlexWrapEnum as F } from "./Flex.types.js";
-import { FlexRestricter as i } from "./FlexRestricter.js";
+import { default as r } from "./Flex.js";
+import { FlexAlignItemsEnum as x, FlexCentredEnum as l, FlexDirectionEnum as m, FlexJustifyContentEnum as o, FlexWrapEnum as u } from "./Flex.types.js";
+import { FlexRestricter as f } from "./FlexRestricter.js";
 export {
-  t as Flex,
+  r as Flex,
   x as FlexAlignItemsEnum,
-  m as FlexCentredEnum,
-  l as FlexDirectionEnum,
+  l as FlexCentredEnum,
+  m as FlexDirectionEnum,
   o as FlexJustifyContentEnum,
-  i as FlexRestricter,
-  F as FlexWrapEnum
+  f as FlexRestricter,
+  u as FlexWrapEnum
 };