@spaced-out/ui-design-system 0.3.9 → 0.3.10

package/lib/components/InContextAlert/InContextAlert.js

@@ -21,7 +21,8 @@ const AlertIcon = _ref => {
   let {
     semantic,
     leftIconName,
-    leftIconType
+    leftIconType,
+    iconClassName
   } = _ref;
   switch (semantic) {
     case _common.ALERT_SEMANTIC.neutral:
@@ -29,42 +30,48 @@ const AlertIcon = _ref => {
         color: _typography.TEXT_COLORS.neutral,
         name: leftIconName ? leftIconName : 'face-smile',
         size: "small",
-        type: leftIconType
+        type: leftIconType,
+        className: iconClassName
       });
     case _common.ALERT_SEMANTIC.success:
       return /*#__PURE__*/React.createElement(_Icon.Icon, {
         name: leftIconName ? leftIconName : 'circle-check',
         size: "small",
         color: _typography.TEXT_COLORS.success,
-        type: leftIconType
+        type: leftIconType,
+        className: iconClassName
       });
     case _common.ALERT_SEMANTIC.information:
       return /*#__PURE__*/React.createElement(_Icon.Icon, {
         name: leftIconName ? leftIconName : 'circle-info',
         size: "small",
         color: _typography.TEXT_COLORS.information,
-        type: leftIconType
+        type: leftIconType,
+        className: iconClassName
       });
     case _common.ALERT_SEMANTIC.warning:
       return /*#__PURE__*/React.createElement(_Icon.Icon, {
         name: leftIconName ? leftIconName : 'circle-exclamation',
         size: "small",
         color: _typography.TEXT_COLORS.warning,
-        type: leftIconType
+        type: leftIconType,
+        className: iconClassName
       });
     case _common.ALERT_SEMANTIC.danger:
       return /*#__PURE__*/React.createElement(_Icon.Icon, {
         name: leftIconName ? leftIconName : 'shield-exclamation',
         size: "small",
         color: _typography.TEXT_COLORS.danger,
-        type: leftIconType
+        type: leftIconType,
+        className: iconClassName
       });
     default:
       return /*#__PURE__*/React.createElement(_Icon.Icon, {
         color: _typography.TEXT_COLORS.neutral,
         name: leftIconName ? leftIconName : 'face-smile',
         size: "small",
-        type: leftIconType
+        type: leftIconType,
+        className: iconClassName
       });
   }
 };
