@kaizen/components 0.0.0-canary-bundler--fix-style-inject-20240522033251 → 0.0.0-canary-declare-inject-within-20240522052630

package/dist/esm/TextField/TextField.mjs

@@ -0,0 +1,82 @@
+import { __rest, __assign } from 'tslib';
+import React, { useId } from 'react';
+import classnames from 'classnames';
+import { FieldGroup } from '../FieldGroup/FieldGroup.mjs';
+import { FieldMessage } from '../FieldMessage/FieldMessage.mjs';
+import '../Icon/subcomponents/SVG/SVG.mjs';
+import { SuccessIcon } from '../Icon/SuccessIcon.mjs';
+import { Input } from '../Input/Input/Input.mjs';
+import '../Input/InputRange/InputRange.mjs';
+import '../Input/InputSearch/InputSearch.mjs';
+import { Label } from '../Label/Label.mjs';
+import styles from './TextField.module.scss.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081928705/Text+Field Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-text-field--docs Storybook}
+ */
+const TextField = /*#__PURE__*/function () {
+  const TextField = function (_a) {
+    var propsId = _a.id,
+      labelText = _a.labelText,
+      _b = _a.inline,
+      inline = _b === void 0 ? false : _b,
+      icon = _a.icon,
+      validationMessage = _a.validationMessage,
+      description = _a.description,
+      status = _a.status,
+      _c = _a.reversed,
+      reversed = _c === void 0 ? false : _c,
+      disabled = _a.disabled,
+      restProps = __rest(_a, ["id", "labelText", "inline", "icon", "validationMessage", "description", "status", "reversed", "disabled"]);
+    var id = propsId !== null && propsId !== void 0 ? propsId : useId();
+    var validationMessageAria = validationMessage ? "".concat(id, "-field-validation-message") : "";
+    var descriptionAria = description ? "".concat(id, "-field-description") : "";
+    var ariaDescribedBy = [validationMessageAria, descriptionAria].reduce(function (prev, curr) {
+      return curr ? [curr, prev].join(" ") : prev;
+    }, "");
+    return /*#__PURE__*/React.createElement(FieldGroup, {
+      id: "".concat(id, "-field-group"),
+      "data-testid": "".concat(id, "-field-group"),
+      inline: inline,
+      classNameOverride: classnames(styles.withLabel, disabled && styles.withDisabled)
+    }, /*#__PURE__*/React.createElement(Label, {
+      id: "".concat(id, "-field-label"),
+      "data-testid": "".concat(id, "-field-label"),
+      htmlFor: "".concat(id, "-field-input"),
+      labelText: labelText,
+      reversed: reversed,
+      disabled: disabled
+    }), /*#__PURE__*/React.createElement(Input, __assign({
+      id: "".concat(id, "-field-input"),
+      "data-testid": "".concat(id, "-field-input"),
+      "aria-describedby": ariaDescribedBy,
+      classNameOverride: styles.input,
+      disabled: disabled,
+      reversed: reversed,
+      status: status,
+      startIconAdornment: icon,
+      endIconAdornment: status === "success" && ( /*#__PURE__*/React.createElement("div", {
+        className: classnames(styles.success, disabled && styles.disabled)
+      }, /*#__PURE__*/React.createElement(SuccessIcon, {
+        role: "presentation"
+      })))
+    }, restProps)), validationMessage && ( /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.message, disabled && styles.disabled)
+    }, /*#__PURE__*/React.createElement(FieldMessage, {
+      id: validationMessageAria,
+      message: validationMessage,
+      status: status,
+      reversed: reversed
+    }))), description && ( /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.message, disabled && styles.disabled)
+    }, /*#__PURE__*/React.createElement(FieldMessage, {
+      id: descriptionAria,
+      message: description,
+      reversed: reversed
+    }))));
+  };
+  TextField.displayName = "TextField";
+  return TextField;
+}();
+export { TextField };

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

