@postenbring/hedwig-react 0.0.65 → 0.0.66

package/dist/layout/stack/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/layout/stack/index.tsx","../../../src/layout/stack/stack.tsx","../../../src/layout/spacing.ts","../../../src/layout/responsive.ts"],"sourcesContent":["export { Stack, HStack, VStack } from \"./stack\";\nexport type * from \"./stack\";\n","import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { getSpacingVariable, type ResponsiveSpacingSizes, type SpacingSizes } from \"../spacing\";\nimport { getResponsiveProps, type ResponsiveProp } from \"../responsive\";\n\ntype CSSPropertiesWithVar = React.CSSProperties & {\n  \"--hds-stack-gap\"?: string;\n  \"--hds-stack-direction\"?: string;\n  \"--hds-stack-wrap\"?: string;\n  \"--hds-stack-align\"?: string;\n  \"--hds-stack-justify\"?: string;\n};\n\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n\n  gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n  direction?: ResponsiveProp<React.CSSProperties[\"flexDirection\"]>;\n  wrap?: ResponsiveProp<boolean>;\n  align?: ResponsiveProp<React.CSSProperties[\"alignItems\"]>;\n  justify?: ResponsiveProp<React.CSSProperties[\"justifyContent\"]>;\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/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const Stack = forwardRef<HTMLDivElement, StackProps>(\n  (\n    { children, asChild, className, style: _style, gap, direction, wrap, align, justify, ...rest },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : \"div\";\n    const style: CSSPropertiesWithVar = {\n      ..._style,\n      ...getResponsiveProps(\"--hds-stack-gap\", gap, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-stack-direction\", direction),\n      ...getResponsiveProps(\"--hds-stack-wrap\", wrap, (value) => (value ? \"wrap\" : \"nowrap\")),\n      ...getResponsiveProps(\"--hds-stack-align\", align),\n      ...getResponsiveProps(\"--hds-stack-justify\", justify),\n    };\n    return (\n      <Component\n        style={style}\n        className={clsx(\"hds-stack\", className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nStack.displayName = \"Stack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const HStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n  return <Stack ref={ref} {...props} direction=\"row\" />;\n});\nHStack.displayName = \"HStack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const VStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n  return <Stack ref={ref} {...props} direction=\"column\" />;\n});\nVStack.displayName = \"VStack\";\n","// TODO: Get from tokens package\n// For now it's fine, since it's still in this monorepo\nconst spacingSizes = {\n  \"4\": \"4\",\n  \"8\": \"8\",\n  \"12\": \"12\",\n  \"16\": \"16\",\n  \"20\": \"20\",\n  \"24\": \"24\",\n  \"32\": \"32\",\n  \"40\": \"40\",\n  \"48\": \"48\",\n  \"64\": \"64\",\n  \"80\": \"80\",\n  \"120\": \"120\",\n} as const;\nexport type SpacingSizes = keyof typeof spacingSizes;\n\nconst responsiveSpacingSizes = {\n  \"4-8\": \"4-8\",\n  \"8-12\": \"8-12\",\n  \"12-16\": \"12-16\",\n  \"16-20\": \"16-20\",\n  \"20-24\": \"20-24\",\n  \"24-32\": \"24-32\",\n  \"32-40\": \"32-40\",\n  \"40-48\": \"40-48\",\n  \"48-64\": \"48-64\",\n  \"64-80\": \"64-80\",\n  \"80-120\": \"80-120\",\n  \"120-160\": \"120-160\",\n} as const;\nexport type ResponsiveSpacingSizes = keyof typeof responsiveSpacingSizes;\n\nexport function getSpacingVariable(size: SpacingSizes | ResponsiveSpacingSizes) {\n  return `var(--hds-spacing-${size})`;\n}\n","type Breakpoints = \"xsmall\" | \"small\" | \"medium\" | \"large\" | \"xlarge\";\n\ntype ResponsiveValues<T> = {\n  [Breakpoint in Breakpoints]?: T;\n};\n\nexport type ResponsiveProp<T> = T | ResponsiveValues<T>;\n\nexport function getResponsiveProps<T>(\n  variable: `--hds-${string}`,\n  inputValues?: ResponsiveProp<T>,\n  valueTransformer: (value: T) => string = (value) => String(value),\n) {\n  if (!inputValues) return {};\n\n  if (typeof inputValues !== \"object\") {\n    return { [`${variable}-xsmall`]: valueTransformer(inputValues) };\n  }\n\n  const result: Record<string, string> = {};\n  for (const [key, value] of Object.entries(inputValues as ResponsiveValues<T>)) {\n    result[`${variable}-${key}`] = valueTransformer(value);\n  }\n\n  return result;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,6BAAqB;AACrB,mBAA2B;AAC3B,wBAAqB;;;AC+Bd,SAAS,mBAAmB,MAA6C;AAC9E,SAAO,qBAAqB,IAAI;AAClC;;;AC5BO,SAAS,mBACd,UACA,aACA,mBAAyC,CAAC,UAAU,OAAO,KAAK,GAChE;AACA,MAAI,CAAC;AAAa,WAAO,CAAC;AAE1B,MAAI,OAAO,gBAAgB,UAAU;AACnC,WAAO,EAAE,CAAC,GAAG,QAAQ,SAAS,GAAG,iBAAiB,WAAW,EAAE;AAAA,EACjE;AAEA,QAAM,SAAiC,CAAC;AACxC,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,WAAkC,GAAG;AAC7E,WAAO,GAAG,QAAQ,IAAI,GAAG,EAAE,IAAI,iBAAiB,KAAK;AAAA,EACvD;AAEA,SAAO;AACT;;;AF4BM;AAfC,IAAM,YAAQ;AAAA,EACnB,CACE,IACA,QACG;AAFH,iBAAE,YAAU,SAAS,WAAW,OAAO,QAAQ,KAAK,WAAW,MAAM,OAAO,QAxChF,IAwCI,IAAwF,iBAAxF,IAAwF,CAAtF,YAAU,WAAS,aAAW,SAAe,OAAK,aAAW,QAAM,SAAO;AAG5E,UAAM,YAAY,UAAU,yBAAO;AACnC,UAAM,QAA8B,8FAC/B,SACA,mBAAmB,mBAAmB,KAAK,kBAAkB,IAC7D,mBAAmB,yBAAyB,SAAS,IACrD,mBAAmB,oBAAoB,MAAM,CAAC,UAAW,QAAQ,SAAS,QAAS,IACnF,mBAAmB,qBAAqB,KAAK,IAC7C,mBAAmB,uBAAuB,OAAO;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,6BAAK,aAAa,SAAsB;AAAA,QACnD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAUb,IAAM,aAAS,yBAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,4CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,QAAM;AACrD,CAAC;AACD,OAAO,cAAc;AAUd,IAAM,aAAS,yBAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,4CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,WAAS;AACxD,CAAC;AACD,OAAO,cAAc;","names":[]}

package/dist/layout/stack/index.mjs

@@ -0,0 +1,14 @@
+import {
+  HStack,
+  Stack,
+  VStack
+} from "../../chunk-27XJO7E4.mjs";
+import "../../chunk-ZTYEOZLK.mjs";
+import "../../chunk-NE6W2PCD.mjs";
+import "../../chunk-R4SQKVDQ.mjs";
+export {
+  HStack,
+  Stack,
+  VStack
+};
+//# sourceMappingURL=index.mjs.map

package/dist/layout/stack/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/layout/stack/stack.d.mts

@@ -0,0 +1,4 @@
+export { StackProps_alias_4 as StackProps } from '../../_tsup-dts-rollup';
+export { Stack_alias_4 as Stack } from '../../_tsup-dts-rollup';
+export { HStack_alias_4 as HStack } from '../../_tsup-dts-rollup';
+export { VStack_alias_4 as VStack } from '../../_tsup-dts-rollup';

package/dist/layout/stack/stack.d.ts

@@ -0,0 +1,4 @@
+export { StackProps_alias_4 as StackProps } from '../../_tsup-dts-rollup';
+export { Stack_alias_4 as Stack } from '../../_tsup-dts-rollup';
+export { HStack_alias_4 as HStack } from '../../_tsup-dts-rollup';
+export { VStack_alias_4 as VStack } from '../../_tsup-dts-rollup';

package/dist/layout/stack/stack.js

@@ -0,0 +1,115 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/layout/stack/stack.tsx
+var stack_exports = {};
+__export(stack_exports, {
+  HStack: () => HStack,
+  Stack: () => Stack,
+  VStack: () => VStack
+});
+module.exports = __toCommonJS(stack_exports);
+var React = require("react");
+var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
+var import_react = require("react");
+var import_react_slot = require("@radix-ui/react-slot");
+
+// src/layout/spacing.ts
+function getSpacingVariable(size) {
+  return `var(--hds-spacing-${size})`;
+}
+
+// src/layout/responsive.ts
+function getResponsiveProps(variable, inputValues, valueTransformer = (value) => String(value)) {
+  if (!inputValues)
+    return {};
+  if (typeof inputValues !== "object") {
+    return { [`${variable}-xsmall`]: valueTransformer(inputValues) };
+  }
+  const result = {};
+  for (const [key, value] of Object.entries(inputValues)) {
+    result[`${variable}-${key}`] = valueTransformer(value);
+  }
+  return result;
+}
+
+// src/layout/stack/stack.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Stack = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, asChild, className, style: _style, gap, direction, wrap, align, justify } = _b, rest = __objRest(_b, ["children", "asChild", "className", "style", "gap", "direction", "wrap", "align", "justify"]);
+    const Component = asChild ? import_react_slot.Slot : "div";
+    const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-stack-gap", gap, getSpacingVariable)), getResponsiveProps("--hds-stack-direction", direction)), getResponsiveProps("--hds-stack-wrap", wrap, (value) => value ? "wrap" : "nowrap")), getResponsiveProps("--hds-stack-align", align)), getResponsiveProps("--hds-stack-justify", justify));
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        style,
+        className: (0, import_typed_classname.clsx)("hds-stack", className),
+        ref
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+Stack.displayName = "Stack";
+var HStack = (0, import_react.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "row" }));
+});
+HStack.displayName = "HStack";
+var VStack = (0, import_react.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "column" }));
+});
+VStack.displayName = "VStack";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  HStack,
+  Stack,
+  VStack
+});
+//# sourceMappingURL=stack.js.map

