@cfx-dev/ui-components 4.0.2 → 4.2.0

package/dist/components/Tabular/Tabular.js

@@ -1,94 +1,123 @@
-import { jsx as n, jsxs as x } from "react/jsx-runtime";
-import b, { createElement as T } from "react";
-import { Dot as k } from "../Dot/Dot.js";
-import { clsx as d } from "../../utils/clsx.js";
-const v = "cfxui__Tabular__reset__b1dbc", C = "cfxui__Tabular__root__0ff05", p = "cfxui__Tabular__item__98cc3", I = "cfxui__Tabular__active__1ae95", R = "cfxui__Tabular__hasNotification__c372f", g = "cfxui__Tabular__content__3a95a", e = {
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import d, { createElement as N } from "react";
+import { Dot as p } from "../Dot/Dot.js";
+import { ui as C } from "../ui.js";
+import { clsx as n } from "../../utils/clsx.js";
+const v = "cfxui__Tabular__reset__b1dbc", k = "cfxui__Tabular__item__98cc3", I = "cfxui__Tabular__root__0ff05", R = "cfxui__Tabular__active__1ae95", y = "cfxui__Tabular__hasNotification__c372f", j = "cfxui__Tabular__content__3a95a", l = {
   reset: v,
-  root: C,
+  "tabular-size-initial-large": "cfxui__Tabular__tabular-size-initial-large__9451f",
+  item: k,
+  "tabular-size-initial-small": "cfxui__Tabular__tabular-size-initial-small__4dad8",
+  "tabular-size-small-large": "cfxui__Tabular__tabular-size-small-large__1390c",
+  "tabular-size-small-small": "cfxui__Tabular__tabular-size-small-small__cc6e3",
+  "tabular-size-small-medium-large": "cfxui__Tabular__tabular-size-small-medium-large__241e8",
+  "tabular-size-small-medium-small": "cfxui__Tabular__tabular-size-small-medium-small__b6c66",
+  "tabular-size-medium-large": "cfxui__Tabular__tabular-size-medium-large__2ff04",
+  "tabular-size-medium-small": "cfxui__Tabular__tabular-size-medium-small__b397b",
+  "tabular-size-medium-large-large": "cfxui__Tabular__tabular-size-medium-large-large__8b35a",
+  "tabular-size-medium-large-small": "cfxui__Tabular__tabular-size-medium-large-small__cec0c",
+  "tabular-size-large-large": "cfxui__Tabular__tabular-size-large-large__e3c30",
+  "tabular-size-large-small": "cfxui__Tabular__tabular-size-large-small__193f0",
+  "tabular-size-xlarge-large": "cfxui__Tabular__tabular-size-xlarge-large__e1e19",
+  "tabular-size-xlarge-small": "cfxui__Tabular__tabular-size-xlarge-small__9c3b6",
+  root: I,
   "theme-dark": "cfxui__Tabular__theme-dark__80b8c",
   "theme-light": "cfxui__Tabular__theme-light__c05b9",
-  item: p,
-  active: I,
-  hasNotification: R,
-  content: g
+  active: R,
+  hasNotification: y,
+  content: j
 };
-function _(m) {
+function o(b) {
   const {
-    items: i,
-    activeItem: o,
-    onActivate: t,
-    itemClassName: c,
-    ...s
-  } = m, l = b.useCallback((a) => {
-    t && t(a);
-  }, [t]);
-  return /* @__PURE__ */ n(_.Root, { ...s, children: i.map((a) => /* @__PURE__ */ T(
-    _.Item,
+    items: s,
+    activeItem: t,
+    onActivate: e,
+    itemClassName: i,
+    size: u = "medium",
+    ..._
+  } = b, c = d.useCallback((a) => {
+    e && e(a);
+  }, [e]), r = n(
+    l.root,
+    _.className
+  );
+  return /* @__PURE__ */ m(o.Root, { ..._, className: r, children: s.map((a) => /* @__PURE__ */ N(
+    o.Item,
     {
       ...a,
-      className: c,
+      className: i,
       key: a.id,
-      active: a.id === o,
-      onClick: l
+      active: a.id === t,
+      onClick: c,
+      size: u
     }
   )) });
 }
-_.Root = function(i) {
+o.Root = function(s) {
   const {
-    children: o,
-    className: t,
-    ariaLabel: c,
-    tabIndex: s,
-    theme: l = "dark",
-    role: a = "tablist"
-  } = i, r = d(e.root, e[`theme-${l}`], t);
-  return /* @__PURE__ */ n(
+    children: t,
+    className: e,
+    ariaLabel: i,
+    tabIndex: u,
+    theme: _ = "dark",
+    role: c = "tablist",
+    style: r
+  } = s, a = n(l.root, l[`theme-${_}`], e);
+  return /* @__PURE__ */ m(
     "div",
     {
-      role: a,
-      "aria-label": c,
-      tabIndex: s,
-      className: r,
-      children: o
+      role: c,
+      "aria-label": i,
+      tabIndex: u,
+      className: a,
+      style: r,
+      children: t
     }
   );
 };
-_.Item = function(i) {
+o.Item = function(s) {
   const {
-    id: o,
-    label: t,
-    onClick: c,
-    ariaLabel: s,
-    ariaControls: l,
-    className: a,
+    id: t,
+    label: e,
+    onClick: i,
+    ariaLabel: u,
+    ariaControls: _,
+    className: c,
     active: r = !1,
-    disabled: f = !1,
-    hasNotification: u = !1
-  } = i, h = b.useCallback(() => {
-    f || c(o);
-  }, [f, c, o]), N = d(e.reset, e.item, a, {
-    [e.active]: r,
-    [e.hasNotification]: u
-  });
-  return /* @__PURE__ */ n(
+    disabled: a = !1,
+    hasNotification: f = !1,
+    size: x
+  } = s, z = d.useCallback(() => {
+    a || i(t);
+  }, [a, i, t]), g = n(
+    l.reset,
+    l.item,
+    c,
+    C.getResponsiveFlatClassnames("tabular-size", x).map((T) => l[T]),
+    {
+      [l.active]: r,
+      [l.hasNotification]: f
+    }
+  );
+  return /* @__PURE__ */ m(
     "button",
     {
-      disabled: f,
+      disabled: a,
       type: "button",
       role: "tab",
-      className: N,
-      onClick: h,
-      "aria-label": s,
-      "aria-controls": l,
-      "data-text": t,
+      className: g,
+      onClick: z,
+      "aria-label": u,
+      "aria-controls": _,
+      "data-text": e,
       "aria-selected": r,
-      children: /* @__PURE__ */ x("span", { className: e.content, children: [
-        t,
-        u && /* @__PURE__ */ n(k, { color: "green", className: e.notification })
+      children: /* @__PURE__ */ h("span", { className: l.content, children: [
+        e,
+        f && /* @__PURE__ */ m(p, { color: "green", className: l.notification })
       ] })
     }
   );
 };
 export {
-  _ as Tabular
+  o as Tabular
 };

package/dist/components/Tabular/TabularShowcase.js

@@ -1,9 +1,10 @@
-import { jsxs as e, jsx as t } from "react/jsx-runtime";
-import a from "react";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import o from "react";
 import { Flex as i } from "../Layout/Flex/Flex.js";
-import { Text as m } from "../Text/Text.js";
-import { Tabular as r } from "./Tabular.js";
-const l = [
+import { Text as l } from "../Text/Text.js";
+import "../ui.js";
+import { Tabular as m } from "./Tabular.js";
+const c = [
   {
     id: "item1",
     label: "Item 1"
@@ -32,34 +33,59 @@ const l = [
     disabled: !0
   }
 ];
-function d() {
-  const [o, c] = a.useState("item1"), [n, s] = a.useState(void 0);
-  return /* @__PURE__ */ e(i, { gap: "large", vertical: !0, children: [
-    /* @__PURE__ */ e(i, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ t(m, { children: "With default activeItem" }),
-      /* @__PURE__ */ t(
-        r,
+function n() {
+  const [a, r] = o.useState("item1");
+  return /* @__PURE__ */ t(i, { gap: "large", vertical: !0, children: [
+    /* @__PURE__ */ t(i, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(l, { children: "Default" }),
+      /* @__PURE__ */ e(
+        m,
         {
-          items: l,
-          activeItem: o,
-          onActivate: c
+          items: c,
+          activeItem: a,
+          onActivate: r
         }
       )
     ] }),
-    /* @__PURE__ */ e(i, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ t(m, { children: "Without activeItem" }),
-      /* @__PURE__ */ t(
-        r,
+    /* @__PURE__ */ t(i, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(l, { children: "Size small" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        m,
         {
-          items: l,
-          activeItem: n,
-          onActivate: s
+          size: "small",
+          items: c,
+          activeItem: a,
+          onActivate: r
         }
-      )
+      ) })
+    ] }),
+    /* @__PURE__ */ t(i, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(l, { children: "Size medium" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        m,
+        {
+          size: "medium",
+          items: c,
+          activeItem: a,
+          onActivate: r
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ t(i, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(l, { children: "Size large" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        m,
+        {
+          size: "large",
+          items: c,
+          activeItem: a,
+          onActivate: r
+        }
+      ) })
     ] })
   ] });
 }
-const b = a.memo(d);
+const I = o.memo(n);
 export {
-  b as default
+  I as default
 };

package/dist/components/Text/Text.d.ts

@@ -1,6 +1,8 @@
 import { default as React } from 'react';
-import { TextOpacity, TextProps } from './Text.types';
+import { TextOpacity, TextProps, ResponsiveTextSize } from './Text.types';
 
+export declare const textSizeResponsiveValueFormatter: (val: ResponsiveTextSize) => string;
+export declare const lineHeightResponsiveValueFormatter: (val: ResponsiveTextSize) => string;
 export declare const TEXT_OPACITY_MAP: Record<TextOpacity, number | string>;
 export declare const getTextOpacity: (opacity?: TextOpacity, otherwise?: string | number) => string | number;
 export declare const DEFAULT_TEXT_COLOR = "primary";

package/dist/components/Text/Text.js

@@ -1,73 +1,82 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as f } from "react/jsx-runtime";
 import l from "react";
-import { ui as C } from "../ui.js";
-import { clsx as w } from "../../utils/clsx.js";
-import { getColor as A } from "../../utils/color.js";
-const O = "cfxui__Text__root__2fe11", R = "cfxui__Text__centered__4d7bd", S = "cfxui__Text__underlined__5860e", $ = "cfxui__Text__truncated__417f4", E = "cfxui__Text__typographic__d8155", N = "cfxui__Text__block__cb1b6", o = {
-  root: O,
-  centered: R,
-  underlined: S,
-  truncated: $,
-  typographic: E,
-  block: N
-}, z = {
+import { ui as t, TextSizeEnum as _ } from "../ui.js";
+import { clsx as v } from "../../utils/clsx.js";
+import { getColor as z } from "../../utils/color.js";
+const w = "cfxui__Text__root__2fe11", A = "cfxui__Text__centered__4d7bd", E = "cfxui__Text__underlined__5860e", O = "cfxui__Text__truncated__417f4", F = "cfxui__Text__typographic__d8155", H = "cfxui__Text__block__cb1b6", r = {
+  root: w,
+  centered: A,
+  underlined: E,
+  truncated: O,
+  typographic: F,
+  block: H
+}, N = (e) => e in _ ? t.fontSize(e) : typeof e == "number" ? t.q(e) : e, $ = (e) => e in _ ? t.lineHeight(e) : typeof e == "number" ? t.q(e) : e, B = {
   0: 0,
   25: "var(--text-opacity-25)",
   50: "var(--text-opacity-50)",
   75: "var(--text-opacity-75)",
   100: 1
-}, B = {
+}, P = {
   h1: "h1",
   h2: "h2",
   h3: "h3",
   h4: "h4",
   h5: "h5",
   h6: "h6"
-}, P = (r, t = 1) => {
-  const e = typeof r == "string" && z[r];
-  return typeof e == "string" || typeof e == "number" ? e : t;
-}, D = "primary", F = l.forwardRef(function(t, e) {
+}, q = (e, n = 1) => {
+  const o = typeof e == "string" && B[e];
+  return typeof o == "string" || typeof o == "number" ? o : n;
+}, D = "primary", I = l.forwardRef(function(n, o) {
   const {
-    family: n,
-    size: a = "normal",
-    weight: _ = "normal",
-    letterSpacing: f = "normal",
+    family: s,
+    size: i = "normal",
+    weight: p = "normal",
+    letterSpacing: u = "normal",
     as: c = "span",
-    centered: p = !1,
+    centered: m = !1,
     truncated: d = !1,
-    typographic: u = !1,
-    uppercase: m = !1,
-    userSelectable: x = !1,
-    underlined: h = !1,
-    children: y,
-    className: T
-  } = t, g = c === "div", b = w(o.root, T, {
-    [o.block]: g,
-    [o.centered]: p,
-    [o.truncated]: d,
-    [o.underlined]: h,
-    [o.typographic]: u,
-    [C.cls.userSelectableText]: x
-  }), v = A({
-    ...t,
-    color: t.color || D,
-    opacity: P(t.opacity)
-  }), k = typeof n == "string" ? n : B[c] || "primary", i = {
-    color: v,
+    typographic: h = !1,
+    uppercase: x = !1,
+    userSelectable: y = !1,
+    underlined: g = !1,
+    children: T,
+    className: b
+  } = n, R = c === "div", S = v(
+    r.root,
+    b,
+    t.getResponsiveClassnames("font-size", i),
+    t.getResponsiveClassnames("line-height", i),
+    {
+      [r.block]: R,
+      [r.centered]: m,
+      [r.truncated]: d,
+      [r.underlined]: g,
+      [r.typographic]: h,
+      [t.cls.userSelectableText]: y
+    }
+  ), C = z({
+    ...n,
+    color: n.color || D,
+    opacity: q(n.opacity)
+  }), k = typeof s == "string" ? s : P[c] || "primary", a = {
+    color: C,
     fontFamily: `var(--font-family-${k})`,
-    fontSize: `var(--font-size-${a})`,
-    lineHeight: `var(--line-height-${a})`,
-    letterSpacing: `var(--letter-spacing-${f})`,
-    fontWeight: `var(--font-weight-${_})`
+    lineHeight: `var(--line-height-${i})`,
+    letterSpacing: `var(--letter-spacing-${u})`,
+    fontWeight: `var(--font-weight-${p})`,
+    ...t.getResponsiveStyles("font-size", i, N),
+    ...t.getResponsiveStyles("line-height", i, $)
   };
-  return m && (i.textTransform = "uppercase"), /* @__PURE__ */ s(c, { ref: e, dir: "auto", className: b, style: i, children: y });
-}), G = l.forwardRef(function(t, e) {
-  return /* @__PURE__ */ s(F, { ref: e, ...t, as: "div" });
+  return x && (a.textTransform = "uppercase"), /* @__PURE__ */ f(c, { ref: o, dir: "auto", className: S, style: a, children: T });
+}), U = l.forwardRef(function(n, o) {
+  return /* @__PURE__ */ f(I, { ref: o, ...n, as: "div" });
 });
 export {
   D as DEFAULT_TEXT_COLOR,
-  z as TEXT_OPACITY_MAP,
-  F as Text,
-  G as TextBlock,
-  P as getTextOpacity
+  B as TEXT_OPACITY_MAP,
+  I as Text,
+  U as TextBlock,
+  q as getTextOpacity,
+  $ as lineHeightResponsiveValueFormatter,
+  N as textSizeResponsiveValueFormatter
 };

package/dist/components/Text/Text.types.d.ts

@@ -1,17 +1,8 @@
+import { ResponsiveValueType, TextSize as RawTextSize } from '../ui';
 import { GetColorProps } from '../../utils/color';
 
-export declare enum TextSizeEnum {
-    xxsmall = "xxsmall",
-    xsmall = "xsmall",
-    small = "small",
-    normal = "normal",
-    medium = "medium",
-    large = "large",
-    xlarge = "xlarge",
-    xxlarge = "xxlarge",
-    xxxlarge = "xxxlarge"
-}
-export type TextSize = keyof typeof TextSizeEnum;
+export type TextSize = RawTextSize;
+export type ResponsiveTextSize = TextSize | string | number;
 export type TextWeight = 'thin' | 'normal' | 'bold' | 'bolder';
 export type TextOpacity = '0' | '25' | '50' | '75' | '100';
 export type TextAs = 'span' | 'div' | 'p' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
@@ -30,7 +21,7 @@ interface TextPropsBase {
     userSelectable?: boolean;
     uppercase?: boolean;
     underlined?: boolean;
-    size?: TextSize;
+    size?: ResponsiveValueType<ResponsiveTextSize>;
     weight?: TextWeight;
     letterSpacing?: TextLetterSpacing;
     family?: 'primary' | 'secondary';

package/dist/components/Text/Text.types.js

@@ -1,4 +1 @@
-var a = /* @__PURE__ */ ((l) => (l.xxsmall = "xxsmall", l.xsmall = "xsmall", l.small = "small", l.normal = "normal", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.xxlarge = "xxlarge", l.xxxlarge = "xxxlarge", l))(a || {});
-export {
-  a as TextSizeEnum
-};
+

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

@@ -1,2 +1,3 @@
-export { Text, TextBlock, TEXT_OPACITY_MAP, DEFAULT_TEXT_COLOR, getTextOpacity, } from './Text';
-export type { TextSize, TextWeight, TextOpacity, TextAs, TextLetterSpacing, TextProps, TextColorProps, } from './Text.types';
+export { Text, TextBlock, TEXT_OPACITY_MAP, DEFAULT_TEXT_COLOR, getTextOpacity, textSizeResponsiveValueFormatter, } from './Text';
+export { TextSizeEnum } from '../ui';
+export type { TextSize, TextWeight, TextOpacity, TextAs, TextLetterSpacing, TextProps, TextColorProps, ResponsiveTextSize, } from './Text.types';

package/dist/components/Text/index.js

@@ -1,8 +1,11 @@
-import { DEFAULT_TEXT_COLOR as e, TEXT_OPACITY_MAP as x, Text as O, TextBlock as _, getTextOpacity as o } from "./Text.js";
+import { DEFAULT_TEXT_COLOR as T, TEXT_OPACITY_MAP as o, Text as x, TextBlock as r, getTextOpacity as i, textSizeResponsiveValueFormatter as m } from "./Text.js";
+import { TextSizeEnum as E } from "../ui.js";
 export {
-  e as DEFAULT_TEXT_COLOR,
-  x as TEXT_OPACITY_MAP,
-  O as Text,
-  _ as TextBlock,
-  o as getTextOpacity
+  T as DEFAULT_TEXT_COLOR,
+  o as TEXT_OPACITY_MAP,
+  x as Text,
+  r as TextBlock,
+  E as TextSizeEnum,
+  i as getTextOpacity,
+  m as textSizeResponsiveValueFormatter
 };

package/dist/components/Title/TitleShowcase.js

@@ -2,8 +2,9 @@ import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import i from "react";
 import { Flex as r } from "../Layout/Flex/Flex.js";
 import { Text as o } from "../Text/Text.js";
+import "../ui.js";
 import { Title as l } from "./Title.js";
-function a() {
+function m() {
   return /* @__PURE__ */ e(r, { gap: "large", vertical: !0, children: /* @__PURE__ */ t(r, { gap: "normal", vertical: !0, children: [
     /* @__PURE__ */ e(o, { children: "Hover case" }),
     /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
@@ -16,7 +17,7 @@ function a() {
     ) })
   ] }) });
 }
-const d = i.memo(a);
+const f = i.memo(m);
 export {
-  d as default
+  f as default
 };

package/dist/components/ToggleGroup/ToggleGroup.d.ts

@@ -13,5 +13,6 @@ export interface ToggleGroupProps {
     className?: string;
     disabled?: boolean;
     multiline?: boolean;
+    fullWidth?: boolean;
 }
 export declare const ToggleGroup: React.NamedExoticComponent<ToggleGroupProps>;

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -1,46 +1,48 @@
-import { jsxs as a, jsx as u } from "react/jsx-runtime";
-import l from "react";
+import { jsxs as d, jsx as p } from "react/jsx-runtime";
+import n from "react";
 import { Interactive as C } from "../Interactive/Interactive.js";
-import { clsx as d } from "../../utils/clsx.js";
-const M = "cfxui__ToggleGroup__root__fb460", D = "cfxui__ToggleGroup__disabled__75462", j = "cfxui__ToggleGroup__descripted__8e168", k = "cfxui__ToggleGroup__multiline__6b784", E = "cfxui__ToggleGroup__options__7bc0c", L = "cfxui__ToggleGroup__option__8436c", O = "cfxui__ToggleGroup__description__9429c", S = "cfxui__ToggleGroup__active__84da0", o = {
+import { clsx as _ } from "../../utils/clsx.js";
+const M = "cfxui__ToggleGroup__root__fb460", D = "cfxui__ToggleGroup__disabled__75462", j = "cfxui__ToggleGroup__descripted__8e168", k = "cfxui__ToggleGroup__multiline__6b784", E = "cfxui__ToggleGroup__options__7bc0c", L = "cfxui__ToggleGroup__option__8436c", O = "cfxui__ToggleGroup__fullWidth__0c589", S = "cfxui__ToggleGroup__description__9429c", w = "cfxui__ToggleGroup__active__84da0", o = {
   root: M,
   disabled: D,
   descripted: j,
   multiline: k,
   options: E,
   option: L,
-  description: O,
-  active: S
-}, p = (_, s) => {
+  fullWidth: O,
+  description: S,
+  active: w
+}, f = (r, s) => {
   var e;
-  return ((e = s.find((i) => i.value === _)) == null ? void 0 : e.description) || "";
-}, y = l.memo(function(s) {
+  return ((e = s.find((i) => i.value === r)) == null ? void 0 : e.description) || "";
+}, z = n.memo(function(s) {
   const {
     value: e,
     options: i,
-    onChange: r,
+    onChange: u,
     className: m = "",
     disabled: g = !1,
-    multiline: f = !1
-  } = s, [c, n] = l.useState(p(e, i)), v = l.useMemo(
-    () => i.map((t, b) => {
-      const h = () => {
-        r(t.value);
-      }, G = () => {
-        n(t.description || "");
-      }, T = () => {
-        n(p(e, i));
-      }, N = d(o.option, {
+    multiline: h = !1,
+    fullWidth: a = !1
+  } = s, [c, l] = n.useState(f(e, i)), v = n.useMemo(
+    () => i.map((t, G) => {
+      const T = () => {
+        u(t.value);
+      }, b = () => {
+        l(t.description || "");
+      }, N = () => {
+        l(f(e, i));
+      }, W = _(o.option, {
         [o.active]: t.value === e
       });
-      return /* @__PURE__ */ a(
+      return /* @__PURE__ */ d(
         C,
         {
-          className: N,
-          tabIndex: b,
-          onClick: h,
-          onMouseEnter: G,
-          onMouseLeave: T,
+          className: W,
+          tabIndex: G,
+          onClick: T,
+          onMouseEnter: b,
+          onMouseLeave: N,
           children: [
             t.icon || null,
             t.label
@@ -49,17 +51,18 @@ const M = "cfxui__ToggleGroup__root__fb460", D = "cfxui__ToggleGroup__disabled__
         t.value
       );
     }),
-    [e, i, r, n]
-  ), x = d(o.root, m, {
+    [e, i, u, l]
+  ), x = _(o.root, m, {
     [o.disabled]: g,
     [o.descripted]: c,
-    [o.multiline]: f
+    [o.multiline]: h,
+    [o.fullWidth]: a
   });
-  return /* @__PURE__ */ a("div", { className: x, children: [
-    /* @__PURE__ */ u("div", { className: o.options, children: v }),
-    c && /* @__PURE__ */ u("div", { className: o.description, children: c })
+  return /* @__PURE__ */ d("div", { className: x, children: [
+    /* @__PURE__ */ p("div", { className: _(o.options, { [o.fullWidth]: a }), children: v }),
+    c && /* @__PURE__ */ p("div", { className: o.description, children: c })
   ] });
 });
 export {
-  y as ToggleGroup
+  z as ToggleGroup
 };

package/dist/components/ToggleGroup/ToggleGroupShowcase.d.ts

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