@salt-ds/core 0.0.0-snapshot-20230623164123 → 0.0.0-snapshot-20230802143610

package/dist-cjs/utils/useFloatingUI.js

@@ -2,49 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
 var react = require('@floating-ui/react');
-var React = require('react');
-var SaltProvider = require('../salt-provider/SaltProvider.js');
 
-const FloatingComponentContext = React.createContext({
-  Component: React.forwardRef((props, ref) => {
-    const { open, disabled, ...rest } = props;
-    return open && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, {
-      children: /* @__PURE__ */ jsxRuntime.jsx(SaltProvider.SaltProvider, {
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-          ...rest,
-          ref
-        })
-      })
-    }) : null;
-  })
-});
-if (process.env.NODE_ENV !== "production") {
-  FloatingComponentContext.displayName = "FloatingComponentContext";
-}
-function FloatingComponentProvider(props) {
-  const { Component, children } = props;
-  const value = React.useMemo(() => ({ Component }), [Component]);
-  return /* @__PURE__ */ jsxRuntime.jsx(FloatingComponentContext.Provider, {
-    value,
-    children
-  });
-}
-function useFloatingComponent() {
-  return React.useContext(FloatingComponentContext);
-}
-const PlatformContext = React.createContext(react.platform);
-function FloatingPlatformProvider(props) {
-  const { platform: platformProp, children } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(PlatformContext.Provider, {
-    value: platformProp,
-    children
-  });
-}
-function usePlatform() {
-  return React.useContext(PlatformContext);
-}
 const DEFAULT_FLOATING_UI_MIDDLEWARE = [
   react.flip(),
   react.shift({ limiter: react.limitShift() })
@@ -57,15 +16,13 @@ function useFloatingUI(props) {
     open = false,
     onOpenChange
   } = props;
-  const platform2 = usePlatform();
   const { reference, floating, refs, update, ...rest } = react.useFloating({
     placement,
     strategy,
     middleware,
     open,
     onOpenChange,
-    whileElementsMounted: react.autoUpdate,
-    platform: platform2
+    whileElementsMounted: react.autoUpdate
   });
   return {
     reference,
@@ -77,9 +34,5 @@ function useFloatingUI(props) {
 }
 
 exports.DEFAULT_FLOATING_UI_MIDDLEWARE = DEFAULT_FLOATING_UI_MIDDLEWARE;
-exports.FloatingComponentProvider = FloatingComponentProvider;
-exports.FloatingPlatformProvider = FloatingPlatformProvider;
-exports.useFloatingComponent = useFloatingComponent;
 exports.useFloatingUI = useFloatingUI;
-exports.usePlatform = usePlatform;
 //# sourceMappingURL=useFloatingUI.js.map

package/dist-cjs/utils/useFloatingUI.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI.tsx"],"sourcesContent":["import type {\n  Middleware,\n  Placement,\n  Platform,\n  Strategy,\n} from \"@floating-ui/react\";\nimport {\n  autoUpdate,\n  flip,\n  limitShift,\n  platform,\n  shift,\n  useFloating,\n} from \"@floating-ui/react\";\nimport {\n  createContext,\n  ReactNode,\n  useContext,\n  useMemo,\n  ForwardedRef,\n  forwardRef,\n  PropsWithChildren,\n  ComponentType,\n} from \"react\";\n\nimport { FloatingPortal } from \"@floating-ui/react\";\nimport { SaltProvider } from \"../salt-provider\";\n\nexport interface FloatingComponentProps extends UseFloatingUIProps {\n  /**\n   * Option to not render the popper.\n   */\n  disabled: boolean;\n}\n\nexport interface FloatingComponentContextType {\n  Component: ComponentType<PropsWithChildren<FloatingComponentProps>>;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n  Component: forwardRef((props, ref: ForwardedRef<HTMLDivElement>) => {\n    const { open, disabled, ...rest } = props;\n    return open && !disabled ? (\n      <FloatingPortal>\n        <SaltProvider>\n          <div {...rest} ref={ref} />\n        </SaltProvider>\n      </FloatingPortal>\n    ) : null;\n  }),\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n  FloatingComponentContext.displayName = \"FloatingComponentContext\";\n}\n\nexport interface FloatingComponentProviderProps\n  extends FloatingComponentContextType {\n  children: ReactNode;\n}\n\nexport function FloatingComponentProvider(\n  props: FloatingComponentProviderProps\n) {\n  const { Component, children } = props;\n  const value = useMemo(() => ({ Component }), [Component]);\n\n  return (\n    <FloatingComponentContext.Provider value={value}>\n      {children}\n    </FloatingComponentContext.Provider>\n  );\n}\n\nexport function useFloatingComponent() {\n  return useContext(FloatingComponentContext);\n}\n\nexport type UseFloatingUIProps = {\n  /**\n   * Sets position relative to trigger.\n   */\n  placement?: Placement;\n  strategy?: Strategy;\n  middleware?: Middleware[];\n  /**\n   * Sets visible state.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n};\n\nconst PlatformContext = createContext<Platform>(platform);\n\nexport interface FloatingPlatformProviderProps {\n  platform: Platform;\n  children: ReactNode;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n  const { platform: platformProp, children } = props;\n\n  return (\n    <PlatformContext.Provider value={platformProp}>\n      {children}\n    </PlatformContext.Provider>\n  );\n}\n\nexport function usePlatform() {\n  return useContext(PlatformContext);\n}\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n  flip(),\n  shift({ limiter: limitShift() }),\n];\n\nexport function useFloatingUI(\n  props: UseFloatingUIProps\n): ReturnType<typeof useFloating> {\n  const {\n    placement,\n    strategy,\n    middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n    open = false,\n    onOpenChange,\n  } = props;\n\n  const platform = usePlatform();\n\n  const { reference, floating, refs, update, ...rest } = useFloating({\n    placement,\n    strategy,\n    middleware,\n    open,\n    onOpenChange,\n    whileElementsMounted: autoUpdate,\n    platform,\n  });\n\n  return {\n    reference,\n    floating,\n    refs,\n    update,\n    ...rest,\n  };\n}\n"],"names":["createContext","forwardRef","jsx","FloatingPortal","SaltProvider","useMemo","useContext","platform","flip","shift","limitShift","useFloating","autoUpdate"],"mappings":";;;;;;;;;AAuCA,MAAM,2BAA2BA,mBAA4C,CAAA;AAAA,EAC3E,SAAW,EAAAC,gBAAA,CAAW,CAAC,KAAA,EAAO,GAAsC,KAAA;AAClE,IAAA,MAAM,EAAE,IAAA,EAAM,QAAa,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACpC,IAAO,OAAA,IAAA,IAAQ,CAAC,QAAA,mBACbC,cAAA,CAAAC,oBAAA,EAAA;AAAA,MACC,QAAC,kBAAAD,cAAA,CAAAE,yBAAA,EAAA;AAAA,QACC,QAAC,kBAAAF,cAAA,CAAA,KAAA,EAAA;AAAA,UAAK,GAAG,IAAA;AAAA,UAAM,GAAA;AAAA,SAAU,CAAA;AAAA,OAC3B,CAAA;AAAA,KACF,CACE,GAAA,IAAA,CAAA;AAAA,GACL,CAAA;AACH,CAAC,CAAA,CAAA;AAED,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,wBAAA,CAAyB,WAAc,GAAA,0BAAA,CAAA;AACzC,CAAA;AAOO,SAAS,0BACd,KACA,EAAA;AACA,EAAM,MAAA,EAAE,SAAW,EAAA,QAAA,EAAa,GAAA,KAAA,CAAA;AAChC,EAAM,MAAA,KAAA,GAAQG,cAAQ,OAAO,EAAE,WAAc,CAAA,EAAA,CAAC,SAAS,CAAC,CAAA,CAAA;AAExD,EACE,uBAAAH,cAAA,CAAC,yBAAyB,QAAzB,EAAA;AAAA,IAAkC,KAAA;AAAA,IAChC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAA;AAEO,SAAS,oBAAuB,GAAA;AACrC,EAAA,OAAOI,iBAAW,wBAAwB,CAAA,CAAA;AAC5C,CAAA;AAmBA,MAAM,eAAA,GAAkBN,oBAAwBO,cAAQ,CAAA,CAAA;AAOjD,SAAS,yBAAyB,KAAsC,EAAA;AAC7E,EAAA,MAAM,EAAE,QAAA,EAAU,YAAc,EAAA,QAAA,EAAa,GAAA,KAAA,CAAA;AAE7C,EACE,uBAAAL,cAAA,CAAC,gBAAgB,QAAhB,EAAA;AAAA,IAAyB,KAAO,EAAA,YAAA;AAAA,IAC9B,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAA;AAEO,SAAS,WAAc,GAAA;AAC5B,EAAA,OAAOI,iBAAW,eAAe,CAAA,CAAA;AACnC,CAAA;AAEO,MAAM,8BAAiC,GAAA;AAAA,EAC5CE,UAAK,EAAA;AAAA,EACLC,WAAM,CAAA,EAAE,OAAS,EAAAC,gBAAA,IAAc,CAAA;AACjC,EAAA;AAEO,SAAS,cACd,KACgC,EAAA;AAChC,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAa,GAAA,8BAAA;AAAA,IACb,IAAO,GAAA,KAAA;AAAA,IACP,YAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAMH,YAAW,WAAY,EAAA,CAAA;AAE7B,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,MAAM,MAAW,EAAA,GAAA,IAAA,KAASI,iBAAY,CAAA;AAAA,IACjE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,oBAAsB,EAAAC,gBAAA;AAAA,IACtB,QAAAL,EAAAA,SAAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAO,OAAA;AAAA,IACL,SAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAG,IAAA;AAAA,GACL,CAAA;AACF;;;;;;;;;"}
+{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI.tsx"],"sourcesContent":["import type { Middleware, Placement, Strategy } from \"@floating-ui/react\";\nimport {\n  autoUpdate,\n  flip,\n  limitShift,\n  shift,\n  useFloating,\n} from \"@floating-ui/react\";\n\nexport type UseFloatingUIProps = {\n  /**\n   * Sets position relative to trigger.\n   */\n  placement?: Placement;\n  strategy?: Strategy;\n  middleware?: Middleware[];\n  /**\n   * Sets visible state.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n};\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n  flip(),\n  shift({ limiter: limitShift() }),\n];\n\nexport function useFloatingUI(\n  props: UseFloatingUIProps\n): ReturnType<typeof useFloating> {\n  const {\n    placement,\n    strategy,\n    middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n    open = false,\n    onOpenChange,\n  } = props;\n\n  const { reference, floating, refs, update, ...rest } = useFloating({\n    placement,\n    strategy,\n    middleware,\n    open,\n    onOpenChange,\n    whileElementsMounted: autoUpdate,\n  });\n\n  return {\n    reference,\n    floating,\n    refs,\n    update,\n    ...rest,\n  };\n}\n"],"names":["flip","shift","limitShift","useFloating","autoUpdate"],"mappings":";;;;;;AA0BO,MAAM,8BAAiC,GAAA;AAAA,EAC5CA,UAAK,EAAA;AAAA,EACLC,WAAM,CAAA,EAAE,OAAS,EAAAC,gBAAA,IAAc,CAAA;AACjC,EAAA;AAEO,SAAS,cACd,KACgC,EAAA;AAChC,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAa,GAAA,8BAAA;AAAA,IACb,IAAO,GAAA,KAAA;AAAA,IACP,YAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,MAAM,MAAW,EAAA,GAAA,IAAA,KAASC,iBAAY,CAAA;AAAA,IACjE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,oBAAsB,EAAAC,gBAAA;AAAA,GACvB,CAAA,CAAA;AAED,EAAO,OAAA;AAAA,IACL,SAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAG,IAAA;AAAA,GACL,CAAA;AACF;;;;;"}

