@box/blueprint-web 5.31.3

package/lib-esm/primitives/base-inline-notice/base-inline-notice-actions.js

@@ -0,0 +1,55 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { Button } from '../../basics/button/button.js';
+import styles from './base-inline-notice.module.js';
+
+const BaseInlineNoticeActionsComponent = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  return jsx("div", {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.actions, className),
+    children: children
+  });
+});
+const PrimaryAction = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    onClick,
+    ...rest
+  } = props;
+  return jsx(Button, {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.actionButtonPrimary, className),
+    onClick: onClick,
+    variant: "primary",
+    children: children
+  });
+});
+const TertiaryAction = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  return jsx(Button, {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.actionButtonTertiary, className),
+    variant: "tertiary",
+    children: children
+  });
+});
+const BaseInlineNoticeActions = Object.assign(BaseInlineNoticeActionsComponent, {
+  PrimaryAction,
+  TertiaryAction
+});
+
+export { BaseInlineNoticeActions, PrimaryAction, TertiaryAction };

package/lib-esm/primitives/base-inline-notice/base-inline-notice-content-container.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { type BaseInlineNoticeContentContainerProps } from './types';
+/**
+ * Wrapper for the contents of the Inline notice.
+ * This element will help the contents be responsive as needed when resizing the screen.
+ */
+export declare const BaseInlineNoticeContentContainer: import("react").ForwardRefExoticComponent<BaseInlineNoticeContentContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default BaseInlineNoticeContentContainer;

package/lib-esm/primitives/base-inline-notice/base-inline-notice-content-container.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import styles from './base-inline-notice.module.js';
+
+/**
+ * Wrapper for the contents of the Inline notice.
+ * This element will help the contents be responsive as needed when resizing the screen.
+ */
+const BaseInlineNoticeContentContainer = /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  ...rest
+}, forwardedRef) => jsx("div", {
+  ...rest,
+  ref: forwardedRef,
+  className: clsx(styles.contentContainer, className),
+  children: children
+}));
+
+export { BaseInlineNoticeContentContainer, BaseInlineNoticeContentContainer as default };

package/lib-esm/primitives/base-inline-notice/base-inline-notice-content.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type BaseInlineNoticeContentProps } from './types';
+export declare const BaseInlineNoticeContent: import("react").ForwardRefExoticComponent<BaseInlineNoticeContentProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Title: import("react").ForwardRefExoticComponent<BaseInlineNoticeContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<BaseInlineNoticeContentProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export default BaseInlineNoticeContent;

package/lib-esm/primitives/base-inline-notice/base-inline-notice-content.js

@@ -0,0 +1,49 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { Text } from '../../text/text.js';
+import styles from './base-inline-notice.module.js';
+
+const BaseInlineNoticeContentComponent = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    ...rest
+  } = props;
+  return jsx("div", {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.content),
+    children: children
+  });
+});
+const Title = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    ...rest
+  } = props;
+  return jsx("div", {
+    className: clsx(styles.title),
+    children: jsx(Text, {
+      ...rest,
+      as: "h6",
+      color: "textOnLightDefault",
+      variant: "bodyDefaultBold",
+      children: children
+    })
+  });
+});
+const Body = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children
+  } = props;
+  return jsx("div", {
+    ref: forwardedRef,
+    children: children
+  });
+});
+const BaseInlineNoticeContent = Object.assign(BaseInlineNoticeContentComponent, {
+  Title,
+  Body
+});
+
+export { BaseInlineNoticeContent, BaseInlineNoticeContent as default };

