@cfx-dev/ui-components 1.0.1 → 1.1.0

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

@@ -12,7 +12,7 @@ export interface FlexProps {
     spaceBetween?: boolean;
     alignToEnd?: boolean;
     alignToEndAxis?: boolean;
-    gap?: 'none' | 'thin' | 'small' | 'normal' | 'large' | 'xlarge';
+    gap?: 'none' | 'thin' | 'small' | 'normal' | 'medium' | 'large' | 'xlarge';
     children?: React.ReactNode;
     className?: string;
 }

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

@@ -1,51 +1,52 @@
 import { jsx as r } from "react/jsx-runtime";
-import w from "react";
-import { clsx as b } from "../../../utils/clsx.js";
+import b from "react";
+import { clsx as v } 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 = {
+import '../../../assets/Flex.css';const F = "_root_pd612_1", z = "_centered_pd612_11", C = "_vertical_pd612_30", N = "_repell_pd612_36", E = "_wrap_pd612_39", T = "_stretch_pd612_51", j = "_horizontal_pd612_57", e = {
   root: F,
-  "full-width": "_full-width_1audv_5",
-  "full-height": "_full-height_1audv_8",
+  "full-width": "_full-width_pd612_5",
+  "full-height": "_full-height_pd612_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",
+  "centered-axis": "_centered-axis_pd612_15",
+  "centered-cross-axis": "_centered-cross-axis_pd612_18",
+  "baseline-axis": "_baseline-axis_pd612_21",
+  "baseline-cross-axis": "_baseline-cross-axis_pd612_24",
+  "reverse-order": "_reverse-order_pd612_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_pd612_42",
+  "align-to-end-axis": "_align-to-end-axis_pd612_45",
+  "space-between": "_space-between_pd612_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_pd612_63",
+  "gap-thin": "_gap-thin_pd612_66",
+  "gap-xsmall": "_gap-xsmall_pd612_69",
+  "gap-small": "_gap-small_pd612_72",
+  "gap-normal": "_gap-normal_pd612_75",
+  "gap-medium": "_gap-medium_pd612_78",
+  "gap-large": "_gap-large_pd612_81",
+  "gap-xlarge": "_gap-xlarge_pd612_84"
 };
 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,
-    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"]]: _,
+    stretch: p = !1,
+    wrap: d = !1,
+    alignToEnd: c = !1,
+    alignToEndAxis: g = !1,
+    spaceBetween: x = !1,
+    reverseOrder: f = !1,
+    gap: h = "normal",
+    children: m,
+    className: u
+  } = l, w = v(e.root, u, e[`gap-${h}`], {
+    [e["full-width"]]: n,
     [e["full-height"]]: o,
     [e.centered]: a === !0,
     [e["centered-axis"]]: a === "axis",
@@ -55,21 +56,21 @@ function A(l, s) {
     [e.vertical]: t,
     [e.horizontal]: !t,
     [e.repell]: i,
-    [e.stretch]: d,
-    [e.wrap]: c,
-    [e["align-to-end"]]: u,
-    [e["align-to-end-axis"]]: p,
-    [e["space-between"]]: v,
-    [e["reverse-order"]]: g
+    [e.stretch]: p,
+    [e.wrap]: d,
+    [e["align-to-end"]]: c,
+    [e["align-to-end-axis"]]: g,
+    [e["space-between"]]: x,
+    [e["reverse-order"]]: f
   });
-  return /* @__PURE__ */ r("div", { ref: s, className: m, children: f });
+  return /* @__PURE__ */ r("div", { ref: s, className: w, children: m });
 }
-const B = w.forwardRef(A), n = B;
-n.Restricted = function({
+const B = b.forwardRef(A), _ = B;
+_.Restricted = function({
   children: s
 }) {
-  return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(R, { children: s }) });
+  return /* @__PURE__ */ r(_, { children: /* @__PURE__ */ r(R, { children: s }) });
 };
 export {
-  n as Flex
+  _ as Flex
 };

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

