@salt-ds/lab 1.0.0-alpha.0

package/dist-cjs/packages/lab/src/avatar/Avatar.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.saltAvatar {\n  --avatar-background: var(--saltAvatar-background, var(--salt-accent-background));\n  --avatar-foreground: var(--saltAvatar-foreground, var(--salt-accent-foreground));\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n  background: var(--avatar-background);\n  color: var(--avatar-foreground);\n  font-size: var(--avatar-fontSize);\n  line-height: var(--avatar-container-size);\n  width: var(--avatar-container-size);\n  height: var(--avatar-container-size);\n  letter-spacing: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  position: relative;\n  flex-shrink: 0;\n  user-select: none;\n  border-radius: 50%;\n}\n\n/* Style applied to the image element */\n.saltAvatar-image {\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  object-fit: cover;\n  color: transparent;\n  text-indent: 10000px;\n}\n\n/* Style applied to the svg element */\n.saltAvatar > svg {\n  width: var(--avatar-container-size);\n  height: var(--avatar-container-size);\n}\n\n.saltAvatar-svgDisc {\n  fill: var(--avatar-background);\n}\n\n.saltAvatar-svgHead {\n  fill: var(--avatar-foreground);\n}\n\n/* Style applied when size is small */\n.saltAvatar-small {\n  --avatar-fontSize: 8px;\n  --avatar-container-size: var(--salt-size-graphic-small);\n}\n\n/* Style applied when size is medium */\n.saltAvatar-medium {\n  --avatar-fontSize: 11px;\n  --avatar-container-size: var(--salt-size-graphic-medium);\n}\n\n/* Style applied when size is large */\n.saltAvatar-large {\n  --avatar-fontSize: 14px;\n  --avatar-container-size: var(--salt-size-graphic-large);\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=Avatar.css.js.map

package/dist-cjs/packages/lab/src/avatar/Avatar.css.js.map

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

package/dist-cjs/packages/lab/src/avatar/Avatar.js

@@ -0,0 +1,66 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var cx = require('classnames');
+var React = require('react');
+var constants = require('./internal/constants.js');
+var DefaultAvatar = require('./internal/DefaultAvatar.js');
+var useLoaded = require('./internal/useLoaded.js');
+require('./Avatar.css.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const withBaseName = core.makePrefixer(constants.classBase);
+const Avatar = React.forwardRef(function Avatar2({
+  alt = "",
+  className,
+  children: childrenProp,
+  id: idProp,
+  size = "medium",
+  src,
+  srcSet,
+  title = "user",
+  imgProps,
+  sizes,
+  ...rest
+}, ref) {
+  let children;
+  const id = core.useId(idProp);
+  const loaded = useLoaded.useLoaded({ ...imgProps, src, srcSet });
+  const hasImg = src || srcSet;
+  const hasImgNotFailing = hasImg && loaded !== "error";
+  if (hasImgNotFailing) {
+    children = /* @__PURE__ */ jsxRuntime.jsx("img", {
+      className: withBaseName("image"),
+      alt,
+      src,
+      srcSet,
+      sizes,
+      ...imgProps
+    });
+  } else if (childrenProp != null) {
+    children = childrenProp;
+  } else if (hasImg && alt) {
+    children = alt[0];
+  } else {
+    children = /* @__PURE__ */ jsxRuntime.jsx(DefaultAvatar.DefaultAvatar, {
+      id,
+      title,
+      ...rest
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    ref,
+    className: cx__default["default"](withBaseName(), withBaseName(size), className),
+    ...rest,
+    children
+  });
+});
+
+exports.Avatar = Avatar;
+//# sourceMappingURL=Avatar.js.map

package/dist-cjs/packages/lab/src/avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport cn from \"classnames\";\nimport { forwardRef, HTMLAttributes, ImgHTMLAttributes } from \"react\";\nimport { classBase } from \"./internal/constants\";\nimport { DefaultAvatar } from \"./internal/DefaultAvatar\";\nimport { useLoaded } from \"./internal/useLoaded\";\n\nimport \"./Avatar.css\";\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  alt?: string;\n  id?: string;\n  imgProps?: ImgHTMLAttributes<HTMLImageElement>;\n  size?: \"small\" | \"medium\" | \"large\";\n  sizes?: string;\n  src?: string;\n  srcSet?: string;\n  title?: string;\n}\n\nconst withBaseName = makePrefixer(classBase);\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n  {\n    alt = \"\",\n    className,\n    children: childrenProp,\n    id: idProp,\n    size = \"medium\",\n    src,\n    srcSet,\n    title = \"user\",\n    imgProps,\n    sizes,\n    ...rest\n  },\n  ref\n) {\n  let children;\n  const id = useId(idProp);\n\n  const loaded = useLoaded({ ...imgProps, src, srcSet });\n  const hasImg = src || srcSet;\n  const hasImgNotFailing = hasImg && loaded !== \"error\";\n\n  if (hasImgNotFailing) {\n    children = (\n      <img\n        className={withBaseName(\"image\")}\n        alt={alt}\n        src={src}\n        srcSet={srcSet}\n        sizes={sizes}\n        {...imgProps}\n      />\n    );\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  } else if (hasImg && alt) {\n    children = alt[0];\n  } else {\n    children = <DefaultAvatar id={id} title={title} {...rest} />;\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cn(withBaseName(), withBaseName(size), className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","classBase","forwardRef","Avatar","useId","useLoaded","jsx","DefaultAvatar","cn"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,kBAAaC,mBAAS,CAAA,CAAA;AAE9B,MAAA,MAAA,GAASC,gBAAwC,CAAA,SAASC,OACrE,CAAA;AAAA,EACE,GAAM,GAAA,EAAA;AAAA,EACN,SAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,EAAI,EAAA,MAAA;AAAA,EACJ,IAAO,GAAA,QAAA;AAAA,EACP,GAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAQ,GAAA,MAAA;AAAA,EACR,QAAA;AAAA,EACA,KAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAI,IAAA,QAAA,CAAA;AACJ,EAAM,MAAA,EAAA,GAAKC,WAAM,MAAM,CAAA,CAAA;AAEvB,EAAA,MAAM,SAASC,mBAAU,CAAA,EAAE,GAAG,QAAU,EAAA,GAAA,EAAK,QAAQ,CAAA,CAAA;AACrD,EAAA,MAAM,SAAS,GAAO,IAAA,MAAA,CAAA;AACtB,EAAM,MAAA,gBAAA,GAAmB,UAAU,MAAW,KAAA,OAAA,CAAA;AAE9C,EAAA,IAAI,gBAAkB,EAAA;AACpB,IAAA,QAAA,mBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,MAC/B,GAAA;AAAA,MACA,GAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACC,GAAG,QAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ,MAAA,IAAW,gBAAgB,IAAM,EAAA;AAC/B,IAAW,QAAA,GAAA,YAAA,CAAA;AAAA,GACb,MAAA,IAAW,UAAU,GAAK,EAAA;AACxB,IAAA,QAAA,GAAW,GAAI,CAAA,CAAA,CAAA,CAAA;AAAA,GACV,MAAA;AACL,IAAA,QAAA,mBAAYA,cAAA,CAAAC,2BAAA,EAAA;AAAA,MAAc,EAAA;AAAA,MAAQ,KAAA;AAAA,MAAe,GAAG,IAAA;AAAA,KAAM,CAAA,CAAA;AAAA,GAC5D;AAEA,EAAA,uBACGD,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,WAAWE,sBAAG,CAAA,YAAA,IAAgB,YAAa,CAAA,IAAI,GAAG,SAAS,CAAA;AAAA,IAC1D,GAAG,IAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/packages/lab/src/avatar/internal/DefaultAvatar.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var constants = require('./constants.js');
+
+const withBaseName = core.makePrefixer(constants.classBase);
+function DefaultAvatar({ id, title }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", {
+    "aria-labelledby": id,
+    height: "64px",
+    role: "img",
+    viewBox: "0 0 64 64",
+    width: "64px",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("title", {
+        id,
+        children: title
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("g", {
+        className: withBaseName("svgRoot"),
+        fill: "none",
+        fillRule: "evenodd",
+        stroke: "none",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("g", {
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("path", {
+              className: withBaseName("svgDisc"),
+              d: "M0,32 C0,49.6769231 14.3230769,64 32,64 C49.6769231,64 64,49.6769231 64,32 C64,14.3230769 49.6769231,0 32,0 C14.3230769,0 0,14.3230769 0,32 Z"
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", {
+              className: withBaseName("svgHead"),
+              d: "M31.9995627,62.8538462 C22.4716151,62.8538462 13.9354845,58.5287108 8.24473082,51.7487468 C11.1388856,50.496781 18.3580131,47.8952936 22.9268753,46.5620313 C23.2845799,46.4482162 23.349617,46.4319569 23.349617,44.8222866 C23.349617,43.0988012 23.1545055,41.879354 22.7317638,40.9850927 C22.1626884,39.7656455 21.479798,37.7007148 21.2359085,35.8469925 C20.5530181,35.0504496 19.6262382,33.4893945 19.0246442,30.4978466 C18.5043468,27.8638406 18.7482362,26.9045421 19.0896814,26.0102808 C19.1222,25.9127251 19.1709779,25.8151693 19.1872372,25.7176135 C19.3173116,25.1160195 19.1384593,21.8966789 18.683199,19.4090065 C18.3742724,17.7017804 18.7644955,14.0759574 21.1220935,11.0679876 C22.6016894,9.16564991 25.4470663,6.84057054 30.5524853,6.51538462 L33.3978621,6.51538462 C38.5845776,6.84057054 41.4299545,9.16564991 42.9095504,11.0679876 C45.2671484,14.0759574 45.6573715,17.7017804 45.3321856,19.4090065 C44.8769253,21.8966789 44.698073,25.0997602 44.8281474,25.7176135 C44.8444067,25.8151693 44.8931846,25.9127251 44.9257032,25.9940215 C45.2671484,26.8882828 45.5272971,27.8475813 44.9907404,30.4815873 C44.3891464,33.4732978 43.4623665,35.0340277 42.7794761,35.8308958 C42.5355866,37.6844555 41.8526962,39.7331269 41.2836208,40.9686708 C40.747064,42.0907248 40.2105073,43.4239871 40.2105073,44.7572494 C40.2105073,46.3669197 40.2755445,46.383179 40.6495083,46.4968315 C44.9907404,47.7814785 52.4700167,50.3667066 55.7706538,51.7162282 C50.0799001,58.5126141 41.5437696,62.8538462 31.9995627,62.8538462"
+            })
+          ]
+        })
+      })
+    ]
+  });
+}
+
+exports.DefaultAvatar = DefaultAvatar;
+//# sourceMappingURL=DefaultAvatar.js.map

package/dist-cjs/packages/lab/src/avatar/internal/DefaultAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultAvatar.js","sources":["../src/avatar/internal/DefaultAvatar.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { classBase } from \"./constants\";\n\nconst withBaseName = makePrefixer(classBase);\n\nexport function DefaultAvatar({ id, title }: HTMLAttributes<HTMLElement>) {\n  return (\n    <svg\n      aria-labelledby={id}\n      height=\"64px\"\n      role=\"img\"\n      viewBox=\"0 0 64 64\"\n      width=\"64px\"\n    >\n      <title id={id}>{title}</title>\n      <g\n        className={withBaseName(\"svgRoot\")}\n        fill=\"none\"\n        fillRule=\"evenodd\"\n        stroke=\"none\"\n      >\n        <g>\n          <path\n            className={withBaseName(\"svgDisc\")}\n            d=\"M0,32 C0,49.6769231 14.3230769,64 32,64 C49.6769231,64 64,49.6769231 64,32 C64,14.3230769 49.6769231,0 32,0 C14.3230769,0 0,14.3230769 0,32 Z\"\n          />\n          <path\n            className={withBaseName(\"svgHead\")}\n            d=\"M31.9995627,62.8538462 C22.4716151,62.8538462 13.9354845,58.5287108 8.24473082,51.7487468 C11.1388856,50.496781 18.3580131,47.8952936 22.9268753,46.5620313 C23.2845799,46.4482162 23.349617,46.4319569 23.349617,44.8222866 C23.349617,43.0988012 23.1545055,41.879354 22.7317638,40.9850927 C22.1626884,39.7656455 21.479798,37.7007148 21.2359085,35.8469925 C20.5530181,35.0504496 19.6262382,33.4893945 19.0246442,30.4978466 C18.5043468,27.8638406 18.7482362,26.9045421 19.0896814,26.0102808 C19.1222,25.9127251 19.1709779,25.8151693 19.1872372,25.7176135 C19.3173116,25.1160195 19.1384593,21.8966789 18.683199,19.4090065 C18.3742724,17.7017804 18.7644955,14.0759574 21.1220935,11.0679876 C22.6016894,9.16564991 25.4470663,6.84057054 30.5524853,6.51538462 L33.3978621,6.51538462 C38.5845776,6.84057054 41.4299545,9.16564991 42.9095504,11.0679876 C45.2671484,14.0759574 45.6573715,17.7017804 45.3321856,19.4090065 C44.8769253,21.8966789 44.698073,25.0997602 44.8281474,25.7176135 C44.8444067,25.8151693 44.8931846,25.9127251 44.9257032,25.9940215 C45.2671484,26.8882828 45.5272971,27.8475813 44.9907404,30.4815873 C44.3891464,33.4732978 43.4623665,35.0340277 42.7794761,35.8308958 C42.5355866,37.6844555 41.8526962,39.7331269 41.2836208,40.9686708 C40.747064,42.0907248 40.2105073,43.4239871 40.2105073,44.7572494 C40.2105073,46.3669197 40.2755445,46.383179 40.6495083,46.4968315 C44.9907404,47.7814785 52.4700167,50.3667066 55.7706538,51.7162282 C50.0799001,58.5126141 41.5437696,62.8538462 31.9995627,62.8538462\"\n          />\n        </g>\n      </g>\n    </svg>\n  );\n}\n"],"names":["makePrefixer","classBase","jsxs","jsx"],"mappings":";;;;;;;;AAIA,MAAM,YAAA,GAAeA,kBAAaC,mBAAS,CAAA,CAAA;AAEpC,SAAS,aAAc,CAAA,EAAE,EAAI,EAAA,KAAA,EAAsC,EAAA;AACxE,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,iBAAiB,EAAA,EAAA;AAAA,IACjB,MAAO,EAAA,MAAA;AAAA,IACP,IAAK,EAAA,KAAA;AAAA,IACL,OAAQ,EAAA,WAAA;AAAA,IACR,KAAM,EAAA,MAAA;AAAA,IAEN,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAA,OAAA,EAAA;AAAA,QAAM,EAAA;AAAA,QAAS,QAAA,EAAA,KAAA;AAAA,OAAM,CAAA;AAAA,sBACrBA,cAAA,CAAA,GAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,QACjC,IAAK,EAAA,MAAA;AAAA,QACL,QAAS,EAAA,SAAA;AAAA,QACT,MAAO,EAAA,MAAA;AAAA,QAEP,QAAC,kBAAAD,eAAA,CAAA,GAAA,EAAA;AAAA,UACC,QAAA,EAAA;AAAA,4BAACC,cAAA,CAAA,MAAA,EAAA;AAAA,cACC,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,cACjC,CAAE,EAAA,+IAAA;AAAA,aACJ,CAAA;AAAA,4BACCA,cAAA,CAAA,MAAA,EAAA;AAAA,cACC,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,cACjC,CAAE,EAAA,o+CAAA;AAAA,aACJ,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/packages/lab/src/avatar/internal/constants.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const classBase = "saltAvatar";
+
+exports.classBase = classBase;
+//# sourceMappingURL=constants.js.map

