@postenbring/hedwig-react 0.0.63 → 0.0.64

package/dist/_tsup-dts-rollup.d.mts

@@ -1051,6 +1051,7 @@ declare interface NavbarButtonProps {
 
 declare const NavbarComponent: ForwardRefExoticComponent<NavbarProps & RefAttributes<HTMLElement>> & {
     Logo: typeof NavbarLogo;
+    LogoAndServiceText: typeof NavbarLogoAndServiceText;
     ExpandableMenu: typeof NavbarExpandableMenuComponent;
     Button: typeof NavbarButton;
     Navigation: typeof NavbarNavigation;
@@ -1104,12 +1105,53 @@ export declare interface NavbarExpandableMenuTriggerProps extends Omit<React_3.H
     whenOpenHelperTitle?: string;
 }
 
+/**
+ * A fixed Posten or Bring logo.
+ *
+ * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo
+ */
 declare const NavbarLogo: OverridableComponent<NavbarLogoProps, HTMLDivElement>;
 export { NavbarLogo }
 export { NavbarLogo as NavbarLogo_alias_1 }
 export { NavbarLogo as NavbarLogo_alias_2 }
 export { NavbarLogo as NavbarLogo_alias_3 }
 
+/**
+ * Internal service or flagship text next to either the Posten or Bring logo
+ *
+ * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo
+ */
+declare const NavbarLogoAndServiceText: React_3.ForwardRefExoticComponent<NavbarLogoAndServiceText_2 & React_3.RefAttributes<HTMLDivElement>>;
+export { NavbarLogoAndServiceText }
+export { NavbarLogoAndServiceText as NavbarLogoAndServiceText_alias_1 }
+export { NavbarLogoAndServiceText as NavbarLogoAndServiceText_alias_2 }
+export { NavbarLogoAndServiceText as NavbarLogoAndServiceText_alias_3 }
+
+declare interface NavbarLogoAndServiceText_2 extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The text display next to the logo
+     */
+    children: React_3.ReactNode;
+    /**
+     * The text variant
+     *
+     * Use `service` for internal applications
+     * Use `flagship` for public facing applications
+     */
+    variant: "service" | "flagship";
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
+}
+
+/**
+ * Internal service or flagship text next to either the Posten or Bring logo
+ *
+ * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo
+ */
+declare const NavbarLogoAndServiceText: React_3.ForwardRefExoticComponent<NavbarLogoAndServiceText_2 & React_3.RefAttributes<HTMLDivElement>>;
+
 declare interface NavbarLogoProps {
     children?: never;
 }
@@ -1125,6 +1167,14 @@ declare interface NavbarNavigationProps {
 }
 
 declare interface NavbarProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Navbar variant
+     *
+     * By default the `posten.no` variant is used which has a fixed logo and a fixed height of 112px
+     *
+     * For internal services or flagship services use the `service` should be used
+     */
+    variant?: "default" | "service";
     children: React_3.ReactNode;
 }
 export { NavbarProps }
@@ -1396,6 +1446,13 @@ declare interface SkeletonPropsInner extends React_2.AnchorHTMLAttributes<HTMLDi
      * The visual style of the Skeleton
      */
     variant?: "text" | "circle" | "rectangle" | "rounded";
+    /**
+     * Whether to show animation or not
+     * In the future the animation effect might become configurable
+     *
+     * default true
+     */
+    animation?: boolean;
     children?: React_2.ReactNode;
 }
 

package/dist/_tsup-dts-rollup.d.ts

@@ -1051,6 +1051,7 @@ declare interface NavbarButtonProps {
 
 declare const NavbarComponent: ForwardRefExoticComponent<NavbarProps & RefAttributes<HTMLElement>> & {
     Logo: typeof NavbarLogo;
+    LogoAndServiceText: typeof NavbarLogoAndServiceText;
     ExpandableMenu: typeof NavbarExpandableMenuComponent;
     Button: typeof NavbarButton;
     Navigation: typeof NavbarNavigation;
@@ -1104,12 +1105,53 @@ export declare interface NavbarExpandableMenuTriggerProps extends Omit<React_3.H
     whenOpenHelperTitle?: string;
 }
 
+/**
+ * A fixed Posten or Bring logo.
+ *
+ * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo
+ */
 declare const NavbarLogo: OverridableComponent<NavbarLogoProps, HTMLDivElement>;
 export { NavbarLogo }
 export { NavbarLogo as NavbarLogo_alias_1 }
 export { NavbarLogo as NavbarLogo_alias_2 }
 export { NavbarLogo as NavbarLogo_alias_3 }
 
+/**
+ * Internal service or flagship text next to either the Posten or Bring logo
+ *
+ * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo
+ */
+declare const NavbarLogoAndServiceText: React_3.ForwardRefExoticComponent<NavbarLogoAndServiceText_2 & React_3.RefAttributes<HTMLDivElement>>;
+export { NavbarLogoAndServiceText }
+export { NavbarLogoAndServiceText as NavbarLogoAndServiceText_alias_1 }
+export { NavbarLogoAndServiceText as NavbarLogoAndServiceText_alias_2 }
+export { NavbarLogoAndServiceText as NavbarLogoAndServiceText_alias_3 }
+
+declare interface NavbarLogoAndServiceText_2 extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The text display next to the logo
+     */
+    children: React_3.ReactNode;
+    /**
+     * The text variant
+     *
+     * Use `service` for internal applications
+     * Use `flagship` for public facing applications
+     */
+    variant: "service" | "flagship";
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
+}
+
+/**
+ * Internal service or flagship text next to either the Posten or Bring logo
+ *
+ * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo
+ */
+declare const NavbarLogoAndServiceText: React_3.ForwardRefExoticComponent<NavbarLogoAndServiceText_2 & React_3.RefAttributes<HTMLDivElement>>;
+
 declare interface NavbarLogoProps {
     children?: never;
 }
