carbon-react 154.3.2 → 154.3.3-beta.1

package/esm/components/button/button-types.style.js

@@ -1,200 +1 @@
-import StyledIcon from "../icon/icon.style";
-import StyledLoaderSquare from "../loader/loader-square.style";
-function makeColors(color) {
-  return `
-  color: ${color};
-  ${StyledIcon} {
-    color: ${color};
-  }
-  ${StyledLoaderSquare} {
-    background-color: ${color};
-  }
-  `;
-}
-const disabledImageStyle = `
-  img, svg {
-    opacity: 0.3;
-  }
-`;
-const gradientDisabledStyle = `
-  background: transparent;
-  border-color: var(--colorsActionDisabled500);
-  ${makeColors("var(--colorsActionMajorYin030)")};
-  &:hover {
-    border-color: var(--colorsActionDisabled500);
-    ${makeColors("var(--colorsActionMajorYin030)")};
-  }
-  ${disabledImageStyle}
-`;
-const gradientSharedStyle = `
-  border: 2px solid transparent;
-  &:hover {
-    background: linear-gradient(to right, #d6f8df, #d9f2ff, #ede2ff) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
-  }
-`;
-export default (isDisabled, destructive, isWhite) => ({
-  primary: `
-    background: var(--colorsActionMajor500);
-    border-color: transparent;
-    ${makeColors("var(--colorsActionMajorYang100)")};
-    &:hover {
-      background: var(--colorsActionMajor600);
-    }
-
-    ${isDisabled ? `
-          background: var(--colorsActionDisabled500);
-          ${makeColors("var(--colorsActionMajorYin030)")};
-          &:hover {
-            background: var(--colorsActionDisabled500);
-          }
-          ${disabledImageStyle}
-        ` : ""}
-
-    ${destructive ? `
-        background: var(--colorsSemanticNegative500);
-        ${makeColors("var(--colorsSemanticNegativeYang100)")};
-        &:hover {
-          background: var(--colorsSemanticNegative600);
-        }
-
-    ${isDisabled ? `
-          background: var(--colorsActionDisabled500);
-          ${makeColors("var(--colorsActionMajorYin030)")};
-          &:hover {
-            background: var(--colorsActionDisabled500);
-          }
-          ${disabledImageStyle}
-        ` : ""}` : ""}
-  `,
-  secondary: `
-      background: transparent;
-      border-color: var(--colorsActionMajor500);
-      ${makeColors("var(--colorsActionMajor500)")};
-      &:hover {
-        background: var(--colorsActionMajor600);
-        border-color: var(--colorsActionMajorTransparent);
-        ${makeColors("var(--colorsActionMajorYang100)")};
-      }
-
-      ${isWhite && (!isDisabled || !destructive) ? `
-          border-color: var(--colorsActionMajorYang100);
-          ${makeColors("var(--colorsActionMajorYang100)")};
-          &:hover {
-            background: var(--colorsActionMajorYang100);
-            border-color: var(--colorsActionMajorYang100);
-            ${makeColors("var(--colorsYin100)")};
-          }
-          ` : ""}
-
-      ${destructive ? `
-            border-color: var(--colorsSemanticNegative500);
-            ${makeColors("var(--colorsSemanticNegative500)")}
-            &:hover {
-              background: var(--colorsSemanticNegative600);
-              border-color: var(--colorsSemanticNegativeTransparent);
-              ${makeColors("var(--colorsSemanticNegativeYang100)")};
-            }
-          ` : ""}
-
-      ${isDisabled && !isWhite ? `
-            border-color: var(--colorsActionDisabled500);
-            ${makeColors("var(--colorsActionMajorYin030)")};
-            &:hover {
-              background: transparent;
-              border-color: var(--colorsActionDisabled500);
-              ${makeColors("var(--colorsActionMajorYin030)")};
-            }
-            ${disabledImageStyle}
-          ` : ""}
-
-      ${isWhite ? `
-            border-color: var(--colorsActionMajorYang100);
-            ${makeColors("var(--colorsActionMajorYang100)")}
-            &:hover {
-              background: var(--colorsActionMajorYang100);
-              ${makeColors("var(--colorsUtilityYin100)")};
-            }
-
-
-            ${destructive ? `
-                  border-color: var(--colorsSemanticNegative450);
-                  ${makeColors("var(--colorsSemanticNegative450)")}
-                  &:hover {
-                    background: var(--colorsSemanticNegative600);
-                    border-color: var(--colorsSemanticNegativeTransparent);
-                    ${makeColors("var(--colorsSemanticNegativeYang100)")};
-                  }
-                ` : ""}
-
-            ${isDisabled ? `
-                  border-color: #4B4B4B;
-                  ${makeColors("#4B4B4B")};
-                  &:hover {
-                    background: transparent;
-                    border-color: #4B4B4B;
-                    ${makeColors("#4B4B4B")};
-
-                  }
-                  ${disabledImageStyle}
-                ` : ""}
-          }
-          ` : ""}
-  `,
-  tertiary: `
-    background: transparent;
-    border-color: transparent;
-    ${makeColors("var(--colorsActionMajor500)")};
-    &:hover {
-      background: var(--colorsActionMajor600);
-      ${makeColors("var(--colorsActionMajorYang100)")};
-    }
-
-    ${destructive ? `
-          ${makeColors("var(--colorsSemanticNegative500)")};
-          &:hover {
-            background: var(--colorsSemanticNegative600);
-            ${makeColors("var(--colorsSemanticNegativeYang100)")};
-          }
-        ` : ""}
-
-    ${isDisabled ? `
-          ${makeColors("var(--colorsActionMajorYin030)")};
-          &:hover {
-            background: var(--colorsActionMajorTransparent);
-            ${makeColors("var(--colorsActionMajorYin030)")};
-          }
-          ${disabledImageStyle}
-        ` : ""}
-  `,
-  darkBackground: `
-    background: var(--colorsActionMajorYang100);
-    border-color: transparent;
-    ${makeColors("var(--colorsActionMajor500)")};
-    &:hover {
-      background: var(--colorsActionMajor600);
-      ${makeColors("var(--colorsActionMajorYang100)")}
-    }
-
-    ${isDisabled ? `
-          background: var(--colorsActionDisabled500);
-          ${makeColors("var(--colorsActionMajorYin030)")};
-          &:hover {
-            background: var(--colorsActionDisabled500);
-            ${makeColors("var(--colorsActionMajorYin030)")};
-          }
-          ${disabledImageStyle}
-        ` : ""}
-  `,
-  "gradient-grey": `
-    ${isDisabled ? gradientDisabledStyle : `
-          background: linear-gradient(#F2F5F6, #F2F5F6) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
-          ${gradientSharedStyle}
-        `}
-  `,
-  "gradient-white": `
-    ${isDisabled ? gradientDisabledStyle : `
-          background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;
-          ${gradientSharedStyle}
-        `}
-  `
-});
+import n from"../icon/icon.style.js";import o from"../loader/loader-square.style.js";function r(r){return`\n  color: ${r};\n  ${n} {\n    color: ${r};\n  }\n  ${o} {\n    background-color: ${r};\n  }\n  `}const a="\n  img, svg {\n    opacity: 0.3;\n  }\n",c=`\n  background: transparent;\n  border-color: var(--colorsActionDisabled500);\n  ${r("var(--colorsActionMajorYin030)")};\n  &:hover {\n    border-color: var(--colorsActionDisabled500);\n    ${r("var(--colorsActionMajorYin030)")};\n  }\n  ${a}\n`,e="\n  border: 2px solid transparent;\n  &:hover {\n    background: linear-gradient(to right, #d6f8df, #d9f2ff, #ede2ff) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;\n  }\n";var i=(n,o,i)=>({primary:`\n    background: var(--colorsActionMajor500);\n    border-color: transparent;\n    ${r("var(--colorsActionMajorYang100)")};\n    &:hover {\n      background: var(--colorsActionMajor600);\n    }\n\n    ${n?`\n          background: var(--colorsActionDisabled500);\n          ${r("var(--colorsActionMajorYin030)")};\n          &:hover {\n            background: var(--colorsActionDisabled500);\n          }\n          ${a}\n        `:""}\n\n    ${o?`\n        background: var(--colorsSemanticNegative500);\n        ${r("var(--colorsSemanticNegativeYang100)")};\n        &:hover {\n          background: var(--colorsSemanticNegative600);\n        }\n\n    ${n?`\n          background: var(--colorsActionDisabled500);\n          ${r("var(--colorsActionMajorYin030)")};\n          &:hover {\n            background: var(--colorsActionDisabled500);\n          }\n          ${a}\n        `:""}`:""}\n  `,secondary:`\n      background: transparent;\n      border-color: var(--colorsActionMajor500);\n      ${r("var(--colorsActionMajor500)")};\n      &:hover {\n        background: var(--colorsActionMajor600);\n        border-color: var(--colorsActionMajorTransparent);\n        ${r("var(--colorsActionMajorYang100)")};\n      }\n\n      ${!i||n&&o?"":`\n          border-color: var(--colorsActionMajorYang100);\n          ${r("var(--colorsActionMajorYang100)")};\n          &:hover {\n            background: var(--colorsActionMajorYang100);\n            border-color: var(--colorsActionMajorYang100);\n            ${r("var(--colorsYin100)")};\n          }\n          `}\n\n      ${o?`\n            border-color: var(--colorsSemanticNegative500);\n            ${r("var(--colorsSemanticNegative500)")}\n            &:hover {\n              background: var(--colorsSemanticNegative600);\n              border-color: var(--colorsSemanticNegativeTransparent);\n              ${r("var(--colorsSemanticNegativeYang100)")};\n            }\n          `:""}\n\n      ${n&&!i?`\n            border-color: var(--colorsActionDisabled500);\n            ${r("var(--colorsActionMajorYin030)")};\n            &:hover {\n              background: transparent;\n              border-color: var(--colorsActionDisabled500);\n              ${r("var(--colorsActionMajorYin030)")};\n            }\n            ${a}\n          `:""}\n\n      ${i?`\n            border-color: var(--colorsActionMajorYang100);\n            ${r("var(--colorsActionMajorYang100)")}\n            &:hover {\n              background: var(--colorsActionMajorYang100);\n              ${r("var(--colorsUtilityYin100)")};\n            }\n\n\n            ${o?`\n                  border-color: var(--colorsSemanticNegative450);\n                  ${r("var(--colorsSemanticNegative450)")}\n                  &:hover {\n                    background: var(--colorsSemanticNegative600);\n                    border-color: var(--colorsSemanticNegativeTransparent);\n                    ${r("var(--colorsSemanticNegativeYang100)")};\n                  }\n                `:""}\n\n            ${n?`\n                  border-color: #4B4B4B;\n                  ${r("#4B4B4B")};\n                  &:hover {\n                    background: transparent;\n                    border-color: #4B4B4B;\n                    ${r("#4B4B4B")};\n\n                  }\n                  ${a}\n                `:""}\n          }\n          `:""}\n  `,tertiary:`\n    background: transparent;\n    border-color: transparent;\n    ${r("var(--colorsActionMajor500)")};\n    &:hover {\n      background: var(--colorsActionMajor600);\n      ${r("var(--colorsActionMajorYang100)")};\n    }\n\n    ${o?`\n          ${r("var(--colorsSemanticNegative500)")};\n          &:hover {\n            background: var(--colorsSemanticNegative600);\n            ${r("var(--colorsSemanticNegativeYang100)")};\n          }\n        `:""}\n\n    ${n?`\n          ${r("var(--colorsActionMajorYin030)")};\n          &:hover {\n            background: var(--colorsActionMajorTransparent);\n            ${r("var(--colorsActionMajorYin030)")};\n          }\n          ${a}\n        `:""}\n  `,darkBackground:`\n    background: var(--colorsActionMajorYang100);\n    border-color: transparent;\n    ${r("var(--colorsActionMajor500)")};\n    &:hover {\n      background: var(--colorsActionMajor600);\n      ${r("var(--colorsActionMajorYang100)")}\n    }\n\n    ${n?`\n          background: var(--colorsActionDisabled500);\n          ${r("var(--colorsActionMajorYin030)")};\n          &:hover {\n            background: var(--colorsActionDisabled500);\n            ${r("var(--colorsActionMajorYin030)")};\n          }\n          ${a}\n        `:""}\n  `,"gradient-grey":`\n    ${n?c:`\n          background: linear-gradient(#F2F5F6, #F2F5F6) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;\n          ${e}\n        `}\n  `,"gradient-white":`\n    ${n?c:`\n          background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(to right, #00D639, #11AFFF, #8F49FE) border-box;\n          ${e}\n        `}\n  `});export{i as default};

package/esm/components/button/button.component.js

@@ -1,181 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useState, useContext } from "react";
-import invariant from "invariant";
-import Icon from "../icon";
-import StyledButton, { StyledButtonSubtext, StyledButtonMainText } from "./button.style";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import { TooltipProvider } from "../../__internal__/tooltip-provider";
-import ButtonBarContext from "../button-bar/__internal__/button-bar.context";
-import SplitButtonContext from "../split-button/__internal__/split-button.context";
-import BatchSelectionContext from "../batch-selection/__internal__/batch-selection.context";
-function renderChildren({
-  iconType,
-  iconPosition,
-  size,
-  subtext,
-  children,
-  disabled,
-  buttonType,
-  iconTooltipMessage,
-  iconTooltipPosition,
-  tooltipTarget
-}) {
-  const iconColor = () => {
-    if (buttonType === "primary") {
-      return "--colorsActionMajorYang100";
-    }
-    if (buttonType.includes("gradient")) {
-      return "--colorsActionMinorYin090";
-    }
-    return "--colorsActionMajor500";
-  };
-  const iconProps = {
-    "aria-hidden": true,
-    disabled,
-    color: iconColor(),
-    bg: "transparent"
-  };
-  const isValidChildren = children !== undefined && children !== false;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, iconType && iconPosition === "before" && isValidChildren && /*#__PURE__*/React.createElement(Icon, _extends({
-    type: iconType
-  }, iconProps)), isValidChildren && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(StyledButtonMainText, {
-    "data-element": "main-text"
-  }, children), size === "large" && /*#__PURE__*/React.createElement(StyledButtonSubtext, {
-    "data-element": "subtext",
-    "data-role": "subtext"
-  }, subtext)), iconType && !isValidChildren && /*#__PURE__*/React.createElement(TooltipProvider, {
-    disabled: disabled,
-    focusable: false,
-    target: tooltipTarget
-  }, /*#__PURE__*/React.createElement(Icon, _extends({
-    type: iconType
-  }, iconProps, {
-    tooltipMessage: iconTooltipMessage,
-    tooltipPosition: iconTooltipPosition
-  }))), iconType && iconPosition === "after" && children && /*#__PURE__*/React.createElement(Icon, _extends({
-    type: iconType
-  }, iconProps)));
-}
-const Button = /*#__PURE__*/React.forwardRef(({
-  "aria-describedby": ariaDescribedBy,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  buttonType: buttonTypeProp = "secondary",
-  children,
-  destructive = false,
-  disabled = false,
-  isWhite = false,
-  fullWidth: fullWidthProp = false,
-  href,
-  iconPosition: iconPositionProp = "before",
-  iconTooltipMessage,
-  iconTooltipPosition,
-  iconType,
-  m = 0,
-  noWrap,
-  onClick,
-  px,
-  rel,
-  size: sizeProp = "medium",
-  subtext = "",
-  target,
-  ...rest
-}, ref) => {
-  const {
-    buttonType: buttonTypeContext,
-    size: sizeContext,
-    iconPosition: iconPositionContext,
-    fullWidth: fullWidthContext
-  } = useContext(ButtonBarContext);
-  const {
-    batchSelectionDisabled
-  } = useContext(BatchSelectionContext);
-  const buttonType = buttonTypeContext || buttonTypeProp;
-  const size = sizeContext || sizeProp;
-  const iconPosition = iconPositionContext || iconPositionProp;
-  const fullWidth = fullWidthContext || fullWidthProp;
-  const isDisabled = disabled || batchSelectionDisabled;
-  !(children !== undefined || !!iconType) ? process.env.NODE_ENV !== "production" ? invariant(false, "Either prop `iconType` must be defined or this node must have children.") : invariant(false) : void 0;
-  if (subtext) {
-    !(size === "large") ? process.env.NODE_ENV !== "production" ? invariant(false, "subtext prop has no effect unless the button is large.") : invariant(false) : void 0;
-  }
-  const [internalRef, setInternalRef] = useState(null);
-  const {
-    inSplitButton,
-    onChildButtonClick
-  } = useContext(SplitButtonContext);
-  let paddingX;
-  const handleLinkKeyDown = event => {
-    // If space key click link
-    if (event.key === " ") {
-      event.preventDefault();
-      internalRef?.click();
-    }
-  };
-  const handleClick = event => {
-    internalRef?.focus();
-    if (inSplitButton) {
-      onChildButtonClick?.(onClick)?.(event);
-    } else if (onClick) {
-      onClick(event);
-    }
-  };
-  switch (size) {
-    case "small":
-      paddingX = 2;
-      break;
-    case "large":
-      paddingX = 4;
-      break;
-    default:
-      paddingX = 3;
-  }
-  const setRefs = useCallback(reference => {
-    setInternalRef(reference);
-    if (!ref) return;
-    if (typeof ref === "object") ref.current = reference;
-    if (typeof ref === "function") ref(reference);
-  }, [ref]);
-  const isValidChildren = children !== undefined && children !== false;
-  return /*#__PURE__*/React.createElement(StyledButton, _extends({
-    "aria-label": !isValidChildren && iconType ? ariaLabel || iconType : ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy,
-    as: !isDisabled && href ? "a" : "button",
-    onKeyDown: href ? handleLinkKeyDown : undefined,
-    onClick: handleClick,
-    draggable: false,
-    buttonType: buttonType,
-    disabled: isDisabled,
-    destructive: destructive,
-    isWhite: isWhite,
-    type: href ? undefined : "button",
-    iconType: iconType,
-    size: size,
-    px: px ?? paddingX,
-    m: m,
-    noWrap: noWrap,
-    iconOnly: !isValidChildren && !!iconType,
-    iconPosition: iconPosition,
-    target: target,
-    rel: rel,
-    fullWidth: fullWidth
-  }, tagComponent("button", rest), rest, href && {
-    href
-  }, {
-    ref: setRefs
-  }), renderChildren({
-    iconType,
-    iconPosition,
-    size,
-    subtext,
-    children,
-    disabled: isDisabled,
-    buttonType,
-    iconTooltipMessage,
-    iconTooltipPosition,
-    tooltipTarget: internalRef
-  }));
-});
-Button.displayName = "Button";
-export default Button;
+import{jsx as t,jsxs as e,Fragment as o}from"react/jsx-runtime";import i,{useContext as n,useState as r,useCallback as l}from"react";import a from"invariant";import c from"../icon/icon.component.js";import s,{StyledButtonMainText as b,StyledButtonSubtext as p}from"./button.style.js";import u from"../../__internal__/utils/helpers/tags/tags.js";import{TooltipProvider as d}from"../../__internal__/tooltip-provider/index.js";import f from"../button-bar/__internal__/button-bar.context.js";import y from"../split-button/__internal__/split-button.context.js";import m from"../batch-selection/__internal__/batch-selection.context.js";function h(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}function g(t){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{},i=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(o).filter((function(t){return Object.getOwnPropertyDescriptor(o,t).enumerable})))),i.forEach((function(e){h(t,e,o[e])}))}return t}function O(t,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):function(t){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e.push.apply(e,o)}return e}(Object(e)).forEach((function(o){Object.defineProperty(t,o,Object.getOwnPropertyDescriptor(e,o))})),t}function j({iconType:i,iconPosition:n,size:r,subtext:l,children:a,disabled:s,buttonType:u,iconTooltipMessage:f,iconTooltipPosition:y,tooltipTarget:m}){const h={"aria-hidden":!0,disabled:s,color:"primary"===u?"--colorsActionMajorYang100":u.includes("gradient")?"--colorsActionMinorYin090":"--colorsActionMajor500",bg:"transparent"},j=void 0!==a&&!1!==a;return e(o,{children:[i&&"before"===n&&j&&t(c,g({type:i},h)),j&&e("span",{children:[t(b,{"data-element":"main-text",children:a}),"large"===r&&t(p,{"data-element":"subtext","data-role":"subtext",children:l})]}),i&&!j&&t(d,{disabled:s,focusable:!1,target:m,children:t(c,O(g({type:i},h),{tooltipMessage:f,tooltipPosition:y}))}),i&&"after"===n&&a&&t(c,g({type:i},h))]})}const P=i.forwardRef(((e,o)=>{var{"aria-describedby":i,"aria-label":c,"aria-labelledby":b,buttonType:p="secondary",children:d,destructive:h=!1,disabled:P=!1,isWhite:v=!1,fullWidth:T=!1,href:_,iconPosition:x="before",iconTooltipMessage:w,iconTooltipPosition:k,iconType:W,m:M=0,noWrap:S,onClick:D,px:z,rel:C,size:E="medium",subtext:A="",target:B}=e,Y=function(t,e){if(null==t)return{};var o,i,n=function(t,e){if(null==t)return{};var o,i,n={},r=Object.keys(t);for(i=0;i<r.length;i++)o=r[i],e.indexOf(o)>=0||(n[o]=t[o]);return n}(t,e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);for(i=0;i<r.length;i++)o=r[i],e.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(t,o)&&(n[o]=t[o])}return n}(e,["aria-describedby","aria-label","aria-labelledby","buttonType","children","destructive","disabled","isWhite","fullWidth","href","iconPosition","iconTooltipMessage","iconTooltipPosition","iconType","m","noWrap","onClick","px","rel","size","subtext","target"]);const{buttonType:I,size:K,iconPosition:N,fullWidth:R}=n(f),{batchSelectionDisabled:q}=n(m),F=I||p,G=K||E,H=N||x,J=R||T,L=P||q;a(void 0!==d||!!W,"Either prop `iconType` must be defined or this node must have children."),A&&a("large"===G,"subtext prop has no effect unless the button is large.");const[Q,U]=r(null),{inSplitButton:V,onChildButtonClick:X}=n(y);let Z;switch(G){case"small":Z=2;break;case"large":Z=4;break;default:Z=3}const $=l((t=>{U(t),o&&("object"==typeof o&&(o.current=t),"function"==typeof o&&o(t))}),[o]),tt=void 0!==d&&!1!==d;return t(s,O(g({"aria-label":!tt&&W?c||W:c,"aria-labelledby":b,"aria-describedby":i,as:!L&&_?"a":"button",onKeyDown:_?t=>{" "===t.key&&(t.preventDefault(),null==Q||Q.click())}:void 0,onClick:t=>{var e;null==Q||Q.focus(),V?null==X||null===(e=X(D))||void 0===e||e(t):D&&D(t)},draggable:!1,buttonType:F,disabled:L,destructive:h,isWhite:v,type:_?void 0:"button",iconType:W,size:G,px:null!=z?z:Z,m:M,noWrap:S,iconOnly:!tt&&!!W,iconPosition:H,target:B,rel:C,fullWidth:J},u("button",Y),Y,_&&{href:_}),{ref:$,children:j({iconType:W,iconPosition:H,size:G,subtext:A,children:d,disabled:L,buttonType:F,iconTooltipMessage:w,iconTooltipPosition:k,tooltipTarget:Q})}))}));P.displayName="Button";export{P as default};

