@salt-ds/lab 1.0.0-alpha.51 → 1.0.0-alpha.53

package/dist-cjs/slider/Slider.js

@@ -4,42 +4,31 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
-var clsx = require('clsx');
-var react = require('react');
-var SliderHandle = require('./internal/SliderHandle.js');
-var SliderMarkLabels = require('./internal/SliderMarkLabels.js');
-var SliderRail = require('./internal/SliderRail.js');
-var SliderRailMarks = require('./internal/SliderRailMarks.js');
-var SliderSelection = require('./internal/SliderSelection.js');
-var styles$1 = require('./internal/styles.js');
-var useSliderKeyDown = require('./internal/useSliderKeyDown.js');
-var useSliderMouseDown = require('./internal/useSliderMouseDown.js');
-var utils = require('./internal/utils.js');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var SliderTrack = require('./internal/SliderTrack.js');
+var SliderMarks = require('./internal/SliderMarks.js');
+var SliderContext = require('./internal/SliderContext.js');
 var Slider$1 = require('./Slider.css.js');
+var utils = require('./internal/utils.js');
 
 const withBaseName = core.makePrefixer("saltSlider");
 const defaultMin = 0;
-const defaultMax = 100;
+const defaultMax = 10;
 const defaultStep = 1;
 const Slider = react.forwardRef(function Slider2({
   min = defaultMin,
   max = defaultMax,
   step = defaultStep,
-  pageStep = step,
   value: valueProp,
-  defaultValue = defaultMin,
+  defaultValue = [0],
   onChange,
-  label,
   className,
-  pushable,
-  pushDistance = 0,
-  disabled,
-  marks,
-  hideMarks,
-  hideMarkLabels,
-  ...restProps
+  "aria-label": ariaLabel,
+  marks = "inline",
+  ...rest
 }, ref) {
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
@@ -47,95 +36,54 @@ const Slider = react.forwardRef(function Slider2({
     css: Slider$1,
     window: targetWindow
   });
-  const trackRef = react.useRef(null);
   const [value, setValue] = core.useControlled({
-    controlled: valueProp,
+    controlled: utils.parseValueProp(valueProp, min, max),
     default: defaultValue,
     name: "Slider",
     state: "Value"
   });
-  const updateValueItem = utils.useValueUpdater(pushable, pushDistance, min, max);
-  const trackStyle = react.useMemo(
-    () => styles$1.createTrackStyle(min, max, value),
-    [min, max, value]
-  );
-  const valueLength = Array.isArray(value) ? value.length : 1;
-  const handleStyles = react.useMemo(
-    () => styles$1.createHandleStyles(valueLength),
-    [valueLength]
-  );
-  const onMouseDown = useSliderMouseDown.useSliderMouseDown(
-    trackRef,
-    value,
-    min,
-    max,
-    step,
-    updateValueItem,
-    setValue,
-    onChange
-  );
-  const onKeyDown = useSliderKeyDown.useSliderKeyDown(
-    value,
-    min,
-    max,
-    pageStep,
-    step,
-    updateValueItem,
-    setValue,
-    onChange
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    className: clsx.clsx(
-      withBaseName(),
-      {
-        [withBaseName("disabled")]: disabled
-      },
-      className
-    ),
-    ref,
-    onKeyDown: disabled ? void 0 : onKeyDown,
-    "aria-label": `${label} slider from ${min} to ${max}`,
-    role: "group",
-    children: [
-      label !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: withBaseName("label"),
-        children: label
-      }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: withBaseName("clickable"),
-        onMouseDown: disabled ? void 0 : onMouseDown,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-          className: withBaseName("track"),
-          style: trackStyle,
-          ref: trackRef,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SliderRail.SliderRail, {}),
-            marks && !hideMarks ? /* @__PURE__ */ jsxRuntime.jsx(SliderRailMarks.SliderRailMarks, {
-              min,
-              max,
-              marks
-            }) : null,
-            marks && !hideMarkLabels ? /* @__PURE__ */ jsxRuntime.jsx(SliderMarkLabels.SliderMarkLabels, {
-              min,
-              max,
-              marks
-            }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx(SliderSelection.SliderSelection, {
-              valueLength
-            }),
-            (Array.isArray(value) ? value : [value]).map((v, i) => /* @__PURE__ */ jsxRuntime.jsx(SliderHandle.SliderHandle, {
-              min,
-              max,
-              value: v,
-              index: i,
-              disabled: !!disabled,
-              valueLength,
-              style: handleStyles[i]
-            }, i))
-          ]
+  const handleSliderChange = (value2) => {
+    setValue(value2);
+    onChange == null ? void 0 : onChange(value2);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(SliderContext.SliderContext.Provider, {
+    value: {
+      value,
+      min,
+      max,
+      step,
+      onChange: handleSliderChange,
+      ariaLabel
+    },
+    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      ref,
+      className: clsx.clsx(
+        withBaseName(),
+        { [withBaseName("bottomLabel")]: marks !== "inline" },
+        className
+      ),
+      ...rest,
+      children: [
+        marks !== "all" && /* @__PURE__ */ jsxRuntime.jsx(core.Label, {
+          className: clsx.clsx(withBaseName("label"), {
+            [withBaseName("labelMinBottom")]: marks !== "inline"
+          }),
+          children: min
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(SliderTrack.SliderTrack, {}),
+        marks !== "all" && /* @__PURE__ */ jsxRuntime.jsx(core.Label, {
+          className: clsx.clsx(withBaseName("label"), {
+            [withBaseName("labelMaxBottom")]: marks !== "inline"
+          }),
+          children: max
+        }),
+        marks === "all" && /* @__PURE__ */ jsxRuntime.jsx(SliderMarks.SliderMarks, {
+          max,
+          min,
+          step
         })
-      })
-    ]
+      ]
+    })
   });
 });
 

