@seeqdev/qomponents 0.0.231 → 0.0.232

package/dist/src/Accordion/Accordion.d.ts

@@ -1,5 +1,5 @@
 import { AccordionProps } from "./Accordion.types.js";
-import * as react_jsx_runtime31 from "react/jsx-runtime";
+import * as react_jsx_runtime30 from "react/jsx-runtime";
 
 //#region src/Accordion/Accordion.d.ts
 declare const Accordion: ({
@@ -10,6 +10,6 @@ declare const Accordion: ({
   disabled,
   extraClassNames,
   testId
-}: AccordionProps) => react_jsx_runtime31.JSX.Element;
+}: AccordionProps) => react_jsx_runtime30.JSX.Element;
 //#endregion
 export { Accordion as default };

package/dist/src/Alert/Alert.d.ts

@@ -1,5 +1,5 @@
 import { AlertProps } from "./Alert.types.js";
-import * as react_jsx_runtime30 from "react/jsx-runtime";
+import * as react_jsx_runtime31 from "react/jsx-runtime";
 
 //#region src/Alert/Alert.d.ts
 /**
@@ -15,6 +15,6 @@ declare const Alert: ({
   id,
   extraClassNames,
   ...tooltipProps
-}: AlertProps) => react_jsx_runtime30.JSX.Element;
+}: AlertProps) => react_jsx_runtime31.JSX.Element;
 //#endregion
 export { Alert };

package/dist/src/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import { ButtonProps } from "./Button.types.js";
-import * as react_jsx_runtime26 from "react/jsx-runtime";
+import * as react_jsx_runtime25 from "react/jsx-runtime";
 import React from "react";
 
 //#region src/Button/Button.d.ts
@@ -33,6 +33,6 @@ declare const Button: ({
   tooltipTestId,
   ref,
   ...rest
-}: ButtonComponentProps) => react_jsx_runtime26.JSX.Element;
+}: ButtonComponentProps) => react_jsx_runtime25.JSX.Element;
 //#endregion
 export { Button as default };

package/dist/src/ButtonGroup/ButtonGroup.d.ts

@@ -1,10 +1,10 @@
 import { ButtonGroupProps } from "./ButtonGroup.types.js";
-import * as react_jsx_runtime25 from "react/jsx-runtime";
+import * as react_jsx_runtime26 from "react/jsx-runtime";
 
 //#region src/ButtonGroup/ButtonGroup.d.ts
 /**
  * ButtonGroup.
  */
-declare const ButtonGroup: (props: ButtonGroupProps) => react_jsx_runtime25.JSX.Element;
+declare const ButtonGroup: (props: ButtonGroupProps) => react_jsx_runtime26.JSX.Element;
 //#endregion
 export { ButtonGroup };

package/dist/src/ButtonWithPopover/ButtonWithPopover.d.ts

@@ -1,5 +1,5 @@
 import { ButtonWithPopoverProps } from "./ButtonWithPopover.types.js";
-import * as react_jsx_runtime23 from "react/jsx-runtime";
+import * as react_jsx_runtime19 from "react/jsx-runtime";
 
 //#region src/ButtonWithPopover/ButtonWithPopover.d.ts
 declare const ButtonWithPopover: ({
@@ -26,6 +26,6 @@ declare const ButtonWithPopover: ({
   isCloseOnContentClick,
   isPortal,
   ...tooltipProps
-}: ButtonWithPopoverProps) => react_jsx_runtime23.JSX.Element;
+}: ButtonWithPopoverProps) => react_jsx_runtime19.JSX.Element;
 //#endregion
 export { ButtonWithPopover as default };

package/dist/src/Carousel/Carousel.d.ts

@@ -1,5 +1,5 @@
 import { CarouselProps } from "./Carousel.types.js";
-import * as react_jsx_runtime19 from "react/jsx-runtime";
+import * as react_jsx_runtime24 from "react/jsx-runtime";
 
 //#region src/Carousel/Carousel.d.ts
 
