@salt-ds/core 1.14.0 → 1.15.0

package/dist-cjs/scrim/Scrim.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var React = require('react');
+var makePrefixer = require('../utils/makePrefixer.js');
+require('../utils/useFloatingUI/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var Scrim$1 = require('./Scrim.css.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltScrim");
+const Scrim = React.forwardRef(function Scrim2({ className, children, fixed = false, open = true, ...rest }, ref) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-scrim",
+    css: Scrim$1,
+    window: targetWindow
+  });
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: clsx.clsx(
+      withBaseName(),
+      {
+        [withBaseName("fixed")]: fixed
+      },
+      className
+    ),
+    "data-testid": "scrim",
+    ref,
+    ...rest,
+    children
+  });
+});
+
+exports.Scrim = Scrim;
+//# sourceMappingURL=Scrim.js.map

package/dist-cjs/scrim/Scrim.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrim.js","sources":["../src/scrim/Scrim.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport scrimCss from \"./Scrim.css\";\n\nconst withBaseName = makePrefixer(\"saltScrim\");\n\nexport interface ScrimProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If `true` the scrim is bound to the document viewport.\n   * The default value of this prop is false, and the default behavior is for Scrim to be bound to its parent container (nearest positioned ancestor).\n   */\n  fixed?: boolean;\n  /**\n   * If `true` the scrim is shown.\n   */\n  open?: boolean;\n}\n\nexport const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(\n  { className, children, fixed = false, open = true, ...rest },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-scrim\",\n    css: scrimCss,\n    window: targetWindow,\n  });\n\n  if (!open) {\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"fixed\")]: fixed,\n        },\n        className\n      )}\n      data-testid=\"scrim\"\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Scrim","useWindow","useComponentCssInjection","scrimCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,WAAW,CAAA,CAAA;AActC,MAAM,KAAQ,GAAAC,gBAAA,CAAuC,SAASC,MAAAA,CACnE,EAAE,SAAA,EAAW,QAAU,EAAA,KAAA,GAAQ,KAAO,EAAA,IAAA,GAAO,IAAS,EAAA,GAAA,IAAA,IACtD,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,OAC3B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,OAAA;AAAA,IACZ,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/toggle-button-group/ToggleButtonGroup.js

@@ -76,9 +76,10 @@ const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup2(props, re
       isSelected,
       focus,
       isFocused,
-      disabled
+      disabled,
+      orientation
     }),
-    [select, isSelected, isFocused, disabled]
+    [select, isSelected, isFocused, disabled, orientation]
   );
   const handleKeyDown = (event) => {
     var _a, _b, _c, _d;

package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  KeyboardEvent,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport { ToggleButtonGroupContext } from \"./ToggleButtonGroupContext\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\n\nexport interface ToggleButtonGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: string | ReadonlyArray<string> | number | undefined;\n  /**\n   * If `true`, the Toggle Button Group will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value. Use when the component is controlled.\n   */\n  value?: string | ReadonlyArray<string> | number | undefined;\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   */\n  onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  /**\n   * The orientation of the toggle buttons.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n  HTMLDivElement,\n  ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n  const {\n    children,\n    className,\n    value: valueProp,\n    defaultValue,\n    disabled,\n    onChange,\n    onKeyDown,\n    orientation = \"horizontal\",\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-toggle-button-group\",\n    css: toggleButtonGroupCss,\n    window: targetWindow,\n  });\n\n  const groupRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, groupRef);\n\n  const [value, setValue] = useControlled({\n    default: defaultValue,\n    controlled: valueProp,\n    name: \"ToggleButtonGroup\",\n    state: \"value\",\n  });\n  const [focused, setFocused] = useState<\n    string | ReadonlyArray<string> | number | undefined\n  >(value);\n\n  const select = useCallback(\n    (event: SyntheticEvent<HTMLButtonElement>) => {\n      const newValue = event.currentTarget.value;\n      setValue(newValue);\n      if (value !== newValue) {\n        onChange?.(event);\n      }\n    },\n    [onChange, value, setValue]\n  );\n\n  const isSelected = useCallback(\n    (id: string | ReadonlyArray<string> | number | undefined) => {\n      return value === id;\n    },\n    [value]\n  );\n\n  const focus = (id: string | ReadonlyArray<string> | number | undefined) => {\n    setFocused(id);\n  };\n\n  const isFocused = useCallback(\n    (id: string | ReadonlyArray<string> | number | undefined) => {\n      return focused === id || !focused;\n    },\n    [focused]\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      select,\n      isSelected,\n      focus,\n      isFocused,\n      disabled,\n    }),\n    [select, isSelected, isFocused, disabled]\n  );\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const elements: HTMLElement[] = Array.from(\n      groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? []\n    );\n    const currentIndex = elements.findIndex(\n      (element) => element === document.activeElement\n    );\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        elements[(currentIndex + 1) % elements.length]?.focus();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        elements[\n          (currentIndex - 1 + elements.length) % elements.length\n        ]?.focus();\n        break;\n    }\n\n    onKeyDown?.(event);\n  };\n\n  return (\n    <ToggleButtonGroupContext.Provider value={contextValue}>\n      <div\n        className={clsx(withBaseName(), withBaseName(orientation), className)}\n        role=\"radiogroup\"\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {children}\n      </div>\n    </ToggleButtonGroupContext.Provider>\n  );\n});\n"],"names":["makePrefixer","forwardRef","ToggleButtonGroup","useWindow","useComponentCssInjection","toggleButtonGroupCss","useRef","useForkRef","useControlled","useState","useCallback","useMemo","jsx","ToggleButtonGroupContext","clsx"],"mappings":"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"}
+{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  KeyboardEvent,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport { ToggleButtonGroupContext, Value } from \"./ToggleButtonGroupContext\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\n\nexport interface ToggleButtonGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: Value;\n  /**\n   * If `true`, the Toggle Button Group will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value. Use when the component is controlled.\n   */\n  value?: Value;\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   */\n  onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  /**\n   * The orientation of the toggle buttons.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n  HTMLDivElement,\n  ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n  const {\n    children,\n    className,\n    value: valueProp,\n    defaultValue,\n    disabled,\n    onChange,\n    onKeyDown,\n    orientation = \"horizontal\",\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-toggle-button-group\",\n    css: toggleButtonGroupCss,\n    window: targetWindow,\n  });\n\n  const groupRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, groupRef);\n\n  const [value, setValue] = useControlled({\n    default: defaultValue,\n    controlled: valueProp,\n    name: \"ToggleButtonGroup\",\n    state: \"value\",\n  });\n  const [focused, setFocused] = useState<Value>(value);\n\n  const select = useCallback(\n    (event: SyntheticEvent<HTMLButtonElement>) => {\n      const newValue = event.currentTarget.value;\n      setValue(newValue);\n      if (value !== newValue) {\n        onChange?.(event);\n      }\n    },\n    [onChange, value, setValue]\n  );\n\n  const isSelected = useCallback(\n    (id: Value) => {\n      return value === id;\n    },\n    [value]\n  );\n\n  const focus = (id: Value) => {\n    setFocused(id);\n  };\n\n  const isFocused = useCallback(\n    (id: Value) => {\n      return focused === id || !focused;\n    },\n    [focused]\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      select,\n      isSelected,\n      focus,\n      isFocused,\n      disabled,\n      orientation,\n    }),\n    [select, isSelected, isFocused, disabled, orientation]\n  );\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const elements: HTMLElement[] = Array.from(\n      groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? []\n    );\n    const currentIndex = elements.findIndex(\n      (element) => element === document.activeElement\n    );\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        elements[(currentIndex + 1) % elements.length]?.focus();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        elements[\n          (currentIndex - 1 + elements.length) % elements.length\n        ]?.focus();\n        break;\n    }\n\n    onKeyDown?.(event);\n  };\n\n  return (\n    <ToggleButtonGroupContext.Provider value={contextValue}>\n      <div\n        className={clsx(withBaseName(), withBaseName(orientation), className)}\n        role=\"radiogroup\"\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {children}\n      </div>\n    </ToggleButtonGroupContext.Provider>\n  );\n});\n"],"names":["makePrefixer","forwardRef","ToggleButtonGroup","useWindow","useComponentCssInjection","toggleButtonGroupCss","useRef","useForkRef","useControlled","useState","useCallback","useMemo","jsx","ToggleButtonGroupContext","clsx"],"mappings":"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"}

