@stack-spot/citric-react 0.21.0 → 0.23.0

package/dist/citric.css

@@ -481,6 +481,7 @@
 
   > nav {
     display: flex;
+    position: relative;
     border-bottom: 1px solid var(--light-600);
     > label {
       appearance: none;
@@ -515,6 +516,13 @@
     }
   }
 
+  &.equally-sized > nav > label {
+    padding: 8px 0;
+    flex: 1;
+    justify-content: center;
+    text-align: center;
+  }
+
   > section {
     display: flex;
     flex-direction: column;
@@ -1462,6 +1470,7 @@ input[type="range"][data-citric="slider"] {
 
 
 [data-citric="progress-bar"] {
+  --speed: 1s;
   border-radius: var(--radius-lg);
   width: 100%;
   height: 2px;
@@ -1477,8 +1486,12 @@ input[type="range"][data-citric="slider"] {
     background-color: var(--scheme-500, var(--palette-500, var(--primary-500)));
   }
 
+  &.fast {
+    --speed: 0.5s;
+  }
+
   &.indeterminate:after {
-    animation: progress-indeterminate-bar 1s infinite;
+    animation: progress-indeterminate-bar var(--speed) infinite;
   }
 }
 
@@ -1743,6 +1756,10 @@ nav[data-citric="menu"].rounded-items, [data-citric="menu"].rounded-items nav {
     -webkit-text-fill-color: var(--light-contrastText);
     box-shadow: inset 0 0 0 1000px var(--light-300);
   }
+
+  &::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
 }
 
 
@@ -2210,6 +2227,10 @@ input[data-citric="favorite"][type="checkbox"] {
   }
 }
 
+button[data-citric="card"] {
+  font: inherit;
+}
+
 
 .apply-citric button:not(.citric-icon),
 .apply-citric input[type="button"]:not(.citric-icon),
