@blockle/blocks 0.19.0 → 0.20.0-alpha1

package/dist/styles/components/form/Checkbox/Checkbox.mjs

@@ -1,85 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useId } from "react";
-import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
-import { useComponentStyles } from "../../display/Divider/Divider.mjs";
-import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
-import { input, icon, container } from "./checkbox.css.mjs";
-const Label = ({
-  asSpan,
-  children,
-  className,
-  required,
-  size,
-  cursor,
-  ...restProps
-}) => {
-  const Component = asSpan ? "span" : "label";
-  const containerClassName = useComponentStyles("label", {
-    base: true,
-    variants: { required, size }
-  });
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      className: classnames(containerClassName, className, atoms({ cursor })),
-      ...restProps,
-      children
-    }
-  );
-};
-const Checkbox = ({
-  children,
-  className,
-  id,
-  name,
-  ref,
-  required,
-  ...restProps
-}) => {
-  const containerClassName = useComponentStyles("checkbox", { base: true }, false);
-  const iconClassName = useComponentStyles("checkbox", { icon: true }, false);
-  const labelClassName = useComponentStyles("checkbox", { label: true }, false);
-  const reactId = useId();
-  const inputId = id || reactId;
-  const input$1 = /* @__PURE__ */ jsxs("div", { className: classnames(container, containerClassName, className), children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref,
-        type: "checkbox",
-        name,
-        id: inputId,
-        className: input,
-        ...restProps
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: classnames(icon, iconClassName), "aria-hidden": true, children: /* @__PURE__ */ jsx(DefaultIcon, {}) })
-  ] });
-  if (!children) {
-    return input$1;
-  }
-  return /* @__PURE__ */ jsxs("span", { className: labelClassName, children: [
-    input$1,
-    children && /* @__PURE__ */ jsx(Label, { required, htmlFor: inputId, children })
-  ] });
-};
-const DefaultIcon = () => {
-  return (
-    // TOOD - replace with actual icon component renderer
-    /* @__PURE__ */ jsx(
-      "svg",
-      {
-        viewBox: "0 0 24 24",
-        fill: "none",
-        strokeWidth: "1.5",
-        stroke: "currentColor",
-        style: { width: "1rem", height: "1rem", display: "block" },
-        children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m4.5 12.75 6 6 9-13.5" })
-      }
-    )
-  );
-};
-export {
-  Checkbox,
-  Label
-};

package/dist/styles/components/form/Input/Input.cjs

@@ -1,37 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs = require("../../Accessibility/VisuallyHidden/VisuallyHidden.cjs");
-const styles_components_form_Input_input_css_cjs = require("./input.css.cjs");
-const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
-const Input = ({
-  className,
-  endSlot,
-  name,
-  placeholder,
-  ref,
-  startSlot,
-  type = "text",
-  ...restProps
-}) => {
-  const id = react.useId();
-  const containerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("input", { container: true }, false);
-  const inputClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("input", { input: true });
-  return /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(styles_components_display_Divider_Divider_cjs.Box, { display: "flex", alignItems: "center", className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(containerClassName, className), children: [
-    startSlot,
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        id,
-        ref,
-        name,
-        type,
-        placeholder,
-        className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_form_Input_input_css_cjs.input, inputClassName),
-        ...restProps
-      }
-    ),
-    endSlot
-  ] }) });
-};
-exports.Input = Input;

package/dist/styles/components/form/Input/Input.mjs

@@ -1,38 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useId } from "react";
-import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
-import { input } from "./input.css.mjs";
-import { useComponentStyles, Box } from "../../display/Divider/Divider.mjs";
-const Input = ({
-  className,
-  endSlot,
-  name,
-  placeholder,
-  ref,
-  startSlot,
-  type = "text",
-  ...restProps
-}) => {
-  const id = useId();
-  const containerClassName = useComponentStyles("input", { container: true }, false);
-  const inputClassName = useComponentStyles("input", { input: true });
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", className: classnames(containerClassName, className), children: [
-    startSlot,
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        id,
-        ref,
-        name,
-        type,
-        placeholder,
-        className: classnames(input, inputClassName),
-        ...restProps
-      }
-    ),
-    endSlot
-  ] }) });
-};
-export {
-  Input
-};

