@preply/ds-web-lib 3.5.1 → 3.6.0

package/dist/components/Chips/DismissibleChips.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useControllableState } from "../../utils/useControllableState/useControllableState.js";
+import { C as ChipsRoot, a as ChipsList, $ as $9bf71ea28793e738$export$10c5169755ce7bd7, b as ChipListItem, c as ChipButton, d as ChipLabel } from "../../ChipsPrimitive-DN5NA2yH.js";
+import CloseSvg from "@preply/ds-media-icons/dist/24/TokyoUIClose.svg";
+import { VisuallyHidden } from "../private/VisuallyHidden/VisuallyHidden.js";
+import { FormattedMessage } from "react-intl";
+import { genericAriaLabels } from "../../utils/shared-strings.js";
+import { getDatasetProps } from "@preply/ds-web-core";
+import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
+import { Icon } from "../Icon/Icon.js";
+import { createRequiredContext } from "../../utils/createRequiredContext.js";
+const [Provider, useDismissibleChipsContext] = createRequiredContext("DismissibleChips");
+const DismissibleChips = forwardRef(function DismissibleChips2({
+  items,
+  children,
+  orientation,
+  "aria-label": ariaLabel,
+  "aria-controls": ariaControls,
+  value: valueProp,
+  onValueChange: onValueChangeProp,
+  defaultValue,
+  dataset,
+  ...restPropsPassedByRadixUI
+}, ref) {
+  const [values, onValueChange] = useControllableState({
+    value: valueProp,
+    onValueChange: onValueChangeProp,
+    defaultValue: defaultValue != null ? defaultValue : []
+  });
+  const onRemove = (value) => {
+    onValueChange(values.filter((v) => v !== value));
+  };
+  const content = items ? items.map(({
+    label,
+    value,
+    ...props
+  }) => /* @__PURE__ */ jsx(DismissibleChipsItem, { value, ...props, children: label }, value)) : children;
+  return /* @__PURE__ */ jsx(Provider, { value: {
+    values,
+    onRemove,
+    ariaControls
+  }, children: /* @__PURE__ */ jsx(ChipsRoot, { orientation, children: /* @__PURE__ */ jsx(ChipsList, { ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI), ref, orientation, "aria-label": ariaLabel, ...getDatasetProps(dataset, {
+    preplyDsComponent: webComponentNames.DismissibleChips
+  }), children: content }) }) });
+});
+const DismissibleChipsItem = forwardRef(function DismissibleChipsItem2({
+  value,
+  children,
+  icon,
+  countryFlagCode,
+  disabled,
+  counter,
+  dataset,
+  dsInternalSimulation,
+  ...restPropsPassedByRadixUI
+}, ref) {
+  const {
+    values,
+    onRemove,
+    ariaControls
+  } = useDismissibleChipsContext();
+  const focusManager = $9bf71ea28793e738$export$10c5169755ce7bd7();
+  const handleRemove = () => {
+    onRemove(value);
+    focusManager == null ? void 0 : focusManager.focusNext({
+      wrap: true
+    });
+  };
+  const handleKeyDown = (e) => {
+    switch (e.key) {
+      case "Delete":
+      case "Backspace":
+        handleRemove();
+        break;
+    }
+  };
+  if (!values.includes(value)) return null;
+  return /* @__PURE__ */ jsx(ChipListItem, { children: /* @__PURE__ */ jsxs(ChipButton, { ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI), ref, variant: "dismissible", onClick: handleRemove, onKeyDown: handleKeyDown, icon, countryFlagCode, disabled, "aria-controls": ariaControls, dsInternalSimulation, ...getDatasetProps(dataset, {
+    preplyDsComponent: webComponentNames.DismissibleChipsItem
+  }), children: [
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(FormattedMessage, { ...genericAriaLabels.remove }) }),
+    /* @__PURE__ */ jsx(ChipLabel, { counter, children }),
+    /* @__PURE__ */ jsx(Icon, { svg: CloseSvg })
+  ] }) });
+});
+export {
+  DismissibleChips,
+  DismissibleChipsItem
+};

package/dist/components/Chips/MultiSelectChips.d.ts

