// packages/components/src/border-control/border-control/component.tsx
import { __ } from "@wordpress/i18n";
import BorderControlDropdown from "../border-control-dropdown/index.js";
import UnitControl from "../../unit-control/index.js";
import RangeControl from "../../range-control/index.js";
import { HStack } from "../../h-stack/index.js";
import { StyledLabel } from "../../base-control/styles/base-control-styles.js";
import { View } from "../../view/index.js";
import { VisuallyHidden } from "../../visually-hidden/index.js";
import { contextConnect } from "../../context/index.js";
import { useBorderControl } from "./hook.js";
import { Spacer } from "../../spacer/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var BorderLabel = (props) => {
  const {
    label,
    hideLabelFromVision
  } = props;
  if (!label) {
    return null;
  }
  return hideLabelFromVision ? /* @__PURE__ */ _jsx(VisuallyHidden, {
    as: "legend",
    children: label
  }) : /* @__PURE__ */ _jsx(StyledLabel, {
    as: "legend",
    children: label
  });
};
var UnconnectedBorderControl = (props, forwardedRef) => {
  const {
    __next40pxDefaultSize = false,
    colors,
    disableCustomColors,
    disableUnits,
    enableAlpha,
    enableStyle,
    hideLabelFromVision,
    innerWrapperClassName,
    inputWidth,
    isStyleSettable,
    label,
    onBorderChange,
    onSliderChange,
    onWidthChange,
    placeholder,
    __unstablePopoverProps,
    previousStyleSelection,
    showDropdownHeader,
    size,
    sliderClassName,
    value: border,
    widthUnit,
    widthValue,
    withSlider,
    __experimentalIsRenderedInSidebar,
    ...otherProps
  } = useBorderControl(props);
  return /* @__PURE__ */ _jsxs(View, {
    as: "fieldset",
    ...otherProps,
    ref: forwardedRef,
    children: [/* @__PURE__ */ _jsx(BorderLabel, {
      label,
      hideLabelFromVision
    }), /* @__PURE__ */ _jsxs(HStack, {
      spacing: 4,
      className: innerWrapperClassName,
      children: [/* @__PURE__ */ _jsx(UnitControl, {
        __next40pxDefaultSize,
        __shouldNotWarnDeprecated36pxSize: true,
        prefix: /* @__PURE__ */ _jsx(Spacer, {
          marginRight: 1,
          marginBottom: 0,
          children: /* @__PURE__ */ _jsx(BorderControlDropdown, {
            border,
            colors,
            __unstablePopoverProps,
            disableCustomColors,
            enableAlpha,
            enableStyle,
            isStyleSettable,
            onChange: onBorderChange,
            previousStyleSelection,
            __experimentalIsRenderedInSidebar,
            size
          })
        }),
        label: __("Border width"),
        hideLabelFromVision: true,
        min: 0,
        onChange: onWidthChange,
        value: border?.width || "",
        placeholder,
        disableUnits,
        __unstableInputWidth: inputWidth,
        size
      }), withSlider && /* @__PURE__ */ _jsx(RangeControl, {
        label: __("Border width"),
        hideLabelFromVision: true,
        className: sliderClassName,
        initialPosition: 0,
        max: 100,
        min: 0,
        onChange: onSliderChange,
        step: ["px", "%"].includes(widthUnit) ? 1 : 0.1,
        value: widthValue || void 0,
        withInputField: false,
        __next40pxDefaultSize,
        __shouldNotWarnDeprecated36pxSize: true
      })]
    })]
  });
};
var BorderControl = contextConnect(UnconnectedBorderControl, "BorderControl");
var component_default = BorderControl;
export {
  BorderControl,
  component_default as default
};
//# sourceMappingURL=component.js.map
