@kaizen/components 0.0.0-canary-rollup-20240408071509 → 0.0.0-canary-rollup--tree-shake-20240408080317

package/dist/cjs/TextAreaField/TextAreaField.cjs

@@ -8,9 +8,11 @@ var FieldMessage = require('../FieldMessage/FieldMessage.cjs');
 var Label = require('../Label/Label.cjs');
 var TextArea = require('../TextArea/TextArea.cjs');
 var TextAreaField_module = require('./TextAreaField.module.scss.cjs');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
@@ -19,28 +21,68 @@ var classnames__default = /*#__PURE__*/_interopDefault(classnames);
  * {@link https://cultureamp.design/?path=/docs/components-text-area-field--docs Storybook}
  */
 var TextAreaField = function (_a) {
-    var labelText = _a.labelText, _b = _a.inline, inline = _b === void 0 ? false : _b, validationMessage = _a.validationMessage, description = _a.description, _c = _a.variant, variant = _c === void 0 ? "default" : _c, propsId = _a.id, _d = _a.reversed, reversed = _d === void 0 ? false : _d, _e = _a.status, status = _e === void 0 ? "default" : _e, disabled = _a.disabled, restProps = tslib.__rest(_a, ["labelText", "inline", "validationMessage", "description", "variant", "id", "reversed", "status", "disabled"]);
-    var id = propsId !== null && propsId !== void 0 ? propsId : React.useId();
-    var validationMessageAria = validationMessage
-        ? "".concat(id, "-field-validation-message")
-        : "";
-    var descriptionAria = description ? "".concat(id, "-field-message") : "";
-    var ariaDescribedBy = [validationMessageAria, descriptionAria].reduce(function (prev, curr) { return (curr ? [curr, prev].join(" ") : prev); }, "");
-    var renderDescriptionOnTop = variant === "prominent";
-    var renderDescription = function (position) {
-        if (!description)
-            return null;
-        return (React__default.default.createElement("div", { className: classnames__default.default(TextAreaField_module.message, disabled && TextAreaField_module.disabled) },
-            React__default.default.createElement(FieldMessage.FieldMessage, { id: descriptionAria, "data-testid": "".concat(id, "-field-description"), message: description, reversed: reversed, position: position })));
-    };
-    return (React__default.default.createElement(FieldGroup.FieldGroup, { id: "".concat(id, "-field-group"), inline: inline, "data-testid": "".concat(id, "-field-group"), classNameOverride: disabled ? TextAreaField_module.disabled : undefined },
-        React__default.default.createElement("div", { className: classnames__default.default(TextAreaField_module.textareaLabel, variant === "prominent" && TextAreaField_module.textareaLabelProminent) },
-            React__default.default.createElement(Label.Label, { id: "".concat(id, "-field-label"), "data-testid": "".concat(id, "-field-label"), htmlFor: "".concat(id, "-field-textarea"), labelText: labelText, reversed: reversed, variant: variant, disabled: disabled })),
-        renderDescriptionOnTop && renderDescription("top"),
-        React__default.default.createElement(TextArea.TextArea, tslib.__assign({ id: "".concat(id, "-field-textarea"), "data-testid": "".concat(id, "-field-textarea"), reversed: reversed, status: status, disabled: disabled, "aria-describedby": ariaDescribedBy }, restProps)),
-        !disabled && validationMessage && (React__default.default.createElement(FieldMessage.FieldMessage, { id: validationMessageAria, "data-testid": validationMessageAria, message: validationMessage, status: status, reversed: reversed })),
-        !renderDescriptionOnTop && renderDescription("bottom")));
+  var labelText = _a.labelText,
+    _b = _a.inline,
+    inline = _b === void 0 ? false : _b,
+    validationMessage = _a.validationMessage,
+    description = _a.description,
+    _c = _a.variant,
+    variant = _c === void 0 ? "default" : _c,
+    propsId = _a.id,
+    _d = _a.reversed,
+    reversed = _d === void 0 ? false : _d,
+    _e = _a.status,
+    status = _e === void 0 ? "default" : _e,
+    disabled = _a.disabled,
+    restProps = tslib.__rest(_a, ["labelText", "inline", "validationMessage", "description", "variant", "id", "reversed", "status", "disabled"]);
+  var id = propsId !== null && propsId !== void 0 ? propsId : React.useId();
+  var validationMessageAria = validationMessage ? "".concat(id, "-field-validation-message") : "";
+  var descriptionAria = description ? "".concat(id, "-field-message") : "";
+  var ariaDescribedBy = [validationMessageAria, descriptionAria].reduce(function (prev, curr) {
+    return curr ? [curr, prev].join(" ") : prev;
+  }, "");
+  var renderDescriptionOnTop = variant === "prominent";
+  var renderDescription = function (position) {
+    if (!description) return null;
+    return React__default.default.createElement("div", {
+      className: classnames__default.default(TextAreaField_module.message, disabled && TextAreaField_module.disabled)
+    }, React__default.default.createElement(FieldMessage.FieldMessage, {
+      id: descriptionAria,
+      "data-testid": "".concat(id, "-field-description"),
+      message: description,
+      reversed: reversed,
+      position: position
+    }));
+  };
+  return React__default.default.createElement(FieldGroup.FieldGroup, {
+    id: "".concat(id, "-field-group"),
+    inline: inline,
+    "data-testid": "".concat(id, "-field-group"),
+    classNameOverride: disabled ? TextAreaField_module.disabled : undefined
+  }, React__default.default.createElement("div", {
+    className: classnames__default.default(TextAreaField_module.textareaLabel, variant === "prominent" && TextAreaField_module.textareaLabelProminent)
+  }, React__default.default.createElement(Label.Label, {
+    id: "".concat(id, "-field-label"),
+    "data-testid": "".concat(id, "-field-label"),
+    htmlFor: "".concat(id, "-field-textarea"),
+    labelText: labelText,
+    reversed: reversed,
+    variant: variant,
+    disabled: disabled
+  })), renderDescriptionOnTop && renderDescription("top"), React__default.default.createElement(TextArea.TextArea, tslib.__assign({
+    id: "".concat(id, "-field-textarea"),
+    "data-testid": "".concat(id, "-field-textarea"),
+    reversed: reversed,
+    status: status,
+    disabled: disabled,
+    "aria-describedby": ariaDescribedBy
+  }, restProps)), !disabled && validationMessage && React__default.default.createElement(FieldMessage.FieldMessage, {
+    id: validationMessageAria,
+    "data-testid": validationMessageAria,
+    message: validationMessage,
+    status: status,
+    reversed: reversed
+  }), !renderDescriptionOnTop && renderDescription("bottom"));
 };
 TextAreaField.displayName = "TextAreaField";
-
 exports.TextAreaField = TextAreaField;

package/dist/cjs/TextAreaField/TextAreaField.module.scss.cjs

@@ -1,5 +1,9 @@
 'use strict';
 
-var styles = {"message":"TextAreaField-module_message__hlao7","disabled":"TextAreaField-module_disabled__twCef","textareaLabel":"TextAreaField-module_textareaLabel__sOTRj","textareaLabelProminent":"TextAreaField-module_textareaLabelProminent__xqcY4"};
-
+var styles = {
+  "message": "TextAreaField-module_message__hlao7",
+  "disabled": "TextAreaField-module_disabled__twCef",
+  "textareaLabel": "TextAreaField-module_textareaLabel__sOTRj",
+  "textareaLabelProminent": "TextAreaField-module_textareaLabelProminent__xqcY4"
+};
 module.exports = styles;

package/dist/cjs/TextField/TextField.cjs

@@ -12,9 +12,11 @@ require('../Input/InputRange/InputRange.cjs');
 require('../Input/InputSearch/InputSearch.cjs');
 var Label = require('../Label/Label.cjs');
 var TextField_module = require('./TextField.module.scss.cjs');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
@@ -23,22 +25,64 @@ var classnames__default = /*#__PURE__*/_interopDefault(classnames);
  * {@link https://cultureamp.design/?path=/docs/components-text-field--docs Storybook}
  */
 var 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 = tslib.__rest(_a, ["id", "labelText", "inline", "icon", "validationMessage", "description", "status", "reversed", "disabled"]);
-    var id = propsId !== null && propsId !== void 0 ? propsId : React.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 (React__default.default.createElement(FieldGroup.FieldGroup, { id: "".concat(id, "-field-group"), "data-testid": "".concat(id, "-field-group"), inline: inline, classNameOverride: classnames__default.default(TextField_module.withLabel, disabled && TextField_module.withDisabled) },
-        React__default.default.createElement(Label.Label, { id: "".concat(id, "-field-label"), "data-testid": "".concat(id, "-field-label"), htmlFor: "".concat(id, "-field-input"), labelText: labelText, reversed: reversed, disabled: disabled }),
-        React__default.default.createElement(Input.Input, tslib.__assign({ id: "".concat(id, "-field-input"), "data-testid": "".concat(id, "-field-input"), "aria-describedby": ariaDescribedBy, classNameOverride: TextField_module.input, disabled: disabled, reversed: reversed, status: status, startIconAdornment: icon, endIconAdornment: status === "success" && (React__default.default.createElement("div", { className: classnames__default.default(TextField_module.success, disabled && TextField_module.disabled) },
-                React__default.default.createElement(SuccessIcon.SuccessIcon, { role: "presentation" }))) }, restProps)),
-        validationMessage && (React__default.default.createElement("div", { className: classnames__default.default(TextField_module.message, disabled && TextField_module.disabled) },
-            React__default.default.createElement(FieldMessage.FieldMessage, { id: validationMessageAria, message: validationMessage, status: status, reversed: reversed }))),
-        description && (React__default.default.createElement("div", { className: classnames__default.default(TextField_module.message, disabled && TextField_module.disabled) },
-            React__default.default.createElement(FieldMessage.FieldMessage, { id: descriptionAria, message: description, reversed: reversed })))));
+  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 = tslib.__rest(_a, ["id", "labelText", "inline", "icon", "validationMessage", "description", "status", "reversed", "disabled"]);
+  var id = propsId !== null && propsId !== void 0 ? propsId : React.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 React__default.default.createElement(FieldGroup.FieldGroup, {
+    id: "".concat(id, "-field-group"),
+    "data-testid": "".concat(id, "-field-group"),
+    inline: inline,
+    classNameOverride: classnames__default.default(TextField_module.withLabel, disabled && TextField_module.withDisabled)
+  }, React__default.default.createElement(Label.Label, {
+    id: "".concat(id, "-field-label"),
+    "data-testid": "".concat(id, "-field-label"),
+    htmlFor: "".concat(id, "-field-input"),
+    labelText: labelText,
+    reversed: reversed,
+    disabled: disabled
+  }), React__default.default.createElement(Input.Input, tslib.__assign({
+    id: "".concat(id, "-field-input"),
+    "data-testid": "".concat(id, "-field-input"),
+    "aria-describedby": ariaDescribedBy,
+    classNameOverride: TextField_module.input,
+    disabled: disabled,
+    reversed: reversed,
+    status: status,
+    startIconAdornment: icon,
+    endIconAdornment: status === "success" && React__default.default.createElement("div", {
+      className: classnames__default.default(TextField_module.success, disabled && TextField_module.disabled)
+    }, React__default.default.createElement(SuccessIcon.SuccessIcon, {
+      role: "presentation"
+    }))
+  }, restProps)), validationMessage && React__default.default.createElement("div", {
+    className: classnames__default.default(TextField_module.message, disabled && TextField_module.disabled)
+  }, React__default.default.createElement(FieldMessage.FieldMessage, {
+    id: validationMessageAria,
+    message: validationMessage,
+    status: status,
+    reversed: reversed
+  })), description && React__default.default.createElement("div", {
+    className: classnames__default.default(TextField_module.message, disabled && TextField_module.disabled)
+  }, React__default.default.createElement(FieldMessage.FieldMessage, {
+    id: descriptionAria,
+    message: description,
+    reversed: reversed
+  })));
 };
 TextField.displayName = "TextField";
-
 exports.TextField = TextField;

package/dist/cjs/TextField/TextField.module.scss.cjs

@@ -1,5 +1,13 @@
 'use strict';
 
-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"};
-
+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"
+};
 module.exports = styles;

