@salt-ds/core 1.0.0

package/dist-es/packages/core/src/aria-announcer/AriaAnnounce.js

@@ -0,0 +1,18 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { useAriaAnnouncer } from './useAriaAnnouncer.js';
+
+const AriaAnnounce = ({
+  announcement
+}) => {
+  const { announce } = useAriaAnnouncer();
+  useEffect(() => {
+    if (announcement) {
+      announce(announcement);
+    }
+  }, [announce, announcement]);
+  return /* @__PURE__ */ jsx(Fragment, {});
+};
+
+export { AriaAnnounce };
+//# sourceMappingURL=AriaAnnounce.js.map

package/dist-es/packages/core/src/aria-announcer/AriaAnnounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AriaAnnounce.js","sources":["../src/aria-announcer/AriaAnnounce.tsx"],"sourcesContent":["import { ComponentType, useEffect } from \"react\";\n\nimport { useAriaAnnouncer } from \"./useAriaAnnouncer\";\n\nexport interface AriaAnnounceProps {\n  /**\n   * String which will be announced by screen readers on change\n   */\n  announcement?: string;\n}\n\nexport const AriaAnnounce: ComponentType<AriaAnnounceProps> = ({\n  announcement,\n}) => {\n  const { announce } = useAriaAnnouncer();\n\n  useEffect(() => {\n    if (announcement) {\n      announce(announcement);\n    }\n  }, [announce, announcement]);\n\n  // If we return null here, react-docgen wouldn't be able to locate the component\n  return <></>;\n};\n"],"names":[],"mappings":";;;;AAWO,MAAM,eAAiD,CAAC;AAAA,EAC7D,YAAA;AACF,CAAM,KAAA;AACJ,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,gBAAiB,EAAA,CAAA;AAEtC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAc,EAAA;AAChB,MAAA,QAAA,CAAS,YAAY,CAAA,CAAA;AAAA,KACvB;AAAA,GACC,EAAA,CAAC,QAAU,EAAA,YAAY,CAAC,CAAA,CAAA;AAG3B,EAAA,uBAAS,GAAA,CAAA,QAAA,EAAA,EAAA,CAAA,CAAA;AACX;;;;"}

package/dist-es/packages/core/src/aria-announcer/AriaAnnouncerContext.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+const AriaAnnouncerContext = createContext(
+  void 0
+);
+
+export { AriaAnnouncerContext };
+//# sourceMappingURL=AriaAnnouncerContext.js.map

package/dist-es/packages/core/src/aria-announcer/AriaAnnouncerContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AriaAnnouncerContext.js","sources":["../src/aria-announcer/AriaAnnouncerContext.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type AnnounceFn = (announcement: string, delay?: number) => void;\n\nexport type AriaAnnouncer = {\n  announce: AnnounceFn;\n};\n\nexport const AriaAnnouncerContext = createContext<AriaAnnouncer | undefined>(\n  undefined\n);\n"],"names":[],"mappings":";;AAQO,MAAM,oBAAuB,GAAA,aAAA;AAAA,EAClC,KAAA,CAAA;AACF;;;;"}

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

@@ -0,0 +1,73 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { AriaAnnouncerContext } from './AriaAnnouncerContext.js';
+
+const ARIA_ANNOUNCE_DELAY = 150;
+function AriaAnnouncerProvider({
+  children,
+  style
+}) {
+  const [currentAnnouncement, setCurrentAnnouncement] = useState("");
+  const announcementsRef = useRef([]);
+  const isAnnouncingRef = useRef(false);
+  const mountedRef = useRef(true);
+  const announceAll = useCallback(() => {
+    isAnnouncingRef.current = true;
+    if (announcementsRef.current.length && mountedRef.current) {
+      setCurrentAnnouncement("");
+      requestAnimationFrame(() => {
+        if (mountedRef.current) {
+          const announcement = announcementsRef.current.shift();
+          setCurrentAnnouncement(announcement);
+          setTimeout(() => {
+            announceAll();
+          }, ARIA_ANNOUNCE_DELAY);
+        }
+      });
+    } else {
+      isAnnouncingRef.current = false;
+    }
+  }, []);
+  const announce = useCallback(
+    (announcement) => {
+      announcementsRef.current.push(announcement);
+      if (!isAnnouncingRef.current) {
+        announceAll();
+      }
+    },
+    [announceAll]
+  );
+  useEffect(
+    () => () => {
+      mountedRef.current = false;
+    },
+    []
+  );
+  const value = useMemo(() => ({ announce }), [announce]);
+  return /* @__PURE__ */ jsxs(AriaAnnouncerContext.Provider, {
+    value,
+    children: [
+      children,
+      /* @__PURE__ */ jsx("div", {
+        "aria-atomic": "true",
+        "aria-live": "assertive",
+        style: {
+          position: "absolute",
+          height: 1,
+          width: 1,
+          padding: 0,
+          margin: -1,
+          overflow: "hidden",
+          clip: "rect(0, 0, 0, 0)",
+          whiteSpace: "nowrap",
+          borderWidth: 0,
+          ...style
+        },
+        children: currentAnnouncement
+      })
+    ]
+  });
+}
+
+export { ARIA_ANNOUNCE_DELAY, AriaAnnouncerProvider };
+//# sourceMappingURL=AriaAnnouncerProvider.js.map

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