package/dist-cjs/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../src/slider/Slider.tsx"],"sourcesContent":["import { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  forwardRef,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { SliderHandle } from \"./internal/SliderHandle\";\nimport { SliderMarkLabels } from \"./internal/SliderMarkLabels\";\nimport { SliderRail } from \"./internal/SliderRail\";\nimport { type SliderMark, SliderRailMarks } from \"./internal/SliderRailMarks\";\nimport { SliderSelection } from \"./internal/SliderSelection\";\nimport { createHandleStyles, createTrackStyle } from \"./internal/styles\";\nimport { useSliderKeyDown } from \"./internal/useSliderKeyDown\";\nimport { useSliderMouseDown } from \"./internal/useSliderMouseDown\";\nimport { useValueUpdater } from \"./internal/utils\";\nimport type { SliderChangeHandler, SliderValue } from \"./types\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport sliderCss from \"./Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSlider\");\n\nconst defaultMin = 0;\nconst defaultMax = 100;\nconst defaultStep = 1;\n\nexport interface SliderProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  label?: string;\n  min?: number;\n  max?: number;\n  step?: number;\n  pageStep?: number;\n  value?: SliderValue;\n  defaultValue?: SliderValue;\n  pushable?: boolean;\n  pushDistance?: number;\n  disabled?: boolean;\n  onChange?: SliderChangeHandler;\n  marks?: SliderMark[];\n  hideMarks?: boolean;\n  hideMarkLabels?: boolean;\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n  {\n    min = defaultMin,\n    max = defaultMax,\n    step = defaultStep,\n    pageStep = step,\n    value: valueProp,\n    defaultValue = defaultMin,\n    onChange,\n    label,\n    className,\n    pushable,\n    pushDistance = 0,\n    disabled,\n    marks,\n    hideMarks,\n    hideMarkLabels,\n    ...restProps\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-slider\",\n    css: sliderCss,\n    window: targetWindow,\n  });\n\n  const trackRef = useRef<HTMLDivElement>(null);\n\n  const [value, setValue] = useControlled<SliderValue>({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Slider\",\n    state: \"Value\",\n  });\n\n  const updateValueItem = useValueUpdater(pushable, pushDistance, min, max);\n\n  const trackStyle = useMemo(\n    () => createTrackStyle(min, max, value),\n    [min, max, value],\n  );\n\n  const valueLength = Array.isArray(value) ? value.length : 1;\n\n  const handleStyles: CSSProperties[] = useMemo(\n    () => createHandleStyles(valueLength),\n    [valueLength],\n  );\n\n  const onMouseDown = useSliderMouseDown(\n    trackRef,\n    value,\n    min,\n    max,\n    step,\n    updateValueItem,\n    setValue,\n    onChange,\n  );\n\n  const onKeyDown = useSliderKeyDown(\n    value,\n    min,\n    max,\n    pageStep,\n    step,\n    updateValueItem,\n    setValue,\n    onChange,\n  );\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n        },\n        className,\n      )}\n      ref={ref}\n      onKeyDown={disabled ? undefined : onKeyDown}\n      aria-label={`${label} slider from ${min} to ${max}`}\n      role=\"group\"\n    >\n      {label !== undefined ? (\n        <div className={withBaseName(\"label\")}>{label}</div>\n      ) : null}\n      <div\n        className={withBaseName(\"clickable\")}\n        onMouseDown={disabled ? undefined : onMouseDown}\n      >\n        <div\n          className={withBaseName(\"track\")}\n          style={trackStyle}\n          ref={trackRef}\n        >\n          <SliderRail />\n          {marks && !hideMarks ? (\n            <SliderRailMarks min={min} max={max} marks={marks} />\n          ) : null}\n          {marks && !hideMarkLabels ? (\n            <SliderMarkLabels min={min} max={max} marks={marks} />\n          ) : null}\n          <SliderSelection valueLength={valueLength} />\n          {(Array.isArray(value) ? value : [value]).map((v, i) => (\n            <SliderHandle\n              key={i}\n              min={min}\n              max={max}\n              value={v}\n              index={i}\n              disabled={!!disabled}\n              valueLength={valueLength}\n              style={handleStyles[i]}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Slider","useWindow","useComponentCssInjection","sliderCss","useRef","useControlled","useValueUpdater","useMemo","createTrackStyle","createHandleStyles","useSliderMouseDown","useSliderKeyDown","jsxs","clsx","jsx","SliderRail","SliderRailMarks","SliderMarkLabels","SliderSelection","SliderHandle"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../src/slider/Slider.tsx"],"sourcesContent":["import { Label, makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\nimport { SliderContext, SliderMarks, SliderTrack } from \"./internal\";\n\nimport sliderCss from \"./Slider.css\";\nimport { parseValueProp } from \"./internal/utils\";\nimport type { SliderChangeHandler, SliderValue } from \"./types\";\n\nconst withBaseName = makePrefixer(\"saltSlider\");\n\nconst defaultMin = 0;\nconst defaultMax = 10;\nconst defaultStep = 1;\n\nexport interface SliderProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  /**\n   * Minimum slider value\n   */\n  min?: number;\n  /**\n   * Maximum slider value\n   */\n  max?: number;\n  /**\n   * Minimum interval the slider thumb can move\n   */\n  step?: number;\n  /**\n   * Initial value of the slider\n   */\n  defaultValue?: SliderValue;\n  /**\n   * The markings the slider is displayed with\n   */\n  marks?: \"inline\" | \"bottom\" | \"all\";\n  /**\n   * Value of the slider, to be used when in a controlled state\n   */\n  value?: SliderValue;\n  /**\n   * Change handler to be used when in a controlled state\n   */\n  onChange?: SliderChangeHandler;\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n  {\n    min = defaultMin,\n    max = defaultMax,\n    step = defaultStep,\n    value: valueProp,\n    defaultValue = [0],\n    onChange,\n    className,\n    \"aria-label\": ariaLabel,\n    marks = \"inline\",\n    ...rest\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-slider\",\n    css: sliderCss,\n    window: targetWindow,\n  });\n\n  const [value, setValue] = useControlled<SliderValue>({\n    controlled: parseValueProp(valueProp, min, max),\n    default: defaultValue,\n    name: \"Slider\",\n    state: \"Value\",\n  });\n\n  const handleSliderChange = (value: SliderValue) => {\n    setValue(value);\n    onChange?.(value);\n  };\n\n  return (\n    <SliderContext.Provider\n      value={{\n        value,\n        min,\n        max,\n        step,\n        onChange: handleSliderChange,\n        ariaLabel,\n      }}\n    >\n      <div\n        ref={ref}\n        className={clsx(\n          withBaseName(),\n          { [withBaseName(\"bottomLabel\")]: marks !== \"inline\" },\n          className,\n        )}\n        {...rest}\n      >\n        {marks !== \"all\" && (\n          <Label\n            className={clsx(withBaseName(\"label\"), {\n              [withBaseName(\"labelMinBottom\")]: marks !== \"inline\",\n            })}\n          >\n            {min}\n          </Label>\n        )}\n        <SliderTrack />\n        {marks !== \"all\" && (\n          <Label\n            className={clsx(withBaseName(\"label\"), {\n              [withBaseName(\"labelMaxBottom\")]: marks !== \"inline\",\n            })}\n          >\n            {max}\n          </Label>\n        )}\n        {marks === \"all\" && <SliderMarks max={max} min={min} step={step} />}\n      </div>\n    </SliderContext.Provider>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Slider","useWindow","useComponentCssInjection","sliderCss","useControlled","parseValueProp","value","jsx","SliderContext","jsxs","clsx","Label","SliderTrack","SliderMarks"],"mappings":"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"}

package/dist-cjs/slider/internal/SliderContext.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+const SliderContext = react.createContext({
+  min: 0,
+  max: 10,
+  step: 1,
+  value: [0],
+  onChange: () => null,
+  ariaLabel: "slider"
+});
+function useSliderContext() {
+  return react.useContext(SliderContext);
+}
+
+exports.SliderContext = SliderContext;
+exports.useSliderContext = useSliderContext;
+//# sourceMappingURL=SliderContext.js.map

package/dist-cjs/slider/internal/SliderContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderContext.js","sources":["../src/slider/internal/SliderContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { SliderChangeHandler, SliderValue } from \"../types\";\nexport interface SliderContextValue {\n  min: number;\n  max: number;\n  step: number;\n  value: SliderValue;\n  onChange: SliderChangeHandler;\n  ariaLabel: string | undefined;\n}\n\nexport const SliderContext = createContext<SliderContextValue>({\n  min: 0,\n  max: 10,\n  step: 1,\n  value: [0],\n  onChange: () => null,\n  ariaLabel: \"slider\",\n});\n\nexport function useSliderContext() {\n  return useContext(SliderContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;AAWO,MAAM,gBAAgBA,mBAAkC,CAAA;AAAA,EAC7D,GAAK,EAAA,CAAA;AAAA,EACL,GAAK,EAAA,EAAA;AAAA,EACL,IAAM,EAAA,CAAA;AAAA,EACN,KAAA,EAAO,CAAC,CAAC,CAAA;AAAA,EACT,UAAU,MAAM,IAAA;AAAA,EAChB,SAAW,EAAA,QAAA;AACb,CAAC,EAAA;AAEM,SAAS,gBAAmB,GAAA;AACjC,EAAA,OAAOC,iBAAW,aAAa,CAAA,CAAA;AACjC;;;;;"}

