@clicoh/orion-library 1.2.0-beta.12 → 1.2.0-beta.13

package/dist/components/03-organisms/Header/Header.jsx

@@ -18,6 +18,7 @@ import { SecondMenu } from './SecondMenu';
  *
  * @param {Object} props - The properties of the Header component.
  * @param {string} [props.homeHref='/'] - The URL for the home link.
+ * @param {ReactNode} [props.logo=<Logo />] - Content of the home link.
  * @param {ComponentProps<typeof Menu>['menu']} [props.primaryMenu] - The primary menu configuration.
  * @param {ComponentProps<typeof Menu>['menu']} [props.secondMenu] - The secondary menu configuration.
  * @param {Omit<AvatarProps, 'className' | 'position'>} [props.avatar] - The avatar properties.
@@ -25,13 +26,11 @@ import { SecondMenu } from './SecondMenu';
  *
  * @returns {ReactNode} The rendered Header component.
  */
-export function Header({ homeHref = '/', primaryMenu, secondMenu, avatar, bellNotifications, onFavoriteToggle, themeSwitch, }) {
-    return (<Container as="header" className="relative flex flex-row justify-between py-2 dark:text-white">
+export function Header({ homeHref = '/', logo, primaryMenu, secondMenu, avatar, bellNotifications, onFavoriteToggle, themeSwitch, }) {
+    return (<Container as="header" data-orion-part="header" className="relative flex flex-row justify-between py-2 dark:text-white">
       <div className="flex items-center gap-4">
         <div>
-          <Link href={homeHref}>
-            <Logo id="logo"/>
-          </Link>
+          <Link href={homeHref}>{logo ?? <Logo id="logo"/>}</Link>
         </div>
         {!!secondMenu && (<SecondMenu menu={secondMenu} onFavoriteToggle={onFavoriteToggle}/>)}
         {!!primaryMenu && (<div className="hidden lg:block">

package/dist/components/03-organisms/Header/Header.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Header.jsx","sourceRoot":"","sources":["../../../../src/components/03-organisms/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,EAAE,IAAI,EAAe,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAErD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAa1C;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,MAAM,CAAC,EACrB,QAAQ,GAAG,GAAG,EACd,WAAW,EACX,UAAU,EACV,MAAM,EACN,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,GACC;IACZ,OAAO,CACL,CAAC,SAAS,CACR,EAAE,CAAC,QAAQ,CACX,SAAS,CAAC,6DAA6D,CAEvE;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,yBAAyB,CACtC;QAAA,CAAC,GAAG,CACF;UAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CACnB;YAAA,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,EACjB;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,GAAG,CACL;QAAA,CAAC,CAAC,CAAC,UAAU,IAAI,CACf,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,EAAG,CACrE,CACD;QAAA,CAAC,CAAC,CAAC,WAAW,IAAI,CAChB,CAAC,GAAG,CAAC,SAAS,CAAC,iBAAiB,CAC9B;YAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,YAAY,EACnD;UAAA,EAAE,GAAG,CAAC,CACP,CACH;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,aAAa,CACZ,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,WAAW,CAAC,CAAC,WAAW,CAAC,EAE7B;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Header.jsx","sourceRoot":"","sources":["../../../../src/components/03-organisms/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,EAAE,IAAI,EAAe,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAErD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAc1C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,MAAM,CAAC,EACrB,QAAQ,GAAG,GAAG,EACd,IAAI,EACJ,WAAW,EACX,UAAU,EACV,MAAM,EACN,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,GACC;IACZ,OAAO,CACL,CAAC,SAAS,CACR,EAAE,CAAC,QAAQ,CACX,eAAe,CAAC,QAAQ,CACxB,SAAS,CAAC,6DAA6D,CAEvE;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,yBAAyB,CACtC;QAAA,CAAC,GAAG,CACF;UAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,EAAG,CAAC,EAAE,IAAI,CAC1D;QAAA,EAAE,GAAG,CACL;QAAA,CAAC,CAAC,CAAC,UAAU,IAAI,CACf,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,EAAG,CACrE,CACD;QAAA,CAAC,CAAC,CAAC,WAAW,IAAI,CAChB,CAAC,GAAG,CAAC,SAAS,CAAC,iBAAiB,CAC9B;YAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,YAAY,EACnD;UAAA,EAAE,GAAG,CAAC,CACP,CACH;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,aAAa,CACZ,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,WAAW,CAAC,CAAC,WAAW,CAAC,EAE7B;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC"}

package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.d.ts

@@ -1,8 +1,13 @@
 import { ReactNode } from 'react';
 import { HeaderProps } from '../../03-organisms/Header/Header';
+import { HeadingWithTitleLevel } from './HeadingWithTitle';
 type DashboardTemplateProps = {
     readonly headerProps: HeaderProps;
     readonly pageTitles: Record<string, string>;
+    readonly headingTitles?: Record<string, string>;
+    readonly headingLevel?: HeadingWithTitleLevel;
+    readonly titleAdornment?: ReactNode;
+    readonly titleDescription?: ReactNode;
     readonly titleChildren?: ReactNode;
     readonly children: ReactNode;
     readonly breadcrumbLoadingLabel?: string;
@@ -22,15 +27,30 @@ type DashboardTemplateProps = {
  *   <div>Main Content</div>
  * </DashboardTemplate>
  *
+ * @example
+ * // A detail page whose title is not its breadcrumb, with a badge and a summary
+ * <DashboardTemplate
+ *   headerProps={headerProps}
+ *   pageTitles={{ '/orders': 'Orders', '/orders/1043': '1043' }}
+ *   headingTitles={{ '/orders/1043': 'Order 1043' }}
+ *   titleAdornment={<Badge modifier="success">Delivered</Badge>}
+ *   titleDescription="3 items · Created on 12 Oct"
+ * >
+ *   <OrderDetail />
+ * </DashboardTemplate>
+ *
  * @param {Object} props - The properties of the DashboardTemplate component.
  * @param {HeaderProps} props.headerProps - The properties for the Header component.
- * @param {Record<string, string>} props.pageTitles - An object mapping pathnames to their corresponding page titles.
- * @param {Record<string, string>} props.customTitle - An object mapping pathnames to their corresponding page titles.
- * @param {ReactNode} [props.titleChildren] - Optional additional content to be rendered in the title section.
+ * @param {Record<string, string>} props.pageTitles - An object mapping pathnames to their corresponding page titles, used by the breadcrumb and the heading.
+ * @param {Record<string, string>} [props.headingTitles] - Heading per pathname when it differs from the breadcrumb segment. Pathnames missing here use `pageTitles`.
+ * @param {'h3' | 'h4' | 'h5'} [props.headingLevel='h5'] - Heading level of the page title.
+ * @param {ReactNode} [props.titleAdornment] - Content next to the title, such as a `Badge`.
+ * @param {ReactNode} [props.titleDescription] - Content under the title, inside the title band.
+ * @param {ReactNode} [props.titleChildren] - Content at the right of the title; it moves under the title on small screens.
  * @param {ReactNode} props.children - The main content to be rendered within the dashboard.
  *
  * @returns {ReactNode} The rendered DashboardTemplate component.
  */
-export declare function DashboardTemplate({ headerProps, pageTitles, titleChildren, children, breadcrumbLoadingLabel, headingLoadingLabel, }: DashboardTemplateProps): ReactNode;
+export declare function DashboardTemplate({ headerProps, pageTitles, headingTitles, headingLevel, titleAdornment, titleDescription, titleChildren, children, breadcrumbLoadingLabel, headingLoadingLabel, }: DashboardTemplateProps): ReactNode;
 export {};
 //# sourceMappingURL=DashboardTemplate.d.ts.map

package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardTemplate.d.ts","sourceRoot":"","sources":["../../../../src/components/04-templates/DashboardTemplate/DashboardTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAU,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAKvE,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC;IAClC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC;IACnC,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IACzC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;CACvC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,UAAU,EACV,aAAa,EACb,QAAQ,EACR,sBAAsB,EACtB,mBAAmB,GACpB,EAAE,sBAAsB,GAAG,SAAS,CAiCpC"}
+{"version":3,"file":"DashboardTemplate.d.ts","sourceRoot":"","sources":["../../../../src/components/04-templates/DashboardTemplate/DashboardTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAU,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAG7E,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC;IAClC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChD,QAAQ,CAAC,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAC9C,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IACpC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC;IACtC,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC;IACnC,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IACzC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;CACvC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,UAAU,EACV,aAAa,EACb,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,aAAa,EACb,QAAQ,EACR,sBAAsB,EACtB,mBAAmB,GACpB,EAAE,sBAAsB,GAAG,SAAS,CAiDpC"}

package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.jsx

@@ -19,16 +19,31 @@ import { HeadingWithTitleSkeleton } from './HeadingWithTitleSkeleton';
  *   <div>Main Content</div>
  * </DashboardTemplate>
  *
+ * @example
+ * // A detail page whose title is not its breadcrumb, with a badge and a summary
+ * <DashboardTemplate
+ *   headerProps={headerProps}
+ *   pageTitles={{ '/orders': 'Orders', '/orders/1043': '1043' }}
+ *   headingTitles={{ '/orders/1043': 'Order 1043' }}
+ *   titleAdornment={<Badge modifier="success">Delivered</Badge>}
+ *   titleDescription="3 items · Created on 12 Oct"
+ * >
+ *   <OrderDetail />
+ * </DashboardTemplate>
+ *
  * @param {Object} props - The properties of the DashboardTemplate component.
  * @param {HeaderProps} props.headerProps - The properties for the Header component.
- * @param {Record<string, string>} props.pageTitles - An object mapping pathnames to their corresponding page titles.
- * @param {Record<string, string>} props.customTitle - An object mapping pathnames to their corresponding page titles.
- * @param {ReactNode} [props.titleChildren] - Optional additional content to be rendered in the title section.
+ * @param {Record<string, string>} props.pageTitles - An object mapping pathnames to their corresponding page titles, used by the breadcrumb and the heading.
+ * @param {Record<string, string>} [props.headingTitles] - Heading per pathname when it differs from the breadcrumb segment. Pathnames missing here use `pageTitles`.
+ * @param {'h3' | 'h4' | 'h5'} [props.headingLevel='h5'] - Heading level of the page title.
+ * @param {ReactNode} [props.titleAdornment] - Content next to the title, such as a `Badge`.
+ * @param {ReactNode} [props.titleDescription] - Content under the title, inside the title band.
+ * @param {ReactNode} [props.titleChildren] - Content at the right of the title; it moves under the title on small screens.
  * @param {ReactNode} props.children - The main content to be rendered within the dashboard.
  *
  * @returns {ReactNode} The rendered DashboardTemplate component.
  */
-export function DashboardTemplate({ headerProps, pageTitles, titleChildren, children, breadcrumbLoadingLabel, headingLoadingLabel, }) {
+export function DashboardTemplate({ headerProps, pageTitles, headingTitles, headingLevel, titleAdornment, titleDescription, titleChildren, children, breadcrumbLoadingLabel, headingLoadingLabel, }) {
     return (<>
       <Header {...headerProps}/>
       <hr className="border-gray-5 dark:border-gray-dark-1"/>
@@ -36,10 +51,18 @@ export function DashboardTemplate({ headerProps, pageTitles, titleChildren, chil
         <Suspense fallback={<BreadcrumbSkeleton loadingLabel={breadcrumbLoadingLabel}/>}>
           <BreadcrumbWithPathname homeHref={headerProps.homeHref} pageTitles={pageTitles}/>
         </Suspense>
-        <div className="flex justify-between">
-          <Suspense fallback={<HeadingWithTitleSkeleton loadingLabel={headingLoadingLabel}/>}>
-            <HeadingWithTitle pageTitles={pageTitles}/>
-          </Suspense>
+        <div className="flex flex-col items-start gap-3 sm:flex-row sm:justify-between">
+          <div className="flex min-w-0 flex-col gap-1">
+            <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1">
+              <Suspense fallback={<HeadingWithTitleSkeleton loadingLabel={headingLoadingLabel}/>}>
+                <HeadingWithTitle pageTitles={pageTitles} headingTitles={headingTitles} level={headingLevel}/>
+              </Suspense>
+              {titleAdornment}
+            </div>
+            {!!titleDescription && (<div className="text-gray-1 dark:text-gray-2 text-sm">
+                {titleDescription}
+              </div>)}
+          </div>
           {titleChildren}
         </div>
       </Container>

package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardTemplate.jsx","sourceRoot":"","sources":["../../../../src/components/04-templates/DashboardTemplate/DashboardTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AACtF,OAAO,EAAE,MAAM,EAAe,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAWtE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,WAAW,EACX,UAAU,EACV,aAAa,EACb,QAAQ,EACR,sBAAsB,EACtB,mBAAmB,GACI;IACvB,OAAO,CACL,EACE;MAAA,CAAC,MAAM,CAAC,IAAI,WAAW,CAAC,EACxB;MAAA,CAAC,EAAE,CAAC,SAAS,CAAC,uCAAuC,EACrD;MAAA,CAAC,SAAS,CAAC,SAAS,CAAC,iBAAiB,CACpC;QAAA,CAAC,QAAQ,CACP,QAAQ,CAAC,CACP,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC,sBAAsB,CAAC,EAC3D,CAAC,CAED;UAAA,CAAC,sBAAsB,CACrB,QAAQ,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAC/B,UAAU,CAAC,CAAC,UAAU,CAAC,EAE3B;QAAA,EAAE,QAAQ,CACV;QAAA,CAAC,GAAG,CAAC,SAAS,CAAC,sBAAsB,CACnC;UAAA,CAAC,QAAQ,CACP,QAAQ,CAAC,CACP,CAAC,wBAAwB,CAAC,YAAY,CAAC,CAAC,mBAAmB,CAAC,EAC9D,CAAC,CAED;YAAA,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,EAC3C;UAAA,EAAE,QAAQ,CACV;UAAA,CAAC,aAAa,CAChB;QAAA,EAAE,GAAG,CACP;MAAA,EAAE,SAAS,CACX;MAAA,CAAC,EAAE,CAAC,SAAS,CAAC,uCAAuC,EACrD;MAAA,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CACnC;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,SAAS,CACb;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC"}
+{"version":3,"file":"DashboardTemplate.jsx","sourceRoot":"","sources":["../../../../src/components/04-templates/DashboardTemplate/DashboardTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AACtF,OAAO,EAAE,MAAM,EAAe,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAetE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,WAAW,EACX,UAAU,EACV,aAAa,EACb,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,aAAa,EACb,QAAQ,EACR,sBAAsB,EACtB,mBAAmB,GACI;IACvB,OAAO,CACL,EACE;MAAA,CAAC,MAAM,CAAC,IAAI,WAAW,CAAC,EACxB;MAAA,CAAC,EAAE,CAAC,SAAS,CAAC,uCAAuC,EACrD;MAAA,CAAC,SAAS,CAAC,SAAS,CAAC,iBAAiB,CACpC;QAAA,CAAC,QAAQ,CACP,QAAQ,CAAC,CACP,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC,sBAAsB,CAAC,EAC3D,CAAC,CAED;UAAA,CAAC,sBAAsB,CACrB,QAAQ,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAC/B,UAAU,CAAC,CAAC,UAAU,CAAC,EAE3B;QAAA,EAAE,QAAQ,CACV;QAAA,CAAC,GAAG,CAAC,SAAS,CAAC,gEAAgE,CAC7E;UAAA,CAAC,GAAG,CAAC,SAAS,CAAC,6BAA6B,CAC1C;YAAA,CAAC,GAAG,CAAC,SAAS,CAAC,qDAAqD,CAClE;cAAA,CAAC,QAAQ,CACP,QAAQ,CAAC,CACP,CAAC,wBAAwB,CACvB,YAAY,CAAC,CAAC,mBAAmB,CAAC,EAEtC,CAAC,CAED;gBAAA,CAAC,gBAAgB,CACf,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,KAAK,CAAC,CAAC,YAAY,CAAC,EAExB;cAAA,EAAE,QAAQ,CACV;cAAA,CAAC,cAAc,CACjB;YAAA,EAAE,GAAG,CACL;YAAA,CAAC,CAAC,CAAC,gBAAgB,IAAI,CACrB,CAAC,GAAG,CAAC,SAAS,CAAC,sCAAsC,CACnD;gBAAA,CAAC,gBAAgB,CACnB;cAAA,EAAE,GAAG,CAAC,CACP,CACH;UAAA,EAAE,GAAG,CACL;UAAA,CAAC,aAAa,CAChB;QAAA,EAAE,GAAG,CACP;MAAA,EAAE,SAAS,CACX;MAAA,CAAC,EAAE,CAAC,SAAS,CAAC,uCAAuC,EACrD;MAAA,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CACnC;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,SAAS,CACb;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC"}

package/dist/components/04-templates/DashboardTemplate/HeadingWithTitle.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+export type HeadingWithTitleLevel = 'h3' | 'h4' | 'h5';
 /**
  * HeadingWithTitle component for rendering a heading based on the current pathname.
  *
@@ -9,11 +10,14 @@ import { ReactNode } from 'react';
  *
  * @param {Object} props - The properties of the HeadingWithTitle component.
  * @param {Record<string, string>} props.pageTitles - An object mapping pathnames to their corresponding page titles.
+ * @param {Record<string, string>} [props.headingTitles] - Title per pathname when it differs from the breadcrumb. Falls back to `pageTitles`.
+ * @param {'h3' | 'h4' | 'h5'} [props.level='h5'] - Heading level of the title.
  *
  * @returns {ReactNode} The rendered HeadingWithTitle component.
  */
-export declare function HeadingWithTitle({ pageTitles, }: {
+export declare function HeadingWithTitle({ pageTitles, headingTitles, level, }: {
     pageTitles: Record<string, string>;
-    customTitle?: Record<string, string>;
+    headingTitles?: Record<string, string>;
+    level?: HeadingWithTitleLevel;
 }): ReactNode;
 //# sourceMappingURL=HeadingWithTitle.d.ts.map

package/dist/components/04-templates/DashboardTemplate/HeadingWithTitle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeadingWithTitle.d.ts","sourceRoot":"","sources":["../../../../src/components/04-templates/DashboardTemplate/HeadingWithTitle.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlC;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,GACX,EAAE;IACD,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACtC,GAAG,SAAS,CAaZ"}
+{"version":3,"file":"HeadingWithTitle.d.ts","sourceRoot":"","sources":["../../../../src/components/04-templates/DashboardTemplate/HeadingWithTitle.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlC,MAAM,MAAM,qBAAqB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEvD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,aAAa,EACb,KAAY,GACb,EAAE;IACD,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,KAAK,CAAC,EAAE,qBAAqB,CAAC;CAC/B,GAAG,SAAS,CAgBZ"}

package/dist/components/04-templates/DashboardTemplate/HeadingWithTitle.jsx

@@ -13,15 +13,19 @@ import { HeadingWithTitleSkeleton } from './HeadingWithTitleSkeleton';
  *
  * @param {Object} props - The properties of the HeadingWithTitle component.
  * @param {Record<string, string>} props.pageTitles - An object mapping pathnames to their corresponding page titles.
+ * @param {Record<string, string>} [props.headingTitles] - Title per pathname when it differs from the breadcrumb. Falls back to `pageTitles`.
+ * @param {'h3' | 'h4' | 'h5'} [props.level='h5'] - Heading level of the title.
  *
  * @returns {ReactNode} The rendered HeadingWithTitle component.
  */
-export function HeadingWithTitle({ pageTitles, }) {
+export function HeadingWithTitle({ pageTitles, headingTitles, level = 'h5', }) {
     const pathname = usePathname() || '/lorem/ipsum';
-    const title = pageTitles[pathname] || 'Dashboard';
+    const title = headingTitles?.[pathname] || pageTitles[pathname] || 'Dashboard';
     return (<Show>
       <Show.When isTrue={Boolean(title)}>
-        <Heading level={'h5'}>{title}</Heading>
+        <Heading level={level} className="min-w-0 break-words">
+          {title}
+        </Heading>
       </Show.When>
       <Show.Else>
         <HeadingWithTitleSkeleton />

package/dist/components/04-templates/DashboardTemplate/HeadingWithTitle.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"HeadingWithTitle.jsx","sourceRoot":"","sources":["../../../../src/components/04-templates/DashboardTemplate/HeadingWithTitle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,UAAU,GAIX;IACC,MAAM,QAAQ,GAAG,WAAW,EAAE,IAAI,cAAc,CAAC;IACjD,MAAM,KAAK,GAAG,UAAU,CAAC,QAAQ,CAAC,IAAI,WAAW,CAAC;IAClD,OAAO,CACL,CAAC,IAAI,CACH;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAChC;QAAA,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,CACxC;MAAA,EAAE,IAAI,CAAC,IAAI,CACX;MAAA,CAAC,IAAI,CAAC,IAAI,CACR;QAAA,CAAC,wBAAwB,CAAC,AAAD,EAC3B;MAAA,EAAE,IAAI,CAAC,IAAI,CACb;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}
+{"version":3,"file":"HeadingWithTitle.jsx","sourceRoot":"","sources":["../../../../src/components/04-templates/DashboardTemplate/HeadingWithTitle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAItE;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,UAAU,EACV,aAAa,EACb,KAAK,GAAG,IAAI,GAKb;IACC,MAAM,QAAQ,GAAG,WAAW,EAAE,IAAI,cAAc,CAAC;IACjD,MAAM,KAAK,GACT,aAAa,EAAE,CAAC,QAAQ,CAAC,IAAI,UAAU,CAAC,QAAQ,CAAC,IAAI,WAAW,CAAC;IACnE,OAAO,CACL,CAAC,IAAI,CACH;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAChC;QAAA,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,qBAAqB,CACpD;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,OAAO,CACX;MAAA,EAAE,IAAI,CAAC,IAAI,CACX;MAAA,CAAC,IAAI,CAAC,IAAI,CACR;QAAA,CAAC,wBAAwB,CAAC,AAAD,EAC3B;MAAA,EAAE,IAAI,CAAC,IAAI,CACb;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}

package/dist/components/04-templates/LoginTemplate/LoginTemplate.d.ts

@@ -4,6 +4,7 @@ type LoginTemplateProps = {
     children: ReactNode;
     loginImg?: StaticImageData;
     logoAriaLabel?: string;
+    logo?: ReactNode;
 };
 /**
  * LoginTemplate component for rendering the login page layout.
@@ -17,6 +18,7 @@ type LoginTemplateProps = {
  *
  * @param {Object} props - The properties of the LoginTemplate component.
  * @param {ReactNode} props.children - The content to be rendered inside the login template.
+ * @param {ReactNode} [props.logo=<Logo />] - Brand mark above the content. Replaces the clicOH logo, so `logoAriaLabel` no longer applies.
  *
  * @returns {ReactNode} The rendered LoginTemplate component.
  */

package/dist/components/04-templates/LoginTemplate/LoginTemplate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoginTemplate.d.ts","sourceRoot":"","sources":["../../../../src/components/04-templates/LoginTemplate/LoginTemplate.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAErE,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,SAAS,CAuBlE"}
+{"version":3,"file":"LoginTemplate.d.ts","sourceRoot":"","sources":["../../../../src/components/04-templates/LoginTemplate/LoginTemplate.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAErE,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,SAAS,CAyBlE"}

package/dist/components/04-templates/LoginTemplate/LoginTemplate.jsx

@@ -14,6 +14,7 @@ import { dataUrl } from './dataUrl';
  *
  * @param {Object} props - The properties of the LoginTemplate component.
  * @param {ReactNode} props.children - The content to be rendered inside the login template.
+ * @param {ReactNode} [props.logo=<Logo />] - Brand mark above the content. Replaces the clicOH logo, so `logoAriaLabel` no longer applies.
  *
  * @returns {ReactNode} The rendered LoginTemplate component.
  */
@@ -24,7 +25,7 @@ export function LoginTemplate(props) {
       </div>
       <main className="flex min-h-svh w-[460px] items-center justify-center bg-white text-black dark:bg-black dark:text-white">
         <div className="flex flex-col items-center justify-center gap-4">
-          <Logo width={94} height={40} aria-label={props.logoAriaLabel}/>
+          {props.logo ?? (<Logo width={94} height={40} aria-label={props.logoAriaLabel}/>)}
           {props.children}
         </div>
       </main>

package/dist/components/04-templates/LoginTemplate/LoginTemplate.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"LoginTemplate.jsx","sourceRoot":"","sources":["../../../../src/components/04-templates/LoginTemplate/LoginTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAE/B,OAAO,QAAQ,MAAM,4CAA4C,CAAC;AAClE,OAAO,EAAW,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AASpC;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,MAAM,CACnB;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,oCAAoC,CACjD;QAAA,CAAC,KAAK,CACJ,GAAG,CAAC,CAAE,KAAK,CAAC,QAA4B,IAAI,QAAQ,CAAC,CACrD,GAAG,CAAC,EAAE,CACN,WAAW,CAAC,MAAM,CAClB,KAAK,CAAC,mCAAmC,CACzC,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,SAAS,CAAC,cAAc,CACxB,WAAW,CAAC,MAAM,CAClB,WAAW,CAAC,CAAC,OAAO,CAAC,EAEzB;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,wGAAwG,CACtH;QAAA,CAAC,GAAG,CAAC,SAAS,CAAC,iDAAiD,CAC9D;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,EAC7D;UAAA,CAAC,KAAK,CAAC,QAAQ,CACjB;QAAA,EAAE,GAAG,CACP;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"LoginTemplate.jsx","sourceRoot":"","sources":["../../../../src/components/04-templates/LoginTemplate/LoginTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAE/B,OAAO,QAAQ,MAAM,4CAA4C,CAAC;AAClE,OAAO,EAAW,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAUpC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,MAAM,CACnB;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,oCAAoC,CACjD;QAAA,CAAC,KAAK,CACJ,GAAG,CAAC,CAAE,KAAK,CAAC,QAA4B,IAAI,QAAQ,CAAC,CACrD,GAAG,CAAC,EAAE,CACN,WAAW,CAAC,MAAM,CAClB,KAAK,CAAC,mCAAmC,CACzC,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,SAAS,CAAC,cAAc,CACxB,WAAW,CAAC,MAAM,CAClB,WAAW,CAAC,CAAC,OAAO,CAAC,EAEzB;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,wGAAwG,CACtH;QAAA,CAAC,GAAG,CAAC,SAAS,CAAC,iDAAiD,CAC9D;UAAA,CAAC,KAAK,CAAC,IAAI,IAAI,CACb,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,EAAG,CACjE,CACD;UAAA,CAAC,KAAK,CAAC,QAAQ,CACjB;QAAA,EAAE,GAAG,CACP;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}

package/expresivo/ExpBubble/ExpBubble.d.ts

@@ -0,0 +1,51 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type InlineMessageModifier } from '@clicoh/orion-library';
+import type { ExpMascotName } from '../ExpMascot/catalog';
+export type ExpBubbleTail = 'left' | 'right' | 'bottom';
+export type ExpBubbleProps = {
+    title?: ReactNode;
+    /** Body text, under the title. */
+    children?: ReactNode;
+    /** Side the tail points to. With a `mascot`, the mascot sits on that side. */
+    tail?: ExpBubbleTail;
+    /** Sets the title larger, in the display font, when the scope uses `titles="playful"`. */
+    display?: boolean;
+    /** Short success note pinned under the text, such as a result. */
+    badge?: ReactNode;
+    mascot?: ExpMascotName;
+    mascotSize?: number;
+    /** Tone of the core `InlineMessage` rendered outside an `ExpScope`. */
+    fallbackModifier?: InlineMessageModifier;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'title'>;
+/**
+ * Speech bubble with a tail, optionally spoken by a mascot. Use it for a short
+ * remark from the product (an empty state, a tip, a result), never for errors
+ * that block the user.
+ *
+ * It is a polite live region (`role="status"`). Outside an `ExpScope` it falls
+ * back to the core `InlineMessage`, with the title and the text in one line.
+ *
+ * @component
+ * @example
+ * <ExpBubble title="Nothing to review" mascot="oculus-08-satisfecho">
+ *   Every case has an answer.
+ * </ExpBubble>
+ *
+ * @example
+ * // Above the mascot, with the title in the display font
+ * <ExpBubble tail="bottom" display title="Found it" mascot="fixi-06-celebrando" badge="Solved" />
+ *
+ * @param {Object} props - The properties of the ExpBubble component.
+ * @param {ReactNode} [props.title] - First line, in semibold.
+ * @param {ReactNode} [props.children] - Body text, under the title.
+ * @param {'left' | 'right' | 'bottom'} [props.tail='left'] - Side the tail points to, and the side of the mascot.
+ * @param {boolean} [props.display=false] - Larger title in the display font when the scope uses `titles="playful"`.
+ * @param {ReactNode} [props.badge] - Short success note under the text.
+ * @param {ExpMascotName} [props.mascot] - Mascot that speaks the bubble. Hidden when the scope hides mascots.
+ * @param {number} [props.mascotSize=64] - Mascot size, in pixels.
+ * @param {'info' | 'warning' | 'error' | 'success'} [props.fallbackModifier='info'] - Tone of the `InlineMessage` outside an `ExpScope`.
+ *
+ * @returns {ReactNode} The bubble, or an `InlineMessage` outside an `ExpScope`.
+ */
+export declare function ExpBubble({ title, children, tail, display, badge, mascot, mascotSize, fallbackModifier, ...restProps }: ExpBubbleProps): ReactNode;
+//# sourceMappingURL=ExpBubble.d.ts.map

package/expresivo/ExpBubble/ExpBubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpBubble.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpBubble/ExpBubble.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,uBAAuB,CAAC;AAG/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,0FAA0F;IAC1F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kEAAkE;IAClE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;CAC1C,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;AAclD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,IAAa,EACb,OAAe,EACf,KAAK,EACL,MAAM,EACN,UAAe,EACf,gBAAyB,EACzB,GAAG,SAAS,EACb,EAAE,cAAc,GAAG,SAAS,CAsE5B"}

package/expresivo/ExpBubble/ExpBubble.jsx

@@ -0,0 +1,74 @@
+'use client';
+import clsx from 'clsx';
+import { InlineMessage, } from '@clicoh/orion-library';
+import { useExpScopeOptions } from '../ExpScope/ExpScope';
+import { ExpMascot } from '../ExpMascot/ExpMascot';
+const layoutMap = {
+    left: 'flex-row-reverse items-start',
+    right: 'flex-row items-start',
+    bottom: 'flex-col items-start',
+};
+const tailMap = {
+    left: '-left-1.5 top-[22px] border-t-0 border-r-0',
+    right: '-right-1.5 top-[22px] border-b-0 border-l-0',
+    bottom: '-bottom-1.5 left-7 border-t-0 border-l-0',
+};
+/**
+ * Speech bubble with a tail, optionally spoken by a mascot. Use it for a short
+ * remark from the product (an empty state, a tip, a result), never for errors
+ * that block the user.
+ *
+ * It is a polite live region (`role="status"`). Outside an `ExpScope` it falls
+ * back to the core `InlineMessage`, with the title and the text in one line.
+ *
+ * @component
+ * @example
+ * <ExpBubble title="Nothing to review" mascot="oculus-08-satisfecho">
+ *   Every case has an answer.
+ * </ExpBubble>
+ *
+ * @example
+ * // Above the mascot, with the title in the display font
+ * <ExpBubble tail="bottom" display title="Found it" mascot="fixi-06-celebrando" badge="Solved" />
+ *
+ * @param {Object} props - The properties of the ExpBubble component.
+ * @param {ReactNode} [props.title] - First line, in semibold.
+ * @param {ReactNode} [props.children] - Body text, under the title.
+ * @param {'left' | 'right' | 'bottom'} [props.tail='left'] - Side the tail points to, and the side of the mascot.
+ * @param {boolean} [props.display=false] - Larger title in the display font when the scope uses `titles="playful"`.
+ * @param {ReactNode} [props.badge] - Short success note under the text.
+ * @param {ExpMascotName} [props.mascot] - Mascot that speaks the bubble. Hidden when the scope hides mascots.
+ * @param {number} [props.mascotSize=64] - Mascot size, in pixels.
+ * @param {'info' | 'warning' | 'error' | 'success'} [props.fallbackModifier='info'] - Tone of the `InlineMessage` outside an `ExpScope`.
+ *
+ * @returns {ReactNode} The bubble, or an `InlineMessage` outside an `ExpScope`.
+ */
+export function ExpBubble({ title, children, tail = 'left', display = false, badge, mascot, mascotSize = 64, fallbackModifier = 'info', ...restProps }) {
+    const options = useExpScopeOptions();
+    if (!options) {
+        return (<InlineMessage {...restProps} modifier={fallbackModifier}>
+        {!!title && <strong className="font-semibold">{title} </strong>}
+        {children}
+        {!!badge && <> · {badge}</>}
+      </InlineMessage>);
+    }
+    const playfulTitle = display && options.titles === 'playful';
+    return (<div role="status" {...restProps} className={clsx('inline-flex gap-3', layoutMap[tail], restProps.className)}>
+      <div className="border-gray-5 dark:border-gray-1 relative max-w-[280px] rounded-lg border bg-white px-4 py-3 shadow-[0_2px_3px_rgba(34,35,41,0.08)] dark:bg-black">
+        <span aria-hidden="true" className={clsx('border-gray-5 dark:border-gray-1 absolute size-2.5 rotate-45 border bg-white dark:bg-black', tailMap[tail])}/>
+        {!!title && (<p className={clsx('font-semibold text-black dark:text-white', playfulTitle
+                ? 'font-(family-name:--exp-title-font) text-lg leading-6'
+                : 'text-sm leading-5')}>
+            {title}
+          </p>)}
+        {!!children && (<p className={clsx('text-gray-1 dark:text-gray-2 text-xs leading-[18px] text-pretty', !!title && 'mt-0.5')}>
+            {children}
+          </p>)}
+        {!!badge && (<span className="border-success text-success-strong dark:text-success mt-2 inline-flex rounded-full border px-2 py-px text-[11px] leading-4 font-semibold">
+            {badge}
+          </span>)}
+      </div>
+      {!!mascot && (<ExpMascot name={mascot} size={mascotSize} className={clsx(tail === 'bottom' && 'ml-2')}/>)}
+    </div>);
+}
+//# sourceMappingURL=ExpBubble.jsx.map

package/expresivo/ExpBubble/ExpBubble.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpBubble.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpBubble/ExpBubble.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EACL,aAAa,GAEd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAqBnD,MAAM,SAAS,GAAkC;IAC/C,IAAI,EAAE,8BAA8B;IACpC,KAAK,EAAE,sBAAsB;IAC7B,MAAM,EAAE,sBAAsB;CAC/B,CAAC;AAEF,MAAM,OAAO,GAAkC;IAC7C,IAAI,EAAE,4CAA4C;IAClD,KAAK,EAAE,6CAA6C;IACpD,MAAM,EAAE,0CAA0C;CACnD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,IAAI,GAAG,MAAM,EACb,OAAO,GAAG,KAAK,EACf,KAAK,EACL,MAAM,EACN,UAAU,GAAG,EAAE,EACf,gBAAgB,GAAG,MAAM,EACzB,GAAG,SAAS,EACG;IACf,MAAM,OAAO,GAAG,kBAAkB,EAAE,CAAC;IAErC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,CACL,CAAC,aAAa,CAAC,IAAI,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,gBAAgB,CAAC,CACvD;QAAA,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,KAAK,CAAE,CAAA,EAAE,MAAM,CAAC,CAC/D;QAAA,CAAC,QAAQ,CACT;QAAA,CAAC,CAAC,CAAC,KAAK,IAAI,EAAG,GAAE,CAAC,KAAK,CAAC,GAAG,CAC7B;MAAA,EAAE,aAAa,CAAC,CACjB,CAAC;IACJ,CAAC;IAED,MAAM,YAAY,GAAG,OAAO,IAAI,OAAO,CAAC,MAAM,KAAK,SAAS,CAAC;IAE7D,OAAO,CACL,CAAC,GAAG,CACF,IAAI,CAAC,QAAQ,CACb,IAAI,SAAS,CAAC,CACd,SAAS,CAAC,CAAC,IAAI,CACb,mBAAmB,EACnB,SAAS,CAAC,IAAI,CAAC,EACf,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,mJAAmJ,CAChK;QAAA,CAAC,IAAI,CACH,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CACb,4FAA4F,EAC5F,OAAO,CAAC,IAAI,CAAC,CACd,CAAC,EAEJ;QAAA,CAAC,CAAC,CAAC,KAAK,IAAI,CACV,CAAC,CAAC,CACA,SAAS,CAAC,CAAC,IAAI,CACb,0CAA0C,EAC1C,YAAY;gBACV,CAAC,CAAC,uDAAuD;gBACzD,CAAC,CAAC,mBAAmB,CACxB,CAAC,CAEF;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,CAAC,CAAC,CACL,CACD;QAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,CACb,CAAC,CAAC,CACA,SAAS,CAAC,CAAC,IAAI,CACb,iEAAiE,EACjE,CAAC,CAAC,KAAK,IAAI,QAAQ,CACpB,CAAC,CAEF;YAAA,CAAC,QAAQ,CACX;UAAA,EAAE,CAAC,CAAC,CACL,CACD;QAAA,CAAC,CAAC,CAAC,KAAK,IAAI,CACV,CAAC,IAAI,CAAC,SAAS,CAAC,0IAA0I,CACxJ;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,IAAI,CAAC,CACR,CACH;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,CAAC,CAAC,MAAM,IAAI,CACX,CAAC,SAAS,CACR,IAAI,CAAC,CAAC,MAAM,CAAC,CACb,IAAI,CAAC,CAAC,UAAU,CAAC,CACjB,SAAS,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,MAAM,CAAC,CAAC,EAC7C,CACH,CACH;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}

package/expresivo/ExpBubble/index.d.ts

@@ -0,0 +1,3 @@
+export { ExpBubble } from './ExpBubble';
+export type { ExpBubbleProps, ExpBubbleTail } from './ExpBubble';
+//# sourceMappingURL=index.d.ts.map

package/expresivo/ExpBubble/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpBubble/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC"}

package/expresivo/ExpBubble/index.js

@@ -0,0 +1,2 @@
+export { ExpBubble } from './ExpBubble';
+//# sourceMappingURL=index.js.map

package/expresivo/ExpBubble/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpBubble/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/expresivo/ExpCollapseToggle/ExpCollapseToggle.d.ts

@@ -0,0 +1,37 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+export type ExpCollapseToggleProps = {
+    collapsed: boolean;
+    onToggle: () => void;
+    /** Accessible name while collapsed, such as "Expand header". */
+    expandLabel: string;
+    /** Accessible name while expanded, such as "Collapse header". */
+    collapseLabel: string;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick' | 'aria-label' | 'aria-expanded'>;
+/**
+ * Round corner button that collapses or expands a section, such as a page
+ * header. While the section is expanded, a lavender ring pulses around it to
+ * invite the user to tuck it away; the chevron flips when collapsed.
+ *
+ * Pass `aria-controls` with the id of the section it toggles. Outside an
+ * `ExpScope` it falls back to the core `IconButton` with a chevron.
+ *
+ * @component
+ * @example
+ * <ExpCollapseToggle
+ *   collapsed={collapsed}
+ *   onToggle={() => setCollapsed(!collapsed)}
+ *   expandLabel="Expand header"
+ *   collapseLabel="Collapse header"
+ *   aria-controls="case-header"
+ * />
+ *
+ * @param {Object} props - The properties of the ExpCollapseToggle component.
+ * @param {boolean} props.collapsed - Whether the section is collapsed.
+ * @param {() => void} props.onToggle - Called on click.
+ * @param {string} props.expandLabel - Accessible name while collapsed.
+ * @param {string} props.collapseLabel - Accessible name while expanded.
+ *
+ * @returns {ReactNode} The toggle, or an `IconButton` outside an `ExpScope`.
+ */
+export declare function ExpCollapseToggle({ collapsed, onToggle, expandLabel, collapseLabel, ...restProps }: ExpCollapseToggleProps): ReactNode;
+//# sourceMappingURL=ExpCollapseToggle.d.ts.map

package/expresivo/ExpCollapseToggle/ExpCollapseToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpCollapseToggle.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpCollapseToggle/ExpCollapseToggle.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK7D,MAAM,MAAM,sBAAsB,GAAG;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gEAAgE;IAChE,WAAW,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,aAAa,EAAE,MAAM,CAAC;CACvB,GAAG,IAAI,CACN,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,SAAS,GAAG,YAAY,GAAG,eAAe,CACxD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,WAAW,EACX,aAAa,EACb,GAAG,SAAS,EACb,EAAE,sBAAsB,GAAG,SAAS,CA6CpC"}

package/expresivo/ExpCollapseToggle/ExpCollapseToggle.jsx

@@ -0,0 +1,43 @@
+'use client';
+import clsx from 'clsx';
+import { FiChevronDown, FiChevronUp } from 'react-icons/fi';
+import { IconButton } from '@clicoh/orion-library';
+import { useExpScope } from '../ExpScope/ExpScope';
+/**
+ * Round corner button that collapses or expands a section, such as a page
+ * header. While the section is expanded, a lavender ring pulses around it to
+ * invite the user to tuck it away; the chevron flips when collapsed.
+ *
+ * Pass `aria-controls` with the id of the section it toggles. Outside an
+ * `ExpScope` it falls back to the core `IconButton` with a chevron.
+ *
+ * @component
+ * @example
+ * <ExpCollapseToggle
+ *   collapsed={collapsed}
+ *   onToggle={() => setCollapsed(!collapsed)}
+ *   expandLabel="Expand header"
+ *   collapseLabel="Collapse header"
+ *   aria-controls="case-header"
+ * />
+ *
+ * @param {Object} props - The properties of the ExpCollapseToggle component.
+ * @param {boolean} props.collapsed - Whether the section is collapsed.
+ * @param {() => void} props.onToggle - Called on click.
+ * @param {string} props.expandLabel - Accessible name while collapsed.
+ * @param {string} props.collapseLabel - Accessible name while expanded.
+ *
+ * @returns {ReactNode} The toggle, or an `IconButton` outside an `ExpScope`.
+ */
+export function ExpCollapseToggle({ collapsed, onToggle, expandLabel, collapseLabel, ...restProps }) {
+    const inScope = useExpScope();
+    const label = collapsed ? expandLabel : collapseLabel;
+    if (!inScope) {
+        return (<IconButton {...restProps} icon={collapsed ? <FiChevronDown /> : <FiChevronUp />} label={label} aria-expanded={!collapsed} onClick={onToggle}/>);
+    }
+    return (<button type="button" {...restProps} aria-label={label} aria-expanded={!collapsed} onClick={onToggle} className={clsx('border-lavender-1 text-lavender hover:border-lavender focus-visible:ring-lavender relative flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full border bg-white transition-colors focus-visible:ring-2 focus-visible:outline-none', 'dark:border-lavender-dark-1 dark:text-lavender-dark dark:hover:border-lavender-dark dark:bg-black', restProps.className)}>
+      {!collapsed && (<span aria-hidden="true" className="exp-hint-pulse border-lavender dark:border-lavender-dark pointer-events-none absolute -inset-px rounded-full border-2"/>)}
+      <FiChevronUp aria-hidden="true" strokeWidth={2.4} className={clsx('size-4 transition-transform duration-260 ease-(--exp-ease-spring) motion-reduce:transition-none', collapsed && 'rotate-180')}/>
+    </button>);
+}
+//# sourceMappingURL=ExpCollapseToggle.jsx.map

package/expresivo/ExpCollapseToggle/ExpCollapseToggle.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpCollapseToggle.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpCollapseToggle/ExpCollapseToggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAcnD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,WAAW,EACX,aAAa,EACb,GAAG,SAAS,EACW;IACvB,MAAM,OAAO,GAAG,WAAW,EAAE,CAAC;IAC9B,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC;IAEtD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,CACL,CAAC,UAAU,CACT,IAAI,SAAS,CAAC,CACd,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,AAAD,EAAG,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,AAAD,EAAG,CAAC,CACtD,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAC1B,OAAO,CAAC,CAAC,QAAQ,CAAC,EAClB,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,CAAC,MAAM,CACL,IAAI,CAAC,QAAQ,CACb,IAAI,SAAS,CAAC,CACd,UAAU,CAAC,CAAC,KAAK,CAAC,CAClB,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAC1B,OAAO,CAAC,CAAC,QAAQ,CAAC,CAClB,SAAS,CAAC,CAAC,IAAI,CACb,2PAA2P,EAC3P,mGAAmG,EACnG,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,CAAC,SAAS,IAAI,CACb,CAAC,IAAI,CACH,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,uHAAuH,EACjI,CACH,CACD;MAAA,CAAC,WAAW,CACV,WAAW,CAAC,MAAM,CAClB,WAAW,CAAC,CAAC,GAAG,CAAC,CACjB,SAAS,CAAC,CAAC,IAAI,CACb,iGAAiG,EACjG,SAAS,IAAI,YAAY,CAC1B,CAAC,EAEN;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC"}

package/expresivo/ExpCollapseToggle/index.d.ts

@@ -0,0 +1,3 @@
+export { ExpCollapseToggle } from './ExpCollapseToggle';
+export type { ExpCollapseToggleProps } from './ExpCollapseToggle';
+//# sourceMappingURL=index.d.ts.map

package/expresivo/ExpCollapseToggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpCollapseToggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC"}

package/expresivo/ExpCollapseToggle/index.js

@@ -0,0 +1,2 @@
+export { ExpCollapseToggle } from './ExpCollapseToggle';
+//# sourceMappingURL=index.js.map

package/expresivo/ExpCollapseToggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expresivo/ExpCollapseToggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/expresivo/ExpGrowBar/ExpGrowBar.d.ts

@@ -0,0 +1,26 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type ExpGrowBarProps = {
+    /** Progress between 0 and 100. */
+    value: number;
+    /** Accessible name of what the bar measures. */
+    ariaLabel: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'>;
+/**
+ * Progress bar whose fill grows in the clicOH gradient when it mounts. For
+ * scores and shares shown at rest; for an operation that is still running,
+ * use the core `ProgressBar`.
+ *
+ * Outside an `ExpScope` it falls back to the core `ProgressBar`.
+ *
+ * @component
+ * @example
+ * <ExpGrowBar value={57} ariaLabel="Share of cases solved" />
+ *
+ * @param {Object} props - The properties of the ExpGrowBar component.
+ * @param {number} props.value - Progress between 0 and 100.
+ * @param {string} props.ariaLabel - Accessible name of what the bar measures.
+ *
+ * @returns {ReactNode} The bar, or a core `ProgressBar` outside an `ExpScope`.
+ */
+export declare function ExpGrowBar({ value, ariaLabel, ...restProps }: ExpGrowBarProps): ReactNode;
+//# sourceMappingURL=ExpGrowBar.d.ts.map

package/expresivo/ExpGrowBar/ExpGrowBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpGrowBar.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpGrowBar/ExpGrowBar.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,eAAe,GAAG;IAC5B,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC;AAI9D;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,SAAS,EACT,GAAG,SAAS,EACb,EAAE,eAAe,GAAG,SAAS,CAiC7B"}

package/expresivo/ExpGrowBar/ExpGrowBar.jsx

@@ -0,0 +1,39 @@
+'use client';
+import clsx from 'clsx';
+import { useEffect, useState, } from 'react';
+import { ProgressBar } from '@clicoh/orion-library';
+import { useExpScope } from '../ExpScope/ExpScope';
+const clamp = (value) => Math.min(100, Math.max(0, value));
+/**
+ * Progress bar whose fill grows in the clicOH gradient when it mounts. For
+ * scores and shares shown at rest; for an operation that is still running,
+ * use the core `ProgressBar`.
+ *
+ * Outside an `ExpScope` it falls back to the core `ProgressBar`.
+ *
+ * @component
+ * @example
+ * <ExpGrowBar value={57} ariaLabel="Share of cases solved" />
+ *
+ * @param {Object} props - The properties of the ExpGrowBar component.
+ * @param {number} props.value - Progress between 0 and 100.
+ * @param {string} props.ariaLabel - Accessible name of what the bar measures.
+ *
+ * @returns {ReactNode} The bar, or a core `ProgressBar` outside an `ExpScope`.
+ */
+export function ExpGrowBar({ value, ariaLabel, ...restProps }) {
+    const inScope = useExpScope();
+    const [shown, setShown] = useState(0);
+    const percent = clamp(value);
+    useEffect(() => {
+        const timer = setTimeout(() => setShown(percent), 60);
+        return () => clearTimeout(timer);
+    }, [percent]);
+    if (!inScope) {
+        return <ProgressBar {...restProps} value={percent} ariaLabel={ariaLabel}/>;
+    }
+    return (<div {...restProps} role="progressbar" aria-label={ariaLabel} aria-valuemin={0} aria-valuemax={100} aria-valuenow={percent} className={clsx('bg-gray-5 dark:bg-gray-dark-1 relative h-2 overflow-hidden rounded-full', restProps.className)}>
+      <span className="from-lavender to-violet absolute inset-y-0 left-0 rounded-full bg-linear-90 transition-[width] duration-900 ease-[cubic-bezier(.22,1,.36,1)] motion-reduce:transition-none" style={{ width: `${shown}%` }}/>
+    </div>);
+}
+//# sourceMappingURL=ExpGrowBar.jsx.map