@salt-ds/lab 0.0.0-snapshot-20230419162206

package/README.md

@@ -0,0 +1 @@
+# Lab

package/dist-cjs/node_modules/style-inject/dist/style-inject.es.js

@@ -0,0 +1,31 @@
+'use strict';
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+module.exports = styleInject;
+//# sourceMappingURL=style-inject.es.js.map

package/dist-cjs/node_modules/style-inject/dist/style-inject.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-inject.es.js","sources":["../../../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;"}

package/dist-cjs/packages/lab/src/accordion/Accordion.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".saltAccordion {\n  --accordion-borderStyle: var(--saltAccordion-borderStyle, none);\n  --accordion-borderColor: var(--saltAccordion-borderColor, transparent);\n  --accordion-borderWidth: var(--saltAccordion-borderWidth, 0);\n  --accordion-borderRadius: var(--saltAccordion-borderRadius, 0);\n  --accordion-padding: var(--saltAccordion-padding, 0);\n  --accordion-margin: var(--saltAccordion-margin, 0);\n}\n\n.saltAccordion {\n  border-style: var(--accordion-borderStyle);\n  border-color: var(--accordion-borderColor);\n  border-width: var(--accordion-borderWidth);\n  padding: var(--accordion-padding);\n  margin: var(--accordion-margin);\n  border-radius: var(--accordion-borderRadius);\n}\n\n.salt-density-high {\n  --accordion-summary-paddingLeft: 20px;\n  --accordion-details-padding: 3px 4px 5px 20px;\n}\n\n.salt-density-medium {\n  --accordion-summary-paddingLeft: 28px;\n  --accordion-details-padding: 8px 8px 9px 28px;\n}\n\n.salt-density-low {\n  --accordion-summary-paddingLeft: 36px;\n  --accordion-details-padding: 12px 12px 13px 38px;\n}\n\n.salt-density-touch {\n  --accordion-summary-paddingLeft: 44px;\n  --accordion-details-padding: 18px 16px 17px 44px;\n}\n\n.saltAccordionSection {\n  --accordion-summary-height: var(--saltAccordion-summary-height, var(--salt-size-stackable));\n  --accordion-summary-fontWeight: var(--saltAccordion-summary-fontWeight, initial);\n\n  --accordion-summary-background: var(--saltAccordion-summary-background, var(--salt-container-primary-background));\n  --accordion-summary-background-active: var(--saltAccordion-summary-background-active, var(--salt-container-primary-background));\n  --accordion-summary-background-disabled: var(--saltAccordion-summary-background-disabled, var(--salt-container-primary-background));\n  --accordion-summary-background-hover: var(--saltAccordion-summary-background-hover, var(--salt-actionable-primary-background-hover));\n\n  --accordion-summary-text-color: var(--saltAccordion-summary-text-color, var(--salt-text-primary-foreground));\n  --accordion-summary-text-color-active: var(--saltAccordion-summary-text-color-active, var(--salt-text-primary-foreground));\n  --accordion-summary-text-color-disabled: var(--saltAccordion-summary-text-color-disabled, var(--salt-text-primary-foreground-disabled));\n  --accordion-summary-text-color-hover: var(--saltAccordion-summary-text-color-hover, var(--salt-text-primary-foreground));\n\n  --accordion-summary-icon-transition-default: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n  --accordion-summary-icon-transform: var(--saltAccordion-summary-icon-expand-transform, rotate(90deg));\n  --accordion-summary-icon-transition: var(--saltAccordion-summary-icon-transition, var(--accordion-summary-icon-transition-default));\n}\n\n.saltAccordionSection {\n  border-color: var(--saltAccordion-section-borderColor, var(--salt-separable-secondary-borderColor));\n  border-style: var(--saltAccordion-section-borderStyle, var(--salt-container-borderStyle));\n  border-width: var(--saltAccordion-section-borderWidth, 0 0 1px 0);\n  margin: var(--saltAccordion-section-margin, 0);\n  position: relative;\n}\n\n.saltAccordionSection:focus-within {\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltAccordionSection-expanded {\n}\n\n.saltAccordionSection-disabled {\n}\n\n.saltAccordionSummary {\n  height: var(--accordion-summary-height);\n  line-height: var(--accordion-summary-height);\n  font-weight: var(--accordion-summary-fontWeight);\n  background: var(--accordion-summary-background);\n  color: var(--accordion-summary-text-color);\n  font-size: var(--saltAccordion-summary-fontSize, var(--salt-text-fontSize));\n  font-family: var(--saltAccordion-summary-fontFamily, var(--salt-text-fontFamily));\n  display: flex;\n  align-items: center;\n}\n\n.saltAccordionSummary:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.saltAccordionSummary:hover {\n  background: var(--accordion-summary-background-hover);\n  color: var(--accordion-summary-text-color-hover);\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltAccordionSummary-expanded {\n  background: var(--accordion-summary-background-active);\n  color: var(--accordion-summary-text-color-active);\n}\n\n.saltAccordionSummary-disabled,\n.saltAccordionSummary.saltAccordionSummary-disabled:hover {\n  background: var(--accordion-summary-background-disabled);\n  color: var(--accordion-summary-text-color-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltAccordionSummary-icon {\n  width: var(--accordion-summary-paddingLeft);\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  transition: var(--accordion-summary-icon-transition);\n}\n\n.saltAccordionSummary-expanded .saltAccordionSummary-icon {\n  transform: var(--accordion-summary-icon-transform);\n}\n\n.saltAccordionDetails {\n  transition: height 150ms cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.saltAccordionDetails-content {\n  padding: var(--saltAccordion-details-padding, var(--accordion-details-padding));\n}\n\n.saltAccordionDetails-disabled {\n}\n\n.saltAccordionDetails-dummy {\n  position: fixed;\n  top: -10000px;\n  left: 0;\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=Accordion.css.js.map

package/dist-cjs/packages/lab/src/accordion/Accordion.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist-cjs/packages/lab/src/accordion/Accordion.js