@@ -0,0 +1,37 @@
+var css_248z = ".TextField-module_input__CEokl{margin-top:var(--spacing-6,.375rem)}.TextField-module_success__pMLcV{animation-duration:var(--animation-duration-slow,.4s);animation-fill-mode:forwards;animation-name:TextField-module_fade-0-to-1__Ac-99;color:var(--color-green-500,#44a289)}.TextField-module_withReversed__agi-Q .TextField-module_success__pMLcV{color:var(--color-green-400,#5dcaad)}.TextField-module_success__pMLcV.TextField-module_disabled__gS8tk{color:rgba(var(--color-green-500-rgb,68,162,137),.3)}.TextField-module_withReversed__agi-Q .TextField-module_success__pMLcV.TextField-module_disabled__gS8tk{color:rgba(var(--color-green-400-rgb,93,202,173),.3)}.TextField-module_error__7S-f2{animation-duration:var(--animation-duration-slow,.4s);animation-fill-mode:forwards;animation-name:TextField-module_fade-0-to-1__Ac-99;color:var(--color-red-100,#fdeaee)}.TextField-module_withReversed__agi-Q .TextField-module_error__7S-f2{color:var(--color-purple-700,#4a234d)}.TextField-module_caution__3gzHk{animation-duration:var(--animation-duration-slow,.4s);animation-fill-mode:forwards;animation-name:TextField-module_fade-0-to-1__Ac-99;color:var(--color-yellow-200,#ffeeb3)}.TextField-module_withReversed__agi-Q .TextField-module_caution__3gzHk{color:var(--color-purple-700,#4a234d)}@keyframes TextField-module_fade-0-to-1__Ac-99{0%{opacity:0}to{opacity:1}}.TextField-module_message__bQOgK.TextField-module_disabled__gS8tk{opacity:.3}";
+var styles = {
+  "input": "TextField-module_input__CEokl",
+  "success": "TextField-module_success__pMLcV",
+  "fade-0-to-1": "TextField-module_fade-0-to-1__Ac-99",
+  "withReversed": "TextField-module_withReversed__agi-Q",
+  "disabled": "TextField-module_disabled__gS8tk",
+  "error": "TextField-module_error__7S-f2",
+  "caution": "TextField-module_caution__3gzHk",
+  "message": "TextField-module_message__bQOgK"
+};
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Tile/InformationTile/InformationTile.mjs

@@ -0,0 +1,16 @@
+import { __assign } from 'tslib';
+import React from 'react';
+import { GenericTile } from '../subcomponents/GenericTile/GenericTile.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#InformationTile%3A Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-tiles-informationtile--docs Storybook}
+ */
+const InformationTile = /*#__PURE__*/function () {
+  const InformationTile = function (props) {
+    return /*#__PURE__*/React.createElement(GenericTile, __assign({}, props));
+  };
+  InformationTile.displayName = "InformationTile";
+  return InformationTile;
+}();
+export { InformationTile };

package/dist/esm/Tile/MultiActionTile/MultiActionTile.mjs

@@ -0,0 +1,35 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { GenericTile } from '../subcomponents/GenericTile/GenericTile.mjs';
+import Action from '../subcomponents/GenericTile/Action.mjs';
+import styles from './MultiActionTile.module.scss.mjs';
+var renderActions = function (primaryAction, secondaryAction) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.actions
+  }, secondaryAction && ( /*#__PURE__*/React.createElement("div", {
+    className: styles.secondaryAction
+  }, /*#__PURE__*/React.createElement(Action, {
+    action: secondaryAction,
+    secondary: true
+  }))), /*#__PURE__*/React.createElement(Action, {
+    action: primaryAction
+  }));
+};
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#MultiActionTile.1 Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-tiles-multiactiontile--docs Storybook}
+ */
+const MultiActionTile = /*#__PURE__*/function () {
+  const MultiActionTile = function (_a) {
+    var children = _a.children,
+      primaryAction = _a.primaryAction,
+      secondaryAction = _a.secondaryAction,
+      restProps = __rest(_a, ["children", "primaryAction", "secondaryAction"]);
+    return /*#__PURE__*/React.createElement(GenericTile, __assign({
+      footer: renderActions(primaryAction, secondaryAction)
+    }, restProps), children);
+  };
+  MultiActionTile.displayName = "MultiActionTile";
+  return MultiActionTile;
+}();
+export { MultiActionTile };

package/dist/esm/Tile/MultiActionTile/MultiActionTile.module.scss.mjs

@@ -0,0 +1,31 @@
+var css_248z = ".MultiActionTile-module_actions__mntsC{display:flex}.MultiActionTile-module_secondaryAction__DuXdD{margin-inline-end:var(--spacing-8,.5rem)}";
+var styles = {
+  "actions": "MultiActionTile-module_actions__mntsC",
+  "secondaryAction": "MultiActionTile-module_secondaryAction__DuXdD"
+};
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Tile/TileGrid/TileGrid.mjs

