@eightshift/ui-components 1.9.1 → 2.0.1

package/dist/components/notice/notice.js

@@ -31,53 +31,53 @@ const Notice = (props) => {
   const styles = {
     info: {
       icon: icons.infoCircle,
-      className: "es-uic-border-blue-400 es-uic-shadow-blue-500/15 es-uic-bg-blue-100/5",
-      iconColor: "es-uic-text-blue-400",
-      textColor: "es-uic-text-blue-900",
-      subtitleColor: "es-uic-text-blue-950/60"
+      className: "es:border-blue-400 es:shadow-blue-500/15 es:bg-blue-100/5",
+      iconColor: "es:text-blue-400",
+      textColor: "es:text-blue-900",
+      subtitleColor: "es:text-blue-950/60"
     },
     success: {
       icon: icons.checkSquare,
-      className: "es-uic-border-green-500 es-uic-shadow-green-500/15 es-uic-bg-green-100/5",
-      iconColor: "es-uic-text-green-500",
-      textColor: "es-uic-text-green-900",
-      subtitleColor: "es-uic-text-green-950/60"
+      className: "es:border-green-500 es:shadow-green-500/15 es:bg-green-100/5",
+      iconColor: "es:text-green-500",
+      textColor: "es:text-green-900",
+      subtitleColor: "es:text-green-950/60"
     },
     warning: {
       icon: icons.warning,
-      className: "es-uic-border-amber-500 es-uic-shadow-amber-500/15 es-uic-bg-amber-100/5",
-      iconColor: "es-uic-text-amber-500",
-      textColor: "es-uic-text-amber-900",
-      subtitleColor: "es-uic-text-amber-950/60"
+      className: "es:border-amber-500 es:shadow-amber-500/15 es:bg-amber-100/5",
+      iconColor: "es:text-amber-500",
+      textColor: "es:text-amber-900",
+      subtitleColor: "es:text-amber-950/60"
     },
     error: {
       icon: icons.errorCircle,
-      className: "es-uic-border-red-400 es-uic-shadow-red-500/15 es-uic-bg-red-100/5",
-      iconColor: "es-uic-text-red-400",
-      textColor: "es-uic-text-red-900",
-      subtitleColor: "es-uic-text-red-950/60"
+      className: "es:border-red-400 es:shadow-red-500/15 es:bg-red-100/5",
+      iconColor: "es:text-red-400",
+      textColor: "es:text-red-900",
+      subtitleColor: "es:text-red-950/60"
     },
     placeholder: {
       icon: icons.componentGeneric,
-      className: "es-uic-border-slate-300 es-uic-shadow-slate-300/25 es-uic-border-dashed es-uic-bg-slate-200/5",
-      iconColor: "es-uic-text-slate-400",
-      textColor: "es-uic-text-slate-900",
-      subtitleColor: "es-uic-text-slate-500"
+      className: "es:border-secondary-400 es:shadow-secondary-300/25 es:border-dashed es:bg-secondary-200/5",
+      iconColor: "es:text-secondary-400",
+      textColor: "es:text-secondary-900",
+      subtitleColor: "es:text-secondary-500"
     },
     default: {
-      className: "es-uic-border-gray-300 es-uic-shadow-gray-300/25 es-uic-bg-gray-200/5",
-      iconColor: "es-uic-text-gray-400",
-      textColor: "es-uic-text-gray-900",
-      subtitleColor: "es-uic-text-gray-500"
+      className: "es:border-secondary-300 es:shadow-secondary-300/25 es:bg-secondary-200/5",
+      iconColor: "es:text-secondary-400",
+      textColor: "es:text-secondary-900",
+      subtitleColor: "es:text-secondary-500"
     }
   };
   return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: clsx(
-        "es-uic-grid es-uic-grid-cols-[auto,_1fr] es-uic-grid-rows-[auto,_auto] es-uic-rounded-md es-uic-border es-uic-bg-gradient-to-tr es-uic-shadow-sm",
+        "es:grid es:grid-cols-[auto_1fr] es:grid-rows-[auto_auto] es:rounded-md es:border es:bg-linear-to-tr es:shadow-sm",
         styles[type].className,
-        icon || styles[type].icon ? "es-uic-gap-x-1.5 es-uic-p-1.5" : "es-uic-px-2 es-uic-py-1.5",
+        icon || styles[type].icon ? "es:gap-x-1.5 es:p-1.5" : "es:px-2 es:py-1.5",
         className
       ),
       children: [
@@ -85,8 +85,8 @@ const Notice = (props) => {
           "span",
           {
             className: clsx(
-              "es-uic-col-span-1 es-uic-col-start-1 es-uic-row-span-2 es-uic-row-start-1 es-uic-shrink-0 es-uic-self-center [&>svg]:es-uic-size-7",
-              alignIconToTitle ? "es-uic-self-baseline" : "es-uic-self-center",
+              "es:col-span-1 es:col-start-1 es:row-span-2 es:row-start-1 es:shrink-0 es:self-center es:icon:size-7",
+              alignIconToTitle ? "es:self-baseline" : "es:self-center",
               styles[type].iconColor
             ),
             children: icon ?? styles[type].icon
@@ -96,8 +96,8 @@ const Notice = (props) => {
           "span",
           {
             className: clsx(
-              "es-uic-col-span-2 es-uic-col-start-2 es-uic-text-balance es-uic-text-sm es-uic-leading-tight",
-              subtitle ? "es-uic-self-end" : "es-uic-row-span-2 es-uic-self-center",
+              "es:col-span-2 es:col-start-2 es:text-balance es:text-sm es:leading-tight",
+              subtitle ? "es:self-end" : "es:row-span-2 es:self-center",
               styles[type].textColor
             ),
             children: label
@@ -107,9 +107,9 @@ const Notice = (props) => {
           "span",
           {
             className: clsx(
-              "es-uic-col-span-2 es-uic-col-start-2 es-uic-text-balance es-uic-text-xs es-uic-leading-tight",
+              "es:col-span-2 es:col-start-2 es:text-balance es:text-xs es:leading-tight",
               styles[type].subtitleColor,
-              label ? "es-uic-self-start" : "es-uic-row-span-2 es-uic-self-center"
+              label ? "es:self-start" : "es:row-span-2 es:self-center"
             ),
             children: subtitle
           }

package/dist/components/number-picker/number-picker.js

@@ -1,24 +1,24 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React__default, { forwardRef, useRef, createContext, useState, cloneElement } from "react";
 import { _ as __ } from "../../default-i18n-CM1-Xvzf.js";
-import { a as $a049562f99e7db0e$export$f9c6924e160136d1, $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../../Group-k_oyd3Te.js";
-import { a as $3985021b0ad6602f$export$37fb8590cf2c088c, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-DCmTv_Qw.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8G0GMsc.js";
-import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-BEIi9mB_.js";
-import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$ef03459518577ad4, b as $64fa3d84918910a7$export$4d86445c2cf5e3, j as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-BmaSD6gC.js";
-import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-huHsqqMP.js";
+import { a as $a049562f99e7db0e$export$f9c6924e160136d1, $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../../Group-D6tr3U_n.js";
+import { a as $3985021b0ad6602f$export$37fb8590cf2c088c, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-Se0m3ubj.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-Ca9uelsn.js";
+import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-OQ5EIPvt.js";
+import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$ef03459518577ad4, b as $64fa3d84918910a7$export$4d86445c2cf5e3, j as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-39D0mStj.js";
+import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-D7A6s7O5.js";
 import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-Cld9rkzJ.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-aOUPPvTO.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-DtrQ3I5U.js";
-import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-D_Azw6A1.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-CDOs-GuR.js";
+import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-Bm6_BVl9.js";
 import { Button } from "../button/button.js";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { BaseControl } from "../base-control/base-control.js";
 const $b91743d66a0ed188$export$b414a48cf5dcbc11 = /* @__PURE__ */ createContext(null);
 const $b91743d66a0ed188$export$6cc906c6cff9bec5 = /* @__PURE__ */ createContext(null);
-function $b91743d66a0ed188$var$NumberField(props, ref) {
+const $b91743d66a0ed188$export$63c5fa0b2fdccd2e = /* @__PURE__ */ forwardRef(function NumberField(props, ref) {
   [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $b91743d66a0ed188$export$b414a48cf5dcbc11);
   let { validationBehavior: formValidationBehavior } = $64fa3d84918910a7$export$fabf2dc03a41866e($d3e0e05bdfcf66bd$export$c24727297075ec6a) || {};
   var _props_validationBehavior, _ref;
@@ -106,8 +106,7 @@ function $b91743d66a0ed188$var$NumberField(props, ref) {
     name: props.name,
     value: isNaN(state.numberValue) ? "" : state.numberValue
   }));
-}
-const $b91743d66a0ed188$export$63c5fa0b2fdccd2e = /* @__PURE__ */ forwardRef($b91743d66a0ed188$var$NumberField);
+});
 /**
  * A number picker component.
  *
@@ -176,19 +175,19 @@ const NumberPicker = ({
   }
   const sizes = {
     compact: {
-      field: "es-uic-min-h-5",
-      noPrefixPadding: "es-uic-pl-1.5",
-      extraContentSeparator: "es-uic-h-[1.875rem]"
+      field: "es:min-h-5",
+      noPrefixPadding: "es:pl-1.5",
+      extraContentSeparator: "es:h-[1.875rem]"
     },
     small: {
-      field: "es-uic-min-h-9",
-      noPrefixPadding: "es-uic-pl-2",
-      extraContentSeparator: "es-uic-h-[2.125rem]"
+      field: "es:min-h-9",
+      noPrefixPadding: "es:pl-2",
+      extraContentSeparator: "es:h-[2.125rem]"
     },
     default: {
-      field: "es-uic-min-h-10",
-      noPrefixPadding: "es-uic-pl-2",
-      extraContentSeparator: "es-uic-h-[2.375rem]"
+      field: "es:min-h-10",
+      noPrefixPadding: "es:pl-2",
+      extraContentSeparator: "es:h-[2.375rem]"
     }
   };
   return /* @__PURE__ */ jsx(
@@ -212,22 +211,24 @@ const NumberPicker = ({
           subtitle,
           help,
           inline,
-          className: "text-sm",
+          className: "es:text-sm",
           children: /* @__PURE__ */ jsxs(
             $a049562f99e7db0e$export$eb2fcfdbd7ba97d4,
             {
               className: clsx(
-                "es-uic-flex es-uic-w-fit es-uic-items-center es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-pl-1 es-uic-pr-0.5 es-uic-shadow-sm es-uic-transition",
-                isInputFocused && "es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50",
+                "es:group es:flex es:w-fit es:items-center es:rounded-lg es:border es:border-secondary-300 es:pl-1 es:pr-0.5 es:shadow-xs es:transition",
+                "es:inset-ring es:inset-ring-secondary-100",
+                isInputFocused && "es:outline-hidden es:focus-visible:border-accent-500 es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
                 !prefix && (((_a = sizes == null ? void 0 : sizes[size]) == null ? void 0 : _a.noPrefixPadding) ?? sizes.default.noPrefixPadding),
-                ((_b = sizes == null ? void 0 : sizes[size]) == null ? void 0 : _b.field) ?? sizes.default.field
+                ((_b = sizes == null ? void 0 : sizes[size]) == null ? void 0 : _b.field) ?? sizes.default.field,
+                "es:disabled:shadow-none es:disabled:border-secondary-200 es:disabled:bg-secondary-50 es:disabled:text-secondary-500 es:disabled:cursor-default es:readonly:bg-secondary-50"
               ),
               children: [
                 prefix && /* @__PURE__ */ jsx(
                   "span",
                   {
                     slot: "prefix",
-                    className: "es-uic-col-start-1 es-uic-row-span-2 es-uic-mr-0.5 es-uic-select-none es-uic-self-center es-uic-text-xs es-uic-text-gray-500",
+                    className: "es:col-start-1 es:row-span-2 es:mr-0.5 es:select-none es:self-center es:text-sm es:text-secondary-400",
                     children: prefix
                   }
                 ),
@@ -236,7 +237,7 @@ const NumberPicker = ({
                   {
                     onFocus: () => setIsInputFocused(true),
                     onBlur: () => setIsInputFocused(false),
-                    className: "es-uic-col-start-2 es-uic-row-span-2 !es-uic-border-none es-uic-bg-transparent !es-uic-px-0 !es-uic-py-1 es-uic-text-sm es-uic-tabular-nums !es-uic-shadow-none !es-uic-outline-none selection:es-uic-bg-teal-500/20 selection:es-uic-text-teal-950 focus:!es-uic-shadow-none focus:es-uic-outline-none",
+                    className: "es:col-start-2 es:row-span-2 es:border-none! es:bg-transparent es:px-0! es:py-1! es:text-sm es:tabular-nums es:shadow-none! es:outline-hidden! es:selection:bg-accent-500/20 es:selection:text-accent-950 es:focus:shadow-none! es:focus:outline-hidden",
                     placeholder,
                     style: {
                       width: fixedWidth ? `${fixedWidth}ch` : `calc(${min < 0 ? "0.75ch + " : ""}${(_d = (_c = max ?? 1e3) == null ? void 0 : _c.toString()) == null ? void 0 : _d.length} * 1ch)`
@@ -244,20 +245,12 @@ const NumberPicker = ({
                     "aria-label": ariaLabel ?? __("Enter a number", "eightshift-ui-components")
                   }
                 ),
-                suffix && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    slot: "suffix",
-                    className: "es-uic-col-start-3 es-uic-row-span-2 es-uic-select-none es-uic-self-center es-uic-text-xs es-uic-text-gray-500",
-                    children: suffix
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("div", { className: clsx("es:opacity-0 es:group-hover:opacity-100 es:group-focus-visible:opacity-100 es:transition-opacity", disabled && "es:invisible"), children: [
                   /* @__PURE__ */ jsx(
                     Button,
                     {
                       type: "ghost",
-                      className: "es-uic-col-start-4 !es-uic-h-3 !es-uic-w-5 !es-uic-rounded !es-uic-text-gray-500 disabled:!es-uic-text-gray-300 [&>svg]:es-uic-size-[0.8rem]",
+                      className: "es:col-start-4 es:h-3 es:w-4 es:text-secondary-500! es:disabled:text-secondary-300! es:icon:size-[0.8rem]",
                       slot: "increment",
                       icon: icons.caretUpFill
                     }
@@ -266,15 +259,23 @@ const NumberPicker = ({
                     Button,
                     {
                       type: "ghost",
-                      className: "es-uic-col-start-4 !es-uic-h-3 !es-uic-w-5 !es-uic-rounded !es-uic-text-gray-500 disabled:!es-uic-text-gray-300 [&>svg]:es-uic-size-[0.8rem]",
+                      className: "es:col-start-4 es:h-3 es:w-4 es:text-secondary-500! es:disabled:text-secondary-300! es:icon:size-[0.8rem]",
                       slot: "decrement",
                       icon: icons.caretDownFill
                     }
                   )
                 ] }),
+                suffix && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    slot: "suffix",
+                    className: "es:col-start-3 es:row-span-2 es:select-none es:self-center es:text-sm es:text-secondary-400 es:mr-0.5",
+                    children: suffix
+                  }
+                ),
                 children && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx("div", { className: clsx("es-uic-w-px es-uic-bg-gray-300", ((_e = sizes == null ? void 0 : sizes[size]) == null ? void 0 : _e.extraContentSeparator) ?? sizes.default.extraContentSeparator) }),
-                  /* @__PURE__ */ jsx("div", { className: "es-uic-p-0.5 es-uic-pr-0", children: Array.isArray(children) ? children.map((child) => cloneElement(child, { slot: null })) : cloneElement(children, { slot: null }) })
+                  /* @__PURE__ */ jsx("div", { className: clsx("es:w-px es:bg-secondary-300", ((_e = sizes == null ? void 0 : sizes[size]) == null ? void 0 : _e.extraContentSeparator) ?? sizes.default.extraContentSeparator) }),
+                  /* @__PURE__ */ jsx("div", { className: "es:p-0.5 es:pr-0", children: Array.isArray(children) ? children.map((child) => cloneElement(child, { slot: null })) : cloneElement(children, { slot: null }) })
                 ] })
               ]
             }

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

@@ -38,7 +38,7 @@ import { _ as __ } from "../../default-i18n-CM1-Xvzf.js";
  *
  * @returns {JSX.Element} The OptionSelect component.
  *
- * @typedef {'toggleButtons' | 'radios' | 'radiosSegmented' | 'menu'} OptionSelectType
+ * @typedef {'toggleButtons' | 'toggleButtonsSplit' | 'radios' | 'radiosSegmented' | 'menu'} OptionSelectType
  *
  * @example
  * <OptionSelect
@@ -91,7 +91,11 @@ const OptionSelect = (props) => {
     tooltip = ariaLabel;
   }
   const currentItem = options == null ? void 0 : options.find(({ value: optionValue }) => optionValue === value);
-  const notSetLabel = /* @__PURE__ */ jsx("span", { className: "es-uic-leading-3 es-uic-opacity-50", children: __("Not set", "eightshift-ui-components") });
+  const notSetLabel = /* @__PURE__ */ jsx("span", { className: "es:leading-3 es:opacity-50", children: __("Not set", "eightshift-ui-components") });
+  let radioDesign = "default";
+  if (type === "radiosSegmented") {
+    radioDesign = "segmented";
+  }
   return /* @__PURE__ */ jsxs(
     BaseControl,
     {
@@ -104,11 +108,12 @@ const OptionSelect = (props) => {
       className,
       ...rest,
       children: [
-        type === "toggleButtons" && /* @__PURE__ */ jsx(
+        ["toggleButtons", "toggleButtonsSplit"].includes(type) && /* @__PURE__ */ jsx(
           ButtonGroup,
           {
             vertical,
             "aria-label": typeof label !== "undefined" ? null : ariaLabel,
+            type: type === "toggleButtonsSplit" ? "split" : "segmented",
             ...wrapperProps,
             children: options.map(
               ({
@@ -155,7 +160,7 @@ const OptionSelect = (props) => {
           {
             orientation: vertical ? "vertical" : "horizontal",
             onChange: (v) => onChange(v),
-            design: type === "radios" ? "default" : "segmented",
+            design: radioDesign,
             "aria-label": typeof label !== "undefined" ? null : ariaLabel,
             value,
             ...wrapperProps,

package/dist/components/options-panel/options-panel.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { RichLabel } from "../rich-label/rich-label.js";
-import { $ as $5cb03073d3f54797$export$a8a3e93435678ff9 } from "../../Heading-DRBzKYHb.js";
+import { $ as $5cb03073d3f54797$export$a8a3e93435678ff9 } from "../../Heading-DiYTXoIW.js";
 /**
  * Component that provides a container panel for options, with an optional title.
  * Best used within the Gutenberg sidebar, instead of the default `PanelBody` component.
@@ -30,18 +30,24 @@ const OptionsPanel = (props) => {
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ jsxs("div", { className: clsx("es-uic-max-w-md", className), children: [
-    title && /* @__PURE__ */ jsx(
-      RichLabel,
-      {
-        icon,
-        label: title,
-        subtitle,
-        className: "es-uic-mb-1 es-uic-text-[0.875rem] es-uic-tracking-[-0.01em] !es-uic-text-gray-500"
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "es-uic-divide-y es-uic-divide-gray-200 es-uic-rounded-lg es-uic-border es-uic-border-gray-200 es-uic-bg-white es-uic-shadow", children }),
-    help && /* @__PURE__ */ jsx("span", { className: "es-uic-mt-1.5 es-uic-block es-uic-text-sm es-uic-text-gray-400", children: help })
+  return /* @__PURE__ */ jsxs("div", { className: "es:not-last:mb-10", children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx("es:bg-white es:rounded-xl es:border es:border-secondary-300 es:overflow-clip es:max-w-lg es:shadow-xs", className), children: [
+      title && /* @__PURE__ */ jsx(
+        RichLabel,
+        {
+          icon,
+          label: title,
+          subtitle,
+          className: clsx(
+            "es:bg-secondary-50 es:shrink-0 es:text-secondary-700 es:px-4 es:**:first:text-base! es:border-b es:border-b-secondary-200",
+            subtitle ? "es:py-3" : "es:pt-2.25 es:pb-1.75"
+          ),
+          noColor: true
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "es:divide-y es:divide-secondary-200/75 es:py-4", children })
+    ] }),
+    help && /* @__PURE__ */ jsx("span", { className: "es:mx-0.5 es:mt-1 es:block es:text-sm es:text-secondary-400", children: help })
   ] });
 };
 /**
@@ -65,16 +71,7 @@ const OptionsPanelSection = ({ children, className, hidden }) => {
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx(
-        "last:rounded-b-lg es-uic-space-y-2.5 es-uic-px-3 es-uic-py-4 first:es-uic-rounded-t-lg first:es-uic-pt-3.5 last:es-uic-pb-3.5 only:es-uic-rounded-lg",
-        className
-      ),
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx("div", { className: clsx("es:space-y-2.5 es:not-last:pb-4 es:not-first:pt-4 es:px-4", className), children });
 };
 /**
  * Component that provides a header for the top of an options page.
@@ -85,6 +82,7 @@ const OptionsPanelSection = ({ children, className, hidden }) => {
  * @param {string} [props.title] - Title to show.
  * @param {Number} [props.level=2] - Heading level of the title.
  * @param {string} [props.className] - Classes to pass to the container.
+ * @param {boolean} [props.limitWidth] - If `true`, the width is limited.
  * @param {JSX.Element|JSX.Element[]} [props.actions] - Controls to show on the right side of the header.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
@@ -97,27 +95,64 @@ const OptionsPanelSection = ({ children, className, hidden }) => {
  *
  * @preserve
  */
-const OptionsPanelHeader = ({ children, sticky, title, className, actions, level = 2, hidden }) => {
+const OptionsPanelHeader = ({ children, sticky, title, className, actions, level = 2, limitWidth, hidden }) => {
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ jsxs("div", { className: clsx("es-uic-max-w-md es-uic-space-y-2.5", sticky && "es-uic-sticky es-uic-top-0 es-uic-z-10", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-flex-wrap es-uic-items-center es-uic-justify-between es-uic-gap-x-8 es-uic-gap-y-4", children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx("es:space-y-2.5", limitWidth && "es:max-w-md", sticky && "es:sticky es:top-0 es:z-10 es:bg-white", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "es:flex es:flex-wrap es:items-center es:justify-between es:gap-x-8 es:gap-y-4", children: [
       /* @__PURE__ */ jsx(
         $5cb03073d3f54797$export$a8a3e93435678ff9,
         {
-          className: "es-uic-text-2xl es-uic-font-medium es-uic-tracking-tight",
+          className: "es:text-2xl es:font-medium es:tracking-tight",
           level,
           children: title
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "es-uic-flex es-uic-items-center es-uic-gap-2", children: actions })
+      /* @__PURE__ */ jsx("div", { className: "es:flex es:items-center es:gap-2", children: actions })
     ] }),
     children
   ] });
 };
+/**
+ * Component that provides an intro for an options page.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.title] - Title to show.
+ * @param {string} [props.subtitle] - Subtitle to show.
+ * @param {Number} [props.level=2] - Heading level of the title.
+ * @param {string} [props.className] - Classes to pass to the container.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Controls to show on the right side of the header.
+ * @param {boolean} [props.border] - If `true`, a border is shown below the text.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The OptionsPanelIntro component.
+ *
+ * @example
+ * <OptionsPanelIntro title='Theme options' />
+ *
+ * @preserve
+ */
+const OptionsPanelIntro = ({ title, subtitle, className, level = 3, border, hidden }) => {
+  if (hidden) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: clsx("es:pb-2.5", border && "es:mb-5 es:border-b es:border-b-secondary-200", className), children: [
+    /* @__PURE__ */ jsx(
+      $5cb03073d3f54797$export$a8a3e93435678ff9,
+      {
+        className: "es:text-lg es:tracking-tight es:text-secondary-800",
+        level,
+        children: title
+      }
+    ),
+    subtitle && /* @__PURE__ */ jsx("p", { className: "es:text-sm es:text-secondary-500 es:mt-0.5", children: subtitle })
+  ] });
+};
 export {
   OptionsPanel,
   OptionsPanelHeader,
+  OptionsPanelIntro,
   OptionsPanelSection
 };

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

@@ -24,27 +24,16 @@ import { c as clsx } from "../../lite-DVmmD_-j.js";
  */
 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
+      label: (fileName ? fileName : children) ?? __("No file selected", "eightshift-ui-components"),
+      className: clsx(
+        "es:w-fit es:rounded-xl es:border es:border-secondary-300 es:bg-secondary-50 es:p-2 es:pr-3 es:text-xs es:text-secondary-300 es:shadow-xs",
+        fileName && "es:font-mono",
+        className
+      )
     }
   );
 };

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

@@ -32,24 +32,24 @@ const ImagePlaceholder = (props) => {
     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"
+    default: "es:rounded-xl es:border es:border-secondary-300 es:bg-secondary-50 es:text-secondary-300 es:shadow-xs",
+    simple: "es:rounded-xl es:border es:border-secondary-300 es:border-dashed es:text-secondary-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"
+    default: "es:size-20",
+    large: "es:size-40",
+    fullWidth: "es:w-full",
+    fullHeight: "es:h-full",
+    full: "es:size-full",
+    video: "es:w-full es: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",
+        "es:grid es:grid-cols-1 es:grid-rows-1 es:overflow-hidden",
+        "es:*:col-start-1 es:*:col-end-1 es:*:row-start-1 es:*:row-end-1",
         styleClassName[style] ?? (styleClassName == null ? void 0 : styleClassName.default),
         sizeClassName[size] ?? (sizeClassName == null ? void 0 : sizeClassName.default),
         className
@@ -59,11 +59,11 @@ const ImagePlaceholder = (props) => {
           "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"
+              "es:size-full es:select-none es:fill-mode-forwards",
+              imageMode === "cover" && "es:object-cover",
+              imageMode === "contain" && "es:object-contain",
+              imageMode === "fill" && "es:object-fill",
+              (url == null ? void 0 : url.length) > 0 ? "es:motion-opacity-in es:motion-scale-in-125 es:motion-blur-in-xs es:motion-delay-300/blur es:motion-duration-300 es:motion-ease-spring-snappy/scale" : "es:hidden"
             ),
             src: url,
             alt
@@ -73,8 +73,8 @@ const ImagePlaceholder = (props) => {
           "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"
+              "es:place-self-center es:justify-self-center es:transition es:fill-mode-forwards es:icon:size-7",
+              !url ? "es:motion-opacity-in es:motion-scale-in-90 es:motion-duration-300 es:motion-ease-spring-snappy/scale" : "es:invisible"
             ),
             children: icons.image
           }

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

@@ -29,31 +29,31 @@ const MediaPlaceholder = (props) => {
     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-400 es-uic-shadow",
-    simple: "es-uic-rounded-lg es-uic-border es-uic-border-gray-300 es-uic-border-dashed es-uic-text-gray-400"
+    default: "es:rounded-xl es:border es:border-secondary-300 es:bg-secondary-50 es:text-secondary-400 es:shadow-xs",
+    simple: "es:rounded-xl es:border es:border-secondary-300 es:border-dashed es:text-secondary-400"
   };
   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"
+    default: "es:size-20",
+    large: "es:size-40",
+    fullWidth: "es:w-full",
+    fullHeight: "es:h-full",
+    full: "es:size-full",
+    video: "es:w-full es: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 es-uic-p-2",
+        "es:flex es:flex-col es:items-center es:justify-center es:gap-2 es:overflow-hidden es:p-2",
         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-500", children: helpText }),
-        children && /* @__PURE__ */ jsx("div", { className: "es-uic-mt-2 es-uic-flex es-uic-items-center es-uic-gap-x-2 es-uic-gap-y-2.5 es-uic-text-sm", children })
+        /* @__PURE__ */ jsx("div", { className: "es:icon:size-7", children: icon ?? icons.image }),
+        helpText && /* @__PURE__ */ jsx("div", { className: "es:text-sm es:text-secondary-500", children: helpText }),
+        children && /* @__PURE__ */ jsx("div", { className: "es:mt-2 es:flex es:items-center es:gap-x-2 es:gap-y-2.5 es:text-sm", children })
       ]
     }
   );