package/dist/styles/components/form/Radio/Radio.cjs

@@ -1,23 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs = require("../../Accessibility/VisuallyHidden/VisuallyHidden.cjs");
-const styles_components_form_Radio_radio_css_cjs = require("./radio.css.cjs");
-const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
-const styles_components_form_Checkbox_Checkbox_cjs = require("../Checkbox/Checkbox.cjs");
-const Radio = ({ name, children, className, ref, ...restProps }) => {
-  const containerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("radio", { base: true }, false);
-  const iconClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("radio", { icon: true }, false);
-  const labelClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("checkbox", { label: true }, false);
-  const input = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_form_Radio_radio_css_cjs.container, containerClassName, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("input", { ref, type: "radio", name, className: styles_components_form_Radio_radio_css_cjs.input, ...restProps }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_form_Radio_radio_css_cjs.icon, iconClassName) })
-  ] });
-  if (!children) {
-    return input;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: labelClassName, children: [
-    input,
-    /* @__PURE__ */ jsxRuntime.jsx(styles_components_form_Checkbox_Checkbox_cjs.Label, { asSpan: true, children })
-  ] });
-};
-exports.Radio = Radio;

package/dist/styles/components/form/Radio/Radio.mjs

@@ -1,24 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
-import { input, icon, container } from "./radio.css.mjs";
-import { useComponentStyles } from "../../display/Divider/Divider.mjs";
-import { Label } from "../Checkbox/Checkbox.mjs";
-const Radio = ({ name, children, className, ref, ...restProps }) => {
-  const containerClassName = useComponentStyles("radio", { base: true }, false);
-  const iconClassName = useComponentStyles("radio", { icon: true }, false);
-  const labelClassName = useComponentStyles("checkbox", { label: true }, false);
-  const input$1 = /* @__PURE__ */ jsxs("div", { className: classnames(container, containerClassName, className), children: [
-    /* @__PURE__ */ jsx("input", { ref, type: "radio", name, className: input, ...restProps }),
-    /* @__PURE__ */ jsx("div", { className: classnames(icon, iconClassName) })
-  ] });
-  if (!children) {
-    return input$1;
-  }
-  return /* @__PURE__ */ jsxs("label", { className: labelClassName, children: [
-    input$1,
-    /* @__PURE__ */ jsx(Label, { asSpan: true, children })
-  ] });
-};
-export {
-  Radio
-};

package/dist/styles/components/form/Select/Select.cjs

@@ -1,47 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs = require("../../Accessibility/VisuallyHidden/VisuallyHidden.cjs");
-const styles_components_form_Select_select_css_cjs = require("./select.css.cjs");
-const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
-const Select = ({
-  children,
-  placeholder,
-  className,
-  variant,
-  ref,
-  ...restProps
-}) => {
-  const wrapperClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("select", { wrapper: true }, false);
-  const selectClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("select", { select: true, variants: { variant } });
-  const iconClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("select", { icon: true }, false);
-  return /* @__PURE__ */ jsxRuntime.jsxs(styles_components_display_Divider_Divider_cjs.Box, { className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_form_Select_select_css_cjs.wrapper, wrapperClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "select",
-      {
-        ref,
-        className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_form_Select_select_css_cjs.select, selectClassName, className),
-        ...restProps,
-        children: [
-          placeholder && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: placeholder }),
-          children
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Box, { className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_form_Select_select_css_cjs.icon, iconClassName), role: "presentation", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, {}) })
-  ] });
-};
-const DefaultIcon = () => {
-  return (
-    // TOOD - replace with actual icon component renderer
-    /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", style: { width: "1rem", height: "1rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        fill: "currentColor",
-        fillRule: "evenodd",
-        d: "m11.625 14.3666 7.9365-7.653c.5241-.5055 1.3133-.4372 1.7625.1525.4493.5897.3886 1.4774-.1355 1.9829l-8.75 8.4375c-.4681.4513-1.1589.4513-1.627 0l-8.75-8.4375c-.5241-.5055-.5848-1.3932-.1356-1.9829.4493-.5897 1.2385-.658 1.7626-.1525l7.9365 7.653Z",
-        clipRule: "evenodd"
-      }
-    ) })
-  );
-};
-exports.Select = Select;