@@ -22,6 +22,6 @@ declare const Carousel: ({
   showArrows,
   iconExtraClassNames,
   carouselItems
-}: CarouselProps) => react_jsx_runtime19.JSX.Element;
+}: CarouselProps) => react_jsx_runtime24.JSX.Element;
 //#endregion
 export { Carousel as default };

package/dist/src/Checkbox/Checkbox.d.ts

@@ -1,10 +1,10 @@
 import { CheckboxProps } from "./Checkbox.types.js";
-import * as react_jsx_runtime21 from "react/jsx-runtime";
+import * as react_jsx_runtime23 from "react/jsx-runtime";
 
 //#region src/Checkbox/Checkbox.d.ts
 /**
  * Checkbox and Radio Box Component.
  */
-declare const Checkbox: (props: CheckboxProps) => react_jsx_runtime21.JSX.Element;
+declare const Checkbox: (props: CheckboxProps) => react_jsx_runtime23.JSX.Element;
 //#endregion
 export { Checkbox };

package/dist/src/Collapse/Collapse.d.ts

@@ -1,10 +1,10 @@
 import { CollapseProps } from "./Collapse.types.js";
-import * as react_jsx_runtime24 from "react/jsx-runtime";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
 
 //#region src/Collapse/Collapse.d.ts
 declare const Collapse: ({
   isVisible,
   children
-}: CollapseProps) => react_jsx_runtime24.JSX.Element;
+}: CollapseProps) => react_jsx_runtime20.JSX.Element;
 //#endregion
 export { Collapse as default };

package/dist/src/ColorPickerControl/ColorPickerControl.d.ts

@@ -1,5 +1,5 @@
 import { ColorPickerControlProps } from "./ColorPickerControl.types.js";
-import * as react_jsx_runtime22 from "react/jsx-runtime";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
 
 //#region src/ColorPickerControl/ColorPickerControl.d.ts
 declare function ColorPickerControl({
@@ -12,6 +12,6 @@ declare function ColorPickerControl({
   id,
   testId,
   onOpen
-}: ColorPickerControlProps): react_jsx_runtime22.JSX.Element;
+}: ColorPickerControlProps): react_jsx_runtime15.JSX.Element;
 //#endregion
 export { ColorPickerControl as default };

package/dist/src/EditorPanel/EditorPanel.d.ts

@@ -1,5 +1,5 @@
 import { EditorPanelProps } from "./EditorPanel.types.js";
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
 
 //#region src/EditorPanel/EditorPanel.d.ts
 declare const EditorPanel: ({
@@ -14,6 +14,6 @@ declare const EditorPanel: ({
   extraClassNames,
   id,
   testId
-}: EditorPanelProps) => react_jsx_runtime14.JSX.Element;
+}: EditorPanelProps) => react_jsx_runtime22.JSX.Element;
 //#endregion
 export { EditorPanel as default };

package/dist/src/ExternalLink/ExternalLink.d.ts

@@ -1,5 +1,5 @@
 import { ExternalLinkProps } from "./ExternalLink.types.js";