@@ -0,0 +1,45 @@
+import { default as React, PropsWithRef, RefAttributes } from 'react';
+import { ChipsItemProps, CommonChipsProps } from './Chips.types';
+export type MultiSelectChipsProps<T extends string> = CommonChipsProps<T[]>;
+export type MultiSelectChipsItemProps = ChipsItemProps;
+interface MultiSelectChipsWithRef {
+    <T extends string>(props: PropsWithRef<MultiSelectChipsProps<T> & RefAttributes<HTMLUListElement>>): React.ReactElement;
+}
+/**
+ * A chips component that allows selection of multiple options from a group.
+ * Users can select multiple chips, and clicking a selected chip will deselect it.
+ *
+ * @remarks
+ * **Keyboard interactions:**
+ * - **Tab** to enter/exit the component (uses [roving tabindex pattern](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex))
+ * - **Arrow keys** to navigate between chips within the group
+ * - **Space/Enter** to toggle selection of the focused chip
+ *
+ * @example
+ * ```tsx
+ * <MultiSelectChips aria-label="Select skills" defaultValue={['vocabulary', 'speaking']}>
+ *   <MultiSelectChipsItem value="vocabulary">Vocabulary</MultiSelectChipsItem>
+ *   <MultiSelectChipsItem value="speaking">Speaking</MultiSelectChipsItem>
+ *   <MultiSelectChipsItem value="listening">Listening</MultiSelectChipsItem>
+ * </MultiSelectChips>
+ * ```
+ */
+export declare const MultiSelectChips: MultiSelectChipsWithRef;
+/**
+ * Individual chip item for use within MultiSelectChips.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelectChipsItem value="english">
+ *   English
+ * </MultiSelectChipsItem>
+ * ```
+ */
+export declare const MultiSelectChipsItem: React.ForwardRefExoticComponent<Pick<import('./private/ChipsPrimitive').ChipButtonProps, "disabled" | "dsInternalSimulation" | "icon" | "countryFlagCode"> & {
+    value: string;
+    children: React.ReactNode;
+    counter?: number | undefined;
+    dataset?: import('@preply/ds-core').Dataset | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=MultiSelectChips.d.ts.map

package/dist/components/Chips/MultiSelectChips.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectChips.d.ts","sourceRoot":"","sources":["../../../src/components/Chips/MultiSelectChips.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,YAAY,EAAO,aAAa,EAAE,MAAM,OAAO,CAAC;AAU5E,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAajE,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,MAAM,IAAI,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC;AAC5E,MAAM,MAAM,yBAAyB,GAAG,cAAc,CAAC;AAGvD,UAAU,uBAAuB;IAC7B,CAAC,CAAC,SAAS,MAAM,EACb,KAAK,EAAE,YAAY,CAAC,qBAAqB,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC,GAChF,KAAK,CAAC,YAAY,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,gBAAgB,yBA0DA,CAAC;AAE9B;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB;;;;;2CAwChC,CAAC"}

package/dist/components/Chips/MultiSelectChips.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useControllableState } from "../../utils/useControllableState/useControllableState.js";
+import { C as ChipsRoot, D as DEFAULT_ORIENTATION, a as ChipsList, b as ChipListItem, c as ChipButton, d as ChipLabel } from "../../ChipsPrimitive-DN5NA2yH.js";
+import { getDatasetProps } from "@preply/ds-web-core";
+import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
+import { createRequiredContext } from "../../utils/createRequiredContext.js";
+const [Provider, useMultiSelectChipsContext] = createRequiredContext("MultiSelectChips");
+const MultiSelectChips = forwardRef(function MultiSelectChips2({
+  items,
+  children,
+  orientation = DEFAULT_ORIENTATION,
+  "aria-label": ariaLabel,
+  "aria-controls": ariaControls,
+  value: valueProp,
+  onValueChange: onValueChangeProp,
+  defaultValue,
+  dataset,
+  ...restPropsPassedByRadixUI
+}, ref) {
+  const [values, onValueChange] = useControllableState({
+    value: valueProp,
+    onValueChange: onValueChangeProp,
+    defaultValue: defaultValue != null ? defaultValue : []
+  });
+  const onToggle = (value, isSelected) => {
+    if (isSelected) {
+      onValueChange(values.filter((v) => v !== value));
+    } else {
+      onValueChange([...values, value]);
+    }
+  };
+  const content = items ? items.map(({
+    label,
+    value,
+    ...props
+  }) => /* @__PURE__ */ jsx(MultiSelectChipsItem, { value, ...props, children: label }, value)) : children;
+  return /* @__PURE__ */ jsx(Provider, { value: {
+    values,
+    onToggle
+  }, children: /* @__PURE__ */ jsx(ChipsRoot, { orientation, children: /* @__PURE__ */ jsx(ChipsList, { ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI), ref, orientation, "aria-orientation": orientation, "aria-label": ariaLabel, "aria-controls": ariaControls, role: "listbox", "aria-multiselectable": "true", ...getDatasetProps(dataset, {
+    preplyDsComponent: webComponentNames.MultiSelectChips
+  }), children: content }) }) });
+});
+const MultiSelectChipsItem = forwardRef(function MultiSelectChipsItem2({
+  value,
+  children,
+  icon,
+  countryFlagCode,
+  disabled,
+  counter,
+  dataset,
+  dsInternalSimulation,
+  ...restPropsPassedByRadixUI
+}, ref) {
+  const {
+    values,
+    onToggle
+  } = useMultiSelectChipsContext();
+  const isSelected = values.includes(value);
+  return /* @__PURE__ */ jsx(ChipListItem, { role: "presentation", children: /* @__PURE__ */ jsx(ChipButton, { ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI), ref, role: "option", "aria-selected": isSelected, onClick: () => onToggle(value, isSelected), icon, countryFlagCode, disabled, dsInternalSimulation, ...getDatasetProps(dataset, {
+    preplyDsComponent: webComponentNames.MultiSelectChipsItem
+  }), children: /* @__PURE__ */ jsx(ChipLabel, { counter, children }) }) });
+});
+export {
+  MultiSelectChips,
+  MultiSelectChipsItem
+};