package/dist-cjs/packages/lab/src/avatar/internal/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../src/avatar/internal/constants.ts"],"sourcesContent":["export const classBase = \"saltAvatar\";\n"],"names":[],"mappings":";;;;AAAO,MAAM,SAAY,GAAA;;;;"}

package/dist-cjs/packages/lab/src/avatar/internal/useLoaded.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function useLoaded({
+  crossOrigin,
+  referrerPolicy,
+  src,
+  srcSet
+}) {
+  const [loaded, setLoaded] = React.useState(false);
+  React.useEffect(() => {
+    if (!src && !srcSet) {
+      return void 0;
+    }
+    setLoaded(false);
+    let active = true;
+    const image = new Image();
+    image.onload = () => {
+      if (!active) {
+        return;
+      }
+      setLoaded("loaded");
+    };
+    image.onerror = () => {
+      if (!active) {
+        return;
+      }
+      setLoaded("error");
+    };
+    image.crossOrigin = crossOrigin;
+    image.referrerPolicy = referrerPolicy;
+    image.src = src;
+    if (srcSet) {
+      image.srcset = srcSet;
+    }
+    return () => {
+      active = false;
+    };
+  }, [crossOrigin, referrerPolicy, src, srcSet]);
+  return loaded;
+}
+
+exports.useLoaded = useLoaded;
+//# sourceMappingURL=useLoaded.js.map