@@ -1125,6 +1167,14 @@ declare interface NavbarNavigationProps {
 }
 
 declare interface NavbarProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Navbar variant
+     *
+     * By default the `posten.no` variant is used which has a fixed logo and a fixed height of 112px
+     *
+     * For internal services or flagship services use the `service` should be used
+     */
+    variant?: "default" | "service";
     children: React_3.ReactNode;
 }
 export { NavbarProps }
@@ -1396,6 +1446,13 @@ declare interface SkeletonPropsInner extends React_2.AnchorHTMLAttributes<HTMLDi
      * The visual style of the Skeleton
      */
     variant?: "text" | "circle" | "rectangle" | "rounded";
+    /**
+     * Whether to show animation or not
+     * In the future the animation effect might become configurable
+     *
+     * default true
+     */
+    animation?: boolean;
     children?: React_2.ReactNode;
 }
 

package/dist/{chunk-JMDXW2ML.mjs → chunk-625SVQEP.mjs}

@@ -7,11 +7,20 @@ import {
 // src/navbar/navbar.tsx
 import { forwardRef } from "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Navbar = forwardRef(
   (_a, ref) => {
-    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ jsx("header", __spreadProps(__spreadValues({ className: clsx("hds-navbar", className), ref }, rest), { children }));
+    var _b = _a, { children, className, variant } = _b, rest = __objRest(_b, ["children", "className", "variant"]);
+    return /* @__PURE__ */ jsx(
+      "header",
+      __spreadProps(__spreadValues({
+        className: clsx("hds-navbar", variant && `hds-navbar--${variant}`, className),
+        ref
+      }, rest), {
+        children
+      })
+    );
   }
 );
 Navbar.displayName = "Navbar";
@@ -22,6 +31,26 @@ var NavbarLogo = forwardRef(
   }
 );
 NavbarLogo.displayName = "Navbar.Logo";
