@koobiq/react-components 0.19.0 → 0.21.0

package/dist/components/Tooltip/types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode, RefObject, ComponentRef, ReactElement } from 'react';
+import type { ReactNode, RefObject, ComponentRef, ReactElement, CSSProperties } from 'react';
 import type { DataAttributeProps, ExtendableProps, FocusableElement, DOMAttributes } from '@koobiq/react-core';
 import type { TooltipTriggerProps } from '@koobiq/react-primitives';
 export type TooltipPropControl = (props: DOMAttributes<Element> & {
@@ -75,6 +75,8 @@ export type TooltipProps = ExtendableProps<{
     id?: string;
     /** Additional CSS-classes. */
     className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
     /**
      * The container element in which the component portal will be placed.
      * @default document.body

package/dist/components/index.d.ts

@@ -41,6 +41,7 @@ export * from './Form';
 export * from './Tabs';
 export * from './Autocomplete';
 export * from './ToastProvider';
+export * from './Breadcrumbs';
 export * from './layout';
 export { useListData, useAsyncList, type ListData, type ListOptions, type AsyncListData, type AsyncListOptions, type AsyncListLoadFunction, type AsyncListLoadOptions, type TimeValue, type DateValue, } from '@koobiq/react-primitives';
 export { useRouter, useLocale, useFilter, type Locale, type SortDescriptor, type Selection, RouterProvider, useDateFormatter, } from '@koobiq/react-core';

package/dist/index.js

@@ -18,6 +18,7 @@ import { FormFieldControlGroupContext, useFormFieldControlGroup } from "./compon
 import { formFieldControlGroupPropVariant } from "./components/FormField/FormFieldControlGroup/types.js";
 import { FormFieldInputDate } from "./components/FormField/FormFieldInputDate/FormFieldInputDate.js";
 import { FormField, FormFieldComponent } from "./components/FormField/FormField.js";
+import { FormFieldClearButton } from "./components/FormField/FormFieldClearButton/FormFieldClearButton.js";
 import { formFieldPropLabelAlign, formFieldPropLabelPlacement } from "./components/FormField/types.js";
 import { Alert } from "./components/Alert/Alert.js";
 import { alertPropStatus } from "./components/Alert/types.js";
@@ -100,6 +101,9 @@ import { Autocomplete, AutocompleteRender } from "./components/Autocomplete/Auto
 import { autocompletePropLabelAlign, autocompletePropLabelPlacement, autocompletePropVariant } from "./components/Autocomplete/types.js";
 import { ToastProvider, getToastQueue, toast } from "./components/ToastProvider/ToastProvider.js";
 import { toastPlacement, toastPropStatus, toastStackDirection } from "./components/ToastProvider/types.js";
+import { Breadcrumbs } from "./components/Breadcrumbs/Breadcrumbs.js";
+import { breadcrumbsPropOverflowMode, breadcrumbsPropSize } from "./components/Breadcrumbs/types.js";
+import { BreadcrumbItem } from "./components/Breadcrumbs/components/BreadcrumbItem/BreadcrumbItem.js";
 import { flex, flexPropAlignItems, flexPropDirection, flexPropFlex, flexPropGap, flexPropJustifyContent, flexPropOrder, flexPropWrap } from "./components/layout/flex/flex.js";
 import { spacing, spacingGap } from "./components/layout/spacing/spacing.js";
 export {
@@ -108,6 +112,8 @@ export {
   Autocomplete,
   AutocompleteRender,
   Badge,
+  BreadcrumbItem,
+  Breadcrumbs,
   BreakpointsContext,
   BreakpointsProvider,
   Button,
@@ -127,6 +133,7 @@ export {
   FormContext,
   FormField,
   FormFieldCaption,
+  FormFieldClearButton,
   FormFieldComponent,
   FormFieldControlGroup,
   FormFieldControlGroupContext,
@@ -191,6 +198,8 @@ export {
   autocompletePropVariant,
   badgePropSize,
   badgePropVariant,
+  breadcrumbsPropOverflowMode,
+  breadcrumbsPropSize,
   buttonPropVariant,
   checkboxGroupPropLabelAlign,
   checkboxGroupPropLabelPlacement,

package/dist/style.css

@@ -606,6 +606,125 @@
 .kbq-formfield-side-9d854f {
   flex-direction: row;
 }
+.kbq-formfieldclearbutton-702863 {
+  opacity: 1;
+  transition: transform var(--kbq-transition-default), visibility var(--kbq-transition-default), opacity var(--kbq-transition-default);
+  transition-timing-function: cubic-bezier(.7, 0, .5, 1);
+  transform: scale(1);
+}
+
+.kbq-formfieldclearbutton-702863[aria-hidden="true"] {
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+  transform: scale(.5);
+}
+.kbq-iconbutton-0ff1bd {
+  --icon-button-size: ;
+  --icon-button-color: ;
+  --icon-button-padding: ;
+  --icon-button-color-hover: ;
+  --icon-button-color-active: ;
+  --icon-button-outline-color: transparent;
+  --icon-button-outline-width: var(--kbq-size-3xs);
+  --icon-button-bg-color: var(--kbq-background-transparent);
+  --icon-button-color-disabled: var(--kbq-states-icon-disabled);
+  cursor: pointer;
+  vertical-align: middle;
+  box-sizing: border-box;
+  color: var(--icon-button-color);
+  block-size: var(--icon-button-size);
+  padding: var(--icon-button-padding);
+  inline-size: var(--icon-button-size);
+  background-color: var(--icon-button-bg-color);
+  outline-offset: calc(-1 * var(--icon-button-outline-width) / 2);
+  outline: var(--icon-button-outline-width) solid var(--icon-button-outline-color);
+  transition: outline-color var(--kbq-transition-default), color var(--kbq-transition-default);
+  font-size: var(--kbq-typography-text-normal-medium-font-size);
+  font-weight: var(--kbq-typography-text-normal-medium-font-weight);
+  line-height: var(--kbq-typography-text-normal-medium-line-height);
+  font-family: var(--kbq-typography-text-normal-medium-font-family);
+  font-style: var(--kbq-typography-text-normal-medium-font-style);
+  text-transform: var(--kbq-typography-text-normal-medium-text-transform);
+  font-feature-settings: var(--kbq-typography-text-normal-medium-font-feature-settings);
+  letter-spacing: var(--kbq-typography-text-normal-medium-letter-spacing);
+  text-underline-offset: calc(( var(--kbq-typography-text-normal-medium-line-height)  - var(--kbq-typography-text-normal-medium-font-size)) / 2);
+  border: none;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  display: inline-flex;
+}
+
+.kbq-iconbutton-l-2f8f66 {
+  --icon-button-size: 24px;
+  --icon-button-padding: var(--kbq-size-xxs);
+}
+
+.kbq-iconbutton-xl-7ea358 {
+  --icon-button-size: 24px;
+  --icon-button-padding: 0;
+}
+
+.kbq-iconbutton-compact-1a8941:where(.kbq-iconbutton-l-2f8f66) {
+  --icon-button-size: 16px;
+  --icon-button-padding: 0;
+}
+
+.kbq-iconbutton-hovered-daeb15 {
+  color: var(--icon-button-color-hover);
+}
+
+.kbq-iconbutton-pressed-cd5790 {
+  color: var(--icon-button-color-active);
+}
+
+.kbq-iconbutton-focusVisible-fe4d04 {
+  --icon-button-outline-color: var(--kbq-states-line-focus-theme);
+}
+
+.kbq-iconbutton-disabled-d2beb1 {
+  cursor: not-allowed;
+  color: var(--icon-button-color-disabled);
+}
+
+.kbq-iconbutton-theme-932771 {
+  --icon-button-color: var(--kbq-icon-theme);
+  --icon-button-color-hover: var(--kbq-states-icon-theme-hover);
+  --icon-button-color-active: var(--kbq-states-icon-theme-active);
+}
+
+.kbq-iconbutton-theme-contrast-6258bb {
+  --icon-button-color: var(--kbq-icon-contrast);
+  --icon-button-color-hover: var(--kbq-states-icon-contrast-hover);
+  --icon-button-color-active: var(--kbq-states-icon-contrast-active);
+}
+
+.kbq-iconbutton-fade-contrast-4e4d6d {
+  --icon-button-color: var(--kbq-icon-contrast-fade);
+  --icon-button-color-hover: var(--kbq-states-icon-contrast-fade-hover);
+  --icon-button-color-active: var(--kbq-states-icon-contrast-fade-active);
+}
+
+.kbq-iconbutton-error-8e5261 {
+  --icon-button-color: var(--kbq-icon-error);
+  --icon-button-color-hover: var(--kbq-states-icon-error-hover);
+  --icon-button-color-active: var(--kbq-states-icon-error-active);
+}
+
+.kbq-iconbutton-success-4c701d {
+  --icon-button-color: var(--kbq-icon-success);
+  --icon-button-color-hover: var(--kbq-states-icon-success-hover);
+  --icon-button-color-active: var(--kbq-states-icon-success-active);
+}
+
+.kbq-iconbutton-warning-a2092b {
+  --icon-button-color: var(--kbq-icon-warning);
+  --icon-button-color-hover: var(--kbq-states-icon-warning-hover);
+  --icon-button-color-active: var(--kbq-states-icon-warning-active);
+}
 .kbq-alert-bc5d04 {
   --alert-padding: 0 var(--kbq-size-s) 0 var(--kbq-size-s);
   --alert-content-padding: var(--kbq-size-l) var(--kbq-size-s) var(--kbq-size-l) var(--kbq-size-m);
@@ -727,112 +846,6 @@
   --alert-icon-margin: calc(var(--kbq-size-m)  + var(--kbq-size-3xs)) var(--kbq-size-s) 0 0;
   background: none;
 }
-.kbq-iconbutton-0ff1bd {
-  --icon-button-size: ;
-  --icon-button-color: ;
-  --icon-button-padding: ;
-  --icon-button-color-hover: ;
-  --icon-button-color-active: ;
-  --icon-button-outline-color: transparent;
-  --icon-button-outline-width: var(--kbq-size-3xs);
-  --icon-button-bg-color: var(--kbq-background-transparent);
-  --icon-button-color-disabled: var(--kbq-states-icon-disabled);
-  cursor: pointer;
-  vertical-align: middle;
-  box-sizing: border-box;
-  color: var(--icon-button-color);
-  block-size: var(--icon-button-size);
-  padding: var(--icon-button-padding);
-  inline-size: var(--icon-button-size);
-  background-color: var(--icon-button-bg-color);
-  outline-offset: calc(-1 * var(--icon-button-outline-width) / 2);
-  outline: var(--icon-button-outline-width) solid var(--icon-button-outline-color);
-  transition: outline-color var(--kbq-transition-default), color var(--kbq-transition-default);
-  font-size: var(--kbq-typography-text-normal-medium-font-size);
-  font-weight: var(--kbq-typography-text-normal-medium-font-weight);
-  line-height: var(--kbq-typography-text-normal-medium-line-height);
-  font-family: var(--kbq-typography-text-normal-medium-font-family);
-  font-style: var(--kbq-typography-text-normal-medium-font-style);
-  text-transform: var(--kbq-typography-text-normal-medium-text-transform);
-  font-feature-settings: var(--kbq-typography-text-normal-medium-font-feature-settings);
-  letter-spacing: var(--kbq-typography-text-normal-medium-letter-spacing);
-  text-underline-offset: calc(( var(--kbq-typography-text-normal-medium-line-height)  - var(--kbq-typography-text-normal-medium-font-size)) / 2);
-  border: none;
-  flex-wrap: nowrap;
-  flex-shrink: 0;
-  justify-content: center;
-  align-items: center;
-  text-decoration: none;
-  display: inline-flex;
-}
-
-.kbq-iconbutton-l-2f8f66 {
-  --icon-button-size: 24px;
-  --icon-button-padding: var(--kbq-size-xxs);
-}
-
-.kbq-iconbutton-xl-7ea358 {
-  --icon-button-size: 24px;
-  --icon-button-padding: 0;
-}
-
-.kbq-iconbutton-compact-1a8941:where(.kbq-iconbutton-l-2f8f66) {
-  --icon-button-size: 16px;
-  --icon-button-padding: 0;
-}
-
-.kbq-iconbutton-hovered-daeb15 {
-  color: var(--icon-button-color-hover);
-}
-
-.kbq-iconbutton-pressed-cd5790 {
-  color: var(--icon-button-color-active);
-}
-
-.kbq-iconbutton-focusVisible-fe4d04 {
-  --icon-button-outline-color: var(--kbq-states-line-focus-theme);
-}
-
-.kbq-iconbutton-disabled-d2beb1 {
-  cursor: not-allowed;
-  color: var(--icon-button-color-disabled);
-}
-
-.kbq-iconbutton-theme-932771 {
-  --icon-button-color: var(--kbq-icon-theme);
-  --icon-button-color-hover: var(--kbq-states-icon-theme-hover);
-  --icon-button-color-active: var(--kbq-states-icon-theme-active);
-}
-
-.kbq-iconbutton-theme-contrast-6258bb {
-  --icon-button-color: var(--kbq-icon-contrast);
-  --icon-button-color-hover: var(--kbq-states-icon-contrast-hover);
-  --icon-button-color-active: var(--kbq-states-icon-contrast-active);
-}
-
-.kbq-iconbutton-fade-contrast-4e4d6d {
-  --icon-button-color: var(--kbq-icon-contrast-fade);
-  --icon-button-color-hover: var(--kbq-states-icon-contrast-fade-hover);
-  --icon-button-color-active: var(--kbq-states-icon-contrast-fade-active);
-}
-
-.kbq-iconbutton-error-8e5261 {
-  --icon-button-color: var(--kbq-icon-error);
-  --icon-button-color-hover: var(--kbq-states-icon-error-hover);
-  --icon-button-color-active: var(--kbq-states-icon-error-active);
-}
-
-.kbq-iconbutton-success-4c701d {
-  --icon-button-color: var(--kbq-icon-success);
-  --icon-button-color-hover: var(--kbq-states-icon-success-hover);
-  --icon-button-color-active: var(--kbq-states-icon-success-active);
-}
-
-.kbq-iconbutton-warning-a2092b {
-  --icon-button-color: var(--kbq-icon-warning);
-  --icon-button-color-hover: var(--kbq-states-icon-warning-hover);
-  --icon-button-color-active: var(--kbq-states-icon-warning-active);
-}
 .kbq-button-d95067 {
   --button-gap: var(--kbq-size-xxs);
   --button-border-color: transparent;
@@ -2338,14 +2351,6 @@
   --badge-bg-color: ;
   --badge-color: var(--kbq-foreground-contrast);
 }
-.kbq-input-hasStartAddon-fac70d {
-  --field-padding-inline-start: 36px;
-}
-
-.kbq-input-hasEndAddon-12fbf6 {
-  --field-padding-inline-end: 36px;
-}
-
 .kbq-input-body-3b6f04 {
   inline-size: 100%;
   min-inline-size: fit-content;
@@ -3470,7 +3475,7 @@
   align-self: center;
 }
 
-.kbq-taggroup-hidden-eadb46 {
+:is(.kbq-taggroup-tag-b9306f, .kbq-taggroup-more-b2d6b9)[aria-hidden="true"] {
   visibility: hidden;
   position: absolute;
   inset-inline-start: -300vw;
@@ -4680,6 +4685,7 @@
 .kbq-toastregion-2d9efe {
   z-index: var(--kbq-layer-toast);
   border-radius: var(--kbq-size-s);
+  flex-direction: column;
   display: flex;
   position: fixed;
 }
@@ -4688,19 +4694,11 @@
   outline: var(--kbq-size-3xs) solid var(--kbq-states-line-focus-theme);
 }
 
-.kbq-toastregion-ascending-806126 {
-  flex-direction: column-reverse;
-}
-
-.kbq-toastregion-descending-4995b5 {
-  flex-direction: column;
-}
-
 .kbq-toastregion-2d9efe:where([data-placement^="top"].kbq-toastregion-ascending-806126) > * {
   margin-block-end: var(--kbq-size-s);
 }
 
-.kbq-toastregion-2d9efe:where([data-placement^="top"].kbq-toastregion-ascending-806126) > *:first-child {
+.kbq-toastregion-2d9efe:where([data-placement^="top"].kbq-toastregion-ascending-806126) > *:last-child {
   margin-block-end: 0;
 }
 
@@ -4708,7 +4706,7 @@
   margin-block-start: var(--kbq-size-s);
 }
 
-.kbq-toastregion-2d9efe:where([data-placement^="bottom"].kbq-toastregion-ascending-806126) > *:last-child {
+.kbq-toastregion-2d9efe:where([data-placement^="bottom"].kbq-toastregion-ascending-806126) > *:first-child {
   margin-block-start: 0;
 }
 
@@ -4761,12 +4759,12 @@
 }
 .kbq-toast-1ed9c8 {
   --toast-inline-size: 360px;
+  --toast-transition-z-index: ;
   --toast-transition-duration: .3s;
-  --toast-outline-color: transparent;
   --toast-transition-block-size: 0;
-  --toast-outline-width: var(--kbq-size-3xs);
   border-radius: var(--kbq-size-s);
   inline-size: var(--toast-inline-size);
+  z-index: var(--toast-transition-z-index);
   transition: margin-block-end var(--kbq-transition-slow), margin-block-start var(--kbq-transition-slow), block-size var(--kbq-transition-slow);
   will-change: margin-bottom, margin-top, block-size;
   transition-duration: var(--toast-transition-duration);
@@ -4774,22 +4772,6 @@
   position: relative;
 }
 
-.kbq-toast-1ed9c8:focus-visible {
-  --toast-outline-color: var(--kbq-states-line-focus-theme);
-}
-
-.kbq-toast-1ed9c8:after {
-  content: "";
-  pointer-events: none;
-  border-radius: inherit;
-  z-index: var(--kbq-layer-absolute);
-  transition: outline-color var(--kbq-transition-default);
-  outline-offset: calc(-1 * var(--toast-outline-width) / 2);
-  outline: var(--toast-outline-width) solid var(--toast-outline-color);
-  position: absolute;
-  inset: 0;
-}
-
 .kbq-toast-1ed9c8[data-placement^="bottom"] {
   --toast-wrapper-inset-block-end: 0;
 }
@@ -4884,6 +4866,223 @@
 .kbq-toaststatusicon-success-acdec0 {
   --kbq-toast-icon-color: var(--kbq-icon-success);
 }
+.kbq-breadcrumbs-922b6f {
+  --breadcrumbs-wrap: ;
+  --breadcrumb-padding-inline: var(--kbq-size-xs);
+  --breadcrumb-padding-block: var(--kbq-size-3xs);
+  inline-size: 100%;
+}
+
+.kbq-breadcrumbs-wrap-352442 {
+  --breadcrumbs-wrap: wrap;
+}
+
+.kbq-breadcrumbs-list-ab1ac2 {
+  flex-wrap: var(--breadcrumbs-wrap);
+  inline-size: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+.kbq-breadcrumbs-compact-2a6f3a {
+  font-size: var(--kbq-typography-text-normal-font-size);
+  font-weight: var(--kbq-typography-text-normal-font-weight);
+  line-height: var(--kbq-typography-text-normal-line-height);
+  font-family: var(--kbq-typography-text-normal-font-family);
+  font-style: var(--kbq-typography-text-normal-font-style);
+  text-transform: var(--kbq-typography-text-normal-text-transform);
+  font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
+  letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
+  text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height)  - var(--kbq-typography-text-normal-font-size)) / 2);
+}
+
+.kbq-breadcrumbs-normal-47d2bc {
+  font-size: var(--kbq-typography-text-big-font-size);
+  font-weight: var(--kbq-typography-text-big-font-weight);
+  line-height: var(--kbq-typography-text-big-line-height);
+  font-family: var(--kbq-typography-text-big-font-family);
+  font-style: var(--kbq-typography-text-big-font-style);
+  text-transform: var(--kbq-typography-text-big-text-transform);
+  font-feature-settings: var(--kbq-typography-text-big-font-feature-settings);
+  letter-spacing: var(--kbq-typography-text-big-letter-spacing);
+  text-underline-offset: calc(( var(--kbq-typography-text-big-line-height)  - var(--kbq-typography-text-big-font-size)) / 2);
+}
+
+.kbq-breadcrumbs-big-b56335 {
+  font-size: var(--kbq-typography-subheading-font-size);
+  font-weight: var(--kbq-typography-subheading-font-weight);
+  line-height: var(--kbq-typography-subheading-line-height);
+  font-family: var(--kbq-typography-subheading-font-family);
+  font-style: var(--kbq-typography-subheading-font-style);
+  text-transform: var(--kbq-typography-subheading-text-transform);
+  font-feature-settings: var(--kbq-typography-subheading-font-feature-settings);
+  letter-spacing: var(--kbq-typography-subheading-letter-spacing);
+  text-underline-offset: calc(( var(--kbq-typography-subheading-line-height)  - var(--kbq-typography-subheading-font-size)) / 2);
+}
+
+.kbq-breadcrumbs-item-bcbc6b {
+  white-space: nowrap;
+  box-sizing: border-box;
+  align-items: center;
+  display: inline-flex;
+}
+
+.kbq-breadcrumbs-ellipsis-60de4d {
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+:is(.kbq-breadcrumbs-item-bcbc6b, .kbq-breadcrumbs-ellipsis-60de4d)[aria-hidden="true"] {
+  visibility: hidden;
+  position: absolute;
+  inset-inline-start: -300vw;
+}
+
+.kbq-breadcrumbs-divider-31522f {
+  -webkit-user-select: none;
+  user-select: none;
+  min-inline-size: var(--kbq-size-m);
+  margin-inline: var(--breadcrumb-padding-inline);
+  color: var(--kbq-states-foreground-disabled);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+.kbq-breadcrumbitem-c1599d {
+  --breadcrumb-color: var(--kbq-foreground-contrast-secondary);
+  --breadcrumb-outline-width: var(--kbq-size-3xs);
+  --breadcrumb-outline-color: transparent;
+  --breadcrumb-size: ;
+  --breadcrumb-inline-size: ;
+  --breadcrumb-bg-color: ;
+  cursor: pointer;
+  box-sizing: border-box;
+  justify-content: center;
+  align-items: center;
+  gap: var(--kbq-size-xs);
+  color: var(--breadcrumb-color);
+  border-radius: var(--kbq-size-xs);
+  background-color: var(--breadcrumb-bg-color);
+  outline: var(--breadcrumb-outline-width) solid;
+  outline-color: var(--breadcrumb-outline-color);
+  block-size: var(--breadcrumb-size);
+  min-block-size: var(--breadcrumb-size);
+  min-inline-size: var(--breadcrumb-size);
+  margin-inline: calc(-1 * var(--breadcrumb-padding-inline));
+  transition: color var(--kbq-transition-default), outline var(--kbq-transition-default), background-color var(--kbq-transition-default);
+  padding: var(--breadcrumb-padding-block) var(--breadcrumb-padding-inline);
+  border: none;
+  flex-wrap: nowrap;
+  text-decoration: none;
+  display: flex;
+}
+
+.kbq-breadcrumbitem-c1599d > * {
+  flex-shrink: 0;
+}
+
+.kbq-breadcrumbitem-hovered-985b33 {
+  --breadcrumb-bg-color: var(--kbq-states-background-transparent-hover);
+}
+
+.kbq-breadcrumbitem-pressed-80b3fe, [aria-expanded="true"] {
+  --breadcrumb-bg-color: var(--kbq-states-background-transparent-active);
+}
+
+.kbq-breadcrumbitem-focusVisible-16d3f1 {
+  --breadcrumb-outline-color: var(--kbq-states-line-focus-theme);
+}
+
+.kbq-breadcrumbitem-disabled-a307b2 {
+  --breadcrumb-color: var(--kbq-states-foreground-disabled);
+  cursor: not-allowed;
+  text-decoration: none;
+}
+
+.kbq-breadcrumbitem-current-f87edc {
+  --breadcrumb-bg-color: ;
+  --breadcrumb-color: var(--kbq-foreground-contrast);
+  cursor: default;
+}
+
+.kbq-breadcrumbitem-compact-71772d {
+  font-size: var(--kbq-typography-text-normal-font-size);
+  font-weight: var(--kbq-typography-text-normal-font-weight);
+  line-height: var(--kbq-typography-text-normal-line-height);
+  font-family: var(--kbq-typography-text-normal-font-family);
+  font-style: var(--kbq-typography-text-normal-font-style);
+  text-transform: var(--kbq-typography-text-normal-text-transform);
+  font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
+  letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
+  text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height)  - var(--kbq-typography-text-normal-font-size)) / 2);
+  --breadcrumb-size: var(--kbq-size-xxl);
+}
+
+.kbq-breadcrumbitem-normal-548b3c {
+  font-size: var(--kbq-typography-text-big-font-size);
+  font-weight: var(--kbq-typography-text-big-font-weight);
+  line-height: var(--kbq-typography-text-big-line-height);
+  font-family: var(--kbq-typography-text-big-font-family);
+  font-style: var(--kbq-typography-text-big-font-style);
+  text-transform: var(--kbq-typography-text-big-text-transform);
+  font-feature-settings: var(--kbq-typography-text-big-font-feature-settings);
+  letter-spacing: var(--kbq-typography-text-big-letter-spacing);
+  text-underline-offset: calc(( var(--kbq-typography-text-big-line-height)  - var(--kbq-typography-text-big-font-size)) / 2);
+  --breadcrumb-size: var(--kbq-size-3xl);
+}
+
+.kbq-breadcrumbitem-big-7dc306 {
+  font-size: var(--kbq-typography-subheading-font-size);
+  font-weight: var(--kbq-typography-subheading-font-weight);
+  line-height: var(--kbq-typography-subheading-line-height);
+  font-family: var(--kbq-typography-subheading-font-family);
+  font-style: var(--kbq-typography-subheading-font-style);
+  text-transform: var(--kbq-typography-subheading-text-transform);
+  font-feature-settings: var(--kbq-typography-subheading-font-feature-settings);
+  letter-spacing: var(--kbq-typography-subheading-letter-spacing);
+  text-underline-offset: calc(( var(--kbq-typography-subheading-line-height)  - var(--kbq-typography-subheading-font-size)) / 2);
+  --breadcrumb-size: var(--kbq-size-3xl);
+}
+
+.kbq-breadcrumbitem-compact-71772d:where(.kbq-breadcrumbitem-current-f87edc) {
+  font-size: var(--kbq-typography-text-normal-medium-font-size);
+  font-weight: var(--kbq-typography-text-normal-medium-font-weight);
+  line-height: var(--kbq-typography-text-normal-medium-line-height);
+  font-family: var(--kbq-typography-text-normal-medium-font-family);
+  font-style: var(--kbq-typography-text-normal-medium-font-style);
+  text-transform: var(--kbq-typography-text-normal-medium-text-transform);
+  font-feature-settings: var(--kbq-typography-text-normal-medium-font-feature-settings);
+  letter-spacing: var(--kbq-typography-text-normal-medium-letter-spacing);
+  text-underline-offset: calc(( var(--kbq-typography-text-normal-medium-line-height)  - var(--kbq-typography-text-normal-medium-font-size)) / 2);
+}
+
+.kbq-breadcrumbitem-normal-548b3c:where(.kbq-breadcrumbitem-current-f87edc) {
+  font-size: var(--kbq-typography-text-big-medium-font-size);
+  font-weight: var(--kbq-typography-text-big-medium-font-weight);
+  line-height: var(--kbq-typography-text-big-medium-line-height);
+  font-family: var(--kbq-typography-text-big-medium-font-family);
+  font-style: var(--kbq-typography-text-big-medium-font-style);
+  text-transform: var(--kbq-typography-text-big-medium-text-transform);
+  font-feature-settings: var(--kbq-typography-text-big-medium-font-feature-settings);
+  letter-spacing: var(--kbq-typography-text-big-medium-letter-spacing);
+  text-underline-offset: calc(( var(--kbq-typography-text-big-medium-line-height)  - var(--kbq-typography-text-big-medium-font-size)) / 2);
+}
+
+.kbq-breadcrumbitem-big-7dc306:where(.kbq-breadcrumbitem-current-f87edc) {
+  font-size: var(--kbq-typography-subheading-font-size);
+  font-weight: var(--kbq-typography-subheading-font-weight);
+  line-height: var(--kbq-typography-subheading-line-height);
+  font-family: var(--kbq-typography-subheading-font-family);
+  font-style: var(--kbq-typography-subheading-font-style);
+  text-transform: var(--kbq-typography-subheading-text-transform);
+  font-feature-settings: var(--kbq-typography-subheading-font-feature-settings);
+  letter-spacing: var(--kbq-typography-subheading-letter-spacing);
+  text-underline-offset: calc(( var(--kbq-typography-subheading-line-height)  - var(--kbq-typography-subheading-font-size)) / 2);
+}
 .kbq-spacing-mbs_0-be7021 {
   margin-block-start: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.19.0",
+  "version": "0.21.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -25,16 +25,16 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@koobiq/design-tokens": "^3.14.0",
+    "@koobiq/design-tokens": "^3.15.0",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/react-core": "0.19.0",
-    "@koobiq/logger": "0.19.0",
-    "@koobiq/react-primitives": "0.19.0",
-    "@koobiq/react-icons": "0.19.0"
+    "@koobiq/logger": "0.21.0",
+    "@koobiq/react-core": "0.21.0",
+    "@koobiq/react-icons": "0.21.0",
+    "@koobiq/react-primitives": "0.21.0"
   },
   "peerDependencies": {
-    "@koobiq/design-tokens": "^3.14.0",
+    "@koobiq/design-tokens": "^3.15.0",
     "react": "18.x || 19.x",
     "react-dom": "18.x || 19.x"
   },