@stfrigerio/sito-template 0.1.8 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,3 +1,4 @@
1
+ import React from 'react';
1
2
  /**
2
3
  * Configuration for a field in complex object arrays
3
4
  * @interface FieldConfig
@@ -19,6 +20,10 @@ export interface FieldConfig {
19
20
  interface BaseArrayInputProps {
20
21
  /** Label text displayed above the array input */
21
22
  label: string;
23
+ /** Style object for individual array items */
24
+ itemStyle?: React.CSSProperties;
25
+ /** Style object for input fields */
26
+ inputStyle?: React.CSSProperties;
22
27
  }
23
28
  /**
24
29
  * Props for simple string array input
@@ -1 +1 @@
1
- {"version":3,"file":"ArrayInput.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/ArrayInput/ArrayInput.tsx"],"names":[],"mappings":"AAKA;;;GAGG;AACH,MAAM,WAAW,WAAW;IACxB,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,UAAU,mBAAmB;IACzB,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;CACjB;AAED;;;GAGG;AACH,UAAU,qBAAsB,SAAQ,mBAAmB;IACvD,0DAA0D;IAC1D,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,6BAA6B;IAC7B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,8CAA8C;IAC9C,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;GAIG;AACH,UAAU,sBAAsB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAE,SAAQ,mBAAmB;IACvF,uDAAuD;IACvD,IAAI,EAAE,SAAS,CAAC;IAChB,6BAA6B;IAC7B,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,8CAA8C;IAC9C,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC,kDAAkD;IAClD,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,oEAAoE;IACpE,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IACzE,qBAAqB,GACrB,sBAAsB,CAAC,CAAC,CAAC,CAAC;AAEhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1E,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,2CAOtC;AAoID,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACf"}
1
+ {"version":3,"file":"ArrayInput.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/ArrayInput/ArrayInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;GAGG;AACH,MAAM,WAAW,WAAW;IACxB,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,UAAU,mBAAmB;IACzB,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,oCAAoC;IACpC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACpC;AAED;;;GAGG;AACH,UAAU,qBAAsB,SAAQ,mBAAmB;IACvD,0DAA0D;IAC1D,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,6BAA6B;IAC7B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,8CAA8C;IAC9C,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;GAIG;AACH,UAAU,sBAAsB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAE,SAAQ,mBAAmB;IACvF,uDAAuD;IACvD,IAAI,EAAE,SAAS,CAAC;IAChB,6BAA6B;IAC7B,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,8CAA8C;IAC9C,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC,kDAAkD;IAClD,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,oEAAoE;IACpE,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IACzE,qBAAqB,GACrB,sBAAsB,CAAC,CAAC,CAAC,CAAC;AAEhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1E,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,2CAOtC;AAiLD,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACf"}
@@ -16,6 +16,10 @@ export interface ToggleProps {
16
16
  readonly leftIcon?: React.ReactNode;
17
17
  /** Icon to display with the right option */
18
18
  readonly rightIcon?: React.ReactNode;
19
+ /** Optional CSS class name */
20
+ readonly className?: string;
21
+ /** Optional inline styles */
22
+ readonly style?: React.CSSProperties;
19
23
  }