package/dist-cjs/packages/lab/src/avatar/internal/useLoaded.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLoaded.js","sources":["../src/avatar/internal/useLoaded.ts"],"sourcesContent":["import { ImgHTMLAttributes, useEffect, useState } from \"react\";\n\nexport function useLoaded({\n  crossOrigin,\n  referrerPolicy,\n  src,\n  srcSet,\n}: ImgHTMLAttributes<HTMLImageElement>) {\n  const [loaded, setLoaded] = useState<false | \"loaded\" | \"error\">(false);\n\n  useEffect(() => {\n    if (!src && !srcSet) {\n      return undefined;\n    }\n\n    setLoaded(false);\n\n    let active = true;\n    const image = new Image();\n    image.onload = () => {\n      if (!active) {\n        return;\n      }\n      setLoaded(\"loaded\");\n    };\n    image.onerror = () => {\n      if (!active) {\n        return;\n      }\n      setLoaded(\"error\");\n    };\n    image.crossOrigin = crossOrigin as HTMLImageElement[\"crossOrigin\"];\n    image.referrerPolicy = referrerPolicy as HTMLImageElement[\"referrerPolicy\"];\n    image.src = src as HTMLImageElement[\"src\"];\n    if (srcSet) {\n      image.srcset = srcSet;\n    }\n\n    return () => {\n      active = false;\n    };\n  }, [crossOrigin, referrerPolicy, src, srcSet]);\n\n  return loaded;\n}\n"],"names":["useState","useEffect"],"mappings":";;;;;;AAEO,SAAS,SAAU,CAAA;AAAA,EACxB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,GAAA;AAAA,EACA,MAAA;AACF,CAAwC,EAAA;AACtC,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,eAAqC,KAAK,CAAA,CAAA;AAEtE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,CAAC,GAAO,IAAA,CAAC,MAAQ,EAAA;AACnB,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAEA,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAEf,IAAA,IAAI,MAAS,GAAA,IAAA,CAAA;AACb,IAAM,MAAA,KAAA,GAAQ,IAAI,KAAM,EAAA,CAAA;AACxB,IAAA,KAAA,CAAM,SAAS,MAAM;AACnB,MAAA,IAAI,CAAC,MAAQ,EAAA;AACX,QAAA,OAAA;AAAA,OACF;AACA,MAAA,SAAA,CAAU,QAAQ,CAAA,CAAA;AAAA,KACpB,CAAA;AACA,IAAA,KAAA,CAAM,UAAU,MAAM;AACpB,MAAA,IAAI,CAAC,MAAQ,EAAA;AACX,QAAA,OAAA;AAAA,OACF;AACA,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB,CAAA;AACA,IAAA,KAAA,CAAM,WAAc,GAAA,WAAA,CAAA;AACpB,IAAA,KAAA,CAAM,cAAiB,GAAA,cAAA,CAAA;AACvB,IAAA,KAAA,CAAM,GAAM,GAAA,GAAA,CAAA;AACZ,IAAA,IAAI,MAAQ,EAAA;AACV,MAAA,KAAA,CAAM,MAAS,GAAA,MAAA,CAAA;AAAA,KACjB;AAEA,IAAA,OAAO,MAAM;AACX,MAAS,MAAA,GAAA,KAAA,CAAA;AAAA,KACX,CAAA;AAAA,KACC,CAAC,WAAA,EAAa,cAAgB,EAAA,GAAA,EAAK,MAAM,CAAC,CAAA,CAAA;AAE7C,EAAO,OAAA,MAAA,CAAA;AACT;;;;"}

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

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

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

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

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var icons = require('@salt-ds/icons');
+var cx = require('classnames');
+var React = require('react');
+require('./Badge.css.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const withBaseName = core.makePrefixer("saltBadge");
+const Badge = React.forwardRef(function Badge2({
+  badgeContent = 0,
+  max = 1e3,
+  className,
+  children = /* @__PURE__ */ jsxRuntime.jsx(icons.MessageIcon, {}),
+  ...rest
+}, ref) {
+  var _a;
+  const badgeId = core.useId();
+  const childId = core.useId(
+    React.isValidElement(children) ? (_a = children.props) == null ? void 0 : _a.id : void 0
+  );
+  let badgeContentValue = badgeContent;
+  if (badgeContentValue > max) {
+    badgeContentValue = `${max}+`;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", {
+    className: cx__default["default"](withBaseName(), className),
+    ref,
+    role: "img",
+    "aria-labelledby": cx__default["default"](childId, badgeId),
+    ...rest,
+    children: [
+      children && React.isValidElement(children) ? React.cloneElement(children, { id: childId }) : children,
+      /* @__PURE__ */ jsxRuntime.jsx("span", {
+        id: badgeId,
+        className: cx__default["default"](withBaseName("badge")),
+        children: badgeContentValue
+      })
+    ]
+  });
+});
+
+exports.Badge = Badge;
+//# sourceMappingURL=Badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sources":["../src/badge/Badge.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { MessageIcon } from \"@salt-ds/icons\";\nimport cx from \"classnames\";\nimport {\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  isValidElement,\n  ReactElement,\n  ReactText,\n} from \"react\";\n\nimport \"./Badge.css\";\n\n/**\n * @example overriding density prop to fit a smaller denser space otherwise handled through context provider\n * <Badge density={'high'} />\n *\n * NOTE: Badge component no longer has AccessibleText prop\n *\n */\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * The number to display on the badge.\n   */\n  badgeContent?: string | number;\n  /**\n   * The badge will be added relative to this node. Renders the \"message\" icon by default.\n   */\n  children?: ReactElement<HTMLAttributes<HTMLElement>> | ReactText;\n  /**\n   * The className(s) of the component.\n   */\n  className?: string;\n  /**\n   * The max number to display on the badge.\n   */\n  max?: number;\n}\n\nconst withBaseName = makePrefixer(\"saltBadge\");\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  {\n    badgeContent = 0,\n    max = 1000,\n    className,\n    children = <MessageIcon />,\n    ...rest\n  },\n  ref\n) {\n  const badgeId = useId();\n  const childId = useId(\n    isValidElement<HTMLAttributes<HTMLElement>>(children)\n      ? children.props?.id\n      : undefined\n  );\n\n  let badgeContentValue = badgeContent;\n  if (badgeContentValue > max) {\n    badgeContentValue = `${max}+`;\n  }\n\n  return (\n    <span\n      className={cx(withBaseName(), className)}\n      ref={ref}\n      role=\"img\"\n      aria-labelledby={cx(childId, badgeId)}\n      {...rest}\n    >\n      {children && isValidElement<HTMLAttributes<HTMLElement>>(children)\n        ? cloneElement(children, { id: childId })\n        : children}\n      <span id={badgeId} className={cx(withBaseName(\"badge\"))}>\n        {badgeContentValue}\n      </span>\n    </span>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Badge","MessageIcon","useId","isValidElement","jsxs","cx","cloneElement","jsx"],"mappings":";;;;;;;;;;;;;;;AAyCA,MAAM,YAAA,GAAeA,kBAAa,WAAW,CAAA,CAAA;AAEhC,MAAA,KAAA,GAAQC,gBAAwC,CAAA,SAASC,MACpE,CAAA;AAAA,EACE,YAAe,GAAA,CAAA;AAAA,EACf,GAAM,GAAA,GAAA;AAAA,EACN,SAAA;AAAA,EACA,QAAA,kCAAYC,iBAAY,EAAA,EAAA,CAAA;AAAA,EACrB,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AApDF,EAAA,IAAA,EAAA,CAAA;AAqDE,EAAA,MAAM,UAAUC,UAAM,EAAA,CAAA;AACtB,EAAA,MAAM,OAAU,GAAAA,UAAA;AAAA,IACdC,qBAA4C,QAAQ,CAAA,GAAA,CAChD,EAAS,GAAA,QAAA,CAAA,KAAA,KAAT,mBAAgB,EAChB,GAAA,KAAA,CAAA;AAAA,GACN,CAAA;AAEA,EAAA,IAAI,iBAAoB,GAAA,YAAA,CAAA;AACxB,EAAA,IAAI,oBAAoB,GAAK,EAAA;AAC3B,IAAA,iBAAA,GAAoB,CAAG,EAAA,GAAA,CAAA,CAAA,CAAA,CAAA;AAAA,GACzB;AAEA,EAAA,uBACGC,eAAA,CAAA,MAAA,EAAA;AAAA,IACC,SAAW,EAAAC,sBAAA,CAAG,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACvC,GAAA;AAAA,IACA,IAAK,EAAA,KAAA;AAAA,IACL,iBAAA,EAAiBA,sBAAG,CAAA,OAAA,EAAS,OAAO,CAAA;AAAA,IACnC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAY,QAAA,IAAAF,oBAAA,CAA4C,QAAQ,CAC7D,GAAAG,kBAAA,CAAa,UAAU,EAAE,EAAA,EAAI,OAAQ,EAAC,CACtC,GAAA,QAAA;AAAA,sBACHC,cAAA,CAAA,MAAA,EAAA;AAAA,QAAK,EAAI,EAAA,OAAA;AAAA,QAAS,SAAW,EAAAF,sBAAA,CAAG,YAAa,CAAA,OAAO,CAAC,CAAA;AAAA,QACnD,QAAA,EAAA,iBAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/packages/lab/src/banner/Banner.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = "/* Styles applied to root component */\n.saltBanner {\n  --banner-background: var(--saltBanner-background, var(--salt-container-primary-background));\n  --banner-fontSize: var(--saltBanner-fontSize, var(--salt-text-fontSize));\n  --banner-lineHeight: var(--saltBanner-lineHeight, var(--salt-text-lineHeight));\n  --banner-padding: var(--saltBanner-padding, var(--salt-size-unit));\n  --banner-label-color: var(--saltBanner-label-color, var(--salt-text-primary-foreground));\n}\n\n.saltBanner {\n  background: var(--banner-background);\n  border-color: var(--saltBanner-borderColor, var(--banner-status-borderColor));\n  border-width: var(--saltBanner-borderWidth, var(--salt-size-border));\n  border-style: var(--saltBanner-borderStyle, var(--salt-container-borderStyle));\n  border-bottom: 2px solid var(--saltBanner-borderColor, var(--banner-status-borderColor));\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  padding: 0 var(--banner-padding);\n  position: relative;\n  /*min-height: 36px;*/\n  width: 100%;\n  align-items: center;\n}\n\n.saltBanner-closeButton {\n  margin: calc(var(--salt-size-unit) * 0.5) auto calc(var(--salt-size-unit) * 0.5) var(--salt-size-unit);\n}\n\n.saltBanner-label {\n  flex: 1 0;\n  padding: calc(var(--banner-padding) + 2px) 0 calc(var(--banner-padding));\n  font-weight: var(--salt-typography-fontWeight-semiBold);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  color: var(--banner-label-color);\n}\n\n/* Styles applied to status indicator */\n.saltBanner-icon {\n  color: var(--saltBanner-icon-color, var(--banner-status-icon-color));\n  fill: var(--saltBanner-icon-color, var(--banner-status-icon-color));\n  margin-right: var(--saltTooltip-icon-marginRight, 6px);\n  flex: 0 0 auto;\n}\n\n.saltBanner-link {\n  font-weight: var(--salt-typography-fontWeight-semiBold);\n  margin-left: 1ch;\n}\n\n/* Styles applied when state = \"info\" */\n.saltBanner-info {\n  --banner-status-borderColor: var(--salt-status-info-borderColor);\n  --banner-status-icon-color: var(--salt-status-info-foreground);\n}\n\n/* Styles applied when state = \"error\" */\n.saltBanner-error {\n  --banner-status-borderColor: var(--salt-status-error-borderColor);\n  --banner-status-icon-color: var(--salt-status-error-foreground);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltBanner-warning {\n  --banner-status-borderColor: var(--salt-status-warning-borderColor);\n  --banner-status-icon-color: var(--salt-status-warning-foreground);\n}\n\n/* Styles applied when state = \"success\" */\n.saltBanner-success {\n  --banner-status-borderColor: var(--salt-status-success-borderColor);\n  --banner-status-icon-color: var(--salt-status-success-foreground);\n}\n\n.saltBanner-emphasize.saltBanner-info {\n  --banner-background: var(--salt-status-info-background-emphasize);\n}\n\n.saltBanner-emphasize.saltBanner-error {\n  --banner-background: var(--salt-status-error-background-emphasize);\n}\n\n.saltBanner-emphasize.saltBanner-warning {\n  --banner-background: var(--salt-status-warning-background-emphasize);\n}\n\n.saltBanner-emphasize.saltBanner-success {\n  --banner-background: var(--salt-status-success-background-emphasize);\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=Banner.css.js.map