-import * as react_jsx_runtime13 from "react/jsx-runtime";
+import * as react_jsx_runtime21 from "react/jsx-runtime";
 
 //#region src/ExternalLink/ExternalLink.d.ts
 /**
@@ -12,6 +12,6 @@ declare const ExternalLink: ({
   children,
   extraClassNames,
   testId
-}: ExternalLinkProps) => react_jsx_runtime13.JSX.Element;
+}: ExternalLinkProps) => react_jsx_runtime21.JSX.Element;
 //#endregion
 export { ExternalLink, ExternalLink as default };

package/dist/src/Icon/Icon.d.ts

@@ -1,5 +1,5 @@
 import { IconProps } from "./Icon.types.js";
-import * as react_jsx_runtime15 from "react/jsx-runtime";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
 
 //#region src/Icon/Icon.d.ts
 
@@ -23,6 +23,6 @@ declare const Icon: ({
   customId,
   number,
   ...tooltipProps
-}: IconProps) => react_jsx_runtime15.JSX.Element;
+}: IconProps) => react_jsx_runtime13.JSX.Element;
 //#endregion
 export { Icon as default };

package/dist/src/LoadingIndicator/LoadingIndicator.d.ts

@@ -1,5 +1,5 @@
 import { LoadingIndicatorProps } from "./LoadingIndicator.types.js";
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 
 //#region src/LoadingIndicator/LoadingIndicator.d.ts
 /**
@@ -19,6 +19,6 @@ declare const LoadingIndicator: ({
   role,
   onClick,
   title
-}: LoadingIndicatorProps) => react_jsx_runtime17.JSX.Element;
+}: LoadingIndicatorProps) => react_jsx_runtime14.JSX.Element;
 //#endregion
 export { LoadingIndicator as default };

package/dist/src/Modal/Modal.d.ts

@@ -1,5 +1,5 @@
 import { ModalProps } from "./Modal.types.js";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 
 //#region src/Modal/Modal.d.ts
 
@@ -45,6 +45,6 @@ declare const Modal: ({
   onPointerDownOutside,
   onInteractOutside,
   ariaDescribedBy
-}: ModalProps) => react_jsx_runtime6.JSX.Element;
+}: ModalProps) => react_jsx_runtime9.JSX.Element;
 //#endregion
 export { Modal as default };

package/dist/src/ProgressBar/ProgressBar.d.ts

@@ -1,5 +1,5 @@
 import { ProgressBarProps } from "./ProgressBar.types.js";
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/ProgressBar/ProgressBar.d.ts
 declare const ProgressBar: ({
@@ -7,6 +7,6 @@ declare const ProgressBar: ({
   max,
   containerExtraClasses,
   zeroValueLabel
-}: ProgressBarProps) => react_jsx_runtime12.JSX.Element;
+}: ProgressBarProps) => react_jsx_runtime5.JSX.Element;
 //#endregion
 export { ProgressBar as default };

package/dist/src/SeeqActionDropdown/SeeqActionDropdown.d.ts

@@ -1,5 +1,5 @@
 import { SeeqActionDropdownProps } from "./SeeqActionDropdown.types.js";
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 
 //#region src/SeeqActionDropdown/SeeqActionDropdown.d.ts
 declare const SeeqActionDropdown: ({
@@ -20,6 +20,6 @@ declare const SeeqActionDropdown: ({
   keepFocusInsideDropdown,
   variant,
   ...tooltipProps
-}: SeeqActionDropdownProps) => react_jsx_runtime9.JSX.Element;
+}: SeeqActionDropdownProps) => react_jsx_runtime7.JSX.Element;
 //#endregion
 export { SeeqActionDropdown as default };

package/dist/src/SegmentedControl/SegmentedControl.d.ts

@@ -1,5 +1,5 @@
 import { SegmentedControlProps } from "./SegmentedControl.types.js";
-import * as react_jsx_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 
 //#region src/SegmentedControl/SegmentedControl.d.ts
 declare function SegmentedControl<T extends string | number | boolean>({
@@ -10,6 +10,6 @@ declare function SegmentedControl<T extends string | number | boolean>({
   id,
   testId,
   ariaLabel
-}: SegmentedControlProps<T>): react_jsx_runtime20.JSX.Element;
+}: SegmentedControlProps<T>): react_jsx_runtime12.JSX.Element;
 //#endregion
 export { SegmentedControl as default };

package/dist/src/Select/Select.d.ts

@@ -1,5 +1,5 @@
 import { SelectProps } from "./Select.types.js";
-import * as react_jsx_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 import { MultiValue as MultiValue$1, SingleValue as SingleValue$1 } from "react-select";
 
 //#region src/Select/Select.d.ts
@@ -50,6 +50,6 @@ declare const Select: ({
   onInputChange,
   inputValue,
   onMenuScrollToBottom
-}: SelectProps) => react_jsx_runtime16.JSX.Element;
+}: SelectProps) => react_jsx_runtime8.JSX.Element;
 //#endregion
 export { MultiValue, SingleValue, Select as default };

package/dist/src/Slider/Slider.d.ts

@@ -1,5 +1,5 @@
 import { SliderProps } from "./Slider.types.js";
-import * as react_jsx_runtime18 from "react/jsx-runtime";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
 
 //#region src/Slider/Slider.d.ts
 /**
@@ -20,6 +20,6 @@ declare const Slider: ({
   min,
   max,
   maxAccessible
-}: SliderProps) => react_jsx_runtime18.JSX.Element;
+}: SliderProps) => react_jsx_runtime17.JSX.Element;
 //#endregion
 export { Slider };

package/dist/src/SvgIcon/SvgIcon.d.ts

@@ -1,5 +1,5 @@
 import { SvgIconProps } from "./SvgIcon.types.js";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
 
 //#region src/SvgIcon/SvgIcon.d.ts
 
@@ -29,6 +29,6 @@ declare const SvgIcon: ({
   testId,
   customId,
   ...tooltipProps
-}: SvgIconProps) => react_jsx_runtime5.JSX.Element;
+}: SvgIconProps) => react_jsx_runtime16.JSX.Element;
 //#endregion
 export { SvgIcon as default };

package/dist/src/Tabs/Tabs.d.ts

@@ -1,5 +1,5 @@
 import { TabsProps } from "./Tabs.types.js";
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
 
 //#region src/Tabs/Tabs.d.ts
 declare const Tabs: ({
@@ -11,6 +11,6 @@ declare const Tabs: ({
   testId,
   id,
   stretchTabs
-}: TabsProps) => react_jsx_runtime11.JSX.Element;
+}: TabsProps) => react_jsx_runtime18.JSX.Element;
 //#endregion
 export { Tabs as default };

package/dist/src/TextArea/TextArea.d.ts

@@ -1,10 +1,10 @@
 import { TextAreaProps } from "./TextArea.types.js";
-import * as react0 from "react";
+import * as react8 from "react";
 
 //#region src/TextArea/TextArea.d.ts
 /**
  * TextArea.
  */
