@snack-uikit/breadcrumbs 0.8.62 → 0.8.63-preview-ba12ca94.0

package/dist/cjs/components/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Breadcrumbs"), exports);

package/dist/cjs/constants.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SIZE = exports.ELEMENT_TYPE = exports.ITEM_RENDER_MODE = exports.SEPARATOR = void 0;
+exports.SEPARATOR = '›';
+exports.ITEM_RENDER_MODE = {
+  Full: 'full',
+  ShortLabel: 'shortLabel',
+  Ellipsis: 'ellipsis',
+  Collapsed: 'collapsed'
+};
+exports.ELEMENT_TYPE = {
+  Separator: 'separator',
+  Collapse: 'collapse',
+  Item: 'item'
+};
+exports.SIZE = {
+  Xs: 'xs',
+  S: 's'
+};

package/dist/cjs/context.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BreadcrumbsContext = void 0;
+const react_1 = require("react");
+const constants_1 = require("./constants");
+exports.BreadcrumbsContext = (0, react_1.createContext)({
+  hidden: false,
+  size: constants_1.SIZE.S,
+  separator: constants_1.SEPARATOR
+});

package/dist/cjs/hooks.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBreadcrumbsLayout = useBreadcrumbsLayout;
+const lodash_debounce_1 = __importDefault(require("lodash.debounce"));
+const react_1 = require("react");
+const utils_1 = require("./utils");
+const selectConfig = (containerWidth, configs) => {
+  if (!configs.length) {
+    return;
+  }
+  let [bestConfig] = configs;
+  for (const config of configs) {
+    if (config.width <= containerWidth) {
+      if (bestConfig.width > containerWidth) {
+        bestConfig = config;
+      } else {
+        if (bestConfig.weight > config.weight) {
+          bestConfig = config;
+        }
+      }
+    } else if (config.width < bestConfig.width) {
+      bestConfig = config;
+    }
+  }
+  if (bestConfig) {
+    return {
+      chain: bestConfig.chain,
+      containerWidth,
+      chainWidth: bestConfig.width
+    };
+  }
+};
+/**
+ * Расчет способа отображения breadcrumbs работает следующим образом:
+ * Каждый item может быть отображен в одном из режимов:
+ *    full - целиком
+ *    shortLabel - с использованием укороченного лейбла
+ *    ellipsis - cо скруглением текста в ...
+ *    collapse - спрятан в специальный узел "..." с тултипом.
+ *  Для того чтоб эффективно распределить свободное по ширине пространство между айтемами в компоненте создается скрытый контейнер (HiddenChain),
+ *  в котором рендерятся все айтемы во всех возможных способах отображения. Замеряется размер каждого из айтемов и записывается в sizeMap.
+ *  Далее перебираются все возможные варианты отображения всей цепочки - конфиги (buildBreadcrumbsConfigs). У такого конфига есть два атрибута:
+ *    width - суммарная ширина
+ *    weight - вес, отображает общее количество сокращений, примененных к цепочке (например, отображение в режиме full - 0, сокращение shortLabel - +1, а ellipsis - +100 и тд)
+ *  Для того чтоб отобразить breadcrumbs, нужно подобрать конфиг, максимальный по ширине, влезающий в контейнер, но с минимальным весом (наименьшим количеством сокращений).
+ */
+function useBreadcrumbsLayout(containerRef) {
+  const [currentConfig, setCurrentConfig] = (0, react_1.useState)(undefined);
+  const [configs, setConfigs] = (0, react_1.useState)([]);
+  const selectConfigForWidth = (0, react_1.useCallback)(width => selectConfig(width, configs), [configs]);
+  /**
+   * Подбор подходящего конфига триггерится изменением ширины контейнера и изменением набора конфигов
+   */
+  (0, react_1.useEffect)(() => {
+    var _a;
+    const visibleContainer = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+    if (!visibleContainer) {
+      return;
+    }
+    setCurrentConfig(selectConfig((0, utils_1.getMaxPossibleWidth)(visibleContainer), configs));
+  }, [configs, containerRef]);
+  (0, react_1.useEffect)(() => {
+    var _a;
+    const visibleContainer = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+    if (!visibleContainer) {
+      return;
+    }
+    const reselectConfig = (0, lodash_debounce_1.default)(() => {
+      const width = (0, utils_1.getMaxPossibleWidth)(visibleContainer);
+      setCurrentConfig(prevConfig => {
+        if ((prevConfig === null || prevConfig === void 0 ? void 0 : prevConfig.containerWidth) === width) {
+          return prevConfig;
+        }
+        const newConf = selectConfigForWidth(width);
+        return newConf || (prevConfig ? Object.assign(Object.assign({}, prevConfig), {
+          containerWidth: width
+        }) : prevConfig);
+      });
+    }, 100);
+    const visibleContainerObserver = new ResizeObserver(reselectConfig);
+    visibleContainerObserver.observe(visibleContainer);
+    visibleContainerObserver.observe(document.body);
+    return () => visibleContainerObserver.disconnect();
+  }, [containerRef, selectConfigForWidth]);
+  return {
+    setConfigs,
+    currentConfig
+  };
+}