package/lib-esm/primitives/base-inline-notice/base-inline-notice-icon.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const BaseInlineNoticeIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+} & {
+    icon: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | null;
+    iconAriaLabel: string;
+}, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/lib-esm/primitives/base-inline-notice/base-inline-notice-icon.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import { IconIconOnLight, Size5 } from '@box/blueprint-web-assets/tokens/tokens';
+import clsx from 'clsx';
+import { forwardRef, createElement } from 'react';
+import styles from './base-inline-notice.module.js';
+
+const BaseInlineNoticeIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    icon,
+    iconAriaLabel,
+    ...rest
+  } = props;
+  if (!icon) {
+    return null;
+  }
+  const iconElement = /*#__PURE__*/createElement(icon, {
+    color: IconIconOnLight,
+    width: Size5,
+    height: Size5,
+    'aria-label': iconAriaLabel
+  });
+  return jsx("span", {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.icon),
+    children: iconElement
+  });
+});
+
+export { BaseInlineNoticeIcon };

package/lib-esm/primitives/base-inline-notice/base-inline-notice.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type BaseInlineNoticeProps } from './types';
+export declare const BaseInlineNotice: import("react").ForwardRefExoticComponent<BaseInlineNoticeProps & import("react").RefAttributes<HTMLDivElement>>;
+export default BaseInlineNotice;

package/lib-esm/primitives/base-inline-notice/base-inline-notice.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './base-inline-notice.module.js';
+
+const BaseInlineNotice = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    backgroundColor,
+    children,
+    className,
+    ...rest
+  } = props;
+  return jsx("div", {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.noticeWrapper, styles[backgroundColor], className),
+    children: children
+  });
+});
+
+export { BaseInlineNotice, BaseInlineNotice as default };

package/lib-esm/primitives/base-inline-notice/base-inline-notice.module.js

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"noticeWrapper":"base-inline-notice-module_noticeWrapper__SUUAq","actions":"base-inline-notice-module_actions__Lvs4i","actionButtonPrimary":"base-inline-notice-module_actionButtonPrimary__SdcrM","actionButtonTertiary":"base-inline-notice-module_actionButtonTertiary__UGD6Z","backgroundYellow":"base-inline-notice-module_backgroundYellow__YVaem","backgroundBlue":"base-inline-notice-module_backgroundBlue__mUD47","backgroundRed":"base-inline-notice-module_backgroundRed__kOwDA","backgroundGreen":"base-inline-notice-module_backgroundGreen__PAq9-","backgroundPurple":"base-inline-notice-module_backgroundPurple__QqhcD","contentContainer":"base-inline-notice-module_contentContainer__yekh0","content":"base-inline-notice-module_content__btRuw","title":"base-inline-notice-module_title__uiL85"};
+
+export { styles as default };

package/lib-esm/primitives/base-inline-notice/index.d.ts

