@kaizen/components 1.27.0 → 1.29.0

package/dist/esm/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TruncateIndicator.mjs","sources":["../../../../../src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.tsx"],"sourcesContent":["import React from \"react\"\nimport { EllipsisIcon } from \"~components/Icon\"\nimport styles from \"./TruncateIndicator.module.scss\"\n\nexport const TruncateIndicator = (): JSX.Element => (\n  <div\n    className={styles.truncateIndicatorWrapper}\n    data-testid=\"truncate-indicator\"\n  >\n    <EllipsisIcon role=\"presentation\" />\n  </div>\n)\n"],"names":["TruncateIndicator","React","createElement","className","styles","truncateIndicatorWrapper","EllipsisIcon","role"],"mappings":";;;;;;AAIO,IAAMA,iBAAiB,GAAG,SAAAA,CAAA;EAAmB,oBAClDC,KACE,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAAC,SAAS,EAAEC,MAAM,CAACC,wBAAwB;mBAC9B;EAAoB,CAAA,eAEhCJ,KAAC,CAAAC,aAAA,CAAAI,YAAY,EAAC;IAAAC,IAAI,EAAC;IAAiB,CAChC;AAN4C,CAAA;"}

package/dist/esm/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.module.scss.mjs

@@ -0,0 +1,5 @@
+var styles = {
+  "truncateIndicatorWrapper": "TruncateIndicator-module_truncateIndicatorWrapper__FgApk"
+};
+export { styles as default };
+//# sourceMappingURL=TruncateIndicator.module.scss.mjs.map

package/dist/esm/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TruncateIndicator.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/esm/Pagination/utils/createRange.mjs

@@ -0,0 +1,9 @@
+var createRange = function (start, end) {
+  var range = [];
+  for (var i = start; i <= end; i++) {
+    range.push(i);
+  }
+  return range;
+};
+export { createRange };
+//# sourceMappingURL=createRange.mjs.map

package/dist/esm/Pagination/utils/createRange.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createRange.mjs","sources":["../../../../src/Pagination/utils/createRange.ts"],"sourcesContent":["export const createRange = (start: number, end: number): number[] => {\n  const range: number[] = []\n\n  for (let i = start; i <= end; i++) {\n    range.push(i)\n  }\n\n  return range\n}\n"],"names":["createRange","start","end","range","i","push"],"mappings":"AAAa,IAAAA,WAAW,GAAG,SAAAA,CAACC,KAAa,EAAEC,GAAW,EAAA;EACpD,IAAMC,KAAK,GAAa,EAAE;EAE1B,KAAK,IAAIC,CAAC,GAAGH,KAAK,EAAEG,CAAC,IAAIF,GAAG,EAAEE,CAAC,EAAE,EAAE;IACjCD,KAAK,CAACE,IAAI,CAACD,CAAC,CAAC;EACd;EAED,OAAOD,KAAK;AACd,CAAA;"}

package/dist/esm/Popover/Popover.mjs

@@ -0,0 +1,155 @@
+import { __rest, __assign } from 'tslib';
+import React, { useState, useMemo } from 'react';
+import classnames from 'classnames';
+import { usePopper } from 'react-popper';
+import { Heading } from '../Heading/Heading.mjs';
+import 'uuid';
+import '../Icon/subcomponents/SVG/SVG.mjs';
+import { CloseIcon } from '../Icon/CloseIcon.mjs';
+import { Text } from '../Text/Text.mjs';
+import { mapSizeToClass, mapVariantToBoxClass, mapVariantToIconClass, mapVariantToIcon, mapLineVariant, mapArrowVariantToClass } from './utils/classMappers.mjs';
+import styles from './Popover.module.scss.mjs';
+
+// Sync with styles.scss
+var arrowWidth = 14;
+var arrowHeight = 7;
+/**
+ * {@link https://cultureamp.design/components/popover/ Guidance} |
+ * {@link https://cultureamp.design/storybook/?path=/docs/components-popover--default-kaizen-site-demo Storybook}
+ */
+const Popover = /*#__PURE__*/function () {
+  const Popover = function (_a) {
+    var children = _a.children,
+      _b = _a.variant,
+      variant = _b === void 0 ? "default" : _b,
+      _c = _a.placement,
+      placement = _c === void 0 ? "top" : _c,
+      _d = _a.size,
+      size = _d === void 0 ? "small" : _d,
+      heading = _a.heading,
+      _e = _a.dismissible,
+      dismissible = _e === void 0 ? false : _e,
+      onClose = _a.onClose,
+      _f = _a.singleLine,
+      singleLine = _f === void 0 ? false : _f,
+      customIcon = _a.customIcon,
+      referenceElement = _a.referenceElement,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["children", "variant", "placement", "size", "heading", "dismissible", "onClose", "singleLine", "customIcon", "referenceElement", "classNameOverride"]);
+    var _g = useState(null),
+      popperElement = _g[0],
+      setPopperElement = _g[1];
+    var _h = useState(null),
+      arrowElement = _h[0],
+      setArrowElement = _h[1];
+    var _j = usePopper(referenceElement, popperElement, {
+        modifiers: [{
+          name: "arrow",
+          options: {
+            element: arrowElement,
+            // Ensures that the arrow doesn't go too far to the left or right
+            // of the tooltip.
+            padding: arrowWidth / 2 + 10
+          }
+        }, {
+          name: "offset",
+          options: {
+            offset: [0, arrowHeight + 6]
+          }
+        }, {
+          name: "preventOverflow",
+          options: {
+            // Makes sure that the popover isn't flush up against the end of the
+            // viewport
+            padding: 8,
+            altAxis: true,
+            altBoundary: true,
+            tetherOffset: 50
+          }
+        }, {
+          name: "flip",
+          options: {
+            padding: 8,
+            altBoundary: true,
+            fallbackPlacements: ["left", "top", "bottom", "right"]
+          }
+        }],
+        placement: placement
+      }),
+      popperStyles = _j.styles,
+      attributes = _j.attributes;
+    return /*#__PURE__*/React.createElement("div", __assign({
+      ref: setPopperElement,
+      style: popperStyles.popper
+    }, attributes.popper, {
+      className: classnames(styles.root, mapSizeToClass(size), classNameOverride)
+    }, restProps), /*#__PURE__*/React.createElement("div", {
+      className: mapVariantToBoxClass(variant)
+    }, heading && /*#__PURE__*/React.createElement("div", {
+      className: styles.header
+    }, variant !== "default" && /*#__PURE__*/React.createElement("span", {
+      className: classnames(styles.icon, mapVariantToIconClass(variant))
+    }, customIcon !== null && customIcon !== void 0 ? customIcon : mapVariantToIcon(variant)), /*#__PURE__*/React.createElement(Heading, {
+      variant: "heading-6",
+      classNameOverride: styles.singleLine
+    }, heading), dismissible && /*#__PURE__*/React.createElement("button", {
+      className: styles.close,
+      onClick: onClose,
+      type: "button",
+      "aria-label": "close"
+    }, /*#__PURE__*/React.createElement(CloseIcon, {
+      role: "presentation"
+    }))), /*#__PURE__*/React.createElement(Text, {
+      variant: "small",
+      classNameOverride: classnames(styles.container, mapLineVariant(singleLine))
+    }, children)), /*#__PURE__*/React.createElement("div", {
+      ref: setArrowElement,
+      style: popperStyles.arrow,
+      className: styles.arrowWrapper
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.arrow, mapArrowVariantToClass(variant))
+    })));
+  };
+  Popover.displayName = "Popover";
+  /**
+   * How to use:
+   *
+   * const [referenceElementRef, Popover] = usePopover()
+   *
+   * return (<>
+   *   <button ref={referenceElementRef}>
+   *     Hello world
+   *   </button>
+   *   <Popover>Hello world</Popover>
+   * </>)
+   *
+   * The purpose of this hook is to abstract away some of the awkwardness with the
+   * requirement of passing in refs with popper. We need to use `useState` instead
+   * of `useRef`, which may not be immediately intuitive.
+   *
+   * The popper documentation to help provide more context:
+   *   https://popper.js.org/react-popper/v2/hook/
+   */
+  return Popover;
+}();
+var usePopover = function () {
+  var _a = useState(null),
+    referenceElement = _a[0],
+    setReferenceElement = _a[1];
+  // I guess the problem with this pattern, is that every time referenceElement
+  // changes, a brand new component is generated, which would be bad for memoization.
+  // In this situation however, the value is rarely going to change, and
+  // popovers aren't going to include content with expensive render times.
+  var PopoverWithRef = useMemo(
+  // eslint-disable-next-line react/display-name
+  function () {
+    return function (props) {
+      return referenceElement ? /*#__PURE__*/React.createElement(Popover, __assign({}, props, {
+        referenceElement: referenceElement
+      })) : null;
+    };
+  }, [referenceElement]);
+  return [setReferenceElement, PopoverWithRef];
+};
+export { Popover, usePopover };
+//# sourceMappingURL=Popover.mjs.map