@@ -0,0 +1,129 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@salt-ds/core');
+require('./Accordion.css.js');
+var clsx = require('clsx');
+var AccordionContext = require('./AccordionContext.js');
+
+const withBaseName = core.makePrefixer("saltAccordion");
+function sliceToSize(items, size) {
+  if (size !== void 0) {
+    const cutOffCount = items ? items.length - size : 0;
+    if (cutOffCount > 0) {
+      items = items.slice(cutOffCount);
+    }
+  }
+  return items;
+}
+const Accordion = React.forwardRef(
+  function Accordion2({
+    disabled = false,
+    expandedSectionIds: expandedSectionIdsProp,
+    defaultExpandedSectionIds = [],
+    maxExpandedItems,
+    onChange: onChangeProp,
+    className,
+    children,
+    ...restProps
+  }, ref) {
+    const [sectionIds, setSectionIds] = React.useState(/* @__PURE__ */ new Set());
+    const [expandedSectionIds, setExpandedSectionIds] = core.useControlled(
+      {
+        controlled: expandedSectionIdsProp,
+        default: defaultExpandedSectionIds,
+        name: "Accordion",
+        state: "ExpandedSectionIds"
+      }
+    );
+    const registerSection = React.useCallback(
+      (sectionId, isExpanded2) => {
+        setSectionIds((sectionIds2) => {
+          const newSectionIds = new Set(sectionIds2);
+          newSectionIds.add(sectionId);
+          return newSectionIds;
+        });
+        if (isExpanded2) {
+          setExpandedSectionIds((oldExpandedSectionIds) => {
+            const newExpandedSectionIds = [...oldExpandedSectionIds];
+            newExpandedSectionIds.push(sectionId);
+            return newExpandedSectionIds;
+          });
+        }
+      },
+      []
+    );
+    const unregisterSection = React.useCallback((sectionId) => {
+      if (expandedSectionIds.includes(sectionId)) {
+        setExpandedSectionIds(
+          (oldValue) => oldValue.filter((id) => id !== sectionId)
+        );
+      }
+      setSectionIds((sectionIds2) => {
+        const newSectionIds = new Set(sectionIds2);
+        newSectionIds.delete(sectionId);
+        return newSectionIds;
+      });
+    }, []);
+    React.useEffect(() => {
+      if (expandedSectionIds && maxExpandedItems !== void 0 && expandedSectionIds.length > maxExpandedItems) {
+        const newExpandedSectionIds = sliceToSize(
+          expandedSectionIds,
+          maxExpandedItems
+        );
+        setExpandedSectionIds(newExpandedSectionIds || []);
+        if (onChangeProp) {
+          onChangeProp(newExpandedSectionIds || null);
+        }
+      }
+    }, [maxExpandedItems]);
+    const onChange = React.useCallback(
+      (sectionId, isExpanded2) => {
+        let newExpandedSectionIds = [...expandedSectionIds];
+        if (isExpanded2) {
+          newExpandedSectionIds.push(sectionId);
+          if (maxExpandedItems != null && newExpandedSectionIds.length > maxExpandedItems) {
+            newExpandedSectionIds.shift();
+          }
+        } else {
+          newExpandedSectionIds = newExpandedSectionIds.filter(
+            (id) => id !== sectionId
+          );
+        }
+        setExpandedSectionIds(newExpandedSectionIds);
+        if (onChangeProp) {
+          onChangeProp(newExpandedSectionIds);
+        }
+      },
+      [expandedSectionIds, onChangeProp]
+    );
+    const isExpanded = React.useCallback(
+      (sectionId) => expandedSectionIds.includes(sectionId),
+      [expandedSectionIds]
+    );
+    const contextValue = React.useMemo(() => {
+      return {
+        registerSection,
+        unregisterSection,
+        onChange,
+        isExpanded,
+        disabled
+      };
+    }, [registerSection, unregisterSection, onChange, isExpanded, disabled]);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: clsx.clsx(withBaseName(), className),
+      ...restProps,
+      ref,
+      children: /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.AccordionContext.Provider, {
+        value: contextValue,
+        children
+      })
+    });
+  }
+);
+
+exports.Accordion = Accordion;
+//# sourceMappingURL=Accordion.js.map

package/dist-cjs/packages/lab/src/accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sources":["../src/accordion/Accordion.tsx"],"sourcesContent":["import {\n  forwardRef,\n  HTMLAttributes,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport \"./Accordion.css\";\nimport { clsx } from \"clsx\";\nimport { AccordionContext } from \"./AccordionContext\";\n\nconst withBaseName = makePrefixer(\"saltAccordion\");\n\nexport interface AccordionProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  disabled?: boolean;\n  maxExpandedItems?: number;\n  expandedSectionIds?: string[];\n  defaultExpandedSectionIds?: string[];\n  // expandedSectionIds in the order they were expanded.\n  // The oldest expanded item is the first in this list.\n  // When maxExpandedItems is reached, the first item in this list is the first to be collapsed\n  onChange?: (expandedSectionIds: string[] | null) => void;\n}\n\nfunction sliceToSize<T>(items?: T[], size?: number) {\n  if (size !== undefined) {\n    const cutOffCount = items ? items.length - size : 0;\n    if (cutOffCount > 0) {\n      items = items!.slice(cutOffCount);\n    }\n  }\n  return items;\n}\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  function Accordion(\n    {\n      disabled = false,\n      expandedSectionIds: expandedSectionIdsProp,\n      defaultExpandedSectionIds = [],\n      maxExpandedItems,\n      onChange: onChangeProp,\n      className,\n      children,\n      ...restProps\n    },\n    ref\n  ) {\n    const [sectionIds, setSectionIds] = useState<Set<string>>(new Set());\n\n    const [expandedSectionIds, setExpandedSectionIds] = useControlled<string[]>(\n      {\n        controlled: expandedSectionIdsProp,\n        default: defaultExpandedSectionIds,\n        name: \"Accordion\",\n        state: \"ExpandedSectionIds\",\n      }\n    );\n\n    const registerSection = useCallback(\n      (sectionId: string, isExpanded: boolean) => {\n        setSectionIds((sectionIds) => {\n          const newSectionIds = new Set(sectionIds);\n          newSectionIds.add(sectionId);\n          return newSectionIds;\n        });\n        if (isExpanded) {\n          setExpandedSectionIds((oldExpandedSectionIds) => {\n            const newExpandedSectionIds = [...oldExpandedSectionIds];\n            newExpandedSectionIds.push(sectionId);\n            return newExpandedSectionIds;\n          });\n        }\n      },\n      []\n    );\n\n    const unregisterSection = useCallback((sectionId: string) => {\n      if (expandedSectionIds.includes(sectionId)) {\n        setExpandedSectionIds((oldValue) =>\n          oldValue.filter((id) => id !== sectionId)\n        );\n      }\n      setSectionIds((sectionIds) => {\n        const newSectionIds = new Set(sectionIds);\n        newSectionIds.delete(sectionId);\n        return newSectionIds;\n      });\n    }, []);\n\n    useEffect(() => {\n      if (\n        expandedSectionIds &&\n        maxExpandedItems !== undefined &&\n        expandedSectionIds.length > maxExpandedItems\n      ) {\n        const newExpandedSectionIds = sliceToSize(\n          expandedSectionIds,\n          maxExpandedItems\n        );\n        setExpandedSectionIds(newExpandedSectionIds || []);\n        if (onChangeProp) {\n          onChangeProp(newExpandedSectionIds || null);\n        }\n      }\n    }, [maxExpandedItems]);\n\n    const onChange = useCallback(\n      (sectionId: string, isExpanded: boolean) => {\n        let newExpandedSectionIds = [...expandedSectionIds];\n        if (isExpanded) {\n          newExpandedSectionIds.push(sectionId);\n          if (\n            maxExpandedItems != null &&\n            newExpandedSectionIds.length > maxExpandedItems\n          ) {\n            newExpandedSectionIds.shift();\n          }\n        } else {\n          newExpandedSectionIds = newExpandedSectionIds.filter(\n            (id) => id !== sectionId\n          );\n        }\n        setExpandedSectionIds(newExpandedSectionIds);\n        if (onChangeProp) {\n          onChangeProp(newExpandedSectionIds);\n        }\n      },\n      [expandedSectionIds, onChangeProp]\n    );\n\n    const isExpanded = useCallback(\n      (sectionId: string) => expandedSectionIds.includes(sectionId),\n      [expandedSectionIds]\n    );\n\n    const contextValue: AccordionContext = useMemo(() => {\n      return {\n        registerSection,\n        unregisterSection,\n        onChange,\n        isExpanded,\n        disabled,\n      };\n    }, [registerSection, unregisterSection, onChange, isExpanded, disabled]);\n\n    return (\n      <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n        <AccordionContext.Provider value={contextValue}>\n          {children}\n        </AccordionContext.Provider>\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","Accordion","useState","useControlled","useCallback","isExpanded","sectionIds","useEffect","useMemo","jsx","clsx","AccordionContext"],"mappings":"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"}

package/dist-cjs/packages/lab/src/accordion/AccordionContext.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var utils = require('./utils.js');
+
+const AccordionContext = React.createContext(
+  void 0
+);
+const useAccordionContext = () => {
+  const context = React.useContext(AccordionContext);
+  if (utils.isNotProduction() && !context) {
+    console.error("useAccordionContext should be used inside of Accordion");
+  }
+  return context;
+};
+
+exports.AccordionContext = AccordionContext;
+exports.useAccordionContext = useAccordionContext;
+//# sourceMappingURL=AccordionContext.js.map

package/dist-cjs/packages/lab/src/accordion/AccordionContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionContext.js","sources":["../src/accordion/AccordionContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport { isNotProduction } from \"./utils\";\n\nexport interface AccordionContext {\n  isExpanded: (id: string) => boolean;\n  disabled: boolean;\n  registerSection: (id: string, isExpanded: boolean) => void;\n  unregisterSection: (id: string) => void;\n  onChange: (id: string, isExpanded: boolean) => void;\n}\n\nexport const AccordionContext = createContext<AccordionContext | undefined>(\n  undefined\n);\n\nexport const useAccordionContext = () => {\n  const context = useContext(AccordionContext);\n  if (isNotProduction() && !context) {\n    console.error(\"useAccordionContext should be used inside of Accordion\");\n  }\n  return context!;\n};\n"],"names":["createContext","useContext","isNotProduction"],"mappings":";;;;;;;AAWO,MAAM,gBAAmB,GAAAA,mBAAA;AAAA,EAC9B,KAAA,CAAA;AACF,EAAA;AAEO,MAAM,sBAAsB,MAAM;AACvC,EAAM,MAAA,OAAA,GAAUC,iBAAW,gBAAgB,CAAA,CAAA;AAC3C,EAAI,IAAAC,qBAAA,EAAqB,IAAA,CAAC,OAAS,EAAA;AACjC,IAAA,OAAA,CAAQ,MAAM,wDAAwD,CAAA,CAAA;AAAA,GACxE;AACA,EAAO,OAAA,OAAA,CAAA;AACT;;;;;"}

package/dist-cjs/packages/lab/src/accordion/AccordionDetails.js

@@ -0,0 +1,79 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var React = require('react');
+var AccordionSectionContext = require('./AccordionSectionContext.js');
+require('./Accordion.css.js');
+
+const withBaseName = core.makePrefixer("saltAccordionDetails");
+const msCollapseAnimationDuration = 150;
+const AccordionDetails = React.forwardRef(function AccordionDetails2({ children, className, preventUnmountOnCollapse, ...restProps }, ref) {
+  const { isDisabled, isExpanded } = AccordionSectionContext.useAccordionSectionContext();
+  const rootRef = React.useRef(null);
+  const contentRef = React.useRef(null);
+  const forkedRef = core.useForkRef(ref, rootRef);
+  const [state, setState] = React.useState(
+    isExpanded ? "expanded" : "collapsed"
+  );
+  core.useIsomorphicLayoutEffect(() => {
+    if (!rootRef.current) {
+      return;
+    }
+    if (isExpanded) {
+      if (state === "collapsed") {
+        setState("measuring");
+      } else if (state === "measuring") {
+        rootRef.current.style.height = `${contentRef.current.getBoundingClientRect().height}px`;
+        setState("expanding");
+      } else if (state === "expanding") {
+        setTimeout(() => {
+          setState("expanded");
+        }, msCollapseAnimationDuration);
+      } else if (state === "expanded") {
+        rootRef.current.style.height = "auto";
+      }
+    } else {
+      if (state === "expanded") {
+        rootRef.current.style.height = `${rootRef.current.getBoundingClientRect().height}px`;
+        setTimeout(() => {
+          setState("collapsing");
+        }, 0);
+      } else if (state === "collapsing") {
+        rootRef.current.style.height = "0";
+        setTimeout(() => {
+          setState("collapsed");
+        }, msCollapseAnimationDuration);
+      } else if (state === "collapsed") {
+        rootRef.current.style.height = "0";
+      }
+    }
+  }, [isExpanded, state]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    ...restProps,
+    ref: forkedRef,
+    className: clsx.clsx(
+      withBaseName(),
+      {
+        [withBaseName("disabled")]: isDisabled
+      },
+      className
+    ),
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+      ref: contentRef,
+      className: clsx.clsx({
+        [withBaseName("dummy")]: state === "measuring"
+      }),
+      children: preventUnmountOnCollapse || state !== "collapsed" ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: withBaseName("content"),
+        children
+      }) : null
+    })
+  });
+});
+
+exports.AccordionDetails = AccordionDetails;
+//# sourceMappingURL=AccordionDetails.js.map

package/dist-cjs/packages/lab/src/accordion/AccordionDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionDetails.js","sources":["../src/accordion/AccordionDetails.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useRef, useState } from \"react\";\nimport { useAccordionSectionContext } from \"./AccordionSectionContext\";\n\nimport \"./Accordion.css\";\n\nconst withBaseName = makePrefixer(\"saltAccordionDetails\");\n\nexport interface AccordionDetailsProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Render children even if the component is collapsed. Prevents unmounting of children components.\n   * */\n  preventUnmountOnCollapse?: boolean;\n}\n\nconst msCollapseAnimationDuration = 150;\n\n// Collapsed - the section is completely collapsed, don't render anything, height is 0\n// Measuring - the section is about to expand, rendering a dummy preview to measure\n//   the height of expanded section\n// Expanding - the section is expanding but hasn't yet expanded to full size. height is set to\n//   the value measured in the previous step\n// Expanded - the section is expanded, need to render the content, height is set to auto\n// Collapsing - the section is about to start collapsing, the height is set to current height\n//   (auto has to be replaced by a number, then the component has to be rendered, then the value can\n//    be set to 0)\ntype State =\n  | \"collapsed\"\n  | \"measuring\"\n  | \"expanding\"\n  | \"expanded\"\n  | \"collapsing\";\n\nexport const AccordionDetails = forwardRef<\n  HTMLDivElement,\n  AccordionDetailsProps\n>(function AccordionDetails(\n  { children, className, preventUnmountOnCollapse, ...restProps },\n  ref\n) {\n  const { isDisabled, isExpanded } = useAccordionSectionContext();\n  const rootRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef(ref, rootRef);\n\n  const [state, setState] = useState<State>(\n    isExpanded ? \"expanded\" : \"collapsed\"\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (!rootRef.current) {\n      return;\n    }\n    if (isExpanded) {\n      if (state === \"collapsed\") {\n        setState(\"measuring\");\n      } else if (state === \"measuring\") {\n        rootRef.current.style.height = `${\n          contentRef.current!.getBoundingClientRect().height\n        }px`;\n        setState(\"expanding\");\n      } else if (state === \"expanding\") {\n        setTimeout(() => {\n          setState(\"expanded\");\n        }, msCollapseAnimationDuration);\n      } else if (state === \"expanded\") {\n        rootRef.current.style.height = \"auto\";\n      }\n    } else {\n      if (state === \"expanded\") {\n        rootRef.current.style.height = `${\n          rootRef.current.getBoundingClientRect().height\n        }px`;\n        setTimeout(() => {\n          setState(\"collapsing\");\n        }, 0);\n      } else if (state === \"collapsing\") {\n        rootRef.current.style.height = \"0\";\n        setTimeout(() => {\n          setState(\"collapsed\");\n        }, msCollapseAnimationDuration);\n      } else if (state === \"collapsed\") {\n        rootRef.current.style.height = \"0\";\n      }\n    }\n  }, [isExpanded, state]);\n\n  return (\n    <div\n      {...restProps}\n      ref={forkedRef}\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: isDisabled,\n        },\n        className\n      )}\n    >\n      <div\n        ref={contentRef}\n        className={clsx({\n          [withBaseName(\"dummy\")]: state === \"measuring\",\n        })}\n      >\n        {preventUnmountOnCollapse || state !== \"collapsed\" ? (\n          <div className={withBaseName(\"content\")}>{children}</div>\n        ) : null}\n      </div>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","AccordionDetails","useAccordionSectionContext","useRef","useForkRef","useState","useIsomorphicLayoutEffect","jsx","clsx"],"mappings":"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"}

package/dist-cjs/packages/lab/src/accordion/AccordionSection.js

