@ultraviolet/ui 1.26.1 → 1.27.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { ReactNode, ComponentProps, ButtonHTMLAttributes, AriaRole, MouseEventHandler, JSX, MouseEvent, InputHTMLAttributes, HTMLAttributeAnchorTarget, AnchorHTMLAttributes, ReactElement, Ref, RefObject, KeyboardEventHandler, HTMLAttributes, CSSProperties, ChangeEventHandler, FocusEventHandler, ForwardRefExoticComponent, ForwardedRef, ElementType, TextareaHTMLAttributes } from 'react';
+import react__default, { ReactNode, ComponentProps, ButtonHTMLAttributes, AriaRole, MouseEventHandler, JSX, MouseEvent, InputHTMLAttributes, FocusEvent, HTMLAttributeAnchorTarget, AnchorHTMLAttributes, ReactElement, Ref, RefObject, KeyboardEventHandler, HTMLAttributes, CSSProperties, ChangeEventHandler, FocusEventHandler, ForwardRefExoticComponent, ForwardedRef, ElementType, TextareaHTMLAttributes } from 'react';
 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';
@@ -1382,8 +1382,16 @@ type CopyButtonProps = {
  */
 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, boolean>, 'autoFocus' | 'disabled' | 'locale' | 'maxDate' | 'minDate' | 'name' | 'onBlur' | 'onChange' | 'onFocus' | 'required'> & {
+type DateInputProps = Pick<ReactDatePickerProps<string, boolean>, 'locale' | 'onChange'> & {
+    autoFocus?: boolean;
+    disabled?: boolean;
+    maxDate?: Date | null;
+    minDate?: Date | null;
+    name?: string;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
     error?: string;
+    required?: boolean;
     format?: (value?: Date | string) => string | undefined;
     /**
      * Label of the field
@@ -1498,6 +1506,7 @@ declare const PROMINENCES$1: {
     default: string;
     weak: string;
     strong: string;
+    stronger: string;
 };
 type ProminenceProps$1 = keyof typeof PROMINENCES$1;
 type LinkSizes = 'large' | 'small';
@@ -1517,6 +1526,7 @@ type LinkProps = {
     'aria-label'?: string;
     oneLine?: boolean;
     'data-testid'?: string;
+    variant?: 'inline' | 'standalone';
 };
 /**
  * Link is a component used to navigate between pages or to external websites.
@@ -2831,6 +2841,7 @@ type VerificationCodeProps = {
     initialValue?: string;
     inputId?: string;
     inputStyle?: string;
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
     /**
      * Triggered when a field change
      */
@@ -2851,7 +2862,7 @@ type VerificationCodeProps = {
 /**
  * Verification code allows you to enter a code in multiple fields (4 by default).
  */
-declare const VerificationCode: ({ disabled, className, error, fields, initialValue, inputId, inputStyle, onChange, onComplete, placeholder, required, type, "data-testid": dataTestId, "aria-label": ariaLabel, }: VerificationCodeProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const VerificationCode: ({ disabled, className, error, fields, initialValue, inputId, inputStyle, size, onChange, onComplete, placeholder, required, type, "data-testid": dataTestId, "aria-label": ariaLabel, }: VerificationCodeProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type RadioGroupRadioProps = Omit<ComponentProps<typeof Radio>, 'onChange' | 'checked' | 'required'>;
 type RadioGroupProps = {
@@ -2918,6 +2929,41 @@ declare const MenuV2: react.ForwardRefExoticComponent<MenuProps & react.RefAttri
     } & react.RefAttributes<HTMLElement>>;
 };
 
+type GlobalAlertProps = {
+    children: ReactNode;
+    variant?: 'info' | 'danger' | 'promotional';
+    onClose?: () => void;
+    closable?: boolean;
+    className?: string;
+    'data-testid'?: string;
+    buttonText?: string;
+    onClickButton?: () => void;
+};
+/**
+ * GlobalAlert is a component that is used to display a global alert message.
+ * It has its own internal state and can be closed by clicking on the close button.
+ */
+declare const GlobalAlert: {
+    ({ children, variant, onClose, closable, buttonText, onClickButton, className, "data-testid": dataTestId, }: GlobalAlertProps): _emotion_react_jsx_runtime.JSX.Element | null;
+    Link: ({ children, href, target, download, rel, className, onClick, "aria-label": ariaLabel, oneLine, "data-testid": dataTestId, }: Omit<{
+        children: ReactNode;
+        target?: react.HTMLAttributeAnchorTarget | undefined;
+        download?: string | boolean | undefined;
+        sentiment?: Color | undefined;
+        prominence?: "strong" | "default" | "stronger" | "weak" | undefined;
+        size?: ("large" | "small") | undefined;
+        iconPosition?: ("left" | "right") | undefined;
+        rel?: string | undefined;
+        className?: string | undefined;
+        href: string;
+        onClick?: react.MouseEventHandler<HTMLAnchorElement> | undefined;
+        'aria-label'?: string | undefined;
+        oneLine?: boolean | undefined;
+        'data-testid'?: string | undefined;
+        variant?: "inline" | "standalone" | undefined;
+    } & react.RefAttributes<HTMLAnchorElement>, "size" | "sentiment" | "prominence">) => _emotion_react_jsx_runtime.JSX.Element;
+};
+
 declare const getUUID: (prefix?: string) => string;
 
 declare const bounce: _emotion_react.Keyframes;
@@ -2961,4 +3007,4 @@ declare const down: (size: ScreenSize, rules: string) => string;
 
 declare const normalize: () => string;
 
-export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Breakpoint, Bullet, Button, Card, Carousel, Checkbox, CheckboxGroup, CheckboxGroupCheckbox, CopyButton, DateInput, EmptyState, Expandable, LineChart, Link, List, Loader, Menu, MenuV2, Meter, Modal, Notice, NumberInput, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, Popup, ProgressBar, Radio, RadioGroup, Row, type SCWUITheme, SelectInput, SelectableCard, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextInput, TimeInput, ToastContainer, Toggle, ToggleGroup, Tooltip, type UltravioletUITheme, VerificationCode, bounce, down, extendTheme, fadeIn, fadeOut, flash, getUUID, normalize, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, toast, unfoldIn, unfoldOut, up, zoomIn, zoomOut };
+export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Breakpoint, Bullet, Button, Card, Carousel, Checkbox, CheckboxGroup, CheckboxGroupCheckbox, CopyButton, DateInput, EmptyState, Expandable, GlobalAlert, LineChart, Link, List, Loader, Menu, MenuV2, Meter, Modal, Notice, NumberInput, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, Popup, ProgressBar, Radio, RadioGroup, Row, type SCWUITheme, SelectInput, SelectableCard, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextInput, TimeInput, ToastContainer, Toggle, ToggleGroup, Tooltip, type UltravioletUITheme, VerificationCode, bounce, down, extendTheme, fadeIn, fadeOut, flash, getUUID, normalize, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, toast, unfoldIn, unfoldOut, up, zoomIn, zoomOut };

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

@@ -332,4 +332,4 @@ const Button = /*#__PURE__*/forwardRef((_ref10, ref) => {
   });
 });
 
-export { Button };
+export { Button, SIZE_HEIGHT };

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

@@ -28,49 +28,44 @@ const StyledBeforeScroll = /*#__PURE__*/_styled("span", {
 }, "\n  );cursor:w-resize;z-index:auto;");
 const StyledScrollableWrapper = /*#__PURE__*/_styled("div", {
   target: "e1id70w02"
-})("overflow-x:scroll;overflow-y:hidden;white-space:nowrap;display:flex;padding:", _ref3 => {
+})("overflow-x:scroll;overflow-y:hidden;white-space:nowrap;display:flex;padding:0 100px;gap:", _ref3 => {
   let {
     theme
   } = _ref3;
   return theme.space['2'];
-}, " 100px;gap:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.space['2'];
 }, ";");
 const StyledAfterScroll = /*#__PURE__*/_styled("span", {
   target: "e1id70w01"
-})("position:absolute;bottom:0;right:0;width:100px;height:100%;content:'';cursor:e-resize;z-index:auto;background:linear-gradient(\n    -90deg,\n    ", _ref5 => {
+})("position:absolute;bottom:0;right:0;width:100px;height:100%;content:'';cursor:e-resize;z-index:auto;background:linear-gradient(\n    -90deg,\n    ", _ref4 => {
   let {
     theme
-  } = _ref5;
+  } = _ref4;
   return theme.colors.neutral.background;
-}, ",\n    ", _ref6 => {
+}, ",\n    ", _ref5 => {
   let {
     theme
-  } = _ref6;
+  } = _ref5;
   return theme.colors.neutral.background;
 }, "ff\n  );");
 const StyledBorderWrapper = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['width'].includes(prop),
   target: "e1id70w00"
