doom-design-system 0.1.7 → 0.1.9

package/dist/components/Select/Select.js

@@ -12,85 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useId } from 'react';
-import { baseInteractiveStyles, focusStyles } from '../../styles/mixins';
-import styled from '@emotion/styled';
-import { Text, Popover } from '../..';
+import clsx from 'clsx';
+import { Text } from '../Text/Text';
+import { Popover } from '../Popover/Popover';
 import { Check, ChevronDown } from 'lucide-react';
-const SelectContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  position: relative;
-`;
-const SelectTrigger = styled.button `
-  width: 100%;
-  background: var(--card-bg);
-  color: var(--foreground);
-  padding: 0.75rem 1rem;
-  font-size: var(--text-base);
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  min-height: 42px;
-
-  ${baseInteractiveStyles}
-
-  &:hover {
-    transform: translate(-2px, -2px);
-    box-shadow: var(--shadow-hover);
-  }
-
-  ${focusStyles}
-`;
-const OptionsList = styled.ul `
-  background: var(--card-bg);
-  border: var(--border-width) solid var(--primary);
-  border-radius: var(--radius);
-  box-shadow: none;
-  min-width: 200px;
-  max-height: 300px;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding: 0.25rem;
-  margin: 0;
-  list-style: none;
-`;
-const OptionItem = styled.li `
-  text-align: left;
-  padding: 0.75rem 1rem;
-  background: ${props => props.isSelected ? 'var(--primary)' : (props.isHighlighted ? 'color-mix(in srgb, var(--primary), transparent 85%)' : 'transparent')};
-  border: none;
-  border-radius: calc(var(--radius) - 2px);
-  color: ${props => props.isSelected ? 'var(--primary-foreground)' : (props.isHighlighted ? 'var(--primary)' : 'var(--foreground)')};
-  cursor: pointer;
-  font-size: var(--text-base);
-  font-weight: ${props => props.isSelected ? '700' : '400'};
-  transition: all 0.1s ease;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  user-select: none;
-
-  &:hover {
-    background-color: color-mix(in srgb, var(--primary), transparent 85%);
-    color: var(--primary);
-  }
-  
-  ${props => props.isSelected && `
-    &:hover {
-      background-color: var(--primary);
-      color: var(--primary-foreground);
-      filter: brightness(1.1);
-    }
-  `}
-`;
+import styles from './Select.module.css';
 export function Select(_a) {
     var _b;
     var { options, className, label, style, value, defaultValue, onChange, placeholder, id, required, disabled, name, form, autoFocus } = _a, props = __rest(_a, ["options", "className", "label", "style", "value", "defaultValue", "onChange", "placeholder", "id", "required", "disabled", "name", "form", "autoFocus"]);
@@ -174,10 +100,10 @@ export function Select(_a) {
                 break;
         }
     };
-    return (_jsxs(SelectContainer, { className: className, style: style, children: [label && (_jsx(Text, { as: "label", id: labelId, variant: "small", weight: "bold", color: "muted", className: "mb-1 block", htmlFor: id, children: label })), _jsx(Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-start", trigger: _jsxs(SelectTrigger, Object.assign({ ref: triggerRef, type: "button", id: id, onClick: () => setIsOpen(!isOpen), onKeyDown: handleKeyDown, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-labelledby": label ? labelId : undefined, disabled: disabled, autoFocus: autoFocus }, props, { children: [_jsx("span", { children: selectedOption ? selectedOption.label : (placeholder || 'Select...') }), _jsx(ChevronDown, { size: 16, strokeWidth: 2.5, style: { marginLeft: '0.5rem' } })] })), content: _jsx(OptionsList, { id: listboxId, role: "listbox", "aria-labelledby": label ? labelId : undefined, style: { width: (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth }, children: options.map((opt, index) => {
+    return (_jsxs("div", { className: clsx(styles.container, className), style: style, children: [label && (_jsx(Text, { as: "label", id: labelId, variant: "small", weight: "bold", color: "muted", className: "mb-1 block", htmlFor: id, children: label })), _jsx(Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-start", trigger: _jsxs("button", Object.assign({ ref: triggerRef, className: styles.trigger, type: "button", id: id, onClick: () => setIsOpen(!isOpen), onKeyDown: handleKeyDown, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-labelledby": label ? labelId : undefined, disabled: disabled, autoFocus: autoFocus }, props, { children: [_jsx("span", { children: selectedOption ? selectedOption.label : (placeholder || 'Select...') }), _jsx(ChevronDown, { size: 16, strokeWidth: 2.5, style: { marginLeft: '0.5rem' } })] })), content: _jsx("ul", { id: listboxId, role: "listbox", "aria-labelledby": label ? labelId : undefined, className: styles.optionsList, style: { width: (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth }, children: options.map((opt, index) => {
                         const isSelected = String(opt.value) === String(currentValue);
                         const isHighlighted = index === highlightedIndex;
-                        return (_jsxs(OptionItem, { id: `${listboxId}-option-${index}`, role: "option", "aria-selected": isSelected, isSelected: isSelected, isHighlighted: isHighlighted, onClick: () => handleSelect(opt.value), onMouseEnter: () => setHighlightedIndex(index), children: [_jsx("span", { children: opt.label }), isSelected && _jsx(Check, { size: 14, strokeWidth: 3 })] }, opt.value));
+                        return (_jsxs("li", { id: `${listboxId}-option-${index}`, role: "option", "aria-selected": isSelected, className: clsx(styles.optionItem, isSelected && styles.selected, isHighlighted && styles.highlighted), onClick: () => handleSelect(opt.value), onMouseEnter: () => setHighlightedIndex(index), children: [_jsx("span", { children: opt.label }), isSelected && _jsx(Check, { size: 14, strokeWidth: 3 })] }, opt.value));
                     }) }) }), _jsx("input", { type: "text", name: name, value: currentValue, required: required, form: form, tabIndex: -1, readOnly: true, style: {
                     opacity: 0,
                     height: '1px',

package/dist/components/Select/Select.module.css

@@ -0,0 +1,89 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+}
+
+.trigger {
+  width: 100%;
+  background: var(--card-bg);
+  color: var(--foreground);
+  padding: 0.75rem 1rem;
+  font-size: var(--text-base);
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  min-height: 42px;
+  border: var(--border-width) solid var(--card-border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-hard);
+  transition: all 0.1s ease;
+  outline: none;
+}
+.trigger:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: var(--shadow-hover);
+}
+.trigger:focus, .trigger:focus-visible, .trigger[aria-expanded=true] {
+  outline: none;
+  transform: translate(-2px, -2px);
+  box-shadow: 7px 7px 0px 0px var(--shadow-primary);
+  border-color: var(--primary);
+}
+
+.optionsList {
+  background: var(--card-bg);
+  border: var(--border-width) solid var(--primary);
+  border-radius: var(--radius);
+  box-shadow: none;
+  min-width: 200px;
+  max-height: 300px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  margin: 0;
+  list-style: none;
+}
+
+.optionItem {
+  text-align: left;
+  padding: 0.75rem 1rem;
+  background: transparent;
+  border: none;
+  border-radius: calc(var(--radius) - 2px);
+  color: var(--foreground);
+  cursor: pointer;
+  font-size: var(--text-base);
+  font-weight: 400;
+  transition: all 0.1s ease;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  user-select: none;
+}
+.optionItem:hover {
+  background-color: color-mix(in srgb, var(--primary), transparent 85%);
+  color: var(--primary);
+}
+.optionItem.highlighted {
+  background: color-mix(in srgb, var(--primary), transparent 85%);
+  color: var(--primary);
+}
+.optionItem.selected {
+  background: var(--primary);
+  color: var(--primary-foreground);
+  font-weight: 700;
+}
+.optionItem.selected:hover {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+  filter: brightness(1.1);
+}

package/dist/components/Sheet/Sheet.js

@@ -2,62 +2,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
-import styled from '@emotion/styled';
+import clsx from 'clsx';
+import { Button } from '../Button/Button';
+import { Flex } from '../Layout/Layout';
+import styles from './Sheet.module.css';
 import { X } from 'lucide-react';
-import { Button } from '../Button';
-import { Flex } from '../Layout';
-const Overlay = styled.div `
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, var(--overlay-opacity));
-  backdrop-filter: blur(4px);
-  opacity: ${props => props.isOpen ? 1 : 0};
-  transition: opacity 0.2s ease-in-out;
-  pointer-events: ${props => props.isOpen ? 'auto' : 'none'};
-  z-index: var(--z-dropdown);
-`;
-const Panel = styled.div `
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  max-height: 96vh;
-  min-height: 50vh;
-  background-color: var(--card-bg);
-  border-top: var(--border-width) solid var(--card-border);
-  border-left: var(--border-width) solid var(--card-border);
-  border-right: var(--border-width) solid var(--card-border);
-  border-top-left-radius: var(--radius);
-  border-top-right-radius: var(--radius);
-  box-shadow: var(--shadow-lg);
-  display: flex;
-  flex-direction: column;
-  z-index: var(--z-modal);
-  transform: ${props => props.isOpen ? 'translateY(0)' : 'translateY(100%)'};
-  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-`;
-const HandleBar = styled.div `
-  width: 48px;
-  height: 6px;
-  background-color: var(--card-border);
-  border-radius: 99px;
-  margin: 0.75rem auto;
-  opacity: 0.5;
-`;
-const Header = styled(Flex) `
-  padding: 0 var(--spacing-lg) var(--spacing-md) var(--spacing-lg);
-`;
-const Title = styled.h2 `
-  margin: 0;
-  font-family: var(--font-heading);
-  font-size: var(--text-xl);
-  font-weight: 700;
-`;
-const Content = styled.div `
-  flex: 1;
-  padding: 0 var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
-  overflow-y: auto;
-`;
 export function Sheet({ isOpen, onClose, title, children, className }) {
     const [mounted, setMounted] = useState(false);
     useEffect(() => {
@@ -83,5 +32,5 @@ export function Sheet({ isOpen, onClose, title, children, className }) {
     }, [isOpen, onClose]);
     if (!mounted)
         return null;
-    return createPortal(_jsxs(_Fragment, { children: [_jsx(Overlay, { isOpen: isOpen, onClick: onClose, "aria-hidden": "true" }), _jsxs(Panel, { isOpen: isOpen, role: "dialog", "aria-modal": "true", className: className, children: [_jsx(HandleBar, {}), _jsxs(Header, { align: "center", justify: "space-between", children: [_jsx(Title, { children: title }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close sheet", children: _jsx(X, { size: 24 }) })] }), _jsx(Content, { children: children })] })] }), document.body);
+    return createPortal(_jsxs(_Fragment, { children: [_jsx("div", { className: clsx(styles.overlay, isOpen && styles.isOpen), onClick: onClose, "aria-hidden": "true" }), _jsxs("div", { className: clsx(styles.panel, isOpen && styles.isOpen, className), role: "dialog", "aria-modal": "true", children: [_jsx("div", { className: styles.handleBar }), _jsxs(Flex, { align: "center", justify: "space-between", className: styles.header, children: [_jsx("h2", { className: styles.title, children: title }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close sheet", children: _jsx(X, { size: 24 }) })] }), _jsx("div", { className: styles.content, children: children })] })] }), document.body);
 }

package/dist/components/Sheet/Sheet.module.css

@@ -0,0 +1,64 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, var(--overlay-opacity));
+  backdrop-filter: blur(4px);
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  pointer-events: none;
+  z-index: var(--z-dropdown);
+}
+.overlay.isOpen {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.panel {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  max-height: 96vh;
+  min-height: 50vh;
+  background-color: var(--card-bg);
+  border-top: var(--border-width) solid var(--card-border);
+  border-left: var(--border-width) solid var(--card-border);
+  border-right: var(--border-width) solid var(--card-border);
+  border-top-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
+  box-shadow: var(--shadow-lg);
+  display: flex;
+  flex-direction: column;
+  z-index: var(--z-modal);
+  transform: translateY(100%);
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.panel.isOpen {
+  transform: translateY(0);
+}
+
+.handleBar {
+  width: 48px;
+  height: 6px;
+  background-color: var(--card-border);
+  border-radius: 99px;
+  margin: 0.75rem auto;
+  opacity: 0.5;
+}
+
+.header {
+  padding: 0 var(--spacing-lg) var(--spacing-md) var(--spacing-lg);
+}
+
+.title {
+  margin: 0;
+  font-family: var(--font-heading);
+  font-size: var(--text-xl);
+  font-weight: 700;
+}
+
+.content {
+  flex: 1;
+  padding: 0 var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
+  overflow-y: auto;
+}

package/dist/components/Skeleton/Skeleton.js

@@ -11,55 +11,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import styled from '@emotion/styled';
-import { keyframes } from '@emotion/react';
-const shimmer = keyframes `
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-`;
-const StyledSkeleton = styled.div `
-  background: linear-gradient(
-    90deg,
-    rgba(0, 0, 0, 0.06) 25%,
-    rgba(0, 0, 0, 0.12) 37%,
-    rgba(0, 0, 0, 0.06) 63%
-  );
-  background-size: 200% 100%;
-  animation: ${shimmer} 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  
-  /* Dimensions */
-  width: ${props => props.$width || '100%'};
-  height: ${props => props.$height || 'auto'};
-
-  /* Variant Styles */
-  ${props => {
-    switch (props.$variant) {
-        case 'circular':
-            return `
-          border-radius: 50%;
-          height: ${props.$height || props.$width || '3rem'};
-          width: ${props.$width || props.$height || '3rem'};
-        `;
-        case 'text':
-            return `
-          height: ${props.$height || '1em'};
-          border-radius: var(--radius);
-          margin-bottom: 0.5rem;
-        `;
-        case 'rectangular':
-        default:
-            return `
-          height: ${props.$height || '10rem'};
-          border-radius: var(--radius);
-        `;
-    }
-}}
-`;
+import clsx from 'clsx';
+import styles from './Skeleton.module.css';
 export function Skeleton(_a) {
     var { width, height, variant = 'rectangular', className, style } = _a, props = __rest(_a, ["width", "height", "variant", "className", "style"]);
-    return (_jsx(StyledSkeleton, Object.assign({ "$width": width, "$height": height, "$variant": variant, className: className, style: style }, props)));
+    const customStyle = Object.assign({ '--width': width, '--height': height }, style);
+    return (_jsx("div", Object.assign({ className: clsx(styles.skeleton, styles[variant], className), style: customStyle }, props)));
 }

package/dist/components/Skeleton/Skeleton.module.css

@@ -0,0 +1,29 @@
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+.skeleton {
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.12) 37%, rgba(0, 0, 0, 0.06) 63%);
+  background-size: 200% 100%;
+  animation: shimmer 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  width: var(--width, 100%);
+  height: var(--height, auto);
+}
+.skeleton.text {
+  height: var(--height, 1em);
+  border-radius: var(--radius);
+  margin-bottom: 0.5rem;
+}
+.skeleton.circular {
+  border-radius: 50%;
+  height: var(--height, var(--width, 3rem));
+  width: var(--width, var(--height, 3rem));
+}
+.skeleton.rectangular {
+  height: var(--height, 10rem);
+  border-radius: var(--radius);
+}

package/dist/components/Slider/Slider.js

@@ -11,146 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import styles from './Slider.module.css';
 import React from 'react';
-import styled from '@emotion/styled';
-const SliderContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  width: 100%;
-`;
-const LabelRow = styled.div `
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-family: var(--font-heading);
-  font-weight: 600;
-  font-size: var(--text-sm);
-  color: var(--foreground);
-`;
-const ValueDisplay = styled.span `
-  font-family: var(--font-mono, monospace);
-  font-weight: 700;
-  color: var(--primary);
-  font-size: var(--text-base);
-  min-width: 3ch;
-  text-align: right;
-`;
-const TrackWrapper = styled.div `
-  position: relative;
-  width: 100%;
-  height: 8px;
-  border-radius: 999px;
-  background: var(--muted);
-  overflow: visible;
-`;
-const ProgressFill = styled.div `
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  width: ${props => props.percentage}%;
-  background: var(--primary);
-  border-radius: 999px;
-  z-index: 1;
-`;
-const RangeInput = styled.input `
-  -webkit-appearance: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: transparent;
-  cursor: pointer;
-  margin: 0;
-  z-index: 10;
-
-  &::-webkit-slider-runnable-track {
-    width: 100%;
-    height: 8px;
-    background: transparent;
-    border: none;
-  }
-  
-  &::-moz-range-track {
-    width: 100%;
-    height: 8px;
-    background: transparent;
-    border: none;
-  }
-
-  &::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    height: 20px;
-    width: 20px;
-    background: var(--primary);
-    border: 3px solid var(--background);
-    border-radius: 50%;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--card-border);
-    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-    margin-top: -6px;
-  }
-
-  &::-moz-range-thumb {
-    height: 20px;
-    width: 20px;
-    background: var(--primary);
-    border: 3px solid var(--background);
-    border-radius: 50%;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--card-border);
-    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  &:hover::-webkit-slider-thumb {
-    transform: scale(1.15);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent);
-  }
-
-  &:hover::-moz-range-thumb {
-    transform: scale(1.15);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent);
-  }
-
-  &:active::-webkit-slider-thumb {
-    transform: scale(1.05);
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 6px color-mix(in srgb, var(--primary) 25%, transparent);
-  }
-
-  &:active::-moz-range-thumb {
-    transform: scale(1.05);
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 6px color-mix(in srgb, var(--primary) 25%, transparent);
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:focus-visible::-webkit-slider-thumb {
-    outline: 2px solid var(--primary);
-    outline-offset: 2px;
-  }
-
-  &:focus-visible::-moz-range-thumb {
-    outline: 2px solid var(--primary);
-    outline-offset: 2px;
-  }
-  
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  &:disabled::-webkit-slider-thumb {
-    background: var(--muted-foreground);
-    cursor: not-allowed;
-  }
-
-  &:disabled::-moz-range-thumb {
-    background: var(--muted-foreground);
-    cursor: not-allowed;
-  }
-`;
 export function Slider(_a) {
     var { label, showValue, value, defaultValue, onChange, min = 0, max = 100, step = 1, className } = _a, props = __rest(_a, ["label", "showValue", "value", "defaultValue", "onChange", "min", "max", "step", "className"]);
     const [internalValue, setInternalValue] = React.useState(defaultValue !== undefined ? defaultValue : min);
@@ -164,5 +27,5 @@ export function Slider(_a) {
         onChange === null || onChange === void 0 ? void 0 : onChange(newVal);
     };
     const percentage = ((currentValue - min) / (max - min)) * 100;
-    return (_jsxs(SliderContainer, { className: className, children: [(label || showValue) && (_jsxs(LabelRow, { children: [label && _jsx("span", { children: label }), showValue && _jsx(ValueDisplay, { children: currentValue })] })), _jsxs(TrackWrapper, { children: [_jsx(ProgressFill, { percentage: percentage }), _jsx(RangeInput, Object.assign({ type: "range", min: min, max: max, step: step, value: currentValue, onChange: handleChange, percentage: percentage }, props))] })] }));
+    return (_jsxs("div", { className: clsx(styles.container, className), children: [(label || showValue) && (_jsxs("div", { className: styles.labelRow, children: [label && _jsx("span", { children: label }), showValue && _jsx("span", { className: styles.valueDisplay, children: currentValue })] })), _jsxs("div", { className: styles.trackWrapper, children: [_jsx("div", { className: styles.progressFill, style: { '--percentage': `${percentage}%` } }), _jsx("input", Object.assign({ className: styles.rangeInput, type: "range", min: min, max: max, step: step, value: currentValue, onChange: handleChange }, props))] })] }));
 }