package/dist-es/accordion/Accordion.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltAccordion {\n  border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n}\n\n.saltAccordion-error {\n  border-top-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordion-warning {\n  border-top-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordion-success {\n  border-top-color: var(--salt-status-success-borderColor);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Accordion.css.js.map

package/dist-es/accordion/Accordion.css.js.map

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

package/dist-es/accordion/Accordion.js

@@ -0,0 +1,69 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { AccordionContext } from './AccordionContext.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import { useControlled } from '../utils/useControlled.js';
+import '../utils/useFloatingUI.js';
+import { useId } from '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import css_248z from './Accordion.css.js';
+
+const withBaseName = makePrefixer("saltAccordion");
+const Accordion = forwardRef(
+  function Accordion2(props, ref) {
+    const {
+      className,
+      defaultExpanded,
+      expanded: expandedProp,
+      disabled,
+      id: idProp,
+      onToggle,
+      status,
+      value,
+      ...rest
+    } = props;
+    const id = useId(idProp);
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-accordion",
+      css: css_248z,
+      window: targetWindow
+    });
+    const [expanded, setExpanded] = useControlled({
+      controlled: expandedProp,
+      default: Boolean(defaultExpanded),
+      name: "Accordion",
+      state: "expanded"
+    });
+    const toggle = (event) => {
+      setExpanded((prev) => !prev);
+      onToggle == null ? void 0 : onToggle(event);
+    };
+    return /* @__PURE__ */ jsx(AccordionContext.Provider, {
+      value: {
+        value,
+        toggle,
+        expanded,
+        disabled: Boolean(disabled),
+        id: id != null ? id : "",
+        status
+      },
+      children: /* @__PURE__ */ jsx("div", {
+        ref,
+        className: clsx(
+          withBaseName(),
+          { [withBaseName(status != null ? status : "")]: status },
+          className
+        ),
+        ...rest
+      })
+    });
+  }
+);
+
+export { Accordion };
+//# sourceMappingURL=Accordion.js.map

package/dist-es/accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sources":["../src/accordion/Accordion.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, SyntheticEvent } from \"react\";\nimport { clsx } from \"clsx\";\nimport { AccordionContext } from \"./AccordionContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport accordionCss from \"./Accordion.css\";\nexport interface AccordionProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * AccordionGroup value.\n   */\n  value: string;\n  /**\n   * Whether the accordion is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Whether the accordion is expanded by default.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Callback fired when the accordion is toggled.\n   * @param event\n   */\n  onToggle?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  /**\n   * Whether the accordion is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The status of the accordion.\n   */\n  status?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltAccordion\");\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  function Accordion(props, ref) {\n    const {\n      className,\n      defaultExpanded,\n      expanded: expandedProp,\n      disabled,\n      id: idProp,\n      onToggle,\n      status,\n      value,\n      ...rest\n    } = props;\n\n    const id = useId(idProp);\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-accordion\",\n      css: accordionCss,\n      window: targetWindow,\n    });\n\n    const [expanded, setExpanded] = useControlled({\n      controlled: expandedProp,\n      default: Boolean(defaultExpanded),\n      name: \"Accordion\",\n      state: \"expanded\",\n    });\n\n    const toggle = (event: SyntheticEvent<HTMLButtonElement>) => {\n      setExpanded((prev) => !prev);\n      onToggle?.(event);\n    };\n\n    return (\n      <AccordionContext.Provider\n        value={{\n          value,\n          toggle,\n          expanded,\n          disabled: Boolean(disabled),\n          id: id ?? \"\",\n          status,\n        }}\n      >\n        <div\n          ref={ref}\n          className={clsx(\n            withBaseName(),\n            { [withBaseName(status ?? \"\")]: status },\n            className\n          )}\n          {...rest}\n        />\n      </AccordionContext.Provider>\n    );\n  }\n);\n"],"names":["Accordion","accordionCss"],"mappings":";;;;;;;;;;;;;;AAmCA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,QAAA;AAAA,MACA,EAAI,EAAA,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AACvB,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,aAAc,CAAA;AAAA,MAC5C,UAAY,EAAA,YAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,eAAe,CAAA;AAAA,MAChC,IAAM,EAAA,WAAA;AAAA,MACN,KAAO,EAAA,UAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,CAAC,KAA6C,KAAA;AAC3D,MAAY,WAAA,CAAA,CAAC,IAAS,KAAA,CAAC,IAAI,CAAA,CAAA;AAC3B,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb,CAAA;AAEA,IACE,uBAAA,GAAA,CAAC,iBAAiB,QAAjB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,KAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,QAC1B,IAAI,EAAM,IAAA,IAAA,GAAA,EAAA,GAAA,EAAA;AAAA,QACV,MAAA;AAAA,OACF;AAAA,MAEA,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,EAAE,CAAC,YAAA,CAAa,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,IAAI,MAAO,EAAA;AAAA,UACvC,SAAA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,OACN,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/accordion/AccordionContext.js