package/dist-cjs/packages/lab/src/banner/Banner.css.js.map

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

package/dist-cjs/packages/lab/src/banner/Banner.js

@@ -0,0 +1,113 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@salt-ds/core');
+var getInnerText = require('./internal/getInnerText.js');
+var icons = require('@salt-ds/icons');
+var cx = require('classnames');
+require('./Banner.css.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const withBaseName = core.makePrefixer("saltBanner");
+const Banner = React.forwardRef(function Banner2({
+  CloseButtonProps,
+  LinkProps: LinkProps2,
+  announcement: announcementProp,
+  children,
+  className,
+  closeRef,
+  disableAnnouncer = false,
+  emphasize = false,
+  onClose,
+  render,
+  status = "info",
+  ...rest
+}, ref) {
+  const { announce } = core.useAriaAnnouncer();
+  const [containerNode, setContainerNode] = React.useState(
+    null
+  );
+  const handleRef = core.useForkRef(setContainerNode, ref);
+  React.useEffect(() => {
+    if (!disableAnnouncer && containerNode) {
+      const announcement = announcementProp || getInnerText(containerNode);
+      announce(announcement, 250);
+    }
+  }, [announce, disableAnnouncer, containerNode, announcementProp]);
+  const getIconProps = ({ className: className2, ...restProps } = {}) => {
+    return {
+      className: cx__default["default"](withBaseName("icon"), status, className2),
+      ...restProps
+    };
+  };
+  const getLabelProps = ({ className: className2, ...restProps } = {}) => ({
+    className: cx__default["default"](withBaseName("label"), status, className2),
+    ...restProps
+  });
+  const getLinkProps = ({ className: className2, href, ...restProps } = {}) => ({
+    children: "Link",
+    className: cx__default["default"](withBaseName("link"), status, className2),
+    href,
+    ...restProps
+  });
+  const getStateAndPropsGetters = () => ({
+    Icon: (props) => /* @__PURE__ */ jsxRuntime.jsx(core.StatusIndicator, {
+      ...props,
+      status
+    }),
+    getIconProps,
+    getLabelProps,
+    getLinkProps
+  });
+  let contentElement;
+  if (!render) {
+    contentElement = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(core.StatusIndicator, {
+          ...getIconProps(),
+          status
+        }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", {
+          ...getLabelProps(),
+          children: [
+            children,
+            " ",
+            LinkProps2 && /* @__PURE__ */ jsxRuntime.jsx(core.Link, {
+              ...getLinkProps(LinkProps2)
+            })
+          ]
+        })
+      ]
+    });
+  } else {
+    contentElement = render(getStateAndPropsGetters());
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    className: cx__default["default"](withBaseName(), withBaseName(status), className, {
+      [withBaseName("emphasize")]: emphasize
+    }),
+    ref: handleRef,
+    ...rest,
+    children: [
+      contentElement,
+      onClose && /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
+        "aria-label": "close",
+        ...CloseButtonProps,
+        className: withBaseName("closeButton"),
+        onClick: onClose,
+        ref: closeRef,
+        variant: "secondary",
+        children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {})
+      })
+    ]
+  });
+});
+
+exports.Banner = Banner;
+//# sourceMappingURL=Banner.js.map

