@salt-ds/lab 1.0.0-alpha.0 → 1.0.0-alpha.1

package/dist-es/packages/lab/src/banner/Banner.js

@@ -3,7 +3,7 @@ import { forwardRef, useState, useEffect } from 'react';
 import { makePrefixer, useAriaAnnouncer, useForkRef, StatusIndicator, Link, Button } from '@salt-ds/core';
 import getInnerText from './internal/getInnerText.js';
 import { CloseIcon } from '@salt-ds/icons';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import './Banner.css.js';
 
 const withBaseName = makePrefixer("saltBanner");
@@ -34,17 +34,17 @@ const Banner = forwardRef(function Banner2({
   }, [announce, disableAnnouncer, containerNode, announcementProp]);
   const getIconProps = ({ className: className2, ...restProps } = {}) => {
     return {
-      className: cx(withBaseName("icon"), status, className2),
+      className: clsx(withBaseName("icon"), status, className2),
       ...restProps
     };
   };
   const getLabelProps = ({ className: className2, ...restProps } = {}) => ({
-    className: cx(withBaseName("label"), status, className2),
+    className: clsx(withBaseName("label"), status, className2),
     ...restProps
   });
   const getLinkProps = ({ className: className2, href, ...restProps } = {}) => ({
     children: "Link",
-    className: cx(withBaseName("link"), status, className2),
+    className: clsx(withBaseName("link"), status, className2),
     href,
     ...restProps
   });
@@ -81,7 +81,7 @@ const Banner = forwardRef(function Banner2({
     contentElement = render(getStateAndPropsGetters());
   }
   return /* @__PURE__ */ jsxs("div", {
-    className: cx(withBaseName(), withBaseName(status), className, {
+    className: clsx(withBaseName(), withBaseName(status), className, {
       [withBaseName("emphasize")]: emphasize
     }),
     ref: handleRef,

package/dist-es/packages/lab/src/banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../src/banner/Banner.tsx"],"sourcesContent":["import {\n  ComponentType,\n  forwardRef,\n  HTMLAttributes,\n  MouseEvent,\n  ReactNode,\n  useEffect,\n  useState,\n  Ref,\n} from \"react\";\nimport {\n  Button,\n  ButtonProps,\n  Link,\n  LinkProps,\n  makePrefixer,\n  StatusIndicator,\n  useAriaAnnouncer,\n  useForkRef,\n  ValidationStatus,\n} from \"@salt-ds/core\";\n\nimport getInnerText from \"./internal/getInnerText\";\nimport { CloseIcon, IconProps } from \"@salt-ds/icons\";\nimport cx from \"classnames\";\n\nimport \"./Banner.css\";\n\nexport type BannerStatus = ValidationStatus;\n\nexport type LabelProps = { className?: string };\n\ntype StateAndPropsGetterFunction<TInjectedProps> = <T>(\n  props?: T\n) => TInjectedProps;\n\nexport interface GetStateAndPropGetters {\n  Icon: ComponentType<IconProps>;\n  getIconProps: StateAndPropsGetterFunction<IconProps>;\n  getLabelProps: StateAndPropsGetterFunction<LabelProps>;\n  getLinkProps: StateAndPropsGetterFunction<LinkProps>;\n}\n\nexport interface BannerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * THe props to be passed to the close button\n   */\n  CloseButtonProps?: ButtonProps;\n  /**\n   * Props to pass to Link, Link will not be rendered if this is undefined\n   */\n  LinkProps?: LinkProps;\n  /**\n   * Announcement message for screen reader 250ms after the banner is mounted.\n   */\n  announcement?: string;\n  /**\n   * close button ref\n   */\n  closeRef?: Ref<HTMLButtonElement>;\n  /**\n   * If true, the built-in ARIA announcer will be disabled\n   */\n  disableAnnouncer?: boolean;\n  /**\n   * Emphasize the styling by applying a background color: defaults to false\n   */\n  emphasize?: boolean;\n  /**\n   * onClose callback when the close icon is clicked, the dismiss button will not be rendered if this is\n   * not defined\n   */\n  onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * render props callback (if children callback not supplied)\n   */\n  render?: (props: GetStateAndPropGetters) => ReactNode;\n  /**\n   *  A string to determine the current state of the Banner\n   */\n  status?: BannerStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltBanner\");\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(\n  {\n    CloseButtonProps,\n    LinkProps,\n    announcement: announcementProp,\n    children,\n    className,\n    closeRef,\n    disableAnnouncer = false,\n    emphasize = false,\n    onClose,\n    render,\n    status = \"info\",\n    ...rest\n  },\n  ref\n) {\n  const { announce } = useAriaAnnouncer();\n\n  const [containerNode, setContainerNode] = useState<HTMLDivElement | null>(\n    null\n  );\n\n  const handleRef = useForkRef<HTMLDivElement>(setContainerNode, ref);\n\n  useEffect(() => {\n    if (!disableAnnouncer && containerNode) {\n      const announcement = announcementProp || getInnerText(containerNode);\n      announce(announcement, 250);\n    }\n  }, [announce, disableAnnouncer, containerNode, announcementProp]);\n\n  const getIconProps = ({ className, ...restProps }: IconProps = {}) => {\n    return {\n      className: cx(withBaseName(\"icon\"), status, className),\n      ...restProps,\n    };\n  };\n\n  const getLabelProps = ({ className, ...restProps }: LabelProps = {}) => ({\n    className: cx(withBaseName(\"label\"), status, className),\n    ...restProps,\n  });\n\n  const getLinkProps = ({ className, href, ...restProps }: LinkProps = {}) => ({\n    children: \"Link\",\n    className: cx(withBaseName(\"link\"), status, className),\n    href,\n    ...restProps,\n  });\n\n  const getStateAndPropsGetters = (): GetStateAndPropGetters => ({\n    Icon: (props) => <StatusIndicator {...props} status={status} />,\n    getIconProps,\n    getLabelProps,\n    getLinkProps,\n  });\n\n  let contentElement;\n  if (!render) {\n    contentElement = (\n      <>\n        <StatusIndicator {...getIconProps()} status={status}></StatusIndicator>\n        <span {...getLabelProps()}>\n          {children} {LinkProps && <Link {...getLinkProps(LinkProps)} />}\n        </span>\n      </>\n    );\n  } else {\n    contentElement = render(getStateAndPropsGetters());\n  }\n\n  return (\n    <div\n      className={cx(withBaseName(), withBaseName(status), className, {\n        [withBaseName(\"emphasize\")]: emphasize,\n      })}\n      ref={handleRef}\n      {...rest}\n    >\n      {contentElement}\n      {onClose && (\n        <Button\n          aria-label=\"close\"\n          {...CloseButtonProps}\n          className={withBaseName(\"closeButton\")}\n          onClick={onClose}\n          ref={closeRef}\n          variant=\"secondary\"\n        >\n          <CloseIcon />\n        </Button>\n      )}\n    </div>\n  );\n});\n"],"names":["Banner","LinkProps","className"],"mappings":"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"}
+{"version":3,"file":"Banner.js","sources":["../src/banner/Banner.tsx"],"sourcesContent":["import {\n  ComponentType,\n  forwardRef,\n  HTMLAttributes,\n  MouseEvent,\n  ReactNode,\n  useEffect,\n  useState,\n  Ref,\n} from \"react\";\nimport {\n  Button,\n  ButtonProps,\n  Link,\n  LinkProps,\n  makePrefixer,\n  StatusIndicator,\n  useAriaAnnouncer,\n  useForkRef,\n  ValidationStatus,\n} from \"@salt-ds/core\";\n\nimport getInnerText from \"./internal/getInnerText\";\nimport { CloseIcon, IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\n\nimport \"./Banner.css\";\n\nexport type BannerStatus = ValidationStatus;\n\nexport type LabelProps = { className?: string };\n\ntype StateAndPropsGetterFunction<TInjectedProps> = <T>(\n  props?: T\n) => TInjectedProps;\n\nexport interface GetStateAndPropGetters {\n  Icon: ComponentType<IconProps>;\n  getIconProps: StateAndPropsGetterFunction<IconProps>;\n  getLabelProps: StateAndPropsGetterFunction<LabelProps>;\n  getLinkProps: StateAndPropsGetterFunction<LinkProps>;\n}\n\nexport interface BannerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * THe props to be passed to the close button\n   */\n  CloseButtonProps?: ButtonProps;\n  /**\n   * Props to pass to Link, Link will not be rendered if this is undefined\n   */\n  LinkProps?: LinkProps;\n  /**\n   * Announcement message for screen reader 250ms after the banner is mounted.\n   */\n  announcement?: string;\n  /**\n   * close button ref\n   */\n  closeRef?: Ref<HTMLButtonElement>;\n  /**\n   * If true, the built-in ARIA announcer will be disabled\n   */\n  disableAnnouncer?: boolean;\n  /**\n   * Emphasize the styling by applying a background color: defaults to false\n   */\n  emphasize?: boolean;\n  /**\n   * onClose callback when the close icon is clicked, the dismiss button will not be rendered if this is\n   * not defined\n   */\n  onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * render props callback (if children callback not supplied)\n   */\n  render?: (props: GetStateAndPropGetters) => ReactNode;\n  /**\n   *  A string to determine the current state of the Banner\n   */\n  status?: BannerStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltBanner\");\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(\n  {\n    CloseButtonProps,\n    LinkProps,\n    announcement: announcementProp,\n    children,\n    className,\n    closeRef,\n    disableAnnouncer = false,\n    emphasize = false,\n    onClose,\n    render,\n    status = \"info\",\n    ...rest\n  },\n  ref\n) {\n  const { announce } = useAriaAnnouncer();\n\n  const [containerNode, setContainerNode] = useState<HTMLDivElement | null>(\n    null\n  );\n\n  const handleRef = useForkRef<HTMLDivElement>(setContainerNode, ref);\n\n  useEffect(() => {\n    if (!disableAnnouncer && containerNode) {\n      const announcement = announcementProp || getInnerText(containerNode);\n      announce(announcement, 250);\n    }\n  }, [announce, disableAnnouncer, containerNode, announcementProp]);\n\n  const getIconProps = ({ className, ...restProps }: IconProps = {}) => {\n    return {\n      className: clsx(withBaseName(\"icon\"), status, className),\n      ...restProps,\n    };\n  };\n\n  const getLabelProps = ({ className, ...restProps }: LabelProps = {}) => ({\n    className: clsx(withBaseName(\"label\"), status, className),\n    ...restProps,\n  });\n\n  const getLinkProps = ({ className, href, ...restProps }: LinkProps = {}) => ({\n    children: \"Link\",\n    className: clsx(withBaseName(\"link\"), status, className),\n    href,\n    ...restProps,\n  });\n\n  const getStateAndPropsGetters = (): GetStateAndPropGetters => ({\n    Icon: (props) => <StatusIndicator {...props} status={status} />,\n    getIconProps,\n    getLabelProps,\n    getLinkProps,\n  });\n\n  let contentElement;\n  if (!render) {\n    contentElement = (\n      <>\n        <StatusIndicator {...getIconProps()} status={status}></StatusIndicator>\n        <span {...getLabelProps()}>\n          {children} {LinkProps && <Link {...getLinkProps(LinkProps)} />}\n        </span>\n      </>\n    );\n  } else {\n    contentElement = render(getStateAndPropsGetters());\n  }\n\n  return (\n    <div\n      className={clsx(withBaseName(), withBaseName(status), className, {\n        [withBaseName(\"emphasize\")]: emphasize,\n      })}\n      ref={handleRef}\n      {...rest}\n    >\n      {contentElement}\n      {onClose && (\n        <Button\n          aria-label=\"close\"\n          {...CloseButtonProps}\n          className={withBaseName(\"closeButton\")}\n          onClick={onClose}\n          ref={closeRef}\n          variant=\"secondary\"\n        >\n          <CloseIcon />\n        </Button>\n      )}\n    </div>\n  );\n});\n"],"names":["Banner","LinkProps","className"],"mappings":";;;;;;;;AAmFA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA,CAAA;AAEjC,MAAA,MAAA,GAAS,UAAwC,CAAA,SAASA,OACrE,CAAA;AAAA,EACE,gBAAA;AAAA,EACA,SAAAC,EAAAA,UAAAA;AAAA,EACA,YAAc,EAAA,gBAAA;AAAA,EACd,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,gBAAmB,GAAA,KAAA;AAAA,EACnB,SAAY,GAAA,KAAA;AAAA,EACZ,OAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAS,GAAA,MAAA;AAAA,EACN,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,gBAAiB,EAAA,CAAA;AAEtC,EAAM,MAAA,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAA,QAAA;AAAA,IACxC,IAAA;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,SAAA,GAAY,UAA2B,CAAA,gBAAA,EAAkB,GAAG,CAAA,CAAA;AAElE,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,CAAC,oBAAoB,aAAe,EAAA;AACtC,MAAM,MAAA,YAAA,GAAe,gBAAoB,IAAA,YAAA,CAAa,aAAa,CAAA,CAAA;AACnE,MAAA,QAAA,CAAS,cAAc,GAAG,CAAA,CAAA;AAAA,KAC5B;AAAA,KACC,CAAC,QAAA,EAAU,gBAAkB,EAAA,aAAA,EAAe,gBAAgB,CAAC,CAAA,CAAA;AAEhE,EAAM,MAAA,YAAA,GAAe,CAAC,EAAE,SAAA,EAAAC,eAAc,SAAU,EAAA,GAAe,EAAO,KAAA;AACpE,IAAO,OAAA;AAAA,MACL,WAAW,IAAK,CAAA,YAAA,CAAa,MAAM,CAAA,EAAG,QAAQA,UAAS,CAAA;AAAA,MACvD,GAAG,SAAA;AAAA,KACL,CAAA;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,EAAE,SAAA,EAAAA,eAAc,SAAU,EAAA,GAAgB,EAAQ,MAAA;AAAA,IACvE,WAAW,IAAK,CAAA,YAAA,CAAa,OAAO,CAAA,EAAG,QAAQA,UAAS,CAAA;AAAA,IACxD,GAAG,SAAA;AAAA,GACL,CAAA,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,EAAE,SAAA,EAAAA,YAAW,IAAS,EAAA,GAAA,SAAA,EAAyB,GAAA,EAAQ,MAAA;AAAA,IAC3E,QAAU,EAAA,MAAA;AAAA,IACV,WAAW,IAAK,CAAA,YAAA,CAAa,MAAM,CAAA,EAAG,QAAQA,UAAS,CAAA;AAAA,IACvD,IAAA;AAAA,IACA,GAAG,SAAA;AAAA,GACL,CAAA,CAAA;AAEA,EAAA,MAAM,0BAA0B,OAA+B;AAAA,IAC7D,IAAA,EAAM,CAAC,KAAA,qBAAW,GAAA,CAAA,eAAA,EAAA;AAAA,MAAiB,GAAG,KAAA;AAAA,MAAO,MAAA;AAAA,KAAgB,CAAA;AAAA,IAC7D,YAAA;AAAA,IACA,aAAA;AAAA,IACA,YAAA;AAAA,GACF,CAAA,CAAA;AAEA,EAAI,IAAA,cAAA,CAAA;AACJ,EAAA,IAAI,CAAC,MAAQ,EAAA;AACX,IACE,cAAA,mBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,eAAA,EAAA;AAAA,UAAiB,GAAG,YAAa,EAAA;AAAA,UAAG,MAAA;AAAA,SAAgB,CAAA;AAAA,wBACpD,IAAA,CAAA,MAAA,EAAA;AAAA,UAAM,GAAG,aAAc,EAAA;AAAA,UACrB,QAAA,EAAA;AAAA,YAAA,QAAA;AAAA,YAAS,GAAA;AAAA,YAAED,8BAAc,GAAA,CAAA,IAAA,EAAA;AAAA,cAAM,GAAG,aAAaA,UAAS,CAAA;AAAA,aAAG,CAAA;AAAA,WAAA;AAAA,SAC9D,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEG,MAAA;AACL,IAAiB,cAAA,GAAA,MAAA,CAAO,yBAAyB,CAAA,CAAA;AAAA,GACnD;AAEA,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAW,EAAA;AAAA,MAC/D,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,SAAA;AAAA,KAC9B,CAAA;AAAA,IACD,GAAK,EAAA,SAAA;AAAA,IACJ,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,cAAA;AAAA,MACA,2BACE,GAAA,CAAA,MAAA,EAAA;AAAA,QACC,YAAW,EAAA,OAAA;AAAA,QACV,GAAG,gBAAA;AAAA,QACJ,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,QACrC,OAAS,EAAA,OAAA;AAAA,QACT,GAAK,EAAA,QAAA;AAAA,QACL,OAAQ,EAAA,WAAA;AAAA,QAER,8BAAC,SAAU,EAAA,EAAA,CAAA;AAAA,OACb,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/breadcrumbs/Breadcrumb.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { makePrefixer, Text, Link } from '@salt-ds/core';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, Children } from 'react';
 import { useBreadcrumbsContext } from './internal/BreadcrumbsContext.js';
 import './Breadcrumb.css.js';
@@ -26,7 +26,7 @@ const Breadcrumb = forwardRef(
     const hasOnlyIcon = Icon && !hasChildren;
     const getDefaultBreadcrumb = () => isCurrentLevel ? /* @__PURE__ */ jsx(Text, {
       maxRows: 1,
-      className: cx(
+      className: clsx(
         withBaseName(),
         className,
         withBaseName("currentLevel")
@@ -34,7 +34,7 @@ const Breadcrumb = forwardRef(
       styleAs: "label",
       children
     }) : /* @__PURE__ */ jsxs("div", {
-      className: cx(
+      className: clsx(
         withBaseName(),
         className,
         {
@@ -67,7 +67,7 @@ const Breadcrumb = forwardRef(
         minWidth: minWidth != null ? minWidth : itemsMinWidth,
         maxWidth: maxWidth != null ? maxWidth : itemsMaxWidth
       },
-      className: cx(liClass, containerClassName),
+      className: clsx(liClass, containerClassName),
       ...containerPropsRest,
       children: content
     });

package/dist-es/packages/lab/src/breadcrumbs/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","sources":["../src/breadcrumbs/Breadcrumb.tsx"],"sourcesContent":["import { Link, makePrefixer, Text } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport classnames from \"classnames\";\nimport { Children, forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { useBreadcrumbsContext } from \"./internal/BreadcrumbsContext\";\nimport { TooltipProps } from \"../tooltip\";\n\nimport \"./Breadcrumb.css\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumb\");\n\nexport interface BreadcrumbProps {\n  children?: ReactNode;\n  ContainerProps?: HTMLAttributes<HTMLLIElement>;\n  tooltipText?: string;\n  tooltipProps?: TooltipProps;\n  className?: string;\n  href?: string;\n  isCurrentLevel?: boolean;\n  maxWidth?: number;\n  minWidth?: number;\n  onItemClick?: (item: any, event: any) => void; // TODO\n  overflowLabel?: string;\n  Icon?: React.ComponentType<IconProps>;\n}\n\nexport const Breadcrumb = forwardRef<HTMLLIElement, BreadcrumbProps>(\n  function Breadcrumb(\n    {\n      children,\n      ContainerProps = {},\n      tooltipText,\n      tooltipProps,\n      isCurrentLevel,\n      onItemClick,\n      overflowLabel,\n      maxWidth,\n      Icon,\n      minWidth,\n      className,\n      ...props\n    },\n    ref\n  ) {\n    const { itemsMaxWidth, itemsMinWidth, liClass } = useBreadcrumbsContext();\n\n    const hasChildren = Children.count(children) !== 0;\n    const hasOnlyIcon = Icon && !hasChildren;\n\n    const getDefaultBreadcrumb = () =>\n      isCurrentLevel ? (\n        <Text\n          maxRows={1}\n          className={classnames(\n            withBaseName(),\n            className,\n            withBaseName(\"currentLevel\")\n          )}\n          styleAs=\"label\"\n        >\n          {children}\n        </Text>\n      ) : (\n        <div\n          className={classnames(\n            withBaseName(),\n            className,\n            {\n              [withBaseName(\"justifyContentCenter\")]: hasOnlyIcon,\n            },\n            withBaseName(\"regular\")\n          )}\n        >\n          {Icon && <Icon className={withBaseName(\"icon\")} />}\n          {hasChildren && (\n            <Link maxRows={1} styleAs=\"label\" {...props}>\n              {children}\n            </Link>\n          )}\n        </div>\n      );\n\n    const content = getDefaultBreadcrumb();\n\n    const {\n      style: containerStyle,\n      className: containerClassName,\n      ...containerPropsRest\n    } = ContainerProps;\n\n    return (\n      <li\n        ref={ref}\n        style={{\n          ...containerStyle,\n          minWidth: minWidth ?? itemsMinWidth,\n          maxWidth: maxWidth ?? itemsMaxWidth,\n        }}\n        className={classnames(liClass, containerClassName)}\n        {...containerPropsRest}\n      >\n        {content}\n      </li>\n    );\n  }\n);\n"],"names":["Breadcrumb","classnames"],"mappings":";;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAiB3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,iBAAiB,EAAC;AAAA,IAClB,WAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,EAAE,aAAA,EAAe,aAAe,EAAA,OAAA,KAAY,qBAAsB,EAAA,CAAA;AAExE,IAAA,MAAM,WAAc,GAAA,QAAA,CAAS,KAAM,CAAA,QAAQ,CAAM,KAAA,CAAA,CAAA;AACjD,IAAM,MAAA,WAAA,GAAc,QAAQ,CAAC,WAAA,CAAA;AAE7B,IAAM,MAAA,oBAAA,GAAuB,MAC3B,cAAA,mBACG,GAAA,CAAA,IAAA,EAAA;AAAA,MACC,OAAS,EAAA,CAAA;AAAA,MACT,SAAW,EAAAC,EAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,SAAA;AAAA,QACA,aAAa,cAAc,CAAA;AAAA,OAC7B;AAAA,MACA,OAAQ,EAAA,OAAA;AAAA,MAEP,QAAA;AAAA,KACH,oBAEC,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAAA,EAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,SAAA;AAAA,QACA;AAAA,UACE,CAAC,YAAa,CAAA,sBAAsB,CAAI,GAAA,WAAA;AAAA,SAC1C;AAAA,QACA,aAAa,SAAS,CAAA;AAAA,OACxB;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA,oBAAS,GAAA,CAAA,IAAA,EAAA;AAAA,UAAK,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,SAAG,CAAA;AAAA,QAC/C,+BACE,GAAA,CAAA,IAAA,EAAA;AAAA,UAAK,OAAS,EAAA,CAAA;AAAA,UAAG,OAAQ,EAAA,OAAA;AAAA,UAAS,GAAG,KAAA;AAAA,UACnC,QAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAGJ,IAAA,MAAM,UAAU,oBAAqB,EAAA,CAAA;AAErC,IAAM,MAAA;AAAA,MACJ,KAAO,EAAA,cAAA;AAAA,MACP,SAAW,EAAA,kBAAA;AAAA,MACR,GAAA,kBAAA;AAAA,KACD,GAAA,cAAA,CAAA;AAEJ,IAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACL,GAAG,cAAA;AAAA,QACH,UAAU,QAAY,IAAA,IAAA,GAAA,QAAA,GAAA,aAAA;AAAA,QACtB,UAAU,QAAY,IAAA,IAAA,GAAA,QAAA,GAAA,aAAA;AAAA,OACxB;AAAA,MACA,SAAA,EAAWA,EAAW,CAAA,OAAA,EAAS,kBAAkB,CAAA;AAAA,MAChD,GAAG,kBAAA;AAAA,MAEH,QAAA,EAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"Breadcrumb.js","sources":["../src/breadcrumbs/Breadcrumb.tsx"],"sourcesContent":["import { Link, makePrefixer, Text } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { Children, forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { useBreadcrumbsContext } from \"./internal/BreadcrumbsContext\";\nimport { TooltipProps } from \"../tooltip\";\n\nimport \"./Breadcrumb.css\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumb\");\n\nexport interface BreadcrumbProps {\n  children?: ReactNode;\n  ContainerProps?: HTMLAttributes<HTMLLIElement>;\n  tooltipText?: string;\n  tooltipProps?: TooltipProps;\n  className?: string;\n  href?: string;\n  isCurrentLevel?: boolean;\n  maxWidth?: number;\n  minWidth?: number;\n  onItemClick?: (item: any, event: any) => void; // TODO\n  overflowLabel?: string;\n  Icon?: React.ComponentType<IconProps>;\n}\n\nexport const Breadcrumb = forwardRef<HTMLLIElement, BreadcrumbProps>(\n  function Breadcrumb(\n    {\n      children,\n      ContainerProps = {},\n      tooltipText,\n      tooltipProps,\n      isCurrentLevel,\n      onItemClick,\n      overflowLabel,\n      maxWidth,\n      Icon,\n      minWidth,\n      className,\n      ...props\n    },\n    ref\n  ) {\n    const { itemsMaxWidth, itemsMinWidth, liClass } = useBreadcrumbsContext();\n\n    const hasChildren = Children.count(children) !== 0;\n    const hasOnlyIcon = Icon && !hasChildren;\n\n    const getDefaultBreadcrumb = () =>\n      isCurrentLevel ? (\n        <Text\n          maxRows={1}\n          className={clsx(\n            withBaseName(),\n            className,\n            withBaseName(\"currentLevel\")\n          )}\n          styleAs=\"label\"\n        >\n          {children}\n        </Text>\n      ) : (\n        <div\n          className={clsx(\n            withBaseName(),\n            className,\n            {\n              [withBaseName(\"justifyContentCenter\")]: hasOnlyIcon,\n            },\n            withBaseName(\"regular\")\n          )}\n        >\n          {Icon && <Icon className={withBaseName(\"icon\")} />}\n          {hasChildren && (\n            <Link maxRows={1} styleAs=\"label\" {...props}>\n              {children}\n            </Link>\n          )}\n        </div>\n      );\n\n    const content = getDefaultBreadcrumb();\n\n    const {\n      style: containerStyle,\n      className: containerClassName,\n      ...containerPropsRest\n    } = ContainerProps;\n\n    return (\n      <li\n        ref={ref}\n        style={{\n          ...containerStyle,\n          minWidth: minWidth ?? itemsMinWidth,\n          maxWidth: maxWidth ?? itemsMaxWidth,\n        }}\n        className={clsx(liClass, containerClassName)}\n        {...containerPropsRest}\n      >\n        {content}\n      </li>\n    );\n  }\n);\n"],"names":["Breadcrumb"],"mappings":";;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAiB3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,iBAAiB,EAAC;AAAA,IAClB,WAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,EAAE,aAAA,EAAe,aAAe,EAAA,OAAA,KAAY,qBAAsB,EAAA,CAAA;AAExE,IAAA,MAAM,WAAc,GAAA,QAAA,CAAS,KAAM,CAAA,QAAQ,CAAM,KAAA,CAAA,CAAA;AACjD,IAAM,MAAA,WAAA,GAAc,QAAQ,CAAC,WAAA,CAAA;AAE7B,IAAM,MAAA,oBAAA,GAAuB,MAC3B,cAAA,mBACG,GAAA,CAAA,IAAA,EAAA;AAAA,MACC,OAAS,EAAA,CAAA;AAAA,MACT,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,SAAA;AAAA,QACA,aAAa,cAAc,CAAA;AAAA,OAC7B;AAAA,MACA,OAAQ,EAAA,OAAA;AAAA,MAEP,QAAA;AAAA,KACH,oBAEC,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,SAAA;AAAA,QACA;AAAA,UACE,CAAC,YAAa,CAAA,sBAAsB,CAAI,GAAA,WAAA;AAAA,SAC1C;AAAA,QACA,aAAa,SAAS,CAAA;AAAA,OACxB;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA,oBAAS,GAAA,CAAA,IAAA,EAAA;AAAA,UAAK,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,SAAG,CAAA;AAAA,QAC/C,+BACE,GAAA,CAAA,IAAA,EAAA;AAAA,UAAK,OAAS,EAAA,CAAA;AAAA,UAAG,OAAQ,EAAA,OAAA;AAAA,UAAS,GAAG,KAAA;AAAA,UACnC,QAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAGJ,IAAA,MAAM,UAAU,oBAAqB,EAAA,CAAA;AAErC,IAAM,MAAA;AAAA,MACJ,KAAO,EAAA,cAAA;AAAA,MACP,SAAW,EAAA,kBAAA;AAAA,MACR,GAAA,kBAAA;AAAA,KACD,GAAA,cAAA,CAAA;AAEJ,IAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACL,GAAG,cAAA;AAAA,QACH,UAAU,QAAY,IAAA,IAAA,GAAA,QAAA,GAAA,aAAA;AAAA,QACtB,UAAU,QAAY,IAAA,IAAA,GAAA,QAAA,GAAA,aAAA;AAAA,OACxB;AAAA,MACA,SAAA,EAAW,IAAK,CAAA,OAAA,EAAS,kBAAkB,CAAA;AAAA,MAC1C,GAAG,kBAAA;AAAA,MAEH,QAAA,EAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/breadcrumbs/Breadcrumbs.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { makePrefixer } from '@salt-ds/core';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import React, { useMemo, isValidElement } from 'react';
 import { BreadcrumbsCollapsed } from './internal/BreadcrumbsCollapsed.js';
 import { BreadcrumbsContext } from './internal/BreadcrumbsContext.js';
@@ -99,12 +99,12 @@ const Breadcrumbs = React.forwardRef(
       value: breadcrumbsContext,
       children: /* @__PURE__ */ jsx("nav", {
         "aria-label": "Breadcrumb",
-        className: cx(withBaseName(), className),
+        className: clsx(withBaseName(), className),
         "data-testid": "breadcrumbs",
         ref,
         ...other,
         children: /* @__PURE__ */ jsx("ol", {
-          className: cx(withBaseName("ol"), {
+          className: clsx(withBaseName("ol"), {
             [withBaseName("ol-wrap")]: wrap
           }),
           children: insertSeparators(

package/dist-es/packages/lab/src/breadcrumbs/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","sources":["../src/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport classnames from \"classnames\";\nimport React, {\n  HTMLAttributes,\n  isValidElement,\n  ReactNode,\n  useMemo,\n} from \"react\";\nimport { BreadcrumbProps } from \"./Breadcrumb\";\nimport { BreadcrumbsCollapsed } from \"./internal/BreadcrumbsCollapsed\";\nimport { BreadcrumbsContext } from \"./internal/BreadcrumbsContext\";\nimport { BreadcrumbsSeparator } from \"./internal/BreadcrumbsSeparator\";\n\nimport \"./Breadcrumbs.css\";\n\nconst iconWidth = 12;\n\nconst withBaseName = makePrefixer(\"saltBreadcrumbs\");\n\nfunction insertSeparators(\n  items: ReactNode[],\n  className?: string,\n  separator?: ReactNode,\n  hideCurrentLevel?: boolean,\n  shouldRenderAllItems?: boolean,\n  itemsAfterCollapse?: number\n) {\n  return items.reduce((acc: ReactNode[], current: ReactNode, index: number) => {\n    if (index < items.length - 1) {\n      return acc.concat(\n        current,\n        <li aria-hidden className={className} key={`separator-${index}`}>\n          {separator}\n        </li>\n      );\n    } else {\n      const skipLastElement =\n        (hideCurrentLevel && shouldRenderAllItems) ||\n        (hideCurrentLevel && !shouldRenderAllItems && itemsAfterCollapse !== 0);\n      return skipLastElement ? acc : acc.concat(current);\n    }\n  }, []);\n}\n\nexport interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {\n  Menu?: any;\n  SeparatorProps?: IconProps;\n  hideCurrentLevel?: boolean;\n  itemsAfterCollapse?: number;\n  itemsBeforeCollapse?: number;\n  itemsMaxWidth?: number | string;\n  itemsMinWidth?: number | string;\n  maxItems?: number;\n  separator?: ReactNode;\n  wrap?: boolean;\n  className?: string;\n  children?: ReactNode;\n}\n\nexport const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(\n  function Breadcrumbs(props, ref) {\n    const {\n      children,\n      className,\n      itemsAfterCollapse = 1,\n      itemsBeforeCollapse = 1,\n      maxItems = 3,\n      separator: separatorProp,\n      hideCurrentLevel,\n      itemsMinWidth: itemsMinWidthProp,\n      itemsMaxWidth,\n      wrap,\n      Menu,\n      SeparatorProps = {},\n      ...other\n    } = props;\n\n    const itemsMinWidth =\n      itemsMinWidthProp != null ? itemsMinWidthProp : iconWidth;\n\n    const breadcrumbsContext = useMemo(\n      () => ({\n        wrap,\n        itemsMinWidth,\n        itemsMaxWidth,\n        liClass: withBaseName(\"li\"),\n      }),\n      [wrap, itemsMaxWidth, itemsMinWidth]\n    );\n\n    const separator = separatorProp || (\n      <BreadcrumbsSeparator {...SeparatorProps} />\n    );\n\n    const childrenArray = React.Children.toArray(children);\n    const shouldRenderAllItems =\n      wrap || maxItems == null || childrenArray.length <= maxItems;\n\n    const allItems = childrenArray\n      .filter(isValidElement)\n      .map((child, index) => {\n        const isLastChild = index === childrenArray.length - 1;\n\n        return React.cloneElement(child, {\n          isCurrentLevel: isLastChild,\n        } as BreadcrumbProps);\n      });\n\n    const renderItemsBeforeAndAfter = () => {\n      // This defends against someone passing weird input, to ensure that if all\n      // items would be shown anyway, we just show all items without the EllipsisItem\n      if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {\n        console.warn(\n          [\n            \"You have provided an invalid combination of properties to the Breadcrumbs.\",\n            `itemsAfterCollapse={${itemsAfterCollapse}} +itemsBeforeCollapse={${itemsBeforeCollapse}} >= maxItems={${maxItems}}`,\n          ].join(\"\\n\")\n        );\n        return allItems;\n      }\n\n      const hiddenItems = allItems.slice(\n        itemsBeforeCollapse,\n        allItems.length - itemsAfterCollapse\n      );\n      return [\n        ...allItems.slice(0, itemsBeforeCollapse),\n        <li className={withBaseName(\"li\")} key=\"breadcrumbs-collapsed\">\n          <BreadcrumbsCollapsed\n            accessibleText={`Breadcrumb levels ${itemsBeforeCollapse + 1} to ${\n              allItems.length - itemsAfterCollapse\n            }`}\n            className={withBaseName(\"overflowButton\")}\n          >\n            {hiddenItems}\n          </BreadcrumbsCollapsed>\n        </li>,\n        ...allItems.slice(\n          allItems.length - itemsAfterCollapse,\n          allItems.length\n        ),\n      ];\n    };\n\n    const itemsToRender = shouldRenderAllItems\n      ? allItems\n      : renderItemsBeforeAndAfter();\n    return (\n      <BreadcrumbsContext.Provider value={breadcrumbsContext}>\n        <nav\n          aria-label=\"Breadcrumb\"\n          className={classnames(withBaseName(), className)}\n          data-testid=\"breadcrumbs\"\n          ref={ref}\n          {...other}\n        >\n          <ol\n            className={classnames(withBaseName(\"ol\"), {\n              [withBaseName(\"ol-wrap\")]: wrap,\n            })}\n          >\n            {insertSeparators(\n              itemsToRender,\n              withBaseName(\"separator\"),\n              separator,\n              hideCurrentLevel,\n              shouldRenderAllItems,\n              itemsAfterCollapse\n            )}\n          </ol>\n        </nav>\n      </BreadcrumbsContext.Provider>\n    );\n  }\n);\n"],"names":["Breadcrumbs","classnames"],"mappings":"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"}
+{"version":3,"file":"Breadcrumbs.js","sources":["../src/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport React, {\n  HTMLAttributes,\n  isValidElement,\n  ReactNode,\n  useMemo,\n} from \"react\";\nimport { BreadcrumbProps } from \"./Breadcrumb\";\nimport { BreadcrumbsCollapsed } from \"./internal/BreadcrumbsCollapsed\";\nimport { BreadcrumbsContext } from \"./internal/BreadcrumbsContext\";\nimport { BreadcrumbsSeparator } from \"./internal/BreadcrumbsSeparator\";\n\nimport \"./Breadcrumbs.css\";\n\nconst iconWidth = 12;\n\nconst withBaseName = makePrefixer(\"saltBreadcrumbs\");\n\nfunction insertSeparators(\n  items: ReactNode[],\n  className?: string,\n  separator?: ReactNode,\n  hideCurrentLevel?: boolean,\n  shouldRenderAllItems?: boolean,\n  itemsAfterCollapse?: number\n) {\n  return items.reduce((acc: ReactNode[], current: ReactNode, index: number) => {\n    if (index < items.length - 1) {\n      return acc.concat(\n        current,\n        <li aria-hidden className={className} key={`separator-${index}`}>\n          {separator}\n        </li>\n      );\n    } else {\n      const skipLastElement =\n        (hideCurrentLevel && shouldRenderAllItems) ||\n        (hideCurrentLevel && !shouldRenderAllItems && itemsAfterCollapse !== 0);\n      return skipLastElement ? acc : acc.concat(current);\n    }\n  }, []);\n}\n\nexport interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {\n  Menu?: any;\n  SeparatorProps?: IconProps;\n  hideCurrentLevel?: boolean;\n  itemsAfterCollapse?: number;\n  itemsBeforeCollapse?: number;\n  itemsMaxWidth?: number | string;\n  itemsMinWidth?: number | string;\n  maxItems?: number;\n  separator?: ReactNode;\n  wrap?: boolean;\n  className?: string;\n  children?: ReactNode;\n}\n\nexport const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(\n  function Breadcrumbs(props, ref) {\n    const {\n      children,\n      className,\n      itemsAfterCollapse = 1,\n      itemsBeforeCollapse = 1,\n      maxItems = 3,\n      separator: separatorProp,\n      hideCurrentLevel,\n      itemsMinWidth: itemsMinWidthProp,\n      itemsMaxWidth,\n      wrap,\n      Menu,\n      SeparatorProps = {},\n      ...other\n    } = props;\n\n    const itemsMinWidth =\n      itemsMinWidthProp != null ? itemsMinWidthProp : iconWidth;\n\n    const breadcrumbsContext = useMemo(\n      () => ({\n        wrap,\n        itemsMinWidth,\n        itemsMaxWidth,\n        liClass: withBaseName(\"li\"),\n      }),\n      [wrap, itemsMaxWidth, itemsMinWidth]\n    );\n\n    const separator = separatorProp || (\n      <BreadcrumbsSeparator {...SeparatorProps} />\n    );\n\n    const childrenArray = React.Children.toArray(children);\n    const shouldRenderAllItems =\n      wrap || maxItems == null || childrenArray.length <= maxItems;\n\n    const allItems = childrenArray\n      .filter(isValidElement)\n      .map((child, index) => {\n        const isLastChild = index === childrenArray.length - 1;\n\n        return React.cloneElement(child, {\n          isCurrentLevel: isLastChild,\n        } as BreadcrumbProps);\n      });\n\n    const renderItemsBeforeAndAfter = () => {\n      // This defends against someone passing weird input, to ensure that if all\n      // items would be shown anyway, we just show all items without the EllipsisItem\n      if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {\n        console.warn(\n          [\n            \"You have provided an invalid combination of properties to the Breadcrumbs.\",\n            `itemsAfterCollapse={${itemsAfterCollapse}} +itemsBeforeCollapse={${itemsBeforeCollapse}} >= maxItems={${maxItems}}`,\n          ].join(\"\\n\")\n        );\n        return allItems;\n      }\n\n      const hiddenItems = allItems.slice(\n        itemsBeforeCollapse,\n        allItems.length - itemsAfterCollapse\n      );\n      return [\n        ...allItems.slice(0, itemsBeforeCollapse),\n        <li className={withBaseName(\"li\")} key=\"breadcrumbs-collapsed\">\n          <BreadcrumbsCollapsed\n            accessibleText={`Breadcrumb levels ${itemsBeforeCollapse + 1} to ${\n              allItems.length - itemsAfterCollapse\n            }`}\n            className={withBaseName(\"overflowButton\")}\n          >\n            {hiddenItems}\n          </BreadcrumbsCollapsed>\n        </li>,\n        ...allItems.slice(\n          allItems.length - itemsAfterCollapse,\n          allItems.length\n        ),\n      ];\n    };\n\n    const itemsToRender = shouldRenderAllItems\n      ? allItems\n      : renderItemsBeforeAndAfter();\n    return (\n      <BreadcrumbsContext.Provider value={breadcrumbsContext}>\n        <nav\n          aria-label=\"Breadcrumb\"\n          className={clsx(withBaseName(), className)}\n          data-testid=\"breadcrumbs\"\n          ref={ref}\n          {...other}\n        >\n          <ol\n            className={clsx(withBaseName(\"ol\"), {\n              [withBaseName(\"ol-wrap\")]: wrap,\n            })}\n          >\n            {insertSeparators(\n              itemsToRender,\n              withBaseName(\"separator\"),\n              separator,\n              hideCurrentLevel,\n              shouldRenderAllItems,\n              itemsAfterCollapse\n            )}\n          </ol>\n        </nav>\n      </BreadcrumbsContext.Provider>\n    );\n  }\n);\n"],"names":["Breadcrumbs"],"mappings":"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"}

package/dist-es/packages/lab/src/button-bar/ButtonBar.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, Children, useMemo } from 'react';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { ButtonBarContext } from './internal/ButtonBarContext.js';
 import { DescendantProvider } from './internal/DescendantContext.js';
 import { useDescendants } from './internal/useDescendants.js';
@@ -158,7 +158,7 @@ const ButtonBar = forwardRef(
         setItems: setChildrenData,
         children: /* @__PURE__ */ jsx("div", {
           "aria-label": "button bar",
-          className: cx(
+          className: clsx(
             withBaseName(),
             {
               [withBaseName("stacked")]: matches,

package/dist-es/packages/lab/src/button-bar/ButtonBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonBar.js","sources":["../src/button-bar/ButtonBar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  Children,\n  useMemo,\n  HTMLAttributes,\n  ReactNode,\n} from \"react\";\nimport cn from \"classnames\";\n\nimport { ButtonBarContext } from \"./internal/ButtonBarContext\";\nimport { DescendantProvider } from \"./internal/DescendantContext\";\nimport { useDescendants } from \"./internal/useDescendants\";\nimport { makePrefixer, ButtonVariant } from \"@salt-ds/core\";\n\nimport \"./ButtonBar.css\";\n\nexport type PartialRecord<K extends keyof any, T> = Partial<Record<K, T>>;\n\ntype ButtonBarOrderKey = \"order\" | \"alignLeftOrder\" | \"stackOrder\";\nexport type ButtonBarSortOrder = \"asc\" | \"desc\";\n\nexport const DefaultButtonsOrderByVariant: Record<\n  ButtonVariant,\n  Record<ButtonBarOrderKey, number>\n> = {\n  cta: {\n    order: 0,\n    alignLeftOrder: 1,\n    stackOrder: 2,\n  },\n  primary: {\n    order: 1,\n    alignLeftOrder: 2,\n    stackOrder: 1,\n  },\n  secondary: {\n    order: 2,\n    alignLeftOrder: 0,\n    stackOrder: 0,\n  },\n};\n\ntype OrderedButtonData = { variant?: ButtonVariant } & PartialRecord<\n  ButtonBarOrderKey,\n  number\n>;\n\nfunction getPriorityForButton(\n  item: OrderedButtonData,\n  field: ButtonBarOrderKey\n) {\n  const variant = item?.variant || \"primary\";\n  return item?.[field] ?? DefaultButtonsOrderByVariant[variant][field];\n}\nconst createComparatorForField = (\n  field: ButtonBarOrderKey,\n  sort: ButtonBarSortOrder,\n  alignLeft: boolean,\n  childrenData: Array<OrderedButtonData>\n) => {\n  let equalityResult: number;\n  if (field === \"order\" || field === \"stackOrder\") {\n    equalityResult = sort === \"asc\" ? 1 : 0;\n  } else {\n    equalityResult = alignLeft ? 1 : -1;\n  }\n\n  function createDescComparator(indexA: number, indexB: number) {\n    const priorityA = getPriorityForButton(childrenData[indexA], field);\n    const priorityB = getPriorityForButton(childrenData[indexB], field);\n    if (priorityA == null && priorityB == null) {\n      return 0;\n    }\n    if (priorityA == null) {\n      return 1;\n    }\n    if (priorityB == null) {\n      return -1;\n    }\n    if (priorityA === priorityB) {\n      return equalityResult;\n    }\n    return priorityB - priorityA;\n  }\n\n  function createAscComparator(indexA: number, indexB: number) {\n    return createDescComparator(indexA, indexB) * -1;\n  }\n\n  return sort === \"asc\" ? createAscComparator : createDescComparator;\n};\n\nfunction alignSecondaryChild(\n  orderedChildrenData: Array<OrderedButtonData & { index: number }>,\n  sortOrder: ButtonBarSortOrder,\n  alignLeft: boolean\n): { index?: number; align?: \"left\" | \"right\" } {\n  const noSecondaryChildren = { index: undefined, align: undefined };\n  if (sortOrder === \"asc\" || alignLeft) {\n    const firstSecondaryChildIndex = orderedChildrenData.findIndex(\n      (childData) => childData.variant === \"secondary\"\n    );\n\n    if (firstSecondaryChildIndex !== -1) {\n      const originalChildIndex =\n        orderedChildrenData[firstSecondaryChildIndex].index;\n      return { index: originalChildIndex, align: \"right\" };\n    } else {\n      return noSecondaryChildren;\n    }\n  } else {\n    let index = orderedChildrenData.length;\n    while (index--) {\n      if (orderedChildrenData[index].variant === \"secondary\") {\n        return { index: orderedChildrenData[index].index, align: \"left\" };\n      }\n    }\n    return noSecondaryChildren;\n  }\n}\n\nexport interface ButtonBarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * By default ButtonBar lays buttons from right to left horizontally ordering action buttons by order prop.\n   * Use this prop to lay button from left to right instead.\n   * Actions buttons will be ordered by alignLeftOrder prop.\n   */\n  alignLeft?: boolean;\n  /**\n   * A list of OrderButtons. Required to have some children.\n   */\n  children: ReactNode;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * By default ButtonBar aligns secondary buttons to the left while displayed horizontally\n   * and to the right while aligned left or sorting ascending.\n   * Use this prop to disable this behavior.\n   */\n  disableAutoAlignment?: boolean;\n  /**\n   * By default ButtonBar sorts buttons in descending order.\n   * Use this prop to change that when the button bar is NOT stacked and aligned left.\n   */\n  sortAlignLeft?: ButtonBarSortOrder;\n  /**\n   * By default ButtonBar sorts buttons in descending order.\n   * Use this prop to change that when the button bar is NOT stacked and NOT aligned left.\n   */\n  sortOrder?: ButtonBarSortOrder;\n  /**\n   * By default ButtonBar sorts buttons in descending order.\n   * Use this prop to change that when the button bar is stacked.\n   */\n  sortStackOrder?: ButtonBarSortOrder;\n  /**\n   * When the viewport is equal to or smaller than the breakpoint the buttons will be stacked vertically.\n   * Alternatively pass a screen width number in pixels.\n   * Use `0` to disable this feature. Defaults to 'xs'.\n   * Actions buttons will be ordered by stackOrder prop.\n   */\n  stackAtBreakpoint?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | number;\n}\n\nconst withBaseName = makePrefixer(\"saltButtonBar\");\n\nexport const ButtonBar = forwardRef<HTMLDivElement, ButtonBarProps>(\n  function ButtonBar(\n    {\n      alignLeft = false,\n      children: childrenProp,\n      className,\n      disableAutoAlignment,\n      sortAlignLeft = \"desc\",\n      sortOrder = \"desc\",\n      sortStackOrder = \"desc\",\n      stackAtBreakpoint = \"xs\",\n      ...rest\n    },\n    ref\n  ) {\n    const [childrenData, setChildrenData] = useDescendants<OrderedButtonData>();\n    // TODO: we need a mechanism to work with breakpoints.\n    const matches = false;\n\n    const childrenArray = Children.toArray(childrenProp);\n    const childrenIndexes = childrenArray.map((_, index) => index);\n    const stackOrderComparator = createComparatorForField(\n      \"stackOrder\",\n      sortStackOrder,\n      alignLeft,\n      childrenData\n    );\n    const orderComparator = createComparatorForField(\n      \"order\",\n      sortOrder,\n      alignLeft,\n      childrenData\n    );\n    const alignLeftComparator = createComparatorForField(\n      \"alignLeftOrder\",\n      sortAlignLeft,\n      alignLeft,\n      childrenData\n    );\n\n    let orderedChildrenIndexes: number[];\n\n    if (childrenData.length !== childrenIndexes.length) {\n      orderedChildrenIndexes = childrenIndexes;\n    } else {\n      orderedChildrenIndexes = matches\n        ? childrenIndexes.sort(stackOrderComparator)\n        : childrenIndexes.sort(\n            alignLeft ? alignLeftComparator : orderComparator\n          );\n    }\n\n    let secondaryChildAlignment: { index?: number; align?: \"left\" | \"right\" } =\n      {\n        index: undefined,\n        align: undefined,\n      };\n    if (!disableAutoAlignment) {\n      secondaryChildAlignment = alignSecondaryChild(\n        orderedChildrenIndexes.map((index) => ({\n          index,\n          ...childrenData[index],\n        })),\n        sortOrder,\n        alignLeft\n      );\n    }\n\n    const hasSecondaryButtons = childrenData.some(\n      (buttonData) => buttonData.variant === \"secondary\"\n    );\n\n    const orderedChildren = orderedChildrenIndexes.map(\n      (index) => childrenArray[index]\n    );\n\n    const buttonBarContextValue = useMemo(\n      () => ({\n        matches,\n        alignedIndex: secondaryChildAlignment.index,\n        align: secondaryChildAlignment.align,\n      }),\n      [matches, secondaryChildAlignment.align, secondaryChildAlignment.index]\n    );\n\n    return (\n      <ButtonBarContext.Provider value={buttonBarContextValue}>\n        <DescendantProvider items={childrenData} setItems={setChildrenData}>\n          <div\n            aria-label=\"button bar\"\n            className={cn(\n              withBaseName(),\n              {\n                [withBaseName(\"stacked\")]: matches,\n                [withBaseName(\"alignLeft\")]: alignLeft,\n                [withBaseName(\"autoAligning\")]:\n                  hasSecondaryButtons && !disableAutoAlignment,\n              },\n              className\n            )}\n            ref={ref}\n            role=\"region\"\n            {...rest}\n          >\n            {orderedChildren}\n          </div>\n        </DescendantProvider>\n      </ButtonBarContext.Provider>\n    );\n  }\n);\n"],"names":["ButtonBar","cn"],"mappings":"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"}
+{"version":3,"file":"ButtonBar.js","sources":["../src/button-bar/ButtonBar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  Children,\n  useMemo,\n  HTMLAttributes,\n  ReactNode,\n} from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { ButtonBarContext } from \"./internal/ButtonBarContext\";\nimport { DescendantProvider } from \"./internal/DescendantContext\";\nimport { useDescendants } from \"./internal/useDescendants\";\nimport { makePrefixer, ButtonVariant } from \"@salt-ds/core\";\n\nimport \"./ButtonBar.css\";\n\nexport type PartialRecord<K extends keyof any, T> = Partial<Record<K, T>>;\n\ntype ButtonBarOrderKey = \"order\" | \"alignLeftOrder\" | \"stackOrder\";\nexport type ButtonBarSortOrder = \"asc\" | \"desc\";\n\nexport const DefaultButtonsOrderByVariant: Record<\n  ButtonVariant,\n  Record<ButtonBarOrderKey, number>\n> = {\n  cta: {\n    order: 0,\n    alignLeftOrder: 1,\n    stackOrder: 2,\n  },\n  primary: {\n    order: 1,\n    alignLeftOrder: 2,\n    stackOrder: 1,\n  },\n  secondary: {\n    order: 2,\n    alignLeftOrder: 0,\n    stackOrder: 0,\n  },\n};\n\ntype OrderedButtonData = { variant?: ButtonVariant } & PartialRecord<\n  ButtonBarOrderKey,\n  number\n>;\n\nfunction getPriorityForButton(\n  item: OrderedButtonData,\n  field: ButtonBarOrderKey\n) {\n  const variant = item?.variant || \"primary\";\n  return item?.[field] ?? DefaultButtonsOrderByVariant[variant][field];\n}\nconst createComparatorForField = (\n  field: ButtonBarOrderKey,\n  sort: ButtonBarSortOrder,\n  alignLeft: boolean,\n  childrenData: Array<OrderedButtonData>\n) => {\n  let equalityResult: number;\n  if (field === \"order\" || field === \"stackOrder\") {\n    equalityResult = sort === \"asc\" ? 1 : 0;\n  } else {\n    equalityResult = alignLeft ? 1 : -1;\n  }\n\n  function createDescComparator(indexA: number, indexB: number) {\n    const priorityA = getPriorityForButton(childrenData[indexA], field);\n    const priorityB = getPriorityForButton(childrenData[indexB], field);\n    if (priorityA == null && priorityB == null) {\n      return 0;\n    }\n    if (priorityA == null) {\n      return 1;\n    }\n    if (priorityB == null) {\n      return -1;\n    }\n    if (priorityA === priorityB) {\n      return equalityResult;\n    }\n    return priorityB - priorityA;\n  }\n\n  function createAscComparator(indexA: number, indexB: number) {\n    return createDescComparator(indexA, indexB) * -1;\n  }\n\n  return sort === \"asc\" ? createAscComparator : createDescComparator;\n};\n\nfunction alignSecondaryChild(\n  orderedChildrenData: Array<OrderedButtonData & { index: number }>,\n  sortOrder: ButtonBarSortOrder,\n  alignLeft: boolean\n): { index?: number; align?: \"left\" | \"right\" } {\n  const noSecondaryChildren = { index: undefined, align: undefined };\n  if (sortOrder === \"asc\" || alignLeft) {\n    const firstSecondaryChildIndex = orderedChildrenData.findIndex(\n      (childData) => childData.variant === \"secondary\"\n    );\n\n    if (firstSecondaryChildIndex !== -1) {\n      const originalChildIndex =\n        orderedChildrenData[firstSecondaryChildIndex].index;\n      return { index: originalChildIndex, align: \"right\" };\n    } else {\n      return noSecondaryChildren;\n    }\n  } else {\n    let index = orderedChildrenData.length;\n    while (index--) {\n      if (orderedChildrenData[index].variant === \"secondary\") {\n        return { index: orderedChildrenData[index].index, align: \"left\" };\n      }\n    }\n    return noSecondaryChildren;\n  }\n}\n\nexport interface ButtonBarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * By default ButtonBar lays buttons from right to left horizontally ordering action buttons by order prop.\n   * Use this prop to lay button from left to right instead.\n   * Actions buttons will be ordered by alignLeftOrder prop.\n   */\n  alignLeft?: boolean;\n  /**\n   * A list of OrderButtons. Required to have some children.\n   */\n  children: ReactNode;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * By default ButtonBar aligns secondary buttons to the left while displayed horizontally\n   * and to the right while aligned left or sorting ascending.\n   * Use this prop to disable this behavior.\n   */\n  disableAutoAlignment?: boolean;\n  /**\n   * By default ButtonBar sorts buttons in descending order.\n   * Use this prop to change that when the button bar is NOT stacked and aligned left.\n   */\n  sortAlignLeft?: ButtonBarSortOrder;\n  /**\n   * By default ButtonBar sorts buttons in descending order.\n   * Use this prop to change that when the button bar is NOT stacked and NOT aligned left.\n   */\n  sortOrder?: ButtonBarSortOrder;\n  /**\n   * By default ButtonBar sorts buttons in descending order.\n   * Use this prop to change that when the button bar is stacked.\n   */\n  sortStackOrder?: ButtonBarSortOrder;\n  /**\n   * When the viewport is equal to or smaller than the breakpoint the buttons will be stacked vertically.\n   * Alternatively pass a screen width number in pixels.\n   * Use `0` to disable this feature. Defaults to 'xs'.\n   * Actions buttons will be ordered by stackOrder prop.\n   */\n  stackAtBreakpoint?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | number;\n}\n\nconst withBaseName = makePrefixer(\"saltButtonBar\");\n\nexport const ButtonBar = forwardRef<HTMLDivElement, ButtonBarProps>(\n  function ButtonBar(\n    {\n      alignLeft = false,\n      children: childrenProp,\n      className,\n      disableAutoAlignment,\n      sortAlignLeft = \"desc\",\n      sortOrder = \"desc\",\n      sortStackOrder = \"desc\",\n      stackAtBreakpoint = \"xs\",\n      ...rest\n    },\n    ref\n  ) {\n    const [childrenData, setChildrenData] = useDescendants<OrderedButtonData>();\n    // TODO: we need a mechanism to work with breakpoints.\n    const matches = false;\n\n    const childrenArray = Children.toArray(childrenProp);\n    const childrenIndexes = childrenArray.map((_, index) => index);\n    const stackOrderComparator = createComparatorForField(\n      \"stackOrder\",\n      sortStackOrder,\n      alignLeft,\n      childrenData\n    );\n    const orderComparator = createComparatorForField(\n      \"order\",\n      sortOrder,\n      alignLeft,\n      childrenData\n    );\n    const alignLeftComparator = createComparatorForField(\n      \"alignLeftOrder\",\n      sortAlignLeft,\n      alignLeft,\n      childrenData\n    );\n\n    let orderedChildrenIndexes: number[];\n\n    if (childrenData.length !== childrenIndexes.length) {\n      orderedChildrenIndexes = childrenIndexes;\n    } else {\n      orderedChildrenIndexes = matches\n        ? childrenIndexes.sort(stackOrderComparator)\n        : childrenIndexes.sort(\n            alignLeft ? alignLeftComparator : orderComparator\n          );\n    }\n\n    let secondaryChildAlignment: { index?: number; align?: \"left\" | \"right\" } =\n      {\n        index: undefined,\n        align: undefined,\n      };\n    if (!disableAutoAlignment) {\n      secondaryChildAlignment = alignSecondaryChild(\n        orderedChildrenIndexes.map((index) => ({\n          index,\n          ...childrenData[index],\n        })),\n        sortOrder,\n        alignLeft\n      );\n    }\n\n    const hasSecondaryButtons = childrenData.some(\n      (buttonData) => buttonData.variant === \"secondary\"\n    );\n\n    const orderedChildren = orderedChildrenIndexes.map(\n      (index) => childrenArray[index]\n    );\n\n    const buttonBarContextValue = useMemo(\n      () => ({\n        matches,\n        alignedIndex: secondaryChildAlignment.index,\n        align: secondaryChildAlignment.align,\n      }),\n      [matches, secondaryChildAlignment.align, secondaryChildAlignment.index]\n    );\n\n    return (\n      <ButtonBarContext.Provider value={buttonBarContextValue}>\n        <DescendantProvider items={childrenData} setItems={setChildrenData}>\n          <div\n            aria-label=\"button bar\"\n            className={clsx(\n              withBaseName(),\n              {\n                [withBaseName(\"stacked\")]: matches,\n                [withBaseName(\"alignLeft\")]: alignLeft,\n                [withBaseName(\"autoAligning\")]:\n                  hasSecondaryButtons && !disableAutoAlignment,\n              },\n              className\n            )}\n            ref={ref}\n            role=\"region\"\n            {...rest}\n          >\n            {orderedChildren}\n          </div>\n        </DescendantProvider>\n      </ButtonBarContext.Provider>\n    );\n  }\n);\n"],"names":["ButtonBar"],"mappings":"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"}

package/dist-es/packages/lab/src/button-bar/OrderedButton.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { makePrefixer, Button } from '@salt-ds/core';
 import { ButtonBarContext } from './internal/ButtonBarContext.js';
 import { useDescendant } from './internal/useDescendant.js';
@@ -27,7 +27,7 @@ const OrderedButton = forwardRef(
     const alignFromParent = index === alignedIndex ? alignContext : void 0;
     const align = alignProp || alignFromParent;
     return /* @__PURE__ */ jsx(Button, {
-      className: cx(
+      className: clsx(
         withBasename(),
         {
           [withBasename(`align${align ? capitalize(align) : ""}`)]: align && !matches,

package/dist-es/packages/lab/src/button-bar/OrderedButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderedButton.js","sources":["../src/button-bar/OrderedButton.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport cn from \"classnames\";\n\nimport { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { ButtonBarContext } from \"./internal/ButtonBarContext\";\nimport { useDescendant } from \"./internal/useDescendant\";\nimport { capitalize } from \"../utils\";\n\nimport \"./OrderedButton.css\";\n\nexport interface OrderedButtonProps extends ButtonProps {\n  /**\n   * Aligns the button (and any buttons before/after) it on the left/right\n   * of the container\n   */\n  align?: \"left\" | \"right\";\n  /**\n   * The order the button will be rendered when NOT stacked and the button bar is aligned left order.\n   * Buttons are ordered in descending order by default and then by their source order.\n   * This defaults to 1 for `CTA`, 2 for `regular` and 0 for `secondary`\n   */\n  alignLeftOrder?: number;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * The order the button will be rendered when NOT stacked. Buttons are ordered\n   * in descending order by default and then by their source order.\n   * This defaults to 0 for `CTA`, 1 for `regular` and 2 for `secondary`\n   */\n  order?: number;\n  /**\n   * The order the button will be rendered when stacked. Buttons are ordered\n   * in descending order by default and then by their source order.\n   * This defaults to 2 for `CTA`, 1 for `regular` and 0 for `secondary`\n   */\n  stackOrder?: number;\n}\n\nconst withBasename = makePrefixer(\"saltOrderedButton\");\n\nexport const OrderedButton = forwardRef<HTMLButtonElement, OrderedButtonProps>(\n  function OrderedButton(\n    {\n      className,\n      align: alignProp,\n      order,\n      alignLeftOrder,\n      stackOrder,\n      variant,\n      ...restProps\n    },\n    ref\n  ) {\n    const index = useDescendant({ order, stackOrder, alignLeftOrder, variant });\n    const {\n      matches,\n      align: alignContext,\n      alignedIndex,\n    } = useContext(ButtonBarContext);\n\n    const alignFromParent = index === alignedIndex ? alignContext : undefined;\n    const align = alignProp || alignFromParent;\n\n    return (\n      <Button\n        className={cn(\n          withBasename(),\n          {\n            [withBasename(`align${align ? capitalize(align) : \"\"}`)]:\n              align && !matches,\n            [withBasename(\"stacked\")]: matches,\n          },\n          className\n        )}\n        ref={ref}\n        variant={variant}\n        {...restProps}\n      />\n    );\n  }\n);\n"],"names":["OrderedButton","cn"],"mappings":";;;;;;;;;AAwCA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cACP,CAAA;AAAA,IACE,SAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,KAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,QAAQ,aAAc,CAAA,EAAE,OAAO,UAAY,EAAA,cAAA,EAAgB,SAAS,CAAA,CAAA;AAC1E,IAAM,MAAA;AAAA,MACJ,OAAA;AAAA,MACA,KAAO,EAAA,YAAA;AAAA,MACP,YAAA;AAAA,KACF,GAAI,WAAW,gBAAgB,CAAA,CAAA;AAE/B,IAAM,MAAA,eAAA,GAAkB,KAAU,KAAA,YAAA,GAAe,YAAe,GAAA,KAAA,CAAA,CAAA;AAChE,IAAA,MAAM,QAAQ,SAAa,IAAA,eAAA,CAAA;AAE3B,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,SAAW,EAAAC,EAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,CAAA,KAAA,EAAQ,KAAQ,GAAA,UAAA,CAAW,KAAK,CAAI,GAAA,EAAA,CAAA,CAAI,CACpD,GAAA,KAAA,IAAS,CAAC,OAAA;AAAA,UACZ,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,SAC7B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACA,OAAA;AAAA,MACC,GAAG,SAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"OrderedButton.js","sources":["../src/button-bar/OrderedButton.tsx"],"sourcesContent":["import { forwardRef, useContext } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { ButtonBarContext } from \"./internal/ButtonBarContext\";\nimport { useDescendant } from \"./internal/useDescendant\";\nimport { capitalize } from \"../utils\";\n\nimport \"./OrderedButton.css\";\n\nexport interface OrderedButtonProps extends ButtonProps {\n  /**\n   * Aligns the button (and any buttons before/after) it on the left/right\n   * of the container\n   */\n  align?: \"left\" | \"right\";\n  /**\n   * The order the button will be rendered when NOT stacked and the button bar is aligned left order.\n   * Buttons are ordered in descending order by default and then by their source order.\n   * This defaults to 1 for `CTA`, 2 for `regular` and 0 for `secondary`\n   */\n  alignLeftOrder?: number;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * The order the button will be rendered when NOT stacked. Buttons are ordered\n   * in descending order by default and then by their source order.\n   * This defaults to 0 for `CTA`, 1 for `regular` and 2 for `secondary`\n   */\n  order?: number;\n  /**\n   * The order the button will be rendered when stacked. Buttons are ordered\n   * in descending order by default and then by their source order.\n   * This defaults to 2 for `CTA`, 1 for `regular` and 0 for `secondary`\n   */\n  stackOrder?: number;\n}\n\nconst withBasename = makePrefixer(\"saltOrderedButton\");\n\nexport const OrderedButton = forwardRef<HTMLButtonElement, OrderedButtonProps>(\n  function OrderedButton(\n    {\n      className,\n      align: alignProp,\n      order,\n      alignLeftOrder,\n      stackOrder,\n      variant,\n      ...restProps\n    },\n    ref\n  ) {\n    const index = useDescendant({ order, stackOrder, alignLeftOrder, variant });\n    const {\n      matches,\n      align: alignContext,\n      alignedIndex,\n    } = useContext(ButtonBarContext);\n\n    const alignFromParent = index === alignedIndex ? alignContext : undefined;\n    const align = alignProp || alignFromParent;\n\n    return (\n      <Button\n        className={clsx(\n          withBasename(),\n          {\n            [withBasename(`align${align ? capitalize(align) : \"\"}`)]:\n              align && !matches,\n            [withBasename(\"stacked\")]: matches,\n          },\n          className\n        )}\n        ref={ref}\n        variant={variant}\n        {...restProps}\n      />\n    );\n  }\n);\n"],"names":["OrderedButton"],"mappings":";;;;;;;;;AAwCA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cACP,CAAA;AAAA,IACE,SAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,KAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,QAAQ,aAAc,CAAA,EAAE,OAAO,UAAY,EAAA,cAAA,EAAgB,SAAS,CAAA,CAAA;AAC1E,IAAM,MAAA;AAAA,MACJ,OAAA;AAAA,MACA,KAAO,EAAA,YAAA;AAAA,MACP,YAAA;AAAA,KACF,GAAI,WAAW,gBAAgB,CAAA,CAAA;AAE/B,IAAM,MAAA,eAAA,GAAkB,KAAU,KAAA,YAAA,GAAe,YAAe,GAAA,KAAA,CAAA,CAAA;AAChE,IAAA,MAAM,QAAQ,SAAa,IAAA,eAAA,CAAA;AAE3B,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,CAAA,KAAA,EAAQ,KAAQ,GAAA,UAAA,CAAW,KAAK,CAAI,GAAA,EAAA,CAAA,CAAI,CACpD,GAAA,KAAA,IAAS,CAAC,OAAA;AAAA,UACZ,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,SAC7B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACA,OAAA;AAAA,MACC,GAAG,SAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/calendar/Calendar.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useCallback } from 'react';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
 import { CalendarNavigation } from './internal/CalendarNavigation.js';
 import { CalendarWeekHeader } from './internal/CalendarWeekHeader.js';
@@ -33,7 +33,7 @@ const Calendar = forwardRef(
         helpers
       },
       children: /* @__PURE__ */ jsxs("div", {
-        className: cx(withBaseName(), className),
+        className: clsx(withBaseName(), className),
         role: "application",
         ref,
         children: [

package/dist-es/packages/lab/src/calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../src/calendar/Calendar.tsx"],"sourcesContent":["import { forwardRef, useCallback } from \"react\";\nimport classnames from \"classnames\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport {\n  CalendarNavigation,\n  CalendarNavigationProps,\n} from \"./internal/CalendarNavigation\";\nimport { CalendarWeekHeader } from \"./internal/CalendarWeekHeader\";\nimport {\n  CalendarCarousel,\n  CalendarCarouselProps,\n} from \"./internal/CalendarCarousel\";\nimport { CalendarContext } from \"./internal/CalendarContext\";\nimport { useCalendar, useCalendarProps } from \"./useCalendar\";\n\nimport \"./Calendar.css\";\n\nexport type CalendarProps = useCalendarProps & {\n  className?: string;\n  renderDayContents?: CalendarCarouselProps[\"renderDayContents\"];\n  hideYearDropdown?: CalendarNavigationProps[\"hideYearDropdown\"];\n  TooltipProps?: CalendarCarouselProps[\"TooltipProps\"];\n  hideOutOfRangeDates?: CalendarCarouselProps[\"hideOutOfRangeDates\"];\n};\n\nconst withBaseName = makePrefixer(\"saltCalendar\");\n\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(\n  function Calendar(props, ref) {\n    const {\n      className,\n      renderDayContents,\n      hideYearDropdown,\n      TooltipProps,\n      ...rest\n    } = props;\n\n    const { state, helpers } = useCalendar({ hideYearDropdown, ...rest });\n\n    const { setCalendarFocused } = helpers;\n\n    const handleFocus = useCallback(() => {\n      setCalendarFocused(true);\n    }, [setCalendarFocused]);\n\n    const handleBlur = useCallback(() => {\n      setCalendarFocused(false);\n    }, [setCalendarFocused]);\n\n    return (\n      <CalendarContext.Provider\n        value={{\n          state,\n          helpers,\n        }}\n      >\n        <div\n          className={classnames(withBaseName(), className)}\n          role=\"application\"\n          ref={ref}\n        >\n          <CalendarNavigation hideYearDropdown={hideYearDropdown} />\n          <CalendarWeekHeader />\n          <CalendarCarousel\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            renderDayContents={renderDayContents}\n            TooltipProps={TooltipProps}\n          />\n        </div>\n      </CalendarContext.Provider>\n    );\n  }\n);\n"],"names":["Calendar","classnames"],"mappings":";;;;;;;;;;;AAyBA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAEzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SAAS,CAAA,KAAA,EAAO,GAAK,EAAA;AAC5B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,YAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA,EAAE,OAAO,OAAQ,EAAA,GAAI,YAAY,EAAE,gBAAA,EAAkB,GAAG,IAAA,EAAM,CAAA,CAAA;AAEpE,IAAM,MAAA,EAAE,oBAAuB,GAAA,OAAA,CAAA;AAE/B,IAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,MAAA,kBAAA,CAAmB,IAAI,CAAA,CAAA;AAAA,KACzB,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,IAAM,MAAA,UAAA,GAAa,YAAY,MAAM;AACnC,MAAA,kBAAA,CAAmB,KAAK,CAAA,CAAA;AAAA,KAC1B,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,IACE,uBAAA,GAAA,CAAC,gBAAgB,QAAhB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,KAAA;AAAA,QACA,OAAA;AAAA,OACF;AAAA,MAEA,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA;AAAA,QACC,SAAW,EAAAC,EAAA,CAAW,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QAC/C,IAAK,EAAA,aAAA;AAAA,QACL,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,kBAAA,EAAA;AAAA,YAAmB,gBAAA;AAAA,WAAoC,CAAA;AAAA,8BACvD,kBAAmB,EAAA,EAAA,CAAA;AAAA,0BACnB,GAAA,CAAA,gBAAA,EAAA;AAAA,YACC,OAAS,EAAA,WAAA;AAAA,YACT,MAAQ,EAAA,UAAA;AAAA,YACR,iBAAA;AAAA,YACA,YAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"Calendar.js","sources":["../src/calendar/Calendar.tsx"],"sourcesContent":["import { forwardRef, useCallback } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport {\n  CalendarNavigation,\n  CalendarNavigationProps,\n} from \"./internal/CalendarNavigation\";\nimport { CalendarWeekHeader } from \"./internal/CalendarWeekHeader\";\nimport {\n  CalendarCarousel,\n  CalendarCarouselProps,\n} from \"./internal/CalendarCarousel\";\nimport { CalendarContext } from \"./internal/CalendarContext\";\nimport { useCalendar, useCalendarProps } from \"./useCalendar\";\n\nimport \"./Calendar.css\";\n\nexport type CalendarProps = useCalendarProps & {\n  className?: string;\n  renderDayContents?: CalendarCarouselProps[\"renderDayContents\"];\n  hideYearDropdown?: CalendarNavigationProps[\"hideYearDropdown\"];\n  TooltipProps?: CalendarCarouselProps[\"TooltipProps\"];\n  hideOutOfRangeDates?: CalendarCarouselProps[\"hideOutOfRangeDates\"];\n};\n\nconst withBaseName = makePrefixer(\"saltCalendar\");\n\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(\n  function Calendar(props, ref) {\n    const {\n      className,\n      renderDayContents,\n      hideYearDropdown,\n      TooltipProps,\n      ...rest\n    } = props;\n\n    const { state, helpers } = useCalendar({ hideYearDropdown, ...rest });\n\n    const { setCalendarFocused } = helpers;\n\n    const handleFocus = useCallback(() => {\n      setCalendarFocused(true);\n    }, [setCalendarFocused]);\n\n    const handleBlur = useCallback(() => {\n      setCalendarFocused(false);\n    }, [setCalendarFocused]);\n\n    return (\n      <CalendarContext.Provider\n        value={{\n          state,\n          helpers,\n        }}\n      >\n        <div\n          className={clsx(withBaseName(), className)}\n          role=\"application\"\n          ref={ref}\n        >\n          <CalendarNavigation hideYearDropdown={hideYearDropdown} />\n          <CalendarWeekHeader />\n          <CalendarCarousel\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            renderDayContents={renderDayContents}\n            TooltipProps={TooltipProps}\n          />\n        </div>\n      </CalendarContext.Provider>\n    );\n  }\n);\n"],"names":["Calendar"],"mappings":";;;;;;;;;;;AAyBA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAEzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SAAS,CAAA,KAAA,EAAO,GAAK,EAAA;AAC5B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,YAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA,EAAE,OAAO,OAAQ,EAAA,GAAI,YAAY,EAAE,gBAAA,EAAkB,GAAG,IAAA,EAAM,CAAA,CAAA;AAEpE,IAAM,MAAA,EAAE,oBAAuB,GAAA,OAAA,CAAA;AAE/B,IAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,MAAA,kBAAA,CAAmB,IAAI,CAAA,CAAA;AAAA,KACzB,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,IAAM,MAAA,UAAA,GAAa,YAAY,MAAM;AACnC,MAAA,kBAAA,CAAmB,KAAK,CAAA,CAAA;AAAA,KAC1B,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,IACE,uBAAA,GAAA,CAAC,gBAAgB,QAAhB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,KAAA;AAAA,QACA,OAAA;AAAA,OACF;AAAA,MAEA,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,IAAK,EAAA,aAAA;AAAA,QACL,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,kBAAA,EAAA;AAAA,YAAmB,gBAAA;AAAA,WAAoC,CAAA;AAAA,8BACvD,kBAAmB,EAAA,EAAA,CAAA;AAAA,0BACnB,GAAA,CAAA,gBAAA,EAAA;AAAA,YACC,OAAS,EAAA,WAAA;AAAA,YACT,MAAQ,EAAA,UAAA;AAAA,YACR,iBAAA;AAAA,YACA,YAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/calendar/internal/CalendarDay.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { makePrefixer, useForkRef } from '@salt-ds/core';
 import { CloseIcon } from '@salt-ds/icons';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, useRef } from 'react';
 import { useCalendarDay } from '../useCalendarDay.js';
 import './CalendarDay.css.js';
@@ -32,7 +32,7 @@ const CalendarDay = forwardRef(
       "aria-label": formatDate(day),
       ...dayProps,
       ...rest,
-      className: cx(
+      className: clsx(
         withBaseName(),
         {
           [withBaseName("hidden")]: hidden,

package/dist-es/packages/lab/src/calendar/internal/CalendarDay.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarDay.js","sources":["../src/calendar/internal/CalendarDay.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport cx from \"classnames\";\nimport { ComponentPropsWithRef, forwardRef, ReactElement, useRef } from \"react\";\nimport { DateValue } from \"@internationalized/date\";\n\nimport { DayStatus, useCalendarDay } from \"../useCalendarDay\";\nimport \"./CalendarDay.css\";\nimport { formatDate } from \"./utils\";\nimport { Tooltip, TooltipProps, useTooltip } from \"../../tooltip\";\n\nexport type DateFormatter = (day: Date) => string | undefined;\n\nexport interface CalendarDayProps\n  extends Omit<ComponentPropsWithRef<\"button\">, \"children\"> {\n  day: DateValue;\n  formatDate?: DateFormatter;\n  renderDayContents?: (date: DateValue, status: DayStatus) => ReactElement;\n  status?: DayStatus;\n  month: DateValue;\n  TooltipProps?: Partial<TooltipProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarDay\");\n\nexport const CalendarDay = forwardRef<HTMLButtonElement, CalendarDayProps>(\n  function CalendarDay(props, ref) {\n    const { className, day, renderDayContents, month, TooltipProps, ...rest } =\n      props;\n\n    const dayRef = useRef<HTMLButtonElement>(null);\n    const { status, dayProps, unselectableReason } = useCalendarDay(\n      {\n        date: day,\n        month,\n      },\n      dayRef\n    );\n    const { outOfRange, today, unselectable, hidden } = status;\n\n    const { getTriggerProps, getTooltipProps } = useTooltip({\n      disabled: !unselectableReason,\n      placement: \"top\",\n      enterDelay: 300,\n    });\n\n    const { ref: triggerRef, ...triggerProps } = getTriggerProps<\"button\">({\n      \"aria-label\": formatDate(day),\n      ...dayProps,\n      ...rest,\n      className: cx(\n        withBaseName(),\n        {\n          [withBaseName(\"hidden\")]: hidden,\n          [withBaseName(\"outOfRange\")]: outOfRange,\n          [withBaseName(\"today\")]: today,\n          [withBaseName(\"unselectable\")]: !!unselectable,\n          [withBaseName(\"unselectableLow\")]: unselectable === \"low\",\n          [withBaseName(\"unselectableMedium\")]: unselectable === \"medium\",\n        },\n        dayProps.className,\n        className\n      ),\n    });\n\n    const handleTriggerRef = useForkRef(triggerRef, dayRef);\n    const handleRef = useForkRef(handleTriggerRef, ref);\n\n    return (\n      <>\n        <Tooltip\n          {...getTooltipProps({\n            hideIcon: true,\n            status: \"error\",\n            title: unselectableReason,\n            ...TooltipProps,\n          })}\n        />\n        <button {...triggerProps} ref={handleRef}>\n          {unselectable === \"medium\" && (\n            <CloseIcon\n              aria-hidden\n              aria-label={undefined}\n              className={withBaseName(\"blockedIcon\")}\n            />\n          )}\n\n          {renderDayContents\n            ? renderDayContents(day, status)\n            : formatDate(day, { day: \"numeric\" })}\n        </button>\n      </>\n    );\n  }\n);\n"],"names":["CalendarDay","TooltipProps"],"mappings":"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"}
+{"version":3,"file":"CalendarDay.js","sources":["../src/calendar/internal/CalendarDay.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { ComponentPropsWithRef, forwardRef, ReactElement, useRef } from \"react\";\nimport { DateValue } from \"@internationalized/date\";\n\nimport { DayStatus, useCalendarDay } from \"../useCalendarDay\";\nimport \"./CalendarDay.css\";\nimport { formatDate } from \"./utils\";\nimport { Tooltip, TooltipProps, useTooltip } from \"../../tooltip\";\n\nexport type DateFormatter = (day: Date) => string | undefined;\n\nexport interface CalendarDayProps\n  extends Omit<ComponentPropsWithRef<\"button\">, \"children\"> {\n  day: DateValue;\n  formatDate?: DateFormatter;\n  renderDayContents?: (date: DateValue, status: DayStatus) => ReactElement;\n  status?: DayStatus;\n  month: DateValue;\n  TooltipProps?: Partial<TooltipProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarDay\");\n\nexport const CalendarDay = forwardRef<HTMLButtonElement, CalendarDayProps>(\n  function CalendarDay(props, ref) {\n    const { className, day, renderDayContents, month, TooltipProps, ...rest } =\n      props;\n\n    const dayRef = useRef<HTMLButtonElement>(null);\n    const { status, dayProps, unselectableReason } = useCalendarDay(\n      {\n        date: day,\n        month,\n      },\n      dayRef\n    );\n    const { outOfRange, today, unselectable, hidden } = status;\n\n    const { getTriggerProps, getTooltipProps } = useTooltip({\n      disabled: !unselectableReason,\n      placement: \"top\",\n      enterDelay: 300,\n    });\n\n    const { ref: triggerRef, ...triggerProps } = getTriggerProps<\"button\">({\n      \"aria-label\": formatDate(day),\n      ...dayProps,\n      ...rest,\n      className: clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"hidden\")]: hidden,\n          [withBaseName(\"outOfRange\")]: outOfRange,\n          [withBaseName(\"today\")]: today,\n          [withBaseName(\"unselectable\")]: !!unselectable,\n          [withBaseName(\"unselectableLow\")]: unselectable === \"low\",\n          [withBaseName(\"unselectableMedium\")]: unselectable === \"medium\",\n        },\n        dayProps.className,\n        className\n      ),\n    });\n\n    const handleTriggerRef = useForkRef(triggerRef, dayRef);\n    const handleRef = useForkRef(handleTriggerRef, ref);\n\n    return (\n      <>\n        <Tooltip\n          {...getTooltipProps({\n            hideIcon: true,\n            status: \"error\",\n            title: unselectableReason,\n            ...TooltipProps,\n          })}\n        />\n        <button {...triggerProps} ref={handleRef}>\n          {unselectable === \"medium\" && (\n            <CloseIcon\n              aria-hidden\n              aria-label={undefined}\n              className={withBaseName(\"blockedIcon\")}\n            />\n          )}\n\n          {renderDayContents\n            ? renderDayContents(day, status)\n            : formatDate(day, { day: \"numeric\" })}\n        </button>\n      </>\n    );\n  }\n);\n"],"names":["CalendarDay","TooltipProps"],"mappings":"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"}

package/dist-es/packages/lab/src/calendar/internal/CalendarMonth.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
 import { CalendarDay } from './CalendarDay.js';
 import { generateVisibleDays, formatDate } from './utils.js';
@@ -29,7 +29,7 @@ const CalendarMonth = forwardRef(
       onMouseLeave == null ? void 0 : onMouseLeave(event);
     };
     return /* @__PURE__ */ jsx("div", {
-      className: cx(withBaseName(), className),
+      className: clsx(withBaseName(), className),
       ref,
       onMouseLeave: handleMouseLeave,
       ...rest,

package/dist-es/packages/lab/src/calendar/internal/CalendarMonth.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarMonth.js","sources":["../src/calendar/internal/CalendarMonth.tsx"],"sourcesContent":["import {\n  forwardRef,\n  ComponentPropsWithRef,\n  MouseEvent,\n  SyntheticEvent,\n} from \"react\";\nimport cx from \"classnames\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { DateValue } from \"@internationalized/date\";\nimport { CalendarDay, CalendarDayProps } from \"./CalendarDay\";\nimport { formatDate, generateVisibleDays } from \"./utils\";\n\nimport \"./CalendarMonth.css\";\nimport { useCalendarContext } from \"./CalendarContext\";\n\nexport interface CalendarMonthProps extends ComponentPropsWithRef<\"div\"> {\n  date: DateValue;\n  hideOutOfRangeDates?: boolean;\n  renderDayContents?: CalendarDayProps[\"renderDayContents\"];\n  isVisible?: boolean;\n  TooltipProps?: CalendarDayProps[\"TooltipProps\"];\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarMonth\");\n\nexport const CalendarMonth = forwardRef<HTMLDivElement, CalendarMonthProps>(\n  function CalendarMonth(props, ref) {\n    const {\n      className,\n      date,\n      hideOutOfRangeDates,\n      isVisible,\n      renderDayContents,\n      onMouseLeave,\n      TooltipProps,\n      ...rest\n    } = props;\n\n    const days = generateVisibleDays(date);\n    const {\n      helpers: { setHoveredDate },\n    } = useCalendarContext();\n\n    const handleMouseLeave = (event: SyntheticEvent) => {\n      setHoveredDate(event, null);\n      onMouseLeave?.(event as MouseEvent<HTMLDivElement>);\n    };\n\n    return (\n      <div\n        className={cx(withBaseName(), className)}\n        ref={ref}\n        onMouseLeave={handleMouseLeave}\n        {...rest}\n      >\n        <div\n          data-testid=\"CalendarDateGrid\"\n          className={withBaseName(\"dateGrid\")}\n        >\n          {days.map((day) => {\n            return (\n              <CalendarDay\n                key={formatDate(day.date)}\n                day={day.date}\n                renderDayContents={renderDayContents}\n                month={date}\n                TooltipProps={TooltipProps}\n              />\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":["CalendarMonth"],"mappings":";;;;;;;;;AAuBA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,IAAA;AAAA,MACA,mBAAA;AAAA,MACA,SAAA;AAAA,MACA,iBAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA,IAAA,GAAO,oBAAoB,IAAI,CAAA,CAAA;AACrC,IAAM,MAAA;AAAA,MACJ,OAAA,EAAS,EAAE,cAAe,EAAA;AAAA,QACxB,kBAAmB,EAAA,CAAA;AAEvB,IAAM,MAAA,gBAAA,GAAmB,CAAC,KAA0B,KAAA;AAClD,MAAA,cAAA,CAAe,OAAO,IAAI,CAAA,CAAA;AAC1B,MAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACjB,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,EAAA,CAAG,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACvC,GAAA;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACb,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,aAAY,EAAA,kBAAA;AAAA,QACZ,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,QAEjC,QAAA,EAAA,IAAA,CAAK,GAAI,CAAA,CAAC,GAAQ,KAAA;AACjB,UAAA,uBACG,GAAA,CAAA,WAAA,EAAA;AAAA,YAEC,KAAK,GAAI,CAAA,IAAA;AAAA,YACT,iBAAA;AAAA,YACA,KAAO,EAAA,IAAA;AAAA,YACP,YAAA;AAAA,WAJK,EAAA,UAAA,CAAW,GAAI,CAAA,IAAI,CAK1B,CAAA,CAAA;AAAA,SAEH,CAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"CalendarMonth.js","sources":["../src/calendar/internal/CalendarMonth.tsx"],"sourcesContent":["import {\n  forwardRef,\n  ComponentPropsWithRef,\n  MouseEvent,\n  SyntheticEvent,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { DateValue } from \"@internationalized/date\";\nimport { CalendarDay, CalendarDayProps } from \"./CalendarDay\";\nimport { formatDate, generateVisibleDays } from \"./utils\";\n\nimport \"./CalendarMonth.css\";\nimport { useCalendarContext } from \"./CalendarContext\";\n\nexport interface CalendarMonthProps extends ComponentPropsWithRef<\"div\"> {\n  date: DateValue;\n  hideOutOfRangeDates?: boolean;\n  renderDayContents?: CalendarDayProps[\"renderDayContents\"];\n  isVisible?: boolean;\n  TooltipProps?: CalendarDayProps[\"TooltipProps\"];\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarMonth\");\n\nexport const CalendarMonth = forwardRef<HTMLDivElement, CalendarMonthProps>(\n  function CalendarMonth(props, ref) {\n    const {\n      className,\n      date,\n      hideOutOfRangeDates,\n      isVisible,\n      renderDayContents,\n      onMouseLeave,\n      TooltipProps,\n      ...rest\n    } = props;\n\n    const days = generateVisibleDays(date);\n    const {\n      helpers: { setHoveredDate },\n    } = useCalendarContext();\n\n    const handleMouseLeave = (event: SyntheticEvent) => {\n      setHoveredDate(event, null);\n      onMouseLeave?.(event as MouseEvent<HTMLDivElement>);\n    };\n\n    return (\n      <div\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        onMouseLeave={handleMouseLeave}\n        {...rest}\n      >\n        <div\n          data-testid=\"CalendarDateGrid\"\n          className={withBaseName(\"dateGrid\")}\n        >\n          {days.map((day) => {\n            return (\n              <CalendarDay\n                key={formatDate(day.date)}\n                day={day.date}\n                renderDayContents={renderDayContents}\n                month={date}\n                TooltipProps={TooltipProps}\n              />\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":["CalendarMonth"],"mappings":";;;;;;;;;AAuBA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,IAAA;AAAA,MACA,mBAAA;AAAA,MACA,SAAA;AAAA,MACA,iBAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA,IAAA,GAAO,oBAAoB,IAAI,CAAA,CAAA;AACrC,IAAM,MAAA;AAAA,MACJ,OAAA,EAAS,EAAE,cAAe,EAAA;AAAA,QACxB,kBAAmB,EAAA,CAAA;AAEvB,IAAM,MAAA,gBAAA,GAAmB,CAAC,KAA0B,KAAA;AAClD,MAAA,cAAA,CAAe,OAAO,IAAI,CAAA,CAAA;AAC1B,MAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACjB,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACb,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,aAAY,EAAA,kBAAA;AAAA,QACZ,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,QAEjC,QAAA,EAAA,IAAA,CAAK,GAAI,CAAA,CAAC,GAAQ,KAAA;AACjB,UAAA,uBACG,GAAA,CAAA,WAAA,EAAA;AAAA,YAEC,KAAK,GAAI,CAAA,IAAA;AAAA,YACT,iBAAA;AAAA,YACA,KAAO,EAAA,IAAA;AAAA,YACP,YAAA;AAAA,WAJK,EAAA,UAAA,CAAW,GAAI,CAAA,IAAI,CAK1B,CAAA,CAAA;AAAA,SAEH,CAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/calendar/internal/CalendarNavigation.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { makePrefixer, useId, Button } from '@salt-ds/core';
 import { ChevronLeftIcon, ChevronRightIcon } from '@salt-ds/icons';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import '../../dropdown/DropdownBase.js';
 import '../../dropdown/DropdownButton.js';
@@ -138,12 +138,12 @@ const CalendarNavigation = forwardRef(function CalendarNavigation2(props, ref) {
     }
   };
   const monthDropdownId = useId(MonthDropdownProps == null ? void 0 : MonthDropdownProps.id);
-  const monthDropdownLabelledBy = cx(
+  const monthDropdownLabelledBy = clsx(
     MonthDropdownProps == null ? void 0 : MonthDropdownProps["aria-labelledby"],
     `${monthDropdownId}-control`
   );
   const yearDropdownId = useId(YearDropdownProps == null ? void 0 : YearDropdownProps.id);
-  const yearDropdownLabelledBy = cx(
+  const yearDropdownLabelledBy = clsx(
     YearDropdownProps == null ? void 0 : YearDropdownProps["aria-labelledby"],
     `${yearDropdownId}-control`
   );
@@ -171,7 +171,7 @@ const CalendarNavigation = forwardRef(function CalendarNavigation2(props, ref) {
     disabled: canNavigateNext
   });
   return /* @__PURE__ */ jsxs("div", {
-    className: cx(
+    className: clsx(
       withBaseName(),
       { [withBaseName("hideYearDropdown")]: hideYearDropdown },
       className

package/dist-es/packages/lab/src/calendar/internal/CalendarNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarNavigation.js","sources":["../src/calendar/internal/CalendarNavigation.tsx"],"sourcesContent":["import { Button, ButtonProps, makePrefixer, useId } from \"@salt-ds/core\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport cx from \"classnames\";\nimport {\n  ComponentPropsWithRef,\n  forwardRef,\n  MouseEventHandler,\n  SyntheticEvent,\n} from \"react\";\nimport { Dropdown, DropdownProps } from \"../../dropdown\";\nimport { ListItem, ListItemType } from \"../../list\";\nimport { Tooltip, useTooltip } from \"../../tooltip\";\n\nimport { useCalendarContext } from \"./CalendarContext\";\n\nimport \"./CalendarNavigation.css\";\nimport { DateValue, isSameMonth, isSameYear } from \"@internationalized/date\";\nimport { formatDate, monthDiff, monthsForLocale } from \"./utils\";\nimport { SelectionChangeHandler } from \"../../common-hooks\";\n\ntype DropdownItem = {\n  value: DateValue;\n  disabled?: boolean;\n};\n\ntype dateDropdownProps = DropdownProps<DropdownItem>;\n\nexport interface CalendarNavigationProps extends ComponentPropsWithRef<\"div\"> {\n  MonthDropdownProps?: dateDropdownProps;\n  YearDropdownProps?: dateDropdownProps;\n  onMonthSelect?: dateDropdownProps[\"onChange\"];\n  onYearSelect?: dateDropdownProps[\"onChange\"];\n  onNavigateNext?: ButtonProps[\"onClick\"];\n  onNavigatePrevious?: ButtonProps[\"onClick\"];\n  hideYearDropdown?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarNavigation\");\n\nfunction useCalendarNavigation() {\n  const {\n    state: { visibleMonth, minDate, maxDate },\n    helpers: {\n      setVisibleMonth,\n      isDayVisible,\n      isOutsideAllowedYears,\n      isOutsideAllowedMonths,\n    },\n  } = useCalendarContext();\n\n  const moveToNextMonth = (event: SyntheticEvent) => {\n    setVisibleMonth(event, visibleMonth.add({ months: 1 }));\n  };\n\n  const moveToPreviousMonth = (event: SyntheticEvent) => {\n    setVisibleMonth(event, visibleMonth.subtract({ months: 1 }));\n  };\n\n  const moveToMonth = (event: SyntheticEvent, month: DateValue) => {\n    let newMonth = month;\n\n    if (!isOutsideAllowedYears(newMonth)) {\n      if (isOutsideAllowedMonths(newMonth)) {\n        // If month is navigable we should move to the closest navigable month\n        const navigableMonths = monthsForLocale(visibleMonth).filter(\n          (n) => !isOutsideAllowedMonths(n)\n        );\n        newMonth = navigableMonths.reduce((closestMonth, currentMonth) =>\n          Math.abs(monthDiff(currentMonth, newMonth)) <\n          Math.abs(monthDiff(closestMonth, newMonth))\n            ? currentMonth\n            : closestMonth\n        );\n      }\n      setVisibleMonth(event, newMonth);\n    }\n  };\n\n  const months = monthsForLocale(visibleMonth).map((month) => {\n    return { value: month, disabled: isOutsideAllowedMonths(month) };\n  });\n\n  const years = [-2, -1, 0, 1, 2]\n    .map((delta) => ({ value: visibleMonth.add({ years: delta }) }))\n    .filter(({ value }) => !isOutsideAllowedYears(value));\n\n  const selectedMonth = months.find((item: DropdownItem) =>\n    isSameMonth(item.value, visibleMonth)\n  );\n  const selectedYear = years.find((item: DropdownItem) =>\n    isSameYear(item.value, visibleMonth)\n  );\n\n  const canNavigatePrevious = !(minDate && isDayVisible(minDate));\n  const canNavigateNext = !(maxDate && isDayVisible(maxDate));\n\n  return {\n    moveToNextMonth,\n    moveToPreviousMonth,\n    moveToMonth,\n    visibleMonth,\n    months,\n    years,\n    canNavigateNext,\n    canNavigatePrevious,\n    selectedMonth,\n    selectedYear,\n  };\n}\n\nconst ListItemWithTooltip: ListItemType<DropdownItem> = ({\n  item,\n  label,\n  ...props\n}) => {\n  const { getTooltipProps, getTriggerProps } = useTooltip({\n    placement: \"right\",\n    disabled: !item?.disabled,\n  });\n\n  const { ref: triggerRef, ...triggerProps } =\n    getTriggerProps<typeof ListItem>(props);\n\n  return (\n    <ListItem ref={triggerRef} {...triggerProps}>\n      {label}\n      <Tooltip\n        {...getTooltipProps({\n          title: \"This month is out of range\",\n        })}\n      />\n    </ListItem>\n  );\n};\n\nexport const CalendarNavigation = forwardRef<\n  HTMLDivElement,\n  CalendarNavigationProps\n>(function CalendarNavigation(props, ref) {\n  const {\n    className,\n    MonthDropdownProps,\n    YearDropdownProps,\n    hideYearDropdown,\n    ...rest\n  } = props;\n\n  const {\n    moveToPreviousMonth,\n    moveToNextMonth,\n    moveToMonth,\n    months,\n    years,\n    canNavigateNext,\n    canNavigatePrevious,\n    visibleMonth,\n    selectedMonth,\n    selectedYear,\n  } = useCalendarNavigation();\n\n  const handleNavigatePrevious: MouseEventHandler<HTMLButtonElement> = (\n    event\n  ) => {\n    moveToPreviousMonth(event);\n  };\n\n  const handleNavigateNext: MouseEventHandler<HTMLButtonElement> = (event) => {\n    moveToNextMonth(event);\n  };\n\n  const handleMonthSelect: SelectionChangeHandler<DropdownItem> = (\n    event,\n    month\n  ) => {\n    if (month) {\n      moveToMonth(event, month.value);\n    }\n  };\n\n  const handleYearSelect: SelectionChangeHandler<DropdownItem> = (\n    event,\n    year\n  ) => {\n    if (year) {\n      moveToMonth(event, year.value);\n    }\n  };\n\n  const monthDropdownId = useId(MonthDropdownProps?.id);\n  const monthDropdownLabelledBy = cx(\n    MonthDropdownProps?.[\"aria-labelledby\"],\n    // TODO need a prop on Dropdown to allow buttonId to be passed, should not make assumptions about internal\n    // id assignment like this\n    `${monthDropdownId}-control`\n  );\n  const yearDropdownId = useId(YearDropdownProps?.id);\n  const yearDropdownLabelledBy = cx(\n    YearDropdownProps?.[\"aria-labelledby\"],\n    `${yearDropdownId}-control`\n  );\n\n  const defaultItemToMonth = (date: DropdownItem) => {\n    if (hideYearDropdown) {\n      return formatDate(date.value, { month: \"long\" });\n    }\n    return formatDate(date.value, { month: \"short\" });\n  };\n\n  const defaultItemToYear = (date: DropdownItem) => {\n    return formatDate(date.value, { year: \"numeric\" });\n  };\n\n  const {\n    getTriggerProps: getPreviousButtonProps,\n    getTooltipProps: getPreviousButtonTooltipProps,\n  } = useTooltip({\n    placement: \"top\",\n    disabled: canNavigatePrevious,\n  });\n\n  const {\n    getTriggerProps: getNextButtonProps,\n    getTooltipProps: getNextButtonTooltipProps,\n  } = useTooltip({\n    placement: \"top\",\n    disabled: canNavigateNext,\n  });\n\n  return (\n    <div\n      className={cx(\n        withBaseName(),\n        { [withBaseName(\"hideYearDropdown\")]: hideYearDropdown },\n        className\n      )}\n      ref={ref}\n      {...rest}\n    >\n      <Button\n        {...getPreviousButtonProps<typeof Button>({\n          disabled: !canNavigatePrevious,\n          variant: \"secondary\",\n          onClick: handleNavigatePrevious,\n          className: withBaseName(\"previousButton\"),\n          focusableWhenDisabled: true,\n        })}\n      >\n        <ChevronLeftIcon\n          aria-label={`Previous Month, ${formatDate(\n            visibleMonth.subtract({ months: 1 })\n          )}`}\n        />\n      </Button>\n      <Tooltip\n        {...getPreviousButtonTooltipProps({\n          title: \"Past dates are out of range\",\n        })}\n      />\n      <Dropdown<DropdownItem>\n        source={months}\n        id={monthDropdownId}\n        aria-labelledby={monthDropdownLabelledBy}\n        aria-label=\"Month Dropdown\"\n        {...MonthDropdownProps}\n        ListItem={ListItemWithTooltip}\n        selected={selectedMonth}\n        itemToString={defaultItemToMonth}\n        onSelectionChange={handleMonthSelect}\n        fullWidth\n      />\n      {!hideYearDropdown && (\n        <Dropdown<DropdownItem>\n          source={years}\n          id={yearDropdownId}\n          aria-labelledby={yearDropdownLabelledBy}\n          aria-label=\"Year Dropdown\"\n          {...YearDropdownProps}\n          ListItem={ListItemWithTooltip}\n          selected={selectedYear}\n          onSelectionChange={handleYearSelect}\n          itemToString={defaultItemToYear}\n          fullWidth\n        />\n      )}\n      <Button\n        {...getNextButtonProps<typeof Button>({\n          disabled: !canNavigateNext,\n          variant: \"secondary\",\n          onClick: handleNavigateNext,\n          className: withBaseName(\"nextButton\"),\n          focusableWhenDisabled: true,\n        })}\n      >\n        <ChevronRightIcon\n          aria-label={`Next Month, ${formatDate(\n            visibleMonth.add({ months: 1 })\n          )}`}\n        />\n      </Button>\n      <Tooltip\n        {...getNextButtonTooltipProps({\n          title: \"Future dates are out of range\",\n        })}\n      />\n    </div>\n  );\n});\n"],"names":["CalendarNavigation"],"mappings":"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"}
+{"version":3,"file":"CalendarNavigation.js","sources":["../src/calendar/internal/CalendarNavigation.tsx"],"sourcesContent":["import { Button, ButtonProps, makePrefixer, useId } from \"@salt-ds/core\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n  ComponentPropsWithRef,\n  forwardRef,\n  MouseEventHandler,\n  SyntheticEvent,\n} from \"react\";\nimport { Dropdown, DropdownProps } from \"../../dropdown\";\nimport { ListItem, ListItemType } from \"../../list\";\nimport { Tooltip, useTooltip } from \"../../tooltip\";\n\nimport { useCalendarContext } from \"./CalendarContext\";\n\nimport \"./CalendarNavigation.css\";\nimport { DateValue, isSameMonth, isSameYear } from \"@internationalized/date\";\nimport { formatDate, monthDiff, monthsForLocale } from \"./utils\";\nimport { SelectionChangeHandler } from \"../../common-hooks\";\n\ntype DropdownItem = {\n  value: DateValue;\n  disabled?: boolean;\n};\n\ntype dateDropdownProps = DropdownProps<DropdownItem>;\n\nexport interface CalendarNavigationProps extends ComponentPropsWithRef<\"div\"> {\n  MonthDropdownProps?: dateDropdownProps;\n  YearDropdownProps?: dateDropdownProps;\n  onMonthSelect?: dateDropdownProps[\"onChange\"];\n  onYearSelect?: dateDropdownProps[\"onChange\"];\n  onNavigateNext?: ButtonProps[\"onClick\"];\n  onNavigatePrevious?: ButtonProps[\"onClick\"];\n  hideYearDropdown?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarNavigation\");\n\nfunction useCalendarNavigation() {\n  const {\n    state: { visibleMonth, minDate, maxDate },\n    helpers: {\n      setVisibleMonth,\n      isDayVisible,\n      isOutsideAllowedYears,\n      isOutsideAllowedMonths,\n    },\n  } = useCalendarContext();\n\n  const moveToNextMonth = (event: SyntheticEvent) => {\n    setVisibleMonth(event, visibleMonth.add({ months: 1 }));\n  };\n\n  const moveToPreviousMonth = (event: SyntheticEvent) => {\n    setVisibleMonth(event, visibleMonth.subtract({ months: 1 }));\n  };\n\n  const moveToMonth = (event: SyntheticEvent, month: DateValue) => {\n    let newMonth = month;\n\n    if (!isOutsideAllowedYears(newMonth)) {\n      if (isOutsideAllowedMonths(newMonth)) {\n        // If month is navigable we should move to the closest navigable month\n        const navigableMonths = monthsForLocale(visibleMonth).filter(\n          (n) => !isOutsideAllowedMonths(n)\n        );\n        newMonth = navigableMonths.reduce((closestMonth, currentMonth) =>\n          Math.abs(monthDiff(currentMonth, newMonth)) <\n          Math.abs(monthDiff(closestMonth, newMonth))\n            ? currentMonth\n            : closestMonth\n        );\n      }\n      setVisibleMonth(event, newMonth);\n    }\n  };\n\n  const months = monthsForLocale(visibleMonth).map((month) => {\n    return { value: month, disabled: isOutsideAllowedMonths(month) };\n  });\n\n  const years = [-2, -1, 0, 1, 2]\n    .map((delta) => ({ value: visibleMonth.add({ years: delta }) }))\n    .filter(({ value }) => !isOutsideAllowedYears(value));\n\n  const selectedMonth = months.find((item: DropdownItem) =>\n    isSameMonth(item.value, visibleMonth)\n  );\n  const selectedYear = years.find((item: DropdownItem) =>\n    isSameYear(item.value, visibleMonth)\n  );\n\n  const canNavigatePrevious = !(minDate && isDayVisible(minDate));\n  const canNavigateNext = !(maxDate && isDayVisible(maxDate));\n\n  return {\n    moveToNextMonth,\n    moveToPreviousMonth,\n    moveToMonth,\n    visibleMonth,\n    months,\n    years,\n    canNavigateNext,\n    canNavigatePrevious,\n    selectedMonth,\n    selectedYear,\n  };\n}\n\nconst ListItemWithTooltip: ListItemType<DropdownItem> = ({\n  item,\n  label,\n  ...props\n}) => {\n  const { getTooltipProps, getTriggerProps } = useTooltip({\n    placement: \"right\",\n    disabled: !item?.disabled,\n  });\n\n  const { ref: triggerRef, ...triggerProps } =\n    getTriggerProps<typeof ListItem>(props);\n\n  return (\n    <ListItem ref={triggerRef} {...triggerProps}>\n      {label}\n      <Tooltip\n        {...getTooltipProps({\n          title: \"This month is out of range\",\n        })}\n      />\n    </ListItem>\n  );\n};\n\nexport const CalendarNavigation = forwardRef<\n  HTMLDivElement,\n  CalendarNavigationProps\n>(function CalendarNavigation(props, ref) {\n  const {\n    className,\n    MonthDropdownProps,\n    YearDropdownProps,\n    hideYearDropdown,\n    ...rest\n  } = props;\n\n  const {\n    moveToPreviousMonth,\n    moveToNextMonth,\n    moveToMonth,\n    months,\n    years,\n    canNavigateNext,\n    canNavigatePrevious,\n    visibleMonth,\n    selectedMonth,\n    selectedYear,\n  } = useCalendarNavigation();\n\n  const handleNavigatePrevious: MouseEventHandler<HTMLButtonElement> = (\n    event\n  ) => {\n    moveToPreviousMonth(event);\n  };\n\n  const handleNavigateNext: MouseEventHandler<HTMLButtonElement> = (event) => {\n    moveToNextMonth(event);\n  };\n\n  const handleMonthSelect: SelectionChangeHandler<DropdownItem> = (\n    event,\n    month\n  ) => {\n    if (month) {\n      moveToMonth(event, month.value);\n    }\n  };\n\n  const handleYearSelect: SelectionChangeHandler<DropdownItem> = (\n    event,\n    year\n  ) => {\n    if (year) {\n      moveToMonth(event, year.value);\n    }\n  };\n\n  const monthDropdownId = useId(MonthDropdownProps?.id);\n  const monthDropdownLabelledBy = clsx(\n    MonthDropdownProps?.[\"aria-labelledby\"],\n    // TODO need a prop on Dropdown to allow buttonId to be passed, should not make assumptions about internal\n    // id assignment like this\n    `${monthDropdownId}-control`\n  );\n  const yearDropdownId = useId(YearDropdownProps?.id);\n  const yearDropdownLabelledBy = clsx(\n    YearDropdownProps?.[\"aria-labelledby\"],\n    `${yearDropdownId}-control`\n  );\n\n  const defaultItemToMonth = (date: DropdownItem) => {\n    if (hideYearDropdown) {\n      return formatDate(date.value, { month: \"long\" });\n    }\n    return formatDate(date.value, { month: \"short\" });\n  };\n\n  const defaultItemToYear = (date: DropdownItem) => {\n    return formatDate(date.value, { year: \"numeric\" });\n  };\n\n  const {\n    getTriggerProps: getPreviousButtonProps,\n    getTooltipProps: getPreviousButtonTooltipProps,\n  } = useTooltip({\n    placement: \"top\",\n    disabled: canNavigatePrevious,\n  });\n\n  const {\n    getTriggerProps: getNextButtonProps,\n    getTooltipProps: getNextButtonTooltipProps,\n  } = useTooltip({\n    placement: \"top\",\n    disabled: canNavigateNext,\n  });\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        { [withBaseName(\"hideYearDropdown\")]: hideYearDropdown },\n        className\n      )}\n      ref={ref}\n      {...rest}\n    >\n      <Button\n        {...getPreviousButtonProps<typeof Button>({\n          disabled: !canNavigatePrevious,\n          variant: \"secondary\",\n          onClick: handleNavigatePrevious,\n          className: withBaseName(\"previousButton\"),\n          focusableWhenDisabled: true,\n        })}\n      >\n        <ChevronLeftIcon\n          aria-label={`Previous Month, ${formatDate(\n            visibleMonth.subtract({ months: 1 })\n          )}`}\n        />\n      </Button>\n      <Tooltip\n        {...getPreviousButtonTooltipProps({\n          title: \"Past dates are out of range\",\n        })}\n      />\n      <Dropdown<DropdownItem>\n        source={months}\n        id={monthDropdownId}\n        aria-labelledby={monthDropdownLabelledBy}\n        aria-label=\"Month Dropdown\"\n        {...MonthDropdownProps}\n        ListItem={ListItemWithTooltip}\n        selected={selectedMonth}\n        itemToString={defaultItemToMonth}\n        onSelectionChange={handleMonthSelect}\n        fullWidth\n      />\n      {!hideYearDropdown && (\n        <Dropdown<DropdownItem>\n          source={years}\n          id={yearDropdownId}\n          aria-labelledby={yearDropdownLabelledBy}\n          aria-label=\"Year Dropdown\"\n          {...YearDropdownProps}\n          ListItem={ListItemWithTooltip}\n          selected={selectedYear}\n          onSelectionChange={handleYearSelect}\n          itemToString={defaultItemToYear}\n          fullWidth\n        />\n      )}\n      <Button\n        {...getNextButtonProps<typeof Button>({\n          disabled: !canNavigateNext,\n          variant: \"secondary\",\n          onClick: handleNavigateNext,\n          className: withBaseName(\"nextButton\"),\n          focusableWhenDisabled: true,\n        })}\n      >\n        <ChevronRightIcon\n          aria-label={`Next Month, ${formatDate(\n            visibleMonth.add({ months: 1 })\n          )}`}\n        />\n      </Button>\n      <Tooltip\n        {...getNextButtonTooltipProps({\n          title: \"Future dates are out of range\",\n        })}\n      />\n    </div>\n  );\n});\n"],"names":["CalendarNavigation"],"mappings":"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"}

package/dist-es/packages/lab/src/calendar/internal/CalendarWeekHeader.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
 import { daysForLocale } from './utils.js';
 import './CalendarWeekHeader.css.js';
@@ -11,7 +11,7 @@ const CalendarWeekHeader = forwardRef(function CalendarWeekHeader2({ className,
   const weekdaysLong = daysForLocale("long");
   return /* @__PURE__ */ jsx("div", {
     "data-testid": "CalendarWeekHeader",
-    className: cx(withBaseName(), className),
+    className: clsx(withBaseName(), className),
     ref,
     ...rest,
     children: weekdaysShort.map((day, index) => /* @__PURE__ */ jsx("small", {