@@ -0,0 +1,23 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './TileGrid.module.scss.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3079077889/Tile#TileGrid Guidance} |
+ * {@link https://cultureamp.design/storybook/?path=/docs/components-tiles-tilegrid--docs Storybook}
+ */
+const TileGrid = /*#__PURE__*/function () {
+  const TileGrid = function (_a) {
+    var children = _a.children,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["children", "classNameOverride"]);
+    return /*#__PURE__*/React.createElement("div", __assign({
+      className: classnames(styles.grid, classNameOverride),
+      "data-tile-grid": true
+    }, restProps), children);
+  };
+  TileGrid.displayName = "TileGrid";
+  return TileGrid;
+}();
+export { TileGrid };

package/dist/esm/Tile/TileGrid/TileGrid.module.scss.mjs

@@ -0,0 +1,30 @@
+var css_248z = ".TileGrid-module_grid__1WCNc{grid-gap:var(--spacing-md,1.5rem);display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}@media (max-width:767px){.TileGrid-module_grid__1WCNc{grid-template-columns:repeat(2,minmax(226px,370px))}.TileGrid-module_grid__1WCNc>*{width:100%}}@media (max-width:480px){.TileGrid-module_grid__1WCNc{grid-template-columns:repeat(1,100%)}}";
+var styles = {
+  "grid": "TileGrid-module_grid__1WCNc"
+};
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Tile/subcomponents/GenericTile/Action.mjs

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Button } from '../../../Button/Button/Button.mjs';
+import '../../../Button/IconButton/IconButton.mjs';
+var Action = function (_a) {
+  var action = _a.action,
+    _b = _a.secondary,
+    secondary = _b === void 0 ? false : _b,
+    _c = _a.disabled,
+    disabled = _c === void 0 ? false : _c;
+  var label = action.label,
+    href = action.href,
+    onClick = action.onClick,
+    icon = action.icon,
+    automationId = action.automationId,
+    newTabAndIUnderstandTheAccessibilityImplications = action.newTabAndIUnderstandTheAccessibilityImplications;
+  return /*#__PURE__*/React.createElement(Button, {
+    label: label,
+    href: href,
+    onClick: onClick,
+    secondary: secondary,
+    icon: icon,
+    "data-automation-id": automationId,
+    disabled: disabled,
+    newTabAndIUnderstandTheAccessibilityImplications: newTabAndIUnderstandTheAccessibilityImplications
+  });
+};
+export { Action as default };

package/dist/esm/Tile/subcomponents/GenericTile/GenericTile.mjs