+var NavbarLogoAndServiceText = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, asChild, variant, className } = _b, rest = __objRest(_b, ["children", "asChild", "variant", "className"]);
+    const Component = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(
+      Component,
+      __spreadProps(__spreadValues({
+        ref,
+        className: clsx(
+          "hds-navbar__logo-and-service-text",
+          `hds-navbar__logo-and-service-text--${variant}`,
+          className
+        )
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+NavbarLogoAndServiceText.displayName = "Navbar.NavbarLogoAndText";
 var NavbarButton = forwardRef(
   (_a, ref) => {
     var _b = _a, { as: Component = "button", children, icon, className } = _b, rest = __objRest(_b, ["as", "children", "icon", "className"]);
@@ -48,7 +77,8 @@ NavbarNavigation.displayName = "Navbar.Navigation";
 export {
   Navbar,
   NavbarLogo,
+  NavbarLogoAndServiceText,
   NavbarButton,
   NavbarNavigation
 };
-//# sourceMappingURL=chunk-JMDXW2ML.mjs.map
+//# sourceMappingURL=chunk-625SVQEP.mjs.map

package/dist/chunk-625SVQEP.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/navbar/navbar.tsx"],"sourcesContent":["import React, { forwardRef, type HTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface NavbarProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Navbar variant\n   *\n   * By default the `posten.no` variant is used which has a fixed logo and a fixed height of 112px\n   *\n   * For internal services or flagship services use the `service` should be used\n   */\n  variant?: \"default\" | \"service\";\n  children: React.ReactNode;\n}\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n */\nexport const Navbar = forwardRef<HTMLElement, NavbarProps>(\n  ({ children, className, variant, ...rest }, ref) => {\n    return (\n      <header\n        className={clsx(\"hds-navbar\", variant && `hds-navbar--${variant}`, className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </header>\n    );\n  },\n);\nNavbar.displayName = \"Navbar\";\n\ninterface NavbarLogoProps {\n  children?: never;\n}\n\n/**\n * A fixed Posten or Bring logo.\n *\n * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo\n */\nexport const NavbarLogo: OverridableComponent<NavbarLogoProps, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"div\", className, ...rest }, ref) => {\n    return (\n      <Component className={clsx(\"hds-navbar__logo\", className as undefined)} ref={ref} {...rest} />\n    );\n  },\n);\nNavbarLogo.displayName = \"Navbar.Logo\";\n\ninterface NavbarLogoAndServiceText extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The text display next to the logo\n   */\n  children: React.ReactNode;\n\n  /**\n   * The text variant\n   *\n   * Use `service` for internal applications\n   * Use `flagship` for public facing applications\n   */\n  variant: \"service\" | \"flagship\";\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean;\n}\n/**\n * Internal service or flagship text next to either the Posten or Bring logo\n *\n * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo\n */\nexport const NavbarLogoAndServiceText = forwardRef<HTMLDivElement, NavbarLogoAndServiceText>(\n  ({ children, asChild, variant, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component\n        ref={ref}\n        className={clsx(\n          \"hds-navbar__logo-and-service-text\",\n          `hds-navbar__logo-and-service-text--${variant}`,\n          className as undefined,\n        )}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nNavbarLogoAndServiceText.displayName = \"Navbar.NavbarLogoAndText\";\n\n// Navbar button\ninterface NavbarButtonProps {\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n}\nexport const NavbarButton: OverridableComponent<NavbarButtonProps, HTMLElement> = forwardRef(\n  ({ as: Component = \"button\", children, icon, className, ...rest }, ref) => {\n    return (\n      <Component className={clsx(\"hds-navbar__button\", className as undefined)} ref={ref} {...rest}>\n        {children} {icon}\n      </Component>\n    );\n  },\n);\nNavbarButton.displayName = \"Navbar.Button\";\n\ninterface NavbarNavigationProps {\n  children: React.ReactNode;\n}\nexport const NavbarNavigation: OverridableComponent<NavbarNavigationProps, HTMLElement> =\n  forwardRef(({ as: Component = \"div\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-navbar__navigation\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  });\nNavbarNavigation.displayName = \"Navbar.Navigation\";\n"],"mappings":";;;;;;;AAAA,SAAgB,kBAAuC;AACvD,SAAS,YAAY;AACrB,SAAS,YAAY;AAqBf,cAkFA,YAlFA;AAHC,IAAM,SAAS;AAAA,EACpB,CAAC,IAA2C,QAAQ;AAAnD,iBAAE,YAAU,WAAW,QArB1B,IAqBG,IAAmC,iBAAnC,IAAmC,CAAjC,YAAU,aAAW;AACtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,cAAc,WAAW,eAAe,OAAO,IAAI,SAAsB;AAAA,QACzF;AAAA,SACI,OAHL;AAAA,QAKE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;AAWd,IAAM,aAAoE;AAAA,EAC/E,CAAC,IAA+C,QAAQ;AAAvD,iBAAE,MAAI,YAAY,OAAO,UA7C5B,IA6CG,IAAuC,iBAAvC,IAAuC,CAArC,MAAuB;AACxB,WACE,oBAAC,4BAAU,WAAW,KAAK,oBAAoB,SAAsB,GAAG,OAAc,KAAM;AAAA,EAEhG;AACF;AACA,WAAW,cAAc;AA0BlB,IAAM,2BAA2B;AAAA,EACtC,CAAC,IAAoD,QAAQ;AAA5D,iBAAE,YAAU,SAAS,SAAS,UA9EjC,IA8EG,IAA4C,iBAA5C,IAA4C,CAA1C,YAAU,WAAS,WAAS;AAC7B,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,sCAAsC,OAAO;AAAA,UAC7C;AAAA,QACF;AAAA,SACI,OAPL;AAAA,QASE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,yBAAyB,cAAc;AAOhC,IAAM,eAAqE;AAAA,EAChF,CAAC,IAAkE,QAAQ;AAA1E,iBAAE,MAAI,YAAY,UAAU,UAAU,MAAM,UAvG/C,IAuGG,IAA0D,iBAA1D,IAA0D,CAAxD,MAA0B,YAAU,QAAM;AAC3C,WACE,qBAAC,0CAAU,WAAW,KAAK,sBAAsB,SAAsB,GAAG,OAAc,OAAvF,EACE;AAAA;AAAA,MAAS;AAAA,MAAE;AAAA,QACd;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;AAKpB,IAAM,mBACX,WAAW,CAAC,IAA+C,QAAQ;AAAvD,eAAE,MAAI,YAAY,OAAO,UArHvC,IAqHc,IAAuC,iBAAvC,IAAuC,CAArC,MAAuB;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,0BAA0B,SAAsB;AAAA,MAChE;AAAA,OACI;AAAA,EACN;AAEJ,CAAC;AACH,iBAAiB,cAAc;","names":[]}

package/dist/{chunk-Q6REETZD.mjs → chunk-AKYK3XFN.mjs}

@@ -60,6 +60,7 @@ var AutoAnimateHeight = forwardRef(
       __spreadProps(__spreadValues({
         ref,
         style: __spreadValues({
+          position: "relative",
           overflow: "hidden",
           height,
           transitionProperty: "height",
@@ -91,4 +92,4 @@ AutoAnimateHeight.displayName = "AutoAnimateHeight";
 export {
   AutoAnimateHeight
 };
-//# sourceMappingURL=chunk-Q6REETZD.mjs.map
+//# sourceMappingURL=chunk-AKYK3XFN.mjs.map

package/dist/{chunk-Q6REETZD.mjs.map → chunk-AKYK3XFN.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/utilities/auto-animate-height.tsx"],"sourcesContent":["import { cloneElement, forwardRef, useEffect, useRef, useState } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { OverridableComponent } from \"../utils\";\n\nconst animationDurationToValue = {\n  quick: 100,\n  normal: 300,\n  slow: 700,\n};\n\nexport interface AutoAnimateHeightProps {\n  /**\n   * Time of the animation, using the hedwig animation tokens\n   * quick: 0.1s\n   * normal: 0.3s\n   * slow: 0.7s\n   *\n   * default is \"quick\"\n   */\n  animationDuration?: \"quick\" | \"normal\" | \"slow\";\n\n  /**\n   * Which hedwig easing function to use, default is \"normal\"\n   */\n  animationEasing?: \"in\" | \"out\" | \"normal\";\n  children: React.ReactNode;\n  style?: React.CSSProperties;\n}\n\n/**\n * Helper component to animate the height of the children when they change\n * It's done by rendering two versions of the passed children,\n * one hidden to measure the height and one visible to only changes after the height is measured.\n *\n * **IMPORTANT** Do not pass any components with effects (like data fetching), as they will trigger twice.\n */\nexport const AutoAnimateHeight: OverridableComponent<AutoAnimateHeightProps, HTMLDivElement> =\n  forwardRef(\n    (\n      {\n        as: Component = \"div\",\n        children,\n        style,\n        animationDuration = \"quick\",\n        animationEasing = \"normal\",\n        ...rest\n      },\n      ref,\n    ) => {\n      const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n      const measurementRef = useRef<HTMLDivElement>(null);\n      const [height, setHeight] = useState<number | undefined>(undefined);\n      const [clonedChildren, setClonedChildren] = useState<React.ReactNode>(() =>\n        cloneElement(<>{children}</>, {}),\n      );\n      useEffect(() => {\n        if (measurementRef.current) {\n          const { height: newHeight } = measurementRef.current.getBoundingClientRect();\n\n          if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n          }\n          if (newHeight < (height ?? 0)) {\n            // If the children are shrinking, hold off on replacing until the animation is done\n            // This way we don't get a sudden flash of empty content\n            setTimeout(() => {\n              flushSync(() => {\n                setHeight(newHeight);\n              });\n              timeoutRef.current = setTimeout(() => {\n                setClonedChildren(cloneElement(<>{children}</>, {}));\n              }, animationDurationToValue[animationDuration]);\n            });\n          } else {\n            setHeight(newHeight);\n            setClonedChildren(cloneElement(<>{children}</>, {}));\n          }\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n      }, [children]);\n\n      return (\n        <Component\n          ref={ref}\n          style={{\n            overflow: \"hidden\",\n            height,\n            transitionProperty: \"height\",\n            transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,\n            transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,\n            ...style,\n          }}\n          {...rest}\n        >\n          <div\n            aria-hidden\n            ref={measurementRef}\n            style={{\n              position: \"absolute\",\n              visibility: \"hidden\",\n            }}\n          >\n            {children}\n          </div>\n          {clonedChildren}\n        </Component>\n      );\n    },\n  );\nAutoAnimateHeight.displayName = \"AutoAnimateHeight\";\n"],"mappings":";;;;;;;AAAA,SAAS,cAAc,YAAY,WAAW,QAAQ,gBAAgB;AACtE,SAAS,iBAAiB;AAoDL,wBA6Bb,YA7Ba;AAjDrB,IAAM,2BAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;AA4BO,IAAM,oBACX;AAAA,EACE,CACE,IAQA,QACG;AATH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA;AAAA,MACA,oBAAoB;AAAA,MACpB,kBAAkB;AAAA,IA5C1B,IAuCM,IAMK,iBANL,IAMK;AAAA,MALH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,aAAa,OAA8B,IAAI;AACrD,UAAM,iBAAiB,OAAuB,IAAI;AAClD,UAAM,CAAC,QAAQ,SAAS,IAAI,SAA6B,MAAS;AAClE,UAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,MAA0B,MACpE,aAAa,gCAAG,UAAS,GAAK,CAAC,CAAC;AAAA,IAClC;AACA,cAAU,MAAM;AACd,UAAI,eAAe,SAAS;AAC1B,cAAM,EAAE,QAAQ,UAAU,IAAI,eAAe,QAAQ,sBAAsB;AAE3E,YAAI,WAAW,SAAS;AACtB,uBAAa,WAAW,OAAO;AAAA,QACjC;AACA,YAAI,aAAa,0BAAU,IAAI;AAG7B,qBAAW,MAAM;AACf,sBAAU,MAAM;AACd,wBAAU,SAAS;AAAA,YACrB,CAAC;AACD,uBAAW,UAAU,WAAW,MAAM;AACpC,gCAAkB,aAAa,gCAAG,UAAS,GAAK,CAAC,CAAC,CAAC;AAAA,YACrD,GAAG,yBAAyB,iBAAiB,CAAC;AAAA,UAChD,CAAC;AAAA,QACH,OAAO;AACL,oBAAU,SAAS;AACnB,4BAAkB,aAAa,gCAAG,UAAS,GAAK,CAAC,CAAC,CAAC;AAAA,QACrD;AAAA,MACF;AAAA,IAEF,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV;AAAA,UACA,oBAAoB;AAAA,UACpB,oBAAoB,sCAAsC,iBAAiB;AAAA,UAC3E,0BAA0B,oCAAoC,eAAe;AAAA,WAC1E;AAAA,SAED,OAVL;AAAA,QAYC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,KAAK;AAAA,cACL,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,YAAY;AAAA,cACd;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACF,kBAAkB,cAAc;","names":[]}
+{"version":3,"sources":["../src/utilities/auto-animate-height.tsx"],"sourcesContent":["import { cloneElement, forwardRef, useEffect, useRef, useState } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { OverridableComponent } from \"../utils\";\n\nconst animationDurationToValue = {\n  quick: 100,\n  normal: 300,\n  slow: 700,\n};\n\nexport interface AutoAnimateHeightProps {\n  /**\n   * Time of the animation, using the hedwig animation tokens\n   * quick: 0.1s\n   * normal: 0.3s\n   * slow: 0.7s\n   *\n   * default is \"quick\"\n   */\n  animationDuration?: \"quick\" | \"normal\" | \"slow\";\n\n  /**\n   * Which hedwig easing function to use, default is \"normal\"\n   */\n  animationEasing?: \"in\" | \"out\" | \"normal\";\n  children: React.ReactNode;\n  style?: React.CSSProperties;\n}\n\n/**\n * Helper component to animate the height of the children when they change\n * It's done by rendering two versions of the passed children,\n * one hidden to measure the height and one visible to only changes after the height is measured.\n *\n * **IMPORTANT** Do not pass any components with effects (like data fetching), as they will trigger twice.\n */\nexport const AutoAnimateHeight: OverridableComponent<AutoAnimateHeightProps, HTMLDivElement> =\n  forwardRef(\n    (\n      {\n        as: Component = \"div\",\n        children,\n        style,\n        animationDuration = \"quick\",\n        animationEasing = \"normal\",\n        ...rest\n      },\n      ref,\n    ) => {\n      const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n      const measurementRef = useRef<HTMLDivElement>(null);\n      const [height, setHeight] = useState<number | undefined>(undefined);\n      const [clonedChildren, setClonedChildren] = useState<React.ReactNode>(() =>\n        cloneElement(<>{children}</>, {}),\n      );\n      useEffect(() => {\n        if (measurementRef.current) {\n          const { height: newHeight } = measurementRef.current.getBoundingClientRect();\n\n          if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n          }\n          if (newHeight < (height ?? 0)) {\n            // If the children are shrinking, hold off on replacing until the animation is done\n            // This way we don't get a sudden flash of empty content\n            setTimeout(() => {\n              flushSync(() => {\n                setHeight(newHeight);\n              });\n              timeoutRef.current = setTimeout(() => {\n                setClonedChildren(cloneElement(<>{children}</>, {}));\n              }, animationDurationToValue[animationDuration]);\n            });\n          } else {\n            setHeight(newHeight);\n            setClonedChildren(cloneElement(<>{children}</>, {}));\n          }\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n      }, [children]);\n\n      return (\n        <Component\n          ref={ref}\n          style={{\n            position: \"relative\",\n            overflow: \"hidden\",\n            height,\n            transitionProperty: \"height\",\n            transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,\n            transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,\n            ...style,\n          }}\n          {...rest}\n        >\n          <div\n            aria-hidden\n            ref={measurementRef}\n            style={{\n              position: \"absolute\",\n              visibility: \"hidden\",\n            }}\n          >\n            {children}\n          </div>\n          {clonedChildren}\n        </Component>\n      );\n    },\n  );\nAutoAnimateHeight.displayName = \"AutoAnimateHeight\";\n"],"mappings":";;;;;;;AAAA,SAAS,cAAc,YAAY,WAAW,QAAQ,gBAAgB;AACtE,SAAS,iBAAiB;AAoDL,wBA6Bb,YA7Ba;AAjDrB,IAAM,2BAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;AA4BO,IAAM,oBACX;AAAA,EACE,CACE,IAQA,QACG;AATH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA;AAAA,MACA,oBAAoB;AAAA,MACpB,kBAAkB;AAAA,IA5C1B,IAuCM,IAMK,iBANL,IAMK;AAAA,MALH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,aAAa,OAA8B,IAAI;AACrD,UAAM,iBAAiB,OAAuB,IAAI;AAClD,UAAM,CAAC,QAAQ,SAAS,IAAI,SAA6B,MAAS;AAClE,UAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,MAA0B,MACpE,aAAa,gCAAG,UAAS,GAAK,CAAC,CAAC;AAAA,IAClC;AACA,cAAU,MAAM;AACd,UAAI,eAAe,SAAS;AAC1B,cAAM,EAAE,QAAQ,UAAU,IAAI,eAAe,QAAQ,sBAAsB;AAE3E,YAAI,WAAW,SAAS;AACtB,uBAAa,WAAW,OAAO;AAAA,QACjC;AACA,YAAI,aAAa,0BAAU,IAAI;AAG7B,qBAAW,MAAM;AACf,sBAAU,MAAM;AACd,wBAAU,SAAS;AAAA,YACrB,CAAC;AACD,uBAAW,UAAU,WAAW,MAAM;AACpC,gCAAkB,aAAa,gCAAG,UAAS,GAAK,CAAC,CAAC,CAAC;AAAA,YACrD,GAAG,yBAAyB,iBAAiB,CAAC;AAAA,UAChD,CAAC;AAAA,QACH,OAAO;AACL,oBAAU,SAAS;AACnB,4BAAkB,aAAa,gCAAG,UAAS,GAAK,CAAC,CAAC,CAAC;AAAA,QACrD;AAAA,MACF;AAAA,IAEF,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV,UAAU;AAAA,UACV;AAAA,UACA,oBAAoB;AAAA,UACpB,oBAAoB,sCAAsC,iBAAiB;AAAA,UAC3E,0BAA0B,oCAAoC,eAAe;AAAA,WAC1E;AAAA,SAED,OAXL;AAAA,QAaC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,KAAK;AAAA,cACL,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,YAAY;AAAA,cACd;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACF,kBAAkB,cAAc;","names":[]}

package/dist/{chunk-OYJQ5MAS.mjs → chunk-BYDSISQZ.mjs}

@@ -11,11 +11,34 @@ import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 var Skeleton = forwardRef(
   (_a, ref) => {
-    var _b = _a, { as: Component = "div", children, variant = "text", width, height, className, style } = _b, rest = __objRest(_b, ["as", "children", "variant", "width", "height", "className", "style"]);
+    var _b = _a, {
+      as: Component = "div",
+      children,
+      animation,
+      variant = "text",
+      width,
+      height,
+      className,
+      style
+    } = _b, rest = __objRest(_b, [
+      "as",
+      "children",
+      "animation",
+      "variant",
+      "width",
+      "height",
+      "className",
+      "style"
+    ]);
     return /* @__PURE__ */ jsx(
       Component,
       __spreadProps(__spreadValues({
-        className: clsx("hds-skeleton", `hds-skeleton--${variant}`, className),
+        className: clsx(
+          "hds-skeleton",
+          `hds-skeleton--${variant}`,
+          !animation && `hds-skeleton--no-animation`,
+          className
+        ),
         style: __spreadProps(__spreadValues({}, style), { width, height }),
         ref,
         "aria-hidden": true
@@ -30,4 +53,4 @@ Skeleton.displayName = "Skeleton";
 export {
   Skeleton
 };
-//# sourceMappingURL=chunk-OYJQ5MAS.mjs.map
+//# sourceMappingURL=chunk-BYDSISQZ.mjs.map

package/dist/chunk-BYDSISQZ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/skeleton/skeleton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport type { OverridableComponent } from \"../utils\";\n\ninterface DimensionsFromWidthAndHeight {\n  height?: number | string;\n  width?: number | string;\n}\n\ninterface SkeletonPropsInner extends React.AnchorHTMLAttributes<HTMLDivElement> {\n  /**\n   * The visual style of the Skeleton\n   */\n  variant?: \"text\" | \"circle\" | \"rectangle\" | \"rounded\";\n\n  /**\n   * Whether to show animation or not\n   * In the future the animation effect might become configurable\n   *\n   * default true\n   */\n  animation?: boolean;\n\n  children?: React.ReactNode;\n}\n\nexport type SkeletonProps = SkeletonPropsInner & DimensionsFromWidthAndHeight;\n\n/**\n * Make skeleton loading states as placeholders for your content while waiting for data to load.\n *\n * **Note**\n *\n * Consider if this is really needed. The best experience is to avoid loading states altogether.\n * If your loading takes under 1 second, it better to not show anything at all.\n *\n * - Make your backend faster\n * - Preload/prefetch data\n * - Avoid data loading waterfalls\n * - Use optimistic ui when doing mutations\n *\n * **Usage**\n *\n * ```tsx\n * <Skeleton variant=\"circle\" width=\"2rem\" height=\"2rem\" />\n * <Skeleton variant=\"text\" />\n * <Skeleton variant=\"text\" width=\"80%\" />\n * <Skeleton variant=\"text\">Uses content to determine width</Skeleton>\n * <Skeleton variant=\"rectangle\" width=\"300px\" height=\"400px\" />\n * ```\n *\n * Remember to set `aria-hidden` on top level components you use that are not the `Skeleton` component.\n *\n * The `Skeleton` component does this for it self, but if you are using other components higher up in the tree, it might cause problems with screen readers\n *\n * **References**\n * - https://aksel.nav.no/komponenter/core/skeleton\n * - https://chakra-ui.com/docs/components/skeleton\n * - https://mui.com/material-ui/react-skeleton/\n */\nexport const Skeleton: OverridableComponent<SkeletonProps, HTMLDivElement> = forwardRef(\n  (\n    {\n      as: Component = \"div\",\n      children,\n      animation,\n      variant = \"text\",\n      width,\n      height,\n      className,\n      style,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <Component\n        className={clsx(\n          \"hds-skeleton\",\n          `hds-skeleton--${variant}`,\n          !animation && `hds-skeleton--no-animation`,\n          className as undefined,\n        )}\n        style={{ ...style, width, height }}\n        ref={ref}\n        aria-hidden\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nSkeleton.displayName = \"Skeleton\";\n"],"mappings":";;;;;;;AAAA,OAAuB;AACvB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AA2ErB;AAhBC,IAAM,WAAgE;AAAA,EAC3E,CACE,IAWA,QACG;AAZH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAvEN,IA+DI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,iBAAiB,OAAO;AAAA,UACxB,CAAC,aAAa;AAAA,UACd;AAAA,QACF;AAAA,QACA,OAAO,iCAAK,QAAL,EAAY,OAAO,OAAO;AAAA,QACjC;AAAA,QACA,eAAW;AAAA,SACP,OAVL;AAAA,QAYE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":[]}

package/dist/{chunk-VKRPPQ6F.mjs → chunk-H3VGHTDC.mjs}

@@ -7,8 +7,9 @@ import {
   Navbar,
   NavbarButton,
   NavbarLogo,
+  NavbarLogoAndServiceText,
   NavbarNavigation
-} from "./chunk-JMDXW2ML.mjs";
+} from "./chunk-625SVQEP.mjs";
 
 // src/navbar/index.tsx
 var NavbarExpandableMenuComponent = NavbarExpandableMenu;
@@ -16,6 +17,7 @@ NavbarExpandableMenuComponent.Trigger = NavbarExpandableMenuTrigger;
 NavbarExpandableMenuComponent.Content = NavbarExpandableMenuContent;
 var NavbarComponent = Navbar;
 NavbarComponent.Logo = NavbarLogo;
+NavbarComponent.LogoAndServiceText = NavbarLogoAndServiceText;
 NavbarComponent.ExpandableMenu = NavbarExpandableMenuComponent;
 NavbarComponent.Button = NavbarButton;
 NavbarComponent.Navigation = NavbarNavigation;
@@ -23,4 +25,4 @@ NavbarComponent.Navigation = NavbarNavigation;
 export {
   NavbarComponent
 };
-//# sourceMappingURL=chunk-VKRPPQ6F.mjs.map
+//# sourceMappingURL=chunk-H3VGHTDC.mjs.map

package/dist/chunk-H3VGHTDC.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/navbar/index.tsx"],"sourcesContent":["import {\n  Navbar,\n  NavbarLogo,\n  NavbarButton,\n  NavbarNavigation,\n  NavbarLogoAndServiceText,\n} from \"./navbar\";\nimport {\n  NavbarExpandableMenu,\n  NavbarExpandableMenuTrigger,\n  NavbarExpandableMenuContent,\n} from \"./navbar-expandable-menu\";\n\nconst NavbarExpandableMenuComponent = NavbarExpandableMenu as typeof NavbarExpandableMenu & {\n  Trigger: typeof NavbarExpandableMenuTrigger;\n  Content: typeof NavbarExpandableMenuContent;\n};\nNavbarExpandableMenuComponent.Trigger = NavbarExpandableMenuTrigger;\nNavbarExpandableMenuComponent.Content = NavbarExpandableMenuContent;\n\nconst NavbarComponent = Navbar as typeof Navbar & {\n  Logo: typeof NavbarLogo;\n  LogoAndServiceText: typeof NavbarLogoAndServiceText;\n  ExpandableMenu: typeof NavbarExpandableMenuComponent;\n  Button: typeof NavbarButton;\n  Navigation: typeof NavbarNavigation;\n};\nNavbarComponent.Logo = NavbarLogo;\nNavbarComponent.LogoAndServiceText = NavbarLogoAndServiceText;\nNavbarComponent.ExpandableMenu = NavbarExpandableMenuComponent;\nNavbarComponent.Button = NavbarButton;\nNavbarComponent.Navigation = NavbarNavigation;\n\nexport { NavbarComponent as Navbar };\nexport type * from \"./navbar\";\n"],"mappings":";;;;;;;;;;;;;;AAaA,IAAM,gCAAgC;AAItC,8BAA8B,UAAU;AACxC,8BAA8B,UAAU;AAExC,IAAM,kBAAkB;AAOxB,gBAAgB,OAAO;AACvB,gBAAgB,qBAAqB;AACrC,gBAAgB,iBAAiB;AACjC,gBAAgB,SAAS;AACzB,gBAAgB,aAAa;","names":[]}

package/dist/index-no-css.d.mts

@@ -72,6 +72,7 @@ export { ModalFooter } from './_tsup-dts-rollup';
 export { Navbar } from './_tsup-dts-rollup';
 export { NavbarProps } from './_tsup-dts-rollup';
 export { NavbarLogo } from './_tsup-dts-rollup';
+export { NavbarLogoAndServiceText } from './_tsup-dts-rollup';
 export { NavbarButton } from './_tsup-dts-rollup';
 export { NavbarNavigation } from './_tsup-dts-rollup';
 export { AutoAnimateHeight } from './_tsup-dts-rollup';

package/dist/index-no-css.d.ts

@@ -72,6 +72,7 @@ export { ModalFooter } from './_tsup-dts-rollup';
 export { Navbar } from './_tsup-dts-rollup';
 export { NavbarProps } from './_tsup-dts-rollup';
 export { NavbarLogo } from './_tsup-dts-rollup';
+export { NavbarLogoAndServiceText } from './_tsup-dts-rollup';
 export { NavbarButton } from './_tsup-dts-rollup';
 export { NavbarNavigation } from './_tsup-dts-rollup';
 export { AutoAnimateHeight } from './_tsup-dts-rollup';

package/dist/index-no-css.js

@@ -1256,11 +1256,20 @@ ModalComponent.Footer = ModalFooter;
 // src/navbar/navbar.tsx
 var import_react22 = require("react");
 var import_typed_classname25 = require("@postenbring/hedwig-css/typed-classname");
+var import_react_slot = require("@radix-ui/react-slot");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var Navbar = (0, import_react22.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("header", __spreadProps(__spreadValues({ className: (0, import_typed_classname25.clsx)("hds-navbar", className), ref }, rest), { children }));
+    var _b = _a, { children, className, variant } = _b, rest = __objRest(_b, ["children", "className", "variant"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      "header",
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname25.clsx)("hds-navbar", variant && `hds-navbar--${variant}`, className),
+        ref
+      }, rest), {
+        children
+      })
+    );
   }
 );
 Navbar.displayName = "Navbar";
@@ -1271,6 +1280,26 @@ var NavbarLogo = (0, import_react22.forwardRef)(
   }
 );
 NavbarLogo.displayName = "Navbar.Logo";
+var NavbarLogoAndServiceText = (0, import_react22.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, asChild, variant, className } = _b, rest = __objRest(_b, ["children", "asChild", "variant", "className"]);
+    const Component = asChild ? import_react_slot.Slot : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        ref,
+        className: (0, import_typed_classname25.clsx)(
+          "hds-navbar__logo-and-service-text",
+          `hds-navbar__logo-and-service-text--${variant}`,
+          className
+        )
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+NavbarLogoAndServiceText.displayName = "Navbar.NavbarLogoAndText";
 var NavbarButton = (0, import_react22.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "button", children, icon, className } = _b, rest = __objRest(_b, ["as", "children", "icon", "className"]);
@@ -1488,6 +1517,7 @@ NavbarExpandableMenuComponent.Trigger = NavbarExpandableMenuTrigger;
 NavbarExpandableMenuComponent.Content = NavbarExpandableMenuContent;
 var NavbarComponent = Navbar;
 NavbarComponent.Logo = NavbarLogo;
+NavbarComponent.LogoAndServiceText = NavbarLogoAndServiceText;
 NavbarComponent.ExpandableMenu = NavbarExpandableMenuComponent;
 NavbarComponent.Button = NavbarButton;
 NavbarComponent.Navigation = NavbarNavigation;
@@ -1548,6 +1578,7 @@ var AutoAnimateHeight = (0, import_react24.forwardRef)(
       __spreadProps(__spreadValues({
         ref,
         style: __spreadValues({
+          position: "relative",
           overflow: "hidden",
           height,
           transitionProperty: "height",
@@ -1612,11 +1643,34 @@ var import_react26 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var Skeleton = (0, import_react26.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { as: Component = "div", children, variant = "text", width, height, className, style } = _b, rest = __objRest(_b, ["as", "children", "variant", "width", "height", "className", "style"]);
+    var _b = _a, {
+      as: Component = "div",
+      children,
+      animation,
+      variant = "text",
+      width,
+      height,
+      className,
+      style
+    } = _b, rest = __objRest(_b, [
+      "as",
+      "children",
+      "animation",
+      "variant",
+      "width",
+      "height",
+      "className",
+      "style"
+    ]);
     return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       Component,
       __spreadProps(__spreadValues({
-        className: (0, import_typed_classname28.clsx)("hds-skeleton", `hds-skeleton--${variant}`, className),
+        className: (0, import_typed_classname28.clsx)(
+          "hds-skeleton",
+          `hds-skeleton--${variant}`,
+          !animation && `hds-skeleton--no-animation`,
+          className
+        ),
         style: __spreadProps(__spreadValues({}, style), { width, height }),
         ref,
         "aria-hidden": true