@snack-uikit/chips 0.16.3 → 0.16.4-preview-71543426.0

package/dist/esm/components/ChipChoice/styles.module.css

@@ -0,0 +1,203 @@
+.label,
+.value{
+  display:inline-flex;
+  align-items:center;
+}
+
+.choiceChip{
+  cursor:pointer;
+  position:relative;
+  display:inline-flex;
+  align-items:center;
+  box-sizing:border-box;
+  width:-moz-max-content;
+  width:max-content;
+  min-width:-moz-max-content;
+  min-width:max-content;
+  margin:0;
+  padding:0;
+  text-decoration:none;
+  text-transform:none;
+  border-style:solid;
+  outline:0;
+  outline-offset:0;
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
+}
+.choiceChip .spinner{
+  display:inline-flex;
+}
+.choiceChip .icon{
+  display:inline-flex;
+}
+.choiceChip .icon svg{
+  width:var(--size-icon-container-s, 24px) !important;
+  height:var(--size-icon-container-s, 24px) !important;
+}
+.choiceChip .labelLayout{
+  display:inline-flex;
+  align-items:center;
+}
+.choiceChip[data-size=xs]{
+  height:var(--size-chips-xs, 24px);
+  padding-left:var(--space-chips-container-padding-xs, 3px);
+  padding-right:var(--space-chips-container-padding-xs, 3px);
+  border-radius:var(--radius-chips-xs, 12px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=xs] .label{
+  font-family:var(--light-label-s-font-family, SB Sans Interface);
+  font-weight:var(--light-label-s-font-weight, Regular);
+  line-height:var(--light-label-s-line-height, 14px);
+  font-size:var(--light-label-s-font-size, 11px);
+  letter-spacing:var(--light-label-s-letter-spacing, 0px);
+  paragraph-spacing:var(--light-label-s-paragraph-spacing, 6.05px);
+}
+.choiceChip[data-size=xs] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-xs, 4px);
+  padding-right:var(--space-chips-label-layout-padding-xs, 4px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip[data-size=s]{
+  height:var(--size-chips-s, 32px);
+  padding-left:var(--space-chips-container-padding-s, 3px);
+  padding-right:var(--space-chips-container-padding-s, 3px);
+  border-radius:var(--radius-chips-s, 16px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=s] .label{
+  font-family:var(--light-label-m-font-family, SB Sans Interface);
+  font-weight:var(--light-label-m-font-weight, Regular);
+  line-height:var(--light-label-m-line-height, 16px);
+  font-size:var(--light-label-m-font-size, 12px);
+  letter-spacing:var(--light-label-m-letter-spacing, 0px);
+  paragraph-spacing:var(--light-label-m-paragraph-spacing, 6.6px);
+}
+.choiceChip[data-size=s] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-s, 4px);
+  padding-right:var(--space-chips-label-layout-padding-s, 4px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip[data-size=m]{
+  height:var(--size-chips-m, 40px);
+  padding-left:var(--space-chips-container-padding-m, 7px);
+  padding-right:var(--space-chips-container-padding-m, 7px);
+  border-radius:var(--radius-chips-m, 20px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=m] .label{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.choiceChip[data-size=m] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-m, 8px);
+  padding-right:var(--space-chips-label-layout-padding-m, 8px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip[data-size=l]{
+  height:var(--size-chips-l, 48px);
+  padding-left:var(--space-chips-container-padding-l, 11px);
+  padding-right:var(--space-chips-container-padding-l, 11px);
+  border-radius:var(--radius-chips-l, 24px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip[data-size=l] .label{
+  font-family:var(--light-label-l-font-family, SB Sans Interface);
+  font-weight:var(--light-label-l-font-weight, Regular);
+  line-height:var(--light-label-l-line-height, 20px);
+  font-size:var(--light-label-l-font-size, 14px);
+  letter-spacing:var(--light-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--light-label-l-paragraph-spacing, 7.7px);
+}
+.choiceChip[data-size=l] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-l, 12px);
+  padding-right:var(--space-chips-label-layout-padding-l, 12px);
+  gap:var(--space-chips-label-layout-gap, 2px);
+}
+.choiceChip .label,
+.choiceChip .value{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.choiceChip .icon{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+.choiceChip[data-size=xs] .value{
+  font-family:var(--sans-label-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-s-font-weight, Semibold);
+  line-height:var(--sans-label-s-line-height, 14px);
+  font-size:var(--sans-label-s-font-size, 11px);
+  letter-spacing:var(--sans-label-s-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
+}
+.choiceChip[data-size=s] .value{
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.choiceChip[data-size=m] .value{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.choiceChip[data-size=l] .value{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.choiceChip:hover, .choiceChip:active, .choiceChip:focus-visible{
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
+}
+.choiceChip:hover .label, .choiceChip:active .label, .choiceChip:focus-visible .label{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.choiceChip:hover .value, .choiceChip:active .value, .choiceChip:focus-visible .value{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+.choiceChip:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-color:var(--sys-available-complementary, #1c1c24);
+  outline-offset:var(--spacing-state-focus-offset, 2px);
+}
+.choiceChip[data-disabled]{
+  cursor:not-allowed;
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+}
+.choiceChip[data-disabled] .label,
+.choiceChip[data-disabled] .value{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+.choiceChip[data-loading]{
+  cursor:progress;
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-activated, #bec2cf);
+}
+.choiceChip[data-loading] true .spinner{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+.choiceChip[data-loading] .label,
+.choiceChip[data-loading] .value{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.triggerClassName{
+  --offset:var(--space-drop-list-drop-offset, 4px);
+}

package/dist/esm/components/ChipChoice/types.d.ts

@@ -0,0 +1,76 @@
+import { MouseEventHandler, ReactNode } from 'react';
+import { DropdownProps } from '@snack-uikit/dropdown';
+import { BaseItemProps, DroplistProps, GroupItemProps, GroupSelectItemProps, ItemContentProps, ItemId, NextListItemProps, SelectionMultipleState, SelectionSingleState } from '@snack-uikit/list';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { BaseChipProps, Size } from '../../types';
+export type AnyType = any;
+export type ContentRenderProps = Omit<ItemContentProps, 'option' | 'disabled'>;
+export type FilterOption<T extends ContentRenderProps = ContentRenderProps> = BaseOption<T> | AccordionOption<T> | GroupOption<T> | GroupSelectOption<T> | NestListOption<T>;
+export type BaseOption<T extends ContentRenderProps = ContentRenderProps> = Omit<BaseItemProps, 'content' | 'id'> & {
+    value: ItemId;
+    label: ItemId;
+    contentRenderProps?: T;
+};
+export type AccordionOption<T extends ContentRenderProps = ContentRenderProps> = Omit<BaseOption<T>, 'switch' | 'inactive' | 'value'> & {
+    id?: ItemId;
+    type: 'collapse';
+    options: FilterOption<T>[];
+};
+export type GroupOption<T extends ContentRenderProps = ContentRenderProps> = Omit<GroupItemProps, 'items'> & {
+    options: FilterOption<T>[];
+};
+export type GroupSelectOption<T extends ContentRenderProps = ContentRenderProps> = Omit<GroupSelectItemProps, 'items'> & {
+    options: FilterOption<T>[];
+};
+export type NestListOption<T extends ContentRenderProps = ContentRenderProps> = Omit<NextListItemProps, 'items' | 'content'> & {
+    label: ItemId;
+    contentRenderProps?: T;
+    options: FilterOption<T>[];
+};
+export type ChipChoiceCommonProps = WithSupportProps<Partial<BaseChipProps> & {
+    /** Размер */
+    size?: Size;
+    /** Колбек обработки клика */
+    onClick?: MouseEventHandler<HTMLButtonElement | HTMLDivElement>;
+    /** Отображение кнопки очистки значения @default true*/
+    showClearButton?: boolean;
+    /** Расположение выпадающего меню */
+    placement?: DropdownProps['placement'];
+    /**
+     * Стратегия управления шириной контейнера поповера
+     * <br> - `auto` - соответствует ширине контента,
+     * <br> - `gte` - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире,
+     * <br> - `eq` - Equal, строго равен ширине таргета.
+     * @default gte
+     */
+    widthStrategy?: DropdownProps['widthStrategy'];
+    dropDownClassName?: string;
+}>;
+export type ChipChoiceSelectCommonProps<T extends ContentRenderProps = ContentRenderProps> = ChipChoiceCommonProps & {
+    options: FilterOption<T>[];
+    contentRender?(option: {
+        label: ItemId;
+        value?: ItemId;
+        contentRenderProps?: T;
+    }): ReactNode;
+    filterFn?(option: {
+        label: ItemId;
+        value?: ItemId;
+        contentRenderProps?: T;
+    }): boolean;
+    searchable?: boolean;
+} & Pick<DroplistProps, 'selection' | 'scrollRef' | 'scrollContainerRef' | 'noDataState' | 'footer' | 'footerActiveElementsRefs' | 'dataError' | 'errorDataState' | 'dataFiltered' | 'noResultsState' | 'loading'>;
+export type ChipChoiceSingleProps<T extends ContentRenderProps = ContentRenderProps> = ChipChoiceSelectCommonProps<T> & Omit<SelectionSingleState, 'mode'> & {
+    /** Массив опций */
+    options: FilterOption<T>[];
+    /** Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label */
+    valueRender?(option?: BaseOption<T>): ReactNode;
+};
+export type ChipChoiceMultipleProps<T extends ContentRenderProps = ContentRenderProps> = ChipChoiceSelectCommonProps<T> & Omit<SelectionMultipleState, 'mode'> & {
+    /** Массив опций */
+    options: FilterOption<T>[];
+    /** Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label */
+    valueRender?(option?: BaseOption<T>[]): ReactNode;
+    /** Поведение строки поиска при выборе опции из списка */
+    resetSearchOnOptionSelection?: boolean;
+};

package/dist/esm/components/ChipChoice/utils/index.js

@@ -0,0 +1,2 @@
+export * from './typeGuards';
+export * from './utils';

package/dist/esm/components/ChipChoice/utils/options.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { ItemId, ItemProps } from '@snack-uikit/list';
+import { ContentRenderProps, FilterOption } from '../types';
+export declare function transformOptionsToItems<T extends ContentRenderProps = ContentRenderProps>(options: FilterOption<T>[], contentRender?: (option: {
+    label: ItemId;
+    value?: ItemId;
+    contentRenderProps?: T;
+    disabled?: boolean;
+}) => ReactNode): ItemProps[];

package/dist/esm/components/ChipChoice/utils/typeGuards.d.ts

@@ -0,0 +1,6 @@
+import { AccordionOption, AnyType, BaseOption, ContentRenderProps, GroupOption, GroupSelectOption, NestListOption } from '../types';
+export declare function isBaseOption<T extends ContentRenderProps = ContentRenderProps>(option: AnyType): option is BaseOption<T>;
+export declare function isAccordionOption<T extends ContentRenderProps = ContentRenderProps>(option: AnyType): option is AccordionOption<T>;
+export declare function isNextListOption<T extends ContentRenderProps = ContentRenderProps>(option: AnyType): option is NestListOption<T>;
+export declare function isGroupOption<T extends ContentRenderProps = ContentRenderProps>(option: AnyType): option is GroupOption<T>;
+export declare function isGroupSelectOption<T extends ContentRenderProps = ContentRenderProps>(option: AnyType): option is GroupSelectOption<T>;

package/dist/esm/components/ChipChoice/utils/utils.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { ItemId } from '@snack-uikit/list';
+import { ContentRenderProps, FilterOption } from '../types';
+export type FlattenOption<T extends ContentRenderProps = ContentRenderProps> = {
+    value: ItemId;
+    label: ItemId;
+    contentRenderProps?: T;
+    disabled?: boolean;
+    hidden?: boolean;
+    afterContent?: ReactNode;
+    beforeContent?: ReactNode;
+};
+type KindFlattenOptionsProps<T extends ContentRenderProps = ContentRenderProps> = {
+    options: FilterOption<T>[];
+};
+export declare function kindFlattenOptions<T extends ContentRenderProps = ContentRenderProps>({ options, }: KindFlattenOptionsProps<T>): {
+    flattenOptions: Record<string, FlattenOption<T>>;
+};
+export {};

package/dist/esm/components/ChipChoiceRow/ChipChoiceRow.d.ts

@@ -0,0 +1,22 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+import { ChipChoiceProps, ChipChoiceRowSize, OmitBetter } from './types';
+export type FiltersState = Record<string, unknown>;
+export type ChipChoiceRowProps<TState extends FiltersState> = WithSupportProps<{
+    /** Состояние фильтров */
+    value?: TState;
+    /** Начальное состояние фильтров */
+    defaultValue?: Partial<TState>;
+    /** Колбек изменения состояния фильтров */
+    onChange?(filters: TState): void;
+    /** Массив чипов */
+    filters: OmitBetter<ChipChoiceProps, 'onChange' | 'value' | 'size' | 'defaultValue'>[];
+    /** Размер @default 's' */
+    size?: ChipChoiceRowSize;
+    /** CSS-класс */
+    className?: string;
+    /** Скрыть/показать кнопку очиски @default true */
+    showClearAllButton?: boolean;
+    /** Текст кнопки очистки @default 'Clear all' */
+    clearAllButtonLabel?: string;
+}>;
+export declare function ChipChoiceRow<TState extends FiltersState>({ filters, onChange, showClearAllButton, clearAllButtonLabel: clearAllButtonLabelProp, className, value, defaultValue, size, ...rest }: ChipChoiceRowProps<TState>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ChipChoiceRow/components/ForwardedChipChoice.d.ts

@@ -0,0 +1,2 @@
+import { ChipChoiceProps } from '../types';
+export declare function ForwardedChipChoice(props: ChipChoiceProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ChipChoiceRow/components/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const MAP_CHIP_TYPE_TO_COMPONENT: {
+    single: typeof import("../../ChipChoice/components").ChipChoiceSingle;
+    multiple: typeof import("../../ChipChoice/components").ChipChoiceMultiple;
+    date: typeof import("../../ChipChoice/components").ChipChoiceDate;
+    "date-range": typeof import("../../ChipChoice/components").ChipChoiceDateRange;
+    custom: typeof import("../../ChipChoice/components").ChipChoiceCustom;
+};

package/dist/esm/components/ChipChoiceRow/components/index.js

@@ -0,0 +1 @@
+export * from './ForwardedChipChoice';

package/dist/esm/components/ChipChoiceRow/constants.d.ts

@@ -0,0 +1,12 @@
+import { ButtonFunctionProps } from '@snack-uikit/button';
+export declare const CHIP_CHOICE_ROW_SIZE: {
+    readonly Xs: "xs";
+    readonly S: "s";
+    readonly M: "m";
+};
+export declare const MAP_ROW_SIZE_TO_CHOICE_SIZE: {
+    xs: "xs";
+    s: "s";
+    m: "m";
+};
+export declare const MAP_ROW_SIZE_TO_BUTTON_SIZE: Record<string, ButtonFunctionProps['size']>;

package/dist/esm/components/ChipChoiceRow/index.js

@@ -0,0 +1 @@
+export * from './ChipChoiceRow';

package/dist/esm/components/ChipChoiceRow/styles.module.css

@@ -0,0 +1,6 @@
+.chipChoiceRow{
+  counter-axis-spacing:var(--space-chips-filter-row-gap, 4px);
+  gap:var(--space-chips-filter-row-gap, 4px);
+  display:flex;
+  flex-wrap:wrap;
+}

package/dist/esm/components/ChipChoiceRow/types.d.ts

@@ -0,0 +1,29 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { ChipChoiceCustomProps } from '../ChipChoice/components';
+import { ChipChoiceDateProps } from '../ChipChoice/components/ChipChoiceDate';
+import { ChipChoiceDateRangeProps } from '../ChipChoice/components/ChipChoiceDateRange';
+import { CHIP_CHOICE_TYPE } from '../ChipChoice/constants';
+import { ChipChoiceMultipleProps, ChipChoiceSingleProps } from '../ChipChoice/types';
+import { CHIP_CHOICE_ROW_SIZE } from './constants';
+export type ChipChoiceRowSize = ValueOf<typeof CHIP_CHOICE_ROW_SIZE>;
+type ChipChoiceMultipleType = {
+    type: typeof CHIP_CHOICE_TYPE.Multiple;
+} & ChipChoiceMultipleProps;
+type ChipChoiceSingleType = {
+    type: typeof CHIP_CHOICE_TYPE.Single;
+} & ChipChoiceSingleProps;
+type ChipChoiceDateType = {
+    type: typeof CHIP_CHOICE_TYPE.Date;
+} & ChipChoiceDateProps;
+type ChipChoiceDateRangeType = {
+    type: typeof CHIP_CHOICE_TYPE.DateRange;
+} & ChipChoiceDateRangeProps;
+type ChipChoiceCustomType = {
+    type: typeof CHIP_CHOICE_TYPE.Custom;
+} & ChipChoiceCustomProps;
+export type ChipChoiceProps = {
+    id: string;
+} & (ChipChoiceMultipleType | ChipChoiceSingleType | ChipChoiceDateType | ChipChoiceDateRangeType | ChipChoiceCustomType);
+export type OmitBetter<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
+export type FilterValue = Parameters<ChipChoiceProps['onChange']>[number];
+export {};

package/dist/esm/components/ChipToggle/ChipToggle.d.ts

@@ -0,0 +1,13 @@
+import { ChangeEvent } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { BaseChipProps, Size } from '../../types';
+export type ChipToggleProps = WithSupportProps<BaseChipProps & {
+    /** Отмечен ли компонент */
+    checked: boolean;
+    /** Размер */
+    size?: Size;
+    /** Колбек смены значения */
+    onChange(checked: boolean, e: ChangeEvent<HTMLInputElement>): void;
+}>;
+/** Чип с состоянием выбран/не выбран */
+export declare function ChipToggle({ icon, size, label, checked, disabled, loading, onChange, className, tabIndex, ...rest }: ChipToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ChipToggle/index.js

@@ -0,0 +1 @@
+export * from './ChipToggle';

package/dist/esm/components/ChipToggle/styles.module.css

@@ -0,0 +1,219 @@
+.toggleChipContent{
+  cursor:pointer;
+  position:relative;
+  display:inline-flex;
+  align-items:center;
+  box-sizing:border-box;
+  width:-moz-max-content;
+  width:max-content;
+  min-width:-moz-max-content;
+  min-width:max-content;
+  margin:0;
+  padding:0;
+  text-decoration:none;
+  text-transform:none;
+  border-style:solid;
+  outline:0;
+  outline-offset:0;
+  color:var(--sys-neutral-text-support, #6d707f);
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
+}
+.toggleChipContent .spinner{
+  display:inline-flex;
+}
+
+.toggleChipInput{
+  pointer-events:none;
+  position:absolute;
+  top:0;
+  left:0;
+  width:0;
+  height:0;
+  opacity:0;
+}
+.toggleChipInput:focus-visible + .toggleChipContent{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-color:var(--sys-available-complementary, #1c1c24);
+  outline-offset:var(--spacing-state-focus-offset, 2px);
+  color:var(--sys-neutral-text-main, #41424e);
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
+}
+
+.toggleChip{
+  position:relative;
+  margin:0;
+  padding:0;
+  border:none;
+  outline:0;
+  outline-offset:0;
+}
+.toggleChip .icon{
+  display:inline-flex;
+}
+.toggleChip .icon svg{
+  width:var(--size-icon-container-s, 24px) !important;
+  height:var(--size-icon-container-s, 24px) !important;
+}
+.toggleChip .labelLayout{
+  display:inline-flex;
+  align-items:center;
+}
+.toggleChip[data-size=xs] .label{
+  font-family:var(--sans-label-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-s-font-weight, Semibold);
+  line-height:var(--sans-label-s-line-height, 14px);
+  font-size:var(--sans-label-s-font-size, 11px);
+  letter-spacing:var(--sans-label-s-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
+}
+.toggleChip[data-size=xs] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-xs, 4px);
+  padding-right:var(--space-chips-label-layout-padding-xs, 4px);
+}
+.toggleChip[data-size=xs] .toggleChipContent{
+  height:var(--size-chips-xs, 24px);
+  padding-left:var(--space-chips-container-padding-xs, 3px);
+  padding-right:var(--space-chips-container-padding-xs, 3px);
+  border-radius:var(--radius-chips-xs, 12px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.toggleChip[data-size=s] .label{
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.toggleChip[data-size=s] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-s, 4px);
+  padding-right:var(--space-chips-label-layout-padding-s, 4px);
+}
+.toggleChip[data-size=s] .toggleChipContent{
+  height:var(--size-chips-s, 32px);
+  padding-left:var(--space-chips-container-padding-s, 3px);
+  padding-right:var(--space-chips-container-padding-s, 3px);
+  border-radius:var(--radius-chips-s, 16px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.toggleChip[data-size=m] .label{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.toggleChip[data-size=m] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-m, 8px);
+  padding-right:var(--space-chips-label-layout-padding-m, 8px);
+}
+.toggleChip[data-size=m] .toggleChipContent{
+  height:var(--size-chips-m, 40px);
+  padding-left:var(--space-chips-container-padding-m, 7px);
+  padding-right:var(--space-chips-container-padding-m, 7px);
+  border-radius:var(--radius-chips-m, 20px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.toggleChip[data-size=l] .label{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.toggleChip[data-size=l] .labelLayout{
+  padding-left:var(--space-chips-label-layout-padding-l, 12px);
+  padding-right:var(--space-chips-label-layout-padding-l, 12px);
+}
+.toggleChip[data-size=l] .toggleChipContent{
+  height:var(--size-chips-l, 48px);
+  padding-left:var(--space-chips-container-padding-l, 11px);
+  padding-right:var(--space-chips-container-padding-l, 11px);
+  border-radius:var(--radius-chips-l, 24px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.toggleChip .icon{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.toggleChip:hover .toggleChipContent{
+  color:var(--sys-neutral-text-main, #41424e);
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
+}
+.toggleChip:active .toggleChipContent{
+  color:var(--sys-neutral-text-main, #41424e);
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-activated, #bec2cf);
+}
+.toggleChip[data-loading] .toggleChipContent{
+  cursor:progress;
+}
+.toggleChip[data-loading][data-variant=label-only] .label{
+  opacity:var(--opacity-a0, 0);
+}
+.toggleChip[data-loading][data-variant=label-only] .spinner{
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+.toggleChip[data-loading] .toggleChipContent{
+  color:var(--sys-neutral-text-main, #41424e);
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-activated, #bec2cf);
+}
+.toggleChip[data-disabled] .toggleChipContent{
+  cursor:not-allowed;
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+}
+.toggleChip[data-disabled] .icon{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+.toggleChip[data-checked] .icon{
+  color:var(--sys-primary-text-support, #5b4796);
+}
+.toggleChip[data-checked] .toggleChipContent{
+  color:var(--sys-primary-text-support, #5b4796);
+  background-color:var(--sys-primary-decor-default, #ebdefd);
+  border-color:transparent;
+}
+.toggleChip[data-checked]:hover .toggleChipContent{
+  color:var(--sys-primary-text-main, #382a62);
+  background-color:var(--sys-primary-decor-hovered, #decdfb);
+  border-color:transparent;
+}
+.toggleChip[data-checked]:active .toggleChipContent{
+  color:var(--sys-primary-text-main, #382a62);
+  background-color:var(--sys-primary-decor-activated, #c5b2f1);
+  border-color:transparent;
+}
+.toggleChip[data-checked] .toggleChipInput:focus-visible + .toggleChipContent{
+  color:var(--sys-primary-text-main, #382a62);
+  background-color:var(--sys-primary-decor-hovered, #decdfb);
+  border-color:transparent;
+}
+.toggleChip[data-checked][data-loading] .toggleChipInput + .toggleChipContent{
+  color:var(--sys-neutral-text-main, #41424e);
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-activated, #bec2cf);
+}
+.toggleChip[data-checked][data-disabled] .toggleChipInput + .toggleChipContent{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+  border-color:transparent;
+}
+.toggleChip[data-checked][data-disabled] .icon{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}

package/dist/esm/components/index.js

@@ -0,0 +1,4 @@
+export * from './ChipAssist';
+export * from './ChipToggle';
+export * from './ChipChoice';
+export * from './ChipChoiceRow';