package/esm/components/button/button.config.js

@@ -1,3 +1 @@
-export const BUTTON_VARIANTS = ["primary", "secondary", "tertiary", "darkBackground", "gradient-white", "gradient-grey"];
-export const BUTTON_SIZES = ["small", "medium", "large"];
-export const BUTTON_ICON_POSITIONS = ["before", "after"];
+const r=["primary","secondary","tertiary","darkBackground","gradient-white","gradient-grey"],e=["small","medium","large"],a=["before","after"];export{a as BUTTON_ICON_POSITIONS,e as BUTTON_SIZES,r as BUTTON_VARIANTS};

package/esm/components/button/button.style.js

@@ -1,133 +1 @@
-import styled, { css } from "styled-components";
-import { space } from "styled-system";
-import StyledIcon from "../icon/icon.style";
-import BaseTheme from "../../style/themes/base";
-import addFocusStyling from "../../style/utils/add-focus-styling";
-import buttonTypes from "./button-types.style";
-function additionalIconStyle(iconType) {
-  if (iconType === "services") return "6px";
-  return "20px";
-}
-function stylingForIconOnly(size) {
-  let dimension = "";
-  switch (size) {
-    case "small":
-      dimension = "32px";
-      break;
-    case "large":
-      dimension = "48px";
-      break;
-    default:
-      dimension = "40px";
-  }
-  return `
-    padding: 0px; 
-    width: ${dimension}; 
-    min-height: ${dimension};
-  `;
-}
-function stylingForType({
-  iconOnly,
-  disabled,
-  buttonType,
-  size,
-  destructive,
-  isWhite
-}) {
-  return css`
-    ${buttonTypes(disabled, destructive, isWhite)[buttonType]};
-
-    ${size === "small" && css`
-      font-size: var(--fontSizes100);
-      min-height: 32px;
-    `}
-
-    ${size === "medium" && css`
-      font-size: var(--fontSizes100);
-      min-height: 40px;
-    `}
-
-    ${size === "large" && css`
-      font-size: var(--fontSizes200);
-      min-height: 48px;
-    `}
-
-    ${iconOnly && stylingForIconOnly(size)}
-  `;
-}
-const StyledButton = styled.button`
-  ${space}
-  ${({
-  disabled,
-  noWrap
-}) => css`
-    align-items: center;
-    cursor: ${disabled ? "not-allowed" : "pointer"};
-    display: inline-flex;
-    ${noWrap ? "white-space: nowrap" : "flex-flow: wrap"};
-    justify-content: center;
-    vertical-align: middle;
-    outline-offset: 0;
-    border: 2px solid transparent;
-    box-sizing: border-box;
-    font-weight: 500;
-    text-decoration: none;
-    border-radius: var(--borderRadius400);
-
-    &:focus {
-      ${addFocusStyling()}
-    }
-
-    ${stylingForType}
-  `}
-
-  ${({
-  fullWidth
-}) => fullWidth && css`
-      width: 100%;
-    `}
-
-  ${({
-  iconOnly,
-  iconPosition,
-  iconType
-}) => css`
-    ${StyledIcon} {
-      ${iconOnly && css`
-        margin-left: auto;
-        margin-right: auto;
-        margin-bottom: 1px;
-      `}
-      ${!iconOnly && css`
-        margin-bottom: 0px;
-        ${iconPosition === "after" && `
-          margin-left: var(--spacing100);
-          margin-right: 0px;
-        `}
-        ${iconPosition === "before" && `
-          margin-left: 0px;
-          margin-right: var(--spacing100);
-        `}
-      `}
-
-      height: ${additionalIconStyle(iconType)};
-      width: 20px;
-      svg {
-        margin-top: 0;
-      }
-    }
-  `}
-`;
-export const StyledButtonSubtext = styled.span`
-  font-size: 14px;
-  font-weight: 400;
-  display: block;
-`;
-export const StyledButtonMainText = styled.span`
-  display: flex;
-  align-items: center;
-`;
-StyledButton.defaultProps = {
-  theme: BaseTheme
-};
-export default StyledButton;
+import t,{css as e}from"styled-components";import{space as n}from"styled-system";import i from"../icon/icon.style.js";import o from"../../style/themes/base/index.js";import s from"../../style/utils/add-focus-styling.js";import r from"./button-types.style.js";function a({iconOnly:t,disabled:n,buttonType:i,size:o,destructive:s,isWhite:a}){return e(["",";"," "," "," ",""],r(n,s,a)[i],"small"===o&&e(["font-size:var(--fontSizes100);min-height:32px;"]),"medium"===o&&e(["font-size:var(--fontSizes100);min-height:40px;"]),"large"===o&&e(["font-size:var(--fontSizes200);min-height:48px;"]),t&&function(t){let e="";switch(t){case"small":e="32px";break;case"large":e="48px";break;default:e="40px"}return`\n    padding: 0px; \n    width: ${e}; \n    min-height: ${e};\n  `}(o))}const l=t.button.withConfig({displayName:"button.style__StyledButton",componentId:"sc-b77f372-0"})([""," "," "," ",""],n,(({disabled:t,noWrap:n})=>e(["align-items:center;cursor:",";display:inline-flex;",";justify-content:center;vertical-align:middle;outline-offset:0;border:2px solid transparent;box-sizing:border-box;font-weight:500;text-decoration:none;border-radius:var(--borderRadius400);&:focus{","}",""],t?"not-allowed":"pointer",n?"white-space: nowrap":"flex-flow: wrap",s(),a)),(({fullWidth:t})=>t&&e(["width:100%;"])),(({iconOnly:t,iconPosition:n,iconType:o})=>e(["","{"," "," height:",";width:20px;svg{margin-top:0;}}"],i,t&&e(["margin-left:auto;margin-right:auto;margin-bottom:1px;"]),!t&&e(["margin-bottom:0px;"," ",""],"after"===n&&"\n          margin-left: var(--spacing100);\n          margin-right: 0px;\n        ","before"===n&&"\n          margin-left: 0px;\n          margin-right: var(--spacing100);\n        "),function(t){return"services"===t?"6px":"20px"}(o)))),p=t.span.withConfig({displayName:"button.style__StyledButtonSubtext",componentId:"sc-b77f372-1"})(["font-size:14px;font-weight:400;display:block;"]),m=t.span.withConfig({displayName:"button.style__StyledButtonMainText",componentId:"sc-b77f372-2"})(["display:flex;align-items:center;"]);l.defaultProps={theme:o};export{m as StyledButtonMainText,p as StyledButtonSubtext,l as default};