-})("display:flex;align-items:stretch;width:", _ref7 => {
+})("display:flex;align-items:stretch;width:", _ref6 => {
   let {
     width
-  } = _ref7;
+  } = _ref6;
   return width;
-}, ";max-width:", _ref8 => {
+}, ";max-width:", _ref7 => {
   let {
     width
-  } = _ref8;
+  } = _ref7;
   return width;
 }, ";overflow-wrap:break-word;white-space:normal;height:auto;cursor:grab;flex-shrink:0;");
-const CarouselItem = _ref9 => {
+const CarouselItem = _ref8 => {
   let {
     children,
     width = '240px'
-  } = _ref9;
+  } = _ref8;
   return jsx(StyledBorderWrapper, {
     width: width,
     draggable: "true",
@@ -80,12 +75,12 @@ const CarouselItem = _ref9 => {
 /**
  * Carousel component allows you to scroll horizontally through a list of items.
  */
-const Carousel = _ref10 => {
+const Carousel = _ref9 => {
   let {
     children,
     className,
     'data-testid': dataTestId = 'scrollbar'
-  } = _ref10;
+  } = _ref9;
   const scrollRef = useRef(null);
   let intervalLeft;
   let intervalRight;

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

@@ -22,178 +22,208 @@ const StyledSeparator = /*#__PURE__*/_styled(Separator, {
 }, ";height:100%;");
 const StyledWrapper = /*#__PURE__*/_styled("div", {
   target: "e1bm75lk2"
-})("width:100%;div", PREFIX, "-wrapper{display:block;}div", PREFIX, "__input-container{display:block;}div", PREFIX, "__triangle{display:none;}div", PREFIX, "__month-container{padding:16px;}", PREFIX, "-popper{z-index:1000;}.calendar{font-family:'Asap';border-color:", _ref2 => {
+})("width:100%;div", PREFIX, "-wrapper{display:block;}div", PREFIX, "__input-container{display:block;}div", PREFIX, "__triangle{display:none;}div", PREFIX, "__month-container{padding:16px;}", PREFIX, "-popper{z-index:1000;}.calendar{font-family:", _ref2 => {
   let {
     theme
   } = _ref2;
-  return theme.colors.neutral.borderWeak;
-}, ";background-color:", _ref3 => {
+  return theme.typography.body.fontFamily;
+}, ";border-color:", _ref3 => {
   let {
     theme
   } = _ref3;
-  return theme.colors.neutral.backgroundWeakElevated;
-}, ";", PREFIX, "__header{color:", _ref4 => {
+  return theme.colors.neutral.borderWeak;
+}, ";background-color:", _ref4 => {
   let {
     theme
   } = _ref4;
-  return theme.colors.neutral.text;
-}, ";background-color:", _ref5 => {
+  return theme.colors.neutral.backgroundWeakElevated;
+}, ";", PREFIX, "__header{color:", _ref5 => {
   let {
     theme
   } = _ref5;
-  return theme.colors.neutral.backgroundWeakElevated;
-}, ";border-bottom:none;text-align:inherit;display:block;padding-top:0;position:inherit;}", PREFIX, "__triangle{border-bottom-color:", _ref6 => {
+  return theme.colors.neutral.text;
+}, ";background-color:", _ref6 => {
   let {
     theme
   } = _ref6;
-  return theme.colors.neutral.backgroundWeak;
-}, ";}", PREFIX, "__month{margin:0;}", PREFIX, "__day-names{margin-top:8px;}", PREFIX, "__day-name{font-family:'Asap';color:", _ref7 => {
+  return theme.colors.neutral.backgroundWeakElevated;
+}, ";border-bottom:none;text-align:inherit;display:block;padding-top:0;position:inherit;}", PREFIX, "__triangle{border-bottom-color:", _ref7 => {
   let {
     theme
   } = _ref7;
-  return theme.colors.neutral.text;
-}, ";font-weight:500;font-size:14px;line-height:24px;text-align:center;margin:3px;text-transform:capitalize;}", PREFIX, "__day{color:", _ref8 => {
+  return theme.colors.neutral.backgroundWeak;
+}, ";}", PREFIX, "__month{margin:0;}", PREFIX, "__day-names{margin-top:8px;}", PREFIX, "__day-name{font-family:", _ref8 => {
   let {
     theme
   } = _ref8;
-  return theme.colors.neutral.textWeak;
-}, ";font-size:16px;width:1.7rem;height:1.7rem;margin-left:3px;margin-right:3px;}", PREFIX, "__day--selected{color:", _ref9 => {
+  return theme.typography.bodySmallStrong.fontFamily;
+}, ";color:", _ref9 => {
   let {
     theme
   } = _ref9;
-  return theme.colors.primary.textStrong;
-}, ";background-color:", _ref10 => {
+  return theme.colors.neutral.text;
+}, ";font-weight:", _ref10 => {
   let {
     theme
   } = _ref10;
-  return theme.colors.primary.backgroundStrong;
-}, ";&[aria-disabled='true'],&:disabled{color:", _ref11 => {
+  return theme.typography.bodySmallStrong.weight;
+}, ";font-size:", _ref11 => {
   let {
     theme
   } = _ref11;
-  return theme.colors.primary.textStrongDisabled;
-}, ";background-color:", _ref12 => {
+  return theme.typography.bodySmallStrong.fontSize;
+}, ";line-height:", _ref12 => {
   let {
     theme
   } = _ref12;
-  return theme.colors.primary.backgroundStrongDisabled;
-}, ";}}", PREFIX, "__day--in-selecting-range{color:", _ref13 => {
+  return theme.typography.bodySmallStrong.lineHeight;
+}, ";text-align:center;margin:3px;text-transform:capitalize;}", PREFIX, "__day{color:", _ref13 => {
   let {
     theme
   } = _ref13;
-  return theme.colors.primary.text;
-}, ";background-color:", _ref14 => {
+  return theme.colors.neutral.textWeak;
+}, ";font-size:", _ref14 => {
   let {
     theme
   } = _ref14;
-  return theme.colors.primary.background;
-}, ";&[aria-disabled='true'],&:disabled{color:", _ref15 => {
+  return theme.typography.body.fontSize;
+}, ";width:1.7rem;height:1.7rem;margin-left:3px;margin-right:3px;}", PREFIX, "__day--selected{color:", _ref15 => {
   let {
     theme
   } = _ref15;
-  return theme.colors.primary.textDisabled;
+  return theme.colors.primary.textStrong;
 }, ";background-color:", _ref16 => {
   let {
     theme
   } = _ref16;
-  return theme.colors.primary.backgroundDisabled;
-}, ";}}", PREFIX, "__day--in-range{color:", _ref17 => {
+  return theme.colors.primary.backgroundStrong;
+}, ";&[aria-disabled='true'],&:disabled{color:", _ref17 => {
   let {
     theme
   } = _ref17;
-  return theme.colors.primary.text;
+  return theme.colors.primary.textStrongDisabled;
 }, ";background-color:", _ref18 => {
   let {
     theme
   } = _ref18;
-  return theme.colors.primary.background;
-}, ";&[aria-disabled='true'],&:disabled{color:", _ref19 => {
+  return theme.colors.primary.backgroundStrongDisabled;
+}, ";}}", PREFIX, "__day--in-selecting-range{color:", _ref19 => {
   let {
     theme
   } = _ref19;
-  return theme.colors.primary.textDisabled;
+  return theme.colors.primary.text;
 }, ";background-color:", _ref20 => {
   let {
     theme
   } = _ref20;
-  return theme.colors.primary.backgroundDisabled;
-}, ";}}", PREFIX, "__day--range-start{color:", _ref21 => {
+  return theme.colors.primary.background;
+}, ";&[aria-disabled='true'],&:disabled{color:", _ref21 => {
   let {
     theme
   } = _ref21;
-  return theme.colors.primary.textStrong;
+  return theme.colors.primary.textDisabled;
 }, ";background-color:", _ref22 => {
   let {
     theme
   } = _ref22;
-  return theme.colors.primary.backgroundStrong;
-}, ";&[aria-disabled='true'],&:disabled{color:", _ref23 => {
+  return theme.colors.primary.backgroundDisabled;
+}, ";}}", PREFIX, "__day--in-range{color:", _ref23 => {
   let {
     theme
   } = _ref23;
-  return theme.colors.primary.textStrongDisabled;
+  return theme.colors.primary.text;
 }, ";background-color:", _ref24 => {
   let {
     theme
   } = _ref24;
-  return theme.colors.primary.backgroundStrongDisabled;
-}, ";}}", PREFIX, "__day--range-end{color:", _ref25 => {
+  return theme.colors.primary.background;
+}, ";&[aria-disabled='true'],&:disabled{color:", _ref25 => {
   let {
     theme
   } = _ref25;
-  return theme.colors.primary.textStrong;
+  return theme.colors.primary.textDisabled;
 }, ";background-color:", _ref26 => {
   let {
     theme
   } = _ref26;
-  return theme.colors.primary.backgroundStrong;
-}, ";&[aria-disabled='true'],&:disabled{color:", _ref27 => {
+  return theme.colors.primary.backgroundDisabled;
+}, ";}}", PREFIX, "__day--range-start{color:", _ref27 => {
   let {
     theme
   } = _ref27;
-  return theme.colors.primary.textStrongDisabled;
+  return theme.colors.primary.textStrong;
 }, ";background-color:", _ref28 => {
   let {
     theme
   } = _ref28;
-  return theme.colors.primary.backgroundStrongDisabled;
-}, ";}}", PREFIX, "__day--keyboard-selected{color:", _ref29 => {
+  return theme.colors.primary.backgroundStrong;
+}, ";&[aria-disabled='true'],&:disabled{color:", _ref29 => {
   let {
     theme
   } = _ref29;
-  return theme.colors.primary.textStrong;
+  return theme.colors.primary.textStrongDisabled;
 }, ";background-color:", _ref30 => {
   let {
     theme
   } = _ref30;
-  return theme.colors.primary.backgroundStrong;
-}, ";}", PREFIX, "__day:hover{color:", _ref31 => {
+  return theme.colors.primary.backgroundStrongDisabled;
+}, ";}}", PREFIX, "__day--range-end{color:", _ref31 => {
   let {
     theme
   } = _ref31;
-  return theme.colors.neutral.textHover;
+  return theme.colors.primary.textStrong;
 }, ";background-color:", _ref32 => {
   let {
     theme
   } = _ref32;
-  return theme.colors.neutral.backgroundHover;
-}, ";}", PREFIX, "__day--disabled{color:", _ref33 => {
+  return theme.colors.primary.backgroundStrong;
+}, ";&[aria-disabled='true'],&:disabled{color:", _ref33 => {
   let {
     theme
   } = _ref33;
-  return theme.colors.neutral.textDisabled;
-}, ";}", PREFIX, "__day--disabled:hover{color:", _ref34 => {
+  return theme.colors.primary.textStrongDisabled;
+}, ";background-color:", _ref34 => {
   let {
     theme
   } = _ref34;
+  return theme.colors.primary.backgroundStrongDisabled;
+}, ";}}", PREFIX, "__day--keyboard-selected{color:", _ref35 => {
+  let {
+    theme
+  } = _ref35;
+  return theme.colors.primary.textStrong;
+}, ";background-color:", _ref36 => {
+  let {
+    theme
+  } = _ref36;
+  return theme.colors.primary.backgroundStrong;
+}, ";}", PREFIX, "__day:hover{color:", _ref37 => {
+  let {
+    theme
+  } = _ref37;
+  return theme.colors.neutral.textHover;
+}, ";background-color:", _ref38 => {
+  let {
+    theme
+  } = _ref38;
+  return theme.colors.neutral.backgroundHover;
+}, ";}", PREFIX, "__day--disabled{color:", _ref39 => {
+  let {
+    theme
+  } = _ref39;
+  return theme.colors.neutral.textDisabled;
+}, ";}", PREFIX, "__day--disabled:hover{color:", _ref40 => {
+  let {
+    theme
+  } = _ref40;
   return theme.colors.neutral.textDisabled;
 }, ";background-color:transparent;}}");
 const StyledIconContainer = /*#__PURE__*/_styled("div", {
   target: "e1bm75lk1"
-})("padding:", _ref35 => {
+})("padding:", _ref41 => {
   let {
     theme
-  } = _ref35;
+  } = _ref41;
   return theme.space['1'];
 }, ";position:absolute;display:flex;align-items:center;right:0;top:0;height:48px;");
 const StyledText = /*#__PURE__*/_styled(Text, {
@@ -212,7 +242,7 @@ const DEFAULT_FORMAT = value => value instanceof Date ? value.toISOString() : va
  * DateInput is a wrapper around react-datepicker that provides a consistent look and feel with the rest of the Ultraviolet UI.
  * See https://reactdatepicker.com/ for more information.
  */
-const DateInput = _ref36 => {
+const DateInput = _ref42 => {
   let {
     autoFocus = false,
     disabled = false,
@@ -234,7 +264,7 @@ const DateInput = _ref36 => {
     selectsRange,
     className,
     'data-testid': dataTestId
-  } = _ref36;
+  } = _ref42;
   // Linked to: https://github.com/Hacker0x01/react-datepicker/issues/3834
   const ReactDatePicker = DatePicker.default ?? DatePicker;
   const localeCode = (typeof locale === 'string' ? locale : locale?.code) ?? 'en-GB';
@@ -288,14 +318,14 @@ const DateInput = _ref36 => {
         maxDate: maxDate,
         startDate: startDate,
         endDate: endDate,
-        renderCustomHeader: _ref37 => {
+        renderCustomHeader: _ref43 => {
           let {
             date,
             decreaseMonth,
             increaseMonth,
             prevMonthButtonDisabled,
             nextMonthButtonDisabled
-          } = _ref37;
+          } = _ref43;
           return jsxs(Stack, {
             direction: "row",
             alignItems: "center",

package/dist/src/components/GlobalAlert/GlobalAlertLink.js

@@ -0,0 +1,39 @@
+import { useTheme } from '@emotion/react';
+import { Link } from '../Link/index.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const GlobalAlertLink = _ref => {
+  let {
+    children,
+    href,
+    target,
+    download,
+    rel,
+    className,
+    onClick,
+    'aria-label': ariaLabel,
+    oneLine = false,
+    'data-testid': dataTestId
+  } = _ref;
+  const {
+    theme
+  } = useTheme();
+  return jsx(Link, {
+    href: href,
+    target: target,
+    download: download,
+    sentiment: "neutral",
+    prominence: theme === 'light' ? 'stronger' : 'strong',
+    size: "small",
+    variant: "inline",
+    rel: rel,
+    className: className,
+    onClick: onClick,
+    "aria-label": ariaLabel,
+    oneLine: oneLine,
+    "data-testid": dataTestId,
+    children: children
+  });
+};
+
+export { GlobalAlertLink };

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

@@ -0,0 +1,95 @@
+import _styled from '@emotion/styled/base';
+import { useTheme } from '@emotion/react';
+import { useReducer } from 'react';
+import { Button, SIZE_HEIGHT } from '../Button/index.js';
+import { Stack } from '../Stack/index.js';
+import { Text } from '../Text/index.js';
+import { GlobalAlertLink } from './GlobalAlertLink.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+
+const CloseButton = /*#__PURE__*/_styled(Button, {
+  target: "ewvyccp1"
+})("background:none;position:absolute;right:", SIZE_HEIGHT.xsmall, "px;&:hover,&:focus,&:active{background:none;}");
+const Container = /*#__PURE__*/_styled(Stack, {
+  target: "ewvyccp0"
+})("width:100%;height:56px;padding:0 ", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.space['2'];
+}, ";&[data-variant='info']{background-color:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.info.backgroundStrong;
+}, ";}&[data-variant='danger']{background-color:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.danger.backgroundStrong;
+}, ";}&[data-variant='promotional']{background:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.colors.other.gradients.background.aqua;
+}, ";}");
+/**
+ * GlobalAlert is a component that is used to display a global alert message.
+ * It has its own internal state and can be closed by clicking on the close button.
+ */
+const GlobalAlert = _ref5 => {
+  let {
+    children,
+    variant = 'info',
+    onClose,
+    closable = true,
+    buttonText,
+    onClickButton,
+    className,
+    'data-testid': dataTestId
+  } = _ref5;
+  const {
+    theme
+  } = useTheme();
+  const [opened, toggleOpened] = useReducer(value => !value, true);
+  if (!opened) return null;
+  return jsxs(Container, {
+    justifyContent: "center",
+    alignItems: "center",
+    direction: "row",
+    "data-variant": variant,
+    "data-testid": dataTestId,
+    className: className,
+    children: [jsxs(Stack, {
+      gap: 2,
+      direction: "row",
+      justifyContent: "center",
+      alignItems: "center",
+      children: [jsx(Text, {
+        variant: "bodySmall",
+        as: "p",
+        sentiment: "neutral",
+        prominence: theme === 'light' ? 'stronger' : 'strong',
+        children: children
+      }), onClickButton && buttonText ? jsx(Button, {
+        onClick: onClickButton,
+        variant: "filled",
+        sentiment: "neutral",
+        size: "small",
+        children: buttonText
+      }) : null]
+    }), closable ? jsx(CloseButton, {
+      variant: "filled",
+      size: "xsmall",
+      icon: "close",
+      sentiment: "primary",
+      onClick: () => {
+        toggleOpened();
+        onClose?.();
+      }
+    }) : null]
+  });
+};
+GlobalAlert.Link = GlobalAlertLink;
+
+export { GlobalAlert };

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

@@ -12,7 +12,8 @@ const StyledIcon = /*#__PURE__*/_styled(Icon, {
 const PROMINENCES = {
   default: '',
   weak: 'weak',
-  strong: 'strong'
+  strong: 'strong',
+  stronger: 'stronger'
 };
 const ICON_SIZE = 16;
 const BLANK_TARGET_ICON_SIZE = 14;
@@ -74,17 +75,17 @@ const StyledLink = /*#__PURE__*/_styled('a', {
   } = _ref6;
   const definedProminence = capitalize(PROMINENCES[prominence ?? 'default']);
   theme.colors[sentiment];
-  const text = `text${definedProminence}`;
+  const text = `text${definedProminence}Hover`;
   return `
-        color: ${theme.colors[sentiment]?.[text] ?? theme.colors.neutral.text};
-        text-decoration-color: ${theme.colors[sentiment]?.[text] ?? theme.colors.neutral.text};`;
+        color: ${theme.colors[sentiment]?.[text] ?? theme.colors.neutral.textHover};
+        text-decoration-color: ${theme.colors[sentiment]?.[text] ?? theme.colors.neutral.textHover};`;
 }, ";", StyledIcon, "{transform:", _ref7 => {
   let {
     theme,
     iconPosition
   } = _ref7;
   return iconPosition === 'left' ? `translate(${theme.space['0.5']}, 0)` : `translate(-${theme.space['0.5']}, 0)`;
-}, ";}}&:hover::after,&:focus::after{background-color:", _ref8 => {
+}, ";}}&[data-variant='inline']{text-decoration:underline;text-decoration-thickness:1px;}&:hover::after,&:focus::after{background-color:", _ref8 => {
   let {
     theme,
     sentiment
@@ -110,7 +111,8 @@ const Link = /*#__PURE__*/forwardRef((_ref9, ref) => {
     onClick,
     'aria-label': ariaLabel,
     oneLine = false,
-    'data-testid': dataTestId
+    'data-testid': dataTestId,
+    variant = 'standalone'
   } = _ref9;
   const isBlank = target === '_blank';
   const computedRel = rel || (isBlank ? 'noopener noreferrer' : undefined);
@@ -144,6 +146,7 @@ const Link = /*#__PURE__*/forwardRef((_ref9, ref) => {
       "aria-label": ariaLabel,
       oneLine: oneLine,
       "data-testid": dataTestId,
+      "data-variant": variant,
       children: [!isBlank && iconPosition === 'left' ? jsx(StyledIcon, {
         name: "arrow-left",
         size: ICON_SIZE

package/dist/src/components/Popup/helpers.js

@@ -18,6 +18,7 @@ const computePlacement = _ref => {
     childrenStructuredRef,
     popupStructuredRef,
     offsetParentRect,
+    offsetParent,
     popupPortalTarget
   } = _ref;
   const {
@@ -30,9 +31,10 @@ const computePlacement = _ref => {
     left: parentLeft,
     right: parentRight
   } = offsetParentRect;
-  const overloadedChildrenLeft = popupPortalTarget === document.body ? childrenLeft : childrenLeft - parentLeft;
-  const overloadedChildrenTop = popupPortalTarget === document.body ? childrenTop : childrenTop - parentTop;
-  const overloadedChildrenRight = popupPortalTarget === document.body ? childrenRight : childrenRight - parentRight;
+  const isPopupPortalTargetBody = popupPortalTarget === document.body || offsetParent === document.body;
+  const overloadedChildrenLeft = isPopupPortalTargetBody ? childrenLeft : childrenLeft - parentLeft;
+  const overloadedChildrenTop = isPopupPortalTargetBody ? childrenTop : childrenTop - parentTop;
+  const overloadedChildrenRight = isPopupPortalTargetBody ? childrenRight : childrenRight - parentRight;
   const {
     width: popupWidth,
     height: popupHeight
@@ -99,7 +101,8 @@ const computePositions = _ref2 => {
     childrenStructuredRef: childrenRect,
     popupStructuredRef,
     offsetParentRect,
-    popupPortalTarget
+    popupPortalTarget,
+    offsetParent
   }) : placement;
   const {
     top: childrenTop,
@@ -122,7 +125,7 @@ const computePositions = _ref2 => {
   const isPopupPortalTargetBody = popupPortalTarget === document.body || offsetParent === document.body;
 
   // It will get how much scroll is done on the page to compute the position of the popup
-  const scrollTopValue = isPopupPortalTargetBody ? document.documentElement.scrollTop : 0;
+  const scrollTopValue = isPopupPortalTargetBody ? document.documentElement.scrollTop : offsetParent.scrollTop;
 
   // We need to compute the position of the popup based on the parent element in the case the popup is not in the body
   const overloadedChildrenLeft = isPopupPortalTargetBody ? childrenLeft : childrenLeft - parentLeft;

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

@@ -3,6 +3,7 @@ import { Icon } from '@ultraviolet/icons';
 import useClipboard from 'react-use-clipboard';
 import { Button } from '../Button/index.js';
 import { Loader } from '../Loader/index.js';
+import { Text } from '../Text/index.js';
 import { Tooltip } from '../Tooltip/index.js';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 
@@ -69,14 +70,14 @@ const StyledContainer = /*#__PURE__*/_styled('span', {
       border: solid 1px ${theme.colors[sentiment].background};
     `;
 }, ";");
-const StyledTag = /*#__PURE__*/_styled("span", {
+const StyledText = /*#__PURE__*/_styled(Text, {
   target: "el6733p1"
 })(process.env.NODE_ENV === "production" ? {
-  name: "td7tdt",
-  styles: "font-size:12px;font-weight:500;color:inherit;max-width:232px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis"
+  name: "12vzl34",
+  styles: "max-width:232px"
 } : {
-  name: "td7tdt",
-  styles: "font-size:12px;font-weight:500;color:inherit;max-width:232px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis",
+  name: "12vzl34",
+  styles: "max-width:232px",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 const StyledCloseButton = /*#__PURE__*/_styled(Button, {
@@ -101,7 +102,10 @@ const TagInner = _ref6 => {
     children: [icon ? jsx(Icon, {
       name: icon,
       size: 16
-    }) : null, jsx(StyledTag, {
+    }) : null, jsx(StyledText, {
+      as: "span",
+      variant: "caption",
+      oneLine: true,
       "aria-disabled": disabled,
       children: children
     }), onClose && !isLoading ? jsx(StyledCloseButton, {

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

@@ -2,7 +2,20 @@ import _styled from '@emotion/styled/base';
 import { useId, useState, createRef } from 'react';
 import { jsx } from '@emotion/react/jsx-runtime';
 
-const StyledInput = /*#__PURE__*/_styled("input", {
+const SIZE_HEIGHT = {
+  xlarge: 64,
+  large: 48,
+  medium: 40,
+  small: 32
+};
+const SIZE_WIDTH = {
+  xlarge: 56,
+  large: 40,
+  medium: 32,
+  small: 24
+};
+const StyledInput = /*#__PURE__*/_styled('input', {
+  shouldForwardProp: prop => !['inputSize'].includes(prop),
   target: "e1a2bx9q0"
 })("background:", _ref => {
   let {
@@ -15,48 +28,90 @@ const StyledInput = /*#__PURE__*/_styled("input", {
     theme
   } = _ref2;
   return error ? theme.colors.danger.border : theme.colors.neutral.border;
-}, ";font-size:24px;color:", _ref3 => {
+}, ";color:", _ref3 => {
   let {
     'aria-invalid': error,
     theme
   } = _ref3;
   return error ? theme.colors.danger.text : theme.colors.neutral.text;
-}, ";text-align:center;border-radius:", _ref4 => {
+}, ";", _ref4 => {
   let {
+    inputSize,
     theme
   } = _ref4;
-  return theme.radii.default;
-}, ";margin-right:", _ref5 => {
+  if (inputSize === 'small') {
+    return `
+           font-size: ${theme.typography.caption.fontSize};
+           font-weight: ${theme.typography.caption.weight};
+        `;
+  }
+  return `
+           font-size: ${theme.typography.body.fontSize};
+           font-weight: ${theme.typography.body.weight};
+         `;
+}, " text-align:center;border-radius:", _ref5 => {
   let {
     theme
   } = _ref5;
+  return theme.radii.default;
+}, ";margin-right:", _ref6 => {
+  let {
+    theme
+  } = _ref6;
   return theme.space['1'];
-}, ";width:56px;height:64px;outline-style:none;transition:border-color 0.2s ease,box-shadow 0.2s ease;&:hover,&:focus{border-color:", _ref6 => {
+}, ";width:", _ref7 => {
+  let {
+    inputSize
+  } = _ref7;
+  return SIZE_WIDTH[inputSize];
+}, "px;height:", _ref8 => {
+  let {
+    inputSize
+  } = _ref8;
+  return SIZE_HEIGHT[inputSize];
+}, "px;outline-style:none;transition:border-color 0.2s ease,box-shadow 0.2s ease;&:hover,&:focus{border-color:", _ref9 => {
   let {
     'aria-invalid': error,
     theme
-  } = _ref6;
+  } = _ref9;
   return error ? theme.colors.danger.borderHover : theme.colors.primary.borderHover;
-}, ";}&:focus{box-shadow:", _ref7 => {
+}, ";}&:focus{box-shadow:", _ref10 => {
   let {
     'aria-invalid': error,
     theme: {
       shadows
     }
-  } = _ref7;
+  } = _ref10;
   return error ? shadows.focusDanger : shadows.focusPrimary;
-}, ";}&:last-child{margin-right:0;}&::placeholder{color:", _ref8 => {
+}, ";}&:last-child{margin-right:0;}&::placeholder{color:", _ref11 => {
   let {
+    disabled,
     theme
-  } = _ref8;
-  return theme.colors.neutral.textWeak;
-}, ";}");
+  } = _ref11;
+  return disabled ? theme.colors.neutral.textWeakDisabled : theme.colors.neutral.textWeak;
+}, ";}", _ref12 => {
+  let {
+    disabled,
+    theme: {
+      colors
+    }
+  } = _ref12;
+  return disabled && `cursor: default;
+    background-color: ${colors.neutral.backgroundDisabled};
+    border-color: ${colors.neutral.borderDisabled};
+    color: ${colors.neutral.textDisabled};
+
+    &:hover {
+      border: ${colors.neutral.borderDisabled}
+    }
+    `;
+}, ";");
 const DEFAULT_ON_FUNCTION = () => {};
 
 /**
  * Verification code allows you to enter a code in multiple fields (4 by default).
  */
-const VerificationCode = _ref9 => {
+const VerificationCode = _ref13 => {
   let {
     disabled = false,
     className,
@@ -65,6 +120,7 @@ const VerificationCode = _ref9 => {
     initialValue = '',
     inputId,
     inputStyle = '',
+    size = 'large',
     onChange = DEFAULT_ON_FUNCTION,
     onComplete = DEFAULT_ON_FUNCTION,
     placeholder = '',
@@ -72,7 +128,7 @@ const VerificationCode = _ref9 => {
     type = 'number',
     'data-testid': dataTestId,
     'aria-label': ariaLabel = 'Verification code'
-  } = _ref9;
+  } = _ref13;
   const uniqueId = useId();
   const valuesArray = Object.assign(new Array(fields).fill(''), initialValue.substring(0, fields).split(''));
   const [values, setValues] = useState(valuesArray);
@@ -176,6 +232,7 @@ const VerificationCode = _ref9 => {
     children: values.map((value, index) => jsx(StyledInput, {
       css: [inputStyle],
       "aria-invalid": error,
+      inputSize: size,
       type: type === 'number' ? 'tel' : type,
       pattern: type === 'number' ? '[0-9]*' : undefined
       // eslint-disable-next-line react/no-array-index-key

package/dist/src/index.js

@@ -67,3 +67,4 @@ export { VerificationCode } from './components/VerificationCode/index.js';
 export { RadioGroup } from './components/RadioGroup/index.js';
 export { Icon } from '@ultraviolet/icons';
 export { MenuV2 } from './components/MenuV2/index.js';
+export { GlobalAlert } from './components/GlobalAlert/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.26.1",
+  "version": "1.27.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {