@salt-ds/core 1.72.0 → 1.74.0

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

@@ -1 +1 @@
-{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  FloatingFocusManager,\n  type FloatingFocusManagerProps,\n  FloatingPortal,\n  flip,\n  limitShift,\n  type Middleware,\n  type Platform,\n  platform,\n  type Strategy,\n  shift,\n  type UseFloatingOptions,\n  useFloating,\n} from \"@floating-ui/react\";\nimport {\n  type ComponentPropsWithoutRef,\n  createContext,\n  forwardRef,\n  type ReactNode,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { SaltProvider, SaltProviderNext, useTheme } from \"../../salt-provider\";\nimport { usePreventScroll } from \"../usePreventScroll\";\n\nexport interface FloatingComponentProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Whether the floating component is open (used for determining whether to show the component)\n   * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.\n   * for caching windows and reusing them, rather than always spawning a new one\n   */\n  open: boolean;\n  /**\n   * Use this prop when `FloatingFocusManager` is needed for floating component\n   */\n  focusManagerProps?: Omit<FloatingFocusManagerProps, \"children\">;\n  /**\n   * Position and sizing optional props for the floating component. `top`, `left`, and `position` for floating elements where they aren't positioned with relative to the trigger.\n   * `width` and `height` are used to define the size of the floating element.\n   *\n   */\n  top?: number;\n  left?: number;\n  width?: number;\n  height?: number;\n  position?: Strategy;\n  /**\n   * Makes the page unscrollable when the floating component is open.\n   */\n  lockScroll?: boolean;\n}\n\nconst DefaultFloatingComponent = forwardRef<\n  HTMLDivElement,\n  FloatingComponentProps\n>(function DefaultFloatingComponent(props, ref) {\n  const {\n    open,\n    top,\n    left,\n    position,\n    width: _width,\n    height: _height,\n    focusManagerProps,\n    lockScroll,\n    style: styleProp,\n    ...rest\n  } = props;\n  const style = {\n    ...styleProp,\n    top,\n    left,\n    position,\n  };\n\n  const { themeNext } = useTheme();\n  usePreventScroll({ isDisabled: !lockScroll || !open });\n\n  const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider;\n\n  if (focusManagerProps && open) {\n    return (\n      <FloatingPortal>\n        <ChosenSaltProvider applyClassesTo=\"scope\">\n          <FloatingFocusManager {...focusManagerProps}>\n            <div style={style} {...rest} ref={ref} />\n          </FloatingFocusManager>\n        </ChosenSaltProvider>\n      </FloatingPortal>\n    );\n  }\n\n  return open ? (\n    <FloatingPortal>\n      <ChosenSaltProvider applyClassesTo=\"scope\">\n        <div style={style} {...rest} ref={ref} />\n      </ChosenSaltProvider>\n    </FloatingPortal>\n  ) : null;\n});\n\nexport interface FloatingComponentContextType {\n  Component: typeof DefaultFloatingComponent;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n  Component: DefaultFloatingComponent,\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 interface UseFloatingUIProps\n  extends Pick<\n    UseFloatingOptions,\n    | \"placement\"\n    | \"strategy\"\n    | \"open\"\n    | \"onOpenChange\"\n    | \"nodeId\"\n    | \"rootContext\"\n  > {\n  /**\n   * Function to update the default middleware used to extend or replace it\n   */\n  middleware?: Middleware[];\n}\n\ntype GetMiddleware = (middleware: Middleware[]) => Middleware[];\n\nconst defaultGetMiddleware: GetMiddleware = (defaultMiddleware) =>\n  defaultMiddleware;\n\ninterface FloatingPlatformContextType {\n  platform: Platform;\n  middleware: GetMiddleware;\n  animationFrame: boolean;\n}\n\nconst defaultFloatingPlaform: FloatingPlatformContextType = {\n  platform,\n  middleware: defaultGetMiddleware,\n  animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n  defaultFloatingPlaform,\n);\n\nexport interface FloatingPlatformProviderProps {\n  platform?: Platform;\n  middleware?: GetMiddleware;\n  children: ReactNode;\n  animationFrame?: boolean;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n  const {\n    platform: platformProp,\n    middleware,\n    animationFrame,\n    children,\n  } = props;\n\n  const floatingPlatformContextValue = useMemo<FloatingPlatformContextType>(\n    () => ({\n      platform: platformProp ?? platform,\n      middleware: middleware ?? defaultGetMiddleware,\n      animationFrame: animationFrame || false,\n    }),\n    [platformProp, middleware, animationFrame],\n  );\n\n  return (\n    <FloatingPlatformContext.Provider value={floatingPlatformContextValue}>\n      {children}\n    </FloatingPlatformContext.Provider>\n  );\n}\n\nexport function useFloatingPlatform() {\n  return useContext(FloatingPlatformContext);\n}\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n  flip(),\n  shift({ limiter: limitShift() }),\n];\n\ntype UseFloatingRefs = ReturnType<typeof useFloating>[\"refs\"];\n\nexport interface UseFloatingUIReturn extends ReturnType<typeof useFloating> {\n  reference: UseFloatingRefs[\"setReference\"];\n  floating: UseFloatingRefs[\"setFloating\"];\n}\n\nexport function useFloatingUI(props: UseFloatingUIProps): UseFloatingUIReturn {\n  const {\n    middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n    open = false,\n    onOpenChange,\n    ...other\n  } = props;\n\n  const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n    open,\n    boolean,\n    reason,\n  ) => {\n    update();\n    onOpenChange?.(open, boolean, reason);\n  };\n\n  const {\n    platform: contextPlatform,\n    middleware: contextMiddleware,\n    animationFrame,\n  } = useFloatingPlatform();\n\n  const { refs, update, ...rest } = useFloating({\n    ...other,\n    middleware: contextMiddleware(middleware),\n    open,\n    onOpenChange: handleOpenChange,\n    whileElementsMounted: (...args) => {\n      const cleanup = autoUpdate(...args, { animationFrame });\n\n      return cleanup;\n    },\n    platform: contextPlatform,\n  });\n\n  return {\n    reference: refs.setReference,\n    floating: refs.setFloating,\n    refs,\n    update,\n    ...rest,\n  };\n}\n"],"names":["forwardRef","DefaultFloatingComponent","useTheme","usePreventScroll","SaltProviderNext","SaltProvider","FloatingPortal","jsx","FloatingFocusManager","createContext","useMemo","useContext","platform","flip","shift","limitShift","open","useFloating","autoUpdate"],"mappings":"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"}
+{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  FloatingFocusManager,\n  type FloatingFocusManagerProps,\n  FloatingPortal,\n  flip,\n  limitShift,\n  type Middleware,\n  type Platform,\n  platform,\n  type Strategy,\n  shift,\n  type UseFloatingOptions,\n  useFloating,\n} from \"@floating-ui/react\";\nimport {\n  type ComponentPropsWithoutRef,\n  createContext,\n  forwardRef,\n  type ReactNode,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { SaltProvider, SaltProviderNext, useTheme } from \"../../salt-provider\";\nimport { usePreventScroll } from \"../usePreventScroll\";\n\nexport interface FloatingComponentProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Whether the floating component is open (used for determining whether to show the component)\n   * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.\n   * for caching windows and reusing them, rather than always spawning a new one\n   */\n  open: boolean;\n  /**\n   * Use this prop when `FloatingFocusManager` is needed for floating component\n   */\n  focusManagerProps?: Omit<FloatingFocusManagerProps, \"children\">;\n  /**\n   * Position and sizing optional props for the floating component. `top`, `left`, and `position` for floating elements where they aren't positioned with relative to the trigger.\n   * `width` and `height` are used to define the size of the floating element.\n   *\n   */\n  top?: number;\n  left?: number;\n  width?: number;\n  height?: number;\n  position?: Strategy;\n  /**\n   * Makes the page unscrollable when the floating component is open.\n   */\n  lockScroll?: boolean;\n}\n\nconst DefaultFloatingComponent = forwardRef<\n  HTMLDivElement,\n  FloatingComponentProps\n>(function DefaultFloatingComponent(props, ref) {\n  const {\n    open,\n    top,\n    left,\n    position,\n    width: _width,\n    height: _height,\n    focusManagerProps,\n    lockScroll,\n    style: styleProp,\n    ...rest\n  } = props;\n  const style = {\n    ...styleProp,\n    top,\n    left,\n    position,\n  };\n\n  const { themeNext } = useTheme();\n  usePreventScroll({ isDisabled: !lockScroll || !open });\n\n  const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider;\n\n  if (focusManagerProps && open) {\n    return (\n      <FloatingPortal>\n        <ChosenSaltProvider applyClassesTo=\"scope\">\n          <FloatingFocusManager {...focusManagerProps}>\n            <div style={style} {...rest} ref={ref} />\n          </FloatingFocusManager>\n        </ChosenSaltProvider>\n      </FloatingPortal>\n    );\n  }\n\n  return open ? (\n    <FloatingPortal>\n      <ChosenSaltProvider applyClassesTo=\"scope\">\n        <div style={style} {...rest} ref={ref} />\n      </ChosenSaltProvider>\n    </FloatingPortal>\n  ) : null;\n});\n\nexport interface FloatingComponentContextType {\n  Component: typeof DefaultFloatingComponent;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n  Component: DefaultFloatingComponent,\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 interface UseFloatingUIProps\n  extends Pick<\n    UseFloatingOptions,\n    | \"placement\"\n    | \"strategy\"\n    | \"open\"\n    | \"onOpenChange\"\n    | \"nodeId\"\n    | \"rootContext\"\n  > {\n  /**\n   * Function to update the default middleware used to extend or replace it\n   */\n  middleware?: Middleware[];\n}\n\ntype GetMiddleware = (middleware: Middleware[]) => Middleware[];\n\nconst defaultGetMiddleware: GetMiddleware = (defaultMiddleware) =>\n  defaultMiddleware;\n\ninterface FloatingPlatformContextType {\n  platform: Platform;\n  middleware: GetMiddleware;\n  animationFrame: boolean;\n}\n\nconst defaultFloatingPlaform: FloatingPlatformContextType = {\n  platform,\n  middleware: defaultGetMiddleware,\n  animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n  defaultFloatingPlaform,\n);\n\nexport interface FloatingPlatformProviderProps {\n  platform?: Platform;\n  middleware?: GetMiddleware;\n  children: ReactNode;\n  animationFrame?: boolean;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n  const {\n    platform: platformProp,\n    middleware,\n    animationFrame,\n    children,\n  } = props;\n\n  const floatingPlatformContextValue = useMemo<FloatingPlatformContextType>(\n    () => ({\n      platform: platformProp ?? platform,\n      middleware: middleware ?? defaultGetMiddleware,\n      animationFrame: animationFrame || false,\n    }),\n    [platformProp, middleware, animationFrame],\n  );\n\n  return (\n    <FloatingPlatformContext.Provider value={floatingPlatformContextValue}>\n      {children}\n    </FloatingPlatformContext.Provider>\n  );\n}\n\nexport function useFloatingPlatform() {\n  return useContext(FloatingPlatformContext);\n}\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE: Middleware[] = [\n  flip(),\n  shift({ limiter: limitShift() }),\n];\n\ntype UseFloatingRefs = ReturnType<typeof useFloating>[\"refs\"];\n\nexport interface UseFloatingUIReturn extends ReturnType<typeof useFloating> {\n  reference: UseFloatingRefs[\"setReference\"];\n  floating: UseFloatingRefs[\"setFloating\"];\n}\n\nexport function useFloatingUI(props: UseFloatingUIProps): UseFloatingUIReturn {\n  const {\n    middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n    open = false,\n    onOpenChange,\n    ...other\n  } = props;\n\n  const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n    open,\n    boolean,\n    reason,\n  ) => {\n    update();\n    onOpenChange?.(open, boolean, reason);\n  };\n\n  const {\n    platform: contextPlatform,\n    middleware: contextMiddleware,\n    animationFrame,\n  } = useFloatingPlatform();\n\n  const { refs, update, ...rest } = useFloating({\n    ...other,\n    middleware: contextMiddleware(middleware),\n    open,\n    onOpenChange: handleOpenChange,\n    whileElementsMounted: (...args) => {\n      const cleanup = autoUpdate(...args, { animationFrame });\n\n      return cleanup;\n    },\n    platform: contextPlatform,\n  });\n\n  return {\n    reference: refs.setReference,\n    floating: refs.setFloating,\n    refs,\n    update,\n    ...rest,\n  };\n}\n"],"names":["forwardRef","DefaultFloatingComponent","useTheme","usePreventScroll","SaltProviderNext","SaltProvider","FloatingPortal","jsx","FloatingFocusManager","createContext","useMemo","useContext","platform","flip","shift","limitShift","open","useFloating","autoUpdate"],"mappings":"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"}