@@ -0,0 +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":[],"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,GAAI,SAAS,EAAE,CAAA,CAAA;AAEjE,EAAM,MAAA,gBAAA,GAAmB,MAAiB,CAAA,EAAE,CAAA,CAAA;AAE5C,EAAM,MAAA,eAAA,GAAkB,OAAO,KAAK,CAAA,CAAA;AAGpC,EAAM,MAAA,UAAA,GAAa,OAAO,IAAI,CAAA,CAAA;AAG9B,EAAM,MAAA,WAAA,GAAc,YAAY,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,GAAA,WAAA;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,EAAA,SAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA,KACvB;AAAA,IACA,EAAC;AAAA,GACH,CAAA;AAEA,EAAM,MAAA,KAAA,GAAQ,QAAQ,OAAO,EAAE,UAAa,CAAA,EAAA,CAAC,QAAQ,CAAC,CAAA,CAAA;AACtD,EACE,uBAAA,IAAA,CAAC,qBAAqB,QAArB,EAAA;AAAA,IAA8B,KAAA;AAAA,IAC5B,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACA,GAAA,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-es/packages/core/src/aria-announcer/useAriaAnnouncer.js

@@ -0,0 +1,61 @@
+import { useContext, useRef, useCallback, useMemo, useEffect } from 'react';
+import { debounce } from '../utils/debounce.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { AriaAnnouncerContext } from './AriaAnnouncerContext.js';
+
+let warnedOnce = false;
+const useAriaAnnouncer = ({
+  debounce: debounceInterval = 0
+} = {}) => {
+  const context = useContext(AriaAnnouncerContext);
+  const mountedRef = useRef(true);
+  const baseAnnounce = useCallback(
+    (announcement, delay) => {
+      const isReactAnnouncerInstalled = context && context.announce;
+      if (process.env.NODE_ENV !== "production") {
+        if (isReactAnnouncerInstalled && warnedOnce) {
+          console.warn(
+            "useAriaAnnouncer is being used without an AriaAnnouncerProvider. Your application should be wrapped in an AriaAnnouncerProvider"
+          );
+          warnedOnce = true;
+        }
+      }
+      function makeAnnouncement() {
+        if (mountedRef.current) {
+          if (isReactAnnouncerInstalled) {
+            context.announce(announcement);
+          }
+        }
+      }
+      if (delay) {
+        setTimeout(makeAnnouncement, delay);
+      } else {
+        makeAnnouncement();
+      }
+    },
+    [context]
+  );
+  const announce = useMemo(
+    () => debounceInterval > 0 ? debounce(baseAnnounce, debounceInterval) : baseAnnounce,
+    [baseAnnounce, debounceInterval]
+  );
+  const ariaAnnouncer = useMemo(
+    () => ({
+      ...context,
+      announce
+    }),
+    [context, announce]
+  );
+  useEffect(
+    () => () => {
+      mountedRef.current = false;
+    },
+    []
+  );
+  return ariaAnnouncer;
+};
+
+export { useAriaAnnouncer };
+//# sourceMappingURL=useAriaAnnouncer.js.map

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

@@ -0,0 +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":[],"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,GAAU,WAAW,oBAAoB,CAAA,CAAA;AAC/C,EAAM,MAAA,UAAA,GAAa,OAAO,IAAI,CAAA,CAAA;AAC9B,EAAA,MAAM,YAAe,GAAA,WAAA;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,GAAA,OAAA;AAAA,IACf,MACE,gBAAmB,GAAA,CAAA,GACf,QAAS,CAAA,YAAA,EAAc,gBAAgB,CACvC,GAAA,YAAA;AAAA,IACN,CAAC,cAAc,gBAAgB,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA,OAAA;AAAA,IACpB,OAAO;AAAA,MACL,GAAG,OAAA;AAAA,MACH,QAAA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,SAAS,QAAQ,CAAA;AAAA,GACpB,CAAA;AAEA,EAAA,SAAA;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;;;;"}

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "/* Style applied to BorderItem when `sticky` positioning is on */\n.saltBorderItem-sticky {\n  position: sticky;\n  overflow: auto;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=BorderItem.css.js.map

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

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

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