package/dist/layout/stack/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/layout/stack/stack.tsx","../../../src/layout/spacing.ts","../../../src/layout/responsive.ts"],"sourcesContent":["import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { getSpacingVariable, type ResponsiveSpacingSizes, type SpacingSizes } from \"../spacing\";\nimport { getResponsiveProps, type ResponsiveProp } from \"../responsive\";\n\ntype CSSPropertiesWithVar = React.CSSProperties & {\n  \"--hds-stack-gap\"?: string;\n  \"--hds-stack-direction\"?: string;\n  \"--hds-stack-wrap\"?: string;\n  \"--hds-stack-align\"?: string;\n  \"--hds-stack-justify\"?: string;\n};\n\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n\n  gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n  direction?: ResponsiveProp<React.CSSProperties[\"flexDirection\"]>;\n  wrap?: ResponsiveProp<boolean>;\n  align?: ResponsiveProp<React.CSSProperties[\"alignItems\"]>;\n  justify?: ResponsiveProp<React.CSSProperties[\"justifyContent\"]>;\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/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const Stack = forwardRef<HTMLDivElement, StackProps>(\n  (\n    { children, asChild, className, style: _style, gap, direction, wrap, align, justify, ...rest },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : \"div\";\n    const style: CSSPropertiesWithVar = {\n      ..._style,\n      ...getResponsiveProps(\"--hds-stack-gap\", gap, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-stack-direction\", direction),\n      ...getResponsiveProps(\"--hds-stack-wrap\", wrap, (value) => (value ? \"wrap\" : \"nowrap\")),\n      ...getResponsiveProps(\"--hds-stack-align\", align),\n      ...getResponsiveProps(\"--hds-stack-justify\", justify),\n    };\n    return (\n      <Component\n        style={style}\n        className={clsx(\"hds-stack\", className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nStack.displayName = \"Stack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const HStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n  return <Stack ref={ref} {...props} direction=\"row\" />;\n});\nHStack.displayName = \"HStack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const VStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n  return <Stack ref={ref} {...props} direction=\"column\" />;\n});\nVStack.displayName = \"VStack\";\n","// TODO: Get from tokens package\n// For now it's fine, since it's still in this monorepo\nconst spacingSizes = {\n  \"4\": \"4\",\n  \"8\": \"8\",\n  \"12\": \"12\",\n  \"16\": \"16\",\n  \"20\": \"20\",\n  \"24\": \"24\",\n  \"32\": \"32\",\n  \"40\": \"40\",\n  \"48\": \"48\",\n  \"64\": \"64\",\n  \"80\": \"80\",\n  \"120\": \"120\",\n} as const;\nexport type SpacingSizes = keyof typeof spacingSizes;\n\nconst responsiveSpacingSizes = {\n  \"4-8\": \"4-8\",\n  \"8-12\": \"8-12\",\n  \"12-16\": \"12-16\",\n  \"16-20\": \"16-20\",\n  \"20-24\": \"20-24\",\n  \"24-32\": \"24-32\",\n  \"32-40\": \"32-40\",\n  \"40-48\": \"40-48\",\n  \"48-64\": \"48-64\",\n  \"64-80\": \"64-80\",\n  \"80-120\": \"80-120\",\n  \"120-160\": \"120-160\",\n} as const;\nexport type ResponsiveSpacingSizes = keyof typeof responsiveSpacingSizes;\n\nexport function getSpacingVariable(size: SpacingSizes | ResponsiveSpacingSizes) {\n  return `var(--hds-spacing-${size})`;\n}\n","type Breakpoints = \"xsmall\" | \"small\" | \"medium\" | \"large\" | \"xlarge\";\n\ntype ResponsiveValues<T> = {\n  [Breakpoint in Breakpoints]?: T;\n};\n\nexport type ResponsiveProp<T> = T | ResponsiveValues<T>;\n\nexport function getResponsiveProps<T>(\n  variable: `--hds-${string}`,\n  inputValues?: ResponsiveProp<T>,\n  valueTransformer: (value: T) => string = (value) => String(value),\n) {\n  if (!inputValues) return {};\n\n  if (typeof inputValues !== \"object\") {\n    return { [`${variable}-xsmall`]: valueTransformer(inputValues) };\n  }\n\n  const result: Record<string, string> = {};\n  for (const [key, value] of Object.entries(inputValues as ResponsiveValues<T>)) {\n    result[`${variable}-${key}`] = valueTransformer(value);\n  }\n\n  return result;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,6BAAqB;AACrB,mBAA2B;AAC3B,wBAAqB;;;AC+Bd,SAAS,mBAAmB,MAA6C;AAC9E,SAAO,qBAAqB,IAAI;AAClC;;;AC5BO,SAAS,mBACd,UACA,aACA,mBAAyC,CAAC,UAAU,OAAO,KAAK,GAChE;AACA,MAAI,CAAC;AAAa,WAAO,CAAC;AAE1B,MAAI,OAAO,gBAAgB,UAAU;AACnC,WAAO,EAAE,CAAC,GAAG,QAAQ,SAAS,GAAG,iBAAiB,WAAW,EAAE;AAAA,EACjE;AAEA,QAAM,SAAiC,CAAC;AACxC,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,WAAkC,GAAG;AAC7E,WAAO,GAAG,QAAQ,IAAI,GAAG,EAAE,IAAI,iBAAiB,KAAK;AAAA,EACvD;AAEA,SAAO;AACT;;;AF4BM;AAfC,IAAM,YAAQ;AAAA,EACnB,CACE,IACA,QACG;AAFH,iBAAE,YAAU,SAAS,WAAW,OAAO,QAAQ,KAAK,WAAW,MAAM,OAAO,QAxChF,IAwCI,IAAwF,iBAAxF,IAAwF,CAAtF,YAAU,WAAS,aAAW,SAAe,OAAK,aAAW,QAAM,SAAO;AAG5E,UAAM,YAAY,UAAU,yBAAO;AACnC,UAAM,QAA8B,8FAC/B,SACA,mBAAmB,mBAAmB,KAAK,kBAAkB,IAC7D,mBAAmB,yBAAyB,SAAS,IACrD,mBAAmB,oBAAoB,MAAM,CAAC,UAAW,QAAQ,SAAS,QAAS,IACnF,mBAAmB,qBAAqB,KAAK,IAC7C,mBAAmB,uBAAuB,OAAO;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,6BAAK,aAAa,SAAsB;AAAA,QACnD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAUb,IAAM,aAAS,yBAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,4CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,QAAM;AACrD,CAAC;AACD,OAAO,cAAc;AAUd,IAAM,aAAS,yBAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,4CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,WAAS;AACxD,CAAC;AACD,OAAO,cAAc;","names":[]}

package/dist/layout/stack/stack.mjs

@@ -0,0 +1,14 @@
+import {
+  HStack,
+  Stack,
+  VStack
+} from "../../chunk-27XJO7E4.mjs";
+import "../../chunk-ZTYEOZLK.mjs";
+import "../../chunk-NE6W2PCD.mjs";
+import "../../chunk-R4SQKVDQ.mjs";
+export {
+  HStack,
+  Stack,
+  VStack
+};
+//# sourceMappingURL=stack.mjs.map

