@ultraviolet/ui 1.26.2 → 1.27.0

package/dist/index.d.ts

@@ -1506,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';
@@ -1525,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.
@@ -2839,6 +2841,7 @@ type VerificationCodeProps = {
     initialValue?: string;
     inputId?: string;
     inputStyle?: string;
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
     /**
      * Triggered when a field change
      */
@@ -2859,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 = {
@@ -2926,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;
@@ -2969,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/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/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.2",
+  "version": "1.27.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {