@salt-ds/lab 1.0.0-alpha.8 → 1.0.0-alpha.81

package/dist-cjs/contact-details/internal/useComponentSize.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var react = require('react');
+
+function useComponentSize(initialWidth) {
+  const [size, setSize] = react.useState({ width: initialWidth });
+  const ref = react.useRef(null);
+  const handleResize = react.useCallback(function handleResize2({
+    width,
+    height
+  }) {
+    setSize({ width, height });
+  }, []);
+  core.useIsomorphicLayoutEffect(() => {
+    if (!ref.current) {
+      if (process.env.NODE_ENV !== "production") {
+        throw new Error(
+          "ref returned by useComponentSize was not assigned to a component"
+        );
+      }
+      return;
+    }
+    handleResize(ref.current.getBoundingClientRect());
+    const observer = new ResizeObserver(
+      (observerEntries) => {
+        handleResize(observerEntries[0].contentRect);
+      }
+    );
+    observer.observe(ref.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [handleResize]);
+  return [ref, size];
+}
+
+exports.useComponentSize = useComponentSize;
+//# sourceMappingURL=useComponentSize.js.map

package/dist-cjs/contact-details/internal/useComponentSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComponentSize.js","sources":["../src/contact-details/internal/useComponentSize.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { type MutableRefObject, useCallback, useRef, useState } from \"react\";\n\nexport interface ComponentSize {\n  height?: number;\n  width: number;\n}\n\nexport function useComponentSize<T extends HTMLElement>(\n  initialWidth: number,\n): [MutableRefObject<T | null>, ComponentSize] {\n  const [size, setSize] = useState<ComponentSize>({ width: initialWidth });\n  const ref = useRef<T>(null);\n\n  const handleResize = useCallback(function handleResize({\n    width,\n    height,\n  }: DOMRect) {\n    setSize({ width, height });\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      if (process.env.NODE_ENV !== \"production\") {\n        throw new Error(\n          \"ref returned by useComponentSize was not assigned to a component\",\n        );\n      }\n      return;\n    }\n    handleResize(ref.current.getBoundingClientRect());\n    const observer = new ResizeObserver(\n      (observerEntries: ResizeObserverEntry[]) => {\n        handleResize(observerEntries[0].contentRect);\n      },\n    );\n    observer.observe(ref.current);\n    return () => {\n      observer.disconnect();\n    };\n  }, [handleResize]);\n\n  return [ref, size];\n}\n"],"names":["useState","useRef","useCallback","handleResize","useIsomorphicLayoutEffect"],"mappings":";;;;;AAQO,SAAS,iBACd,YAAA,EAC6C;AAC7C,EAAA,MAAM,CAAC,MAAM,OAAO,CAAA,GAAIA,eAAwB,EAAE,KAAA,EAAO,cAAc,CAAA;AACvE,EAAA,MAAM,GAAA,GAAMC,aAAU,IAAI,CAAA;AAE1B,EAAA,MAAM,YAAA,GAAeC,iBAAA,CAAY,SAASC,aAAAA,CAAa;AAAA,IACrD,KAAA;AAAA,IACA;AAAA,GACF,EAAY;AACV,IAAA,OAAA,CAAQ,EAAE,KAAA,EAAO,MAAA,EAAQ,CAAA;AAAA,EAC3B,CAAA,EAAG,EAAE,CAAA;AAEL,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,IAAI,OAAA,EAAS;AAChB,MAAA,IAAI,OAAA,CAAQ,GAAA,CAAI,QAAA,KAAa,YAAA,EAAc;AACzC,QAAA,MAAM,IAAI,KAAA;AAAA,UACR;AAAA,SACF;AAAA,MACF;AACA,MAAA;AAAA,IACF;AACA,IAAA,YAAA,CAAa,GAAA,CAAI,OAAA,CAAQ,qBAAA,EAAuB,CAAA;AAChD,IAAA,MAAM,WAAW,IAAI,cAAA;AAAA,MACnB,CAAC,eAAA,KAA2C;AAC1C,QAAA,YAAA,CAAa,eAAA,CAAgB,CAAC,CAAA,CAAE,WAAW,CAAA;AAAA,MAC7C;AAAA,KACF;AACA,IAAA,QAAA,CAAS,OAAA,CAAQ,IAAI,OAAO,CAAA;AAC5B,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,UAAA,EAAW;AAAA,IACtB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAA,OAAO,CAAC,KAAK,IAAI,CAAA;AACnB;;;;"}

package/dist-cjs/content-status/ContentStatus.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = "/* Styles applied to root component (ContentStatus) */\n.saltContentStatus {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: var(--salt-text-textAlign-embedded);\n  gap: var(--salt-size-unit);\n}\n\n/* Styles applied to inner content */\n.saltContentStatus-content {\n  color: var(--saltContentStatus-content-color, var(--salt-content-primary-foreground));\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-size-unit);\n\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to status title */\n.saltContentStatus-title.saltText {\n  font-weight: var(--salt-text-display1-fontWeight);\n  /* TODO: Use correct token */\n}\n\n/* Styles applied to status actions */\n.saltContentStatus-actions {\n  margin-top: var(--saltContentStatus-actions-marginTop, var(--salt-size-unit));\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=ContentStatus.css.js.map

package/dist-cjs/content-status/ContentStatus.css.js.map

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

