// packages/block-editor/src/components/spacing-sizes-control/input-controls/separated.js
import SpacingInputControl from "./spacing-input-control";
import {
  ALL_SIDES,
  LABELS,
  ICONS,
  getPresetValueFromCustomValue
} from "../utils";
import { Fragment, jsx } from "react/jsx-runtime";
function SeparatedInputControls({
  minimumCustomValue,
  onChange,
  onMouseOut,
  onMouseOver,
  sides,
  spacingSizes,
  type,
  values
}) {
  const filteredSides = sides?.length ? ALL_SIDES.filter((side) => sides.includes(side)) : ALL_SIDES;
  const createHandleOnChange = (side) => (next) => {
    const nextValues = {
      ...Object.keys(values).reduce((acc, key) => {
        acc[key] = getPresetValueFromCustomValue(
          values[key],
          spacingSizes
        );
        return acc;
      }, {})
    };
    nextValues[side] = next;
    onChange(nextValues);
  };
  return /* @__PURE__ */ jsx(Fragment, { children: filteredSides.map((side) => {
    return /* @__PURE__ */ jsx(
      SpacingInputControl,
      {
        icon: ICONS[side],
        label: LABELS[side],
        minimumCustomValue,
        onChange: createHandleOnChange(side),
        onMouseOut,
        onMouseOver,
        side,
        spacingSizes,
        type,
        value: values[side],
        withInputField: false
      },
      `spacing-sizes-control-${side}`
    );
  }) });
}
export {
  SeparatedInputControls as default
};
//# sourceMappingURL=separated.js.map
