@eightshift/ui-components 0.0.1 → 0.0.3

package/dist/components/option-select/option-select.js

@@ -0,0 +1,231 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { icons } from "../../icons/icons.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { a as ButtonGroup } from "../../button-idVI4jmd.js";
+import { Menu, MenuItem } from "../menu/menu.js";
+import { RadioButtonGroup, RadioButton } from "../radio/radio.js";
+import { RichLabel } from "../rich-label/rich-label.js";
+import { ToggleButton } from "../toggle-button/toggle-button.js";
+/**
+ * A component that allows the user to select an option from a list of options.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {JSX.Element} [props.icon] - Icon to display in the label.
+ * @param {string} props.label - Label to display.
+ * @param {string} [props.subtitle] - Subtitle to display below the label.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
+ * @param {string} [props.help] - Help text to show below the component.
+ * @param {boolean} [props.inline] - If `true`, the component is displayed inline - icon/label/subtitle are on the left, the passed content is on the right. **Note:** not compatible with `actions`.
+ * @param {string} props.value - The currently selected value.
+ * @param {Function} props.onChange - Function to run when the selected value changes.
+ * @param {{label: string, value: any, tooltip: string|JSX.Element, icon: JSX.Element|string, ariaLabel: string, subtitle:string|JSX.Element }[]} props.options - The list of options to choose from.
+ * @param {string} [props.disabled] - If `true`, the option select component is disabled.
+ * @param {boolean} [props.vertical] - If `true`, the options are displayed vertically. Not applicable to the `menu` type.
+ * @param {OptionSelectType} [props.type='toggleButton'] - The type of the option select component.
+ * @param {string} [props.className] - Classes to pass to the main element wrapper.
+ * @param {string} [props.itemClassName] - Classes to pass to each item.
+ * @param {Object} [props.wrapperProps] - Props to pass to the wrapper.
+ * @param {Object} [props.itemProps] - Props to pass to each item.
+ * @param {boolean} [props.noTriggerLabel] - Whether the trigger label should be hidden. Applies only to the `menu` type.
+ * @param {boolean} [props.noTriggerIcon] - Whether the trigger icon should be hidden. Applies only to the `menu` type.
+ * @param {boolean} [props.noItemLabel] - Whether the option label should be hidden.
+ * @param {boolean} [props.noItemIcon] - Whether the option icon should be hidden.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The OptionSelect component.
+ *
+ * @typedef {'toggleButtons' | 'radios' | 'radiosSegmented' | 'menu'} OptionSelectType
+ *
+ * @example
+ * <OptionSelect
+ * 	label='My component'
+ * 	icon={icons.myIcon}
+ * 	value={value}
+ * 	onChange={setValue}
+ * 	options={[
+ * 		{ label: 'Option 1', value: 'option1' },
+ * 		{ label: 'Option 2', value: 'option2' },
+ * 	]}
+ * />
+ *
+ * @preserve
+ */
+const OptionSelect = (props) => {
+  var _a;
+  const {
+    icon,
+    label,
+    subtitle,
+    actions,
+    help,
+    inline,
+    value,
+    onChange,
+    options,
+    disabled,
+    vertical,
+    type = "toggleButtons",
+    className,
+    itemClassName,
+    wrapperProps,
+    itemProps,
+    noTriggerLabel,
+    noTriggerIcon,
+    noItemLabel,
+    noItemIcon,
+    children,
+    hidden,
+    ...rest
+  } = props;
+  if (hidden) {
+    return null;
+  }
+  const currentItem = options == null ? void 0 : options.find(({ value: optionValue }) => optionValue === value);
+  return /* @__PURE__ */ jsxs(
+    BaseControl,
+    {
+      icon,
+      label,
+      subtitle,
+      actions,
+      help,
+      inline,
+      className,
+      ...rest,
+      children: [
+        type === "toggleButtons" && /* @__PURE__ */ jsx(
+          ButtonGroup,
+          {
+            vertical,
+            "aria-label": !label && (props == null ? void 0 : props["aria-label"]),
+            ...wrapperProps,
+            children: options.map(
+              ({
+                label: optionLabel,
+                value: optionValue,
+                icon: optionIcon,
+                tooltip: optionTooltip,
+                ariaLabel: optionAriaLabel,
+                subtitle: optionSubtitle
+              }) => {
+                var _a2;
+                return /* @__PURE__ */ jsxs(
+                  ToggleButton,
+                  {
+                    selected: optionValue === value,
+                    onChange: () => onChange(optionValue),
+                    disabled,
+                    className: itemClassName,
+                    icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
+                    tooltip: optionTooltip ?? optionAriaLabel ?? (noItemLabel && optionLabel),
+                    "aria-label": optionAriaLabel ?? optionLabel ?? optionTooltip,
+                    ...itemProps,
+                    children: [
+                      !noItemLabel && !optionSubtitle && optionLabel,
+                      !noItemLabel && optionSubtitle && /* @__PURE__ */ jsx(
+                        RichLabel,
+                        {
+                          label: optionLabel,
+                          subtitle: optionSubtitle
+                        }
+                      )
+                    ]
+                  },
+                  optionValue
+                );
+              }
+            )
+          }
+        ),
+        (type === "radios" || type === "radiosSegmented") && /* @__PURE__ */ jsx(
+          RadioButtonGroup,
+          {
+            orientation: vertical ? "vertical" : "horizontal",
+            onChange: (v) => onChange(v),
+            design: type === "radios" ? "default" : "segmented",
+            "aria-label": !label && (props == null ? void 0 : props["aria-label"]),
+            value,
+            ...wrapperProps,
+            children: options.map(
+              ({
+                label: optionLabel,
+                value: optionValue,
+                icon: optionIcon,
+                ariaLabel: optionAriaLabel,
+                subtitle: optionSubtitle
+              }) => {
+                var _a2;
+                return /* @__PURE__ */ jsx(
+                  RadioButton,
+                  {
+                    value: optionValue,
+                    disabled,
+                    className: itemClassName,
+                    subtitle: !noItemLabel && optionSubtitle,
+                    icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
+                    "aria-label": optionAriaLabel ?? optionLabel,
+                    label: !noItemLabel && optionLabel,
+                    ...itemProps
+                  },
+                  optionValue
+                );
+              }
+            )
+          }
+        ),
+        type === "menu" && /* @__PURE__ */ jsxs(
+          Menu,
+          {
+            triggerLabel: !noTriggerLabel && (currentItem == null ? void 0 : currentItem.label),
+            triggerIcon: !noTriggerIcon && (typeof (currentItem == null ? void 0 : currentItem.icon) === "string" ? (_a = icons) == null ? void 0 : _a[currentItem == null ? void 0 : currentItem.icon] : currentItem == null ? void 0 : currentItem.icon),
+            tooltip: noTriggerLabel && ((currentItem == null ? void 0 : currentItem.tooltip) ?? (currentItem == null ? void 0 : currentItem.label)),
+            "aria-label": !label && (props == null ? void 0 : props["aria-label"]),
+            keepOpen: true,
+            ...wrapperProps,
+            children: [
+              options.map(
+                ({
+                  label: optionLabel,
+                  value: optionValue,
+                  icon: optionIcon,
+                  ariaLabel: optionAriaLabel,
+                  subtitle: optionSubtitle
+                }) => {
+                  var _a2;
+                  return /* @__PURE__ */ jsxs(
+                    MenuItem,
+                    {
+                      selected: value === optionValue,
+                      disabled,
+                      className: itemClassName,
+                      icon: !noItemIcon && (typeof optionIcon === "string" ? (_a2 = icons) == null ? void 0 : _a2[optionIcon] : optionIcon),
+                      "aria-label": optionAriaLabel ?? optionLabel,
+                      onClick: () => onChange(optionValue),
+                      ...itemProps,
+                      children: [
+                        !noItemLabel && !optionSubtitle && optionLabel,
+                        !noItemLabel && optionSubtitle && /* @__PURE__ */ jsx(
+                          RichLabel,
+                          {
+                            label: optionLabel,
+                            subtitle: optionSubtitle
+                          }
+                        )
+                      ]
+                    },
+                    optionValue
+                  );
+                }
+              ),
+              children
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  OptionSelect
+};

package/dist/components/placeholders/file-placeholder.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
+import { icons } from "../../icons/icons.js";
+import { RichLabel } from "../rich-label/rich-label.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
+/**
+ * A simple file placeholder.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {JSX.Element} [props.icon] - File type icon override.
+ * @param {string} [props.fileName] - Current file name.
+ * @param {string} [props.className] - Classes to pass to the component.
+ *
+ * @returns {JSX.Element} The FilePlaceholder component.
+ *
+ * @example
+ * <FilePlaceholder />
+ *
+ * @example
+ * <FilePlaceholder fileName='demo.json' />
+ *
+ * @preserve
+ */
+const FilePlaceholder = (props) => {
+  const { icon, fileName, className, children } = props;
+  const commonClassName = clsx(
+    "es-uic-w-fit es-uic-rounded-lg es-uic-border es-uic-border-gray-300 es-uic-bg-gray-50 es-uic-p-2 es-uic-pr-3 es-uic-text-xs es-uic-text-gray-300 es-uic-shadow",
+    fileName && "es-uic-font-mono",
+    className
+  );
+  if (!fileName) {
+    return /* @__PURE__ */ jsx(
+      RichLabel,
+      {
+        icon: icon ?? icons.file,
+        label: children ?? __("No file selected", "eightshift-ui-components"),
+        className: commonClassName
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    RichLabel,
+    {
+      icon: icon ?? icons.file,
+      label: fileName ?? __("No file selected", "eightshift-ui-components"),
+      className: commonClassName
+    }
+  );
+};
+export {
+  FilePlaceholder
+};

package/dist/components/placeholders/image-placeholder.js

@@ -0,0 +1,88 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { icons } from "../../icons/icons.js";
+/**
+ * A simple image placeholder, with an empty state.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.url] - The image URL.
+ * @param {string} [props.alt] - The image alt text.
+ * @param {ImagePlaceholderStyle} [props.style='default'] - Style of the image placeholder.
+ * @param {ImagePlaceholderSize} [props.size='default'] - Size of the image placeholder.
+ * @param {boolean} [props.noImage] - If `true`, the image within the placeholder will not be displayed, even if `url` is provided.
+ * @param {string} [props.className] - Classes to pass to the component.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ * @param {ImagePlaceholderImageMode} [props.imageMode='cover'] - Determines inner image display mode.
+ *
+ * @returns {JSX.Element} The ImagePlaceholder component.
+ *
+ * @typedef {'default' | 'simple'} ImagePlaceholderStyle
+ * @typedef {'cover'|'contain' | 'fill'} ImagePlaceholderImageMode
+ * @typedef @typedef {'auto' | 'default' | 'large' | 'fullWidth' | 'fullHeight' | 'full' | 'video'} ImagePlaceholderSize
+ *
+ * @example
+ * <ImagePlaceholder url="https://example.com/image.jpg" alt="Image alt text" />
+ *
+ * @preserve
+ */
+const ImagePlaceholder = (props) => {
+  const { url, alt, style = "default", size = "default", noImage, className, hidden, imageMode = "cover" } = props;
+  if (hidden) {
+    return null;
+  }
+  const styleClassName = {
+    default: "es-uic-rounded-lg es-uic-border es-uic-border-gray-300 es-uic-bg-gray-50 es-uic-text-gray-300 es-uic-shadow",
+    simple: "es-uic-rounded-lg es-uic-border es-uic-border-gray-300 es-uic-border-dashed es-uic-text-gray-300"
+  };
+  const sizeClassName = {
+    auto: "",
+    default: "es-uic-size-20",
+    large: "es-uic-size-40",
+    fullWidth: "es-uic-w-full",
+    fullHeight: "es-uic-h-full",
+    full: "es-uic-size-full",
+    video: "es-uic-w-full es-uic-aspect-video"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "es-uic-grid es-uic-grid-cols-1 es-uic-grid-rows-1 es-uic-overflow-hidden",
+        "[&>*]:es-uic-col-start-1 [&>*]:es-uic-col-end-1 [&>*]:es-uic-row-start-1 [&>*]:es-uic-row-end-1",
+        styleClassName[style] ?? (styleClassName == null ? void 0 : styleClassName.default),
+        sizeClassName[size] ?? (sizeClassName == null ? void 0 : sizeClassName.default),
+        className
+      ),
+      children: [
+        !noImage && /* @__PURE__ */ jsx(
+          "img",
+          {
+            className: clsx(
+              "es-uic-size-full es-uic-select-none es-uic-fill-mode-forwards",
+              imageMode === "cover" && "es-uic-object-cover",
+              imageMode === "contain" && "es-uic-object-contain",
+              imageMode === "fill" && "es-uic-object-fill",
+              (url == null ? void 0 : url.length) > 0 ? "es-uic-animate-in es-uic-fade-in-0 es-uic-zoom-in-95" : "es-uic-animate-out es-uic-fade-out-0 es-uic-zoom-out-95"
+            ),
+            src: url,
+            alt
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx(
+              "es-uic-place-self-center es-uic-justify-self-center es-uic-transition es-uic-fill-mode-forwards [&>svg]:es-uic-size-7",
+              !url ? "es-uic-animate-in es-uic-fade-in-0 es-uic-zoom-in-95" : "es-uic-animate-out es-uic-fade-out-0 es-uic-zoom-out-95"
+            ),
+            children: icons.image
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ImagePlaceholder
+};

package/dist/components/placeholders/media-placeholder.js

@@ -0,0 +1,62 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { icons } from "../../icons/icons.js";
+/**
+ * A simple media placeholder, with an empty state.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {MediaPlaceholderStyle} [props.style='default'] - Style of the image placeholder.
+ * @param {MediaPlaceholderSize} [props.size='default'] - Size of the image placeholder.
+ * @param {string} [props.className] - Classes to pass to the component.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ * @param {JSX.Element} [props.icon] - Icon to show within the placeholder.
+ * @param {string|JSX.Element} [props.helpText] - Text to show below the icon.
+ *
+ * @returns {JSX.Element} The MediaPlaceholder component.
+ *
+ * @typedef {'default'|'simple'} MediaPlaceholderStyle
+ * @typedef {'auto' | 'default' | 'large' | 'fullWidth' | 'fullHeight' | 'full' | 'video'} MediaPlaceholderSize
+ *
+ * @example
+ * <MediaPlaceholder url="https://example.com/image.jpg" alt="Image alt text" />
+ *
+ * @preserve
+ */
+const MediaPlaceholder = (props) => {
+  const { style = "default", size = "default", className, icon, helpText, hidden } = props;
+  if (hidden) {
+    return null;
+  }
+  const styleClassName = {
+    default: "es-uic-rounded-lg es-uic-border es-uic-border-gray-300 es-uic-bg-gray-50 es-uic-text-gray-300 es-uic-shadow",
+    simple: "es-uic-rounded-lg es-uic-border es-uic-border-gray-300 es-uic-border-dashed es-uic-text-gray-300"
+  };
+  const sizeClassName = {
+    auto: "",
+    default: "es-uic-size-20",
+    large: "es-uic-size-40",
+    fullWidth: "es-uic-w-full",
+    fullHeight: "es-uic-h-full",
+    full: "es-uic-size-full",
+    video: "es-uic-w-full es-uic-aspect-video"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "es-uic-flex es-uic-flex-col es-uic-items-center es-uic-justify-center es-uic-gap-2 es-uic-overflow-hidden",
+        styleClassName[style] ?? (styleClassName == null ? void 0 : styleClassName.default),
+        sizeClassName[size] ?? (sizeClassName == null ? void 0 : sizeClassName.default),
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "[&>svg]:es-uic-size-7", children: icon ?? icons.image }),
+        helpText && /* @__PURE__ */ jsx("div", { className: "es-uic-text-sm es-uic-text-gray-400", children: helpText })
+      ]
+    }
+  );
+};
+export {
+  MediaPlaceholder
+};

package/dist/components/popover/popover.js

@@ -1,8 +1,8 @@
 import "react/jsx-runtime";
-import { P, T } from "../../popover-Dx3vKXUX.js";
-import "../../utilities/classnames.js";
-import "../../default-i18n-BhE-OUmt.js";
-import "../../button-BkkdyHfJ.js";
+import { P, T } from "../../popover-o2Q28Ljn.js";
+import "../../lite-pbIeT7tm.js";
+import "../../default-i18n-Bk1GxDHz.js";
+import "../../button-idVI4jmd.js";
 export {
   P as Popover,
   T as TriggeredPopover

package/dist/components/radio/radio.js

@@ -1,21 +1,21 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BPzS-sR7.js";
-import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$export$f680877a34711e37, a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, c as $64fa3d84918910a7$export$4d86445c2cf5e3, j as $64fa3d84918910a7$export$2881499e37b75b9a, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, i as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-BsiH7-5Y.js";
-import { a as $2baaea4c71418dea$export$294aa081a6c6f55d, $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-wtMA4667.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-9x5iLJ-Y.js";
+import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$export$f680877a34711e37, a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, c as $64fa3d84918910a7$export$4d86445c2cf5e3, j as $64fa3d84918910a7$export$2881499e37b75b9a, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, i as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-DIBzm1e4.js";
+import { a as $2baaea4c71418dea$export$294aa081a6c6f55d, $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-ILxgMZy5.js";
 import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-BM136LvS.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-Cyxp9ewv.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-DG2RfOUr.js";
 import React__default, { useMemo, useState, forwardRef, createContext, cloneElement } from "react";
-import { a as $e93e671b31057976$export$b8473d3665f3a75a, $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10 } from "../../useFormValidationState-BAPPNXic.js";
-import { d as $9ab94262bd0047c7$export$420e68273165f4ec, e as $458b0a5536c1a7cf$export$40bfa8c7b0832715, $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-C3K8zAKj.js";
-import { a as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "../../FocusScope-1u9yyfIN.js";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-jMy6xdVq.js";
-import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-Buc9YJcv.js";
-import { $ as $e6afbd83fe6ebbd2$export$4c014de7c8940b4c } from "../../useFocusable-5q1Gek1J.js";
-import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-BQgVor4T.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Cc-4eouh.js";
-import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-BYRI1Lfo.js";
-import { classnames } from "../../utilities/classnames.js";
+import { a as $e93e671b31057976$export$b8473d3665f3a75a, $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10 } from "../../useFormValidationState-CdYmOaXI.js";
+import { d as $9ab94262bd0047c7$export$420e68273165f4ec, e as $458b0a5536c1a7cf$export$40bfa8c7b0832715, $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-B0hyd-S4.js";
+import { a as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "../../FocusScope-B9b0VMib.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BAcFg5GO.js";
+import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-aHn6-wRk.js";
+import { $ as $e6afbd83fe6ebbd2$export$4c014de7c8940b4c } from "../../useFocusable-CHfpEdlE.js";
+import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-B42RawCH.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CRx_hYC4.js";
+import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-BPJVSUyp.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { BaseControl } from "../base-control/base-control.js";
@@ -357,6 +357,7 @@ const $b6c3ddc6086f204d$export$d7b12c4107be0d61 = /* @__PURE__ */ forwardRef($b6
  * @param {string} [props.className] - Additional classes to add to the checkbox container.
  * @param {string} [props.labelClassName] - Additional classes to add to the label container.
  * @param {boolean} [props.alignEnd] - Whether the label should be aligned to the end.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The RadioButton component.
  *
@@ -375,16 +376,20 @@ const RadioButton = (props) => {
     design = "default",
     alignEnd,
     children,
-    ...other
+    hidden,
+    ...rest
   } = props;
-  const styles = {
-    segmented: classnames(
-      "es-uic-py-1 es-uic-px-1.5 es-uic-border hover:es-uic-bg-gray-50 es-uic-transition",
+  if (hidden) {
+    return null;
+  }
+  const styleClassName = {
+    segmented: clsx(
+      "es-uic-py-1 es-uic-px-1.5 es-uic-border hover:es-uic-bg-gray-50 es-uic-transition es-uic-min-h-10",
       "first:es-uic-rounded-t-lg last:es-uic-rounded-b-lg",
       "focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50 focus-visible:es-uic-z-10"
     ),
-    segmentedHorizontal: classnames(
-      "es-uic-py-1 es-uic-px-1.5 es-uic-border hover:es-uic-bg-gray-50 es-uic-transition es-uic-grow",
+    segmentedHorizontal: clsx(
+      "es-uic-py-1 es-uic-px-1.5 es-uic-border hover:es-uic-bg-gray-50 es-uic-transition es-uic-grow es-uic-min-h-10",
       "first:es-uic-rounded-l-lg last:es-uic-rounded-r-lg",
       "focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50 focus-visible:es-uic-z-10"
     )
@@ -393,14 +398,14 @@ const RadioButton = (props) => {
     $b6c3ddc6086f204d$export$d7b12c4107be0d61,
     {
       isDisabled: disabled,
-      className: classnames(
+      className: clsx(
         "es-uic-flex es-uic-items-center es-uic-gap-1.5 es-uic-text-sm",
-        styles[design],
+        styleClassName[design],
         className
       ),
-      ...other,
-      children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-        (icon || alignEnd) && (label || subtitle) && /* @__PURE__ */ jsx(
+      ...rest,
+      children: ({ isSelected, isFocusVisible }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        alignEnd && (label || subtitle || icon) && /* @__PURE__ */ jsx(
           RichLabel,
           {
             icon,
@@ -413,9 +418,10 @@ const RadioButton = (props) => {
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: classnames(
+            className: clsx(
               "es-uic-flex es-uic-size-5 es-uic-items-center es-uic-justify-center es-uic-rounded-full es-uic-border es-uic-text-gray-600 es-uic-shadow-sm es-uic-transition",
-              isSelected ? "es-uic-border-teal-600 es-uic-bg-teal-600 es-uic-text-white" : "es-uic-border-gray-300"
+              isSelected ? "es-uic-border-teal-600 es-uic-bg-teal-600 es-uic-text-white" : "es-uic-border-gray-300",
+              !(design == null ? void 0 : design.startsWith("segmented")) && isFocusVisible && "es-uic-ring es-uic-ring-teal-500 es-uic-ring-opacity-50"
             ),
             children: /* @__PURE__ */ jsx(
               AnimatedVisibility,
@@ -429,12 +435,13 @@ const RadioButton = (props) => {
             )
           }
         ),
-        !icon && !alignEnd && (label || subtitle) && /* @__PURE__ */ jsx(
+        !alignEnd && /* @__PURE__ */ jsx(
           RichLabel,
           {
+            icon,
             label,
             subtitle,
-            className: labelClassName
+            className: clsx(labelClassName, "[&_>_span_>_svg]:!es-uic-size-5")
           }
         ),
         !(icon || label || subtitle) && children
@@ -464,6 +471,7 @@ RadioButton.displayName = "RadioButton";
  * @param {Function} [props.onChange] - Function to call when the value of the selected radio button changes.
  * @param {string} [props.className] - Additional classes to add to the group container.
  * @param {string} [props.labelClassName] - Additional classes to add to the label container.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The RadioButtonGroup component.
  *
@@ -500,8 +508,12 @@ const RadioButtonGroup = (props) => {
     children,
     className,
     labelClassName,
-    ...other
+    hidden,
+    ...rest
   } = props;
+  if (hidden) {
+    return null;
+  }
   let mappedChildren = children ?? [];
   if (!Array.isArray(children)) {
     mappedChildren = [children];
@@ -518,13 +530,13 @@ const RadioButtonGroup = (props) => {
   return /* @__PURE__ */ jsx(
     $b6c3ddc6086f204d$export$a98f0dcb43a68a25,
     {
-      className: classnames("es-uic-w-full", className),
+      className: clsx("es-uic-w-full", className),
       isDisabled: disabled,
       isReadOnly: readOnly,
       onChange,
       value,
       orientation,
-      ...other,
+      ...rest,
       children: /* @__PURE__ */ jsx(
         BaseControl,
         {
@@ -535,12 +547,18 @@ const RadioButtonGroup = (props) => {
           help,
           labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
           className: labelClassName,
-          controlContainerClassName: classnames(
-            orientation === "horizontal" && "es-uic-flex es-uic-flex-wrap !es-uic-space-y-0 es-uic-gap-2.5",
-            design === "segmented" && orientation === "vertical" && "!-es-uic-space-y-px",
-            design === "segmented" && orientation === "horizontal" && "!es-uic-gap-0 !es-uic-nowrap -es-uic-space-x-px"
-          ),
-          children: mappedChildren
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(
+                design === "default" && orientation === "horizontal" && "es-uic-flex es-uic-flex-wrap es-uic-gap-2.5",
+                design === "default" && orientation === "vertical" && "es-uic-flex es-uic-flex-col es-uic-gap-2.5",
+                design === "segmented" && orientation === "vertical" && "es-uic-flex es-uic-flex-col -es-uic-space-y-px",
+                design === "segmented" && orientation === "horizontal" && "es-uic-nowrap es-uic-flex -es-uic-space-x-px"
+              ),
+              children: mappedChildren
+            }
+          )
         }
       )
     }