@arc-ui/components 11.5.0 → 11.7.0

package/dist/types/components/Box/Box.d.ts

@@ -0,0 +1,36 @@
+import React, { FC } from "react";
+import { SurfaceBackgroundColor, SurfacePadding } from "../Surface/Surface";
+/**
+ * Use `Box` as a simple way to group bespoke content and interactive elements together.
+ */
+export declare const Box: FC<BoxProps>;
+export interface BoxProps {
+    /**
+     * Contents of the Box.
+     */
+    children: React.ReactNode;
+    /**
+     * Set Box to fill parent element.
+     */
+    isFullHeight?: boolean;
+    /**
+     * Add rounded corners to the box.
+     */
+    isBorderRadius?: boolean;
+    /**
+     * The border width of the box.
+     */
+    borderWidth?: "thin" | "medium";
+    /**
+     * Box shadow for the box.
+     */
+    elevationLevel?: "1" | "2";
+    /**
+     * Padding for the box.
+     */
+    padding?: SurfacePadding;
+    /**
+     * Background color for the box.
+     */
+    surface?: SurfaceBackgroundColor;
+}

package/dist/types/components/Box/index.d.ts

@@ -0,0 +1 @@
+export { Box, BoxProps } from "./Box";

package/dist/types/components/Filter/Filter.d.ts

@@ -0,0 +1,38 @@
+import { FC, ReactNode } from "react";
+import { FilterControl } from "./FilterControls/FilterControl/FilterControl";
+import { FilterControls, FilterControlsProps } from "./FilterControls/FilterControls";
+import { FilterItem } from "./FilterItems/FilterItem/FilterItem";
+import { FilterItems, FilterItemsProps } from "./FilterItems/FilterItems";
+/** use `Filter` for interactive elements that filter and categorise page content. */
+export declare const Filter: FC<FilterProps> & {
+    Item: typeof FilterItem;
+    Items: typeof FilterItems;
+    Control: typeof FilterControl;
+    Controls: typeof FilterControls;
+};
+export interface FilterProps {
+    /**
+     * Contents of the `<Filter />` Should contain `<Filter.Item />`
+     */
+    children?: ReactNode;
+    /**
+     * onChange handler called everytime `<FilterControl />` is pressed
+     */
+    onChange?: (selectedControls: string[]) => void;
+    /**
+     * Detmine how to display the content within `<Filter.Items />`. Default is `grid`
+     */
+    displayType?: FilterItemsProps["displayType"];
+    /**
+     * Detmine how to align <Filter.Controls />. Default `center`
+     */
+    controlsAlignment?: FilterControlsProps["controlsAlignment"];
+    /**
+     * Detmine if the `<Filter.Control />` have to partially match or match all
+     */
+    logicType?: "AND" | "OR";
+    /**
+     * Detmine what is display when no items match the filtering criteria
+     */
+    error?: ReactNode;
+}

package/dist/types/components/Filter/FilterControls/FilterControl/FilterControl.d.ts

@@ -0,0 +1,16 @@
+import { FC, ReactNode } from "react";
+export declare const FilterControl: FC<FilterControlProps>;
+export interface FilterControlProps {
+    /**
+     * Name of the `<FilterControl />`
+     */
+    children: ReactNode;
+    /**
+     * Determine if the `<FilterControl />` is selected
+     */
+    isSelected?: boolean;
+    /**
+     * onClick handler
+     */
+    onClick?: () => void;
+}

package/dist/types/components/Filter/FilterControls/FilterControls.d.ts

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from "react";
+export declare const FilterControls: FC<FilterControlsProps>;
+export interface FilterControlsProps {
+    /**
+     * Contents of the `<FilterControls />` Should contain `<FilterControl />`
+     */
+    children: ReactNode;
+    /**
+     * Detmine how to align <FilterControl /> with in <FilterControls />. Default `center`
+     */
+    controlsAlignment?: "left" | "right" | "center";
+}