@@ -0,0 +1,73 @@
+/// <reference types="react" />
+export declare const BaseInlineNotice: import("react").ForwardRefExoticComponent<import("./types").BaseInlineNoticeProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Actions: import("react").ForwardRefExoticComponent<import("./types").BaseInlineNoticeActionsProps & import("react").RefAttributes<HTMLDivElement>> & {
+        PrimaryAction: import("react").ForwardRefExoticComponent<(Omit<import("../base-button").BaseButtonInterface & Required<Pick<{
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }, keyof {
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }>> & Omit<{
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }, keyof {
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }> & {
+            children: string;
+            className?: string | undefined;
+        }, "ref"> | Omit<import("../base-button").BaseButtonInterface & Partial<Record<keyof {
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }, never>> & Omit<{
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }, keyof {
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }> & {
+            children: string;
+            className?: string | undefined;
+        }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+        TertiaryAction: import("react").ForwardRefExoticComponent<(Omit<import("../base-button").BaseButtonInterface & Required<Pick<{
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }, keyof {
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }>> & Omit<{
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }, keyof {
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }> & {
+            children: string;
+            className?: string | undefined;
+        }, "ref"> | Omit<import("../base-button").BaseButtonInterface & Partial<Record<keyof {
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }, never>> & Omit<{
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }, keyof {
+            loading?: boolean | undefined;
+            loadingAriaLabel?: string | undefined;
+        }> & {
+            children: string;
+            className?: string | undefined;
+        }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+    };
+    Content: import("react").ForwardRefExoticComponent<import("./types").BaseInlineNoticeContentProps & import("react").RefAttributes<HTMLDivElement>> & {
+        Title: import("react").ForwardRefExoticComponent<import("./types").BaseInlineNoticeContentProps & import("react").RefAttributes<HTMLDivElement>>;
+        Body: import("react").ForwardRefExoticComponent<import("./types").BaseInlineNoticeContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    };
+    ContentContainer: import("react").ForwardRefExoticComponent<import("./types").BaseInlineNoticeContentContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+    Icon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+    } & {
+        icon: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | null;
+        iconAriaLabel: string;
+    }, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+export * from './types';

package/lib-esm/primitives/base-inline-notice/index.js

@@ -0,0 +1,14 @@
+import { BaseInlineNotice as BaseInlineNotice$1 } from './base-inline-notice.js';
+import { BaseInlineNoticeActions } from './base-inline-notice-actions.js';
+import { BaseInlineNoticeContent } from './base-inline-notice-content.js';
+import { BaseInlineNoticeContentContainer } from './base-inline-notice-content-container.js';
+import { BaseInlineNoticeIcon } from './base-inline-notice-icon.js';
+
+const BaseInlineNotice = Object.assign(BaseInlineNotice$1, {
+  Actions: BaseInlineNoticeActions,
+  Content: BaseInlineNoticeContent,
+  ContentContainer: BaseInlineNoticeContentContainer,
+  Icon: BaseInlineNoticeIcon
+});
+
+export { BaseInlineNotice };

package/lib-esm/primitives/base-inline-notice/types.d.ts

@@ -0,0 +1,39 @@
+import { type ComponentPropsWithRef, type FunctionComponent, type HTMLAttributes, type PropsWithChildren, type ReactNode, type SVGProps } from 'react';
+import { type BaseButtonProps } from '../base-button';
+export type BaseInlineNoticeActionsProps = {
+    /** Child button components for inline notice actions */
+    children: ReactNode;
+    /** Optional class name */
+    className?: string;
+};
+export type ButtonProps = BaseButtonProps & {
+    /** Text children for button */
+    children: string;
+    /** Optional class name */
+    className?: string;
+};
+export type BaseInlineNoticeContentProps = {
+    /** Children component of the inline notice content */
+    children: ReactNode;
+};
+export type BaseInlineNoticeIconProps = ComponentPropsWithRef<'span'> & {
+    /** Icon component to render */
+    icon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>> | null;
+    /** Icon aria label for accessibility */
+    iconAriaLabel: string;
+};
+export type BaseInlineNoticeContentContainerProps = {
+    /** Optional class name */
+    className?: string;
+    /** Children within the container */
+    children: ReactNode;
+};
+export type BaseInlineNoticeBackgroundColor = 'backgroundBlue' | 'backgroundYellow' | 'backgroundGreen' | 'backgroundRed' | 'backgroundPurple';
+export interface BaseInlineNoticeProps extends HTMLAttributes<HTMLDivElement> {
+    /** Governs the background color displayed. */
+    backgroundColor: BaseInlineNoticeBackgroundColor;
+    /** The children elements of the base inline component */
+    children: ReactNode;
+    /** Optional class name */
+    className?: string;
+}

package/lib-esm/primitives/calendar/calendar.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type CalendarProps } from './types';
+export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/primitives/calendar/calendar.js

