carbon-react 111.12.2 → 111.12.3

package/esm/components/date-range/date-range.component.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
@@ -14,7 +13,6 @@ import usePrevious from "../../hooks/__internal__/usePrevious";
 import getFormatData from "../date/__internal__/date-formats";
 import DateRangeContext from "./date-range.context";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
-
 const DateRange = ({
   endDateProps = {},
   id,
@@ -41,7 +39,6 @@ const DateRange = ({
     if (checkISOFormatAndLength(valueString)) {
       return formattedValue(format, parseISODate(valueString));
     }
-
     return valueString;
   }, [format]);
   const getStartDate = useCallback(() => {
@@ -70,11 +67,9 @@ const DateRange = ({
       setOpen: null
     }
   });
-
   function isEmptyValue(allowEmpty, inputValue) {
     return allowEmpty && !inputValue.length;
   }
-
   const [startDateValue, setStartDateValue] = useState({
     formattedValue: getStartDate(),
     rawValue: isEmptyValue(startDateProps.allowEmptyValue, getStartDate()) ? "" : formatToISO(format, getStartDate())
@@ -95,10 +90,8 @@ const DateRange = ({
         rawValue: isEmptyValue(endDateProps.allowEmptyValue, getEndDate()) ? "" : formatToISO(format, getEndDate())
       });
     };
-
     const hasPreviousValues = previousValue === null || previousValue === void 0 ? void 0 : previousValue.length;
     const hasUpdated = hasPreviousValues && (value[0] !== previousValue[0] || value[1] !== previousValue[1]);
-
     if (hasUpdated) {
       updateValues();
     }
@@ -108,7 +101,8 @@ const DateRange = ({
     const endValue = changedDate === "end" && newValue ? newValue : endDateValue;
     setLastChangedDate(changedDate);
     return {
-      target: { ...(name && {
+      target: {
+        ...(name && {
           name
         }),
         ...(id && {
@@ -118,54 +112,47 @@ const DateRange = ({
       }
     };
   }, [endDateValue, id, name, startDateValue]);
-
   const handleOnChange = (changedDate, ev) => {
     if (changedDate === "start") {
-      setStartDateValue({ ...ev.target.value
+      setStartDateValue({
+        ...ev.target.value
       });
     } else {
-      setEndDateValue({ ...ev.target.value
+      setEndDateValue({
+        ...ev.target.value
       });
     }
-
     const event = buildCustomEvent(changedDate, ev.target.value);
     onChange(event);
   };
-
   const startDateOnChange = ev => {
     handleOnChange("start", ev);
   };
-
   const endDateOnChange = ev => {
     handleOnChange("end", ev);
   };
-
   const updateInputMap = newState => {
     setInputRefMap(prev => {
-      return { ...prev,
+      return {
+        ...prev,
         ...newState
       };
     });
   };
-
   const isBlurBlocked = () => inputRefMap.start.isBlurBlocked.current || inputRefMap.end.isBlurBlocked.current;
-
   const handleOnBlur = ev => {
     if (isBlurBlocked()) {
       return;
     }
-
     if (onBlur) {
       const event = buildCustomEvent(lastChangedDate, ev.target.value);
       onBlur(event);
     }
   };
-
   const closePicker = activeInput => {
     inputRefMap[activeInput].setOpen(false);
     inputRefMap[activeInput].isBlurBlocked.current = false;
   };
-
   const handleOnKeyDown = (ev, activeInput) => {
     if (Events.isTabKey(ev) && Events.isShiftKey(ev)) {
       if (activeInput === "start") {
@@ -181,12 +168,10 @@ const DateRange = ({
       }
     }
   };
-
   const handleFocus = inputName => {
     closePicker(inputName);
     setLastChangedDate(inputName === "start" ? "end" : "start");
   };
-
   const dateProps = propsKey => {
     const props = propsKey === "start" ? startDateProps : endDateProps;
     const {
@@ -207,7 +192,6 @@ const DateRange = ({
       ...props
     };
   };
-
   return /*#__PURE__*/React.createElement(StyledDateRange, _extends({}, tagComponent("date-range", rest), {
     labelsInline: labelsInline
   }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(DateRangeContext.Provider, {
@@ -229,8 +213,8 @@ const DateRange = ({
     tooltipPosition: tooltipPosition
   }))));
 };
-
-const dateInputPropTypes = { // eslint-disable-next-line react/forbid-foreign-prop-types
+const dateInputPropTypes = {
+  // eslint-disable-next-line react/forbid-foreign-prop-types
   ...DateInput.propTypes,
   onChange: PropTypes.func,
   value: PropTypes.string
@@ -238,76 +222,60 @@ const dateInputPropTypes = { // eslint-disable-next-line react/forbid-foreign-pr
 DateRange.propTypes = {
   /** Filtered styled system margin props */
   ...marginPropTypes,
-
   /**
    * Optional label for endDate field
    */
   endLabel: PropTypes.string,
-
   /** Custom callback - receives array of startDate and endDate */
   onChange: PropTypes.func.isRequired,
-
   /** Custom callback - receives array of startDate and endDate */
   onBlur: PropTypes.func,
-
   /** An array containing the value of startDate and endDate */
   value: PropTypes.arrayOf(PropTypes.string).isRequired,
-
   /** Indicate that error has occurred on start date
   Pass string to display icon, tooltip and red border
   Pass true boolean to only display red border */
   startError: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
   /** Indicate that warning has occurred on start date
   Pass string to display icon, tooltip and orange border
   Pass true boolean to only display orange border */
   startWarning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
   /** Indicate additional information for start date
   Pass string to display icon, tooltip and blue border
   Pass true boolean to only display blue border */
   startInfo: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
   /** Indicate that error has occurred on end date
   Pass string to display icon, tooltip and red border
   Pass true boolean to only display red border */
   endError: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
   /** Indicate that warning has occurred on end date
   Pass string to display icon, tooltip and orange border
   Pass true boolean to only display orange border */
   endWarning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
   /** Indicate additional information for end date
   Pass string to display icon, tooltip and blue border
   Pass true boolean to only display blue border */
   endInfo: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
   /** When true, validation icons will be placed on labels instead of being placed on the inputs */
   validationOnLabel: PropTypes.bool,
-
   /**
    * Optional label for startDate field
    */
   startLabel: PropTypes.string,
-
   /** Display labels inline */
   labelsInline: PropTypes.bool,
-
   /** Props for the child start Date component. For more information see the Date component's [prop table](https://carbon.sage.com/iframe.html?id=date-input--default-story&viewMode=docs#props) */
-  startDateProps: PropTypes.shape({ ...dateInputPropTypes
+  startDateProps: PropTypes.shape({
+    ...dateInputPropTypes
   }),
-
   /** Props for the child end Date component. For more information see the Date component's [prop table](https://carbon.sage.com/iframe.html?id=date-input--default-story&viewMode=docs#props) */
-  endDateProps: PropTypes.shape({ ...dateInputPropTypes
+  endDateProps: PropTypes.shape({
+    ...dateInputPropTypes
   }),
-
   /** An optional string prop to provide a name to the component */
   name: PropTypes.string,
-
   /** An optional string prop to provide an id to the component */
   id: PropTypes.string,
-
   /** Overrides the default tooltip position */
   tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"])
 };

package/esm/components/decimal/decimal.component.js

@@ -1,12 +1,10 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { useState, useEffect, useRef, useCallback, useContext } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import Textbox from "../textbox";
 import LocaleContext from "../../__internal__/i18n-context";
 import usePrevious from "../../hooks/__internal__/usePrevious";
-
 const Decimal = ({
   align = "right",
   defaultValue,
@@ -29,45 +27,39 @@ const Decimal = ({
   const getSafeValueProp = useCallback(initialValue => {
     // We're intentionally preventing the use of number values to help prevent any unintentional rounding issues
     !(typeof initialValue === "string") ? process.env.NODE_ENV !== "production" ? invariant(false, "Decimal `value` prop must be a string") : invariant(false) : void 0;
-
     if (initialValue && !allowEmptyValue) {
       !(initialValue !== "") ? process.env.NODE_ENV !== "production" ? invariant(false, "Decimal `value` must not be an empty string. Please use `allowEmptyValue` or `0.00`") : invariant(false) : void 0;
     }
-
     return initialValue;
   }, [allowEmptyValue]);
   const getSeparator = useCallback(separatorType => {
     var _Intl$NumberFormat$fo;
-
     const numberWithGroupAndDecimalSeparator = 10000.1;
     return (_Intl$NumberFormat$fo = Intl.NumberFormat(locale || l.locale()).formatToParts(numberWithGroupAndDecimalSeparator).find(part => part.type === separatorType)) === null || _Intl$NumberFormat$fo === void 0 ? void 0 : _Intl$NumberFormat$fo.value;
   }, [l, locale]);
   const isNaN = useCallback(valueToTest => {
     return Number.isNaN(Number(valueToTest));
   }, []);
+
   /**
    * Format a user defined value
    */
-
   const formatValue = useCallback(valueToFormat => {
     if (isNaN(valueToFormat)) {
       return valueToFormat;
     }
+
     /* Guards against any white-space only strings like "   " being 
      mishandled and returned as `NaN` for the value displayed in the textbox */
-
-
     if (valueToFormat === "" || valueToFormat.match(/\s+/g)) {
       return valueToFormat;
     }
-
     const separator = getSeparator("decimal");
     const [integer, remainder] = valueToFormat.split(".");
     const formattedInteger = Intl.NumberFormat(locale || l.locale(), {
       maximumFractionDigits: 0
     }).format(integer);
     let formattedNumber = formattedInteger;
-
     if ((remainder === null || remainder === void 0 ? void 0 : remainder.length) > precision) {
       formattedNumber += `${separator + remainder}`;
     } else if ((remainder === null || remainder === void 0 ? void 0 : remainder.length) <= precision) {
@@ -75,13 +67,12 @@ const Decimal = ({
     } else {
       formattedNumber += `${precision ? separator + "0".repeat(precision) : ""}`;
     }
-
     return formattedNumber;
   }, [getSeparator, isNaN, l, locale, precision]);
+
   /**
    * Determine if the precision value has changed from the previous ref value for precision
    */
-
   const prevPrecisionValue = usePrevious(precision);
   useEffect(() => {
     if (prevPrecisionValue && prevPrecisionValue !== precision) {
@@ -93,34 +84,29 @@ const Decimal = ({
     const delimiterMatcher = new RegExp(`[\\${getSeparator("group")} ]*`, "g");
     return valueToFormat.replace(delimiterMatcher, "");
   }, [getSeparator]);
+
   /**
    * Convert raw input to a standard decimal format
    */
-
   const toStandardDecimal = useCallback(i18nValue => {
     var _getSeparator;
-
     const valueWithoutNBS = (_getSeparator = getSeparator("group")) !== null && _getSeparator !== void 0 && _getSeparator.match(/\s+/) && !i18nValue.match(/\s{2,}/) ? i18nValue.replace(/\s+/g, "") : i18nValue;
     /* If a value is passed in that is a number but has too many delimiters in succession, we want to handle this
     value without formatting it or removing delimiters. We also want to consider that,
     if a value consists of only delimiters, we want to treat that 
     value in the same way as if the value was NaN. We want to pass this value to the 
     formatValue function, before the delimiters can be removed. */
-
     const errorsWithDelimiter = new RegExp(`([^A-Za-z0-9]{2,})|(^[^A-Za-z0-9-]+)|([^0-9a-z-,.])|([^0-9-,.]+)|([W,.])$`, "g");
     const separator = getSeparator("decimal");
     const separatorRegex = new RegExp(separator === "." ? `\\${separator}` : separator, "g");
-
     if (valueWithoutNBS.match(errorsWithDelimiter) || (valueWithoutNBS.match(separatorRegex) || []).length > 1) {
       return valueWithoutNBS;
     }
-
     const withoutDelimiters = removeDelimiters(valueWithoutNBS);
     return withoutDelimiters.replace(new RegExp(`\\${separator}`, "g"), ".");
   }, [getSeparator, removeDelimiters]);
   const decimalValue = getSafeValueProp(defaultValue || value || emptyValue);
   const [stateValue, setStateValue] = useState(isNaN(toStandardDecimal(decimalValue)) ? decimalValue : formatValue(decimalValue));
-
   const createEvent = (formatted, raw) => {
     return {
       target: {
@@ -133,7 +119,6 @@ const Decimal = ({
       }
     };
   };
-
   const handleOnChange = ev => {
     const {
       value: val
@@ -141,13 +126,11 @@ const Decimal = ({
     setStateValue(val);
     if (onChange) onChange(createEvent(val));
   };
-
   const handleOnBlur = ev => {
     const {
       value: updatedValue
     } = ev.target;
     let event;
-
     if (updatedValue) {
       const standardVisible = toStandardDecimal(updatedValue);
       const formattedValue = isNaN(standardVisible) ? updatedValue : formatValue(standardVisible);
@@ -157,10 +140,8 @@ const Decimal = ({
       event = createEvent(emptyValue);
       setStateValue(emptyValue);
     }
-
     if (onBlur) onBlur(event);
   };
-
   const isControlled = value !== undefined;
   const prevControlledRef = useRef();
   useEffect(() => {
@@ -171,10 +152,8 @@ const Decimal = ({
   const prevValue = usePrevious(value);
   useEffect(() => {
     const standardDecimalValue = toStandardDecimal(stateValue);
-
     if (isControlled) {
       const valueProp = getSafeValueProp(value);
-
       if (standardDecimalValue !== valueProp) {
         if (valueProp === "" && prevValue === "") {
           setStateValue(formatValue(emptyValue));
@@ -202,7 +181,6 @@ const Decimal = ({
     "data-component": "hidden-input"
   }));
 };
-
 Decimal.propTypes = {
   "about": PropTypes.string,
   "accept": PropTypes.string,
@@ -272,9 +250,6 @@ Decimal.propTypes = {
   "contentEditable": PropTypes.oneOfType([PropTypes.oneOf(["false", "inherit", "true"]), PropTypes.bool]),
   "contextMenu": PropTypes.string,
   "crossOrigin": PropTypes.string,
-  "css": PropTypes.oneOfType([PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.shape({
-    "__emotion_styles": PropTypes.any.isRequired
-  }), PropTypes.string, PropTypes.bool]),
   "dangerouslySetInnerHTML": PropTypes.shape({
     "__html": PropTypes.string.isRequired
   }),

package/esm/components/definition-list/dd.component.js

@@ -1,9 +1,7 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from "react";
 import PropTypes from "prop-types";
 import { StyledDd } from "./definition-list.style";
-
 const Dd = ({
   children,
   ...rest
@@ -15,7 +13,6 @@ const Dd = ({
     mb: mb || 2
   }, rest), children);
 };
-
 Dd.propTypes = {
   "children": PropTypes.node,
   "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({

package/esm/components/definition-list/dl.component.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from "react";
 import PropTypes from "prop-types";
 import { isElement, isFragment } from "react-is";
@@ -7,7 +6,6 @@ import { StyledDl, StyledDtDiv, StyledDdDiv } from "./definition-list.style";
 import Dt from "./dt.component";
 import Dd from "./dd.component";
 import DlContext from "./__internal__/dl.context";
-
 const Dl = ({
   children,
   w = 50,
@@ -19,7 +17,6 @@ const Dl = ({
   const dlComponent = [];
   const listChildren = React.Children.toArray(children);
   let key = "";
-
   const composeDlComponent = childrenArray => {
     let dtLabel;
     let ddContent = [];
@@ -32,17 +29,14 @@ const Dl = ({
         if (isElement(child) && child.type === Dt) {
           dtLabel = child;
         }
-
         if (isElement(child) && child.type === Dd) {
           ddContent.push(child);
         }
-
         isLastChild = index === childrenArray.length - 1;
         const originalKey = isElement(child) && child.props.key;
         const nextItem = childrenArray[index + 1];
         const isNextItemDt = isElement(nextItem) && nextItem.type === Dt;
         nextItemIsNotDd = !isLastChild && (isNextItemDt || isFragment(nextItem));
-
         if (dtLabel && (nextItemIsNotDd || isLastChild)) {
           key = `${key + 1}`;
           dlComponent.push( /*#__PURE__*/React.createElement(React.Fragment, {
@@ -58,7 +52,6 @@ const Dl = ({
     });
     return dlComponent;
   };
-
   return /*#__PURE__*/React.createElement(StyledDl, _extends({
     w: w,
     "data-component": "dl",
@@ -69,7 +62,6 @@ const Dl = ({
     }
   }, composeDlComponent(listChildren)));
 };
-
 Dl.propTypes = {
   "asSingleColumn": PropTypes.bool,
   "children": PropTypes.node,

package/esm/components/definition-list/dt.component.js

@@ -1,10 +1,8 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import { StyledDt } from "./definition-list.style";
 import DlContext from "./__internal__/dl.context";
-
 const Dt = ({
   children,
   ...rest
@@ -22,7 +20,6 @@ const Dt = ({
     pr: pr || asSingleColumn ? undefined : 3
   }, rest), children);
 };
-
 Dt.propTypes = {
   "children": PropTypes.node,
   "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({

package/esm/components/detail/detail.component.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
@@ -8,7 +7,6 @@ import { filterStyledSystemMarginProps } from "../../style/utils";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { StyledDetail, StyledDetailContent, StyledDetailIcon, StyledDetailFootnote } from "./detail.style";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes);
-
 const Detail = ({
   className,
   icon,
@@ -31,26 +29,22 @@ const Detail = ({
     hasIcon: icon
   }, footnote));
 };
-
-Detail.propTypes = { ...marginPropTypes,
-
+Detail.propTypes = {
+  ...marginPropTypes,
   /**
    * Custom className
    */
   className: PropTypes.string,
-
   /**
    * <a href="https://carbon.sage.com/?path=/docs/icon--list-of-icons#list-of-icons" target="_blank">List of supported icons</a>
    *
    * The type of icon to use.
    */
   icon: PropTypes.string,
-
   /**
    * A small detail to display under the main content.
    */
   footnote: PropTypes.string,
-
   /**
    * The rendered children of the component.
    */

package/esm/components/dialog/dialog.component.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { useRef, useEffect, useLayoutEffect, useCallback, useContext } from "react";
 import PropTypes from "prop-types";
 import createGuid from "../../__internal__/utils/helpers/guid";
@@ -15,7 +14,6 @@ import useLocale from "../../hooks/__internal__/useLocale";
 import useIsStickyFooterForm from "../../hooks/__internal__/useIsStickyFooterForm";
 import TopModalContext from "../carbon-provider/top-modal-context";
 const PADDING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
-
 const Dialog = ({
   className,
   children,
@@ -58,7 +56,6 @@ const Dialog = ({
     if (!dialogRef.current) {
       return;
     }
-
     const {
       width: dialogWidth,
       height: dialogHeight
@@ -67,15 +64,12 @@ const Dialog = ({
     let midPointX = window.innerWidth / 2;
     midPointY -= dialogHeight / 2;
     midPointX -= dialogWidth / 2;
-
     if (midPointY < TOP_MARGIN) {
       midPointY = TOP_MARGIN;
     }
-
     if (midPointX < TOP_MARGIN) {
       midPointX = TOP_MARGIN;
     }
-
     dialogRef.current.style.top = `${midPointY}px`;
     dialogRef.current.style.left = `${midPointX}px`;
   }, []);
@@ -97,11 +91,9 @@ const Dialog = ({
     if (open) {
       addListeners();
     }
-
     if (!open) {
       removeListeners();
     }
-
     return () => {
       removeListeners();
     };
@@ -111,7 +103,6 @@ const Dialog = ({
       centerDialog();
     }
   }, [centerDialog, open, height]);
-
   const closeIcon = () => {
     if (!showCloseIcon || !onCancel) return null;
     return /*#__PURE__*/React.createElement(IconButton, {
@@ -123,7 +114,6 @@ const Dialog = ({
       type: "close"
     }));
   };
-
   const dialogTitle = () => {
     if (!title) return null;
     return /*#__PURE__*/React.createElement(StyledDialogTitle, {
@@ -140,13 +130,10 @@ const Dialog = ({
       help: help
     }) : title);
   };
-
   let dialogHeight = height;
-
   if (height && height.match(/px$/)) {
     dialogHeight = height.replace("px", "");
   }
-
   const dialogProps = {
     size,
     dialogHeight,
@@ -188,7 +175,6 @@ const Dialog = ({
     ref: innerContentRef
   }, contentPadding), children)))));
 };
-
 Dialog.propTypes = {
   "aria-describedby": PropTypes.string,
   "aria-label": PropTypes.string,

package/esm/components/dialog/dialog.style.js

@@ -16,12 +16,10 @@ const dialogSizes = {
   large: "960px",
   "extra-large": "1080px"
 };
-
 const calculatePaddingTopInnerContent = ({
   py,
   p
 }) => [py, p].some(padding => padding !== undefined) ? 0 : `${CONTENT_TOP_PADDING}px`;
-
 const StyledDialog = styled.div`
   background-color: var(--colorsUtilityMajor025);
   box-shadow: var(--boxShadow300);