@@ -0,0 +1,45 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import cx from 'classnames';
+import { GridItem } from '../grid-item/GridItem.js';
+import './BorderItem.css.js';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+
+const BORDER_POSITION = [
+  "north",
+  "west",
+  "center",
+  "east",
+  "south"
+];
+const withBaseName = makePrefixer("saltBorderItem");
+const BorderItem = forwardRef(
+  ({
+    children,
+    className,
+    position,
+    sticky = false,
+    style,
+    ...rest
+  }, ref) => {
+    const gridItemStyles = {
+      ...style,
+      "--gridItem-gridArea": position
+    };
+    return /* @__PURE__ */ jsx(GridItem, {
+      ref,
+      className: cx(withBaseName(), className, "saltGridItem-area", {
+        [withBaseName("sticky")]: sticky
+      }),
+      style: gridItemStyles,
+      ...rest,
+      children
+    });
+  }
+);
+
+export { BORDER_POSITION, BorderItem };
+//# sourceMappingURL=BorderItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BorderItem.js","sources":["../src/border-item/BorderItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement } from \"react\";\nimport cx from \"classnames\";\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={cx(withBaseName(), className, \"saltGridItem-area\", {\n          [withBaseName(\"sticky\")]: sticky,\n        })}\n        style={gridItemStyles}\n        {...rest}\n      >\n        {children}\n      </GridItem>\n    );\n  }\n);\n"],"names":[],"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,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAM3C,MAAM,UAAkC,GAAA,UAAA;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,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,EAAA,CAAG,YAAa,EAAA,EAAG,WAAW,mBAAqB,EAAA;AAAA,QAC5D,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;;;;"}

package/dist-es/packages/core/src/border-layout/BorderLayout.js

@@ -0,0 +1,51 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, Children, useEffect } from 'react';
+import cx from 'classnames';
+import { GridLayout } from '../grid-layout/GridLayout.js';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+
+const withBaseName = makePrefixer("saltBorderLayout");
+const numberOfColumns = 3;
+const BorderLayout = forwardRef(
+  ({ children, className, gap, style, ...rest }, ref) => {
+    const borderAreas = Children.map(
+      children,
+      (child) => child.props.position
+    );
+    const topSection = borderAreas.includes("north") ? "north ".repeat(numberOfColumns) : "none ".repeat(numberOfColumns);
+    const leftSection = borderAreas.includes("west") ? "west" : "center";
+    const rightSection = borderAreas.includes("east") ? "east" : "center";
+    const midSection = `${leftSection} center ${rightSection}`;
+    const bottomSection = borderAreas.includes("south") ? "south ".repeat(numberOfColumns) : "none ".repeat(numberOfColumns);
+    const gridTemplateAreas = `"${topSection}" "${midSection}" "${bottomSection}"`;
+    const hasMainSection = borderAreas.includes("center");
+    useEffect(() => {
+      if (process.env.NODE_ENV !== "production") {
+        if (!hasMainSection) {
+          console.warn(
+            "No main section has been found. A main section should be provided."
+          );
+        }
+      }
+    }, [hasMainSection]);
+    const borderLayoutStyles = {
+      ...style,
+      "--gridLayout-gridTemplate": gridTemplateAreas
+    };
+    return /* @__PURE__ */ jsx(GridLayout, {
+      className: cx(withBaseName(), className, "saltGridLayout-area"),
+      columns: numberOfColumns,
+      gap: gap || 0,
+      style: borderLayoutStyles,
+      ref,
+      ...rest,
+      children
+    });
+  }
+);
+
+export { BorderLayout };
+//# sourceMappingURL=BorderLayout.js.map