package/dist/cjs/Tile/InformationTile/InformationTile.cjs

@@ -3,16 +3,19 @@
 var tslib = require('tslib');
 var React = require('react');
 var GenericTile = require('../subcomponents/GenericTile/GenericTile.cjs');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 /**
  * {@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}
  */
-var InformationTile = function (props) { return (React__default.default.createElement(GenericTile.GenericTile, tslib.__assign({}, props))); };
+var InformationTile = function (props) {
+  return React__default.default.createElement(GenericTile.GenericTile, tslib.__assign({}, props));
+};
 InformationTile.displayName = "InformationTile";
-
 exports.InformationTile = InformationTile;

package/dist/cjs/Tile/MultiActionTile/MultiActionTile.cjs

@@ -5,23 +5,36 @@ var React = require('react');
 var GenericTile = require('../subcomponents/GenericTile/GenericTile.cjs');
 var Action = require('../subcomponents/GenericTile/Action.cjs');
 var MultiActionTile_module = require('./MultiActionTile.module.scss.cjs');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
 var React__default = /*#__PURE__*/_interopDefault(React);
-
-var renderActions = function (primaryAction, secondaryAction) { return (React__default.default.createElement("div", { className: MultiActionTile_module.actions },
-    secondaryAction && (React__default.default.createElement("div", { className: MultiActionTile_module.secondaryAction },
-        React__default.default.createElement(Action, { action: secondaryAction, secondary: true }))),
-    React__default.default.createElement(Action, { action: primaryAction }))); };
+var renderActions = function (primaryAction, secondaryAction) {
+  return React__default.default.createElement("div", {
+    className: MultiActionTile_module.actions
+  }, secondaryAction && React__default.default.createElement("div", {
+    className: MultiActionTile_module.secondaryAction
+  }, React__default.default.createElement(Action, {
+    action: secondaryAction,
+    secondary: true
+  })), React__default.default.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}
  */
 var MultiActionTile = function (_a) {
-    var children = _a.children, primaryAction = _a.primaryAction, secondaryAction = _a.secondaryAction, restProps = tslib.__rest(_a, ["children", "primaryAction", "secondaryAction"]);
-    return (React__default.default.createElement(GenericTile.GenericTile, tslib.__assign({ footer: renderActions(primaryAction, secondaryAction) }, restProps), children));
+  var children = _a.children,
+    primaryAction = _a.primaryAction,
+    secondaryAction = _a.secondaryAction,
+    restProps = tslib.__rest(_a, ["children", "primaryAction", "secondaryAction"]);
+  return React__default.default.createElement(GenericTile.GenericTile, tslib.__assign({
+    footer: renderActions(primaryAction, secondaryAction)
+  }, restProps), children);
 };
 MultiActionTile.displayName = "MultiActionTile";
-
 exports.MultiActionTile = MultiActionTile;

package/dist/cjs/Tile/MultiActionTile/MultiActionTile.module.scss.cjs

@@ -1,5 +1,7 @@
 'use strict';
 
-var styles = {"actions":"MultiActionTile-module_actions__mntsC","secondaryAction":"MultiActionTile-module_secondaryAction__DuXdD"};
-
+var styles = {
+  "actions": "MultiActionTile-module_actions__mntsC",
+  "secondaryAction": "MultiActionTile-module_secondaryAction__DuXdD"
+};
 module.exports = styles;

package/dist/cjs/Tile/TileGrid/TileGrid.cjs

@@ -4,9 +4,11 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var TileGrid_module = require('./TileGrid.module.scss.cjs');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
@@ -15,9 +17,13 @@ var classnames__default = /*#__PURE__*/_interopDefault(classnames);
  * {@link https://cultureamp.design/storybook/?path=/docs/components-tiles-tilegrid--docs Storybook}
  */
 var TileGrid = function (_a) {
-    var children = _a.children, classNameOverride = _a.classNameOverride, restProps = tslib.__rest(_a, ["children", "classNameOverride"]);
-    return (React__default.default.createElement("div", tslib.__assign({ className: classnames__default.default(TileGrid_module.grid, classNameOverride), "data-tile-grid": true }, restProps), children));
+  var children = _a.children,
+    classNameOverride = _a.classNameOverride,
+    restProps = tslib.__rest(_a, ["children", "classNameOverride"]);
+  return React__default.default.createElement("div", tslib.__assign({
+    className: classnames__default.default(TileGrid_module.grid, classNameOverride),
+    "data-tile-grid": true
+  }, restProps), children);
 };
 TileGrid.displayName = "TileGrid";
-
 exports.TileGrid = TileGrid;

package/dist/cjs/Tile/TileGrid/TileGrid.module.scss.cjs

@@ -1,5 +1,6 @@
 'use strict';
 
-var styles = {"grid":"TileGrid-module_grid__1WCNc"};
-
+var styles = {
+  "grid": "TileGrid-module_grid__1WCNc"
+};
 module.exports = styles;

package/dist/cjs/Tile/subcomponents/GenericTile/Action.cjs

@@ -3,15 +3,33 @@
 var React = require('react');
 var Button = require('../../../Button/Button/Button.cjs');
 require('../../../Button/IconButton/IconButton.cjs');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
 var React__default = /*#__PURE__*/_interopDefault(React);
-
 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 (React__default.default.createElement(Button.Button, { label: label, href: href, onClick: onClick, secondary: secondary, icon: icon, "data-automation-id": automationId, disabled: disabled, newTabAndIUnderstandTheAccessibilityImplications: newTabAndIUnderstandTheAccessibilityImplications }));
+  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 React__default.default.createElement(Button.Button, {
+    label: label,
+    href: href,
+    onClick: onClick,
+    secondary: secondary,
+    icon: icon,
+    "data-automation-id": automationId,
+    disabled: disabled,
+    newTabAndIUnderstandTheAccessibilityImplications: newTabAndIUnderstandTheAccessibilityImplications
+  });
 };
-
 module.exports = Action;

package/dist/cjs/Tile/subcomponents/GenericTile/GenericTile.cjs

@@ -12,53 +12,108 @@ var InformationIcon = require('../../../Icon/InformationIcon.cjs');
 var Text = require('../../../Text/Text.cjs');
 var Action = require('./Action.cjs');
 var GenericTile_module = require('./GenericTile.module.scss.cjs');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-
 var 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 = tslib.__rest(_a, ["children", "title", "titleTag", "metadata", "information", "mood", "footer", "classNameOverride"]);
-    var _c = React.useState(false), isFlipped = _c[0], setIsFlipped = _c[1];
-    var renderTitle = function () { return (React__default.default.createElement("div", { className: GenericTile_module.title },
-        React__default.default.createElement(Heading.Heading, { variant: "heading-3", tag: titleTag }, title),
-        metadata && (React__default.default.createElement("div", { className: GenericTile_module.titleMeta },
-            React__default.default.createElement(Text.Text, { variant: "small", color: "dark-reduced-opacity" }, metadata))))); };
-    var renderActions = function (primaryAction, secondaryAction, disabled) { return (React__default.default.createElement("div", { className: GenericTile_module.actions },
-        secondaryAction && (React__default.default.createElement(Action, { action: secondaryAction, secondary: true, disabled: disabled })),
-        primaryAction && React__default.default.createElement(Action, { action: primaryAction, disabled: disabled }))); };
-    var renderFront = function () { return (React__default.default.createElement("div", { className: classnames__default.default(GenericTile_module.face, GenericTile_module.faceFront, mood === "positive" && GenericTile_module.faceMoodPositive, mood === "informative" && GenericTile_module.faceMoodInformative, mood === "cautionary" && GenericTile_module.faceMoodCautionary, mood === "assertive" && GenericTile_module.faceMoodAssertive, mood === "negative" && GenericTile_module.faceMoodNegative, mood === "prominent" && GenericTile_module.faceMoodProminent) },
-        information && (React__default.default.createElement("div", { className: GenericTile_module.informationBtn },
-            React__default.default.createElement(IconButton.IconButton, { label: "Information", icon: React__default.default.createElement(InformationIcon.InformationIcon, { role: "presentation" }), onClick: function () { return setIsFlipped(true); }, disabled: isFlipped, "aria-hidden": isFlipped }))),
-        renderTitle(),
-        React__default.default.createElement("div", { className: GenericTile_module.children }, children && children),
-        footer && React__default.default.createElement("div", { className: GenericTile_module.footer }, footer))); };
-    var renderInformation = function (informationProp) {
-        if (informationProp &&
-            typeof informationProp === "object" &&
-            "text" in informationProp) {
-            return (React__default.default.createElement(React__default.default.Fragment, null,
-                React__default.default.createElement(Text.Text, { variant: "body" }, informationProp.text),
-                (informationProp.primaryAction ||
-                    informationProp.secondaryAction) && (React__default.default.createElement("div", { className: GenericTile_module.footer }, renderActions(informationProp.primaryAction, informationProp.secondaryAction, !isFlipped)))));
-        }
-        return informationProp;
-    };
-    var renderBack = function () {
-        if (!information)
-            return;
-        return (React__default.default.createElement("div", { className: classnames__default.default(GenericTile_module.face, GenericTile_module.faceBack) },
-            React__default.default.createElement("div", { className: GenericTile_module.informationBtn },
-                React__default.default.createElement(IconButton.IconButton, { label: "Information", icon: React__default.default.createElement(ArrowBackwardIcon.ArrowBackwardIcon, { role: "presentation" }), onClick: function () { return setIsFlipped(false); }, disabled: !isFlipped, "aria-hidden": !isFlipped })),
-            React__default.default.createElement("div", { className: GenericTile_module.information }, renderInformation(information))));
-    };
-    return (React__default.default.createElement("div", tslib.__assign({ className: classnames__default.default(GenericTile_module.root, classNameOverride) }, restProps),
-        React__default.default.createElement("div", { className: classnames__default.default(GenericTile_module.tile, isFlipped && GenericTile_module.isFlipped) },
-            React__default.default.createElement(React__default.default.Fragment, null,
-                renderFront(),
-                renderBack()))));
+  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 = tslib.__rest(_a, ["children", "title", "titleTag", "metadata", "information", "mood", "footer", "classNameOverride"]);
+  var _c = React.useState(false),
+    isFlipped = _c[0],
+    setIsFlipped = _c[1];
+  var renderTitle = function () {
+    return React__default.default.createElement("div", {
+      className: GenericTile_module.title
+    }, React__default.default.createElement(Heading.Heading, {
+      variant: "heading-3",
+      tag: titleTag
+    }, title), metadata && React__default.default.createElement("div", {
+      className: GenericTile_module.titleMeta
+    }, React__default.default.createElement(Text.Text, {
+      variant: "small",
+      color: "dark-reduced-opacity"
+    }, metadata)));
+  };
+  var renderActions = function (primaryAction, secondaryAction, disabled) {
+    return React__default.default.createElement("div", {
+      className: GenericTile_module.actions
+    }, secondaryAction && React__default.default.createElement(Action, {
+      action: secondaryAction,
+      secondary: true,
+      disabled: disabled
+    }), primaryAction && React__default.default.createElement(Action, {
+      action: primaryAction,
+      disabled: disabled
+    }));
+  };
+  var renderFront = function () {
+    return React__default.default.createElement("div", {
+      className: classnames__default.default(GenericTile_module.face, GenericTile_module.faceFront, mood === "positive" && GenericTile_module.faceMoodPositive, mood === "informative" && GenericTile_module.faceMoodInformative, mood === "cautionary" && GenericTile_module.faceMoodCautionary, mood === "assertive" && GenericTile_module.faceMoodAssertive, mood === "negative" && GenericTile_module.faceMoodNegative, mood === "prominent" && GenericTile_module.faceMoodProminent)
+    }, information && React__default.default.createElement("div", {
+      className: GenericTile_module.informationBtn
+    }, React__default.default.createElement(IconButton.IconButton, {
+      label: "Information",
+      icon: React__default.default.createElement(InformationIcon.InformationIcon, {
+        role: "presentation"
+      }),
+      onClick: function () {
+        return setIsFlipped(true);
+      },
+      disabled: isFlipped,
+      "aria-hidden": isFlipped
+    })), renderTitle(), React__default.default.createElement("div", {
+      className: GenericTile_module.children
+    }, children && children), footer && React__default.default.createElement("div", {
+      className: GenericTile_module.footer
+    }, footer));
+  };
+  var renderInformation = function (informationProp) {
+    if (informationProp && typeof informationProp === "object" && "text" in informationProp) {
+      return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(Text.Text, {
+        variant: "body"
+      }, informationProp.text), (informationProp.primaryAction || informationProp.secondaryAction) && React__default.default.createElement("div", {
+        className: GenericTile_module.footer
+      }, renderActions(informationProp.primaryAction, informationProp.secondaryAction, !isFlipped)));
+    }
+    return informationProp;
+  };
+  var renderBack = function () {
+    if (!information) return;
+    return React__default.default.createElement("div", {
+      className: classnames__default.default(GenericTile_module.face, GenericTile_module.faceBack)
+    }, React__default.default.createElement("div", {
+      className: GenericTile_module.informationBtn
+    }, React__default.default.createElement(IconButton.IconButton, {
+      label: "Information",
+      icon: React__default.default.createElement(ArrowBackwardIcon.ArrowBackwardIcon, {
+        role: "presentation"
+      }),
+      onClick: function () {
+        return setIsFlipped(false);
+      },
+      disabled: !isFlipped,
+      "aria-hidden": !isFlipped
+    })), React__default.default.createElement("div", {
+      className: GenericTile_module.information
+    }, renderInformation(information)));
+  };
+  return React__default.default.createElement("div", tslib.__assign({
+    className: classnames__default.default(GenericTile_module.root, classNameOverride)
+  }, restProps), React__default.default.createElement("div", {
+    className: classnames__default.default(GenericTile_module.tile, isFlipped && GenericTile_module.isFlipped)
+  }, React__default.default.createElement(React__default.default.Fragment, null, renderFront(), renderBack())));
 };
 GenericTile.displayName = "GenericTile";
-
 exports.GenericTile = GenericTile;

package/dist/cjs/Tile/subcomponents/GenericTile/GenericTile.module.scss.cjs

@@ -1,5 +1,23 @@
 'use strict';
 
-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"};
-
+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"
+};
 module.exports = styles;