package/dist-cjs/slider/internal/SliderMarks.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var utils = require('./utils.js');
+
+const withBaseName = core.makePrefixer("saltSliderMarks");
+function SliderMarks({
+  min,
+  max,
+  step,
+  ...rest
+}) {
+  const marks = utils.getMarkStyles(min, max, step);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: withBaseName(),
+    ...rest,
+    children: marks.map((mark) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(core.Label, {
+        className: withBaseName("mark"),
+        style: { left: mark.position },
+        children: mark.label
+      }, mark.value);
+    })
+  });
+}
+
+exports.SliderMarks = SliderMarks;
+//# sourceMappingURL=SliderMarks.js.map

package/dist-cjs/slider/internal/SliderMarks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderMarks.js","sources":["../src/slider/internal/SliderMarks.tsx"],"sourcesContent":["import { Label, makePrefixer } from \"@salt-ds/core\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { getMarkStyles } from \"./utils\";\n\nconst withBaseName = makePrefixer(\"saltSliderMarks\");\n\nexport interface SliderMarksProps extends ComponentPropsWithoutRef<\"div\"> {\n  min: number;\n  max: number;\n  step: number;\n}\n\nexport function SliderMarks({\n  min,\n  max,\n  step,\n  ...rest\n}: SliderMarksProps): JSX.Element {\n  const marks = getMarkStyles(min, max, step);\n  return (\n    <div className={withBaseName()} {...rest}>\n      {marks.map((mark) => {\n        return (\n          <Label\n            className={withBaseName(\"mark\")}\n            key={mark.value}\n            style={{ left: mark.position }}\n          >\n            {mark.label}\n          </Label>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["makePrefixer","getMarkStyles","jsx","Label"],"mappings":";;;;;;;;AAIA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA,CAAA;AAQ5C,SAAS,WAAY,CAAA;AAAA,EAC1B,GAAA;AAAA,EACA,GAAA;AAAA,EACA,IAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAkC,EAAA;AAChC,EAAA,MAAM,KAAQ,GAAAC,mBAAA,CAAc,GAAK,EAAA,GAAA,EAAK,IAAI,CAAA,CAAA;AAC1C,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAI,GAAG,IAAA;AAAA,IACjC,QAAA,EAAA,KAAA,CAAM,GAAI,CAAA,CAAC,IAAS,KAAA;AACnB,MAAA,uBACGA,cAAA,CAAAC,UAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,QAE9B,KAAO,EAAA,EAAE,IAAM,EAAA,IAAA,CAAK,QAAS,EAAA;AAAA,QAE5B,QAAK,EAAA,IAAA,CAAA,KAAA;AAAA,OAAA,EAHD,KAAK,KAIZ,CAAA,CAAA;AAAA,KAEH,CAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/slider/internal/SliderSelection.js

@@ -4,20 +4,27 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-var Slider = require('../Slider.css.js');
+var clsx = require('clsx');
+var SliderContext = require('./SliderContext.js');
+var utils = require('./utils.js');
 
 const withBaseName = core.makePrefixer("saltSliderSelection");
-function SliderSelection({ valueLength }) {
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "salt-slider",
-    css: Slider,
-    window: targetWindow
+function SliderSelection({
+  ...props
+}) {
+  const { min, max, value } = SliderContext.useSliderContext();
+  const thumbPosition = value.map((value2) => {
+    return utils.getPercentage(min, max, value2);
   });
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: valueLength < 2 ? withBaseName() : withBaseName("range")
+    className: clsx.clsx(withBaseName(), {
+      [withBaseName("range")]: Array.isArray(value)
+    }),
+    style: {
+      left: value.length > 1 ? `${thumbPosition[0]}%` : 0,
+      width: value.length > 1 ? `${thumbPosition[1] - thumbPosition[0]}%` : `${thumbPosition[0]}%`
+    },
+    ...props
   });
 }
 