@@ -0,0 +1,103 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@salt-ds/core');
+require('../utils/useFloatingUI.js');
+var useLayoutEffectSkipFirst = require('../utils/useLayoutEffectSkipFirst.js');
+var AccordionSectionContext = require('./AccordionSectionContext.js');
+var clsx = require('clsx');
+require('./Accordion.css.js');
+var AccordionContext = require('./AccordionContext.js');
+var utils = require('./utils.js');
+
+const withBaseName = core.makePrefixer("saltAccordionSection");
+const AccordionSection = React.forwardRef(function Accordion({
+  id: idProp,
+  disabled: disabledProp,
+  onChange: onChangeProp,
+  defaultExpanded: defaultExpandedProp,
+  expanded: expandedProp,
+  children,
+  className,
+  ...restProps
+}, ref) {
+  const [id, setId] = React.useState(
+    () => idProp != null ? idProp : `salt-${Math.round(Math.random() * 1e5)}`
+  );
+  if (idProp != null && idProp != id) {
+    setId(idProp);
+  }
+  const {
+    registerSection,
+    unregisterSection,
+    onChange,
+    isExpanded,
+    disabled: accordionDisabled
+  } = AccordionContext.useAccordionContext();
+  const isControlled = expandedProp != null;
+  const expanded = isControlled ? expandedProp : isExpanded(id);
+  const disabled = disabledProp != null ? disabledProp : accordionDisabled;
+  React.useEffect(() => {
+    registerSection(
+      id,
+      expandedProp != null ? expandedProp : !!defaultExpandedProp
+    );
+    return () => {
+      unregisterSection(id);
+    };
+  }, [id, registerSection, unregisterSection]);
+  const onToggle = React.useCallback(() => {
+    const newExpanded = !expanded;
+    if (onChangeProp) {
+      onChangeProp(newExpanded);
+    }
+    if (!isControlled) {
+      onChange(id, newExpanded);
+    }
+  }, [id, expanded, onChangeProp, onChange, isControlled]);
+  React.useEffect(() => {
+    const isControlled2 = expandedProp != null;
+    if (isControlled2) {
+      onChange(id, expandedProp);
+    }
+  }, [expandedProp, isControlled]);
+  useLayoutEffectSkipFirst.useLayoutEffectSkipFirst(() => {
+    if (utils.isNotProduction()) {
+      const mode = (isControlled2) => isControlled2 ? "controlled" : "uncontrolled";
+      console.error(
+        `A component is changing from ${mode(!isControlled)} to ${mode(
+          isControlled
+        )} mode.`
+      );
+    }
+  }, [isControlled]);
+  const contextValue = React.useMemo(() => {
+    return {
+      isExpanded: expanded,
+      isDisabled: disabled,
+      onToggle
+    };
+  }, [expanded, disabled, onToggle]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    ...restProps,
+    className: clsx.clsx(
+      withBaseName(),
+      {
+        [withBaseName("expanded")]: expanded,
+        [withBaseName("disabled")]: disabled
+      },
+      className
+    ),
+    ref,
+    children: /* @__PURE__ */ jsxRuntime.jsx(AccordionSectionContext.AccordionSectionContext.Provider, {
+      value: contextValue,
+      children
+    })
+  });
+});
+
+exports.AccordionSection = AccordionSection;
+//# sourceMappingURL=AccordionSection.js.map

package/dist-cjs/packages/lab/src/accordion/AccordionSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionSection.js","sources":["../src/accordion/AccordionSection.tsx"],"sourcesContent":["import {\n  forwardRef,\n  HTMLAttributes,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useLayoutEffectSkipFirst } from \"../utils\";\nimport { AccordionSectionContext } from \"./AccordionSectionContext\";\nimport { clsx } from \"clsx\";\nimport \"./Accordion.css\";\nimport { useAccordionContext } from \"./AccordionContext\";\nimport { isNotProduction } from \"./utils\";\n\nconst withBaseName = makePrefixer(\"saltAccordionSection\");\n\nexport interface AccordionSectionProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  defaultExpanded?: boolean;\n  disabled?: boolean;\n  expanded?: boolean;\n  onChange?: (isExpanded: boolean) => void;\n  className?: string;\n}\n\nexport const AccordionSection = forwardRef<\n  HTMLDivElement,\n  AccordionSectionProps\n>(function Accordion(\n  {\n    id: idProp,\n    disabled: disabledProp,\n    onChange: onChangeProp,\n    defaultExpanded: defaultExpandedProp,\n    expanded: expandedProp,\n    children,\n    className,\n    ...restProps\n  },\n  ref\n) {\n  const [id, setId] = useState(() =>\n    idProp != null ? idProp : `salt-${Math.round(Math.random() * 1e5)}`\n  );\n\n  if (idProp != null && idProp != id) {\n    setId(idProp);\n  }\n\n  const {\n    registerSection,\n    unregisterSection,\n    onChange,\n    isExpanded,\n    disabled: accordionDisabled,\n  } = useAccordionContext();\n\n  const isControlled = expandedProp != null;\n  const expanded = isControlled ? expandedProp : isExpanded(id);\n  const disabled = disabledProp != null ? disabledProp : accordionDisabled;\n\n  useEffect(() => {\n    registerSection(\n      id,\n      expandedProp != null ? expandedProp : !!defaultExpandedProp\n    );\n    return () => {\n      unregisterSection(id);\n    };\n  }, [id, registerSection, unregisterSection]);\n\n  const onToggle = useCallback(() => {\n    const newExpanded = !expanded;\n    if (onChangeProp) {\n      onChangeProp(newExpanded);\n    }\n    if (!isControlled) {\n      onChange(id, newExpanded);\n    }\n  }, [id, expanded, onChangeProp, onChange, isControlled]);\n\n  useEffect(() => {\n    const isControlled = expandedProp != null;\n    if (isControlled) {\n      onChange(id, expandedProp);\n    }\n  }, [expandedProp, isControlled]);\n\n  useLayoutEffectSkipFirst(() => {\n    if (isNotProduction()) {\n      const mode = (isControlled: boolean) =>\n        isControlled ? \"controlled\" : \"uncontrolled\";\n      console.error(\n        `A component is changing from ${mode(!isControlled)} to ${mode(\n          isControlled\n        )} mode.`\n      );\n    }\n  }, [isControlled]);\n\n  const contextValue: AccordionSectionContext = useMemo(() => {\n    return {\n      isExpanded: expanded,\n      isDisabled: disabled,\n      onToggle,\n    };\n  }, [expanded, disabled, onToggle]);\n\n  return (\n    <div\n      {...restProps}\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"expanded\")]: expanded,\n          [withBaseName(\"disabled\")]: disabled,\n        },\n        className\n      )}\n      ref={ref}\n    >\n      <AccordionSectionContext.Provider value={contextValue}>\n        {children}\n      </AccordionSectionContext.Provider>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","useState","useAccordionContext","useEffect","useCallback","isControlled","useLayoutEffectSkipFirst","isNotProduction","useMemo","jsx","clsx","AccordionSectionContext"],"mappings":"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"}