package/dist/types/components/Filter/FilterItems/FilterItem/FilterItem.d.ts

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from "react";
+export declare const FilterItem: FC<FilterItemProps>;
+export interface FilterItemProps {
+    /**
+     * Content to display within `Filter.Item`
+     */
+    children: ReactNode;
+    /**
+     * Attach Tags to content provided within `Filter.Item`
+     */
+    tags: string[];
+}

package/dist/types/components/Filter/FilterItems/FilterItems.d.ts

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from "react";
+export declare const FilterItems: FC<FilterItemsProps>;
+export interface FilterItemsProps {
+    /**
+     * Render children of `<Filter.Items />`. This should only use `<Filter.Item />`
+     */
+    children: ReactNode;
+    /**
+     * Determine the display style of `<Filter.Item />`
+     */
+    displayType?: "grid" | "list";
+}

package/dist/types/components/Filter/index.d.ts

@@ -0,0 +1 @@
+export { Filter } from "./Filter";

package/dist/types/components/FormControl/FormControl.d.ts

@@ -63,6 +63,10 @@ export interface FormControlProps {
      * onClick handler for FormControlDisclosure
      */
     onClickDisclosure?: () => void;
+    /**
+     * Optional additional information for the FormControl.
+     */
+    supplementaryInfo?: React.ReactNode;
     /**
      * Position helper text under label. This is set to `false` by default.
      */

package/dist/types/components/Image/index.d.ts

@@ -1 +1 @@
-export { Image } from "./Image";
+export { Image, loadingOptions } from "./Image";

package/dist/types/components/MediaCard/MediaCard.d.ts

@@ -0,0 +1,57 @@
+import { loadingOptions } from "../Image";
+import React, { FC } from "react";
+import { BoxProps } from "../Box";
+/**
+ * Use `MediaCard` to contain content and an image about a single subject.
+ */
+export declare const MediaCard: FC<MediaCardProps>;
+export interface MediaCardProps {
+    /**
+     * Content of the MediaCard.
+     */
+    children: React.ReactNode;
+    /**
+     * Footer Content of the MediaCard.
+     */
+    cardFooter?: React.ReactNode;
+    /**
+     * Add rounded corners to the MediaCard.
+     */
+    isBorderRadius?: BoxProps["isBorderRadius"];
+    /**
+     * The border width of the MediaCard.
+     */
+    borderWidth?: BoxProps["borderWidth"];
+    /**
+     * Box shadow for the MediaCard.
+     */
+    elevationLevel?: BoxProps["elevationLevel"];
+    /**
+     * Set MediaCard to fill parent element.
+     */
+    isFullHeight?: boolean;
+    /**
+     * Background color for the MediaCard.
+     */
+    surface?: BoxProps["surface"];
+    /**
+     * image src for the MediaCard.
+     */
+    imageSrc: string;
+    /**
+     * image alt for the MediaCard.
+     */
+    imageAlt?: string;
+    /**
+     * Loading behaviour of the MediaCard.
+     */
+    imageLoading?: typeof loadingOptions[number];
+    /**
+     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes) attribute. Required if srcSet is defined.
+     */
+    imageSizes?: string;
+    /**
+     * A comma-separated list indicating a set of possible image sources for the user agent to use for different screen sizes. Same format as [srcSet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes), i.e. `my-image-200.png 200w, my-image-200.png 200w`.
+     */
+    imageSrcSet?: string;
+}

package/dist/types/components/MediaCard/index.d.ts

@@ -0,0 +1 @@
+export { MediaCard } from "./MediaCard";

package/dist/types/components/Modal/Modal.stories-wip.d.ts

@@ -0,0 +1,9 @@
+import { Meta, Story } from "@storybook/react";
+import { ModalProps } from "./Modal";
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Default: Story<ModalProps>;
+export declare const CloseProgrammatically: Story<ModalProps>;
+export declare const OpenProgrammatically: Story<ModalProps>;
+export declare const TallContent: Story<ModalProps>;
+export declare const HiddenDescription: Story<ModalProps>;

package/dist/types/components/Pagination/Pagination.d.ts

@@ -0,0 +1,19 @@
+import { FC } from "react";
+/**
+ * Use `Pagination` to navigate multiple pages.
+ */
+export declare const Pagination: FC<PaginationProps>;
+export interface PaginationProps {
+    /**
+     * Number of pages for the pagination
+     */
+    pageCount: number;
+    /**
+     * Default page to be selected on render. If not provided defaults to 1.
+     */
+    defaultSelectedPage?: number;
+    /**
+     * Function to call when the page changes
+     */
+    onPageChange: (selectedPage: number) => void;
+}

package/dist/types/components/Pagination/index.d.ts

@@ -0,0 +1 @@
+export { Pagination } from "./Pagination";

package/dist/types/components/PaginationSimple/PaginationSimple.d.ts

@@ -0,0 +1,27 @@
+import { FC } from "react";
+/**
+ * Use `PaginationSimple` to navigate multiple pages.
+ */
+export declare const PaginationSimple: FC<PaginationSimpleProps>;
+export interface PaginationSimpleProps {
+    /**
+     * hides prev button if true.
+     */
+    hidePrev?: boolean;
+    /**
+     * hides next button if true.
+     */
+    hideNext?: boolean;
+    /**
+     * if true buttons will hug either edge of the parent element
+     */
+    isFluid?: boolean;
+    /**
+     * Function to call when previous page is selected
+     */
+    onPrevPage: () => void;
+    /**
+     * Function to call when next page is selected
+     */
+    onNextPage: () => void;
+}

package/dist/types/components/PaginationSimple/index.d.ts

@@ -0,0 +1 @@
+export { PaginationSimple } from "./PaginationSimple";

package/dist/types/components/ProgressStepper/ProgressStepper.d.ts

@@ -0,0 +1,28 @@
+import { FC, ReactNode } from "react";
+import { ProgressStepperItem } from "./ProgressStepperItem/ProgressStepperItem";
+/** Use `ProgressStepper` to illustrate the progress of a specific task within a page, by displaying a step-by-step progress through the user journey. This is commonly used in multi-step processes or wizards.  */
+export declare const ProgressStepper: FC<ProgressStepperProps> & {
+    Item: typeof ProgressStepperItem;
+};
+export interface ProgressStepperProps {
+    /**
+     * Children of `<ProgressStepper />` should only contain `<ProgressStepper.Item />`
+     */
+    children?: ReactNode;
+    /**
+     * Determine a direction for `<ProgressStepper.Item />`
+     */
+    direction?: "horizontal" | "vertical";
+    /**
+     * Determine the size for `<ProgressStepper.Item />`
+     */
+    size?: "small" | "large";
+    /**
+     * Determine if `<ProgressStepper.Item />` should be Fluid. Only appliciable for `horizontal direction.`
+     */
+    isFluid?: boolean;
+    /**
+     * Determine if `<ProgressStepper.Item />` should be able to expand. This only is appliciable when direction is set to vertical
+     */
+    isExpandable?: boolean;
+}

package/dist/types/components/ProgressStepper/ProgressStepperItem/ProgressStepperItem.d.ts

@@ -0,0 +1,62 @@
+import { FC, ReactNode } from "react";
+import { ProgressStatus } from "../progressStatus";
+export declare const ProgressStepperItem: FC<ProgressStepperItemProps>;
+export interface ProgressStepperItemProps {
+    /**
+     * Determine a title for `<ProgressStepper.Item />`
+     */
+    title: string;
+    /**
+     * Determine a title for `<ProgressStepper.Item />`
+     */
+    titleHref?: string;
+    /**
+     * Text to override `linkTitle` with additional, more precise information
+     * specifically for screen reader users.
+     */
+    ariaLabel?: string;
+    /**
+     * Execute a function on title click `<ProgressStepper.Item />`
+     */
+    onClick?: () => void;
+    /**
+     * Determine a sub title for `<ProgressStepper.Item />`
+     */
+    subTitle?: string;
+    /**
+     * Determine a direction for `<ProgressStepper.Item />`
+     */
+    direction?: "horizontal" | "vertical";
+    /**
+     * Determine the position of the step `<ProgressStepper.Item />`
+     */
+    position?: "first" | "middle" | "last";
+    /**
+     * Determine a status for `<ProgressStepper.Item />`
+     */
+    status?: ProgressStatus;
+    /**
+     * Determine the size for `<ProgressStepper.Item />`
+     */
+    size?: "small" | "large";
+    /**
+     * Determine if `<ProgressStepper.Item /> should be Fluid`
+     */
+    isFluid?: boolean;
+    /**
+     * Determine the context `<ProgressStepper.Item /> should b`
+     */
+    previousStep?: ProgressStatus;
+    /**
+     * Determine if `<ProgressStepper.Item /> should have expandable content`
+     */
+    isExpandable?: boolean;
+    /**
+     * Determine what content to display in `<ProgressStepper.Item />. To use this option isExpandable must be `true``
+     */
+    stepContent?: ReactNode;
+    /**
+     * Determine if `stepContent` is hidden
+     */
+    isStepContentHidden?: boolean;
+}

package/dist/types/components/ProgressStepper/index.d.ts

@@ -0,0 +1 @@
+export { ProgressStepper } from "./ProgressStepper";

package/dist/types/components/ProgressStepper/progressStatus.d.ts

@@ -0,0 +1 @@
+export declare type ProgressStatus = "completed" | "current" | "warning" | "error" | "todo";

package/dist/types/components/RadioGroup/RadioGroup.d.ts

@@ -8,7 +8,7 @@ declare type EventType = React.ChangeEvent<HTMLInputElement>;
 export declare const RadioGroup: FC<RadioGroupProps> & {
     RadioButton: typeof RadioButton;
 };
-export interface RadioGroupProps extends Omit<FormControlProps, "children" | "elementType" | "errorMessage" | "htmlFor" | "labelSize" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helperUnderLabel"> {
+export interface RadioGroupProps extends Omit<FormControlProps, "children" | "elementType" | "errorMessage" | "htmlFor" | "labelSize" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helperUnderLabel" | "supplementaryInfo"> {
     /**
      * Contents of the RadioGroup. Should only contain `RadioGroup.RadioButton`
      */

package/dist/types/components/ScrollToTop/ScrollToTop.d.ts

@@ -0,0 +1,24 @@
+import { FC } from "react";
+/**
+ * Use `ScrollToTop` to allow the user to scroll to the top of the page by clicking a button.
+ */
+export declare const ScrollToTop: FC<ScrollToTopProps>;
+export interface ScrollToTopProps {
+    /**
+     * If true, the button will stick to the bottom right corner of the screen.
+     */
+    isFixed?: boolean;
+    /**
+     * Sets when the scroll button should appear. `always` will show the button all the time.
+     * `afterScroll` will show the button when the user has stopped scrolling and have passed the fold.
+     */
+    appear?: "always" | "afterScroll";
+    /**
+     * Z-index for the button. Used to fine tune the overlapping of other page elements.
+     */
+    zIndex?: number;
+    /**
+     * Button fill.
+     */
+    fill?: "solid" | "outlined";
+}

package/dist/types/components/ScrollToTop/index.d.ts

@@ -0,0 +1 @@
+export { ScrollToTop } from "./ScrollToTop";

package/dist/types/components/Select/Select.d.ts

@@ -2,7 +2,7 @@ import React, { FocusEvent } from "react";
 import { FormControlProps } from "../FormControl/FormControl";
 /** Use `Select` to choose from a dropdown list of options. */
 export declare const Select: React.FC<SelectProps>;
-export interface SelectProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "id" | "helperUnderLabel"> {
+export interface SelectProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "id" | "helperUnderLabel" | "supplementaryInfo"> {
     name: string;
     label: string;
     placeholder: string;

package/dist/types/components/Surface/Surface.d.ts

@@ -10,12 +10,13 @@ export declare const Surface: FC<SurfaceProps>;
 export declare const backgrounds: readonly ["black", "brand", "brand-flat", "dark", "darker", "coral", "turquoise", "light", "lighter", "white"];
 export declare const backgroundsBT: readonly ["black", "brand", "brand-flat", "dark", "darker", "coral", "turquoise", "light", "lighter", "white"];
 export declare type SurfacePadding = "8" | "12" | "16" | "24" | "32" | "48" | "64";
+export declare type SurfaceBackgroundColor = "black" | "brand" | "brand-flat" | "dark" | "darker" | "coral" | "turquoise" | "light" | "lighter" | "white";
 export interface SurfaceProps extends HTMLAttributes<HTMLElement> {
     /**
      * Background colour of the Surface. Contents will change colour to meet
      * accessibility requirements.
      */
-    background?: typeof backgrounds[number];
+    background?: SurfaceBackgroundColor;
     /**
      * Content to display on the Surface.
      */

package/dist/types/components/Surface/index.d.ts

@@ -1 +1 @@
-export { Surface, SurfaceContext, backgrounds, backgroundsBT } from "./Surface";
+export { Surface, SurfaceContext, backgrounds, backgroundsBT, SurfacePadding, SurfaceBackgroundColor } from "./Surface";

package/dist/types/components/Switch/Switch.d.ts

@@ -3,7 +3,7 @@ import { SwitchProps as RadixSwitchProps } from "@radix-ui/react-switch";
 import { FormControlProps } from "../FormControl/FormControl";
 /** Use `Switch` to toggle between checked and not checked. */
 export declare const Switch: FC<SwitchProps>;
-export interface SwitchProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helper"> {
+export interface SwitchProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helper" | "supplementaryInfo"> {
     /**
      * Hide Label above toggle?
      */

package/dist/types/components/TextArea/TextArea.d.ts

@@ -0,0 +1,60 @@
+import React from "react";
+import { FormControlProps } from "../FormControl/FormControl";
+declare type EventType = React.ChangeEvent<HTMLTextAreaElement>;
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export interface TextAreaProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel"> {
+    /**
+     * Uncontrolled default value of the TextArea. If the TextArea is controlled
+     * via `value`/`onChange`, `defaultValue` will be ignored.
+     */
+    defaultValue?: string;
+    /**
+     * ID for the TextArea.
+     */
+    id: string;
+    /**
+     * Should the control be disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Should the control be read-only?
+     */
+    isReadOnly?: boolean;
+    /**
+     * Should the control be required?
+     */
+    isRequired?: boolean;
+    /**
+     * Maximum number of characters.
+     */
+    maxLength?: number;
+    /**
+     * Shows the current character count and maxLength. Ignored if maxLength is undefined.
+     */
+    showCharacterCount?: boolean;
+    /**
+     * Name of the input.
+     */
+    name?: string;
+    /**
+     * `none` will prevent any resizing.
+     * `manual` will allow the user to resize the TextArea.
+     * `auto` will resize the text area as needed when the user types.
+     */
+    resize?: "none" | "manual" | "auto";
+    /**
+     * Function to call when the TextArea loses focus.
+     */
+    onBlur?: (e: EventType) => void;
+    /**
+     * Callback function commonly used to update the TextArea's controlled
+     * `value`, for example `e => setValue(e.target.value)`.
+     */
+    onChange?: (e: EventType) => void;
+    /**
+     * Current value of the TextArea. Must be controlled via an
+     * `onChange` callback function. Otherwise, use `defaultValue` (or `isReadOnly`).
+     */
+    value?: string;
+}
+export {};

package/dist/types/components/TextArea/index.d.ts

@@ -0,0 +1 @@
+export { TextArea } from "./TextArea";

package/dist/types/components/TextInput/TextInput.d.ts

@@ -5,7 +5,7 @@ declare type EventType = React.ChangeEvent<HTMLInputElement>;
  * Use `TextInput` to allow custom user text entry with a keyboard.
  */
 export declare const TextInput: FC<TextInputProps>;
-export interface TextInputProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel"> {
+export interface TextInputProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel" | "supplementaryInfo"> {
     /**
      * Uncontrolled default value of the TextInput. If the TextInput is controlled
      * via `value`/`onChange`, `defaultValue` will be ignored.

package/dist/types/components/index.d.ts

@@ -11,6 +11,7 @@ export { Curve } from "./Curve";
 export { Disclosure } from "./Disclosure";
 export { Elevation } from "./Elevation";
 export { FormControl } from "./FormControl";
+export { Filter } from "./Filter";
 export { Group } from "./Group";
 export { Heading } from "./Heading";
 export { Icon } from "./Icon";
@@ -30,6 +31,7 @@ export { Badge } from "./Badge";
 export { Tag } from "./Tag";
 export { Text } from "./Text";
 export { TextInput } from "./TextInput";
+export { TextArea } from "./TextArea";
 export { Truncate } from "./Truncate";
 export { VerticalSpace } from "./VerticalSpace";
 export { VisuallyHidden } from "./VisuallyHidden";

package/dist/types/hooks/use-pagination.d.ts

@@ -0,0 +1 @@
+export declare const usePagination: (pageCount: number, selectedPage: number) => string[];

package/dist/types/styles.d.ts

@@ -5,6 +5,7 @@ import "./components/Base/Base.css";
 import "./components/BrandLogo/BrandLogo.css";
 import "./components/Breadcrumbs/Breadcrumbs.css";
 import "./components/Card/Card.css";
+import "./components/Box/Box.css";
 import "./components/Button/Button.css";
 import "./components/Checkbox/Checkbox.css";
 import "./components/Clock/Clock.css";
@@ -13,15 +14,22 @@ import "./components/Columns/Columns.offsets.css";
 import "./components/Disclosure/Disclosure.css";
 import "./components/DisclosureMini/DisclosureMini.css";
 import "./components/Elevation/Elevation.css";
+import "./components/Filter/Filter.css";
 import "./components/FormControl/FormControl.css";
 import "./components/Group/Group.css";
 import "./components/Heading/Heading.css";
 import "./components/Icon/Icon.css";
 import "./components/Image/Image.css";
 import "./components/Markup/Markup.css";
+import "./components/MediaCard/MediaCard.css";
+import "./components/Modal/Modal.css";
+import "./components/Pagination/Pagination.css";
+import "./components/PaginationSimple/PaginationSimple.css";
 import "./components/Poster/Poster.css";
+import "./components/ProgressBar/ProgressBar.css";
 import "./components/RadioGroup/RadioGroup.css";
 import "./components/Rule/Rule.css";
+import "./components/ScrollToTop/ScrollToTop.css";
 import "./components/Section/Section.css";
 import "./components/Select/Select.css";
 import "./components/SiteFooter/SiteFooter.css";
@@ -29,6 +37,7 @@ import "./components/SiteHeader/SiteHeader.css";
 import "./components/Surface/Surface.css";
 import "./components/Tag/Tag.css";
 import "./components/Text/Text.css";
+import "./components/TextArea/TextArea.css";
 import "./components/TextInput/TextInput.css";
 import "./components/Truncate/Truncate.css";
 import "./components/UniversalHeader/UniversalHeader.css";
@@ -62,3 +71,4 @@ import "./components/UniversalHeader/UniversalHeader.bt.css";
 import "./components/Switch/Switch.bt.css";
 import "./components/Modal/Modal.css";
 import "./components/ProgressBar/ProgressBar.css";
+import "./components/ProgressStepper/ProgressStepper.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arc-ui/components",
-  "version": "11.5.0",
+  "version": "11.7.0",
   "homepage": "https://ui.digital-ent-int.bt.com",
   "author": "BT Enterprise Digital UI Team <ui-digital-ent-int@bt.com>",
   "main": "./dist/index.js",
@@ -32,9 +32,9 @@
     "@radix-ui/react-switch": "^1.0.1"
   },
   "devDependencies": {
-    "@arc-ui/fonts": "^11.5.0",
-    "@arc-ui/icons": "^11.5.0",
-    "@arc-ui/tokens": "^11.5.0",
+    "@arc-ui/fonts": "^11.7.0",
+    "@arc-ui/icons": "^11.7.0",
+    "@arc-ui/tokens": "^11.7.0",
     "@babel/core": "^7.14.3",
     "@babel/helper-define-map": "^7.14.3",
     "@storybook/addon-essentials": "^6.3.6",