package/dist-cjs/slider/internal/SliderSelection.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderSelection.js","sources":["../src/slider/internal/SliderSelection.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport sliderCss from \"../Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderSelection\");\n\nexport interface SliderSelectionProps {\n  valueLength: number;\n}\n\nexport function SliderSelection({ valueLength }: SliderSelectionProps) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-slider\",\n    css: sliderCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div className={valueLength < 2 ? withBaseName() : withBaseName(\"range\")} />\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","sliderCss","jsx"],"mappings":";;;;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA,CAAA;AAMvC,SAAA,eAAA,CAAgB,EAAE,WAAA,EAAqC,EAAA;AACrE,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,WAAc,GAAA,CAAA,GAAI,YAAa,EAAA,GAAI,aAAa,OAAO,CAAA;AAAA,GAAG,CAAA,CAAA;AAE9E;;;;"}
+{"version":3,"file":"SliderSelection.js","sources":["../src/slider/internal/SliderSelection.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { useSliderContext } from \"./SliderContext\";\nimport { getPercentage } from \"./utils\";\n\nconst withBaseName = makePrefixer(\"saltSliderSelection\");\n\nexport interface SliderSelectionProps extends ComponentPropsWithoutRef<\"div\"> {}\n\nexport function SliderSelection({\n  ...props\n}: SliderSelectionProps): JSX.Element {\n  const { min, max, value } = useSliderContext();\n\n  const thumbPosition = value.map((value) => {\n    return getPercentage(min, max, value);\n  });\n\n  return (\n    <div\n      className={clsx(withBaseName(), {\n        [withBaseName(\"range\")]: Array.isArray(value),\n      })}\n      style={{\n        left: value.length > 1 ? `${thumbPosition[0]}%` : 0,\n        width:\n          value.length > 1\n            ? `${thumbPosition[1] - thumbPosition[0]}%`\n            : `${thumbPosition[0]}%`,\n      }}\n      {...props}\n    />\n  );\n}\n"],"names":["makePrefixer","useSliderContext","value","getPercentage","jsx","clsx"],"mappings":";;;;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA,CAAA;AAIhD,SAAS,eAAgB,CAAA;AAAA,EAC3B,GAAA,KAAA;AACL,CAAsC,EAAA;AACpC,EAAA,MAAM,EAAE,GAAA,EAAK,GAAK,EAAA,KAAA,KAAUC,8BAAiB,EAAA,CAAA;AAE7C,EAAA,MAAM,aAAgB,GAAA,KAAA,CAAM,GAAI,CAAA,CAACC,MAAU,KAAA;AACzC,IAAO,OAAAC,mBAAA,CAAc,GAAK,EAAA,GAAA,EAAKD,MAAK,CAAA,CAAA;AAAA,GACrC,CAAA,CAAA;AAED,EAAA,uBACGE,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA,CAAM,QAAQ,KAAK,CAAA;AAAA,KAC7C,CAAA;AAAA,IACD,KAAO,EAAA;AAAA,MACL,MAAM,KAAM,CAAA,MAAA,GAAS,CAAI,GAAA,CAAA,EAAG,cAAc,CAAQ,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA;AAAA,MAClD,KAAA,EACE,KAAM,CAAA,MAAA,GAAS,CACX,GAAA,CAAA,EAAG,cAAc,CAAK,CAAA,GAAA,aAAA,CAAc,CACpC,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,EAAG,aAAc,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,KACzB;AAAA,IACC,GAAG,KAAA;AAAA,GACN,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/slider/internal/SliderThumb.js

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var react = require('react');
+var SliderContext = require('./SliderContext.js');
+var useKeyDownThumb = require('./useKeyDownThumb.js');
+var utils = require('./utils.js');
+
+const withBaseName = core.makePrefixer("saltSliderThumb");
+function SliderThumb(props) {
+  const { index, activeThumb, setActiveThumb } = props;
+  const [focussed, setFocussed] = react.useState(false);
+  const { min, max, step, value, onChange, ariaLabel } = SliderContext.useSliderContext();
+  const onKeyDown = useKeyDownThumb.useKeyDownThumb(min, max, step, value, onChange, index);
+  const thumbValue = value[index];
+  const thumbPosition = utils.getPercentage(min, max, thumbValue);
+  const handlePointerOver = () => {
+    if (activeThumb === void 0 && index !== null)
+      setActiveThumb(index);
+  };
+  const handleFocus = () => {
+    setFocussed(true);
+    if (index !== null)
+      setActiveThumb(index);
+  };
+  const handleBlur = () => {
+    setFocussed(false);
+    setActiveThumb(void 0);
+  };
+  const showTooltip = focussed || activeThumb === index;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    style: { left: `${thumbPosition}%` },
+    className: withBaseName("container"),
+    onPointerOver: handlePointerOver,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: clsx.clsx(withBaseName("tooltip"), {
+          [withBaseName("tooltip-visible")]: showTooltip
+        }),
+        "aria-expanded": showTooltip,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", {
+            className: withBaseName("tooltip-arrow"),
+            "aria-hidden": "true",
+            viewBox: "0 1 14 14",
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+              d: "M0,0 H14 L7,7 Q7,7 7,7 Z"
+            })
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx(core.Label, {
+            children: value[index]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: withBaseName(),
+        onKeyDown,
+        role: "slider",
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": index === 1 ? value[1] : value[0],
+        "aria-label": ariaLabel,
+        "aria-orientation": "horizontal",
+        tabIndex: 0
+      })
+    ]
+  });
+}
+
+exports.SliderThumb = SliderThumb;
+//# sourceMappingURL=SliderThumb.js.map