package/dist-cjs/utils/useForkRef.js

@@ -1,17 +1,14 @@
 'use strict';
 
 var React = require('react');
-var setRef = require('./setRef.js');
+var forkRef = require('./forkRef.js');
 
 function useForkRef(refA, refB) {
   return React.useMemo(() => {
     if (refA == null && refB == null) {
-      return () => null;
+      return null;
     }
-    return (refValue) => {
-      setRef.setRef(refA, refValue);
-      setRef.setRef(refB, refValue);
-    };
+    return forkRef.forkRef(refA, refB);
   }, [refA, refB]);
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"useForkRef.js","sources":["../src/utils/useForkRef.ts"],"sourcesContent":["import { type Ref, useMemo } from \"react\";\nimport { setRef } from \"./setRef\";\n\nexport function useForkRef<Instance>(\n  refA: Ref<Instance> | null | undefined,\n  refB: Ref<Instance> | null | undefined,\n): Ref<Instance> | null {\n  /**\n   * This will create a new function if the ref props change and are defined.\n   * This means React will call the old forkRef with `null` and the new forkRef\n   * with the ref. Cleanup naturally emerges from this behavior\n   */\n  return useMemo(() => {\n    if (refA == null && refB == null) {\n      return () => null;\n    }\n    return (refValue: Instance | null) => {\n      setRef(refA, refValue);\n      setRef(refB, refValue);\n    };\n  }, [refA, refB]);\n}\n"],"names":["useMemo","setRef"],"mappings":";;;;;AAGO,SAAS,UAAA,CACd,MACA,IAAA,EACsB;AAMtB,EAAA,OAAOA,cAAQ,MAAM;AACnB,IAAA,IAAI,IAAA,IAAQ,IAAA,IAAQ,IAAA,IAAQ,IAAA,EAAM;AAChC,MAAA,OAAO,MAAM,IAAA;AAAA,IACf;AACA,IAAA,OAAO,CAAC,QAAA,KAA8B;AACpC,MAAAC,aAAA,CAAO,MAAM,QAAQ,CAAA;AACrB,MAAAA,aAAA,CAAO,MAAM,QAAQ,CAAA;AAAA,IACvB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,EAAM,IAAI,CAAC,CAAA;AACjB;;;;"}
+{"version":3,"file":"useForkRef.js","sources":["../src/utils/useForkRef.ts"],"sourcesContent":["import { type Ref, useMemo } from \"react\";\nimport { forkRef } from \"./forkRef\";\n\nexport function useForkRef<Instance>(\n  refA: Ref<Instance> | null | undefined,\n  refB: Ref<Instance> | null | undefined,\n): Ref<Instance> | null {\n  /**\n   * This creates a new function when either ref changes, so React detaches the\n   * old forkRef, which runs the cleanups of the old refs, and attaches the new\n   * one.\n   */\n  return useMemo(() => {\n    if (refA == null && refB == null) {\n      return null;\n    }\n\n    return forkRef(refA, refB);\n  }, [refA, refB]);\n}\n"],"names":["useMemo","forkRef"],"mappings":";;;;;AAGO,SAAS,UAAA,CACd,MACA,IAAA,EACsB;AAMtB,EAAA,OAAOA,cAAQ,MAAM;AACnB,IAAA,IAAI,IAAA,IAAQ,IAAA,IAAQ,IAAA,IAAQ,IAAA,EAAM;AAChC,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,OAAOC,eAAA,CAAQ,MAAM,IAAI,CAAA;AAAA,EAC3B,CAAA,EAAG,CAAC,IAAA,EAAM,IAAI,CAAC,CAAA;AACjB;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.js","sources":["../src/utils/useResizeObserver.ts"],"sourcesContent":["import { type RefObject, useEffect } from \"react\";\nimport { ownerWindow } from \"./ownerWindow\";\n\nexport interface UseResizeObserverProps {\n  ref: RefObject<HTMLElement>;\n  onResize: () => void;\n}\n\nexport function useResizeObserver({ ref, onResize }: UseResizeObserverProps) {\n  useEffect(() => {\n    const element = ref?.current;\n    if (!element) return;\n\n    const win = ownerWindow(element);\n\n    const resizeObserver = new win.ResizeObserver((entries) => {\n      requestAnimationFrame(() => {\n        if (entries.length === 0) return;\n\n        onResize();\n      });\n    });\n    resizeObserver.observe(element);\n\n    return () => {\n      if (element) {\n        resizeObserver.unobserve(element);\n      }\n    };\n  }, [ref, onResize]);\n}\n"],"names":["useEffect","ownerWindow"],"mappings":";;;;;AAQO,SAAS,iBAAA,CAAkB,EAAE,GAAA,EAAK,QAAA,EAAS,EAA2B;AAC3E,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAA,IAAA,IAAA,GAAA,MAAA,GAAA,GAAA,CAAK,OAAA;AACrB,IAAA,IAAI,CAAC,OAAA,EAAS;AAEd,IAAA,MAAM,GAAA,GAAMC,wBAAY,OAAO,CAAA;AAE/B,IAAA,MAAM,cAAA,GAAiB,IAAI,GAAA,CAAI,cAAA,CAAe,CAAC,OAAA,KAAY;AACzD,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,IAAI,OAAA,CAAQ,WAAW,CAAA,EAAG;AAE1B,QAAA,QAAA,EAAS;AAAA,MACX,CAAC,CAAA;AAAA,IACH,CAAC,CAAA;AACD,IAAA,cAAA,CAAe,QAAQ,OAAO,CAAA;AAE9B,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,OAAA,EAAS;AACX,QAAA,cAAA,CAAe,UAAU,OAAO,CAAA;AAAA,MAClC;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,GAAA,EAAK,QAAQ,CAAC,CAAA;AACpB;;;;"}
+{"version":3,"file":"useResizeObserver.js","sources":["../src/utils/useResizeObserver.ts"],"sourcesContent":["import { type RefObject, useEffect } from \"react\";\nimport { ownerWindow } from \"./ownerWindow\";\n\nexport interface UseResizeObserverProps {\n  ref: RefObject<HTMLElement | null>;\n  onResize: () => void;\n}\n\nexport function useResizeObserver({ ref, onResize }: UseResizeObserverProps) {\n  useEffect(() => {\n    const element = ref?.current;\n    if (!element) return;\n\n    const win = ownerWindow(element);\n\n    const resizeObserver = new win.ResizeObserver((entries) => {\n      requestAnimationFrame(() => {\n        if (entries.length === 0) return;\n\n        onResize();\n      });\n    });\n    resizeObserver.observe(element);\n\n    return () => {\n      if (element) {\n        resizeObserver.unobserve(element);\n      }\n    };\n  }, [ref, onResize]);\n}\n"],"names":["useEffect","ownerWindow"],"mappings":";;;;;AAQO,SAAS,iBAAA,CAAkB,EAAE,GAAA,EAAK,QAAA,EAAS,EAA2B;AAC3E,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAA,IAAA,IAAA,GAAA,MAAA,GAAA,GAAA,CAAK,OAAA;AACrB,IAAA,IAAI,CAAC,OAAA,EAAS;AAEd,IAAA,MAAM,GAAA,GAAMC,wBAAY,OAAO,CAAA;AAE/B,IAAA,MAAM,cAAA,GAAiB,IAAI,GAAA,CAAI,cAAA,CAAe,CAAC,OAAA,KAAY;AACzD,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,IAAI,OAAA,CAAQ,WAAW,CAAA,EAAG;AAE1B,QAAA,QAAA,EAAS;AAAA,MACX,CAAC,CAAA;AAAA,IACH,CAAC,CAAA;AACD,IAAA,cAAA,CAAe,QAAQ,OAAO,CAAA;AAE9B,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,OAAA,EAAS;AACX,QAAA,cAAA,CAAe,UAAU,OAAO,CAAA;AAAA,MAClC;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,GAAA,EAAK,QAAQ,CAAC,CAAA;AACpB;;;;"}

package/dist-cjs/vertical-navigation/VerticalNavigationSubMenu.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltVerticalNavigationSubMenu {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-fixed-100);\n  list-style: none;\n  padding: var(--salt-spacing-fixed-100) 0 0;\n  margin: 0;\n}\n\n.saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent {\n  font-weight: var(--salt-text-heading-fontWeight-small);\n}\n";
+var css_248z = ".saltVerticalNavigationSubMenu {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-fixed-100);\n  list-style: none;\n  padding: var(--salt-spacing-fixed-100) 0 0;\n  margin: 0;\n}\n\n.saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent {\n  font-weight: var(--salt-text-heading-fontWeight-lighter);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=VerticalNavigationSubMenu.css.js.map

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