package/dist-es/packages/core/src/border-layout/BorderLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BorderLayout.js","sources":["../src/border-layout/BorderLayout.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  ReactElement,\n  useEffect,\n  ElementType,\n} from \"react\";\nimport cx from \"classnames\";\n\nimport { GridLayout, GridLayoutProps } from \"../grid-layout\";\nimport {\n  makePrefixer,\n  PolymorphicRef,\n  PolymorphicComponentPropWithRef,\n} from \"../utils\";\nimport { BorderItemProps } from \"../border-item\";\n\nexport type BorderLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 0\n       */\n      gap?: GridLayoutProps<T>[\"gap\"];\n      /**\n       * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 0\n       */\n      columnGap?: GridLayoutProps<T>[\"columnGap\"];\n      /**\n       * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 0\n       */\n      rowGap?: GridLayoutProps<T>[\"rowGap\"];\n      /**\n       * Border item components to be rendered.\n       */\n      children: ReactElement<BorderItemProps<T>>[];\n    }\n  >;\n\nconst withBaseName = makePrefixer(\"saltBorderLayout\");\n\nconst numberOfColumns = 3;\n\ntype BorderLayoutComponent = <T extends ElementType = \"div\">(\n  props: BorderLayoutProps<T>\n) => ReactElement | null;\n\nexport const BorderLayout: BorderLayoutComponent = forwardRef(\n  <T extends ElementType>(\n    { children, className, gap, style, ...rest }: BorderLayoutProps<T>,\n    ref?: PolymorphicRef<T>\n  ) => {\n    const borderAreas = Children.map(\n      children,\n      (child: ReactElement<BorderItemProps<T>>) => child.props.position\n    );\n\n    const topSection = borderAreas.includes(\"north\")\n      ? \"north \".repeat(numberOfColumns)\n      : \"none \".repeat(numberOfColumns);\n\n    const leftSection = borderAreas.includes(\"west\") ? \"west\" : \"center\";\n\n    const rightSection = borderAreas.includes(\"east\") ? \"east\" : \"center\";\n\n    const midSection = `${leftSection} center ${rightSection}`;\n\n    const bottomSection = borderAreas.includes(\"south\")\n      ? \"south \".repeat(numberOfColumns)\n      : \"none \".repeat(numberOfColumns);\n\n    const gridTemplateAreas = `\"${topSection}\" \"${midSection}\" \"${bottomSection}\"`;\n\n    const hasMainSection = borderAreas.includes(\"center\");\n\n    useEffect(() => {\n      if (process.env.NODE_ENV !== \"production\") {\n        if (!hasMainSection) {\n          console.warn(\n            \"No main section has been found. A main section should be provided.\"\n          );\n        }\n      }\n    }, [hasMainSection]);\n\n    const borderLayoutStyles = {\n      ...style,\n      \"--gridLayout-gridTemplate\": gridTemplateAreas,\n    };\n\n    return (\n      <GridLayout\n        className={cx(withBaseName(), className, \"saltGridLayout-area\")}\n        columns={numberOfColumns}\n        gap={gap || 0}\n        style={borderLayoutStyles}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </GridLayout>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;AAwCA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAEpD,MAAM,eAAkB,GAAA,CAAA,CAAA;AAMjB,MAAM,YAAsC,GAAA,UAAA;AAAA,EACjD,CACE,EAAE,QAAU,EAAA,SAAA,EAAW,KAAK,KAAU,EAAA,GAAA,IAAA,IACtC,GACG,KAAA;AACH,IAAA,MAAM,cAAc,QAAS,CAAA,GAAA;AAAA,MAC3B,QAAA;AAAA,MACA,CAAC,KAA4C,KAAA,KAAA,CAAM,KAAM,CAAA,QAAA;AAAA,KAC3D,CAAA;AAEA,IAAM,MAAA,UAAA,GAAa,WAAY,CAAA,QAAA,CAAS,OAAO,CAAA,GAC3C,QAAS,CAAA,MAAA,CAAO,eAAe,CAAA,GAC/B,OAAQ,CAAA,MAAA,CAAO,eAAe,CAAA,CAAA;AAElC,IAAA,MAAM,WAAc,GAAA,WAAA,CAAY,QAAS,CAAA,MAAM,IAAI,MAAS,GAAA,QAAA,CAAA;AAE5D,IAAA,MAAM,YAAe,GAAA,WAAA,CAAY,QAAS,CAAA,MAAM,IAAI,MAAS,GAAA,QAAA,CAAA;AAE7D,IAAM,MAAA,UAAA,GAAa,GAAG,WAAsB,CAAA,QAAA,EAAA,YAAA,CAAA,CAAA,CAAA;AAE5C,IAAM,MAAA,aAAA,GAAgB,WAAY,CAAA,QAAA,CAAS,OAAO,CAAA,GAC9C,QAAS,CAAA,MAAA,CAAO,eAAe,CAAA,GAC/B,OAAQ,CAAA,MAAA,CAAO,eAAe,CAAA,CAAA;AAElC,IAAM,MAAA,iBAAA,GAAoB,CAAI,CAAA,EAAA,UAAA,CAAA,GAAA,EAAgB,UAAgB,CAAA,GAAA,EAAA,aAAA,CAAA,CAAA,CAAA,CAAA;AAE9D,IAAM,MAAA,cAAA,GAAiB,WAAY,CAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AAEpD,IAAA,SAAA,CAAU,MAAM;AACd,MAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,QAAA,IAAI,CAAC,cAAgB,EAAA;AACnB,UAAQ,OAAA,CAAA,IAAA;AAAA,YACN,oEAAA;AAAA,WACF,CAAA;AAAA,SACF;AAAA,OACF;AAAA,KACF,EAAG,CAAC,cAAc,CAAC,CAAA,CAAA;AAEnB,IAAA,MAAM,kBAAqB,GAAA;AAAA,MACzB,GAAG,KAAA;AAAA,MACH,2BAA6B,EAAA,iBAAA;AAAA,KAC/B,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,MACC,SAAW,EAAA,EAAA,CAAG,YAAa,EAAA,EAAG,WAAW,qBAAqB,CAAA;AAAA,MAC9D,OAAS,EAAA,eAAA;AAAA,MACT,KAAK,GAAO,IAAA,CAAA;AAAA,MACZ,KAAO,EAAA,kBAAA;AAAA,MACP,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/core/src/breakpoints/Breakpoints.js

@@ -0,0 +1,11 @@
+const breakpoints = {
+  xs: 0,
+  sm: 600,
+  md: 960,
+  lg: 1280,
+  xl: 1920
+};
+const DEFAULT_BREAKPOINTS = breakpoints;
+
+export { DEFAULT_BREAKPOINTS };
+//# sourceMappingURL=Breakpoints.js.map