package/dist-cjs/packages/lab/src/accordion/AccordionSectionContext.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var utils = require('./utils.js');
+
+const AccordionSectionContext = React.createContext(void 0);
+if (utils.isNotProduction()) {
+  AccordionSectionContext.displayName = "AccordionSectionContext";
+}
+const useAccordionSectionContext = () => {
+  const context = React.useContext(AccordionSectionContext);
+  if (utils.isNotProduction() && !context) {
+    console.error(
+      "useAccordionSectionContext should be used inside of AccordionSection"
+    );
+  }
+  return context;
+};
+
+exports.AccordionSectionContext = AccordionSectionContext;
+exports.useAccordionSectionContext = useAccordionSectionContext;
+//# sourceMappingURL=AccordionSectionContext.js.map

package/dist-cjs/packages/lab/src/accordion/AccordionSectionContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionSectionContext.js","sources":["../src/accordion/AccordionSectionContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport { isNotProduction } from \"./utils\";\n\nexport interface AccordionSectionContext {\n  isDisabled?: boolean;\n  isExpanded: boolean;\n  onToggle: () => void;\n}\n\nexport const AccordionSectionContext = createContext<\n  AccordionSectionContext | undefined\n>(undefined);\n\nif (isNotProduction()) {\n  AccordionSectionContext.displayName = \"AccordionSectionContext\";\n}\n\nexport const useAccordionSectionContext = () => {\n  const context = useContext(AccordionSectionContext);\n  if (isNotProduction() && !context) {\n    console.error(\n      \"useAccordionSectionContext should be used inside of AccordionSection\"\n    );\n  }\n  return context!;\n};\n"],"names":["createContext","isNotProduction","useContext"],"mappings":";;;;;;;AASa,MAAA,uBAAA,GAA0BA,oBAErC,KAAS,CAAA,EAAA;AAEX,IAAIC,uBAAmB,EAAA;AACrB,EAAA,uBAAA,CAAwB,WAAc,GAAA,yBAAA,CAAA;AACxC,CAAA;AAEO,MAAM,6BAA6B,MAAM;AAC9C,EAAM,MAAA,OAAA,GAAUC,iBAAW,uBAAuB,CAAA,CAAA;AAClD,EAAI,IAAAD,qBAAA,EAAqB,IAAA,CAAC,OAAS,EAAA;AACjC,IAAQ,OAAA,CAAA,KAAA;AAAA,MACN,sEAAA;AAAA,KACF,CAAA;AAAA,GACF;AACA,EAAO,OAAA,OAAA,CAAA;AACT;;;;;"}

package/dist-cjs/packages/lab/src/accordion/AccordionSummary.js

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var core = require('@salt-ds/core');
+var icons = require('@salt-ds/icons');
+var AccordionSectionContext = require('./AccordionSectionContext.js');
+require('./Accordion.css.js');
+
+const withBaseName = core.makePrefixer("saltAccordionSummary");
+const AccordionSummary = React.forwardRef(function AccordionSummary2({ className, children, icon, ...restProps }, ref) {
+  const { isDisabled, isExpanded, onToggle } = AccordionSectionContext.useAccordionSectionContext();
+  const onKeyDown = React.useCallback(
+    ({ key }) => {
+      if (key === "Enter" || key === " ") {
+        onToggle();
+      }
+    },
+    [onToggle]
+  );
+  if (!icon) {
+    icon = /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {
+      "aria-hidden": true
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    ...restProps,
+    className: clsx.clsx(
+      withBaseName(),
+      {
+        [withBaseName("disabled")]: isDisabled,
+        [withBaseName("expanded")]: isExpanded
+      },
+      className
+    ),
+    ref,
+    role: "button",
+    "aria-expanded": isExpanded,
+    onClick: isDisabled ? void 0 : onToggle,
+    onKeyDown: isDisabled ? void 0 : onKeyDown,
+    tabIndex: isDisabled ? -1 : 0,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: withBaseName("icon"),
+        children: icon
+      }),
+      children
+    ]
+  });
+});
+
+exports.AccordionSummary = AccordionSummary;
+//# sourceMappingURL=AccordionSummary.js.map