package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button-group/ToggleButtonGroupContext.ts"],"sourcesContent":["import { SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\nexport interface ToggleButtonGroupContextValue {\n  disabled?: boolean;\n  select: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  isSelected: (\n    id: string | ReadonlyArray<string> | number | undefined\n  ) => boolean;\n  focus: (id: string | ReadonlyArray<string> | number | undefined) => void;\n  isFocused: (\n    id: string | ReadonlyArray<string> | number | undefined\n  ) => boolean;\n}\n\nexport const ToggleButtonGroupContext = createContext<\n  ToggleButtonGroupContextValue | undefined\n>(\"ToggleButtonGroupContext\", undefined);\n\nexport function useToggleButtonGroup() {\n  return useContext(ToggleButtonGroupContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;;AAca,MAAA,wBAAA,GAA2BA,2BAEtC,CAAA,0BAAA,EAA4B,KAAS,CAAA,EAAA;AAEhC,SAAS,oBAAuB,GAAA;AACrC,EAAA,OAAOC,iBAAW,wBAAwB,CAAA,CAAA;AAC5C;;;;;"}
+{"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button-group/ToggleButtonGroupContext.ts"],"sourcesContent":["import { SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport type Value = string | readonly string[] | number | undefined;\n\nexport interface ToggleButtonGroupContextValue {\n  disabled?: boolean;\n  select: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  isSelected: (id: Value) => boolean;\n  focus: (id: Value) => void;\n  isFocused: (id: Value) => boolean;\n  orientation: \"horizontal\" | \"vertical\";\n}\n\nexport const ToggleButtonGroupContext = createContext<\n  ToggleButtonGroupContextValue | undefined\n>(\"ToggleButtonGroupContext\", undefined);\n\nexport function useToggleButtonGroup() {\n  return useContext(ToggleButtonGroupContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;;AAca,MAAA,wBAAA,GAA2BA,2BAEtC,CAAA,0BAAA,EAA4B,KAAS,CAAA,EAAA;AAEhC,SAAS,oBAAuB,GAAA;AACrC,EAAA,OAAOC,iBAAW,wBAAwB,CAAA,CAAA;AAC5C;;;;;"}

package/dist-es/index.js

@@ -35,11 +35,18 @@ export { GridLayout } from './grid-layout/GridLayout.js';
 export { Input } from './input/Input.js';
 export { Link } from './link/Link.js';
 export { MultilineInput } from './multiline-input/MultilineInput.js';
+export { NavigationItem } from './navigation-item/NavigationItem.js';
+export { Pagination } from './pagination/Pagination.js';
+export { Paginator } from './pagination/Paginator.js';
+export { CompactInput } from './pagination/CompactInput.js';
+export { CompactPaginator } from './pagination/CompactPaginator.js';
+export { GoToInput } from './pagination/GoToInput.js';
 export { Panel } from './panel/Panel.js';
 export { Pill } from './pill/Pill.js';
 export { RadioButton } from './radio-button/RadioButton.js';
 export { RadioButtonGroup } from './radio-button/RadioButtonGroup.js';
 export { RadioButtonIcon } from './radio-button/RadioButtonIcon.js';
+export { Scrim } from './scrim/Scrim.js';
 export { Spinner, SpinnerSizeValues } from './spinner/Spinner.js';
 export { StackLayout } from './stack-layout/StackLayout.js';
 export { StatusAdornment } from './status-adornment/StatusAdornment.js';

package/dist-es/index.js.map

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

package/dist-es/navigation-item/ConditionalWrapper.js

@@ -0,0 +1,31 @@
+import { jsx } from 'react/jsx-runtime';
+
+const ConditionalWrapper = ({
+  children,
+  className,
+  parent,
+  expanded,
+  onExpand,
+  active,
+  href
+}) => {
+  const handleExpand = (event) => {
+    event.stopPropagation();
+    onExpand == null ? void 0 : onExpand(event);
+  };
+  return parent || href === void 0 ? /* @__PURE__ */ jsx("button", {
+    "aria-label": "expand",
+    "aria-expanded": expanded,
+    className,
+    onClick: handleExpand,
+    children
+  }) : /* @__PURE__ */ jsx("a", {
+    "aria-current": active ? "page" : void 0,
+    href,
+    className,
+    children
+  });
+};
+
+export { ConditionalWrapper };
+//# sourceMappingURL=ConditionalWrapper.js.map

package/dist-es/navigation-item/ConditionalWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionalWrapper.js","sources":["../src/navigation-item/ConditionalWrapper.tsx"],"sourcesContent":["import { MouseEvent, ReactNode } from \"react\";\nimport { NavigationItemProps } from \"./NavigationItem\";\n\ninterface ConditionalWrapperProps\n  extends Pick<\n    NavigationItemProps,\n    \"parent\" | \"expanded\" | \"onExpand\" | \"active\" | \"href\" | \"onClick\"\n  > {\n  children: ReactNode;\n  className: string;\n}\n\nexport const ConditionalWrapper = ({\n  children,\n  className,\n  parent,\n  expanded,\n  onExpand,\n  active,\n  href,\n}: ConditionalWrapperProps) => {\n  const handleExpand = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n    onExpand?.(event);\n  };\n\n  return parent || href === undefined ? (\n    <button\n      aria-label=\"expand\"\n      aria-expanded={expanded}\n      className={className}\n      onClick={handleExpand}\n    >\n      {children}\n    </button>\n  ) : (\n    <a\n      aria-current={active ? \"page\" : undefined}\n      href={href}\n      className={className}\n    >\n      {children}\n    </a>\n  );\n};\n"],"names":[],"mappings":";;AAYO,MAAM,qBAAqB,CAAC;AAAA,EACjC,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AACF,CAA+B,KAAA;AAC7B,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAO,OAAA,MAAA,IAAU,IAAS,KAAA,KAAA,CAAA,mBACvB,GAAA,CAAA,QAAA,EAAA;AAAA,IACC,YAAW,EAAA,QAAA;AAAA,IACX,eAAe,EAAA,QAAA;AAAA,IACf,SAAA;AAAA,IACA,OAAS,EAAA,YAAA;AAAA,IAER,QAAA;AAAA,GACH,oBAEC,GAAA,CAAA,GAAA,EAAA;AAAA,IACC,cAAA,EAAc,SAAS,MAAS,GAAA,KAAA,CAAA;AAAA,IAChC,IAAA;AAAA,IACA,SAAA;AAAA,IAEC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/navigation-item/ExpansionIcon.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import { ChevronDownIcon, ChevronRightIcon } from '@salt-ds/icons';
+
+const iconExpansionMap = {
+  vertical: {
+    expanded: ChevronDownIcon,
+    collapsed: ChevronRightIcon
+  },
+  horizontal: {
+    expanded: ChevronDownIcon,
+    collapsed: ChevronDownIcon
+  }
+};
+function ExpansionIcon({
+  expanded = false,
+  orientation = "horizontal"
+}) {
+  const Icon = iconExpansionMap[orientation][expanded ? "expanded" : "collapsed"];
+  return /* @__PURE__ */ jsx(Icon, {
+    "aria-hidden": "true"
+  });
+}
+
+export { ExpansionIcon };
+//# sourceMappingURL=ExpansionIcon.js.map