package/dist/cjs/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./components"), exports);

package/dist/cjs/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const constants_1 = require("./constants");

package/dist/cjs/utils/buildBreadcrumbsConfigs.js

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildBreadcrumbsConfigs = buildBreadcrumbsConfigs;
+const constants_1 = require("../constants");
+const RENDER_MODE_WEIGHT = {
+  [constants_1.ITEM_RENDER_MODE.Full]: 0,
+  [constants_1.ITEM_RENDER_MODE.ShortLabel]: 1,
+  [constants_1.ITEM_RENDER_MODE.Ellipsis]: 100,
+  [constants_1.ITEM_RENDER_MODE.Collapsed]: 10000
+};
+const RENDER_MODE_WITH_WIDTH = [constants_1.ITEM_RENDER_MODE.Full, constants_1.ITEM_RENDER_MODE.ShortLabel, constants_1.ITEM_RENDER_MODE.Ellipsis];
+const startsWith = renderMode => (item, tail) => [Object.assign(Object.assign({}, item), {
+  renderMode
+}), ...tail];
+const startsWithFull = startsWith(constants_1.ITEM_RENDER_MODE.Full);
+const startsWithShortLabel = startsWith(constants_1.ITEM_RENDER_MODE.ShortLabel);
+const startsWithEllipsis = startsWith(constants_1.ITEM_RENDER_MODE.Ellipsis);
+const startsWithCollapsed = startsWith(constants_1.ITEM_RENDER_MODE.Collapsed);
+function buildSubChain(_ref, _ref2) {
+  let [current, ...rest] = _ref;
+  let {
+    useCollapse = true,
+    useEllipse = true
+  } = _ref2;
+  const result = [];
+  if (!current) {
+    return result;
+  }
+  if (!rest.length) {
+    result.push(startsWithFull(current, []));
+    current.shortLabel && result.push(startsWithShortLabel(current, []));
+    return result;
+  }
+  buildSubChain(rest, {
+    useCollapse: false,
+    useEllipse: false
+  }).forEach(variant => {
+    result.push(startsWithFull(current, variant));
+    current.shortLabel && result.push(startsWithShortLabel(current, variant));
+  });
+  if (useEllipse) {
+    buildSubChain(rest, {
+      useCollapse: false,
+      useEllipse: true
+    }).forEach(variant => {
+      result.push(startsWithEllipsis(current, variant));
+    });
+  }
+  if (useCollapse) {
+    buildSubChain(rest, {
+      useCollapse: true,
+      useEllipse: false
+    }).forEach(variant => {
+      result.push(startsWithCollapsed(current, variant));
+    });
+  }
+  return result;
+}
+const collapseAllRest = (lastElementRenderMode, rest) => rest.map((element, index, array) => {
+  const lastItem = index === array.length - 1;
+  return Object.assign(Object.assign({}, element), {
+    renderMode: lastItem ? lastElementRenderMode : constants_1.ITEM_RENDER_MODE.Collapsed
+  });
+});
+function buildBreadcrumbsConfigs(items, sizeMap, lastEmpty) {
+  if (!items.length) {
+    return [];
+  }
+  const chains = [];
+  const [first, ...rest] = items.map(item => Object.assign(Object.assign({}, item), {
+    renderMode: constants_1.ITEM_RENDER_MODE.Full
+  }));
+  buildSubChain(rest, {
+    useCollapse: true,
+    useEllipse: true
+  }).forEach(subset => {
+    chains.push(startsWithFull(first, subset));
+    first.shortLabel && chains.push(startsWithShortLabel(first, subset));
+  });
+  /** Первый элемент можно схлопывать/сокращать только когда уже сокращено все что можно */
+  chains.push(startsWithEllipsis(first, collapseAllRest(constants_1.ITEM_RENDER_MODE.Full, rest)));
+  chains.push(startsWithEllipsis(first, collapseAllRest(constants_1.ITEM_RENDER_MODE.Ellipsis, rest)));
+  chains.push(startsWithCollapsed(first, collapseAllRest(constants_1.ITEM_RENDER_MODE.Full, rest)));
+  chains.push(startsWithCollapsed(first, collapseAllRest(constants_1.ITEM_RENDER_MODE.Ellipsis, rest)));
+  return chains.map(chain => chain.reduce((acc, item, index, array) => {
+    const {
+      renderMode
+    } = item;
+    if (index && RENDER_MODE_WITH_WIDTH.includes(renderMode)) {
+      acc.width += sizeMap.separator;
+      acc.chain.push({
+        element: constants_1.ELEMENT_TYPE.Separator,
+        width: sizeMap.separator
+      });
+    }
+    if (!acc.hasCollapsed && renderMode === constants_1.ITEM_RENDER_MODE.Collapsed) {
+      if (index) {
+        acc.width += sizeMap.separator;
+        acc.chain.push({
+          element: constants_1.ELEMENT_TYPE.Separator,
+          width: sizeMap.separator
+        });
+      }
+      acc.hasCollapsed = true;
+      acc.width += sizeMap.collapse;
+      acc.chain.push({
+        element: constants_1.ELEMENT_TYPE.Collapse,
+        width: sizeMap.collapse
+      });
+    }
+    const width = sizeMap.items[item.id][renderMode];
+    acc.weight += RENDER_MODE_WEIGHT[item.renderMode];
+    acc.width += width;
+    acc.chain.push({
+      element: constants_1.ELEMENT_TYPE.Item,
+      item,
+      width
+    });
+    if (index === array.length - 1 && lastEmpty) {
+      acc.width += sizeMap.separator;
+      acc.chain.push({
+        element: constants_1.ELEMENT_TYPE.Separator,
+        width: sizeMap.separator
+      });
+    }
+    return acc;
+  }, {
+    chain: [],
+    weight: 0,
+    width: 0,
+    hasCollapsed: false
+  }));
+}

