@kaizen/components 1.67.11 → 1.67.13

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../types/OverrideClassName";
 export type PaginationProps = {
     currentPage: number;
     pageCount: number;

package/dist/types/Pagination/subcomponents/DirectionalLink/DirectionalLink.d.ts

@@ -1,4 +1,4 @@
-import { GenericProps } from "~components/__actions__/Button/v2/GenericButton";
+import { GenericProps } from "../../../__actions__/Button/v2/GenericButton";
 export type DirectionalLinkProps = {
     label: string;
     disabled?: boolean;

package/dist/types/Pagination/subcomponents/PaginationLink/PaginationLink.d.ts

@@ -1,4 +1,4 @@
-import { GenericProps } from "~components/__actions__/Button/v2/GenericButton";
+import { GenericProps } from "../../../__actions__/Button/v2/GenericButton";
 export type PaginationLinkProps = GenericProps & {
     pageNumber: number;
     isActive?: boolean;

package/dist/types/Popover/Popover.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../types/OverrideClassName";
 import { Placement, PopoverSize, PopoverVariant } from "./types";
 export type PopoverProps = {
     children: React.ReactNode;

package/dist/types/ProgressBar/ProgressBar.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../types/OverrideClassName";
 export type ProgressBarMood = {
     /**
      * @deprecated Use `color` prop instead

package/dist/types/Radio/Radio/Radio.d.ts

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../types/OverrideClassName";
 export type RadioProps = OverrideClassName<Omit<InputHTMLAttributes<HTMLInputElement>, "id" | "name" | "value" | "checked" | "type">> & {
     /** Required to ensure the Radio always gets an ID to match a label when composed. */
     id: string;

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

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../types/OverrideClassName";
 export type RadioGroupProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
     children?: React.ReactNode;
     labelText: string | React.ReactNode;

package/dist/types/RichTextEditor/EditableRichTextContent/EditableRichTextContent.d.ts

@@ -1,5 +1,5 @@
 import { MouseEvent, HTMLAttributes } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../types/OverrideClassName";
 import { RichTextContentProps } from "../RichTextContent";
 import { EditorContentArray } from "../types";
 export type EditableRichTextContentProps = {

package/dist/types/RichTextEditor/RichTextContent/RichTextContent.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../types/OverrideClassName";
 import { EditorContentArray } from "../types";
 export type RichTextContentProps = {
     content: EditorContentArray;

package/dist/types/RichTextEditor/RichTextEditor/RichTextEditor.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes, ReactNode } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../types/OverrideClassName";
 import { ToolbarItems, EditorContentArray, EditorRows } from "../types";
 import { ProseMirrorState } from "../utils/prosemirror";
 type BaseRichTextEditorProps = {

package/dist/types/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/ToggleIconButton.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../../../types/OverrideClassName";
 import { ToggleIconButtonMoods } from "./types";
 export type ToggleIconButtonProps = {
     icon: JSX.Element;

package/dist/types/RichTextEditor/RichTextEditor/subcomponents/Toolbar/Toolbar.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../../../types/OverrideClassName";
 export type ToolbarProps = {
     children: React.ReactNode;
     "aria-controls": string;

package/dist/types/SearchField/SearchField.d.ts

@@ -1,4 +1,4 @@
-import { InputSearchProps } from "~components/Input/InputSearch";
+import { InputSearchProps } from "../Input/InputSearch";
 export type SearchFieldProps = Omit<InputSearchProps, "id"> & {
     id?: string;
     labelText: string;

package/dist/types/Skirt/Skirt.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { ContentProps } from "~components/Content";
+import { ContentProps } from "../Content";
 type Variant = "default" | "education";
 export type SkirtProps = {
     children: React.ReactNode;

package/dist/types/Skirt/subcomponents/SkirtCard/SkirtCard.d.ts

@@ -1,4 +1,4 @@
-import { CardProps } from "~components/Card";
+import { CardProps } from "../../../Card";
 export type SkirtCardProps = CardProps;
 export declare const SkirtCard: {
     (props: SkirtCardProps): JSX.Element;

package/dist/types/Slider/Slider.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { InputRangeProps } from "~components/Input/InputRange";
+import { InputRangeProps } from "../Input/InputRange";
 export type SliderFieldProps = {
     id?: string;
     labelText: ReactNode;

package/dist/types/SplitButton/SplitButton.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react";
-import { DataAttributes } from "~components/types/DataAttributes";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { DataAttributes } from "../types/DataAttributes";
+import { OverrideClassName } from "../types/OverrideClassName";
 import { ActionButtonProps } from "./subcomponents/ActionButton";
 import { DropdownButtonProps } from "./subcomponents/DropdownButton";
 export type SplitButtonProps = {

package/dist/types/SplitButton/subcomponents/BaseButton/BaseButton.d.ts

@@ -1,5 +1,5 @@
 import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../../types/OverrideClassName";
 type AnchorAttributes = AnchorHTMLAttributes<HTMLAnchorElement>;
 type ButtonAttributes = ButtonHTMLAttributes<HTMLButtonElement>;
 type AnchorButtonAttributes = AnchorAttributes & ButtonAttributes;

package/dist/types/Table/Table.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes, ReactElement } from "react";
-import { CheckedStatus } from "~components/Checkbox";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { CheckedStatus } from "../Checkbox";
+import { OverrideClassName } from "../types/OverrideClassName";
 export type TableContainerProps = {
     children?: React.ReactNode;
     /** @default "compact" */

package/dist/types/Tabs/subcomponents/Tab.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode, SyntheticEvent } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../types/OverrideClassName";
 export type TabProps = {
     /**
      * Gets injected by TabList, no need to specify yourself

package/dist/types/Tabs/subcomponents/TabList.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../types/OverrideClassName";
 export type TabListProps = {
     /**
      * Accessible name for the set of tabs

package/dist/types/Tabs/subcomponents/TabPanel.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../types/OverrideClassName";
 export type TabPanelProps = {
     children: ReactNode;
 } & OverrideClassName<HTMLAttributes<HTMLDivElement>>;

package/dist/types/Tabs/subcomponents/TabPanels.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../types/OverrideClassName";
 export type TabPanelsProps = {
     children: ReactNode;
 } & OverrideClassName<HTMLAttributes<HTMLDivElement>>;

package/dist/types/Tag/Tag.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { AvatarProps } from "~components/Avatar";
+import { AvatarProps } from "../Avatar";
 import { TagVariants } from "./types";
 export type TagWithAvatarProps = Omit<DefaultTagProps, "variant"> & {
     variant: "profile";

package/dist/types/Text/Text.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../types/OverrideClassName";
 export type TextVariants = "intro-lede" | "body" | "small" | "extra-small";
 export type AllowedTextTags = "pre" | "p" | "div" | "span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label";
 export type AllowedTextColors = "dark" | "dark-reduced-opacity" | "white" | "white-reduced-opacity" | "positive" | "negative";

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

@@ -1,5 +1,5 @@
 import React, { TextareaHTMLAttributes } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../types/OverrideClassName";
 export type TextAreaProps = {
     textAreaRef?: React.RefObject<HTMLTextAreaElement>;
     status?: "default" | "error" | "caution";

package/dist/types/TextAreaField/TextAreaField.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { TextAreaProps } from "~components/TextArea";
+import { TextAreaProps } from "../TextArea";
 export type TextAreaFieldProps = {
     labelText: string | React.ReactNode;
     inline?: boolean;

package/dist/types/TextField/TextField.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { InputProps } from "~components/Input";
+import { InputProps } from "../Input";
 type OmittedInputProps = "startIconAdornment" | "endIconAdornment" | "ariaDescribedBy" | "ariaLabel";
 export type TextFieldProps = {
     /**

package/dist/types/Tile/TileGrid/TileGrid.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactElement } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../types/OverrideClassName";
 import { InformationTileProps } from "../InformationTile";
 import { MultiActionTileProps } from "../MultiActionTile";
 type TileProps = InformationTileProps | MultiActionTileProps;

package/dist/types/Tile/subcomponents/GenericTile/GenericTile.d.ts

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from "react";
-import { AllowedHeadingTags } from "~components/Heading";
-import { GenericButtonProps } from "~components/__actions__/Button/v1/GenericButton";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { AllowedHeadingTags } from "../../../Heading";
+import { GenericButtonProps } from "../../../__actions__/Button/v1/GenericButton";
+import { OverrideClassName } from "../../../types/OverrideClassName";
 export type TileAction = GenericButtonProps;
 export type TileInformation = {
     text: string;

package/dist/types/TimeField/TimeField.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { TimeFieldStateOptions } from "@react-stately/datepicker";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../types/OverrideClassName";
 import { StatusType, ValueType } from "./types";
 type OmittedTimeFieldProps = "errorMessage" | "validationState" | "value" | "onChange" | "label" | "hideTimeZone";
 export type TimeFieldProps = {

package/dist/types/TitleBlockZen/subcomponents/MobileActions.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from "~components/__actions__/v2";
+import { ButtonProps } from "../../__actions__/v2";
 import { DefaultActionProps, PrimaryActionProps, SecondaryActionsProps, TitleBlockMenuItemProps } from "../types";
 export type MobileActionsProps = {
     primaryAction?: PrimaryActionProps;

package/dist/types/TitleBlockZen/subcomponents/Toolbar.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { MenuProps, ButtonProps } from "~components/__actions__/v2";
+import { MenuProps, ButtonProps } from "../../__actions__/v2";
 type ToolbarProps = {
     items?: Array<{
         key: string;

package/dist/types/TitleBlockZen/types.d.ts

@@ -1,6 +1,6 @@
-import { CompanyAvatarProps, GenericAvatarProps } from "~components/Avatar";
-import { Select } from "~components/Select";
-import { ButtonProps, CustomButtonProps, MenuItemProps } from "~components/__actions__/v2";
+import { CompanyAvatarProps, GenericAvatarProps } from "../Avatar";
+import { Select } from "../Select";
+import { ButtonProps, CustomButtonProps, MenuItemProps } from "../__actions__/v2";
 import { NavigationTabProps } from "./subcomponents/NavigationTabs";
 /**
  * @param TitleBlockProps ### Accessing internal types of TitleBlockProps

package/dist/types/ToggleSwitch/ToggleSwitch/ToggleSwitch.d.ts

@@ -1,5 +1,5 @@
 import React, { InputHTMLAttributes } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../types/OverrideClassName";
 export type ToggledStatus = "on" | "off";
 export type ToggleSwitchProps = {
     toggledStatus?: ToggledStatus;

package/dist/types/VisuallyHidden/VisuallyHidden.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, HTMLAttributes } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../types/OverrideClassName";
 export type VisuallyHiddenProps = {
     children: ReactNode;
 } & OverrideClassName<HTMLAttributes<HTMLDivElement>>;

package/dist/types/Well/Well.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../types/OverrideClassName";
 import { WellBorderStyleType, WellVariantType, WellColors } from "./types";
 export type WellProps = {
     children?: React.ReactNode;

package/dist/types/Workflow/Workflow.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../types/OverrideClassName";
 import { FooterProps, HeaderProps } from "./subcomponents";
 export type WorkflowProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & FooterProps & Pick<HeaderProps, "workflowName" | "statusTag" | "headerActions">;
 export declare const Workflow: {

package/dist/types/Workflow/subcomponents/Footer/Footer.d.ts

@@ -1,4 +1,4 @@
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../../types/OverrideClassName";
 import { ProgressStepperProps, FooterRootProps } from "./components";
 export type FooterProps = {
     /** An action to return to a previous step */

package/dist/types/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../../../../types/OverrideClassName";
 export type FooterActionsProps = {
     actionType?: "Previous" | "Next";
     action?: JSX.Element;

package/dist/types/Workflow/subcomponents/Footer/components/Root/Root.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../../../../types/OverrideClassName";
 export type FooterRootProps = OverrideClassName<HTMLAttributes<HTMLHeadingElement>>;
 export declare const FooterRoot: {
     ({ children, classNameOverride, ...restProps }: FooterRootProps): JSX.Element;

package/dist/types/Workflow/subcomponents/Header/components/Actions/Actions.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../../../../types/OverrideClassName";
 export type WorkflowActionsProps = {
     /**
      * Header actions will render in order of the array.

package/dist/types/Workflow/subcomponents/Header/components/Branding/Branding.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from "react";
-import { BrandProps } from "~components/Brand";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { BrandProps } from "../../../../../Brand";
+import { OverrideClassName } from "../../../../../types/OverrideClassName";
 export type WorflowBrandingProps = {
     variant?: BrandProps["variant"];
     alt: string;

package/dist/types/Workflow/subcomponents/Header/components/Root/Root.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../../../../types/OverrideClassName";
 export type HeaderRootProps = OverrideClassName<HTMLAttributes<HTMLHeadingElement>>;
 export declare const HeaderRoot: {
     ({ children, classNameOverride, ...restProps }: HeaderRootProps): JSX.Element;

package/dist/types/Workflow/subcomponents/Header/components/Titles/Titles.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../../../../types/OverrideClassName";
 export type WorkflowTitlesProps = {
     workflowName: string;
     stepName: string;

package/dist/types/Workflow/subcomponents/Main/Main.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../../types/OverrideClassName";
 export type WorkflowMainProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
     children: ReactNode;
 };

package/dist/types/Workflow/subcomponents/Wrapper/Wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../../types/OverrideClassName";
 export type WorkflowWrapperProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
     children: ReactNode;
 };

package/dist/types/__actions__/Menu/v1/Menu.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { ButtonProps } from "~components/__actions__/v2";
+import { ButtonProps } from "../../v2";
 import { StatelessMenuProps } from "./subcomponents/StatelessMenu";
 type ButtonPropsWithOptionalAria = ButtonProps & {
     "aria-haspopup"?: boolean;

package/dist/types/__actions__/Menu/v1/subcomponents/MenuHeading/MenuHeading.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { HeadingProps } from "~components/Heading";
+import { HeadingProps } from "../../../../../Heading";
 export type MenuHeadingProps = {
     children: React.ReactNode;
 } & Partial<HeadingProps>;

package/dist/types/__actions__/Menu/v1/subcomponents/MenuList/MenuList.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../../../../types/OverrideClassName";
 export type MenuListProps = {
     heading?: JSX.Element;
     children: React.ReactNode;

package/dist/types/__future__/Icon/Icon.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { StringSuggestions } from "~components/types/StringSuggestions";
+import { StringSuggestions } from "../../types/StringSuggestions";
 import { IconNames } from "./types";
 type PresentationalIcon = {
     isPresentational: true;

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

@@ -2,7 +2,7 @@ import React from "react";
 import { UseFloatingReturn } from "@floating-ui/react-dom";
 import { SelectProps as AriaSelectProps } from "@react-stately/select";
 import { Key } from "@react-types/shared";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../types/OverrideClassName";
 import { SelectPopoverContentsProps, SelectToggleProps } from "./subcomponents";
 import { SelectItem, SelectOption } from "./types";
 type OmittedAriaSelectProps = "children" | "items";

package/dist/types/__future__/Select/subcomponents/ListBox/ListBox.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, ReactNode } from "react";
 import { AriaListBoxOptions } from "@react-aria/listbox";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../../../types/OverrideClassName";
 import { SelectOption, SelectItem } from "../../types";
 export type SingleListBoxProps<Option extends SelectOption> = OverrideClassName<HTMLAttributes<HTMLUListElement>> & {
     children: ReactNode;

package/dist/types/__future__/Select/subcomponents/Option/Option.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../../../types/OverrideClassName";
 import { SelectOption, SelectOptionNode } from "../../types";
 export type OptionProps<Option extends SelectOption = SelectOption> = {
     item: SelectOptionNode<Option>;

package/dist/types/__future__/Select/subcomponents/Overlay/Overlay.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../../../types/OverrideClassName";
 import { SelectOption } from "../../types";
 export type OverlayProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
     children: React.ReactNode;

package/dist/types/__future__/Select/subcomponents/SelectToggle/SelectToggle.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react";
 import { DOMAttributes, FocusableElement } from "@react-types/shared";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../../../types/OverrideClassName";
 export type SelectToggleProps = {
     label: React.ReactNode;
     labelProps: DOMAttributes<FocusableElement>;

package/dist/types/__future__/Tag/RemovableTag/subcomponents/RemoveButton.d.ts

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../../../types/OverrideClassName";
 export type RemoveButtonBaseProps = {
     ariaLabel: string;
     onClick: () => void;

package/dist/types/__future__/Tag/Tag/Tag.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode, HTMLAttributes } from "react";
-import { OverrideClassName } from "~components/types/OverrideClassName";
+import { OverrideClassName } from "../../../types/OverrideClassName";
 import { TagColors } from "./types";
 export type TagProps = {
     children: ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.67.11",
+  "version": "1.67.13",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -118,8 +118,8 @@
     "svgo": "^3.3.2",
     "tslib": "^2.8.0",
     "tsx": "^4.19.2",
-    "@kaizen/design-tokens": "10.8.1",
-    "@kaizen/package-bundler": "1.1.10"
+    "@kaizen/design-tokens": "10.8.2",
+    "@kaizen/package-bundler": "1.1.11"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",

package/src/Pagination/Pagination.module.scss

@@ -51,15 +51,3 @@
     }
   }
 }
-
-// Truncate indicator
-.truncateIndicatorWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 36px;
-  width: 36px;
-  background-color: transparent;
-  color: rgba($color-purple-800-rgb, 0.7);
-  margin: 0 5px;
-}

package/src/Pagination/Pagination.spec.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { mockMatchMedia } from "~components/utils/useMediaQueries.spec"
 import { Pagination } from "./Pagination"
 
 const user = userEvent.setup()
@@ -15,6 +16,10 @@ const defaultProps = {
 }
 
 describe("<Pagination />", () => {
+  beforeEach(() => {
+    mockMatchMedia()
+  })
+
   it("calls onPageChange when clicking page number", async () => {
     const onPageChange = vi.fn()
 

package/src/Pagination/Pagination.tsx

@@ -1,6 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
 import { OverrideClassName } from "~components/types/OverrideClassName"
+import { useMediaQueries } from "~components/utils"
 import { DirectionalLink } from "./subcomponents/DirectionalLink"
 import { PaginationLink } from "./subcomponents/PaginationLink"
 import { TruncateIndicator } from "./subcomponents/TruncateIndicator"
@@ -32,6 +33,8 @@ export const Pagination = ({
   classNameOverride,
   ...restProps
 }: PaginationProps): JSX.Element => {
+  const { queries } = useMediaQueries()
+
   // Click event for all pagination buttons (next, prev, and the actual numbers)
   const handleButtonClick = (newPage: number | PageAction): void => {
     if (newPage === "prev") {
@@ -55,12 +58,12 @@ export const Pagination = ({
     />
   )
 
-  const pagination = (): JSX.Element[] => {
+  const pagination = (
+    boundaryPagesRange: number,
+    siblingPagesRange: number
+  ): JSX.Element[] => {
     const items: JSX.Element[] = []
 
-    const boundaryPagesRange = 1
-    const siblingPagesRange = 1
-
     // truncateSize is 1 now but could be 0 if we add the ability to hide it.
     const truncateSize = 1
 
@@ -150,7 +153,9 @@ export const Pagination = ({
         onClick={(): void => handleButtonClick("prev")}
       />
 
-      <div className={styles.pagesIndicatorWrapper}>{pagination()}</div>
+      <div className={styles.pagesIndicatorWrapper}>
+        {pagination(1, queries.isSmall ? 0 : 1)}
+      </div>
 
       <DirectionalLink
         label={ariaLabelNextPage}

package/src/Pagination/subcomponents/PaginationLink/PaginationLink.module.scss

@@ -9,7 +9,7 @@
   width: 40px;
   height: 40px;
   min-height: auto;
-  margin: 0 $spacing-xs;
+  margin: 0 var(--spacing-2);
   border-radius: 50%;
 
   &:not(:disabled) {