@@ -0,0 +1,113 @@
+import { __rest, __assign } from 'tslib';
+import React, { useState } from 'react';
+import classnames from 'classnames';
+import '../../../Button/Button/Button.mjs';
+import { IconButton } from '../../../Button/IconButton/IconButton.mjs';
+import { Heading } from '../../../Heading/Heading.mjs';
+import '../../../Icon/subcomponents/SVG/SVG.mjs';
+import { ArrowBackwardIcon } from '../../../Icon/ArrowBackwardIcon.mjs';
+import { InformationIcon } from '../../../Icon/InformationIcon.mjs';
+import { Text } from '../../../Text/Text.mjs';
+import Action from './Action.mjs';
+import styles from './GenericTile.module.scss.mjs';
+const GenericTile = /*#__PURE__*/function () {
+  const GenericTile = function (_a) {
+    var children = _a.children,
+      title = _a.title,
+      _b = _a.titleTag,
+      titleTag = _b === void 0 ? "h3" : _b,
+      metadata = _a.metadata,
+      information = _a.information,
+      mood = _a.mood,
+      footer = _a.footer,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["children", "title", "titleTag", "metadata", "information", "mood", "footer", "classNameOverride"]);
+    var _c = useState(false),
+      isFlipped = _c[0],
+      setIsFlipped = _c[1];
+    var renderTitle = function () {
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.title
+      }, /*#__PURE__*/React.createElement(Heading, {
+        variant: "heading-3",
+        tag: titleTag
+      }, title), metadata && ( /*#__PURE__*/React.createElement("div", {
+        className: styles.titleMeta
+      }, /*#__PURE__*/React.createElement(Text, {
+        variant: "small",
+        color: "dark-reduced-opacity"
+      }, metadata))));
+    };
+    var renderActions = function (primaryAction, secondaryAction, disabled) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.actions
+      }, secondaryAction && ( /*#__PURE__*/React.createElement(Action, {
+        action: secondaryAction,
+        secondary: true,
+        disabled: disabled
+      })), primaryAction && /*#__PURE__*/React.createElement(Action, {
+        action: primaryAction,
+        disabled: disabled
+      }));
+    };
+    var renderFront = function () {
+      return /*#__PURE__*/React.createElement("div", {
+        className: classnames(styles.face, styles.faceFront, mood === "positive" && styles.faceMoodPositive, mood === "informative" && styles.faceMoodInformative, mood === "cautionary" && styles.faceMoodCautionary, mood === "assertive" && styles.faceMoodAssertive, mood === "negative" && styles.faceMoodNegative, mood === "prominent" && styles.faceMoodProminent)
+      }, information && ( /*#__PURE__*/React.createElement("div", {
+        className: styles.informationBtn
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        label: "Information",
+        icon: /*#__PURE__*/React.createElement(InformationIcon, {
+          role: "presentation"
+        }),
+        onClick: function () {
+          return setIsFlipped(true);
+        },
+        disabled: isFlipped,
+        "aria-hidden": isFlipped
+      }))), renderTitle(), /*#__PURE__*/React.createElement("div", {
+        className: styles.children
+      }, children && children), footer && /*#__PURE__*/React.createElement("div", {
+        className: styles.footer
+      }, footer));
+    };
+    var renderInformation = function (informationProp) {
+      if (informationProp && typeof informationProp === "object" && "text" in informationProp) {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+          variant: "body"
+        }, informationProp.text), (informationProp.primaryAction || informationProp.secondaryAction) && ( /*#__PURE__*/React.createElement("div", {
+          className: styles.footer
+        }, renderActions(informationProp.primaryAction, informationProp.secondaryAction, !isFlipped))));
+      }
+      return informationProp;
+    };
+    var renderBack = function () {
+      if (!information) return;
+      return /*#__PURE__*/React.createElement("div", {
+        className: classnames(styles.face, styles.faceBack)
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.informationBtn
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        label: "Information",
+        icon: /*#__PURE__*/React.createElement(ArrowBackwardIcon, {
+          role: "presentation"
+        }),
+        onClick: function () {
+          return setIsFlipped(false);
+        },
+        disabled: !isFlipped,
+        "aria-hidden": !isFlipped
+      })), /*#__PURE__*/React.createElement("div", {
+        className: styles.information
+      }, renderInformation(information)));
+    };
+    return /*#__PURE__*/React.createElement("div", __assign({
+      className: classnames(styles.root, classNameOverride)
+    }, restProps), /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.tile, isFlipped && styles.isFlipped)
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, renderFront(), renderBack())));
+  };
+  GenericTile.displayName = "GenericTile";
+  return GenericTile;
+}();
+export { GenericTile };

package/dist/esm/Tile/subcomponents/GenericTile/GenericTile.module.scss.mjs