package/dist-es/packages/core/src/breakpoints/Breakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breakpoints.js","sources":["../src/breakpoints/Breakpoints.tsx"],"sourcesContent":["export type Breakpoints = {\n  xs: number;\n  sm: number;\n  md: number;\n  lg: number;\n  xl: number;\n};\n\nconst breakpoints: Breakpoints = {\n  xs: 0,\n  sm: 600,\n  md: 960,\n  lg: 1280,\n  xl: 1920,\n};\n\nexport const DEFAULT_BREAKPOINTS = breakpoints;\n"],"names":[],"mappings":"AAQA,MAAM,WAA2B,GAAA;AAAA,EAC/B,EAAI,EAAA,CAAA;AAAA,EACJ,EAAI,EAAA,GAAA;AAAA,EACJ,EAAI,EAAA,GAAA;AAAA,EACJ,EAAI,EAAA,IAAA;AAAA,EACJ,EAAI,EAAA,IAAA;AACN,CAAA,CAAA;AAEO,MAAM,mBAAsB,GAAA;;;;"}

package/dist-es/packages/core/src/button/Button.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "/* Styles applied to the root element if variant=\"cta\" */\n.saltButton-cta {\n  --button-background: var(--salt-actionable-cta-background);\n  --button-background-active: var(--salt-actionable-cta-background-active);\n  --button-background-disabled: var(--salt-actionable-cta-background-disabled);\n  --button-background-hover: var(--salt-actionable-cta-background-hover);\n  --button-fontWeight: var(--salt-actionable-cta-fontWeight);\n  --button-text-color: var(--salt-actionable-cta-foreground);\n  --button-text-color-active: var(--salt-actionable-cta-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);\n}\n\n/* Icon API in \"CTA\" variant @ignore */\n.saltButton-cta {\n  --saltIcon-color: var(--salt-actionable-cta-foreground);\n}\n.saltButton-cta:hover {\n  --saltIcon-color: var(--salt-actionable-cta-foreground-hover);\n}\n.saltButton-cta:active,\n.saltButton-cta.saltButton-active {\n  --saltIcon-color: var(--salt-actionable-cta-foreground-active);\n}\n.saltButton-cta.saltButton-disabled {\n  --saltIcon-color: var(--salt-actionable-cta-foreground-disabled);\n}\n\n/* Styles applied to the root element if variant=\"primary\" (or no variant specified) */\n.saltButton-primary {\n  --button-background: var(--salt-actionable-primary-background);\n  --button-background-active: var(--salt-actionable-primary-background-active);\n  --button-background-disabled: var(--salt-actionable-primary-background-disabled);\n  --button-background-hover: var(--salt-actionable-primary-background-hover);\n  --button-fontWeight: var(--salt-actionable-primary-fontWeight);\n  --button-text-color: var(--salt-actionable-primary-foreground);\n  --button-text-color-active: var(--salt-actionable-primary-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-primary-foreground-hover);\n}\n\n/* Icon API in \"primary\" variant @ignore */\n.saltButton-primary {\n  --saltIcon-color: var(--salt-actionable-primary-foreground);\n}\n.saltButton-primary:hover {\n  --saltIcon-color: var(--salt-actionable-primary-foreground-hover);\n}\n.saltButton-primary:active,\n.saltButton-primary.saltButton-active {\n  --saltIcon-color: var(--salt-actionable-primary-foreground-active);\n}\n.saltButton-primary.saltButton-disabled {\n  --saltIcon-color: var(--salt-actionable-primary-foreground-disabled);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltButton-secondary {\n  --button-background: var(--salt-actionable-secondary-background);\n  --button-background-active: var(--salt-actionable-secondary-background-active);\n  --button-background-disabled: var(--salt-actionable-secondary-background-disabled);\n  --button-background-hover: var(--salt-actionable-secondary-background-hover);\n  --button-fontWeight: var(--salt-actionable-secondary-fontWeight);\n  --button-text-color: var(--salt-actionable-secondary-foreground);\n  --button-text-color-active: var(--salt-actionable-secondary-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover);\n}\n\n/* Icon API in \"secondary\" variant @ignore */\n.saltButton-secondary {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n}\n\n.saltButton-secondary:hover {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n.saltButton-secondary:active,\n.saltButton-secondary.saltButton-active {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n.saltButton-secondary.saltButton-disabled {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-disabled);\n}\n\n.saltButton {\n  align-items: var(--saltButton-alignItems, center);\n  appearance: none;\n  background: var(--saltButton-background, var(--button-background));\n  border-color: var(--saltButton-borderColor, transparent);\n  border-style: var(--saltButton-borderStyle, solid);\n  border-width: var(--saltButton-borderWidth, 0);\n  border-radius: var(--saltButton-borderRadius, 0);\n  color: var(--saltButton-text-color, var(--button-text-color));\n  cursor: var(--saltButton-cursor, pointer);\n  display: inline-flex;\n  justify-content: var(--saltButton-justifyContent, center);\n  font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n  font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n  line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--saltButton-letterSpacing, var(--salt-actionable-letterSpacing));\n  text-transform: var(--saltButton-textTransform, var(--salt-actionable-textTransform));\n  padding: 0 var(--saltButton-padding, var(--salt-size-unit));\n  margin: var(--saltButton-margin, 0);\n  height: var(--saltButton-height, var(--salt-size-base));\n  min-width: var(--saltButton-minWidth, unset);\n  min-height: 0;\n  position: relative;\n  text-align: var(--saltButton-textAlign, var(--salt-actionable-textAlign));\n  text-decoration: none;\n  transition: none;\n  user-select: none;\n  width: var(--saltButton-width, auto);\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n  /* Styles applied to align children*/\n  font-weight: var(--saltButton-fontWeight, var(--button-fontWeight));\n  white-space: pre;\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible(:active) {\n  background: var(--saltButton-background-active-hover, var(--button-background));\n  color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n}\n\n/* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n.saltButton:hover {\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n  background: var(--saltButton-background-active, var(--button-background-active));\n  color: var(--saltButton-text-color-active, var(--button-text-color-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n  /* Overrides to apply the disabled style when the button is focusable while also disabled */\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:hover {\n  background: var(--saltButton-background-disabled, var(--button-background-disabled));\n  color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));\n  cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled));\n}\n\n.saltButton[href] {\n  display: inline-flex;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=Button.css.js.map

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

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

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

