import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { useState } from "react";
import { DecorativeTooltip } from "../tooltip/tooltip.js";
import { c as clsx } from "../../lite-DVmmD_-j.js";
import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
import { upperFirst } from "../../utilities/es-dash.js";
import { icons } from "../../icons/icons.js";
import { Menu, MenuSectionHeader, MenuItem, MenuSeparator, SubMenuItem } from "../menu/menu.js";
import { ResponsivePreview } from "../responsive-preview/responsive-preview.js";
import { Button, ButtonGroup } from "../button/button.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";
import { BaseControl } from "../base-control/base-control.js";
/**
 * A component that allows the user to set different values for different breakpoints.
 *
 * Inner items should be passed as a render function.
 * The following props are passed to the render function:
 * - `breakpoint: string` - Name of the current breakpoint.
 * - `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.
 * @param {Object} props.value - The current value of the component.
 * @param {Function} props.onChange - Function to run when the value changes. `(newValue: Object) => void`.
 * @param {JSX.Element} props.icon - The icon of the component.
 * @param {string} props.help - The help text of the component.
 * @param {string} props.label - The label of the component.
 * @param {string} props.subtitle - The subtitle of the component.
 * @param {{label: string, value: string}[]} props.options - Options of the attribute the component is linked to. `{ value: string, label: string }[]`.
 * @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 {Object<string, number>} [props.breakpointUiData] - Allows overriding breakpoint names and icons. `{ [breakpoint: string]: { label: string, icon: JSX.Element|string } }`.
 * @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.
 * @param {boolean} [props.useLegacyDesktopFirst] - If `true`, the legacy desktop-first mode is used. This is only for backwards compatibility.
 * @param {string} [props.className] - Classes to pass to the control base.
 * @param {'start' | 'center' | 'end' | 'stretch'} [props.innerContentAlign='start'] - Determines inner content alignment
 *
 * @returns {JSX.Element} The Responsive component.
 *
 * @example
 * <Responsive
 * 	value={value}
 * 	onChange={onChange}
 * 	icon={icons.myIcon}
 * 	label={__('Label', 'eightshift-ui-components')}
 * 	options={[
 * 		{ value: 'value1', label: 'Value 1' },
 * 		{ value: 'value2', label: 'Value 2' },
 * 		{ value: 'value3', label: 'Value 3' },
 * 	]}
 * 	breakpoints={['mobile', 'tablet', 'desktop', 'large']}
 * 	breakpointData={breakpointData}
 * >
 * 	{({ breakpoint, currentValue, options, handleChange }) => (
 * 		<Select
 * 			label={breakpoint}
 * 			value={currentValue}
 * 			options={options}
 * 			onChange={handleChange}
 * 		/>
 * 	)}
 * </Responsive>
 *
 * @preserve
 */
