// packages/components/src/border-control/border-control-style-picker/component.tsx
import { lineDashed, lineDotted, lineSolid } from "@wordpress/icons";
import { __ } from "@wordpress/i18n";
import { contextConnect } from "../../context/index.js";
import { ToggleGroupControl, ToggleGroupControlOptionIcon } from "../../toggle-group-control/index.js";
import { jsx as _jsx } from "react/jsx-runtime";
var BORDER_STYLES = [{
  label: __("Solid"),
  icon: lineSolid,
  value: "solid"
}, {
  label: __("Dashed"),
  icon: lineDashed,
  value: "dashed"
}, {
  label: __("Dotted"),
  icon: lineDotted,
  value: "dotted"
}];
function UnconnectedBorderControlStylePicker({
  onChange,
  ...restProps
}, forwardedRef) {
  return /* @__PURE__ */ _jsx(ToggleGroupControl, {
    __next40pxDefaultSize: true,
    ref: forwardedRef,
    isDeselectable: true,
    onChange: (value) => {
      onChange?.(value);
    },
    ...restProps,
    children: BORDER_STYLES.map((borderStyle) => /* @__PURE__ */ _jsx(ToggleGroupControlOptionIcon, {
      value: borderStyle.value,
      icon: borderStyle.icon,
      label: borderStyle.label
    }, borderStyle.value))
  });
}
var BorderControlStylePicker = contextConnect(UnconnectedBorderControlStylePicker, "BorderControlStylePicker");
var component_default = BorderControlStylePicker;
export {
  component_default as default
};
//# sourceMappingURL=component.js.map