@@ -0,0 +1,24 @@
+import { useContext } from 'react';
+import { createContext } from '../utils/createContext.js';
+import '../utils/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import 'clsx';
+
+const AccordionContext = createContext(
+  "AccordionContext",
+  {
+    value: "",
+    expanded: false,
+    toggle: () => void 0,
+    disabled: false,
+    id: ""
+  }
+);
+function useAccordion() {
+  return useContext(AccordionContext);
+}
+
+export { AccordionContext, useAccordion };
+//# sourceMappingURL=AccordionContext.js.map

package/dist-es/accordion/AccordionContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionContext.js","sources":["../src/accordion/AccordionContext.ts"],"sourcesContent":["import { SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface AccordionContextValue {\n  value: string;\n  expanded: boolean;\n  toggle: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  disabled: boolean;\n  id: string;\n  status?: \"error\" | \"warning\" | \"success\";\n}\n\nexport const AccordionContext = createContext<AccordionContextValue>(\n  \"AccordionContext\",\n  {\n    value: \"\",\n    expanded: false,\n    toggle: () => undefined,\n    disabled: false,\n    id: \"\",\n  }\n);\n\nexport function useAccordion() {\n  return useContext(AccordionContext);\n}\n"],"names":[],"mappings":";;;;;;;;AAYO,MAAM,gBAAmB,GAAA,aAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,KAAO,EAAA,EAAA;AAAA,IACP,QAAU,EAAA,KAAA;AAAA,IACV,QAAQ,MAAM,KAAA,CAAA;AAAA,IACd,QAAU,EAAA,KAAA;AAAA,IACV,EAAI,EAAA,EAAA;AAAA,GACN;AACF,EAAA;AAEO,SAAS,YAAe,GAAA;AAC7B,EAAA,OAAO,WAAW,gBAAgB,CAAA,CAAA;AACpC;;;;"}

