@cfx-dev/ui-components 5.0.32 → 5.0.34

package/dist/components/Carousel/Carousel.js

@@ -1,27 +1,27 @@
-import { jsxs as N, jsx as s } from "react/jsx-runtime";
+import { jsxs as h, jsx as s } from "react/jsx-runtime";
 import H, { useMemo as J, useState as K, useCallback as Q, useEffect as L } from "react";
 import { Dot as O } from "../Dot/Dot.js";
-import u from "../Flex/Flex.js";
-import { clsx as h } from "../../utils/clsx.js";
+import i from "../Flex/Flex.js";
+import { clsx as m } from "../../utils/clsx.js";
 import "../../utils/contexts/MediaQueryContext/MediaQueryContext.js";
 import "../../utils/contexts/MediaQueryContext/MediaQueryContextProvider.js";
 import U from "../../utils/contexts/MediaQueryContext/useMediaQuery.js";
 import { useCarousel as W } from "../../utils/hooks/useCarousel.js";
-import { s as i, C as X } from "../../CarouselControls-CJ3tupLr.js";
+import { s as n, C as X } from "../../CarouselControls-Be1j-jxr.js";
 import Y from "./CarouselItem.js";
 function R({
-  showDots: n = !1,
-  pageCount: a,
+  showDots: a = !1,
+  pageCount: f,
   currentPage: t,
   onPageChange: o,
-  controlsClassName: m,
-  controlsRootClassName: d
+  controlsClassName: d,
+  controlsRootClassName: p
 }) {
-  return a <= 1 ? null : /* @__PURE__ */ N(u, { gap: 2, centered: !0, className: h(i.controls, d), children: [
-    n && /* @__PURE__ */ s(u, { centered: !0, gap: 1, children: Array.from({ length: a }).map((p, c) => /* @__PURE__ */ s(
+  return f <= 1 ? null : /* @__PURE__ */ h(i, { gap: 2, centered: !0, className: m(n.controls, p), children: [
+    a && /* @__PURE__ */ s(i, { centered: !0, gap: 1, children: Array.from({ length: f }).map((y, c) => /* @__PURE__ */ s(
       O,
       {
-        className: i.dots,
+        className: n.dots,
         color: c === t ? "primary" : "secondary",
         opacity: c === t ? 1 : 0.2
       },
@@ -31,21 +31,21 @@ function R({
       X,
       {
         currentPage: t,
-        pageCount: a,
+        pageCount: f,
         onPageChange: o,
-        className: m
+        className: d
       }
     )
   ] });
 }
 function Z({
-  items: n,
-  ImageComponent: a,
+  items: a,
+  ImageComponent: f,
   visibleItems: t = 4,
   onItemClick: o,
-  showControlsBottom: m = !1,
-  showControlsTop: d = !1,
-  skipFirstItem: p = !1,
+  showControlsBottom: d = !1,
+  showControlsTop: p = !1,
+  skipFirstItem: y = !1,
   controlsClassName: c,
   controlsRootClassName: S,
   text: x,
@@ -54,22 +54,22 @@ function Z({
   className: $,
   rootClassName: q,
   headerClassName: w,
-  currentPage: y,
+  currentPage: N,
   onPageChange: l
 }) {
   const {
     isMobile: T,
     isTablet: j
-  } = U(), _ = J(() => typeof t == "number" ? t : T ? t.mobile : j ? t.tablet : t.desktop, [t, T, j]), z = p ? n.slice(1) : n, b = Math.ceil(z.length / _), {
+  } = U(), _ = J(() => typeof t == "number" ? t : T ? t.mobile : j ? t.tablet : t.desktop, [t, T, j]), z = y ? a.slice(1) : a, b = Math.ceil(z.length / _), {
     carouselRef: A,
     carouselApi: e
   } = W({
     slidesToScroll: _
-  }), [D, B] = K(0), E = y ?? D, F = Q(
+  }), [D, B] = K(0), E = N ?? D, F = Q(
     (r) => {
-      e == null || e.scrollTo(r), l == null || l(r), y == null && B(r);
+      e == null || e.scrollTo(r), l == null || l(r), N == null && B(r);
     },
-    [e, l, y]
+    [e, l, N]
   ), G = Q(
     (r) => {
       o == null || o(r);
@@ -80,16 +80,16 @@ function Z({
     if (!e)
       return;
     const r = () => {
-      const f = e.selectedScrollSnap();
-      B(f), l == null || l(f);
+      const u = e.selectedScrollSnap();
+      B(u), l == null || l(u);
     };
     return e.on("select", r), e.on("reInit", r), () => {
       e.off("select", r), e.off("reInit", r);
     };
-  }, [e, l]), /* @__PURE__ */ N("div", { className: q, children: [
-    x && /* @__PURE__ */ N(u, { spaceBetween: !0, alignItems: "center", className: w, children: [
+  }, [e, l]), /* @__PURE__ */ h("div", { className: m(n.root, q), children: [
+    x && /* @__PURE__ */ h(i, { spaceBetween: !0, alignItems: "center", className: w, children: [
       /* @__PURE__ */ s("span", { children: x }),
-      d && /* @__PURE__ */ s(
+      p && /* @__PURE__ */ s(
         R,
         {
           showDots: M,
@@ -101,16 +101,16 @@ function Z({
         }
       )
     ] }),
-    /* @__PURE__ */ s("div", { className: h(i.carousel, $), ref: A, children: /* @__PURE__ */ s(u, { className: h(i.carouselTrack, V), gap: 1, children: n.map((r, f) => f === 0 && p ? null : /* @__PURE__ */ s("div", { className: i.carouselItem, children: /* @__PURE__ */ s(
+    /* @__PURE__ */ s("div", { className: m(n.carousel, $), ref: A, children: /* @__PURE__ */ s(i, { className: m(n.carouselTrack, V), gap: 1, children: a.map((r, u) => u === 0 && y ? null : /* @__PURE__ */ s("div", { className: n.carouselItem, children: /* @__PURE__ */ s(
       Y,
       {
-        index: f,
+        index: u,
         item: r,
         onClick: G,
-        ImageComponent: a
+        ImageComponent: f
       }
     ) }, r.id)) }) }),
-    m && /* @__PURE__ */ s(u, { justifyContent: "flex-end", children: /* @__PURE__ */ s(
+    d && /* @__PURE__ */ s(i, { justifyContent: "flex-end", children: /* @__PURE__ */ s(
       R,
       {
         showDots: M,

package/dist/components/Carousel/CarouselControls.js

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "../Flex/Flex.js";
 import "../../utils/clsx.js";
 import "../IconButton/IconButton.js";
-import { C as a } from "../../CarouselControls-CJ3tupLr.js";
+import { C as a } from "../../CarouselControls-Be1j-jxr.js";
 export {
   a as default
 };

package/dist/components/Carousel/CarouselShowcase.js

@@ -2,7 +2,7 @@ import { jsxs as m, jsx as t } from "react/jsx-runtime";
 import { useState as d, useCallback as r } from "react";
 import l from "../Flex/Flex.js";
 import u from "./Carousel.js";
-import { s as c } from "../../CarouselControls-CJ3tupLr.js";
+import { s as c } from "../../CarouselControls-Be1j-jxr.js";
 const g = [
   {
     id: "1",

package/dist/components/Carousel/index.js

@@ -1,5 +1,5 @@
 import { default as a } from "./Carousel.js";
-import { C as s } from "../../CarouselControls-CJ3tupLr.js";
+import { C as s } from "../../CarouselControls-Be1j-jxr.js";
 export {
   a as Carousel,
   s as CarouselControls

package/dist/components/DropdownContent/DropdownContent.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { D as a } from "../../DropdownContent-DCqFWnzj.js";
+import { D as a } from "../../DropdownContent-Cxs3Wve5.js";
 import "react";
 import "../../utils/clsx.js";
 import "../../utils/ui/ui.js";

package/dist/components/DropdownContent/index.js

@@ -1,4 +1,4 @@
-import { D as r } from "../../DropdownContent-DCqFWnzj.js";
+import { D as r } from "../../DropdownContent-Cxs3Wve5.js";
 export {
   r as DropdownContent
 };

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,5 +1,5 @@
 import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { R as m, T as c, D as f } from "../../DropdownContent-DCqFWnzj.js";
+import { R as m, T as c, D as f } from "../../DropdownContent-Cxs3Wve5.js";
 import p from "react";
 function u(t) {
   const {

package/dist/components/DropdownSelect/DropdownSelect.js

@@ -1,5 +1,5 @@
 import { jsxs as f, jsx as r } from "react/jsx-runtime";
-import { R as D, T as W, D as C } from "../../DropdownContent-DCqFWnzj.js";
+import { R as D, T as W, D as C } from "../../DropdownContent-Cxs3Wve5.js";
 import a, { useRef as R, useState as v, useEffect as b } from "react";
 import N from "../Flex/Flex.js";
 import { clsx as T } from "../../utils/clsx.js";

package/dist/main.js

@@ -46,7 +46,7 @@ import { Avatar as Do } from "./components/Avatar/Avatar.js";
 import { BACKDROP_OUTLET_ID as Oo, default as ko } from "./components/BackdropPortal/BackdropPortal.js";
 import { Badge as bo } from "./components/Badge/Badge.js";
 import { default as Mo } from "./components/Carousel/Carousel.js";
-import { C as vo } from "./CarouselControls-CJ3tupLr.js";
+import { C as vo } from "./CarouselControls-Be1j-jxr.js";
 import { default as Uo } from "./components/ControlBox/ControlBox.js";
 import { default as wo } from "./components/Decorate/Decorate.js";
 import { Dot as Ko } from "./components/Dot/Dot.js";

package/dist/styles-scss/_ui.scss

@@ -443,6 +443,10 @@ $zindexMap: (
   'second': 2,
   'flyout': 1000,
   'max': 9000,
+  // Select's content should be above everything except Title
+  'select': 9099,
+  // Titles must be above everything
+  'title': 9100,
 );
 
 @function zindex($index) {

package/dist/utils/ui/ui.types.d.ts

@@ -51,7 +51,9 @@ export declare enum ZIndexEnum {
     zero = "zero",
     first = "first",
     second = "second",
-    max = "max"
+    max = "max",
+    select = "select",
+    title = "title"
 }
 export type ZIndexType = keyof typeof ZIndexEnum;
 export type ResponsiveValueType<T = string | number> = T | {

package/dist/utils/ui/ui.types.js

@@ -1,5 +1,5 @@
-var a = /* @__PURE__ */ ((l) => (l.accent = "accent", l.primary = "primary", l.secondary = "secondary", l.tertiary = "tertiary", l.green = "green", l.yellow = "yellow", l.red = "red", l.argentum = "argentum", l.aurum = "aurum", l.platinum = "platinum", l.bg = "bg", l["bg-light"] = "bg-light", l["bg-dark"] = "bg-dark", l["bg-dark-grey"] = "bg-dark-grey", l["bg-black"] = "bg-black", l))(a || {}), x = /* @__PURE__ */ ((l) => (l.xxxsmall = "xxxsmall", l.xxsmall = "xxsmall", l.xsmall = "xsmall", l.small = "small", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.xxlarge = "xxlarge", l.xxxlarge = "xxxlarge", l.xxxxlarge = "xxxxlarge", l))(x || {}), s = /* @__PURE__ */ ((l) => (l.xsmall = "xsmall", l.small = "small", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l))(s || {}), r = /* @__PURE__ */ ((l) => (l.none = "none", l.xsmall = "xsmall", l.small = "small", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.pill = "pill", l))(r || {}), g = /* @__PURE__ */ ((l) => (l.zero = "zero", l.first = "first", l.second = "second", l.max = "max", l))(g || {}), e = /* @__PURE__ */ ((l) => (l.none = "none", l.hairthin = "hairthin", l.thin = "thin", l.xxsmall = "xxsmall", l.xsmall = "xsmall", l.small = "small", l.normal = "normal", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.safezone = "safezone", l))(e || {}), p = /* @__PURE__ */ ((l) => (l.xxsmall = "xxsmall", l.xsmall = "xsmall", l.small = "small", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.xxlarge = "xxlarge", l.xxxlarge = "xxxlarge", l.xxxxlarge = "xxxxlarge", l.xxxxxlarge = "xxxxxlarge", l))(p || {}), t = /* @__PURE__ */ ((l) => (l.sp25 = "sp25", l.sp100 = "sp100", l.sp110 = "sp110", l.sp150 = "sp150", l.sp175 = "sp175", l.sp200 = "sp200", l.sp250 = "sp250", l.sp300 = "sp300", l.sp400 = "sp400", l.sp450 = "sp450", l.sp600 = "sp600", l.sp700 = "sp700", l.sp800 = "sp800", l.sp900 = "sp900", l.sp1000 = "sp1000", l.sp1200 = "sp1200", l.sp1600 = "sp1600", l.sp2400 = "sp2400", l))(t || {}), b = /* @__PURE__ */ ((l) => (l.initial = "initial", l.small = "small", l["small-medium"] = "small-medium", l.medium = "medium", l["medium-large"] = "medium-large", l.large = "large", l.xlarge = "xlarge", l))(b || {});
-const d = {
+var a = /* @__PURE__ */ ((l) => (l.accent = "accent", l.primary = "primary", l.secondary = "secondary", l.tertiary = "tertiary", l.green = "green", l.yellow = "yellow", l.red = "red", l.argentum = "argentum", l.aurum = "aurum", l.platinum = "platinum", l.bg = "bg", l["bg-light"] = "bg-light", l["bg-dark"] = "bg-dark", l["bg-dark-grey"] = "bg-dark-grey", l["bg-black"] = "bg-black", l))(a || {}), x = /* @__PURE__ */ ((l) => (l.xxxsmall = "xxxsmall", l.xxsmall = "xxsmall", l.xsmall = "xsmall", l.small = "small", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.xxlarge = "xxlarge", l.xxxlarge = "xxxlarge", l.xxxxlarge = "xxxxlarge", l))(x || {}), s = /* @__PURE__ */ ((l) => (l.xsmall = "xsmall", l.small = "small", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l))(s || {}), r = /* @__PURE__ */ ((l) => (l.none = "none", l.xsmall = "xsmall", l.small = "small", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.pill = "pill", l))(r || {}), e = /* @__PURE__ */ ((l) => (l.zero = "zero", l.first = "first", l.second = "second", l.max = "max", l.select = "select", l.title = "title", l))(e || {}), g = /* @__PURE__ */ ((l) => (l.none = "none", l.hairthin = "hairthin", l.thin = "thin", l.xxsmall = "xxsmall", l.xsmall = "xsmall", l.small = "small", l.normal = "normal", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.safezone = "safezone", l))(g || {}), t = /* @__PURE__ */ ((l) => (l.xxsmall = "xxsmall", l.xsmall = "xsmall", l.small = "small", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.xxlarge = "xxlarge", l.xxxlarge = "xxxlarge", l.xxxxlarge = "xxxxlarge", l.xxxxxlarge = "xxxxxlarge", l))(t || {}), p = /* @__PURE__ */ ((l) => (l.sp25 = "sp25", l.sp100 = "sp100", l.sp110 = "sp110", l.sp150 = "sp150", l.sp175 = "sp175", l.sp200 = "sp200", l.sp250 = "sp250", l.sp300 = "sp300", l.sp400 = "sp400", l.sp450 = "sp450", l.sp600 = "sp600", l.sp700 = "sp700", l.sp800 = "sp800", l.sp900 = "sp900", l.sp1000 = "sp1000", l.sp1200 = "sp1200", l.sp1600 = "sp1600", l.sp2400 = "sp2400", l))(p || {}), b = /* @__PURE__ */ ((l) => (l.initial = "initial", l.small = "small", l["small-medium"] = "small-medium", l.medium = "medium", l["medium-large"] = "medium-large", l.large = "large", l.xlarge = "xlarge", l))(b || {});
+const v = {
   initial: 0,
   small: 360,
   "small-medium": 640,
@@ -13,10 +13,10 @@ export {
   a as ColorEnum,
   s as IconSizeEnum,
   b as MediaQueryEnum,
-  d as MediaQueryValuesMap,
-  e as OffsetEnum,
-  p as SpacerEnum,
-  t as SpacingEnum,
+  v as MediaQueryValuesMap,
+  g as OffsetEnum,
+  t as SpacerEnum,
+  p as SpacingEnum,
   x as TextSizeEnum,
-  g as ZIndexEnum
+  e as ZIndexEnum
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfx-dev/ui-components",
-  "version": "5.0.32",
+  "version": "5.0.34",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",

package/dist/CarouselControls-CJ3tupLr.js

@@ -1,41 +0,0 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import _ from "./components/Flex/Flex.js";
-import { clsx as t } from "./utils/clsx.js";
-import c from "./components/IconButton/IconButton.js";
-const u = "cfxui__Carousel__carousel__5a3d0", i = "cfxui__Carousel__carouselItem__39b03", n = "cfxui__Carousel__carouselTrack__bda11", m = "cfxui__Carousel__controls__afa33", f = {
-  carousel: u,
-  carouselItem: i,
-  carouselTrack: n,
-  controls: m
-};
-function p({
-  currentPage: o,
-  pageCount: l,
-  onPageChange: s,
-  className: e
-}) {
-  return /* @__PURE__ */ a(_, { alignToEnd: !0, className: t(f.controls, e), children: [
-    /* @__PURE__ */ r(
-      c,
-      {
-        onClick: () => s(o - 1),
-        disabled: o <= 0,
-        name: "LeftChevron",
-        size: "medium"
-      }
-    ),
-    /* @__PURE__ */ r(
-      c,
-      {
-        onClick: () => s(o + 1),
-        disabled: o >= l - 1,
-        name: "RightChevron",
-        size: "medium"
-      }
-    )
-  ] });
-}
-export {
-  p as C,
-  f as s
-};