@@ -6,7 +6,7 @@ export interface PadProps {
     /**
      * 'normal' by default
      */
-    size?: 'none' | 'small' | 'normal' | 'large' | 'xlarge';
+    size?: 'none' | 'small' | 'normal' | 'medium' | 'large' | 'xlarge';
     top?: boolean;
     left?: boolean;
     right?: boolean;

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

@@ -1,36 +1,37 @@
 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 { clsx as y } from "../../../utils/clsx.js";
+import '../../../assets/Pad.css';const c = "_root_1lf8m_1", o = {
+  root: c,
+  "offset-none": "_offset-none_1lf8m_1",
+  "offset-thin": "_offset-thin_1lf8m_4",
+  "offset-xsmall": "_offset-xsmall_1lf8m_7",
+  "offset-small": "_offset-small_1lf8m_10",
+  "offset-normal": "_offset-normal_1lf8m_13",
+  "offset-medium": "_offset-medium_1lf8m_16",
+  "offset-large": "_offset-large_1lf8m_19",
+  "offset-xlarge": "_offset-xlarge_1lf8m_22",
+  "only-top": "_only-top_1lf8m_25",
+  "only-left": "_only-left_1lf8m_28",
+  "only-right": "_only-right_1lf8m_31",
+  "only-bottom": "_only-bottom_1lf8m_34"
 };
-function h(_) {
+function p(_) {
   const {
-    top: f = !1,
-    left: l = !1,
-    right: s = !1,
-    bottom: e = !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
+    top: l = !1,
+    left: t = !1,
+    right: e = !1,
+    bottom: s = !1,
+    size: m = "normal",
+    children: n,
+    className: r
+  } = _, f = !(l || t || e || s), a = y(o.root, r, o[`offset-${m}`], {
+    [o["only-top"]]: f || l,
+    [o["only-left"]]: f || t,
+    [o["only-right"]]: f || e,
+    [o["only-bottom"]]: f || s
   });
-  return /* @__PURE__ */ i("div", { className: m, children: r });
+  return /* @__PURE__ */ i("div", { className: a, children: n });
 }
 export {
-  h as Pad
+  p as Pad
 };

package/dist/components/Modal/Modal.d.ts

@@ -1,3 +1,5 @@
+import { default as React } from 'react';
+
 export interface ModalProps {
     children: React.ReactNode;
     onClose?: () => void;

package/dist/components/Modal/Modal.js

@@ -1,8 +1,8 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { Button as _ } from "../Button/Button.js";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { Button as p } from "../Button/Button.js";
 import { Overlay as s } from "../Overlay/Overlay.js";
-import { I as f } from "../../Icons-CIXYyG0c.js";
-import { noop as n } from "../../utils/functional.js";
+import { Icons as _ } from "../../style-guide/Icons/Icons.js";
+import { noop as f } from "../../utils/functional.js";
 import { useKeyboardClose as h } from "../../utils/hooks.js";
 import '../../assets/Modal.css';const v = "_root_1v8ee_1", C = "_close_1v8ee_27", u = "_header_1v8ee_37", N = "_footer_1v8ee_47", r = {
   root: v,
@@ -11,32 +11,34 @@ import '../../assets/Modal.css';const v = "_root_1v8ee_1", C = "_close_1v8ee_27"
   header: u,
   footer: N
 };
-function l(a) {
+function c(a) {
   const {
-    onClose: e = n,
-    children: d,
-    backdropClassName: i,
-    contentClassName: m,
-    disableBackdropClose: p = !1
-  } = a, t = p ? n : e;
-  return h(t), /* @__PURE__ */ c(s, { children: [
-    /* @__PURE__ */ o(s.Backdrop, { onClick: t, className: i }),
-    /* @__PURE__ */ o(s.Content, { className: m, children: /* @__PURE__ */ c("div", { className: r.root, children: [
-      !!e && /* @__PURE__ */ o("div", { className: r.close, children: /* @__PURE__ */ o(_, { size: "large", theme: "transparent", icon: f.exit, onClick: e }) }),
-      d
+    onClose: o,
+    children: n,
+    backdropClassName: l,
+    contentClassName: d,
+    disableBackdropClose: i = !1
+  } = a;
+  h(o || f);
+  const m = i ? void 0 : o;
+  return /* @__PURE__ */ t(s, { children: [
+    /* @__PURE__ */ e(s.Backdrop, { onClick: m, className: l }),
+    /* @__PURE__ */ e(s.Content, { className: d, children: /* @__PURE__ */ t("div", { className: r.root, children: [
+      !!o && /* @__PURE__ */ e("div", { className: r.close, children: /* @__PURE__ */ e(p, { size: "large", theme: "transparent", icon: _.exit, onClick: o }) }),
+      n
     ] }) })
   ] });
 }
-l.Header = function({
-  children: e
+c.Header = function({
+  children: o
 }) {
-  return /* @__PURE__ */ o("div", { className: r.header, children: e });
+  return /* @__PURE__ */ e("div", { className: r.header, children: o });
 };
-l.Footer = function({
-  children: e
+c.Footer = function({
+  children: o
 }) {
-  return /* @__PURE__ */ o("div", { className: r.footer, children: e });
+  return /* @__PURE__ */ e("div", { className: r.footer, children: o });
 };
 export {
-  l as Modal
+  c as Modal
 };

package/dist/components/Overlay/Overlay.js

@@ -1,27 +1,27 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import a from "react";
-import { F as i } from "../../Combination-Dp_plIQU.js";
+import { F as s } from "../../Combination-Dp_plIQU.js";
 import { Interactive as m } from "../Interactive/Interactive.js";
-import { clsx as e } from "../../utils/clsx.js";
+import { clsx as r } from "../../utils/clsx.js";
 import { useOutlet as u } from "../../utils/hooks.js";
-import '../../assets/Overlay.css';const _ = "_root_15udb_1", f = "_backdrop_15udb_9", p = "_content_15udb_27", n = {
+import '../../assets/Overlay.css';const _ = "_root_15udb_1", f = "_backdrop_15udb_9", k = "_content_15udb_27", e = {
   root: _,
   backdrop: f,
   "backdrop-appearance": "_backdrop-appearance_15udb_1",
-  content: p
+  content: k
 }, b = "overlay-outlet";
-function l(c) {
+function l(n) {
   const {
     className: o,
-    children: t
-  } = c, s = e(n.root, o), d = u(b);
-  return /* @__PURE__ */ r(d, { children: /* @__PURE__ */ r("div", { className: s, children: t }) });
+    children: c
+  } = n, d = r(e.root, o), i = u(b);
+  return /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t("div", { className: d, children: c }) });
 }
-l.Backdrop = a.forwardRef(function(o, t) {
-  return /* @__PURE__ */ r(m, { ref: t, onClick: o.onClick, className: e(n.backdrop, o.className), children: o.children });
+l.Backdrop = a.forwardRef(function(o, c) {
+  return o.onClick ? /* @__PURE__ */ t(m, { ref: c, onClick: o.onClick, className: r(e.backdrop, o.className), children: o.children }) : /* @__PURE__ */ t("div", { ref: c, className: r(e.backdrop, o.className), children: o.children });
 });
-l.Content = a.forwardRef(function(o, t) {
-  return /* @__PURE__ */ r("div", { ref: t, className: e(n.content, o.className), children: /* @__PURE__ */ r(i, { children: o.children }) });
+l.Content = a.forwardRef(function(o, c) {
+  return /* @__PURE__ */ t("div", { ref: c, className: r(e.content, o.className), children: /* @__PURE__ */ t(s, { children: o.children }) });
 });
 export {
   b as OVERLAY_OUTLET_ID,

package/dist/components/Popover/Popover.js

@@ -1,36 +1,36 @@
-import { jsxs as f, jsx as l } from "react/jsx-runtime";
-import u from "react";
-import { Interactive as h } from "../Interactive/Interactive.js";
+import { jsxs as l, jsx as g } from "react/jsx-runtime";
+import j from "react";
+import { Interactive as d } from "../Interactive/Interactive.js";
 import { clsx as t } from "../../utils/clsx.js";
-import '../../assets/Popover.css';const x = "_root_14ed3_1", N = "_active_14ed3_4", M = "_popover_14ed3_4", g = "_appearance_14ed3_1", o = {
-  root: x,
-  active: N,
-  popover: M,
-  appearance: g,
-  "pos-top-right": "_pos-top-right_14ed3_37"
-}, R = u.forwardRef(function(r, s) {
+import '../../assets/Popover.css';const u = "_root_1vjg7_1", h = "_active_1vjg7_4", x = "_popover_1vjg7_4", N = "_appearance_1vjg7_1", o = {
+  root: u,
+  active: h,
+  popover: x,
+  appearance: N,
+  "pos-top-right": "_pos-top-right_1vjg7_30"
+}, R = j.forwardRef(function(r, s) {
   const {
     at: c,
     popover: p,
     children: a,
     active: n = !1,
-    onMouseEnter: i,
-    onMouseLeave: v,
+    onMouseEnter: v,
+    onMouseLeave: i,
     onMouseDown: _
   } = r, e = n, m = t(o.root, {
     [o.active]: e
-  }), d = t(o.popover, o[`pos-${c}`]);
-  return /* @__PURE__ */ f(
-    h,
+  }), f = t(o.popover, o[`pos-${c}`]);
+  return /* @__PURE__ */ l(
+    d,
     {
       ref: s,
       className: m,
-      onMouseEnter: i,
-      onMouseLeave: v,
+      onMouseEnter: v,
+      onMouseLeave: i,
       onMouseDown: _,
       children: [
         a(e),
-        e && /* @__PURE__ */ l("div", { className: d, children: p })
+        e && /* @__PURE__ */ g("div", { className: f, children: p })
       ]
     }
   );

package/dist/components/Select/Select.d.ts

@@ -12,5 +12,5 @@ export interface SelectProps<T = string> {
     disabled?: boolean;
     size?: 'normal' | 'small';
 }
-export declare const Select: React.ForwardRefExoticComponent<SelectProps<string> & React.RefAttributes<unknown>>;
+export declare function Select(props: SelectProps): import("react/jsx-runtime").JSX.Element;
 export declare const Select2: <T extends string | number>(props: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;