@kolking/react-ui 1.4.0 → 1.5.0

package/dist/{Input-DE1QkW7S.js → Input-DbQTM4UI.js}

@@ -1,15 +1,15 @@
-import { jsxs as f, jsx as s } from "react/jsx-runtime";
+import { jsxs as _, jsx as s } from "react/jsx-runtime";
 import u from "classnames";
-import _ from "react";
+import h from "react";
 import { cssProps as m } from "./utils/helpers.js";
-import { s as t, V as h } from "./ValidationTooltip-BgSwl0hJ.js";
-const x = "styles_checkbox_pxrU4", w = "styles_radio_0QV8R", v = "styles_label_K65D1", k = "styles_input_j6Qji", g = {
-  checkbox: x,
-  radio: w,
-  label: v,
-  input: k
+import { s as t, V as x } from "./ValidationTooltip-BgSwl0hJ.js";
+const w = "styles_checkbox_pxrU4", v = "styles_radio_0QV8R", k = "styles_label_K65D1", g = "styles_input_j6Qji", N = {
+  checkbox: w,
+  radio: v,
+  label: k,
+  input: g
 };
-function N(a) {
+function j(e) {
   return ![
     "button",
     "checkbox",
@@ -21,13 +21,13 @@ function N(a) {
     "range",
     "reset",
     "submit"
-  ].includes(a);
+  ].includes(e);
 }
-function p(a) {
-  switch (a) {
+function p(e) {
+  switch (e) {
     case "checkbox":
     case "radio":
-      return g.input;
+      return N.input;
     case "date":
     case "datetime":
     case "datetime-local":
@@ -45,21 +45,31 @@ function p(a) {
     case "image":
     case "color":
     case "file":
-      return t[a];
+      return t[e];
     default:
       return t.input;
   }
 }
-const Q = _.forwardRef(
-  ({ size: a, error: c, type: e = "text", className: o, style: d, prefix: i, children: n, ...r }, l) => {
-    const b = N(e) && (i || n) ? /* @__PURE__ */ f(
+const C = h.forwardRef(
+  ({
+    size: e,
+    error: c,
+    type: a = "text",
+    wrapperType: b = a,
+    prefix: i,
+    className: o,
+    style: d,
+    children: n,
+    ...r
+  }, l) => {
+    const f = j(a) && (i || n) ? /* @__PURE__ */ _(
       "div",
       {
-        "data-input-wrapper": !0,
+        "data-input-wrapper": b,
         "data-disabled": r.disabled,
         "data-invalid": c ? !0 : void 0,
         className: u(t.wrapper, o),
-        style: { ...d, ...m({ size: a }) },
+        style: { ...d, ...m({ size: e }) },
         children: [
           i && /* @__PURE__ */ s("div", { "data-input-prefix": !0, className: t.wrapper_prefix, children: i }),
           /* @__PURE__ */ s(
@@ -67,9 +77,9 @@ const Q = _.forwardRef(
             {
               ...r,
               ref: l,
-              type: e,
-              "data-input": e,
-              className: p(e)
+              type: a,
+              "data-input": a,
+              className: p(a)
             }
           ),
           n && /* @__PURE__ */ s("div", { "data-input-accessory": !0, className: t.wrapper_accessory, children: n })
@@ -80,17 +90,17 @@ const Q = _.forwardRef(
       {
         ...r,
         ref: l,
-        type: e,
-        "data-input": e,
+        type: a,
+        "data-input": a,
         "data-invalid": c ? !0 : void 0,
-        className: u(p(e), o),
-        style: { ...d, ...m({ size: a }) }
+        className: u(p(a), o),
+        style: { ...d, ...m({ size: e }) }
       }
     );
-    return /* @__PURE__ */ s(h, { content: c, children: b });
+    return /* @__PURE__ */ s(x, { content: c, children: f });
   }
 );
 export {
-  Q as I,
-  g as s
+  C as I,
+  N as s
 };

package/dist/components/Dialog/Dialog.d.ts

@@ -1,10 +1,15 @@
 import { default as React } from 'react';
 import { ButtonProps } from '../Button';
-export type DialogProps = React.HTMLProps<HTMLDialogElement> & {
+import { HeadingProps } from '../Heading';
+export type DialogProps = React.DialogHTMLAttributes<HTMLDialogElement> & {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     width?: React.CSSProperties['width'];
 };
-export declare const Dialog: React.ForwardRefExoticComponent<Omit<DialogProps, "ref"> & React.RefAttributes<HTMLDialogElement>>;
-export declare const DialogTitle: ({ className, children, ...props }: React.HTMLProps<HTMLHeadingElement>) => import("react/jsx-runtime").JSX.Element;
-export declare const DialogContent: ({ className, children, ...props }: React.HTMLProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
-export declare const DialogFooter: ({ className, children, ...props }: React.HTMLProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const Dialog: React.ForwardRefExoticComponent<React.DialogHTMLAttributes<HTMLDialogElement> & {
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    width?: React.CSSProperties["width"];
+} & React.RefAttributes<HTMLDialogElement>>;
+export declare const DialogTitle: ({ className, children, ...props }: Omit<HeadingProps, "title">) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogContent: ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogFooter: ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
 export declare const DialogClose: ({ className, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/Dialog.js

@@ -1,58 +1,53 @@
-import { jsx as a } from "react/jsx-runtime";
-import d from "react";
+import { jsx as t } from "react/jsx-runtime";
+import g from "react";
 import i from "classnames";
-import { Icon as g } from "../Icon/Icon.js";
-import { Button as m } from "../Button/Button.js";
-import { DialogFocusTrap as p } from "./DialogFocusTrap.js";
-import { cssProps as f } from "../../utils/helpers.js";
-const _ = "Dialog_dialog_G3gxL", D = "Dialog_wrapper_BMuhR", u = "Dialog_title_2pDPQ", N = "Dialog_content_7168G", w = "Dialog_footer_N-aEV", v = "Dialog_close_JSEkn", l = {
+import { Icon as m } from "../Icon/Icon.js";
+import { Button as p } from "../Button/Button.js";
+import { Heading as f } from "../Heading/Heading.js";
+import { DialogFocusTrap as u } from "./DialogFocusTrap.js";
+import { cssProps as D } from "../../utils/helpers.js";
+const _ = "Dialog_dialog_G3gxL", w = "Dialog_wrapper_BMuhR", v = "Dialog_footer_N-aEV", N = "Dialog_close_JSEkn", e = {
   dialog: _,
-  wrapper: D,
-  title: u,
-  content: N,
-  footer: w,
-  close: v
-}, E = d.forwardRef(
-  ({ open: o = !1, width: t, style: e, className: r, children: s, ...c }, n) => /* @__PURE__ */ a(p, { active: o, children: /* @__PURE__ */ a(
+  wrapper: w,
+  footer: v,
+  close: N
+}, F = g.forwardRef(
+  ({ open: o = !1, size: a, width: r, style: l, className: s, children: c, ...d }, n) => /* @__PURE__ */ t(u, { active: o, children: /* @__PURE__ */ t(
     "dialog",
     {
-      ...c,
+      ...d,
       ref: n,
       "data-floating-root": !0,
       "data-dialog": o ? "open" : "closed",
-      className: i(l.dialog, r),
-      style: { ...e, ...f({ width: t }) },
-      children: /* @__PURE__ */ a("div", { "data-dialog-wrapper": !0, className: l.wrapper, children: s })
+      className: i(e.dialog, s),
+      style: { ...l, ...D({ size: a, width: r }) },
+      children: /* @__PURE__ */ t("div", { "data-dialog-wrapper": !0, className: e.wrapper, children: c })
     }
   ) })
-), F = ({
+), T = ({ className: o, children: a, ...r }) => /* @__PURE__ */ t(f, { as: "h4", ...r, "data-dialog-title": !0, title: a, className: o }), j = ({
   className: o,
-  children: t,
-  ...e
-}) => /* @__PURE__ */ a("h4", { ...e, "data-dialog-title": !0, className: i(l.title, o), children: t }), G = ({
+  children: a,
+  ...r
+}) => /* @__PURE__ */ t("div", { ...r, "data-dialog-content": !0, className: o, children: a }), k = ({
   className: o,
-  children: t,
-  ...e
-}) => /* @__PURE__ */ a("div", { ...e, "data-dialog-content": !0, className: i(l.content, o), children: t }), P = ({
-  className: o,
-  children: t,
-  ...e
-}) => /* @__PURE__ */ a("div", { ...e, "data-dialog-footer": !0, className: i(l.footer, o), children: t }), T = ({ className: o, ...t }) => /* @__PURE__ */ a(
-  m,
+  children: a,
+  ...r
+}) => /* @__PURE__ */ t("div", { ...r, "data-dialog-footer": !0, className: i(e.footer, o), children: a }), G = ({ className: o, ...a }) => /* @__PURE__ */ t(
+  p,
   {
-    ...t,
+    ...a,
     type: "button",
     variant: "tertiary",
     "data-dialog-close": !0,
     "aria-label": "dismiss dialog",
-    icon: /* @__PURE__ */ a(g, { name: "close" }),
-    className: i(l.close, o)
+    icon: /* @__PURE__ */ t(m, { name: "close" }),
+    className: i(e.close, o)
   }
 );
 export {
-  E as Dialog,
-  T as DialogClose,
-  G as DialogContent,
-  P as DialogFooter,
-  F as DialogTitle
+  F as Dialog,
+  G as DialogClose,
+  j as DialogContent,
+  k as DialogFooter,
+  T as DialogTitle
 };

package/dist/components/Fields/Checkbox.js

@@ -2,7 +2,7 @@ import { jsxs as i, jsx as l } from "react/jsx-runtime";
 import p from "classnames";
 import h, { useRef as x, useImperativeHandle as k, useEffect as b } from "react";
 import { cssProps as R } from "../../utils/helpers.js";
-import { I as y, s as n } from "../../Input-DE1QkW7S.js";
+import { I as y, s as n } from "../../Input-DbQTM4UI.js";
 const q = h.forwardRef(
   ({ size: c, error: a, label: t, className: f, style: u, required: m, indeterminate: r, ...s }, d) => {
     const o = s.checked, e = x(null);

package/dist/components/Fields/Field.d.ts

@@ -17,4 +17,4 @@ export declare const FieldLabel: ({ label, required, className, children, ...pro
 export type FieldDescriptionProps = React.HTMLAttributes<HTMLDivElement>;
 export declare const FieldDescription: ({ className, children, ...props }: FieldDescriptionProps) => import("react/jsx-runtime").JSX.Element;
 export type FieldProps = React.HTMLAttributes<HTMLDivElement> & FieldConfig;
-export declare const Field: ({ id, label, labelAccessory, help, required, minWidth, maxWidth, className, children, ...props }: FieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Field: ({ id, label, labelAccessory, help, required, minWidth, maxWidth, className, children, style, ...props }: FieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Fields/Field.js

@@ -1,14 +1,14 @@
-import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
 import d from "classnames";
-import h from "react";
-import { cssProps as _ } from "../../utils/helpers.js";
-const p = "styles_field_hqzKT", u = "styles_header_Iwsz6", b = "styles_label_zRVTS", N = "styles_accessory_S4ccn", F = "styles_description_fZnNW", a = {
-  field: p,
-  header: u,
-  label: b,
-  accessory: N,
-  description: F
-}, v = ({ label: e, required: s, className: l, children: t, ...c }) => /* @__PURE__ */ o("div", { "data-field-header": !0, className: a.header, children: [
+import _ from "react";
+import { cssProps as p } from "../../utils/helpers.js";
+const u = "styles_field_hqzKT", b = "styles_header_Iwsz6", N = "styles_label_zRVTS", F = "styles_accessory_S4ccn", v = "styles_description_fZnNW", a = {
+  field: u,
+  header: b,
+  label: N,
+  accessory: F,
+  description: v
+}, x = ({ label: e, required: s, className: l, children: t, ...c }) => /* @__PURE__ */ i("div", { "data-field-header": !0, className: a.header, children: [
   /* @__PURE__ */ r(
     "label",
     {
@@ -19,34 +19,35 @@ const p = "styles_field_hqzKT", u = "styles_header_Iwsz6", b = "styles_label_zRV
       children: e
     }
   ),
-  h.Children.toArray(t).length > 0 && /* @__PURE__ */ r("div", { "data-field-accessory": !0, className: a.accessory, children: t })
-] }), x = ({ className: e, children: s, ...l }) => /* @__PURE__ */ r("small", { ...l, "data-field-description": !0, className: d(a.description, e), children: s }), S = ({
+  _.Children.toArray(t).length > 0 && /* @__PURE__ */ r("div", { "data-field-accessory": !0, className: a.accessory, children: t })
+] }), z = ({ className: e, children: s, ...l }) => /* @__PURE__ */ r("small", { ...l, "data-field-description": !0, className: d(a.description, e), children: s }), T = ({
   id: e,
   label: s,
   labelAccessory: l,
   help: t,
   required: c,
-  minWidth: n,
-  maxWidth: f,
-  className: m,
-  children: y,
-  ...i
-}) => /* @__PURE__ */ o(
+  minWidth: o,
+  maxWidth: n,
+  className: f,
+  children: m,
+  style: y,
+  ...h
+}) => /* @__PURE__ */ i(
   "div",
   {
-    ...i,
+    ...h,
     "data-field": e || !0,
-    className: d(a.field, m),
-    style: { ...i.style, ..._({ minWidth: n, maxWidth: f }) },
+    className: d(a.field, f),
+    style: { ...y, ...p({ minWidth: o, maxWidth: n }) },
     children: [
-      s && /* @__PURE__ */ r(v, { htmlFor: e, label: s, required: c, children: l }),
-      y,
-      t && /* @__PURE__ */ r(x, { children: t })
+      s && /* @__PURE__ */ r(x, { htmlFor: e, label: s, required: c, children: l }),
+      m,
+      t && /* @__PURE__ */ r(z, { children: t })
     ]
   }
 );
 export {
-  S as Field,
-  x as FieldDescription,
-  v as FieldLabel
+  T as Field,
+  z as FieldDescription,
+  x as FieldLabel
 };

package/dist/components/Fields/Input.d.ts

@@ -4,8 +4,10 @@ export type BaseInputProps<T = React.InputHTMLAttributes<HTMLInputElement>> = Om
     error?: string;
 };
 export type InputProps = Omit<BaseInputProps, 'prefix'> & {
+    wrapperType?: string;
     prefix?: React.ReactNode;
 };
 export declare const Input: React.ForwardRefExoticComponent<Omit<BaseInputProps<React.InputHTMLAttributes<HTMLInputElement>>, "prefix"> & {
+    wrapperType?: string;
     prefix?: React.ReactNode;
 } & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Fields/Input.js

@@ -3,7 +3,7 @@ import "classnames";
 import "react";
 import "../../utils/helpers.js";
 import "../../ValidationTooltip-BgSwl0hJ.js";
-import { I as a } from "../../Input-DE1QkW7S.js";
+import { I as a } from "../../Input-DbQTM4UI.js";
 export {
   a as Input
 };

package/dist/components/Fields/Numeric.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { InputProps } from './Input';
+export type NumericProps = Omit<InputProps, 'children'>;
+export declare const Numeric: React.ForwardRefExoticComponent<NumericProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Fields/Numeric.js

@@ -0,0 +1,62 @@
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import b from "classnames";
+import f, { useRef as y, useImperativeHandle as _, useCallback as c } from "react";
+import { Icon as i } from "../Icon/Icon.js";
+import { Button as o } from "../Button/Button.js";
+import { I as h } from "../../Input-DbQTM4UI.js";
+const v = "styles_numeric_dzUSE", w = "styles_increase_5S-Jo", E = "styles_decrease_j8UR6", s = {
+  numeric: v,
+  increase: w,
+  decrease: E
+}, j = f.forwardRef(
+  ({ className: l, ...a }, u) => {
+    const e = y(null);
+    _(u, () => e.current);
+    const m = c(() => {
+      var n, r;
+      (n = e.current) == null || n.stepUp(), (r = e.current) == null || r.dispatchEvent(new Event("change", { bubbles: !0 }));
+    }, []), d = c(() => {
+      var n, r;
+      (n = e.current) == null || n.stepDown(), (r = e.current) == null || r.dispatchEvent(new Event("change", { bubbles: !0 }));
+    }, []);
+    return /* @__PURE__ */ p(
+      h,
+      {
+        ...a,
+        ref: e,
+        type: "number",
+        wrapperType: "numeric",
+        className: b(s.numeric, l),
+        children: [
+          /* @__PURE__ */ t(
+            o,
+            {
+              type: "button",
+              variant: "secondary",
+              "aria-label": "Increase",
+              disabled: a.disabled,
+              className: s.increase,
+              icon: /* @__PURE__ */ t(i, { name: "triangle-up" }),
+              onClick: m
+            }
+          ),
+          /* @__PURE__ */ t(
+            o,
+            {
+              type: "button",
+              variant: "secondary",
+              "aria-label": "Decrease",
+              disabled: a.disabled,
+              className: s.decrease,
+              icon: /* @__PURE__ */ t(i, { name: "triangle-down" }),
+              onClick: d
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  j as Numeric
+};

package/dist/components/Fields/Radio.js

@@ -2,7 +2,7 @@ import { jsxs as l, jsx as o } from "react/jsx-runtime";
 import c from "classnames";
 import f from "react";
 import { cssProps as n } from "../../utils/helpers.js";
-import { I as u, s } from "../../Input-DE1QkW7S.js";
+import { I as u, s } from "../../Input-DbQTM4UI.js";
 const I = f.forwardRef(
   ({ size: r, error: t, label: a, className: e, style: i, required: d, ...m }, p) => /* @__PURE__ */ l(
     "label",

package/dist/components/Fields/Switch.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { BaseInputProps } from './Input';
+export type SwitchProps = BaseInputProps & {
+    label?: React.ReactNode;
+    checkedColor?: string;
+};
+export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    error?: string;
+} & {
+    label?: React.ReactNode;
+    checkedColor?: string;
+} & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Fields/Switch.js

@@ -0,0 +1,36 @@
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import m from "react";
+import u from "classnames";
+import { cssProps as h } from "../../utils/helpers.js";
+import { V as f } from "../../ValidationTooltip-BgSwl0hJ.js";
+const _ = "styles_label_p-D4Y", w = "styles_input_VteBP", s = {
+  switch: "styles_switch_UNvH8",
+  label: _,
+  input: w
+}, V = m.forwardRef(
+  ({ size: a, error: i, label: e, required: l, checkedColor: o, className: c, style: n, ...r }, p) => /* @__PURE__ */ d(
+    "label",
+    {
+      "data-input": "switch",
+      "data-required": l,
+      className: u(s.switch, c),
+      style: { ...n, ...h({ size: a, checkedColor: o }) },
+      children: [
+        /* @__PURE__ */ t(f, { content: i, children: /* @__PURE__ */ t(
+          "input",
+          {
+            ...r,
+            ref: p,
+            type: "checkbox",
+            "data-invalid": i ? !0 : void 0,
+            className: s.input
+          }
+        ) }),
+        e && /* @__PURE__ */ t("div", { className: s.label, children: e })
+      ]
+    }
+  )
+);
+export {
+  V as Switch
+};

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

@@ -1,8 +1,9 @@
 export * from './Checkbox';
 export * from './Field';
 export * from './Input';
-export * from './Quantity';
+export * from './Numeric';
 export * from './Radio';
 export * from './Select';
+export * from './Switch';
 export * from './Textarea';
 export * from './ValidationTooltip';

package/dist/components/Fields/index.js

@@ -1,20 +1,22 @@
-import { Checkbox as r } from "./Checkbox.js";
+import { Checkbox as e } from "./Checkbox.js";
 import { Field as p, FieldDescription as i, FieldLabel as x } from "./Field.js";
-import { I as f } from "../../Input-DE1QkW7S.js";
-import { Quantity as l } from "./Quantity.js";
-import { Radio as n } from "./Radio.js";
+import { I as f } from "../../Input-DbQTM4UI.js";
+import { Numeric as l } from "./Numeric.js";
+import { Radio as d } from "./Radio.js";
 import { Select as s } from "./Select.js";
-import { Textarea as b } from "./Textarea.js";
-import { V as I } from "../../ValidationTooltip-BgSwl0hJ.js";
+import { Switch as b } from "./Switch.js";
+import { Textarea as u } from "./Textarea.js";
+import { V as S } from "../../ValidationTooltip-BgSwl0hJ.js";
 export {
-  r as Checkbox,
+  e as Checkbox,
   p as Field,
   i as FieldDescription,
   x as FieldLabel,
   f as Input,
-  l as Quantity,
-  n as Radio,
+  l as Numeric,
+  d as Radio,
   s as Select,
-  b as Textarea,
-  I as ValidationTooltip
+  b as Switch,
+  u as Textarea,
+  S as ValidationTooltip
 };

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

@@ -19,4 +19,4 @@ export declare const Flex: <T extends React.ElementType = "div">(props: {
     wrap?: React.CSSProperties["flexWrap"];
     marginStart?: React.CSSProperties["marginBlockStart"];
     marginEnd?: React.CSSProperties["marginBlockEnd"];
-} & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, "direction" | "as" | "align" | "wrap" | "justify" | "gap" | "marginStart" | "marginEnd"> & React.RefAttributes<unknown>) => React.ReactElement | null;
+} & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, "direction" | "as" | "align" | "wrap" | "justify" | "marginStart" | "marginEnd" | "gap"> & React.RefAttributes<unknown>) => React.ReactElement | null;

package/dist/components/Flex/Flex.js

@@ -1,36 +1,37 @@
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as p } from "react/jsx-runtime";
 import d from "classnames";
-import { fixedForwardRef as i, cssProps as p } from "../../utils/helpers.js";
-const y = "Flex_flex_GBHBA", F = {
-  flex: y
+import { fixedForwardRef as i, cssProps as F } from "../../utils/helpers.js";
+const u = "Flex_flex_GBHBA", w = {
+  flex: u
 };
-function u({
-  as: l,
+function y({
+  as: o,
   direction: e = "row",
-  gap: o,
-  align: r,
+  gap: r,
+  align: t,
   justify: s,
-  wrap: f,
-  marginStart: n,
-  marginEnd: x,
-  className: m,
-  ...t
-}, c) {
-  return /* @__PURE__ */ a(
-    l ?? "div",
+  wrap: l,
+  marginStart: f,
+  marginEnd: n,
+  className: x,
+  style: m,
+  ...c
+}, a) {
+  return /* @__PURE__ */ p(
+    o ?? "div",
     {
-      ...t,
-      ref: c,
+      ...c,
+      ref: a,
       "data-flex": e,
-      className: d(F.flex, m),
+      className: d(w.flex, x),
       style: {
-        ...t.style,
-        ...p({ gap: o, align: r, justify: s, direction: e, wrap: f, marginStart: n, marginEnd: x })
+        ...m,
+        ...F({ gap: r, align: t, justify: s, direction: e, wrap: l, marginStart: f, marginEnd: n })
       }
     }
   );
 }
-const j = i(u);
+const v = i(y);
 export {
-  j as Flex
+  v as Flex
 };