package/dist/cjs/utils/buildSizeMap.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildSizeMap = buildSizeMap;
+const constants_1 = require("../constants");
+const getEmptyItemSizeMap = () => ({
+  [constants_1.ITEM_RENDER_MODE.ShortLabel]: 0,
+  [constants_1.ITEM_RENDER_MODE.Collapsed]: 0,
+  [constants_1.ITEM_RENDER_MODE.Ellipsis]: 0,
+  [constants_1.ITEM_RENDER_MODE.Full]: 0
+});
+const getElementWidth = element => element.getBoundingClientRect().width;
+function buildSizeMap(container) {
+  if (!container) {
+    return;
+  }
+  const children = container.children;
+  const [separator, collapse, ...itemElements] = Array.from(children);
+  return {
+    separator: getElementWidth(separator),
+    collapse: getElementWidth(collapse),
+    items: itemElements.reduce((result, element) => {
+      const id = element.getAttribute('data-id');
+      const renderMode = element.getAttribute('data-render-mode');
+      result[id] = result[id] || getEmptyItemSizeMap();
+      result[id][renderMode] = getElementWidth(element);
+      return result;
+    }, {})
+  };
+}

package/dist/cjs/utils/getMaxPossibleWidth.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMaxPossibleWidth = void 0;
+const utils_1 = require("@snack-uikit/utils");
+/**
+ * Функция предназначена для измерения максимально возможной ширины контейнера
+ * она вставляет широкую распорку, замеряет ширину и удаляет ее
+ * это происходит в одном обороте eventLoop, поэтому новый кадр с распоркой не рендерится браузером.
+ */
+const getMaxPossibleWidth = element => {
+  if (!element) {
+    return 0;
+  }
+  if ((0, utils_1.isBrowser)()) {
+    const spreader = document.createElement('div');
+    spreader.style.width = '10000px';
+    element.append(spreader);
+    const width = element.getBoundingClientRect().width;
+    element.removeChild(spreader);
+    return width;
+  }
+  return 0;
+};
+exports.getMaxPossibleWidth = getMaxPossibleWidth;

