@salt-ds/core 1.2.0 → 1.4.0

package/dist-cjs/packages/core/src/aria-announcer/AriaAnnouncerProvider.js

@@ -17,19 +17,19 @@ function AriaAnnouncerProvider({
   const mountedRef = React.useRef(true);
   const announceAll = React.useCallback(() => {
     isAnnouncingRef.current = true;
-    if (announcementsRef.current.length && mountedRef.current) {
+    if (mountedRef.current) {
       setCurrentAnnouncement("");
       requestAnimationFrame(() => {
-        if (mountedRef.current) {
+        if (mountedRef.current && announcementsRef.current.length) {
           const announcement = announcementsRef.current.shift();
           setCurrentAnnouncement(announcement);
           setTimeout(() => {
             announceAll();
           }, ARIA_ANNOUNCE_DELAY);
+        } else {
+          isAnnouncingRef.current = false;
         }
       });
-    } else {
-      isAnnouncingRef.current = false;
     }
   }, []);
   const announce = React.useCallback(
@@ -41,12 +41,12 @@ function AriaAnnouncerProvider({
     },
     [announceAll]
   );
-  React.useEffect(
-    () => () => {
+  React.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
       mountedRef.current = false;
-    },
-    []
-  );
+    };
+  }, []);
   const value = React.useMemo(() => ({ announce }), [announce]);
   return /* @__PURE__ */ jsxRuntime.jsxs(AriaAnnouncerContext.AriaAnnouncerContext.Provider, {
     value,

package/dist-cjs/packages/core/src/aria-announcer/AriaAnnouncerProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"AriaAnnouncerProvider.js","sources":["../src/aria-announcer/AriaAnnouncerProvider.tsx"],"sourcesContent":["import {\n  useState,\n  useCallback,\n  useRef,\n  useMemo,\n  useEffect,\n  CSSProperties,\n  ReactNode,\n} from \"react\";\n\nimport { AriaAnnouncerContext } from \"./AriaAnnouncerContext\";\n\nexport const ARIA_ANNOUNCE_DELAY = 150;\n\nexport interface AriaAnnouncerProviderProps {\n  children?: ReactNode;\n  /**\n   * Style overrides for the aria-live element\n   */\n  style?: CSSProperties;\n}\n\nexport function AriaAnnouncerProvider({\n  children,\n  style,\n}: AriaAnnouncerProviderProps) {\n  // announcement that gets rendered inside aria-live and read out by screen readers\n  const [currentAnnouncement, setCurrentAnnouncement] = useState(\"\");\n  // queue that stores all the requested announcements\n  const announcementsRef = useRef<string[]>([]);\n  // we use this variable to decide whether to start the announcement queue if one is not already in progress\n  const isAnnouncingRef = useRef(false);\n  // we need to keep track of the state of the component mount since all the async function calls\n  // might trigger a setState after a component has been unmounted\n  const mountedRef = useRef(true);\n\n  // announceAll will get called recursively until all the announcements are rendered and cleared from the queue\n  const announceAll = useCallback(() => {\n    isAnnouncingRef.current = true;\n    if (announcementsRef.current.length && mountedRef.current) {\n      setCurrentAnnouncement(\"\");\n      requestAnimationFrame(() => {\n        if (mountedRef.current) {\n          const announcement = announcementsRef.current.shift() as string;\n          setCurrentAnnouncement(announcement);\n          setTimeout(() => {\n            announceAll();\n          }, ARIA_ANNOUNCE_DELAY);\n        }\n      });\n    } else {\n      isAnnouncingRef.current = false;\n    }\n  }, []);\n\n  const announce = useCallback(\n    (announcement: string) => {\n      announcementsRef.current.push(announcement);\n      if (!isAnnouncingRef.current) {\n        announceAll();\n      }\n    },\n    [announceAll]\n  );\n\n  useEffect(\n    () => () => {\n      mountedRef.current = false;\n    },\n    []\n  );\n\n  const value = useMemo(() => ({ announce }), [announce]);\n  return (\n    <AriaAnnouncerContext.Provider value={value}>\n      {children}\n      <div\n        aria-atomic=\"true\"\n        aria-live=\"assertive\"\n        // hidden styling based on https://tailwindcss.com/docs/screen-readers\n        style={{\n          position: \"absolute\",\n          height: 1,\n          width: 1,\n          padding: 0,\n          margin: -1,\n          overflow: \"hidden\",\n          clip: \"rect(0, 0, 0, 0)\",\n          whiteSpace: \"nowrap\",\n          borderWidth: 0,\n          ...style,\n        }}\n      >\n        {currentAnnouncement}\n      </div>\n    </AriaAnnouncerContext.Provider>\n  );\n}\n"],"names":["useState","useRef","useCallback","useEffect","useMemo","jsxs","AriaAnnouncerContext","jsx"],"mappings":";;;;;;;;AAYO,MAAM,mBAAsB,GAAA,IAAA;AAU5B,SAAS,qBAAsB,CAAA;AAAA,EACpC,QAAA;AAAA,EACA,KAAA;AACF,CAA+B,EAAA;AAE7B,EAAA,MAAM,CAAC,mBAAA,EAAqB,sBAAsB,CAAA,GAAIA,eAAS,EAAE,CAAA,CAAA;AAEjE,EAAM,MAAA,gBAAA,GAAmBC,YAAiB,CAAA,EAAE,CAAA,CAAA;AAE5C,EAAM,MAAA,eAAA,GAAkBA,aAAO,KAAK,CAAA,CAAA;AAGpC,EAAM,MAAA,UAAA,GAAaA,aAAO,IAAI,CAAA,CAAA;AAG9B,EAAM,MAAA,WAAA,GAAcC,kBAAY,MAAM;AACpC,IAAA,eAAA,CAAgB,OAAU,GAAA,IAAA,CAAA;AAC1B,IAAA,IAAI,gBAAiB,CAAA,OAAA,CAAQ,MAAU,IAAA,UAAA,CAAW,OAAS,EAAA;AACzD,MAAA,sBAAA,CAAuB,EAAE,CAAA,CAAA;AACzB,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,IAAI,WAAW,OAAS,EAAA;AACtB,UAAM,MAAA,YAAA,GAAe,gBAAiB,CAAA,OAAA,CAAQ,KAAM,EAAA,CAAA;AACpD,UAAA,sBAAA,CAAuB,YAAY,CAAA,CAAA;AACnC,UAAA,UAAA,CAAW,MAAM;AACf,YAAY,WAAA,EAAA,CAAA;AAAA,aACX,mBAAmB,CAAA,CAAA;AAAA,SACxB;AAAA,OACD,CAAA,CAAA;AAAA,KACI,MAAA;AACL,MAAA,eAAA,CAAgB,OAAU,GAAA,KAAA,CAAA;AAAA,KAC5B;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,QAAW,GAAAA,iBAAA;AAAA,IACf,CAAC,YAAyB,KAAA;AACxB,MAAiB,gBAAA,CAAA,OAAA,CAAQ,KAAK,YAAY,CAAA,CAAA;AAC1C,MAAI,IAAA,CAAC,gBAAgB,OAAS,EAAA;AAC5B,QAAY,WAAA,EAAA,CAAA;AAAA,OACd;AAAA,KACF;AAAA,IACA,CAAC,WAAW,CAAA;AAAA,GACd,CAAA;AAEA,EAAAC,eAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA,KACvB;AAAA,IACA,EAAC;AAAA,GACH,CAAA;AAEA,EAAM,MAAA,KAAA,GAAQC,cAAQ,OAAO,EAAE,UAAa,CAAA,EAAA,CAAC,QAAQ,CAAC,CAAA,CAAA;AACtD,EACE,uBAAAC,eAAA,CAACC,0CAAqB,QAArB,EAAA;AAAA,IAA8B,KAAA;AAAA,IAC5B,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACAC,cAAA,CAAA,KAAA,EAAA;AAAA,QACC,aAAY,EAAA,MAAA;AAAA,QACZ,WAAU,EAAA,WAAA;AAAA,QAEV,KAAO,EAAA;AAAA,UACL,QAAU,EAAA,UAAA;AAAA,UACV,MAAQ,EAAA,CAAA;AAAA,UACR,KAAO,EAAA,CAAA;AAAA,UACP,OAAS,EAAA,CAAA;AAAA,UACT,MAAQ,EAAA,CAAA,CAAA;AAAA,UACR,QAAU,EAAA,QAAA;AAAA,UACV,IAAM,EAAA,kBAAA;AAAA,UACN,UAAY,EAAA,QAAA;AAAA,UACZ,WAAa,EAAA,CAAA;AAAA,UACb,GAAG,KAAA;AAAA,SACL;AAAA,QAEC,QAAA,EAAA,mBAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;;"}
+{"version":3,"file":"AriaAnnouncerProvider.js","sources":["../src/aria-announcer/AriaAnnouncerProvider.tsx"],"sourcesContent":["import {\n  CSSProperties,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { AriaAnnouncerContext } from \"./AriaAnnouncerContext\";\n\nexport const ARIA_ANNOUNCE_DELAY = 150;\n\nexport interface AriaAnnouncerProviderProps {\n  children?: ReactNode;\n  /**\n   * Style overrides for the aria-live element\n   */\n  style?: CSSProperties;\n}\n\nexport function AriaAnnouncerProvider({\n  children,\n  style,\n}: AriaAnnouncerProviderProps) {\n  // announcement that gets rendered inside aria-live and read out by screen readers\n  const [currentAnnouncement, setCurrentAnnouncement] = useState(\"\");\n  // queue that stores all the requested announcements\n  const announcementsRef = useRef<string[]>([]);\n  // we use this variable to decide whether to start the announcement queue if one is not already in progress\n  const isAnnouncingRef = useRef(false);\n  // we need to keep track of the state of the component mount since all the async function calls\n  // might trigger a setState after a component has been unmounted\n  const mountedRef = useRef(true);\n\n  // announceAll will get called recursively until all the announcements are rendered and cleared from the queue\n  const announceAll = useCallback(() => {\n    isAnnouncingRef.current = true;\n    if (mountedRef.current) {\n      setCurrentAnnouncement(\"\");\n      requestAnimationFrame(() => {\n        if (mountedRef.current && announcementsRef.current.length) {\n          const announcement = announcementsRef.current.shift() as string;\n          setCurrentAnnouncement(announcement);\n          setTimeout(() => {\n            announceAll();\n          }, ARIA_ANNOUNCE_DELAY);\n        } else {\n          isAnnouncingRef.current = false;\n        }\n      });\n    }\n  }, []);\n\n  const announce = useCallback(\n    (announcement: string) => {\n      announcementsRef.current.push(announcement);\n      if (!isAnnouncingRef.current) {\n        announceAll();\n      }\n    },\n    [announceAll]\n  );\n\n  useEffect(() => {\n    mountedRef.current = true;\n    return () => {\n      mountedRef.current = false;\n    };\n  }, []);\n\n  const value = useMemo(() => ({ announce }), [announce]);\n  return (\n    <AriaAnnouncerContext.Provider value={value}>\n      {children}\n      <div\n        aria-atomic=\"true\"\n        aria-live=\"assertive\"\n        // hidden styling based on https://tailwindcss.com/docs/screen-readers\n        style={{\n          position: \"absolute\",\n          height: 1,\n          width: 1,\n          padding: 0,\n          margin: -1,\n          overflow: \"hidden\",\n          clip: \"rect(0, 0, 0, 0)\",\n          whiteSpace: \"nowrap\",\n          borderWidth: 0,\n          ...style,\n        }}\n      >\n        {currentAnnouncement}\n      </div>\n    </AriaAnnouncerContext.Provider>\n  );\n}\n"],"names":["useState","useRef","useCallback","useEffect","useMemo","jsxs","AriaAnnouncerContext","jsx"],"mappings":";;;;;;;;AAYO,MAAM,mBAAsB,GAAA,IAAA;AAU5B,SAAS,qBAAsB,CAAA;AAAA,EACpC,QAAA;AAAA,EACA,KAAA;AACF,CAA+B,EAAA;AAE7B,EAAA,MAAM,CAAC,mBAAA,EAAqB,sBAAsB,CAAA,GAAIA,eAAS,EAAE,CAAA,CAAA;AAEjE,EAAM,MAAA,gBAAA,GAAmBC,YAAiB,CAAA,EAAE,CAAA,CAAA;AAE5C,EAAM,MAAA,eAAA,GAAkBA,aAAO,KAAK,CAAA,CAAA;AAGpC,EAAM,MAAA,UAAA,GAAaA,aAAO,IAAI,CAAA,CAAA;AAG9B,EAAM,MAAA,WAAA,GAAcC,kBAAY,MAAM;AACpC,IAAA,eAAA,CAAgB,OAAU,GAAA,IAAA,CAAA;AAC1B,IAAA,IAAI,WAAW,OAAS,EAAA;AACtB,MAAA,sBAAA,CAAuB,EAAE,CAAA,CAAA;AACzB,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,IAAI,UAAW,CAAA,OAAA,IAAW,gBAAiB,CAAA,OAAA,CAAQ,MAAQ,EAAA;AACzD,UAAM,MAAA,YAAA,GAAe,gBAAiB,CAAA,OAAA,CAAQ,KAAM,EAAA,CAAA;AACpD,UAAA,sBAAA,CAAuB,YAAY,CAAA,CAAA;AACnC,UAAA,UAAA,CAAW,MAAM;AACf,YAAY,WAAA,EAAA,CAAA;AAAA,aACX,mBAAmB,CAAA,CAAA;AAAA,SACjB,MAAA;AACL,UAAA,eAAA,CAAgB,OAAU,GAAA,KAAA,CAAA;AAAA,SAC5B;AAAA,OACD,CAAA,CAAA;AAAA,KACH;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,QAAW,GAAAA,iBAAA;AAAA,IACf,CAAC,YAAyB,KAAA;AACxB,MAAiB,gBAAA,CAAA,OAAA,CAAQ,KAAK,YAAY,CAAA,CAAA;AAC1C,MAAI,IAAA,CAAC,gBAAgB,OAAS,EAAA;AAC5B,QAAY,WAAA,EAAA,CAAA;AAAA,OACd;AAAA,KACF;AAAA,IACA,CAAC,WAAW,CAAA;AAAA,GACd,CAAA;AAEA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,OAAU,GAAA,IAAA,CAAA;AACrB,IAAA,OAAO,MAAM;AACX,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA,KACvB,CAAA;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,KAAA,GAAQC,cAAQ,OAAO,EAAE,UAAa,CAAA,EAAA,CAAC,QAAQ,CAAC,CAAA,CAAA;AACtD,EACE,uBAAAC,eAAA,CAACC,0CAAqB,QAArB,EAAA;AAAA,IAA8B,KAAA;AAAA,IAC5B,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACAC,cAAA,CAAA,KAAA,EAAA;AAAA,QACC,aAAY,EAAA,MAAA;AAAA,QACZ,WAAU,EAAA,WAAA;AAAA,QAEV,KAAO,EAAA;AAAA,UACL,QAAU,EAAA,UAAA;AAAA,UACV,MAAQ,EAAA,CAAA;AAAA,UACR,KAAO,EAAA,CAAA;AAAA,UACP,OAAS,EAAA,CAAA;AAAA,UACT,MAAQ,EAAA,CAAA,CAAA;AAAA,UACR,QAAU,EAAA,QAAA;AAAA,UACV,IAAM,EAAA,kBAAA;AAAA,UACN,UAAY,EAAA,QAAA;AAAA,UACZ,WAAa,EAAA,CAAA;AAAA,UACb,GAAG,KAAA;AAAA,SACL;AAAA,QAEC,QAAA,EAAA,mBAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;;"}

package/dist-cjs/packages/core/src/aria-announcer/useAriaAnnouncer.js

@@ -53,12 +53,12 @@ const useAriaAnnouncer = ({
     }),
     [context, announce]
   );
-  React.useEffect(
-    () => () => {
+  React.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
       mountedRef.current = false;
-    },
-    []
-  );
+    };
+  }, []);
   return ariaAnnouncer;
 };
 