package/dist-es/navigation-item/ExpansionIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpansionIcon.js","sources":["../src/navigation-item/ExpansionIcon.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { NavigationItemProps } from \"./NavigationItem\";\n\nconst iconExpansionMap = {\n  vertical: {\n    expanded: ChevronDownIcon,\n    collapsed: ChevronRightIcon,\n  },\n  horizontal: {\n    expanded: ChevronDownIcon,\n    collapsed: ChevronDownIcon,\n  },\n};\n\nexport function ExpansionIcon({\n  expanded = false,\n  orientation = \"horizontal\",\n}: Pick<NavigationItemProps, \"expanded\" | \"orientation\" | \"className\">) {\n  const Icon =\n    iconExpansionMap[orientation][expanded ? \"expanded\" : \"collapsed\"];\n  return <Icon aria-hidden=\"true\" />;\n}\n"],"names":[],"mappings":";;;AAGA,MAAM,gBAAmB,GAAA;AAAA,EACvB,QAAU,EAAA;AAAA,IACR,QAAU,EAAA,eAAA;AAAA,IACV,SAAW,EAAA,gBAAA;AAAA,GACb;AAAA,EACA,UAAY,EAAA;AAAA,IACV,QAAU,EAAA,eAAA;AAAA,IACV,SAAW,EAAA,eAAA;AAAA,GACb;AACF,CAAA,CAAA;AAEO,SAAS,aAAc,CAAA;AAAA,EAC5B,QAAW,GAAA,KAAA;AAAA,EACX,WAAc,GAAA,YAAA;AAChB,CAAwE,EAAA;AACtE,EAAA,MAAM,IACJ,GAAA,gBAAA,CAAiB,WAAa,CAAA,CAAA,QAAA,GAAW,UAAa,GAAA,WAAA,CAAA,CAAA;AACxD,EAAA,uBAAQ,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,aAAY,EAAA,MAAA;AAAA,GAAO,CAAA,CAAA;AAClC;;;;"}