package/dist/layout/stack/stack.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/modal/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/modal/index.tsx","../../src/modal/modal.tsx","../../src/box/box.tsx","../../src/utils.ts"],"sourcesContent":["import { Modal, ModalHeader, ModalContent, ModalFooter } from \"./modal\";\n\nconst ModalComponent = Modal as typeof Modal & {\n  Header: typeof ModalHeader;\n  Content: typeof ModalContent;\n  Footer: typeof ModalFooter;\n};\nModalComponent.Header = ModalHeader;\nModalComponent.Content = ModalContent;\nModalComponent.Footer = ModalFooter;\n\nexport { ModalComponent as Modal };\nexport type * from \"./modal\";\n","import { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Box } from \"../box/box\";\nimport type { OverridableComponent } from \"../utils\";\nimport { useMergeRefs } from \"../utils\";\n\nexport interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {\n  children: React.ReactNode;\n\n  /**\n   * Controls the open state of the modal\n   */\n  open?: boolean;\n\n  /**\n   * Whether to close when clicking on the backdrop.\n   */\n  closeOnBackdropClick?: boolean;\n}\n\n/**\n * A modal dialog is a window that forces the user to interact with it before they can return to other parts of the application.\n *\n * Uses the native [`dialog`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element.\n *\n * Example\n * ```\n    const modalRef = useRef<HTMLDialogElement>(null);\n    const onClose = () => modalRef.current?.close();\n\n    return (\n      <>\n        <PrimaryButton onClick={() => modalRef.current?.showModal()}>Open Modal</PrimaryButton>\n        <Modal ref={modalRef}>\n          <Modal.Header>Dialog header</Modal.Header>\n          <Modal.Content>\n            <p>\n              Dialog header Dialog description - a description of what is about to happen and maybe\n              something about the consequences.\n            </p>\n          </Modal.Content>\n          <Modal.Footer style={{ display: \"flex\", gap: 16 }}>\n            <PrimaryButton fill=\"outline\" onClick={onClose}>\n              Close\n            </PrimaryButton>\n          </Modal.Footer>\n        </Modal>\n      </>\n    );\n * ```\n */\nexport const Modal = forwardRef<HTMLDialogElement, ModalProps>(\n  ({ children, className, open, closeOnBackdropClick, onClick, ...rest }, ref) => {\n    const modalRef = useRef<HTMLDialogElement>(null);\n    const mergedRef = useMergeRefs([modalRef, ref]);\n\n    // The X close button that comes from the `Box` component\n    function onCloseButtonClick() {\n      modalRef.current?.close();\n      return false;\n    }\n\n    // No scroll when modal is open\n    useScrollLock(modalRef, \"hds-modal-scroll-lock\");\n\n    // `open` prop\n    useEffect(() => {\n      if (modalRef.current && open !== undefined) {\n        if (open && !modalRef.current.open) {\n          modalRef.current.showModal();\n        } else if (!open && modalRef.current.open) {\n          modalRef.current.close();\n        }\n      }\n    }, [modalRef, open]);\n\n    function onDialogClick(e: React.MouseEvent<HTMLElement>) {\n      if (closeOnBackdropClick && e.target === modalRef.current) {\n        modalRef.current.close();\n      }\n      onClick?.(e as React.MouseEvent<HTMLDialogElement>);\n    }\n\n    return (\n      <Box\n        as=\"dialog\"\n        className={clsx(\"hds-modal\", className as undefined)}\n        closeable\n        onClick={onDialogClick}\n        onClose={onCloseButtonClick}\n        ref={mergedRef}\n        variant=\"white\"\n        {\n          ...(rest as object) /* TODO remove type casting */\n        }\n      >\n        {children}\n      </Box>\n    );\n  },\n);\nModal.displayName = \"Modal\";\n\nexport const ModalHeader: OverridableComponent<object, HTMLHeadingElement> = forwardRef(\n  ({ as: Component = \"h1\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-modal__header\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nModalHeader.displayName = \"Modal.Header\";\n\nexport const ModalContent: OverridableComponent<object, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"div\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-modal__content\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nModalContent.displayName = \"Modal.Content\";\n\nexport const ModalFooter: OverridableComponent<object, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"footer\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-modal__footer\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nModalFooter.displayName = \"Modal.Footer\";\n\nexport function useScrollLock(modalRef: React.RefObject<HTMLDialogElement>, bodyClass: string) {\n  useEffect(() => {\n    if (!modalRef.current) return;\n    if (modalRef.current.open) document.body.classList.add(bodyClass);\n\n    const observer = new MutationObserver(() => {\n      if (modalRef.current?.open) document.body.classList.add(bodyClass);\n      else document.body.classList.remove(bodyClass);\n    });\n    observer.observe(modalRef.current, {\n      attributes: true,\n      attributeFilter: [\"open\"],\n    });\n    return () => {\n      observer.disconnect();\n      document.body.classList.remove(bodyClass);\n    };\n  }, [bodyClass, modalRef]);\n}\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n  children?: React.ReactNode;\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\n}\n\nexport const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(\n  (\n    {\n      as: Component = \"div\",\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        {children}\n      </Component>\n    );\n  },\n);\nBox.displayName = \"Box\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n","import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n  (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n  <As extends ElementType>(\n    props: {\n      /** Override html element */\n      as?: As;\n    } & ComponentProps &\n      Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n  ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react","import_jsx_runtime","_a"]}
+{"version":3,"sources":["../../src/modal/index.tsx","../../src/modal/modal.tsx","../../src/box/box.tsx","../../src/utils.ts"],"sourcesContent":["import { Modal, ModalHeader, ModalContent, ModalFooter } from \"./modal\";\n\nconst ModalComponent = Modal as typeof Modal & {\n  Header: typeof ModalHeader;\n  Content: typeof ModalContent;\n  Footer: typeof ModalFooter;\n};\nModalComponent.Header = ModalHeader;\nModalComponent.Content = ModalContent;\nModalComponent.Footer = ModalFooter;\n\nexport { ModalComponent as Modal };\nexport type * from \"./modal\";\n","import { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Box } from \"../box/box\";\nimport type { OverridableComponent } from \"../utils\";\nimport { useMergeRefs } from \"../utils\";\n\nexport interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {\n  children: React.ReactNode;\n\n  /**\n   * Controls the open state of the modal\n   */\n  open?: boolean;\n\n  /**\n   * Whether to close when clicking on the backdrop.\n   */\n  closeOnBackdropClick?: boolean;\n}\n\n/**\n * A modal dialog is a window that forces the user to interact with it before they can return to other parts of the application.\n *\n * Uses the native [`dialog`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element.\n *\n * Example\n * ```\n    const modalRef = useRef<HTMLDialogElement>(null);\n    const onClose = () => modalRef.current?.close();\n\n    return (\n      <>\n        <PrimaryButton onClick={() => modalRef.current?.showModal()}>Open Modal</PrimaryButton>\n        <Modal ref={modalRef}>\n          <Modal.Header>Dialog header</Modal.Header>\n          <Modal.Content>\n            <p>\n              Dialog header Dialog description - a description of what is about to happen and maybe\n              something about the consequences.\n            </p>\n          </Modal.Content>\n          <Modal.Footer>\n            <HStack gap=\"16\" wrap>\n              <PrimaryButton onClick={onMainAction}>Main action</PrimaryButton>\n              <PrimaryButton fill=\"outline\" onClick={onClose}>\n                Cancel\n              </PrimaryButton>\n            </HStack>\n          </Modal.Footer>\n        </Modal>\n      </>\n    );\n * ```\n */\nexport const Modal = forwardRef<HTMLDialogElement, ModalProps>(\n  ({ children, className, open, closeOnBackdropClick, onClick, ...rest }, ref) => {\n    const modalRef = useRef<HTMLDialogElement>(null);\n    const mergedRef = useMergeRefs([modalRef, ref]);\n\n    // The X close button that comes from the `Box` component\n    function onCloseButtonClick() {\n      modalRef.current?.close();\n      return false;\n    }\n\n    // No scroll when modal is open\n    useScrollLock(modalRef, \"hds-modal-scroll-lock\");\n\n    // `open` prop\n    useEffect(() => {\n      if (modalRef.current && open !== undefined) {\n        if (open && !modalRef.current.open) {\n          modalRef.current.showModal();\n        } else if (!open && modalRef.current.open) {\n          modalRef.current.close();\n        }\n      }\n    }, [modalRef, open]);\n\n    function onDialogClick(e: React.MouseEvent<HTMLElement>) {\n      if (closeOnBackdropClick && e.target === modalRef.current) {\n        modalRef.current.close();\n      }\n      onClick?.(e as React.MouseEvent<HTMLDialogElement>);\n    }\n\n    return (\n      <Box\n        as=\"dialog\"\n        className={clsx(\"hds-modal\", className as undefined)}\n        closeable\n        onClick={onDialogClick}\n        onClose={onCloseButtonClick}\n        ref={mergedRef}\n        variant=\"white\"\n        {\n          ...(rest as object) /* TODO remove type casting */\n        }\n      >\n        {children}\n      </Box>\n    );\n  },\n);\nModal.displayName = \"Modal\";\n\nexport const ModalHeader: OverridableComponent<object, HTMLHeadingElement> = forwardRef(\n  ({ as: Component = \"h1\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-modal__header\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nModalHeader.displayName = \"Modal.Header\";\n\nexport const ModalContent: OverridableComponent<object, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"div\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-modal__content\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nModalContent.displayName = \"Modal.Content\";\n\nexport const ModalFooter: OverridableComponent<object, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"footer\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-modal__footer\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nModalFooter.displayName = \"Modal.Footer\";\n\nexport function useScrollLock(modalRef: React.RefObject<HTMLDialogElement>, bodyClass: string) {\n  useEffect(() => {\n    if (!modalRef.current) return;\n    if (modalRef.current.open) document.body.classList.add(bodyClass);\n\n    const observer = new MutationObserver(() => {\n      if (modalRef.current?.open) document.body.classList.add(bodyClass);\n      else document.body.classList.remove(bodyClass);\n    });\n    observer.observe(modalRef.current, {\n      attributes: true,\n      attributeFilter: [\"open\"],\n    });\n    return () => {\n      observer.disconnect();\n      document.body.classList.remove(bodyClass);\n    };\n  }, [bodyClass, modalRef]);\n}\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n  children?: React.ReactNode;\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\n}\n\nexport const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(\n  (\n    {\n      as: Component = \"div\",\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        {children}\n      </Component>\n    );\n  },\n);\nBox.displayName = \"Box\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n","import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n  (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n  <As extends ElementType>(\n    props: {\n      /** Override html element */\n      as?: As;\n    } & ComponentProps &\n      Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n  ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react","import_jsx_runtime","_a"]}

package/dist/modal/index.mjs

@@ -1,7 +1,7 @@
 import {
   ModalComponent
-} from "../chunk-QSYU64U4.mjs";
-import "../chunk-POJTVNEO.mjs";
+} from "../chunk-MRCE2Q7A.mjs";
+import "../chunk-2ICZ3Q7N.mjs";
 import "../chunk-EGXM575K.mjs";
 import "../chunk-WCA2WPFS.mjs";
 import "../chunk-R4SQKVDQ.mjs";