@@ -0,0 +1,51 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import cx from 'classnames';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import './Button.css.js';
+import { useButton } from './useButton.js';
+
+const withBaseName = makePrefixer("saltButton");
+const ButtonVariantValues = ["primary", "secondary", "cta"];
+const Button = forwardRef(
+  function Button2({
+    children,
+    className,
+    disabled,
+    focusableWhenDisabled,
+    onKeyUp,
+    onKeyDown,
+    onBlur,
+    onClick,
+    type = "button",
+    variant = "primary",
+    ...restProps
+  }, ref) {
+    const { active, buttonProps } = useButton({
+      disabled,
+      focusableWhenDisabled,
+      onKeyUp,
+      onKeyDown,
+      onBlur,
+      onClick
+    });
+    const { tabIndex, ...restButtonProps } = buttonProps;
+    return /* @__PURE__ */ jsx("button", {
+      ...restButtonProps,
+      className: cx(withBaseName(), className, withBaseName(variant), {
+        [withBaseName("disabled")]: disabled,
+        [withBaseName("active")]: active
+      }),
+      ...restProps,
+      ref,
+      type,
+      children
+    });
+  }
+);
+
+export { Button, ButtonVariantValues };
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../src/button/Button.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactElement } from \"react\";\nimport cx from \"classnames\";\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={cx(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":["Button"],"mappings":";;;;;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA,CAAA;AAEvC,MAAM,mBAAsB,GAAA,CAAC,SAAW,EAAA,WAAA,EAAa,KAAK,EAAA;AAmB1D,MAAM,MAAS,GAAA,UAAA;AAAA,EACpB,SAASA,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,GAAI,SAAU,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,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MACE,GAAG,eAAA;AAAA,MACJ,WAAW,EAAG,CAAA,YAAA,IAAgB,SAAW,EAAA,YAAA,CAAa,OAAO,CAAG,EAAA;AAAA,QAC9D,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;;;;"}

package/dist-es/packages/core/src/button/useButton.js

@@ -0,0 +1,61 @@
+import { useState, useEffect } from 'react';
+
+const useButton = ({
+  disabled,
+  focusableWhenDisabled,
+  onKeyUp,
+  onKeyDown,
+  onClick,
+  onBlur
+}) => {
+  const [keyIsDown, setkeyIsDown] = useState("");
+  const [active, setActive] = useState(false);
+  const enter = "Enter";
+  const space = " ";
+  useEffect(() => {
+    const t = setTimeout(() => {
+      if (keyIsDown !== enter && keyIsDown !== space) {
+        setActive(false);
+      }
+    }, 0);
+    return () => {
+      clearTimeout(t);
+    };
+  }, [active, keyIsDown]);
+  const handleKeyUp = (event) => {
+    setkeyIsDown("");
+    setActive(false);
+    onKeyUp == null ? void 0 : onKeyUp(event);
+  };
+  const handleClick = (event) => {
+    setActive(true);
+    onClick == null ? void 0 : onClick(event);
+  };
+  const handleBlur = (event) => {
+    setActive(false);
+    onBlur == null ? void 0 : onBlur(event);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === enter || event.key === space) {
+      setkeyIsDown(event.key);
+      setActive(true);
+    }
+    onKeyDown == null ? void 0 : onKeyDown(event);
+  };
+  const buttonProps = {
+    "aria-disabled": disabled && focusableWhenDisabled ? true : void 0,
+    disabled: disabled && !focusableWhenDisabled,
+    tabIndex: disabled && !focusableWhenDisabled ? -1 : 0,
+    onBlur: handleBlur,
+    onClick: !disabled ? handleClick : void 0,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp
+  };
+  return {
+    active,
+    buttonProps
+  };
+};
+
+export { useButton };
+//# sourceMappingURL=useButton.js.map

