carbon-react 154.4.1 → 154.4.2

package/esm/components/pill/index.js

@@ -1 +1 @@
-export { default } from "./pill.component";
+export{Pill as default}from"./pill.component.js";

package/esm/components/pill/pill.component.js

@@ -1,47 +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 StyledPill from "./pill.style";
-import Icon from "../icon";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import IconButton from "../icon-button";
-let neutralWhiteWarnTriggered = false;
-export const Pill = ({
-  wrapText,
-  borderColor,
-  colorVariant = "neutral",
-  isDarkBackground = false,
-  children,
-  fill = false,
-  maxWidth,
-  onClick,
-  onDelete,
-  pillRole = "tag",
-  size = "M",
-  ariaLabelOfRemoveButton = "remove pill",
-  ...rest
-}) => {
-  if (!neutralWhiteWarnTriggered && !isDarkBackground && colorVariant === "neutralWhite" && !fill) {
-    neutralWhiteWarnTriggered = true;
-    // eslint-disable-next-line no-console
-    console.warn("[WARNING] The `neutralWhite` variant should only be used on dark backgrounds with fill set to true. " + "Please set the `isDarkBackground` and `fill` props to true or use another color variant.");
-  }
-  return /*#__PURE__*/React.createElement(StyledPill, _extends({
-    inFill: fill,
-    colorVariant: colorVariant,
-    isDarkBackground: isDarkBackground,
-    isDeletable: !!onDelete,
-    pillRole: pillRole,
-    size: size,
-    borderColor: borderColor,
-    onClick: onClick,
-    maxWidth: maxWidth,
-    wrapText: wrapText
-  }, rest, tagComponent("pill", rest)), children, onDelete && /*#__PURE__*/React.createElement(IconButton, {
-    onClick: onDelete,
-    "data-element": "close",
-    "aria-label": ariaLabelOfRemoveButton
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: "cross"
-  })));
-};
-export default Pill;
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import"react";import t from"./pill.style.js";import o from"../icon/icon.component.js";import n from"../../__internal__/utils/helpers/tags/tags.js";import l from"../icon-button/icon-button.component.js";function i(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}let a=!1;const c=c=>{var s,u,{wrapText:p,borderColor:b,colorVariant:f="neutral",isDarkBackground:O=!1,children:m,fill:y=!1,maxWidth:d,onClick:j,onDelete:g,pillRole:h="tag",size:k="M",ariaLabelOfRemoveButton:w="remove pill"}=c,v=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},l=Object.keys(e);for(o=0;o<l.length;o++)t=l[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o<l.length;o++)t=l[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(c,["wrapText","borderColor","colorVariant","isDarkBackground","children","fill","maxWidth","onClick","onDelete","pillRole","size","ariaLabelOfRemoveButton"]);return a||O||"neutralWhite"!==f||y||(a=!0,console.warn("[WARNING] The `neutralWhite` variant should only be used on dark backgrounds with fill set to true. Please set the `isDarkBackground` and `fill` props to true or use another color variant.")),e(t,(s=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){i(e,r,t[r])}))}return e}({inFill:y,colorVariant:f,isDarkBackground:O,isDeletable:!!g,pillRole:h,size:k,borderColor:b,onClick:j,maxWidth:d,wrapText:p},v,n("pill",v)),u=null!=(u={children:[m,g&&r(l,{onClick:g,"data-element":"close","aria-label":w,children:r(o,{type:"cross"})})]})?u:{},Object.getOwnPropertyDescriptors?Object.defineProperties(s,Object.getOwnPropertyDescriptors(u)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(u)).forEach((function(e){Object.defineProperty(s,e,Object.getOwnPropertyDescriptor(u,e))})),s))};export{c as Pill,c as default};

package/esm/components/pill/pill.style.config.js