@@ -0,0 +1,47 @@
+var css_248z = ".GenericTile-module_root__9ZHdH{perspective:800px}.GenericTile-module_tile__mgFhk{background-color:var(--color-white,#fff);border-radius:7px;box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06));height:370px;position:relative;transform-style:preserve-3d;transition:transform var(--animation-duration-slow,.4s) var(--animation-easing-function-ease-in-out,cubic-bezier(.455,.03,.515,.955));width:330px}[data-tile-grid] .GenericTile-module_tile__mgFhk{width:auto}@media (max-width:767px){.GenericTile-module_tile__mgFhk{max-width:370px;min-width:226px;width:100%}}@media (max-width:480px){.GenericTile-module_tile__mgFhk{max-width:100%}}.GenericTile-module_titleMeta__EREc9{padding-top:var(--spacing-4,.25rem)}.GenericTile-module_face__-KLVi{align-items:center;backface-visibility:hidden;background-color:var(--color-white,#fff);border-radius:7px;box-sizing:border-box;display:flex;flex-direction:column;height:100%;position:absolute;width:100%}.GenericTile-module_face__-KLVi *{backface-visibility:hidden}.GenericTile-module_faceFront__HywHi{justify-content:space-between;padding:var(--spacing-xl,3rem) var(--spacing-md,1.5rem) var(--spacing-md,1.5rem)}.GenericTile-module_faceBack__NDCQ8{background-color:var(--color-blue-100,#e6f6ff);padding-top:var(--spacing-xl,3rem);transform:rotateY(180deg)}.GenericTile-module_faceMoodPositive__3MEBl{background-color:var(--color-green-100,#e8f8f4)}.GenericTile-module_faceMoodInformative__D0QsW{background-color:var(--color-blue-100,#e6f6ff)}.GenericTile-module_faceMoodCautionary__oUZXT{background-color:var(--color-yellow-100,#fff9e4)}.GenericTile-module_faceMoodAssertive__PaUZ-{background-color:var(--color-orange-100,#fff0e8)}.GenericTile-module_faceMoodNegative__DmcZH{background-color:var(--color-red-100,#fdeaee)}.GenericTile-module_faceMoodProminent__VmMmv{background-color:var(--color-purple-100,#f4edf8)}.GenericTile-module_isFlipped__K18mo{transform:rotateY(179deg)}.GenericTile-module_title__zC6Qv{backface-visibility:hidden;padding-bottom:var(--spacing-sm,.75rem);text-align:center}.GenericTile-module_actions__l8vXl{display:flex}.GenericTile-module_informationBtn__LY3SW{color:rgba(var(--color-purple-800-rgb,47,36,56),.5);inset-block-start:0;inset-inline-end:0;position:absolute}.GenericTile-module_information__wKXBp{align-items:center;border-radius:0 0 7px 7px;box-sizing:border-box;display:flex;flex-direction:column;height:100%;justify-content:space-between;padding-bottom:var(--spacing-md,1.5rem);padding-left:var(--spacing-md,1.5rem);padding-right:var(--spacing-md,1.5rem);text-align:left;width:100%}.GenericTile-module_footer__u2Pei{align-items:center;display:flex;height:var(--spacing-xl,3rem);justify-content:center;margin-top:var(--spacing-sm,.75rem)}";
+var styles = {
+  "root": "GenericTile-module_root__9ZHdH",
+  "tile": "GenericTile-module_tile__mgFhk",
+  "titleMeta": "GenericTile-module_titleMeta__EREc9",
+  "face": "GenericTile-module_face__-KLVi",
+  "faceFront": "GenericTile-module_faceFront__HywHi",
+  "faceBack": "GenericTile-module_faceBack__NDCQ8",
+  "faceMoodPositive": "GenericTile-module_faceMoodPositive__3MEBl",
+  "faceMoodInformative": "GenericTile-module_faceMoodInformative__D0QsW",
+  "faceMoodCautionary": "GenericTile-module_faceMoodCautionary__oUZXT",
+  "faceMoodAssertive": "GenericTile-module_faceMoodAssertive__PaUZ-",
+  "faceMoodNegative": "GenericTile-module_faceMoodNegative__DmcZH",
+  "faceMoodProminent": "GenericTile-module_faceMoodProminent__VmMmv",
+  "isFlipped": "GenericTile-module_isFlipped__K18mo",
+  "title": "GenericTile-module_title__zC6Qv",
+  "actions": "GenericTile-module_actions__l8vXl",
+  "informationBtn": "GenericTile-module_informationBtn__LY3SW",
+  "information": "GenericTile-module_information__wKXBp",
+  "footer": "GenericTile-module_footer__u2Pei"
+};
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/TimeField/TimeField.mjs