package/dist-cjs/packages/core/src/aria-announcer/useAriaAnnouncer.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAriaAnnouncer.js","sources":["../src/aria-announcer/useAriaAnnouncer.ts"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef } from \"react\";\nimport { debounce } from \"../utils\";\nimport { AriaAnnouncer, AriaAnnouncerContext } from \"./AriaAnnouncerContext\";\n\nexport type useAnnouncerOptions = {\n  debounce?: number;\n};\nexport type useAriaAnnouncerHook = (\n  options?: useAnnouncerOptions\n) => AriaAnnouncer;\n\nlet warnedOnce = false;\n\nexport const useAriaAnnouncer: useAriaAnnouncerHook = ({\n  debounce: debounceInterval = 0,\n} = {}) => {\n  const context = useContext(AriaAnnouncerContext);\n  const mountedRef = useRef(true);\n  const baseAnnounce = useCallback(\n    (announcement: string, delay?: number) => {\n      const isReactAnnouncerInstalled = context && context.announce;\n\n      if (process.env.NODE_ENV !== \"production\") {\n        if (isReactAnnouncerInstalled && warnedOnce) {\n          console.warn(\n            \"useAriaAnnouncer is being used without an AriaAnnouncerProvider. Your application should be wrapped in an AriaAnnouncerProvider\"\n          );\n          warnedOnce = true;\n        }\n      }\n\n      function makeAnnouncement() {\n        if (mountedRef.current) {\n          if (isReactAnnouncerInstalled) {\n            context.announce(announcement);\n          }\n        }\n      }\n\n      if (delay) {\n        setTimeout(makeAnnouncement, delay);\n      } else {\n        makeAnnouncement();\n      }\n    },\n    [context]\n  );\n\n  const announce = useMemo(\n    () =>\n      debounceInterval > 0\n        ? debounce(baseAnnounce, debounceInterval)\n        : baseAnnounce,\n    [baseAnnounce, debounceInterval]\n  );\n\n  const ariaAnnouncer = useMemo(\n    () => ({\n      ...context,\n      announce,\n    }),\n    [context, announce]\n  );\n\n  useEffect(\n    () => () => {\n      mountedRef.current = false;\n    },\n    []\n  );\n\n  return ariaAnnouncer;\n};\n"],"names":["useContext","AriaAnnouncerContext","useRef","useCallback","useMemo","debounce","useEffect"],"mappings":";;;;;;;;;;;;AAWA,IAAI,UAAa,GAAA,KAAA,CAAA;AAEV,MAAM,mBAAyC,CAAC;AAAA,EACrD,UAAU,gBAAmB,GAAA,CAAA;AAC/B,CAAA,GAAI,EAAO,KAAA;AACT,EAAM,MAAA,OAAA,GAAUA,iBAAWC,yCAAoB,CAAA,CAAA;AAC/C,EAAM,MAAA,UAAA,GAAaC,aAAO,IAAI,CAAA,CAAA;AAC9B,EAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,IACnB,CAAC,cAAsB,KAAmB,KAAA;AACxC,MAAM,MAAA,yBAAA,GAA4B,WAAW,OAAQ,CAAA,QAAA,CAAA;AAErD,MAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,QAAA,IAAI,6BAA6B,UAAY,EAAA;AAC3C,UAAQ,OAAA,CAAA,IAAA;AAAA,YACN,iIAAA;AAAA,WACF,CAAA;AACA,UAAa,UAAA,GAAA,IAAA,CAAA;AAAA,SACf;AAAA,OACF;AAEA,MAAA,SAAS,gBAAmB,GAAA;AAC1B,QAAA,IAAI,WAAW,OAAS,EAAA;AACtB,UAAA,IAAI,yBAA2B,EAAA;AAC7B,YAAA,OAAA,CAAQ,SAAS,YAAY,CAAA,CAAA;AAAA,WAC/B;AAAA,SACF;AAAA,OACF;AAEA,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,UAAA,CAAW,kBAAkB,KAAK,CAAA,CAAA;AAAA,OAC7B,MAAA;AACL,QAAiB,gBAAA,EAAA,CAAA;AAAA,OACnB;AAAA,KACF;AAAA,IACA,CAAC,OAAO,CAAA;AAAA,GACV,CAAA;AAEA,EAAA,MAAM,QAAW,GAAAC,aAAA;AAAA,IACf,MACE,gBAAmB,GAAA,CAAA,GACfC,iBAAS,CAAA,YAAA,EAAc,gBAAgB,CACvC,GAAA,YAAA;AAAA,IACN,CAAC,cAAc,gBAAgB,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAAD,aAAA;AAAA,IACpB,OAAO;AAAA,MACL,GAAG,OAAA;AAAA,MACH,QAAA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,SAAS,QAAQ,CAAA;AAAA,GACpB,CAAA;AAEA,EAAAE,eAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA,KACvB;AAAA,IACA,EAAC;AAAA,GACH,CAAA;AAEA,EAAO,OAAA,aAAA,CAAA;AACT;;;;"}
+{"version":3,"file":"useAriaAnnouncer.js","sources":["../src/aria-announcer/useAriaAnnouncer.ts"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef } from \"react\";\nimport { debounce } from \"../utils\";\nimport { AriaAnnouncer, AriaAnnouncerContext } from \"./AriaAnnouncerContext\";\n\nexport type useAnnouncerOptions = {\n  debounce?: number;\n};\nexport type useAriaAnnouncerHook = (\n  options?: useAnnouncerOptions\n) => AriaAnnouncer;\n\nlet warnedOnce = false;\n\nexport const useAriaAnnouncer: useAriaAnnouncerHook = ({\n  debounce: debounceInterval = 0,\n} = {}) => {\n  const context = useContext(AriaAnnouncerContext);\n  const mountedRef = useRef(true);\n  const baseAnnounce = useCallback(\n    (announcement: string, delay?: number) => {\n      const isReactAnnouncerInstalled = context && context.announce;\n\n      if (process.env.NODE_ENV !== \"production\") {\n        if (isReactAnnouncerInstalled && warnedOnce) {\n          console.warn(\n            \"useAriaAnnouncer is being used without an AriaAnnouncerProvider. Your application should be wrapped in an AriaAnnouncerProvider\"\n          );\n          warnedOnce = true;\n        }\n      }\n\n      function makeAnnouncement() {\n        if (mountedRef.current) {\n          if (isReactAnnouncerInstalled) {\n            context.announce(announcement);\n          }\n        }\n      }\n\n      if (delay) {\n        setTimeout(makeAnnouncement, delay);\n      } else {\n        makeAnnouncement();\n      }\n    },\n    [context]\n  );\n\n  const announce = useMemo(\n    () =>\n      debounceInterval > 0\n        ? debounce(baseAnnounce, debounceInterval)\n        : baseAnnounce,\n    [baseAnnounce, debounceInterval]\n  );\n\n  const ariaAnnouncer = useMemo(\n    () => ({\n      ...context,\n      announce,\n    }),\n    [context, announce]\n  );\n\n  useEffect(() => {\n    mountedRef.current = true;\n    return () => {\n      mountedRef.current = false;\n    };\n  }, []);\n\n  return ariaAnnouncer;\n};\n"],"names":["useContext","AriaAnnouncerContext","useRef","useCallback","useMemo","debounce","useEffect"],"mappings":";;;;;;;;;;;;AAWA,IAAI,UAAa,GAAA,KAAA,CAAA;AAEV,MAAM,mBAAyC,CAAC;AAAA,EACrD,UAAU,gBAAmB,GAAA,CAAA;AAC/B,CAAA,GAAI,EAAO,KAAA;AACT,EAAM,MAAA,OAAA,GAAUA,iBAAWC,yCAAoB,CAAA,CAAA;AAC/C,EAAM,MAAA,UAAA,GAAaC,aAAO,IAAI,CAAA,CAAA;AAC9B,EAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,IACnB,CAAC,cAAsB,KAAmB,KAAA;AACxC,MAAM,MAAA,yBAAA,GAA4B,WAAW,OAAQ,CAAA,QAAA,CAAA;AAErD,MAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,QAAA,IAAI,6BAA6B,UAAY,EAAA;AAC3C,UAAQ,OAAA,CAAA,IAAA;AAAA,YACN,iIAAA;AAAA,WACF,CAAA;AACA,UAAa,UAAA,GAAA,IAAA,CAAA;AAAA,SACf;AAAA,OACF;AAEA,MAAA,SAAS,gBAAmB,GAAA;AAC1B,QAAA,IAAI,WAAW,OAAS,EAAA;AACtB,UAAA,IAAI,yBAA2B,EAAA;AAC7B,YAAA,OAAA,CAAQ,SAAS,YAAY,CAAA,CAAA;AAAA,WAC/B;AAAA,SACF;AAAA,OACF;AAEA,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,UAAA,CAAW,kBAAkB,KAAK,CAAA,CAAA;AAAA,OAC7B,MAAA;AACL,QAAiB,gBAAA,EAAA,CAAA;AAAA,OACnB;AAAA,KACF;AAAA,IACA,CAAC,OAAO,CAAA;AAAA,GACV,CAAA;AAEA,EAAA,MAAM,QAAW,GAAAC,aAAA;AAAA,IACf,MACE,gBAAmB,GAAA,CAAA,GACfC,iBAAS,CAAA,YAAA,EAAc,gBAAgB,CACvC,GAAA,YAAA;AAAA,IACN,CAAC,cAAc,gBAAgB,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAAD,aAAA;AAAA,IACpB,OAAO;AAAA,MACL,GAAG,OAAA;AAAA,MACH,QAAA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,SAAS,QAAQ,CAAA;AAAA,GACpB,CAAA;AAEA,EAAAE,eAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,OAAU,GAAA,IAAA,CAAA;AACrB,IAAA,OAAO,MAAM;AACX,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA,KACvB,CAAA;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAO,OAAA,aAAA,CAAA;AACT;;;;"}