@@ -1,43 +1 @@
-export default isDarkBackground => {
-  return {
-    status: {
-      neutral: {
-        varietyColor: isDarkBackground ? "var(--colorsSemanticNeutral400)" : "var(--colorsSemanticNeutral500)",
-        buttonFocus: isDarkBackground ? "var(--colorsSemanticNeutral500)" : "var(--colorsSemanticNeutral600)",
-        content: isDarkBackground ? "var(--colorsSemanticNeutralYin090)" : "var(--colorsSemanticNeutralYang100)"
-      },
-      negative: {
-        varietyColor: isDarkBackground ? "var(--colorsSemanticNegative450)" : "var(--colorsSemanticNegative500)",
-        buttonFocus: isDarkBackground ? "var(--colorsSemanticNegative500)" : "var(--colorsSemanticNegative600)",
-        content: isDarkBackground ? "var(--colorsSemanticNegativeYin090)" : "var(--colorsSemanticNegativeYang100)"
-      },
-      warning: {
-        varietyColor: "var(--colorsSemanticCaution400)",
-        buttonFocus: "var(--colorsSemanticCaution600)",
-        content: "var(--colorsSemanticCautionYin090)"
-      },
-      positive: {
-        varietyColor: isDarkBackground ? "var(--colorsSemanticPositive400)" : "var(--colorsSemanticPositive500)",
-        buttonFocus: isDarkBackground ? "var(--colorsSemanticPositive500)" : "var(--colorsSemanticPositive600)",
-        content: isDarkBackground ? "var(--colorsSemanticPositiveYin090)" : "var(--colorsSemanticPositiveYang100)"
-      },
-      information: {
-        varietyColor: isDarkBackground ? "var(--colorsSemanticInfo400)" : "var(--colorsSemanticInfo500)",
-        buttonFocus: isDarkBackground ? "var(--colorsSemanticInfo500)" : "var(--colorsSemanticInfo600)",
-        content: isDarkBackground ? "var(--colorsSemanticInfoYin090)" : "var(--colorsSemanticInfoYang100)"
-      },
-      neutralWhite: {
-        varietyColor: "var(--colorsSemanticNeutralYang100)",
-        buttonFocus: "var(--colorsSemanticNeutralYin030)",
-        content: "var(--colorsSemanticNeutral500)"
-      }
-    },
-    tag: {
-      primary: {
-        varietyColor: "var(--colorsActionMajor500)",
-        buttonFocus: "var(--colorsActionMajor600)",
-        content: "var(--colorsActionMajorYang100)"
-      }
-    }
-  };
-};
+var o=o=>({status:{neutral:{varietyColor:o?"var(--colorsSemanticNeutral400)":"var(--colorsSemanticNeutral500)",buttonFocus:o?"var(--colorsSemanticNeutral500)":"var(--colorsSemanticNeutral600)",content:o?"var(--colorsSemanticNeutralYin090)":"var(--colorsSemanticNeutralYang100)"},negative:{varietyColor:o?"var(--colorsSemanticNegative450)":"var(--colorsSemanticNegative500)",buttonFocus:o?"var(--colorsSemanticNegative500)":"var(--colorsSemanticNegative600)",content:o?"var(--colorsSemanticNegativeYin090)":"var(--colorsSemanticNegativeYang100)"},warning:{varietyColor:"var(--colorsSemanticCaution400)",buttonFocus:"var(--colorsSemanticCaution600)",content:"var(--colorsSemanticCautionYin090)"},positive:{varietyColor:o?"var(--colorsSemanticPositive400)":"var(--colorsSemanticPositive500)",buttonFocus:o?"var(--colorsSemanticPositive500)":"var(--colorsSemanticPositive600)",content:o?"var(--colorsSemanticPositiveYin090)":"var(--colorsSemanticPositiveYang100)"},information:{varietyColor:o?"var(--colorsSemanticInfo400)":"var(--colorsSemanticInfo500)",buttonFocus:o?"var(--colorsSemanticInfo500)":"var(--colorsSemanticInfo600)",content:o?"var(--colorsSemanticInfoYin090)":"var(--colorsSemanticInfoYang100)"},neutralWhite:{varietyColor:"var(--colorsSemanticNeutralYang100)",buttonFocus:"var(--colorsSemanticNeutralYin030)",content:"var(--colorsSemanticNeutral500)"}},tag:{primary:{varietyColor:"var(--colorsActionMajor500)",buttonFocus:"var(--colorsActionMajor600)",content:"var(--colorsActionMajorYang100)"}}});export{o as default};

