@postenbring/hedwig-react 0.0.62 → 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 }
@@ -1325,7 +1375,7 @@ export declare const ShowMore: Story_23;
  * }
  * ```
  */
-declare function ShowMoreButton({ text, variant, expanded, className, ...rest }: ShowMoreProps): JSX_2.Element;
+declare const ShowMoreButton: ForwardRefExoticComponent<ShowMoreProps & RefAttributes<HTMLButtonElement>>;
 export { ShowMoreButton }
 export { ShowMoreButton as ShowMoreButton_alias_1 }
 export { ShowMoreButton as ShowMoreButton_alias_2 }
@@ -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;
 }
 
@@ -1410,7 +1467,7 @@ export declare const Solid: Story_17;
  *
  * It does not handle step content or navigation, only the visual indication of the active step.
  */
-declare function StepIndicator({ activeStep, totalSteps, className, label, lang, title, titleAs: TitleComponent, ...rest }: StepIndicatorProps & TitleProps): JSX_2.Element;
+declare const StepIndicator: ForwardRefExoticComponent<(StepIndicatorProps & TitleProps) & RefAttributes<HTMLDivElement>>;
 export { StepIndicator }
 export { StepIndicator as StepIndicator_alias_1 }
 export { StepIndicator as StepIndicator_alias_2 }

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 }
@@ -1325,7 +1375,7 @@ export declare const ShowMore: Story_23;
  * }
  * ```
  */
-declare function ShowMoreButton({ text, variant, expanded, className, ...rest }: ShowMoreProps): JSX_2.Element;
+declare const ShowMoreButton: ForwardRefExoticComponent<ShowMoreProps & RefAttributes<HTMLButtonElement>>;
 export { ShowMoreButton }
 export { ShowMoreButton as ShowMoreButton_alias_1 }
 export { ShowMoreButton as ShowMoreButton_alias_2 }
@@ -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;
 }
 
@@ -1410,7 +1467,7 @@ export declare const Solid: Story_17;
  *
  * It does not handle step content or navigation, only the visual indication of the active step.
  */
-declare function StepIndicator({ activeStep, totalSteps, className, label, lang, title, titleAs: TitleComponent, ...rest }: StepIndicatorProps & TitleProps): JSX_2.Element;
+declare const StepIndicator: ForwardRefExoticComponent<(StepIndicatorProps & TitleProps) & RefAttributes<HTMLDivElement>>;
 export { StepIndicator }
 export { StepIndicator as StepIndicator_alias_1 }
 export { StepIndicator as StepIndicator_alias_2 }

package/dist/chunk-5UJ3LEKK.mjs

@@ -0,0 +1,76 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-R4SQKVDQ.mjs";
+
+// src/step-indicator/step-indicator.tsx
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StepIndicator = forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      activeStep,
+      totalSteps,
+      className,
+      label,
+      lang = "en",
+      title,
+      titleAs: TitleComponent
+    } = _b, rest = __objRest(_b, [
+      "activeStep",
+      "totalSteps",
+      "className",
+      "label",
+      "lang",
+      "title",
+      "titleAs"
+    ]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: clsx("hds-step-indicator", className),
+        lang
+      }, rest), {
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: clsx("hds-step-indicator__header"), children: [
+            /* @__PURE__ */ jsx("span", { className: clsx("hds-step-indicator__left-label"), children: label }),
+            /* @__PURE__ */ jsx("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: clsx("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx("hds-step-indicator__step"),
+              "data-state": getStepState(i + 1, activeStep)
+            },
+            i
+          )) }),
+          title ? /* @__PURE__ */ jsx(TitleComponent, { className: clsx("hds-step-indicator__title"), children: title }) : null
+        ]
+      })
+    );
+  }
+);
+StepIndicator.displayName = "StepIndicator";
+var stepLabelTranslations = {
+  no: (activeStep, totalSteps) => `steg ${activeStep} av ${totalSteps}`,
+  en: (activeStep, totalSteps) => `step ${activeStep} of ${totalSteps}`,
+  da: (activeStep, totalSteps) => `trin ${activeStep} af ${totalSteps}`,
+  sv: (activeStep, totalSteps) => `steg ${activeStep} av ${totalSteps}`
+};
+function getStepState(renderedStep, activeStep) {
+  if (renderedStep < activeStep) {
+    return "previous";
+  }
+  if (renderedStep === activeStep) {
+    return "active";
+  }
+  return "next";
+}
+
+export {
+  StepIndicator
+};
+//# sourceMappingURL=chunk-5UJ3LEKK.mjs.map