package/dist-cjs/packages/lab/src/banner/Banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.js","sources":["../src/banner/Banner.tsx"],"sourcesContent":["import {\n  ComponentType,\n  forwardRef,\n  HTMLAttributes,\n  MouseEvent,\n  ReactNode,\n  useEffect,\n  useState,\n  Ref,\n} from \"react\";\nimport {\n  Button,\n  ButtonProps,\n  Link,\n  LinkProps,\n  makePrefixer,\n  StatusIndicator,\n  useAriaAnnouncer,\n  useForkRef,\n  ValidationStatus,\n} from \"@salt-ds/core\";\n\nimport getInnerText from \"./internal/getInnerText\";\nimport { CloseIcon, IconProps } from \"@salt-ds/icons\";\nimport cx from \"classnames\";\n\nimport \"./Banner.css\";\n\nexport type BannerStatus = ValidationStatus;\n\nexport type LabelProps = { className?: string };\n\ntype StateAndPropsGetterFunction<TInjectedProps> = <T>(\n  props?: T\n) => TInjectedProps;\n\nexport interface GetStateAndPropGetters {\n  Icon: ComponentType<IconProps>;\n  getIconProps: StateAndPropsGetterFunction<IconProps>;\n  getLabelProps: StateAndPropsGetterFunction<LabelProps>;\n  getLinkProps: StateAndPropsGetterFunction<LinkProps>;\n}\n\nexport interface BannerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * THe props to be passed to the close button\n   */\n  CloseButtonProps?: ButtonProps;\n  /**\n   * Props to pass to Link, Link will not be rendered if this is undefined\n   */\n  LinkProps?: LinkProps;\n  /**\n   * Announcement message for screen reader 250ms after the banner is mounted.\n   */\n  announcement?: string;\n  /**\n   * close button ref\n   */\n  closeRef?: Ref<HTMLButtonElement>;\n  /**\n   * If true, the built-in ARIA announcer will be disabled\n   */\n  disableAnnouncer?: boolean;\n  /**\n   * Emphasize the styling by applying a background color: defaults to false\n   */\n  emphasize?: boolean;\n  /**\n   * onClose callback when the close icon is clicked, the dismiss button will not be rendered if this is\n   * not defined\n   */\n  onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * render props callback (if children callback not supplied)\n   */\n  render?: (props: GetStateAndPropGetters) => ReactNode;\n  /**\n   *  A string to determine the current state of the Banner\n   */\n  status?: BannerStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltBanner\");\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(\n  {\n    CloseButtonProps,\n    LinkProps,\n    announcement: announcementProp,\n    children,\n    className,\n    closeRef,\n    disableAnnouncer = false,\n    emphasize = false,\n    onClose,\n    render,\n    status = \"info\",\n    ...rest\n  },\n  ref\n) {\n  const { announce } = useAriaAnnouncer();\n\n  const [containerNode, setContainerNode] = useState<HTMLDivElement | null>(\n    null\n  );\n\n  const handleRef = useForkRef<HTMLDivElement>(setContainerNode, ref);\n\n  useEffect(() => {\n    if (!disableAnnouncer && containerNode) {\n      const announcement = announcementProp || getInnerText(containerNode);\n      announce(announcement, 250);\n    }\n  }, [announce, disableAnnouncer, containerNode, announcementProp]);\n\n  const getIconProps = ({ className, ...restProps }: IconProps = {}) => {\n    return {\n      className: cx(withBaseName(\"icon\"), status, className),\n      ...restProps,\n    };\n  };\n\n  const getLabelProps = ({ className, ...restProps }: LabelProps = {}) => ({\n    className: cx(withBaseName(\"label\"), status, className),\n    ...restProps,\n  });\n\n  const getLinkProps = ({ className, href, ...restProps }: LinkProps = {}) => ({\n    children: \"Link\",\n    className: cx(withBaseName(\"link\"), status, className),\n    href,\n    ...restProps,\n  });\n\n  const getStateAndPropsGetters = (): GetStateAndPropGetters => ({\n    Icon: (props) => <StatusIndicator {...props} status={status} />,\n    getIconProps,\n    getLabelProps,\n    getLinkProps,\n  });\n\n  let contentElement;\n  if (!render) {\n    contentElement = (\n      <>\n        <StatusIndicator {...getIconProps()} status={status}></StatusIndicator>\n        <span {...getLabelProps()}>\n          {children} {LinkProps && <Link {...getLinkProps(LinkProps)} />}\n        </span>\n      </>\n    );\n  } else {\n    contentElement = render(getStateAndPropsGetters());\n  }\n\n  return (\n    <div\n      className={cx(withBaseName(), withBaseName(status), className, {\n        [withBaseName(\"emphasize\")]: emphasize,\n      })}\n      ref={handleRef}\n      {...rest}\n    >\n      {contentElement}\n      {onClose && (\n        <Button\n          aria-label=\"close\"\n          {...CloseButtonProps}\n          className={withBaseName(\"closeButton\")}\n          onClick={onClose}\n          ref={closeRef}\n          variant=\"secondary\"\n        >\n          <CloseIcon />\n        </Button>\n      )}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Banner","LinkProps","useAriaAnnouncer","useState","useForkRef","useEffect","className","cx","jsx","StatusIndicator","jsxs","Fragment","Link","Button","CloseIcon"],"mappings":";;;;;;;;;;;;;;;;AAmFA,MAAM,YAAA,GAAeA,kBAAa,YAAY,CAAA,CAAA;AAEjC,MAAA,MAAA,GAASC,gBAAwC,CAAA,SAASC,OACrE,CAAA;AAAA,EACE,gBAAA;AAAA,EACA,SAAAC,EAAAA,UAAAA;AAAA,EACA,YAAc,EAAA,gBAAA;AAAA,EACd,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,gBAAmB,GAAA,KAAA;AAAA,EACnB,SAAY,GAAA,KAAA;AAAA,EACZ,OAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAS,GAAA,MAAA;AAAA,EACN,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,qBAAiB,EAAA,CAAA;AAEtC,EAAM,MAAA,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAAC,cAAA;AAAA,IACxC,IAAA;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,SAAA,GAAYC,eAA2B,CAAA,gBAAA,EAAkB,GAAG,CAAA,CAAA;AAElE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,CAAC,oBAAoB,aAAe,EAAA;AACtC,MAAM,MAAA,YAAA,GAAe,gBAAoB,IAAA,YAAA,CAAa,aAAa,CAAA,CAAA;AACnE,MAAA,QAAA,CAAS,cAAc,GAAG,CAAA,CAAA;AAAA,KAC5B;AAAA,KACC,CAAC,QAAA,EAAU,gBAAkB,EAAA,aAAA,EAAe,gBAAgB,CAAC,CAAA,CAAA;AAEhE,EAAM,MAAA,YAAA,GAAe,CAAC,EAAE,SAAA,EAAAC,eAAc,SAAU,EAAA,GAAe,EAAO,KAAA;AACpE,IAAO,OAAA;AAAA,MACL,WAAWC,sBAAG,CAAA,YAAA,CAAa,MAAM,CAAA,EAAG,QAAQD,UAAS,CAAA;AAAA,MACrD,GAAG,SAAA;AAAA,KACL,CAAA;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,EAAE,SAAA,EAAAA,eAAc,SAAU,EAAA,GAAgB,EAAQ,MAAA;AAAA,IACvE,WAAWC,sBAAG,CAAA,YAAA,CAAa,OAAO,CAAA,EAAG,QAAQD,UAAS,CAAA;AAAA,IACtD,GAAG,SAAA;AAAA,GACL,CAAA,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,EAAE,SAAA,EAAAA,YAAW,IAAS,EAAA,GAAA,SAAA,EAAyB,GAAA,EAAQ,MAAA;AAAA,IAC3E,QAAU,EAAA,MAAA;AAAA,IACV,WAAWC,sBAAG,CAAA,YAAA,CAAa,MAAM,CAAA,EAAG,QAAQD,UAAS,CAAA;AAAA,IACrD,IAAA;AAAA,IACA,GAAG,SAAA;AAAA,GACL,CAAA,CAAA;AAEA,EAAA,MAAM,0BAA0B,OAA+B;AAAA,IAC7D,IAAA,EAAM,CAAC,KAAA,qBAAWE,cAAA,CAAAC,oBAAA,EAAA;AAAA,MAAiB,GAAG,KAAA;AAAA,MAAO,MAAA;AAAA,KAAgB,CAAA;AAAA,IAC7D,YAAA;AAAA,IACA,aAAA;AAAA,IACA,YAAA;AAAA,GACF,CAAA,CAAA;AAEA,EAAI,IAAA,cAAA,CAAA;AACJ,EAAA,IAAI,CAAC,MAAQ,EAAA;AACX,IACE,cAAA,mBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAACH,cAAA,CAAAC,oBAAA,EAAA;AAAA,UAAiB,GAAG,YAAa,EAAA;AAAA,UAAG,MAAA;AAAA,SAAgB,CAAA;AAAA,wBACpDC,eAAA,CAAA,MAAA,EAAA;AAAA,UAAM,GAAG,aAAc,EAAA;AAAA,UACrB,QAAA,EAAA;AAAA,YAAA,QAAA;AAAA,YAAS,GAAA;AAAA,YAAET,8BAAcO,cAAA,CAAAI,SAAA,EAAA;AAAA,cAAM,GAAG,aAAaX,UAAS,CAAA;AAAA,aAAG,CAAA;AAAA,WAAA;AAAA,SAC9D,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEG,MAAA;AACL,IAAiB,cAAA,GAAA,MAAA,CAAO,yBAAyB,CAAA,CAAA;AAAA,GACnD;AAEA,EAAA,uBACGS,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,WAAWH,sBAAG,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAW,EAAA;AAAA,MAC7D,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,SAAA;AAAA,KAC9B,CAAA;AAAA,IACD,GAAK,EAAA,SAAA;AAAA,IACJ,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,cAAA;AAAA,MACA,2BACEC,cAAA,CAAAK,WAAA,EAAA;AAAA,QACC,YAAW,EAAA,OAAA;AAAA,QACV,GAAG,gBAAA;AAAA,QACJ,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,QACrC,OAAS,EAAA,OAAA;AAAA,QACT,GAAK,EAAA,QAAA;AAAA,QACL,OAAQ,EAAA,WAAA;AAAA,QAER,yCAACC,eAAU,EAAA,EAAA,CAAA;AAAA,OACb,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/packages/lab/src/banner/internal/getInnerText.js