package/dist-cjs/slider/internal/SliderThumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderThumb.js","sources":["../src/slider/internal/SliderThumb.tsx"],"sourcesContent":["import { Label, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, useState } from \"react\";\nimport type { ActiveThumbIndex, ThumbIndex } from \"../types\";\nimport { useSliderContext } from \"./SliderContext\";\nimport { useKeyDownThumb } from \"./useKeyDownThumb\";\nimport { getPercentage } from \"./utils\";\n\nconst withBaseName = makePrefixer(\"saltSliderThumb\");\n\nexport interface SliderThumbProps extends ComponentPropsWithoutRef<\"div\"> {\n  index: ThumbIndex;\n  activeThumb: ActiveThumbIndex;\n  setActiveThumb: (index: ActiveThumbIndex) => void;\n}\n\nexport function SliderThumb(props: SliderThumbProps): JSX.Element {\n  const { index, activeThumb, setActiveThumb } = props;\n\n  const [focussed, setFocussed] = useState(false);\n\n  const { min, max, step, value, onChange, ariaLabel } = useSliderContext();\n\n  const onKeyDown = useKeyDownThumb(min, max, step, value, onChange, index);\n\n  const thumbValue = value[index];\n\n  const thumbPosition = getPercentage(min, max, thumbValue as number);\n\n  const handlePointerOver = () => {\n    if (activeThumb === undefined && index !== null) setActiveThumb(index);\n  };\n\n  const handleFocus = () => {\n    setFocussed(true);\n    if (index !== null) setActiveThumb(index);\n  };\n\n  const handleBlur = () => {\n    setFocussed(false);\n    setActiveThumb(undefined);\n  };\n\n  const showTooltip = focussed || activeThumb === index;\n\n  return (\n    <div\n      style={{ left: `${thumbPosition}%` }}\n      className={withBaseName(\"container\")}\n      onPointerOver={handlePointerOver}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n    >\n      <div\n        className={clsx(withBaseName(\"tooltip\"), {\n          [withBaseName(\"tooltip-visible\")]: showTooltip,\n        })}\n        aria-expanded={showTooltip}\n      >\n        <svg\n          className={withBaseName(\"tooltip-arrow\")}\n          aria-hidden=\"true\"\n          viewBox=\"0 1 14 14\"\n        >\n          <path d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\" />\n        </svg>\n        <Label>{value[index]}</Label>\n      </div>\n      <div\n        className={withBaseName()}\n        onKeyDown={onKeyDown}\n        role=\"slider\"\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={index === 1 ? value[1] : value[0]}\n        aria-label={ariaLabel}\n        aria-orientation=\"horizontal\"\n        tabIndex={0}\n      />\n    </div>\n  );\n}\n"],"names":["makePrefixer","useState","useSliderContext","useKeyDownThumb","getPercentage","jsxs","clsx","jsx","Label"],"mappings":"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"}

package/dist-cjs/slider/internal/SliderTrack.js

@@ -0,0 +1,91 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var react = require('react');
+var SliderContext = require('./SliderContext.js');
+var SliderSelection = require('./SliderSelection.js');
+var SliderThumb = require('./SliderThumb.js');
+var utils = require('./utils.js');
+
+const withBaseName = core.makePrefixer("saltSliderTrack");
+const SliderTrack = ({ ...props }) => {
+  const { min, max, step, value, onChange } = SliderContext.useSliderContext();
+  const trackRef = react.useRef(null);
+  const valueRef = react.useRef(value);
+  const [activeThumb, setActiveThumbState] = react.useState(void 0);
+  const activeThumbRef = react.useRef(void 0);
+  const pointerDown = react.useRef(false);
+  const setActiveThumb = (index) => {
+    setActiveThumbState(index);
+    activeThumbRef.current = index;
+  };
+  const handlePointerUp = () => {
+    setActiveThumb(void 0);
+    pointerDown.current = false;
+  };
+  const handlePointerDown = (event) => {
+    if (event.button !== 0)
+      return;
+    const { clientX } = event;
+    const newValue = utils.getValue(trackRef, min, max, step, clientX);
+    const nearestIndex = utils.getNearestIndex(value, newValue);
+    utils.setValue(value, newValue, value.length > 1 ? nearestIndex : 0, onChange);
+    setActiveThumb(nearestIndex);
+    pointerDown.current = true;
+  };
+  const handlePointerMove = (event) => {
+    if (!pointerDown.current || typeof activeThumbRef.current === "undefined")
+      return;
+    const thumb = activeThumbRef.current;
+    const { clientX } = event;
+    const rawValue = utils.getValue(trackRef, min, max, step, clientX);
+    const newValue = utils.preventOverlappingValues(
+      valueRef.current,
+      rawValue,
+      thumb
+    );
+    utils.setValue(valueRef.current, newValue, thumb, onChange);
+  };
+  const handlePointerOut = () => {
+    if (!pointerDown.current) {
+      setActiveThumb(void 0);
+    }
+  };
+  react.useEffect(() => {
+    window.addEventListener("pointerup", handlePointerUp);
+    window.addEventListener("pointermove", handlePointerMove);
+    return () => {
+      window.removeEventListener("pointerup", handlePointerUp);
+      window.removeEventListener("pointermove", handlePointerMove);
+    };
+  }, []);
+  react.useEffect(() => {
+    valueRef.current = value;
+  }, [value]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    className: withBaseName(),
+    ref: trackRef,
+    onPointerDown: handlePointerDown,
+    onPointerOut: handlePointerOut,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: withBaseName("rail")
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx(SliderSelection.SliderSelection, {}),
+      value.map((_, i) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(SliderThumb.SliderThumb, {
+          index: i,
+          activeThumb,
+          setActiveThumb
+        }, i);
+      })
+    ]
+  });
+};
+
+exports.SliderTrack = SliderTrack;
+//# sourceMappingURL=SliderTrack.js.map