@@ -1,4 +1,4 @@
-var css_248z = ".saltAccordionHeader {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  border: 0;\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  background: transparent;\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-content-primary-foreground);\n  font-weight: var(--salt-text-fontWeight-strong);\n  letter-spacing: var(--salt-text-letterSpacing);\n  text-align: left;\n  cursor: var(--salt-cursor-hover);\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: transparent;\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-content {\n  padding: var(--salt-spacing-75) 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.saltAccordionHeader .saltAccordionHeader-icon {\n  height: var(--salt-size-base);\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-success-borderColor);\n}\n\n.saltAccordionHeader .saltAccordionHeader-statusIndicator {\n  height: var(--salt-size-base);\n  margin-left: auto;\n}\n\n.saltAccordionHeader:disabled {\n  background: transparent;\n  opacity: 0.4;\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--salt-cursor-disabled);\n}\n";
+var css_248z = ".saltAccordionHeader {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  border: 0;\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  background: transparent;\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-content-primary-foreground);\n  font-weight: var(--salt-text-fontWeight-bolder);\n  letter-spacing: var(--salt-text-letterSpacing);\n  text-align: left;\n  cursor: var(--salt-cursor-hover);\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: transparent;\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-content {\n  padding: var(--salt-spacing-75) 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.saltAccordionHeader .saltAccordionHeader-icon {\n  height: var(--salt-size-base);\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-success-borderColor);\n}\n\n.saltAccordionHeader .saltAccordionHeader-statusIndicator {\n  height: var(--salt-size-base);\n  margin-left: auto;\n}\n\n.saltAccordionHeader:disabled {\n  background: transparent;\n  opacity: 0.4;\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--salt-cursor-disabled);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=AccordionHeader.css.js.map

