"use client";
import { jsxs as s, jsx as t } from "react/jsx-runtime";
import { FlexGapControl as N } from "../../../../components/controls/flex-gap.control.js";
import { SelectControl as c } from "../../../../components/controls/select.control.js";
import { SliderUnitControl as p } from "../../../../components/controls/slider-unit.control.js";
import { ToggleGroupControl as m } from "../../../../components/controls/toggle-group.control.js";
import { Accordion as a } from "../../../../components/shared/accordion.js";
import { InfoMessage as d } from "../../../../components/shared/info-message.js";
import { Separator as R } from "../../../../components/shared/separator.js";
import { useAppSelector as f } from "../../../../hooks/use-app-selector.js";
import { useSettings as O } from "../../../../hooks/use-settings.js";
import { getCurrentBreakpoint as v } from "../../../../../../../store/selectors.js";
import { SettingsType as n } from "../../../../types/index.js";
import { Unit as r, FlexDirection as e, JustifyContent as l, AlignItem as g, FlexWrap as u } from "../../../../types/style.js";
import { classNames as i } from "../../../../utils/index.js";
import { BsArrowBarRight as L } from "../../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bs/index.js";
import { HiOutlineArrowNarrowRight as M, HiOutlineArrowNarrowDown as T, HiOutlineArrowNarrowLeft as A, HiOutlineArrowNarrowUp as S } from "../../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/hi/index.js";
import { LuAlignVerticalSpaceAround as x, LuAlignCenter as C } from "../../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/lu/index.js";
import { MdAlignHorizontalLeft as h, MdOutlineAlignHorizontalCenter as U, MdAlignHorizontalRight as V, MdFormatAlignCenter as W, MdOutlineAlignVerticalTop as w, MdVerticalAlignCenter as y, MdOutlineAlignVerticalBottom as B } from "../../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/md/index.js";
import { PiArrowUUpRightLight as _ } from "../../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/pi/index.js";
const et = () => {
  const E = f(v), [o] = O(
    `flexDirection.${E}`,
    n.BLOCK
  );
  return /* @__PURE__ */ s(
    a,
    {
      defaultValue: "Container",
      type: "single",
      collapsible: !0,
      className: "mt-0 w-full",
      children: [
        /* @__PURE__ */ s(a.Item, { value: "Container", children: [
          /* @__PURE__ */ t(a.Trigger, { className: "p-4", children: "Container" }),
          /* @__PURE__ */ s(a.Content, { className: "mt-0 px-4 py-1", children: [
            /* @__PURE__ */ t(
              p,
              {
                fieldName: "width",
                label: "Width",
                units: [r.PX, r.PERCENTAGE, r.EM, r.REM, r.VW],
                responsive: !0,
                type: n.BLOCK,
                className: "mt-0"
              }
            ),
            /* @__PURE__ */ t(
              p,
              {
                fieldName: "maxWidth",
                label: "Max Width",
                units: [r.PX, r.PERCENTAGE, r.EM, r.REM, r.VW],
                responsive: !0,
                type: n.BLOCK
              }
            ),
            /* @__PURE__ */ t(
              p,
              {
                responsive: !0,
                fieldName: "minHeight",
                label: "Min Height",
                units: [r.PX, r.PERCENTAGE, r.EM, r.REM, r.VH],
                type: n.BLOCK
              }
            ),
            /* @__PURE__ */ t(R, { className: "my-4" }),
            /* @__PURE__ */ t(
              m,
              {
                fieldName: "flexDirection",
                label: "Direction",
                responsive: !0,
                type: n.BLOCK,
                controls: [
                  {
                    tooltipContent: "Row - horizontal",
                    toggleTrigger: /* @__PURE__ */ t(M, { className: "text-sm" }),
                    value: e.ROW
                  },
                  {
                    tooltipContent: "Column - vertical",
                    toggleTrigger: /* @__PURE__ */ t(T, { className: "text-sm" }),
                    value: e.COLUMN
                  },
                  {
                    tooltipContent: "Row Reverse",
                    toggleTrigger: /* @__PURE__ */ t(A, { className: "text-sm" }),
                    value: e.ROW_REVERSE
                  },
                  {
                    tooltipContent: "Column - Reversed",
                    toggleTrigger: /* @__PURE__ */ t(S, { className: "text-sm" }),
                    value: e.COLUMN_REVERSE
                  }
                ]
              }
            ),
            /* @__PURE__ */ t(
              m,
              {
                type: n.BLOCK,
                fieldName: "justifyContent",
                responsive: !0,
                label: "Justify Content",
                direction: "col",
                controls: [
                  {
                    tooltipContent: "Start",
                    toggleTrigger: /* @__PURE__ */ t(
                      h,
                      {
                        className: i("text-sm transition-transform duration-200", {
                          "rotate-90": o === e.COLUMN,
                          "rotate-180": o === e.ROW_REVERSE,
                          "-rotate-90": o === e.COLUMN_REVERSE
                        })
                      }
                    ),
                    value: l.START
                  },
                  {
                    tooltipContent: "Center",
                    toggleTrigger: /* @__PURE__ */ t(
                      U,
                      {
                        className: i("text-sm transition-transform duration-200", {
                          "rotate-90": o === e.COLUMN || o === e.COLUMN_REVERSE
                        })
                      }
                    ),
                    value: l.CENTER
                  },
                  {
                    tooltipContent: "End",
                    toggleTrigger: /* @__PURE__ */ t(
                      V,
                      {
                        className: i("text-sm transition-transform duration-200", {
                          "rotate-90": o === e.COLUMN,
                          "rotate-180": o === e.ROW_REVERSE,
                          "-rotate-90": o === e.COLUMN_REVERSE
                        })
                      }
                    ),
                    value: l.END
                  },
                  {
                    tooltipContent: "Space Between",
                    toggleTrigger: /* @__PURE__ */ t(
                      x,
                      {
                        className: i("text-sm transition-transform duration-200", {
                          "rotate-0": o === e.COLUMN,
                          "rotate-90": o === e.ROW || o === e.ROW_REVERSE
                        })
                      }
                    ),
                    value: l.SPACE_BETWEEN
                  },
                  {
                    tooltipContent: "Space Around",
                    toggleTrigger: /* @__PURE__ */ t(
                      W,
                      {
                        className: i("text-sm transition-transform duration-200", {
                          "rotate-0": o === e.COLUMN,
                          "rotate-90": o === e.ROW || o === e.ROW_REVERSE
                        })
                      }
                    ),
                    value: l.SPACE_AROUND
                  },
                  {
                    tooltipContent: "Space Evently",
                    toggleTrigger: /* @__PURE__ */ t(
                      C,
                      {
                        className: i("text-sm transition-transform duration-200", {
                          "rotate-0": o === e.COLUMN,
                          "rotate-90": o === e.ROW || o === e.ROW_REVERSE
                        })
                      }
                    ),
                    value: l.SPACE_EVENTLY
                  }
                ]
              }
            ),
            /* @__PURE__ */ t(
              m,
              {
                fieldName: "alignItems",
                label: "Align Items",
                responsive: !0,
                type: n.BLOCK,
                controls: [
                  {
                    tooltipContent: "Start",
                    toggleTrigger: /* @__PURE__ */ t(
                      w,
                      {
                        className: i("text-sm transition-transform duration-200", {
                          "-rotate-90": o === e.COLUMN || o === e.COLUMN_REVERSE
                        })
                      }
                    ),
                    value: g.START
                  },
                  {
                    tooltipContent: "Center",
                    toggleTrigger: /* @__PURE__ */ t(
                      y,
                      {
                        className: i("text-sm transition-transform duration-200", {
                          "-rotate-90": o === e.COLUMN || o === e.COLUMN_REVERSE
                        })
                      }
                    ),
                    value: g.CENTER
                  },
                  {
                    tooltipContent: "End",
                    toggleTrigger: /* @__PURE__ */ t(
                      B,
                      {
                        className: i("text-sm transition-transform duration-200", {
                          "-rotate-90": o === e.COLUMN || o === e.COLUMN_REVERSE
                        })
                      }
                    ),
                    value: g.END
                  },
                  {
                    tooltipContent: "Stretch",
                    toggleTrigger: /* @__PURE__ */ t(
                      C,
                      {
                        className: i("text-sm transition-transform duration-200", {
                          "-rotate-90": o === e.COLUMN || o === e.COLUMN_REVERSE
                        })
                      }
                    ),
                    value: g.STRETCH
                  }
                ]
              }
            ),
            /* @__PURE__ */ t(
              N,
              {
                responsive: !0,
                label: "Gaps",
                fieldName: "gap",
                type: n.BLOCK,
                min: 0,
                units: [r.PX, r.EM, r.REM, r.VW]
              }
            ),
            /* @__PURE__ */ t(
              m,
              {
                fieldName: "wrap",
                label: "Wrap",
                responsive: !0,
                type: n.BLOCK,
                controls: [
                  {
                    tooltipContent: "No Wrap",
                    toggleTrigger: /* @__PURE__ */ t(L, { className: "text-sm" }),
                    value: u.NOWRAP
                  },
                  {
                    tooltipContent: "Wrap",
                    toggleTrigger: /* @__PURE__ */ t(_, { className: "rotate-180 text-sm" }),
                    value: u.WRAP
                  }
                ]
              }
            ),
            /* @__PURE__ */ t(d, { children: "Items within the container can stay in a single line (No wrap), or break into multiple lines (Wrap)." })
          ] })
        ] }),
        /* @__PURE__ */ s(a.Item, { value: "Additional", children: [
          /* @__PURE__ */ t(a.Trigger, { className: "p-4", children: "Additional Options" }),
          /* @__PURE__ */ s(a.Content, { className: "px-4", children: [
            /* @__PURE__ */ t(
              c,
              {
                fieldName: "overflow.desktop",
                label: "Overflow",
                className: "mt-0",
                options: [
                  { content: "Hidden", value: "hidden" },
                  { content: "Auto", value: "auto" },
                  { content: "Scroll", value: "scroll" },
                  { content: "Visible", value: "visible" }
                ],
                type: n.BLOCK
              }
            ),
            /* @__PURE__ */ t(
              c,
              {
                fieldName: "HtmlTag",
                label: "HTML Tag",
                type: n.BLOCK,
                options: [
                  { content: "div", value: "div" },
                  { content: "header", value: "header" },
                  { content: "footer", value: "footer" },
                  { content: "main", value: "main" },
                  { content: "article", value: "article" },
                  { content: "section", value: "section" },
                  { content: "aside", value: "aside" },
                  { content: "nav", value: "nav" },
                  { content: "a", value: "a" }
                ]
              }
            )
          ] })
        ] })
      ]
    }
  );
};
export {
  et as default
};
//# sourceMappingURL=container-layout.control.js.map
