@ultraviolet/ui 1.4.5 → 1.5.0

package/README.md

@@ -10,6 +10,13 @@ Ultraviolet UI is a set of React components and utilities to build fast applicat
 $ pnpm add @ultraviolet/ui @emotion/react @emotion/styled
 ```
 
+You will also need to import fonts in your project by adding:
+
+```html
+<link href="https://fonts.cdnfonts.com/css/asap?styles=20325,20323,20320" rel="stylesheet">
+<link href="https://fonts.cdnfonts.com/css/jetbrains-mono-2?styles=156604" rel="stylesheet">
+```
+
 ### Usage
 
 ```js

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode, SVGProps, ComponentProps, ButtonHTMLAttributes, AriaRole, MouseEventHandler, JSX, MouseEvent, InputHTMLAttributes, HTMLAttributeAnchorTarget, AnchorHTMLAttributes, ReactElement, Ref, RefObject, CSSProperties, ChangeEventHandler, FocusEventHandler, ForwardRefExoticComponent, ForwardedRef, HTMLAttributes, ElementType, KeyboardEventHandler, TextareaHTMLAttributes } from 'react';
-import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
+import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as _emotion_styled from '@emotion/styled';
 import * as _emotion_react from '@emotion/react';
 import { Theme, CSSObject, css } from '@emotion/react';
@@ -719,87 +719,91 @@ type Color = Extract<keyof typeof consoleLightTheme.colors, 'primary' | 'neutral
 declare const SENTIMENTS: readonly ["primary", "neutral", "success", "danger", "warning", "info"];
 
 declare const ICONS: {
-    readonly alert: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly anchor: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'arrow-down': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'arrow-left': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'arrow-left-double': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'arrow-right': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'arrow-right-bottom': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'arrow-right-double': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'arrow-up': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly asterisk: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'auto-fix': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly bullhorn: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly burger: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'book-open-outline': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly calculator: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'calendar-range': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly cancel: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly id: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly check: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'checkbox-circle-outline': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'clock-outline': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly close: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'close-circle-outline': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'copy-content': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly credentials: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'credit-card': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly delete: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly detach: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly doc: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'dots-horizontal': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'dots-vertical': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly download: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'drag-variant': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'drag-vertical': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly east: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'email-outline': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly expand: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly eye: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'eye-off': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly filter: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly github: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'help-circle-outline': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'information-outline': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly lock: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly logout: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly members: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly minus: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly moon: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'open-in-new': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly organization: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly pencil: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'play-circle-outline': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly plus: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly privacy: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly profile: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'progress-check': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'ray-end-arrow': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'ray-start-arrow': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'ray-start-end': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'ray-top-arrow': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly reboot: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly restore: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly revoke: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly rocket: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly search: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly send: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly settings: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly sort: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly sun: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly support: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly switch_orga: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly unlock: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly upload: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly view: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'weather-night': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly attach: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly phone: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly earth: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly 'email-remove-outline': () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    readonly alert: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly anchor: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'arrow-down': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'arrow-left': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'arrow-left-double': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'arrow-right': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'arrow-right-bottom': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'arrow-right-double': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'arrow-up': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly asterisk: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'auto-fix': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly bullhorn: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly burger: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'book-open-outline': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly calculator: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'calendar-range': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly cancel: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly id: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly check: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'checkbox-circle-outline': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'clock-outline': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly close: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'close-circle-outline': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'copy-content': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly credentials: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'credit-card': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly delete: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly detach: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly doc: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'dots-horizontal': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'dots-vertical': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly download: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'drag-variant': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'drag-vertical': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly east: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'email-outline': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly expand: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly eye: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'eye-off': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly filter: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly github: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'help-circle-outline': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'information-outline': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly lock: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly logout: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly members: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly minus: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly moon: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'open-in-new': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly organization: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly pencil: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'play-circle-outline': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly plus: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly privacy: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly profile: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'progress-check': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'ray-end-arrow': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'ray-start-arrow': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'ray-start-end': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'ray-top-arrow': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly reboot: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly restore: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly revoke: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly rocket: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly search: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly send: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly settings: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly sort: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly sun: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly support: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly switch_orga: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly unlock: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly upload: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly view: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'weather-night': () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly attach: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly phone: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly earth: () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly 'email-remove-outline': () => _emotion_react_jsx_runtime.JSX.Element;
 };
 type IconName = keyof typeof ICONS;