package/dist/cjs/utils/getTestId.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTestId = void 0;
+const getTestId = (prefix, testId) => testId ? `${prefix}-element-${testId}` : '';
+exports.getTestId = getTestId;

package/dist/cjs/utils/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./buildBreadcrumbsConfigs"), exports);
+__exportStar(require("./buildSizeMap"), exports);
+__exportStar(require("./getMaxPossibleWidth"), exports);
+__exportStar(require("./getTestId"), exports);

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

@@ -0,0 +1,33 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Item, Size } from '../../types';
+export type BreadcrumbsProps = WithSupportProps<{
+    /** Массив айтемов */
+    items: Item[];
+    /** CSS-класс */
+    className?: string;
+    /**
+     * Разделитель
+     * @default "›"
+     */
+    separator?: string;
+    /**
+     * Размер
+     * @default s
+     */
+    size?: Size;
+    /**
+     * Использовать иконку без лейбла в первом айтеме
+     * @default false
+     */
+    firstItemIconOnly?: boolean;
+    /**
+     * Делает некликабельным последний элемент, даже если для него переданы `href` или `onClick`
+     * @default false
+     */
+    inactiveLastItem?: boolean;
+    lastEmpty?: boolean;
+}>;
+/**
+ * Компонент хлебных крошек
+ */
+export declare const Breadcrumbs: import("react").NamedExoticComponent<BreadcrumbsProps>;

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

@@ -0,0 +1,6 @@
+import { BreadcrumbsConfigChain } from '../../types';
+export type CollapseProps = {
+    className?: string;
+    currentConfig: BreadcrumbsConfigChain;
+};
+export declare function Collapse({ currentConfig, className }: CollapseProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,18 @@
+.collapse{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  background:none;
+  border:none;
+}
+.collapse:focus-visible, .collapse:hover{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.collapse: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);
+}
+
+.collapsedRow{
+  display:flex;
+}

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

@@ -0,0 +1,11 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Item, ItemRenderMode } from '../../types';
+export type CrumbProps = WithSupportProps<{
+    renderMode: ItemRenderMode;
+    className?: string;
+    minWidth?: number;
+    current?: boolean;
+    item: Item;
+    useIconOnly?: boolean;
+}>;
+export declare const Crumb: import("react").NamedExoticComponent<CrumbProps>;

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

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

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