package/dist-es/border-layout/BorderLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"BorderLayout.js","sources":["../src/border-layout/BorderLayout.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  Children,\n  type ElementType,\n  type ForwardedRef,\n  type FunctionComponent,\n  forwardRef,\n  isValidElement,\n  type ReactNode,\n  useEffect,\n} from \"react\";\n\nimport type { BorderPosition } from \"../border-item\";\nimport { GridLayout, type GridLayoutProps } from \"../grid-layout\";\nimport {\n  makePrefixer,\n  type PolymorphicComponentPropWithRef,\n  type ResponsiveProp,\n} from \"../utils\";\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: ReactNode;\n      /**\n       * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n       */\n      margin?: ResponsiveProp<number | string>;\n      /**\n       * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n       */\n      padding?: ResponsiveProp<number | string>;\n    }\n  >;\n\nconst withBaseName = makePrefixer(\"saltBorderLayout\");\n\nconst numberOfColumns = 3;\n\ntype BorderLayoutComponent = <T extends ElementType = \"div\">(\n  props: BorderLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const BorderLayout: BorderLayoutComponent = forwardRef(\n  function BorderLayout<T extends ElementType>(\n    props: unknown,\n    ref?: ForwardedRef<unknown>,\n  ) {\n    // Props need to be typed this way due to polymorphic types not working with required props.\n    const { as, children, className, gap, style, ...rest } =\n      props as BorderLayoutProps<T>;\n\n    const borderAreas = Children.map(\n      children,\n      (child) => isValidElement(child) && child.props.position,\n    ) as BorderPosition[];\n\n    const hasNorth = borderAreas.includes(\"north\");\n    const hasWest = borderAreas.includes(\"west\");\n    const hasEast = borderAreas.includes(\"east\");\n    const hasSouth = borderAreas.includes(\"south\");\n\n    const middleColumns = [\n      hasWest ? \"west\" : undefined,\n      \"center\",\n      hasEast ? \"east\" : undefined,\n    ].filter(Boolean) as BorderPosition[];\n\n    const gridTemplateColumns = [\n      hasWest ? \"min-content\" : undefined,\n      \"1fr\",\n      hasEast ? \"min-content\" : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n    const gridTemplateRows = [\n      hasNorth ? \"min-content\" : undefined,\n      \"1fr\",\n      hasSouth ? \"min-content\" : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n    const gridTemplateSections = [\n      hasNorth\n        ? `\"${\"north \".repeat(middleColumns.length).trimEnd()}\"`\n        : undefined,\n      `\"${middleColumns.join(\" \")}\"`,\n      hasSouth\n        ? `\"${\"south \".repeat(middleColumns.length).trimEnd()}\"`\n        : undefined,\n    ].filter(Boolean);\n\n    const gridTemplateAreas = gridTemplateSections.join(\" \");\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      \"--gridLayout-areaColumns\": gridTemplateColumns,\n      \"--gridLayout-areaRows\": gridTemplateRows,\n    };\n\n    return (\n      <GridLayout\n        as={as as ElementType}\n        className={clsx(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":["BorderLayout"],"mappings":"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"}
+{"version":3,"file":"BorderLayout.js","sources":["../src/border-layout/BorderLayout.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  Children,\n  type ElementType,\n  type ForwardedRef,\n  type FunctionComponent,\n  forwardRef,\n  isValidElement,\n  type ReactNode,\n  useEffect,\n} from \"react\";\n\nimport type { BorderPosition } from \"../border-item\";\nimport { GridLayout, type GridLayoutProps } from \"../grid-layout\";\nimport {\n  makePrefixer,\n  type PolymorphicComponentPropWithRef,\n  type ResponsiveProp,\n} from \"../utils\";\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: ReactNode;\n      /**\n       * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n       */\n      margin?: ResponsiveProp<number | string>;\n      /**\n       * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n       */\n      padding?: ResponsiveProp<number | string>;\n    }\n  >;\n\nconst withBaseName = makePrefixer(\"saltBorderLayout\");\n\nconst numberOfColumns = 3;\n\ntype BorderLayoutComponent = <T extends ElementType = \"div\">(\n  props: BorderLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const BorderLayout: BorderLayoutComponent = forwardRef(\n  function BorderLayout<T extends ElementType>(\n    props: unknown,\n    ref?: ForwardedRef<unknown>,\n  ) {\n    // Props need to be typed this way due to polymorphic types not working with required props.\n    const { as, children, className, gap, style, ...rest } =\n      props as BorderLayoutProps<T>;\n\n    const borderAreas = Children.map(\n      children,\n      (child) =>\n        isValidElement<{ position?: BorderPosition }>(child) &&\n        child.props.position,\n    ) as BorderPosition[];\n\n    const hasNorth = borderAreas.includes(\"north\");\n    const hasWest = borderAreas.includes(\"west\");\n    const hasEast = borderAreas.includes(\"east\");\n    const hasSouth = borderAreas.includes(\"south\");\n\n    const middleColumns = [\n      hasWest ? \"west\" : undefined,\n      \"center\",\n      hasEast ? \"east\" : undefined,\n    ].filter(Boolean) as BorderPosition[];\n\n    const gridTemplateColumns = [\n      hasWest ? \"min-content\" : undefined,\n      \"1fr\",\n      hasEast ? \"min-content\" : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n    const gridTemplateRows = [\n      hasNorth ? \"min-content\" : undefined,\n      \"1fr\",\n      hasSouth ? \"min-content\" : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n    const gridTemplateSections = [\n      hasNorth\n        ? `\"${\"north \".repeat(middleColumns.length).trimEnd()}\"`\n        : undefined,\n      `\"${middleColumns.join(\" \")}\"`,\n      hasSouth\n        ? `\"${\"south \".repeat(middleColumns.length).trimEnd()}\"`\n        : undefined,\n    ].filter(Boolean);\n\n    const gridTemplateAreas = gridTemplateSections.join(\" \");\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      \"--gridLayout-areaColumns\": gridTemplateColumns,\n      \"--gridLayout-areaRows\": gridTemplateRows,\n    };\n\n    return (\n      <GridLayout\n        as={as as ElementType}\n        className={clsx(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":["BorderLayout"],"mappings":"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"}

package/dist-es/breadcrumbs/Breadcrumb.js

@@ -27,13 +27,12 @@ function isMissingBreadcrumbContent(children) {
 }
 let missingBreadcrumbContentWarningShown = false;
 function warnIfMissingBreadcrumbContent() {
-  if (process.env.NODE_ENV === "production" || missingBreadcrumbContentWarningShown) {
-    return;
+  if (process.env.NODE_ENV !== "production" && !missingBreadcrumbContentWarningShown) {
+    missingBreadcrumbContentWarningShown = true;
+    console.warn(
+      "Breadcrumb requires children to render a named breadcrumb item. Use text children for simple items or BreadcrumbTrigger with BreadcrumbLabel for composed items."
+    );
   }
-  missingBreadcrumbContentWarningShown = true;
-  console.warn(
-    "Breadcrumb requires children to render a named breadcrumb item. Use text children for simple items or BreadcrumbTrigger with BreadcrumbLabel for composed items."
-  );
 }
 const Breadcrumb = forwardRef(
   function Breadcrumb2(props, ref) {

package/dist-es/breadcrumbs/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","sources":["../src/breadcrumbs/Breadcrumb.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer, type RenderPropsType } from \"../utils\";\nimport breadcrumbCss from \"./Breadcrumb.css\";\nimport { BreadcrumbLabel } from \"./BreadcrumbLabel\";\nimport { BreadcrumbTrigger } from \"./BreadcrumbTrigger\";\nimport {\n  BreadcrumbContext,\n  useBreadcrumbContext,\n} from \"./internal/BreadcrumbContext\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumb\");\nconst withBreadcrumbsBaseName = makePrefixer(\"saltBreadcrumbs\");\n\nfunction isPrimitiveBreadcrumbLabel(children: ReactNode) {\n  return (\n    (typeof children === \"string\" && children.trim() !== \"\") ||\n    typeof children === \"number\"\n  );\n}\n\nfunction isMissingBreadcrumbContent(children: ReactNode) {\n  const childArray = Children.toArray(children);\n\n  return (\n    childArray.length === 0 ||\n    childArray.every(\n      (child) => typeof child === \"string\" && child.trim() === \"\",\n    )\n  );\n}\n\nlet missingBreadcrumbContentWarningShown = false;\n\nfunction warnIfMissingBreadcrumbContent() {\n  if (\n    process.env.NODE_ENV === \"production\" ||\n    missingBreadcrumbContentWarningShown\n  ) {\n    return;\n  }\n\n  missingBreadcrumbContentWarningShown = true;\n  console.warn(\n    \"Breadcrumb requires children to render a named breadcrumb item. Use text children for simple items or BreadcrumbTrigger with BreadcrumbLabel for composed items.\",\n  );\n}\n\nexport interface BreadcrumbProps\n  extends Omit<ComponentPropsWithoutRef<\"li\">, \"children\"> {\n  /**\n   * Custom breadcrumb content. Use this for advanced composition with\n   * `BreadcrumbTrigger` and `BreadcrumbLabel`.\n   */\n  children?: ReactNode;\n  /**\n   * If `true`, the breadcrumb represents the current page.\n   */\n  current?: boolean;\n  /**\n   * The URL for the breadcrumb. Provide this for the current breadcrumb so it\n   * renders as a focusable link with `aria-current=\"page\"`.\n   */\n  href?: string;\n  /**\n   * Render prop to enable customization of the underlying link element.\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nexport const Breadcrumb = forwardRef<HTMLLIElement, BreadcrumbProps>(\n  function Breadcrumb(props, ref) {\n    const {\n      children,\n      className,\n      current: currentProp,\n      href,\n      render,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-breadcrumb\",\n      css: breadcrumbCss,\n      window: targetWindow,\n    });\n\n    const parentContext = useBreadcrumbContext();\n    const current = parentContext?.current ?? Boolean(currentProp);\n    const onNavigate = parentContext?.onNavigate;\n    const placement = parentContext?.placement ?? \"trail\";\n    const showSeparator = parentContext?.showSeparator ?? false;\n    const triggerRef = parentContext?.triggerRef;\n    const resolvedRender = render ?? parentContext?.render;\n    const { LevelSeparatorIcon } = useIcon();\n    const missingContent = isMissingBreadcrumbContent(children);\n\n    if (missingContent) {\n      warnIfMissingBreadcrumbContent();\n    }\n\n    const primitiveChildren = isPrimitiveBreadcrumbLabel(children)\n      ? children\n      : undefined;\n    const content = missingContent ? null : primitiveChildren !== undefined ? (\n      <BreadcrumbTrigger>\n        <BreadcrumbLabel>{primitiveChildren}</BreadcrumbLabel>\n      </BreadcrumbTrigger>\n    ) : (\n      children\n    );\n    const context = {\n      current,\n      href,\n      onNavigate,\n      placement,\n      render: resolvedRender,\n      showSeparator,\n      triggerRef,\n    };\n\n    return (\n      <li\n        ref={ref}\n        className={clsx(\n          placement === \"disclosure\"\n            ? withBreadcrumbsBaseName(\"disclosureListItem\")\n            : withBaseName(),\n          className,\n        )}\n        {...rest}\n      >\n        <BreadcrumbContext.Provider value={context}>\n          {content}\n          {placement === \"trail\" && showSeparator ? (\n            <LevelSeparatorIcon\n              aria-hidden\n              className={withBaseName(\"separator\")}\n            />\n          ) : null}\n        </BreadcrumbContext.Provider>\n      </li>\n    );\n  },\n);\n"],"names":["Breadcrumb","breadcrumbCss"],"mappings":"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"}
+{"version":3,"file":"Breadcrumb.js","sources":["../src/breadcrumbs/Breadcrumb.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer, type RenderPropsType } from \"../utils\";\nimport breadcrumbCss from \"./Breadcrumb.css\";\nimport { BreadcrumbLabel } from \"./BreadcrumbLabel\";\nimport { BreadcrumbTrigger } from \"./BreadcrumbTrigger\";\nimport {\n  BreadcrumbContext,\n  useBreadcrumbContext,\n} from \"./internal/BreadcrumbContext\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumb\");\nconst withBreadcrumbsBaseName = makePrefixer(\"saltBreadcrumbs\");\n\nfunction isPrimitiveBreadcrumbLabel(children: ReactNode) {\n  return (\n    (typeof children === \"string\" && children.trim() !== \"\") ||\n    typeof children === \"number\"\n  );\n}\n\nfunction isMissingBreadcrumbContent(children: ReactNode) {\n  const childArray = Children.toArray(children);\n\n  return (\n    childArray.length === 0 ||\n    childArray.every(\n      (child) => typeof child === \"string\" && child.trim() === \"\",\n    )\n  );\n}\n\nlet missingBreadcrumbContentWarningShown = false;\n\nfunction warnIfMissingBreadcrumbContent() {\n  if (\n    process.env.NODE_ENV !== \"production\" &&\n    !missingBreadcrumbContentWarningShown\n  ) {\n    missingBreadcrumbContentWarningShown = true;\n    console.warn(\n      \"Breadcrumb requires children to render a named breadcrumb item. Use text children for simple items or BreadcrumbTrigger with BreadcrumbLabel for composed items.\",\n    );\n  }\n}\n\nexport interface BreadcrumbProps\n  extends Omit<ComponentPropsWithoutRef<\"li\">, \"children\"> {\n  /**\n   * Custom breadcrumb content. Use this for advanced composition with\n   * `BreadcrumbTrigger` and `BreadcrumbLabel`.\n   */\n  children?: ReactNode;\n  /**\n   * If `true`, the breadcrumb represents the current page.\n   */\n  current?: boolean;\n  /**\n   * The URL for the breadcrumb. Provide this for the current breadcrumb so it\n   * renders as a focusable link with `aria-current=\"page\"`.\n   */\n  href?: string;\n  /**\n   * Render prop to enable customization of the underlying link element.\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nexport const Breadcrumb = forwardRef<HTMLLIElement, BreadcrumbProps>(\n  function Breadcrumb(props, ref) {\n    const {\n      children,\n      className,\n      current: currentProp,\n      href,\n      render,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-breadcrumb\",\n      css: breadcrumbCss,\n      window: targetWindow,\n    });\n\n    const parentContext = useBreadcrumbContext();\n    const current = parentContext?.current ?? Boolean(currentProp);\n    const onNavigate = parentContext?.onNavigate;\n    const placement = parentContext?.placement ?? \"trail\";\n    const showSeparator = parentContext?.showSeparator ?? false;\n    const triggerRef = parentContext?.triggerRef;\n    const resolvedRender = render ?? parentContext?.render;\n    const { LevelSeparatorIcon } = useIcon();\n    const missingContent = isMissingBreadcrumbContent(children);\n\n    if (missingContent) {\n      warnIfMissingBreadcrumbContent();\n    }\n\n    const primitiveChildren = isPrimitiveBreadcrumbLabel(children)\n      ? children\n      : undefined;\n    const content = missingContent ? null : primitiveChildren !== undefined ? (\n      <BreadcrumbTrigger>\n        <BreadcrumbLabel>{primitiveChildren}</BreadcrumbLabel>\n      </BreadcrumbTrigger>\n    ) : (\n      children\n    );\n    const context = {\n      current,\n      href,\n      onNavigate,\n      placement,\n      render: resolvedRender,\n      showSeparator,\n      triggerRef,\n    };\n\n    return (\n      <li\n        ref={ref}\n        className={clsx(\n          placement === \"disclosure\"\n            ? withBreadcrumbsBaseName(\"disclosureListItem\")\n            : withBaseName(),\n          className,\n        )}\n        {...rest}\n      >\n        <BreadcrumbContext.Provider value={context}>\n          {content}\n          {placement === \"trail\" && showSeparator ? (\n            <LevelSeparatorIcon\n              aria-hidden\n              className={withBaseName(\"separator\")}\n            />\n          ) : null}\n        </BreadcrumbContext.Provider>\n      </li>\n    );\n  },\n);\n"],"names":["Breadcrumb","breadcrumbCss"],"mappings":";;;;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAClD,MAAM,uBAAA,GAA0B,aAAa,iBAAiB,CAAA;AAE9D,SAAS,2BAA2B,QAAA,EAAqB;AACvD,EAAA,OACG,OAAO,aAAa,QAAA,IAAY,QAAA,CAAS,MAAK,KAAM,EAAA,IACrD,OAAO,QAAA,KAAa,QAAA;AAExB;AAEA,SAAS,2BAA2B,QAAA,EAAqB;AACvD,EAAA,MAAM,UAAA,GAAa,QAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA;AAE5C,EAAA,OACE,UAAA,CAAW,MAAA,KAAW,CAAA,IACtB,UAAA,CAAW,KAAA;AAAA,IACT,CAAC,KAAA,KAAU,OAAO,UAAU,QAAA,IAAY,KAAA,CAAM,MAAK,KAAM;AAAA,GAC3D;AAEJ;AAEA,IAAI,oCAAA,GAAuC,KAAA;AAE3C,SAAS,8BAAA,GAAiC;AACxC,EAAA,IACE,OAAA,CAAQ,GAAA,CAAI,QAAA,KAAa,YAAA,IACzB,CAAC,oCAAA,EACD;AACA,IAAA,oCAAA,GAAuC,IAAA;AACvC,IAAA,OAAA,CAAQ,IAAA;AAAA,MACN;AAAA,KACF;AAAA,EACF;AACF;AAwBO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,SAASA,WAAAA,CAAW,KAAA,EAAO,GAAA,EAAK;AAC9B,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA,EAAS,WAAA;AAAA,MACT,IAAA;AAAA,MACA,MAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AACJ,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,iBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,gBAAgB,oBAAA,EAAqB;AAC3C,IAAA,MAAM,OAAA,GAAA,CAAU,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAe,OAAA,KAAW,OAAA,CAAQ,WAAW,CAAA;AAC7D,IAAA,MAAM,aAAa,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAe,UAAA;AAClC,IAAA,MAAM,SAAA,GAAA,CAAY,+CAAe,SAAA,KAAa,OAAA;AAC9C,IAAA,MAAM,aAAA,GAAA,CAAgB,+CAAe,aAAA,KAAiB,KAAA;AACtD,IAAA,MAAM,aAAa,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAe,UAAA;AAClC,IAAA,MAAM,cAAA,GAAiB,WAAU,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAe,MAAA,CAAA;AAChD,IAAA,MAAM,EAAE,kBAAA,EAAmB,GAAI,OAAA,EAAQ;AACvC,IAAA,MAAM,cAAA,GAAiB,2BAA2B,QAAQ,CAAA;AAE1D,IAAA,IAAI,cAAA,EAAgB;AAClB,MAAA,8BAAA,EAA+B;AAAA,IACjC;AAEA,IAAA,MAAM,iBAAA,GAAoB,0BAAA,CAA2B,QAAQ,CAAA,GACzD,QAAA,GACA,MAAA;AACJ,IAAA,MAAM,OAAA,GAAU,cAAA,GAAiB,IAAA,GAAO,iBAAA,KAAsB,MAAA,mBAC5D,GAAA,CAAC,iBAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,eAAA,EAAA,EAAiB,QAAA,EAAA,iBAAA,EAAkB,CAAA,EACtC,CAAA,GAEA,QAAA;AAEF,IAAA,MAAM,OAAA,GAAU;AAAA,MACd,OAAA;AAAA,MACA,IAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA,EAAQ,cAAA;AAAA,MACR,aAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,IAAA;AAAA,UACT,SAAA,KAAc,YAAA,GACV,uBAAA,CAAwB,oBAAoB,IAC5C,YAAA,EAAa;AAAA,UACjB;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAA,IAAA,CAAC,iBAAA,CAAkB,QAAA,EAAlB,EAA2B,OAAO,OAAA,EAChC,QAAA,EAAA;AAAA,UAAA,OAAA;AAAA,UACA,SAAA,KAAc,WAAW,aAAA,mBACxB,GAAA;AAAA,YAAC,kBAAA;AAAA,YAAA;AAAA,cACC,aAAA,EAAW,IAAA;AAAA,cACX,SAAA,EAAW,aAAa,WAAW;AAAA;AAAA,WACrC,GACE;AAAA,SAAA,EACN;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

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

@@ -1,4 +1,4 @@
-var css_248z = ".saltButton {\n  --button-borderWidth: var(--salt-size-fixed-100);\n\n  align-items: var(--saltButton-alignItems, center);\n  appearance: none;\n  background: var(--saltButton-background, var(--button-background));\n  border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent));\n  border-style: var(--saltButton-borderStyle, solid);\n  border-width: var(--saltButton-borderWidth, var(--button-borderWidth));\n  border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\n  color: var(--saltButton-text-color, var(--button-text-color));\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-action-fontFamily));\n  line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n  text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n  padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--button-borderWidth))));\n  margin: var(--saltButton-margin, 0);\n  height: var(--saltButton-height, var(--salt-size-base));\n  min-width: var(--saltButton-minWidth, unset);\n  position: relative;\n  text-align: var(--saltButton-textAlign, var(--salt-text-action-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(--salt-text-action-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  border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n@media (hover: hover) {\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    border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n    cursor: var(--salt-cursor-hover);\n  }\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible:active,\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  border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n  cursor: var(--salt-cursor-active);\n}\n\n/* Styles applied when the button triggers a dialog or menu */\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"menu\"],\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"dialog\"] {\n  background: var(--saltButton-background-active, var(--button-background-active));\n  color: var(--saltButton-text-color-active, var(--button-text-color-active));\n  border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton.saltButton-disabled,\n.saltButton.saltButton-disabled:active,\n.saltButton.saltButton-disabled:focus-visible,\n.saltButton.saltButton-disabled:focus-visible:active,\n.saltButton.saltButton-disabled:hover {\n  background: var(--saltButton-background-disabled, var(--button-background));\n  color: var(--saltButton-text-color-disabled, var(--button-text-color));\n  cursor: var(--saltButton-cursor-disabled, var(--salt-cursor-disabled));\n  border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor));\n\n  opacity: 0.4;\n}\n\n.saltButton-accented.saltButton-solid {\n  --button-text-color: var(--salt-actionable-accented-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-accented-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-accented-bold-foreground-active);\n  --button-background: var(--salt-actionable-accented-bold-background);\n  --button-background-active: var(--salt-actionable-accented-bold-background-active);\n  --button-background-hover: var(--salt-actionable-accented-bold-background-hover);\n  --button-borderColor: var(--salt-actionable-accented-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);\n}\n\n.saltButton-accented.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-accented-foreground);\n  --button-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-accented-foreground-active);\n  --button-background: var(--salt-actionable-accented-background);\n  --button-background-hover: var(--salt-actionable-accented-background-hover);\n  --button-background-active: var(--salt-actionable-accented-background-active);\n  --button-borderColor: var(--salt-actionable-accented-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-accented-borderColor-active);\n}\n\n.saltButton-accented.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-accented-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n  --button-background: var(--salt-actionable-accented-subtle-background);\n  --button-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-accented-subtle-background-active);\n  --button-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n}\n\n.saltButton-accented.saltButton-loading {\n  --button-text-color: var(--salt-actionable-accented-background);\n  --button-text-color-hover: var(--salt-actionable-accented-background);\n  --button-text-color-active: var(--salt-actionable-accented-background);\n  --button-background: var(--salt-actionable-accented-background);\n  --button-background-hover: var(--salt-actionable-accented-background);\n  --button-background-active: var(--salt-actionable-accented-background);\n  --button-borderColor: var(--salt-actionable-accented-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-borderColor);\n  --button-borderColor-active: var(--salt-actionable-accented-borderColor);\n  cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-neutral.saltButton-solid {\n  --button-text-color: var(--salt-actionable-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-bold-foreground-active);\n  --button-background: var(--salt-actionable-bold-background);\n  --button-background-hover: var(--salt-actionable-bold-background-hover);\n  --button-background-active: var(--salt-actionable-bold-background-active);\n  --button-borderColor: var(--salt-actionable-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-bold-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-foreground);\n  --button-text-color-hover: var(--salt-actionable-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-foreground-active);\n  --button-background: var(--salt-actionable-background);\n  --button-background-hover: var(--salt-actionable-background-hover);\n  --button-background-active: var(--salt-actionable-background-active);\n  --button-borderColor: var(--salt-actionable-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-subtle-foreground-active);\n  --button-background: var(--salt-actionable-subtle-background);\n  --button-background-hover: var(--salt-actionable-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-subtle-background-active);\n  --button-borderColor: var(--salt-actionable-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-loading {\n  --button-text-color: var(--salt-actionable-background);\n  --button-text-color-hover: var(--salt-actionable-background);\n  --button-text-color-active: var(--salt-actionable-background);\n  --button-background: var(--salt-actionable-background);\n  --button-background-hover: var(--salt-actionable-background);\n  --button-background-active: var(--salt-actionable-background);\n  --button-borderColor: var(--salt-actionable-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-borderColor);\n  --button-borderColor-active: var(--salt-actionable-borderColor);\n  cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-negative.saltButton-solid {\n  --button-text-color: var(--salt-actionable-negative-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-negative-bold-foreground-active);\n  --button-background: var(--salt-actionable-negative-bold-background);\n  --button-background-hover: var(--salt-actionable-negative-bold-background-hover);\n  --button-background-active: var(--salt-actionable-negative-bold-background-active);\n  --button-borderColor: var(--salt-actionable-negative-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-negative-bold-borderColor-active);\n}\n\n.saltButton-negative.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-negative-foreground);\n  --button-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-negative-foreground-active);\n  --button-background: var(--salt-actionable-negative-background);\n  --button-background-hover: var(--salt-actionable-negative-background-hover);\n  --button-background-active: var(--salt-actionable-negative-background-active);\n  --button-borderColor: var(--salt-actionable-negative-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-negative-borderColor-active);\n}\n\n.saltButton-negative.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-negative-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n  --button-background: var(--salt-actionable-negative-subtle-background);\n  --button-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-negative-subtle-background-active);\n  --button-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n}\n\n.saltButton-negative.saltButton-loading {\n  --button-text-color: var(--salt-actionable-negative-background);\n  --button-text-color-hover: var(--salt-actionable-negative-background);\n  --button-text-color-active: var(--salt-actionable-negative-background);\n  --button-background: var(--salt-actionable-negative-background);\n  --button-background-hover: var(--salt-actionable-negative-background);\n  --button-background-active: var(--salt-actionable-negative-background);\n  --button-borderColor: var(--salt-actionable-negative-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-borderColor);\n  --button-borderColor-active: var(--salt-actionable-negative-borderColor);\n  cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-positive.saltButton-solid {\n  --button-text-color: var(--salt-actionable-positive-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-positive-bold-foreground-active);\n  --button-background: var(--salt-actionable-positive-bold-background);\n  --button-background-hover: var(--salt-actionable-positive-bold-background-hover);\n  --button-background-active: var(--salt-actionable-positive-bold-background-active);\n  --button-borderColor: var(--salt-actionable-positive-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-positive-bold-borderColor-active);\n}\n\n.saltButton-positive.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-positive-foreground);\n  --button-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-positive-foreground-active);\n  --button-background: var(--salt-actionable-positive-background);\n  --button-background-hover: var(--salt-actionable-positive-background-hover);\n  --button-background-active: var(--salt-actionable-positive-background-active);\n  --button-borderColor: var(--salt-actionable-positive-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-positive-borderColor-active);\n}\n\n.saltButton-positive.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-positive-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n  --button-background: var(--salt-actionable-positive-subtle-background);\n  --button-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-positive-subtle-background-active);\n  --button-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n}\n\n.saltButton-positive.saltButton-loading {\n  --button-text-color: var(--salt-actionable-positive-background);\n  --button-text-color-hover: var(--salt-actionable-positive-background);\n  --button-text-color-active: var(--salt-actionable-positive-background);\n  --button-background: var(--salt-actionable-positive-background);\n  --button-background-hover: var(--salt-actionable-positive-background);\n  --button-background-active: var(--salt-actionable-positive-background);\n  --button-borderColor: var(--salt-actionable-positive-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-borderColor);\n  --button-borderColor-active: var(--salt-actionable-positive-borderColor);\n  cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-caution.saltButton-solid {\n  --button-text-color: var(--salt-actionable-caution-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-caution-bold-foreground-active);\n  --button-background: var(--salt-actionable-caution-bold-background);\n  --button-background-hover: var(--salt-actionable-caution-bold-background-hover);\n  --button-background-active: var(--salt-actionable-caution-bold-background-active);\n  --button-borderColor: var(--salt-actionable-caution-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-caution-bold-borderColor-active);\n}\n\n.saltButton-caution.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-caution-foreground);\n  --button-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-caution-foreground-active);\n  --button-background: var(--salt-actionable-caution-background);\n  --button-background-hover: var(--salt-actionable-caution-background-hover);\n  --button-background-active: var(--salt-actionable-caution-background-active);\n  --button-borderColor: var(--salt-actionable-caution-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-caution-borderColor-active);\n}\n\n.saltButton-caution.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-caution-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n  --button-background: var(--salt-actionable-caution-subtle-background);\n  --button-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-caution-subtle-background-active);\n  --button-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n}\n\n.saltButton-caution.saltButton-loading {\n  --button-text-color: var(--salt-actionable-caution-background);\n  --button-text-color-hover: var(--salt-actionable-caution-background);\n  --button-text-color-active: var(--salt-actionable-caution-background);\n  --button-background: var(--salt-actionable-caution-background);\n  --button-background-hover: var(--salt-actionable-caution-background);\n  --button-background-active: var(--salt-actionable-caution-background);\n  --button-borderColor: var(--salt-actionable-caution-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-borderColor);\n  --button-borderColor-active: var(--salt-actionable-caution-borderColor);\n  cursor: var(--salt-cursor-pending);\n}\n\n.saltButton strong {\n  font-weight: var(--salt-text-action-fontWeight-strong);\n}\n\n.saltButton small {\n  font-size: inherit;\n  font-weight: var(--salt-text-action-fontWeight-small);\n}\n\n.saltButton-spinner {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.saltButton-sr-only {\n  position: fixed;\n  top: 0;\n  left: 0;\n  transform: translate(-100%, -100%);\n}\n";
+var css_248z = ".saltButton {\n  --button-borderWidth: var(--salt-size-fixed-100);\n\n  align-items: var(--saltButton-alignItems, center);\n  appearance: none;\n  background: var(--saltButton-background, var(--button-background));\n  border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent));\n  border-style: var(--saltButton-borderStyle, solid);\n  border-width: var(--saltButton-borderWidth, var(--button-borderWidth));\n  border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\n  color: var(--saltButton-text-color, var(--button-text-color));\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-action-fontFamily));\n  line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n  text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n  padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--button-borderWidth))));\n  margin: var(--saltButton-margin, 0);\n  height: var(--saltButton-height, var(--salt-size-base));\n  min-width: var(--saltButton-minWidth, unset);\n  position: relative;\n  text-align: var(--saltButton-textAlign, var(--salt-text-action-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(--salt-text-action-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  border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n@media (hover: hover) {\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    border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n    cursor: var(--salt-cursor-hover);\n  }\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible:active,\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  border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n  cursor: var(--salt-cursor-active);\n}\n\n/* Styles applied when the button triggers a dialog or menu */\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"menu\"],\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"dialog\"] {\n  background: var(--saltButton-background-active, var(--button-background-active));\n  color: var(--saltButton-text-color-active, var(--button-text-color-active));\n  border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton.saltButton-disabled,\n.saltButton.saltButton-disabled:active,\n.saltButton.saltButton-disabled:focus-visible,\n.saltButton.saltButton-disabled:focus-visible:active,\n.saltButton.saltButton-disabled:hover {\n  background: var(--saltButton-background-disabled, var(--button-background));\n  color: var(--saltButton-text-color-disabled, var(--button-text-color));\n  cursor: var(--saltButton-cursor-disabled, var(--salt-cursor-disabled));\n  border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor));\n\n  opacity: 0.4;\n}\n\n.saltButton-accented.saltButton-solid {\n  --button-text-color: var(--salt-actionable-accented-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-accented-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-accented-bold-foreground-active);\n  --button-background: var(--salt-actionable-accented-bold-background);\n  --button-background-active: var(--salt-actionable-accented-bold-background-active);\n  --button-background-hover: var(--salt-actionable-accented-bold-background-hover);\n  --button-borderColor: var(--salt-actionable-accented-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);\n}\n\n.saltButton-accented.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-accented-foreground);\n  --button-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-accented-foreground-active);\n  --button-background: var(--salt-actionable-accented-background);\n  --button-background-hover: var(--salt-actionable-accented-background-hover);\n  --button-background-active: var(--salt-actionable-accented-background-active);\n  --button-borderColor: var(--salt-actionable-accented-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-accented-borderColor-active);\n}\n\n.saltButton-accented.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-accented-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n  --button-background: var(--salt-actionable-accented-subtle-background);\n  --button-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-accented-subtle-background-active);\n  --button-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n}\n\n.saltButton-accented.saltButton-loading {\n  --button-text-color: var(--salt-actionable-accented-background);\n  --button-text-color-hover: var(--salt-actionable-accented-background);\n  --button-text-color-active: var(--salt-actionable-accented-background);\n  --button-background: var(--salt-actionable-accented-background);\n  --button-background-hover: var(--salt-actionable-accented-background);\n  --button-background-active: var(--salt-actionable-accented-background);\n  --button-borderColor: var(--salt-actionable-accented-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-borderColor);\n  --button-borderColor-active: var(--salt-actionable-accented-borderColor);\n  cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-neutral.saltButton-solid {\n  --button-text-color: var(--salt-actionable-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-bold-foreground-active);\n  --button-background: var(--salt-actionable-bold-background);\n  --button-background-hover: var(--salt-actionable-bold-background-hover);\n  --button-background-active: var(--salt-actionable-bold-background-active);\n  --button-borderColor: var(--salt-actionable-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-bold-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-foreground);\n  --button-text-color-hover: var(--salt-actionable-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-foreground-active);\n  --button-background: var(--salt-actionable-background);\n  --button-background-hover: var(--salt-actionable-background-hover);\n  --button-background-active: var(--salt-actionable-background-active);\n  --button-borderColor: var(--salt-actionable-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-subtle-foreground-active);\n  --button-background: var(--salt-actionable-subtle-background);\n  --button-background-hover: var(--salt-actionable-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-subtle-background-active);\n  --button-borderColor: var(--salt-actionable-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-loading {\n  --button-text-color: var(--salt-actionable-background);\n  --button-text-color-hover: var(--salt-actionable-background);\n  --button-text-color-active: var(--salt-actionable-background);\n  --button-background: var(--salt-actionable-background);\n  --button-background-hover: var(--salt-actionable-background);\n  --button-background-active: var(--salt-actionable-background);\n  --button-borderColor: var(--salt-actionable-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-borderColor);\n  --button-borderColor-active: var(--salt-actionable-borderColor);\n  cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-negative.saltButton-solid {\n  --button-text-color: var(--salt-actionable-negative-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-negative-bold-foreground-active);\n  --button-background: var(--salt-actionable-negative-bold-background);\n  --button-background-hover: var(--salt-actionable-negative-bold-background-hover);\n  --button-background-active: var(--salt-actionable-negative-bold-background-active);\n  --button-borderColor: var(--salt-actionable-negative-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-negative-bold-borderColor-active);\n}\n\n.saltButton-negative.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-negative-foreground);\n  --button-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-negative-foreground-active);\n  --button-background: var(--salt-actionable-negative-background);\n  --button-background-hover: var(--salt-actionable-negative-background-hover);\n  --button-background-active: var(--salt-actionable-negative-background-active);\n  --button-borderColor: var(--salt-actionable-negative-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-negative-borderColor-active);\n}\n\n.saltButton-negative.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-negative-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n  --button-background: var(--salt-actionable-negative-subtle-background);\n  --button-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-negative-subtle-background-active);\n  --button-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n}\n\n.saltButton-negative.saltButton-loading {\n  --button-text-color: var(--salt-actionable-negative-background);\n  --button-text-color-hover: var(--salt-actionable-negative-background);\n  --button-text-color-active: var(--salt-actionable-negative-background);\n  --button-background: var(--salt-actionable-negative-background);\n  --button-background-hover: var(--salt-actionable-negative-background);\n  --button-background-active: var(--salt-actionable-negative-background);\n  --button-borderColor: var(--salt-actionable-negative-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-borderColor);\n  --button-borderColor-active: var(--salt-actionable-negative-borderColor);\n  cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-positive.saltButton-solid {\n  --button-text-color: var(--salt-actionable-positive-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-positive-bold-foreground-active);\n  --button-background: var(--salt-actionable-positive-bold-background);\n  --button-background-hover: var(--salt-actionable-positive-bold-background-hover);\n  --button-background-active: var(--salt-actionable-positive-bold-background-active);\n  --button-borderColor: var(--salt-actionable-positive-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-positive-bold-borderColor-active);\n}\n\n.saltButton-positive.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-positive-foreground);\n  --button-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-positive-foreground-active);\n  --button-background: var(--salt-actionable-positive-background);\n  --button-background-hover: var(--salt-actionable-positive-background-hover);\n  --button-background-active: var(--salt-actionable-positive-background-active);\n  --button-borderColor: var(--salt-actionable-positive-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-positive-borderColor-active);\n}\n\n.saltButton-positive.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-positive-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n  --button-background: var(--salt-actionable-positive-subtle-background);\n  --button-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-positive-subtle-background-active);\n  --button-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n}\n\n.saltButton-positive.saltButton-loading {\n  --button-text-color: var(--salt-actionable-positive-background);\n  --button-text-color-hover: var(--salt-actionable-positive-background);\n  --button-text-color-active: var(--salt-actionable-positive-background);\n  --button-background: var(--salt-actionable-positive-background);\n  --button-background-hover: var(--salt-actionable-positive-background);\n  --button-background-active: var(--salt-actionable-positive-background);\n  --button-borderColor: var(--salt-actionable-positive-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-borderColor);\n  --button-borderColor-active: var(--salt-actionable-positive-borderColor);\n  cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-caution.saltButton-solid {\n  --button-text-color: var(--salt-actionable-caution-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-caution-bold-foreground-active);\n  --button-background: var(--salt-actionable-caution-bold-background);\n  --button-background-hover: var(--salt-actionable-caution-bold-background-hover);\n  --button-background-active: var(--salt-actionable-caution-bold-background-active);\n  --button-borderColor: var(--salt-actionable-caution-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-caution-bold-borderColor-active);\n}\n\n.saltButton-caution.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-caution-foreground);\n  --button-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-caution-foreground-active);\n  --button-background: var(--salt-actionable-caution-background);\n  --button-background-hover: var(--salt-actionable-caution-background-hover);\n  --button-background-active: var(--salt-actionable-caution-background-active);\n  --button-borderColor: var(--salt-actionable-caution-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-caution-borderColor-active);\n}\n\n.saltButton-caution.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-caution-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n  --button-background: var(--salt-actionable-caution-subtle-background);\n  --button-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-caution-subtle-background-active);\n  --button-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n}\n\n.saltButton-caution.saltButton-loading {\n  --button-text-color: var(--salt-actionable-caution-background);\n  --button-text-color-hover: var(--salt-actionable-caution-background);\n  --button-text-color-active: var(--salt-actionable-caution-background);\n  --button-background: var(--salt-actionable-caution-background);\n  --button-background-hover: var(--salt-actionable-caution-background);\n  --button-background-active: var(--salt-actionable-caution-background);\n  --button-borderColor: var(--salt-actionable-caution-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-borderColor);\n  --button-borderColor-active: var(--salt-actionable-caution-borderColor);\n  cursor: var(--salt-cursor-pending);\n}\n\n/* Lets a nested Text with styleAs=\"inherit\" use the action weights */\n.saltButton {\n  --text-fontWeight-bolder: var(--salt-text-action-fontWeight-bolder);\n  --text-fontWeight-lighter: var(--salt-text-action-fontWeight-lighter);\n}\n\n.saltButton strong,\n.saltButton b {\n  font-weight: var(--salt-text-action-fontWeight-bolder);\n}\n\n/* Deprecated, use a nested Text with styleAs=\"inherit\" and fontWeight=\"lighter\" instead */\n.saltButton small {\n  font-size: inherit;\n  font-weight: var(--salt-text-action-fontWeight-lighter);\n}\n\n.saltButton-spinner {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.saltButton-sr-only {\n  position: fixed;\n  top: 0;\n  left: 0;\n  transform: translate(-100%, -100%);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Button.css.js.map

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

@@ -1,4 +1,4 @@
-var css_248z = ".saltCardContent {\n  padding: var(--saltCardContent-padding, var(--salt-spacing-200));\n  box-sizing: border-box;\n}\n\n.saltCard-sectioned > .saltCardHeader + .saltCardContent,\n.saltCard-sectioned > .saltCardContent + .saltCardContent,\n.saltLinkCard-sectioned > .saltCardHeader + .saltCardContent,\n.saltLinkCard-sectioned > .saltCardContent + .saltCardContent,\n.saltInteractableCard-sectioned > .saltCardHeader + .saltCardContent,\n.saltInteractableCard-sectioned > .saltCardContent + .saltCardContent {\n  padding-top: 0;\n}\n\n.saltCard-sectioned > .saltCardContent,\n.saltLinkCard-sectioned > .saltCardContent,\n.saltInteractableCard-sectioned > .saltCardContent {\n  flex: 1 1 auto;\n}\n\n@supports selector(:has(*)) {\n  .saltCard > .saltCardHeader + .saltCardContent,\n  .saltCard > .saltCardContent + .saltCardContent,\n  .saltLinkCard > .saltCardHeader + .saltCardContent,\n  .saltLinkCard > .saltCardContent + .saltCardContent,\n  .saltInteractableCard > .saltCardHeader + .saltCardContent,\n  .saltInteractableCard > .saltCardContent + .saltCardContent {\n    padding-top: 0;\n  }\n\n  .saltCard > .saltCardContent,\n  .saltLinkCard > .saltCardContent,\n  .saltInteractableCard > .saltCardContent {\n    flex: 1 1 auto;\n  }\n}\n";
+var css_248z = ".saltCardContent {\n  padding: var(--saltCardContent-padding, var(--salt-spacing-200));\n  box-sizing: border-box;\n}\n\n/* Collapse vertical padding when rendered as a closed CollapsiblePanel */\n.saltCardContent.saltCollapsiblePanel[aria-hidden=\"true\"] {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.saltCard-sectioned > .saltCardHeader + .saltCardContent,\n.saltCard-sectioned > .saltCardContent + .saltCardContent,\n.saltLinkCard-sectioned > .saltCardHeader + .saltCardContent,\n.saltLinkCard-sectioned > .saltCardContent + .saltCardContent,\n.saltInteractableCard-sectioned > .saltCardHeader + .saltCardContent,\n.saltInteractableCard-sectioned > .saltCardContent + .saltCardContent {\n  padding-top: 0;\n}\n\n.saltCard-sectioned > .saltCardContent,\n.saltLinkCard-sectioned > .saltCardContent,\n.saltInteractableCard-sectioned > .saltCardContent {\n  flex: 1 1 auto;\n}\n\n@supports selector(:has(*)) {\n  .saltCard > .saltCardHeader + .saltCardContent,\n  .saltCard > .saltCardContent + .saltCardContent,\n  .saltLinkCard > .saltCardHeader + .saltCardContent,\n  .saltLinkCard > .saltCardContent + .saltCardContent,\n  .saltInteractableCard > .saltCardHeader + .saltCardContent,\n  .saltInteractableCard > .saltCardContent + .saltCardContent {\n    padding-top: 0;\n  }\n\n  .saltCard > .saltCardContent,\n  .saltLinkCard > .saltCardContent,\n  .saltInteractableCard > .saltCardContent {\n    flex: 1 1 auto;\n  }\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=CardContent.css.js.map

package/dist-es/card/hasCardSection.js

@@ -4,11 +4,19 @@ import { CardFooter } from './CardFooter.js';
 import { CardHeader } from './CardHeader.js';
 
 const cardSectionTypes = [CardHeader, CardContent, CardFooter];
-function hasCardSection(children) {
-  return Children.toArray(children).some(
-    (child) => isValidElement(child) && cardSectionTypes.some((sectionType) => child.type === sectionType)
+function isCardSection(child) {
+  if (!isValidElement(child)) {
+    return false;
+  }
+  const render = child.props.render;
+  const renderedChild = isValidElement(render) ? render : child;
+  return cardSectionTypes.some(
+    (sectionType) => renderedChild.type === sectionType
   );
 }
+function hasCardSection(children) {
+  return Children.toArray(children).some(isCardSection);
+}
 
 export { hasCardSection };
 //# sourceMappingURL=hasCardSection.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"hasCardSection.js","sources":["../src/card/hasCardSection.ts"],"sourcesContent":["import { Children, isValidElement, type ReactNode } from \"react\";\nimport { CardContent } from \"./CardContent\";\nimport { CardFooter } from \"./CardFooter\";\nimport { CardHeader } from \"./CardHeader\";\n\nconst cardSectionTypes = [CardHeader, CardContent, CardFooter];\n\nexport function hasCardSection(children: ReactNode): boolean {\n  return Children.toArray(children).some(\n    (child) =>\n      isValidElement(child) &&\n      cardSectionTypes.some((sectionType) => child.type === sectionType),\n  );\n}\n"],"names":[],"mappings":";;;;;AAKA,MAAM,gBAAA,GAAmB,CAAC,UAAA,EAAY,WAAA,EAAa,UAAU,CAAA;AAEtD,SAAS,eAAe,QAAA,EAA8B;AAC3D,EAAA,OAAO,QAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA,CAAE,IAAA;AAAA,IAChC,CAAC,KAAA,KACC,cAAA,CAAe,KAAK,CAAA,IACpB,gBAAA,CAAiB,IAAA,CAAK,CAAC,WAAA,KAAgB,KAAA,CAAM,IAAA,KAAS,WAAW;AAAA,GACrE;AACF;;;;"}
+{"version":3,"file":"hasCardSection.js","sources":["../src/card/hasCardSection.ts"],"sourcesContent":["import { Children, isValidElement, type ReactNode } from \"react\";\nimport { CardContent } from \"./CardContent\";\nimport { CardFooter } from \"./CardFooter\";\nimport { CardHeader } from \"./CardHeader\";\n\nconst cardSectionTypes = [CardHeader, CardContent, CardFooter];\n\nfunction isCardSection(child: ReactNode): boolean {\n  if (!isValidElement(child)) {\n    return false;\n  }\n\n  // Salt's render prop replaces a component's root without adding a wrapper.\n  const render = (child.props as { render?: ReactNode }).render;\n  const renderedChild = isValidElement(render) ? render : child;\n\n  return cardSectionTypes.some(\n    (sectionType) => renderedChild.type === sectionType,\n  );\n}\n\nexport function hasCardSection(children: ReactNode): boolean {\n  return Children.toArray(children).some(isCardSection);\n}\n"],"names":[],"mappings":";;;;;AAKA,MAAM,gBAAA,GAAmB,CAAC,UAAA,EAAY,WAAA,EAAa,UAAU,CAAA;AAE7D,SAAS,cAAc,KAAA,EAA2B;AAChD,EAAA,IAAI,CAAC,cAAA,CAAe,KAAK,CAAA,EAAG;AAC1B,IAAA,OAAO,KAAA;AAAA,EACT;AAGA,EAAA,MAAM,MAAA,GAAU,MAAM,KAAA,CAAiC,MAAA;AACvD,EAAA,MAAM,aAAA,GAAgB,cAAA,CAAe,MAAM,CAAA,GAAI,MAAA,GAAS,KAAA;AAExD,EAAA,OAAO,gBAAA,CAAiB,IAAA;AAAA,IACtB,CAAC,WAAA,KAAgB,aAAA,CAAc,IAAA,KAAS;AAAA,GAC1C;AACF;AAEO,SAAS,eAAe,QAAA,EAA8B;AAC3D,EAAA,OAAO,QAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA,CAAE,KAAK,aAAa,CAAA;AACtD;;;;"}

package/dist-es/checkbox/CheckboxIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxIcon.js","sources":["../src/checkbox/CheckboxIcon.tsx"],"sourcesContent":["import { CheckmarkIcon, CheckmarkSolidIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer } from \"../utils\";\nimport checkboxIconCss from \"./CheckboxIcon.css\";\n\nexport interface CheckboxIconProps {\n  checked?: boolean;\n  className?: string;\n  disabled?: boolean;\n  /**\n   * @deprecated since 1.8.0-rc.2. Use `validationStatus` instead.\n   */\n  error?: boolean;\n  indeterminate?: boolean;\n  readOnly?: boolean;\n  validationStatus?: AdornmentValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxIcon\");\n\nexport const CheckboxIcon = ({\n  checked = false,\n  className,\n  disabled,\n  error,\n  indeterminate,\n  validationStatus,\n  readOnly,\n}: CheckboxIconProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-checkbox-icon\",\n    css: checkboxIconCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"checked\")]: checked,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"error\")]: error,\n          [withBaseName(validationStatus || \"\")]: validationStatus,\n          [withBaseName(\"indeterminate\")]: indeterminate,\n          [withBaseName(\"readOnly\")]: readOnly,\n        },\n        className,\n      )}\n    >\n      {checked && !indeterminate && !readOnly && (\n        <CheckmarkSolidIcon className={withBaseName(\"icon\")} />\n      )}\n      {checked && !indeterminate && readOnly && (\n        <CheckmarkIcon className={withBaseName(\"icon\")} />\n      )}\n    </div>\n  );\n};\n"],"names":["checkboxIconCss"],"mappings":";;;;;;;;;;;;;AAqBA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAE7C,MAAM,eAAe,CAAC;AAAA,EAC3B,OAAA,GAAU,KAAA;AAAA,EACV,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,KAAsC;AACpC,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,oBAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,MAAA;AAAA,MACZ,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,OAAA;AAAA,UAC3B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG,KAAA;AAAA,UACzB,CAAC,YAAA,CAAa,gBAAA,IAAoB,EAAE,CAAC,GAAG,gBAAA;AAAA,UACxC,CAAC,YAAA,CAAa,eAAe,CAAC,GAAG,aAAA;AAAA,UACjC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC9B;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,OAAA,IAAW,CAAC,iBAAiB,CAAC,QAAA,wBAC5B,kBAAA,EAAA,EAAmB,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,CAAA;AAAA,QAEtD,OAAA,IAAW,CAAC,aAAA,IAAiB,QAAA,wBAC3B,aAAA,EAAA,EAAc,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG;AAAA;AAAA;AAAA,GAEpD;AAEJ;;;;"}
+{"version":3,"file":"CheckboxIcon.js","sources":["../src/checkbox/CheckboxIcon.tsx"],"sourcesContent":["import { CheckmarkIcon, CheckmarkSolidIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { ReactElement } from \"react\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer } from \"../utils\";\nimport checkboxIconCss from \"./CheckboxIcon.css\";\n\nexport interface CheckboxIconProps {\n  checked?: boolean;\n  className?: string;\n  disabled?: boolean;\n  /**\n   * @deprecated since 1.8.0-rc.2. Use `validationStatus` instead.\n   */\n  error?: boolean;\n  indeterminate?: boolean;\n  readOnly?: boolean;\n  validationStatus?: AdornmentValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxIcon\");\n\nexport const CheckboxIcon = ({\n  checked = false,\n  className,\n  disabled,\n  error,\n  indeterminate,\n  validationStatus,\n  readOnly,\n}: CheckboxIconProps): ReactElement => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-checkbox-icon\",\n    css: checkboxIconCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"checked\")]: checked,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"error\")]: error,\n          [withBaseName(validationStatus || \"\")]: validationStatus,\n          [withBaseName(\"indeterminate\")]: indeterminate,\n          [withBaseName(\"readOnly\")]: readOnly,\n        },\n        className,\n      )}\n    >\n      {checked && !indeterminate && !readOnly && (\n        <CheckmarkSolidIcon className={withBaseName(\"icon\")} />\n      )}\n      {checked && !indeterminate && readOnly && (\n        <CheckmarkIcon className={withBaseName(\"icon\")} />\n      )}\n    </div>\n  );\n};\n"],"names":["checkboxIconCss"],"mappings":";;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAE7C,MAAM,eAAe,CAAC;AAAA,EAC3B,OAAA,GAAU,KAAA;AAAA,EACV,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,KAAuC;AACrC,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,oBAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,MAAA;AAAA,MACZ,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,OAAA;AAAA,UAC3B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG,KAAA;AAAA,UACzB,CAAC,YAAA,CAAa,gBAAA,IAAoB,EAAE,CAAC,GAAG,gBAAA;AAAA,UACxC,CAAC,YAAA,CAAa,eAAe,CAAC,GAAG,aAAA;AAAA,UACjC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC9B;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,OAAA,IAAW,CAAC,iBAAiB,CAAC,QAAA,wBAC5B,kBAAA,EAAA,EAAmB,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,CAAA;AAAA,QAEtD,OAAA,IAAW,CAAC,aAAA,IAAiB,QAAA,wBAC3B,aAAA,EAAA,EAAc,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG;AAAA;AAAA;AAAA,GAEpD;AAEJ;;;;"}

package/dist-es/collapsible/CollapsiblePanel.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltCollapsiblePanel {\n  display: grid;\n  transition:\n    grid-template-rows var(--salt-duration-perceptible) ease-in-out,\n    opacity var(--salt-duration-perceptible) ease-in-out,\n    visibility var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltCollapsiblePanel[aria-hidden=\"true\"] {\n  grid-template-rows: 0fr;\n  opacity: 0;\n  visibility: hidden;\n}\n\n.saltCollapsiblePanel {\n  grid-template-rows: 1fr;\n  opacity: 1;\n  visibility: visible;\n}\n\n.saltCollapsiblePanel-inner {\n  overflow: hidden;\n}\n";
+var css_248z = ".saltCollapsiblePanel {\n  display: grid;\n  transition:\n    grid-template-rows var(--salt-duration-perceptible) ease-in-out,\n    opacity var(--salt-duration-perceptible) ease-in-out,\n    visibility var(--salt-duration-perceptible) ease-in-out,\n    padding-top var(--salt-duration-perceptible) ease-in-out,\n    padding-bottom var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltCollapsiblePanel[aria-hidden=\"true\"] {\n  grid-template-rows: 0fr;\n  opacity: 0;\n  visibility: hidden;\n}\n\n.saltCollapsiblePanel {\n  grid-template-rows: 1fr;\n  opacity: 1;\n  visibility: visible;\n}\n\n.saltCollapsiblePanel-inner {\n  overflow: hidden;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .saltCollapsiblePanel {\n    transition: none;\n  }\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=CollapsiblePanel.css.js.map

package/dist-es/collapsible/CollapsiblePanel.js

@@ -2,8 +2,9 @@ import { jsx } from 'react/jsx-runtime';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { forwardRef, useEffect } from 'react';
+import { forwardRef, isValidElement, useEffect } from 'react';
 import { makePrefixer } from '../utils/makePrefixer.js';
+import { renderProps } from '../utils/renderProps.js';
 import '../utils/useFloatingUI/useFloatingUI.js';
 import { useId } from '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
@@ -12,33 +13,32 @@ import { useCollapsibleContext } from './CollapsibleContext.js';
 import css_248z from './CollapsiblePanel.css.js';
 
 const withBaseName = makePrefixer("saltCollapsiblePanel");
-const CollapsiblePanel = forwardRef((props, ref) => {
-  const { children, className, id: idProp, ...rest } = props;
+const CollapsiblePanel = forwardRef(function CollapsiblePanel2(props, ref) {
+  const { children, className, id: idProp, render, ...rest } = props;
   const targetWindow = useWindow();
   useComponentCssInjection({
     testId: "salt-collapsible-panel",
     css: css_248z,
     window: targetWindow
   });
-  const id = useId(idProp);
+  const renderId = isValidElement(render) ? render.props.id : void 0;
+  const id = useId(renderId ?? idProp);
   const { open, setPanelId } = useCollapsibleContext();
   useEffect(() => {
     if (id) {
       setPanelId == null ? void 0 : setPanelId(id);
     }
   }, [id, setPanelId]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx(withBaseName(), className),
-      id,
-      "aria-hidden": !open ? "true" : void 0,
-      hidden: !open,
-      ref,
-      ...rest,
-      children: /* @__PURE__ */ jsx("div", { className: withBaseName("inner"), children })
-    }
-  );
+  return renderProps("div", {
+    className: clsx(withBaseName(), className),
+    id,
+    "aria-hidden": !open ? "true" : void 0,
+    hidden: !open,
+    ref,
+    ...rest,
+    render,
+    children: /* @__PURE__ */ jsx("div", { className: withBaseName("inner"), children })
+  });
 });
 
 export { CollapsiblePanel };

package/dist-es/collapsible/CollapsiblePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsiblePanel.js","sources":["../src/collapsible/CollapsiblePanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef, useEffect } from \"react\";\nimport { makePrefixer, useId } from \"../utils\";\n\nimport { useCollapsibleContext } from \"./CollapsibleContext\";\nimport collapsiblePanelCss from \"./CollapsiblePanel.css\";\n\nexport interface CollapsiblePanelProps\n  extends ComponentPropsWithoutRef<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltCollapsiblePanel\");\n\nexport const CollapsiblePanel = forwardRef<\n  HTMLDivElement,\n  CollapsiblePanelProps\n>((props, ref) => {\n  const { children, className, id: idProp, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-collapsible-panel\",\n    css: collapsiblePanelCss,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n  const { open, setPanelId } = useCollapsibleContext();\n\n  useEffect(() => {\n    if (id) {\n      setPanelId?.(id);\n    }\n  }, [id, setPanelId]);\n\n  return (\n    <div\n      className={clsx(withBaseName(), className)}\n      id={id}\n      aria-hidden={!open ? \"true\" : undefined}\n      hidden={!open}\n      ref={ref}\n      {...rest}\n    >\n      <div className={withBaseName(\"inner\")}>{children}</div>\n    </div>\n  );\n});\n"],"names":["collapsiblePanelCss"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA;AAEjD,MAAM,gBAAA,GAAmB,UAAA,CAG9B,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,IAAI,MAAA,EAAQ,GAAG,MAAK,GAAI,KAAA;AAErD,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,wBAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,EAAA,MAAM,EAAE,IAAA,EAAM,UAAA,EAAW,GAAI,qBAAA,EAAsB;AAEnD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,EAAA,EAAI;AACN,MAAA,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAa,EAAA,CAAA;AAAA,IACf;AAAA,EACF,CAAA,EAAG,CAAC,EAAA,EAAI,UAAU,CAAC,CAAA;AAEnB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACzC,EAAA;AAAA,MACA,aAAA,EAAa,CAAC,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,MAC9B,QAAQ,CAAC,IAAA;AAAA,MACT,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,OAAO,GAAI,QAAA,EAAS;AAAA;AAAA,GACnD;AAEJ,CAAC;;;;"}
+{"version":3,"file":"CollapsiblePanel.js","sources":["../src/collapsible/CollapsiblePanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  isValidElement,\n  type ReactElement,\n  useEffect,\n} from \"react\";\nimport { makePrefixer, renderProps, useId } from \"../utils\";\n\nimport { useCollapsibleContext } from \"./CollapsibleContext\";\nimport collapsiblePanelCss from \"./CollapsiblePanel.css\";\n\nexport interface CollapsiblePanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Element used to customize the panel's root, e.g. `<CardContent />`.\n   * Props are merged onto this element, and its own props take precedence.\n   * Don't set `children`, `hidden` or `aria-hidden` on it, as they replace the\n   * panel's content and open state.\n   */\n  render?: ReactElement;\n}\n\nconst withBaseName = makePrefixer(\"saltCollapsiblePanel\");\n\nexport const CollapsiblePanel = forwardRef<\n  HTMLDivElement,\n  CollapsiblePanelProps\n>(function CollapsiblePanel(props, ref) {\n  const { children, className, id: idProp, render, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-collapsible-panel\",\n    css: collapsiblePanelCss,\n    window: targetWindow,\n  });\n\n  const renderId = isValidElement<{ id?: string }>(render)\n    ? render.props.id\n    : undefined;\n  // The render element's id wins when props are merged, so prefer it here\n  // to keep aria-controls in sync.\n  const id = useId(renderId ?? idProp);\n  const { open, setPanelId } = useCollapsibleContext();\n\n  useEffect(() => {\n    if (id) {\n      setPanelId?.(id);\n    }\n  }, [id, setPanelId]);\n\n  return renderProps(\"div\", {\n    className: clsx(withBaseName(), className),\n    id,\n    \"aria-hidden\": !open ? \"true\" : undefined,\n    hidden: !open,\n    ref,\n    ...rest,\n    render,\n    children: <div className={withBaseName(\"inner\")}>{children}</div>,\n  });\n});\n"],"names":["CollapsiblePanel","collapsiblePanelCss"],"mappings":";;;;;;;;;;;;;;AAyBA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA;AAEjD,MAAM,gBAAA,GAAmB,UAAA,CAG9B,SAASA,iBAAAA,CAAiB,OAAO,GAAA,EAAK;AACtC,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,EAAA,EAAI,QAAQ,MAAA,EAAQ,GAAG,MAAK,GAAI,KAAA;AAE7D,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,wBAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,WAAW,cAAA,CAAgC,MAAM,CAAA,GACnD,MAAA,CAAO,MAAM,EAAA,GACb,MAAA;AAGJ,EAAA,MAAM,EAAA,GAAK,KAAA,CAAM,QAAA,IAAY,MAAM,CAAA;AACnC,EAAA,MAAM,EAAE,IAAA,EAAM,UAAA,EAAW,GAAI,qBAAA,EAAsB;AAEnD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,EAAA,EAAI;AACN,MAAA,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAa,EAAA,CAAA;AAAA,IACf;AAAA,EACF,CAAA,EAAG,CAAC,EAAA,EAAI,UAAU,CAAC,CAAA;AAEnB,EAAA,OAAO,YAAY,KAAA,EAAO;AAAA,IACxB,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,IACzC,EAAA;AAAA,IACA,aAAA,EAAe,CAAC,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,IAChC,QAAQ,CAAC,IAAA;AAAA,IACT,GAAA;AAAA,IACA,GAAG,IAAA;AAAA,IACH,MAAA;AAAA,IACA,0BAAU,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,YAAA,CAAa,OAAO,GAAI,QAAA,EAAS;AAAA,GAC5D,CAAA;AACH,CAAC;;;;"}