package/dist/esm/Popover/Popover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.mjs","sources":["../../../src/Popover/Popover.tsx"],"sourcesContent":["import React, { HTMLAttributes, useMemo, useState } from \"react\"\nimport classnames from \"classnames\"\nimport { usePopper } from \"react-popper\"\nimport { Heading } from \"~components/Heading\"\nimport { CloseIcon } from \"~components/Icon\"\nimport { Text } from \"~components/Text\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { Placement, PopoverSize, PopoverVariant } from \"./types\"\nimport {\n  mapArrowVariantToClass,\n  mapLineVariant,\n  mapSizeToClass,\n  mapVariantToBoxClass,\n  mapVariantToIcon,\n  mapVariantToIconClass,\n} from \"./utils/classMappers\"\nimport styles from \"./Popover.module.scss\"\n\nexport type PopoverProps = {\n  children: React.ReactNode\n  variant?: PopoverVariant\n  placement?: Placement\n  size?: PopoverSize\n  heading?: string\n  dismissible?: boolean\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void\n  singleLine?: boolean\n  /**\n   * For almost all intents and purposes, you should be using a pre-defined variant.\n   * Please avoid using a custom icon unless you have a very good reason to do so.\n   */\n  customIcon?: JSX.Element\n  referenceElement: HTMLElement | null\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\n// Sync with styles.scss\nconst arrowWidth = 14\nconst arrowHeight = 7\n\n/**\n * {@link https://cultureamp.design/components/popover/ Guidance} |\n * {@link https://cultureamp.design/storybook/?path=/docs/components-popover--default-kaizen-site-demo Storybook}\n */\nexport const Popover = ({\n  children,\n  variant = \"default\",\n  placement = \"top\",\n  size = \"small\",\n  heading,\n  dismissible = false,\n  onClose,\n  singleLine = false,\n  customIcon,\n  referenceElement,\n  classNameOverride,\n  ...restProps\n}: PopoverProps): JSX.Element => {\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(\n    null\n  )\n  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null)\n  const { styles: popperStyles, attributes } = usePopper(\n    referenceElement,\n    popperElement,\n    {\n      modifiers: [\n        {\n          name: \"arrow\",\n          options: {\n            element: arrowElement,\n            // Ensures that the arrow doesn't go too far to the left or right\n            // of the tooltip.\n            padding: arrowWidth / 2 + 10,\n          },\n        },\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, arrowHeight + 6],\n          },\n        },\n        {\n          name: \"preventOverflow\",\n          options: {\n            // Makes sure that the popover isn't flush up against the end of the\n            // viewport\n            padding: 8,\n            altAxis: true,\n            altBoundary: true,\n            tetherOffset: 50,\n          },\n        },\n        {\n          name: \"flip\",\n          options: {\n            padding: 8,\n            altBoundary: true,\n            fallbackPlacements: [\"left\", \"top\", \"bottom\", \"right\"],\n          },\n        },\n      ],\n      placement,\n    }\n  )\n\n  return (\n    <div\n      ref={setPopperElement}\n      style={popperStyles.popper}\n      {...attributes.popper}\n      className={classnames(\n        styles.root,\n        mapSizeToClass(size),\n        classNameOverride\n      )}\n      {...restProps}\n    >\n      <div className={mapVariantToBoxClass(variant)}>\n        {heading && (\n          <div className={styles.header}>\n            {variant !== \"default\" && (\n              <span\n                className={classnames(\n                  styles.icon,\n                  mapVariantToIconClass(variant)\n                )}\n              >\n                {customIcon ?? mapVariantToIcon(variant)}\n              </span>\n            )}\n            <Heading variant=\"heading-6\" classNameOverride={styles.singleLine}>\n              {heading}\n            </Heading>\n            {dismissible && (\n              <button\n                className={styles.close}\n                onClick={onClose}\n                type=\"button\"\n                aria-label=\"close\"\n              >\n                <CloseIcon role=\"presentation\" />\n              </button>\n            )}\n          </div>\n        )}\n        <Text\n          variant=\"small\"\n          classNameOverride={classnames(\n            styles.container,\n            mapLineVariant(singleLine)\n          )}\n        >\n          {children}\n        </Text>\n      </div>\n      <div\n        ref={setArrowElement}\n        style={popperStyles.arrow}\n        className={styles.arrowWrapper}\n      >\n        <div\n          className={classnames(styles.arrow, mapArrowVariantToClass(variant))}\n        />\n      </div>\n    </div>\n  )\n}\n\nPopover.displayName = \"Popover\"\n\ntype PopoverPropsWithoutRef = Omit<PopoverProps, \"referenceElement\">\n\n/**\n * How to use:\n *\n * const [referenceElementRef, Popover] = usePopover()\n *\n * return (<>\n *   <button ref={referenceElementRef}>\n *     Hello world\n *   </button>\n *   <Popover>Hello world</Popover>\n * </>)\n *\n * The purpose of this hook is to abstract away some of the awkwardness with the\n * requirement of passing in refs with popper. We need to use `useState` instead\n * of `useRef`, which may not be immediately intuitive.\n *\n * The popper documentation to help provide more context:\n *   https://popper.js.org/react-popper/v2/hook/\n */\nexport const usePopover = (): [\n  (element: HTMLElement | null) => void,\n  (props: PopoverPropsWithoutRef) => JSX.Element | null,\n] => {\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(\n    null\n  )\n\n  // I guess the problem with this pattern, is that every time referenceElement\n  // changes, a brand new component is generated, which would be bad for memoization.\n  // In this situation however, the value is rarely going to change, and\n  // popovers aren't going to include content with expensive render times.\n  const PopoverWithRef = useMemo(\n    // eslint-disable-next-line react/display-name\n    () => (props: PopoverPropsWithoutRef) =>\n      referenceElement ? (\n        <Popover {...props} referenceElement={referenceElement} />\n      ) : null,\n    [referenceElement]\n  )\n\n  return [setReferenceElement, PopoverWithRef]\n}\n"],"names":["arrowWidth","arrowHeight","Popover","_a","children","_b","variant","_c","placement","_d","size","heading","_e","dismissible","onClose","_f","singleLine","customIcon","referenceElement","classNameOverride","restProps","__rest","_g","useState","popperElement","setPopperElement","_h","arrowElement","setArrowElement","_j","usePopper","modifiers","name","options","element","padding","offset","altAxis","altBoundary","tetherOffset","fallbackPlacements","popperStyles","styles","attributes","React","createElement","__assign","ref","style","popper","className","classnames","root","mapSizeToClass","mapVariantToBoxClass","header","icon","mapVariantToIconClass","mapVariantToIcon","Heading","close","onClick","type","CloseIcon","role","Text","container","mapLineVariant","arrow","arrowWrapper","mapArrowVariantToClass","displayName","usePopover","setReferenceElement","PopoverWithRef","useMemo","props"],"mappings":"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"}

package/dist/esm/Popover/Popover.module.scss.mjs

@@ -0,0 +1,34 @@
+var styles = {
+  "root": "Popover-module_root__OrmwT",
+  "cautionaryBox": "Popover-module_cautionaryBox__n7c9G",
+  "negativeBox": "Popover-module_negativeBox__dS4tj",
+  "positiveBox": "Popover-module_positiveBox__fUR-4",
+  "informativeBox": "Popover-module_informativeBox__c0Pen",
+  "defaultBox": "Popover-module_defaultBox__X9FWm",
+  "defaultArrow": "Popover-module_defaultArrow__6rN-3",
+  "informativeArrow": "Popover-module_informativeArrow__ZWiUz",
+  "positiveArrow": "Popover-module_positiveArrow__ApDyE",
+  "negativeArrow": "Popover-module_negativeArrow__BpNUL",
+  "cautionaryArrow": "Popover-module_cautionaryArrow__YRo-K",
+  "header": "Popover-module_header__b3DtD",
+  "container": "Popover-module_container__JwR7Q",
+  "icon": "Popover-module_icon__6S-3a",
+  "informativeIcon": "Popover-module_informativeIcon__WqmCv",
+  "positiveIcon": "Popover-module_positiveIcon__wyqmw",
+  "negativeIcon": "Popover-module_negativeIcon__Bb7-e",
+  "cautionaryIcon": "Popover-module_cautionaryIcon__rptji",
+  "close": "Popover-module_close__8h4Rt",
+  "arrowWrapper": "Popover-module_arrowWrapper__DiE3-",
+  "arrow": "Popover-module_arrow__PS4V6",
+  "arrowSideTop": "Popover-module_arrowSideTop__JoORK",
+  "arrowSideLeft": "Popover-module_arrowSideLeft__2Zhqb",
+  "arrowSideRight": "Popover-module_arrowSideRight__fHKWI",
+  "arrowSideBottom": "Popover-module_arrowSideBottom__mBr5k",
+  "arrowPositionCenter": "Popover-module_arrowPositionCenter__l8V0-",
+  "arrowPositionStart": "Popover-module_arrowPositionStart__eXyu0",
+  "arrowPositionEnd": "Popover-module_arrowPositionEnd__UY4MU",
+  "large": "Popover-module_large__-LH0l",
+  "singleLine": "Popover-module_singleLine__7il24"
+};
+export { styles as default };
+//# sourceMappingURL=Popover.module.scss.mjs.map

package/dist/esm/Popover/Popover.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/Popover/utils/classMappers.mjs

@@ -0,0 +1,88 @@
+import React from 'react';
+import 'tslib';
+import 'uuid';
+import '../../Icon/subcomponents/SVG/SVG.mjs';
+import { CautionIcon } from '../../Icon/CautionIcon.mjs';
+import { ExclamationIcon } from '../../Icon/ExclamationIcon.mjs';
+import { InformationIcon } from '../../Icon/InformationIcon.mjs';
+import { SuccessIcon } from '../../Icon/SuccessIcon.mjs';
+import styles from '../Popover.module.scss.mjs';
+var mapVariantToBoxClass = function (variant) {
+  switch (variant) {
+    case "informative":
+      return styles.informativeBox;
+    case "positive":
+      return styles.positiveBox;
+    case "negative":
+      return styles.negativeBox;
+    case "cautionary":
+      return styles.cautionaryBox;
+    default:
+      return styles.defaultBox;
+  }
+};
+var mapVariantToIconClass = function (variant) {
+  switch (variant) {
+    case "informative":
+      return styles.informativeIcon;
+    case "positive":
+      return styles.positiveIcon;
+    case "negative":
+      return styles.negativeIcon;
+    case "cautionary":
+      return styles.cautionaryIcon;
+    default:
+      return undefined;
+  }
+};
+var mapVariantToIcon = function (variant) {
+  switch (variant) {
+    case "informative":
+      return /*#__PURE__*/React.createElement(InformationIcon, {
+        role: "presentation"
+      });
+    case "positive":
+      return /*#__PURE__*/React.createElement(SuccessIcon, {
+        role: "presentation"
+      });
+    case "negative":
+      return /*#__PURE__*/React.createElement(ExclamationIcon, {
+        role: "presentation"
+      });
+    case "cautionary":
+      return /*#__PURE__*/React.createElement(CautionIcon, {
+        role: "presentation"
+      });
+    default:
+      return /*#__PURE__*/React.createElement(InformationIcon, {
+        role: "presentation"
+      });
+  }
+};
+var mapArrowVariantToClass = function (variant) {
+  switch (variant) {
+    case "informative":
+      return styles.informativeArrow;
+    case "positive":
+      return styles.positiveArrow;
+    case "negative":
+      return styles.negativeArrow;
+    case "cautionary":
+      return styles.cautionaryArrow;
+    default:
+      return styles.defaultArrow;
+  }
+};
+var mapSizeToClass = function (size) {
+  switch (size) {
+    case "large":
+      return styles.large;
+    default:
+      return "";
+  }
+};
+var mapLineVariant = function (singleLine) {
+  return singleLine ? styles.singleLine : "";
+};
+export { mapArrowVariantToClass, mapLineVariant, mapSizeToClass, mapVariantToBoxClass, mapVariantToIcon, mapVariantToIconClass };
+//# sourceMappingURL=classMappers.mjs.map