@@ -0,0 +1,67 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChevronLeft, ChevronRight } from '@box/blueprint-web-assets/icons/Fill';
+import { Gray65 } from '@box/blueprint-web-assets/tokens/tokens';
+import { isSameDay, today, getLocalTimeZone } from '@internationalized/date';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { Calendar as Calendar$1, Button, Heading, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell } from 'react-aria-components';
+import styles from './calendar.module.js';
+
+const Calendar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    calendarAriaLabel,
+    previousMonthAriaLabel,
+    nextMonthAriaLabel,
+    ...rest
+  } = props;
+  return jsxs(Calendar$1, {
+    ...rest,
+    ref: forwardedRef,
+    "aria-label": calendarAriaLabel,
+    className: clsx(styles.calendar, className),
+    children: [jsxs("header", {
+      className: styles.calendarHeader,
+      children: [jsx(Button, {
+        "aria-label": previousMonthAriaLabel,
+        className: styles.calendarHeaderButton,
+        slot: "previous",
+        children: jsx(ChevronLeft, {
+          "aria-label": previousMonthAriaLabel,
+          color: Gray65
+        })
+      }), jsx(Heading, {
+        className: styles.calendarHeaderHeading
+      }), jsx(Button, {
+        "aria-label": nextMonthAriaLabel,
+        className: styles.calendarHeaderButton,
+        slot: "next",
+        children: jsx(ChevronRight, {
+          "aria-label": nextMonthAriaLabel,
+          color: Gray65
+        })
+      })]
+    }), jsxs(CalendarGrid, {
+      children: [jsx(CalendarGridHeader, {
+        children: day => jsx(CalendarHeaderCell, {
+          className: styles.calendarHeaderCell,
+          children: day
+        })
+      }), jsx(CalendarGridBody, {
+        children: date => jsx(CalendarCell, {
+          className: clsx(styles.calendarCell, {
+            [styles.today]: isSameDay(date, today(getLocalTimeZone()))
+          }),
+          date: date,
+          children: ({
+            formattedDate
+          }) => jsx("span", {
+            children: formattedDate
+          })
+        })
+      })]
+    })]
+  });
+});
+
+export { Calendar };

package/lib-esm/primitives/calendar/calendar.module.js

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"calendar":"calendar-module_calendar__uhtG4","calendarHeaderCell":"calendar-module_calendarHeaderCell__C8nNn","calendarHeader":"calendar-module_calendarHeader__jofDH","calendarHeaderHeading":"calendar-module_calendarHeaderHeading__J6LiC","calendarHeaderButton":"calendar-module_calendarHeaderButton__yylSs","calendarCell":"calendar-module_calendarCell__5e0x1","today":"calendar-module_today__kIt3D"};
+
+export { styles as default };

package/lib-esm/primitives/calendar/index.d.ts

@@ -0,0 +1,3 @@
+export { Calendar } from './calendar';
+export { parseDate } from './parse-date.util';
+export { type CalendarProps } from './types';

package/lib-esm/primitives/calendar/parse-date.util.d.ts

@@ -0,0 +1,7 @@
+import { type DateValue } from 'react-aria-components';
+/**
+ * Takes string date in format yyyy-MM-dd and returns DateValue
+ *
+ * @param dateString
+ */
+export declare const parseDate: (dateString: string) => DateValue;

package/lib-esm/primitives/calendar/parse-date.util.js

@@ -0,0 +1,10 @@
+import { parseDate as parseDate$1 } from '@internationalized/date';
+
+/**
+ * Takes string date in format yyyy-MM-dd and returns DateValue
+ *
+ * @param dateString
+ */
+const parseDate = dateString => parseDate$1(dateString);
+
+export { parseDate };

package/lib-esm/primitives/calendar/types.d.ts

@@ -0,0 +1,17 @@
+import { type CalendarProps as RACCalendarProps, type DateValue } from 'react-aria-components';
+export interface CalendarBase {
+    /**
+     * Aria label for the calendar component
+     */
+    calendarAriaLabel: string;
+    /**
+     * Aria label for button switching to previous month
+     */
+    previousMonthAriaLabel: string;
+    /**
+     * Aria label for button switching to next month
+     */
+    nextMonthAriaLabel: string;
+}
+export interface CalendarProps extends Omit<RACCalendarProps<DateValue>, 'children'>, CalendarBase {
+}

package/lib-esm/primitives/chips/chip-dropdown-indicator.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ChipDropdownIndicator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<SVGSVGElement>>;