package/dist/styles/components/form/Slider/Slider.cjs

@@ -1,205 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs = require("../../Accessibility/VisuallyHidden/VisuallyHidden.cjs");
-const styles_components_form_Slider_slider_css_cjs = require("./slider.css.cjs");
-const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
-function useControlledValue({
-  defaultValue,
-  value,
-  onChange,
-  transformValue
-}) {
-  const [internValue, setInternValue] = react.useState(defaultValue);
-  const currentValue = (onChange ? value : internValue) ?? defaultValue;
-  const setValue = react.useCallback(
-    function setValue2(value2) {
-      const nextValue = transformValue ? transformValue(value2) : value2;
-      if (onChange) {
-        onChange(nextValue);
-      } else {
-        setInternValue(nextValue);
-      }
-    },
-    [onChange, transformValue]
-  );
-  if (process.env.NODE_ENV !== "production") {
-    react.useEffect(() => {
-      if (onChange && value === void 0) {
-        console.error("Slider is in controlled mode but no value is provided");
-      }
-    }, []);
-  }
-  return [currentValue, setValue];
-}
-function roundToPrecision(value, precision) {
-  const factor = 10 ** precision;
-  return Math.round(value * factor) / factor;
-}
-function getBoundValue(newValue, min, max, step) {
-  let value = Math.round(newValue / step) * step;
-  value = Math.max(min, Math.min(max, value));
-  return value;
-}
-function getProgress(event, rect) {
-  const { clientX, clientY } = event;
-  const { width, height, left, top } = rect;
-  const x = (clientX - left) / width;
-  const y = (clientY - top) / height;
-  return [x, y];
-}
-function usePointerProgress({
-  container,
-  orientation,
-  onChange
-}) {
-  react.useEffect(() => {
-    const element = container.current;
-    function pointerdown(event) {
-      event.preventDefault();
-      event.stopPropagation();
-      if (!element) {
-        return;
-      }
-      const containerRect = element.getBoundingClientRect();
-      const axisIndex = orientation === "horizontal" ? 0 : 1;
-      const progress = getProgress(event, containerRect);
-      onChange(progress[axisIndex]);
-      const pointermove = (event2) => {
-        event2.preventDefault();
-        const progress2 = getProgress(event2, containerRect);
-        onChange(progress2[axisIndex]);
-      };
-      const pointerup = () => {
-        document.removeEventListener("pointermove", pointermove);
-        document.removeEventListener("pointerup", pointerup);
-      };
-      document.addEventListener("pointermove", pointermove);
-      document.addEventListener("pointerup", pointerup);
-    }
-    if (!element) {
-      return;
-    }
-    element.addEventListener("pointerdown", pointerdown);
-    return () => {
-      element.removeEventListener("pointerdown", pointerdown);
-    };
-  }, [container, onChange, orientation]);
-}
-const usableKeys = /* @__PURE__ */ new Set([
-  "ArrowLeft",
-  "ArrowRight",
-  "ArrowUp",
-  "ArrowDown",
-  "Home",
-  "End",
-  "PageUp",
-  "PageDown",
-  "Home",
-  "End"
-]);
-const Slider = ({
-  min = 0,
-  max = 100,
-  step = 1,
-  orientation = "horizontal",
-  defaultValue = 0,
-  onChange,
-  value,
-  name,
-  size,
-  colorScheme,
-  disabled,
-  precision = 2,
-  ...restProps
-}) => {
-  const baseClass = styles_components_display_Divider_Divider_cjs.useComponentStyles("slider", {
-    base: true,
-    variants: { size, colorScheme, disabled }
-  });
-  const trackClass = styles_components_display_Divider_Divider_cjs.useComponentStyles("slider", { track: true }, false);
-  const filledTrackClass = styles_components_display_Divider_Divider_cjs.useComponentStyles("slider", { filledTrack: true }, false);
-  const thumbClass = styles_components_display_Divider_Divider_cjs.useComponentStyles("slider", { thumb: true }, false);
-  const containerRef = react.useRef(null);
-  const [currentValue, setValue] = useControlledValue({
-    defaultValue,
-    value,
-    onChange,
-    transformValue: (value2) => roundToPrecision(getBoundValue(value2, min, max, step), precision)
-  });
-  usePointerProgress({
-    container: containerRef,
-    orientation,
-    onChange(progress) {
-      if (orientation === "vertical") {
-        progress = 1 - progress;
-      }
-      setValue(max * progress);
-    }
-  });
-  const onKeyDown = react.useCallback(
-    (event) => {
-      if (!usableKeys.has(event.key)) {
-        return;
-      }
-      event.preventDefault();
-      event.stopPropagation();
-      const specialKey = ["PageUp", "PageDown"];
-      const stepModifier = event.shiftKey || specialKey.includes(event.key) ? (max - min) / 10 : step;
-      if (event.key === "ArrowLeft" || event.key === "ArrowDown" || event.key === "PageDown") {
-        return setValue(currentValue - stepModifier);
-      }
-      if (event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "PageUp") {
-        return setValue(currentValue + stepModifier);
-      }
-      if (event.key === "Home") {
-        return setValue(min);
-      }
-      if (event.key === "End") {
-        return setValue(max);
-      }
-    },
-    [max, min, step, setValue, currentValue]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: containerRef,
-      className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(
-        styles_components_form_Slider_slider_css_cjs.container,
-        orientation === "vertical" ? styles_components_form_Slider_slider_css_cjs.containerVertical : "",
-        baseClass
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_form_Slider_slider_css_cjs.track, trackClass), children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_form_Slider_slider_css_cjs.filledTrack, filledTrackClass),
-            style: {
-              inlineSize: `${currentValue / max * 100}%`
-            }
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_form_Slider_slider_css_cjs.thumb, thumbClass),
-            role: "slider",
-            "aria-valuemin": min,
-            "aria-valuemax": max,
-            "aria-valuenow": currentValue,
-            "aria-orientation": orientation,
-            style: {
-              [orientation === "horizontal" ? "insetInlineStart" : "insetInlineEnd"]: `${currentValue / max * 100}%`
-            },
-            onKeyDown,
-            ...restProps
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", disabled, name, value: currentValue })
-      ]
-    }
-  );
-};
-exports.Slider = Slider;