package/dist-cjs/packages/lab/src/accordion/AccordionSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionSummary.js","sources":["../src/accordion/AccordionSummary.tsx"],"sourcesContent":["import {\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEventHandler,\n  ReactNode,\n  useCallback,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { ChevronRightIcon } from \"@salt-ds/icons\";\nimport { useAccordionSectionContext } from \"./AccordionSectionContext\";\nimport \"./Accordion.css\";\n\nconst withBaseName = makePrefixer(\"saltAccordionSummary\");\n\nexport interface AccordionSummaryProps extends HTMLAttributes<HTMLDivElement> {\n  icon?: ReactNode;\n}\n\nexport const AccordionSummary = forwardRef<\n  HTMLDivElement,\n  AccordionSummaryProps\n>(function AccordionSummary({ className, children, icon, ...restProps }, ref) {\n  const { isDisabled, isExpanded, onToggle } = useAccordionSectionContext();\n\n  const onKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(\n    ({ key }) => {\n      if (key === \"Enter\" || key === \" \") {\n        onToggle();\n      }\n    },\n    [onToggle]\n  );\n\n  if (!icon) {\n    icon = <ChevronRightIcon aria-hidden />;\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: isDisabled,\n          [withBaseName(\"expanded\")]: isExpanded,\n        },\n        className\n      )}\n      ref={ref}\n      role=\"button\"\n      aria-expanded={isExpanded}\n      onClick={isDisabled ? undefined : onToggle}\n      onKeyDown={isDisabled ? undefined : onKeyDown}\n      tabIndex={isDisabled ? -1 : 0}\n    >\n      <div className={withBaseName(\"icon\")}>{icon}</div>\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","AccordionSummary","useAccordionSectionContext","useCallback","jsx","ChevronRightIcon","jsxs","clsx"],"mappings":";;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,kBAAa,sBAAsB,CAAA,CAAA;AAM3C,MAAA,gBAAA,GAAmBC,gBAG9B,CAAA,SAASC,iBAAiB,CAAA,EAAE,WAAW,QAAU,EAAA,IAAA,EAAA,GAAS,SAAU,EAAA,EAAG,GAAK,EAAA;AAC5E,EAAA,MAAM,EAAE,UAAA,EAAY,UAAY,EAAA,QAAA,KAAaC,kDAA2B,EAAA,CAAA;AAExE,EAAA,MAAM,SAAkD,GAAAC,iBAAA;AAAA,IACtD,CAAC,EAAE,GAAA,EAAU,KAAA;AACX,MAAI,IAAA,GAAA,KAAQ,OAAW,IAAA,GAAA,KAAQ,GAAK,EAAA;AAClC,QAAS,QAAA,EAAA,CAAA;AAAA,OACX;AAAA,KACF;AAAA,IACA,CAAC,QAAQ,CAAA;AAAA,GACX,CAAA;AAEA,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAA,IAAA,mBAAQC,cAAA,CAAAC,sBAAA,EAAA;AAAA,MAAiB,aAAW,EAAA,IAAA;AAAA,KAAC,CAAA,CAAA;AAAA,GACvC;AAEA,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,UAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,UAAA;AAAA,OAC9B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,GAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IACL,eAAe,EAAA,UAAA;AAAA,IACf,OAAA,EAAS,aAAa,KAAY,CAAA,GAAA,QAAA;AAAA,IAClC,SAAA,EAAW,aAAa,KAAY,CAAA,GAAA,SAAA;AAAA,IACpC,QAAA,EAAU,aAAa,CAAK,CAAA,GAAA,CAAA;AAAA,IAE5B,QAAA,EAAA;AAAA,sBAACH,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,QAAI,QAAA,EAAA,IAAA;AAAA,OAAK,CAAA;AAAA,MAC3C,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/packages/lab/src/accordion/utils.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const isNotProduction = () => process.env.NODE_ENV !== "production";
+
+exports.isNotProduction = isNotProduction;
+//# sourceMappingURL=utils.js.map

package/dist-cjs/packages/lab/src/accordion/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../src/accordion/utils.ts"],"sourcesContent":["export const isNotProduction = () => process.env.NODE_ENV !== \"production\";\n"],"names":[],"mappings":";;;;AAAO,MAAM,eAAkB,GAAA,MAAM,OAAQ,CAAA,GAAA,CAAI,QAAa,KAAA;;;;"}

package/dist-cjs/packages/lab/src/app-header/AppHeader.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".salt-density-medium,\n.salt-density-low,\n.salt-density-touch {\n  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 2));\n}\n\n.salt-density-high {\n  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 3));\n}\n\n.saltAppHeader {\n  --appHeader-background: var(--salt-container-primary-background);\n  --appHeader-separable-bar: var(--salt-separable-secondary-borderColor);\n  --appHeader-shadow: var(--saltAppHeader-shadow, var(--salt-overlayable-shadow-borderRegion));\n  --appHeader-padding: var(--salt-size-container-spacing);\n  --appHeader-paddingLeft: 8px;\n  --appHeader-paddingRight: var(--appHeader-padding);\n\n  --saltToolbar-width: auto;\n}\n\n.saltAppHeader .saltTabstrip {\n  --saltTabs-tabstrip-height: var(--appHeader-height);\n  /* App header has its own bottom border, so remove tabs line but keeping activation indicator */\n  --saltTabs-activationIndicator-height: 0px;\n  --saltTabs-activationIndicator-thumb-inset: -2px 0 0 0;\n}\n\n.saltAppHeader {\n  align-items: flex-start;\n  background: var(--appHeader-background);\n  border-bottom: var(--salt-container-borderStyle) var(--salt-size-border) var(--salt-container-primary-borderColor);\n  box-shadow: var(--appHeader-shadow);\n  box-sizing: content-box;\n  display: flex;\n  flex: 0 0 auto;\n  height: var(--appHeader-height);\n  overflow: hidden;\n  padding: 0 var(--appHeader-paddingRight) 0 var(--appHeader-paddingLeft);\n  width: 100%;\n}\n\n.saltAppHeader > .Responsive-inner {\n  width: 100%;\n  /* overflow: hidden; */\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  /* justify-content: space-between; */\n  flex: 1;\n  min-height: var(--appHeader-height);\n}\n\n.saltAppHeader > .Responsive-inner > .responsive-pillar {\n  width: 0;\n  height: var(--appHeader-height);\n}\n\n.saltAppHeader-navMenu {\n  margin-right: 12px;\n  padding-right: 8px;\n}\n\n.saltAppHeader-navMenu::after {\n  top: 0;\n  right: 0;\n  width: var(--salt-size-border);\n  bottom: 0;\n  content: \"\";\n  position: absolute;\n  background: var(--appHeader-separable-bar);\n}\n\n.saltAppHeader .saltLogo:not(.saltLogo-compact) {\n  margin-left: 16px;\n}\n\n.saltAppHeader > .Responsive-inner > .Tabstrip {\n  align-self: flex-end;\n  flex: 0 0 auto;\n  margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-end] {\n  margin-right: auto;\n}\n\n.saltAppHeader > .Responsive-inner > * {\n  flex-shrink: 0;\n}\n\n.saltAppHeader > .Responsive-inner > .Toolbar {\n  justify-content: flex-end;\n  margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-start=\"true\"] {\n  margin-left: auto;\n}\n\n.saltAppHeader > .Responsive-inner[data-collapsing=\"true\"] {\n  flex-wrap: nowrap;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsing=\"true\"] {\n  flex-shrink: 1;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsible=\"dynamic\"][data-collapsed=\"true\"] {\n  flex-basis: 0;\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=AppHeader.css.js.map

