@eightshift/ui-components 1.9.1 → 2.0.0

package/dist/components/responsive/responsive-legacy.js

@@ -109,17 +109,17 @@ const ResponsiveLegacy = (props) => {
       DecorativeTooltip,
       {
         placement: "left",
-        className: "es-uic-p-3",
+        className: "es:p-3",
         theme: "light",
         offset: 7.5,
         arrow: true,
-        text: /* @__PURE__ */ jsxs("div", { className: "es-uic-max-w-64 es-uic-p-1", children: [
-          /* @__PURE__ */ jsx("span", { className: "es-uic-block es-uic-text-balance es-uic-font-semibold es-uic-tabular-nums", children: __("Default", "eightshift-ui-components") }),
-          /* @__PURE__ */ jsxs("span", { className: "es-uic-block es-uic-text-balance es-uic-tabular-nums", children: [
+        text: /* @__PURE__ */ jsxs("div", { className: "es:max-w-64 es:p-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "es:block es:text-balance es:font-semibold es:tabular-nums", children: __("Default", "eightshift-ui-components") }),
+          /* @__PURE__ */ jsxs("span", { className: "es:block es:text-balance es:tabular-nums", children: [
             !globalOverride && __("Always applied, regardless of browser width.", "eightshift-ui-components"),
             globalOverride && sprintf(__("Applied when the browser width is %dpx or wider.", "eightshift-ui-components"), breakpointData[globalOverride] + 1)
           ] }),
-          globalOverride && /* @__PURE__ */ jsx("div", { className: "es-uic-mx-auto es-uic-mt-2", children: /* @__PURE__ */ jsx(
+          globalOverride && /* @__PURE__ */ jsx("div", { className: "es:mx-auto es:mt-2", children: /* @__PURE__ */ jsx(
             BreakpointPreview,
             {
               blocks: [
@@ -140,7 +140,7 @@ const ResponsiveLegacy = (props) => {
             }
           ) })
         ] }),
-        children: /* @__PURE__ */ jsx("div", { className: "es-uic-flex es-uic-size-7 es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-border es-uic-border-teal-500/10 es-uic-bg-teal-50 es-uic-p-0.5 es-uic-text-teal-800 es-uic-shadow-sm es-uic-shadow-teal-600/25 [&>svg]:es-uic-size-5", children: icons[`screen${upperFirst(defaultBreakpoint)}`] ?? icons.play })
+        children: /* @__PURE__ */ jsx("div", { className: "es:flex es:size-7 es:items-center es:justify-center es:rounded es:border es:border-accent-500/10 es:bg-accent-50 es:p-0.5 es:text-accent-800 es:shadow-sm es:shadow-accent-600/25 es:icon:size-5", children: icons[`screen${upperFirst(defaultBreakpoint)}`] ?? icons.play })
       }
     );
   };
@@ -151,7 +151,7 @@ const ResponsiveLegacy = (props) => {
       label,
       subtitle,
       help,
-      className: "es-uic-w-full",
+      className: "es:w-full",
       actions: /* @__PURE__ */ jsxs(Fragment, { children: [
         inline && /* @__PURE__ */ jsx(
           AnimatedVisibility,
@@ -184,16 +184,16 @@ const ResponsiveLegacy = (props) => {
           "div",
           {
             className: clsx(
-              "es-uic-grid es-uic-items-center es-uic-gap-x-2 es-uic-transition-[grid-template-columns,_margin-block-end] es-uic-duration-150",
-              innerContentAlign === "start" && "es-uic-justify-items-start",
-              innerContentAlign === "center" && "es-uic-justify-items-center",
-              innerContentAlign === "end" && "es-uic-justify-items-end",
-              innerContentAlign === "stretch" && "es-uic-justify-items-stretch",
-              detailsVisible ? "es-uic-mb-2 es-uic-grid-cols-[minmax(0,_1.75rem),_minmax(0,_1fr),_minmax(0,_2.25rem)]" : "es-uic-grid-cols-[minmax(0,_0rem),_minmax(0,_1fr),_minmax(0,_2.25rem)]"
+              "es:grid es:items-center es:gap-x-2 es:transition-[grid-template-columns,margin-block-end] es:duration-150",
+              innerContentAlign === "start" && "es:justify-items-start",
+              innerContentAlign === "center" && "es:justify-items-center",
+              innerContentAlign === "end" && "es:justify-items-end",
+              innerContentAlign === "stretch" && "es:justify-items-stretch",
+              detailsVisible ? "es:mb-2 es:grid-cols-[minmax(0,1.75rem)_minmax(0,1fr)_minmax(0,2.25rem)]" : "es:grid-cols-[minmax(0,0rem)_minmax(0,1fr)_minmax(0,2.25rem)]"
             ),
             children: [
               detailsVisible && /* @__PURE__ */ jsx(DefaultTooltip, {}),
-              /* @__PURE__ */ jsx("div", { className: clsx(detailsVisible ? "es-uic-col-start-2 es-uic-col-end-2" : "es-uic-col-span-full"), children: children({
+              /* @__PURE__ */ jsx("div", { className: clsx(detailsVisible ? "es:col-start-2 es:col-end-2" : "es:col-span-full"), children: children({
                 breakpoint: defaultBreakpoint,
                 currentValue: value == null ? void 0 : value[attribute[defaultBreakpoint]],
                 options,
@@ -207,16 +207,16 @@ const ResponsiveLegacy = (props) => {
           AnimatedVisibility,
           {
             className: clsx(
-              "es-uic-mb-2 es-uic-grid es-uic-grid-cols-[minmax(0,_auto),_minmax(0,_1fr),_minmax(0,_2.25rem)] es-uic-items-center es-uic-gap-x-2",
-              innerContentAlign === "start" && "es-uic-justify-items-start",
-              innerContentAlign === "center" && "es-uic-justify-items-center",
-              innerContentAlign === "end" && "es-uic-justify-items-end",
-              innerContentAlign === "stretch" && "es-uic-justify-items-stretch"
+              "es:mb-2 es:grid es:grid-cols-[minmax(0,auto)_minmax(0,1fr)_minmax(0,2.25rem)] es:items-center es:gap-x-2",
+              innerContentAlign === "start" && "es:justify-items-start",
+              innerContentAlign === "center" && "es:justify-items-center",
+              innerContentAlign === "end" && "es:justify-items-end",
+              innerContentAlign === "stretch" && "es:justify-items-stretch"
             ),
             visible: detailsVisible,
             children: [
               /* @__PURE__ */ jsx(DefaultTooltip, {}),
-              /* @__PURE__ */ jsx("div", { className: "es-uic-col-start-2 es-uic-col-end-2", children: children({
+              /* @__PURE__ */ jsx("div", { className: "es:col-start-2 es:col-end-2", children: children({
                 breakpoint: defaultBreakpoint,
                 currentValue: value == null ? void 0 : value[attribute[defaultBreakpoint]],
                 options,
@@ -231,7 +231,7 @@ const ResponsiveLegacy = (props) => {
           AnimatedVisibility,
           {
             visible: detailsVisible,
-            className: "es-uic-space-y-2",
+            className: "es:space-y-2",
             children: breakpoints.map((breakpoint, i) => {
               var _a, _b, _c, _d, _e;
               const isOverrideSet = value[attribute[breakpoint]] !== inheritValue;
@@ -241,11 +241,11 @@ const ResponsiveLegacy = (props) => {
                 "div",
                 {
                   className: clsx(
-                    "es-uic-grid es-uic-grid-cols-[minmax(0,_auto),_minmax(0,_1fr),_minmax(0,_2.25rem)] es-uic-items-center es-uic-gap-x-2",
-                    innerContentAlign === "start" && "es-uic-justify-items-start",
-                    innerContentAlign === "center" && "es-uic-justify-items-center",
-                    innerContentAlign === "end" && "es-uic-justify-items-end",
-                    innerContentAlign === "stretch" && "es-uic-justify-items-stretch"
+                    "es:grid es:grid-cols-[minmax(0,auto)_minmax(0,1fr)_minmax(0,2.25rem)] es:items-center es:gap-x-2",
+                    innerContentAlign === "start" && "es:justify-items-start",
+                    innerContentAlign === "center" && "es:justify-items-center",
+                    innerContentAlign === "end" && "es:justify-items-end",
+                    innerContentAlign === "stretch" && "es:justify-items-stretch"
                   ),
                   children: [
                     /* @__PURE__ */ jsx(
@@ -255,9 +255,9 @@ const ResponsiveLegacy = (props) => {
                         theme: "light",
                         offset: 7.5,
                         arrow: true,
-                        text: /* @__PURE__ */ jsxs("div", { className: "es-uic-max-w-96 es-uic-p-1", children: [
-                          /* @__PURE__ */ jsx("span", { className: "es-uic-block es-uic-font-semibold", children: upperFirst(breakpoint) }),
-                          /* @__PURE__ */ jsxs("span", { className: "es-uic-block es-uic-text-balance es-uic-tabular-nums", children: [
+                        text: /* @__PURE__ */ jsxs("div", { className: "es:max-w-96 es:p-1", children: [
+                          /* @__PURE__ */ jsx("span", { className: "es:block es:font-semibold", children: upperFirst(breakpoint) }),
+                          /* @__PURE__ */ jsxs("span", { className: "es:block es:text-balance es:tabular-nums", children: [
                             aboveOverride && (aboveOverride !== rawBreakpoints[0] || !belowOverride) && isOverrideSet && sprintf(__("Applied when the browser width is %dpx or less.", "eightshift-ui-components"), breakpointData[breakpoint]),
                             aboveOverride && aboveOverride === rawBreakpoints[0] && belowOverride && isOverrideSet && sprintf(
                               __("Applied when the browser width is between %dpx and %dpx.", "eightshift-ui-components"),
@@ -266,8 +266,8 @@ const ResponsiveLegacy = (props) => {
                             ),
                             (!aboveOverride || !isOverrideSet) && sprintf(__("Up to %dpx", "eightshift-ui-components"), breakpointData[breakpoint])
                           ] }),
-                          (aboveOverride && !isOverrideSet || !aboveOverride) && /* @__PURE__ */ jsx("span", { className: "es-uic-mt-2 es-uic-block es-uic-font-medium es-uic-italic", children: __("Not set", "eightshift-ui-components") }),
-                          aboveOverride && isOverrideSet && /* @__PURE__ */ jsx("div", { className: "es-uic-mx-auto es-uic-mt-2", children: /* @__PURE__ */ jsx(
+                          (aboveOverride && !isOverrideSet || !aboveOverride) && /* @__PURE__ */ jsx("span", { className: "es:mt-2 es:block es:font-medium es:italic", children: __("Not set", "eightshift-ui-components") }),
+                          aboveOverride && isOverrideSet && /* @__PURE__ */ jsx("div", { className: "es:mx-auto es:mt-2", children: /* @__PURE__ */ jsx(
                             BreakpointPreview,
                             {
                               blocks: [
@@ -304,8 +304,8 @@ const ResponsiveLegacy = (props) => {
                           "div",
                           {
                             className: clsx(
-                              "es-uic-flex es-uic-size-7 es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-border es-uic-p-0.5 es-uic-shadow-sm es-uic-transition-colors [&>svg]:es-uic-size-5",
-                              value[attribute[breakpoint]] === inheritValue ? "es-uic-border-gray-200 es-uic-bg-gray-50 es-uic-text-gray-700" : "es-uic-border-gray-100 es-uic-bg-white es-uic-text-gray-500"
+                              "es:flex es:size-7 es:items-center es:justify-center es:rounded es:border es:p-0.5 es:shadow-sm es:transition-colors es:icon:size-5",
+                              value[attribute[breakpoint]] === inheritValue ? "es:border-secondary-200 es:bg-secondary-50 es:text-secondary-700" : "es:border-secondary-100 es:bg-white es:text-secondary-500"
                             ),
                             children: (_e = icons) == null ? void 0 : _e[`screen${upperFirst(breakpoint)}`]
                           }

package/dist/components/responsive/responsive.js

@@ -113,18 +113,18 @@ const Responsive = (props) => {
       DecorativeTooltip,
       {
         placement: "left",
-        className: "es-uic-p-3",
+        className: "es:p-3",
         theme: "light",
         offset: 7.5,
         arrow: true,
-        text: /* @__PURE__ */ jsxs("div", { className: "es-uic-max-w-64 es-uic-p-1", children: [
-          /* @__PURE__ */ jsx("span", { className: "es-uic-block es-uic-text-balance es-uic-font-semibold es-uic-tabular-nums", children: __("Default", "eightshift-ui-components") }),
-          /* @__PURE__ */ jsxs("span", { className: "es-uic-block es-uic-text-balance es-uic-tabular-nums", children: [
+        text: /* @__PURE__ */ jsxs("div", { className: "es:max-w-64 es:p-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "es:block es:text-balance es:font-semibold es:tabular-nums", children: __("Default", "eightshift-ui-components") }),
+          /* @__PURE__ */ jsxs("span", { className: "es:block es:text-balance es:tabular-nums", children: [
             !firstMobileFirstOverride && !lastDesktopFirstOverride && __("Always applied, regardless of browser width.", "eightshift-ui-components"),
             firstMobileFirstOverride && !isDesktopFirst && sprintf(__("Applies when the browser width is %dpx or less.", "eightshift-ui-components"), breakpointData[firstMobileFirstOverride] - 1),
             lastDesktopFirstOverride && isDesktopFirst && sprintf(__("Applies when the browser width is %dpx or more.", "eightshift-ui-components"), breakpointData[lastDesktopFirstOverride.replace("max-", "")])
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "es-uic-mx-auto", children: [
+          /* @__PURE__ */ jsxs("div", { className: "es:mx-auto", children: [
             firstMobileFirstOverride && !isDesktopFirst && /* @__PURE__ */ jsx(
               BreakpointPreview,
               {
@@ -167,7 +167,7 @@ const Responsive = (props) => {
             )
           ] })
         ] }),
-        children: /* @__PURE__ */ jsx("div", { className: "es-uic-flex es-uic-size-7 es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-border es-uic-border-teal-500/10 es-uic-bg-teal-50 es-uic-p-0.5 es-uic-text-teal-800 es-uic-shadow-sm es-uic-shadow-teal-600/25 [&>svg]:es-uic-size-5", children: ((_h = icons) == null ? void 0 : _h[overrideIcon]) ?? overrideIcon ?? icons[`screen${upperFirst(isDesktopFirst ? rawBreakpoints.at(-1) : rawBreakpoints.at(0))}`] })
+        children: /* @__PURE__ */ jsx("div", { className: "es:flex es:size-7 es:items-center es:justify-center es:rounded es:border es:border-accent-500/10 es:bg-accent-50 es:p-0.5 es:text-accent-800 es:shadow-sm es:shadow-accent-600/25 es:icon:size-5", children: ((_h = icons) == null ? void 0 : _h[overrideIcon]) ?? overrideIcon ?? icons[`screen${upperFirst(isDesktopFirst ? rawBreakpoints.at(-1) : rawBreakpoints.at(0))}`] })
       }
     );
   };
@@ -182,7 +182,7 @@ const Responsive = (props) => {
         inline && /* @__PURE__ */ jsx(
           AnimatedVisibility,
           {
-            className: "es-uic-mr-0.5",
+            className: "es:mr-0.5",
             visible: !detailsVisible,
             transition: "scaleFade",
             noInitial: true,
@@ -216,14 +216,14 @@ const Responsive = (props) => {
               "aria-label": __("Responsive options", "eightshift-ui-components"),
               tooltip: __("Responsive options", "eightshift-ui-components"),
               popoverProps: { placement: "bottom right" },
-              triggerProps: { className: "es-uic-w-5.5 es-uic-stroke-[1.25]" },
+              triggerProps: { className: "es:w-5.5 es:stroke-[1.25]" },
               triggerIcon: icons.dropdownCaretAlt,
               children: [
                 !noModeSelect && /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx(
                     MenuItem,
                     {
-                      className: "!es-uic-pb-0 !es-uic-pt-1",
+                      className: "es:pb-0! es:pt-1!",
                       disabled: true,
                       children: __("Breakpoint mode", "eightshift-ui-components")
                     }
@@ -300,16 +300,16 @@ const Responsive = (props) => {
           "div",
           {
             className: clsx(
-              "es-uic-grid es-uic-items-center es-uic-gap-x-2 es-uic-transition-[grid-template-columns,_margin-block-end] es-uic-duration-150",
-              innerContentAlign === "start" && "es-uic-justify-items-start",
-              innerContentAlign === "center" && "es-uic-justify-items-center",
-              innerContentAlign === "end" && "es-uic-justify-items-end",
-              innerContentAlign === "stretch" && "es-uic-justify-items-stretch",
-              detailsVisible ? "es-uic-mb-2 es-uic-grid-cols-[minmax(0,_1.75rem),_minmax(0,_1fr),_minmax(0,_2.25rem)]" : "es-uic-grid-cols-[minmax(0,_0rem),_minmax(0,_1fr),_minmax(0,_2.25rem)]"
+              "es:grid es:items-center es:gap-x-2 es:transition-[grid-template-columns,margin-block-end] es:duration-150",
+              innerContentAlign === "start" && "es:justify-items-start",
+              innerContentAlign === "center" && "es:justify-items-center",
+              innerContentAlign === "end" && "es:justify-items-end",
+              innerContentAlign === "stretch" && "es:justify-items-stretch",
+              detailsVisible ? "es:mb-2 es:grid-cols-[minmax(0,1.75rem)_minmax(0,1fr)_minmax(0,2.25rem)]" : "es:grid-cols-[minmax(0,0rem)_minmax(0,1fr)_minmax(0,2.25rem)]"
             ),
             children: [
               detailsVisible && /* @__PURE__ */ jsx(DefaultTooltip, {}),
-              /* @__PURE__ */ jsx("div", { className: clsx(detailsVisible ? "es-uic-col-start-2 es-uic-col-end-2" : "es-uic-col-span-full"), children: children({
+              /* @__PURE__ */ jsx("div", { className: clsx(detailsVisible ? "es:col-start-2 es:col-end-2" : "es:col-span-full"), children: children({
                 breakpoint: "_default",
                 currentValue: value == null ? void 0 : value["_default"],
                 handleChange: (newValue) => onChange({
@@ -327,16 +327,16 @@ const Responsive = (props) => {
           AnimatedVisibility,
           {
             className: clsx(
-              "es-uic-mb-2 es-uic-grid es-uic-grid-cols-[minmax(0,_1.75rem),_minmax(0,_1fr),_minmax(0,_2.25rem)] es-uic-items-center es-uic-gap-x-2",
-              innerContentAlign === "start" && "es-uic-justify-items-start",
-              innerContentAlign === "center" && "es-uic-justify-items-center",
-              innerContentAlign === "end" && "es-uic-justify-items-end",
-              innerContentAlign === "stretch" && "es-uic-justify-items-stretch"
+              "es:mb-2 es:grid es:grid-cols-[minmax(0,1.75rem)_minmax(0,1fr)_minmax(0,2.25rem)] es:items-center es:gap-x-2",
+              innerContentAlign === "start" && "es:justify-items-start",
+              innerContentAlign === "center" && "es:justify-items-center",
+              innerContentAlign === "end" && "es:justify-items-end",
+              innerContentAlign === "stretch" && "es:justify-items-stretch"
             ),
             visible: detailsVisible,
             children: [
               /* @__PURE__ */ jsx(DefaultTooltip, {}),
-              /* @__PURE__ */ jsx("div", { className: "es-uic-col-start-2 es-uic-col-end-2", children: children({
+              /* @__PURE__ */ jsx("div", { className: "es:col-start-2 es:col-end-2", children: children({
                 breakpoint: "_default",
                 currentValue: value == null ? void 0 : value["_default"],
                 handleChange: (newValue) => onChange({
@@ -355,7 +355,7 @@ const Responsive = (props) => {
           AnimatedVisibility,
           {
             visible: detailsVisible,
-            className: "es-uic-space-y-2",
+            className: "es:space-y-2",
             children: breakpointsToMap.map((breakpoint, i) => {
               var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
               const realBreakpointName = breakpoint.replace("max-", "");
@@ -366,11 +366,11 @@ const Responsive = (props) => {
                 "div",
                 {
                   className: clsx(
-                    "es-uic-grid es-uic-grid-cols-[minmax(0,_auto),_minmax(0,_1fr),_minmax(0,_2.25rem)] es-uic-items-center es-uic-gap-x-2",
-                    innerContentAlign === "start" && "es-uic-justify-items-start",
-                    innerContentAlign === "center" && "es-uic-justify-items-center",
-                    innerContentAlign === "end" && "es-uic-justify-items-end",
-                    innerContentAlign === "stretch" && "es-uic-justify-items-stretch"
+                    "es:grid es:grid-cols-[minmax(0,auto)_minmax(0,1fr)_minmax(0,2.25rem)] es:items-center es:gap-x-2",
+                    innerContentAlign === "start" && "es:justify-items-start",
+                    innerContentAlign === "center" && "es:justify-items-center",
+                    innerContentAlign === "end" && "es:justify-items-end",
+                    innerContentAlign === "stretch" && "es:justify-items-stretch"
                   ),
                   children: [
                     /* @__PURE__ */ jsx(
@@ -380,9 +380,9 @@ const Responsive = (props) => {
                         theme: "light",
                         offset: 7.5,
                         arrow: true,
-                        text: /* @__PURE__ */ jsxs("div", { className: "es-uic-max-w-96 es-uic-p-1", children: [
-                          /* @__PURE__ */ jsx("span", { className: "es-uic-block es-uic-font-semibold", children: ((_a = breakpointUiData == null ? void 0 : breakpointUiData[realBreakpointName]) == null ? void 0 : _a.label) ?? upperFirst(realBreakpointName) }),
-                          /* @__PURE__ */ jsxs("span", { className: "es-uic-block es-uic-text-balance es-uic-tabular-nums", children: [
+                        text: /* @__PURE__ */ jsxs("div", { className: "es:max-w-96 es:p-1", children: [
+                          /* @__PURE__ */ jsx("span", { className: "es:block es:font-semibold", children: ((_a = breakpointUiData == null ? void 0 : breakpointUiData[realBreakpointName]) == null ? void 0 : _a.label) ?? upperFirst(realBreakpointName) }),
+                          /* @__PURE__ */ jsxs("span", { className: "es:block es:text-balance es:tabular-nums", children: [
                             !isDesktopFirst && /* @__PURE__ */ jsxs(Fragment, { children: [
                               !belowOverride && typeof value[breakpoint] !== "undefined" && sprintf(__("Applied when the browser width is %dpx or more.", "eightshift-ui-components"), breakpointData[realBreakpointName]),
                               belowOverride && typeof value[breakpoint] !== "undefined" && sprintf(
@@ -402,8 +402,8 @@ const Responsive = (props) => {
                               typeof value[breakpoint] === "undefined" && sprintf(__("Up to %dpx", "eightshift-ui-components"), breakpointData[breakpoint == null ? void 0 : breakpoint.replace("max-", "")])
                             ] })
                           ] }),
-                          typeof value[breakpoint] === "undefined" && /* @__PURE__ */ jsx("span", { className: "es-uic-mt-2 es-uic-block es-uic-font-medium es-uic-italic", children: __("Not set", "eightshift-ui-components") }),
-                          typeof value[breakpoint] !== "undefined" && /* @__PURE__ */ jsxs("div", { className: "es-uic-mx-auto es-uic-mt-2", children: [
+                          typeof value[breakpoint] === "undefined" && /* @__PURE__ */ jsx("span", { className: "es:mt-2 es:block es:font-medium es:italic", children: __("Not set", "eightshift-ui-components") }),
+                          typeof value[breakpoint] !== "undefined" && /* @__PURE__ */ jsxs("div", { className: "es:mx-auto es:mt-2", children: [
                             !isDesktopFirst && /* @__PURE__ */ jsx(
                               BreakpointPreview,
                               {
@@ -473,8 +473,8 @@ const Responsive = (props) => {
                           "div",
                           {
                             className: clsx(
-                              "es-uic-flex es-uic-size-7 es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-border es-uic-p-0.5 es-uic-shadow-sm es-uic-transition-colors [&>svg]:es-uic-size-5",
-                              typeof value[breakpoint] !== "undefined" ? "es-uic-border-gray-200 es-uic-bg-gray-50 es-uic-text-gray-700" : "es-uic-border-gray-100 es-uic-bg-white es-uic-text-gray-500"
+                              "es:flex es:size-7 es:items-center es:justify-center es:rounded es:border es:p-0.5 es:shadow-sm es:transition-colors es:icon:size-5",
+                              typeof value[breakpoint] !== "undefined" ? "es:border-secondary-200 es:bg-secondary-50 es:text-secondary-700" : "es:border-secondary-100 es:bg-white es:text-secondary-500"
                             ),
                             children: ((_r = icons) == null ? void 0 : _r[(_q = breakpointUiData == null ? void 0 : breakpointUiData[realBreakpointName]) == null ? void 0 : _q.icon]) ?? ((_s = breakpointUiData == null ? void 0 : breakpointUiData[realBreakpointName]) == null ? void 0 : _s.icon) ?? ((_t = icons) == null ? void 0 : _t[`screen${upperFirst(realBreakpointName)}`])
                           }
@@ -517,16 +517,16 @@ const Responsive = (props) => {
           "div",
           {
             className: clsx(
-              "es-uic-grid es-uic-items-center es-uic-gap-x-2 es-uic-transition-[grid-template-columns,_margin-block-start] es-uic-duration-150",
-              innerContentAlign === "start" && "es-uic-justify-items-start",
-              innerContentAlign === "center" && "es-uic-justify-items-center",
-              innerContentAlign === "end" && "es-uic-justify-items-end",
-              innerContentAlign === "stretch" && "es-uic-justify-items-stretch",
-              detailsVisible ? "!es-uic-mt-2 es-uic-grid-cols-[minmax(0,_1.75rem),_minmax(0,_1fr),_minmax(0,_2.25rem)]" : "es-uic-grid-cols-[minmax(0,_0rem),_minmax(0,_1fr),_minmax(0,_2.25rem)]"
+              "es:grid es:items-center es:gap-x-2 es:transition-[grid-template-columns,margin-block-start] es:duration-150",
+              innerContentAlign === "start" && "es:justify-items-start",
+              innerContentAlign === "center" && "es:justify-items-center",
+              innerContentAlign === "end" && "es:justify-items-end",
+              innerContentAlign === "stretch" && "es:justify-items-stretch",
+              detailsVisible ? "es:mt-2! es:grid-cols-[minmax(0,1.75rem)_minmax(0,1fr)_minmax(0,2.25rem)]" : "es:grid-cols-[minmax(0,0rem)_minmax(0,1fr)_minmax(0,2.25rem)]"
             ),
             children: [
               detailsVisible && /* @__PURE__ */ jsx(DefaultTooltip, {}),
-              /* @__PURE__ */ jsx("div", { className: clsx(detailsVisible ? "es-uic-col-start-2 es-uic-col-end-2" : "es-uic-col-span-full"), children: children({
+              /* @__PURE__ */ jsx("div", { className: clsx(detailsVisible ? "es:col-start-2 es:col-end-2" : "es:col-span-full"), children: children({
                 breakpoint: "_default",
                 currentValue: value == null ? void 0 : value["_default"],
                 handleChange: (newValue) => onChange({
@@ -544,16 +544,16 @@ const Responsive = (props) => {
           AnimatedVisibility,
           {
             className: clsx(
-              "es-uic-grid es-uic-grid-cols-[minmax(0,_1.75rem),_minmax(0,_1fr),_minmax(0,_2.25rem)] es-uic-items-center es-uic-gap-x-2 es-uic-pt-1",
-              innerContentAlign === "start" && "es-uic-justify-items-start",
-              innerContentAlign === "center" && "es-uic-justify-items-center",
-              innerContentAlign === "end" && "es-uic-justify-items-end",
-              innerContentAlign === "stretch" && "es-uic-justify-items-stretch"
+              "es:grid es:grid-cols-[minmax(0,1.75rem)_minmax(0,1fr)_minmax(0,2.25rem)] es:items-center es:gap-x-2 es:pt-1",
+              innerContentAlign === "start" && "es:justify-items-start",
+              innerContentAlign === "center" && "es:justify-items-center",
+              innerContentAlign === "end" && "es:justify-items-end",
+              innerContentAlign === "stretch" && "es:justify-items-stretch"
             ),
             visible: detailsVisible,
             children: [
               /* @__PURE__ */ jsx(DefaultTooltip, {}),
-              /* @__PURE__ */ jsx("div", { className: "es-uic-col-start-2 es-uic-col-end-2", children: children({
+              /* @__PURE__ */ jsx("div", { className: "es:col-start-2 es:col-end-2", children: children({
                 breakpoint: "_default",
                 currentValue: value == null ? void 0 : value["_default"],
                 handleChange: (newValue) => onChange({

package/dist/components/responsive-preview/responsive-preview.js

@@ -96,8 +96,8 @@ const ResponsivePreview = (props) => {
       }
     ];
   }
-  return /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-min-w-72 es-uic-flex-col es-uic-items-start es-uic-gap-4 es-uic-p-2 es-uic-text-sm", children: [
-    /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-w-full es-uic-items-center es-uic-gap-2.5", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "es:flex es:min-w-72 es:flex-col es:items-start es:gap-4 es:p-2 es:text-sm", children: [
+    /* @__PURE__ */ jsxs("div", { className: "es:flex es:w-full es:items-center es:gap-2.5", children: [
       /* @__PURE__ */ jsx(
         RichLabel,
         {
@@ -105,9 +105,9 @@ const ResponsivePreview = (props) => {
           label: __("Responsive preview", "eightshift-ui-components")
         }
       ),
-      /* @__PURE__ */ jsx("span", { className: "es-uic-ml-auto es-uic-select-none es-uic-rounded es-uic-bg-gray-100 es-uic-px-1 es-uic-py-0.5 es-uic-text-xs es-uic-text-gray-500", children: isDesktopFirst ? __("Desktop-first", "eightshift-ui-components") : __("Mobile-first", "eightshift-ui-components") })
+      /* @__PURE__ */ jsx("span", { className: "es:ml-auto es:select-none es:rounded es:bg-secondary-100 es:px-1 es:py-0.5 es:text-xs es:text-secondary-500", children: isDesktopFirst ? __("Desktop-first", "eightshift-ui-components") : __("Mobile-first", "eightshift-ui-components") })
     ] }),
-    previewItems.length === 0 && /* @__PURE__ */ jsx("span", { className: "es-uic-text-sm es-uic-italic es-uic-text-gray-500", children: __("No overrides applied", "eightshift-ui-components") }),
+    previewItems.length === 0 && /* @__PURE__ */ jsx("span", { className: "es:text-sm es:italic es:text-secondary-500", children: __("No overrides applied", "eightshift-ui-components") }),
     /* @__PURE__ */ jsx(
       BreakpointPreview,
       {

package/dist/components/rich-label/rich-label.js

@@ -14,6 +14,8 @@ import { c as clsx } from "../../lite-DVmmD_-j.js";
  * @param {boolean} [props.contentsOnly] - If `true`, only the label (/icon/subtitle) will be rendered, without any wrapping elements. Useful if you want to provide your own layout.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  * @param {boolean} [props.noColor] - If `true`, colors on text won't be set, opacity will be used instead.
+ * @param {boolean} [props.fullSizeSubtitle] - If `true`, the subtitle is the same size as the label.
+ * @param {boolean} [props.inlineSubtitle] - If `true`, the subtitle is shown after the label instead of below it.
  *
  * @returns {JSX.Element} The RichLabel component.
  *
@@ -26,33 +28,33 @@ import { c as clsx } from "../../lite-DVmmD_-j.js";
  * @preserve
  */
 const RichLabel = (props) => {
-  const { icon, label, subtitle, as, className, fullWidth = false, contentsOnly, hidden, noColor } = props;
+  const { icon, label, subtitle, as, className, fullWidth = false, contentsOnly, hidden, noColor, fullSizeSubtitle, inlineSubtitle } = props;
   if (hidden) {
     return null;
   }
   const ComponentToRender = as ?? "div";
   if (contentsOnly) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      icon && /* @__PURE__ */ jsx("span", { className: clsx("[&>svg]:es-uic-size-5.5", !noColor && "es-uic-text-slate-500"), children: icon }),
-      label && /* @__PURE__ */ jsx("span", { className: clsx("es-uic-text-balance", !noColor && "es-uic-text-gray-800"), children: label }),
-      subtitle && /* @__PURE__ */ jsx("span", { className: clsx("es-uic-text-balance es-uic-text-xs es-uic-opacity-65", !noColor && "es-uic-text-gray-800"), children: subtitle })
+      icon && /* @__PURE__ */ jsx("span", { className: clsx("es:[&>svg]:size-5.5", !noColor && "es:text-slate-500"), children: icon }),
+      label && /* @__PURE__ */ jsx("span", { className: clsx("es:text-balance", !noColor && "es:text-secondary-800"), children: label }),
+      subtitle && /* @__PURE__ */ jsx("span", { className: clsx("es:text-balance es:text-xs es:opacity-65", !noColor && "es:text-secondary-800"), children: subtitle })
     ] });
   }
   return /* @__PURE__ */ jsxs(
     ComponentToRender,
     {
       className: clsx(
-        "es-uic-flex es-uic-items-center es-uic-gap-1.5 es-uic-text-sm",
-        !noColor && "es-uic-text-gray-800 [&>span>svg]:es-uic-text-slate-500",
-        noColor && "[&>span>svg]:es-uic-opacity-80",
-        fullWidth && "es-uic-grow",
+        "es:flex es:items-center es:gap-1.5 es:text-sm",
+        !noColor && "es:text-secondary-800 es:[&>span>svg]:text-slate-500",
+        noColor && "es:[&>span>svg]:opacity-80",
+        fullWidth && "es:grow",
         className
       ),
       children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "[&>svg]:es-uic-size-5.5", children: icon }),
-        (label || subtitle) && /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-flex-col es-uic-items-start es-uic-text-balance es-uic-text-start", children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "es:[&>svg]:size-5.5", children: icon }),
+        (label || subtitle) && /* @__PURE__ */ jsxs("div", { className: clsx("es:flex es:items-start es:text-balance es:text-start", inlineSubtitle ? "es:gap-1.5" : "es:flex-col"), children: [
           label && /* @__PURE__ */ jsx("span", { children: label }),
-          subtitle && /* @__PURE__ */ jsx("span", { className: "es-uic-text-xs es-uic-opacity-65", children: subtitle })
+          subtitle && /* @__PURE__ */ jsx("span", { className: clsx(!fullSizeSubtitle && "es:text-xs", "es:opacity-65"), children: subtitle })
         ] })
       ]
     }

package/dist/components/select/async-multi-select.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { useId } from "react";
-import { A as AsyncSelect$1 } from "../../react-select-async.esm-BZwl7Ddb.js";
-import { D as DndContext, g as getDragEndHandler, S as SortableContext, a as getMultiValue, b as getMultiValueRemove } from "../../multi-select-components-2Ax71j9a.js";
+import { A as AsyncSelect$1 } from "../../react-select-async.esm-DcVLw9X5.js";
+import { D as DndContext, g as getDragEndHandler, S as SortableContext, a as getMultiValue, b as getMultiValueRemove } from "../../multi-select-components-CkF3LyTF.js";
 import { r as restrictToParentElement } from "../../modifiers.esm-BuJQPI1X.js";
 import { CustomSelectDefaultMultiValueRemove, CustomSelectDefaultDropdownIndicator, CustomSelectDefaultClearIndicator } from "./custom-select-default-components.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { eightshiftSelectClasses } from "./styles.js";
-import { c as components } from "../../index-641ee5b8.esm-DRaWil7u.js";
+import { c as components } from "../../index-641ee5b8.esm-DbdaYaxR.js";
 /**
  * Multi-select menu with async loading and re-ordering.
  *

package/dist/components/select/async-single-select.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import { A as AsyncSelect$1 } from "../../react-select-async.esm-BZwl7Ddb.js";
+import { A as AsyncSelect$1 } from "../../react-select-async.esm-DcVLw9X5.js";
 import { CustomSelectDefaultDropdownIndicator, CustomSelectDefaultClearIndicator } from "./custom-select-default-components.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { eightshiftSelectClasses } from "./styles.js";
-import { c as components } from "../../index-641ee5b8.esm-DRaWil7u.js";
+import { c as components } from "../../index-641ee5b8.esm-DbdaYaxR.js";
 /**
  * Select menu with async loading.
  *

package/dist/components/select/custom-select-default-components.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { c as components } from "../../index-641ee5b8.esm-DRaWil7u.js";
+import { c as components } from "../../index-641ee5b8.esm-DbdaYaxR.js";
 /**
  * Default dropdown indicator for CustomSelect.
  *
@@ -12,7 +12,7 @@ import { c as components } from "../../index-641ee5b8.esm-DRaWil7u.js";
  */
 const CustomSelectDefaultDropdownIndicator = (props) => {
   return /* @__PURE__ */ jsx(components.DropdownIndicator, { ...props, children: React__default.cloneElement(icons.dropdownCaretAlt, {
-    className: clsx(props.selectProps.menuIsOpen && "-es-uic-scale-y-100 ")
+    className: clsx(props.selectProps.menuIsOpen && "es:-scale-y-100 ")
   }) });
 };
 /**
@@ -30,7 +30,7 @@ const CustomSelectDefaultClearIndicator = (props) => /* @__PURE__ */ jsx(compone
  *
  * @preserve
  */
-const CustomSelectDefaultMultiValueRemove = (props) => /* @__PURE__ */ jsx(components.MultiValueRemove, { ...props, children: React__default.cloneElement(icons.clear, { className: "es-uic-size-4" }) });
+const CustomSelectDefaultMultiValueRemove = (props) => /* @__PURE__ */ jsx(components.MultiValueRemove, { ...props, children: React__default.cloneElement(icons.clear, { className: "es:size-4" }) });
 export {
   CustomSelectDefaultClearIndicator,
   CustomSelectDefaultDropdownIndicator,

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

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { g, a, b } from "../../multi-select-components-2Ax71j9a.js";
+import { g, a, b } from "../../multi-select-components-CkF3LyTF.js";
 import "../../lite-DVmmD_-j.js";
 export {
   g as getDragEndHandler,

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

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { useId } from "react";
-import { S as StateManagedSelect$1 } from "../../react-select.esm-DI0eSkd8.js";
-import { D as DndContext, g as getDragEndHandler, S as SortableContext, a as getMultiValue, b as getMultiValueRemove } from "../../multi-select-components-2Ax71j9a.js";
+import { S as StateManagedSelect$1 } from "../../react-select.esm-OZ0cmTjg.js";
+import { D as DndContext, g as getDragEndHandler, S as SortableContext, a as getMultiValue, b as getMultiValueRemove } from "../../multi-select-components-CkF3LyTF.js";
 import { r as restrictToParentElement } from "../../modifiers.esm-BuJQPI1X.js";
 import { CustomSelectDefaultMultiValueRemove, CustomSelectDefaultDropdownIndicator, CustomSelectDefaultClearIndicator } from "./custom-select-default-components.js";
 import { getValue } from "./shared.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { eightshiftSelectClasses } from "./styles.js";
-import { c as components } from "../../index-641ee5b8.esm-DRaWil7u.js";
+import { c as components } from "../../index-641ee5b8.esm-DbdaYaxR.js";
 /**
  * Multi-select menu with re-orderable items.
  *

package/dist/components/select/react-select-component-wrappers.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { c as components } from "../../index-641ee5b8.esm-DRaWil7u.js";
+import { c as components } from "../../index-641ee5b8.esm-DbdaYaxR.js";
 /**
  * Custom dropdown indicator for CustomSelect.
  *

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

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import { S as StateManagedSelect$1 } from "../../react-select.esm-DI0eSkd8.js";
+import { S as StateManagedSelect$1 } from "../../react-select.esm-OZ0cmTjg.js";
 import { CustomSelectDefaultDropdownIndicator, CustomSelectDefaultClearIndicator } from "./custom-select-default-components.js";
 import { getValue } from "./shared.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { eightshiftSelectClasses } from "./styles.js";
-import { c as components } from "../../index-641ee5b8.esm-DRaWil7u.js";
+import { c as components } from "../../index-641ee5b8.esm-DbdaYaxR.js";
 /**
  * Select menu.
  *