package/esm/components/pill/pill.style.js

@@ -1,214 +1 @@
-import styled, { css } from "styled-components";
-import { shade, meetsContrastGuidelines } from "polished";
-import { margin } from "styled-system";
-import styleConfig from "./pill.style.config";
-import { baseTheme } from "../../style/themes";
-import StyledIcon from "../icon/icon.style";
-import StyledIconButton from "../icon-button/icon-button.style";
-import { toColor } from "../../style/utils/color";
-import getColorValue from "../../style/utils/get-color-value";
-const StyledPill = styled.span`
-  ${margin}
-  ${({
-  wrapText,
-  borderColor,
-  colorVariant,
-  isDarkBackground,
-  isDeletable,
-  inFill,
-  maxWidth,
-  pillRole,
-  size,
-  theme
-}) => {
-  const isStatus = pillRole === "status";
-  let pillColor;
-  let buttonFocusColor;
-  let contentColor;
-  try {
-    if (borderColor) {
-      pillColor = toColor(theme, borderColor);
-      buttonFocusColor = shade(0.2, getColorValue(pillColor));
-      contentColor = meetsContrastGuidelines(getColorValue(pillColor), theme.compatibility.colorsUtilityYin090).AAA ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityYang100)";
-    } else {
-      const {
-        status,
-        tag
-      } = styleConfig(isDarkBackground);
-      const {
-        varietyColor,
-        buttonFocus,
-        content
-      } = isStatus ? status[colorVariant] : tag.primary;
-      pillColor = varietyColor;
-      buttonFocusColor = buttonFocus;
-      contentColor = content;
-    }
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.error(`Error: [Pill] - Could not parse the string '${borderColor}', please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.`);
-  }
-  return css`
-      font-size: 12px;
-      letter-spacing: 0.7px;
-      font-weight: 500;
-      position: relative;
-      display: inline-flex;
-      text-align: center;
-      align-items: center;
-      justify-content: center;
-      border: 2px solid ${pillColor};
-      border-radius: var(--borderRadius025);
-      height: auto;
-
-      ${!wrapText && css`
-        white-space: nowrap;
-      `}
-
-      ${wrapText && css`
-        white-space: break-spaces;
-        hyphens: auto;
-      `}
-
-      color: ${contentColor};
-
-      ${inFill && css`
-        background-color: ${pillColor};
-      `}
-
-      ${!inFill && css`
-        color: ${!isDarkBackground ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityYang100)"};
-      `}
-
-      ${size === "S" && css`
-        min-height: 16px;
-        line-height: 16px;
-        font-size: 12px;
-        padding: 0 8px;
-      `}
-
-      ${size === "M" && css`
-        min-height: 20px;
-        line-height: 20px;
-        font-size: 14px;
-        padding: 0 8px;
-      `}
-
-      ${size === "L" && css`
-        min-height: 24px;
-        line-height: 24px;
-        font-size: 14px;
-        padding: 0 8px;
-      `}
-
-      ${size === "XL" && css`
-        min-height: 28px;
-        line-height: 28px;
-        font-size: 16px;
-        padding: 0 12px;
-      `}
-
-      ${isDeletable && css`
-        ${StyledIconButton} {
-          -webkit-appearance: none;
-          border-radius: var(--borderRadius000);
-          border: none;
-          bottom: 0;
-          font-size: 100%;
-          position: absolute;
-          right: 0;
-          top: 0;
-          width: 20px;
-          margin: 0;
-          line-height: 16px;
-
-          &:focus {
-            background-color: ${buttonFocusColor};
-            border-radius: var(--borderRadius000) var(--borderRadius025)
-              var(--borderRadius025) var(--borderRadius000);
-            ::-moz-focus-inner {
-              border: 0;
-            }
-
-            ${StyledIcon} {
-              color: ${contentColor};
-            }
-          }
-
-          &:hover {
-            background-color: ${buttonFocusColor};
-            color: ${contentColor};
-            cursor: pointer;
-
-            ${StyledIcon} {
-              color: ${contentColor};
-            }
-          }
-
-          ${StyledIcon} {
-            height: unset;
-            width: unset;
-            color: ${contentColor};
-
-            ${!inFill && css`
-              color: ${!isDarkBackground ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityYang100)"};
-            `}
-          }
-        }
-
-        ${size === "S" && css`
-          padding: 0 22px 0 8px;
-
-          ${StyledIconButton} {
-            padding: 0;
-            line-height: 16px;
-
-            ${StyledIcon} {
-              top: -2px;
-              &:before {
-                font-size: 16px;
-              }
-            }
-          }
-        `}
-
-        ${size === "M" && css`
-          padding: 0 28px 0 8px;
-
-          ${StyledIconButton} {
-            width: 24px;
-            padding: 0;
-            line-height: 15px;
-          }
-        `}
-
-        ${size === "L" && css`
-          padding: 0 32px 0 8px;
-
-          ${StyledIconButton} {
-            width: 28px;
-            padding: 0;
-            line-height: 16px;
-          }
-        `}
-
-        ${size === "XL" && css`
-          padding: 0 36px 0 12px;
-
-          ${StyledIconButton} {
-            width: 32px;
-            padding: 0;
-            line-height: 18px;
-          }
-        `}
-      `}
-      ${maxWidth && `max-width: ${maxWidth}`}
-    `;
-}}
-`;
-StyledPill.defaultProps = {
-  inFill: false,
-  isDeletable: false,
-  theme: baseTheme
-};
-export default StyledPill;
+import i,{css as o}from"styled-components";import{shade as t,meetsContrastGuidelines as e}from"polished";import{margin as r}from"styled-system";import n from"./pill.style.config.js";import"../../style/themes/sage/index.js";import s from"../../style/themes/base/index.js";import"../../style/themes/none/index.js";import l from"../icon/icon.style.js";import p from"../icon-button/icon-button.style.js";import{toColor as a}from"../../style/utils/color.js";import d from"../../style/utils/get-color-value.js";const h=i.span.withConfig({displayName:"pill.style__StyledPill",componentId:"sc-9b63ff47-0"})([""," ",""],r,(({wrapText:i,borderColor:r,colorVariant:s,isDarkBackground:h,isDeletable:c,inFill:g,maxWidth:x,pillRole:m,size:u,theme:b})=>{const f="status"===m;let y,v,w;try{if(r)y=a(b,r),v=t(.2,d(y)),w=e(d(y),b.compatibility.colorsUtilityYin090).AAA?"var(--colorsUtilityYin090)":"var(--colorsUtilityYang100)";else{const{status:i,tag:o}=n(h),{varietyColor:t,buttonFocus:e,content:r}=f?i[s]:o.primary;y=t,v=e,w=r}}catch(i){console.error(`Error: [Pill] - Could not parse the string '${r}', please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.`)}return o(["font-size:12px;letter-spacing:0.7px;font-weight:500;position:relative;display:inline-flex;text-align:center;align-items:center;justify-content:center;border:2px solid ",";border-radius:var(--borderRadius025);height:auto;"," "," color:",";"," "," "," "," "," "," "," ",""],y,!i&&o(["white-space:nowrap;"]),i&&o(["white-space:break-spaces;hyphens:auto;"]),w,g&&o(["background-color:",";"],y),!g&&o(["color:",";"],h?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)"),"S"===u&&o(["min-height:16px;line-height:16px;font-size:12px;padding:0 8px;"]),"M"===u&&o(["min-height:20px;line-height:20px;font-size:14px;padding:0 8px;"]),"L"===u&&o(["min-height:24px;line-height:24px;font-size:14px;padding:0 8px;"]),"XL"===u&&o(["min-height:28px;line-height:28px;font-size:16px;padding:0 12px;"]),c&&o(["","{-webkit-appearance:none;border-radius:var(--borderRadius000);border:none;bottom:0;font-size:100%;position:absolute;right:0;top:0;width:20px;margin:0;line-height:16px;&:focus{background-color:",";border-radius:var(--borderRadius000) var(--borderRadius025) var(--borderRadius025) var(--borderRadius000);::-moz-focus-inner{border:0;}","{color:",";}}&:hover{background-color:",";color:",";cursor:pointer;","{color:",";}}","{height:unset;width:unset;color:",";","}}"," "," "," ",""],p,v,l,w,v,w,l,w,l,w,!g&&o(["color:",";"],h?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)"),"S"===u&&o(["padding:0 22px 0 8px;","{padding:0;line-height:16px;","{top:-2px;&:before{font-size:16px;}}}"],p,l),"M"===u&&o(["padding:0 28px 0 8px;","{width:24px;padding:0;line-height:15px;}"],p),"L"===u&&o(["padding:0 32px 0 8px;","{width:28px;padding:0;line-height:16px;}"],p),"XL"===u&&o(["padding:0 36px 0 12px;","{width:32px;padding:0;line-height:18px;}"],p)),x&&`max-width: ${x}`)}));h.defaultProps={inFill:!1,isDeletable:!1,theme:s};export{h as default};