package/dist-es/accordion/AccordionGroup.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltAccordionGroup {\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=AccordionGroup.css.js.map

package/dist-es/accordion/AccordionGroup.css.js.map

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

package/dist-es/accordion/AccordionGroup.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './AccordionGroup.css.js';
+
+const withBaseName = makePrefixer("saltAccordionGroup");
+const AccordionGroup = forwardRef(
+  function AccordionGroup2(props, ref) {
+    const { className, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-accordion-group",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx("div", {
+      className: clsx(withBaseName(), className),
+      ref,
+      ...rest
+    });
+  }
+);
+
+export { AccordionGroup };
+//# sourceMappingURL=AccordionGroup.js.map

package/dist-es/accordion/AccordionGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionGroup.js","sources":["../src/accordion/AccordionGroup.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport accordionGroupCss from \"./AccordionGroup.css\";\n\nexport type AccordionGroupProps = ComponentPropsWithoutRef<\"div\">;\n\nconst withBaseName = makePrefixer(\"saltAccordionGroup\");\n\nexport const AccordionGroup = forwardRef<HTMLDivElement, AccordionGroupProps>(\n  function AccordionGroup(props, ref) {\n    const { className, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-accordion-group\",\n      css: accordionGroupCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div className={clsx(withBaseName(), className)} ref={ref} {...rest} />\n    );\n  }\n);\n"],"names":["AccordionGroup","accordionGroupCss"],"mappings":";;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAE/B,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,KAAM,CAAA,CAAA;AAAA,GAEzE;AACF;;;;"}

package/dist-es/accordion/AccordionHeader.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltAccordionHeader {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  padding-block: var(--salt-spacing-50);\n  padding-inline: var(--salt-spacing-100);\n  align-items: center;\n  border: 0;\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  background: var(--salt-actionable-secondary-background);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  color: var(--salt-text-primary-foreground);\n  font-weight: var(--salt-text-fontWeight-strong);\n  --saltIcon-color: currentcolor;\n  text-align: left;\n  cursor: var(--salt-actionable-cursor-hover);\n}\n\n.saltAccordionHeader:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n}\n\n.saltAccordionHeader:disabled {\n  background: var(--salt-actionable-secondary-background);\n  color: var(--salt-text-primary-foreground-disabled);\n  --saltIcon-fill: var(--salt-text-primary-foreground-disabled);\n}\n\n.saltAccordionHeader-icon {\n  transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltAccordionHeader[aria-expanded=\"true\"] > .saltAccordionHeader-icon {\n  transform: rotate(90deg);\n}\n\n.saltAccordionHeader-error {\n  background: var(--salt-status-error-background);\n}\n\n.saltAccordionHeader-error:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader-warning {\n  background: var(--salt-status-warning-background);\n}\n\n.saltAccordionHeader-warning:focus-visible {\n  outline-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordionHeader-success {\n  background: var(--salt-status-success-background);\n}\n\n.saltAccordionHeader-success:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader .saltAccordionHeader-statusIndicator {\n  margin-left: auto;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=AccordionHeader.css.js.map

package/dist-es/accordion/AccordionHeader.css.js.map

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

package/dist-es/accordion/AccordionHeader.js

@@ -0,0 +1,59 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { StatusIndicator } from '../status-indicator/StatusIndicator.js';
+import { ChevronRightIcon } from '@salt-ds/icons';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { useAccordion } from './AccordionContext.js';
+import css_248z from './AccordionHeader.css.js';
+
+const withBaseName = makePrefixer("saltAccordionHeader");
+const AccordionHeader = forwardRef(function AccordionHeader2(props, ref) {
+  const { children, className, onClick, ...rest } = props;
+  const { value, expanded, toggle, disabled, id, status } = useAccordion();
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-accordion-header",
+    css: css_248z,
+    window: targetWindow
+  });
+  const handleClick = (event) => {
+    toggle(event);
+    onClick == null ? void 0 : onClick(event);
+  };
+  return /* @__PURE__ */ jsxs("button", {
+    ref,
+    className: clsx(
+      withBaseName(),
+      { [withBaseName(status != null ? status : "")]: status },
+      className
+    ),
+    disabled,
+    onClick: handleClick,
+    "aria-expanded": expanded,
+    id: `${id}-header`,
+    "aria-controls": `${id}-panel`,
+    value,
+    ...rest,
+    children: [
+      /* @__PURE__ */ jsx(ChevronRightIcon, {
+        "aria-hidden": "true",
+        className: withBaseName("icon")
+      }),
+      children,
+      status && /* @__PURE__ */ jsx(StatusIndicator, {
+        className: withBaseName("statusIndicator"),
+        status
+      })
+    ]
+  });
+});
+
+export { AccordionHeader };
+//# sourceMappingURL=AccordionHeader.js.map