package/dist/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/modal/modal.tsx","../../src/box/box.tsx","../../src/utils.ts"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Box } from \"../box/box\";\nimport type { OverridableComponent } from \"../utils\";\nimport { useMergeRefs } from \"../utils\";\n\nexport interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {\n  children: React.ReactNode;\n\n  /**\n   * Controls the open state of the modal\n   */\n  open?: boolean;\n\n  /**\n   * Whether to close when clicking on the backdrop.\n   */\n  closeOnBackdropClick?: boolean;\n}\n\n/**\n * A modal dialog is a window that forces the user to interact with it before they can return to other parts of the application.\n *\n * Uses the native [`dialog`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element.\n *\n * Example\n * ```\n    const modalRef = useRef<HTMLDialogElement>(null);\n    const onClose = () => modalRef.current?.close();\n\n    return (\n      <>\n        <PrimaryButton onClick={() => modalRef.current?.showModal()}>Open Modal</PrimaryButton>\n        <Modal ref={modalRef}>\n          <Modal.Header>Dialog header</Modal.Header>\n          <Modal.Content>\n            <p>\n              Dialog header Dialog description - a description of what is about to happen and maybe\n              something about the consequences.\n            </p>\n          </Modal.Content>\n          <Modal.Footer style={{ display: \"flex\", gap: 16 }}>\n            <PrimaryButton fill=\"outline\" onClick={onClose}>\n              Close\n            </PrimaryButton>\n          </Modal.Footer>\n        </Modal>\n      </>\n    );\n * ```\n */\nexport const Modal = forwardRef<HTMLDialogElement, ModalProps>(\n  ({ children, className, open, closeOnBackdropClick, onClick, ...rest }, ref) => {\n    const modalRef = useRef<HTMLDialogElement>(null);\n    const mergedRef = useMergeRefs([modalRef, ref]);\n\n    // The X close button that comes from the `Box` component\n    function onCloseButtonClick() {\n      modalRef.current?.close();\n      return false;\n    }\n\n    // No scroll when modal is open\n    useScrollLock(modalRef, \"hds-modal-scroll-lock\");\n\n    // `open` prop\n    useEffect(() => {\n      if (modalRef.current && open !== undefined) {\n        if (open && !modalRef.current.open) {\n          modalRef.current.showModal();\n        } else if (!open && modalRef.current.open) {\n          modalRef.current.close();\n        }\n      }\n    }, [modalRef, open]);\n\n    function onDialogClick(e: React.MouseEvent<HTMLElement>) {\n      if (closeOnBackdropClick && e.target === modalRef.current) {\n        modalRef.current.close();\n      }\n      onClick?.(e as React.MouseEvent<HTMLDialogElement>);\n    }\n\n    return (\n      <Box\n        as=\"dialog\"\n        className={clsx(\"hds-modal\", className as undefined)}\n        closeable\n        onClick={onDialogClick}\n        onClose={onCloseButtonClick}\n        ref={mergedRef}\n        variant=\"white\"\n        {\n          ...(rest as object) /* TODO remove type casting */\n        }\n      >\n        {children}\n      </Box>\n    );\n  },\n);\nModal.displayName = \"Modal\";\n\nexport const ModalHeader: OverridableComponent<object, HTMLHeadingElement> = forwardRef(\n  ({ as: Component = \"h1\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-modal__header\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nModalHeader.displayName = \"Modal.Header\";\n\nexport const ModalContent: OverridableComponent<object, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"div\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-modal__content\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nModalContent.displayName = \"Modal.Content\";\n\nexport const ModalFooter: OverridableComponent<object, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"footer\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-modal__footer\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nModalFooter.displayName = \"Modal.Footer\";\n\nexport function useScrollLock(modalRef: React.RefObject<HTMLDialogElement>, bodyClass: string) {\n  useEffect(() => {\n    if (!modalRef.current) return;\n    if (modalRef.current.open) document.body.classList.add(bodyClass);\n\n    const observer = new MutationObserver(() => {\n      if (modalRef.current?.open) document.body.classList.add(bodyClass);\n      else document.body.classList.remove(bodyClass);\n    });\n    observer.observe(modalRef.current, {\n      attributes: true,\n      attributeFilter: [\"open\"],\n    });\n    return () => {\n      observer.disconnect();\n      document.body.classList.remove(bodyClass);\n    };\n  }, [bodyClass, modalRef]);\n}\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n  children?: React.ReactNode;\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\n}\n\nexport const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(\n  (\n    {\n      as: Component = \"div\",\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        {children}\n      </Component>\n    );\n  },\n);\nBox.displayName = \"Box\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n","import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n  (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n  <As extends ElementType>(\n    props: {\n      /** Override html element */\n      as?: As;\n    } & ComponentProps &\n      Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n  ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react","import_jsx_runtime","_a"]}
+{"version":3,"sources":["../../src/modal/modal.tsx","../../src/box/box.tsx","../../src/utils.ts"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Box } from \"../box/box\";\nimport type { OverridableComponent } from \"../utils\";\nimport { useMergeRefs } from \"../utils\";\n\nexport interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {\n  children: React.ReactNode;\n\n  /**\n   * Controls the open state of the modal\n   */\n  open?: boolean;\n\n  /**\n   * Whether to close when clicking on the backdrop.\n   */\n  closeOnBackdropClick?: boolean;\n}\n\n/**\n * A modal dialog is a window that forces the user to interact with it before they can return to other parts of the application.\n *\n * Uses the native [`dialog`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element.\n *\n * Example\n * ```\n    const modalRef = useRef<HTMLDialogElement>(null);\n    const onClose = () => modalRef.current?.close();\n\n    return (\n      <>\n        <PrimaryButton onClick={() => modalRef.current?.showModal()}>Open Modal</PrimaryButton>\n        <Modal ref={modalRef}>\n          <Modal.Header>Dialog header</Modal.Header>\n          <Modal.Content>\n            <p>\n              Dialog header Dialog description - a description of what is about to happen and maybe\n              something about the consequences.\n            </p>\n          </Modal.Content>\n          <Modal.Footer>\n            <HStack gap=\"16\" wrap>\n              <PrimaryButton onClick={onMainAction}>Main action</PrimaryButton>\n              <PrimaryButton fill=\"outline\" onClick={onClose}>\n                Cancel\n              </PrimaryButton>\n            </HStack>\n          </Modal.Footer>\n        </Modal>\n      </>\n    );\n * ```\n */\nexport const Modal = forwardRef<HTMLDialogElement, ModalProps>(\n  ({ children, className, open, closeOnBackdropClick, onClick, ...rest }, ref) => {\n    const modalRef = useRef<HTMLDialogElement>(null);\n    const mergedRef = useMergeRefs([modalRef, ref]);\n\n    // The X close button that comes from the `Box` component\n    function onCloseButtonClick() {\n      modalRef.current?.close();\n      return false;\n    }\n\n    // No scroll when modal is open\n    useScrollLock(modalRef, \"hds-modal-scroll-lock\");\n\n    // `open` prop\n    useEffect(() => {\n      if (modalRef.current && open !== undefined) {\n        if (open && !modalRef.current.open) {\n          modalRef.current.showModal();\n        } else if (!open && modalRef.current.open) {\n          modalRef.current.close();\n        }\n      }\n    }, [modalRef, open]);\n\n    function onDialogClick(e: React.MouseEvent<HTMLElement>) {\n      if (closeOnBackdropClick && e.target === modalRef.current) {\n        modalRef.current.close();\n      }\n      onClick?.(e as React.MouseEvent<HTMLDialogElement>);\n    }\n\n    return (\n      <Box\n        as=\"dialog\"\n        className={clsx(\"hds-modal\", className as undefined)}\n        closeable\n        onClick={onDialogClick}\n        onClose={onCloseButtonClick}\n        ref={mergedRef}\n        variant=\"white\"\n        {\n          ...(rest as object) /* TODO remove type casting */\n        }\n      >\n        {children}\n      </Box>\n    );\n  },\n);\nModal.displayName = \"Modal\";\n\nexport const ModalHeader: OverridableComponent<object, HTMLHeadingElement> = forwardRef(\n  ({ as: Component = \"h1\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-modal__header\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nModalHeader.displayName = \"Modal.Header\";\n\nexport const ModalContent: OverridableComponent<object, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"div\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-modal__content\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nModalContent.displayName = \"Modal.Content\";\n\nexport const ModalFooter: OverridableComponent<object, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"footer\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-modal__footer\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nModalFooter.displayName = \"Modal.Footer\";\n\nexport function useScrollLock(modalRef: React.RefObject<HTMLDialogElement>, bodyClass: string) {\n  useEffect(() => {\n    if (!modalRef.current) return;\n    if (modalRef.current.open) document.body.classList.add(bodyClass);\n\n    const observer = new MutationObserver(() => {\n      if (modalRef.current?.open) document.body.classList.add(bodyClass);\n      else document.body.classList.remove(bodyClass);\n    });\n    observer.observe(modalRef.current, {\n      attributes: true,\n      attributeFilter: [\"open\"],\n    });\n    return () => {\n      observer.disconnect();\n      document.body.classList.remove(bodyClass);\n    };\n  }, [bodyClass, modalRef]);\n}\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n  children?: React.ReactNode;\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\n}\n\nexport const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(\n  (\n    {\n      as: Component = \"div\",\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        {children}\n      </Component>\n    );\n  },\n);\nBox.displayName = \"Box\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n","import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n  (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n  <As extends ElementType>(\n    props: {\n      /** Override html element */\n      as?: As;\n    } & ComponentProps &\n      Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n  ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react","import_jsx_runtime","_a"]}

package/dist/modal/modal.mjs

@@ -4,7 +4,7 @@ import {
   ModalFooter,
   ModalHeader,
   useScrollLock
-} from "../chunk-POJTVNEO.mjs";
+} from "../chunk-2ICZ3Q7N.mjs";
 import "../chunk-EGXM575K.mjs";
 import "../chunk-WCA2WPFS.mjs";
 import "../chunk-R4SQKVDQ.mjs";

package/dist/navbar/index.js

@@ -316,6 +316,7 @@ var NavbarExpandableMenuContent = (0, import_react2.forwardRef)((_a, ref) => {
     __spreadProps(__spreadValues({}, rest), {
       className: (0, import_typed_classname2.clsx)("hds-navbar__expandable-menu-content", className),
       "data-state": open ? "open" : "closed",
+      inert: open ? void 0 : "true",
       ref,
       children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_typed_classname2.clsx)("hds-navbar__expandable-menu-content-inner"), children })
     })