package/dist-es/navigation-item/NavigationItem.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Vars applied to root NavigationItem component */\n.saltNavigationItem-wrapper {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  align-items: center;\n  position: relative;\n  background: none;\n  border: none;\n  font-size: var(--salt-text-fontSize);\n  text-decoration: none;\n  cursor: var(--salt-selectable-cursor-hover);\n  /* Hover off animation */\n  transition: all var(--salt-duration-instant) ease-in-out;\n}\n\n/* Vars applied to NavigationItem component when root */\n.saltNavigationItem-rootItem {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-label .saltIcon {\n  top: var(--salt-spacing-25);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);\n  padding: 0 var(--salt-spacing-100);\n  width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-vertical {\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-right: var(--salt-spacing-100);\n  padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));\n  width: 100%;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-label {\n  color: var(--salt-content-primary-foreground);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));\n  flex: 1;\n  text-align: left;\n  display: flex;\n  align-items: baseline;\n  gap: var(--salt-spacing-100);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);\n  padding: 0 var(--salt-spacing-100);\n  width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-vertical {\n  --saltButton-margin: var(--salt-spacing-50) 0;\n\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);\n  padding-right: var(--salt-spacing-100);\n  padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));\n  width: 100%;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-label {\n  color: var(--salt-content-primary-foreground);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));\n  flex: 1;\n  text-align: left;\n  display: flex;\n  align-items: baseline;\n  gap: var(--salt-spacing-100);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n  margin-left: auto;\n}\n\n/* Styles applied to NavigationItem when focus is visible */\n.saltNavigationItem-wrapper:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to NavigationItem for non-keyboard focus */\n.saltNavigationItem-wrapper:focus:not(:focus-visible) {\n  outline: 0;\n}\n\n/* Styles applied to activation line */\n.saltNavigationItem-wrapper::after {\n  content: \"\";\n  position: absolute;\n  top: var(--salt-spacing-25);\n  left: 0;\n  display: block;\n}\n\n/* Styles applied to activation line when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal::after {\n  width: 100%;\n  height: var(--salt-size-indicator);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavigationItem-vertical::after {\n  width: var(--salt-size-indicator);\n  left: var(--salt-spacing-25);\n  height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover  */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper:focus-visible::after {\n  background: var(--salt-navigable-indicator-hover);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-active::after,\n.saltNavigationItem-active:hover::after,\n.saltNavigationItem-active:focus::after {\n  background: var(--salt-navigable-indicator-active);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=NavigationItem.css.js.map

package/dist-es/navigation-item/NavigationItem.css.js.map

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

package/dist-es/navigation-item/NavigationItem.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { clsx } from 'clsx';
+import { ExpansionIcon } from './ExpansionIcon.js';
+import { ConditionalWrapper } from './ConditionalWrapper.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './NavigationItem.css.js';
+
+const withBaseName = makePrefixer("saltNavigationItem");
+const NavigationItem = forwardRef(
+  function NavigationItem2(props, ref) {
+    const {
+      active,
+      blurActive,
+      children,
+      className,
+      expanded = false,
+      orientation = "horizontal",
+      parent,
+      level = 0,
+      onExpand,
+      href,
+      style: styleProp,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-navigation-item",
+      css: css_248z,
+      window: targetWindow
+    });
+    const style = {
+      ...styleProp,
+      "--saltNavigationItem-level": `${level}`
+    };
+    return /* @__PURE__ */ jsx("div", {
+      ref,
+      className: clsx(withBaseName(), className),
+      style,
+      ...rest,
+      children: /* @__PURE__ */ jsxs(ConditionalWrapper, {
+        className: clsx(
+          withBaseName("wrapper"),
+          {
+            [withBaseName("active")]: active || blurActive,
+            [withBaseName("blurActive")]: blurActive,
+            [withBaseName("rootItem")]: level === 0
+          },
+          withBaseName(orientation)
+        ),
+        parent,
+        expanded,
+        onExpand,
+        active,
+        href,
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: withBaseName("label"),
+            children
+          }),
+          parent && /* @__PURE__ */ jsx(ExpansionIcon, {
+            expanded,
+            orientation
+          })
+        ]
+      })
+    });
+  }
+);
+
+export { NavigationItem };
+//# sourceMappingURL=NavigationItem.js.map

package/dist-es/navigation-item/NavigationItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, MouseEventHandler } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport { clsx } from \"clsx\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\nimport { ConditionalWrapper } from \"./ConditionalWrapper\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport navigationItemCss from \"./NavigationItem.css\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Whether the navigation item is active.\n   */\n  active?: boolean;\n  /**\n   * Whether the nested group is collapsed and there is an active nested item within it.\n   */\n  blurActive?: boolean;\n  /**\n   * Whether the navigation item is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Level of nesting.\n   */\n  level?: number;\n  /**\n   * The orientation of the navigation item.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * Whether the navigation item is a parent with nested items.\n   */\n  parent?: boolean;\n  /**\n   * Action to be triggered when the navigation item is expanded.\n   */\n  onExpand?: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Href to be passed to the Link element.\n   */\n  href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n  function NavigationItem(props, ref) {\n    const {\n      active,\n      blurActive,\n      children,\n      className,\n      expanded = false,\n      orientation = \"horizontal\",\n      parent,\n      level = 0,\n      onExpand,\n      href,\n      style: styleProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-navigation-item\",\n      css: navigationItemCss,\n      window: targetWindow,\n    });\n\n    const style = {\n      ...styleProp,\n      \"--saltNavigationItem-level\": `${level}`,\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(withBaseName(), className)}\n        style={style}\n        {...rest}\n      >\n        <ConditionalWrapper\n          className={clsx(\n            withBaseName(\"wrapper\"),\n            {\n              [withBaseName(\"active\")]: active || blurActive,\n              [withBaseName(\"blurActive\")]: blurActive,\n              [withBaseName(\"rootItem\")]: level === 0,\n            },\n            withBaseName(orientation)\n          )}\n          parent={parent}\n          expanded={expanded}\n          onExpand={onExpand}\n          active={active}\n          href={href}\n        >\n          <span className={withBaseName(\"label\")}>{children}</span>\n          {parent && (\n            <ExpansionIcon expanded={expanded} orientation={orientation} />\n          )}\n        </ConditionalWrapper>\n      </div>\n    );\n  }\n);\n"],"names":["NavigationItem","navigationItemCss"],"mappings":";;;;;;;;;;;;;;AA8CA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAW,GAAA,KAAA;AAAA,MACX,WAAc,GAAA,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAQ,GAAA,CAAA;AAAA,MACR,QAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACJ,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,8BAA8B,CAAG,EAAA,KAAA,CAAA,CAAA;AAAA,KACnC,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,IAAA,CAAA,kBAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,aAAa,SAAS,CAAA;AAAA,UACtB;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,MAAU,IAAA,UAAA;AAAA,YACpC,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,UAAA;AAAA,YAC9B,CAAC,YAAA,CAAa,UAAU,CAAA,GAAI,KAAU,KAAA,CAAA;AAAA,WACxC;AAAA,UACA,aAAa,WAAW,CAAA;AAAA,SAC1B;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,MAAA;AAAA,QACA,IAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAAI,QAAA;AAAA,WAAS,CAAA;AAAA,UACjD,0BACE,GAAA,CAAA,aAAA,EAAA;AAAA,YAAc,QAAA;AAAA,YAAoB,WAAA;AAAA,WAA0B,CAAA;AAAA,SAAA;AAAA,OAEjE,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/pagination/CompactInput.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltCompactInput {\n  --saltInput-paddingLeft: 0;\n  --saltInput-paddingRight: 0;\n}\n\n.saltCompactInput-defaultSize.saltInput {\n  --saltInput-minWidth: var(--salt-size-base);\n  width: var(--salt-size-base);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=CompactInput.css.js.map