package/dist/esm/Popover/utils/classMappers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"classMappers.mjs","sources":["../../../../src/Popover/utils/classMappers.tsx"],"sourcesContent":["import React from \"react\"\nimport {\n  CautionIcon,\n  ExclamationIcon,\n  InformationIcon,\n  SuccessIcon,\n} from \"~components/Icon\"\nimport styles from \"../Popover.module.scss\"\nimport { PopoverVariant, PopoverSize } from \"../types\"\n\nexport const mapVariantToBoxClass = (variant: PopoverVariant): string => {\n  switch (variant) {\n    case \"informative\":\n      return styles.informativeBox\n    case \"positive\":\n      return styles.positiveBox\n    case \"negative\":\n      return styles.negativeBox\n    case \"cautionary\":\n      return styles.cautionaryBox\n    default:\n      return styles.defaultBox\n  }\n}\n\nexport const mapVariantToIconClass = (\n  variant: PopoverVariant\n): string | undefined => {\n  switch (variant) {\n    case \"informative\":\n      return styles.informativeIcon\n    case \"positive\":\n      return styles.positiveIcon\n    case \"negative\":\n      return styles.negativeIcon\n    case \"cautionary\":\n      return styles.cautionaryIcon\n    default:\n      return undefined\n  }\n}\n\nexport const mapVariantToIcon = (variant: PopoverVariant): JSX.Element => {\n  switch (variant) {\n    case \"informative\":\n      return <InformationIcon role=\"presentation\" />\n    case \"positive\":\n      return <SuccessIcon role=\"presentation\" />\n    case \"negative\":\n      return <ExclamationIcon role=\"presentation\" />\n    case \"cautionary\":\n      return <CautionIcon role=\"presentation\" />\n    default:\n      return <InformationIcon role=\"presentation\" />\n  }\n}\n\nexport const mapArrowVariantToClass = (variant: PopoverVariant): string => {\n  switch (variant) {\n    case \"informative\":\n      return styles.informativeArrow\n    case \"positive\":\n      return styles.positiveArrow\n    case \"negative\":\n      return styles.negativeArrow\n    case \"cautionary\":\n      return styles.cautionaryArrow\n    default:\n      return styles.defaultArrow\n  }\n}\n\nexport const mapSizeToClass = (size: PopoverSize): string => {\n  switch (size) {\n    case \"large\":\n      return styles.large\n    default:\n      return \"\"\n  }\n}\n\nexport const mapLineVariant = (singleLine: boolean): string =>\n  singleLine ? styles.singleLine : \"\"\n"],"names":["mapVariantToBoxClass","variant","styles","informativeBox","positiveBox","negativeBox","cautionaryBox","defaultBox","mapVariantToIconClass","informativeIcon","positiveIcon","negativeIcon","cautionaryIcon","undefined","mapVariantToIcon","React","InformationIcon","role","SuccessIcon","ExclamationIcon","CautionIcon","mapArrowVariantToClass","informativeArrow","positiveArrow","negativeArrow","cautionaryArrow","defaultArrow","mapSizeToClass","size","large","mapLineVariant","singleLine"],"mappings":";;;;;;;;;AAUO,IAAMA,oBAAoB,GAAG,SAAAA,CAACC,OAAuB,EAAA;EAC1D,QAAQA,OAAO;IACb,KAAK,aAAa;MAChB,OAAOC,MAAM,CAACC,cAAc;IAC9B,KAAK,UAAU;MACb,OAAOD,MAAM,CAACE,WAAW;IAC3B,KAAK,UAAU;MACb,OAAOF,MAAM,CAACG,WAAW;IAC3B,KAAK,YAAY;MACf,OAAOH,MAAM,CAACI,aAAa;IAC7B;MACE,OAAOJ,MAAM,CAACK,UAAU;EAC3B;AACH,CAAC;AAEM,IAAMC,qBAAqB,GAAG,SAAAA,CACnCP,OAAuB,EAAA;EAEvB,QAAQA,OAAO;IACb,KAAK,aAAa;MAChB,OAAOC,MAAM,CAACO,eAAe;IAC/B,KAAK,UAAU;MACb,OAAOP,MAAM,CAACQ,YAAY;IAC5B,KAAK,UAAU;MACb,OAAOR,MAAM,CAACS,YAAY;IAC5B,KAAK,YAAY;MACf,OAAOT,MAAM,CAACU,cAAc;IAC9B;MACE,OAAOC,SAAS;EACnB;AACH,CAAC;AAEM,IAAMC,gBAAgB,GAAG,SAAAA,CAACb,OAAuB,EAAA;EACtD,QAAQA,OAAO;IACb,KAAK,aAAa;MAChB,oBAAOc,oBAACC,eAAe,EAAA;QAACC,IAAI,EAAC;MAAc,EAAG;IAChD,KAAK,UAAU;MACb,oBAAOF,oBAACG,WAAW,EAAA;QAACD,IAAI,EAAC;MAAc,EAAG;IAC5C,KAAK,UAAU;MACb,oBAAOF,oBAACI,eAAe,EAAA;QAACF,IAAI,EAAC;MAAc,EAAG;IAChD,KAAK,YAAY;MACf,oBAAOF,oBAACK,WAAW,EAAA;QAACH,IAAI,EAAC;MAAc,EAAG;IAC5C;MACE,oBAAOF,oBAACC,eAAe,EAAA;QAACC,IAAI,EAAC;MAAc,EAAG;EACjD;AACH,CAAC;AAEM,IAAMI,sBAAsB,GAAG,SAAAA,CAACpB,OAAuB,EAAA;EAC5D,QAAQA,OAAO;IACb,KAAK,aAAa;MAChB,OAAOC,MAAM,CAACoB,gBAAgB;IAChC,KAAK,UAAU;MACb,OAAOpB,MAAM,CAACqB,aAAa;IAC7B,KAAK,UAAU;MACb,OAAOrB,MAAM,CAACsB,aAAa;IAC7B,KAAK,YAAY;MACf,OAAOtB,MAAM,CAACuB,eAAe;IAC/B;MACE,OAAOvB,MAAM,CAACwB,YAAY;EAC7B;AACH,CAAC;AAEM,IAAMC,cAAc,GAAG,SAAAA,CAACC,IAAiB,EAAA;EAC9C,QAAQA,IAAI;IACV,KAAK,OAAO;MACV,OAAO1B,MAAM,CAAC2B,KAAK;IACrB;MACE,OAAO,EAAE;EACZ;AACH,CAAC;AAEM,IAAMC,cAAc,GAAG,SAAAA,CAACC,UAAmB,EAAA;EAChD,OAAAA,UAAU,GAAG7B,MAAM,CAAC6B,UAAU,GAAG,EAAE;AAAnC,CAAA;"}