@@ -2222,8 +2243,7 @@ input[data-citric="favorite"][type="checkbox"] {
   align-items: center;
   background-color: var(--scheme-500, var(--primary-500));
   color: var(--scheme-contrastText, var(--primary-contrastText));
-  padding-inline: var(--spacing-3);
-  padding-block: var(--spacing-2);
+  padding: 4px 8px;
   font: var(--font-body2);
   font-weight: 500;
   border-radius: var(--radius-xs);
@@ -2231,11 +2251,17 @@ input[data-citric="favorite"][type="checkbox"] {
   justify-content: center;
   cursor: pointer;
   border: 1px solid var(--scheme-500, var(--primary-500));
-  gap: var(--spacing-2);
+  gap: var(--spacing-3);
   position: relative;
   text-decoration: none;
   outline: none;
 
+  /* Fixes alignment for buttons with icons */
+  &:not(.short-text):has(.citric-icon) {
+    padding: 5px 8px 3px;
+    .citric-icon { margin-top: -2px; }
+  }
+
   /* Appearances */
 
   &.outlined, &.text {

package/dist/components/Accordion.d.ts

@@ -28,5 +28,39 @@ export interface BaseAccordionProps {
     maxHeight?: number;
 }
 export type AccordionProps = Omit<React.JSX.IntrinsicElements['div'], 'onChange'> & BaseAccordionProps;
+/**
+ * Creates an accordion, showing/hiding the children according to the state of the expand/collapse checkbox.
+ *
+ * The accordion must define a max height, which is 300 by default (measured in pixels). Whenever the content surpasses "maxHeight", a
+ * vertical scroll is created. If your content is much shorter than "maxHeight", consider reducing its value for a better animation.
+ *
+ * @example
+ * A simple accordion, styled like a card:
+ * ```
+ * <Accordion appearance="card" header="This is the title of the accordion" maxHeight={80}>
+ *   <p>This is the content of the accordion</p>
+ * </Accordion>
+ * ```
+ *
+ * A more complex accordion:
+ * ```
+ * const header = (toggle: React.ReactElement) => (
+ *   <Row justifyContent="space-between" bg="cyan.500" border="cyan.700" radius="sm">
+ *     <ImageBox><img src="/my-image.png" /></ImageBox>
+ *     <Text>Joseph Clinton</Text>
+ *     <Text>40 years old</Text>
+ *     {toggle}
+ *   </Row>
+ * )
+ * return (
+ *   <Accordion header={header}>
+ *     <Center>
+ *       <img src="/an-image.png" />
+ *       <p>This is the content of the accordion</p>
+ *     </Center>
+ *   </Accordion>
+ * )
+ * ```
+ */
 export declare const Accordion: ({ id, appearance, expanded, onChange, header, maxHeight, className, style, children, ...props }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Accordion.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,MAAM,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,YAAY,EAAE,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAClF;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG,kBAAkB,CAAA;AAEtG,eAAO,MAAM,SAAS,oGACmF,cAAc,4CAqCrH,CAAA"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,MAAM,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,YAAY,EAAE,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAClF;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG,kBAAkB,CAAA;AAEtG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,SAAS,oGACmF,cAAc,4CAqCrH,CAAA"}

package/dist/components/Accordion.js

@@ -5,6 +5,40 @@ import { useEffect, useMemo, useState } from 'react';
 import { applyCSSVariable } from '../utils/css.js';
 import { withRef } from '../utils/react.js';
 import { CitricComponent } from './CitricComponent.js';
+/**
+ * Creates an accordion, showing/hiding the children according to the state of the expand/collapse checkbox.
+ *
+ * The accordion must define a max height, which is 300 by default (measured in pixels). Whenever the content surpasses "maxHeight", a
+ * vertical scroll is created. If your content is much shorter than "maxHeight", consider reducing its value for a better animation.
+ *
+ * @example
+ * A simple accordion, styled like a card:
+ * ```
+ * <Accordion appearance="card" header="This is the title of the accordion" maxHeight={80}>
+ *   <p>This is the content of the accordion</p>
+ * </Accordion>
+ * ```
+ *
+ * A more complex accordion:
+ * ```
+ * const header = (toggle: React.ReactElement) => (
+ *   <Row justifyContent="space-between" bg="cyan.500" border="cyan.700" radius="sm">
+ *     <ImageBox><img src="/my-image.png" /></ImageBox>
+ *     <Text>Joseph Clinton</Text>
+ *     <Text>40 years old</Text>
+ *     {toggle}
+ *   </Row>
+ * )
+ * return (
+ *   <Accordion header={header}>
+ *     <Center>
+ *       <img src="/an-image.png" />
+ *       <p>This is the content of the accordion</p>
+ *     </Center>
+ *   </Accordion>
+ * )
+ * ```
+ */
 export const Accordion = withRef(({ id, appearance, expanded, onChange, header, maxHeight = 300, className, style, children, ...props }) => {
     const t = useTranslate(dictionary);
     const [ariaHidden, setAriaHidden] = useState(!expanded);

package/dist/components/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAkCnD,MAAM,CAAC,MAAM,SAAS,GAAG,OAAO,CAAC,CAC/B,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,GAAG,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAkB,EACrH,EAAE;IACF,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;IACvD,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IAEjE,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,CAAC,QAAQ,CAAC,CAAA;IAC1B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,MAAM,SAAS,GAAG,gBAChB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,GAAG,EAAE;YACb,aAAa,CAAC,CAAC,UAAU,CAAC,CAAA;YAC1B,QAAQ,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAA;QACvB,CAAC,gBACW,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EACzC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EACpC,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAK,CAAC,CAAC,MAAsB,CAAC,KAAK,EAAE,EAAE,mBACzD,WAAW,GAC1B,CAAA;IACF,MAAM,aAAa,GAAG,OAAO,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,4BAAQ,MAAM,EAAE,SAAS,IAAS,CAAA;IAC3G,OAAO,CACL,MAAC,eAAe,IACd,GAAG,EAAC,KAAK,EACT,SAAS,EAAC,WAAW,EACrB,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,EAC/C,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,SAAS,IAAI,CAAC,KAC1D,KAAK,aAET,2BAAS,aAAa,GAAU,EAChC,kBAAS,EAAE,EAAE,WAAW,iBAAe,UAAU,KAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,YACzF,UAAU,KAAK,MAAM,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,SAAS,YAAE,QAAQ,GAAO,CAAC,CAAC,CAAC,QAAQ,GACrE,IACM,CACnB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,OAAO;KACf;IACD,EAAE,EAAE;QACF,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,QAAQ;KAChB;CACmB,CAAA"}
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":"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"}

package/dist/components/Alert.d.ts

@@ -6,5 +6,13 @@ export interface BaseAlertProps {
     type?: 'error' | 'info' | 'warning';
 }
 export type AlertProps = React.JSX.IntrinsicElements['div'] & BaseAlertProps;
+/**
+ * Renders an alert message with an icon and a background. This may be an error, warning or a success feedback.
+ *
+ * @example
+ * ```
+ * <Alert type="warning">My warning!</Alert>
+ * ```
+ */
 export declare const Alert: ({ type, className, children, ...props }: AlertProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Alert.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;CACrC;AAED,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,cAAc,CAAA;AAE5E,eAAO,MAAM,KAAK,4CAAqD,UAAU,4CACiD,CAAA"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;CACrC;AAED,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,cAAc,CAAA;AAE5E;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,4CAAqD,UAAU,4CACiD,CAAA"}

package/dist/components/Alert.js

@@ -2,5 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { listToClass } from '@stack-spot/portal-theme';
 import { withRef } from '../utils/react.js';
 import { CitricComponent } from './CitricComponent.js';
+/**
+ * Renders an alert message with an icon and a background. This may be an error, warning or a success feedback.
+ *
+ * @example
+ * ```
+ * <Alert type="warning">My warning!</Alert>
+ * ```
+ */
 export const Alert = withRef(({ type, className, children, ...props }) => _jsx(CitricComponent, { tag: "div", component: "alert", className: listToClass([type, className]), ...props, children: children }));
 //# sourceMappingURL=Alert.js.map

package/dist/components/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAYnD,MAAM,CAAC,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAc,EAAE,EAAE,CACnF,KAAC,eAAe,IAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,KAAM,KAAK,YAAG,QAAQ,GAAmB,CAAC,CAAA"}
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAYnD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAc,EAAE,EAAE,CACnF,KAAC,eAAe,IAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,KAAM,KAAK,YAAG,QAAQ,GAAmB,CAAC,CAAA"}

package/dist/components/AsyncContent.d.ts

@@ -19,11 +19,25 @@ interface Props {
     children: React.ReactNode;
 }
 /**
- * Renders a component that provides user feedback on async requests.
- * It renders either a loading component, an error component (which is received as prop)
- * or the received children props.
+ * Renders a component that provides user feedback on async requests. It renders either a loading component, an error component or its
+ * children.
  *
- * @param options the props for rendering the component: {@link Props}.
+ * The loading and error views can be customized through a CitricController.
+ *
+ * Errors can be watched through the function `onError` of a CitricController.
+ *
+ * Attention: for React Suspense, use the component "FallbackBoundary" instead.
+ *
+ * @example
+ * ```
+ * const [data, isLoading, error] = useRemoteData()
+ *
+ * return (
+ *   <AsyncContent loading={isLoading} error={error}>
+ *     {data}
+ *   </AsyncContent>
+ * )
+ * ```
  */
 export declare const AsyncContent: ({ loading, error, autofocus, children }: Props) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"AsyncContent.d.ts","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAA8B,MAAM,OAAO,CAAA;AAMpE,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACnD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;GAMG;AAEH,eAAO,MAAM,YAAY,4CAAqD,KAAK,iIAoBjF,CAAA"}
+{"version":3,"file":"AsyncContent.d.ts","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAA8B,MAAM,OAAO,CAAA;AAMpE,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACnD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,eAAO,MAAM,YAAY,4CAAqD,KAAK,iIAoBjF,CAAA"}

package/dist/components/AsyncContent.js

@@ -5,11 +5,25 @@ import { withRef } from '../utils/react.js';
 import { ErrorMessage } from './ErrorMessage.js';
 import { LoadingPanel } from './LoadingPanel.js';
 /**
- * Renders a component that provides user feedback on async requests.
- * It renders either a loading component, an error component (which is received as prop)
- * or the received children props.
+ * Renders a component that provides user feedback on async requests. It renders either a loading component, an error component or its
+ * children.
  *
- * @param options the props for rendering the component: {@link Props}.
+ * The loading and error views can be customized through a CitricController.
+ *
+ * Errors can be watched through the function `onError` of a CitricController.
+ *
+ * Attention: for React Suspense, use the component "FallbackBoundary" instead.
+ *
+ * @example
+ * ```
+ * const [data, isLoading, error] = useRemoteData()
+ *
+ * return (
+ *   <AsyncContent loading={isLoading} error={error}>
+ *     {data}
+ *   </AsyncContent>
+ * )
+ * ```
  */
 export const AsyncContent = withRef(({ loading, error, autofocus, children }) => {
     const citric = useCitricController();

package/dist/components/AsyncContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AsyncContent.js","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoB,SAAS,EAAE,eAAe,EAAE,MAAM,OAAO,CAAA;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAsB7C;;;;;;GAMG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAS,EAAE,EAAE;IACrF,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;YACxB,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC;YACvB,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAiB,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;QAC7H,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAA;IAEpB,IAAI,OAAO;QAAE,OAAO,KAAC,YAAY,KAAG,CAAA;IACpC,IAAI,KAAK;QAAE,OAAO,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,CAAA;IAClG,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAC,CAAA"}
+{"version":3,"file":"AsyncContent.js","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoB,SAAS,EAAE,eAAe,EAAE,MAAM,OAAO,CAAA;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAsB7C;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAS,EAAE,EAAE;IACrF,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;YACxB,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC;YACvB,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAiB,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;QAC7H,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAA;IAEpB,IAAI,OAAO;QAAE,OAAO,KAAC,YAAY,KAAG,CAAA;IACpC,IAAI,KAAK;QAAE,OAAO,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,CAAA;IAClG,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAC,CAAA"}

package/dist/components/Avatar.d.ts

@@ -18,5 +18,14 @@ export interface BaseAvatarProps extends WithColorPalette {
     image?: string;
 }
 export type AvatarProps = React.JSX.IntrinsicElements['div'] & BaseAvatarProps;
+/**
+ * Renders an avatar. If an image is provided it's rendered within the space reserved to the avatar, otherwise, the initial of the names
+ * are used.
+ *
+ * @example
+ * ```
+ * <Avatar name="Rick Sanchez" />
+ * ```
+ */
 export declare const Avatar: ({ size, name, appearance, className, image, ...props }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Avatar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAI3C,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,eAAe,CAAA;AAE9E,eAAO,MAAM,MAAM,2DAAoE,WAAW,4CAQhG,CAAA"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAK3C,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,eAAe,CAAA;AAE9E;;;;;;;;GAQG;AACH,eAAO,MAAM,MAAM,2DAAoE,WAAW,4CAQhG,CAAA"}

package/dist/components/Avatar.js

@@ -2,9 +2,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { listToClass } from '@stack-spot/portal-theme';
 import { withRef } from '../utils/react.js';
 import { CitricComponent } from './CitricComponent.js';
+import { ImageWithFallback } from './ImageWithFallback.js';
+/**
+ * Renders an avatar. If an image is provided it's rendered within the space reserved to the avatar, otherwise, the initial of the names
+ * are used.
+ *
+ * @example
+ * ```
+ * <Avatar name="Rick Sanchez" />
+ * ```
+ */
 export const Avatar = withRef(({ size, name, appearance, className, image, ...props }) => {
     const parts = name?.split(' ') ?? [''];
     const acronym = parts.length >= 2 ? `${parts[0][0]}${parts[1][0]}` : parts[0][0];
-    return (_jsx(CitricComponent, { tag: "div", component: "avatar", className: listToClass([size, appearance, className]), ...props, children: image ? _jsx("img", { src: image }) : acronym }));
+    return (_jsx(CitricComponent, { tag: "div", component: "avatar", className: listToClass([size, appearance, className]), ...props, children: _jsx(ImageWithFallback, { src: image, fallback: acronym }) }));
 });
 //# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAuBnD,MAAM,CAAC,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE;IACpG,MAAM,KAAK,GAAG,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IACtC,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAChF,OAAO,CACL,KAAC,eAAe,IAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,KAAM,KAAK,YAC3G,KAAK,CAAC,CAAC,CAAC,cAAK,GAAG,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,OAAO,GACtB,CACnB,CAAA;AACH,CAAC,CAAC,CAAA"}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAuBvD;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE;IACpG,MAAM,KAAK,GAAG,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IACtC,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAChF,OAAO,CACL,KAAC,eAAe,IAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,KAAM,KAAK,YAC5G,KAAC,iBAAiB,IAAC,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,GAAI,GACpC,CACnB,CAAA;AACH,CAAC,CAAC,CAAA"}

package/dist/components/AvatarGroup.d.ts

@@ -21,5 +21,13 @@ export interface BaseAvatarGroupProps extends WithColorPalette {
     maxItems?: number;
 }
 export type AvatarGroupProps = React.JSX.IntrinsicElements['div'] & BaseAvatarGroupProps;
+/**
+ * Stacks a group of avatars horizontally.
+ *
+ * @example
+ * ```
+ * <AvatarGroup items={[{ name: 'John Smith' }, { name: 'Mary Anne', image: 'https://profile.com/123.png' }]} />
+ * ```
+ */
 export declare const AvatarGroup: ({ size, items, appearance, maxItems, className, ...props }: AvatarGroupProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AvatarGroup.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../src/components/AvatarGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAK3C,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAC5D;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,KAAK,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC3C;;QAEI;IACJ,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,oBAAoB,CAAA;AAExF,eAAO,MAAM,WAAW,+DAAwE,gBAAgB,4CAa9G,CAAA"}
+{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../src/components/AvatarGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAK3C,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAC5D;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,KAAK,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC3C;;QAEI;IACJ,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,oBAAoB,CAAA;AAExF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,+DAAwE,gBAAgB,4CAa9G,CAAA"}

package/dist/components/AvatarGroup.js

@@ -3,6 +3,14 @@ import { listToClass } from '@stack-spot/portal-theme';
 import { withRef } from '../utils/react.js';
 import { Avatar } from './Avatar.js';
 import { CitricComponent } from './CitricComponent.js';
+/**
+ * Stacks a group of avatars horizontally.
+ *
+ * @example
+ * ```
+ * <AvatarGroup items={[{ name: 'John Smith' }, { name: 'Mary Anne', image: 'https://profile.com/123.png' }]} />
+ * ```
+ */
 export const AvatarGroup = withRef(({ size, items, appearance, maxItems, className, ...props }) => {
     const avatars = items.map(({ name, image }) => _jsx(Avatar, { name: name, image: image }, name), [items]);
     return (_jsx(CitricComponent, { tag: "div", component: "avatar-group", className: listToClass([size, appearance, className]), "data-max-items": maxItems, ...props, children: avatars }));

package/dist/components/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../src/components/AvatarGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAuBnD,MAAM,CAAC,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoB,EAAE,EAAE;IAClH,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAC,MAAM,IAAY,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,IAA9B,IAAI,CAA8B,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IACxG,OAAO,CACL,KAAC,eAAe,IACd,GAAG,EAAC,KAAK,EACT,SAAS,EAAC,cAAc,EACxB,SAAS,EAAE,WAAW,CAAC,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,oBACrC,QAAQ,KACpB,KAAK,YAER,OAAO,GACQ,CACnB,CAAA;AACH,CAAC,CAAC,CAAA"}
+{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../src/components/AvatarGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAuBnD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoB,EAAE,EAAE;IAClH,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAC,MAAM,IAAY,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,IAA9B,IAAI,CAA8B,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IACxG,OAAO,CACL,KAAC,eAAe,IACd,GAAG,EAAC,KAAK,EACT,SAAS,EAAC,cAAc,EACxB,SAAS,EAAE,WAAW,CAAC,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,oBACrC,QAAQ,KACpB,KAAK,YAER,OAAO,GACQ,CACnB,CAAA;AACH,CAAC,CAAC,CAAA"}

package/dist/components/Badge.d.ts

@@ -13,7 +13,18 @@ export interface BaseBadgeProps<T extends ValidTags = ValidTags> extends WithCol
     appearance?: 'square' | 'circle';
 }
 export type BadgeProps<T extends ValidTags> = HTMLTag[T] & BaseBadgeProps<T>;
-declare function _Badge<T extends ValidTags>({ tag, appearance, className, children, ...props }: BadgeProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare const Badge: typeof _Badge;
+/**
+ * Renders a badge. Badges have different color grades depending if they're focusable or not. Use `colorPalette` do determine the main
+ * color.
+ *
+ * @example
+ * ```
+ * <Badge>
+ *   <Icon icon="PlusMini" />
+ *   My first badge
+ * </Badge>
+ * ```
+ */
+export declare const Badge: <T extends ValidTags>({ tag, appearance, className, children, ...props }: BadgeProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Badge.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAIpD,KAAK,SAAS,GAAG,GAAG,GAAG,QAAQ,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAA;AAEvD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,CAAE,SAAQ,gBAAgB;IACvF;;OAEG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAClC;AAED,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,SAAS,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAA;AAE5E,iBAAS,MAAM,CAAC,CAAC,SAAS,SAAS,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC,2CAMrG;AAED,eAAO,MAAM,KAAK,eAAkB,CAAA"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAIpD,KAAK,SAAS,GAAG,GAAG,GAAG,QAAQ,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAA;AAEvD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,CAAE,SAAQ,gBAAgB;IACvF;;OAEG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAClC;AAED,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,SAAS,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAA;AAE5E;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,KAAK,GACD,CAAC,SAAS,SAAS,sDAAsD,UAAU,CAAC,CAAC,CAAC,4CAOtG,CAAA"}

package/dist/components/Badge.js

@@ -2,8 +2,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { listToClass } from '@stack-spot/portal-theme';
 import { withRef } from '../utils/react.js';
 import { CitricComponent } from './CitricComponent.js';
-function _Badge({ tag, appearance, className, children, ...props }) {
+/**
+ * Renders a badge. Badges have different color grades depending if they're focusable or not. Use `colorPalette` do determine the main
+ * color.
+ *
+ * @example
+ * ```
+ * <Badge>
+ *   <Icon icon="PlusMini" />
+ *   My first badge
+ * </Badge>
+ * ```
+ */
+export const Badge = withRef(function Badge({ tag, appearance, className, children, ...props }) {
     return (_jsx(CitricComponent, { tag: tag || 'div', component: "badge", className: listToClass([appearance, className]), ...props, children: children }));
-}
-export const Badge = withRef(_Badge);
+});
 //# sourceMappingURL=Badge.js.map

package/dist/components/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAmBnD,SAAS,MAAM,CAAsB,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB;IACpG,OAAO,CACL,KAAC,eAAe,IAAC,GAAG,EAAE,GAAG,IAAI,KAAK,EAAE,SAAS,EAAC,OAAO,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,KAAM,KAAY,YACpH,QAAQ,GACO,CACnB,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,CAAA"}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAmBnD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,OAAO,CAC1B,SAAS,KAAK,CAAsB,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB;IACnG,OAAO,CACL,KAAC,eAAe,IAAC,GAAG,EAAE,GAAG,IAAI,KAAK,EAAE,SAAS,EAAC,OAAO,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,KAAM,KAAY,YACpH,QAAQ,GACO,CACnB,CAAA;AACH,CAAC,CACF,CAAA"}

package/dist/components/Blockquote.d.ts

@@ -1,5 +1,13 @@
 import { WithColorPalette, WithColorScheme } from '../types.js';
 export type BaseBlockquoteProps = WithColorScheme & WithColorPalette;
 export type BlockquoteProps = React.JSX.IntrinsicElements['blockquote'] & BaseBlockquoteProps;
+/**
+ * Renders a quote.
+ *
+ * @example
+ * ```
+ * <Blockquote>To be or not to be, that's the question</Blockquote>
+ * ```
+ */
 export declare const Blockquote: ({ children, ...props }: BlockquoteProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Blockquote.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Blockquote.d.ts","sourceRoot":"","sources":["../../src/components/Blockquote.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAI5D,MAAM,MAAM,mBAAmB,GAAG,eAAe,GAAG,gBAAgB,CAAA;AAEpE,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,YAAY,CAAC,GAAG,mBAAmB,CAAA;AAE7F,eAAO,MAAM,UAAU,2BAAoC,eAAe,4CACyB,CAAA"}
+{"version":3,"file":"Blockquote.d.ts","sourceRoot":"","sources":["../../src/components/Blockquote.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAI5D,MAAM,MAAM,mBAAmB,GAAG,eAAe,GAAG,gBAAgB,CAAA;AAEpE,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,YAAY,CAAC,GAAG,mBAAmB,CAAA;AAE7F;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,2BAAoC,eAAe,4CACyB,CAAA"}

package/dist/components/Blockquote.js

@@ -1,5 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { withRef } from '../utils/react.js';
 import { CitricComponent } from './CitricComponent.js';
+/**
+ * Renders a quote.
+ *
+ * @example
+ * ```
+ * <Blockquote>To be or not to be, that's the question</Blockquote>
+ * ```
+ */
 export const Blockquote = withRef(({ children, ...props }) => _jsx(CitricComponent, { tag: "blockquote", component: "blockquote", ...props, children: children }));
 //# sourceMappingURL=Blockquote.js.map

package/dist/components/Blockquote.js.map

@@ -1 +1 @@
-{"version":3,"file":"Blockquote.js","sourceRoot":"","sources":["../../src/components/Blockquote.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAMnD,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAmB,EAAE,EAAE,CAC5E,KAAC,eAAe,IAAC,GAAG,EAAC,YAAY,EAAC,SAAS,EAAC,YAAY,KAAK,KAAK,YAAG,QAAQ,GAAmB,CAAC,CAAA"}
+{"version":3,"file":"Blockquote.js","sourceRoot":"","sources":["../../src/components/Blockquote.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAMnD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAmB,EAAE,EAAE,CAC5E,KAAC,eAAe,IAAC,GAAG,EAAC,YAAY,EAAC,SAAS,EAAC,YAAY,KAAK,KAAK,YAAG,QAAQ,GAAmB,CAAC,CAAA"}

package/dist/components/Breadcrumb.d.ts

@@ -6,6 +6,14 @@ export interface BaseBreadcrumbProps {
     items: BreadCrumbItem[];
 }
 export type BreadcrumbProps = React.JSX.IntrinsicElements['nav'] & BaseBreadcrumbProps;
+/**
+ * Renders a simple navigation bar with links to the previous pages.
+ *
+ * @example
+ * ```
+ * <Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Settings', href: '/settings' }, { label: 'Profile' }]} />
+ * ```
+ */
 export declare const Breadcrumb: ({ items, ...props }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Breadcrumb.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../src/components/Breadcrumb.tsx"],"names":[],"mappings":"AAIA,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,mBAAmB,CAAA;AAEtF,eAAO,MAAM,UAAU,wBAAiC,eAAe,4CAQrE,CAAA"}
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../src/components/Breadcrumb.tsx"],"names":[],"mappings":"AAKA,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,mBAAmB,CAAA;AAEtF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,wBAAiC,eAAe,4CAQrE,CAAA"}

package/dist/components/Breadcrumb.js

@@ -2,8 +2,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { withRef } from '../utils/react.js';
 import { CitricComponent } from './CitricComponent.js';
+import { Link } from './Link.js';
+/**
+ * Renders a simple navigation bar with links to the previous pages.
+ *
+ * @example
+ * ```
+ * <Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Settings', href: '/settings' }, { label: 'Profile' }]} />
+ * ```
+ */
 export const Breadcrumb = withRef(({ items, ...props }) => {
-    const children = useMemo(() => items.map((item, index) => item.href ? _jsx("li", { children: _jsx("a", { href: item.href, children: item.label }) }, index) : _jsx("li", { children: item.label }, index)), [items]);
+    const children = useMemo(() => items.map((item, index) => item.href ? _jsx("li", { children: _jsx(Link, { href: item.href, children: item.label }) }, index) : _jsx("li", { children: item.label }, index)), [items]);
     return _jsx(CitricComponent, { tag: "nav", component: "breadcrumb", ...props, children: _jsx("ul", { children: children }) });
 });
 //# sourceMappingURL=Breadcrumb.js.map

package/dist/components/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","sourceRoot":"","sources":["../../src/components/Breadcrumb.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAanD,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAmB,EAAE,EAAE;IACzE,MAAM,QAAQ,GAAG,OAAO,CACtB,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,CACb,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,uBAAgB,YAAG,IAAI,EAAE,IAAI,CAAC,IAAI,YAAG,IAAI,CAAC,KAAK,GAAK,IAA3C,KAAK,CAA2C,CAAC,CAAC,CAAC,uBAAiB,IAAI,CAAC,KAAK,IAAlB,KAAK,CAAmB,CAC3H,EACD,CAAC,KAAK,CAAC,CACR,CAAA;IACD,OAAO,KAAC,eAAe,IAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAAC,YAAY,KAAK,KAAK,YAAE,uBAAK,QAAQ,GAAM,GAAkB,CAAA;AAC3G,CAAC,CAAC,CAAA"}
+{"version":3,"file":"Breadcrumb.js","sourceRoot":"","sources":["../../src/components/Breadcrumb.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAa7B;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAmB,EAAE,EAAE;IACzE,MAAM,QAAQ,GAAG,OAAO,CACtB,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,CACb,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,uBAAgB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,YAAG,IAAI,CAAC,KAAK,GAAQ,IAAjD,KAAK,CAAiD,CAAC,CAAC,CAAC,uBAAiB,IAAI,CAAC,KAAK,IAAlB,KAAK,CAAmB,CACjI,EACD,CAAC,KAAK,CAAC,CACR,CAAA;IACD,OAAO,KAAC,eAAe,IAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAAC,YAAY,KAAK,KAAK,YAAE,uBAAK,QAAQ,GAAM,GAAkB,CAAA;AAC3G,CAAC,CAAC,CAAA"}

package/dist/components/Button.d.ts

@@ -39,5 +39,16 @@ export interface BaseButtonProps extends WithColorScheme {
     analytics?: boolean;
 }
 export type ButtonProps = Omit<React.JSX.IntrinsicElements['button'], 'onClick'> & BaseButtonProps;
+/**
+ * Renders a button. The type is "button" by default.
+ *
+ * Whenever a button is clicked, the function `onClickButton` of the nearest CitricController is called with the event and the value of the
+ * prop `analytics`.
+ *
+ * @example
+ * ```
+ * <Button>My Button</MyButton>
+ * ```
+ */
 export declare const Button: ({ appearance, size, feedback, loading, disabled, onClick, className, children, type, analytics, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAK1C,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,CAAC;IACxD;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,GAAG,CAAC;IAC1E;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,GAAG,eAAe,CAAA;AAElG,eAAO,MAAM,MAAM,+GACsG,WAAW,4CAsClI,CAAA"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAK1C,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,CAAC;IACxD;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,GAAG,CAAC;IAC1E;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,GAAG,eAAe,CAAA;AAElG;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,+GACsG,WAAW,4CA0ClI,CAAA"}

package/dist/components/Button.js

@@ -1,14 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { listToClass } from '@stack-spot/portal-theme';
-import { useState } from 'react';
+import { Children, useMemo, useState } from 'react';
 import { useCitricController } from '../context/hooks.js';
 import { withRef } from '../utils/react.js';
 import { CitricComponent } from './CitricComponent.js';
 import { ProgressCircular } from './ProgressCircular.js';
+/**
+ * Renders a button. The type is "button" by default.
+ *
+ * Whenever a button is clicked, the function `onClickButton` of the nearest CitricController is called with the event and the value of the
+ * prop `analytics`.
+ *
+ * @example
+ * ```
+ * <Button>My Button</MyButton>
+ * ```
+ */
 export const Button = withRef(({ appearance, size, feedback, loading, disabled, onClick, className, children, type = 'button', analytics, ...props }) => {
     const citric = useCitricController();
     const [waiting, setWaiting] = useState(false);
     const busy = loading || waiting;
+    const isAllLowercase = useMemo(() => !Children.toArray(children).some(c => typeof c === 'string' && c.toLocaleLowerCase() !== c), [children]);
     async function handleClick(e) {
         const result = onClick?.(e);
         citric?.onClickButton?.(e, analytics ?? false);
@@ -21,6 +33,6 @@ export const Button = withRef(({ appearance, size, feedback, loading, disabled,
             setWaiting(false);
         }
     }
-    return (_jsxs(CitricComponent, { tag: "button", component: "button", className: listToClass([size, appearance, className]), "data-feedback": feedback || undefined, onClick: handleClick, "aria-busy": busy, disabled: disabled || busy, type: type, ...props, children: [busy ? _jsx("div", { children: children }) : children, busy && (_jsx("div", { className: "loader", children: _jsx(ProgressCircular, { size: "sm" }) }))] }));
+    return (_jsxs(CitricComponent, { tag: "button", component: "button", className: listToClass([size, appearance, isAllLowercase && 'short-text', className]), "data-feedback": feedback || undefined, onClick: handleClick, "aria-busy": busy, disabled: disabled || busy, type: type, ...props, children: [busy ? _jsx("div", { children: children }) : children, busy && (_jsx("div", { className: "loader", children: _jsx(ProgressCircular, { size: "sm" }) }))] }));
 });
 //# sourceMappingURL=Button.js.map