package/dist-es/accordion/AccordionHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionHeader.js","sources":["../src/accordion/AccordionHeader.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, MouseEvent } from \"react\";\nimport { clsx } from \"clsx\";\nimport { StatusIndicator } from \"../status-indicator\";\nimport { ChevronRightIcon } from \"@salt-ds/icons\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { makePrefixer } from \"../utils\";\n\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionHeaderCss from \"./AccordionHeader.css\";\n\nexport type AccordionHeaderProps = ComponentPropsWithoutRef<\"button\">;\n\nconst withBaseName = makePrefixer(\"saltAccordionHeader\");\n\nexport const AccordionHeader = forwardRef<\n  HTMLButtonElement,\n  AccordionHeaderProps\n>(function AccordionHeader(props, ref) {\n  const { children, className, onClick, ...rest } = props;\n  const { value, expanded, toggle, disabled, id, status } = useAccordion();\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-accordion-header\",\n    css: accordionHeaderCss,\n    window: targetWindow,\n  });\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    toggle(event);\n    onClick?.(event);\n  };\n\n  return (\n    <button\n      ref={ref}\n      className={clsx(\n        withBaseName(),\n        { [withBaseName(status ?? \"\")]: status },\n        className\n      )}\n      disabled={disabled}\n      onClick={handleClick}\n      aria-expanded={expanded}\n      id={`${id}-header`}\n      aria-controls={`${id}-panel`}\n      value={value}\n      {...rest}\n    >\n      <ChevronRightIcon aria-hidden=\"true\" className={withBaseName(\"icon\")} />\n      {children}\n      {status && (\n        <StatusIndicator\n          className={withBaseName(\"statusIndicator\")}\n          status={status}\n        />\n      )}\n    </button>\n  );\n});\n"],"names":["AccordionHeader","accordionHeaderCss"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAEhD,MAAM,eAAkB,GAAA,UAAA,CAG7B,SAASA,gBAAAA,CAAgB,OAAO,GAAK,EAAA;AACrC,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,OAAA,EAAA,GAAY,MAAS,GAAA,KAAA,CAAA;AAClD,EAAM,MAAA,EAAE,OAAO,QAAU,EAAA,MAAA,EAAQ,UAAU,EAAI,EAAA,MAAA,KAAW,YAAa,EAAA,CAAA;AAEvE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,MAAA,CAAO,KAAK,CAAA,CAAA;AACZ,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,QAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,EAAE,CAAC,YAAA,CAAa,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,IAAI,MAAO,EAAA;AAAA,MACvC,SAAA;AAAA,KACF;AAAA,IACA,QAAA;AAAA,IACA,OAAS,EAAA,WAAA;AAAA,IACT,eAAe,EAAA,QAAA;AAAA,IACf,IAAI,CAAG,EAAA,EAAA,CAAA,OAAA,CAAA;AAAA,IACP,iBAAe,CAAG,EAAA,EAAA,CAAA,MAAA,CAAA;AAAA,IAClB,KAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,gBAAA,EAAA;AAAA,QAAiB,aAAY,EAAA,MAAA;AAAA,QAAO,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAA;AAAA,MACrE,QAAA;AAAA,MACA,0BACE,GAAA,CAAA,eAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,QACzC,MAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/accordion/AccordionPanel.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltAccordionPanel {\n  display: grid;\n  transition: grid-template-rows var(--salt-duration-perceptible) ease-in-out, opacity var(--salt-duration-perceptible) ease-in-out, visibility var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltAccordionPanel[aria-hidden=\"true\"] {\n  grid-template-rows: 0fr;\n  opacity: 0;\n  visibility: hidden;\n}\n\n.saltAccordionPanel {\n  grid-template-rows: 1fr;\n  opacity: 1;\n  visibility: visible;\n}\n\n.saltAccordionPanel-inner {\n  overflow: hidden;\n}\n\n.saltAccordionPanel-content {\n  padding-left: calc(var(--salt-spacing-200) + var(--salt-size-icon));\n  padding-block: var(--salt-spacing-300);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .saltAccordionPanel {\n    transition: none;\n  }\n\n  .saltAccordionPanel .saltAccordionPanel-inner {\n    overflow: visible;\n  }\n\n  .saltAccordionPanel[aria-hidden=\"true\"] .saltAccordionPanel-inner {\n    overflow: hidden;\n  }\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=AccordionPanel.css.js.map

package/dist-es/accordion/AccordionPanel.css.js.map

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

package/dist-es/accordion/AccordionPanel.js

@@ -0,0 +1,72 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useEffect } from 'react';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { clsx } from 'clsx';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI.js';
+import { useForkRef } from '../utils/useForkRef.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { useAccordion } from './AccordionContext.js';
+import css_248z from './AccordionPanel.css.js';
+
+const withBaseName = makePrefixer("saltAccordionPanel");
+const AccordionPanel = forwardRef(
+  function AccordionPanel2(props, ref) {
+    const { children, className, ...rest } = props;
+    const panelRef = useRef(null);
+    const handleRef = useForkRef(ref, panelRef);
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-accordion-panel",
+      css: css_248z,
+      window: targetWindow
+    });
+    const innerRef = useRef(null);
+    const { id, expanded } = useAccordion();
+    useEffect(() => {
+      const panel = panelRef.current;
+      if (!panel)
+        return;
+      const handleTransitionEnd = (event) => {
+        if (event.target === panel && expanded && innerRef.current) {
+          innerRef.current.style.overflow = "visible";
+        }
+      };
+      const handleTransitionStart = (event) => {
+        if (event.target === panel && !expanded && innerRef.current) {
+          innerRef.current.style.overflow = "hidden";
+        }
+      };
+      panel.addEventListener("transitionend", handleTransitionEnd);
+      panel.addEventListener("transitionstart", handleTransitionStart);
+      return () => {
+        panel.removeEventListener("transitionend", handleTransitionEnd);
+        panel.removeEventListener("transitionstart", handleTransitionStart);
+      };
+    }, [expanded]);
+    return /* @__PURE__ */ jsx("div", {
+      ref: handleRef,
+      className: clsx(withBaseName(), className),
+      role: "region",
+      id: `${id}-panel`,
+      "aria-labelledby": `${id}-header`,
+      "aria-hidden": !expanded ? "true" : void 0,
+      hidden: !expanded,
+      ...rest,
+      children: /* @__PURE__ */ jsx("div", {
+        className: withBaseName("inner"),
+        ref: innerRef,
+        children: /* @__PURE__ */ jsx("div", {
+          className: withBaseName("content"),
+          children
+        })
+      })
+    });
+  }
+);
+
+export { AccordionPanel };
+//# sourceMappingURL=AccordionPanel.js.map

