@qasa/qds-ui 0.9.0-next.3 → 0.9.0-next.5

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import * as react from 'react';
 import { ElementType, ComponentPropsWithoutRef, ReactNode, SVGAttributes, useLayoutEffect } from 'react';
 import { Options } from '@emotion/cache';
 import * as _emotion_react from '@emotion/react';
-import { CSSObject, Theme as Theme$1 } from '@emotion/react';
+import { CSSObject } from '@emotion/react';
 import * as _emotion_styled from '@emotion/styled';
 import { LucideIcon } from 'lucide-react';
 
@@ -151,7 +151,7 @@ declare const theme: {
             disabled: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
             onBrandPrimary: string;
             onBrandSecondary: string;
             onBrandTertiary: string;
@@ -164,7 +164,7 @@ declare const theme: {
             subtle: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
         };
     };
     sizes: {
@@ -714,7 +714,7 @@ declare const overrideTheme: (overrides: ThemeOverrides) => {
             disabled: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
             onBrandPrimary: string;
             onBrandSecondary: string;
             onBrandTertiary: string;
@@ -727,7 +727,7 @@ declare const overrideTheme: (overrides: ThemeOverrides) => {
             subtle: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
         };
     };
     mediaQueries: {
@@ -865,6 +865,151 @@ interface AvatarProps extends HTMLQdsProps<'span'>, AvatarOptions {
 }
 declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>>;
 
+/**
+ * This file is originally from `@radix-ui/react-polymorphic` before the package
+ * was deprecated. The original source for this lived in the URL below.
+ *
+ * @see https://github.com/radix-ui/primitives/blob/17ffcb7aaa42cbd36b3c210ba86d7d73d218e5be/packages/react/polymorphic/src/polymorphic.ts
+ */
+
+/**
+ * Infers the OwnProps if E is a ForwardRefExoticComponentWithAs
+ */
+declare type OwnProps<E> = E extends ForwardRefComponent<any, infer P> ? P : {};
+/**
+ * Infers the JSX.IntrinsicElement if E is a ForwardRefExoticComponentWithAs
+ */
+declare type IntrinsicElement<E> = E extends ForwardRefComponent<infer I, any> ? I : never;
+declare type ForwardRefExoticComponent<E, OwnProps> = react.ForwardRefExoticComponent<Merge<E extends react.ElementType ? react.ComponentPropsWithRef<E> : never, OwnProps & {
+    as?: E;
+}>>;
+interface ForwardRefComponent<IntrinsicElementString, OwnProps = {}> extends ForwardRefExoticComponent<IntrinsicElementString, OwnProps> {
+    /**
+     * When `as` prop is passed, use this overload.
+     * Merges original own props (without DOM props) and the inferred props
+     * from `as` element with the own props taking precendence.
+     *
+     * We explicitly avoid `React.ElementType` and manually narrow the prop types
+     * so that events are typed when using JSX.IntrinsicElements.
+     */
+    <As = IntrinsicElementString>(props: As extends '' ? {
+        as: keyof JSX.IntrinsicElements;
+    } : As extends react.ComponentType<infer P> ? Merge<P, OwnProps & {
+        as: As;
+    }> : As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], OwnProps & {
+        as: As;
+    }> : never): react.ReactElement | null;
+}
+/**
+ * Infers the props of a React component
+ */
+declare type PropsOf<E> = E extends react.ComponentType<infer P> ? P : never;
+
+declare type IconSize = 16 | 20 | 24 | 32;
+declare type IconColor = keyof Theme['colors']['icon'] | 'currentColor';
+interface IconOptions {
+    /**
+     * The size of the icon.
+     *
+     * @default 24
+     */
+    size?: IconSize;
+    /**
+     * The color of the icon.
+     *
+     * @default 'default'
+     */
+    color?: IconColor;
+}
+declare type OmittedProps$9 = 'color' | 'onClick' | 'width' | 'height' | 'fontSize';
+interface IconProps extends Omit<SVGAttributes<SVGElement>, OmittedProps$9>, IconOptions {
+}
+
+interface CreateIconOptions {
+    /**
+     * The `svg`'s `viewBox` attribute
+     */
+    viewBox: string;
+    /**
+     * If the `svg` has a single path, simply copy the path's `d` attribute
+     */
+    d?: string;
+    /**
+     * The `svg` path or group element
+     *
+     * @example
+     * ```jsx
+     *  createIcon({
+     *    viewBox: '0 0 512 512',
+     *    path: [
+     *      <circle cx="50" cy="50" r="50" />,
+     *      <path d="M10 10" />,
+     *    ],
+     *    displayName: 'ExampleIcon',
+     * })
+     * ```
+     */
+    path?: React.ReactElement | React.ReactElement[];
+    /**
+     * The display name of the icon. Useful for debugging
+     * and internal use.
+     */
+    displayName?: string;
+}
+/**
+ * Helper function to create an icon component.
+ */
+declare const createIcon: (options: CreateIconOptions) => react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+
+declare const createLucideIcon: (Icon: LucideIcon) => react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+
+declare const AlertCircleIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const AlertTriangleIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const ArrowDownIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const ArrowLeftIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const ArrowRightIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const ArrowUpIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const BellIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const BellOffIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const BookmarkIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const CalendarIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const CameraIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const CheckCircleIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const CheckIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const ChevronDownIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const ChevronLeftIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const ChevronRightIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const ChevronUpIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const GlobeIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const HeartFilledIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const HeartIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const HelpCircleIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const HistoryIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const HomeIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const ImageIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const ListIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const ListFilterIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const LogOutIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const MapIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const MapPinIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const MenuIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const MessageCircleIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const MinusIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const MoreHorizontalIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const MoreVerticalIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const PenIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const PlusIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const SearchIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const SettingsIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const ShareIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const SlidersIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const StarFilledIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const StarIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const TrashIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const UserIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const XCircleIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const XIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+
 /**
  * Adds some global opinionated styles.
  */
@@ -1031,7 +1176,7 @@ declare const getFormFieldBaseStyles: (theme: {
             disabled: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
             onBrandPrimary: string;
             onBrandSecondary: string;
             onBrandTertiary: string;
@@ -1044,7 +1189,7 @@ declare const getFormFieldBaseStyles: (theme: {
             subtle: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
         };
     };
     sizes: {
@@ -1331,46 +1476,6 @@ declare const getFormFieldBaseStyles: (theme: {
     alignItems: "center";
 };
 
-/**
- * This file is originally from `@radix-ui/react-polymorphic` before the package
- * was deprecated. The original source for this lived in the URL below.
- *
- * @see https://github.com/radix-ui/primitives/blob/17ffcb7aaa42cbd36b3c210ba86d7d73d218e5be/packages/react/polymorphic/src/polymorphic.ts
- */
-
-/**
- * Infers the OwnProps if E is a ForwardRefExoticComponentWithAs
- */
-declare type OwnProps<E> = E extends ForwardRefComponent<any, infer P> ? P : {};
-/**
- * Infers the JSX.IntrinsicElement if E is a ForwardRefExoticComponentWithAs
- */
-declare type IntrinsicElement<E> = E extends ForwardRefComponent<infer I, any> ? I : never;
-declare type ForwardRefExoticComponent<E, OwnProps> = react.ForwardRefExoticComponent<Merge<E extends react.ElementType ? react.ComponentPropsWithRef<E> : never, OwnProps & {
-    as?: E;
-}>>;
-interface ForwardRefComponent<IntrinsicElementString, OwnProps = {}> extends ForwardRefExoticComponent<IntrinsicElementString, OwnProps> {
-    /**
-     * When `as` prop is passed, use this overload.
-     * Merges original own props (without DOM props) and the inferred props
-     * from `as` element with the own props taking precendence.
-     *
-     * We explicitly avoid `React.ElementType` and manually narrow the prop types
-     * so that events are typed when using JSX.IntrinsicElements.
-     */
-    <As = IntrinsicElementString>(props: As extends '' ? {
-        as: keyof JSX.IntrinsicElements;
-    } : As extends react.ComponentType<infer P> ? Merge<P, OwnProps & {
-        as: As;
-    }> : As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], OwnProps & {
-        as: As;
-    }> : never): react.ReactElement | null;
-}
-/**
- * Infers the props of a React component
- */
-declare type PropsOf<E> = E extends react.ComponentType<infer P> ? P : never;
-
 declare const getSizeStyles$5: (theme: {
     mediaQueries: {
         readonly smUp: "@media(min-width: 480px)";
@@ -1515,7 +1620,7 @@ declare const getSizeStyles$5: (theme: {
             disabled: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
             onBrandPrimary: string;
             onBrandSecondary: string;
             onBrandTertiary: string;
@@ -1528,7 +1633,7 @@ declare const getSizeStyles$5: (theme: {
             subtle: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
         };
     };
     sizes: {
@@ -1777,7 +1882,6 @@ declare const getSizeStyles$5: (theme: {
         lineHeight: string;
         letterSpacing: string;
         height: string;
-        minWidth: string;
         paddingLeft: string;
         paddingRight: string;
     };
@@ -1788,7 +1892,6 @@ declare const getSizeStyles$5: (theme: {
         lineHeight: string;
         letterSpacing: string;
         height: string;
-        minWidth: string;
         paddingLeft: string;
         paddingRight: string;
     };
@@ -1799,7 +1902,6 @@ declare const getSizeStyles$5: (theme: {
         lineHeight: string;
         letterSpacing: string;
         height: string;
-        minWidth: string;
         paddingLeft: string;
         paddingRight: string;
     };
@@ -1810,7 +1912,6 @@ declare const getSizeStyles$5: (theme: {
         lineHeight: string;
         letterSpacing: string;
         height: string;
-        minWidth: string;
         paddingLeft: string;
         paddingRight: string;
     };
@@ -1825,6 +1926,7 @@ declare const getSizeStyles$5: (theme: {
         paddingRight: string;
     };
 };
+declare type ButtonSize = VariantProps<typeof getSizeStyles$5>;
 declare const getVariantStyles$1: (theme: {
     mediaQueries: {
         readonly smUp: "@media(min-width: 480px)";
@@ -1969,7 +2071,7 @@ declare const getVariantStyles$1: (theme: {
             disabled: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
             onBrandPrimary: string;
             onBrandSecondary: string;
             onBrandTertiary: string;
@@ -1982,7 +2084,7 @@ declare const getVariantStyles$1: (theme: {
             subtle: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
         };
     };
     sizes: {
@@ -2267,9 +2369,8 @@ declare const getVariantStyles$1: (theme: {
         };
     };
 };
-
 declare type ButtonVariant = VariantProps<typeof getVariantStyles$1>;
-declare type ButtonSize = VariantProps<typeof getSizeStyles$5>;
+
 interface ButtonOptions {
     /**
      * Sets the size of the button
@@ -2296,12 +2397,21 @@ interface ButtonOptions {
      * @default false
      */
     isDisabled?: boolean;
+    /**
+     * Icon to display before the button label
+     */
+    iconLeft?: ElementType<IconProps>;
+    /**
+     * Icon to display after the button label
+     */
+    iconRight?: ElementType<IconProps>;
     /**
      * The HTML `type` attribute
      * @default 'button'
      */
     type?: 'button' | 'submit' | 'reset';
 }
+
 declare type PolymorphicButton = ForwardRefComponent<'button', ButtonOptions>;
 declare type ButtonProps = PropsOf<PolymorphicButton>;
 declare const Button: PolymorphicButton;
@@ -2462,7 +2572,7 @@ declare const getSizeStyles$4: (theme: {
             disabled: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
             onBrandPrimary: string;
             onBrandSecondary: string;
             onBrandTertiary: string;
@@ -2475,7 +2585,7 @@ declare const getSizeStyles$4: (theme: {
             subtle: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
         };
     };
     sizes: {
@@ -2799,109 +2909,6 @@ declare const HintBox: react.ForwardRefExoticComponent<Pick<react.DetailedHTMLPr
     }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
 };
 
-declare type IconSize = 16 | 20 | 24 | 32;
-declare type IconColor = keyof Theme$1['colors']['icon'] | 'currentColor';
-interface IconOptions {
-    /**
-     * The size of the icon.
-     *
-     * @default 16
-     */
-    size?: IconSize;
-    /**
-     * The color of the icon.
-     */
-    color?: IconColor;
-}
-declare type OmittedProps$9 = 'color' | 'onClick' | 'width' | 'height' | 'fontSize';
-interface IconProps extends Omit<SVGAttributes<SVGElement>, OmittedProps$9>, IconOptions {
-}
-
-interface CreateIconOptions {
-    /**
-     * The `svg`'s `viewBox` attribute
-     */
-    viewBox: string;
-    /**
-     * If the `svg` has a single path, simply copy the path's `d` attribute
-     */
-    d?: string;
-    /**
-     * The `svg` path or group element
-     *
-     * @example
-     * ```jsx
-     *  createIcon({
-     *    viewBox: '0 0 512 512',
-     *    path: [
-     *      <circle cx="50" cy="50" r="50" />,
-     *      <path d="M10 10" />,
-     *    ],
-     *    displayName: 'ExampleIcon',
-     * })
-     * ```
-     */
-    path?: React.ReactElement | React.ReactElement[];
-    /**
-     * The display name of the icon. Useful for debugging
-     * and internal use.
-     */
-    displayName?: string;
-}
-/**
- * Helper function to create an icon component.
- */
-declare const createIcon: (options: CreateIconOptions) => react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-
-declare const createLucideIcon: (Icon: LucideIcon) => react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-
-declare const AlertCircleIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const AlertTriangleIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const ArrowDownIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const ArrowLeftIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const ArrowRightIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const ArrowUpIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const BellIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const BellOffIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const BookmarkIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const CalendarIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const CameraIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const CheckCircleIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const CheckIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const ChevronDownIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const ChevronLeftIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const ChevronRightIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const ChevronUpIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const GlobeIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const HeartFilledIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const HeartIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const HelpCircleIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const HistoryIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const HomeIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const ImageIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const ListIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const ListFilterIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const LogOutIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const MapIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const MapPinIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const MenuIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const MessageCircleIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const MinusIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const MoreHorizontalIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const MoreVerticalIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const PenIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const PlusIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const SearchIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const SettingsIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const ShareIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const SlidersIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const StarFilledIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const StarIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const TrashIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const UserIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const XCircleIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-declare const XIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
-
 declare const getSizeStyles$3: (theme: {
     mediaQueries: {
         readonly smUp: "@media(min-width: 480px)";
@@ -3046,7 +3053,7 @@ declare const getSizeStyles$3: (theme: {
             disabled: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
             onBrandPrimary: string;
             onBrandSecondary: string;
             onBrandTertiary: string;
@@ -3059,7 +3066,7 @@ declare const getSizeStyles$3: (theme: {
             subtle: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
         };
     };
     sizes: {
@@ -3304,17 +3311,14 @@ declare const getSizeStyles$3: (theme: {
     xs: {
         width: string;
         height: string;
-        fontSize: string;
     };
     sm: {
         width: string;
         height: string;
-        fontSize: string;
     };
     md: {
         width: string;
         height: string;
-        fontSize: string;
     };
 };
 declare const getVariantStyles: (theme: {
@@ -3461,7 +3465,7 @@ declare const getVariantStyles: (theme: {
             disabled: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
             onBrandPrimary: string;
             onBrandSecondary: string;
             onBrandTertiary: string;
@@ -3474,7 +3478,7 @@ declare const getVariantStyles: (theme: {
             subtle: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
         };
     };
     sizes: {
@@ -3766,9 +3770,9 @@ declare const getVariantStyles: (theme: {
                 ':hover': {
                     background: string;
                 };
-                ':active': {
-                    background: string;
-                };
+            };
+            ':active': {
+                background: string;
             };
         };
     };
@@ -4008,7 +4012,7 @@ declare const getSizeStyles$2: (theme: {
             disabled: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
             onBrandPrimary: string;
             onBrandSecondary: string;
             onBrandTertiary: string;
@@ -4021,7 +4025,7 @@ declare const getSizeStyles$2: (theme: {
             subtle: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
         };
     };
     sizes: {
@@ -4453,7 +4457,7 @@ declare const getSizeStyles$1: (theme: {
             disabled: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
             onBrandPrimary: string;
             onBrandSecondary: string;
             onBrandTertiary: string;
@@ -4466,7 +4470,7 @@ declare const getSizeStyles$1: (theme: {
             subtle: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
         };
     };
     sizes: {
@@ -4867,7 +4871,7 @@ declare const getSizeStyles: (theme: {
             disabled: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
             onBrandPrimary: string;
             onBrandSecondary: string;
             onBrandTertiary: string;
@@ -4880,7 +4884,7 @@ declare const getSizeStyles: (theme: {
             subtle: string;
             negative: string;
             warning: string;
-            success: string;
+            positive: string;
         };
     };
     sizes: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qasa/qds-ui",
-  "version": "0.9.0-next.3",
+  "version": "0.9.0-next.5",
   "license": "UNLICENSED",
   "repository": {
     "type": "git",