@eightshift/ui-components 0.0.1 → 0.0.3

package/dist/components/responsive/responsive.js

@@ -1,15 +1,14 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import { D as DecorativeTooltip } from "../../tooltip-CkCndvTI.js";
-import { classnames } from "../../utilities/classnames.js";
-import { _ as __, s as sprintf } from "../../default-i18n-BhE-OUmt.js";
+import { D as DecorativeTooltip } from "../../tooltip-T6H9uF-Z.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { _ as __, s as sprintf } from "../../default-i18n-Bk1GxDHz.js";
 import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
 import { upperFirst } from "../../utilities/text-helpers.js";
 import { icons } from "../../icons/icons.js";
-import { Menu, MenuItem, MenuSeparator } from "../menu/menu.js";
-import { T as TriggeredPopover } from "../../popover-Dx3vKXUX.js";
+import { Menu, MenuItem, MenuSeparator, SubMenuItem } from "../menu/menu.js";
 import { ResponsivePreview } from "../responsive-preview/responsive-preview.js";
-import { a as ButtonGroup, B as Button } from "../../button-BkkdyHfJ.js";
+import { a as ButtonGroup, B as Button } from "../../button-idVI4jmd.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { ToggleButton } from "../toggle-button/toggle-button.js";
@@ -23,6 +22,8 @@ import { BaseControl } from "../base-control/base-control.js";
  * - `currentValue: any` - Current value.
  * - `handleChange: Function<(attributeName: string, value: any) => void>` - A function to change the value for the breakpoint..
  * - `options: Object<string, any>` - (Optional) Options list passed to the `ResponsiveLegacy` component. (optional)
+ * - `isInlineCollapsedView: boolean` - (Optional) `true` if in `inline` mode, and the details are collapsed.
+ * - `isInlineExpandedView: boolean` - (Optional) `true` if in `inline` mode, and the details are shown.
  *
  * @component
  * @param {Object} props - Component props.
@@ -36,6 +37,9 @@ import { BaseControl } from "../base-control/base-control.js";
  * @param {string[]} props.breakpoints - Breakpoints to use.
  * @param {string[]} [props.desktopFirstBreakpoints] - Breakpoints to use in desktop-first mode. If not provided, the breakpoints will be used in reverse order.
  * @param {Object<string, number>} [props.breakpointData] - Currently used breakpoint data. `{ [breakpoint: string]: number }`.
+ * @param {boolean} [props.noModeSelect] - If `true`, the mode selection (desktop-first/mobile-first) is hidden.
+ * @param {boolean} [props.inline] - If `true`, the default breakpoint is shown inline with the label. In the expanded state, all breakpoints are shown below the label.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The Responsive component.
  *
@@ -74,16 +78,26 @@ const Responsive = (props) => {
     label,
     subtitle,
     options,
-    breakpoints,
-    desktopFirstBreakpoints = breakpoints.map((bp) => `max-${bp}`),
+    breakpoints: rawBreakpoints,
+    desktopFirstBreakpoints: rawDesktopFirstBreakpoints,
     breakpointData,
-    children
+    noModeSelect,
+    inline,
+    children,
+    hidden
   } = props;
+  const breakpoints = rawBreakpoints.slice(1);
+  const desktopFirstBreakpoints = (rawDesktopFirstBreakpoints ?? rawBreakpoints.slice(0, -1)).map(
+    (breakpoint) => breakpoint.startsWith("max-") ? breakpoint : `max-${breakpoint}`
+  );
   const [detailsVisible, setDetailsVisible] = useState(false);
   const isDesktopFirst = (value == null ? void 0 : value["_mobileFirst"]) === true;