package/dist/chunk-5UJ3LEKK.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/step-indicator/step-indicator.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\n\ntype TitleProps =\n  | {\n      /**\n       * Optional title of the active step to be shown underneath the step indicator\n       *\n       * Use `titleAs` to set the correct heading level\n       */\n      title: React.ReactNode;\n      titleAs: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n    }\n  | {\n      title?: undefined;\n      titleAs?: undefined;\n    };\n\ninterface StepIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  /*\n   * 1-indexed number of the active step\n   */\n  activeStep: number;\n\n  /**\n   * 1-indexed number of steps\n   */\n  totalSteps: number;\n\n  /**\n   * Label on the left side above the steps\n   */\n  label: React.ReactNode;\n\n  /**\n   * Language for the \"step x of y\" label, default is \"en\"\n   */\n  lang?: \"no\" | \"en\" | \"da\" | \"sv\";\n}\n\n/**\n * Indicate a step in a process.\n *\n * It does not handle step content or navigation, only the visual indication of the active step.\n */\nexport const StepIndicator = forwardRef<HTMLDivElement, StepIndicatorProps & TitleProps>(\n  (\n    {\n      activeStep,\n      totalSteps,\n      className,\n      label,\n      lang = \"en\",\n      title,\n      titleAs: TitleComponent,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={clsx(\"hds-step-indicator\", className as undefined)}\n        lang={lang}\n        {...rest}\n      >\n        <div className={clsx(\"hds-step-indicator__header\")}>\n          <span className={clsx(\"hds-step-indicator__left-label\")}>{label}</span>\n          <span>{stepLabelTranslations[lang](activeStep, totalSteps)}</span>\n        </div>\n\n        <div className={clsx(\"hds-step-indicator__steps\")}>\n          {Array.from({ length: totalSteps }, (_, i) => (\n            <div\n              className={clsx(\"hds-step-indicator__step\")}\n              data-state={getStepState(i + 1, activeStep)}\n              key={i}\n            />\n          ))}\n        </div>\n\n        {title ? (\n          <TitleComponent className={clsx(\"hds-step-indicator__title\")}>{title}</TitleComponent>\n        ) : null}\n      </div>\n    );\n  },\n);\nStepIndicator.displayName = \"StepIndicator\";\n\n/**\n * Translated texts for the `step x of y` label.\n */\nconst stepLabelTranslations: Record<\n  \"no\" | \"en\" | \"da\" | \"sv\",\n  (activeStep: number, totalSteps: number) => string\n> = {\n  no: (activeStep: number, totalSteps: number) => `steg ${activeStep} av ${totalSteps}`,\n  en: (activeStep: number, totalSteps: number) => `step ${activeStep} of ${totalSteps}`,\n  da: (activeStep: number, totalSteps: number) => `trin ${activeStep} af ${totalSteps}`,\n  sv: (activeStep: number, totalSteps: number) => `steg ${activeStep} av ${totalSteps}`,\n};\n\n/**\n * Determine the state of a step.\n * 1-indexed\n */\nfunction getStepState(renderedStep: number, activeStep: number) {\n  if (renderedStep < activeStep) {\n    return \"previous\";\n  }\n  if (renderedStep === activeStep) {\n    return \"active\";\n  }\n  return \"next\";\n}\n"],"mappings":";;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAiEnB,SACE,KADF;AArBD,IAAM,gBAAgB;AAAA,EAC3B,CACE,IAUA,QACG;AAXH,iBACE;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,SAAS;AAAA,IAtDf,IA+CI,IAQK,iBARL,IAQK;AAAA,MAPH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,sBAAsB,SAAsB;AAAA,QAC5D;AAAA,SACI,OAJL;AAAA,QAMC;AAAA,+BAAC,SAAI,WAAW,KAAK,4BAA4B,GAC/C;AAAA,gCAAC,UAAK,WAAW,KAAK,gCAAgC,GAAI,iBAAM;AAAA,YAChE,oBAAC,UAAM,gCAAsB,IAAI,EAAE,YAAY,UAAU,GAAE;AAAA,aAC7D;AAAA,UAEA,oBAAC,SAAI,WAAW,KAAK,2BAA2B,GAC7C,gBAAM,KAAK,EAAE,QAAQ,WAAW,GAAG,CAAC,GAAG,MACtC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,KAAK,0BAA0B;AAAA,cAC1C,cAAY,aAAa,IAAI,GAAG,UAAU;AAAA;AAAA,YACrC;AAAA,UACP,CACD,GACH;AAAA,UAEC,QACC,oBAAC,kBAAe,WAAW,KAAK,2BAA2B,GAAI,iBAAM,IACnE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;AAK5B,IAAM,wBAGF;AAAA,EACF,IAAI,CAAC,YAAoB,eAAuB,QAAQ,UAAU,OAAO,UAAU;AAAA,EACnF,IAAI,CAAC,YAAoB,eAAuB,QAAQ,UAAU,OAAO,UAAU;AAAA,EACnF,IAAI,CAAC,YAAoB,eAAuB,QAAQ,UAAU,OAAO,UAAU;AAAA,EACnF,IAAI,CAAC,YAAoB,eAAuB,QAAQ,UAAU,OAAO,UAAU;AACrF;AAMA,SAAS,aAAa,cAAsB,YAAoB;AAC9D,MAAI,eAAe,YAAY;AAC7B,WAAO;AAAA,EACT;AACA,MAAI,iBAAiB,YAAY;AAC/B,WAAO;AAAA,EACT;AACA,SAAO;AACT;","names":[]}

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/chunk-ZDPU3N54.mjs