package/dist-cjs/content-status/ContentStatus.js

@@ -0,0 +1,90 @@
+'use strict';
+
+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 clsx = require('clsx');
+var react = require('react');
+var ContentStatus$1 = require('./ContentStatus.css.js');
+var StatusIndicator = require('./internal/StatusIndicator.js');
+
+const withBaseName = core.makePrefixer("saltContentStatus");
+const ContentStatus = react.forwardRef(
+  function ContentStatus2({
+    CircularProgressProps,
+    SpinnerProps,
+    actionLabel,
+    buttonRef,
+    className,
+    children,
+    disableAnnouncer,
+    message,
+    onActionClick,
+    status = "info",
+    title,
+    value,
+    ...rest
+  }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-content-status",
+      css: ContentStatus$1,
+      window: targetWindow
+    });
+    const id = core.useId();
+    const hasDefaultActionContent = actionLabel && onActionClick;
+    const hasActions = children || hasDefaultActionContent;
+    const hasContent = title || message || hasActions;
+    const { announce } = core.useAriaAnnouncer();
+    react.useEffect(() => {
+      if (disableAnnouncer) return;
+      const toBeAnnounced = [];
+      if (title) {
+        toBeAnnounced.push(title);
+      }
+      if (message) {
+        toBeAnnounced.push(message);
+      }
+      if (status !== "loading") {
+        toBeAnnounced.push(status);
+      }
+      if (toBeAnnounced.length > 0) {
+        announce(toBeAnnounced.join(" "));
+      }
+    }, [announce, disableAnnouncer, message, status, title]);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(withBaseName(), className), ref, ...rest, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        StatusIndicator.StatusIndicator,
+        {
+          CircularProgressProps,
+          SpinnerProps,
+          disableAnnouncer,
+          id,
+          message,
+          status,
+          title,
+          value,
+          ...rest
+        }
+      ),
+      hasContent && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          "aria-labelledby": id,
+          className: clsx.clsx(withBaseName("content")),
+          id,
+          role: "region",
+          children: [
+            title && /* @__PURE__ */ jsxRuntime.jsx(core.Text, { className: clsx.clsx(withBaseName("title")), children: title }),
+            message && /* @__PURE__ */ jsxRuntime.jsx(core.Text, { className: clsx.clsx(withBaseName("message")), children: message }),
+            hasActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName("actions")), children: children || /* @__PURE__ */ jsxRuntime.jsx(core.Button, { onClick: onActionClick, ref: buttonRef, children: actionLabel }) })
+          ]
+        }
+      )
+    ] });
+  }
+);
+
+exports.ContentStatus = ContentStatus;
+//# sourceMappingURL=ContentStatus.js.map