package/dist-cjs/packages/core/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-foreground: var(--saltAvatar-foreground, var(--salt-accent-foreground));\n  --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n  --avatar-base-size: var(--salt-size-base, 12px);\n  --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-accent-fontSize));\n  --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));\n  --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n  /* Icon styling */\n  --saltIcon-color: var(--avatar-foreground);\n  --salt-size-icon-base: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n  line-height: var(--saltAvatar-lineHeight, var(--salt-accent-lineHeight));\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: var(--saltAvatar-background, var(--salt-accent-background));\n  color: var(--avatar-foreground);\n  font-size: var(--avatar-fontSize);\n  width: var(--avatar-container-size);\n  min-width: var(--avatar-container-size);\n  height: var(--avatar-container-size);\n  min-height: var(--avatar-container-size);\n  overflow: hidden;\n  user-select: none;\n  border-radius: 50%;\n}\n.saltAvatar:has(img),\n.saltAvatar-withImage {\n  background: none;\n}\n/* Style applied to the image/svg element. We specifically allow SVGs as the Avatar image to enable SVGs such as Flags to take up the full Avatar space */\n.saltAvatar > img,\n.saltAvatar > svg:not(.saltIcon) {\n  width: 100%;\n  height: 100%;\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=Avatar.css.js.map

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

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

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

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var icons = require('@salt-ds/icons');
+var clsx = require('clsx');
+var React = require('react');
+var useLoaded = require('./internal/useLoaded.js');
+var makePrefixer = require('../utils/makePrefixer.js');
+require('../utils/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+require('./Avatar.css.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltAvatar");
+const DEFAULT_AVATAR_SIZE = 2;
+const defaultNameToInitials = (name) => name == null ? void 0 : name.split(" ").slice(0, 2).map((n) => n[0]).join("").toUpperCase();
+const Avatar = React.forwardRef(function Avatar2({
+  className,
+  children: childrenProp,
+  name,
+  nameToInitials = defaultNameToInitials,
+  src,
+  size = DEFAULT_AVATAR_SIZE,
+  style: styleProp,
+  fallbackIcon = /* @__PURE__ */ jsxRuntime.jsx(icons.UserSolidIcon, {}),
+  ...rest
+}, ref) {
+  let children;
+  const style = {
+    ...styleProp,
+    "--saltAvatar-size-multiplier": `${size}`
+  };
+  const hasImgNotFailing = useLoaded.useLoaded({ src }) !== "error" && src;
+  if (hasImgNotFailing) {
+    children = /* @__PURE__ */ jsxRuntime.jsx("img", {
+      alt: name,
+      src
+    });
+  } else if (childrenProp != null) {
+    children = childrenProp;
+  }
+  const avatarInitials = nameToInitials(name);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    ref,
+    style,
+    className: clsx.clsx(
+      withBaseName(),
+      { [withBaseName("withImage")]: hasImgNotFailing },
+      className
+    ),
+    ...rest,
+    children: children || avatarInitials || fallbackIcon
+  });
+});
+
+exports.Avatar = Avatar;
+//# sourceMappingURL=Avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.tsx"],"sourcesContent":["import { UserSolidIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { useLoaded } from \"./internal/useLoaded\";\nimport { makePrefixer } from \"../utils\";\n\nimport \"./Avatar.css\";\n\nexport type NameToInitials = (name?: string) => string;\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The name that Avatar represents.\n   */\n  name?: string;\n  /**\n   * Defines the function that gets initials. Default is capital first letter of each separate word in name.\n   * If a function is not passed or returns undefined, Avatar will default to Icon.\n   */\n  nameToInitials?: NameToInitials;\n  /**\n   * Image src of Avatar.\n   */\n  src?: string;\n  /**\n   * Multiplier for the base avatar.\n   */\n  size?: number;\n  /**\n   * Icon to be used as a default item. Defaults to `UserIcon`\n   */\n  fallbackIcon?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAvatar\");\nconst DEFAULT_AVATAR_SIZE = 2; // medium\n\nconst defaultNameToInitials = (name?: string) =>\n  name\n    ?.split(\" \")\n    .slice(0, 2)\n    .map((n) => n[0])\n    .join(\"\")\n    .toUpperCase();\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n  {\n    className,\n    children: childrenProp,\n    name,\n    nameToInitials = defaultNameToInitials,\n    src,\n    size = DEFAULT_AVATAR_SIZE,\n    style: styleProp,\n    fallbackIcon = <UserSolidIcon />,\n    ...rest\n  },\n  ref\n) {\n  let children;\n\n  const style = {\n    ...styleProp,\n    \"--saltAvatar-size-multiplier\": `${size}`,\n  };\n\n  const hasImgNotFailing = useLoaded({ src }) !== \"error\" && src;\n\n  if (hasImgNotFailing) {\n    children = <img alt={name} src={src} />;\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  }\n\n  const avatarInitials = nameToInitials(name);\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={clsx(\n        withBaseName(),\n        { [withBaseName(\"withImage\")]: hasImgNotFailing },\n        className\n      )}\n      {...rest}\n    >\n      {children || avatarInitials || fallbackIcon}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Avatar","UserSolidIcon","useLoaded","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AAkCA,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA,CAAA;AAC9C,MAAM,mBAAsB,GAAA,CAAA,CAAA;AAE5B,MAAM,qBAAwB,GAAA,CAAC,IAC7B,KAAA,IAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,IAAA,CACI,MAAM,GACP,CAAA,CAAA,KAAA,CAAM,CAAG,EAAA,CAAA,CAAA,CACT,IAAI,CAAC,CAAA,KAAM,CAAE,CAAA,CAAA,CAAA,CAAA,CACb,KAAK,EACL,CAAA,CAAA,WAAA,EAAA,CAAA;AAEQ,MAAA,MAAA,GAASC,gBAAwC,CAAA,SAASC,OACrE,CAAA;AAAA,EACE,SAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,IAAA;AAAA,EACA,cAAiB,GAAA,qBAAA;AAAA,EACjB,GAAA;AAAA,EACA,IAAO,GAAA,mBAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,YAAA,kCAAgBC,mBAAc,EAAA,EAAA,CAAA;AAAA,EAC3B,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAI,IAAA,QAAA,CAAA;AAEJ,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,GAAG,SAAA;AAAA,IACH,gCAAgC,CAAG,EAAA,IAAA,CAAA,CAAA;AAAA,GACrC,CAAA;AAEA,EAAA,MAAM,mBAAmBC,mBAAU,CAAA,EAAE,GAAI,EAAC,MAAM,OAAW,IAAA,GAAA,CAAA;AAE3D,EAAA,IAAI,gBAAkB,EAAA;AACpB,IAAA,QAAA,mBAAYC,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,GAAK,EAAA,IAAA;AAAA,MAAM,GAAA;AAAA,KAAU,CAAA,CAAA;AAAA,GACvC,MAAA,IAAW,gBAAgB,IAAM,EAAA;AAC/B,IAAW,QAAA,GAAA,YAAA,CAAA;AAAA,GACb;AAEA,EAAM,MAAA,cAAA,GAAiB,eAAe,IAAI,CAAA,CAAA;AAC1C,EAAA,uBACGA,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,EAAE,CAAC,YAAa,CAAA,WAAW,IAAI,gBAAiB,EAAA;AAAA,MAChD,SAAA;AAAA,KACF;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,sBAAY,cAAkB,IAAA,YAAA;AAAA,GACjC,CAAA,CAAA;AAEJ,CAAC;;;;"}

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

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

package/dist-cjs/packages/core/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({ src }: ImgHTMLAttributes<HTMLImageElement>) {\n  const [loaded, setLoaded] = useState<false | \"loaded\" | \"error\">(false);\n\n  useEffect(() => {\n    if (!src) {\n      return undefined;\n    }\n\n    setLoaded(false);\n\n    let active = true;\n    const image = new Image();\n    const onLoad = () => active && setLoaded(\"loaded\");\n    const onError = () => active && setLoaded(\"error\");\n\n    image.addEventListener(\"load\", onLoad, { once: true });\n    image.addEventListener(\"error\", onError, { once: true });\n\n    return () => {\n      image.removeEventListener(\"load\", onLoad);\n      image.removeEventListener(\"load\", onError);\n      active = false;\n    };\n  }, [src]);\n\n  return loaded;\n}\n"],"names":["useState","useEffect"],"mappings":";;;;;;AAEgB,SAAA,SAAA,CAAU,EAAE,GAAA,EAA4C,EAAA;AACtE,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,eAAqC,KAAK,CAAA,CAAA;AAEtE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,GAAK,EAAA;AACR,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,MAAM,MAAS,GAAA,MAAM,MAAU,IAAA,SAAA,CAAU,QAAQ,CAAA,CAAA;AACjD,IAAA,MAAM,OAAU,GAAA,MAAM,MAAU,IAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAEjD,IAAA,KAAA,CAAM,iBAAiB,MAAQ,EAAA,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AACrD,IAAA,KAAA,CAAM,iBAAiB,OAAS,EAAA,OAAA,EAAS,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AAEvD,IAAA,OAAO,MAAM;AACX,MAAM,KAAA,CAAA,mBAAA,CAAoB,QAAQ,MAAM,CAAA,CAAA;AACxC,MAAM,KAAA,CAAA,mBAAA,CAAoB,QAAQ,OAAO,CAAA,CAAA;AACzC,MAAS,MAAA,GAAA,KAAA,CAAA;AAAA,KACX,CAAA;AAAA,GACF,EAAG,CAAC,GAAG,CAAC,CAAA,CAAA;AAER,EAAO,OAAA,MAAA,CAAA;AACT;;;;"}

package/dist-cjs/packages/core/src/border-item/BorderItem.js