@@ -0,0 +1,55 @@
+.wrapper{
+  flex-shrink:0;
+  list-style:none;
+}
+.wrapper[data-render-mode=ellipsis]{
+  flex-shrink:1;
+}
+
+.crumb, a.crumb{
+  display:flex;
+  align-items:center;
+  width:100%;
+  margin:0;
+  padding:0;
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  text-decoration:none;
+  background:none;
+  border:none;
+}
+.crumb[data-clickable], a.crumb[data-clickable]{
+  cursor:pointer;
+}
+.crumb[data-clickable]:focus-visible, .crumb[data-clickable]:hover, a.crumb[data-clickable]:focus-visible, a.crumb[data-clickable]:hover{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.crumb[data-current=true], a.crumb[data-current=true]{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.crumb:focus-visible, a.crumb: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);
+}
+.crumb[data-size=xs], a.crumb[data-size=xs]{
+  height:var(--size-breadcrumbs-xs, 16px);
+  gap:var(--space-breadcrumbs-crumb-xs-gap, 2px);
+}
+.crumb[data-size=s], a.crumb[data-size=s]{
+  height:var(--size-breadcrumbs-s, 24px);
+  gap:var(--space-breadcrumbs-crumb-s-gap, 2px);
+}
+.crumb .label, a.crumb .label{
+  overflow:hidden;
+  width:100%;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+.crumb .icon, a.crumb .icon{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  width:-moz-fit-content;
+  width:fit-content;
+}

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

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { Size } from '../../types';
+export type CrumbsTypographyProps = PropsWithChildren<{
+    size: Size;
+    className?: string;
+}>;
+export declare function CrumbsTypography({ size, children, className }: CrumbsTypographyProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,10 @@
+import { BreadcrumbsConfig, Item, Size } from '../../types';
+export type HiddenChainProps = {
+    separator: string;
+    items: Item[];
+    size: Size;
+    onConfigsBuilt(config: BreadcrumbsConfig[]): void;
+    firstItemIconOnly?: boolean;
+    lastEmpty?: boolean;
+};
+export declare const HiddenChain: import("react").NamedExoticComponent<HiddenChainProps>;

package/dist/esm/components/HiddenChain/hooks.d.ts

@@ -0,0 +1,6 @@
+import { Item } from '../../types';
+type UseItemModesRenderProps = {
+    firstItemIconOnly: boolean;
+};
+export declare const useItemModesRender: ({ firstItemIconOnly }: UseItemModesRenderProps) => (item: Item, index: number) => (import("react/jsx-runtime").JSX.Element | null)[];
+export {};

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

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

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

@@ -0,0 +1 @@
+export declare function Separator(): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,15 @@
+.separator{
+  display:flex;
+  align-items:center;
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}
+.separator[data-size=xs]{
+  height:var(--size-breadcrumbs-xs, 16px);
+  padding-left:var(--space-breadcrumbs-separator-padding-xs, 4px);
+  padding-right:var(--space-breadcrumbs-separator-padding-xs, 4px);
+}
+.separator[data-size=s]{
+  height:var(--size-breadcrumbs-s, 24px);
+  padding-left:var(--space-breadcrumbs-separator-padding-s, 8px);
+  padding-right:var(--space-breadcrumbs-separator-padding-s, 8px);
+}

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

@@ -0,0 +1,19 @@
+import { PropsWithChildren } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Size } from '../../types';
+export type WrapperProps = PropsWithChildren<WithSupportProps<{
+    hidden: boolean;
+    className?: string;
+    size: Size;
+    separator: string;
+}>>;
+export declare const Wrapper: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string;
+} & import("react").AriaAttributes & {
+    hidden: boolean;
+    className?: string;
+    size: Size;
+    separator: string;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLUListElement>>;

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

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

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

@@ -0,0 +1,19 @@
+.wrapper{
+  padding:var(--space-breadcrumbs-container, 2px);
+  overflow:hidden;
+}
+.wrapper[data-hidden=true]{
+  position:absolute;
+  width:1px;
+  height:1px;
+  opacity:0;
+}
+
+.row{
+  display:flex;
+  margin:0;
+  padding:0;
+}
+.row[data-hidden=true]{
+  display:inline-flex;
+}

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

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