20
24
  /**
21
25
  * Toggle Component
@@ -1 +1 @@
1
- {"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;GAGG;AACH,MAAM,WAAW,WAAW;IACxB,2DAA2D;IAC3D,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,+CAA+C;IAC/C,QAAQ,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,2CAA2C;IAC3C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,2CAA2C;IAC3C,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,4CAA4C;IAC5C,QAAQ,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,WAAW,CAAC,2CAoBlD"}
1
+ {"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;GAGG;AACH,MAAM,WAAW,WAAW;IACxB,2DAA2D;IAC3D,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,+CAA+C;IAC/C,QAAQ,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,2CAA2C;IAC3C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,2CAA2C;IAC3C,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,4CAA4C;IAC5C,QAAQ,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,8BAA8B;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,6BAA6B;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACxC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,WAAW,CAAC,2CA+BlD"}
@@ -39,5 +39,6 @@ export declare const WithLabelsAndIcons: Story;
39
39
  export declare const ViewToggle: Story;
40
40
  export declare const Interactive: Story;
41
41
  export declare const ThemeToggle: Story;
42
+ export declare const CustomStyling: Story;
42
43
  export declare const MultipleToggles: Story;
43
44
  //# sourceMappingURL=Toggle.stories.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Toggle/Toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAShC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAkBzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAqCzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA6D7B,CAAC"}
1
+ {"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Toggle/Toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAShC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAkBzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAqCzB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAyC3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8D7B,CAAC"}
package/dist/index.esm.js CHANGED
@@ -198,7 +198,7 @@ function TextInput({ label, value, onChange, type = "text", onFocus, onBlur, pla
198
198
  return (jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { htmlFor: inputId, children: [label, required && jsx("span", { className: styles$l.required, children: "*" })] }), jsxs("div", { style: { position: 'relative' }, children: [icon && jsx("div", { className: styles$l.inputIcon, children: icon }), jsx("input", { id: inputId, type: type, value: value, onChange: (e) => onChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: error ? styles$l.inputError : '', "aria-invalid": !!error, "aria-describedby": error ? `${inputId}-error` : undefined, disabled: disabled || loading, maxLength: maxLength, autoComplete: autoComplete }), actionButton && (jsx("button", { type: "button", className: styles$l.actionButton, onClick: actionButton.onClick, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsx("span", { id: `${inputId}-error`, className: styles$l.errorMessage, children: error }))] }));
199
199
  }
200
200
 
201
- var styles$k = {"arrayInput":"ArrayInput-module_arrayInput__FNrd2","arrayInputLabel":"ArrayInput-module_arrayInputLabel__7Rpkj","arrayInputItem":"ArrayInput-module_arrayInputItem__eSH-6","inputWrapper":"ArrayInput-module_inputWrapper__i-MB-","input":"ArrayInput-module_input__792ru","complexItem":"ArrayInput-module_complexItem__iX3v6","fieldsWrapper":"ArrayInput-module_fieldsWrapper__fzqvn"};
201
+ var styles$k = {"arrayInput":"ArrayInput-module_arrayInput__FNrd2","arrayInputLabel":"ArrayInput-module_arrayInputLabel__7Rpkj","arrayInputItem":"ArrayInput-module_arrayInputItem__eSH-6","inputWrapper":"ArrayInput-module_inputWrapper__i-MB-","input":"ArrayInput-module_input__792ru","complexItem":"ArrayInput-module_complexItem__iX3v6","fieldsWrapper":"ArrayInput-module_fieldsWrapper__fzqvn","removeButton":"ArrayInput-module_removeButton__khhdR","addButton":"ArrayInput-module_addButton__10o-9"};
202
202
 
203
203
  /**
204
204
  * ArrayInput component - Versatile dynamic list manager
@@ -238,7 +238,7 @@ function ArrayInput(props) {
238
238
  return jsx(SimpleArrayInput, { ...props });
239
239
  }
240
240
  // Simple string array implementation
241
- function SimpleArrayInput({ label, values, onChange, placeholder }) {
241
+ function SimpleArrayInput({ label, values, onChange, placeholder, itemStyle, inputStyle }) {
242
242
  const handleChange = (index, value) => {
243
243
  const newValues = [...values];
244
244
  newValues[index] = value;
@@ -251,10 +251,14 @@ function SimpleArrayInput({ label, values, onChange, placeholder }) {
251
251
  const newValues = values.filter((_, i) => i !== index);
252
252
  onChange(newValues);
253
253
  };
254
- return (jsxs("div", { className: styles$k.arrayInput, children: [jsx("h3", { className: styles$k.arrayInputLabel, children: label }), values.map((value, index) => (jsxs("div", { className: styles$k.arrayInputItem, children: [jsx("div", { className: styles$k.inputWrapper, children: jsx("input", { type: "text", value: value, onChange: (e) => handleChange(index, e.target.value), placeholder: placeholder, className: styles$k.input }) }), jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), children: "Remove" })] }, `item-${index}`))), jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, children: ["Add ", label] })] }));
254
+ return (jsxs("div", { className: styles$k.arrayInput, children: [jsx("h3", { className: styles$k.arrayInputLabel, children: label }), jsx("div", { children: jsx(AnimatePresence, { children: values.map((value, index) => (jsxs(motion.div, { className: styles$k.arrayInputItem, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
255
+ duration: 0.3,
256
+ ease: "easeInOut",
257
+ layout: { duration: 0.2 }
258
+ }, children: [jsx("div", { className: styles$k.inputWrapper, children: jsx("input", { type: "text", value: value, onChange: (e) => handleChange(index, e.target.value), placeholder: placeholder, className: styles$k.input, style: inputStyle }) }), jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$k.removeButton, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) })] }, `item-${index}`))) }) }), jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, className: styles$k.addButton, children: ["Add ", label] })] }));
255
259
  }
256
260
  // Complex object array implementation
257
- function ComplexArrayInput({ label, values, onChange, fields, getKey }) {
261
+ function ComplexArrayInput({ label, values, onChange, fields, getKey, itemStyle, inputStyle }) {
258
262
  const handleChange = (index, field, value) => {
259
263
  const newValues = [...values];
260
264
  newValues[index] = { ...newValues[index], [field]: value };
@@ -276,7 +280,11 @@ function ComplexArrayInput({ label, values, onChange, fields, getKey }) {
276
280
  // Generate key from all field values
277
281
  return fields.map(f => item[f.name] || '').join('-') + `-${index}`;
278
282
  };
279
- return (jsxs("div", { className: styles$k.arrayInput, children: [jsx("h3", { className: styles$k.arrayInputLabel, children: label }), values.map((value, index) => (jsxs("div", { className: `${styles$k.arrayInputItem} ${fields.length > 1 ? styles$k.complexItem : ''}`, children: [jsx("div", { className: styles$k.fieldsWrapper, children: fields.map((field) => (jsx(TextInput, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, type: field.type, placeholder: field.placeholder }, field.name))) }), jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), children: "Remove" })] }, generateKey(value, index)))), jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, children: ["Add ", label] })] }));
283
+ return (jsxs("div", { className: styles$k.arrayInput, children: [jsx("h3", { className: styles$k.arrayInputLabel, children: label }), jsx("div", { children: jsx(AnimatePresence, { children: values.map((value, index) => (jsxs(motion.div, { className: `${styles$k.arrayInputItem} ${fields.length > 1 ? styles$k.complexItem : ''}`, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
284
+ duration: 0.3,
285
+ ease: "easeInOut",
286
+ layout: { duration: 0.2 }
287
+ }, children: [jsx("div", { className: styles$k.fieldsWrapper, children: fields.map((field) => (jsx("div", { style: inputStyle, children: jsx(TextInput, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, type: field.type, placeholder: field.placeholder }) }, field.name))) }), jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$k.removeButton, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) })] }, generateKey(value, index)))) }) }), jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, className: styles$k.addButton, children: ["Add ", label] })] }));
280
288
  }
281
289
 
282
290
  var styles$j = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
@@ -825,8 +833,15 @@ var styles$e = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggle
825
833
  * @returns {JSX.Element} The rendered Toggle component
826
834
  */