package/dist-es/packages/core/src/button/useButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useButton.js","sources":["../src/button/useButton.ts"],"sourcesContent":["import {\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  useEffect,\n  useState,\n} from \"react\";\n\nexport interface ButtonHookProps<T extends Element> {\n  disabled?: boolean;\n  focusableWhenDisabled?: boolean;\n  onKeyUp?: (event: KeyboardEvent<T>) => void;\n  onKeyDown?: (event: KeyboardEvent<T>) => void;\n  onClick?: (event: MouseEvent<T>) => void;\n  onBlur?: (event: FocusEvent<T>) => void;\n}\n\nexport interface ButtonHookResult<T extends Element> {\n  active: boolean;\n  buttonProps: {\n    \"aria-disabled\"?: boolean;\n    disabled?: boolean;\n    tabIndex: number;\n    onBlur: (event: FocusEvent<T>) => void;\n    onClick?: (event: MouseEvent<T>) => void;\n    onKeyDown: (event: KeyboardEvent<T>) => void;\n    onKeyUp: (event: KeyboardEvent<T>) => void;\n  };\n}\n\nexport const useButton = <T extends Element>({\n  disabled,\n  focusableWhenDisabled,\n  onKeyUp,\n  onKeyDown,\n  onClick,\n  onBlur,\n}: ButtonHookProps<T>): ButtonHookResult<T> => {\n  const [keyIsDown, setkeyIsDown] = useState(\"\");\n  const [active, setActive] = useState(false);\n\n  const enter = \"Enter\";\n  const space = \" \";\n\n  useEffect(() => {\n    const t = setTimeout(() => {\n      // This key state check is to stop continual visual state change when using Enter Key, which the browser treats as both key and click events on a Button\n      // This key state check also fixes Firefox Button where Space key is pressed but button fails to be in active state\n      if (keyIsDown !== enter && keyIsDown !== space) {\n        setActive(false);\n      }\n    }, 0);\n\n    return () => {\n      clearTimeout(t);\n    };\n  }, [active, keyIsDown]);\n\n  const handleKeyUp = (event: KeyboardEvent<T>) => {\n    setkeyIsDown(\"\");\n    setActive(false);\n    onKeyUp?.(event);\n  };\n\n  const handleClick = (event: MouseEvent<T>) => {\n    setActive(true);\n    onClick?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<T>) => {\n    setActive(false);\n    onBlur?.(event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<T>) => {\n    if (event.key === enter || event.key === space) {\n      setkeyIsDown(event.key);\n      setActive(true);\n    }\n\n    onKeyDown?.(event);\n  };\n\n  const buttonProps = {\n    \"aria-disabled\": disabled && focusableWhenDisabled ? true : undefined,\n    disabled: disabled && !focusableWhenDisabled,\n    tabIndex: disabled && !focusableWhenDisabled ? -1 : 0,\n    onBlur: handleBlur,\n    onClick: !disabled ? handleClick : undefined,\n    onKeyDown: handleKeyDown,\n    onKeyUp: handleKeyUp,\n  };\n\n  return {\n    active,\n    buttonProps,\n  };\n};\n"],"names":[],"mappings":";;AA8BO,MAAM,YAAY,CAAoB;AAAA,EAC3C,QAAA;AAAA,EACA,qBAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AACF,CAA+C,KAAA;AAC7C,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,EAAE,CAAA,CAAA;AAC7C,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAE1C,EAAA,MAAM,KAAQ,GAAA,OAAA,CAAA;AACd,EAAA,MAAM,KAAQ,GAAA,GAAA,CAAA;AAEd,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,CAAA,GAAI,WAAW,MAAM;AAGzB,MAAI,IAAA,SAAA,KAAc,KAAS,IAAA,SAAA,KAAc,KAAO,EAAA;AAC9C,QAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,OACjB;AAAA,OACC,CAAC,CAAA,CAAA;AAEJ,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,CAAC,CAAA,CAAA;AAAA,KAChB,CAAA;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,SAAS,CAAC,CAAA,CAAA;AAEtB,EAAM,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AAC/C,IAAA,YAAA,CAAa,EAAE,CAAA,CAAA;AACf,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACf,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyB,KAAA;AAC5C,IAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AACd,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAM,MAAA,UAAA,GAAa,CAAC,KAAyB,KAAA;AAC3C,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACf,IAAS,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACX,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,KAA4B,KAAA;AACjD,IAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,KAAS,IAAA,KAAA,CAAM,QAAQ,KAAO,EAAA;AAC9C,MAAA,YAAA,CAAa,MAAM,GAAG,CAAA,CAAA;AACtB,MAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,KAChB;AAEA,IAAY,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACd,CAAA;AAEA,EAAA,MAAM,WAAc,GAAA;AAAA,IAClB,eAAA,EAAiB,QAAY,IAAA,qBAAA,GAAwB,IAAO,GAAA,KAAA,CAAA;AAAA,IAC5D,QAAA,EAAU,YAAY,CAAC,qBAAA;AAAA,IACvB,QAAU,EAAA,QAAA,IAAY,CAAC,qBAAA,GAAwB,CAAK,CAAA,GAAA,CAAA;AAAA,IACpD,MAAQ,EAAA,UAAA;AAAA,IACR,OAAA,EAAS,CAAC,QAAA,GAAW,WAAc,GAAA,KAAA,CAAA;AAAA,IACnC,SAAW,EAAA,aAAA;AAAA,IACX,OAAS,EAAA,WAAA;AAAA,GACX,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA,WAAA;AAAA,GACF,CAAA;AACF;;;;"}

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../../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";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=FlexItem.css.js.map

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

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

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