package/dist-es/accordion/AccordionPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionPanel.js","sources":["../src/accordion/AccordionPanel.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, useEffect, useRef } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\n\nimport { makePrefixer, useForkRef } from \"../utils\";\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionPanelCss from \"./AccordionPanel.css\";\n\nexport type AccordionPanelProps = ComponentPropsWithoutRef<\"div\">;\n\nconst withBaseName = makePrefixer(\"saltAccordionPanel\");\n\nexport const AccordionPanel = forwardRef<HTMLDivElement, AccordionPanelProps>(\n  function AccordionPanel(props, ref) {\n    const { children, className, ...rest } = props;\n\n    const panelRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(ref, panelRef);\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-accordion-panel\",\n      css: accordionPanelCss,\n      window: targetWindow,\n    });\n\n    const innerRef = useRef<HTMLDivElement>(null);\n\n    const { id, expanded } = useAccordion();\n\n    useEffect(() => {\n      const panel = panelRef.current;\n      if (!panel) return;\n\n      const handleTransitionEnd = (event: TransitionEvent) => {\n        if (event.target === panel && expanded && innerRef.current) {\n          innerRef.current.style.overflow = \"visible\";\n        }\n      };\n      const handleTransitionStart = (event: TransitionEvent) => {\n        if (event.target === panel && !expanded && innerRef.current) {\n          innerRef.current.style.overflow = \"hidden\";\n        }\n      };\n      panel.addEventListener(\"transitionend\", handleTransitionEnd);\n      panel.addEventListener(\"transitionstart\", handleTransitionStart);\n\n      return () => {\n        panel.removeEventListener(\"transitionend\", handleTransitionEnd);\n        panel.removeEventListener(\"transitionstart\", handleTransitionStart);\n      };\n    }, [expanded]);\n\n    return (\n      <div\n        ref={handleRef}\n        className={clsx(withBaseName(), className)}\n        role=\"region\"\n        id={`${id}-panel`}\n        aria-labelledby={`${id}-header`}\n        aria-hidden={!expanded ? \"true\" : undefined}\n        hidden={!expanded}\n        {...rest}\n      >\n        <div className={withBaseName(\"inner\")} ref={innerRef}>\n          <div className={withBaseName(\"content\")}>{children}</div>\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":["AccordionPanel","accordionPanelCss"],"mappings":";;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEzC,IAAM,MAAA,QAAA,GAAW,OAAuB,IAAI,CAAA,CAAA;AAC5C,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,GAAA,EAAK,QAAQ,CAAA,CAAA;AAE1C,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,QAAA,GAAW,OAAuB,IAAI,CAAA,CAAA;AAE5C,IAAA,MAAM,EAAE,EAAA,EAAI,QAAS,EAAA,GAAI,YAAa,EAAA,CAAA;AAEtC,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,MAAM,QAAQ,QAAS,CAAA,OAAA,CAAA;AACvB,MAAA,IAAI,CAAC,KAAA;AAAO,QAAA,OAAA;AAEZ,MAAM,MAAA,mBAAA,GAAsB,CAAC,KAA2B,KAAA;AACtD,QAAA,IAAI,KAAM,CAAA,MAAA,KAAW,KAAS,IAAA,QAAA,IAAY,SAAS,OAAS,EAAA;AAC1D,UAAS,QAAA,CAAA,OAAA,CAAQ,MAAM,QAAW,GAAA,SAAA,CAAA;AAAA,SACpC;AAAA,OACF,CAAA;AACA,MAAM,MAAA,qBAAA,GAAwB,CAAC,KAA2B,KAAA;AACxD,QAAA,IAAI,MAAM,MAAW,KAAA,KAAA,IAAS,CAAC,QAAA,IAAY,SAAS,OAAS,EAAA;AAC3D,UAAS,QAAA,CAAA,OAAA,CAAQ,MAAM,QAAW,GAAA,QAAA,CAAA;AAAA,SACpC;AAAA,OACF,CAAA;AACA,MAAM,KAAA,CAAA,gBAAA,CAAiB,iBAAiB,mBAAmB,CAAA,CAAA;AAC3D,MAAM,KAAA,CAAA,gBAAA,CAAiB,mBAAmB,qBAAqB,CAAA,CAAA;AAE/D,MAAA,OAAO,MAAM;AACX,QAAM,KAAA,CAAA,mBAAA,CAAoB,iBAAiB,mBAAmB,CAAA,CAAA;AAC9D,QAAM,KAAA,CAAA,mBAAA,CAAoB,mBAAmB,qBAAqB,CAAA,CAAA;AAAA,OACpE,CAAA;AAAA,KACF,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAK,EAAA,SAAA;AAAA,MACL,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,IAAK,EAAA,QAAA;AAAA,MACL,IAAI,CAAG,EAAA,EAAA,CAAA,MAAA,CAAA;AAAA,MACP,mBAAiB,CAAG,EAAA,EAAA,CAAA,OAAA,CAAA;AAAA,MACpB,aAAA,EAAa,CAAC,QAAA,GAAW,MAAS,GAAA,KAAA,CAAA;AAAA,MAClC,QAAQ,CAAC,QAAA;AAAA,MACR,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAAG,GAAK,EAAA,QAAA;AAAA,QAC1C,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,UAAI,QAAA;AAAA,SAAS,CAAA;AAAA,OACrD,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/button/Button.css.js

@@ -1,4 +1,4 @@
-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";
+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  gap: var(--salt-spacing-50);\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  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}\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";
 
 export { css_248z as default };
 //# sourceMappingURL=Button.css.js.map