@@ -0,0 +1,95 @@
+import { __assign, __rest } from 'tslib';
+import React, { useId } from 'react';
+import { Time } from '@internationalized/date';
+import { useTimeField } from '@react-aria/datepicker';
+import { I18nProvider } from '@react-aria/i18n';
+import { useTimeFieldState } from '@react-stately/datepicker';
+import classnames from 'classnames';
+import { FieldMessage } from '../FieldMessage/FieldMessage.mjs';
+import { Label } from '../Label/Label.mjs';
+import { TimeSegment } from './subcomponents/TimeSegment/TimeSegment.mjs';
+import styles from './TimeField.module.scss.mjs';
+
+// This needed to be placed directly below the props because
+// the prop descriptions wouldn't show in Storybook otherwise.
+const TimeField = /*#__PURE__*/function () {
+  const TimeField = function (props) {
+    return /*#__PURE__*/React.createElement(I18nProvider, {
+      locale: props.locale
+    }, /*#__PURE__*/React.createElement(TimeFieldComponent, __assign({}, props)));
+  };
+  TimeField.displayName = "TimeField";
+  return TimeField;
+}();
+const TimeFieldComponent = /*#__PURE__*/function () {
+  const TimeFieldComponent = function (_a) {
+    var propsId = _a.id,
+      label = _a.label,
+      locale = _a.locale,
+      onChange = _a.onChange,
+      value = _a.value,
+      _b = _a.status,
+      status = _b === void 0 ? "default" : _b,
+      validationMessage = _a.validationMessage,
+      isDisabled = _a.isDisabled,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["id", "label", "locale", "onChange", "value", "status", "validationMessage", "isDisabled", "classNameOverride"]);
+    var reactId = useId();
+    var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
+    var handleOnChange = function (timeValue) {
+      if (timeValue === null) {
+        return onChange(null);
+      }
+      onChange({
+        hour: timeValue.hour,
+        minutes: timeValue.minute
+      });
+    };
+    var state = useTimeFieldState(__assign(__assign({}, restProps), {
+      value: value ? new Time(value.hour, value.minutes) : null,
+      onChange: handleOnChange,
+      isDisabled: isDisabled,
+      hideTimeZone: true,
+      locale: locale,
+      validationState: status === "default" ? "valid" : "invalid"
+    }));
+    var hasError = !!validationMessage && status === "error";
+    var descriptionId = hasError ? "".concat(id, "-field-message") : undefined;
+    var inputRef = React.useRef(null);
+    var _c = useTimeField(__assign(__assign({}, restProps), {
+        label: label,
+        isDisabled: isDisabled,
+        "aria-describedby": descriptionId
+      }), state, inputRef),
+      fieldProps = _c.fieldProps,
+      labelProps = _c.labelProps;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNameOverride
+    }, /*#__PURE__*/React.createElement(Label, __assign({
+      disabled: state.isDisabled
+    }, labelProps, {
+      classNameOverride: styles.label
+    }), label), /*#__PURE__*/React.createElement("div", {
+      className: styles.wrapper
+    }, /*#__PURE__*/React.createElement("div", __assign({}, fieldProps, {
+      id: id,
+      ref: inputRef,
+      className: classnames(styles.input, state.isDisabled && styles.isDisabled, state.validationState === "invalid" && styles.error)
+    }), state.segments.map(function (segment, i) {
+      return /*#__PURE__*/React.createElement(TimeSegment, {
+        key: i,
+        segment: segment,
+        state: state
+      });
+    }), /*#__PURE__*/React.createElement("div", {
+      className: styles.focusRing
+    }))), hasError && ( /*#__PURE__*/React.createElement(FieldMessage, {
+      id: descriptionId,
+      message: validationMessage,
+      status: status
+    })));
+  };
+  TimeFieldComponent.displayName = "TimeFieldComponent";
+  return TimeFieldComponent;
+}();
+export { TimeField };

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

@@ -0,0 +1,35 @@
+var css_248z = ".TimeField-module_wrapper__YuSI3{align-items:flex-start;color:var(--color-purple-800,#2f2438);display:flex;flex-direction:column;font-family:var(--typography-paragraph-body-font-family,\"Inter\",\"Noto Sans\",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-body-font-size,1rem);font-weight:var(--typography-paragraph-body-font-weight,400);letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);line-height:var(--typography-paragraph-body-line-height,1.5rem);position:relative}.TimeField-module_label__kjKyK{display:block;margin-bottom:var(--spacing-6,.375rem)}.TimeField-module_input__Hxjcu{align-items:center;background-clip:padding-box;background-color:var(--color-white,#fff);border:var(--border-solid-border-width,2px) var(--border-solid-border-style,solid) var(--color-gray-500,#878792);border-radius:var(--border-solid-border-radius,7px);box-sizing:border-box;display:inline-flex;font-size:var(--typography-paragraph-body-font-size,1rem);height:48px;line-height:var(--typography-paragraph-body-line-height,1.5rem);padding:0 var(--spacing-sm,.75rem);width:100%}.TimeField-module_input__Hxjcu:focus-within,.TimeField-module_input__Hxjcu:hover{background-color:var(--color-gray-200,#f4f4f5);border-color:var(--color-gray-600,#524e56)}.TimeField-module_input__Hxjcu:focus-within .TimeField-module_focusRing__7hgWG{background:transparent;border-color:var(--color-blue-500,#0168b3);border-radius:var(--border-focus-ring-border-radius,10px);border-style:var(--border-focus-ring-border-style,solid);border-width:var(--border-focus-ring-border-width,2px);inset:-3px;pointer-events:none;position:absolute}.TimeField-module_isDisabled__rpEc8{background-color:transparent;border-color:var(--color-gray-500,#878792);opacity:30%;pointer-events:none}.TimeField-module_error__tK2QY{border:var(--border-solid-border-width,2px) var(--border-solid-border-style,solid) var(--color-red-500,#c93b55)}";
+var styles = {
+  "wrapper": "TimeField-module_wrapper__YuSI3",
+  "label": "TimeField-module_label__kjKyK",
+  "input": "TimeField-module_input__Hxjcu",
+  "focusRing": "TimeField-module_focusRing__7hgWG",
+  "isDisabled": "TimeField-module_isDisabled__rpEc8",
+  "error": "TimeField-module_error__tK2QY"
+};
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/TimeField/subcomponents/TimeSegment/TimeSegment.mjs