+/**
+ * @deprecated This component is deprecated. Please use `Icon` from `@ultraviolet/icons` instead.
+ * The component is same but has been move on another package.
+ */
 declare const Icon: react.ForwardRefExoticComponent<{
     size?: string | number | undefined;
     name?: "filter" | "view" | "sort" | "id" | "alert" | "search" | "anchor" | "arrow-down" | "arrow-left" | "arrow-left-double" | "arrow-right" | "arrow-right-bottom" | "arrow-right-double" | "arrow-up" | "asterisk" | "auto-fix" | "bullhorn" | "burger" | "book-open-outline" | "calculator" | "calendar-range" | "cancel" | "check" | "checkbox-circle-outline" | "clock-outline" | "close" | "close-circle-outline" | "copy-content" | "credentials" | "credit-card" | "delete" | "detach" | "doc" | "dots-horizontal" | "dots-vertical" | "download" | "drag-variant" | "drag-vertical" | "east" | "email-outline" | "expand" | "eye" | "eye-off" | "github" | "help-circle-outline" | "information-outline" | "lock" | "logout" | "members" | "minus" | "moon" | "open-in-new" | "organization" | "pencil" | "play-circle-outline" | "plus" | "privacy" | "profile" | "progress-check" | "ray-end-arrow" | "ray-start-arrow" | "ray-start-end" | "ray-top-arrow" | "reboot" | "restore" | "revoke" | "rocket" | "send" | "settings" | "sun" | "support" | "switch_orga" | "unlock" | "upload" | "weather-night" | "attach" | "phone" | "earth" | "email-remove-outline" | undefined;
@@ -934,7 +938,7 @@ type AlertProps = {
      */
     disabled?: boolean;
 };
-declare const Alert: ({ children, title, sentiment, buttonText, onClickButton, closable, onClose, className, disabled, "data-testid": dataTestId, }: AlertProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
+declare const Alert: ({ children, title, sentiment, buttonText, onClickButton, closable, onClose, className, disabled, "data-testid": dataTestId, }: AlertProps) => _emotion_react_jsx_runtime.JSX.Element | null;
 
 type Without<T, U> = {
     [P in Exclude<keyof T, keyof U>]?: never;
@@ -979,7 +983,7 @@ type AvatarProps = {
         text: string;
     }
 ]>;
-declare const Avatar: ({ image, size, text, textBgColor, textColor, textSize, lock, className, "data-testid": dataTestId, }: AvatarProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Avatar: ({ image, size, text, textBgColor, textColor, textSize, lock, className, "data-testid": dataTestId, }: AvatarProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare const SIZES: {
     large: number;
@@ -1003,7 +1007,7 @@ type BadgeProps = {
     children: ReactNode;
     'data-testid'?: string;
 };
-declare const Badge: ({ sentiment, size, prominence, icon, disabled, className, children, "data-testid": dataTestId, }: BadgeProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Badge: ({ sentiment, size, prominence, icon, disabled, className, children, "data-testid": dataTestId, }: BadgeProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type Variant$1 = 'intro' | 'promotional';
 type BannerProps = {
@@ -1020,7 +1024,7 @@ type BannerProps = {
     image?: ReactNode;
     className?: string;
 };
-declare const Banner: ({ variant, size, title, children, direction, onClose, buttonText, onClickButton, linkText, linkHref, image, className, }: BannerProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
+declare const Banner: ({ variant, size, title, children, direction, onClose, buttonText, onClickButton, linkText, linkHref, image, className, }: BannerProps) => _emotion_react_jsx_runtime.JSX.Element | null;
 
 type BarChartToolTipProps = {
     color: string;
@@ -1029,7 +1033,7 @@ type BarChartToolTipProps = {
     className?: string;
     'data-testid'?: string;
 };
-declare const BarChartToolTip: ({ formattedValue, indexValue, color, className, "data-testid": dataTestId, }: BarChartToolTipProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const BarChartToolTip: ({ formattedValue, indexValue, color, className, "data-testid": dataTestId, }: BarChartToolTipProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type Formatter = ValueFormat<DatumValue>;
 type TickSpec = NonNullable<ComponentProps<typeof ResponsiveBar>['axisBottom']>['tickValues'];
@@ -1049,7 +1053,7 @@ type BarChartProps = {
 /**
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-declare const BarChart: ({ height, margin, data, axisFormatters, tickValues, keys, tooltipFunction, chartProps, className, "data-testid": dataTestId, }: BarChartProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const BarChart: ({ height, margin, data, axisFormatters, tickValues, keys, tooltipFunction, chartProps, className, "data-testid": dataTestId, }: BarChartProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type BarProps = {
     /**
@@ -1097,7 +1101,7 @@ type ItemProps$1 = {
     step?: number;
     onClick?: (event: MouseEvent<HTMLLIElement>, step: number) => void;
 };
-declare const Item: ({ to, children, disabled, "aria-current": ariaCurrent, onClick, step, }: ItemProps$1) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Item: ({ to, children, disabled, "aria-current": ariaCurrent, onClick, step, }: ItemProps$1) => _emotion_react_jsx_runtime.JSX.Element;
 type BreadcrumbsProps = {
     selected?: number;
     children: ReactNode;
@@ -1138,7 +1142,7 @@ type BulletProps = {
     'data-testid'?: string;
     prominence?: ProminenceType;
 } & ContentProps$1;
-declare const Bullet: ({ className, sentiment, size, icon, text, tooltip, tooltipBaseId, "data-testid": dataTestId, prominence, }: BulletProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Bullet: ({ className, sentiment, size, icon, text, tooltip, tooltipBaseId, "data-testid": dataTestId, prominence, }: BulletProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type CardProps = {
     children: ReactNode;
@@ -1202,7 +1206,7 @@ type CopyButtonProps = {
     className?: string;
     'data-testid'?: string;
 };
-declare const CopyButton: ({ size, value, copyText, copiedText, sentiment, noBorder, className, "data-testid": dataTestId, }: CopyButtonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const CopyButton: ({ size, value, copyText, copiedText, sentiment, noBorder, className, "data-testid": dataTestId, }: CopyButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type DateInputProps = Pick<ReactDatePickerProps<string>, 'autoFocus' | 'disabled' | 'locale' | 'maxDate' | 'minDate' | 'name' | 'onBlur' | 'onChange' | 'onFocus' | 'required'> & {
     error?: string;
@@ -1215,7 +1219,7 @@ type DateInputProps = Pick<ReactDatePickerProps<string>, 'autoFocus' | 'disabled
     className?: string;
     'data-testid'?: string;
 };
-declare const DateInput: ({ autoFocus, disabled, error, format, label, locale, maxDate, minDate, name, onBlur, onChange, onFocus, required, value, className, "data-testid": dataTestId, }: DateInputProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const DateInput: ({ autoFocus, disabled, error, format, label, locale, maxDate, minDate, name, onBlur, onChange, onFocus, required, value, className, "data-testid": dataTestId, }: DateInputProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare const CONTAINER_SIZES: {
     readonly small: 720;
@@ -1249,7 +1253,7 @@ type EmptyStateProps = {
     children?: ReactNode;
     'data-testid'?: string;
 };
-declare const EmptyState: ({ image, title, size, description, primaryButton, secondaryButton, learnMore, className, bordered, children, "data-testid": dataTestId, }: EmptyStateProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const EmptyState: ({ image, title, size, description, primaryButton, secondaryButton, learnMore, className, bordered, children, "data-testid": dataTestId, }: EmptyStateProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type ExpandableProps = {
     /**
@@ -1267,7 +1271,7 @@ type ExpandableProps = {
     className?: string;
     'data-testid'?: string;
 };
-declare const Expandable: ({ children, opened, minHeight, className, "data-testid": dataTestId, }: ExpandableProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Expandable: ({ children, opened, minHeight, className, "data-testid": dataTestId, }: ExpandableProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type Transformer = (value: DatumValue) => string;
 type CustomLegendProps = {
@@ -1278,7 +1282,7 @@ type CustomLegendProps = {
     className?: string;
     'data-testid'?: string;
 };
-declare const CustomLegend: ({ axisTransformer, data, selected, setSelected, className, "data-testid": dataTestId, }: CustomLegendProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const CustomLegend: ({ axisTransformer, data, selected, setSelected, className, "data-testid": dataTestId, }: CustomLegendProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type LineChartProps = {
     height?: string | number;
@@ -1296,7 +1300,7 @@ type LineChartProps = {
 /**
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-declare const LineChart: ({ height, margin, xScale, yScale, data, withLegend, axisFormatters, pointFormatters, tickValues, chartProps, "data-testid": dataTestId, }: LineChartProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const LineChart: ({ height, margin, xScale, yScale, data, withLegend, axisFormatters, pointFormatters, tickValues, chartProps, "data-testid": dataTestId, }: LineChartProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare const PROMINENCES$1: {
     default: string;
@@ -1332,7 +1336,7 @@ type HeaderCellProps$1 = {
     onOrder?: (newOrder: 'asc' | 'desc') => void;
     info?: string;
 };
-declare const HeaderCell$1: ({ children, isOrdered, orderDirection, onOrder, className, info, }: HeaderCellProps$1) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const HeaderCell$1: ({ children, isOrdered, orderDirection, onOrder, className, info, }: HeaderCellProps$1) => _emotion_react_jsx_runtime.JSX.Element;
 
 type SelectBarProps$1<T> = {
     className?: string;
@@ -1346,7 +1350,7 @@ type SelectBarProps$1<T> = {
      * */
     idKey: keyof T;
 };
-declare function SelectBar$1<T>({ children, data, idKey, className, }: SelectBarProps$1<T>): _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
+declare function SelectBar$1<T>({ children, data, idKey, className, }: SelectBarProps$1<T>): _emotion_react_jsx_runtime.JSX.Element | null;
 
 type ColumnProps$1 = Pick<ComponentProps<typeof HeaderCell$1>, 'isOrdered' | 'onOrder' | 'orderDirection'> & {
     label?: string;
@@ -1420,7 +1424,7 @@ type LoaderProps = {
      */
     label?: string;
 };
-declare const Loader: ({ percentage, text, size, strokeWidth, color, trailColor, active, label, }: LoaderProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Loader: ({ percentage, text, size, strokeWidth, color, trailColor, active, label, }: LoaderProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type DisclosureElement = ((popover: Partial<PopoverStateReturn>) => ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>) | (ReactElement<ButtonHTMLAttributes<HTMLButtonElement>> & {
     ref?: Ref<HTMLButtonElement>;
@@ -1561,14 +1565,14 @@ type ModalProps = Partial<Pick<DialogProps, 'animated' | 'id' | 'hideOnEsc' | 'h
     className?: string;
     'data-testid'?: string;
 };
-declare const Modal: react.MemoExoticComponent<({ animated, animation, ariaLabel, id, bordered, children, customDialogBackdropStyles, customDialogStyles, disclosure, height, hideOnClickOutside, hideOnEsc, isClosable, modal, onClose, onBeforeClose, opened, placement, preventBodyScroll, width, className, "data-testid": dataTestId, }: ModalProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element>;
+declare const Modal: react.MemoExoticComponent<({ animated, animation, ariaLabel, id, bordered, children, customDialogBackdropStyles, customDialogStyles, disclosure, height, hideOnClickOutside, hideOnEsc, isClosable, modal, onClose, onBeforeClose, opened, placement, preventBodyScroll, width, className, "data-testid": dataTestId, }: ModalProps) => _emotion_react_jsx_runtime.JSX.Element>;
 
 type NoticeProps = {
     children: ReactNode;
     className?: string;
     'data-testid'?: string;
 };
-declare const Notice: ({ children, className, "data-testid": dataTestId, }: NoticeProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Notice: ({ children, className, "data-testid": dataTestId, }: NoticeProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare const containerSizes: {
     large: number;
@@ -1605,7 +1609,7 @@ type NumberInputProps = {
     placeholder?: string;
     error?: string | boolean;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'defaultValue'>;
-declare const NumberInput: ({ disabled, maxValue, minValue, name, onChange, onFocus, onBlur, onMaxCrossed, onMinCrossed, size, step, text, defaultValue, value, disabledTooltip, className, label, id, placeholder, error, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "data-testid": dataTestId, }: NumberInputProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const NumberInput: ({ disabled, maxValue, minValue, name, onChange, onFocus, onBlur, onMaxCrossed, onMinCrossed, size, step, text, defaultValue, value, disabledTooltip, className, label, id, placeholder, error, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "data-testid": dataTestId, }: NumberInputProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type PaginationProps = {
     /**
@@ -1650,7 +1654,7 @@ type PasswordCheckProps = {
     className?: string;
     'data-testid'?: string;
 };
-declare const PasswordCheck: ({ rules, className, "data-testid": dataTestId, }: PasswordCheckProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const PasswordCheck: ({ rules, className, "data-testid": dataTestId, }: PasswordCheckProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type Strength = {
     /**
@@ -1711,7 +1715,7 @@ type PieChartProps = {
 /**
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-declare const PieChart: ({ height, width, data, emptyLegend, content, withLegend, margin, chartProps, }: PieChartProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const PieChart: ({ height, width, data, emptyLegend, content, withLegend, margin, chartProps, }: PieChartProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left' | 'auto';
 
@@ -1765,7 +1769,7 @@ type PopoverProps = {
     className?: string;
     'data-testid'?: string;
 } & Pick<ComponentProps<typeof Tooltip>, 'placement'>;
-declare const Popover: ({ visible, children, placement, content, title, sentiment, size, onClose, className, "data-testid": dataTestId, }: PopoverProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Popover: ({ visible, children, placement, content, title, sentiment, size, onClose, className, "data-testid": dataTestId, }: PopoverProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare const progressBarSentiments: readonly ["primary", "success", "warning", "info"];
 type ProgressBarProps = {
@@ -1776,7 +1780,7 @@ type ProgressBarProps = {
     className?: string;
     'data-testid'?: string;
 };
-declare const ProgressBar: ({ progress, value, sentiment, className, "data-testid": dataTestId, }: ProgressBarProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const ProgressBar: ({ progress, value, sentiment, className, "data-testid": dataTestId, }: ProgressBarProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type RadioProps = {
     error?: string | ReactNode;
@@ -1803,7 +1807,7 @@ type RowProps = {
     alignItems?: CSSProperties['alignItems'];
     justifyContent?: CSSProperties['justifyContent'];
 };
-declare const Row: ({ className, "data-testid": dataTestId, children, templateColumns, alignItems, justifyContent, gap, }: RowProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Row: ({ className, "data-testid": dataTestId, children, templateColumns, alignItems, justifyContent, gap, }: RowProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type SelectableCardProps = {
     name?: string;
@@ -1904,16 +1908,16 @@ declare const Separator: ({ direction, thickness, color, icon, className, "data-
 declare const variants$1: {
     readonly block: ({ length }: {
         length?: number | undefined;
-    }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly blocks: ({ col, length, }: {
         col?: number | undefined;
         length?: number | undefined;
-    }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly box: ({ col, length, }: {
         col?: number | undefined;
         length?: number | undefined;
-    }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    readonly donut: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
+    readonly donut: () => _emotion_react_jsx_runtime.JSX.Element;
     readonly line: _emotion_styled.StyledComponent<{
         theme?: _emotion_react.Theme | undefined;
         as?: react.ElementType<any> | undefined;
@@ -1921,10 +1925,10 @@ declare const variants$1: {
     readonly list: ({ length, col, }: {
         length?: number | undefined;
         col?: number | undefined;
-    }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly slider: ({ length }: {
         length?: number | undefined;
-    }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
 };
 type SkeletonVariant = keyof typeof variants$1;
 type SkeletonProps = {
@@ -1933,7 +1937,7 @@ type SkeletonProps = {
     col?: number;
     className?: string;
 };
-declare const Skeleton: ({ variant, length, col, className, }: SkeletonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Skeleton: ({ variant, length, col, className, }: SkeletonProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type Prefixes = 'lines' | 'command';
 type SnippetProps = {
@@ -1949,7 +1953,7 @@ type SnippetProps = {
     hideText?: string;
     'data-testid'?: string;
 } & Pick<ComponentProps<typeof CopyButton>, 'copyText' | 'copiedText'>;
-declare const Snippet: ({ children, copyText, copiedText, showText, hideText, prefix, className, "data-testid": dataTestId, }: SnippetProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Snippet: ({ children, copyText, copiedText, showText, hideText, prefix, className, "data-testid": dataTestId, }: SnippetProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type StackProps = {
     gap?: keyof SCWUITheme['space'] | number;
@@ -2017,8 +2021,8 @@ type StepListProps = {
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
 declare const StepList: {
-    ({ children, className, "data-testid": dataTestId, }: StepListProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-    Item: ({ bulletText, bulletIcon, sentiment, children, size, disabled, className, }: ItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    ({ children, className, "data-testid": dataTestId, }: StepListProps): _emotion_react_jsx_runtime.JSX.Element;
+    Item: ({ bulletText, bulletIcon, sentiment, children, size, disabled, className, }: ItemProps) => _emotion_react_jsx_runtime.JSX.Element;
 };
 
 type StepperProps = {
@@ -2028,7 +2032,7 @@ type StepperProps = {
     className?: string;
     'data-testid'?: string;
 };
-declare const Stepper: ({ children, selected, animated, className, "data-testid": dataTestId, }: StepperProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Stepper: ({ children, selected, animated, className, "data-testid": dataTestId, }: StepperProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type SwitchButtonProps = {
     name: string;
@@ -2050,7 +2054,7 @@ type SwitchButtonProps = {
     className?: string;
     'data-testid'?: string;
 };
-declare const SwitchButton: ({ value, onChange, onFocus, onBlur, name, leftButton, rightButton, tooltip, className, "data-testid": dataTestId, }: SwitchButtonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const SwitchButton: ({ value, onChange, onFocus, onBlur, name, leftButton, rightButton, tooltip, className, "data-testid": dataTestId, }: SwitchButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type HeaderCellProps = {
     children: ReactNode;
@@ -2063,7 +2067,7 @@ type HeaderCellProps = {
     maxWidth?: string;
     info?: string;
 };
-declare const HeaderCell: ({ children, className, isOrdered, onOrder, orderDirection, width, maxWidth, minWidth, info, }: HeaderCellProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const HeaderCell: ({ children, className, isOrdered, onOrder, orderDirection, width, maxWidth, minWidth, info, }: HeaderCellProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type SelectBarProps<T> = {
     className?: string;
@@ -2077,7 +2081,7 @@ type SelectBarProps<T> = {
      * */
     idKey: keyof T;
 };
-declare function SelectBar<T>({ children, data, idKey, className, }: SelectBarProps<T>): _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
+declare function SelectBar<T>({ children, data, idKey, className, }: SelectBarProps<T>): _emotion_react_jsx_runtime.JSX.Element | null;
 
 type ColumnProps = Pick<ComponentProps<typeof HeaderCell>, 'isOrdered' | 'onOrder' | 'orderDirection'> & {
     label?: string;
@@ -2100,20 +2104,20 @@ type TableProps = {
 declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLTableElement>> & {
     Body: ({ children }: {
         children: ReactNode;
-    }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
     Row: ({ children, className, id, selectDisabled, "data-testid": dataTestid, }: {
         children: ReactNode;
         className?: string | undefined;
         id: string;
         'data-testid'?: string | undefined;
         selectDisabled?: string | boolean | undefined;
-    }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
     Cell: ({ children, className, colSpan, rowSpan }: {
         children?: ReactNode;
         className?: string | undefined;
         colSpan?: number | undefined;
         rowSpan?: number | undefined;
-    }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
     useTableContext: () => {
         bordered: boolean;
         stripped: boolean;
@@ -2139,7 +2143,7 @@ type TabsProps = {
     'data-testid'?: string;
 } & Omit<HTMLAttributes<HTMLElement>, 'onChange' | 'role'>;
 declare const Tabs: {
-    ({ children, onChange, moreDisclosure, selected, className, "data-testid": dataTestId, ...props }: TabsProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    ({ children, onChange, moreDisclosure, selected, className, "data-testid": dataTestId, ...props }: TabsProps): _emotion_react_jsx_runtime.JSX.Element;
     Tab: react.ForwardRefExoticComponent<Omit<{
         as?: react.ElementType | undefined;
         badge?: ReactNode;
@@ -2172,7 +2176,7 @@ declare const Tabs: {
         'data-testid'?: string | undefined;
     } & react.RefAttributes<HTMLElement> & {
         theme?: _emotion_react.Theme | undefined;
-    }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
 };
 
 type TagProps = {
@@ -2191,7 +2195,7 @@ type TagProps = {
     children: ReactNode;
     'data-testid'?: string;
 };
-declare const Tag: ({ children, isLoading, onClose, icon, copiable, copyText, copiedText, disabled, sentiment, className, "data-testid": dataTestId, }: TagProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Tag: ({ children, isLoading, onClose, icon, copiable, copyText, copiedText, disabled, sentiment, className, "data-testid": dataTestId, }: TagProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare const variants: {
     readonly base: ({ theme: { colors, shadows, radii } }: {
@@ -2274,7 +2278,7 @@ type TextProps = {
     htmlFor?: string;
     'data-testid'?: string;
 };
-declare const Text: ({ variant, children, as, color, oneLine, prominence, className, disabled, italic, underline, id, dir, htmlFor, "data-testid": dataTestId, }: TextProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Text: ({ variant, children, as, color, oneLine, prominence, className, disabled, italic, underline, id, dir, htmlFor, "data-testid": dataTestId, }: TextProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare const inputSizes: {
     medium: {
@@ -2385,7 +2389,7 @@ type ToastContainerProps = {
     position?: ToastOptions['position'];
     'data-testid'?: string;
 };
-declare const ToastContainer: ({ newestOnTop, limit, position, "data-testid": dataTestId, }: ToastContainerProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const ToastContainer: ({ newestOnTop, limit, position, "data-testid": dataTestId, }: ToastContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type ToggleProps = {
     id?: string;

package/dist/src/components/Icon/index.js

@@ -316,6 +316,10 @@ const StyledIcon = /*#__PURE__*/_styled('svg', {
   const icon = `icon${definedProminence}${disabled ? 'Disabled' : ''}`;
   return theme.colors?.[color]?.[icon] || color;
 }, ";", sizeStyles, ";");
+/**
+ * @deprecated This component is deprecated. Please use `Icon` from `@ultraviolet/icons` instead.
+ * The component is same but has been move on another package.
+ */
 const Icon = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     name = 'alert',

package/dist/src/components/List/Cell.js

@@ -25,11 +25,17 @@ const Cell = /*#__PURE__*/forwardRef((_ref, ref) => {
       event.stopPropagation();
     }
   };
+  const handleKeyDown = event => {
+    if (preventClick) {
+      event.stopPropagation();
+    }
+  };
   return jsx(StyledCell, {
     ref: ref,
     role: "cell",
     className: className,
     onClick: handleClick,
+    onKeyDown: handleKeyDown,
     "data-testid": dataTestid,
     children: children
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.4.5",
+  "version": "1.5.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -26,10 +26,12 @@
     "linux"
   ],
   "sideEffects": false,
-  "main": "dist/src/index.js",
-  "module": "dist/src/index.js",
-  "jsnext:main": "dist/src/index.js",
-  "types": "dist/index.d.ts",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "types": "./dist/index.d.ts",
+    "default": "./dist/src/index.js"
+  },
   "peerDependencies": {
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
@@ -37,7 +39,7 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.22.5",
+    "@babel/core": "7.22.8",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
@@ -55,16 +57,16 @@
     "@nivo/pie": "0.80.0",
     "@nivo/scales": "0.80.0",
     "@nivo/tooltip": "0.80.0",
-    "@scaleway/random-name": "4.0.1",
-    "@scaleway/use-media": "2.0.0",
+    "@scaleway/random-name": "4.0.2",
+    "@scaleway/use-media": "2.0.1",
     "deepmerge": "4.3.1",
     "prop-types": "15.8.1",
-    "react-datepicker": "4.15.0",
+    "react-datepicker": "4.16.0",
     "react-flatten-children": "1.1.2",
-    "react-select": "5.7.3",
+    "react-select": "5.7.4",
     "react-toastify": "9.1.3",
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
-    "@ultraviolet/themes": "1.1.4"
+    "@ultraviolet/themes": "1.1.5"
   }
 }