package/dist/esm/Radio/Radio/Radio.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.mjs","sources":["../../../../src/Radio/Radio/Radio.tsx"],"sourcesContent":["import React, { InputHTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./Radio.module.scss\"\n\nexport type RadioProps = OverrideClassName<\n  Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"checked\">\n> & {\n  /**\n   * This needs to be enforced to ensure the Radio always gets an id to match a label when composed.\n   */\n  id: string\n  name: string\n  value: string\n  selectedStatus?: boolean\n  reversed?: boolean\n}\n\nconst renderSelected = (\n  selectedStatus: boolean,\n  reversed: boolean\n): React.ReactNode => {\n  if (selectedStatus) {\n    return (\n      <div className={classnames(styles.icon, reversed && styles.reversed)} />\n    )\n  }\n  return\n}\n\nexport const Radio = ({\n  name,\n  value,\n  selectedStatus = false,\n  reversed = false,\n  onChange,\n  classNameOverride,\n  ...restProps\n}: RadioProps): JSX.Element => (\n  // @todo: Move classNameOverride to span\n  <span>\n    <input\n      type=\"radio\"\n      name={name}\n      value={value}\n      checked={selectedStatus}\n      className={classnames(\n        styles.radioInput,\n        classNameOverride,\n        reversed && styles.reversed\n      )}\n      onChange={onChange}\n      readOnly={onChange === undefined}\n      {...restProps}\n    />\n    <span className={classnames(styles.box, reversed && styles.reversed)}>\n      {renderSelected(selectedStatus, reversed)}\n    </span>\n  </span>\n)\n\nRadio.displayName = \"Radio\"\n"],"names":["renderSelected","selectedStatus","reversed","React","createElement","className","classnames","styles","icon","Radio","_a","name","value","_b","_c","onChange","classNameOverride","restProps","__rest","__assign","type","checked","radioInput","readOnly","undefined","box","displayName"],"mappings":";;;;AAkBA,IAAMA,cAAc,GAAG,SAAAA,CACrBC,cAAuB,EACvBC,QAAiB,EAAA;EAEjB,IAAID,cAAc,EAAE;IAClB,oBACEE,KAAK,CAAAC,aAAA,CAAA,KAAA,EAAA;MAAAC,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACC,IAAI,EAAEN,QAAQ,IAAIK,MAAM,CAACL,QAAQ;IAAC,CAAA,CAAI;EAE3E;EACD;AACF,CAAC;AAAA,MAEYO,KAAK;EAAA,MAALA,KAAK,GAAG,SAAAA,CAACC,EAQT,EAAA;IAPX,IAAAC,IAAI,GAAAD,EAAA,CAAAC,IAAA;MACJC,KAAK,GAAAF,EAAA,CAAAE,KAAA;MACLC,EAAsB,GAAAH,EAAA,CAAAT,cAAA;MAAtBA,cAAc,GAAAY,EAAA,KAAA,KAAA,CAAA,GAAG,KAAK,GAAAA,EAAA;MACtBC,EAAA,GAAAJ,EAAA,CAAAR,QAAgB;MAAhBA,QAAQ,GAAGY,EAAA,KAAA,KAAA,CAAA,GAAA,KAAK,GAAAA,EAAA;MAChBC,QAAQ,GAAAL,EAAA,CAAAK,QAAA;MACRC,iBAAiB,GAAAN,EAAA,CAAAM,iBAAA;MACdC,SAAS,GAAAC,MAAA,CAAAR,EAAA,EAPQ,gFAQrB,CADa;IACiB;MAAA;;MAE7BP,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA,IAAA,eACED,KACE,CAAAC,aAAA,CAAA,OAAA,EAAAe,QAAA,CAAA;QAAAC,IAAI,EAAC,OAAO;QACZT,IAAI,EAAEA,IAAI;QACVC,KAAK,EAAEA,KAAK;QACZS,OAAO,EAAEpB,cAAc;QACvBI,SAAS,EAAEC,UAAU,CACnBC,MAAM,CAACe,UAAU,EACjBN,iBAAiB,EACjBd,QAAQ,IAAIK,MAAM,CAACL,QAAQ,CAC5B;QACDa,QAAQ,EAAEA,QAAQ;QAClBQ,QAAQ,EAAER,QAAQ,KAAKS;MAAS,CAAA,EAC5BP,SAAS,CACb,CAAA,eACFd,KAAM,CAAAC,aAAA,CAAA,MAAA,EAAA;QAAAC,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACkB,GAAG,EAAEvB,QAAQ,IAAIK,MAAM,CAACL,QAAQ;OAAC,EACjEF,cAAc,CAACC,cAAc,EAAEC,QAAQ,CAAC,CACpC;IACF;GACR;EAEDO,KAAK,CAACiB,WAAW,GAAG,OAAO;EAAA,OA/BdjB,KAAK;AAAA;"}
+{"version":3,"file":"Radio.mjs","sources":["../../../../src/Radio/Radio/Radio.tsx"],"sourcesContent":["import React, { InputHTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./Radio.module.scss\"\n\nexport type RadioProps = OverrideClassName<\n  Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"id\" | \"name\" | \"value\" | \"checked\" | \"type\"\n  >\n> & {\n  /** Required to ensure the Radio always gets an ID to match a label when composed. */\n  id: string\n  /** Unique identifier for the group this Radio belongs to. Required for keyboard navigation of the group. See also [Defining a radio group](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#defining_a_radio_group) on MDN. E.g. the question ID for which this is one possible answer to. */\n  name: string\n  /** The value for this form field when this radio button is selected. */\n  value?: string | readonly string[] | number\n  selectedStatus?: boolean\n  reversed?: boolean\n}\n\nconst renderSelected = (\n  selectedStatus: boolean,\n  reversed: boolean\n): React.ReactNode => {\n  if (selectedStatus) {\n    return (\n      <div className={classnames(styles.icon, reversed && styles.reversed)} />\n    )\n  }\n  return\n}\n\nexport const Radio = ({\n  name,\n  value,\n  selectedStatus = false,\n  reversed = false,\n  onChange,\n  classNameOverride,\n  ...restProps\n}: RadioProps): JSX.Element => (\n  // @todo: Move classNameOverride to span\n  <span>\n    <input\n      type=\"radio\"\n      name={name}\n      value={value}\n      checked={selectedStatus}\n      className={classnames(\n        styles.radioInput,\n        classNameOverride,\n        reversed && styles.reversed\n      )}\n      onChange={onChange}\n      readOnly={onChange === undefined}\n      {...restProps}\n    />\n    <span className={classnames(styles.box, reversed && styles.reversed)}>\n      {renderSelected(selectedStatus, reversed)}\n    </span>\n  </span>\n)\n\nRadio.displayName = \"Radio\"\n"],"names":["renderSelected","selectedStatus","reversed","React","createElement","className","classnames","styles","icon","Radio","_a","name","value","_b","_c","onChange","classNameOverride","restProps","__rest","__assign","type","checked","radioInput","readOnly","undefined","box","displayName"],"mappings":";;;;AAqBA,IAAMA,cAAc,GAAG,SAAAA,CACrBC,cAAuB,EACvBC,QAAiB,EAAA;EAEjB,IAAID,cAAc,EAAE;IAClB,oBACEE,KAAK,CAAAC,aAAA,CAAA,KAAA,EAAA;MAAAC,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACC,IAAI,EAAEN,QAAQ,IAAIK,MAAM,CAACL,QAAQ;IAAC,CAAA,CAAI;EAE3E;EACD;AACF,CAAC;AAAA,MAEYO,KAAK;EAAA,MAALA,KAAK,GAAG,SAAAA,CAACC,EAQT,EAAA;IAPX,IAAAC,IAAI,GAAAD,EAAA,CAAAC,IAAA;MACJC,KAAK,GAAAF,EAAA,CAAAE,KAAA;MACLC,EAAsB,GAAAH,EAAA,CAAAT,cAAA;MAAtBA,cAAc,GAAAY,EAAA,KAAA,KAAA,CAAA,GAAG,KAAK,GAAAA,EAAA;MACtBC,EAAA,GAAAJ,EAAA,CAAAR,QAAgB;MAAhBA,QAAQ,GAAGY,EAAA,KAAA,KAAA,CAAA,GAAA,KAAK,GAAAA,EAAA;MAChBC,QAAQ,GAAAL,EAAA,CAAAK,QAAA;MACRC,iBAAiB,GAAAN,EAAA,CAAAM,iBAAA;MACdC,SAAS,GAAAC,MAAA,CAAAR,EAAA,EAPQ,gFAQrB,CADa;IACiB;MAAA;;MAE7BP,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA,IAAA,eACED,KACE,CAAAC,aAAA,CAAA,OAAA,EAAAe,QAAA,CAAA;QAAAC,IAAI,EAAC,OAAO;QACZT,IAAI,EAAEA,IAAI;QACVC,KAAK,EAAEA,KAAK;QACZS,OAAO,EAAEpB,cAAc;QACvBI,SAAS,EAAEC,UAAU,CACnBC,MAAM,CAACe,UAAU,EACjBN,iBAAiB,EACjBd,QAAQ,IAAIK,MAAM,CAACL,QAAQ,CAC5B;QACDa,QAAQ,EAAEA,QAAQ;QAClBQ,QAAQ,EAAER,QAAQ,KAAKS;MAAS,CAAA,EAC5BP,SAAS,CACb,CAAA,eACFd,KAAM,CAAAC,aAAA,CAAA,MAAA,EAAA;QAAAC,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACkB,GAAG,EAAEvB,QAAQ,IAAIK,MAAM,CAACL,QAAQ;OAAC,EACjEF,cAAc,CAACC,cAAc,EAAEC,QAAQ,CAAC,CACpC;IACF;GACR;EAEDO,KAAK,CAACiB,WAAW,GAAG,OAAO;EAAA,OA/BdjB,KAAK;AAAA;"}