-  const firstMobileFirstOverride = breakpoints.find((breakpoint) => value == null ? void 0 : value[breakpoint]);
-  const lastDesktopFirstOverride = desktopFirstBreakpoints.toReversed().find((breakpoint) => value == null ? void 0 : value[breakpoint]);
+  const firstMobileFirstOverride = breakpoints.find((breakpoint) => typeof (value == null ? void 0 : value[breakpoint]) !== "undefined");
+  const lastDesktopFirstOverride = desktopFirstBreakpoints.toReversed().find((breakpoint) => typeof (value == null ? void 0 : value[breakpoint]) !== "undefined");
   const breakpointsToMap = isDesktopFirst ? desktopFirstBreakpoints : breakpoints;
+  if (hidden) {
+    return null;
+  }
   const DefaultTooltip = () => {
     var _a, _b, _c, _d;
     return /* @__PURE__ */ jsx(
@@ -98,17 +112,17 @@ const Responsive = (props) => {
           /* @__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: [
             !firstMobileFirstOverride && !lastDesktopFirstOverride && __("Always applied, regardless of browser width.", "eightshift-ui-components"),
-            firstMobileFirstOverride && sprintf(
+            firstMobileFirstOverride && !isDesktopFirst && sprintf(
               __("Applies when the browser width is %dpx or narrower.", "eightshift-ui-components"),
               breakpointData[firstMobileFirstOverride] - 1
             ),
-            lastDesktopFirstOverride && sprintf(
+            lastDesktopFirstOverride && isDesktopFirst && sprintf(
               __("Applies when the browser width is %dpx or more.", "eightshift-ui-components"),
               breakpointData[breakpoints.at(-1)]
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "es-uic-mx-auto", children: [
-            firstMobileFirstOverride && /* @__PURE__ */ jsx(
+            firstMobileFirstOverride && !isDesktopFirst && /* @__PURE__ */ jsx(
               BreakpointPreview,
               {
                 blocks: [
@@ -128,7 +142,7 @@ const Responsive = (props) => {
                 ]
               }
             ),
-            lastDesktopFirstOverride && /* @__PURE__ */ jsx(
+            lastDesktopFirstOverride && isDesktopFirst && /* @__PURE__ */ jsx(
               BreakpointPreview,
               {
                 blocks: [
@@ -150,7 +164,7 @@ const Responsive = (props) => {
             )
           ] })
         ] }),
-        children: /* @__PURE__ */ jsx("div", { className: "es-uic-flex es-uic-size-8 es-uic-cursor-help es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-bg-gray-200 es-uic-p-0.5 es-uic-text-gray-950 [&>svg]:es-uic-size-4", children: icons.play })
+        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(isDesktopFirst ? rawBreakpoints.at(-1) : rawBreakpoints.at(0))}`] })
       }
     );
   };
@@ -161,142 +175,172 @@ const Responsive = (props) => {
       label,
       subtitle,
       help,
-      actions: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
-        /* @__PURE__ */ jsxs(
-          Menu,
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        inline && /* @__PURE__ */ jsx(
+          AnimatedVisibility,
           {
-            tooltip: __("Responsive options", "eightshift-ui-components"),
-            popoverProps: { placement: "bottom right" },
-            children: [
-              /* @__PURE__ */ jsx(
-                MenuItem,
-                {
-                  className: "!es-uic-pb-0 !es-uic-pt-1",
-                  disabled: true,
-                  children: __("Breakpoint mode", "eightshift-ui-components")
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                MenuItem,
-                {
-                  selected: !isDesktopFirst,
-                  onClick: () => {
-                    const thingsToDelete = [...breakpoints, ...desktopFirstBreakpoints].reduce(
-                      (prev, curr) => ({ ...prev, [curr]: void 0 }),
-                      {}
-                    );
-                    onChange({
-                      ...value,
-                      ...thingsToDelete,
-                      _mobileFirst: false
-                    });
-                  },
-                  children: /* @__PURE__ */ jsx(
-                    RichLabel,
+            className: "es-uic-mr-0.5",
+            visible: !detailsVisible,
+            transition: "scaleFade",
+            noInitial: true,
+            children: children({
+              breakpoint: "_default",
+              currentValue: value == null ? void 0 : value["_default"],
+              handleChange: (newValue) => onChange({
+                ...value,
+                _default: newValue
+              }),
+              options,
+              key: Object.keys(value),
+              isInlineCollapsedView: true
+            })
+          },
+          "_default-inline"
+        ),
+        /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+          /* @__PURE__ */ jsx(
+            ToggleButton,
+            {
+              icon: isDesktopFirst ? icons.responsiveOverridesAlt : icons.responsiveOverridesAlt2,
+              onChange: () => setDetailsVisible(!detailsVisible),
+              selected: detailsVisible,
+              tooltip: detailsVisible ? __("Hide responsive overrides", "eightshift-ui-components") : __("Show responsive overrides", "eightshift-ui-components")
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Menu,
+            {
+              tooltip: __("Responsive options", "eightshift-ui-components"),
+              popoverProps: { placement: "bottom right" },
+              triggerProps: { className: "es-uic-w-5.5 es-uic-stroke-[1.25]" },
+              triggerIcon: icons.dropdownCaretAlt,
+              children: [
+                !noModeSelect && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    MenuItem,
                     {
-                      label: __("Mobile-first", "eightshift-ui-components"),
-                      subtitle: __("Recommended", "eightshift-ui-components")
+                      className: "!es-uic-pb-0 !es-uic-pt-1",
+                      disabled: true,
+                      children: __("Breakpoint mode", "eightshift-ui-components")
                     }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                MenuItem,
-                {
-                  selected: isDesktopFirst,
-                  onClick: () => {
-                    const thingsToDelete = [...breakpoints, ...desktopFirstBreakpoints].reduce(
-                      (prev, curr) => ({ ...prev, [curr]: void 0 }),
-                      {}
-                    );
-                    onChange({
-                      ...value,
-                      ...thingsToDelete,
-                      _mobileFirst: true
-                    });
-                  },
-                  children: __("Desktop-first", "eightshift-ui-components")
-                }
-              ),
-              /* @__PURE__ */ jsx(MenuSeparator, {}),
-              /* @__PURE__ */ jsx(
-                MenuItem,
-                {
-                  icon: icons.clearAlt,
-                  onClick: () => {
-                    const thingsToDelete = [...breakpoints, ...desktopFirstBreakpoints].reduce(
-                      (prev, curr) => ({ ...prev, [curr]: void 0 }),
-                      {}
-                    );
-                    onChange({
-                      ...value,
-                      ...thingsToDelete
-                    });
-                  },
-                  children: __("Clear all overrides", "eightshift-ui-components")
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          TriggeredPopover,
-          {
-            "aria-label": props["aria-label"] ?? __("Breakpoint preview", "eightshift-ui-components"),
-            trigger: /* @__PURE__ */ jsx(
-              Button,
-              {
-                disabled: !Object.keys(value).some((key) => !(key == null ? void 0 : key.startsWith("_")) && (value == null ? void 0 : value[key]) !== void 0),
-                icon: icons.previewResponsive,
-                tooltip: __("Breakpoint preview", "eightshift-ui-components")
-              }
-            ),
-            children: /* @__PURE__ */ jsx(
-              ResponsivePreview,
-              {
-                value,
-                isDesktopFirst,
-                breakpoints,
-                desktopFirstBreakpoints,
-                options,
-                breakpointData
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ToggleButton,
-          {
-            icon: isDesktopFirst ? icons.responsiveOverridesAlt : icons.responsiveOverridesAlt2,
-            onChange: () => setDetailsVisible(!detailsVisible),
-            selected: detailsVisible,
-            tooltip: detailsVisible ? __("Hide responsive overrides", "eightshift-ui-components") : __("Show responsive overrides", "eightshift-ui-components")
-          }
-        )
+                  ),
+                  /* @__PURE__ */ jsx(
+                    MenuItem,
+                    {
+                      selected: !isDesktopFirst,
+                      onClick: () => {
+                        onChange({
+                          _default: value["_default"],
+                          _mobileFirst: false
+                        });
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        RichLabel,
+                        {
+                          label: __("Mobile-first", "eightshift-ui-components"),
+                          subtitle: __("Recommended", "eightshift-ui-components")
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    MenuItem,
+                    {
+                      selected: isDesktopFirst,
+                      onClick: () => {
+                        onChange({
+                          _default: value["_default"],
+                          _mobileFirst: true
+                        });
+                      },
+                      children: __("Desktop-first", "eightshift-ui-components")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(MenuSeparator, {})
+                ] }),
+                Object.keys(value).some((key) => !(key == null ? void 0 : key.startsWith("_")) && typeof (value == null ? void 0 : value[key]) !== "undefined") && /* @__PURE__ */ jsx(
+                  SubMenuItem,
+                  {
+                    trigger: /* @__PURE__ */ jsx(MenuItem, { icon: icons.previewResponsive, children: __("Responsive preview", "eightshift-ui-components") }),
+                    children: /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: /* @__PURE__ */ jsx(
+                      ResponsivePreview,
+                      {
+                        value,
+                        isDesktopFirst,
+                        breakpoints,
+                        desktopFirstBreakpoints,
+                        options,
+                        breakpointData
+                      }
+                    ) })
+                  }
+                ),
+                Object.keys(value).some((key) => !(key == null ? void 0 : key.startsWith("_")) && typeof (value == null ? void 0 : value[key]) !== "undefined") && /* @__PURE__ */ jsx(MenuSeparator, {}),
+                /* @__PURE__ */ jsx(
+                  MenuItem,
+                  {
+                    icon: icons.clearAlt,
+                    onClick: () => {
+                      const newValue = { ...value };
+                      [...breakpoints, ...desktopFirstBreakpoints].forEach((breakpoint) => {
+                        delete newValue[breakpoint];
+                      });
+                      onChange(newValue);
+                    },
+                    children: __("Clear all overrides", "eightshift-ui-components")
+                  }
+                )
+              ]
+            }
+          )
+        ] })
       ] }),
       children: [
-        !isDesktopFirst && /* @__PURE__ */ jsxs(
+        !isDesktopFirst && !inline && /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classnames(
+            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",
-              detailsVisible ? "es-uic-mb-2 es-uic-grid-cols-[minmax(0,_2rem),_minmax(0,_1fr),_minmax(0,_2.25rem)]" : "es-uic-grid-cols-[minmax(0,_0rem),_minmax(0,_1fr),_minmax(0,_2.25rem)]"
+              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)]"
             ),
             children: [
               detailsVisible && /* @__PURE__ */ jsx(DefaultTooltip, {}),
-              /* @__PURE__ */ jsx("div", { className: classnames(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-uic-col-start-2 es-uic-col-end-2" : "es-uic-col-span-full"), children: children({
                 breakpoint: "_default",
                 currentValue: value == null ? void 0 : value["_default"],
                 handleChange: (newValue) => onChange({
                   ...value,
                   _default: newValue
                 }),
-                options
+                options,
+                key: Object.keys(value)
               }) })
             ]
           },
           "_default-mobile-first"
         ),
+        !isDesktopFirst && inline && /* @__PURE__ */ jsxs(
+          AnimatedVisibility,
+          {
+            className: "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",
+            visible: detailsVisible,
+            children: [
+              /* @__PURE__ */ jsx(DefaultTooltip, {}),
+              /* @__PURE__ */ jsx("div", { className: "es-uic-col-start-2 es-uic-col-end-2", children: children({
+                breakpoint: "_default",
+                currentValue: value == null ? void 0 : value["_default"],
+                handleChange: (newValue) => onChange({
+                  ...value,
+                  _default: newValue
+                }),
+                options,
+                key: Object.keys(value),
+                isInlineExpandedView: true
+              }) })
+            ]
+          },
+          "_default-mobile-first-inline"
+        ),
         /* @__PURE__ */ jsx(
           AnimatedVisibility,
           {
@@ -306,8 +350,8 @@ const Responsive = (props) => {
               var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
               const realBreakpointName = breakpoint.replace("max-", "");
               const filterBreakpoints = isDesktopFirst ? [...breakpointsToMap, "_default"] : ["_default", ...breakpointsToMap];
-              const aboveOverride = isDesktopFirst ? filterBreakpoints.slice(i + 1).find((breakpoint2) => value == null ? void 0 : value[breakpoint2]) : filterBreakpoints.slice(0, i + 1).toReversed().find((breakpoint2) => value == null ? void 0 : value[breakpoint2]);
-              const belowOverride = isDesktopFirst ? filterBreakpoints.slice(0, i).toReversed().find((breakpoint2) => value == null ? void 0 : value[breakpoint2]) : filterBreakpoints.slice(i + 2).find((breakpoint2) => value == null ? void 0 : value[breakpoint2]);
+              const aboveOverride = isDesktopFirst ? filterBreakpoints.slice(i + 1).find((breakpoint2) => typeof (value == null ? void 0 : value[breakpoint2]) !== "undefined") : filterBreakpoints.slice(0, i + 1).toReversed().find((breakpoint2) => typeof (value == null ? void 0 : value[breakpoint2]) !== "undefined");
+              const belowOverride = isDesktopFirst ? filterBreakpoints.slice(0, i).toReversed().find((breakpoint2) => typeof (value == null ? void 0 : value[breakpoint2]) !== "undefined") : filterBreakpoints.slice(i + 2).find((breakpoint2) => typeof (value == null ? void 0 : value[breakpoint2]) !== "undefined");
               return /* @__PURE__ */ jsxs(
                 "div",
                 {
@@ -324,11 +368,11 @@ const Responsive = (props) => {
                           /* @__PURE__ */ jsx("span", { className: "es-uic-block es-uic-font-semibold", children: upperFirst(realBreakpointName) }),
                           /* @__PURE__ */ jsxs("span", { className: "es-uic-block es-uic-text-balance es-uic-tabular-nums", children: [
                             !isDesktopFirst && /* @__PURE__ */ jsxs(Fragment, { children: [
-                              !belowOverride && value[breakpoint] && sprintf(
+                              !belowOverride && typeof value[breakpoint] !== "undefined" && sprintf(
                                 __("Applied when the browser width is %dpx or more.", "eightshift-ui-components"),
                                 breakpointData[realBreakpointName]
                               ),
-                              belowOverride && value[breakpoint] && sprintf(
+                              belowOverride && typeof value[breakpoint] !== "undefined" && sprintf(
                                 __(
                                   "Applied when the browser width is between %dpx and %dpx.",
                                   "eightshift-ui-components"
@@ -336,14 +380,14 @@ const Responsive = (props) => {
                                 breakpointData[realBreakpointName],
                                 breakpointData[belowOverride] - 1
                               ),
-                              !value[breakpoint] && sprintf(__("From %dpx", "eightshift-ui-components"), breakpointData[realBreakpointName])
+                              typeof value[breakpoint] === "undefined" && sprintf(__("From %dpx", "eightshift-ui-components"), breakpointData[realBreakpointName])
                             ] }),
                             isDesktopFirst && /* @__PURE__ */ jsxs(Fragment, { children: [
-                              !belowOverride && value[breakpoint] && sprintf(
+                              !belowOverride && typeof value[breakpoint] !== "undefined" && sprintf(
                                 __("Applied when the browser width is %dpx or less.", "eightshift-ui-components"),
                                 breakpointData[realBreakpointName] - 1
                               ),
-                              belowOverride && value[breakpoint] && sprintf(
+                              belowOverride && typeof value[breakpoint] !== "undefined" && sprintf(
                                 __(
                                   "Applied when the browser width is between %dpx and %dpx.",
                                   "eightshift-ui-components"
@@ -351,26 +395,26 @@ const Responsive = (props) => {
                                 breakpointData[belowOverride == null ? void 0 : belowOverride.replace("max-", "")],
                                 breakpointData[realBreakpointName] - 1
                               ),
-                              !value[breakpoint] && sprintf(
+                              typeof value[breakpoint] === "undefined" && sprintf(
                                 __("Up to %dpx", "eightshift-ui-components"),
-                                breakpointData[belowOverride == null ? void 0 : belowOverride.replace("max-", "")]
+                                breakpointData[breakpoint == null ? void 0 : breakpoint.replace("max-", "")]
                               )
                             ] })
                           ] }),
-                          !value[breakpoint] && /* @__PURE__ */ jsx("span", { className: "es-uic-mt-2 es-uic-block es-uic-font-medium es-uic-italic", children: __("Not set", "eightshift-ui-components") }),
-                          value[breakpoint] && /* @__PURE__ */ jsxs("div", { className: "es-uic-mx-auto es-uic-mt-2", children: [
+                          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: [
                             !isDesktopFirst && /* @__PURE__ */ jsx(
                               BreakpointPreview,
                               {
                                 dotsStart: belowOverride,
                                 blocks: [
-                                  aboveOverride !== "_default" && {
+                                  aboveOverride !== "_default" && typeof (value == null ? void 0 : value[aboveOverride]) !== "undefined" && {
                                     breakpoint: aboveOverride,
                                     value: ((_a = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[aboveOverride]))) == null ? void 0 : _a.label) ?? upperFirst(value == null ? void 0 : value[aboveOverride]),
                                     dotsStart: !belowOverride,
                                     alignEnd: !belowOverride
                                   },
-                                  aboveOverride === "_default" && {
+                                  aboveOverride === "_default" && typeof (value == null ? void 0 : value["_default"]) !== "undefined" && {
                                     breakpoint: __("Default", "eightshift-ui-components"),
                                     value: ((_b = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value["_default"]))) == null ? void 0 : _b.label) ?? upperFirst(value == null ? void 0 : value["_default"]),
                                     dotsStart: !belowOverride,
@@ -383,7 +427,7 @@ const Responsive = (props) => {
                                     active: true,
                                     dotsEnd: !belowOverride
                                   },
-                                  belowOverride && {
+                                  belowOverride && typeof (value == null ? void 0 : value[belowOverride]) !== "undefined" && {
                                     breakpoint: belowOverride,
                                     value: ((_d = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[belowOverride]))) == null ? void 0 : _d.label) ?? upperFirst(value == null ? void 0 : value[belowOverride]),
                                     width: breakpointData[belowOverride],
@@ -400,7 +444,7 @@ const Responsive = (props) => {
                                 blocks: [
                                   belowOverride && {
                                     breakpoint: belowOverride == null ? void 0 : belowOverride.replace("max-", ""),
-                                    value: ((_e = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[belowOverride == null ? void 0 : belowOverride.replace("max-", "")]))) == null ? void 0 : _e.label) ?? upperFirst(value == null ? void 0 : value[belowOverride])
+                                    value: ((_e = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[belowOverride]))) == null ? void 0 : _e.label) ?? upperFirst(value == null ? void 0 : value[belowOverride])
                                   },
                                   {
                                     breakpoint: realBreakpointName,
@@ -427,9 +471,9 @@ const Responsive = (props) => {
                         children: /* @__PURE__ */ jsx(
                           "div",
                           {
-                            className: classnames(
-                              "es-uic-flex es-uic-size-8 es-uic-shrink-0 es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-bg-gray-100 es-uic-p-0.5 es-uic-text-gray-800",
-                              !value[breakpoint] && "[&>svg]:es-uic-opacity-25"
+                            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"
                             ),
                             children: (_j = icons) == null ? void 0 : _j[`screen${upperFirst(realBreakpointName)}`]
                           }
@@ -445,19 +489,19 @@ const Responsive = (props) => {
                           [breakpoint]: newValue
                         });
                       },
-                      options
+                      options,
+                      key: Object.keys(value)
                     }),
                     /* @__PURE__ */ jsx(
                       Button,
                       {
                         onPress: () => {
-                          onChange({
-                            ...value,
-                            [breakpoint]: void 0
-                          });
+                          const newValue = { ...value };
+                          delete newValue[breakpoint];
+                          onChange(newValue);
                         },
                         icon: icons.clearAlt,
-                        disabled: !(value == null ? void 0 : value[breakpoint]),
+                        disabled: typeof (value == null ? void 0 : value[breakpoint]) === "undefined",
                         type: "ghost"
                       }
                     )
@@ -468,27 +512,50 @@ const Responsive = (props) => {
             })
           }
         ),
-        isDesktopFirst && /* @__PURE__ */ jsxs(
+        isDesktopFirst && !inline && /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classnames(
+            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",
-              detailsVisible ? "!es-uic-mt-2 es-uic-grid-cols-[minmax(0,_2rem),_minmax(0,_1fr),_minmax(0,_2.25rem)]" : "es-uic-grid-cols-[minmax(0,_0rem),_minmax(0,_1fr),_minmax(0,_2.25rem)]"
+              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)]"
             ),
             children: [
               detailsVisible && /* @__PURE__ */ jsx(DefaultTooltip, {}),
-              /* @__PURE__ */ jsx("div", { className: classnames(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-uic-col-start-2 es-uic-col-end-2" : "es-uic-col-span-full"), children: children({
                 breakpoint: "_default",
                 currentValue: value == null ? void 0 : value["_default"],
                 handleChange: (newValue) => onChange({
                   ...value,
                   _default: newValue
                 }),
-                options
+                options,
+                key: Object.keys(value)
               }) })
             ]
           },
           "_default-desktop-first"
+        ),
+        isDesktopFirst && inline && /* @__PURE__ */ jsxs(
+          AnimatedVisibility,
+          {
+            className: "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",
+            visible: detailsVisible,
+            children: [
+              /* @__PURE__ */ jsx(DefaultTooltip, {}),
+              /* @__PURE__ */ jsx("div", { className: "es-uic-col-start-2 es-uic-col-end-2", children: children({
+                breakpoint: "_default",
+                currentValue: value == null ? void 0 : value["_default"],
+                handleChange: (newValue) => onChange({
+                  ...value,
+                  _default: newValue
+                }),
+                options,
+                key: Object.keys(value),
+                isInlineExpandedView: true
+              }) })
+            ]
+          },
+          "_default-desktop-first-inline"
         )
       ]
     }

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { _ as __ } from "../../default-i18n-BhE-OUmt.js";
+import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
 import { upperFirst } from "../../utilities/text-helpers.js";
 import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
 import { icons } from "../../icons/icons.js";
@@ -36,11 +36,13 @@ const ResponsivePreview = (props) => {
   const {
     value,
     isDesktopFirst,
-    breakpoints,
-    desktopFirstBreakpoints = breakpoints.map((bp) => `max-${bp}`),
+    breakpoints: rawBreakpoints,
+    desktopFirstBreakpoints: rawDesktopFirstBreakpoints,
     options,
     breakpointData
   } = props;
+  const breakpoints = rawBreakpoints.slice(1);
+  const desktopFirstBreakpoints = rawDesktopFirstBreakpoints ?? rawBreakpoints.slice(0, -1);
   const firstMobileFirstOverride = breakpoints.find((breakpoint) => value == null ? void 0 : value[breakpoint]);
   const lastDesktopFirstOverride = desktopFirstBreakpoints.toReversed().find((breakpoint) => value == null ? void 0 : value[breakpoint]);
   let previewItems = [];