package/dist-cjs/slider/internal/SliderTrack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderTrack.js","sources":["../src/slider/internal/SliderTrack.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport {\n  type ComponentPropsWithoutRef,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { ActiveThumbIndex, SliderValue, ThumbIndex } from \"../types\";\nimport { useSliderContext } from \"./SliderContext\";\nimport { SliderSelection } from \"./SliderSelection\";\nimport { SliderThumb } from \"./SliderThumb\";\nimport {\n  getNearestIndex,\n  getValue,\n  preventOverlappingValues,\n  setValue,\n} from \"./utils\";\n\nexport interface SliderTrackProps extends ComponentPropsWithoutRef<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltSliderTrack\");\n\nexport const SliderTrack = ({ ...props }: SliderTrackProps) => {\n  const { min, max, step, value, onChange } = useSliderContext();\n\n  const trackRef = useRef<HTMLDivElement>(null);\n\n  const valueRef = useRef<SliderValue>(value);\n\n  const [activeThumb, setActiveThumbState] =\n    useState<ActiveThumbIndex>(undefined);\n  const activeThumbRef = useRef<ActiveThumbIndex>(undefined);\n  const pointerDown = useRef(false);\n\n  const setActiveThumb = (index: ActiveThumbIndex) => {\n    setActiveThumbState(index);\n    activeThumbRef.current = index;\n  };\n\n  const handlePointerUp = () => {\n    setActiveThumb(undefined);\n    pointerDown.current = false;\n  };\n\n  const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n    if (event.button !== 0) return;\n    const { clientX } = event;\n    const newValue: number = getValue(trackRef, min, max, step, clientX);\n    const nearestIndex = getNearestIndex(value, newValue);\n    setValue(value, newValue, value.length > 1 ? nearestIndex : 0, onChange);\n    setActiveThumb(nearestIndex);\n    pointerDown.current = true;\n  };\n\n  const handlePointerMove = (event: PointerEvent) => {\n    if (!pointerDown.current || typeof activeThumbRef.current === \"undefined\")\n      return;\n    const thumb = activeThumbRef.current;\n    const { clientX } = event;\n    const rawValue: number = getValue(trackRef, min, max, step, clientX);\n    const newValue = preventOverlappingValues(\n      valueRef.current,\n      rawValue,\n      thumb,\n    );\n    setValue(valueRef.current, newValue, thumb, onChange);\n  };\n\n  const handlePointerOut = () => {\n    if (!pointerDown.current) {\n      setActiveThumb(undefined);\n    }\n  };\n\n  useEffect(() => {\n    window.addEventListener(\"pointerup\", handlePointerUp);\n    window.addEventListener(\"pointermove\", handlePointerMove);\n    return () => {\n      window.removeEventListener(\"pointerup\", handlePointerUp);\n      window.removeEventListener(\"pointermove\", handlePointerMove);\n    };\n  }, []);\n\n  useEffect(() => {\n    valueRef.current = value;\n  }, [value]);\n\n  return (\n    <div\n      className={withBaseName()}\n      ref={trackRef}\n      onPointerDown={handlePointerDown}\n      onPointerOut={handlePointerOut}\n      {...props}\n    >\n      <div className={withBaseName(\"rail\")} />\n      <SliderSelection />\n      {value.map((_, i) => {\n        return (\n          <SliderThumb\n            key={i}\n            index={i as ThumbIndex}\n            activeThumb={activeThumb}\n            setActiveThumb={setActiveThumb}\n          />\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["makePrefixer","useSliderContext","useRef","useState","getValue","getNearestIndex","setValue","preventOverlappingValues","useEffect","jsxs","jsx","SliderSelection","SliderThumb"],"mappings":"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"}

package/dist-cjs/slider/internal/useKeyDownThumb.js

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('./utils.js');
+
+const supportedKeys = [
+  "Home",
+  "End",
+  "ArrowUp",
+  "ArrowRight",
+  "ArrowDown",
+  "ArrowLeft"
+];
+const getValueFromKeyName = (keyName, value, min, max, step) => {
+  switch (keyName) {
+    case "Home":
+      return min;
+    case "End":
+      return max;
+    case "ArrowUp":
+    case "ArrowRight":
+      return value + step;
+    case "ArrowDown":
+    case "ArrowLeft":
+      return value - step;
+    default:
+      return value;
+  }
+};
+const useKeyDownThumb = (min, max, step, value, onChange, index) => {
+  return (event) => {
+    if (!supportedKeys.includes(event.key))
+      return;
+    event.preventDefault();
+    const targetValue = value[index];
+    const rawValue = getValueFromKeyName(
+      event.key,
+      targetValue,
+      min,
+      max,
+      step
+    );
+    const roundedToStep = utils.roundToStep(rawValue, step);
+    const rounded = Number(roundedToStep.toFixed(1));
+    const clamped = utils.clampValue(rounded, [min, max]);
+    const newValue = utils.preventOverlappingValues(value, clamped, index);
+    utils.setValue(value, newValue, index, onChange);
+  };
+};
+
+exports.useKeyDownThumb = useKeyDownThumb;
+//# sourceMappingURL=useKeyDownThumb.js.map

package/dist-cjs/slider/internal/useKeyDownThumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyDownThumb.js","sources":["../src/slider/internal/useKeyDownThumb.ts"],"sourcesContent":["import type { SliderChangeHandler, SliderValue, ThumbIndex } from \"../types\";\nimport {\n  clampValue,\n  preventOverlappingValues,\n  roundToStep,\n  setValue,\n} from \"./utils\";\n\nconst supportedKeys = [\n  \"Home\",\n  \"End\",\n  \"ArrowUp\",\n  \"ArrowRight\",\n  \"ArrowDown\",\n  \"ArrowLeft\",\n];\n\nconst getValueFromKeyName = (\n  keyName: string,\n  value: number,\n  min: number,\n  max: number,\n  step: number,\n) => {\n  switch (keyName) {\n    case \"Home\":\n      return min;\n    case \"End\":\n      return max;\n    case \"ArrowUp\":\n    case \"ArrowRight\":\n      return value + step;\n    case \"ArrowDown\":\n    case \"ArrowLeft\":\n      return value - step;\n    default:\n      return value;\n  }\n};\n\nexport const useKeyDownThumb = (\n  min: number,\n  max: number,\n  step: number,\n  value: SliderValue,\n  onChange: SliderChangeHandler,\n  index: ThumbIndex,\n) => {\n  return (event: React.KeyboardEvent) => {\n    if (!supportedKeys.includes(event.key)) return;\n    event.preventDefault();\n    const targetValue = value[index];\n    const rawValue = getValueFromKeyName(\n      event.key,\n      targetValue as number,\n      min,\n      max,\n      step,\n    );\n\n    const roundedToStep = roundToStep(rawValue, step);\n    const rounded = Number(roundedToStep.toFixed(1));\n    const clamped = clampValue(rounded, [min, max]);\n    const newValue = preventOverlappingValues(value, clamped, index);\n\n    setValue(value, newValue, index, onChange);\n  };\n};\n"],"names":["roundToStep","clampValue","preventOverlappingValues","setValue"],"mappings":";;;;;;AAQA,MAAM,aAAgB,GAAA;AAAA,EACpB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AACF,CAAA,CAAA;AAEA,MAAM,sBAAsB,CAC1B,OAAA,EACA,KACA,EAAA,GAAA,EACA,KACA,IACG,KAAA;AACH,EAAQ,QAAA,OAAA;AAAA,IACD,KAAA,MAAA;AACH,MAAO,OAAA,GAAA,CAAA;AAAA,IACJ,KAAA,KAAA;AACH,MAAO,OAAA,GAAA,CAAA;AAAA,IACJ,KAAA,SAAA,CAAA;AAAA,IACA,KAAA,YAAA;AACH,MAAA,OAAO,KAAQ,GAAA,IAAA,CAAA;AAAA,IACZ,KAAA,WAAA,CAAA;AAAA,IACA,KAAA,WAAA;AACH,MAAA,OAAO,KAAQ,GAAA,IAAA,CAAA;AAAA,IAAA;AAEf,MAAO,OAAA,KAAA,CAAA;AAAA,GAAA;AAEb,CAAA,CAAA;AAEO,MAAM,kBAAkB,CAC7B,GAAA,EACA,KACA,IACA,EAAA,KAAA,EACA,UACA,KACG,KAAA;AACH,EAAA,OAAO,CAAC,KAA+B,KAAA;AACrC,IAAA,IAAI,CAAC,aAAA,CAAc,QAAS,CAAA,KAAA,CAAM,GAAG,CAAA;AAAG,MAAA,OAAA;AACxC,IAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,IAAA,MAAM,cAAc,KAAM,CAAA,KAAA,CAAA,CAAA;AAC1B,IAAA,MAAM,QAAW,GAAA,mBAAA;AAAA,MACf,KAAM,CAAA,GAAA;AAAA,MACN,WAAA;AAAA,MACA,GAAA;AAAA,MACA,GAAA;AAAA,MACA,IAAA;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,aAAA,GAAgBA,iBAAY,CAAA,QAAA,EAAU,IAAI,CAAA,CAAA;AAChD,IAAA,MAAM,OAAU,GAAA,MAAA,CAAO,aAAc,CAAA,OAAA,CAAQ,CAAC,CAAC,CAAA,CAAA;AAC/C,IAAA,MAAM,UAAUC,gBAAW,CAAA,OAAA,EAAS,CAAC,GAAA,EAAK,GAAG,CAAC,CAAA,CAAA;AAC9C,IAAA,MAAM,QAAW,GAAAC,8BAAA,CAAyB,KAAO,EAAA,OAAA,EAAS,KAAK,CAAA,CAAA;AAE/D,IAASC,cAAA,CAAA,KAAA,EAAO,QAAU,EAAA,KAAA,EAAO,QAAQ,CAAA,CAAA;AAAA,GAC3C,CAAA;AACF;;;;"}