-declare const TextArea: react0.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & react0.RefAttributes<HTMLTextAreaElement>>;
+declare const TextArea: react8.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & react8.RefAttributes<HTMLTextAreaElement>>;
 //#endregion
 export { TextArea };

package/dist/src/TextField/TextField.d.ts

@@ -1,21 +1,21 @@
 import { TooltipComponentProps } from "../Tooltip/Tooltip.types.js";
 import { FormControlElement, InputGroupPlacement } from "../types.js";
 import { InputLengthStyleProps } from "./TextField.types.js";
-import * as react1 from "react";
+import * as react0 from "react";
 
 //#region src/TextField/TextField.d.ts
 /**
  * Textfield.
  */
-declare const TextField: react1.ForwardRefExoticComponent<Omit<{
+declare const TextField: react0.ForwardRefExoticComponent<Omit<{
   readonly?: boolean | undefined;
   disabled?: boolean | undefined;
-  onChange?: react1.ChangeEventHandler<FormControlElement> | undefined;
-  onPaste?: react1.ClipboardEventHandler<FormControlElement> | undefined;
-  onKeyUp?: react1.KeyboardEventHandler<FormControlElement> | undefined;
-  onKeyDown?: react1.KeyboardEventHandler<FormControlElement> | undefined;
-  onFocus?: react1.FocusEventHandler<HTMLInputElement> | undefined;
-  onBlur?: react1.FocusEventHandler<FormControlElement> | undefined;
+  onChange?: react0.ChangeEventHandler<FormControlElement> | undefined;
+  onPaste?: react0.ClipboardEventHandler<FormControlElement> | undefined;
+  onKeyUp?: react0.KeyboardEventHandler<FormControlElement> | undefined;
+  onKeyDown?: react0.KeyboardEventHandler<FormControlElement> | undefined;
+  onFocus?: react0.FocusEventHandler<HTMLInputElement> | undefined;
+  onBlur?: react0.FocusEventHandler<FormControlElement> | undefined;
   id?: string | undefined;
   name?: string | undefined;
   size?: "lg" | "sm" | undefined;
@@ -24,7 +24,7 @@ declare const TextField: react1.ForwardRefExoticComponent<Omit<{
   extraClassNames?: string | undefined;
   type?: "email" | "number" | "password" | "text" | undefined;
   testId?: string | undefined;
-  ref?: react1.Ref<HTMLInputElement> | undefined;
+  ref?: react0.Ref<HTMLInputElement> | undefined;
   inputGroup?: InputGroupPlacement;
   step?: string | number | undefined;
   showError?: boolean | undefined;
@@ -36,6 +36,6 @@ declare const TextField: react1.ForwardRefExoticComponent<Omit<{
   inputHeight?: number | undefined;
   min?: number | undefined;
   max?: number | undefined;
-} & TooltipComponentProps & InputLengthStyleProps, "ref"> & react1.RefAttributes<HTMLInputElement>>;
+} & TooltipComponentProps & InputLengthStyleProps, "ref"> & react0.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { TextField };

package/dist/src/ToolbarButton/ToolbarButton.d.ts

@@ -1,5 +1,5 @@
 import { ToolbarButtonProps } from "./ToolbarButton.types.js";
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 
 //#region src/ToolbarButton/ToolbarButton.d.ts
 declare const ToolbarButton: ({
@@ -27,6 +27,6 @@ declare const ToolbarButton: ({
   popoverAlign,
   onClick,
   onHide
-}: ToolbarButtonProps) => react_jsx_runtime10.JSX.Element;
+}: ToolbarButtonProps) => react_jsx_runtime4.JSX.Element;
 //#endregion
 export { ToolbarButton };

package/dist/src/Tooltip/Qtip.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/Tooltip/Qtip.d.ts
 
@@ -26,6 +26,6 @@ import * as react_jsx_runtime4 from "react/jsx-runtime";
  *
  * and enjoy beautiful & performant tooltips!
  */
-declare const QTip: () => react_jsx_runtime4.JSX.Element;
+declare const QTip: () => react_jsx_runtime6.JSX.Element;
 //#endregion
 export { QTip };

package/dist/styles.css

@@ -1538,14 +1538,6 @@
       outline-style: none;
     }
   }