@@ -0,0 +1,27 @@
+import { __assign } from 'tslib';
+import React from 'react';
+import { useDateSegment } from '@react-aria/datepicker';
+import classnames from 'classnames';
+import { generateSegmentDisplayText } from './utils/generateSegmentDisplayText.mjs';
+import styles from './TimeSegment.module.scss.mjs';
+const TimeSegment = /*#__PURE__*/function () {
+  const TimeSegment = function (_a) {
+    var segment = _a.segment,
+      state = _a.state;
+    var ref = React.useRef(null);
+    var segmentProps = useDateSegment(segment, state, ref).segmentProps;
+    // Chrome has a bug where `contenteditable` elements receive focus from external clicks.
+    // This (in combination with the invisible character ​) creates boundaries
+    // for the element.
+    // https://stackoverflow.com/a/34445203
+    return /*#__PURE__*/React.createElement("span", {
+      className: styles.timeSegmentWrapper
+    }, "\u200B", /*#__PURE__*/React.createElement("span", __assign({}, segmentProps, {
+      ref: ref,
+      className: classnames(styles.timeSegment, segment.type === "literal" && styles.literal, segment.isPlaceholder && styles.placeholder, segment.type === "dayPeriod" && styles.dayPeriod)
+    }), generateSegmentDisplayText(segment)), "\u200B");
+  };
+  TimeSegment.displayName = "TimeSegment";
+  return TimeSegment;
+}();
+export { TimeSegment };

package/dist/esm/TimeField/subcomponents/TimeSegment/TimeSegment.module.scss.mjs

@@ -0,0 +1,34 @@
+var css_248z = ".TimeSegment-module_timeSegmentWrapper__WYD6y{white-space:nowrap}.TimeSegment-module_timeSegment__eXb0c{background-color:var(--color-gray-300,#eaeaec);border-radius:3px;color:var(--color-purple-800,#2f2438);display:block;padding:0 4px;text-align:end}.TimeSegment-module_timeSegment__eXb0c:hover{background-color:var(--color-white,#fff)}.TimeSegment-module_timeSegment__eXb0c:focus-visible{background:var(--color-blue-500,#0168b3);color:#fff;outline:none}.TimeSegment-module_placeholder__j1-gK{color:rgba(var(--color-purple-800-rgb,47,36,56),.7)}.TimeSegment-module_literal__mOkqz,.TimeSegment-module_literal__mOkqz:hover{background:none}.TimeSegment-module_dayPeriod__fzT5I{margin-right:4px}";
+var styles = {
+  "timeSegmentWrapper": "TimeSegment-module_timeSegmentWrapper__WYD6y",
+  "timeSegment": "TimeSegment-module_timeSegment__eXb0c",
+  "placeholder": "TimeSegment-module_placeholder__j1-gK",
+  "literal": "TimeSegment-module_literal__mOkqz",
+  "dayPeriod": "TimeSegment-module_dayPeriod__fzT5I"
+};
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/TimeField/subcomponents/TimeSegment/utils/generateSegmentDisplayText.mjs

@@ -0,0 +1,4 @@
+var generateSegmentDisplayText = function (segment) {
+  return segment.isPlaceholder && segment.type !== "dayPeriod" ? "--" : segment.text;
+};
+export { generateSegmentDisplayText };