package/dist-es/pagination/CompactInput.css.js.map

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

package/dist-es/pagination/CompactInput.js

@@ -0,0 +1,63 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef, useState, useEffect } from 'react';
+import { Input } from '../input/Input.js';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { usePaginationContext } from './usePaginationContext.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './CompactInput.css.js';
+
+const withBaseName = makePrefixer("saltCompactInput");
+const CompactInput = forwardRef(function CompactInput2(props, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-compact-input",
+    css: css_248z,
+    window: targetWindow
+  });
+  const { count, page, onPageChange } = usePaginationContext();
+  const [inputValue, setInputValue] = useState(`${page}`);
+  useEffect(() => {
+    setInputValue(`${page}`);
+  }, [page]);
+  const handleChange = (event) => {
+    setInputValue(event.target.value);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      const pageValue = Number(inputValue);
+      if (!isNaN(pageValue) && pageValue <= count && pageValue > 0) {
+        onPageChange(event, pageValue);
+      } else {
+        setInputValue(`${page}`);
+      }
+    }
+  };
+  const handleBlur = () => {
+    setInputValue(`${page}`);
+  };
+  return /* @__PURE__ */ jsx(Input, {
+    className: clsx(withBaseName(), {
+      [withBaseName("defaultSize")]: count < 100
+    }),
+    inputProps: {
+      "aria-label": `Go to page, ${count} total`,
+      style: { width: `${`${count}`.length}ch` }
+    },
+    onBlur: handleBlur,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    value: inputValue,
+    textAlign: "center",
+    ref,
+    ...props
+  });
+});
+
+export { CompactInput };
+//# sourceMappingURL=CompactInput.js.map