const Responsive = (props) => {
  const {
    value,
    onChange,
    icon,
    help,
    label,
    subtitle,
    options,
    breakpoints: rawBreakpoints,
    desktopFirstBreakpoints: rawDesktopFirstBreakpoints,
    breakpointData,
    breakpointUiData,
    noModeSelect,
    inline,
    children,
    hidden,
    innerContentAlign = "start",
    useLegacyDesktopFirst,
    className
  } = props;
  if (typeof rawBreakpoints === "undefined" || !Array.isArray(rawBreakpoints)) {
    console.warn(__("Responsive: Missing or invalid 'breakpoints' prop.", "eightshift-ui-components"));
    return null;
  }
  const breakpoints = rawBreakpoints.slice(1);
  let desktopFirstBreakpoints = (rawDesktopFirstBreakpoints ?? rawBreakpoints.slice(1)).map((breakpoint) => breakpoint.startsWith("max-") ? breakpoint : `max-${breakpoint}`);
  if (useLegacyDesktopFirst) {
    desktopFirstBreakpoints = (rawDesktopFirstBreakpoints ?? rawBreakpoints.slice(0, -1)).map((breakpoint) => breakpoint.startsWith("max-") ? breakpoint : `max-${breakpoint}`);
  }
  const [detailsVisible, setDetailsVisible] = useState(false);
  const isDesktopFirst = value?.["_desktopFirst"] === true;
  const firstMobileFirstOverride = breakpoints.find((breakpoint) => typeof value?.[breakpoint] !== "undefined");
  const lastDesktopFirstOverride = desktopFirstBreakpoints.toReversed().find((breakpoint) => typeof value?.[breakpoint] !== "undefined");
  const breakpointsToMap = isDesktopFirst ? desktopFirstBreakpoints : breakpoints;
  if (hidden) {
    return null;
  }
  const DefaultTooltip = () => {
    const overrideIcon = breakpointUiData?.[isDesktopFirst ? rawBreakpoints.at(-1) : rawBreakpoints.at(0)]?.icon;
    return /* @__PURE__ */ jsx(
      DecorativeTooltip,
      {
        placement: "left",
        className: "es:p-3",
        theme: "light",
        offset: 7.5,
        arrow: true,
        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:mx-auto", children: [
            firstMobileFirstOverride && !isDesktopFirst && /* @__PURE__ */ jsx(
              BreakpointPreview,
              {
                blocks: [
                  {
                    breakpoint: __("Default", "eightshift-ui-components"),
                    widthEnd: breakpointData[firstMobileFirstOverride] - 1,
                    value: options?.find((opt) => opt.value === value?.["_default"])?.label ?? upperFirst(value?.["_default"]),
                    dotsStart: true,
                    alignEnd: true,
                    active: true
                  },
                  {
                    breakpoint: breakpointUiData?.[firstMobileFirstOverride]?.label ?? firstMobileFirstOverride,
                    value: options?.find((opt) => opt.value === value?.[firstMobileFirstOverride])?.label ?? upperFirst(value?.[firstMobileFirstOverride]),
                    dotsEnd: true
                  }
                ]
              }
            ),
            lastDesktopFirstOverride && isDesktopFirst && /* @__PURE__ */ jsx(
              BreakpointPreview,
              {
                blocks: [
                  {
                    breakpoint: breakpointUiData?.[lastDesktopFirstOverride.replace("max-", "")]?.label ?? lastDesktopFirstOverride.replace("max-", ""),
                    value: options?.find((opt) => opt.value === value?.[lastDesktopFirstOverride])?.label ?? upperFirst(value?.[lastDesktopFirstOverride]),
                    dotsStart: true,
                    alignEnd: true
                  },
                  {
                    breakpoint: __("Default", "eightshift-ui-components"),
                    value: options?.find((opt) => opt.value === value?.["_default"])?.label ?? upperFirst(value?.["_default"]),
                    width: breakpointData[lastDesktopFirstOverride.replace("max-", "")],
                    dotsEnd: true,
                    active: true
                  }
                ]
              }
            )
          ] })
        ] }),
        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?.[overrideIcon] ?? overrideIcon ?? icons[`screen${upperFirst(isDesktopFirst ? rawBreakpoints.at(-1) : rawBreakpoints.at(0))}`] })
      }
    );
  };
  return /* @__PURE__ */ jsxs(
    BaseControl,
    {
      icon,
      label,
      subtitle,
      help,
      className,
      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
        inline && /* @__PURE__ */ jsx(
          AnimatedVisibility,
          {
            className: "es:mr-0.5",
            visible: !detailsVisible,
            transition: "scaleFade",
            noInitial: true,
            children: children({
              breakpoint: "_default",
              currentValue: 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,
            {
              "aria-label": __("Responsive options", "eightshift-ui-components"),
              tooltip: __("Responsive options", "eightshift-ui-components"),
              popoverProps: { placement: "bottom right" },
              triggerProps: { className: "es:w-5.5 es:stroke-[1.25]" },
              triggerIcon: icons.dropdownCaretAlt,
              children: [
                !noModeSelect && /* @__PURE__ */ jsxs(Fragment, { children: [
                  /* @__PURE__ */ jsx(MenuSectionHeader, { children: __("Breakpoint mode", "eightshift-ui-components") }),
                  /* @__PURE__ */ jsx(
                    MenuItem,
                    {
                      selected: !isDesktopFirst,
                      onClick: () => {
                        onChange({
                          _default: value["_default"],
                          _desktopFirst: false
                        });
                      },
                      children: /* @__PURE__ */ jsx(
                        RichLabel,
                        {
                          label: __("Mobile-first", "eightshift-ui-components"),
                          subtitle: __("Default", "eightshift-ui-components"),
                          noColor: true
                        }
                      )
                    }
                  ),
                  /* @__PURE__ */ jsx(
                    MenuItem,
                    {
                      selected: isDesktopFirst,
                      onClick: () => {
                        onChange({
                          _default: value["_default"],
                          _desktopFirst: true
                        });
                      },
                      children: __("Desktop-first", "eightshift-ui-components")
                    }
                  ),
                  /* @__PURE__ */ jsx(MenuSeparator, {})
                ] }),
                Object.keys(value).some((key) => !key?.startsWith("_") && typeof value?.[key] !== "undefined") && /* @__PURE__ */ jsx(
                  SubMenuItem,
                  {
                    manualWidth: true,
                    popoverProps: { className: "es:max-w-full!" },
                    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,
                        breakpointUiData
                      }
                    ) })
                  }
                ),
                Object.keys(value).some((key) => !key?.startsWith("_") && typeof 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 && !inline && /* @__PURE__ */ jsxs(
          "div",
          {
            className: clsx(
              "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("es:w-full", detailsVisible ? "es:col-start-2 es:col-end-2" : "es:col-span-full"), children: children({
                breakpoint: "_default",
                currentValue: value?.["_default"],
                handleChange: (newValue) => onChange({
                  ...value,
                  _default: newValue
                }),
                options,
                key: Object.keys(value)
              }) })
            ]
          },
          "_default-mobile-first"
        ),
        !isDesktopFirst && inline && /* @__PURE__ */ jsxs(
          AnimatedVisibility,
          {
            className: clsx(
              "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:col-start-2 es:col-end-2", children: children({
                breakpoint: "_default",
                currentValue: value?.["_default"],
                handleChange: (newValue) => onChange({
                  ...value,
                  _default: newValue
                }),
                options,
                key: Object.keys(value),
                isInlineExpandedView: true
              }) })
            ]
          },
          "_default-mobile-first-inline"
        ),
        /* @__PURE__ */ jsx(
          AnimatedVisibility,
          {
            visible: detailsVisible,
            className: "es:space-y-2",
            children: breakpointsToMap.map((breakpoint, i) => {
              const realBreakpointName = breakpoint.replace("max-", "");
              const filterBreakpoints = isDesktopFirst ? [...breakpointsToMap, "_default"] : ["_default", ...breakpointsToMap];
              const aboveOverride = isDesktopFirst ? filterBreakpoints.slice(i + 1).find((breakpoint2) => typeof value?.[breakpoint2] !== "undefined") : filterBreakpoints.slice(0, i + 1).toReversed().find((breakpoint2) => typeof value?.[breakpoint2] !== "undefined");
              const belowOverride = isDesktopFirst ? filterBreakpoints.slice(0, i).toReversed().find((breakpoint2) => typeof value?.[breakpoint2] !== "undefined") : filterBreakpoints.slice(i + 2).find((breakpoint2) => typeof value?.[breakpoint2] !== "undefined");
              return /* @__PURE__ */ jsxs(
                "div",
                {
                  className: clsx(
                    "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(
                      DecorativeTooltip,
                      {
                        placement: "left",
                        theme: "light",
                        offset: 7.5,
                        arrow: true,
                        text: /* @__PURE__ */ jsxs("div", { className: "es:max-w-96 es:p-1", children: [
                          /* @__PURE__ */ jsx("span", { className: "es:block es:font-semibold", children: breakpointUiData?.[realBreakpointName]?.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(
                                __("Applied when the browser width is between %dpx and %dpx.", "eightshift-ui-components"),
                                breakpointData[realBreakpointName],
                                breakpointData[belowOverride] - 1
                              ),
                              typeof value[breakpoint] === "undefined" && sprintf(__("From %dpx", "eightshift-ui-components"), breakpointData[realBreakpointName])
                            ] }),
                            isDesktopFirst && /* @__PURE__ */ jsxs(Fragment, { children: [
                              !belowOverride && typeof value[breakpoint] !== "undefined" && sprintf(__("Applied when the browser width is %dpx or less.", "eightshift-ui-components"), breakpointData[realBreakpointName] - 1),
                              belowOverride && typeof value[breakpoint] !== "undefined" && sprintf(
                                __("Applied when the browser width is between %dpx and %dpx.", "eightshift-ui-components"),
                                breakpointData[belowOverride?.replace("max-", "")],
                                breakpointData[realBreakpointName] - 1
                              ),
                              typeof value[breakpoint] === "undefined" && sprintf(__("Up to %dpx", "eightshift-ui-components"), breakpointData[breakpoint?.replace("max-", "")])
                            ] })
                          ] }),
                          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,
                              {
                                dotsStart: belowOverride,
                                blocks: [
                                  aboveOverride !== "_default" && typeof value?.[aboveOverride] !== "undefined" && {
                                    breakpoint: breakpointUiData?.[aboveOverride]?.label ?? aboveOverride,
                                    value: options?.find((opt) => opt.value === value?.[aboveOverride])?.label ?? upperFirst(value?.[aboveOverride]),
                                    dotsStart: !belowOverride,
                                    alignEnd: !belowOverride
                                  },
                                  aboveOverride === "_default" && typeof value?.["_default"] !== "undefined" && {
                                    breakpoint: __("Default", "eightshift-ui-components"),
                                    value: options?.find((opt) => opt.value === value?.["_default"])?.label ?? upperFirst(value?.["_default"]),
                                    dotsStart: !belowOverride,
                                    alignEnd: !belowOverride
                                  },
                                  {
                                    breakpoint: breakpointUiData?.[realBreakpointName]?.label ?? realBreakpointName,
                                    value: options?.find((opt) => opt.value === value?.[breakpoint])?.label ?? upperFirst(value?.[breakpoint]),
                                    width: breakpointData[realBreakpointName],
                                    active: true,
                                    dotsEnd: !belowOverride
                                  },
                                  belowOverride && typeof value?.[belowOverride] !== "undefined" && {
                                    breakpoint: breakpointUiData?.[belowOverride]?.label ?? belowOverride,
                                    value: options?.find((opt) => opt.value === value?.[belowOverride])?.label ?? upperFirst(value?.[belowOverride]),
                                    width: breakpointData[belowOverride],
                                    dotsEnd: true
                                  }
                                ]
                              }
                            ),
                            isDesktopFirst && /* @__PURE__ */ jsx(
                              BreakpointPreview,
                              {
                                dotsStart: true,
                                dotsEnd: aboveOverride !== "_default",
                                blocks: [
                                  belowOverride && {
                                    breakpoint: breakpointUiData?.[belowOverride?.replace("max-", "")]?.label ?? belowOverride?.replace("max-", ""),
                                    value: options?.find((opt) => opt.value === value?.[belowOverride])?.label ?? upperFirst(value?.[belowOverride])
                                  },
                                  {
                                    breakpoint: breakpointUiData?.[realBreakpointName]?.label ?? realBreakpointName,
                                    value: options?.find((opt) => opt.value === value?.[breakpoint])?.label ?? upperFirst(value?.[realBreakpointName]),
                                    width: breakpointData[filterBreakpoints[i - 1]?.replace("max-", "")],
                                    active: true
                                  },
                                  aboveOverride !== "_default" && {
                                    breakpoint: breakpointUiData?.[aboveOverride?.replace("max-", "")]?.label ?? aboveOverride?.replace("max-", ""),
                                    value: options?.find((opt) => opt.value === value?.[aboveOverride])?.label ?? upperFirst(value?.[aboveOverride]),
                                    width: breakpointData[breakpoint?.replace("max-", "")]
                                  },
                                  aboveOverride === "_default" && {
                                    breakpoint: __("Default", "eightshift-ui-components"),
                                    value: options?.find((opt) => opt.value === value?.["_default"])?.label ?? upperFirst(value?.["_default"]),
                                    width: breakpointData[breakpoint?.replace("max-", "")],
                                    dotsEnd: true
                                  }
                                ]
                              }
                            )
                          ] })
                        ] }),
                        children: /* @__PURE__ */ jsx(
                          "div",
                          {
                            className: clsx(
                              "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: icons?.[breakpointUiData?.[realBreakpointName]?.icon] ?? breakpointUiData?.[realBreakpointName]?.icon ?? icons?.[`screen${upperFirst(realBreakpointName)}`]
                          }
                        )
                      }
                    ),
                    children({
                      breakpoint,
                      currentValue: value?.[breakpoint],
                      handleChange: (newValue) => {
                        onChange({
                          ...value,
                          [breakpoint]: newValue
                        });
                      },
                      options,
                      key: Object.keys(value)
                    }),
                    /* @__PURE__ */ jsx(
                      Button,
                      {
                        onPress: () => {
                          const newValue = { ...value };
                          delete newValue[breakpoint];
                          onChange(newValue);
                        },
                        icon: icons.clearAlt,
                        disabled: typeof value?.[breakpoint] === "undefined",
                        type: "ghost"
                      }
                    )
                  ]
                },
                realBreakpointName
              );
            })
          }
        ),
        isDesktopFirst && !inline && /* @__PURE__ */ jsxs(
          "div",
          {
            className: clsx(
              "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("es:w-full", detailsVisible ? "es:col-start-2 es:col-end-2" : "es:col-span-full"), children: children({
                breakpoint: "_default",
                currentValue: value?.["_default"],
                handleChange: (newValue) => onChange({
                  ...value,
                  _default: newValue
                }),
                options,
                key: Object.keys(value)
              }) })
            ]
          },
          "_default-desktop-first"
        ),
        isDesktopFirst && inline && /* @__PURE__ */ jsxs(
          AnimatedVisibility,
          {
            className: clsx(
              "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:col-start-2 es:col-end-2", children: children({
                breakpoint: "_default",
                currentValue: value?.["_default"],
                handleChange: (newValue) => onChange({
                  ...value,
                  _default: newValue
                }),
                options,
                key: Object.keys(value),
                isInlineExpandedView: true
              }) })
            ]
          },
          "_default-desktop-first-inline"
        )
      ]
    }
  );
};
export {
  Responsive
};
