@seeqdev/qomponents 0.0.177 → 0.0.179

package/dist/index.js

@@ -105,7 +105,7 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
         const errorMessage = color === undefined || color === ''
             ? 'Icon with type="color" must have prop color specified.'
             : 'Icon with prop color must have type="color".';
-        return jsxRuntime.jsx("div", { className: "tw:text-sq-danger-color", children: errorMessage });
+        return jsxRuntime.jsx("div", { className: "tw:text-sq-danger", children: errorMessage });
     }
     const fontAwesomePrefix = iconPrefix ? iconPrefix : 'fa-sharp fa-regular';
     const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
@@ -127,11 +127,11 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
     const baseClassesByVariant = {
         'outline': 'tw:disabled:opacity-50 tw:aria-disabled:opacity-50 tw:border-solid tw:border',
         'theme': 'tw:disabled:opacity-50 tw:aria-disabled:opacity-50 tw:border-solid tw:border',
-        'danger': 'tw:bg-sq-danger-color tw:disabled:opacity-50 tw:aria-disabled:opacity-50 ' +
-            'tw:border-solid tw:border tw:border-sq-danger-color',
+        'danger': 'tw:bg-sq-danger tw:disabled:opacity-50 tw:aria-disabled:opacity-50 ' +
+            'tw:border-solid tw:border tw:border-sq-danger',
         'theme-light': 'tw:disabled:opacity-50 tw:aria-disabled:opacity-50 tw:border-solid tw:border',
         'no-border': 'tw:disabled:opacity-50 tw:aria-disabled:opacity-50',
-        'warning': 'tw:bg-sq-warning-color tw:border-solid tw:border tw:border-sq-warning-color ' +
+        'warning': 'tw:bg-sq-warning tw:border-solid tw:border tw:border-sq-warning ' +
             'tw:disabled:opacity-50 tw:aria-disabled:opacity-50',
     };
     const textClassesByVariantLightTheme = {
@@ -152,7 +152,7 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
     };
     const classesByVariantLightTheme = {
         'outline': 'tw:bg-white tw:border-sq-disabled-gray',
-        'theme': 'tw:bg-sq-color-dark tw:border-sq-color-dark',
+        'theme': 'tw:bg-sq-theme-dark tw:border-sq-theme-dark',
         'danger': '',
         'theme-light': 'tw:bg-sq-icon',
         'no-border': '',
@@ -160,26 +160,26 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
     };
     const classesByVariantDarkTheme = {
         'outline': 'tw:dark:bg-sq-dark-background tw:dark:border-sq-dark-disabled-gray',
-        'theme': 'tw:dark:bg-sq-color-dark tw:dark:border-sq-color-dark',
+        'theme': 'tw:dark:bg-sq-theme-dark tw:dark:border-sq-theme-dark',
         'danger': '',
         'theme-light': 'tw:dark:bg-sq-icon-dark tw:dark:border-sq-icon-dark',
         'no-border': '',
         'warning': '',
     };
     const activeClassesByVariantLightTheme = {
-        'outline': 'tw:hover:bg-sq-light-gray tw:focus:bg-sq-dark-gray tw:active:bg-sq-dark-gray tw:focus:border-sq-color-dark' +
-            ' tw:active:border-sq-color-dark',
-        'theme': 'tw:hover:bg-sq-color-highlight tw:hover:border-sq-color-highlight',
-        'danger': 'tw:hover:bg-sq-danger-color-hover tw:hover:border-sq-danger-color-hover',
+        'outline': 'tw:hover:bg-sq-light-gray tw:focus:bg-sq-dark-gray tw:active:bg-sq-dark-gray tw:focus:border-sq-theme-dark' +
+            ' tw:active:border-sq-theme-dark',
+        'theme': 'tw:hover:bg-sq-theme-highlight tw:hover:border-sq-theme-highlight',
+        'danger': 'tw:hover:bg-sq-bg-danger tw:hover:border-sq-bg-danger',
         'theme-light': 'tw:hover:bg-sq-link tw:hover:border-sq-link',
         'no-border': '',
         'warning': '',
     };
     const activeClassesByVariantDarkTheme = {
         'outline': 'tw:dark:hover:bg-sq-highlight-color-dark tw:dark:focus:bg-sq-multi-gray-dark' +
-            ' tw:dark:active:bg-sq-multi-gray-dark tw:dark:focus:border-sq-color-dark tw:dark:active:border-sq-color-dark',
-        'theme': 'tw:dark:hover:bg-sq-color-highlight tw:dark:hover:border-sq-color-highlight',
-        'danger': 'tw:dark:hover:bg-sq-danger-color-hover tw:dark:hover:border-sq-danger-color-hover',
+            ' tw:dark:active:bg-sq-multi-gray-dark tw:dark:focus:border-sq-theme-dark tw:dark:active:border-sq-theme-dark',
+        'theme': 'tw:dark:hover:bg-sq-theme-highlight tw:dark:hover:border-sq-theme-highlight',
+        'danger': 'tw:dark:hover:bg-sq-bg-danger tw:dark:hover:border-sq-bg-danger',
         'theme-light': 'tw:dark:hover:bg-sq-link-dark tw:dark:hover:border-sq-link-dark',
         'no-border': '',
         'warning': '',
@@ -13945,16 +13945,16 @@ var CreatableSelect$1 = CreatableSelect;
 
 const baseClasses$3 = ['tw:focus:ring-0', 'tw:disabled:cursor-not-allowed'].join(' ');
 const containerStyles = ['tw:bg-sq-white', 'tw:dark:bg-sq-dark-background'].join(' ');
-const errorClasses$2 = 'tw:border-sq-danger-color';
+const errorClasses$2 = 'tw:border-sq-danger';
 const borderColorClasses$2 = ['tw:border-sq-disabled-gray', 'tw:dark:border-sq-dark-disabled-gray'].join(' ');
 const borderStyles$3 = ['tw:border-solid', 'tw:border'].join(' ');
 const borderActiveClasses = [
-    'tw:hover:border-sq-color-dark',
-    'tw:focus-within:border-sq-color-dark',
-    'tw:active:border-sq-color-dark',
-    'tw:dark:hover:border-sq-color-dark-dark',
-    'tw:dark:focus-within:border-sq-color-dark-dark',
-    'tw:dark:active:border-sq-color-dark-dark',
+    'tw:hover:border-sq-theme-dark',
+    'tw:focus-within:border-sq-theme-dark',
+    'tw:active:border-sq-theme-dark',
+    'tw:dark:hover:border-sq-theme-dark-dark',
+    'tw:dark:focus-within:border-sq-theme-dark-dark',
+    'tw:dark:active:border-sq-theme-dark-dark',
 ].join(' ');
 const textStyles = ['tw:text-sq-text-color', 'tw:dark:text-sq-dark-text', 'tw:text-sm'].join(' ');
 const textActiveStyles = [
@@ -13965,9 +13965,9 @@ const textActiveStyles = [
     'tw:dark:hover:text-sq-theme-dark-dark',
     'tw:dark:focus:text-sq-theme-dark-dark',
     'tw:dark:active:text-sq-theme-dark-dark',
-    'tw:hover:text-sq-color-dark',
+    'tw:hover:text-sq-theme-dark',
     'tw:dark:text-sq-dark-disabled-gray',
-    'tw:dark:hover:text-sq-color-dark-dark',
+    'tw:dark:hover:text-sq-theme-dark-dark',
 ].join(' ');
 const menuStyles = [
     'tw:border-solid',
@@ -14108,8 +14108,8 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
             },
             singleValue: () => 'specOpenSelect',
             multiValue: () => multiValueStyles,
-            multiValueRemove: () => 'tw:hover:text-sq-danger-color specSelectMultiValueRemove',
-            clearIndicator: () => 'tw:text-sq-disabled-gray tw:hover:text-sq-danger-color specClearSelect',
+            multiValueRemove: () => 'tw:hover:text-sq-danger specSelectMultiValueRemove',
+            clearIndicator: () => 'tw:text-sq-disabled-gray tw:hover:text-sq-danger specClearSelect',
             group: () => 'specSelectGroup',
             groupHeading: () => groupHeadingStyles,
         },
@@ -15489,8 +15489,8 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
     };
     React__namespace.useEffect(() => clearHoverTimeout, []);
     const renderContent = () => {
-        return (jsxRuntime.jsx(Content2$3, { sideOffset: placementOffset, align: align, side: placement, onInteractOutside: onInteractOutside, onPointerDownOutside: onPointerDownOutside, alignOffset: isHoverEnabled ? -10 : alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "focus-visible:tw:outline-none tw:outline-none tw:w-full tw:h-full", children: jsxRuntime.jsxs("div", { "data-testid": containerTestId, className: `${bgStyles$2} ${borderStyles$2} tw:relative tw:z-[1200] tw:min-w-6 tw:focus-visible:outline-none tw:outline-none data-[state=open]:tw:animate-in data-[state=closed]:tw:animate-out
-         tw:data-[side=top]:animate-slideDownAndFade data-[side=right]:tw:animate-slideLeftAndFade tw:data-[side=bottom]:animate-slideUpAndFade tw:data-[side=left]:animate-slideRightAndFade tw:text-sq-text-color
+        return (jsxRuntime.jsx(Content2$3, { sideOffset: placementOffset, align: align, side: placement, onInteractOutside: onInteractOutside, onPointerDownOutside: onPointerDownOutside, alignOffset: isHoverEnabled ? -10 : alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "tw:focus-visible:outline-none tw:outline-none tw:w-full tw:h-full", children: jsxRuntime.jsxs("div", { "data-testid": containerTestId, className: `${bgStyles$2} ${borderStyles$2} tw:relative tw:z-[1200] tw:min-w-6 tw:focus-visible:outline-none tw:outline-none tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out
+         tw:data-[side=top]:animate-slideDownAndFade tw:data-[side=right]:animate-slideLeftAndFade tw:data-[side=bottom]:animate-slideUpAndFade tw:data-[side=left]:animate-slideRightAndFade tw:text-sq-text-color
         ${extraPopoverClassNames || ''}`, children: [hasArrow && (jsxRuntime.jsx(Arrow2$2, { asChild: true, children: jsxRuntime.jsx("div", { className: "tw:fill-transparent tw:bg-sq-white tw:w-sq-15 tw:h-sq-15 tw:-mt-sq-7 tw:rotate-45 tw:dark:bg-sq-dark-background tw:border-b tw:border-r tw:border-sq-disabled-gray tw:dark:border-gray-500" }) })), children] }) }));
     };
     const renderPopover = (popoverOpenState) => {
@@ -16589,7 +16589,7 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames =
                             })] }) }) })] }));
 };
 
-const baseClasses$2 = 'tw:mx-auto tw:p-4 tw:leading-normal tw:outline-none tw:py-2 tw:px-3 tw:rounded-[10px] tw:w-full tw:relative' +
+const baseClasses$2 = 'tw:mx-auto tw:leading-normal tw:outline-none tw:py-2 tw:px-3 tw:rounded-[10px] tw:w-full tw:relative' +
     ' tw:border-solid tw:border tw:text-sm tw:flex tw:flex-col tw:justify-center tw:items-center';
 const darkTheme$1 = 'tw:dark:bg-sq-theme-hover-dark tw:dark:text-sq-text-color-dark';
 const lightTheme$1 = 'tw:text-sq-text-color tw:bg-sq-theme-highlight/10';
@@ -16636,7 +16636,7 @@ const Alert = ({ children, dismissible = true, onClose, show = true, variant, te
  * @param tooltipProps - props to pass to the tooltip
  */
 const SvgIcon = ({ onClick, icon, color, type = 'default', extraClassNames, viewBox = '0 0 19 19', id, testId, customId, ...tooltipProps }) => {
-    const appliedClassNames = `${onClick ? 'tw:cursor-pointer' : ''} ${extraClassNames} focus:tw:outline-none focus-visible:tw:outline-none 
+    const appliedClassNames = `${onClick ? 'tw:cursor-pointer' : ''} ${extraClassNames} tw:focus:outline-none tw:focus-visible:outline-none 
   tw:outline-none`;
     const tooltipData = getQTipData(tooltipProps);
     const appliedType = type === 'default' ? 'currentColor' : 'rgb(var(--sq-icon))';
@@ -27595,7 +27595,7 @@ var Thumb = SliderThumb;
  */
 const Slider = (props) => {
     const { onValueChange, onPointerUp, id, value, name, disabled = false, rootExtraClassNames = '', trackExtraClassNames = '', rangeExtraClassNames = '', thumbExtraClassNames = '', step, min, max, } = props;
-    return (jsxRuntime.jsxs(Root$1, { className: `tw:relative tw:flex tw:h-5 tw:w-full tw:touch-none tw:select-none tw:items-center ${rootExtraClassNames}`, defaultValue: [value], value: [value], onValueChange: (value) => onValueChange && onValueChange(value), onPointerUp: (e) => onPointerUp && onPointerUp(e), name: name, id: id, max: max, min: min, disabled: disabled, step: step, children: [jsxRuntime.jsx(Track, { className: `tw:relative tw:h-sq-5 tw:grow tw:rounded-sm tw:bg-sq-dark-gray tw:dark:bg-sq-dark-disabled-gray ${trackExtraClassNames}`, children: jsxRuntime.jsx(Range, { className: `tw:absolute tw:h-full tw:rounded-full ${rangeExtraClassNames}` }) }), jsxRuntime.jsx(Thumb, { className: `tw:block tw:h-sq-15 tw:w-sq-15 tw:rounded-full tw:bg-sq-theme-dark active:tw:bg-sq-theme-darker tw:focus:outline-none tw:focus-visible:outline-none tw:aria-disabled:bg-sq-dark-gray tw:dark:aria-disabled:bg-sq-dark-disabled-gray tw:transition tw:ease-in-out ${thumbExtraClassNames}`, "aria-disabled": disabled })] }));
+    return (jsxRuntime.jsxs(Root$1, { className: `tw:relative tw:flex tw:h-5 tw:w-full tw:touch-none tw:select-none tw:items-center ${rootExtraClassNames}`, defaultValue: [value], value: [value], onValueChange: (value) => onValueChange && onValueChange(value), onPointerUp: (e) => onPointerUp && onPointerUp(e), name: name, id: id, max: max, min: min, disabled: disabled, step: step, children: [jsxRuntime.jsx(Track, { className: `tw:relative tw:h-sq-5 tw:grow tw:rounded-sm tw:bg-sq-dark-gray tw:dark:bg-sq-dark-disabled-gray ${trackExtraClassNames}`, children: jsxRuntime.jsx(Range, { className: `tw:absolute tw:h-full tw:rounded-full ${rangeExtraClassNames}` }) }), jsxRuntime.jsx(Thumb, { className: `tw:block tw:h-sq-15 tw:w-sq-15 tw:rounded-full tw:bg-sq-theme-dark tw:active:bg-sq-theme-darker tw:focus:outline-none tw:focus-visible:outline-none tw:aria-disabled:bg-sq-dark-gray tw:dark:aria-disabled:bg-sq-dark-disabled-gray tw:transition tw:ease-in-out ${thumbExtraClassNames}`, "aria-disabled": disabled })] }));
 };
 
 var PROGRESS_NAME = "Progress";
@@ -29011,7 +29011,11 @@ const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '
             changeSlide(currentIndex + 1);
         }
     };
-    const springTransition = { type: 'spring', damping: 20, stiffness: 100 };
+    const springTransition = {
+        type: 'spring',
+        damping: 20,
+        stiffness: 100,
+    };
     const slideVariants = {
         initial: (direction) => ({
             x: direction > 0 ? '100%' : '-100%',