package/esm/components/pod/index.js

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

package/esm/components/pod/pod.component.js

@@ -1,138 +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, { useState, useMemo } from "react";
-import useLocale from "../../hooks/__internal__/useLocale";
-import tagComponent from "../../__internal__/utils/helpers/tags";
-import { StyledBlock, StyledContent, StyledEditAction, StyledActionsContainer, StyledDeleteButton, StyledUndoButton, StyledFooter, StyledPod, StyledHeader, StyledSubtitle, StyledTitle } from "./pod.style";
-import Icon from "../icon";
-import Event from "../../__internal__/utils/helpers/events";
-const Pod = /*#__PURE__*/React.forwardRef(({
-  alignTitle = "left",
-  border = true,
-  children,
-  displayEditButtonOnHover,
-  editContentFullWidth,
-  footer,
-  height,
-  internalEditButton,
-  onDelete,
-  onEdit,
-  onUndo,
-  size = "medium",
-  softDelete,
-  subtitle,
-  title,
-  triggerEditOnContent,
-  variant = "primary",
-  ...rest
-}, ref) => {
-  const [isEditFocused, setEditFocused] = useState(false);
-  const [isEditHovered, setEditHovered] = useState(false);
-  const [isDeleteFocused, setDeleteFocused] = useState(false);
-  const [isDeleteHovered, setDeleteHovered] = useState(false);
-  const [isUndoFocused, setUndoFocused] = useState(false);
-  const [isUndoHovered, setUndoHovered] = useState(false);
-  const l = useLocale();
-  const shouldContentHaveEditEvents = useMemo(() => !!(onEdit && (triggerEditOnContent || displayEditButtonOnHover)), [displayEditButtonOnHover, onEdit, triggerEditOnContent]);
-  const hasButtons = useMemo(() => !!(onEdit || onDelete || onUndo), [onEdit, onDelete, onUndo]);
-  const processPodAction = action => ev => {
-    if (Event.isKeyboardEvent(ev) && Event.isEventType(ev, "keydown") && !Event.isEnterKey(ev)) return;
-    ev.preventDefault();
-    action(ev);
-  };
-  const editEvents = {
-    onMouseEnter: () => setEditHovered(true),
-    onMouseLeave: () => setEditHovered(false),
-    onFocus: () => setEditFocused(true),
-    onBlur: () => setEditFocused(false),
-    onClick: onEdit && processPodAction(onEdit),
-    onKeyDown: onEdit && processPodAction(onEdit)
-  };
-  return /*#__PURE__*/React.createElement(StyledPod, _extends({
-    alignTitle: alignTitle,
-    internalEditButton: internalEditButton,
-    height: typeof height === "number" ? `${height}px` : height,
-    ref: ref
-  }, rest, tagComponent("pod", rest)), /*#__PURE__*/React.createElement(StyledBlock, _extends({
-    "data-element": "block",
-    "data-role": "pod-block",
-    contentTriggersEdit: shouldContentHaveEditEvents,
-    hasButtons: hasButtons,
-    fullWidth: editContentFullWidth,
-    internalEditButton: internalEditButton,
-    isFocused: isEditFocused || isDeleteFocused,
-    isHovered: isEditHovered || isDeleteHovered,
-    noBorder: !border,
-    variant: variant,
-    softDelete: softDelete
-  }, shouldContentHaveEditEvents && {
-    ...editEvents,
-    tabIndex: 0
-  }), /*#__PURE__*/React.createElement(StyledContent, {
-    "data-element": "content",
-    size: size
-  }, title && /*#__PURE__*/React.createElement(StyledHeader, {
-    "data-role": "pod-content-header",
-    alignTitle: alignTitle,
-    internalEditButton: internalEditButton,
-    size: size
-  }, typeof title === "string" ? /*#__PURE__*/React.createElement(StyledTitle, {
-    "data-element": "title"
-  }, title) : title, typeof subtitle === "string" ? /*#__PURE__*/React.createElement(StyledSubtitle, {
-    "data-element": "subtitle"
-  }, subtitle) : subtitle), children), footer && /*#__PURE__*/React.createElement(StyledFooter, {
-    "data-element": "footer",
-    size: size,
-    variant: variant,
-    softDelete: softDelete
-  }, footer)), hasButtons && /*#__PURE__*/React.createElement(StyledActionsContainer, {
-    "data-element": "action-button-container",
-    "data-role": "action-button-container",
-    internalEditButton: internalEditButton
-  }, softDelete && onUndo && /*#__PURE__*/React.createElement(StyledUndoButton, {
-    "aria-label": l.pod.undo(),
-    onMouseEnter: () => setUndoHovered(true),
-    onMouseLeave: () => setUndoHovered(false),
-    onFocus: () => setUndoFocused(true),
-    onBlur: () => setUndoFocused(false),
-    "data-element": "undo",
-    internalEditButton: internalEditButton,
-    isFocused: isUndoFocused,
-    isHovered: isUndoHovered,
-    noBorder: !border,
-    size: size,
-    variant: variant,
-    onClick: processPodAction(onUndo)
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: "undo"
-  })), !softDelete && onEdit && /*#__PURE__*/React.createElement(StyledEditAction, _extends({}, editEvents, {
-    "aria-label": l.actions.edit(),
-    "data-element": "edit",
-    displayOnlyOnHover: displayEditButtonOnHover,
-    internalEditButton: internalEditButton,
-    isFocused: isEditFocused,
-    isHovered: isEditHovered,
-    noBorder: !border,
-    size: size,
-    variant: variant
-  }), /*#__PURE__*/React.createElement(Icon, {
-    type: "edit"
-  })), !softDelete && onDelete && /*#__PURE__*/React.createElement(StyledDeleteButton, {
-    "aria-label": l.actions.delete(),
-    "data-element": "delete",
-    onMouseEnter: () => setDeleteHovered(true),
-    onMouseLeave: () => setDeleteHovered(false),
-    onFocus: () => setDeleteFocused(true),
-    onBlur: () => setDeleteFocused(false),
-    internalEditButton: internalEditButton,
-    isFocused: isDeleteFocused,
-    isHovered: isDeleteHovered,
-    noBorder: !border,
-    size: size,
-    variant: variant,
-    onClick: processPodAction(onDelete)
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: "delete"
-  }))));
-});
-Pod.displayName = "Pod";
-export default Pod;
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import n,{useState as r,useMemo as o}from"react";import i from"../../hooks/__internal__/useLocale/useLocale.js";import l from"../../__internal__/utils/helpers/tags/tags.js";import{StyledPod as a,StyledBlock as d,StyledContent as s,StyledHeader as c,StyledTitle as u,StyledSubtitle as p,StyledFooter as f,StyledActionsContainer as b,StyledUndoButton as y,StyledEditAction as m,StyledDeleteButton as O}from"./pod.style.js";import h from"../icon/icon.component.js";import g from"../../__internal__/utils/helpers/events/events.js";function v(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function E(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){v(e,t,n[t])}))}return e}function j(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const B=n.forwardRef(((n,v)=>{var{alignTitle:B="left",border:w=!0,children:P,displayEditButtonOnHover:D,editContentFullWidth:_,footer:k,height:F,internalEditButton:z,onDelete:C,onEdit:H,onUndo:x,size:M="medium",softDelete:S,subtitle:T,title:L,triggerEditOnContent:K,variant:W="primary"}=n,I=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(n,["alignTitle","border","children","displayEditButtonOnHover","editContentFullWidth","footer","height","internalEditButton","onDelete","onEdit","onUndo","size","softDelete","subtitle","title","triggerEditOnContent","variant"]);const[U,N]=r(!1),[R,$]=r(!1),[q,A]=r(!1),[G,J]=r(!1),[Q,V]=r(!1),[X,Y]=r(!1),Z=i(),ee=o((()=>!(!H||!K&&!D)),[D,H,K]),te=o((()=>!!(H||C||x)),[H,C,x]),ne=e=>t=>{g.isKeyboardEvent(t)&&g.isEventType(t,"keydown")&&!g.isEnterKey(t)||(t.preventDefault(),e(t))},re={onMouseEnter:()=>$(!0),onMouseLeave:()=>$(!1),onFocus:()=>N(!0),onBlur:()=>N(!1),onClick:H&&ne(H),onKeyDown:H&&ne(H)};return e(a,j(E({alignTitle:B,internalEditButton:z,height:"number"==typeof F?`${F}px`:F,ref:v},I,l("pod",I)),{children:[e(d,j(E({"data-element":"block","data-role":"pod-block",contentTriggersEdit:ee,hasButtons:te,fullWidth:_,internalEditButton:z,isFocused:U||q,isHovered:R||G,noBorder:!w,variant:W,softDelete:S},ee&&j(E({},re),{tabIndex:0})),{children:[e(s,{"data-element":"content",size:M,children:[L&&e(c,{"data-role":"pod-content-header",alignTitle:B,internalEditButton:z,size:M,children:["string"==typeof L?t(u,{"data-element":"title",children:L}):L,"string"==typeof T?t(p,{"data-element":"subtitle",children:T}):T]}),P]}),k&&t(f,{"data-element":"footer",size:M,variant:W,softDelete:S,children:k})]})),te&&e(b,{"data-element":"action-button-container","data-role":"action-button-container",internalEditButton:z,children:[S&&x&&t(y,{"aria-label":Z.pod.undo(),onMouseEnter:()=>Y(!0),onMouseLeave:()=>Y(!1),onFocus:()=>V(!0),onBlur:()=>V(!1),"data-element":"undo",internalEditButton:z,isFocused:Q,isHovered:X,noBorder:!w,size:M,variant:W,onClick:ne(x),children:t(h,{type:"undo"})}),!S&&H&&t(m,j(E({},re),{"aria-label":Z.actions.edit(),"data-element":"edit",displayOnlyOnHover:D,internalEditButton:z,isFocused:U,isHovered:R,noBorder:!w,size:M,variant:W,children:t(h,{type:"edit"})})),!S&&C&&t(O,{"aria-label":Z.actions.delete(),"data-element":"delete",onMouseEnter:()=>J(!0),onMouseLeave:()=>J(!1),onFocus:()=>A(!0),onBlur:()=>A(!1),internalEditButton:z,isFocused:q,isHovered:G,noBorder:!w,size:M,variant:W,onClick:ne(C),children:t(h,{type:"delete"})})]})]}))}));B.displayName="Pod";export{B as default};

package/esm/components/pod/pod.config.js

@@ -1,3 +1 @@
-export const POD_SIZES = ["extra-small", "small", "medium", "large", "extra-large"];
-export const POD_ALIGNMENTS = ["left", "center", "right"];
-export const POD_VARIANTS = ["primary", "secondary", "tertiary", "tile", "transparent"];
+const r=["extra-small","small","medium","large","extra-large"],e=["left","center","right"],t=["primary","secondary","tertiary","tile","transparent"];export{e as POD_ALIGNMENTS,r as POD_SIZES,t as POD_VARIANTS};