package/dist-es/card/InteractableCard.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to InteractableCard */\n.saltInteractableCard {\n  border-width: var(--saltCard-borderWidth, var(--card-borderWidth));\n  border-style: var(--saltCard-borderStyle, var(--salt-container-borderStyle));\n  border-color: var(--saltCard-borderColor, var(--salt-accent-borderColor));\n  border-radius: var(--saltCard-borderRadius, 0);\n  display: block;\n  transition: box-shadow var(--salt-duration-instant) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"bottom\"` (default) */\n.saltInteractableCard-accentBottom {\n  --card-borderWidth: 0 0 var(--salt-size-accent) 0;\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"left\"` */\n.saltInteractableCard-accentLeft {\n  --card-borderWidth: 0 0 0 var(--salt-size-accent);\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"top\"` */\n.saltInteractableCard-accentTop {\n  --card-borderWidth: var(--salt-size-accent) 0 0 0;\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"right\"` */\n.saltInteractableCard-accentRight {\n  --card-borderWidth: 0 var(--salt-size-accent) 0 0;\n}\n\n/* Styles applied to InteractableCard on focus */\na:focus-visible .saltInteractableCard,\n.saltInteractableCard:focus-visible {\n  cursor: var(--saltCard-interactable-cursor-focus, var(--salt-selectable-cursor-hover));\n  box-shadow: var(--saltCard-interactable-shadow-focus, var(--salt-overlayable-shadow-hover));\n  color: var(--saltCard-color-focus, var(--salt-text-primary-foreground));\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\na:link .saltInteractableCard * {\n  text-decoration: none;\n}\n\n/* Styles applied on active state to InteractableCard */\n.saltInteractableCard:active {\n  cursor: var(--saltCard-interactable-cursor-active, var(--salt-selectable-cursor-active));\n  box-shadow: var(--saltCard-interactable-shadow-active, var(--salt-overlayable-shadow-hover));\n}\n\n/* Styles applied on hover state to InteractableCard */\n.saltInteractableCard:hover {\n  cursor: var(--saltCard-interactable-cursor-hover, var(--salt-selectable-cursor-hover));\n  box-shadow: var(--saltCard-interactable-shadow-hover, var(--salt-overlayable-shadow-hover));\n}\n\n/* Styles applied to InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled,\n.saltInteractableCard-disabled:focus,\n.saltInteractableCard-disabled:hover,\n.saltInteractableCard-disabled:active {\n  border-color: var(--saltCard-borderColor-disabled, var(--salt-accent-borderColor-disabled));\n  box-shadow: var(--saltCard-interactable-shadow, var(--salt-overlayable-shadow));\n  background: var(--saltCard-background-disabled, var(--salt-container-primary-background-disabled));\n  color: var(--saltCard-color-disabled, var(--salt-text-primary-foreground-disabled));\n  cursor: var(--saltCard-interactable-cursor-disabled, var(--salt-selectable-cursor-disabled));\n  outline: none;\n}\n\n/* Styles applied to nested divs in InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled div {\n  pointer-events: none;\n}\n\n/* Class that can be used for anchor tags wrapping InteractableCard */\n.saltInteractableCard-link {\n  color: var(--saltCard-link-color, var(--salt-text-primary-foreground));\n  inset: var(--salt-focused-outlineInset);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n";
+var css_248z = "/* Styles applied to InteractableCard */\n.saltInteractableCard {\n  background: var(--saltCard-background, var(--salt-container-primary-background));\n  box-shadow: var(--saltCard-boxShadow, var(--salt-overlayable-shadow));\n  color: var(--saltCard-color, var(--salt-text-primary-foreground));\n  height: var(--saltCard-height, auto);\n  min-height: var(--saltCard-minHeight, 100%);\n  overflow: hidden;\n  border-width: var(--saltCard-borderWidth, var(--card-borderWidth));\n  border-style: var(--saltCard-borderStyle, var(--salt-container-borderStyle));\n  border-color: var(--saltCard-borderColor, var(--salt-accent-borderColor));\n  border-radius: var(--saltCard-borderRadius, 0);\n  display: block;\n  transition: box-shadow var(--salt-duration-instant) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Styles applied to Card content */\n.saltInteractableCard-content {\n  height: 100%;\n  padding: var(--saltCard-padding, var(--salt-size-container-spacing));\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"bottom\"` (default) */\n.saltInteractableCard-accentBottom {\n  --card-borderWidth: 0 0 var(--salt-size-accent) 0;\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"left\"` */\n.saltInteractableCard-accentLeft {\n  --card-borderWidth: 0 0 0 var(--salt-size-accent);\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"top\"` */\n.saltInteractableCard-accentTop {\n  --card-borderWidth: var(--salt-size-accent) 0 0 0;\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"right\"` */\n.saltInteractableCard-accentRight {\n  --card-borderWidth: 0 var(--salt-size-accent) 0 0;\n}\n\n/* Styles applied to InteractableCard on focus */\na:focus-visible .saltInteractableCard,\n.saltInteractableCard:focus-visible {\n  cursor: var(--saltCard-interactable-cursor-focus, var(--salt-selectable-cursor-hover));\n  box-shadow: var(--saltCard-interactable-shadow-focus, var(--salt-overlayable-shadow-hover));\n  color: var(--saltCard-color-focus, var(--salt-text-primary-foreground));\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\na:link .saltInteractableCard * {\n  text-decoration: none;\n}\n\n/* Styles applied on active state to InteractableCard */\n.saltInteractableCard:active {\n  cursor: var(--saltCard-interactable-cursor-active, var(--salt-selectable-cursor-active));\n  box-shadow: var(--saltCard-interactable-shadow-active, var(--salt-overlayable-shadow-hover));\n}\n\n/* Styles applied on hover state to InteractableCard */\n.saltInteractableCard:hover {\n  cursor: var(--saltCard-interactable-cursor-hover, var(--salt-selectable-cursor-hover));\n  box-shadow: var(--saltCard-interactable-shadow-hover, var(--salt-overlayable-shadow-hover));\n}\n\n/* Styles applied to InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled,\n.saltInteractableCard-disabled:focus,\n.saltInteractableCard-disabled:hover,\n.saltInteractableCard-disabled:active {\n  border-color: var(--saltCard-borderColor-disabled, var(--salt-accent-borderColor-disabled));\n  box-shadow: var(--saltCard-interactable-shadow, var(--salt-overlayable-shadow));\n  background: var(--saltCard-background-disabled, var(--salt-container-primary-background-disabled));\n  color: var(--saltCard-color-disabled, var(--salt-text-primary-foreground-disabled));\n  cursor: var(--saltCard-interactable-cursor-disabled, var(--salt-selectable-cursor-disabled));\n  outline: none;\n}\n\n/* Styles applied to nested divs in InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled div {\n  pointer-events: none;\n}\n\n/* Class that can be used for anchor tags wrapping InteractableCard */\n.saltInteractableCard-link {\n  color: var(--saltCard-link-color, var(--salt-text-primary-foreground));\n  inset: var(--salt-focused-outlineInset);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=InteractableCard.css.js.map

package/dist-es/card/InteractableCard.js

@@ -3,7 +3,6 @@ import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
-import { Card } from './Card.js';
 import { capitalize } from '../utils/capitalize.js';
 import { makePrefixer } from '../utils/makePrefixer.js';
 import '../utils/useFloatingUI.js';
@@ -40,7 +39,7 @@ const InteractableCard = forwardRef(function InteractableCard2(props, ref) {
     onClick
   });
   const { tabIndex, ...restCardProps } = cardProps;
-  return /* @__PURE__ */ jsx(Card, {
+  return /* @__PURE__ */ jsx("div", {
     ...restCardProps,
     className: clsx(
       withBaseName(),
@@ -53,7 +52,10 @@ const InteractableCard = forwardRef(function InteractableCard2(props, ref) {
     ),
     ...rest,
     ref,
-    children
+    children: /* @__PURE__ */ jsx("div", {
+      className: withBaseName("content"),
+      children
+    })
   });
 });
 

package/dist-es/card/InteractableCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractableCard.js","sources":["../src/card/InteractableCard.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { Card, CardProps } from \"./Card\";\nimport { capitalize, makePrefixer } from \"../utils\";\nimport { useInteractableCard } from \"./useInteractableCard\";\n\nimport interactableCardCss from \"./InteractableCard.css\";\n\nconst withBaseName = makePrefixer(\"saltInteractableCard\");\n\n// TODO: Remove omissions when Card props deprecated\nexport interface InteractableCardProps\n  extends Omit<CardProps, \"disabled\" | \"interactable\"> {\n  /**\n   * Accent border position: defaults to \"bottom\"\n   */\n  accentPlacement?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * If `true`, the card will be disabled.\n   */\n  disabled?: boolean;\n}\n\nexport const InteractableCard = forwardRef<\n  HTMLDivElement,\n  InteractableCardProps\n>(function InteractableCard(props, ref) {\n  const {\n    accentPlacement = \"bottom\",\n    children,\n    className,\n    disabled,\n    onBlur,\n    onClick,\n    onKeyUp,\n    onKeyDown,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-interactable-card\",\n    css: interactableCardCss,\n    window: targetWindow,\n  });\n\n  const { active, cardProps } = useInteractableCard({\n    disabled,\n    onKeyUp,\n    onKeyDown,\n    onBlur,\n    onClick,\n  });\n  // for now, we do not want to spread tab index here as users may be wrapping in a link\n  const { tabIndex, ...restCardProps } = cardProps;\n\n  return (\n    <Card\n      {...restCardProps}\n      className={clsx(\n        withBaseName(),\n        withBaseName(`accent${capitalize(accentPlacement)}`),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"active\")]: active,\n        },\n        className\n      )}\n      {...rest}\n      ref={ref}\n    >\n      {children}\n    </Card>\n  );\n});\n"],"names":["InteractableCard","interactableCardCss"],"mappings":";;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA,CAAA;AAejD,MAAM,gBAAmB,GAAA,UAAA,CAG9B,SAASA,iBAAAA,CAAiB,OAAO,GAAK,EAAA;AACtC,EAAM,MAAA;AAAA,IACJ,eAAkB,GAAA,QAAA;AAAA,IAClB,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,MAAA,EAAQ,SAAU,EAAA,GAAI,mBAAoB,CAAA;AAAA,IAChD,QAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,QAAa,EAAA,GAAA,aAAA,EAAkB,GAAA,SAAA,CAAA;AAEvC,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IACE,GAAG,aAAA;AAAA,IACJ,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,YAAa,CAAA,CAAA,MAAA,EAAS,UAAW,CAAA,eAAe,CAAG,CAAA,CAAA,CAAA;AAAA,MACnD;AAAA,QACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC5B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACC,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"InteractableCard.js","sources":["../src/card/InteractableCard.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { capitalize, makePrefixer } from \"../utils\";\nimport { useInteractableCard } from \"./useInteractableCard\";\n\nimport interactableCardCss from \"./InteractableCard.css\";\n\nconst withBaseName = makePrefixer(\"saltInteractableCard\");\n\n// TODO: Remove omissions when Card props deprecated\nexport interface InteractableCardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Accent border position: defaults to \"bottom\"\n   */\n  accentPlacement?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * If `true`, the card will be disabled.\n   */\n  disabled?: boolean;\n}\n\nexport const InteractableCard = forwardRef<\n  HTMLDivElement,\n  InteractableCardProps\n>(function InteractableCard(props, ref) {\n  const {\n    accentPlacement = \"bottom\",\n    children,\n    className,\n    disabled,\n    onBlur,\n    onClick,\n    onKeyUp,\n    onKeyDown,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-interactable-card\",\n    css: interactableCardCss,\n    window: targetWindow,\n  });\n\n  const { active, cardProps } = useInteractableCard({\n    disabled,\n    onKeyUp,\n    onKeyDown,\n    onBlur,\n    onClick,\n  });\n  // for now, we do not want to spread tab index here as users may be wrapping in a link\n  const { tabIndex, ...restCardProps } = cardProps;\n\n  return (\n    <div\n      {...restCardProps}\n      className={clsx(\n        withBaseName(),\n        withBaseName(`accent${capitalize(accentPlacement)}`),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"active\")]: active,\n        },\n        className\n      )}\n      {...rest}\n      ref={ref}\n    >\n      <div className={withBaseName(\"content\")}>{children}</div>\n    </div>\n  );\n});\n"],"names":["InteractableCard","interactableCardCss"],"mappings":";;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA,CAAA;AAcjD,MAAM,gBAAmB,GAAA,UAAA,CAG9B,SAASA,iBAAAA,CAAiB,OAAO,GAAK,EAAA;AACtC,EAAM,MAAA;AAAA,IACJ,eAAkB,GAAA,QAAA;AAAA,IAClB,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,MAAA,EAAQ,SAAU,EAAA,GAAI,mBAAoB,CAAA;AAAA,IAChD,QAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,QAAa,EAAA,GAAA,aAAA,EAAkB,GAAA,SAAA,CAAA;AAEvC,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACE,GAAG,aAAA;AAAA,IACJ,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,YAAa,CAAA,CAAA,MAAA,EAAS,UAAW,CAAA,eAAe,CAAG,CAAA,CAAA,CAAA;AAAA,MACnD;AAAA,QACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,OAC5B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACC,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEA,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MAAI,QAAA;AAAA,KAAS,CAAA;AAAA,GACrD,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/checkbox/Checkbox.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to root component */\n\n.saltCheckbox {\n  cursor: var(--salt-selectable-cursor-hover);\n  background: var(--saltCheckbox-background, none);\n  display: flex;\n  gap: var(--saltCheckbox-gap, var(--salt-spacing-100));\n  position: relative;\n  width: fit-content;\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltCheckbox-disabled {\n  pointer-events: visible;\n  color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n  cursor: inherit;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  z-index: var(--salt-zIndex-default);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltCheckbox {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltCheckbox-disabled {\n  color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltCheckbox-readOnly {\n  color: var(--salt-text-primary-foreground);\n  cursor: var(--salt-selectable-cursor-readonly);\n}\n\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline: var(--saltCheckbox-outline, var(--salt-focused-outline));\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-error-foreground);\n  border-color: var(--salt-status-error-foreground);\n  color: var(--salt-status-error-foreground);\n}\n\n.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-warning-foreground);\n  border-color: var(--salt-status-warning-foreground);\n  color: var(--salt-status-warning-foreground);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n  cursor: inherit;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  z-index: var(--salt-zIndex-default);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Checkbox.css.js.map