package/lib-esm/primitives/chips/chip-dropdown-indicator.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { Caret } from '@box/blueprint-web-assets/icons/Fill';
+import { Size3 } from '@box/blueprint-web-assets/tokens/tokens';
+import { forwardRef } from 'react';
+
+const ChipDropdownIndicator = /*#__PURE__*/forwardRef((_, forwardedRef) => {
+  return jsx(Caret, {
+    ref: forwardedRef,
+    height: Size3,
+    role: "presentation",
+    width: Size3
+  });
+});
+
+export { ChipDropdownIndicator };

package/lib-esm/primitives/chips/chip-icon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type ChipIconProps } from './types';
+export declare const ChipIcon: React.ForwardRefExoticComponent<ChipIconProps & React.RefAttributes<SVGSVGElement>>;

package/lib-esm/primitives/chips/chip-icon.js

@@ -0,0 +1,18 @@
+import { Size4 } from '@box/blueprint-web-assets/tokens/tokens';
+import React__default, { forwardRef } from 'react';
+
+const ChipIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    icon,
+    className
+  } = props;
+  return /*#__PURE__*/React__default.createElement(icon, {
+    ref: forwardedRef,
+    width: Size4,
+    height: Size4,
+    role: 'presentation',
+    className
+  });
+});
+
+export { ChipIcon };

package/lib-esm/primitives/chips/chip-label.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ChipLabel: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "children"> & {
+    children: string;
+}, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/lib-esm/primitives/chips/chip-label.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './chip.module.js';
+
+const ChipLabel = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    children,
+    ...rest
+  } = props;
+  return jsx("span", {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.labelText, className),
+    "data-text": children,
+    children: children
+  });
+});
+
+export { ChipLabel };

package/lib-esm/primitives/chips/chip-status.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ChipStatus: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & {
+    children: string;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/primitives/chips/chip-status.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './chip.module.js';
+
+const ChipStatus = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    children,
+    ...rest
+  } = props;
+  return jsx("div", {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.chipStatus, className),
+    children: children
+  });
+});
+
+export { ChipStatus };

package/lib-esm/primitives/chips/chip.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
+export declare const Chip: import("react").ForwardRefExoticComponent<ToggleGroup.ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib-esm/primitives/chips/chip.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './chip.module.js';
+
+const Chip = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    children,
+    ...rest
+  } = props;
+  return jsx(ToggleGroup.Item, {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.chip, className),
+    children: children
+  });
+});
+
+export { Chip };

package/lib-esm/primitives/chips/chip.module.js

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"chip":"chip-module_chip__waZKx","labelText":"chip-module_labelText__7-0bs","chipStatus":"chip-module_chipStatus__XjVpj","chipButton":"chip-module_chipButton__b2MHo","singleSelectChip":"chip-module_singleSelectChip__2Qir6","multiSelectChip":"chip-module_multiSelectChip__efKsB","chipsGroup":"chip-module_chipsGroup__Jmzlo"};
+
+export { styles as default };

package/lib-esm/primitives/chips/chips-group.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/** Provides a container for Chips, this component handles keyboard navigation and chips selection state  */
+export declare const ChipsGroup: import("react").ForwardRefExoticComponent<(Omit<import("./types").ChipsGroupSingleProps & import("react").RefAttributes<HTMLDivElement> & {
+    name: string;
+}, "ref"> | Omit<import("./types").ChipsGroupMultipleProps & import("react").RefAttributes<HTMLDivElement> & {
+    name: string;
+}, "ref">) & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/primitives/chips/chips-group.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './chip.module.js';
+
+/** Provides a container for Chips, this component handles keyboard navigation and chips selection state  */
+const ChipsGroup = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    children,
+    ...rest
+  } = props;
+  return jsx(ToggleGroup.Root, {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx([styles.chipsGroup, className]),
+    children: children
+  });
+});
+
+export { ChipsGroup };

package/lib-esm/primitives/chips/filter-chip/filter-chip-button.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { type ChipProps } from '../types';
+export type FilterChipButtonProps = ChipProps;
+/**
+ * Chip component to be used inside FilterChip.Group.
+ * This chip button should be used to link to another context, e.g. opening a side panel.
+ */
+export declare const FilterChipButton: import("react").ForwardRefExoticComponent<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;