package/dist/styles/components/form/Slider/Slider.mjs

@@ -1,206 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useCallback, useEffect, useRef } from "react";
-import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
-import { filledTrack, track, thumb, containerVertical, container } from "./slider.css.mjs";
-import { useComponentStyles } from "../../display/Divider/Divider.mjs";
-function useControlledValue({
-  defaultValue,
-  value,
-  onChange,
-  transformValue
-}) {
-  const [internValue, setInternValue] = useState(defaultValue);
-  const currentValue = (onChange ? value : internValue) ?? defaultValue;
-  const setValue = useCallback(
-    function setValue2(value2) {
-      const nextValue = transformValue ? transformValue(value2) : value2;
-      if (onChange) {
-        onChange(nextValue);
-      } else {
-        setInternValue(nextValue);
-      }
-    },
-    [onChange, transformValue]
-  );
-  if (process.env.NODE_ENV !== "production") {
-    useEffect(() => {
-      if (onChange && value === void 0) {
-        console.error("Slider is in controlled mode but no value is provided");
-      }
-    }, []);
-  }
-  return [currentValue, setValue];
-}
-function roundToPrecision(value, precision) {
-  const factor = 10 ** precision;
-  return Math.round(value * factor) / factor;
-}
-function getBoundValue(newValue, min, max, step) {
-  let value = Math.round(newValue / step) * step;
-  value = Math.max(min, Math.min(max, value));
-  return value;
-}
-function getProgress(event, rect) {
-  const { clientX, clientY } = event;
-  const { width, height, left, top } = rect;
-  const x = (clientX - left) / width;
-  const y = (clientY - top) / height;
-  return [x, y];
-}
-function usePointerProgress({
-  container: container2,
-  orientation,
-  onChange
-}) {
-  useEffect(() => {
-    const element = container2.current;
-    function pointerdown(event) {
-      event.preventDefault();
-      event.stopPropagation();
-      if (!element) {
-        return;
-      }
-      const containerRect = element.getBoundingClientRect();
-      const axisIndex = orientation === "horizontal" ? 0 : 1;
-      const progress = getProgress(event, containerRect);
-      onChange(progress[axisIndex]);
-      const pointermove = (event2) => {
-        event2.preventDefault();
-        const progress2 = getProgress(event2, containerRect);
-        onChange(progress2[axisIndex]);
-      };
-      const pointerup = () => {
-        document.removeEventListener("pointermove", pointermove);
-        document.removeEventListener("pointerup", pointerup);
-      };
-      document.addEventListener("pointermove", pointermove);
-      document.addEventListener("pointerup", pointerup);
-    }
-    if (!element) {
-      return;
-    }
-    element.addEventListener("pointerdown", pointerdown);
-    return () => {
-      element.removeEventListener("pointerdown", pointerdown);
-    };
-  }, [container2, onChange, orientation]);
-}
-const usableKeys = /* @__PURE__ */ new Set([
-  "ArrowLeft",
-  "ArrowRight",
-  "ArrowUp",
-  "ArrowDown",
-  "Home",
-  "End",
-  "PageUp",
-  "PageDown",
-  "Home",
-  "End"
-]);
-const Slider = ({
-  min = 0,
-  max = 100,
-  step = 1,
-  orientation = "horizontal",
-  defaultValue = 0,
-  onChange,
-  value,
-  name,
-  size,
-  colorScheme,
-  disabled,
-  precision = 2,
-  ...restProps
-}) => {
-  const baseClass = useComponentStyles("slider", {
-    base: true,
-    variants: { size, colorScheme, disabled }
-  });
-  const trackClass = useComponentStyles("slider", { track: true }, false);
-  const filledTrackClass = useComponentStyles("slider", { filledTrack: true }, false);
-  const thumbClass = useComponentStyles("slider", { thumb: true }, false);
-  const containerRef = useRef(null);
-  const [currentValue, setValue] = useControlledValue({
-    defaultValue,
-    value,
-    onChange,
-    transformValue: (value2) => roundToPrecision(getBoundValue(value2, min, max, step), precision)
-  });
-  usePointerProgress({
-    container: containerRef,
-    orientation,
-    onChange(progress) {
-      if (orientation === "vertical") {
-        progress = 1 - progress;
-      }
-      setValue(max * progress);
-    }
-  });
-  const onKeyDown = useCallback(
-    (event) => {
-      if (!usableKeys.has(event.key)) {
-        return;
-      }
-      event.preventDefault();
-      event.stopPropagation();
-      const specialKey = ["PageUp", "PageDown"];
-      const stepModifier = event.shiftKey || specialKey.includes(event.key) ? (max - min) / 10 : step;
-      if (event.key === "ArrowLeft" || event.key === "ArrowDown" || event.key === "PageDown") {
-        return setValue(currentValue - stepModifier);
-      }
-      if (event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "PageUp") {
-        return setValue(currentValue + stepModifier);
-      }
-      if (event.key === "Home") {
-        return setValue(min);
-      }
-      if (event.key === "End") {
-        return setValue(max);
-      }
-    },
-    [max, min, step, setValue, currentValue]
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: containerRef,
-      className: classnames(
-        container,
-        orientation === "vertical" ? containerVertical : "",
-        baseClass
-      ),
-      children: [
-        /* @__PURE__ */ jsx("div", { className: classnames(track, trackClass), children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: classnames(filledTrack, filledTrackClass),
-            style: {
-              inlineSize: `${currentValue / max * 100}%`
-            }
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: classnames(thumb, thumbClass),
-            role: "slider",
-            "aria-valuemin": min,
-            "aria-valuemax": max,
-            "aria-valuenow": currentValue,
-            "aria-orientation": orientation,
-            style: {
-              [orientation === "horizontal" ? "insetInlineStart" : "insetInlineEnd"]: `${currentValue / max * 100}%`
-            },
-            onKeyDown,
-            ...restProps
-          }
-        ),
-        /* @__PURE__ */ jsx("input", { type: "hidden", disabled, name, value: currentValue })
-      ]
-    }
-  );
-};
-export {
-  Slider
-};