@@ -0,0 +1,12 @@
+'use strict';
+
+function getInnerText(element) {
+  let innerText = "";
+  if (element) {
+    innerText = element.innerText;
+  }
+  return innerText.replace(/(\r?\n)/gm, " ").trim();
+}
+
+module.exports = getInnerText;
+//# sourceMappingURL=getInnerText.js.map

package/dist-cjs/packages/lab/src/banner/internal/getInnerText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getInnerText.js","sources":["../src/banner/internal/getInnerText.ts"],"sourcesContent":["export default function getInnerText(element: HTMLElement): string {\n  let innerText = \"\";\n  if (element) {\n    innerText = element.innerText;\n  }\n  return innerText.replace(/(\\r?\\n)/gm, \" \").trim();\n}\n"],"names":[],"mappings":";;AAAA,SAAwB,aAAa,OAA8B,EAAA;AACjE,EAAA,IAAI,SAAY,GAAA,EAAA,CAAA;AAChB,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,SAAA,GAAY,OAAQ,CAAA,SAAA,CAAA;AAAA,GACtB;AACA,EAAA,OAAO,SAAU,CAAA,OAAA,CAAQ,WAAa,EAAA,GAAG,EAAE,IAAK,EAAA,CAAA;AAClD;;;;"}

package/dist-cjs/packages/lab/src/breadcrumbs/Breadcrumb.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".saltBreadcrumb {\n  --breadcrumbs-crumb-color: var(--saltBreadcrumbs-crumb-color, var(--salt-actionable-primary-foreground));\n  --breadcrumbs-crumb-color-hover: var(--saltBreadcrumbs-crumb-color-hover, var(--salt-actionable-primary-foreground-hover));\n  --breadcrumbs-crumb-color-active: var(--saltBreadcrumbs-crumb-color-active, var(--salt-actionable-primary-foreground-active));\n  --breadcrumbs-crumb-icon-color: var(--saltBreadcrumbs-crumb-icon-color, var(--breadcrumbs-crumb-color));\n  --breadcrumbs-crumb-marginLeft: 0px;\n}\n\n.saltBreadcrumb {\n  padding: 0px;\n}\n\n.saltBreadcrumb-regular {\n  display: flex;\n  gap: calc(var(--salt-size-unit) / 2);\n  align-items: center;\n  color: var(--breadcrumbs-crumb-color);\n}\n\n.saltBreadcrumb-regular:visited {\n  color: currentColor;\n}\n\n.saltBreadcrumb-regular:visited .saltBreadcrumb-icon {\n  color: currentColor;\n}\n\n.saltBreadcrumb-regular:hover {\n  color: var(--breadcrumbs-crumb-color-hover);\n}\n\n.saltBreadcrumb-regular:hover .saltBreadcrumb-icon {\n  color: var(--breadcrumbs-crumb-color-hover);\n}\n\n.saltBreadcrumb-regular:active {\n  color: var(--breadcrumbs-crumb-color-active);\n}\n\n.saltBreadcrumb-regular:active .saltBreadcrumb-icon {\n  color: var(--breadcrumbs-crumb-color-active);\n}\n\n.saltBreadcrumb-currentLevel {\n  color: var(--breadcrumbs-crumb-color);\n}\n\n.saltBreadcrumb-icon {\n  color: var(--breadcrumbs-crumb-icon-color);\n  margin-left: var(--saltBreadcrumbs-crumb-marginLeft, var(--breadcrumbs-crumb-marginLeft));\n}\n\n.saltBreadcrumb-justifyContentCenter {\n  justify-content: center;\n}\n\n.saltBreadcrumb-text {\n  text-decoration: underline;\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=Breadcrumb.css.js.map