package/dist/esm/Radio/RadioGroup/RadioGroup.mjs

@@ -13,11 +13,11 @@ const RadioGroup = /*#__PURE__*/function () {
       _c = _a.reversed,
       reversed = _c === void 0 ? false : _c,
       classNameOverride = _a.classNameOverride,
-      dataTestId = _a["data-testId"],
-      restProps = __rest(_a, ["children", "labelId", "labelText", "noBottomMargin", "reversed", "classNameOverride", "data-testId"]);
+      dataTestId = _a["data-testid"],
+      restProps = __rest(_a, ["children", "labelId", "labelText", "noBottomMargin", "reversed", "classNameOverride", "data-testid"]);
     var labelId = propsLabelId !== null && propsLabelId !== void 0 ? propsLabelId : useId();
     return /*#__PURE__*/React.createElement("div", __assign({
-      "data-testId": dataTestId,
+      "data-testid": dataTestId,
       className: classnames(styles.radioGroupContainer, classNameOverride, noBottomMargin && styles.noBottomMargin, reversed && styles.reversed),
       role: "radiogroup",
       "aria-labelledby": labelId
@@ -25,7 +25,7 @@ const RadioGroup = /*#__PURE__*/function () {
       className: styles.radioGroupLabel
     }, /*#__PURE__*/React.createElement(Label, {
       id: labelId,
-      "data-testId": dataTestId && "".concat(dataTestId, "-field-label"),
+      "data-testid": dataTestId && "".concat(dataTestId, "-field-label"),
       labelText: labelText,
       labelType: "text",
       reversed: reversed

package/dist/esm/Radio/RadioGroup/RadioGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.mjs","sources":["../../../../src/Radio/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React, { HTMLAttributes, useId } from \"react\"\nimport classnames from \"classnames\"\nimport { Label } from \"~components/Label\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./RadioGroup.module.scss\"\n\nexport type RadioGroupProps = OverrideClassName<\n  HTMLAttributes<HTMLDivElement>\n> & {\n  children?: React.ReactNode\n  labelText: string | React.ReactNode\n  labelId?: string\n  noBottomMargin?: boolean\n  reversed?: boolean\n  \"data-testId\"?: string\n}\n\nexport const RadioGroup = ({\n  children,\n  labelId: propsLabelId,\n  labelText,\n  noBottomMargin = false,\n  reversed = false,\n  classNameOverride,\n  \"data-testId\": dataTestId,\n  ...restProps\n}: RadioGroupProps): JSX.Element => {\n  const labelId = propsLabelId ?? useId()\n\n  return (\n    <div\n      data-testId={dataTestId}\n      className={classnames(\n        styles.radioGroupContainer,\n        classNameOverride,\n        noBottomMargin && styles.noBottomMargin,\n        reversed && styles.reversed\n      )}\n      role=\"radiogroup\"\n      aria-labelledby={labelId}\n      {...restProps}\n    >\n      <div className={styles.radioGroupLabel}>\n        <Label\n          id={labelId}\n          data-testId={dataTestId && `${dataTestId}-field-label`}\n          labelText={labelText}\n          labelType=\"text\"\n          reversed={reversed}\n        />\n      </div>\n      {children}\n    </div>\n  )\n}\n\nRadioGroup.displayName = \"RadioGroup\"\n"],"names":["RadioGroup","_a","children","propsLabelId","labelText","_b","noBottomMargin","_c","reversed","classNameOverride","dataTestId","restProps","__rest","labelId","useId","React","createElement","__assign","className","classnames","styles","radioGroupContainer","role","radioGroupLabel","Label","id","concat","labelType","displayName"],"mappings":";;;;;MAiBaA,UAAU;EAAA,MAAVA,UAAU,GAAG,SAAAA,CAACC,EAST,EAAA;IARhB,IAAAC,QAAQ,GAAAD,EAAA,CAAAC,QAAA;MACCC,YAAY,aAAA;MACrBC,SAAS,GAAAH,EAAA,CAAAG,SAAA;MACTC,EAAsB,GAAAJ,EAAA,CAAAK,cAAA;MAAtBA,cAAc,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,KAAK,GAAAA,EAAA;MACtBE,EAAgB,GAAAN,EAAA,CAAAO,QAAA;MAAhBA,QAAQ,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,KAAK,GAAAA,EAAA;MAChBE,iBAAiB,GAAAR,EAAA,CAAAQ,iBAAA;MACFC,UAAU,GAAAT,EAAA,CAAA,aAAA,CAAA;MACtBU,SAAS,GAAAC,MAAA,CAAAX,EAAA,EARa,sGAS1B,CADa;IAEZ,IAAMY,OAAO,GAAGV,YAAY,KAAZ,IAAA,IAAAA,YAAY,cAAZA,YAAY,GAAIW,KAAK,EAAE;IAEvC,oBACEC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,QAAA,CAAA;MAAA,aAAA,EACeP,UAAU;MACvBQ,SAAS,EAAEC,UAAU,CACnBC,MAAM,CAACC,mBAAmB,EAC1BZ,iBAAiB,EACjBH,cAAc,IAAIc,MAAM,CAACd,cAAc,EACvCE,QAAQ,IAAIY,MAAM,CAACZ,QAAQ,CAC5B;MACDc,IAAI,EAAC,YAAY;MACA,iBAAA,EAAAT;IAAO,GACpBF,SAAS,CAAA,eAEbI,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;MAAKE,SAAS,EAAEE,MAAM,CAACG;IAAe,CAAA,eACpCR,KAAC,CAAAC,aAAA,CAAAQ,KAAK,EACJ;MAAAC,EAAE,EAAEZ,OAAO;qBACEH,UAAU,IAAI,EAAG,CAAAgB,MAAA,CAAAhB,UAAU,EAAc,cAAA,CAAA;MACtDN,SAAS,EAAEA,SAAS;MACpBuB,SAAS,EAAC,MAAM;MAChBnB,QAAQ,EAAEA;IAAQ,CAAA,CAClB,CACE,EACLN,QAAQ,CACL;EAEV,CAAC;EAEDF,UAAU,CAAC4B,WAAW,GAAG,YAAY;EAAA,OAvCxB5B,UAAU;AAAA;"}
+{"version":3,"file":"RadioGroup.mjs","sources":["../../../../src/Radio/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React, { HTMLAttributes, useId } from \"react\"\nimport classnames from \"classnames\"\nimport { Label } from \"~components/Label\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./RadioGroup.module.scss\"\n\nexport type RadioGroupProps = OverrideClassName<\n  HTMLAttributes<HTMLDivElement>\n> & {\n  children?: React.ReactNode\n  labelText: string | React.ReactNode\n  labelId?: string\n  noBottomMargin?: boolean\n  reversed?: boolean\n  \"data-testid\"?: string\n}\n\nexport const RadioGroup = ({\n  children,\n  labelId: propsLabelId,\n  labelText,\n  noBottomMargin = false,\n  reversed = false,\n  classNameOverride,\n  \"data-testid\": dataTestId,\n  ...restProps\n}: RadioGroupProps): JSX.Element => {\n  const labelId = propsLabelId ?? useId()\n\n  return (\n    <div\n      data-testid={dataTestId}\n      className={classnames(\n        styles.radioGroupContainer,\n        classNameOverride,\n        noBottomMargin && styles.noBottomMargin,\n        reversed && styles.reversed\n      )}\n      role=\"radiogroup\"\n      aria-labelledby={labelId}\n      {...restProps}\n    >\n      <div className={styles.radioGroupLabel}>\n        <Label\n          id={labelId}\n          data-testid={dataTestId && `${dataTestId}-field-label`}\n          labelText={labelText}\n          labelType=\"text\"\n          reversed={reversed}\n        />\n      </div>\n      {children}\n    </div>\n  )\n}\n\nRadioGroup.displayName = \"RadioGroup\"\n"],"names":["RadioGroup","_a","children","propsLabelId","labelText","_b","noBottomMargin","_c","reversed","classNameOverride","dataTestId","restProps","__rest","labelId","useId","React","createElement","__assign","className","classnames","styles","radioGroupContainer","role","radioGroupLabel","Label","id","concat","labelType","displayName"],"mappings":";;;;;MAiBaA,UAAU;EAAA,MAAVA,UAAU,GAAG,SAAAA,CAACC,EAST,EAAA;IARhB,IAAAC,QAAQ,GAAAD,EAAA,CAAAC,QAAA;MACCC,YAAY,aAAA;MACrBC,SAAS,GAAAH,EAAA,CAAAG,SAAA;MACTC,EAAsB,GAAAJ,EAAA,CAAAK,cAAA;MAAtBA,cAAc,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,KAAK,GAAAA,EAAA;MACtBE,EAAgB,GAAAN,EAAA,CAAAO,QAAA;MAAhBA,QAAQ,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,KAAK,GAAAA,EAAA;MAChBE,iBAAiB,GAAAR,EAAA,CAAAQ,iBAAA;MACFC,UAAU,GAAAT,EAAA,CAAA,aAAA,CAAA;MACtBU,SAAS,GAAAC,MAAA,CAAAX,EAAA,EARa,sGAS1B,CADa;IAEZ,IAAMY,OAAO,GAAGV,YAAY,KAAZ,IAAA,IAAAA,YAAY,cAAZA,YAAY,GAAIW,KAAK,EAAE;IAEvC,oBACEC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,QAAA,CAAA;MAAA,aAAA,EACeP,UAAU;MACvBQ,SAAS,EAAEC,UAAU,CACnBC,MAAM,CAACC,mBAAmB,EAC1BZ,iBAAiB,EACjBH,cAAc,IAAIc,MAAM,CAACd,cAAc,EACvCE,QAAQ,IAAIY,MAAM,CAACZ,QAAQ,CAC5B;MACDc,IAAI,EAAC,YAAY;MACA,iBAAA,EAAAT;IAAO,GACpBF,SAAS,CAAA,eAEbI,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;MAAKE,SAAS,EAAEE,MAAM,CAACG;IAAe,CAAA,eACpCR,KAAC,CAAAC,aAAA,CAAAQ,KAAK,EACJ;MAAAC,EAAE,EAAEZ,OAAO;qBACEH,UAAU,IAAI,EAAG,CAAAgB,MAAA,CAAAhB,UAAU,EAAc,cAAA,CAAA;MACtDN,SAAS,EAAEA,SAAS;MACpBuB,SAAS,EAAC,MAAM;MAChBnB,QAAQ,EAAEA;IAAQ,CAAA,CAClB,CACE,EACLN,QAAQ,CACL;EAEV,CAAC;EAEDF,UAAU,CAAC4B,WAAW,GAAG,YAAY;EAAA,OAvCxB5B,UAAU;AAAA;"}

package/dist/esm/Select/Select.mjs

@@ -0,0 +1,191 @@
+import { __rest, __assign } from 'tslib';
+import React, { useId, useState } from 'react';
+import classnames from 'classnames';
+import ReactSelect, { components } from 'react-select';
+import Async from 'react-select/async';
+import { FieldMessage } from '../FieldMessage/FieldMessage.mjs';
+import 'uuid';
+import '../Icon/subcomponents/SVG/SVG.mjs';
+import { ChevronDownIcon } from '../Icon/ChevronDownIcon.mjs';
+import { ChevronUpIcon } from '../Icon/ChevronUpIcon.mjs';
+import { ClearIcon } from '../Icon/ClearIcon.mjs';
+import { Label } from '../Label/Label.mjs';
+import { Tag } from '../Tag/Tag.mjs';
+import styles from './Select.module.scss.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-select--docs Storybook}
+ */
+const Select = /*#__PURE__*/function () {
+  const Select = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+    var _b = _a.variant,
+      variant = _b === void 0 ? "default" : _b,
+      _c = _a.status,
+      status = _c === void 0 ? "default" : _c,
+      _d = _a.reversed,
+      reversed = _d === void 0 ? false : _d,
+      label = _a.label,
+      validationMessage = _a.validationMessage,
+      description = _a.description,
+      propsFullWidth = _a.fullWidth,
+      propsClassName = _a.className,
+      isDisabled = _a.isDisabled,
+      props = __rest(_a, ["variant", "status", "reversed", "label", "validationMessage", "description", "fullWidth", "className", "isDisabled"]);
+    var reactId = useId();
+    // the default for fullWidth depends on the variant
+    var fullWidth = propsFullWidth != null ? propsFullWidth : variant === "secondary" || variant === "secondary-small" ? false : true;
+    var classes = classnames(propsClassName, styles.specificityIncreaser, (!reversed || variant === "default") && styles["default"], reversed && styles.reversed, variant === "secondary" && styles.secondary, variant === "secondary-small" && styles.secondarySmall, !fullWidth && styles.notFullWidth, isDisabled && styles.disabled, status === "error" && styles.error);
+    var labelId = useState(label ? reactId : undefined)[0];
+    return /*#__PURE__*/React.createElement(React.Fragment, null, label ? /*#__PURE__*/React.createElement(Label, {
+      reversed: reversed,
+      id: labelId
+    }, label) : null, /*#__PURE__*/React.createElement(ReactSelect, __assign({}, props, {
+      ref: ref,
+      "aria-labelledby": labelId,
+      components: {
+        Control: Control,
+        Placeholder: Placeholder,
+        DropdownIndicator: DropdownIndicator,
+        Menu: Menu,
+        GroupHeading: GroupHeading,
+        Option: Option,
+        NoOptionsMessage: NoOptionsMessage,
+        Input: Input,
+        SingleValue: SingleValue,
+        MultiValue: MultiValue,
+        IndicatorsContainer: IndicatorsContainer,
+        ValueContainer: ValueContainer,
+        ClearIndicator: ClearIndicator,
+        IndicatorSeparator: null
+      },
+      className: classes
+    })), validationMessage ? /*#__PURE__*/React.createElement(FieldMessage, {
+      message: validationMessage,
+      status: status
+    }) : null, description ? /*#__PURE__*/React.createElement(FieldMessage, {
+      message: description
+    }) : null);
+  });
+  Select.displayName = "Select";
+  return Select;
+}();
+const AsyncSelect = /*#__PURE__*/function () {
+  const AsyncSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+    var propsClassName = _a.className,
+      props = __rest(_a, ["className"]);
+    return /*#__PURE__*/React.createElement(Async, __assign({}, props, {
+      ref: ref,
+      components: {
+        Control: Control,
+        Placeholder: Placeholder,
+        DropdownIndicator: DropdownIndicator,
+        Menu: Menu,
+        Option: Option,
+        NoOptionsMessage: NoOptionsMessage,
+        Input: Input,
+        SingleValue: SingleValue,
+        MultiValue: MultiValue,
+        IndicatorsContainer: IndicatorsContainer,
+        ValueContainer: ValueContainer,
+        ClearIndicator: undefined,
+        IndicatorSeparator: null,
+        LoadingMessage: LoadingMessage
+      },
+      className: classnames(styles.specificityIncreaser, propsClassName)
+    }));
+  });
+  AsyncSelect.displayName = "AsyncSelect";
+  return AsyncSelect;
+}();
+var Control = function (props) {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-automation-id": "Select__Control"
+  }, /*#__PURE__*/React.createElement(components.Control, __assign({}, props, {
+    className: classnames(styles.control, props.isFocused && styles.focusedControl, props.isDisabled && styles.disabled)
+  })));
+};
+var Placeholder = function (props) {
+  return /*#__PURE__*/React.createElement(components.Placeholder, __assign({}, props, {
+    className: styles.placeholderOverrides
+  }), /*#__PURE__*/React.createElement("span", {
+    className: styles.placeholder
+  }, props.children));
+};
+var DropdownIndicator = function (props) {
+  return /*#__PURE__*/React.createElement(components.DropdownIndicator, __assign({}, props, {
+    className: styles.dropdownIndicator
+  }), props.selectProps.menuIsOpen ? /*#__PURE__*/React.createElement(ChevronUpIcon, {
+    role: "presentation"
+  }) : /*#__PURE__*/React.createElement(ChevronDownIcon, {
+    role: "presentation"
+  }));
+};
+var LoadingMessage = function (props) {
+  return /*#__PURE__*/React.createElement(components.LoadingMessage, __assign({}, props, {
+    className: styles.loadingMessage
+  }));
+};
+var Menu = function (props) {
+  return /*#__PURE__*/React.createElement(components.Menu, __assign({}, props, {
+    className: styles.menu
+  }));
+};
+var GroupHeading = function (props) {
+  return /*#__PURE__*/React.createElement(components.GroupHeading, __assign({}, props, {
+    className: styles.groupHeading
+  }));
+};
+var Option = function (props) {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-automation-id": "Select__Option"
+  }, /*#__PURE__*/React.createElement(components.Option, __assign({}, props, {
+    className: classnames(styles.option, props.isFocused && styles.focusedOption, props.isSelected && styles.selectedOption, props.isDisabled && styles.disabledOption)
+  })));
+};
+var NoOptionsMessage = function (props) {
+  return /*#__PURE__*/React.createElement(components.NoOptionsMessage, __assign({}, props), /*#__PURE__*/React.createElement("span", {
+    className: styles.noOptionsMessage
+  }, props.children));
+};
+var SingleValue = function (props) {
+  return /*#__PURE__*/React.createElement(components.SingleValue, __assign({}, props, {
+    className: styles.singleValueOverrides
+  }), /*#__PURE__*/React.createElement("span", {
+    className: styles.singleValue
+  }, props.children));
+};
+var MultiValue = function (props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.multiValue
+  }, /*#__PURE__*/React.createElement(Tag, {
+    variant: "default",
+    dismissible: true,
+    inline: true,
+    onDismiss: props.removeProps.onClick
+  }, props.children));
+};
+var IndicatorsContainer = function (props) {
+  return /*#__PURE__*/React.createElement(components.IndicatorsContainer, __assign({}, props, {
+    className: styles.indicatorsContainer
+  }));
+};
+var Input = function (props) {
+  return /*#__PURE__*/React.createElement(components.Input, __assign({
+    className: styles.input
+  }, props));
+};
+var ValueContainer = function (props) {
+  return /*#__PURE__*/React.createElement(components.ValueContainer, __assign({}, props, {
+    className: styles.valueContainer
+  }));
+};
+var ClearIndicator = function (props) {
+  return /*#__PURE__*/React.createElement(components.ClearIndicator, __assign({}, props, {
+    className: styles.clearIndicator
+  }), /*#__PURE__*/React.createElement(ClearIcon, {
+    role: "presentation"
+  }));
+};
+export { AsyncSelect, Select };
+//# sourceMappingURL=Select.mjs.map