package/dist/navbar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/navbar/index.tsx","../../src/navbar/navbar.tsx","../../src/navbar/navbar-expandable-menu.tsx","../../src/navbar/icons.tsx"],"sourcesContent":["import {\n  Navbar,\n  NavbarLogo,\n  NavbarButton,\n  NavbarNavigation,\n  NavbarLogoAndServiceText,\n} from \"./navbar\";\nimport {\n  useNavbarExpendableMenuContext,\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, useNavbarExpendableMenuContext };\nexport type * from \"./navbar\";\n","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","import React, { createContext, useContext, forwardRef, useState, useRef, useEffect } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport type { ClassValue } from \"@postenbring/hedwig-css/typed-classname/index.mjs\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport FocusTrap from \"focus-trap-react\";\nimport type { OverridableComponent } from \"../utils\";\nimport { CloseIcon, MenuIcon } from \"./icons\";\n\nconst expandableMenuContext = createContext([\n  false as boolean,\n  () => {\n    // Empty\n  },\n] as const);\nexport const useNavbarExpendableMenuContext = () => useContext(expandableMenuContext);\n\n/**\n * Root\n */\nexport interface NavbarExpandableMenuProps {\n  children: React.ReactNode;\n}\nexport function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {\n  const [open, setOpen] = useState(false);\n  const toggleOpen = () => {\n    const nextOpenState = !open;\n    setOpen(nextOpenState);\n    if (nextOpenState) {\n      window.scrollTo(0, 0);\n      document.body.classList.add(clsx(\"hds-navbar-scroll-lock\"));\n    } else {\n      document.body.classList.remove(clsx(\"hds-navbar-scroll-lock\"));\n    }\n  };\n  const navbarElement = document.getElementsByClassName(clsx(\"hds-navbar\"))[0];\n  return (\n    <expandableMenuContext.Provider value={[open, toggleOpen]}>\n      {open ? <FocusTrap containerElements={[navbarElement as HTMLElement]} /> : null}\n      {children}\n    </expandableMenuContext.Provider>\n  );\n}\nNavbarExpandableMenu.displayName = \"NavbarExpandableMenu\";\n\ninterface ButtonInterface {\n  className?: ClassValue;\n  open?: boolean;\n  innerRef?: React.RefObject<HTMLButtonElement>;\n  ref?: React.ForwardedRef<HTMLButtonElement>;\n  text: React.ReactNode;\n  title?: string;\n  toggleOpen?: () => void;\n  width?: number;\n}\n\nfunction RenderButton({\n  className,\n  innerRef,\n  open = false,\n  ref,\n  text,\n  title,\n  toggleOpen,\n  width,\n  ...rest\n}: ButtonInterface) {\n  const icon = open ? <CloseIcon /> : <MenuIcon />;\n  const style = width ? { width } : {};\n  return (\n    <button\n      className={clsx(\"hds-navbar__button\", className)}\n      onClick={toggleOpen}\n      ref={ref ?? innerRef}\n      style={style}\n      title={title}\n      type=\"button\"\n      {...rest}\n    >\n      <span className={clsx(\"hds-navbar__button-responsive-text\")}>{text}</span> {icon}\n    </button>\n  );\n}\n\n/**\n * Trigger\n *\n * ## TODO\n * - [x] Hide text when on mobile\n * - [X] Open / Close icon\n * - [X] Make button have consistant width\n */\n\nexport interface NavbarExpandableMenuTriggerProps\n  extends Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\"> {\n  whenClosedText: React.ReactNode;\n  whenClosedHelperTitle?: string;\n\n  whenOpenText: React.ReactNode;\n  whenOpenHelperTitle?: string;\n}\nexport const NavbarExpandableMenuTrigger = forwardRef<\n  HTMLButtonElement,\n  NavbarExpandableMenuTriggerProps\n>(\n  (\n    {\n      whenClosedText,\n      whenClosedHelperTitle,\n\n      whenOpenText,\n      whenOpenHelperTitle,\n\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [open, toggleOpen] = useNavbarExpendableMenuContext();\n    const [width, setWidth] = useState(0);\n    const measureButtonRef = useRef<HTMLButtonElement>(null);\n\n    const text: React.ReactNode = open ? whenOpenText : whenClosedText;\n    const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;\n\n    /**\n     *\n     * @param element - Button to measure\n     * @param callback - report the width back\n     */\n    const measureButton = (element: React.ReactNode, callback: (width: number) => void) => {\n      // Create an empty div to render the Button in\n      const container = document.createElement(\"div\");\n      container.style.cssText = \"display: inline-block; position: absolute; visibility: hidden\";\n\n      // Attach the empty div inside the navigation section\n      const c = document.getElementsByClassName(\"hds-navbar__navigation\")[0];\n      c.appendChild(container);\n\n      // Render the Button here\n      const root = createRoot(container as HTMLElement);\n      root.render(element);\n\n      /**\n       * Get the offsetWidth now that it is rendered\n       * Also clean up after us\n       */\n      const getWidth = () => {\n        callback(measureButtonRef.current?.offsetWidth ?? 0);\n        root.unmount();\n        c.removeChild(container);\n      };\n      // This is instead of the callback that used to be on ReactDOM.render()\n      setTimeout(getWidth, 0);\n    };\n\n    useEffect(() => {\n      measureButton(\n        <RenderButton\n          className={(className ? className : \"\") as ClassValue}\n          innerRef={measureButtonRef}\n          text={whenClosedText}\n          title={title}\n          {...rest}\n        />,\n        (closedWidth: number) => {\n          measureButton(\n            <RenderButton\n              className={(className ? className : \"\") as ClassValue}\n              innerRef={measureButtonRef}\n              open\n              text={whenOpenText}\n              title={title}\n              {...rest}\n            />,\n            (openWidth: number) => {\n              setWidth(Math.max(openWidth, closedWidth));\n            },\n          );\n        },\n      );\n    }, [className, rest, title, whenClosedText, whenOpenText]);\n\n    return (\n      <RenderButton\n        className={(className ? className : \"\") as ClassValue}\n        open={open}\n        ref={ref}\n        text={text as string}\n        title={title}\n        toggleOpen={toggleOpen}\n        width={width}\n        {...rest}\n      />\n    );\n  },\n);\nNavbarExpandableMenuTrigger.displayName = \"Navbar.ExpandableMenu.Trigger\";\n\n/**\n * Content\n */\nexport interface NavbarExpandableMenuContentProps {\n  children: React.ReactNode;\n  className?: string;\n}\nexport const NavbarExpandableMenuContent: OverridableComponent<\n  NavbarExpandableMenuContentProps,\n  HTMLDivElement\n> = forwardRef(({ as: Component = \"section\", children, className, ...rest }, ref) => {\n  const [open] = useNavbarExpendableMenuContext();\n  return (\n    <Component\n      {...rest}\n      className={clsx(\"hds-navbar__expandable-menu-content\", className as undefined)}\n      data-state={open ? \"open\" : \"closed\"}\n      ref={ref}\n    >\n      <div className={clsx(\"hds-navbar__expandable-menu-content-inner\")}>{children}</div>\n    </Component>\n  );\n});\nNavbarExpandableMenuContent.displayName = \"Navbar.ExpandableMenu.Content\";\n","function CloseIcon() {\n  return (\n    <svg aria-hidden viewBox=\"0 0 384 512\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n}\n\nfunction MenuIcon() {\n  return (\n    <svg role=\"img\" viewBox=\"0 0 448 512\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M0 88C0 74.7 10.7 64 24 64H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24C10.7 112 0 101.3 0 88zM0 248c0-13.3 10.7-24 24-24H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.3 0-24-10.7-24-24zM448 408c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H424c13.3 0 24 10.7 24 24z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n}\n\nexport { CloseIcon, MenuIcon };\n"],"mappings":"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","names":["import_react","import_typed_classname","import_jsx_runtime","import_jsx_runtime","FocusTrap","_a","_b"]}
+{"version":3,"sources":["../../src/navbar/index.tsx","../../src/navbar/navbar.tsx","../../src/navbar/navbar-expandable-menu.tsx","../../src/navbar/icons.tsx"],"sourcesContent":["import {\n  Navbar,\n  NavbarLogo,\n  NavbarButton,\n  NavbarNavigation,\n  NavbarLogoAndServiceText,\n} from \"./navbar\";\nimport {\n  useNavbarExpendableMenuContext,\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, useNavbarExpendableMenuContext };\nexport type * from \"./navbar\";\n","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","import React, { createContext, useContext, forwardRef, useState, useRef, useEffect } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport type { ClassValue } from \"@postenbring/hedwig-css/typed-classname/index.mjs\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport FocusTrap from \"focus-trap-react\";\nimport type { OverridableComponent } from \"../utils\";\nimport { CloseIcon, MenuIcon } from \"./icons\";\n\nconst expandableMenuContext = createContext([\n  false as boolean,\n  () => {\n    // Empty\n  },\n] as const);\nexport const useNavbarExpendableMenuContext = () => useContext(expandableMenuContext);\n\n/**\n * Root\n */\nexport interface NavbarExpandableMenuProps {\n  children: React.ReactNode;\n}\nexport function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {\n  const [open, setOpen] = useState(false);\n  const toggleOpen = () => {\n    const nextOpenState = !open;\n    setOpen(nextOpenState);\n    if (nextOpenState) {\n      window.scrollTo(0, 0);\n      document.body.classList.add(clsx(\"hds-navbar-scroll-lock\"));\n    } else {\n      document.body.classList.remove(clsx(\"hds-navbar-scroll-lock\"));\n    }\n  };\n  const navbarElement = document.getElementsByClassName(clsx(\"hds-navbar\"))[0];\n  return (\n    <expandableMenuContext.Provider value={[open, toggleOpen]}>\n      {open ? <FocusTrap containerElements={[navbarElement as HTMLElement]} /> : null}\n      {children}\n    </expandableMenuContext.Provider>\n  );\n}\nNavbarExpandableMenu.displayName = \"NavbarExpandableMenu\";\n\ninterface ButtonInterface {\n  className?: ClassValue;\n  open?: boolean;\n  innerRef?: React.RefObject<HTMLButtonElement>;\n  ref?: React.ForwardedRef<HTMLButtonElement>;\n  text: React.ReactNode;\n  title?: string;\n  toggleOpen?: () => void;\n  width?: number;\n}\n\nfunction RenderButton({\n  className,\n  innerRef,\n  open = false,\n  ref,\n  text,\n  title,\n  toggleOpen,\n  width,\n  ...rest\n}: ButtonInterface) {\n  const icon = open ? <CloseIcon /> : <MenuIcon />;\n  const style = width ? { width } : {};\n  return (\n    <button\n      className={clsx(\"hds-navbar__button\", className)}\n      onClick={toggleOpen}\n      ref={ref ?? innerRef}\n      style={style}\n      title={title}\n      type=\"button\"\n      {...rest}\n    >\n      <span className={clsx(\"hds-navbar__button-responsive-text\")}>{text}</span> {icon}\n    </button>\n  );\n}\n\n/**\n * Trigger\n *\n * ## TODO\n * - [x] Hide text when on mobile\n * - [X] Open / Close icon\n * - [X] Make button have consistant width\n */\n\nexport interface NavbarExpandableMenuTriggerProps\n  extends Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\"> {\n  whenClosedText: React.ReactNode;\n  whenClosedHelperTitle?: string;\n\n  whenOpenText: React.ReactNode;\n  whenOpenHelperTitle?: string;\n}\nexport const NavbarExpandableMenuTrigger = forwardRef<\n  HTMLButtonElement,\n  NavbarExpandableMenuTriggerProps\n>(\n  (\n    {\n      whenClosedText,\n      whenClosedHelperTitle,\n\n      whenOpenText,\n      whenOpenHelperTitle,\n\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [open, toggleOpen] = useNavbarExpendableMenuContext();\n    const [width, setWidth] = useState(0);\n    const measureButtonRef = useRef<HTMLButtonElement>(null);\n\n    const text: React.ReactNode = open ? whenOpenText : whenClosedText;\n    const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;\n\n    /**\n     *\n     * @param element - Button to measure\n     * @param callback - report the width back\n     */\n    const measureButton = (element: React.ReactNode, callback: (width: number) => void) => {\n      // Create an empty div to render the Button in\n      const container = document.createElement(\"div\");\n      container.style.cssText = \"display: inline-block; position: absolute; visibility: hidden\";\n\n      // Attach the empty div inside the navigation section\n      const c = document.getElementsByClassName(\"hds-navbar__navigation\")[0];\n      c.appendChild(container);\n\n      // Render the Button here\n      const root = createRoot(container as HTMLElement);\n      root.render(element);\n\n      /**\n       * Get the offsetWidth now that it is rendered\n       * Also clean up after us\n       */\n      const getWidth = () => {\n        callback(measureButtonRef.current?.offsetWidth ?? 0);\n        root.unmount();\n        c.removeChild(container);\n      };\n      // This is instead of the callback that used to be on ReactDOM.render()\n      setTimeout(getWidth, 0);\n    };\n\n    useEffect(() => {\n      measureButton(\n        <RenderButton\n          className={(className ? className : \"\") as ClassValue}\n          innerRef={measureButtonRef}\n          text={whenClosedText}\n          title={title}\n          {...rest}\n        />,\n        (closedWidth: number) => {\n          measureButton(\n            <RenderButton\n              className={(className ? className : \"\") as ClassValue}\n              innerRef={measureButtonRef}\n              open\n              text={whenOpenText}\n              title={title}\n              {...rest}\n            />,\n            (openWidth: number) => {\n              setWidth(Math.max(openWidth, closedWidth));\n            },\n          );\n        },\n      );\n    }, [className, rest, title, whenClosedText, whenOpenText]);\n\n    return (\n      <RenderButton\n        className={(className ? className : \"\") as ClassValue}\n        open={open}\n        ref={ref}\n        text={text as string}\n        title={title}\n        toggleOpen={toggleOpen}\n        width={width}\n        {...rest}\n      />\n    );\n  },\n);\nNavbarExpandableMenuTrigger.displayName = \"Navbar.ExpandableMenu.Trigger\";\n\n/**\n * Content\n */\nexport interface NavbarExpandableMenuContentProps {\n  children: React.ReactNode;\n  className?: string;\n}\nexport const NavbarExpandableMenuContent: OverridableComponent<\n  NavbarExpandableMenuContentProps,\n  HTMLDivElement\n> = forwardRef(({ as: Component = \"section\", children, className, ...rest }, ref) => {\n  const [open] = useNavbarExpendableMenuContext();\n  return (\n    <Component\n      {...rest}\n      className={clsx(\"hds-navbar__expandable-menu-content\", className as undefined)}\n      data-state={open ? \"open\" : \"closed\"}\n      inert={open ? undefined : \"true\"}\n      ref={ref}\n    >\n      <div className={clsx(\"hds-navbar__expandable-menu-content-inner\")}>{children}</div>\n    </Component>\n  );\n});\nNavbarExpandableMenuContent.displayName = \"Navbar.ExpandableMenu.Content\";\n","function CloseIcon() {\n  return (\n    <svg aria-hidden viewBox=\"0 0 384 512\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n}\n\nfunction MenuIcon() {\n  return (\n    <svg role=\"img\" viewBox=\"0 0 448 512\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M0 88C0 74.7 10.7 64 24 64H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24C10.7 112 0 101.3 0 88zM0 248c0-13.3 10.7-24 24-24H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.3 0-24-10.7-24-24zM448 408c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H424c13.3 0 24 10.7 24 24z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n}\n\nexport { CloseIcon, MenuIcon };\n"],"mappings":"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","names":["import_react","import_typed_classname","import_jsx_runtime","import_jsx_runtime","FocusTrap","_a","_b"]}

