@carbon/ibm-products 2.65.0 → 2.66.0-rc.0

package/es/components/PageHeader/PageHeaderTitle.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
@@ -13,55 +13,56 @@ import { SkeletonText, DefinitionTooltip } from '@carbon/react';
 import { EditInPlace } from '../EditInPlace/EditInPlace.js';
 import { useOverflowStringWidth } from '../../global/js/hooks/useOverflowString.js';
 
-var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "onSave", "editDescription", "editableLabel", "cancelDescription", "saveDescription", "tooltipAlignment"];
-
 /**
  *
  * Utility component used by Page Header
  */
 // eslint-disable-next-line react/prop-types
-var PageHeaderTitle = function PageHeaderTitle(_ref) {
-  var blockClass = _ref.blockClass,
-    hasBreadcrumbRow = _ref.hasBreadcrumbRow,
-    title = _ref.title;
-  var titleInnards;
+const PageHeaderTitle = _ref => {
+  let {
+    blockClass,
+    hasBreadcrumbRow,
+    title
+  } = _ref;
+  let titleInnards;
   // eslint-disable-next-line
   // debugger;
 
-  var text = title.text,
-    content = title.content,
-    loading = title.loading,
-    icon = title.icon,
-    asText = title.asText,
-    onChange = title.onChange,
-    onSave = title.onSave,
-    editDescription = title.editDescription,
-    editableLabel = title.editableLabel,
-    cancelDescription = title.cancelDescription,
-    saveDescription = title.saveDescription,
-    _title$tooltipAlignme = title.tooltipAlignment,
-    tooltipAlignment = _title$tooltipAlignme === void 0 ? 'bottom' : _title$tooltipAlignme,
-    rest = _objectWithoutProperties(title, _excluded);
-  var titleText;
-  var isEditable = !!onSave;
-  var titleRef = useRef();
-  var isEllipsisApplied = useOverflowStringWidth(titleRef);
+  let {
+    text,
+    content,
+    loading,
+    icon,
+    asText,
+    onChange,
+    onSave,
+    editDescription,
+    editableLabel,
+    cancelDescription,
+    saveDescription,
+    tooltipAlignment = 'bottom',
+    ...rest
+  } = title;
+  let titleText;
+  let isEditable = !!onSave;
+  const titleRef = useRef();
+  const isEllipsisApplied = useOverflowStringWidth(titleRef);
   if (text || !content) {
     if (text === undefined && typeof title === 'string') {
       text = title;
       asText = title;
     }
-    var TitleIcon = icon;
-    var titleContent = /*#__PURE__*/React__default.createElement("span", {
+    const TitleIcon = icon;
+    const titleContent = /*#__PURE__*/React__default.createElement("span", {
       ref: titleRef,
-      className: "".concat(blockClass, "__titleText")
+      className: `${blockClass}__titleText`
     }, text);
     titleInnards = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon && !loading ? /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(blockClass, "__title-icon-wrapper")
+      className: `${blockClass}__title-icon-wrapper`
     }, /*#__PURE__*/React__default.createElement(TitleIcon, {
-      className: "".concat(blockClass, "__title-icon")
+      className: `${blockClass}__title-icon`
     })) : null, loading ? /*#__PURE__*/React__default.createElement(SkeletonText, {
-      className: "".concat(blockClass, "__title-skeleton")
+      className: `${blockClass}__title-skeleton`
     }) : isEditable ? /*#__PURE__*/React__default.createElement(EditInPlace, _extends({
       tooltipAlignment: "bottom",
       value: text,
@@ -77,19 +78,25 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
       openOnHover: false,
       align: tooltipAlignment,
       definition: text,
-      className: "".concat(blockClass, "__tooltip")
+      className: `${blockClass}__tooltip`
     }, titleContent) : titleContent);
   } else {
     titleInnards = content;
     titleText = asText;
   }
   return /*#__PURE__*/React__default.createElement("h1", {
-    className: cx("".concat(blockClass, "__title"), _defineProperty({}, "".concat(blockClass, "__title--editable"), isEditable), _defineProperty({}, "".concat(blockClass, "__title--fades"), hasBreadcrumbRow)),
+    className: cx(`${blockClass}__title`, {
+      [`${blockClass}__title--editable`]: isEditable
+    }, {
+      [`${blockClass}__title--fades`]: hasBreadcrumbRow
+    }),
     title: titleText
   }, titleInnards);
 };
-var editInPlaceRequired = function editInPlaceRequired(_ref2) {
-  var onSave = _ref2.onSave;
+const editInPlaceRequired = _ref2 => {
+  let {
+    onSave
+  } = _ref2;
   return !!onSave;
 };
 PageHeaderTitle.propTypes = {

package/es/components/PageHeader/PageHeaderUtils.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import cx from 'classnames';
 import { pkg } from '../../settings.js';
@@ -13,7 +12,7 @@ import { scrollableAncestor } from '../../global/js/utils/scrollableAncestor.js'
 import { SkeletonText } from '@carbon/react';
 
 var _SkeletonText;
-var blockClass = "".concat(pkg.prefix, "--page-header");
+const blockClass = `${pkg.prefix}--page-header`;
 
 /**
  * Assesses the vertical height of various elements and calls setMetrics with update
@@ -25,9 +24,9 @@ var blockClass = "".concat(pkg.prefix, "--page-header");
  * @param {boolean} widthIsNarrow
  * @param {()} setMetrics
  */
-var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerRef, offsetTopMeasuringRef, navigation, enableBreadcrumbScroll, hasActionBar, widthIsNarrow, setMetrics) {
-  var dynamicRefs = {};
-  var getDynamicRef = function getDynamicRef(selector) {
+const utilCheckUpdateVerticalSpace = (headerRef, offsetTopMeasuringRef, navigation, enableBreadcrumbScroll, hasActionBar, widthIsNarrow, setMetrics) => {
+  const dynamicRefs = {};
+  const getDynamicRef = selector => {
     // would love to do this differently but digging in the dom seems easier
     // than getting a ref to a conditionally rendered item
     /* don't know how to test resize */
@@ -35,7 +34,7 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
     if (!headerRef.current) {
       return undefined;
     } else {
-      var dRef = dynamicRefs[selector];
+      let dRef = dynamicRefs[selector];
       /* istanbul ignore else */
       if (!dRef || /* istanbul ignore next */dRef.parentNode === null) {
         dynamicRefs[selector] = headerRef.current.querySelector(selector);
@@ -43,16 +42,16 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
     }
     return dynamicRefs[selector];
   };
-  setMetrics(function (previous) {
+  setMetrics(previous => {
     // Utility function that checks the heights of various elements which are used to determine layout
-    var update = {};
-    var breadcrumbTitleEl = getDynamicRef(".".concat(blockClass, "__breadcrumb-title"));
-    var breadcrumbRowEl = getDynamicRef(".".concat(blockClass, "__breadcrumb-row"));
-    var titleRowEl = getDynamicRef(".".concat(blockClass, "__title-row"));
-    var subtitleRowEl = getDynamicRef(".".concat(blockClass, "__subtitle-row"));
-    var availableRowEl = getDynamicRef(".".concat(blockClass, "__available-row"));
-    var navigationRowEl = getDynamicRef(".".concat(blockClass, "__navigation-row"));
-    var pageActionsEl = getDynamicRef(".".concat(blockClass, "__page-actions"));
+    const update = {};
+    const breadcrumbTitleEl = getDynamicRef(`.${blockClass}__breadcrumb-title`);
+    const breadcrumbRowEl = getDynamicRef(`.${blockClass}__breadcrumb-row`);
+    const titleRowEl = getDynamicRef(`.${blockClass}__title-row`);
+    const subtitleRowEl = getDynamicRef(`.${blockClass}__subtitle-row`);
+    const availableRowEl = getDynamicRef(`.${blockClass}__available-row`);
+    const navigationRowEl = getDynamicRef(`.${blockClass}__navigation-row`);
+    const pageActionsEl = getDynamicRef(`.${blockClass}__page-actions`);
 
     /* istanbul ignore next */
     update.headerHeight = headerRef.current ? headerRef.current.clientHeight : 0;
@@ -62,13 +61,13 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
     // The header offset is the vertical distance from the top of the document to
     // the page header, which we obtain using getBoundingClientRect() for robust
     // behavior. We use this offset as the scroll/fixed threshold.
-    var scrollableContainer = scrollableAncestor(headerRef.current);
+    const scrollableContainer = scrollableAncestor(headerRef.current);
 
     /* istanbul ignore next */
-    var scrollableContainerTop = scrollableContainer ? scrollableContainer.getBoundingClientRect().top : 0;
+    const scrollableContainerTop = scrollableContainer ? scrollableContainer.getBoundingClientRect().top : 0;
 
     /* istanbul ignore next */
-    var offsetMeasuringTop = offsetTopMeasuringRef.current ? offsetTopMeasuringRef.current.getBoundingClientRect().top : 0;
+    const offsetMeasuringTop = offsetTopMeasuringRef.current ? offsetTopMeasuringRef.current.getBoundingClientRect().top : 0;
 
     // The header offset calculation is either going to work out at 0 if we have no gap between scrolling container
     // top and the measuring ref top, or the difference between.
@@ -108,7 +107,7 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
     }
 
     // if (window) {
-    var val;
+    let val;
     /* don't know how to test resize */
     /* istanbul ignore if */
     if (breadcrumbRowEl) {
@@ -129,15 +128,18 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
       // adjust headerTopValue when there are no page actions or action bar items (margin above title row)
       update.headerTopValue -= update.titleRowSpaceAbove;
     }
-    return _objectSpread2(_objectSpread2({}, previous), update);
+    return {
+      ...previous,
+      ...update
+    };
   });
 };
 
 // Trigger a window scroll, if necessary, to set the collapsed state.
-var utilSetCollapsed = function utilSetCollapsed(collapse, headerRef, headerOffset, headerTopValue) {
+const utilSetCollapsed = (collapse, headerRef, headerOffset, headerTopValue) => {
   /* don't know how to test resize */
   /* istanbul ignore else */
-  var scrollableTarget = scrollableAncestor(headerRef.current);
+  let scrollableTarget = scrollableAncestor(headerRef.current);
   if (collapse) {
     scrollableTarget.scrollTo({
       top: headerOffset - headerTopValue,
@@ -150,8 +152,8 @@ var utilSetCollapsed = function utilSetCollapsed(collapse, headerRef, headerOffs
     });
   }
 };
-var utilGetBreadcrumbItemForTitle = function utilGetBreadcrumbItemForTitle(blockClass, collapseTitle, title) {
-  var breadcrumbTitle;
+const utilGetBreadcrumbItemForTitle = (blockClass, collapseTitle, title) => {
+  let breadcrumbTitle;
   if (title) {
     if (title.text !== undefined) {
       // Shape title provided
@@ -160,22 +162,23 @@ var utilGetBreadcrumbItemForTitle = function utilGetBreadcrumbItemForTitle(block
         title: title.text
       };
     } else if (title.content !== undefined) {
-      var _ref, _title$breadcrumbCont;
       // user defined content
       breadcrumbTitle = {
-        label: (_ref = (_title$breadcrumbCont = title.breadcrumbContent) !== null && _title$breadcrumbCont !== void 0 ? _title$breadcrumbCont : title.content) !== null && _ref !== void 0 ? _ref : title.asText,
+        label: title.breadcrumbContent ?? title.content ?? title.asText,
         title: title.asText
       };
     } else {
       breadcrumbTitle = {
         label: title,
-        title: title
+        title
       };
     }
     if (breadcrumbTitle) {
       breadcrumbTitle.key = 'breadcrumb-title';
       breadcrumbTitle.isCurrentPage = true;
-      breadcrumbTitle.className = cx(["".concat(blockClass, "__breadcrumb-title"), _defineProperty({}, "".concat(blockClass, "__breadcrumb-title--pre-collapsed"), collapseTitle)]);
+      breadcrumbTitle.className = cx([`${blockClass}__breadcrumb-title`, {
+        [`${blockClass}__breadcrumb-title--pre-collapsed`]: collapseTitle
+      }]);
     }
     if (title.shortTitle) {
       breadcrumbTitle.shortTitle = title.shortTitle;

package/es/components/ProductiveCard/ProductiveCard.d.ts

@@ -1,13 +1,6 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
-type ActionIcon = {
-    id?: string;
-    icon?: CarbonIconType;
-    onClick?: (event: MouseEvent) => void;
-    onKeydown?: (event: KeyboardEvent) => void;
-    iconDescription?: string;
-    href?: string;
-};
+import { ActionIcon } from '../Card/Card';
 type overflowAction = {
     id?: string;
     itemText?: string;
@@ -18,7 +11,7 @@ type PlacementType = 'top' | 'bottom';
 type ClickZoneType = 'one' | 'two' | 'three';
 export interface ProductiveCardProps extends PropsWithChildren {
     /**
-     * Icons that are displayed on card. Refer to design documentation for implementation guidelines. Note- href will supersede onClick
+     * Icons that are displayed on the card. Refer to design documentation for implementation guidelines. Note: href is deprecated. Set link.href for href functionality. If you are setting link object, href is a required property. link object supports all anchor element properties. Precedence: link.href > href. If link.href or href is set => anchor element, else button.
      */
     actionIcons?: ActionIcon[];
     /**
@@ -29,14 +22,10 @@ export interface ProductiveCardProps extends PropsWithChildren {
      * Determines if the action icons are on the top or bottom of the card
      */
     actionsPlacement?: PlacementType;
-    /**
-     * Content that shows in the body of the card
-     */
     /**
      * Optional user provided class
      */
     className?: string;
-    children: ReactNode;
     /**
      * Designates which zones of the card are clickable. Refer to design documentation for implementation guidelines
      */

package/es/components/ProductiveCard/ProductiveCard.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
@@ -13,25 +13,25 @@ import { pkg } from '../../settings.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { Card } from '../Card/Card.js';
 
-var _excluded = ["actionsPlacement"];
-var componentName = 'ProductiveCard';
-var ProductiveCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _ref$actionsPlacement = _ref.actionsPlacement,
-    actionsPlacement = _ref$actionsPlacement === void 0 ? 'top' : _ref$actionsPlacement,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var validProps = prepareProps(rest, ['media', 'mediaPosition', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind']);
-  return /*#__PURE__*/React__default.createElement(Card, _extends({}, _objectSpread2(_objectSpread2({}, validProps), {}, {
-    actionsPlacement: actionsPlacement,
-    ref: ref,
+const componentName = 'ProductiveCard';
+let ProductiveCard = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    actionsPlacement = 'top',
+    ...rest
+  } = _ref;
+  const validProps = prepareProps(rest, ['media', 'mediaPosition', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind']);
+  return /*#__PURE__*/React__default.createElement(Card, _extends({}, validProps, {
+    actionsPlacement,
+    ref,
     productive: true
-  }), getDevtoolsProps(componentName)));
+  }, getDevtoolsProps(componentName)));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
 ProductiveCard = pkg.checkComponentEnabled(ProductiveCard, componentName);
 ProductiveCard.propTypes = {
   /**
-   * Icons that are displayed on card. Refer to design documentation for implementation guidelines
+   * Icons that are displayed on the card. Refer to design documentation for implementation guidelines. Note: href is deprecated. Set link.href for href functionality. If you are setting link object, href is a required property. link object supports all anchor element properties. Precedence: link.href > href. If link.href or href is set => anchor element, else button.
    */
   /**@ts-ignore */
   actionIcons: PropTypes.arrayOf(PropTypes.shape({
@@ -40,7 +40,13 @@ ProductiveCard.propTypes = {
     onKeyDown: PropTypes.func,
     onClick: PropTypes.func,
     iconDescription: PropTypes.string,
-    href: PropTypes.string
+    /**
+     * @deprecated please use the `link.href` instead
+     */
+    href: PropTypes.string,
+    link: PropTypes.shape({
+      href: PropTypes.string.isRequired
+    })
   })),
   /**
    * Determines if the action icons are on the top or bottom of the card

package/es/components/RemoveModal/RemoveModal.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { ComposedModal, ModalHeader, ModalBody, TextInput, ModalFooter, Button } from '@carbon/react';
 import React__default, { forwardRef, useState, useRef, useEffect } from 'react';
 import PropTypes from '../../_virtual/index.js';
@@ -16,8 +16,7 @@ import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 
-var _excluded = ["body", "className", "iconDescription", "inputInvalidText", "inputLabelText", "inputPlaceholderText", "label", "onClose", "onRequestSubmit", "open", "portalTarget", "preventCloseOnClickOutside", "primaryButtonDisabled", "primaryButtonText", "primaryDangerDescription", "resourceName", "secondaryButtonText", "textConfirmation", "title"];
-var componentName = 'RemoveModal';
+const componentName = 'RemoveModal';
 
 /**
 The `RemoveModal` covers what is known as high impact and medium impact deleting.
@@ -25,40 +24,39 @@ Enabling `textConfirmation` enables what would be considered the high impact sta
 For additional information on differentiating between delete / remove and low / medium / high impact please refer to the usage guidelines.
  */
 
-var RemoveModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var body = _ref.body,
-    className = _ref.className,
-    iconDescription = _ref.iconDescription,
-    inputInvalidText = _ref.inputInvalidText,
-    inputLabelText = _ref.inputLabelText,
-    inputPlaceholderText = _ref.inputPlaceholderText,
-    label = _ref.label,
-    onClose = _ref.onClose,
-    onRequestSubmit = _ref.onRequestSubmit,
-    open = _ref.open,
-    portalTargetIn = _ref.portalTarget,
-    preventCloseOnClickOutside = _ref.preventCloseOnClickOutside,
-    primaryButtonDisabled = _ref.primaryButtonDisabled,
-    primaryButtonText = _ref.primaryButtonText,
-    primaryDangerDescription = _ref.primaryDangerDescription,
-    resourceName = _ref.resourceName,
-    secondaryButtonText = _ref.secondaryButtonText,
-    textConfirmation = _ref.textConfirmation,
-    title = _ref.title,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var previousState = usePreviousValue({
-    open: open
+let RemoveModal = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    body,
+    className,
+    iconDescription,
+    inputInvalidText,
+    inputLabelText,
+    inputPlaceholderText,
+    label,
+    onClose,
+    onRequestSubmit,
+    open,
+    portalTarget: portalTargetIn,
+    preventCloseOnClickOutside,
+    primaryButtonDisabled,
+    primaryButtonText,
+    primaryDangerDescription,
+    resourceName,
+    secondaryButtonText,
+    textConfirmation,
+    title,
+    ...rest
+  } = _ref;
+  const previousState = usePreviousValue({
+    open
   });
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    userInput = _useState2[0],
-    setUserInput = _useState2[1];
-  var idRef = useRef(uuidv4());
-  var renderPortalUse = usePortalTarget(portalTargetIn);
-  var onChangeHandler = function onChangeHandler(e) {
+  const [userInput, setUserInput] = useState('');
+  const idRef = useRef(uuidv4());
+  const renderPortalUse = usePortalTarget(portalTargetIn);
+  const onChangeHandler = e => {
     setUserInput(e.target.value);
   };
-  var checkPrimaryButtonDisabled = function checkPrimaryButtonDisabled() {
+  const checkPrimaryButtonDisabled = () => {
     // user control should be used primarily
     if (primaryButtonDisabled) {
       return true;
@@ -67,35 +65,34 @@ var RemoveModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
     return false;
   };
-  var primaryButtonStatus = checkPrimaryButtonDisabled();
-  var blockClass = "".concat(pkg.prefix, "--remove-modal");
+  const primaryButtonStatus = checkPrimaryButtonDisabled();
+  const blockClass = `${pkg.prefix}--remove-modal`;
 
   // Clear the user input this way so that if the onRequestSubmit handler fails for some reason
   // the value of the input will still remain: we only want to empty the input value
   // when open actually changes to false.
-  useEffect(function () {
-    if (!open && previousState !== null && previousState !== void 0 && previousState.open) {
+  useEffect(() => {
+    if (!open && previousState?.open) {
       setUserInput('');
     }
-  }, [open, previousState === null || previousState === void 0 ? void 0 : previousState.open]);
+  }, [open, previousState?.open]);
   return renderPortalUse(/*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
     className: cx(blockClass, className),
     size: "sm",
-    "aria-label": title
-  }, _objectSpread2({
-    open: open,
-    ref: ref,
-    preventCloseOnClickOutside: preventCloseOnClickOutside,
-    onClose: onClose
-  }, getDevtoolsProps(componentName))), /*#__PURE__*/React__default.createElement(ModalHeader, {
+    "aria-label": title,
+    open,
+    ref,
+    preventCloseOnClickOutside,
+    onClose
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(ModalHeader, {
     title: title,
     label: label,
     iconDescription: iconDescription
   }), /*#__PURE__*/React__default.createElement(ModalBody, null, typeof body === 'string' ? /*#__PURE__*/React__default.createElement("p", {
-    className: "".concat(blockClass, "__body")
+    className: `${blockClass}__body`
   }, body) : body, textConfirmation && /*#__PURE__*/React__default.createElement(TextInput, {
-    id: "".concat(idRef.current, "-confirmation-input"),
-    className: "".concat(blockClass, "__input"),
+    id: `${idRef.current}-confirmation-input`,
+    className: `${blockClass}__input`,
     invalidText: inputInvalidText,
     labelText: inputLabelText,
     placeholder: inputPlaceholderText,