827
835
  function Toggle(props) {
828
- const { isOn, onToggle, leftLabel, rightLabel, leftIcon, rightIcon } = props;
829
- return (jsxs("div", { className: styles$e.toggleContainer, children: [jsxs("button", { className: `${styles$e.toggleButton} ${!isOn ? styles$e.active : ''}`, onClick: () => onToggle(false), children: [leftIcon, leftLabel] }), jsxs("button", { className: `${styles$e.toggleButton} ${isOn ? styles$e.active : ''}`, onClick: () => onToggle(true), children: [rightIcon, rightLabel] })] }));
836
+ const { isOn, onToggle, leftLabel, rightLabel, leftIcon, rightIcon, className, style } = props;
837
+ // Ensure content stays centered by merging styles
838
+ const buttonStyle = {
839
+ display: 'flex',
840
+ alignItems: 'center',
841
+ justifyContent: 'center',
842
+ ...style
843
+ };
844
+ return (jsxs("div", { className: `${styles$e.toggleContainer} ${className || ''}`, children: [jsxs("button", { className: `${styles$e.toggleButton} ${!isOn ? styles$e.active : ''}`, onClick: () => onToggle(false), style: buttonStyle, children: [leftIcon, leftLabel] }), jsxs("button", { className: `${styles$e.toggleButton} ${isOn ? styles$e.active : ''}`, onClick: () => onToggle(true), style: buttonStyle, children: [rightIcon, rightLabel] })] }));
830
845
  }
831
846
 
832
847
  var styles$d = {"container":"NumberStepper-module_container__WSGlU","header":"NumberStepper-module_header__qXI1Y","icon":"NumberStepper-module_icon__vHgsw","label":"NumberStepper-module_label__AYr3g","stepper":"NumberStepper-module_stepper__oQhTp","disabled":"NumberStepper-module_disabled__kGB-g","button":"NumberStepper-module_button__YcjRt","buttonIcon":"NumberStepper-module_buttonIcon__odXec","valueContainer":"NumberStepper-module_valueContainer__87w2D","valueWrapper":"NumberStepper-module_valueWrapper__TH65N","value":"NumberStepper-module_value__BxJeD","limits":"NumberStepper-module_limits__-UrRE","limit":"NumberStepper-module_limit__7nbIP","small":"NumberStepper-module_small__P-k96","large":"NumberStepper-module_large__Lz6lk","outlined":"NumberStepper-module_outlined__CIXv7","filled":"NumberStepper-module_filled__IxOg-","pulse":"NumberStepper-module_pulse__51oUo"};