@@ -98,7 +105,8 @@ const InContextAlert = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, /*#__PURE__*/React.createElement(AlertIcon, {
     semantic: semantic,
     leftIconName: leftIconName,
-    leftIconType: leftIconType
+    leftIconType: leftIconType,
+    iconClassName: classNames?.icon
   }), React.Children.count(children) > 0 && /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
     className: (0, _classify.classify)(classNames?.alertText)
   }, /*#__PURE__*/React.createElement(_Truncate.Truncate, {
@@ -111,6 +119,7 @@ const InContextAlert = /*#__PURE__*/React.forwardRef((props, ref) => {
     color: "primary"
   }, actionText), !!dismissable && /*#__PURE__*/React.createElement(_Icon.ClickableIcon, {
     color: _typography.TEXT_COLORS.primary,
+    ariaLabel: "close",
     name: "close",
     size: "small",
     type: "regular",

package/lib/components/InContextAlert/InContextAlert.js.flow

@@ -19,6 +19,7 @@ type ClassNames = $ReadOnly<{
   wrapper?: string,
   alertText?: string,
   actionContainer?: string,
+  icon?: string,
 }>;
 
 type InContextAlertBaseProps = {
@@ -46,10 +47,12 @@ const AlertIcon = ({
   semantic,
   leftIconName,
   leftIconType,
+  iconClassName,
 }: {
   semantic: AlertSemanticType,
   leftIconName: string,
   leftIconType?: IconType,
+  iconClassName?: string,
 }) => {
   switch (semantic) {
   case ALERT_SEMANTIC.neutral:
@@ -59,6 +62,7 @@ const AlertIcon = ({
         name={leftIconName ? leftIconName : 'face-smile'}
         size="small"
         type={leftIconType}
+        className={iconClassName}
       />
     );
   case ALERT_SEMANTIC.success:
@@ -68,6 +72,7 @@ const AlertIcon = ({
         size="small"
         color={TEXT_COLORS.success}
         type={leftIconType}
+        className={iconClassName}
       />
     );
 
@@ -78,6 +83,7 @@ const AlertIcon = ({
         size="small"
         color={TEXT_COLORS.information}
         type={leftIconType}
+        className={iconClassName}
       />
     );
 
@@ -88,6 +94,7 @@ const AlertIcon = ({
         size="small"
         color={TEXT_COLORS.warning}
         type={leftIconType}
+        className={iconClassName}
       />
     );
 
@@ -98,6 +105,7 @@ const AlertIcon = ({
         size="small"
         color={TEXT_COLORS.danger}
         type={leftIconType}
+        className={iconClassName}
       />
     );
 
@@ -108,6 +116,7 @@ const AlertIcon = ({
         name={leftIconName ? leftIconName : 'face-smile'}
         size="small"
         type={leftIconType}
+        className={iconClassName}
       />
     );
   }
@@ -157,6 +166,7 @@ export const InContextAlert: React$AbstractComponent<
               semantic={semantic}
               leftIconName={leftIconName}
               leftIconType={leftIconType}
+              iconClassName={classNames?.icon}
             />
             {React.Children.count(children) > 0 && (
               <SubTitleExtraSmall className={classify(classNames?.alertText)}>
@@ -180,6 +190,7 @@ export const InContextAlert: React$AbstractComponent<
                 {!!dismissable && (
                   <ClickableIcon
                     color={TEXT_COLORS.primary}
+                    ariaLabel="close"
                     name="close"
                     size="small"
                     type="regular"

package/lib/components/KPIBox/KPIBox.js.flow

@@ -19,7 +19,7 @@ type ClassNames = $ReadOnly<{
 
 export type KPIBoxProps = {
   classNames?: ClassNames,
-  semantic: AlertSemanticType,
+  semantic?: AlertSemanticType,
   topContent?: React.Node,
   middleContent?: React.Node,
   bottomContent?: React.Node,

package/lib/components/PromptChip/PromptChip.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PromptChip = exports.PROMPT_CHIP_TYPE = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _typography = require("../../types/typography");
+var _classify = require("../../utils/classify");
+var _ConditionalWrapper = require("../ConditionalWrapper");
+var _Icon = require("../Icon");
+var _Tooltip = require("../Tooltip");
+var _PromptChipModule = _interopRequireDefault(require("./PromptChip.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const PROMPT_CHIP_TYPE = Object.freeze({
+  primary: 'primary',
+  secondary: 'secondary'
+});
+exports.PROMPT_CHIP_TYPE = PROMPT_CHIP_TYPE;
+const PromptChip = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    type = PROMPT_CHIP_TYPE.primary,
+    onClick,
+    iconType = _Icon.ICON_TYPE.solid,
+    iconName = 'lightbulb',
+    children,
+    iconColor = 'clickable',
+    rightSlot,
+    onDismiss,
+    classNames,
+    dismissable,
+    selfDismiss,
+    showInfoIcon,
+    infoIconTooltip
+  } = props;
+  const [dismissed, setDismissed] = React.useState(false);
+  const closeClickHandler = e => {
+    e.stopPropagation();
+    onDismiss?.(e);
+    selfDismiss && setDismissed(true);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !dismissed && /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": "Prompt-Chip",
+    className: (0, _classify.classify)(_PromptChipModule.default.promptChipWrapper, {
+      [_PromptChipModule.default.primary]: type === PROMPT_CHIP_TYPE.primary,
+      [_PromptChipModule.default.secondary]: type === PROMPT_CHIP_TYPE.secondary
+    }, classNames?.wrapper),
+    onClick: event => {
+      onClick?.(event);
+    },
+    tabIndex: onClick ? 0 : undefined,
+    role: "button"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_PromptChipModule.default.promptChipContainer, {
+      [_PromptChipModule.default.onHover]: !!onClick
+    }, classNames?.container)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _PromptChipModule.default.leftSection
+  }, /*#__PURE__*/React.createElement(_Icon.Icon, {
+    size: _Icon.ICON_SIZE.small,
+    name: iconName,
+    type: iconType,
+    color: iconColor,
+    className: classNames?.icon
+  }), !!children && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_PromptChipModule.default.childrenWrapper, classNames?.children)
+  }, children)), /*#__PURE__*/React.createElement("div", {
+    className: _PromptChipModule.default.rightSection
+  }, rightSlot ? rightSlot : null, !!showInfoIcon && /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
+    condition: infoIconTooltip && typeof infoIconTooltip === 'object' && Object.keys(infoIconTooltip).length > 0,
+    wrapper: children => /*#__PURE__*/React.createElement(_Tooltip.Tooltip, infoIconTooltip, children)
+  }, /*#__PURE__*/React.createElement(_Icon.Icon, {
+    size: _Icon.ICON_SIZE.small,
+    name: "info-circle",
+    color: _typography.TEXT_COLORS.primary,
+    className: classNames?.icon
+  })), !!dismissable && /*#__PURE__*/React.createElement(_Icon.CloseIcon, {
+    size: _Icon.ICON_SIZE.small,
+    onClick: closeClickHandler,
+    ariaLabel: "Dismiss",
+    className: _PromptChipModule.default.dismissIcon
+  })))));
+});
+exports.PromptChip = PromptChip;

package/lib/components/PromptChip/PromptChip.js.flow

@@ -0,0 +1,161 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {ColorTypes} from '../../types/typography';
+import {TEXT_COLORS} from '../../types/typography';
+import {classify} from '../../utils/classify';
+import {ConditionalWrapper} from '../ConditionalWrapper';
+import type {IconType} from '../Icon';
+import {CloseIcon, Icon, ICON_SIZE, ICON_TYPE} from '../Icon';
+import type {TooltipProps} from '../Tooltip';
+import {Tooltip} from '../Tooltip';
+
+import css from './PromptChip.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  icon?: string,
+  wrapper?: string,
+  children?: string,
+  container?: string,
+}>;
+
+export const PROMPT_CHIP_TYPE = Object.freeze({
+  primary: 'primary',
+  secondary: 'secondary',
+});
+
+export type PromptChipType = $Values<typeof PROMPT_CHIP_TYPE>;
+export type PromptChipProps = {
+  classNames?: ClassNames,
+  ...
+    | {
+        onDismiss?: ?(SyntheticEvent<HTMLElement>) => mixed,
+        dismissable: true,
+        selfDismiss?: boolean,
+      }
+    | {dismissable?: false},
+  type?: PromptChipType,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  iconName?: string,
+  iconType?: IconType,
+  children?: React.Node,
+  iconColor?: ColorTypes,
+  rightSlot?: React.Node,
+  showInfoIcon?: boolean,
+  infoIconTooltip?: TooltipProps,
+};
+
+export const PromptChip: React$AbstractComponent<
+  PromptChipProps,
+  HTMLDivElement,
+> = React.forwardRef<PromptChipProps, HTMLDivElement>(
+  (props: PromptChipProps, ref): React.Node => {
+    const {
+      type = PROMPT_CHIP_TYPE.primary,
+      onClick,
+      iconType = ICON_TYPE.solid,
+      iconName = 'lightbulb',
+      children,
+      iconColor = 'clickable',
+      rightSlot,
+      onDismiss,
+      classNames,
+      dismissable,
+      selfDismiss,
+      showInfoIcon,
+      infoIconTooltip,
+    } = props;
+    const [dismissed, setDismissed] = React.useState(false);
+    const closeClickHandler = (e) => {
+      e.stopPropagation();
+      onDismiss?.(e);
+      selfDismiss && setDismissed(true);
+    };
+
+    return (
+      <>
+        {!dismissed && (
+          <div
+            ref={ref}
+            data-testid="Prompt-Chip"
+            className={classify(
+              css.promptChipWrapper,
+              {
+                [css.primary]: type === PROMPT_CHIP_TYPE.primary,
+                [css.secondary]: type === PROMPT_CHIP_TYPE.secondary,
+              },
+              classNames?.wrapper,
+            )}
+            onClick={(event) => {
+              onClick?.(event);
+            }}
+            tabIndex={onClick ? 0 : undefined}
+            role="button"
+          >
+            <div
+              className={classify(
+                css.promptChipContainer,
+                {
+                  [css.onHover]: !!onClick,
+                },
+                classNames?.container,
+              )}
+            >
+              <div className={css.leftSection}>
+                <Icon
+                  size={ICON_SIZE.small}
+                  name={iconName}
+                  type={iconType}
+                  color={iconColor}
+                  className={classNames?.icon}
+                />
+                {!!children && (
+                  <div
+                    className={classify(
+                      css.childrenWrapper,
+                      classNames?.children,
+                    )}
+                  >
+                    {children}
+                  </div>
+                )}
+              </div>
+              <div className={css.rightSection}>
+                {rightSlot ? rightSlot : null}
+                {!!showInfoIcon && (
+                  <ConditionalWrapper
+                    condition={
+                      infoIconTooltip &&
+                      typeof infoIconTooltip === 'object' &&
+                      Object.keys(infoIconTooltip).length > 0
+                    }
+                    wrapper={(children) => (
+                      <Tooltip {...infoIconTooltip}>{children}</Tooltip>
+                    )}
+                  >
+                    <Icon
+                      size={ICON_SIZE.small}
+                      name="info-circle"
+                      color={TEXT_COLORS.primary}
+                      className={classNames?.icon}
+                    />
+                  </ConditionalWrapper>
+                )}
+                {!!dismissable && (
+                  <CloseIcon
+                    size={ICON_SIZE.small}
+                    onClick={closeClickHandler}
+                    ariaLabel="Dismiss"
+                    className={css.dismissIcon}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+      </>
+    );
+  },
+);

package/lib/components/PromptChip/PromptChip.module.css

@@ -0,0 +1,82 @@
+@value (
+    spaceSmall,
+    spaceXSmall,
+    spaceFluid
+) from '../../styles/variables/_space.css';
+@value (
+    colorFillPrimary,
+    colorInformation,
+    colorFocusPrimary,
+    colorFillSecondary,
+    colorNeutralLightest,
+    colorBackgroundTertiary,
+    colorInformationLightest
+ ) from '../../styles/variables/_color.css';
+@value (
+    borderWidthNone,  
+    borderRadiusMedium,
+    borderWidthPrimary,
+    borderWidthTertiary
+ ) from '../../styles/variables/_border.css';
+@value (
+    opacity0,
+    opacity100
+ ) from '../../styles/variables/_opacity.css';
+
+.promptChipWrapper {
+  display: flex;
+  border-radius: borderRadiusMedium;
+  outline: none;
+  width: spaceFluid;
+
+  &:focus {
+    box-shadow: borderWidthNone borderWidthNone borderWidthNone
+      borderWidthTertiary colorFocusPrimary;
+  }
+}
+
+.primary {
+  border: borderWidthPrimary solid transparent;
+  background-image: linear-gradient(
+      colorBackgroundTertiary,
+      colorBackgroundTertiary
+    ),
+    linear-gradient(to right, colorFillPrimary, colorInformation);
+  background-clip: content-box, border-box;
+  background-origin: border-box;
+}
+
+.secondary {
+  background-color: colorNeutralLightest;
+}
+
+.onHover:hover {
+  background-image: linear-gradient(
+    to right,
+    colorFillSecondary,
+    colorInformationLightest
+  );
+  cursor: pointer;
+}
+
+.promptChipContainer {
+  display: flex;
+  width: spaceFluid;
+  gap: spaceSmall;
+  padding: spaceXSmall;
+  padding-left: spaceSmall;
+  align-items: center;
+  border-radius: borderRadiusMedium;
+  justify-content: space-between;
+}
+
+.leftSection,
+.rightSection {
+  display: flex;
+  gap: spaceSmall;
+  align-items: center;
+}
+
+.childrenWrapper {
+  composes: bodyMedium from '../../styles/typography.module.css';
+}

package/lib/components/PromptChip/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _PromptChip = require("./PromptChip");
+Object.keys(_PromptChip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PromptChip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PromptChip[key];
+    }
+  });
+});

package/lib/components/PromptChip/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './PromptChip';

package/lib/components/PromptInput/PromptInput.js

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PromptInput = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _size = require("../../styles/variables/_size");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _Textarea = require("../Textarea");
+var _PromptInputModule = _interopRequireDefault(require("./PromptInput.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const CONSTANTS = {
+  DEFAULT_INPUT_PLACEHOLDER: 'Ask me anything',
+  INPUT_NAME: 'prompt-textarea',
+  BUTTON_TEXT: 'Generate',
+  BUTTON_ICON: 'sparkles',
+  BUTTON_ARIA_LABEL: 'Prompt Button',
+  TEXT_AREA_ROWS: 1
+};
+const PromptInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    value,
+    onInputChange,
+    onInputFocus,
+    onInputBlur,
+    onInputKeyDown,
+    inputName = CONSTANTS.INPUT_NAME,
+    inputDisabled,
+    inputPlaceholder = CONSTANTS.DEFAULT_INPUT_PLACEHOLDER,
+    inputLocked,
+    inputError,
+    inputErrorText,
+    helperContent,
+    textCountLimit,
+    classNames,
+    withPadding = true,
+    buttonText = CONSTANTS.BUTTON_TEXT,
+    buttonDisabled,
+    onButtonClick,
+    buttonAriaLabel = CONSTANTS.BUTTON_ARIA_LABEL,
+    isButtonLoading,
+    buttonIconLeftName = CONSTANTS.BUTTON_ICON,
+    buttonIconLeftType = _Icon.ICON_TYPE.solid
+  } = _ref;
+  const textareaRef = React.useRef(null);
+  const handleInput = () => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = 'auto';
+      if (textarea.scrollHeight > parseInt(_size.size200)) {
+        textarea.style.height = _size.size200;
+        textarea.style.overflowY = 'auto';
+      } else {
+        textarea.style.height = `${textarea.scrollHeight}px`;
+        textarea.style.overflowY = 'hidden';
+      }
+    }
+  };
+  const textCountError = React.useMemo(() => {
+    const charCount = value ? value.length : 0;
+    return textCountLimit != null && charCount > textCountLimit;
+  }, [value, textCountLimit]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": "PromptInput",
+    className: (0, _classify.default)(_PromptInputModule.default.wrapper, {
+      [_PromptInputModule.default.styledPromptContainer]: withPadding
+    }, classNames?.wrapper)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _PromptInputModule.default.inputActionWrapper
+  }, /*#__PURE__*/React.createElement(_Textarea.Textarea, {
+    classNames: {
+      box: (0, _classify.default)(_PromptInputModule.default.promptInputBox, classNames?.inputBox),
+      textarea: (0, _classify.default)(_PromptInputModule.default.textarea, classNames?.textarea)
+    },
+    ref: textareaRef,
+    onInput: handleInput,
+    value: value,
+    onChange: onInputChange,
+    onFocus: onInputFocus,
+    onBlur: onInputBlur,
+    onKeyDown: onInputKeyDown,
+    name: inputName,
+    disabled: inputDisabled,
+    placeholder: inputPlaceholder,
+    locked: inputLocked,
+    error: inputError || textCountError,
+    errorText: inputErrorText,
+    rows: CONSTANTS.TEXT_AREA_ROWS
+  }), /*#__PURE__*/React.createElement(_Button.Button, {
+    iconLeftName: buttonIconLeftName,
+    iconLeftType: buttonIconLeftType,
+    onClick: onButtonClick,
+    type: _Button.BUTTON_TYPES.gradient,
+    disabled: buttonDisabled,
+    ariaLabel: buttonAriaLabel,
+    isLoading: isButtonLoading,
+    classNames: {
+      wrapper: (0, _classify.default)(_PromptInputModule.default.actionButton, classNames?.buttonWrapper),
+      icon: classNames?.buttonIcon,
+      text: classNames?.buttonText
+    }
+  }, buttonText)), (!!helperContent || !!textCountLimit) && /*#__PURE__*/React.createElement("div", {
+    className: _PromptInputModule.default.secondaryRow
+  }, typeof helperContent === 'string' ? /*#__PURE__*/React.createElement(_Text.BodySmallBold, {
+    color: inputDisabled ? 'disabled' : 'secondary'
+  }, helperContent) : helperContent, /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
+    color: inputError || textCountError ? 'danger' : 'secondary',
+    className: _PromptInputModule.default.textCounter
+  }, !!textCountLimit && (value && value.length || 0) + '/' + textCountLimit)));
+});
+exports.PromptInput = PromptInput;