package/dist/navbar/index.mjs

@@ -1,9 +1,9 @@
 import {
   NavbarComponent
-} from "../chunk-TE5M6GJB.mjs";
+} from "../chunk-2JH4FG63.mjs";
 import {
   useNavbarExpendableMenuContext
-} from "../chunk-DEVTAZKG.mjs";
+} from "../chunk-X46LM2QH.mjs";
 import "../chunk-MGUYIOP2.mjs";
 import "../chunk-625SVQEP.mjs";
 import "../chunk-R4SQKVDQ.mjs";

package/dist/navbar/navbar-expandable-menu.js

@@ -246,6 +246,7 @@ var NavbarExpandableMenuContent = (0, import_react.forwardRef)((_a, ref) => {
     __spreadProps(__spreadValues({}, rest), {
       className: (0, import_typed_classname.clsx)("hds-navbar__expandable-menu-content", className),
       "data-state": open ? "open" : "closed",
+      inert: open ? void 0 : "true",
       ref,
       children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_typed_classname.clsx)("hds-navbar__expandable-menu-content-inner"), children })
     })

package/dist/navbar/navbar-expandable-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/navbar/navbar-expandable-menu.tsx","../../src/navbar/icons.tsx"],"sourcesContent":["import React, { createContext, useContext, forwardRef, useState, useRef, useEffect } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport type { ClassValue } from \"@postenbring/hedwig-css/typed-classname/index.mjs\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport FocusTrap from \"focus-trap-react\";\nimport type { OverridableComponent } from \"../utils\";\nimport { CloseIcon, MenuIcon } from \"./icons\";\n\nconst expandableMenuContext = createContext([\n  false as boolean,\n  () => {\n    // Empty\n  },\n] as const);\nexport const useNavbarExpendableMenuContext = () => useContext(expandableMenuContext);\n\n/**\n * Root\n */\nexport interface NavbarExpandableMenuProps {\n  children: React.ReactNode;\n}\nexport function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {\n  const [open, setOpen] = useState(false);\n  const toggleOpen = () => {\n    const nextOpenState = !open;\n    setOpen(nextOpenState);\n    if (nextOpenState) {\n      window.scrollTo(0, 0);\n      document.body.classList.add(clsx(\"hds-navbar-scroll-lock\"));\n    } else {\n      document.body.classList.remove(clsx(\"hds-navbar-scroll-lock\"));\n    }\n  };\n  const navbarElement = document.getElementsByClassName(clsx(\"hds-navbar\"))[0];\n  return (\n    <expandableMenuContext.Provider value={[open, toggleOpen]}>\n      {open ? <FocusTrap containerElements={[navbarElement as HTMLElement]} /> : null}\n      {children}\n    </expandableMenuContext.Provider>\n  );\n}\nNavbarExpandableMenu.displayName = \"NavbarExpandableMenu\";\n\ninterface ButtonInterface {\n  className?: ClassValue;\n  open?: boolean;\n  innerRef?: React.RefObject<HTMLButtonElement>;\n  ref?: React.ForwardedRef<HTMLButtonElement>;\n  text: React.ReactNode;\n  title?: string;\n  toggleOpen?: () => void;\n  width?: number;\n}\n\nfunction RenderButton({\n  className,\n  innerRef,\n  open = false,\n  ref,\n  text,\n  title,\n  toggleOpen,\n  width,\n  ...rest\n}: ButtonInterface) {\n  const icon = open ? <CloseIcon /> : <MenuIcon />;\n  const style = width ? { width } : {};\n  return (\n    <button\n      className={clsx(\"hds-navbar__button\", className)}\n      onClick={toggleOpen}\n      ref={ref ?? innerRef}\n      style={style}\n      title={title}\n      type=\"button\"\n      {...rest}\n    >\n      <span className={clsx(\"hds-navbar__button-responsive-text\")}>{text}</span> {icon}\n    </button>\n  );\n}\n\n/**\n * Trigger\n *\n * ## TODO\n * - [x] Hide text when on mobile\n * - [X] Open / Close icon\n * - [X] Make button have consistant width\n */\n\nexport interface NavbarExpandableMenuTriggerProps\n  extends Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\"> {\n  whenClosedText: React.ReactNode;\n  whenClosedHelperTitle?: string;\n\n  whenOpenText: React.ReactNode;\n  whenOpenHelperTitle?: string;\n}\nexport const NavbarExpandableMenuTrigger = forwardRef<\n  HTMLButtonElement,\n  NavbarExpandableMenuTriggerProps\n>(\n  (\n    {\n      whenClosedText,\n      whenClosedHelperTitle,\n\n      whenOpenText,\n      whenOpenHelperTitle,\n\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [open, toggleOpen] = useNavbarExpendableMenuContext();\n    const [width, setWidth] = useState(0);\n    const measureButtonRef = useRef<HTMLButtonElement>(null);\n\n    const text: React.ReactNode = open ? whenOpenText : whenClosedText;\n    const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;\n\n    /**\n     *\n     * @param element - Button to measure\n     * @param callback - report the width back\n     */\n    const measureButton = (element: React.ReactNode, callback: (width: number) => void) => {\n      // Create an empty div to render the Button in\n      const container = document.createElement(\"div\");\n      container.style.cssText = \"display: inline-block; position: absolute; visibility: hidden\";\n\n      // Attach the empty div inside the navigation section\n      const c = document.getElementsByClassName(\"hds-navbar__navigation\")[0];\n      c.appendChild(container);\n\n      // Render the Button here\n      const root = createRoot(container as HTMLElement);\n      root.render(element);\n\n      /**\n       * Get the offsetWidth now that it is rendered\n       * Also clean up after us\n       */\n      const getWidth = () => {\n        callback(measureButtonRef.current?.offsetWidth ?? 0);\n        root.unmount();\n        c.removeChild(container);\n      };\n      // This is instead of the callback that used to be on ReactDOM.render()\n      setTimeout(getWidth, 0);\n    };\n\n    useEffect(() => {\n      measureButton(\n        <RenderButton\n          className={(className ? className : \"\") as ClassValue}\n          innerRef={measureButtonRef}\n          text={whenClosedText}\n          title={title}\n          {...rest}\n        />,\n        (closedWidth: number) => {\n          measureButton(\n            <RenderButton\n              className={(className ? className : \"\") as ClassValue}\n              innerRef={measureButtonRef}\n              open\n              text={whenOpenText}\n              title={title}\n              {...rest}\n            />,\n            (openWidth: number) => {\n              setWidth(Math.max(openWidth, closedWidth));\n            },\n          );\n        },\n      );\n    }, [className, rest, title, whenClosedText, whenOpenText]);\n\n    return (\n      <RenderButton\n        className={(className ? className : \"\") as ClassValue}\n        open={open}\n        ref={ref}\n        text={text as string}\n        title={title}\n        toggleOpen={toggleOpen}\n        width={width}\n        {...rest}\n      />\n    );\n  },\n);\nNavbarExpandableMenuTrigger.displayName = \"Navbar.ExpandableMenu.Trigger\";\n\n/**\n * Content\n */\nexport interface NavbarExpandableMenuContentProps {\n  children: React.ReactNode;\n  className?: string;\n}\nexport const NavbarExpandableMenuContent: OverridableComponent<\n  NavbarExpandableMenuContentProps,\n  HTMLDivElement\n> = forwardRef(({ as: Component = \"section\", children, className, ...rest }, ref) => {\n  const [open] = useNavbarExpendableMenuContext();\n  return (\n    <Component\n      {...rest}\n      className={clsx(\"hds-navbar__expandable-menu-content\", className as undefined)}\n      data-state={open ? \"open\" : \"closed\"}\n      ref={ref}\n    >\n      <div className={clsx(\"hds-navbar__expandable-menu-content-inner\")}>{children}</div>\n    </Component>\n  );\n});\nNavbarExpandableMenuContent.displayName = \"Navbar.ExpandableMenu.Content\";\n","function CloseIcon() {\n  return (\n    <svg aria-hidden viewBox=\"0 0 384 512\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n}\n\nfunction MenuIcon() {\n  return (\n    <svg role=\"img\" viewBox=\"0 0 448 512\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M0 88C0 74.7 10.7 64 24 64H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24C10.7 112 0 101.3 0 88zM0 248c0-13.3 10.7-24 24-24H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.3 0-24-10.7-24-24zM448 408c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H424c13.3 0 24 10.7 24 24z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n}\n\nexport { CloseIcon, MenuIcon };\n"],"mappings":"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","names":["import_jsx_runtime","FocusTrap","_a","_b"]}
+{"version":3,"sources":["../../src/navbar/navbar-expandable-menu.tsx","../../src/navbar/icons.tsx"],"sourcesContent":["import React, { createContext, useContext, forwardRef, useState, useRef, useEffect } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport type { ClassValue } from \"@postenbring/hedwig-css/typed-classname/index.mjs\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport FocusTrap from \"focus-trap-react\";\nimport type { OverridableComponent } from \"../utils\";\nimport { CloseIcon, MenuIcon } from \"./icons\";\n\nconst expandableMenuContext = createContext([\n  false as boolean,\n  () => {\n    // Empty\n  },\n] as const);\nexport const useNavbarExpendableMenuContext = () => useContext(expandableMenuContext);\n\n/**\n * Root\n */\nexport interface NavbarExpandableMenuProps {\n  children: React.ReactNode;\n}\nexport function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {\n  const [open, setOpen] = useState(false);\n  const toggleOpen = () => {\n    const nextOpenState = !open;\n    setOpen(nextOpenState);\n    if (nextOpenState) {\n      window.scrollTo(0, 0);\n      document.body.classList.add(clsx(\"hds-navbar-scroll-lock\"));\n    } else {\n      document.body.classList.remove(clsx(\"hds-navbar-scroll-lock\"));\n    }\n  };\n  const navbarElement = document.getElementsByClassName(clsx(\"hds-navbar\"))[0];\n  return (\n    <expandableMenuContext.Provider value={[open, toggleOpen]}>\n      {open ? <FocusTrap containerElements={[navbarElement as HTMLElement]} /> : null}\n      {children}\n    </expandableMenuContext.Provider>\n  );\n}\nNavbarExpandableMenu.displayName = \"NavbarExpandableMenu\";\n\ninterface ButtonInterface {\n  className?: ClassValue;\n  open?: boolean;\n  innerRef?: React.RefObject<HTMLButtonElement>;\n  ref?: React.ForwardedRef<HTMLButtonElement>;\n  text: React.ReactNode;\n  title?: string;\n  toggleOpen?: () => void;\n  width?: number;\n}\n\nfunction RenderButton({\n  className,\n  innerRef,\n  open = false,\n  ref,\n  text,\n  title,\n  toggleOpen,\n  width,\n  ...rest\n}: ButtonInterface) {\n  const icon = open ? <CloseIcon /> : <MenuIcon />;\n  const style = width ? { width } : {};\n  return (\n    <button\n      className={clsx(\"hds-navbar__button\", className)}\n      onClick={toggleOpen}\n      ref={ref ?? innerRef}\n      style={style}\n      title={title}\n      type=\"button\"\n      {...rest}\n    >\n      <span className={clsx(\"hds-navbar__button-responsive-text\")}>{text}</span> {icon}\n    </button>\n  );\n}\n\n/**\n * Trigger\n *\n * ## TODO\n * - [x] Hide text when on mobile\n * - [X] Open / Close icon\n * - [X] Make button have consistant width\n */\n\nexport interface NavbarExpandableMenuTriggerProps\n  extends Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\"> {\n  whenClosedText: React.ReactNode;\n  whenClosedHelperTitle?: string;\n\n  whenOpenText: React.ReactNode;\n  whenOpenHelperTitle?: string;\n}\nexport const NavbarExpandableMenuTrigger = forwardRef<\n  HTMLButtonElement,\n  NavbarExpandableMenuTriggerProps\n>(\n  (\n    {\n      whenClosedText,\n      whenClosedHelperTitle,\n\n      whenOpenText,\n      whenOpenHelperTitle,\n\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [open, toggleOpen] = useNavbarExpendableMenuContext();\n    const [width, setWidth] = useState(0);\n    const measureButtonRef = useRef<HTMLButtonElement>(null);\n\n    const text: React.ReactNode = open ? whenOpenText : whenClosedText;\n    const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;\n\n    /**\n     *\n     * @param element - Button to measure\n     * @param callback - report the width back\n     */\n    const measureButton = (element: React.ReactNode, callback: (width: number) => void) => {\n      // Create an empty div to render the Button in\n      const container = document.createElement(\"div\");\n      container.style.cssText = \"display: inline-block; position: absolute; visibility: hidden\";\n\n      // Attach the empty div inside the navigation section\n      const c = document.getElementsByClassName(\"hds-navbar__navigation\")[0];\n      c.appendChild(container);\n\n      // Render the Button here\n      const root = createRoot(container as HTMLElement);\n      root.render(element);\n\n      /**\n       * Get the offsetWidth now that it is rendered\n       * Also clean up after us\n       */\n      const getWidth = () => {\n        callback(measureButtonRef.current?.offsetWidth ?? 0);\n        root.unmount();\n        c.removeChild(container);\n      };\n      // This is instead of the callback that used to be on ReactDOM.render()\n      setTimeout(getWidth, 0);\n    };\n\n    useEffect(() => {\n      measureButton(\n        <RenderButton\n          className={(className ? className : \"\") as ClassValue}\n          innerRef={measureButtonRef}\n          text={whenClosedText}\n          title={title}\n          {...rest}\n        />,\n        (closedWidth: number) => {\n          measureButton(\n            <RenderButton\n              className={(className ? className : \"\") as ClassValue}\n              innerRef={measureButtonRef}\n              open\n              text={whenOpenText}\n              title={title}\n              {...rest}\n            />,\n            (openWidth: number) => {\n              setWidth(Math.max(openWidth, closedWidth));\n            },\n          );\n        },\n      );\n    }, [className, rest, title, whenClosedText, whenOpenText]);\n\n    return (\n      <RenderButton\n        className={(className ? className : \"\") as ClassValue}\n        open={open}\n        ref={ref}\n        text={text as string}\n        title={title}\n        toggleOpen={toggleOpen}\n        width={width}\n        {...rest}\n      />\n    );\n  },\n);\nNavbarExpandableMenuTrigger.displayName = \"Navbar.ExpandableMenu.Trigger\";\n\n/**\n * Content\n */\nexport interface NavbarExpandableMenuContentProps {\n  children: React.ReactNode;\n  className?: string;\n}\nexport const NavbarExpandableMenuContent: OverridableComponent<\n  NavbarExpandableMenuContentProps,\n  HTMLDivElement\n> = forwardRef(({ as: Component = \"section\", children, className, ...rest }, ref) => {\n  const [open] = useNavbarExpendableMenuContext();\n  return (\n    <Component\n      {...rest}\n      className={clsx(\"hds-navbar__expandable-menu-content\", className as undefined)}\n      data-state={open ? \"open\" : \"closed\"}\n      inert={open ? undefined : \"true\"}\n      ref={ref}\n    >\n      <div className={clsx(\"hds-navbar__expandable-menu-content-inner\")}>{children}</div>\n    </Component>\n  );\n});\nNavbarExpandableMenuContent.displayName = \"Navbar.ExpandableMenu.Content\";\n","function CloseIcon() {\n  return (\n    <svg aria-hidden viewBox=\"0 0 384 512\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n}\n\nfunction MenuIcon() {\n  return (\n    <svg role=\"img\" viewBox=\"0 0 448 512\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M0 88C0 74.7 10.7 64 24 64H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24C10.7 112 0 101.3 0 88zM0 248c0-13.3 10.7-24 24-24H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.3 0-24-10.7-24-24zM448 408c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H424c13.3 0 24 10.7 24 24z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n}\n\nexport { CloseIcon, MenuIcon };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0F;AAC1F,oBAA2B;AAE3B,6BAAqB;AACrB,8BAAsB;;;ACDhB;AAHN,SAAS,YAAY;AACnB,SACE,4CAAC,SAAI,eAAW,MAAC,SAAQ,eAAc,OAAM,8BAC3C;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;AAEA,SAAS,WAAW;AAClB,SACE,4CAAC,SAAI,MAAK,OAAM,SAAQ,eAAc,OAAM,8BAC1C;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;;;ADgBI,IAAAA,sBAAA;AA5BJ,IAAM,4BAAwB,4BAAc;AAAA,EAC1C;AAAA,EACA,MAAM;AAAA,EAEN;AACF,CAAU;AACH,IAAM,iCAAiC,UAAM,yBAAW,qBAAqB;AAQ7E,SAAS,qBAAqB,EAAE,SAAS,GAA8B;AAC5E,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,QAAM,aAAa,MAAM;AACvB,UAAM,gBAAgB,CAAC;AACvB,YAAQ,aAAa;AACrB,QAAI,eAAe;AACjB,aAAO,SAAS,GAAG,CAAC;AACpB,eAAS,KAAK,UAAU,QAAI,6BAAK,wBAAwB,CAAC;AAAA,IAC5D,OAAO;AACL,eAAS,KAAK,UAAU,WAAO,6BAAK,wBAAwB,CAAC;AAAA,IAC/D;AAAA,EACF;AACA,QAAM,gBAAgB,SAAS,2BAAuB,6BAAK,YAAY,CAAC,EAAE,CAAC;AAC3E,SACE,8CAAC,sBAAsB,UAAtB,EAA+B,OAAO,CAAC,MAAM,UAAU,GACrD;AAAA,WAAO,6CAAC,wBAAAC,SAAA,EAAU,mBAAmB,CAAC,aAA4B,GAAG,IAAK;AAAA,IAC1E;AAAA,KACH;AAEJ;AACA,qBAAqB,cAAc;AAanC,SAAS,aAAa,IAUF;AAVE,eACpB;AAAA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EA/DF,IAuDsB,IASjB,iBATiB,IASjB;AAAA,IARH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,OAAO,OAAO,6CAAC,aAAU,IAAK,6CAAC,YAAS;AAC9C,QAAM,QAAQ,QAAQ,EAAE,MAAM,IAAI,CAAC;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,6BAAK,sBAAsB,SAAS;AAAA,MAC/C,SAAS;AAAA,MACT,KAAK,oBAAO;AAAA,MACZ;AAAA,MACA;AAAA,MACA,MAAK;AAAA,OACD,OAPL;AAAA,MASC;AAAA,qDAAC,UAAK,eAAW,6BAAK,oCAAoC,GAAI,gBAAK;AAAA,QAAO;AAAA,QAAE;AAAA;AAAA;AAAA,EAC9E;AAEJ;AAmBO,IAAM,kCAA8B;AAAA,EAIzC,CACE,IAUA,QACG;AAXH,iBACE;AAAA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MAEA;AAAA,IAhHN,IAyGI,IAQK,iBARL,IAQK;AAAA,MAPH;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MAEA;AAAA;AAKF,UAAM,CAAC,MAAM,UAAU,IAAI,+BAA+B;AAC1D,UAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,CAAC;AACpC,UAAM,uBAAmB,qBAA0B,IAAI;AAEvD,UAAM,OAAwB,OAAO,eAAe;AACpD,UAAM,QAAQ,OAAO,sBAAsB;AAO3C,UAAM,gBAAgB,CAAC,SAA0B,aAAsC;AAErF,YAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,gBAAU,MAAM,UAAU;AAG1B,YAAM,IAAI,SAAS,uBAAuB,wBAAwB,EAAE,CAAC;AACrE,QAAE,YAAY,SAAS;AAGvB,YAAM,WAAO,0BAAW,SAAwB;AAChD,WAAK,OAAO,OAAO;AAMnB,YAAM,WAAW,MAAM;AAlJ7B,YAAAC,KAAAC;AAmJQ,kBAASA,OAAAD,MAAA,iBAAiB,YAAjB,gBAAAA,IAA0B,gBAA1B,OAAAC,MAAyC,CAAC;AACnD,aAAK,QAAQ;AACb,UAAE,YAAY,SAAS;AAAA,MACzB;AAEA,iBAAW,UAAU,CAAC;AAAA,IACxB;AAEA,gCAAU,MAAM;AACd;AAAA,QACE;AAAA,UAAC;AAAA;AAAA,YACC,WAAY,YAAY,YAAY;AAAA,YACpC,UAAU;AAAA,YACV,MAAM;AAAA,YACN;AAAA,aACI;AAAA,QACN;AAAA,QACA,CAAC,gBAAwB;AACvB;AAAA,YACE;AAAA,cAAC;AAAA;AAAA,gBACC,WAAY,YAAY,YAAY;AAAA,gBACpC,UAAU;AAAA,gBACV,MAAI;AAAA,gBACJ,MAAM;AAAA,gBACN;AAAA,iBACI;AAAA,YACN;AAAA,YACA,CAAC,cAAsB;AACrB,uBAAS,KAAK,IAAI,WAAW,WAAW,CAAC;AAAA,YAC3C;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF,GAAG,CAAC,WAAW,MAAM,OAAO,gBAAgB,YAAY,CAAC;AAEzD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAY,YAAY,YAAY;AAAA,QACpC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,4BAA4B,cAAc;AASnC,IAAM,kCAGT,yBAAW,CAAC,IAA6D,QAAQ;AAArE,eAAE,MAAI,YAAY,WAAW,UAAU,UAhNvD,IAgNgB,IAAqD,iBAArD,IAAqD,CAAnD,MAA2B,YAAU;AACrD,QAAM,CAAC,IAAI,IAAI,+BAA+B;AAC9C,SACE;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,eAAW,6BAAK,uCAAuC,SAAsB;AAAA,MAC7E,cAAY,OAAO,SAAS;AAAA,MAC5B,OAAO,OAAO,SAAY;AAAA,MAC1B;AAAA,MAEA,uDAAC,SAAI,eAAW,6BAAK,2CAA2C,GAAI,UAAS;AAAA;AAAA,EAC/E;AAEJ,CAAC;AACD,4BAA4B,cAAc;","names":["import_jsx_runtime","FocusTrap","_a","_b"]}

package/dist/navbar/navbar-expandable-menu.mjs

@@ -3,7 +3,7 @@ import {
   NavbarExpandableMenuContent,
   NavbarExpandableMenuTrigger,
   useNavbarExpendableMenuContext
-} from "../chunk-DEVTAZKG.mjs";
+} from "../chunk-X46LM2QH.mjs";
 import "../chunk-MGUYIOP2.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {

package/dist/tabs/index.d.mts

@@ -1,10 +1,10 @@
 export { Tabs_alias_2 as Tabs } from '../_tsup-dts-rollup';
-export { TabsProps_alias_2 as TabsProps } from '../_tsup-dts-rollup';
 export { TabsList_alias_2 as TabsList } from '../_tsup-dts-rollup';
-export { TabListProps_alias_2 as TabListProps } from '../_tsup-dts-rollup';
-export { TabProps_alias_2 as TabProps } from '../_tsup-dts-rollup';
-export { Tab_alias_2 as Tab } from '../_tsup-dts-rollup';
+export { TabsTab_alias_2 as TabsTab } from '../_tsup-dts-rollup';
 export { TabsContents_alias_2 as TabsContents } from '../_tsup-dts-rollup';
+export { TabsContent_alias_2 as TabsContent } from '../_tsup-dts-rollup';
+export { TabsProps_alias_2 as TabsProps } from '../_tsup-dts-rollup';
+export { TabListProps_alias_2 as TabListProps } from '../_tsup-dts-rollup';
+export { TabsTabProps_alias_2 as TabsTabProps } from '../_tsup-dts-rollup';
 export { TabContentsProps_alias_2 as TabContentsProps } from '../_tsup-dts-rollup';
 export { TabsContentProps_alias_2 as TabsContentProps } from '../_tsup-dts-rollup';