package/esm/components/button/index.js

@@ -1 +1 @@
-export { default } from "./button.component";
+export{default}from"./button.component.js";

package/esm/components/button-bar/__internal__/button-bar.context.js

@@ -1,2 +1 @@
-import React from "react";
-export default /*#__PURE__*/React.createContext({});
+import t from"react";var e=t.createContext({});export{e as default};

package/esm/components/button-bar/button-bar.component.js

@@ -1,24 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from "react";
-import StyledButtonBar from "./button-bar.style";
-import ButtonBarContext from "./__internal__/button-bar.context";
-import tagComponent from "../../__internal__/utils/helpers/tags";
-export const ButtonBar = ({
-  children,
-  size = "medium",
-  iconPosition = "before",
-  fullWidth = false,
-  ...rest
-}) => /*#__PURE__*/React.createElement(StyledButtonBar, _extends({}, rest, tagComponent("button-bar", rest), {
-  fullWidth: fullWidth,
-  size: size
-}), /*#__PURE__*/React.createElement(ButtonBarContext.Provider, {
-  value: {
-    buttonType: "secondary",
-    size,
-    iconPosition,
-    fullWidth
-  }
-}, children));
-ButtonBar.displayName = "ButtonBar";
-export default ButtonBar;
+import{jsx as e}from"react/jsx-runtime";import"react";import t from"./button-bar.style.js";import r from"./__internal__/button-bar.context.js";import n from"../../__internal__/utils/helpers/tags/tags.js";function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const i=i=>{var c,l,{children:u,size:s="medium",iconPosition:b="before",fullWidth:f=!1}=i,a=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(i,["children","size","iconPosition","fullWidth"]);return e(t,(c=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){o(e,t,r[t])}))}return e}({},a,n("button-bar",a)),l=null!=(l={fullWidth:f,size:s,children:e(r.Provider,{value:{buttonType:"secondary",size:s,iconPosition:b,fullWidth:f},children:u})})?l:{},Object.getOwnPropertyDescriptors?Object.defineProperties(c,Object.getOwnPropertyDescriptors(l)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(l)).forEach((function(e){Object.defineProperty(c,e,Object.getOwnPropertyDescriptor(l,e))})),c))};i.displayName="ButtonBar";export{i as ButtonBar,i as default};

package/esm/components/button-bar/button-bar.config.js

@@ -1,2 +1 @@
-export const BUTTON_BAR_SIZES = ["small", "medium", "large"];
-export const BUTTON_BAR_ICON_POSITIONS = ["before", "after"];
+const e=["small","medium","large"],r=["before","after"];export{r as BUTTON_BAR_ICON_POSITIONS,e as BUTTON_BAR_SIZES};