@@ -0,0 +1,47 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useId.js';
+import { useResponsiveProp } from '../utils/useResponsiveProp.js';
+import './FlexItem.css.js';
+import cx from 'classnames';
+
+const withBaseName = makePrefixer("saltFlexItem");
+const FLEX_ITEM_ALIGNMENTS = [
+  "start",
+  "end",
+  "center",
+  "stretch"
+];
+const FlexItem = forwardRef(
+  ({
+    as,
+    align,
+    children,
+    className,
+    shrink,
+    grow,
+    style,
+    ...rest
+  }, ref) => {
+    const Component = as || "div";
+    const flexItemShrink = useResponsiveProp(shrink, 1);
+    const flexItemGrow = useResponsiveProp(grow, 0);
+    const itemStyle = {
+      "--saltFlexItem-alignment": align,
+      "--saltFlexItem-shrink": flexItemShrink,
+      "--saltFlexItem-grow": flexItemGrow,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(Component, {
+      className: cx(className, withBaseName()),
+      ref,
+      style: itemStyle,
+      ...rest,
+      children
+    });
+  }
+);
+
+export { FLEX_ITEM_ALIGNMENTS, FlexItem };
+//# sourceMappingURL=FlexItem.js.map

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

@@ -0,0 +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 cx from \"classnames\";\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={cx(className, withBaseName())}\n        ref={ref}\n        style={itemStyle}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AACzC,MAAM,oBAAuB,GAAA;AAAA,EAClC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AACF,EAAA;AA4BO,MAAM,QAA8B,GAAA,UAAA;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,GAAiB,iBAAkB,CAAA,MAAA,EAAQ,CAAC,CAAA,CAAA;AAClD,IAAM,MAAA,YAAA,GAAe,iBAAkB,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,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,YAAA,EAAc,CAAA;AAAA,MACvC,GAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".salt-density-touch {\n  --flexLayout-gap-density-multiplier: 2;\n}\n\n/* Default variables applied to the root element */\n.saltFlexLayout {\n  --flexLayout-gap-multiplier: var(--flexLayout-gap-density-multiplier, 3);\n  --flexLayout-layout-display: flex;\n  --flexLayout-direction: row;\n  --flexLayout-wrap: nowrap;\n  --flexLayout-justify: flex-start;\n  --flexLayout-align: stretch;\n  --flexLayout-separator: var(--salt-size-border);\n  --flexLayout-gap: calc(var(--salt-size-unit) * var(--flexLayout-gap-multiplier));\n}\n\n/* Style applied to the root element */\n.saltFlexLayout {\n  gap: var(--flexLayout-gap);\n  display: var(--flexLayout-layout-display);\n  flex-direction: var(--flexLayout-direction);\n  flex-wrap: var(--flexLayout-wrap);\n  justify-content: var(--flexLayout-justify);\n  align-items: var(--flexLayout-align);\n}\n\n.saltFlexLayout-separator-wrapper {\n  display: contents;\n}\n.saltFlexLayout-separator > *:not(:last-child)::after {\n  position: relative;\n  display: block;\n  content: \"\";\n  background-color: var(--salt-separable-secondary-borderColor);\n}\n\n/* Row separator */\n\n.saltFlexLayout-separator-row > .saltFlexLayout-separator-wrapper {\n  height: 100%;\n}\n\n.saltFlexLayout-separator-row > *:not(:last-child)::after {\n  width: var(--flexLayout-separator);\n  top: 0;\n}\n.saltFlexLayout-separator-row-start > *:not(:last-child)::after {\n  right: calc(var(--flexLayout-gap) * 1);\n}\n.saltFlexLayout-separator-row-center > *:not(:last-child)::after {\n  right: 0;\n}\n.saltFlexLayout-separator-row-end > *:not(:last-child)::after {\n  right: calc(var(--flexLayout-gap) * -1);\n}\n\n/* Column separator */\n.saltFlexLayout-separator-column > .saltFlexLayout-separator-wrapper {\n  width: 100%;\n}\n\n.saltFlexLayout-separator-column > *:not(:last-child)::after {\n  height: var(--flexLayout-separator);\n  left: 0;\n  width: 100%;\n}\n.saltFlexLayout-separator-column-start > *:not(:last-child)::after {\n  bottom: calc(var(--flexLayout-gap) * 1);\n}\n.saltFlexLayout-separator-column-center > *:not(:last-child)::after {\n  bottom: 0;\n}\n.saltFlexLayout-separator-column-end > *:not(:last-child)::after {\n  bottom: calc(var(--flexLayout-gap) * -1);\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=FlexLayout.css.js.map

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

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