package/dist-cjs/packages/lab/src/app-header/AppHeader.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist-cjs/packages/lab/src/app-header/AppHeader.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var Toolbar = require('../toolbar/Toolbar.js');
+var core = require('@salt-ds/core');
+var React = require('react');
+require('../toolbar/overflow-panel/OverflowPanel.js');
+require('../utils/useFloatingUI.js');
+require('../responsive/useResizeObserver.js');
+require('../toolbar/toolbar-field/ToolbarField.js');
+require('../toolbar/Tooltray.css.js');
+require('../toolbar/ToolbarButton.js');
+var icons = require('@salt-ds/icons');
+require('./AppHeader.css.js');
+
+const withBaseName = core.makePrefixer("saltAppHeader");
+const AppHeader = React.forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Toolbar.Toolbar, {
+      className: clsx.clsx(withBaseName(), className),
+      ref,
+      overflowButtonIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.MenuIcon, {}),
+      children
+    });
+  }
+);
+
+exports.AppHeader = AppHeader;
+//# sourceMappingURL=AppHeader.js.map

package/dist-cjs/packages/lab/src/app-header/AppHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.js","sources":["../src/app-header/AppHeader.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { Toolbar } from \"../toolbar\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { MenuIcon } from \"@salt-ds/icons\";\n\nimport \"./AppHeader.css\";\nimport { forwardRef, HTMLAttributes } from \"react\";\n\nconst withBaseName = makePrefixer(\"saltAppHeader\");\n\nexport type AppHeaderProps = HTMLAttributes<HTMLDivElement>;\n\nexport const AppHeader = forwardRef<HTMLDivElement, AppHeaderProps>(\n  ({ children, className, ...rest }, ref) => {\n    // const [innerContainerRef, overflowedItems] = useOverflowObserver(\n    //   \"horizontal\",\n    //   null\n    // );\n\n    return (\n      <Toolbar\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        overflowButtonIcon={<MenuIcon />}\n        // OverflowButtonProps={{ align: \"start\" }}\n      >\n        {children}\n      </Toolbar>\n    );\n    // return (\n    //   <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n    //     <div className={withBaseName(\"innerContainer\")} ref={innerContainerRef}>\n    //       <OverflowMenu\n    //         className={withBaseName(\"navMenu\")}\n    //         IconComponent={MenuIcon}\n    //         source={overflowedItems}\n    //       />\n    //       {children}\n    //     </div>\n    //   </div>\n    // );\n  }\n);\n"],"names":["makePrefixer","forwardRef","jsx","Toolbar","clsx","MenuIcon"],"mappings":";;;;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAI1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,CAAC,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAQ,KAAA;AAMzC,IAAA,uBACGC,cAAA,CAAAC,eAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,kBAAA,iCAAqBC,cAAS,EAAA,EAAA,CAAA;AAAA,MAG7B,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAcJ;AACF;;;;"}

package/dist-cjs/packages/lab/src/badge/Badge.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = "/* Default variables applied to the root element */\n.saltBadge {\n  /* Colors */\n  --badge-content-text-color: var(--saltBadge-content-text-color, var(--salt-accent-foreground));\n  --badge-content-icon-color: var(--saltBadge-content-icon-color, var(--salt-accent-background));\n  /* Font, Typography */\n  --badge-content-borderRadius: 16px;\n  --badge-content-lineHeight: 15px;\n  --badge-content-padding: 0px 4px;\n  --badge-fontSize: var(--saltBadge-fontSize, var(--salt-text-label-fontSize));\n\n  /* Derived */\n  /* Same as content padding in x */\n  --badge-offset-inline: -4px;\n\n  --badge-sequence-gap: var(--salt-size-unit);\n}\n\n/* Style applied to the root element */\n.saltBadge {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  display: inline-flex;\n  position: relative;\n  flex-shrink: 0;\n  vertical-align: middle;\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n}\n\n/* Give automatic margin when they sit next to each other */\n.saltBadge + .saltBadge {\n  margin-left: var(--badge-sequence-gap);\n}\n\n/* Style applied to the badge in the corner of the node */\n.saltBadge-badge {\n  color: var(--badge-content-text-color);\n  display: inline-block;\n  font-weight: 700; /* TODO: Use characteristic once aligned */\n  font-size: var(--badge-fontSize);\n  /* default small type */\n  width: auto;\n  min-width: 15px;\n  line-height: var(--badge-content-lineHeight);\n  border-radius: var(--badge-content-borderRadius);\n  text-align: center;\n\n  transform: translate(var(--badge-offset-inline), -50%);\n  transform-origin: 100% 0%;\n  /*\n    We want offset the next inline element to be strictly next to the badge.\n    This negative margin makes sure this node \"appears\" to be narrower.\n   */\n  margin-right: var(--badge-offset-inline);\n\n  padding: var(--badge-content-padding);\n  background: var(--badge-content-icon-color);\n\n  position: relative;\n\n  flex-wrap: wrap;\n  align-items: center;\n  align-content: center;\n  flex-direction: row;\n  justify-content: center;\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=Badge.css.js.map