package/dist-cjs/packages/lab/src/breadcrumbs/Breadcrumb.css.js.map

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

package/dist-cjs/packages/lab/src/breadcrumbs/Breadcrumb.js

@@ -0,0 +1,86 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var cx = require('classnames');
+var React = require('react');
+var BreadcrumbsContext = require('./internal/BreadcrumbsContext.js');
+require('./Breadcrumb.css.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const withBaseName = core.makePrefixer("saltBreadcrumb");
+const Breadcrumb = React.forwardRef(
+  function Breadcrumb2({
+    children,
+    ContainerProps = {},
+    tooltipText,
+    tooltipProps,
+    isCurrentLevel,
+    onItemClick,
+    overflowLabel,
+    maxWidth,
+    Icon,
+    minWidth,
+    className,
+    ...props
+  }, ref) {
+    const { itemsMaxWidth, itemsMinWidth, liClass } = BreadcrumbsContext.useBreadcrumbsContext();
+    const hasChildren = React.Children.count(children) !== 0;
+    const hasOnlyIcon = Icon && !hasChildren;
+    const getDefaultBreadcrumb = () => isCurrentLevel ? /* @__PURE__ */ jsxRuntime.jsx(core.Text, {
+      maxRows: 1,
+      className: cx__default["default"](
+        withBaseName(),
+        className,
+        withBaseName("currentLevel")
+      ),
+      styleAs: "label",
+      children
+    }) : /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: cx__default["default"](
+        withBaseName(),
+        className,
+        {
+          [withBaseName("justifyContentCenter")]: hasOnlyIcon
+        },
+        withBaseName("regular")
+      ),
+      children: [
+        Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, {
+          className: withBaseName("icon")
+        }),
+        hasChildren && /* @__PURE__ */ jsxRuntime.jsx(core.Link, {
+          maxRows: 1,
+          styleAs: "label",
+          ...props,
+          children
+        })
+      ]
+    });
+    const content = getDefaultBreadcrumb();
+    const {
+      style: containerStyle,
+      className: containerClassName,
+      ...containerPropsRest
+    } = ContainerProps;
+    return /* @__PURE__ */ jsxRuntime.jsx("li", {
+      ref,
+      style: {
+        ...containerStyle,
+        minWidth: minWidth != null ? minWidth : itemsMinWidth,
+        maxWidth: maxWidth != null ? maxWidth : itemsMaxWidth
+      },
+      className: cx__default["default"](liClass, containerClassName),
+      ...containerPropsRest,
+      children: content
+    });
+  }
+);
+
+exports.Breadcrumb = Breadcrumb;
+//# sourceMappingURL=Breadcrumb.js.map