@@ -36,9 +36,14 @@ const BorderItem = React.forwardRef(
     };
     return /* @__PURE__ */ jsxRuntime.jsx(GridItem.GridItem, {
       ref,
-      className: clsx.clsx(withBaseName(), className, "saltGridItem-area", {
-        [withBaseName("sticky")]: sticky
-      }),
+      className: clsx.clsx(
+        withBaseName(),
+        "saltGridItem-area",
+        {
+          [withBaseName("sticky")]: sticky
+        },
+        className
+      ),
       style: gridItemStyles,
       ...rest,
       children

package/dist-cjs/packages/core/src/border-item/BorderItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"BorderItem.js","sources":["../src/border-item/BorderItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\nimport { GridItem, GridItemProps } from \"../grid-item\";\nimport \"./BorderItem.css\";\nimport {\n  makePrefixer,\n  PolymorphicComponentPropWithRef,\n  PolymorphicRef,\n} from \"../utils\";\n\nexport const BORDER_POSITION = [\n  \"north\",\n  \"west\",\n  \"center\",\n  \"east\",\n  \"south\",\n] as const;\n\nexport type BorderPosition = typeof BORDER_POSITION[number];\n\nexport type BorderItemProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Aligns a grid item inside a cell along the inline (row) axis. Defaults to \"stretch\"\n       */\n      horizontalAlignment?: GridItemProps<T>[\"horizontalAlignment\"];\n      /**\n       * Aligns a grid item inside a cell along the block (column) axis. Defaults to \"stretch\"\n       */\n      verticalAlignment?: GridItemProps<T>[\"verticalAlignment\"];\n      /**\n       * Position in the Border Layout\n       */\n      position: BorderPosition;\n      /**\n       * Defines if the item should stick to the edges of its container. Defaults to \"false\"\n       */\n      sticky?: boolean;\n    }\n  >;\n\nconst withBaseName = makePrefixer(\"saltBorderItem\");\n\ntype BorderItemComponent = <T extends ElementType = \"div\">(\n  props: BorderItemProps<T>\n) => ReactElement | null;\n\nexport const BorderItem: BorderItemComponent = forwardRef(\n  <T extends ElementType>(\n    {\n      children,\n      className,\n      position,\n      sticky = false,\n      style,\n      ...rest\n    }: BorderItemProps<T>,\n    ref?: PolymorphicRef<T>\n  ) => {\n    const gridItemStyles = {\n      ...style,\n      \"--gridItem-gridArea\": position,\n    };\n\n    return (\n      <GridItem\n        ref={ref}\n        className={clsx(withBaseName(), className, \"saltGridItem-area\", {\n          [withBaseName(\"sticky\")]: sticky,\n        })}\n        style={gridItemStyles}\n        {...rest}\n      >\n        {children}\n      </GridItem>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","jsx","GridItem","clsx"],"mappings":";;;;;;;;;;;;;;;AAUO,MAAM,eAAkB,GAAA;AAAA,EAC7B,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AACF,EAAA;AA2BA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA,CAAA;AAM3C,MAAM,UAAkC,GAAAC,gBAAA;AAAA,EAC7C,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAS,GAAA,KAAA;AAAA,IACT,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,cAAiB,GAAA;AAAA,MACrB,GAAG,KAAA;AAAA,MACH,qBAAuB,EAAA,QAAA;AAAA,KACzB,CAAA;AAEA,IAAA,uBACGC,cAAA,CAAAC,iBAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,WAAW,mBAAqB,EAAA;AAAA,QAC9D,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC3B,CAAA;AAAA,MACD,KAAO,EAAA,cAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;;"}
+{"version":3,"file":"BorderItem.js","sources":["../src/border-item/BorderItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\nimport { GridItem, GridItemProps } from \"../grid-item\";\nimport \"./BorderItem.css\";\nimport {\n  makePrefixer,\n  PolymorphicComponentPropWithRef,\n  PolymorphicRef,\n} from \"../utils\";\n\nexport const BORDER_POSITION = [\n  \"north\",\n  \"west\",\n  \"center\",\n  \"east\",\n  \"south\",\n] as const;\n\nexport type BorderPosition = typeof BORDER_POSITION[number];\n\nexport type BorderItemProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Aligns a grid item inside a cell along the inline (row) axis. Defaults to \"stretch\"\n       */\n      horizontalAlignment?: GridItemProps<T>[\"horizontalAlignment\"];\n      /**\n       * Aligns a grid item inside a cell along the block (column) axis. Defaults to \"stretch\"\n       */\n      verticalAlignment?: GridItemProps<T>[\"verticalAlignment\"];\n      /**\n       * Position in the Border Layout\n       */\n      position: BorderPosition;\n      /**\n       * Defines if the item should stick to the edges of its container. Defaults to \"false\"\n       */\n      sticky?: boolean;\n    }\n  >;\n\nconst withBaseName = makePrefixer(\"saltBorderItem\");\n\ntype BorderItemComponent = <T extends ElementType = \"div\">(\n  props: BorderItemProps<T>\n) => ReactElement | null;\n\nexport const BorderItem: BorderItemComponent = forwardRef(\n  <T extends ElementType>(\n    {\n      children,\n      className,\n      position,\n      sticky = false,\n      style,\n      ...rest\n    }: BorderItemProps<T>,\n    ref?: PolymorphicRef<T>\n  ) => {\n    const gridItemStyles = {\n      ...style,\n      \"--gridItem-gridArea\": position,\n    };\n\n    return (\n      <GridItem\n        ref={ref}\n        className={clsx(\n          withBaseName(),\n          \"saltGridItem-area\",\n          {\n            [withBaseName(\"sticky\")]: sticky,\n          },\n          className\n        )}\n        style={gridItemStyles}\n        {...rest}\n      >\n        {children}\n      </GridItem>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","jsx","GridItem","clsx"],"mappings":";;;;;;;;;;;;;;;AAUO,MAAM,eAAkB,GAAA;AAAA,EAC7B,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AACF,EAAA;AA2BA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA,CAAA;AAM3C,MAAM,UAAkC,GAAAC,gBAAA;AAAA,EAC7C,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAS,GAAA,KAAA;AAAA,IACT,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,cAAiB,GAAA;AAAA,MACrB,GAAG,KAAA;AAAA,MACH,qBAAuB,EAAA,QAAA;AAAA,KACzB,CAAA;AAEA,IAAA,uBACGC,cAAA,CAAAC,iBAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,mBAAA;AAAA,QACA;AAAA,UACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,SAC5B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,KAAO,EAAA,cAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;;"}

package/dist-cjs/packages/core/src/button/Button.js

@@ -40,10 +40,15 @@ const Button = React.forwardRef(
     const { tabIndex, ...restButtonProps } = buttonProps;
     return /* @__PURE__ */ jsxRuntime.jsx("button", {
       ...restButtonProps,
-      className: clsx.clsx(withBaseName(), className, withBaseName(variant), {
-        [withBaseName("disabled")]: disabled,
-        [withBaseName("active")]: active
-      }),
+      className: clsx.clsx(
+        withBaseName(),
+        withBaseName(variant),
+        {
+          [withBaseName("disabled")]: disabled,
+          [withBaseName("active")]: active
+        },
+        className
+      ),
       ...restProps,
       ref,
       type,

package/dist-cjs/packages/core/src/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../src/button/Button.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\n\nimport \"./Button.css\";\nimport { useButton } from \"./useButton\";\n\nconst withBaseName = makePrefixer(\"saltButton\");\n\nexport const ButtonVariantValues = [\"primary\", \"secondary\", \"cta\"] as const;\nexport type ButtonVariant = typeof ButtonVariantValues[number];\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * If `true`, the button will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the button will be focusable when disabled.\n   */\n  focusableWhenDisabled?: boolean;\n  /**\n   * The variant to use. Options are 'primary', 'secondary' and 'cta'.\n   * 'primary' is the default value.\n   */\n  variant?: ButtonVariant;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    {\n      children,\n      className,\n      disabled,\n      focusableWhenDisabled,\n      onKeyUp,\n      onKeyDown,\n      onBlur,\n      onClick,\n      type = \"button\",\n      variant = \"primary\",\n      ...restProps\n    },\n    ref?\n  ): ReactElement<ButtonProps> {\n    const { active, buttonProps } = useButton({\n      disabled,\n      focusableWhenDisabled,\n      onKeyUp,\n      onKeyDown,\n      onBlur,\n      onClick,\n    });\n    // we do not want to spread tab index in this case because the button element\n    // does not require tabindex=\"0\" attribute\n    const { tabIndex, ...restButtonProps } = buttonProps;\n    return (\n      <button\n        {...restButtonProps}\n        className={clsx(withBaseName(), className, withBaseName(variant), {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"active\")]: active,\n        })}\n        {...restProps}\n        ref={ref}\n        type={type}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","Button","useButton","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA,CAAA;AAEvC,MAAM,mBAAsB,GAAA,CAAC,SAAW,EAAA,WAAA,EAAa,KAAK,EAAA;AAmB1D,MAAM,MAAS,GAAAC,gBAAA;AAAA,EACpB,SAASC,OACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,qBAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAO,GAAA,QAAA;AAAA,IACP,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,SAAA;AAAA,KAEL,GAC2B,EAAA;AAC3B,IAAA,MAAM,EAAE,MAAA,EAAQ,WAAY,EAAA,GAAIC,mBAAU,CAAA;AAAA,MACxC,QAAA;AAAA,MACA,qBAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,KACD,CAAA,CAAA;AAGD,IAAM,MAAA,EAAE,QAAa,EAAA,GAAA,eAAA,EAAoB,GAAA,WAAA,CAAA;AACzC,IAAA,uBACGC,cAAA,CAAA,QAAA,EAAA;AAAA,MACE,GAAG,eAAA;AAAA,MACJ,WAAWC,SAAK,CAAA,YAAA,IAAgB,SAAW,EAAA,YAAA,CAAa,OAAO,CAAG,EAAA;AAAA,QAChE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC3B,CAAA;AAAA,MACA,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,IAAA;AAAA,MAEC,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;;"}
+{"version":3,"file":"Button.js","sources":["../src/button/Button.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\n\nimport \"./Button.css\";\nimport { useButton } from \"./useButton\";\n\nconst withBaseName = makePrefixer(\"saltButton\");\n\nexport const ButtonVariantValues = [\"primary\", \"secondary\", \"cta\"] as const;\nexport type ButtonVariant = typeof ButtonVariantValues[number];\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * If `true`, the button will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the button will be focusable when disabled.\n   */\n  focusableWhenDisabled?: boolean;\n  /**\n   * The variant to use. Options are 'primary', 'secondary' and 'cta'.\n   * 'primary' is the default value.\n   */\n  variant?: ButtonVariant;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    {\n      children,\n      className,\n      disabled,\n      focusableWhenDisabled,\n      onKeyUp,\n      onKeyDown,\n      onBlur,\n      onClick,\n      type = \"button\",\n      variant = \"primary\",\n      ...restProps\n    },\n    ref?\n  ): ReactElement<ButtonProps> {\n    const { active, buttonProps } = useButton({\n      disabled,\n      focusableWhenDisabled,\n      onKeyUp,\n      onKeyDown,\n      onBlur,\n      onClick,\n    });\n    // we do not want to spread tab index in this case because the button element\n    // does not require tabindex=\"0\" attribute\n    const { tabIndex, ...restButtonProps } = buttonProps;\n    return (\n      <button\n        {...restButtonProps}\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"active\")]: active,\n          },\n          className\n        )}\n        {...restProps}\n        ref={ref}\n        type={type}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","Button","useButton","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA,CAAA;AAEvC,MAAM,mBAAsB,GAAA,CAAC,SAAW,EAAA,WAAA,EAAa,KAAK,EAAA;AAmB1D,MAAM,MAAS,GAAAC,gBAAA;AAAA,EACpB,SAASC,OACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,qBAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAO,GAAA,QAAA;AAAA,IACP,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,SAAA;AAAA,KAEL,GAC2B,EAAA;AAC3B,IAAA,MAAM,EAAE,MAAA,EAAQ,WAAY,EAAA,GAAIC,mBAAU,CAAA;AAAA,MACxC,QAAA;AAAA,MACA,qBAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,KACD,CAAA,CAAA;AAGD,IAAM,MAAA,EAAE,QAAa,EAAA,GAAA,eAAA,EAAoB,GAAA,WAAA,CAAA;AACzC,IAAA,uBACGC,cAAA,CAAA,QAAA,EAAA;AAAA,MACE,GAAG,eAAA;AAAA,MACJ,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,OAAO,CAAA;AAAA,QACpB;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,SAC5B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,IAAA;AAAA,MAEC,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;;"}

package/dist-cjs/packages/core/src/flex-item/FlexItem.css.js

@@ -2,7 +2,7 @@
 
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = "/* Default variables applied to the root element */\n.saltFlexItem {\n  --saltFlexItem-alignment: auto;\n  --saltFlexItem-shrink: 1;\n  --saltFlexItem-grow: 0;\n}\n\n/* Style applied to the root element */\n.saltFlexItem {\n  position: relative;\n  align-self: var(--saltFlexItem-alignment);\n  flex-grow: var(--saltFlexItem-grow);\n  flex-shrink: var(--saltFlexItem-shrink);\n}\n\n.saltFlexItem-stacked {\n  flex-grow: 2;\n}\n";
+var css_248z = "/* Default variables applied to the root element */\n.saltFlexItem {\n  --saltFlexItem-alignment: auto;\n  --saltFlexItem-shrink: 1;\n  --saltFlexItem-grow: 0;\n  --saltFlexItem-basis: auto;\n}\n\n/* Style applied to the root element */\n.saltFlexItem {\n  position: relative;\n  align-self: var(--saltFlexItem-alignment);\n  flex-grow: var(--saltFlexItem-grow);\n  flex-shrink: var(--saltFlexItem-shrink);\n  flex-basis: var(--saltFlexItem-basis);\n}\n\n.saltFlexItem-stacked {\n  flex-grow: 2;\n}\n";
 styleInject_es(css_248z);
 
 module.exports = css_248z;

package/dist-cjs/packages/core/src/flex-item/FlexItem.js

@@ -26,20 +26,23 @@ const FlexItem = React.forwardRef(
     className,
     shrink,
     grow,
+    basis,
     style,
     ...rest
   }, ref) => {
     const Component = as || "div";
     const flexItemShrink = useResponsiveProp.useResponsiveProp(shrink, 1);
     const flexItemGrow = useResponsiveProp.useResponsiveProp(grow, 0);
+    const flexItemBasis = useResponsiveProp.useResponsiveProp(basis, "auto");
     const itemStyle = {
       "--saltFlexItem-alignment": align,
       "--saltFlexItem-shrink": flexItemShrink,
       "--saltFlexItem-grow": flexItemGrow,
+      "--saltFlexItem-basis": flexItemBasis,
       ...style
     };
     return /* @__PURE__ */ jsxRuntime.jsx(Component, {
-      className: clsx.clsx(className, withBaseName()),
+      className: clsx.clsx(withBaseName(), className),
       ref,
       style: itemStyle,
       ...rest,

package/dist-cjs/packages/core/src/flex-item/FlexItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexItem.js","sources":["../src/flex-item/FlexItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement } from \"react\";\nimport {\n  makePrefixer,\n  ResponsiveProp,\n  useResponsiveProp,\n  PolymorphicComponentPropWithRef,\n  PolymorphicRef,\n} from \"../utils\";\nimport \"./FlexItem.css\";\nimport { clsx } from \"clsx\";\n\nconst withBaseName = makePrefixer(\"saltFlexItem\");\nexport const FLEX_ITEM_ALIGNMENTS = [\n  \"start\",\n  \"end\",\n  \"center\",\n  \"stretch\",\n] as const;\n\nexport type flexItemAlignment = typeof FLEX_ITEM_ALIGNMENTS[number];\n\nexport type FlexItemProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Allows the alignment specified by parent to be overridden for individual items, default is \"start\".\n       */\n      align?: flexItemAlignment;\n      /**\n   * Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.\n\n   */\n      shrink?: ResponsiveProp<number>;\n      /**\n       * Defines the ability for an item to grow x times more compared to it's siblings, default is 0.\n       */\n      grow?: ResponsiveProp<number>;\n    }\n  >;\n\ntype FlexItemComponent = <T extends ElementType = \"div\">(\n  props: FlexItemProps<T>\n) => ReactElement | null;\n\nexport const FlexItem: FlexItemComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      as,\n      align,\n      children,\n      className,\n      shrink,\n      grow,\n      style,\n      ...rest\n    }: FlexItemProps<T>,\n    ref?: PolymorphicRef<T>\n  ) => {\n    const Component = as || \"div\";\n    const flexItemShrink = useResponsiveProp(shrink, 1);\n    const flexItemGrow = useResponsiveProp(grow, 0);\n\n    const itemStyle = {\n      \"--saltFlexItem-alignment\": align,\n      \"--saltFlexItem-shrink\": flexItemShrink,\n      \"--saltFlexItem-grow\": flexItemGrow,\n      ...style,\n    };\n    return (\n      <Component\n        className={clsx(className, withBaseName())}\n        ref={ref}\n        style={itemStyle}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","useResponsiveProp","jsx","clsx"],"mappings":";;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA,CAAA;AACzC,MAAM,oBAAuB,GAAA;AAAA,EAClC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AACF,EAAA;AA4BO,MAAM,QAA8B,GAAAC,gBAAA;AAAA,EACzC,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AACxB,IAAM,MAAA,cAAA,GAAiBC,mCAAkB,CAAA,MAAA,EAAQ,CAAC,CAAA,CAAA;AAClD,IAAM,MAAA,YAAA,GAAeA,mCAAkB,CAAA,IAAA,EAAM,CAAC,CAAA,CAAA;AAE9C,IAAA,MAAM,SAAY,GAAA;AAAA,MAChB,0BAA4B,EAAA,KAAA;AAAA,MAC5B,uBAAyB,EAAA,cAAA;AAAA,MACzB,qBAAuB,EAAA,YAAA;AAAA,MACvB,GAAG,KAAA;AAAA,KACL,CAAA;AACA,IAAA,uBACGC,cAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,SAAW,EAAA,YAAA,EAAc,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;;"}
+{"version":3,"file":"FlexItem.js","sources":["../src/flex-item/FlexItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement, CSSProperties } from \"react\";\nimport {\n  makePrefixer,\n  ResponsiveProp,\n  useResponsiveProp,\n  PolymorphicComponentPropWithRef,\n  PolymorphicRef,\n} from \"../utils\";\nimport \"./FlexItem.css\";\nimport { clsx } from \"clsx\";\n\nconst withBaseName = makePrefixer(\"saltFlexItem\");\nexport const FLEX_ITEM_ALIGNMENTS = [\n  \"start\",\n  \"end\",\n  \"center\",\n  \"stretch\",\n] as const;\n\nexport type flexItemAlignment = typeof FLEX_ITEM_ALIGNMENTS[number];\n\nexport type FlexItemProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Allows the alignment specified by parent to be overridden for individual items, default is \"start\".\n       */\n      align?: flexItemAlignment;\n      /**\n       * Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.\n       */\n      shrink?: ResponsiveProp<number>;\n      /**\n       * Defines the ability for an item to grow x times more compared to it's siblings, default is 0.\n       */\n      grow?: ResponsiveProp<number>;\n      /**\n       * Sets the initial main size of a flex item, default is \"auto\".\n       */\n      basis?: ResponsiveProp<CSSProperties[\"flexBasis\"]>;\n    }\n  >;\n\ntype FlexItemComponent = <T extends ElementType = \"div\">(\n  props: FlexItemProps<T>\n) => ReactElement | null;\n\nexport const FlexItem: FlexItemComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      as,\n      align,\n      children,\n      className,\n      shrink,\n      grow,\n      basis,\n      style,\n      ...rest\n    }: FlexItemProps<T>,\n    ref?: PolymorphicRef<T>\n  ) => {\n    const Component = as || \"div\";\n    const flexItemShrink = useResponsiveProp(shrink, 1);\n    const flexItemGrow = useResponsiveProp(grow, 0);\n    const flexItemBasis = useResponsiveProp(basis, \"auto\");\n\n    const itemStyle = {\n      \"--saltFlexItem-alignment\": align,\n      \"--saltFlexItem-shrink\": flexItemShrink,\n      \"--saltFlexItem-grow\": flexItemGrow,\n      \"--saltFlexItem-basis\": flexItemBasis,\n      ...style,\n    };\n    return (\n      <Component\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        style={itemStyle}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","useResponsiveProp","jsx","clsx"],"mappings":";;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA,CAAA;AACzC,MAAM,oBAAuB,GAAA;AAAA,EAClC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AACF,EAAA;AA+BO,MAAM,QAA8B,GAAAC,gBAAA;AAAA,EACzC,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AACxB,IAAM,MAAA,cAAA,GAAiBC,mCAAkB,CAAA,MAAA,EAAQ,CAAC,CAAA,CAAA;AAClD,IAAM,MAAA,YAAA,GAAeA,mCAAkB,CAAA,IAAA,EAAM,CAAC,CAAA,CAAA;AAC9C,IAAM,MAAA,aAAA,GAAgBA,mCAAkB,CAAA,KAAA,EAAO,MAAM,CAAA,CAAA;AAErD,IAAA,MAAM,SAAY,GAAA;AAAA,MAChB,0BAA4B,EAAA,KAAA;AAAA,MAC5B,uBAAyB,EAAA,cAAA;AAAA,MACzB,qBAAuB,EAAA,YAAA;AAAA,MACvB,sBAAwB,EAAA,aAAA;AAAA,MACxB,GAAG,KAAA;AAAA,KACL,CAAA;AACA,IAAA,uBACGC,cAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;;"}

package/dist-cjs/packages/core/src/flex-layout/FlexLayout.js

@@ -50,13 +50,17 @@ const FlexLayout = React.forwardRef(
       "--flexLayout-wrap": flexWrap ? "wrap" : "nowrap"
     };
     return /* @__PURE__ */ jsxRuntime.jsx(Component, {
-      className: clsx.clsx(className, withBaseName(), {
-        [withBaseName("separator")]: separatorAlignment && !wrap,
-        [withBaseName(
-          `separator-${flexDirection || "row"}-${separatorAlignment || "center"}`
-        )]: separatorAlignment && !wrap,
-        [withBaseName(`separator-${flexDirection || "row"}`)]: separatorAlignment && !wrap
-      }),
+      className: clsx.clsx(
+        withBaseName(),
+        {
+          [withBaseName("separator")]: separatorAlignment && !wrap,
+          [withBaseName(
+            `separator-${flexDirection || "row"}-${separatorAlignment || "center"}`
+          )]: separatorAlignment && !wrap,
+          [withBaseName(`separator-${flexDirection || "row"}`)]: separatorAlignment && !wrap
+        },
+        className
+      ),
       ref,
       style: flexLayoutStyles,
       ...rest,

package/dist-cjs/packages/core/src/flex-layout/FlexLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexLayout.js","sources":["../src/flex-layout/FlexLayout.tsx"],"sourcesContent":["import { ElementType, forwardRef, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport {\n  makePrefixer,\n  ResponsiveProp,\n  useResponsiveProp,\n  PolymorphicComponentPropWithRef,\n  PolymorphicRef,\n} from \"../utils\";\n\nimport \"./FlexLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltFlexLayout\");\n\nexport type LayoutSeparator = \"start\" | \"center\" | \"end\";\nexport type LayoutDirection = \"row\" | \"column\";\n\nexport const FLEX_ALIGNMENT_BASE = [\"start\", \"end\", \"center\"] as const;\nexport const FLEX_CONTENT_ALIGNMENT_BASE = [\n  ...FLEX_ALIGNMENT_BASE,\n  \"space-between\",\n  \"space-around\",\n  \"space-evenly\",\n] as const;\n\nexport type FlexAlignment = typeof FLEX_ALIGNMENT_BASE[number];\nexport type FlexContentAlignment = typeof FLEX_CONTENT_ALIGNMENT_BASE[number];\n\nexport type FlexLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n       */\n      align?: FlexAlignment | \"stretch\" | \"baseline\";\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"row\".\n       */\n      direction?: ResponsiveProp<LayoutDirection>;\n      /**\n       * Controls the space between items, default is 3.\n       */\n      gap?: ResponsiveProp<number>;\n      /**\n       * Defines the alignment along the main axis, default is \"start\".\n       */\n      justify?: FlexContentAlignment;\n      /**\n       * **Deprecated:** For separators see `StackLayout` component instead.\n       *\n       * Adds a separator between elements if wrap is not active, default is false.\n       */\n      separators?: LayoutSeparator | true;\n      /**\n       * Allow the items to wrap as needed, default is false.\n       */\n      wrap?: ResponsiveProp<boolean>;\n    }\n  >;\n\ntype FlexLayoutComponent = <T extends ElementType = \"div\">(\n  props: FlexLayoutProps<T>\n) => ReactElement | null;\n\nexport const FlexLayout: FlexLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      as,\n      align,\n      children,\n      className,\n      direction,\n      gap,\n      justify,\n      separators,\n      style,\n      wrap,\n      ...rest\n    }: FlexLayoutProps<T>,\n    ref?: PolymorphicRef<T>\n  ) => {\n    const Component = as || \"div\";\n    const separatorAlignment = separators === true ? \"center\" : separators;\n    const addPrefix = (style: string) => {\n      return style === \"start\" || style === \"end\" ? `flex-${style}` : style;\n    };\n\n    const flexGap = useResponsiveProp(gap, 3);\n    const flexDirection = useResponsiveProp(direction, \"row\");\n    const flexWrap = useResponsiveProp(wrap, false);\n    const flexLayoutStyles = {\n      ...style,\n      \"--flexLayout-align\": align && addPrefix(align),\n      \"--flexLayout-direction\": flexDirection,\n      \"--flexLayout-gap-multiplier\": flexGap,\n      \"--flexLayout-justify\": justify && addPrefix(justify),\n      \"--flexLayout-wrap\": flexWrap ? \"wrap\" : \"nowrap\",\n    };\n\n    return (\n      <Component\n        className={clsx(className, withBaseName(), {\n          [withBaseName(\"separator\")]: separatorAlignment && !wrap,\n          [withBaseName(\n            `separator-${flexDirection || \"row\"}-${\n              separatorAlignment || \"center\"\n            }`\n          )]: separatorAlignment && !wrap,\n          [withBaseName(`separator-${flexDirection || \"row\"}`)]:\n            separatorAlignment && !wrap,\n        })}\n        ref={ref}\n        style={flexLayoutStyles}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","style","useResponsiveProp","jsx","clsx"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA,CAAA;AAK3C,MAAM,mBAAsB,GAAA,CAAC,OAAS,EAAA,KAAA,EAAO,QAAQ,EAAA;AACrD,MAAM,2BAA8B,GAAA;AAAA,EACzC,GAAG,mBAAA;AAAA,EACH,eAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AACF,EAAA;AA0CO,MAAM,UAAkC,GAAAC,gBAAA;AAAA,EAC7C,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AACxB,IAAM,MAAA,kBAAA,GAAqB,UAAe,KAAA,IAAA,GAAO,QAAW,GAAA,UAAA,CAAA;AAC5D,IAAM,MAAA,SAAA,GAAY,CAACC,MAAkB,KAAA;AACnC,MAAA,OAAOA,MAAU,KAAA,OAAA,IAAWA,MAAU,KAAA,KAAA,GAAQ,QAAQA,MAAUA,CAAAA,CAAAA,GAAAA,MAAAA,CAAAA;AAAA,KAClE,CAAA;AAEA,IAAM,MAAA,OAAA,GAAUC,mCAAkB,CAAA,GAAA,EAAK,CAAC,CAAA,CAAA;AACxC,IAAM,MAAA,aAAA,GAAgBA,mCAAkB,CAAA,SAAA,EAAW,KAAK,CAAA,CAAA;AACxD,IAAM,MAAA,QAAA,GAAWA,mCAAkB,CAAA,IAAA,EAAM,KAAK,CAAA,CAAA;AAC9C,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,GAAG,KAAA;AAAA,MACH,oBAAA,EAAsB,KAAS,IAAA,SAAA,CAAU,KAAK,CAAA;AAAA,MAC9C,wBAA0B,EAAA,aAAA;AAAA,MAC1B,6BAA+B,EAAA,OAAA;AAAA,MAC/B,sBAAA,EAAwB,OAAW,IAAA,SAAA,CAAU,OAAO,CAAA;AAAA,MACpD,mBAAA,EAAqB,WAAW,MAAS,GAAA,QAAA;AAAA,KAC3C,CAAA;AAEA,IAAA,uBACGC,cAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,SAAW,EAAA,YAAA,EAAgB,EAAA;AAAA,QACzC,CAAC,YAAA,CAAa,WAAW,CAAA,GAAI,sBAAsB,CAAC,IAAA;AAAA,QACpD,CAAC,YAAA;AAAA,UACC,CAAA,UAAA,EAAa,aAAiB,IAAA,KAAA,CAAA,CAAA,EAC5B,kBAAsB,IAAA,QAAA,CAAA,CAAA;AAAA,SAE1B,GAAI,sBAAsB,CAAC,IAAA;AAAA,QAC3B,CAAC,YAAa,CAAA,CAAA,UAAA,EAAa,iBAAiB,KAAO,CAAA,CAAA,CAAA,GACjD,sBAAsB,CAAC,IAAA;AAAA,OAC1B,CAAA;AAAA,MACD,GAAA;AAAA,MACA,KAAO,EAAA,gBAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;;;"}
+{"version":3,"file":"FlexLayout.js","sources":["../src/flex-layout/FlexLayout.tsx"],"sourcesContent":["import { ElementType, forwardRef, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport {\n  makePrefixer,\n  ResponsiveProp,\n  useResponsiveProp,\n  PolymorphicComponentPropWithRef,\n  PolymorphicRef,\n} from \"../utils\";\n\nimport \"./FlexLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltFlexLayout\");\n\nexport type LayoutSeparator = \"start\" | \"center\" | \"end\";\nexport type LayoutDirection = \"row\" | \"column\";\n\nexport const FLEX_ALIGNMENT_BASE = [\"start\", \"end\", \"center\"] as const;\nexport const FLEX_CONTENT_ALIGNMENT_BASE = [\n  ...FLEX_ALIGNMENT_BASE,\n  \"space-between\",\n  \"space-around\",\n  \"space-evenly\",\n] as const;\n\nexport type FlexAlignment = typeof FLEX_ALIGNMENT_BASE[number];\nexport type FlexContentAlignment = typeof FLEX_CONTENT_ALIGNMENT_BASE[number];\n\nexport type FlexLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n       */\n      align?: FlexAlignment | \"stretch\" | \"baseline\";\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"row\".\n       */\n      direction?: ResponsiveProp<LayoutDirection>;\n      /**\n       * Controls the space between items, default is 3.\n       */\n      gap?: ResponsiveProp<number>;\n      /**\n       * Defines the alignment along the main axis, default is \"start\".\n       */\n      justify?: FlexContentAlignment;\n      /**\n       * **Deprecated:** For separators see `StackLayout` component instead.\n       *\n       * Adds a separator between elements if wrap is not active, default is false.\n       */\n      separators?: LayoutSeparator | true;\n      /**\n       * Allow the items to wrap as needed, default is false.\n       */\n      wrap?: ResponsiveProp<boolean>;\n    }\n  >;\n\ntype FlexLayoutComponent = <T extends ElementType = \"div\">(\n  props: FlexLayoutProps<T>\n) => ReactElement | null;\n\nexport const FlexLayout: FlexLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      as,\n      align,\n      children,\n      className,\n      direction,\n      gap,\n      justify,\n      separators,\n      style,\n      wrap,\n      ...rest\n    }: FlexLayoutProps<T>,\n    ref?: PolymorphicRef<T>\n  ) => {\n    const Component = as || \"div\";\n    const separatorAlignment = separators === true ? \"center\" : separators;\n    const addPrefix = (style: string) => {\n      return style === \"start\" || style === \"end\" ? `flex-${style}` : style;\n    };\n\n    const flexGap = useResponsiveProp(gap, 3);\n    const flexDirection = useResponsiveProp(direction, \"row\");\n    const flexWrap = useResponsiveProp(wrap, false);\n    const flexLayoutStyles = {\n      ...style,\n      \"--flexLayout-align\": align && addPrefix(align),\n      \"--flexLayout-direction\": flexDirection,\n      \"--flexLayout-gap-multiplier\": flexGap,\n      \"--flexLayout-justify\": justify && addPrefix(justify),\n      \"--flexLayout-wrap\": flexWrap ? \"wrap\" : \"nowrap\",\n    };\n\n    return (\n      <Component\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"separator\")]: separatorAlignment && !wrap,\n            [withBaseName(\n              `separator-${flexDirection || \"row\"}-${\n                separatorAlignment || \"center\"\n              }`\n            )]: separatorAlignment && !wrap,\n            [withBaseName(`separator-${flexDirection || \"row\"}`)]:\n              separatorAlignment && !wrap,\n          },\n          className\n        )}\n        ref={ref}\n        style={flexLayoutStyles}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","style","useResponsiveProp","jsx","clsx"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA,CAAA;AAK3C,MAAM,mBAAsB,GAAA,CAAC,OAAS,EAAA,KAAA,EAAO,QAAQ,EAAA;AACrD,MAAM,2BAA8B,GAAA;AAAA,EACzC,GAAG,mBAAA;AAAA,EACH,eAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AACF,EAAA;AA0CO,MAAM,UAAkC,GAAAC,gBAAA;AAAA,EAC7C,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AACxB,IAAM,MAAA,kBAAA,GAAqB,UAAe,KAAA,IAAA,GAAO,QAAW,GAAA,UAAA,CAAA;AAC5D,IAAM,MAAA,SAAA,GAAY,CAACC,MAAkB,KAAA;AACnC,MAAA,OAAOA,MAAU,KAAA,OAAA,IAAWA,MAAU,KAAA,KAAA,GAAQ,QAAQA,MAAUA,CAAAA,CAAAA,GAAAA,MAAAA,CAAAA;AAAA,KAClE,CAAA;AAEA,IAAM,MAAA,OAAA,GAAUC,mCAAkB,CAAA,GAAA,EAAK,CAAC,CAAA,CAAA;AACxC,IAAM,MAAA,aAAA,GAAgBA,mCAAkB,CAAA,SAAA,EAAW,KAAK,CAAA,CAAA;AACxD,IAAM,MAAA,QAAA,GAAWA,mCAAkB,CAAA,IAAA,EAAM,KAAK,CAAA,CAAA;AAC9C,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,GAAG,KAAA;AAAA,MACH,oBAAA,EAAsB,KAAS,IAAA,SAAA,CAAU,KAAK,CAAA;AAAA,MAC9C,wBAA0B,EAAA,aAAA;AAAA,MAC1B,6BAA+B,EAAA,OAAA;AAAA,MAC/B,sBAAA,EAAwB,OAAW,IAAA,SAAA,CAAU,OAAO,CAAA;AAAA,MACpD,mBAAA,EAAqB,WAAW,MAAS,GAAA,QAAA;AAAA,KAC3C,CAAA;AAEA,IAAA,uBACGC,cAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,WAAW,CAAA,GAAI,sBAAsB,CAAC,IAAA;AAAA,UACpD,CAAC,YAAA;AAAA,YACC,CAAA,UAAA,EAAa,aAAiB,IAAA,KAAA,CAAA,CAAA,EAC5B,kBAAsB,IAAA,QAAA,CAAA,CAAA;AAAA,WAE1B,GAAI,sBAAsB,CAAC,IAAA;AAAA,UAC3B,CAAC,YAAa,CAAA,CAAA,UAAA,EAAa,iBAAiB,KAAO,CAAA,CAAA,CAAA,GACjD,sBAAsB,CAAC,IAAA;AAAA,SAC3B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACA,KAAO,EAAA,gBAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;;;"}

package/dist-cjs/packages/core/src/index.js

@@ -6,6 +6,7 @@ var AriaAnnouncerContext = require('./aria-announcer/AriaAnnouncerContext.js');
 var AriaAnnounce = require('./aria-announcer/AriaAnnounce.js');
 var AriaAnnouncerProvider = require('./aria-announcer/AriaAnnouncerProvider.js');
 var useAriaAnnouncer = require('./aria-announcer/useAriaAnnouncer.js');
+var Avatar = require('./avatar/Avatar.js');
 var BorderItem = require('./border-item/BorderItem.js');
 var BorderLayout = require('./border-layout/BorderLayout.js');
 var Breakpoints = require('./breakpoints/Breakpoints.js');
@@ -59,6 +60,7 @@ exports.AriaAnnounce = AriaAnnounce.AriaAnnounce;
 exports.ARIA_ANNOUNCE_DELAY = AriaAnnouncerProvider.ARIA_ANNOUNCE_DELAY;
 exports.AriaAnnouncerProvider = AriaAnnouncerProvider.AriaAnnouncerProvider;
 exports.useAriaAnnouncer = useAriaAnnouncer.useAriaAnnouncer;
+exports.Avatar = Avatar.Avatar;
 exports.BORDER_POSITION = BorderItem.BORDER_POSITION;
 exports.BorderItem = BorderItem.BorderItem;
 exports.BorderLayout = BorderLayout.BorderLayout;

package/dist-cjs/packages/core/src/index.js.map

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

package/dist-cjs/packages/core/src/spinner/Spinner.css.js

@@ -2,7 +2,7 @@
 
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = "/* Styles applied to the root element */\n.saltSpinner {\n  position: relative;\n}\n\n/* Styles applied to the SVG stop elements */\n.saltSpinner-gradientStop {\n  stop-color: var(--saltSpinner-gradient-color, var(--salt-measured-fill));\n}\n\n/* Styles applied when `size=\"default\"` */\n.saltSpinner-default {\n  height: var(--salt-size-base);\n  width: var(--salt-size-base);\n}\n\n/* Styles applied when `size=\"large\"` */\n.saltSpinner-large {\n  height: calc(var(--salt-size-base) * 2);\n  width: calc(var(--salt-size-base) * 2);\n}\n\n/* Styles applied to the SVG */\n.saltSpinner-spinner {\n  animation: spinner 0.9s linear infinite;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n\n@keyframes spinner {\n  0% {\n    transform: rotate(0);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
+var css_248z = "/* Styles applied to the root element */\n.saltSpinner {\n  position: relative;\n}\n\n/* Styles applied to the SVG stop elements */\n.saltSpinner-gradientStop {\n  stop-color: var(--saltSpinner-gradient-color, var(--salt-accent-background));\n}\n\n/* Styles applied when `size=\"default\"` */\n.saltSpinner-default {\n  height: var(--salt-size-base);\n  width: var(--salt-size-base);\n}\n\n/* Styles applied when `size=\"large\"` */\n.saltSpinner-large {\n  height: calc(var(--salt-size-base) * 2);\n  width: calc(var(--salt-size-base) * 2);\n}\n\n/* Styles applied to the SVG */\n.saltSpinner-spinner {\n  animation: spinner 0.9s linear infinite;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n\n@keyframes spinner {\n  0% {\n    transform: rotate(0);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
 styleInject_es(css_248z);
 
 module.exports = css_248z;

package/dist-cjs/packages/core/src/spinner/Spinner.js

@@ -37,12 +37,12 @@ const Spinner = React.forwardRef(
         return;
       announce(ariaLabel);
       const startTime = new Date().getTime();
-      const interval = setInterval(() => {
+      const interval = announcerInterval > 0 && setInterval(() => {
         if (new Date().getTime() - startTime > announcerTimeout) {
           announce(
             `${ariaLabel} is still in progress, but will no longer announce.`
           );
-          clearInterval(interval);
+          interval && clearInterval(interval);
           return;
         }
         announce(ariaLabel);
@@ -50,7 +50,7 @@ const Spinner = React.forwardRef(
       return () => {
         if (disableAnnouncer)
           return;
-        clearInterval(interval);
+        interval && clearInterval(interval);
         if (completionAnnouncement) {
           announce(completionAnnouncement);
         }

package/dist-cjs/packages/core/src/spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useEffect } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { makePrefixer, useId } from \"../utils\";\nimport { SpinnerSVG } from \"./svgSpinners/SpinnerSVG\";\n\nimport \"./Spinner.css\";\n\n/**\n * Spinner component, provides an indeterminate loading indicator\n *\n * @example\n * <Spinner size=\"default | large\" />\n */\n\nexport const SpinnerSizeValues = [\"default\", \"large\"] as const;\nexport type SpinnerSize = typeof SpinnerSizeValues[number];\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Determines the interval on which the component will continue to announce the aria-label. Defaults to 5000ms (5s)\n   */\n  announcerInterval?: number;\n  /**\n   *  * Determines the interval after which the component will stop announcing the aria-label. Defaults to 20000ms (20s)\n   */\n  announcerTimeout?: number;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * Determines the message to be announced by the component when it unmounts. Set to null if not needed.\n   */\n  completionAnnouncement?: string | null;\n  /**\n   * If true, built in aria announcer will be inactive\n   */\n  disableAnnouncer?: boolean;\n  /**\n   * The prop for the role attribute of the component\n   */\n  role?: string;\n  /**\n   * Determines the size of the spinner. Must be one of: 'default', 'large'.\n   */\n  size?: SpinnerSize;\n  /**\n   * The ids of the SvgSpinner components\n   */\n  id?: string;\n}\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n  function Spinner(\n    {\n      \"aria-label\": ariaLabel = \"loading\",\n      announcerInterval = 5000,\n      announcerTimeout = 20000,\n      completionAnnouncement = `finished ${ariaLabel}`,\n      disableAnnouncer,\n      role = \"img\",\n      className,\n      size = \"default\",\n      id: idProp,\n      ...rest\n    },\n    ref\n  ) {\n    const id = useId(idProp);\n\n    const { announce } = useAriaAnnouncer();\n\n    useEffect(() => {\n      if (disableAnnouncer) return;\n\n      announce(ariaLabel);\n\n      const startTime = new Date().getTime();\n\n      const interval =\n        // announcerInterval > 0 &&\n        // above line was causing typescript type error that I didn't manage to sort out right away\n        setInterval(() => {\n          if (new Date().getTime() - startTime > announcerTimeout) {\n            // the announcer will stop after 20s\n            announce(\n              `${ariaLabel} is still in progress, but will no longer announce.`\n            );\n            clearInterval(interval);\n            return;\n          }\n          announce(ariaLabel);\n        }, announcerInterval);\n\n      return () => {\n        if (disableAnnouncer) return;\n\n        clearInterval(interval);\n        if (completionAnnouncement) {\n          announce(completionAnnouncement);\n        }\n      };\n    }, [\n      announce,\n      announcerInterval,\n      announcerTimeout,\n      ariaLabel,\n      completionAnnouncement,\n      disableAnnouncer,\n    ]);\n\n    return (\n      <div\n        aria-label={ariaLabel}\n        className={clsx(withBaseName(), withBaseName(size), className)}\n        ref={ref}\n        role={role}\n        {...rest}\n      >\n        <SpinnerSVG id={id!} />\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","Spinner","useId","useAriaAnnouncer","useEffect","jsx","clsx","SpinnerSVG"],"mappings":";;;;;;;;;;;;;;;;;AAea,MAAA,iBAAA,GAAoB,CAAC,SAAA,EAAW,OAAO,EAAA;AAEpD,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA,CAAA;AAqCxC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QACP,CAAA;AAAA,IACE,cAAc,SAAY,GAAA,SAAA;AAAA,IAC1B,iBAAoB,GAAA,GAAA;AAAA,IACpB,gBAAmB,GAAA,GAAA;AAAA,IACnB,yBAAyB,CAAY,SAAA,EAAA,SAAA,CAAA,CAAA;AAAA,IACrC,gBAAA;AAAA,IACA,IAAO,GAAA,KAAA;AAAA,IACP,SAAA;AAAA,IACA,IAAO,GAAA,SAAA;AAAA,IACP,EAAI,EAAA,MAAA;AAAA,IACD,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA,EAAA,GAAKC,YAAM,MAAM,CAAA,CAAA;AAEvB,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,iCAAiB,EAAA,CAAA;AAEtC,IAAAC,eAAA,CAAU,MAAM;AACd,MAAI,IAAA,gBAAA;AAAkB,QAAA,OAAA;AAEtB,MAAA,QAAA,CAAS,SAAS,CAAA,CAAA;AAElB,MAAA,MAAM,SAAY,GAAA,IAAI,IAAK,EAAA,CAAE,OAAQ,EAAA,CAAA;AAErC,MAAM,MAAA,QAAA,GAGJ,YAAY,MAAM;AAChB,QAAA,IAAI,IAAI,IAAK,EAAA,CAAE,OAAQ,EAAA,GAAI,YAAY,gBAAkB,EAAA;AAEvD,UAAA,QAAA;AAAA,YACE,CAAG,EAAA,SAAA,CAAA,mDAAA,CAAA;AAAA,WACL,CAAA;AACA,UAAA,aAAA,CAAc,QAAQ,CAAA,CAAA;AACtB,UAAA,OAAA;AAAA,SACF;AACA,QAAA,QAAA,CAAS,SAAS,CAAA,CAAA;AAAA,SACjB,iBAAiB,CAAA,CAAA;AAEtB,MAAA,OAAO,MAAM;AACX,QAAI,IAAA,gBAAA;AAAkB,UAAA,OAAA;AAEtB,QAAA,aAAA,CAAc,QAAQ,CAAA,CAAA;AACtB,QAAA,IAAI,sBAAwB,EAAA;AAC1B,UAAA,QAAA,CAAS,sBAAsB,CAAA,CAAA;AAAA,SACjC;AAAA,OACF,CAAA;AAAA,KACC,EAAA;AAAA,MACD,QAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,SAAA;AAAA,MACA,sBAAA;AAAA,MACA,gBAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,YAAY,EAAA,SAAA;AAAA,MACZ,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,IAAI,GAAG,SAAS,CAAA;AAAA,MAC7D,GAAA;AAAA,MACA,IAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAAD,cAAA,CAAAE,qBAAA,EAAA;AAAA,QAAW,EAAA;AAAA,OAAS,CAAA;AAAA,KACvB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;;"}
+{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useEffect } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { makePrefixer, useId } from \"../utils\";\nimport { SpinnerSVG } from \"./svgSpinners/SpinnerSVG\";\n\nimport \"./Spinner.css\";\n\n/**\n * Spinner component, provides an indeterminate loading indicator\n *\n * @example\n * <Spinner size=\"default | large\" />\n */\n\nexport const SpinnerSizeValues = [\"default\", \"large\"] as const;\nexport type SpinnerSize = typeof SpinnerSizeValues[number];\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Determines the interval on which the component will continue to announce the aria-label. Defaults to 5000ms (5s)\n   */\n  announcerInterval?: number;\n  /**\n   *  * Determines the interval after which the component will stop announcing the aria-label. Defaults to 20000ms (20s)\n   */\n  announcerTimeout?: number;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * Determines the message to be announced by the component when it unmounts. Set to null if not needed.\n   */\n  completionAnnouncement?: string | null;\n  /**\n   * If true, built in aria announcer will be inactive\n   */\n  disableAnnouncer?: boolean;\n  /**\n   * The prop for the role attribute of the component\n   */\n  role?: string;\n  /**\n   * Determines the size of the spinner. Must be one of: 'default', 'large'.\n   */\n  size?: SpinnerSize;\n  /**\n   * The ids of the SvgSpinner components\n   */\n  id?: string;\n}\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n  function Spinner(\n    {\n      \"aria-label\": ariaLabel = \"loading\",\n      announcerInterval = 5000,\n      announcerTimeout = 20000,\n      completionAnnouncement = `finished ${ariaLabel}`,\n      disableAnnouncer,\n      role = \"img\",\n      className,\n      size = \"default\",\n      id: idProp,\n      ...rest\n    },\n    ref\n  ) {\n    const id = useId(idProp);\n\n    const { announce } = useAriaAnnouncer();\n\n    useEffect(() => {\n      if (disableAnnouncer) return;\n\n      announce(ariaLabel);\n\n      const startTime = new Date().getTime();\n\n      const interval =\n        announcerInterval > 0 &&\n        setInterval(() => {\n          if (new Date().getTime() - startTime > announcerTimeout) {\n            // The announcer will stop after `announcerTimeout` time\n            announce(\n              `${ariaLabel} is still in progress, but will no longer announce.`\n            );\n            interval && clearInterval(interval);\n            return;\n          }\n          announce(ariaLabel);\n        }, announcerInterval);\n\n      return () => {\n        if (disableAnnouncer) return;\n\n        interval && clearInterval(interval);\n        if (completionAnnouncement) {\n          announce(completionAnnouncement);\n        }\n      };\n    }, [\n      announce,\n      announcerInterval,\n      announcerTimeout,\n      ariaLabel,\n      completionAnnouncement,\n      disableAnnouncer,\n    ]);\n\n    return (\n      <div\n        aria-label={ariaLabel}\n        className={clsx(withBaseName(), withBaseName(size), className)}\n        ref={ref}\n        role={role}\n        {...rest}\n      >\n        <SpinnerSVG id={id} />\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","Spinner","useId","useAriaAnnouncer","useEffect","jsx","clsx","SpinnerSVG"],"mappings":";;;;;;;;;;;;;;;;;AAea,MAAA,iBAAA,GAAoB,CAAC,SAAA,EAAW,OAAO,EAAA;AAEpD,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA,CAAA;AAqCxC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QACP,CAAA;AAAA,IACE,cAAc,SAAY,GAAA,SAAA;AAAA,IAC1B,iBAAoB,GAAA,GAAA;AAAA,IACpB,gBAAmB,GAAA,GAAA;AAAA,IACnB,yBAAyB,CAAY,SAAA,EAAA,SAAA,CAAA,CAAA;AAAA,IACrC,gBAAA;AAAA,IACA,IAAO,GAAA,KAAA;AAAA,IACP,SAAA;AAAA,IACA,IAAO,GAAA,SAAA;AAAA,IACP,EAAI,EAAA,MAAA;AAAA,IACD,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA,EAAA,GAAKC,YAAM,MAAM,CAAA,CAAA;AAEvB,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,iCAAiB,EAAA,CAAA;AAEtC,IAAAC,eAAA,CAAU,MAAM;AACd,MAAI,IAAA,gBAAA;AAAkB,QAAA,OAAA;AAEtB,MAAA,QAAA,CAAS,SAAS,CAAA,CAAA;AAElB,MAAA,MAAM,SAAY,GAAA,IAAI,IAAK,EAAA,CAAE,OAAQ,EAAA,CAAA;AAErC,MAAA,MAAM,QACJ,GAAA,iBAAA,GAAoB,CACpB,IAAA,WAAA,CAAY,MAAM;AAChB,QAAA,IAAI,IAAI,IAAK,EAAA,CAAE,OAAQ,EAAA,GAAI,YAAY,gBAAkB,EAAA;AAEvD,UAAA,QAAA;AAAA,YACE,CAAG,EAAA,SAAA,CAAA,mDAAA,CAAA;AAAA,WACL,CAAA;AACA,UAAA,QAAA,IAAY,cAAc,QAAQ,CAAA,CAAA;AAClC,UAAA,OAAA;AAAA,SACF;AACA,QAAA,QAAA,CAAS,SAAS,CAAA,CAAA;AAAA,SACjB,iBAAiB,CAAA,CAAA;AAEtB,MAAA,OAAO,MAAM;AACX,QAAI,IAAA,gBAAA;AAAkB,UAAA,OAAA;AAEtB,QAAA,QAAA,IAAY,cAAc,QAAQ,CAAA,CAAA;AAClC,QAAA,IAAI,sBAAwB,EAAA;AAC1B,UAAA,QAAA,CAAS,sBAAsB,CAAA,CAAA;AAAA,SACjC;AAAA,OACF,CAAA;AAAA,KACC,EAAA;AAAA,MACD,QAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,SAAA;AAAA,MACA,sBAAA;AAAA,MACA,gBAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,YAAY,EAAA,SAAA;AAAA,MACZ,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,IAAI,GAAG,SAAS,CAAA;AAAA,MAC7D,GAAA;AAAA,MACA,IAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAAD,cAAA,CAAAE,qBAAA,EAAA;AAAA,QAAW,EAAA;AAAA,OAAQ,CAAA;AAAA,KACtB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;;"}

package/dist-cjs/packages/core/src/spinner/svgSpinners/SpinnerSVG.js

@@ -12,7 +12,8 @@ require('../../viewport/ViewportProvider.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltSpinner");
 const SpinnerSVG = (props) => {
-  const { id, rest } = props;
+  const { id: idProp, rest } = props;
+  const id = idProp || "svg-spinner";
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", {
     className: withBaseName("spinner"),
     viewBox: "0 0 28 28",

package/dist-cjs/packages/core/src/spinner/svgSpinners/SpinnerSVG.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerSVG.js","sources":["../src/spinner/svgSpinners/SpinnerSVG.tsx"],"sourcesContent":["import { SVGAttributes } from \"react\";\nimport { makePrefixer } from \"../../utils\";\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\n/* SVG based on MD, do not change viewbox attribute */\nexport const SpinnerSVG = (props: {\n  id: string;\n  rest?: Omit<SVGAttributes<SVGSVGElement>, \"id\">;\n}) => {\n  const { id, rest } = props;\n  return (\n    <svg\n      className={withBaseName(\"spinner\")}\n      viewBox=\"0 0 28 28\"\n      id={id}\n      {...rest}\n    >\n      <defs>\n        <linearGradient id={`${id}-1`} x1=\"100%\" x2=\"0%\" y1=\"78%\" y2=\"78%\">\n          <stop className={withBaseName(\"gradientStop\")} offset=\"0%\" />\n          <stop className={withBaseName(\"gradientStop\")} offset=\"100%\" />\n        </linearGradient>\n        <linearGradient id={`${id}-2`} x1=\"13%\" x2=\"100%\" y1=\"0%\" y2=\"87%\">\n          <stop className={withBaseName(\"gradientStop\")} offset=\"0%\" />\n          <stop\n            className={withBaseName(\"gradientStop\")}\n            offset=\"100%\"\n            stopOpacity=\"0\"\n          />\n        </linearGradient>\n      </defs>\n      <g fill=\"none\" fillRule=\"evenodd\">\n        <path\n          d=\"M28 14H24C24 8.47715 19.5228 4 14 4C8.47715 4 4 8.47715 4 14 H 0 C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14Z\"\n          fill={`url(#${id}-1)`}\n        />\n        <path\n          d=\"M4 14 C4 19.5228 8.47715 24 14 24V28C6.26801 28 0 21.732 0 14 Z\"\n          fill={`url(#${id}-2)`}\n        />\n      </g>\n    </svg>\n  );\n};\n"],"names":["makePrefixer","jsxs","jsx"],"mappings":";;;;;;;;;;;;AAGA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA,CAAA;AAGlC,MAAA,UAAA,GAAa,CAAC,KAGrB,KAAA;AACJ,EAAM,MAAA,EAAE,EAAI,EAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACrB,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,IACjC,OAAQ,EAAA,WAAA;AAAA,IACR,EAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAACA,eAAA,CAAA,MAAA,EAAA;AAAA,QACC,QAAA,EAAA;AAAA,0BAACA,eAAA,CAAA,gBAAA,EAAA;AAAA,YAAe,IAAI,CAAG,EAAA,EAAA,CAAA,EAAA,CAAA;AAAA,YAAQ,EAAG,EAAA,MAAA;AAAA,YAAO,EAAG,EAAA,IAAA;AAAA,YAAK,EAAG,EAAA,KAAA;AAAA,YAAM,EAAG,EAAA,KAAA;AAAA,YAC3D,QAAA,EAAA;AAAA,8BAACC,cAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBAAG,MAAO,EAAA,IAAA;AAAA,eAAK,CAAA;AAAA,8BAC1DA,cAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBAAG,MAAO,EAAA,MAAA;AAAA,eAAO,CAAA;AAAA,aAAA;AAAA,WAC/D,CAAA;AAAA,0BACCD,eAAA,CAAA,gBAAA,EAAA;AAAA,YAAe,IAAI,CAAG,EAAA,EAAA,CAAA,EAAA,CAAA;AAAA,YAAQ,EAAG,EAAA,KAAA;AAAA,YAAM,EAAG,EAAA,MAAA;AAAA,YAAO,EAAG,EAAA,IAAA;AAAA,YAAK,EAAG,EAAA,KAAA;AAAA,YAC3D,QAAA,EAAA;AAAA,8BAACC,cAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBAAG,MAAO,EAAA,IAAA;AAAA,eAAK,CAAA;AAAA,8BAC1DA,cAAA,CAAA,MAAA,EAAA;AAAA,gBACC,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBACtC,MAAO,EAAA,MAAA;AAAA,gBACP,WAAY,EAAA,GAAA;AAAA,eACd,CAAA;AAAA,aAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,sBACCD,eAAA,CAAA,GAAA,EAAA;AAAA,QAAE,IAAK,EAAA,MAAA;AAAA,QAAO,QAAS,EAAA,SAAA;AAAA,QACtB,QAAA,EAAA;AAAA,0BAACC,cAAA,CAAA,MAAA,EAAA;AAAA,YACC,CAAE,EAAA,uHAAA;AAAA,YACF,MAAM,CAAQ,KAAA,EAAA,EAAA,CAAA,GAAA,CAAA;AAAA,WAChB,CAAA;AAAA,0BACCA,cAAA,CAAA,MAAA,EAAA;AAAA,YACC,CAAE,EAAA,iEAAA;AAAA,YACF,MAAM,CAAQ,KAAA,EAAA,EAAA,CAAA,GAAA,CAAA;AAAA,WAChB,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SpinnerSVG.js","sources":["../src/spinner/svgSpinners/SpinnerSVG.tsx"],"sourcesContent":["import { SVGAttributes } from \"react\";\nimport { makePrefixer } from \"../../utils\";\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\n/* SVG based on MD, do not change viewbox attribute */\nexport const SpinnerSVG = (props: {\n  id?: string;\n  rest?: Omit<SVGAttributes<SVGSVGElement>, \"id\">;\n}) => {\n  const { id: idProp, rest } = props;\n  const id = idProp || \"svg-spinner\";\n\n  return (\n    <svg\n      className={withBaseName(\"spinner\")}\n      viewBox=\"0 0 28 28\"\n      id={id}\n      {...rest}\n    >\n      <defs>\n        <linearGradient id={`${id}-1`} x1=\"100%\" x2=\"0%\" y1=\"78%\" y2=\"78%\">\n          <stop className={withBaseName(\"gradientStop\")} offset=\"0%\" />\n          <stop className={withBaseName(\"gradientStop\")} offset=\"100%\" />\n        </linearGradient>\n        <linearGradient id={`${id}-2`} x1=\"13%\" x2=\"100%\" y1=\"0%\" y2=\"87%\">\n          <stop className={withBaseName(\"gradientStop\")} offset=\"0%\" />\n          <stop\n            className={withBaseName(\"gradientStop\")}\n            offset=\"100%\"\n            stopOpacity=\"0\"\n          />\n        </linearGradient>\n      </defs>\n      <g fill=\"none\" fillRule=\"evenodd\">\n        <path\n          d=\"M28 14H24C24 8.47715 19.5228 4 14 4C8.47715 4 4 8.47715 4 14 H 0 C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14Z\"\n          fill={`url(#${id}-1)`}\n        />\n        <path\n          d=\"M4 14 C4 19.5228 8.47715 24 14 24V28C6.26801 28 0 21.732 0 14 Z\"\n          fill={`url(#${id}-2)`}\n        />\n      </g>\n    </svg>\n  );\n};\n"],"names":["makePrefixer","jsxs","jsx"],"mappings":";;;;;;;;;;;;AAGA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA,CAAA;AAGlC,MAAA,UAAA,GAAa,CAAC,KAGrB,KAAA;AACJ,EAAA,MAAM,EAAE,EAAA,EAAI,MAAQ,EAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAC7B,EAAA,MAAM,KAAK,MAAU,IAAA,aAAA,CAAA;AAErB,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,IACjC,OAAQ,EAAA,WAAA;AAAA,IACR,EAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAACA,eAAA,CAAA,MAAA,EAAA;AAAA,QACC,QAAA,EAAA;AAAA,0BAACA,eAAA,CAAA,gBAAA,EAAA;AAAA,YAAe,IAAI,CAAG,EAAA,EAAA,CAAA,EAAA,CAAA;AAAA,YAAQ,EAAG,EAAA,MAAA;AAAA,YAAO,EAAG,EAAA,IAAA;AAAA,YAAK,EAAG,EAAA,KAAA;AAAA,YAAM,EAAG,EAAA,KAAA;AAAA,YAC3D,QAAA,EAAA;AAAA,8BAACC,cAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBAAG,MAAO,EAAA,IAAA;AAAA,eAAK,CAAA;AAAA,8BAC1DA,cAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBAAG,MAAO,EAAA,MAAA;AAAA,eAAO,CAAA;AAAA,aAAA;AAAA,WAC/D,CAAA;AAAA,0BACCD,eAAA,CAAA,gBAAA,EAAA;AAAA,YAAe,IAAI,CAAG,EAAA,EAAA,CAAA,EAAA,CAAA;AAAA,YAAQ,EAAG,EAAA,KAAA;AAAA,YAAM,EAAG,EAAA,MAAA;AAAA,YAAO,EAAG,EAAA,IAAA;AAAA,YAAK,EAAG,EAAA,KAAA;AAAA,YAC3D,QAAA,EAAA;AAAA,8BAACC,cAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBAAG,MAAO,EAAA,IAAA;AAAA,eAAK,CAAA;AAAA,8BAC1DA,cAAA,CAAA,MAAA,EAAA;AAAA,gBACC,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBACtC,MAAO,EAAA,MAAA;AAAA,gBACP,WAAY,EAAA,GAAA;AAAA,eACd,CAAA;AAAA,aAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,sBACCD,eAAA,CAAA,GAAA,EAAA;AAAA,QAAE,IAAK,EAAA,MAAA;AAAA,QAAO,QAAS,EAAA,SAAA;AAAA,QACtB,QAAA,EAAA;AAAA,0BAACC,cAAA,CAAA,MAAA,EAAA;AAAA,YACC,CAAE,EAAA,uHAAA;AAAA,YACF,MAAM,CAAQ,KAAA,EAAA,EAAA,CAAA,GAAA,CAAA;AAAA,WAChB,CAAA;AAAA,0BACCA,cAAA,CAAA,MAAA,EAAA;AAAA,YACC,CAAE,EAAA,iEAAA;AAAA,YACF,MAAM,CAAQ,KAAA,EAAA,EAAA,CAAA,GAAA,CAAA;AAAA,WAChB,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/packages/core/src/stack-layout/StackLayout.js

@@ -32,13 +32,13 @@ const StackLayout = React.forwardRef(
     };
     return /* @__PURE__ */ jsxRuntime.jsx(FlexLayout.FlexLayout, {
       className: clsx.clsx(
-        className,
         withBaseName(),
         withBaseName(flexDirection),
         {
           [withBaseName("separator")]: !!separatorAlignment,
           [separatorAlignment ? withBaseName(`separator-${separatorAlignment}`) : ""]: separatorAlignment
-        }
+        },
+        className
       ),
       ref,
       direction,

package/dist-cjs/packages/core/src/stack-layout/StackLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackLayout.js","sources":["../src/stack-layout/StackLayout.tsx"],"sourcesContent":["import { ElementType, forwardRef, ReactElement } from \"react\";\nimport {\n  FlexLayout,\n  FlexLayoutProps,\n  LayoutDirection,\n  LayoutSeparator,\n} from \"../flex-layout\";\nimport {\n  makePrefixer,\n  PolymorphicComponentPropWithRef,\n  PolymorphicRef,\n  ResponsiveProp,\n  useResponsiveProp,\n} from \"../utils\";\nimport { clsx } from \"clsx\";\nimport \"./StackLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltStackLayout\");\n\nexport type StackLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n       */\n      align?: FlexLayoutProps<ElementType>[\"align\"];\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"column\".\n       */\n      direction?: ResponsiveProp<LayoutDirection>;\n      /**\n       * Controls the space between items, default is 3.\n       */\n      gap?: FlexLayoutProps<ElementType>[\"gap\"];\n      /**\n       * Adds a separator between elements, default is false.\n       */\n      separators?: LayoutSeparator | boolean;\n    }\n  >;\n\ntype StackLayoutComponent = <T extends ElementType = \"div\">(\n  props: StackLayoutProps<T>\n) => ReactElement | null;\n\nexport const StackLayout: StackLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      children,\n      className,\n      direction = \"column\",\n      gap,\n      separators,\n      style,\n      ...rest\n    }: StackLayoutProps<T>,\n    ref?: PolymorphicRef<T>\n  ) => {\n    const flexGap = useResponsiveProp(gap, 3);\n    const separatorAlignment = separators === true ? \"center\" : separators;\n    const flexDirection = useResponsiveProp(direction, \"column\");\n    const stackLayoutStyles = {\n      ...style,\n      \"--stackLayout-gap-multiplier\": flexGap,\n    };\n    return (\n      <FlexLayout\n        className={clsx(\n          className,\n          withBaseName(),\n          withBaseName(flexDirection),\n          {\n            [withBaseName(\"separator\")]: !!separatorAlignment,\n            [separatorAlignment\n              ? withBaseName(`separator-${separatorAlignment}`)\n              : \"\"]: separatorAlignment,\n          }\n        )}\n        ref={ref}\n        direction={direction}\n        style={stackLayoutStyles}\n        wrap={false}\n        gap={flexGap}\n        {...rest}\n      >\n        {children}\n      </FlexLayout>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","useResponsiveProp","jsx","FlexLayout","clsx"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAeA,0BAAa,iBAAiB,CAAA,CAAA;AA6B5C,MAAM,WAAoC,GAAAC,gBAAA;AAAA,EAC/C,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAY,GAAA,QAAA;AAAA,IACZ,GAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAM,MAAA,OAAA,GAAUC,mCAAkB,CAAA,GAAA,EAAK,CAAC,CAAA,CAAA;AACxC,IAAM,MAAA,kBAAA,GAAqB,UAAe,KAAA,IAAA,GAAO,QAAW,GAAA,UAAA,CAAA;AAC5D,IAAM,MAAA,aAAA,GAAgBA,mCAAkB,CAAA,SAAA,EAAW,QAAQ,CAAA,CAAA;AAC3D,IAAA,MAAM,iBAAoB,GAAA;AAAA,MACxB,GAAG,KAAA;AAAA,MACH,8BAAgC,EAAA,OAAA;AAAA,KAClC,CAAA;AACA,IAAA,uBACGC,cAAA,CAAAC,qBAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,SAAA;AAAA,QACA,YAAa,EAAA;AAAA,QACb,aAAa,aAAa,CAAA;AAAA,QAC1B;AAAA,UACE,CAAC,YAAA,CAAa,WAAW,CAAA,GAAI,CAAC,CAAC,kBAAA;AAAA,UAC/B,CAAC,kBACG,GAAA,YAAA,CAAa,CAAa,UAAA,EAAA,kBAAA,CAAA,CAAoB,IAC9C,EAAK,GAAA,kBAAA;AAAA,SACX;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAO,EAAA,iBAAA;AAAA,MACP,IAAM,EAAA,KAAA;AAAA,MACN,GAAK,EAAA,OAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"StackLayout.js","sources":["../src/stack-layout/StackLayout.tsx"],"sourcesContent":["import { ElementType, forwardRef, ReactElement } from \"react\";\nimport {\n  FlexLayout,\n  FlexLayoutProps,\n  LayoutDirection,\n  LayoutSeparator,\n} from \"../flex-layout\";\nimport {\n  makePrefixer,\n  PolymorphicComponentPropWithRef,\n  PolymorphicRef,\n  ResponsiveProp,\n  useResponsiveProp,\n} from \"../utils\";\nimport { clsx } from \"clsx\";\nimport \"./StackLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltStackLayout\");\n\nexport type StackLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n       */\n      align?: FlexLayoutProps<ElementType>[\"align\"];\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"column\".\n       */\n      direction?: ResponsiveProp<LayoutDirection>;\n      /**\n       * Controls the space between items, default is 3.\n       */\n      gap?: FlexLayoutProps<ElementType>[\"gap\"];\n      /**\n       * Adds a separator between elements, default is false.\n       */\n      separators?: LayoutSeparator | boolean;\n    }\n  >;\n\ntype StackLayoutComponent = <T extends ElementType = \"div\">(\n  props: StackLayoutProps<T>\n) => ReactElement | null;\n\nexport const StackLayout: StackLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      children,\n      className,\n      direction = \"column\",\n      gap,\n      separators,\n      style,\n      ...rest\n    }: StackLayoutProps<T>,\n    ref?: PolymorphicRef<T>\n  ) => {\n    const flexGap = useResponsiveProp(gap, 3);\n    const separatorAlignment = separators === true ? \"center\" : separators;\n    const flexDirection = useResponsiveProp(direction, \"column\");\n    const stackLayoutStyles = {\n      ...style,\n      \"--stackLayout-gap-multiplier\": flexGap,\n    };\n    return (\n      <FlexLayout\n        className={clsx(\n          withBaseName(),\n          withBaseName(flexDirection),\n          {\n            [withBaseName(\"separator\")]: !!separatorAlignment,\n            [separatorAlignment\n              ? withBaseName(`separator-${separatorAlignment}`)\n              : \"\"]: separatorAlignment,\n          },\n          className\n        )}\n        ref={ref}\n        direction={direction}\n        style={stackLayoutStyles}\n        wrap={false}\n        gap={flexGap}\n        {...rest}\n      >\n        {children}\n      </FlexLayout>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","useResponsiveProp","jsx","FlexLayout","clsx"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAeA,0BAAa,iBAAiB,CAAA,CAAA;AA6B5C,MAAM,WAAoC,GAAAC,gBAAA;AAAA,EAC/C,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAY,GAAA,QAAA;AAAA,IACZ,GAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAM,MAAA,OAAA,GAAUC,mCAAkB,CAAA,GAAA,EAAK,CAAC,CAAA,CAAA;AACxC,IAAM,MAAA,kBAAA,GAAqB,UAAe,KAAA,IAAA,GAAO,QAAW,GAAA,UAAA,CAAA;AAC5D,IAAM,MAAA,aAAA,GAAgBA,mCAAkB,CAAA,SAAA,EAAW,QAAQ,CAAA,CAAA;AAC3D,IAAA,MAAM,iBAAoB,GAAA;AAAA,MACxB,GAAG,KAAA;AAAA,MACH,8BAAgC,EAAA,OAAA;AAAA,KAClC,CAAA;AACA,IAAA,uBACGC,cAAA,CAAAC,qBAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,aAAa,CAAA;AAAA,QAC1B;AAAA,UACE,CAAC,YAAA,CAAa,WAAW,CAAA,GAAI,CAAC,CAAC,kBAAA;AAAA,UAC/B,CAAC,kBACG,GAAA,YAAA,CAAa,CAAa,UAAA,EAAA,kBAAA,CAAA,CAAoB,IAC9C,EAAK,GAAA,kBAAA;AAAA,SACX;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAO,EAAA,iBAAA;AAAA,MACP,IAAM,EAAA,KAAA;AAAA,MACN,GAAK,EAAA,OAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}