-export { TabsContent_alias_2 as TabsContent } from '../_tsup-dts-rollup';

package/dist/tabs/index.d.ts

@@ -1,10 +1,10 @@
 export { Tabs_alias_2 as Tabs } from '../_tsup-dts-rollup';
-export { TabsProps_alias_2 as TabsProps } from '../_tsup-dts-rollup';
 export { TabsList_alias_2 as TabsList } from '../_tsup-dts-rollup';
-export { TabListProps_alias_2 as TabListProps } from '../_tsup-dts-rollup';
-export { TabProps_alias_2 as TabProps } from '../_tsup-dts-rollup';
-export { Tab_alias_2 as Tab } from '../_tsup-dts-rollup';
+export { TabsTab_alias_2 as TabsTab } from '../_tsup-dts-rollup';
 export { TabsContents_alias_2 as TabsContents } from '../_tsup-dts-rollup';
+export { TabsContent_alias_2 as TabsContent } from '../_tsup-dts-rollup';
+export { TabsProps_alias_2 as TabsProps } from '../_tsup-dts-rollup';
+export { TabListProps_alias_2 as TabListProps } from '../_tsup-dts-rollup';
+export { TabsTabProps_alias_2 as TabsTabProps } from '../_tsup-dts-rollup';
 export { TabContentsProps_alias_2 as TabContentsProps } from '../_tsup-dts-rollup';
 export { TabsContentProps_alias_2 as TabsContentProps } from '../_tsup-dts-rollup';
-export { TabsContent_alias_2 as TabsContent } from '../_tsup-dts-rollup';