package/dist-cjs/packages/lab/src/breadcrumbs/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","sources":["../src/breadcrumbs/Breadcrumb.tsx"],"sourcesContent":["import { Link, makePrefixer, Text } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport classnames from \"classnames\";\nimport { Children, forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { useBreadcrumbsContext } from \"./internal/BreadcrumbsContext\";\nimport { TooltipProps } from \"../tooltip\";\n\nimport \"./Breadcrumb.css\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumb\");\n\nexport interface BreadcrumbProps {\n  children?: ReactNode;\n  ContainerProps?: HTMLAttributes<HTMLLIElement>;\n  tooltipText?: string;\n  tooltipProps?: TooltipProps;\n  className?: string;\n  href?: string;\n  isCurrentLevel?: boolean;\n  maxWidth?: number;\n  minWidth?: number;\n  onItemClick?: (item: any, event: any) => void; // TODO\n  overflowLabel?: string;\n  Icon?: React.ComponentType<IconProps>;\n}\n\nexport const Breadcrumb = forwardRef<HTMLLIElement, BreadcrumbProps>(\n  function Breadcrumb(\n    {\n      children,\n      ContainerProps = {},\n      tooltipText,\n      tooltipProps,\n      isCurrentLevel,\n      onItemClick,\n      overflowLabel,\n      maxWidth,\n      Icon,\n      minWidth,\n      className,\n      ...props\n    },\n    ref\n  ) {\n    const { itemsMaxWidth, itemsMinWidth, liClass } = useBreadcrumbsContext();\n\n    const hasChildren = Children.count(children) !== 0;\n    const hasOnlyIcon = Icon && !hasChildren;\n\n    const getDefaultBreadcrumb = () =>\n      isCurrentLevel ? (\n        <Text\n          maxRows={1}\n          className={classnames(\n            withBaseName(),\n            className,\n            withBaseName(\"currentLevel\")\n          )}\n          styleAs=\"label\"\n        >\n          {children}\n        </Text>\n      ) : (\n        <div\n          className={classnames(\n            withBaseName(),\n            className,\n            {\n              [withBaseName(\"justifyContentCenter\")]: hasOnlyIcon,\n            },\n            withBaseName(\"regular\")\n          )}\n        >\n          {Icon && <Icon className={withBaseName(\"icon\")} />}\n          {hasChildren && (\n            <Link maxRows={1} styleAs=\"label\" {...props}>\n              {children}\n            </Link>\n          )}\n        </div>\n      );\n\n    const content = getDefaultBreadcrumb();\n\n    const {\n      style: containerStyle,\n      className: containerClassName,\n      ...containerPropsRest\n    } = ContainerProps;\n\n    return (\n      <li\n        ref={ref}\n        style={{\n          ...containerStyle,\n          minWidth: minWidth ?? itemsMinWidth,\n          maxWidth: maxWidth ?? itemsMaxWidth,\n        }}\n        className={classnames(liClass, containerClassName)}\n        {...containerPropsRest}\n      >\n        {content}\n      </li>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","Breadcrumb","useBreadcrumbsContext","Children","jsx","Text","classnames","jsxs","Link"],"mappings":";;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA,CAAA;AAiB3C,MAAM,UAAa,GAAAC,gBAAA;AAAA,EACxB,SAASC,WACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,iBAAiB,EAAC;AAAA,IAClB,WAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,EAAE,aAAA,EAAe,aAAe,EAAA,OAAA,KAAYC,wCAAsB,EAAA,CAAA;AAExE,IAAA,MAAM,WAAc,GAAAC,cAAA,CAAS,KAAM,CAAA,QAAQ,CAAM,KAAA,CAAA,CAAA;AACjD,IAAM,MAAA,WAAA,GAAc,QAAQ,CAAC,WAAA,CAAA;AAE7B,IAAM,MAAA,oBAAA,GAAuB,MAC3B,cAAA,mBACGC,cAAA,CAAAC,SAAA,EAAA;AAAA,MACC,OAAS,EAAA,CAAA;AAAA,MACT,SAAW,EAAAC,sBAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,SAAA;AAAA,QACA,aAAa,cAAc,CAAA;AAAA,OAC7B;AAAA,MACA,OAAQ,EAAA,OAAA;AAAA,MAEP,QAAA;AAAA,KACH,oBAECC,eAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAAD,sBAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,SAAA;AAAA,QACA;AAAA,UACE,CAAC,YAAa,CAAA,sBAAsB,CAAI,GAAA,WAAA;AAAA,SAC1C;AAAA,QACA,aAAa,SAAS,CAAA;AAAA,OACxB;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA,oBAASF,cAAA,CAAA,IAAA,EAAA;AAAA,UAAK,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,SAAG,CAAA;AAAA,QAC/C,+BACEA,cAAA,CAAAI,SAAA,EAAA;AAAA,UAAK,OAAS,EAAA,CAAA;AAAA,UAAG,OAAQ,EAAA,OAAA;AAAA,UAAS,GAAG,KAAA;AAAA,UACnC,QAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAGJ,IAAA,MAAM,UAAU,oBAAqB,EAAA,CAAA;AAErC,IAAM,MAAA;AAAA,MACJ,KAAO,EAAA,cAAA;AAAA,MACP,SAAW,EAAA,kBAAA;AAAA,MACR,GAAA,kBAAA;AAAA,KACD,GAAA,cAAA,CAAA;AAEJ,IAAA,uBACGJ,cAAA,CAAA,IAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACL,GAAG,cAAA;AAAA,QACH,UAAU,QAAY,IAAA,IAAA,GAAA,QAAA,GAAA,aAAA;AAAA,QACtB,UAAU,QAAY,IAAA,IAAA,GAAA,QAAA,GAAA,aAAA;AAAA,OACxB;AAAA,MACA,SAAA,EAAWE,sBAAW,CAAA,OAAA,EAAS,kBAAkB,CAAA;AAAA,MAChD,GAAG,kBAAA;AAAA,MAEH,QAAA,EAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/packages/lab/src/breadcrumbs/Breadcrumbs.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".saltBreadcrumbs-ol {\n  --breadcrumbs-ol-gap: var(--salt-size-unit);\n\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 0;\n  margin: 0;\n  gap: var(--breadcrumbs-ol-gap);\n}\n\n.saltBreadcrumbs-li {\n  --breadcrumbs-li-marginRight: 0px;\n  --breadcrumbs-li-padding: 0px;\n\n  flex: 0 1 auto;\n  list-style: none;\n  margin-right: var(--breadcrumbs-li-marginRight);\n  padding: var(--breadcrumbs-li-padding);\n}\n\n.saltBreadcrumbs-separator {\n  --breadcrumbs-separator-marginRight: 0px;\n\n  display: flex;\n  margin-right: var(--breadcrumbs-separator-marginRight);\n  user-select: none;\n}\n\n.saltBreadcrumbs-ol-wrap {\n  flex-wrap: wrap;\n}\n\n.saltBreadcrumbs-ol-wrap .saltBreadcrumbs-li,\n.saltBreadcrumbs-ol-wrap .saltBreadcrumbs-separator {\n  --breadcrumbs-ol-wrap-li-marginBottom: 0px;\n\n  margin-bottom: var(--breadcrumbs-ol-wrap-li-marginBottom);\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=Breadcrumbs.css.js.map

package/dist-cjs/packages/lab/src/breadcrumbs/Breadcrumbs.css.js.map

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