package/dist-es/pagination/CompactInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompactInput.js","sources":["../src/pagination/CompactInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEventHandler,\n  KeyboardEventHandler,\n  forwardRef,\n  useEffect,\n  useState,\n} from \"react\";\nimport { Input, InputProps } from \"../input\";\nimport { makePrefixer } from \"../utils\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport compactInputCss from \"./CompactInput.css\";\n\nconst withBaseName = makePrefixer(\"saltCompactInput\");\n\nexport const CompactInput = forwardRef<\n  HTMLInputElement,\n  Pick<InputProps, \"inputRef\" | \"variant\">\n>(function CompactInput(props, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-compact-input\",\n    css: compactInputCss,\n    window: targetWindow,\n  });\n\n  const { count, page, onPageChange } = usePaginationContext();\n\n  const [inputValue, setInputValue] = useState(`${page}`);\n\n  useEffect(() => {\n    setInputValue(`${page}`);\n  }, [page]);\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    setInputValue(event.target.value);\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n    if (event.key === \"Enter\") {\n      const pageValue = Number(inputValue);\n      if (!isNaN(pageValue) && pageValue <= count && pageValue > 0) {\n        onPageChange(event, pageValue);\n      } else {\n        setInputValue(`${page}`);\n      }\n    }\n  };\n\n  const handleBlur = () => {\n    setInputValue(`${page}`);\n  };\n\n  return (\n    <Input\n      className={clsx(withBaseName(), {\n        [withBaseName(\"defaultSize\")]: count < 100,\n      })}\n      inputProps={{\n        \"aria-label\": `Go to page, ${count} total`,\n        style: { width: `${`${count}`.length}ch` },\n      }}\n      onBlur={handleBlur}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      value={inputValue}\n      textAlign={\"center\"}\n      ref={ref}\n      {...props}\n    />\n  );\n});\n"],"names":["CompactInput","compactInputCss"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,YAAe,GAAA,UAAA,CAG1B,SAASA,aAAAA,CAAa,OAAO,GAAK,EAAA;AAClC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,KAAA,EAAO,IAAM,EAAA,YAAA,KAAiB,oBAAqB,EAAA,CAAA;AAE3D,EAAA,MAAM,CAAC,UAAY,EAAA,aAAa,CAAI,GAAA,QAAA,CAAS,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAEtD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,aAAA,CAAc,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAAA,GACzB,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAET,EAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AACpE,IAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA,CAAA;AAAA,GAClC,CAAA;AAEA,EAAM,MAAA,aAAA,GAAwD,CAAC,KAAU,KAAA;AACvE,IAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,MAAM,MAAA,SAAA,GAAY,OAAO,UAAU,CAAA,CAAA;AACnC,MAAA,IAAI,CAAC,KAAM,CAAA,SAAS,KAAK,SAAa,IAAA,KAAA,IAAS,YAAY,CAAG,EAAA;AAC5D,QAAA,YAAA,CAAa,OAAO,SAAS,CAAA,CAAA;AAAA,OACxB,MAAA;AACL,QAAA,aAAA,CAAc,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAAA,OACzB;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,aAAA,CAAc,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAAA,GACzB,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAA,CAAa,aAAa,CAAA,GAAI,KAAQ,GAAA,GAAA;AAAA,KACxC,CAAA;AAAA,IACD,UAAY,EAAA;AAAA,MACV,cAAc,CAAe,YAAA,EAAA,KAAA,CAAA,MAAA,CAAA;AAAA,MAC7B,OAAO,EAAE,KAAA,EAAO,CAAG,EAAA,CAAA,EAAG,QAAQ,MAAW,CAAA,EAAA,CAAA,EAAA;AAAA,KAC3C;AAAA,IACA,MAAQ,EAAA,UAAA;AAAA,IACR,QAAU,EAAA,YAAA;AAAA,IACV,SAAW,EAAA,aAAA;AAAA,IACX,KAAO,EAAA,UAAA;AAAA,IACP,SAAW,EAAA,QAAA;AAAA,IACX,GAAA;AAAA,IACC,GAAG,KAAA;AAAA,GACN,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/pagination/CompactPaginator.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltCompactPaginator {\n  flex-wrap: nowrap;\n  display: flex;\n  gap: var(--salt-spacing-100);\n  align-items: center;\n}\n\n.saltCompactPaginator-arrowButton {\n  --saltButton-width: var(--salt-size-base);\n  --saltButton-height: var(--salt-size-base);\n  --saltButton-padding: var(--salt-spacing-100);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=CompactPaginator.css.js.map

package/dist-es/pagination/CompactPaginator.css.js.map

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

package/dist-es/pagination/CompactPaginator.js

@@ -0,0 +1,83 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { Button } from '../button/Button.js';
+import { Text } from '../text/Text.js';
+import '../text/Display.js';
+import '../text/Headings.js';
+import '../text/Label.js';
+import '../text/TextNotation.js';
+import '../text/TextAction.js';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { ChevronLeftIcon, ChevronRightIcon } from '@salt-ds/icons';
+import { PageButton } from './PageButton.js';
+import { usePaginationContext } from './usePaginationContext.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './CompactPaginator.css.js';
+
+const withBaseName = makePrefixer("saltCompactPaginator");
+const CompactPaginator = forwardRef(function CompactPaginator2({ children, className, ...restProps }, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-compact-paginator",
+    css: css_248z,
+    window: targetWindow
+  });
+  const { count, page, onPageChange } = usePaginationContext();
+  const onPreviousPage = (event) => {
+    onPageChange(event, Math.max(1, page - 1));
+  };
+  const onNextPage = (event) => {
+    onPageChange(event, Math.min(page + 1, count));
+  };
+  const isOnFirstPage = page === 1;
+  const isOnLastPage = page === count;
+  return /* @__PURE__ */ jsxs("div", {
+    className: clsx(withBaseName(), className),
+    ...restProps,
+    ref,
+    children: [
+      /* @__PURE__ */ jsx(Button, {
+        variant: "secondary",
+        "aria-label": "Previous Page",
+        onClick: onPreviousPage,
+        disabled: isOnFirstPage,
+        className: withBaseName("arrowButton"),
+        children: /* @__PURE__ */ jsx(ChevronLeftIcon, {
+          "aria-hidden": true
+        })
+      }),
+      children ? children : /* @__PURE__ */ jsx(PageButton, {
+        page,
+        disabled: true
+      }),
+      /* @__PURE__ */ jsx(Text, {
+        as: "span",
+        variant: "secondary",
+        children: "of"
+      }),
+      /* @__PURE__ */ jsx(PageButton, {
+        page: count,
+        disabled: isOnLastPage
+      }),
+      /* @__PURE__ */ jsx(Button, {
+        variant: "secondary",
+        "aria-label": "Next Page",
+        onClick: onNextPage,
+        disabled: isOnLastPage,
+        className: withBaseName("arrowButton"),
+        children: /* @__PURE__ */ jsx(ChevronRightIcon, {
+          "aria-hidden": true
+        })
+      })
+    ]
+  });
+});
+
+export { CompactPaginator };
+//# sourceMappingURL=CompactPaginator.js.map