package/dist/components/Chips/SingleSelectChips.d.ts

@@ -0,0 +1,45 @@
+import { default as React, PropsWithRef, RefAttributes } from 'react';
+import { ChipsItemProps, CommonChipsProps } from './Chips.types';
+export type SingleSelectChipsProps<T extends string> = CommonChipsProps<T | null>;
+export type SingleSelectChipsItemProps = ChipsItemProps;
+interface SingleSelectChipsWithRef {
+    <T extends string>(props: PropsWithRef<SingleSelectChipsProps<T> & RefAttributes<HTMLUListElement>>): React.ReactElement;
+}
+/**
+ * A chips component that allows selection of a single option from a group.
+ * Users can select one chip at a time, and clicking a selected chip will deselect it.
+ *
+ * @remarks
+ * **Keyboard interactions:**
+ * - **Tab** to enter/exit the component (uses [roving tabindex pattern](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex))
+ * - **Arrow keys** to navigate between chips within the group
+ * - **Space/Enter** to select/deselect the focused chip
+ *
+ * @example
+ * ```tsx
+ * <SingleSelectChips aria-label="Choose a skill" defaultValue="vocabulary">
+ *   <SingleSelectChipsItem value="vocabulary">Vocabulary</SingleSelectChipsItem>
+ *   <SingleSelectChipsItem value="speaking">Speaking</SingleSelectChipsItem>
+ *   <SingleSelectChipsItem value="listening">Listening</SingleSelectChipsItem>
+ * </SingleSelectChips>
+ * ```
+ */
+export declare const SingleSelectChips: SingleSelectChipsWithRef;
+/**
+ * Individual chip item for use within SingleSelectChips.
+ *
+ * @example
+ * ```tsx
+ * <SingleSelectChipsItem value="english">
+ *   English
+ * </SingleSelectChipsItem>
+ * ```
+ */
+export declare const SingleSelectChipsItem: React.ForwardRefExoticComponent<Pick<import('./private/ChipsPrimitive').ChipButtonProps, "disabled" | "dsInternalSimulation" | "icon" | "countryFlagCode"> & {
+    value: string;
+    children: React.ReactNode;
+    counter?: number | undefined;
+    dataset?: import('@preply/ds-core').Dataset | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=SingleSelectChips.d.ts.map

package/dist/components/Chips/SingleSelectChips.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleSelectChips.d.ts","sourceRoot":"","sources":["../../../src/components/Chips/SingleSelectChips.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,YAAY,EAAO,aAAa,EAAE,MAAM,OAAO,CAAC;AAU5E,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAajE,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,MAAM,IAAI,gBAAgB,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;AAClF,MAAM,MAAM,0BAA0B,GAAG,cAAc,CAAC;AAGxD,UAAU,wBAAwB;IAC9B,CAAC,CAAC,SAAS,MAAM,EACb,KAAK,EAAE,YAAY,CAAC,sBAAsB,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC,GACjF,KAAK,CAAC,YAAY,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,iBAAiB,0BAkDA,CAAC;AAE/B;;;;;;;;;GASG;AACH,eAAO,MAAM,qBAAqB;;;;;2CAwCjC,CAAC"}

package/dist/components/Chips/SingleSelectChips.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useControllableState } from "../../utils/useControllableState/useControllableState.js";
+import { C as ChipsRoot, D as DEFAULT_ORIENTATION, a as ChipsList, b as ChipListItem, c as ChipButton, d as ChipLabel } from "../../ChipsPrimitive-DN5NA2yH.js";
+import { getDatasetProps } from "@preply/ds-web-core";
+import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
+import { createRequiredContext } from "../../utils/createRequiredContext.js";
+const [Provider, useSingleSelectChipsContext] = createRequiredContext("SingleSelectChips");
+const SingleSelectChips = forwardRef(function SingleSelectChips2({
+  items,
+  children,
+  orientation = DEFAULT_ORIENTATION,
+  "aria-label": ariaLabel,
+  "aria-controls": ariaControls,
+  value: valueProp,
+  onValueChange: onValueChangeProp,
+  defaultValue,
+  dataset,
+  ...restPropsPassedByRadixUI
+}, ref) {
+  const [value, onValueChange] = useControllableState({
+    value: valueProp,
+    onValueChange: onValueChangeProp,
+    defaultValue: defaultValue != null ? defaultValue : null
+  });
+  const content = items ? items.map(({
+    label,
+    value: value2,
+    ...props
+  }) => /* @__PURE__ */ jsx(SingleSelectChipsItem, { value: value2, ...props, children: label }, value2)) : children;
+  return /* @__PURE__ */ jsx(Provider, { value: {
+    value,
+    onValueChange
+  }, children: /* @__PURE__ */ jsx(ChipsRoot, { orientation, children: /* @__PURE__ */ jsx(ChipsList, { ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI), ref, orientation, "aria-orientation": orientation, "aria-label": ariaLabel, "aria-controls": ariaControls, role: "listbox", "aria-multiselectable": "false", ...getDatasetProps(dataset, {
+    preplyDsComponent: webComponentNames.SingleSelectChips
+  }), children: content }) }) });
+});
+const SingleSelectChipsItem = forwardRef(function SingleSelectChipsItem2({
+  value,
+  children,
+  icon,
+  countryFlagCode,
+  disabled,
+  counter,
+  dataset,
+  dsInternalSimulation,
+  ...restPropsPassedByRadixUI
+}, ref) {
+  const {
+    value: selectedValue,
+    onValueChange
+  } = useSingleSelectChipsContext();
+  const isSelected = selectedValue === value;
+  return /* @__PURE__ */ jsx(ChipListItem, { role: "presentation", children: /* @__PURE__ */ jsx(ChipButton, { ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI), ref, role: "option", "aria-selected": isSelected, onClick: () => onValueChange(isSelected ? null : value), icon, countryFlagCode, disabled, dsInternalSimulation, ...getDatasetProps(dataset, {
+    preplyDsComponent: webComponentNames.SingleSelectChipsItem
+  }), children: /* @__PURE__ */ jsx(ChipLabel, { counter, children }) }) });
+});
+export {
+  SingleSelectChips,
+  SingleSelectChipsItem
+};