@@ -0,0 +1,39 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-R4SQKVDQ.mjs";
+
+// src/show-more/show-more.tsx
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ShowMoreButton = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { text, variant, expanded, className } = _b, rest = __objRest(_b, ["text", "variant", "expanded", "className"]);
+    return /* @__PURE__ */ jsxs(
+      "button",
+      __spreadProps(__spreadValues({
+        ref,
+        className: clsx(
+          "hds-show-more",
+          variant === "show-more-show-less" && "hds-show-more--show-less",
+          className
+        ),
+        "data-state": expanded ? "expanded" : void 0,
+        type: "button"
+      }, rest), {
+        children: [
+          text,
+          /* @__PURE__ */ jsx("span", { className: clsx("hds-show-more__icon") })
+        ]
+      })
+    );
+  }
+);
+ShowMoreButton.displayName = "ShowMoreButton";
+
+export {
+  ShowMoreButton
+};
+//# sourceMappingURL=chunk-ZDPU3N54.mjs.map

package/dist/chunk-ZDPU3N54.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/show-more/show-more.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\n\ntype Variant =\n  | {\n      variant?: \"show-more\";\n      expanded?: never;\n    }\n  | {\n      variant: \"show-more-show-less\";\n      expanded: boolean;\n    };\n\nexport type ShowMoreProps = React.HTMLAttributes<HTMLButtonElement> & {\n  text: React.ReactNode;\n} & Variant;\n\n/**\n * Simple button for triggering more content.\n *\n * You have to add the logic for what happens when the button is clicked yourself.\n *\n * **Example**\n *\n * ```tsx\n * function Content() {\n *   const [items, fetchMoreItems, moreItemsAvailable] = useYourData();\n *   function onShowMoreItems() {\n *     fetchMoreItems();\n *   }\n *   return (\n *     <>\n *       <ul>\n *         {items.map((item) => (\n *          <li key={item.id}>{item.text}</li>\n *         ))}\n *       </ul>\n *       {moreItemsAvailable ?\n *         <ShowMoreButton className=\"mt-8\" onClick={onShowMoreItems} lang=\"en\" /> :\n *         null\n *       }\n *     </>\n *   )\n * }\n * ```\n */\nexport const ShowMoreButton = forwardRef<HTMLButtonElement, ShowMoreProps>(\n  ({ text, variant, expanded, className, ...rest }, ref) => {\n    return (\n      <button\n        ref={ref}\n        className={clsx(\n          \"hds-show-more\",\n          variant === \"show-more-show-less\" && \"hds-show-more--show-less\",\n          className as undefined,\n        )}\n        data-state={expanded ? \"expanded\" : undefined}\n        type=\"button\"\n        {...rest}\n      >\n        {text}\n        <span className={clsx(\"hds-show-more__icon\")} />\n      </button>\n    );\n  },\n);\nShowMoreButton.displayName = \"ShowMoreButton\";\n"],"mappings":";;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAgDrB,SAYE,KAZF;AAHC,IAAM,iBAAiB;AAAA,EAC5B,CAAC,IAAiD,QAAQ;AAAzD,iBAAE,QAAM,SAAS,UAAU,UA/C9B,IA+CG,IAAyC,iBAAzC,IAAyC,CAAvC,QAAM,WAAS,YAAU;AAC1B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,YAAY,yBAAyB;AAAA,UACrC;AAAA,QACF;AAAA,QACA,cAAY,WAAW,aAAa;AAAA,QACpC,MAAK;AAAA,SACD,OATL;AAAA,QAWE;AAAA;AAAA,UACD,oBAAC,UAAK,WAAW,KAAK,qBAAqB,GAAG;AAAA;AAAA;AAAA,IAChD;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;","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';