package/dist-es/pagination/CompactPaginator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompactPaginator.js","sources":["../src/pagination/CompactPaginator.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, MouseEventHandler } from \"react\";\nimport { clsx } from \"clsx\";\nimport { Button } from \"../button\";\nimport { Text } from \"../text\";\nimport { makePrefixer } from \"../utils\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { PageButton } from \"./PageButton\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport compactPaginatorCss from \"./CompactPaginator.css\";\n\nconst withBaseName = makePrefixer(\"saltCompactPaginator\");\n\nexport const CompactPaginator = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(function CompactPaginator({ children, className, ...restProps }, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-compact-paginator\",\n    css: compactPaginatorCss,\n    window: targetWindow,\n  });\n\n  const { count, page, onPageChange } = usePaginationContext();\n\n  const onPreviousPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n    onPageChange(event, Math.max(1, page - 1));\n  };\n\n  const onNextPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n    onPageChange(event, Math.min(page + 1, count));\n  };\n\n  const isOnFirstPage = page === 1;\n  const isOnLastPage = page === count;\n\n  return (\n    <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n      <Button\n        variant=\"secondary\"\n        aria-label=\"Previous Page\"\n        onClick={onPreviousPage}\n        disabled={isOnFirstPage}\n        className={withBaseName(\"arrowButton\")}\n      >\n        <ChevronLeftIcon aria-hidden />\n      </Button>\n      {children ? children : <PageButton page={page} disabled />}\n      <Text as=\"span\" variant=\"secondary\">\n        of\n      </Text>\n      <PageButton page={count} disabled={isOnLastPage} />\n      <Button\n        variant=\"secondary\"\n        aria-label=\"Next Page\"\n        onClick={onNextPage}\n        disabled={isOnLastPage}\n        className={withBaseName(\"arrowButton\")}\n      >\n        <ChevronRightIcon aria-hidden />\n      </Button>\n    </div>\n  );\n});\n"],"names":["CompactPaginator","compactPaginatorCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA,CAAA;AAE3C,MAAA,gBAAA,GAAmB,WAG9B,SAASA,iBAAAA,CAAiB,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,SAAU,EAAA,EAAG,GAAK,EAAA;AACtE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,KAAA,EAAO,IAAM,EAAA,YAAA,KAAiB,oBAAqB,EAAA,CAAA;AAE3D,EAAM,MAAA,cAAA,GAAuD,CAAC,KAAU,KAAA;AACtE,IAAA,YAAA,CAAa,OAAO,IAAK,CAAA,GAAA,CAAI,CAAG,EAAA,IAAA,GAAO,CAAC,CAAC,CAAA,CAAA;AAAA,GAC3C,CAAA;AAEA,EAAM,MAAA,UAAA,GAAmD,CAAC,KAAU,KAAA;AAClE,IAAA,YAAA,CAAa,OAAO,IAAK,CAAA,GAAA,CAAI,IAAO,GAAA,CAAA,EAAG,KAAK,CAAC,CAAA,CAAA;AAAA,GAC/C,CAAA;AAEA,EAAA,MAAM,gBAAgB,IAAS,KAAA,CAAA,CAAA;AAC/B,EAAA,MAAM,eAAe,IAAS,KAAA,KAAA,CAAA;AAE9B,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAI,GAAG,SAAA;AAAA,IAAW,GAAA;AAAA,IAC9D,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QACC,OAAQ,EAAA,WAAA;AAAA,QACR,YAAW,EAAA,eAAA;AAAA,QACX,OAAS,EAAA,cAAA;AAAA,QACT,QAAU,EAAA,aAAA;AAAA,QACV,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,QAErC,QAAC,kBAAA,GAAA,CAAA,eAAA,EAAA;AAAA,UAAgB,aAAW,EAAA,IAAA;AAAA,SAAC,CAAA;AAAA,OAC/B,CAAA;AAAA,MACC,QAAA,GAAW,2BAAY,GAAA,CAAA,UAAA,EAAA;AAAA,QAAW,IAAA;AAAA,QAAY,QAAQ,EAAA,IAAA;AAAA,OAAC,CAAA;AAAA,sBACvD,GAAA,CAAA,IAAA,EAAA;AAAA,QAAK,EAAG,EAAA,MAAA;AAAA,QAAO,OAAQ,EAAA,WAAA;AAAA,QAAY,QAAA,EAAA,IAAA;AAAA,OAEpC,CAAA;AAAA,sBACC,GAAA,CAAA,UAAA,EAAA;AAAA,QAAW,IAAM,EAAA,KAAA;AAAA,QAAO,QAAU,EAAA,YAAA;AAAA,OAAc,CAAA;AAAA,sBAChD,GAAA,CAAA,MAAA,EAAA;AAAA,QACC,OAAQ,EAAA,WAAA;AAAA,QACR,YAAW,EAAA,WAAA;AAAA,QACX,OAAS,EAAA,UAAA;AAAA,QACT,QAAU,EAAA,YAAA;AAAA,QACV,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,QAErC,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA;AAAA,UAAiB,aAAW,EAAA,IAAA;AAAA,SAAC,CAAA;AAAA,OAChC,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/pagination/GoToInput.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltGoToInput.saltFormField {\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-100);\n  align-items: baseline;\n  text-wrap: nowrap;\n}\n\n.saltGoToInput-input {\n  height: var(--salt-size-base);\n  --saltInput-minWidth: unset;\n}\n\n.saltGoToInput-inputDefaultSize {\n  --saltInput-minWidth: var(--salt-size-base);\n  max-width: var(--salt-size-base);\n  width: var(--salt-size-base);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=GoToInput.css.js.map

package/dist-es/pagination/GoToInput.css.js.map

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

package/dist-es/pagination/GoToInput.js

@@ -0,0 +1,88 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef, useState } from 'react';
+import { FormField } from '../form-field/FormField.js';
+import '../status-indicator/StatusIndicator.js';
+import '../text/Text.js';
+import '../text/Display.js';
+import '../text/Headings.js';
+import '../text/Label.js';
+import '../text/TextNotation.js';
+import '../text/TextAction.js';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import '../form-field-context/FormFieldContext.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { FormFieldLabel } from '../form-field/FormFieldLabel.js';
+import { Input } from '../input/Input.js';
+import { usePaginationContext } from './usePaginationContext.js';
+import css_248z from './GoToInput.css.js';
+
+const withBaseName = makePrefixer("saltGoToInput");
+const GoToInput = forwardRef(
+  function GoToInput2({
+    className,
+    inputRef,
+    inputVariant = "primary",
+    label = "Go to",
+    ...restProps
+  }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-go-to-input",
+      css: css_248z,
+      window: targetWindow
+    });
+    const { count, onPageChange } = usePaginationContext();
+    const [inputValue, setInputValue] = useState("");
+    const onChange = (event) => {
+      setInputValue(event.target.value);
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Enter") {
+        const pageValue = Number(inputValue);
+        if (!inputValue.startsWith("0") && !isNaN(pageValue) && pageValue > 0 && pageValue <= count) {
+          onPageChange(event, pageValue);
+        }
+        setInputValue("");
+      }
+    };
+    const onBlur = () => {
+      setInputValue("");
+    };
+    const widthCh = `${`${count}`.length}ch`;
+    return /* @__PURE__ */ jsxs(FormField, {
+      labelPlacement: "left",
+      className: clsx(withBaseName(), className),
+      ref,
+      ...restProps,
+      children: [
+        /* @__PURE__ */ jsx(FormFieldLabel, {
+          children: label
+        }),
+        /* @__PURE__ */ jsx(Input, {
+          className: clsx(withBaseName("input"), {
+            [withBaseName("inputDefaultSize")]: count < 100
+          }),
+          ref: inputRef,
+          inputProps: {
+            style: { width: widthCh }
+          },
+          onBlur,
+          onChange,
+          onKeyDown,
+          value: inputValue,
+          textAlign: "center",
+          variant: inputVariant
+        })
+      ]
+    });
+  }
+);
+
+export { GoToInput };
+//# sourceMappingURL=GoToInput.js.map