package/dist/components/Chips/private/ChipsPrimitive.d.ts

@@ -0,0 +1,58 @@
+import { default as React, ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import { IconProps } from '../../Icon/Icon';
+import { Orientation } from '../../../utils/Orientation';
+import { CountryCode } from '@preply/ds-core';
+/**
+ * Chips anatomy:
+ *
+ * <ChipsRoot>
+ *     <ChipsList>
+ *         <ChipListItem>
+ *             <ChipButton>
+ *                 <ChipLabel />
+ *             </ChipButton>
+ *         </ChipListItem>
+ *     </ChipsList>
+ * </ChipsRoot>
+ */
+export declare const DEFAULT_ORIENTATION = "horizontal";
+export type ChipsRootProps = {
+    children: ReactNode;
+    orientation?: Orientation;
+};
+export declare function ChipsRoot({ children, orientation }: ChipsRootProps): React.JSX.Element;
+export type ChipsListProps = Omit<HTMLAttributes<HTMLUListElement>, 'className'> & {
+    orientation?: Orientation;
+};
+export declare const ChipsList: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLUListElement>, "className"> & {
+    orientation?: Orientation | undefined;
+} & React.RefAttributes<HTMLUListElement>>;
+export type ChipListItemProps = Omit<HTMLAttributes<HTMLLIElement>, 'className'>;
+export declare function ChipListItem({ children, ...props }: ChipListItemProps): React.JSX.Element;
+export type ChipButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'className'> & {
+    variant?: 'dismissible';
+    icon?: IconProps['svg'];
+    countryFlagCode?: CountryCode;
+    /**
+     * @deprecated This is meant for internal DS usage only. Do not use it in your code.
+     * @ignore
+     */
+    dsInternalSimulation?: 'hover' | 'focus' | 'active';
+};
+export declare const ChipButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "type"> & {
+    variant?: "dismissible" | undefined;
+    icon?: import('../../../utils/render-icon').SvgComponentOrElement | undefined;
+    countryFlagCode?: "id" | "is" | "at" | "br" | "hr" | "li" | "td" | "th" | "tr" | "by" | "cx" | "cy" | "fr" | "in" | "to" | "no" | "ai" | "as" | "af" | "ax" | "al" | "dz" | "ad" | "ao" | "aq" | "ag" | "ar" | "am" | "aw" | "sh-ac" | "asean" | "au" | "az" | "bs" | "bh" | "bd" | "bb" | "es-pv" | "be" | "bz" | "bj" | "bm" | "bt" | "bo" | "bq" | "ba" | "bw" | "bv" | "io" | "bn" | "bg" | "bf" | "bi" | "cv" | "kh" | "cm" | "ca" | "ic" | "es-ct" | "ky" | "cf" | "cefta" | "cl" | "cn" | "cp" | "cc" | "co" | "km" | "ck" | "cr" | "cu" | "cw" | "cz" | "ci" | "cd" | "dk" | "dg" | "dj" | "dm" | "do" | "eac" | "ec" | "eg" | "sv" | "gb-eng" | "gq" | "er" | "ee" | "sz" | "et" | "eu" | "fk" | "fo" | "fm" | "fj" | "fi" | "gf" | "pf" | "tf" | "ga" | "es-ga" | "gm" | "ge" | "de" | "gh" | "gi" | "gr" | "gl" | "gd" | "gp" | "gu" | "gt" | "gg" | "gn" | "gw" | "gy" | "ht" | "hm" | "va" | "hn" | "hk" | "hu" | "ir" | "iq" | "ie" | "im" | "il" | "it" | "jm" | "jp" | "je" | "jo" | "kz" | "ke" | "ki" | "xk" | "kw" | "kg" | "la" | "lv" | "arab" | "lb" | "ls" | "lr" | "ly" | "lt" | "lu" | "mo" | "mg" | "mw" | "my" | "mv" | "ml" | "mt" | "mh" | "mq" | "mr" | "mu" | "yt" | "mx" | "md" | "mc" | "mn" | "me" | "ms" | "ma" | "mz" | "mm" | "na" | "nr" | "np" | "nl" | "nc" | "nz" | "ni" | "ne" | "ng" | "nu" | "nf" | "kp" | "mk" | "gb-nir" | "mp" | "om" | "pc" | "pk" | "pw" | "pa" | "pg" | "py" | "pe" | "ph" | "pn" | "pl" | "pt" | "pr" | "qa" | "cg" | "ro" | "ru" | "rw" | "re" | "bl" | "sh-hl" | "sh" | "kn" | "lc" | "mf" | "pm" | "vc" | "ws" | "sm" | "st" | "sa" | "gb-sct" | "sn" | "rs" | "sc" | "sl" | "sg" | "sx" | "sk" | "si" | "sb" | "so" | "za" | "gs" | "kr" | "ss" | "es" | "lk" | "ps" | "sd" | "sr" | "sj" | "se" | "ch" | "sy" | "tw" | "tj" | "tz" | "tl" | "tg" | "tk" | "tt" | "sh-ta" | "tn" | "tm" | "tc" | "tv" | "ug" | "ua" | "ae" | "gb" | "un" | "um" | "us" | "uy" | "uz" | "vu" | "ve" | "vn" | "vg" | "vi" | "gb-wls" | "wf" | "eh" | "ye" | "zm" | "zw" | undefined;
+    /**
+     * @deprecated This is meant for internal DS usage only. Do not use it in your code.
+     * @ignore
+     */
+    dsInternalSimulation?: "focus" | "hover" | "active" | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export type ChipLabelProps = Omit<HTMLAttributes<HTMLSpanElement>, 'className'> & {
+    counter?: number;
+};
+export declare function ChipLabel({ children, counter, ...props }: ChipLabelProps): React.JSX.Element;
+export type ChipCounterProps = Omit<HTMLAttributes<HTMLSpanElement>, 'className'>;
+export declare function ChipCounter({ children, ...props }: ChipCounterProps): React.JSX.Element;
+//# sourceMappingURL=ChipsPrimitive.d.ts.map

package/dist/components/Chips/private/ChipsPrimitive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipsPrimitive.d.ts","sourceRoot":"","sources":["../../../../src/components/Chips/private/ChipsPrimitive.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EACV,oBAAoB,EAEpB,cAAc,EAEd,SAAS,EACZ,MAAM,OAAO,CAAC;AAGf,OAAO,EAAQ,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAuC,MAAM,4BAA4B,CAAC;AAE9F,OAAO,EAAgB,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEjE;;;;;;;;;;;;GAYG;AAEH,eAAO,MAAM,mBAAmB,eAAe,CAAC;AAEhD,MAAM,MAAM,cAAc,GAAG;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC7B,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,WAAiC,EAAE,EAAE,cAAc,qBAMxF;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC,GAAG;IAC/E,WAAW,CAAC,EAAE,WAAW,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,SAAS;;0CASpB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,WAAW,CAAC,CAAC;AAEjF,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,qBAMrE;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAC9B,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,GAAG,WAAW,CACvB,GAAG;IACA,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IACxB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;CACvD,CAAC;AAEF,eAAO,MAAM,UAAU;;;;IAPnB;;;OAGG;;2CA0DL,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,WAAW,CAAC,GAAG;IAC9E,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,qBAOxE;AAED,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,WAAW,CAAC,CAAC;AAElF,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,qBAMnE"}

package/dist/components/Chips/private/ChipsPrimitive.js

@@ -0,0 +1,17 @@
+import "react/jsx-runtime";
+import { c, e, d, b, a, C, D } from "../../../ChipsPrimitive-DN5NA2yH.js";
+import "react";
+import "../../../utils/RovingTabIndex/RovingTabIndexProvider.js";
+import "../../Icon/Icon.js";
+import "../../../utils/Orientation/OrientationProvider.js";
+import "../../CountryFlag/CountryFlag.js";
+import "@preply/ds-core";
+export {
+  c as ChipButton,
+  e as ChipCounter,
+  d as ChipLabel,
+  b as ChipListItem,
+  a as ChipsList,
+  C as ChipsRoot,
+  D as DEFAULT_ORIENTATION
+};

package/dist/components/CountryFlag/CountryFlag.d.ts

@@ -1,6 +1,5 @@
 import { default as React, ImgHTMLAttributes } from 'react';
-import { Dataset } from '@preply/ds-core';
-import { CountryCode } from './types';
+import { Dataset, CountryCode } from '@preply/ds-core';
 type Size = 'small' | 'medium' | 'large';
 type ReservedDsProps = 'alt' | 'src' | 'width' | 'height' | 'className';
 export type CountryFlagProps = Omit<ImgHTMLAttributes<HTMLImageElement>, ReservedDsProps> & {
@@ -15,7 +14,7 @@ export type CountryFlagProps = Omit<ImgHTMLAttributes<HTMLImageElement>, Reserve
      */
     size?: Size;
     /**
-     * For Some countries (like ES and MX) the simplified flags are automatically used to speed up loading them.
+     * For some countries (like ES and MX) the simplified flags are automatically used to speed up loading them.
      * @default true
      */
     simplified?: boolean;
@@ -48,7 +47,7 @@ export declare const CountryFlag: React.ForwardRefExoticComponent<Omit<React.Img
      */
     size?: Size | undefined;
     /**
-     * For Some countries (like ES and MX) the simplified flags are automatically used to speed up loading them.
+     * For some countries (like ES and MX) the simplified flags are automatically used to speed up loading them.
      * @default true
      */
     simplified?: boolean | undefined;

package/dist/components/CountryFlag/CountryFlag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CountryFlag.d.ts","sourceRoot":"","sources":["../../../src/components/CountryFlag/CountryFlag.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAM/C,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3C,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzC,KAAK,eAAe,GAAG,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,WAAW,CAAC;AAMxE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,eAAe,CAAC,GAAG;IACxF,IAAI,EAAE,WAAW,CAAC;IAElB;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW;UArCd,WAAW;IAEjB;;;OAGG;SACE,MAAM;IAEX;;OAEG;;IAGH;;;OAGG;;IAGH;;;;;OAKG;;0CA2CL,CAAC"}
+{"version":3,"file":"CountryFlag.d.ts","sourceRoot":"","sources":["../../../src/components/CountryFlag/CountryFlag.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,EAAE,KAAK,OAAO,EAAqB,KAAK,WAAW,EAAgB,MAAM,iBAAiB,CAAC;AAMlG,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzC,KAAK,eAAe,GAAG,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,WAAW,CAAC;AAMxE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,eAAe,CAAC,GAAG;IACxF,IAAI,EAAE,WAAW,CAAC;IAElB;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW;UArCd,WAAW;IAEjB;;;OAGG;SACE,MAAM;IAEX;;OAEG;;IAGH;;;OAGG;;IAGH;;;;;OAKG;;0CA2CL,CAAC"}

package/dist/components/CountryFlag/CountryFlag.js

@@ -1,21 +1,20 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { countryNames, getCountryFlagUrl } from "@preply/ds-core";
 import { getDatasetProps } from "@preply/ds-web-core";
 import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-import { getCountryFlagUrl } from "./utils/getCountryFlagUrl.js";
-import { countryNames } from "./utils/countries.js";
 import '../../assets/CountryFlag.css';const flag = "flag__wPkCc";
 const styles = {
   flag
 };
 const placeholderSvg = "data:image/svg+xml;base64,PHN2ZyBkYXRhLXByZXBseS1kcy1jb21wb25lbnQ9IlN2Z0NvdW50cnlGbGFnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNDgwIi8+";
 const CountryFlag = forwardRef(function CountryFlag2({
-  size = "small",
-  code: countryCode,
+  alt,
   dataset,
+  size = "small",
   simplified = true,
-  alt,
+  code: countryCode,
   ...rest
 }, ref) {
   const width = size === "large" ? 32 : size === "medium" ? 24 : 16;
@@ -23,7 +22,8 @@ const CountryFlag = forwardRef(function CountryFlag2({
   const countryCodeIsInvalid = typeof countryCode !== "string" || !countryNames[countryCode];
   const src = countryCodeIsInvalid ? placeholderSvg : getCountryFlagUrl({
     countryCode,
-    simplified
+    simplified,
+    requester: "WebCountryFlag"
   });
   const imgProps = {
     alt,

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+export type DividerProps = {
+    /**
+     * @default small
+     */
+    size?: 'small' | 'large';
+};
+export declare const Divider: FC<DividerProps>;
+//# sourceMappingURL=Divider.d.ts.map

package/dist/components/Divider/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIlC,MAAM,MAAM,YAAY,GAAG;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAKpC,CAAC"}

package/dist/components/Divider/Divider.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
+import '../../assets/Divider.css';const Divider$1 = "Divider__kU514";
+const styles = {
+  Divider: Divider$1,
+  "size-small": "size-small__OdB2p",
+  "size-large": "size-large__4iJ0a"
+};
+const Divider = ({
+  size = "small"
+}) => /* @__PURE__ */ jsx("hr", { className: `${styles.Divider} ${styles[`size-${size}`]}`, "data-preply-ds-component": webComponentNames.Divider });
+export {
+  Divider
+};

package/dist/components/IconButton/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAc,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAE5E,OAAO,EAAc,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAK/E,KAAK,SAAS,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,IAAI,CAAC,SAAS,OAAO,GAAG,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC;AAE/F,MAAM,MAAM,eAAe,GAAG,SAAS,CACnC,eAAe,EACf,WAAW,GAAG,MAAM,GAAG,cAAc,GAAG,UAAU,GAAG,mBAAmB,CAC3E,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,eAAe,GAAG;IAClC,aAAa,EAAE,MAAM,CAAC;IACtB,GAAG,EAAE,qBAAqB,CAAC;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,UAAU,qGA2BtB,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAc,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAE5E,OAAO,EAAc,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAM/E,KAAK,SAAS,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,IAAI,CAAC,SAAS,OAAO,GAAG,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC;AAE/F,MAAM,MAAM,eAAe,GAAG,SAAS,CACnC,eAAe,EACf,WAAW,GAAG,MAAM,GAAG,cAAc,GAAG,UAAU,GAAG,mBAAmB,CAC3E,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,eAAe,GAAG;IAClC,aAAa,EAAE,MAAM,CAAC;IACtB,GAAG,EAAE,qBAAqB,CAAC;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,UAAU,qGA4BtB,CAAC"}

package/dist/components/IconButton/IconButton.js

@@ -4,6 +4,7 @@ import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-n
 import { forwardRef } from "react";
 import { renderIcon } from "../../utils/render-icon.js";
 import { ButtonBase } from "../private/ButtonBase/ButtonBase.js";
+import { b as bubbleCounterStyles } from "../../BubbleCounter.module-QMwXWFIS.js";
 const IconButton = forwardRef(function IconButtonComponent({
   variant = BUTTON_VARIANT_DEFAULT,
   size = BUTTON_SIZE_DEFAULT,
@@ -12,7 +13,7 @@ const IconButton = forwardRef(function IconButtonComponent({
   svg,
   ...props
 }, ref) {
-  return /* @__PURE__ */ jsx(ButtonBase, { ...props, ref, isIconButton: true, variant, size, url, a11yLabel, preplyDsComponent: webComponentNames.IconButton, children: renderIcon(svg, {
+  return /* @__PURE__ */ jsx(ButtonBase, { ...props, ref, className: bubbleCounterStyles.cutout, isIconButton: true, variant, size, url, a11yLabel, preplyDsComponent: webComponentNames.IconButton, children: renderIcon(svg, {
     "aria-hidden": "true",
     focusable: "false"
   }) });

package/dist/components/LayoutFlex/LayoutFlex.js

@@ -5,7 +5,7 @@ import { LAYOUT_TAG_DEFAULT } from "@preply/ds-core";
 import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
 import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
 import { getGapAttr, getRelativeAttr, getDisplayAttr, getAlignItemsAttr, getJustifyContentAttr, getDirectionAttr, getPaddingAttr, DO_NOT_ADD_DATA_ATTRIBUTE, getWrapAttr } from "./style/getStyleAttrs.js";
-import { s as styles$1 } from "../../layout-gap.module-B_tyw31T.js";
+import { s as styles$1 } from "../../layout-gap.module-RzGBJL6B.js";
 import { s as styles$2 } from "../../layout-hide.module-Bpl3Pl-a.js";
 import { s as styles$3 } from "../../layout-relative.module-1z75aSwo.js";
 import '../../assets/LayoutFlex.css';const styles = {};

package/dist/components/LayoutFlex/tests/Gap.d.ts

@@ -3,6 +3,7 @@ export declare function Spacing0(): React.JSX.Element;
 export declare function Spacing1(): React.JSX.Element;
 export declare function Spacing2(): React.JSX.Element;
 export declare function Spacing4(): React.JSX.Element;
+export declare function Spacing6(): React.JSX.Element;
 export declare function Spacing8(): React.JSX.Element;
 export declare function Spacing12(): React.JSX.Element;
 export declare function Spacing16(): React.JSX.Element;

package/dist/components/LayoutFlex/tests/Gap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Gap.d.ts","sourceRoot":"","sources":["../../../../src/components/LayoutFlex/tests/Gap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,wBAAgB,QAAQ,sBAUvB;AACD,wBAAgB,QAAQ,sBAUvB;AACD,wBAAgB,QAAQ,sBAUvB;AACD,wBAAgB,QAAQ,sBAUvB;AACD,wBAAgB,QAAQ,sBAUvB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,UAAU,sBAUzB;AAED,wBAAgB,aAAa,sBAU5B;AACD,wBAAgB,YAAY,sBAU3B;AACD,wBAAgB,YAAY,sBAU3B;AACD,wBAAgB,WAAW,sBAU1B;AACD,wBAAgB,UAAU,sBAUzB;AACD,wBAAgB,UAAU,sBAUzB;AACD,wBAAgB,UAAU,sBAUzB;AACD,wBAAgB,WAAW,sBAU1B;AAED,wBAAgB,iBAAiB,sBAsBhC;AAED,wBAAgB,8BAA8B,sBAsB7C"}
+{"version":3,"file":"Gap.d.ts","sourceRoot":"","sources":["../../../../src/components/LayoutFlex/tests/Gap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,wBAAgB,QAAQ,sBAUvB;AACD,wBAAgB,QAAQ,sBAUvB;AACD,wBAAgB,QAAQ,sBAUvB;AACD,wBAAgB,QAAQ,sBAUvB;AACD,wBAAgB,QAAQ,sBAUvB;AACD,wBAAgB,QAAQ,sBAUvB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,UAAU,sBAUzB;AAED,wBAAgB,aAAa,sBAU5B;AACD,wBAAgB,YAAY,sBAU3B;AACD,wBAAgB,YAAY,sBAU3B;AACD,wBAAgB,WAAW,sBAU1B;AACD,wBAAgB,UAAU,sBAUzB;AACD,wBAAgB,UAAU,sBAUzB;AACD,wBAAgB,UAAU,sBAUzB;AACD,wBAAgB,WAAW,sBAU1B;AAED,wBAAgB,iBAAiB,sBAsBhC;AAED,wBAAgB,8BAA8B,sBAsB7C"}

package/dist/components/LayoutFlex/tests/Gap.js

@@ -54,6 +54,17 @@ function Spacing4() {
     ] })
   ] });
 }
+function Spacing6() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { children: "Spacing6" }),
+    /* @__PURE__ */ jsxs(LayoutFlex, { dataset: {
+      testid: "Spacing6"
+    }, gap: "6", children: [
+      /* @__PURE__ */ jsx(Div1, { children: "a" }),
+      /* @__PURE__ */ jsx(Div2, { children: "b" })
+    ] })
+  ] });
+}
 function Spacing8() {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { children: "Spacing8" }),
@@ -310,6 +321,7 @@ export {
   Spacing32,
   Spacing4,
   Spacing48,
+  Spacing6,
   Spacing64,
   Spacing8,
   Spacing96,

package/dist/components/LayoutFlex/tests/Padding.d.ts

@@ -3,6 +3,7 @@ export declare function Spacing0(): React.JSX.Element;
 export declare function Spacing1(): React.JSX.Element;
 export declare function Spacing2(): React.JSX.Element;
 export declare function Spacing4(): React.JSX.Element;
+export declare function Spacing6(): React.JSX.Element;
 export declare function Spacing8(): React.JSX.Element;
 export declare function Spacing12(): React.JSX.Element;
 export declare function Spacing16(): React.JSX.Element;

package/dist/components/LayoutFlex/tests/Padding.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Padding.d.ts","sourceRoot":"","sources":["../../../../src/components/LayoutFlex/tests/Padding.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,wBAAgB,QAAQ,sBAUvB;AACD,wBAAgB,QAAQ,sBAUvB;AACD,wBAAgB,QAAQ,sBAUvB;AACD,wBAAgB,QAAQ,sBAUvB;AACD,wBAAgB,QAAQ,sBAUvB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,UAAU,sBAUzB;AAED,wBAAgB,iBAAiB,sBAUhC;AACD,wBAAgB,gBAAgB,sBAU/B;AACD,wBAAgB,gBAAgB,sBAU/B;AACD,wBAAgB,eAAe,sBAU9B;AACD,wBAAgB,cAAc,sBAU7B;AACD,wBAAgB,cAAc,sBAU7B;AACD,wBAAgB,cAAc,sBAU7B;AACD,wBAAgB,eAAe,sBAU9B;AAED,wBAAgB,iBAAiB,sBAsBhC;AAED,wBAAgB,8BAA8B,sBAsB7C;AAED,wBAAgB,iBAAiB,sBAUhC;AACD,wBAAgB,iBAAiB,sBAUhC;AACD,wBAAgB,iBAAiB,sBAahC;AACD,wBAAgB,0BAA0B,sBAqBzC;AACD,wBAAgB,oBAAoB,sBAqBnC"}
+{"version":3,"file":"Padding.d.ts","sourceRoot":"","sources":["../../../../src/components/LayoutFlex/tests/Padding.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,wBAAgB,QAAQ,sBAUvB;AACD,wBAAgB,QAAQ,sBAUvB;AACD,wBAAgB,QAAQ,sBAUvB;AACD,wBAAgB,QAAQ,sBAUvB;AACD,wBAAgB,QAAQ,sBAUvB;AACD,wBAAgB,QAAQ,sBAUvB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,SAAS,sBAUxB;AACD,wBAAgB,UAAU,sBAUzB;AAED,wBAAgB,iBAAiB,sBAUhC;AACD,wBAAgB,gBAAgB,sBAU/B;AACD,wBAAgB,gBAAgB,sBAU/B;AACD,wBAAgB,eAAe,sBAU9B;AACD,wBAAgB,cAAc,sBAU7B;AACD,wBAAgB,cAAc,sBAU7B;AACD,wBAAgB,cAAc,sBAU7B;AACD,wBAAgB,eAAe,sBAU9B;AAED,wBAAgB,iBAAiB,sBAsBhC;AAED,wBAAgB,8BAA8B,sBAsB7C;AAED,wBAAgB,iBAAiB,sBAUhC;AACD,wBAAgB,iBAAiB,sBAUhC;AACD,wBAAgB,iBAAiB,sBAahC;AACD,wBAAgB,0BAA0B,sBAqBzC;AACD,wBAAgB,oBAAoB,sBAqBnC"}

package/dist/components/LayoutFlex/tests/Padding.js

@@ -54,6 +54,17 @@ function Spacing4() {
     ] })
   ] });
 }
+function Spacing6() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { children: "Spacing4" }),
+    /* @__PURE__ */ jsxs(LayoutFlex, { dataset: {
+      testid: "Spacing4"
+    }, padding: "4", children: [
+      /* @__PURE__ */ jsx(Div1, { children: "a" }),
+      /* @__PURE__ */ jsx(Div2, { children: "b" })
+    ] })
+  ] });
+}
 function Spacing8() {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { children: "Spacing8" }),
@@ -381,6 +392,7 @@ export {
   Spacing32,
   Spacing4,
   Spacing48,
+  Spacing6,
   Spacing64,
   Spacing8,
   Spacing96,