package/dist-cjs/content-status/ContentStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentStatus.js","sources":["../src/content-status/ContentStatus.tsx"],"sourcesContent":["import {\n  Button,\n  makePrefixer,\n  Text,\n  useAriaAnnouncer,\n  useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type MouseEvent,\n  type Ref,\n  useEffect,\n} from \"react\";\nimport contentStatusCss from \"./ContentStatus.css\";\nimport {\n  StatusIndicator,\n  type StatusIndicatorProps,\n} from \"./internal/StatusIndicator\";\n\nconst withBaseName = makePrefixer(\"saltContentStatus\");\n\nexport interface ContentStatusProps\n  extends HTMLAttributes<HTMLDivElement>,\n    StatusIndicatorProps {\n  actionLabel?: string;\n  buttonRef?: Ref<HTMLButtonElement>;\n  onActionClick?: (evt: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport const ContentStatus = forwardRef<HTMLDivElement, ContentStatusProps>(\n  function ContentStatus(\n    {\n      CircularProgressProps,\n      SpinnerProps,\n      actionLabel,\n      buttonRef,\n      className,\n      children,\n      disableAnnouncer,\n      message,\n      onActionClick,\n      status = \"info\",\n      title,\n      value,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-content-status\",\n      css: contentStatusCss,\n      window: targetWindow,\n    });\n\n    const id = useId();\n\n    const hasDefaultActionContent = actionLabel && onActionClick;\n    const hasActions = children || hasDefaultActionContent;\n    const hasContent = title || message || hasActions;\n\n    const { announce } = useAriaAnnouncer();\n\n    useEffect(() => {\n      if (disableAnnouncer) return;\n\n      const toBeAnnounced = [];\n      if (title) {\n        toBeAnnounced.push(title);\n      }\n      if (message) {\n        toBeAnnounced.push(message);\n      }\n      // Loading is announced by the spinner\n      if (status !== \"loading\") {\n        toBeAnnounced.push(status);\n      }\n      if (toBeAnnounced.length > 0) {\n        announce(toBeAnnounced.join(\" \"));\n      }\n    }, [announce, disableAnnouncer, message, status, title]);\n\n    return (\n      <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n        <StatusIndicator\n          CircularProgressProps={CircularProgressProps}\n          SpinnerProps={SpinnerProps}\n          disableAnnouncer={disableAnnouncer}\n          id={id}\n          message={message}\n          status={status}\n          title={title}\n          value={value}\n          {...rest}\n        />\n        {hasContent && (\n          <div\n            // `aria-labelledby` to itself so that children of this div will show up in screen reader, and we don't need to join to aria-label\n            aria-labelledby={id}\n            className={clsx(withBaseName(\"content\"))}\n            id={id}\n            role=\"region\"\n          >\n            {title && (\n              <Text className={clsx(withBaseName(\"title\"))}>{title}</Text>\n            )}\n            {message && (\n              <Text className={clsx(withBaseName(\"message\"))}>{message}</Text>\n            )}\n            {hasActions && (\n              <div className={clsx(withBaseName(\"actions\"))}>\n                {children || (\n                  <Button onClick={onActionClick} ref={buttonRef}>\n                    {actionLabel}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","ContentStatus","useWindow","useComponentCssInjection","contentStatusCss","useId","useAriaAnnouncer","useEffect","jsxs","clsx","jsx","StatusIndicator","Text","Button"],"mappings":";;;;;;;;;;;AAuBA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA;AAU9C,MAAM,aAAA,GAAgBC,gBAAA;AAAA,EAC3B,SAASC,cAAAA,CACP;AAAA,IACE,qBAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,gBAAA;AAAA,IACA,OAAA;AAAA,IACA,aAAA;AAAA,IACA,MAAA,GAAS,MAAA;AAAA,IACT,KAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,qBAAA;AAAA,MACR,GAAA,EAAKC,eAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,KAAKC,UAAA,EAAM;AAEjB,IAAA,MAAM,0BAA0B,WAAA,IAAe,aAAA;AAC/C,IAAA,MAAM,aAAa,QAAA,IAAY,uBAAA;AAC/B,IAAA,MAAM,UAAA,GAAa,SAAS,OAAA,IAAW,UAAA;AAEvC,IAAA,MAAM,EAAE,QAAA,EAAS,GAAIC,qBAAA,EAAiB;AAEtC,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,gBAAA,EAAkB;AAEtB,MAAA,MAAM,gBAAgB,EAAC;AACvB,MAAA,IAAI,KAAA,EAAO;AACT,QAAA,aAAA,CAAc,KAAK,KAAK,CAAA;AAAA,MAC1B;AACA,MAAA,IAAI,OAAA,EAAS;AACX,QAAA,aAAA,CAAc,KAAK,OAAO,CAAA;AAAA,MAC5B;AAEA,MAAA,IAAI,WAAW,SAAA,EAAW;AACxB,QAAA,aAAA,CAAc,KAAK,MAAM,CAAA;AAAA,MAC3B;AACA,MAAA,IAAI,aAAA,CAAc,SAAS,CAAA,EAAG;AAC5B,QAAA,QAAA,CAAS,aAAA,CAAc,IAAA,CAAK,GAAG,CAAC,CAAA;AAAA,MAClC;AAAA,IACF,GAAG,CAAC,QAAA,EAAU,kBAAkB,OAAA,EAAS,MAAA,EAAQ,KAAK,CAAC,CAAA;AAEvD,IAAA,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,SAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAG,GAAA,EAAW,GAAG,IAAA,EAC7D,QAAA,EAAA;AAAA,sBAAAC,cAAA;AAAA,QAACC,+BAAA;AAAA,QAAA;AAAA,UACC,qBAAA;AAAA,UACA,YAAA;AAAA,UACA,gBAAA;AAAA,UACA,EAAA;AAAA,UACA,OAAA;AAAA,UACA,MAAA;AAAA,UACA,KAAA;AAAA,UACA,KAAA;AAAA,UACC,GAAG;AAAA;AAAA,OACN;AAAA,MACC,UAAA,oBACCH,eAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEC,iBAAA,EAAiB,EAAA;AAAA,UACjB,SAAA,EAAWC,SAAA,CAAK,YAAA,CAAa,SAAS,CAAC,CAAA;AAAA,UACvC,EAAA;AAAA,UACA,IAAA,EAAK,QAAA;AAAA,UAEJ,QAAA,EAAA;AAAA,YAAA,KAAA,oBACCC,cAAA,CAACE,aAAK,SAAA,EAAWH,SAAA,CAAK,aAAa,OAAO,CAAC,GAAI,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,YAEtD,OAAA,mCACEG,SAAA,EAAA,EAAK,SAAA,EAAWH,UAAK,YAAA,CAAa,SAAS,CAAC,CAAA,EAAI,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,YAE1D,8BACCC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWD,SAAA,CAAK,aAAa,SAAS,CAAC,CAAA,EACzC,QAAA,EAAA,QAAA,mCACEI,WAAA,EAAA,EAAO,OAAA,EAAS,eAAe,GAAA,EAAK,SAAA,EAClC,uBACH,CAAA,EAEJ;AAAA;AAAA;AAAA;AAEJ,KAAA,EAEJ,CAAA;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/content-status/internal/StatusIndicator.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+
+const withBaseName = core.makePrefixer("saltContentStatus");
+function StatusIndicator({
+  status = "info",
+  disableAnnouncer,
+  value,
+  title,
+  message,
+  CircularProgressProps: {
+    className: circularProgressClassName,
+    ...restCircularProgressProps
+  } = {},
+  SpinnerProps: { className: spinnerClassName, ...restSpinnerProps } = {},
+  id
+}) {
+  if (status === "loading") {
+    if (value !== void 0) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        core.CircularProgress,
+        {
+          "aria-label": title || message,
+          className: clsx.clsx(
+            withBaseName("determinateLoading"),
+            circularProgressClassName
+          ),
+          value,
+          ...restCircularProgressProps
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      core.Spinner,
+      {
+        className: clsx.clsx(withBaseName("indeterminateLoading"), spinnerClassName),
+        completionAnnouncement: null,
+        "data-testid": `spinner-${id}`,
+        disableAnnouncer,
+        ...restSpinnerProps
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.StatusIndicator,
+    {
+      status,
+      "data-jpmui-test": `icon-${status}-${id}`,
+      size: 2
+    }
+  );
+}
+
+exports.StatusIndicator = StatusIndicator;
+//# sourceMappingURL=StatusIndicator.js.map

package/dist-cjs/content-status/internal/StatusIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIndicator.js","sources":["../src/content-status/internal/StatusIndicator.tsx"],"sourcesContent":["import {\n  StatusIndicator as BaseStatusIndicator,\n  type StatusIndicatorProps as BaseStatusIndicatorProps,\n  CircularProgress,\n  type CircularProgressProps,\n  makePrefixer,\n  Spinner,\n  type SpinnerProps,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport type { ReactElement } from \"react\";\n\nexport interface StatusIndicatorProps\n  extends Pick<SpinnerProps, \"disableAnnouncer\">,\n    Pick<CircularProgressProps, \"value\"> {\n  title?: string;\n  message?: string;\n  CircularProgressProps?: Partial<CircularProgressProps>;\n  SpinnerProps?: Partial<SpinnerProps>;\n  id?: string;\n  status?: BaseStatusIndicatorProps[\"status\"] | \"loading\";\n}\n\nconst withBaseName = makePrefixer(\"saltContentStatus\");\n\nexport function StatusIndicator({\n  status = \"info\",\n  disableAnnouncer,\n  value,\n  title,\n  message,\n  CircularProgressProps: {\n    className: circularProgressClassName,\n    ...restCircularProgressProps\n  } = {},\n  SpinnerProps: { className: spinnerClassName, ...restSpinnerProps } = {},\n  id,\n}: StatusIndicatorProps): ReactElement {\n  if (status === \"loading\") {\n    if (value !== undefined) {\n      return (\n        <CircularProgress\n          aria-label={title || message}\n          className={clsx(\n            withBaseName(\"determinateLoading\"),\n            circularProgressClassName,\n          )}\n          value={value}\n          {...restCircularProgressProps}\n        />\n      );\n    }\n    return (\n      <Spinner\n        className={clsx(withBaseName(\"indeterminateLoading\"), spinnerClassName)}\n        // Announcement of the content status is more useful than completion announcement from spinner\n        completionAnnouncement={null}\n        data-testid={`spinner-${id}`}\n        disableAnnouncer={disableAnnouncer}\n        {...restSpinnerProps}\n      />\n    );\n  }\n\n  return (\n    <BaseStatusIndicator\n      status={status}\n      data-jpmui-test={`icon-${status}-${id}`}\n      size={2}\n    />\n  );\n}\n"],"names":["makePrefixer","jsx","CircularProgress","clsx","Spinner","BaseStatusIndicator"],"mappings":";;;;;;AAuBA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA;AAE9C,SAAS,eAAA,CAAgB;AAAA,EAC9B,MAAA,GAAS,MAAA;AAAA,EACT,gBAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,qBAAA,EAAuB;AAAA,IACrB,SAAA,EAAW,yBAAA;AAAA,IACX,GAAG;AAAA,MACD,EAAC;AAAA,EACL,cAAc,EAAE,SAAA,EAAW,kBAAkB,GAAG,gBAAA,KAAqB,EAAC;AAAA,EACtE;AACF,CAAA,EAAuC;AACrC,EAAA,IAAI,WAAW,SAAA,EAAW;AACxB,IAAA,IAAI,UAAU,MAAA,EAAW;AACvB,MAAA,uBACEC,cAAA;AAAA,QAACC,qBAAA;AAAA,QAAA;AAAA,UACC,cAAY,KAAA,IAAS,OAAA;AAAA,UACrB,SAAA,EAAWC,SAAA;AAAA,YACT,aAAa,oBAAoB,CAAA;AAAA,YACjC;AAAA,WACF;AAAA,UACA,KAAA;AAAA,UACC,GAAG;AAAA;AAAA,OACN;AAAA,IAEJ;AACA,IAAA,uBACEF,cAAA;AAAA,MAACG,YAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWD,SAAA,CAAK,YAAA,CAAa,sBAAsB,GAAG,gBAAgB,CAAA;AAAA,QAEtE,sBAAA,EAAwB,IAAA;AAAA,QACxB,aAAA,EAAa,WAAW,EAAE,CAAA,CAAA;AAAA,QAC1B,gBAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AAEA,EAAA,uBACEF,cAAA;AAAA,IAACI,oBAAA;AAAA,IAAA;AAAA,MACC,MAAA;AAAA,MACA,iBAAA,EAAiB,CAAA,KAAA,EAAQ,MAAM,CAAA,CAAA,EAAI,EAAE,CAAA,CAAA;AAAA,MACrC,IAAA,EAAM;AAAA;AAAA,GACR;AAEJ;;;;"}

package/dist-cjs/date-input/DateInput.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = "/* Style applied to the root element */\n.saltDateInput {\n  align-items: center;\n  background: var(--saltDateInput-background, var(--input-background));\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--saltDateInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltDateInput-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltDateInput-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n  height: var(--saltDateInput-height, var(--salt-size-base));\n  min-height: var(--saltDateInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltDateInput-minWidth, 4em);\n  padding-left: var(--saltDateInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltDateInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  box-sizing: border-box;\n  overflow: hidden;\n  width: 100%;\n}\n\n.saltDateInput:hover {\n  background: var(--saltDateInput-background-hover, var(--input-background-hover));\n  cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltDateInput-bordered.saltDateInput {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--input-borderColor);\n}\n\n.saltDateInput-bordered.saltDateInput:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--input-borderColor-hover);\n}\n\n.saltDateInput-bordered.saltDateInput-focused,\n.saltDateInput-bordered.saltDateInput-focused:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--input-borderColor-active);\n}\n\n.saltDateInput-bordered.saltDateInput-readOnly,\n.saltDateInput-bordered.saltDateInput-readOnly:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDateInput-bordered.saltDateInput-disabled,\n.saltDateInput-bordered.saltDateInput-disabled:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDateInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--input-borderColor);\n}\n\n.saltDateInput:hover .saltDateInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--input-borderColor-hover);\n}\n\n.saltDateInput-focused .saltDateInput-activationIndicator,\n.saltDateInput-focused:hover .saltDateInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--input-borderColor-active);\n}\n\n.saltDateInput-readOnly .saltDateInput-activationIndicator,\n.saltDateInput-readOnly:hover .saltDateInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDateInput-disabled .saltDateInput-activationIndicator,\n.saltDateInput-disabled:hover .saltDateInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDateInput-bordered .saltDateInput-activationIndicator,\n.saltDateInput-bordered.saltDateInput-readOnly .saltDateInput-activationIndicator,\n.saltDateInput-bordered.saltDateInput-disabled:hover .saltDateInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltDateInput-bordered.saltDateInput-focused .saltDateInput-activationIndicator {\n  /* Activation indicator width minus the border from the input. */\n  border-bottom-width: var(--salt-size-fixed-100);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltDateInput-primary {\n  --input-background: var(--salt-editable-primary-background);\n  --input-background-active: var(--salt-editable-primary-background-active);\n  --input-background-hover: var(--salt-editable-primary-background-hover);\n  --input-background-disabled: var(--salt-editable-primary-background-disabled);\n  --input-background-readonly: var(--salt-editable-primary-background-readonly);\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderColor-active: var(--salt-editable-borderColor-active);\n  --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltDateInput-secondary {\n  --input-background: var(--salt-editable-secondary-background);\n  --input-background-active: var(--salt-editable-secondary-background-active);\n  --input-background-hover: var(--salt-editable-secondary-background-active);\n  --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderColor-active: var(--salt-editable-borderColor-active);\n  --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltDateInput-error {\n  --input-background: var(--salt-status-error-background);\n  --input-background-active: var(--salt-status-error-background);\n  --input-background-hover: var(--salt-status-error-background);\n  --input-background-readonly: var(--salt-status-error-background);\n  --input-borderColor: var(--salt-status-error-borderColor);\n  --input-borderColor-active: var(--salt-status-error-borderColor);\n  --input-borderColor-hover: var(--salt-status-error-borderColor);\n  --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltDateInput-warning {\n  --input-background: var(--salt-status-warning-background);\n  --input-background-active: var(--salt-status-warning-background);\n  --input-background-hover: var(--salt-status-warning-background);\n  --input-background-readonly: var(--salt-status-warning-background);\n  --input-borderColor: var(--salt-status-warning-borderColor);\n  --input-borderColor-active: var(--salt-status-warning-borderColor);\n  --input-borderColor-hover: var(--salt-status-warning-borderColor);\n  --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltDateInput-success {\n  --input-background: var(--salt-status-success-background);\n  --input-background-active: var(--salt-status-success-background);\n  --input-background-hover: var(--salt-status-success-background);\n  --input-background-readonly: var(--salt-status-success-background);\n  --input-borderColor: var(--salt-status-success-borderColor);\n  --input-borderColor-active: var(--salt-status-success-borderColor);\n  --input-borderColor-hover: var(--salt-status-success-borderColor);\n  --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltDateInput-focused,\n.saltDateInput-focused:hover {\n  background: var(--saltDateInput-background-active, var(--input-background-active));\n  cursor: var(--salt-cursor-text);\n  outline: var(--saltDateInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltDateInput.saltDateInput-readOnly {\n  background: var(--input-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltDateInput-disabled,\n.saltDateInput-disabled:hover {\n  background: var(--input-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltDateInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltDateInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltDateInput-endAdornmentContainer {\n  display: inline-flex;\n  column-gap: var(--salt-spacing-50);\n  align-items: flex-end;\n}\n\n.saltDateInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltDateInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltDateInput-startAdornmentContainer > .saltButton,\n.saltDateInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n/* Style applied to inner input component */\n.saltDateInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltDateInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: left;\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltDateInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltDateInput-disabled .saltDateInput-input::selection {\n  background: none;\n}\n\n/* Style applied to placeholder text */\n.saltDateInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Style applied to the dash between two inputs in range date input */\n.saltDateInput-dash {\n  margin: 0 var(--salt-spacing-50);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=DateInput.css.js.map

package/dist-cjs/date-input/DateInput.css.js.map

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

package/dist-cjs/date-input/DateInputRange.js

@@ -0,0 +1,358 @@
+'use strict';
+
+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 clsx = require('clsx');
+var react = require('react');
+var LocalizationProvider = require('../localization-provider/LocalizationProvider.js');
+var DateInput = require('./DateInput.css.js');
+
+const withBaseName = core.makePrefixer("saltDateInput");
+var DateParserField = /* @__PURE__ */ ((DateParserField2) => {
+  DateParserField2["START"] = "start";
+  DateParserField2["END"] = "end";
+  return DateParserField2;
+})(DateParserField || {});
+const DateInputRange = react.forwardRef(
+  (props, ref) => {
+    const { dateAdapter } = LocalizationProvider.useLocalization();
+    const {
+      bordered = false,
+      className,
+      disabled,
+      "aria-label": ariaLabel,
+      date: dateProp,
+      defaultDate,
+      onDateChange,
+      value: valueProp,
+      format = "DD MMM YYYY",
+      defaultValue = {
+        startDate: "",
+        endDate: ""
+      },
+      onChange,
+      onClick,
+      onDateValueChange,
+      emptyReadOnlyMarker = "\u2014",
+      endAdornment,
+      startInputProps = {},
+      endInputProps = {},
+      startInputRef: startInputRefProp,
+      endInputRef: endInputRefProp,
+      parse: parseProp,
+      placeholder = format.toLowerCase(),
+      readOnly: readOnlyProp,
+      validationStatus: validationStatusProp,
+      variant = "primary",
+      timezone = (dateProp == null ? void 0 : dateProp.startDate) || (defaultDate == null ? void 0 : defaultDate.startDate) ? dateAdapter.getTimezone(
+        (dateProp == null ? void 0 : dateProp.startDate) ?? (defaultDate == null ? void 0 : defaultDate.startDate)
+      ) : "default",
+      ...rest
+    } = props;
+    const wrapperRef = react.useRef(null);
+    const handleWrapperRef = core.useForkRef(ref, wrapperRef);
+    const startInputRef = react.useRef(null);
+    const handleStartInputRef = core.useForkRef(startInputRef, startInputRefProp);
+    const endInputRef = react.useRef(null);
+    const handleEndInputRef = core.useForkRef(endInputRef, endInputRefProp);
+    const startInputID = core.useId();
+    const endInputID = core.useId();
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-date-input-range",
+      css: DateInput,
+      window: targetWindow
+    });
+    const parseDateValue = (dateValue2, field) => parseProp ? parseProp(dateValue2 ?? "", field, format) : dateAdapter.parse.bind(dateAdapter)(dateValue2 ?? "", format);
+    const [dateValue, setDateValue] = core.useControlled({
+      controlled: valueProp,
+      default: defaultValue,
+      name: "DateInputRange",
+      state: "dateValue"
+    });
+    const [date, setDate] = core.useControlled({
+      controlled: dateProp,
+      // biome-ignore lint/correctness/useExhaustiveDependencies: just on mount
+      default: react.useMemo(() => {
+        if (defaultDate) {
+          return defaultDate;
+        }
+        if (!defaultValue) {
+          return void 0;
+        }
+        const { date: startDate = void 0 } = parseDateValue(defaultValue == null ? void 0 : defaultValue.startDate, "start" /* START */) ?? {};
+        const { date: endDate = void 0 } = parseDateValue(defaultValue == null ? void 0 : defaultValue.endDate, "end" /* END */) ?? {};
+        return {
+          startDate,
+          endDate
+        };
+      }, []),
+      name: "DateInputRange",
+      state: "date"
+    });
+    const lastAppliedValue = react.useRef(dateValue);
+    const preservedTime = react.useRef({ startTime: null, endTime: null });
+    preservedTime.current = {
+      startTime: (date == null ? void 0 : date.startDate) && dateAdapter.isValid(date == null ? void 0 : date.startDate) ? dateAdapter.getTime(date.startDate) : null,
+      endTime: (date == null ? void 0 : date.endDate) && dateAdapter.isValid(date == null ? void 0 : date.endDate) ? dateAdapter.getTime(date.endDate) : null
+    };
+    const setDateValueFromDate = (newDate) => {
+      let newDateValue = { startDate: "", endDate: "" };
+      if (!(newDate == null ? void 0 : newDate.startDate)) {
+        newDateValue = { ...newDateValue, startDate: "" };
+      } else if (!dateAdapter.isValid(newDate == null ? void 0 : newDate.startDate)) {
+        newDateValue = {
+          ...newDateValue,
+          startDate: (dateValue == null ? void 0 : dateValue.startDate) ?? ""
+        };
+      } else if (newDate == null ? void 0 : newDate.startDate) {
+        const formattedStartDateValue = dateAdapter.format(
+          newDate.startDate,
+          format
+        );
+        newDateValue = { ...newDateValue, startDate: formattedStartDateValue };
+      }
+      if (!(newDate == null ? void 0 : newDate.endDate)) {
+        newDateValue = { ...newDateValue, endDate: "" };
+      } else if (!dateAdapter.isValid(newDate == null ? void 0 : newDate.endDate)) {
+        newDateValue = { ...newDateValue, endDate: (dateValue == null ? void 0 : dateValue.endDate) ?? "" };
+      } else if ((newDate == null ? void 0 : newDate.endDate) && dateAdapter.isValid(newDate.endDate)) {
+        const formattedEndDateValue = dateAdapter.format(
+          newDate.endDate,
+          format
+        );
+        newDateValue = { ...newDateValue, endDate: formattedEndDateValue };
+      }
+      if (!(newDateValue == null ? void 0 : newDateValue.startDate) && !!(dateValue == null ? void 0 : dateValue.startDate) || !newDateValue.endDate && !!(dateValue == null ? void 0 : dateValue.endDate) || (newDateValue == null ? void 0 : newDateValue.startDate) !== (dateValue == null ? void 0 : dateValue.startDate) || (newDateValue == null ? void 0 : newDateValue.endDate) !== (dateValue == null ? void 0 : dateValue.endDate)) {
+        onDateValueChange == null ? void 0 : onDateValueChange(null, newDateValue);
+        setDateValue(newDateValue);
+      }
+      return newDateValue;
+    };
+    react.useEffect(() => {
+      lastAppliedValue.current = setDateValueFromDate(date);
+    }, [date, date == null ? void 0 : date.startDate, date == null ? void 0 : date.endDate, dateAdapter.format, format]);
+    const [focused, setFocused] = react.useState(false);
+    const {
+      a11yProps: {
+        "aria-describedby": formFieldDescribedBy,
+        "aria-labelledby": formFieldLabelledBy
+      } = {},
+      disabled: formFieldDisabled,
+      readOnly: formFieldReadOnly,
+      necessity: formFieldRequired,
+      validationStatus: formFieldValidationStatus
+    } = core.useFormFieldProps();
+    const isReadOnly = readOnlyProp || formFieldReadOnly;
+    const isDisabled = disabled || formFieldDisabled;
+    const validationStatus = formFieldValidationStatus ?? validationStatusProp;
+    const {
+      "aria-describedby": startInputPropsDescribedBy,
+      "aria-labelledby": startInputPropsLabelledBy,
+      onBlur: startInputPropsOnBlur,
+      onChange: startInputPropsOnChange,
+      onKeyDown: startInputPropsOnKeyDown,
+      onFocus: startInputPropsOnFocus,
+      required: startInputPropsRequired,
+      ...restStartInputProps
+    } = startInputProps;
+    const startInputIsRequired = formFieldRequired ? ["required", "asterisk"].includes(formFieldRequired) : startInputPropsRequired;
+    const {
+      "aria-describedby": endInputPropsDescribedBy,
+      "aria-labelledby": endInputPropsLabelledBy,
+      onBlur: endInputPropsOnBlur,
+      onChange: endInputPropsOnChange,
+      onKeyDown: endInputPropsOnKeyDown,
+      onFocus: endInputPropsOnFocus,
+      required: endInputPropsRequired,
+      ...restEndInputProps
+    } = endInputProps;
+    const endInputIsRequired = formFieldRequired ? ["required", "asterisk"].includes(formFieldRequired) : endInputPropsRequired;
+    const apply = (event) => {
+      var _a, _b;
+      const { date: startDate = void 0, ...startDateParseDetails } = parseDateValue(dateValue == null ? void 0 : dateValue.startDate, "start" /* START */) ?? {};
+      const { date: endDate = void 0, ...endDateParseDetails } = parseDateValue(dateValue == null ? void 0 : dateValue.endDate, "end" /* END */) ?? {};
+      const updatedDateRange = {
+        startDate: ((_a = dateValue == null ? void 0 : dateValue.startDate) == null ? void 0 : _a.length) ? startDate : null,
+        endDate: ((_b = dateValue == null ? void 0 : dateValue.endDate) == null ? void 0 : _b.length) ? endDate : null
+      };
+      if (dateAdapter.isValid(startDate)) {
+        updatedDateRange.startDate = dateAdapter.setTimezone(
+          startDate,
+          timezone
+        );
+        if (preservedTime.current.startTime) {
+          updatedDateRange.startDate = dateAdapter.set(
+            updatedDateRange.startDate,
+            preservedTime.current.startTime
+          );
+        }
+      }
+      if (dateAdapter.isValid(endDate)) {
+        updatedDateRange.endDate = dateAdapter.setTimezone(endDate, timezone);
+        if (preservedTime.current.endTime) {
+          updatedDateRange.endDate = dateAdapter.set(
+            updatedDateRange.endDate,
+            preservedTime.current.endTime
+          );
+        }
+      }
+      const updatedDateValue = setDateValueFromDate(updatedDateRange);
+      setDate(updatedDateRange);
+      if (lastAppliedValue.current.startDate !== updatedDateValue.startDate || lastAppliedValue.current.endDate !== updatedDateValue.endDate) {
+        onDateChange == null ? void 0 : onDateChange(event, updatedDateRange, {
+          startDate: startDateParseDetails,
+          endDate: endDateParseDetails
+        });
+        onDateValueChange == null ? void 0 : onDateValueChange(event, updatedDateValue);
+        lastAppliedValue.current = updatedDateValue;
+      }
+    };
+    const handleStartInputChange = (event) => {
+      const newDateValue = { ...dateValue, startDate: event.target.value };
+      setDateValue(newDateValue);
+      startInputPropsOnChange == null ? void 0 : startInputPropsOnChange(event);
+      onChange == null ? void 0 : onChange(event);
+      onDateValueChange == null ? void 0 : onDateValueChange(event, newDateValue);
+    };
+    const handleEndInputChange = (event) => {
+      const newDateValue = { ...dateValue, endDate: event.target.value };
+      setDateValue(newDateValue);
+      endInputPropsOnChange == null ? void 0 : endInputPropsOnChange(event);
+      onChange == null ? void 0 : onChange(event);
+      onDateValueChange == null ? void 0 : onDateValueChange(event, newDateValue);
+    };
+    const handleStartInputFocus = (event) => {
+      setFocused(true);
+      startInputPropsOnFocus == null ? void 0 : startInputPropsOnFocus(event);
+    };
+    const handleEndInputFocus = (event) => {
+      setFocused(true);
+      endInputPropsOnFocus == null ? void 0 : endInputPropsOnFocus(event);
+    };
+    const handleStartInputBlur = (event) => {
+      setFocused(false);
+      apply(event);
+      startInputPropsOnBlur == null ? void 0 : startInputPropsOnBlur(event);
+    };
+    const handleEndInputBlur = (event) => {
+      setFocused(false);
+      apply(event);
+      endInputPropsOnBlur == null ? void 0 : endInputPropsOnBlur(event);
+    };
+    const handleStartInputKeyDown = (event) => {
+      if (event.key === "Enter") {
+        apply(event);
+      }
+      startInputPropsOnKeyDown == null ? void 0 : startInputPropsOnKeyDown(event);
+    };
+    const handleEndInputKeyDown = (event) => {
+      if (event.key === "Enter") {
+        apply(event);
+      }
+      endInputPropsOnKeyDown == null ? void 0 : endInputPropsOnKeyDown(event);
+    };
+    const handleWrapperClick = (event) => {
+      if (event.target === wrapperRef.current) {
+        const input = startInputRef.current;
+        input == null ? void 0 : input.focus();
+        input == null ? void 0 : input.setSelectionRange(input.value.length, input.value.length);
+      }
+      onClick == null ? void 0 : onClick(event);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: clsx.clsx(
+          withBaseName(),
+          withBaseName(variant),
+          {
+            [withBaseName("focused")]: !isDisabled && focused,
+            [withBaseName("disabled")]: isDisabled,
+            [withBaseName("readOnly")]: isReadOnly,
+            [withBaseName(validationStatus ?? "")]: validationStatus,
+            [withBaseName("bordered")]: bordered
+          },
+          className
+        ),
+        ref: handleWrapperRef,
+        onClick: handleWrapperClick,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              autoComplete: "off",
+              "aria-describedby": clsx.clsx(
+                formFieldDescribedBy,
+                startInputPropsDescribedBy
+              ),
+              "aria-labelledby": clsx.clsx(
+                formFieldLabelledBy,
+                startInputPropsLabelledBy,
+                startInputID
+              ),
+              "aria-label": clsx.clsx("Start date", ariaLabel),
+              id: startInputID,
+              className: withBaseName("input"),
+              disabled: isDisabled,
+              readOnly: isReadOnly,
+              ref: handleStartInputRef,
+              tabIndex: isDisabled ? -1 : 0,
+              placeholder,
+              value: isReadOnly && !(dateValue == null ? void 0 : dateValue.startDate) ? emptyReadOnlyMarker : dateValue.startDate ?? dateAdapter.format(void 0, format),
+              ...restStartInputProps,
+              onBlur: handleStartInputBlur,
+              onChange: handleStartInputChange,
+              onKeyDown: handleStartInputKeyDown,
+              onFocus: !isDisabled ? handleStartInputFocus : void 0,
+              required: startInputIsRequired
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: withBaseName("dash"), children: "-" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              autoComplete: "off",
+              "aria-describedby": clsx.clsx(
+                formFieldDescribedBy,
+                endInputPropsDescribedBy
+              ),
+              "aria-labelledby": clsx.clsx(
+                formFieldLabelledBy,
+                endInputPropsLabelledBy,
+                endInputID
+              ),
+              "aria-label": clsx.clsx("End date", ariaLabel),
+              id: endInputID,
+              className: withBaseName("input"),
+              disabled: isDisabled,
+              readOnly: isReadOnly,
+              ref: handleEndInputRef,
+              tabIndex: isDisabled ? -1 : 0,
+              placeholder,
+              value: isReadOnly && !(dateValue == null ? void 0 : dateValue.endDate) ? emptyReadOnlyMarker : dateValue.endDate ?? dateAdapter.format(void 0, format),
+              ...restEndInputProps,
+              onBlur: handleEndInputBlur,
+              onChange: handleEndInputChange,
+              onKeyDown: handleEndInputKeyDown,
+              onFocus: !isDisabled ? handleEndInputFocus : void 0,
+              required: endInputIsRequired
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: withBaseName("endAdornmentContainer"), children: [
+            !isDisabled && !isReadOnly && validationStatus && /* @__PURE__ */ jsxRuntime.jsx(core.StatusAdornment, { status: validationStatus }),
+            endAdornment
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("activationIndicator") })
+        ]
+      }
+    );
+  }
+);
+
+exports.DateInputRange = DateInputRange;
+exports.DateParserField = DateParserField;
+//# sourceMappingURL=DateInputRange.js.map