package/dist-es/pagination/GoToInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GoToInput.js","sources":["../src/pagination/GoToInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEventHandler,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEventHandler,\n  Ref,\n  useState,\n} from \"react\";\nimport { FormField, FormFieldLabel } from \"../form-field\";\nimport { Input } from \"../input\";\nimport { makePrefixer } from \"../utils\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport goToInputCss from \"./GoToInput.css\";\n\nconst withBaseName = makePrefixer(\"saltGoToInput\");\nexport interface GoToInputProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Input label.\n   */\n  label?: string;\n  /**\n   * Optional ref for the input component\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * Change input variant.\n   */\n  inputVariant?: \"primary\" | \"secondary\";\n}\n\nexport const GoToInput = forwardRef<HTMLDivElement, GoToInputProps>(\n  function GoToInput(\n    {\n      className,\n      inputRef,\n      inputVariant = \"primary\",\n      label = \"Go to\",\n      ...restProps\n    },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-go-to-input\",\n      css: goToInputCss,\n      window: targetWindow,\n    });\n\n    const { count, onPageChange } = usePaginationContext();\n    const [inputValue, setInputValue] = useState(\"\");\n\n    const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      setInputValue(event.target.value);\n    };\n\n    const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n      if (event.key === \"Enter\") {\n        const pageValue = Number(inputValue);\n        if (\n          !inputValue.startsWith(\"0\") &&\n          !isNaN(pageValue) &&\n          pageValue > 0 &&\n          pageValue <= count\n        ) {\n          onPageChange(event, pageValue);\n        }\n        setInputValue(\"\");\n      }\n    };\n\n    const onBlur = () => {\n      setInputValue(\"\");\n    };\n\n    const widthCh = `${`${count}`.length}ch`;\n\n    return (\n      <FormField\n        labelPlacement=\"left\"\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        {...restProps}\n      >\n        <FormFieldLabel>{label}</FormFieldLabel>\n        <Input\n          className={clsx(withBaseName(\"input\"), {\n            [withBaseName(\"inputDefaultSize\")]: count < 100,\n          })}\n          ref={inputRef}\n          inputProps={{\n            style: { width: widthCh },\n          }}\n          onBlur={onBlur}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n          value={inputValue}\n          textAlign={\"center\"}\n          variant={inputVariant}\n        />\n      </FormField>\n    );\n  }\n);\n"],"names":["GoToInput","goToInputCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAgB1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UACP,CAAA;AAAA,IACE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAe,GAAA,SAAA;AAAA,IACf,KAAQ,GAAA,OAAA;AAAA,IACL,GAAA,SAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,YAAa,EAAA,GAAI,oBAAqB,EAAA,CAAA;AACrD,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,EAAE,CAAA,CAAA;AAE/C,IAAM,MAAA,QAAA,GAAiD,CAAC,KAAU,KAAA;AAChE,MAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA,CAAA;AAAA,KAClC,CAAA;AAEA,IAAM,MAAA,SAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,MAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,QAAM,MAAA,SAAA,GAAY,OAAO,UAAU,CAAA,CAAA;AACnC,QAAA,IACE,CAAC,UAAA,CAAW,UAAW,CAAA,GAAG,CAC1B,IAAA,CAAC,KAAM,CAAA,SAAS,CAChB,IAAA,SAAA,GAAY,CACZ,IAAA,SAAA,IAAa,KACb,EAAA;AACA,UAAA,YAAA,CAAa,OAAO,SAAS,CAAA,CAAA;AAAA,SAC/B;AACA,QAAA,aAAA,CAAc,EAAE,CAAA,CAAA;AAAA,OAClB;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,SAAS,MAAM;AACnB,MAAA,aAAA,CAAc,EAAE,CAAA,CAAA;AAAA,KAClB,CAAA;AAEA,IAAM,MAAA,OAAA,GAAU,CAAG,EAAA,CAAA,EAAG,KAAQ,CAAA,CAAA,CAAA,MAAA,CAAA,EAAA,CAAA,CAAA;AAE9B,IAAA,uBACG,IAAA,CAAA,SAAA,EAAA;AAAA,MACC,cAAe,EAAA,MAAA;AAAA,MACf,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,cAAA,EAAA;AAAA,UAAgB,QAAA,EAAA,KAAA;AAAA,SAAM,CAAA;AAAA,wBACtB,GAAA,CAAA,KAAA,EAAA;AAAA,UACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,OAAO,CAAG,EAAA;AAAA,YACrC,CAAC,YAAA,CAAa,kBAAkB,CAAA,GAAI,KAAQ,GAAA,GAAA;AAAA,WAC7C,CAAA;AAAA,UACD,GAAK,EAAA,QAAA;AAAA,UACL,UAAY,EAAA;AAAA,YACV,KAAA,EAAO,EAAE,KAAA,EAAO,OAAQ,EAAA;AAAA,WAC1B;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,SAAA;AAAA,UACA,KAAO,EAAA,UAAA;AAAA,UACP,SAAW,EAAA,QAAA;AAAA,UACX,OAAS,EAAA,YAAA;AAAA,SACX,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/pagination/PageButton.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltPageButton {\n  --saltButton-minWidth: var(--salt-size-base);\n  --saltButton-fontWeight: var(--salt-text-fontWeight);\n  --saltButton-height: var(--salt-size-base);\n  --saltButton-text-color: var(--salt-content-primary-foreground);\n  --saltButton-background-active: var(--salt-selectable-background-selected);\n  --saltButton-text-color-active: var(--salt-content-primary-foreground);\n}\n\n.saltPageButton:hover,\n.saltPageButton:focus-visible {\n  --saltButton-background-hover: var(--salt-selectable-background-hover);\n}\n\n.saltPageButton:disabled {\n  --saltButton-text-color-disabled: var(--salt-content-secondary-foreground);\n  --saltButton-cursor-disabled: var(--salt-editable-cursor-readonly);\n}\n\n.saltPageButton-selected {\n  --saltButton-background: var(--salt-selectable-background-selected);\n}\n.saltPageButton-selected:focus-visible {\n  --saltButton-background-hover: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton-fixed {\n  --saltButton-padding: 0;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=PageButton.css.js.map

package/dist-es/pagination/PageButton.css.js.map

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