-  .tw\:hover\:-translate-y-px {
-    &:hover {
-      @media (hover: hover) {
-        --tw-translate-y: -1px;
-        translate: var(--tw-translate-x) var(--tw-translate-y);
-      }
-    }
-  }
   .tw\:hover\:cursor-pointer {
     &:hover {
       @media (hover: hover) {
@@ -1665,14 +1657,6 @@
       }
     }
   }
-  .tw\:hover\:shadow-md {
-    &:hover {
-      @media (hover: hover) {
-        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      }
-    }
-  }
   .tw\:focus\:z-30 {
     &:focus {
       z-index: 30;
@@ -3515,9 +3499,9 @@
   --sq-insights-highlight: #0086e8;
   --sq-insights-light: #cce7ff;
   --sq-segmented-control-color: var(--sq-topic-dark);
-  --sq-segmented-control-gradient-start: #d9ecff;
-  --sq-segmented-control-gradient-hover-start: #c7e3ff;
-  --sq-segmented-control-dark-gradient-start: var(--sq-topic-highlight);
+  --sq-segmented-control-background-active: #d9ecff;
+  --sq-segmented-control-background-hover: #c7e3ff;
+  --sq-segmented-control-dark-background-accent: var(--sq-topic-highlight);
   .color_topic, .color_topic_dark {
     --theme-darker: var(--sq-topic-darker);
     --theme-dark: var(--sq-topic-dark);
@@ -3531,9 +3515,9 @@
     --theme-item-row: var(--sq-topic-light);
     --theme-highlight-background: var(--sq-topic-light);
     --sq-segmented-control-color: #1f5f9f;
-    --sq-segmented-control-gradient-start: #d9ecff;
-    --sq-segmented-control-gradient-hover-start: #c7e3ff;
-    --sq-segmented-control-dark-gradient-start: #41a5e1;
+    --sq-segmented-control-background-active: #d9ecff;
+    --sq-segmented-control-background-hover: #c7e3ff;
+    --sq-segmented-control-dark-background-accent: #41a5e1;
   }
   .color_analysis, .color_analysis_dark {
     --theme-darker: var(--sq-analysis-darker);
@@ -3548,9 +3532,9 @@
     --theme-item-row: var(--sq-analysis-light);
     --theme-highlight-background: var(--sq-analysis-light);
     --sq-segmented-control-color: var(--sq-analysis-dark);
-    --sq-segmented-control-gradient-start: var(--sq-analysis-light);
-    --sq-segmented-control-gradient-hover-start: #dff2ee;
-    --sq-segmented-control-dark-gradient-start: var(--sq-analysis-highlight);
+    --sq-segmented-control-background-active: var(--sq-analysis-light);
+    --sq-segmented-control-background-hover: #dff2ee;
+    --sq-segmented-control-dark-background-accent: var(--sq-analysis-highlight);
   }
   .color_datalab, .color_datalab_dark {
     --theme-darker: var(--sq-datalab-darker);
@@ -3563,9 +3547,9 @@
     --theme-footer-text: var(--sq-datalab-dark);
     --theme-highlight-background: var(--sq-datalab-light);
     --sq-segmented-control-color: #b95b22;
-    --sq-segmented-control-gradient-start: #ffe6d6;
-    --sq-segmented-control-gradient-hover-start: #ffd9bf;
-    --sq-segmented-control-dark-gradient-start: #e58a52;
+    --sq-segmented-control-background-active: #ffe6d6;
+    --sq-segmented-control-background-hover: #ffd9bf;
+    --sq-segmented-control-dark-background-accent: #e58a52;
   }
   .color_vantage, .color_vantage_dark {
     --theme-darker: var(--sq-vantage-darker);
@@ -3578,9 +3562,9 @@
     --theme-footer-text: var(--sq-vantage-dark);
     --theme-highlight-background: var(--sq-vantage-light);
     --sq-segmented-control-color: var(--sq-vantage-dark);
-    --sq-segmented-control-gradient-start: var(--sq-vantage-light);
-    --sq-segmented-control-gradient-hover-start: #c5addd;
-    --sq-segmented-control-dark-gradient-start: var(--sq-vantage-highlight);
+    --sq-segmented-control-background-active: var(--sq-vantage-light);
+    --sq-segmented-control-background-hover: #c5addd;
+    --sq-segmented-control-dark-background-accent: var(--sq-vantage-highlight);
   }
   .color_insights, .color_insights_dark {
     --theme-darker: var(--sq-insights-darker);
@@ -3593,9 +3577,9 @@
     --theme-footer-text: var(--sq-insights-dark);
     --theme-highlight-background: var(--sq-insights-light);
     --sq-segmented-control-color: var(--sq-insights-dark);
-    --sq-segmented-control-gradient-start: var(--sq-insights-light);
-    --sq-segmented-control-gradient-hover-start: #b8dcff;
-    --sq-segmented-control-dark-gradient-start: var(--sq-insights-highlight);
+    --sq-segmented-control-background-active: var(--sq-insights-light);
+    --sq-segmented-control-background-hover: #b8dcff;
+    --sq-segmented-control-dark-background-accent: var(--sq-insights-highlight);
   }
   --height-inputs: 34px;
   --height-30: 30px;
@@ -3819,60 +3803,47 @@
 }
 @layer components {
   .sq-segmented-control-pill {
-    background-image: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
-    border-color: var(--sq-tool-btn-border);
-    color: var(--sq-gray-text);
+    background-color: var(--sqw-white);
+    background-image: none;
+    border-color: var(--sqw-disabled-gray);
+    color: var(--sqw-text-color);
   }
   .sq-segmented-control-pill--inactive:hover {
-    background-image: linear-gradient(0deg, var(--sq-segmented-control-gradient-start) 0%, transparent 100%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
-    border-color: var(--sq-segmented-control-color);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in srgb, var(--sq-segmented-control-color) 40%, transparent);
-    }
+    background-color: var(--sqw-light-gray);
     color: var(--sqw-text-color);
   }
   .sq-segmented-control-pill.sq-segmented-control-pill--active {
-    background-image: linear-gradient(0deg, var(--sq-segmented-control-gradient-start) 0%, transparent 100%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+    background-color: var(--sq-segmented-control-background-active);
     border-color: var(--sq-segmented-control-color);
-    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
     color: var(--sqw-text-color);
   }
   .sq-segmented-control-pill.sq-segmented-control-pill--active:hover {
-    background-image: linear-gradient(0deg, var(--sq-segmented-control-gradient-hover-start) 0%, transparent 100%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
-    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
+    background-color: var(--sq-segmented-control-background-hover);
     color: var(--sqw-text-color);
   }
   .tw-dark .sq-segmented-control-pill {
-    background-image: linear-gradient(180deg, #1f2937 0%, #151b23 100%);
-    border-color: var(--color-sq-dark-disabled-gray);
-    color: var(--color-sq-dark-text);
+    background-color: var(--sq-tools-background-dark);
+    background-image: none;
+    border-color: var(--sq-disabled-gray-dark);
+    color: var(--sq-text-color-dark);
   }
   .tw-dark .sq-segmented-control-pill--inactive:hover {
-    background-image: linear-gradient( 0deg, var(--sq-segmented-control-dark-gradient-start) 0%, transparent 100% ), linear-gradient(180deg, #1f2937 0%, #151b23 100%);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-image: linear-gradient( 0deg, color-mix(in srgb, var(--sq-segmented-control-dark-gradient-start) 30%, transparent) 0%, transparent 100% ), linear-gradient(180deg, #1f2937 0%, #151b23 100%);
-    }
-    border-color: var(--theme-highlight);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in srgb, var(--theme-highlight) 60%, transparent);
-    }
+    background-color: var(--sq-light-gray-dark);
     color: var(--sqw-white);
   }
   .tw-dark .sq-segmented-control-pill.sq-segmented-control-pill--active {
-    background-image: linear-gradient( 0deg, var(--sq-segmented-control-dark-gradient-start) 0%, transparent 100% ), linear-gradient(180deg, #1f2937 0%, #151b23 100%);
+    background-color: var(--sq-segmented-control-dark-background-accent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-image: linear-gradient( 0deg, color-mix(in srgb, var(--sq-segmented-control-dark-gradient-start) 54%, transparent) 0%, transparent 100% ), linear-gradient(180deg, #1f2937 0%, #151b23 100%);
+      background-color: color-mix( in srgb, var(--sq-segmented-control-dark-background-accent) 54%, var(--sq-tools-background-dark) );
     }
     border-color: var(--theme-highlight);
-    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
     color: var(--sqw-white);
   }
   .tw-dark .sq-segmented-control-pill.sq-segmented-control-pill--active:hover {
-    background-image: linear-gradient( 0deg, var(--sq-segmented-control-dark-gradient-start) 0%, transparent 100% ), linear-gradient(180deg, #1f2937 0%, #151b23 100%);
+    background-color: var(--sq-segmented-control-dark-background-accent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-image: linear-gradient( 0deg, color-mix(in srgb, var(--sq-segmented-control-dark-gradient-start) 64%, transparent) 0%, transparent 100% ), linear-gradient(180deg, #1f2937 0%, #151b23 100%);
+      background-color: color-mix( in srgb, var(--sq-segmented-control-dark-background-accent) 64%, var(--sq-tools-background-dark) );
     }
-    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
     color: var(--sqw-white);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seeqdev/qomponents",
-  "version": "0.0.231",
+  "version": "0.0.232",
   "type": "module",
   "main": "dist/index.js",
   "source": "src/index.ts",