carbon-react 154.3.2 → 154.4.0-beta.0

package/esm/components/advanced-color-picker/advanced-color-picker-cell.style.js

@@ -1,41 +1 @@
-import styled, { css } from "styled-components";
-import baseTheme from "../../style/themes/base";
-import addFocusStyling from "../../style/utils/add-focus-styling";
-const transparentSvg = "%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%" + "2Fsvg%22%20width%3D%22400%22%20height%3D%22400%22%20fill-opacity%3D%22." + "45%22%3E%3Crect%20x%3D%22200%22%20width%3D%22200%22%20height%3D%22200%22%20%2" + "F%3E%3Crect%20y%3D%22200%22%20width%3D%22200%22%20height%3D%22200%22%20%2F%3E%3C%2Fsvg%3E";
-const StyledAdvancedColorPickerCell = styled.button.attrs({
-  type: "button"
-})`
-  display: block;
-  width: 25px;
-  height: 25px;
-  border: 1px solid var(--colorsUtilityYin090);
-  ${({
-  color
-}) => color && css`
-      background-color: ${color};
-      border-radius: var(--borderRadius050);
-    `}
-
-  ${({
-  color
-}) => color === "transparent" && css`
-      background: #eee url("data:image/svg+xml,${transparentSvg}");
-      background-size: 10px 10px;
-    `}
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  &:focus {
-    ${addFocusStyling()}
-  }
-
-  &::-moz-focus-inner {
-    border: none;
-  }
-`;
-StyledAdvancedColorPickerCell.defaultProps = {
-  theme: baseTheme
-};
-export default StyledAdvancedColorPickerCell;
+import o,{css as t}from"styled-components";import e from"../../style/themes/base/index.js";import r from"../../style/utils/add-focus-styling.js";const s=o.button.attrs({type:"button"}).withConfig({displayName:"advanced-color-picker-cell.style__StyledAdvancedColorPickerCell",componentId:"sc-813f96c0-0"})(["display:block;width:25px;height:25px;border:1px solid var(--colorsUtilityYin090);"," "," &:hover{cursor:pointer;}&:focus{","}&::-moz-focus-inner{border:none;}"],(({color:o})=>o&&t(["background-color:",";border-radius:var(--borderRadius050);"],o)),(({color:o})=>"transparent"===o&&t(['background:#eee url("data:image/svg+xml,','");background-size:10px 10px;'],"%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22400%22%20fill-opacity%3D%22.45%22%3E%3Crect%20x%3D%22200%22%20width%3D%22200%22%20height%3D%22200%22%20%2F%3E%3Crect%20y%3D%22200%22%20width%3D%22200%22%20height%3D%22200%22%20%2F%3E%3C%2Fsvg%3E")),r());s.defaultProps={theme:e};export{s as default};

package/esm/components/advanced-color-picker/advanced-color-picker.component.js

@@ -1,167 +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, useEffect, useCallback, useRef } from "react";
-import { StyledAdvancedColorPickerWrapper, HiddenCurrentColorList, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle } from "./advanced-color-picker.style";
-import { SimpleColorPicker, SimpleColor } from "../simple-color-picker";
-import Events from "../../__internal__/utils/helpers/events";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-import guid from "../../__internal__/utils/helpers/guid";
-import useLocale from "../../hooks/__internal__/useLocale";
-import { Dt, Dd } from "../definition-list";
-import Logger from "../../__internal__/utils/logger";
-import tagComponent from "../../__internal__/utils/helpers/tags";
-let deprecateUncontrolledWarnTriggered = false;
-export const AdvancedColorPicker = ({
-  "aria-describedby": ariaDescribedBy,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  availableColors,
-  defaultColor,
-  name,
-  onOpen,
-  onClose,
-  onChange,
-  onBlur,
-  open = false,
-  role,
-  selectedColor,
-  restoreFocusOnClose = true,
-  ...props
-}) => {
-  const [dialogOpen, setDialogOpen] = useState();
-  const currentColor = selectedColor || defaultColor;
-  const [selectedColorRef, setSelectedColorRef] = useState(null);
-  const descriptionId = useRef(guid());
-  const l = useLocale();
-  const simpleColorPickerData = useRef(null);
-  const colors = availableColors.map(({
-    value,
-    label
-  }, index) => {
-    return {
-      value,
-      label,
-      getRef: () => /* Fallback to null to satisfy the TypeScript compiler */
-      /* istanbul ignore next */
-      simpleColorPickerData.current ? simpleColorPickerData.current.gridItemRefs[index] : null
-    };
-  });
-  const currentSelectedColor = () => {
-    const returnedColor = availableColors.find(color => color.value === currentColor)?.label;
-    return returnedColor || currentColor;
-  };
-  useEffect(() => {
-    if (dialogOpen || open) {
-      const newColor = colors?.find(c => currentColor === c.value);
-
-      /* istanbul ignore else */
-      if (newColor) {
-        setSelectedColorRef(newColor.getRef());
-      }
-    }
-  }, [colors, currentColor, dialogOpen, open]);
-  const handleFocus = useCallback((e, firstFocusableElement) => {
-    /* istanbul ignore else */
-    if (e.key === "Tab") {
-      if (e.shiftKey) {
-        if (document.activeElement === firstFocusableElement && selectedColorRef) {
-          selectedColorRef.focus();
-          e.preventDefault();
-        }
-      } else if (document.activeElement === selectedColorRef) {
-        firstFocusableElement?.focus();
-        e.preventDefault();
-      }
-    }
-  }, [selectedColorRef]);
-  const handleOnOpen = useCallback(e => {
-    setDialogOpen(true);
-    if (onOpen) {
-      onOpen(e);
-    }
-  }, [onOpen]);
-  const handleOnClose = useCallback(e => {
-    setDialogOpen(false);
-    if (onClose) {
-      onClose(e);
-    }
-  }, [onClose]);
-  const handleOnChange = useCallback(e => {
-    const newColor = colors?.find(c => e.target.value === c.value);
-
-    /* istanbul ignore else */
-    if (newColor) {
-      setSelectedColorRef(newColor.getRef());
-    }
-
-    /* istanbul ignore else */
-    if (onChange) {
-      onChange(e);
-    }
-  }, [onChange, colors]);
-  const handleOnKeyDown = useCallback(e => {
-    if (Events.isEnterKey(e) || Events.isSpaceKey(e)) {
-      e.preventDefault();
-      handleOnOpen(e);
-    }
-  }, [handleOnOpen]);
-  const handleColorOnKeyDown = useCallback(e => {
-    if (Events.isEnterKey(e) || Events.isSpaceKey(e)) {
-      e.preventDefault();
-      handleOnClose(e);
-    }
-  }, [handleOnClose]);
-  const handleOnBlur = useCallback(e => {
-    if (onBlur) {
-      onBlur(e);
-    }
-  }, [onBlur]);
-  if (!deprecateUncontrolledWarnTriggered && !onChange) {
-    deprecateUncontrolledWarnTriggered = true;
-    Logger.deprecate("Uncontrolled behaviour in `Advanced Color Picker` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
-  }
-  return /*#__PURE__*/React.createElement(StyledAdvancedColorPickerWrapper, _extends({
-    m: "15px auto auto 15px"
-  }, filterStyledSystemMarginProps(props), tagComponent("advanced-color-picker", props)), /*#__PURE__*/React.createElement(StyledAdvancedColorPickerCell, {
-    "data-element": "color-picker-cell",
-    "aria-label": l.advancedColorPicker.ariaLabel(),
-    "aria-describedby": descriptionId.current,
-    onClick: handleOnOpen,
-    onKeyDown: handleOnKeyDown,
-    color: currentColor,
-    tabIndex: 0
-  }), /*#__PURE__*/React.createElement(HiddenCurrentColorList, {
-    id: descriptionId.current,
-    "data-element": "current-color-description"
-  }, /*#__PURE__*/React.createElement(Dt, null, l.advancedColorPicker.currentColorDescriptionTerm(currentSelectedColor())), /*#__PURE__*/React.createElement(Dd, null, l.advancedColorPicker.currentColorAssigned(currentSelectedColor()))), /*#__PURE__*/React.createElement(DialogStyle, {
-    "aria-describedby": ariaDescribedBy,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    open: dialogOpen || open,
-    size: "auto",
-    onCancel: handleOnClose,
-    bespokeFocusTrap: handleFocus,
-    focusFirstElement: selectedColorRef,
-    role: role,
-    restoreFocusOnClose: restoreFocusOnClose
-  }, /*#__PURE__*/React.createElement(StyledAdvancedColorPickerPreview, {
-    "data-element": "color-picker-preview",
-    color: currentColor
-  }), /*#__PURE__*/React.createElement(SimpleColorPicker, {
-    name: name,
-    legend: "",
-    onChange: handleOnChange,
-    onBlur: handleOnBlur,
-    onKeyDown: handleColorOnKeyDown,
-    ref: simpleColorPickerData
-  }, colors?.map(({
-    value,
-    label
-  }) => /*#__PURE__*/React.createElement(SimpleColor, {
-    value: value,
-    key: value,
-    "aria-label": label,
-    id: value,
-    defaultChecked: value === currentColor
-  })))));
-};
-export default AdvancedColorPicker;
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as o,useRef as t,useEffect as l,useCallback as n}from"react";import{StyledAdvancedColorPickerWrapper as i,HiddenCurrentColorList as a,DialogStyle as c,StyledAdvancedColorPickerPreview as s}from"./advanced-color-picker.style.js";import{SimpleColorPicker as p}from"../simple-color-picker/simple-color-picker.component.js";import{SimpleColor as u}from"../simple-color-picker/simple-color/simple-color.component.js";import d from"../../__internal__/utils/helpers/events/events.js";import"../../style/utils/filter-styled-system-padding-props.js";import m from"../../style/utils/filter-styled-system-margin-props.js";import f from"../../__internal__/utils/helpers/guid/index.js";import b from"../../hooks/__internal__/useLocale/useLocale.js";import"../definition-list/dl.component.js";import y from"../definition-list/dt/dt.component.js";import v from"../definition-list/dd/dd.component.js";import O from"../../__internal__/utils/logger/index.js";import j from"../../__internal__/utils/helpers/tags/tags.js";import g from"./advanced-color-picker-cell.style.js";function C(e,r,o){return r in e?Object.defineProperty(e,r,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[r]=o,e}let h=!1;const k=k=>{var{"aria-describedby":_,"aria-label":P,"aria-labelledby":w,availableColors:D,defaultColor:x,name:E,onOpen:S,onClose:K,onChange:F,onBlur:R,open:B=!1,role:I,selectedColor:L,restoreFocusOnClose:T=!0}=k,A=function(e,r){if(null==e)return{};var o,t,l=function(e,r){if(null==e)return{};var o,t,l={},n=Object.keys(e);for(t=0;t<n.length;t++)o=n[t],r.indexOf(o)>=0||(l[o]=e[o]);return l}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(t=0;t<n.length;t++)o=n[t],r.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(l[o]=e[o])}return l}(k,["aria-describedby","aria-label","aria-labelledby","availableColors","defaultColor","name","onOpen","onClose","onChange","onBlur","open","role","selectedColor","restoreFocusOnClose"]);const[z,U]=o(),q=L||x,[G,H]=o(null),J=t(f()),M=b(),N=t(null),Q=D.map((({value:e,label:r},o)=>({value:e,label:r,getRef:()=>N.current?N.current.gridItemRefs[o]:null}))),V=()=>{var e;return(null===(e=D.find((e=>e.value===q)))||void 0===e?void 0:e.label)||q};l((()=>{if(z||B){const e=null==Q?void 0:Q.find((e=>q===e.value));e&&H(e.getRef())}}),[Q,q,z,B]);const W=n(((e,r)=>{"Tab"===e.key&&(e.shiftKey?document.activeElement===r&&G&&(G.focus(),e.preventDefault()):document.activeElement===G&&(null==r||r.focus(),e.preventDefault()))}),[G]),X=n((e=>{U(!0),S&&S(e)}),[S]),Y=n((e=>{U(!1),K&&K(e)}),[K]),Z=n((e=>{const r=null==Q?void 0:Q.find((r=>e.target.value===r.value));r&&H(r.getRef()),F&&F(e)}),[F,Q]),$=n((e=>{(d.isEnterKey(e)||d.isSpaceKey(e))&&(e.preventDefault(),X(e))}),[X]),ee=n((e=>{(d.isEnterKey(e)||d.isSpaceKey(e))&&(e.preventDefault(),Y(e))}),[Y]),re=n((e=>{R&&R(e)}),[R]);return h||F||(h=!0,O.deprecate("Uncontrolled behaviour in `Advanced Color Picker` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.")),e(i,(oe=function(e){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{},t=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),t.forEach((function(r){C(e,r,o[r])}))}return e}({m:"15px auto auto 15px"},m(A),j("advanced-color-picker",A)),te=null!=(te={children:[r(g,{"data-element":"color-picker-cell","aria-label":M.advancedColorPicker.ariaLabel(),"aria-describedby":J.current,onClick:X,onKeyDown:$,color:q,tabIndex:0}),e(a,{id:J.current,"data-element":"current-color-description",children:[r(y,{children:M.advancedColorPicker.currentColorDescriptionTerm(V())}),r(v,{children:M.advancedColorPicker.currentColorAssigned(V())})]}),e(c,{"aria-describedby":_,"aria-label":P,"aria-labelledby":w,open:z||B,size:"auto",onCancel:Y,bespokeFocusTrap:W,focusFirstElement:G,role:I,restoreFocusOnClose:T,children:[r(s,{"data-element":"color-picker-preview",color:q}),r(p,{name:E,legend:"",onChange:Z,onBlur:re,onKeyDown:ee,ref:N,children:null==Q?void 0:Q.map((({value:e,label:o})=>r(u,{value:e,"aria-label":o,id:e,defaultChecked:e===q},e)))})]})]})?te:{},Object.getOwnPropertyDescriptors?Object.defineProperties(oe,Object.getOwnPropertyDescriptors(te)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r.push.apply(r,o)}return r}(Object(te)).forEach((function(e){Object.defineProperty(oe,e,Object.getOwnPropertyDescriptor(te,e))})),oe));var oe,te};export{k as AdvancedColorPicker,k as default};

package/esm/components/advanced-color-picker/advanced-color-picker.style.js

@@ -1,82 +1 @@
-import styled, { css } from "styled-components";
-import { margin } from "styled-system";
-import StyledAdvancedColorPickerCell from "./advanced-color-picker-cell.style";
-import { StyledColorOptions } from "../simple-color-picker/simple-color-picker.style";
-import { StyledSimpleColor } from "../simple-color-picker/simple-color/simple-color.style";
-import { StyledDialogContent } from "../dialog/dialog.style";
-import Dialog from "../dialog/dialog.component";
-import StyledIconButton from "../icon-button/icon-button.style";
-import checkerBoardSvg from "../simple-color-picker/simple-color/checker-board.svg";
-import baseTheme from "../../style/themes/base";
-import visuallyHiddenStyles from "../../style/utils/visually-hidden";
-import { Dl } from "../definition-list";
-const StyledAdvancedColorPickerWrapper = styled.div`
-  ${margin}
-  display: inline-block;
-`;
-
-/** To be replaced by accessibly hidden class added in FE-5503 */
-const HiddenCurrentColorList = styled(Dl)`
-  ${visuallyHiddenStyles}
-`;
-StyledAdvancedColorPickerWrapper.defaultProps = {
-  theme: baseTheme
-};
-const StyledAdvancedColorPickerPreview = styled.div`
-  width: 25px;
-  height: 25px;
-  margin-bottom: 15px;
-  border: 1px solid var(--colorsUtilityYin090);
-  border-radius: var(--borderRadius050);
-
-  ${({
-  color
-}) => color !== "transparent" && css`
-      background-color: ${color};
-    `}
-
-  ${({
-  color
-}) => color === "transparent" && css`
-      background-color: #eeeeee;
-      background-image: url(${checkerBoardSvg});
-      background-size: 10px 10px;
-    `}
-
-  &:hover {
-    cursor: initial;
-  }
-`;
-const DialogStyle = styled(Dialog)`
-  ${StyledDialogContent} {
-    padding: var(--spacing200);
-  }
-
-  ${StyledColorOptions} {
-    max-width: 285px;
-    ${StyledSimpleColor} {
-      border: 1px solid var(--colorsUtilityYin090);
-      margin-right: -1px;
-      margin-bottom: -1px;
-      transition: all 0.2s ease;
-
-      &:hover {
-        transform: scale(1.1);
-      }
-    }
-  }
-
-  ${StyledColorOptions} {
-    border: none;
-  }
-
-  ${StyledIconButton} {
-    top: 20px;
-    right: 13px;
-  }
-
-  [data-component="icon"] {
-    color: var(--colorsActionMinor500);
-  }
-`;
-export { StyledAdvancedColorPickerWrapper, HiddenCurrentColorList, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle };
+import o,{css as r}from"styled-components";import{margin as e}from"styled-system";export{default as StyledAdvancedColorPickerCell}from"./advanced-color-picker-cell.style.js";import{StyledColorOptions as i}from"../simple-color-picker/simple-color-picker.style.js";import{StyledSimpleColor as t}from"../simple-color-picker/simple-color/simple-color.style.js";import{StyledDialogContent as l}from"../dialog/dialog.style.js";import{Dialog as d}from"../dialog/dialog.component.js";import n from"../icon-button/icon-button.style.js";import s from"../simple-color-picker/simple-color/checker-board.svg";import c from"../../style/themes/base/index.js";import p from"../../style/utils/visually-hidden.js";import a from"../definition-list/dl.component.js";import"../definition-list/dt/dt.component.js";import"../definition-list/dd/dd.component.js";const m=o.div.withConfig({displayName:"advanced-color-picker.style__StyledAdvancedColorPickerWrapper",componentId:"sc-3d423393-0"})([""," display:inline-block;"],e),y=o(a).withConfig({displayName:"advanced-color-picker.style__HiddenCurrentColorList",componentId:"sc-3d423393-1"})(["",""],p);m.defaultProps={theme:c};const g=o.div.withConfig({displayName:"advanced-color-picker.style__StyledAdvancedColorPickerPreview",componentId:"sc-3d423393-2"})(["width:25px;height:25px;margin-bottom:15px;border:1px solid var(--colorsUtilityYin090);border-radius:var(--borderRadius050);"," "," &:hover{cursor:initial;}"],(({color:o})=>"transparent"!==o&&r(["background-color:",";"],o)),(({color:o})=>"transparent"===o&&r(["background-color:#eeeeee;background-image:url(",");background-size:10px 10px;"],s))),f=o(d).withConfig({displayName:"advanced-color-picker.style__DialogStyle",componentId:"sc-3d423393-3"})(["","{padding:var(--spacing200);}","{max-width:285px;","{border:1px solid var(--colorsUtilityYin090);margin-right:-1px;margin-bottom:-1px;transition:all 0.2s ease;&:hover{transform:scale(1.1);}}}","{border:none;}",'{top:20px;right:13px;}[data-component="icon"]{color:var(--colorsActionMinor500);}'],l,i,t,i,n);export{f as DialogStyle,y as HiddenCurrentColorList,g as StyledAdvancedColorPickerPreview,m as StyledAdvancedColorPickerWrapper};

package/esm/components/advanced-color-picker/index.js

@@ -1 +1 @@
-export { default } from "./advanced-color-picker.component";
+export{AdvancedColorPicker as default}from"./advanced-color-picker.component.js";

package/esm/components/alert/alert.component.js

@@ -1,18 +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 Dialog from "../dialog";
-export const Alert = ({
-  children,
-  size = "extra-small",
-  topModalOverride,
-  closeButtonDataProps,
-  ...rest
-}) => /*#__PURE__*/React.createElement(Dialog, _extends({
-  role: "alertdialog",
-  size: size,
-  topModalOverride: topModalOverride,
-  closeButtonDataProps: closeButtonDataProps
-}, rest, {
-  "data-component": "alert"
-}), children);
-export default Alert;
+import{jsx as e}from"react/jsx-runtime";import"react";import{Dialog as t}from"../dialog/dialog.component.js";function r(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const o=o=>{var n,c,{children:l,size:i="extra-small",topModalOverride:a,closeButtonDataProps:p}=o,u=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},c=Object.keys(e);for(o=0;o<c.length;o++)r=c[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(o=0;o<c.length;o++)r=c[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(o,["children","size","topModalOverride","closeButtonDataProps"]);return e(t,(n=function(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{},n=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),n.forEach((function(t){r(e,t,o[t])}))}return e}({role:"alertdialog",size:i,topModalOverride:a,closeButtonDataProps:p},u),c=null!=(c={"data-component":"alert",children:l})?c:{},Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(c)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(c)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(c,e))})),n))};export{o as Alert,o as default};

package/esm/components/alert/index.js

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

package/esm/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.component.js

@@ -1,21 +1 @@
-import React from "react";
-import StyledNavigationItem from "./anchor-navigation-item.style";
-const AnchorNavigationItem = /*#__PURE__*/React.forwardRef(({
-  children,
-  onKeyDown,
-  onClick,
-  href,
-  tabIndex,
-  isSelected
-}, ref) => /*#__PURE__*/React.createElement(StyledNavigationItem, {
-  isSelected: isSelected
-}, /*#__PURE__*/React.createElement("a", {
-  onKeyDown: onKeyDown,
-  onClick: onClick,
-  tabIndex: tabIndex,
-  ref: ref,
-  href: href,
-  "data-element": "anchor-navigation-item"
-}, children)));
-AnchorNavigationItem.displayName = "AnchorNavigationItem";
-export default AnchorNavigationItem;
+import{jsx as e}from"react/jsx-runtime";import n from"react";import t from"./anchor-navigation-item.style.js";const o=n.forwardRef((({children:n,onKeyDown:o,onClick:r,href:a,tabIndex:i,isSelected:c},m)=>e(t,{isSelected:c,children:e("a",{onKeyDown:o,onClick:r,tabIndex:i,ref:m,href:a,"data-element":"anchor-navigation-item",children:n})})));o.displayName="AnchorNavigationItem";export{o as default};

package/esm/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.style.js

@@ -1,39 +1 @@
-import styled, { css } from "styled-components";
-import addFocusStyling from "../../../style/utils/add-focus-styling";
-const StyledNavigationItem = styled.li`
-  width: 100%;
-
-  a {
-    cursor: pointer;
-    display: block;
-    text-decoration: none;
-    color: var(--colorsUtilityYin090);
-    background-color: transparent;
-    border-left: var(--sizing050) solid var(--colorsActionMinor100);
-    font-weight: 500;
-    padding: 12px 24px;
-    border-top-right-radius: var(--borderRadius100);
-    border-bottom-right-radius: var(--borderRadius100);
-
-    &:focus {
-      ${addFocusStyling()}
-      position: relative;
-    }
-
-    &:hover {
-      ${({
-  isSelected
-}) => !isSelected && css`
-          background-color: var(--colorsActionMinor100);
-        `};
-    }
-
-    ${({
-  isSelected
-}) => isSelected && css`
-        background-color: var(--colorsActionMajorYang100);
-        border-left-color: var(--colorsActionMajor500);
-      `}
-  }
-`;
-export default StyledNavigationItem;
+import o,{css as r}from"styled-components";import t from"../../../style/utils/add-focus-styling.js";const i=o.li.withConfig({displayName:"anchor-navigation-item.style__StyledNavigationItem",componentId:"sc-1d82dafe-0"})(["width:100%;a{cursor:pointer;display:block;text-decoration:none;color:var(--colorsUtilityYin090);background-color:transparent;border-left:var(--sizing050) solid var(--colorsActionMinor100);font-weight:500;padding:12px 24px;border-top-right-radius:var(--borderRadius100);border-bottom-right-radius:var(--borderRadius100);&:focus{"," position:relative;}&:hover{",";}","}"],t(),(({isSelected:o})=>!o&&r(["background-color:var(--colorsActionMinor100);"])),(({isSelected:o})=>o&&r(["background-color:var(--colorsActionMajorYang100);border-left-color:var(--colorsActionMajor500);"])));export{i as default};

package/esm/components/anchor-navigation/anchor-navigation.component.js

@@ -1,126 +1 @@
-import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
-import { isFragment } from "react-is";
-import invariant from "invariant";
-import throttle from "lodash/throttle";
-import { defaultFocusableSelectors } from "../../__internal__/focus-trap/focus-trap-utils";
-import Event from "../../__internal__/utils/helpers/events";
-import { StyledAnchorNavigation, StyledNavigation, StyledContent } from "./anchor-navigation.style";
-import AnchorNavigationItem from "./anchor-navigation-item/anchor-navigation-item.component";
-const SECTION_VISIBILITY_OFFSET = 200;
-const SCROLL_THROTTLE = 100;
-const AnchorNavigation = ({
-  children,
-  stickyNavigation,
-  "data-element": dataElement,
-  "data-role": dataRole
-}) => {
-  !isFragment(stickyNavigation) ? process.env.NODE_ENV !== "production" ? invariant(false, "`stickyNavigation` prop in `AnchorNavigation` should be a React Fragment.") : invariant(false) : void 0;
-  const hasCorrectItemStructure = useMemo(() => {
-    const incorrectChild = React.Children.toArray(stickyNavigation.props.children).find(child => {
-      return ! /*#__PURE__*/React.isValidElement(child) || child.type.displayName !== "AnchorNavigationItem";
-    });
-    return !incorrectChild;
-  }, [stickyNavigation]);
-  !hasCorrectItemStructure ? process.env.NODE_ENV !== "production" ? invariant(false, `\`stickyNavigation\` prop in \`AnchorNavigation\` should be a React Fragment that only contains children of type \`${AnchorNavigationItem.displayName}\``) : invariant(false) : void 0;
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const sectionRefs = useRef(React.Children.map(stickyNavigation.props.children, child => child.props.target));
-  const contentRef = useRef(null);
-  const navigationRef = useRef(null);
-  const isUserScroll = useRef(true);
-  const isUserScrollTimer = useRef();
-  const setSelectedAnchorBasedOnScroll = useCallback(() => {
-    // istanbul ignore if
-    // function is called only after component is rendered, so ref cannot hold a null value
-    if (navigationRef.current === null) return;
-    const offsetsWithIndexes = sectionRefs.current.map(({
-      current
-    }, index) => [index, current?.getBoundingClientRect().top]).filter(offsetWithIndex => offsetWithIndex[1] !== undefined);
-    const {
-      top: navTopOffset
-    } = navigationRef.current.getBoundingClientRect();
-    const indexOfSmallestNegativeTopOffset = offsetsWithIndexes.reduce((currentTopIndex, offsetWithIndex) => {
-      const [index, offset] = offsetWithIndex;
-      if (offset - SECTION_VISIBILITY_OFFSET > navTopOffset) return currentTopIndex;
-      return offset > offsetsWithIndexes[currentTopIndex][1] ? index : currentTopIndex;
-    }, offsetsWithIndexes[0][0]);
-    setSelectedIndex(indexOfSmallestNegativeTopOffset);
-  }, []);
-  const scrollHandler = useMemo(() => throttle(() => {
-    /* istanbul ignore else */
-    if (isUserScroll.current) {
-      setSelectedAnchorBasedOnScroll();
-    } else {
-      if (isUserScrollTimer.current !== undefined) {
-        window.clearTimeout(isUserScrollTimer.current);
-      }
-      isUserScrollTimer.current = setTimeout(() => {
-        isUserScroll.current = true;
-      }, SCROLL_THROTTLE + 50);
-    }
-  }, SCROLL_THROTTLE), [setSelectedAnchorBasedOnScroll]);
-  useEffect(() => {
-    window.addEventListener("scroll", scrollHandler, true);
-    return () => window.removeEventListener("scroll", scrollHandler, true);
-  }, [scrollHandler]);
-  const focusSection = section => {
-    if (!section.matches(defaultFocusableSelectors)) {
-      section.setAttribute("tabindex", "-1");
-    }
-    section.focus({
-      preventScroll: true
-    });
-  };
-  const scrollToSection = index => {
-    const sectionToScroll = sectionRefs.current[index].current;
-
-    // istanbul ignore if
-    // function is called only after component is rendered, so ref cannot hold a null value
-    if (sectionToScroll === null) return;
-
-    // ensure section has the appropriate element to remove the default focus styles.
-    // Can ignore else branch because there's no harm in setting this to "true" twice (it can't hold any other value),
-    // but it's probably more efficient not to.
-    // istanbul ignore else
-    if (!sectionToScroll.dataset.carbonAnchornavRef) {
-      sectionToScroll.dataset.carbonAnchornavRef = "true";
-    }
-    focusSection(sectionToScroll);
-
-    // workaround due to preventScroll focus method option on firefox not working consistently
-    window.setTimeout(() => {
-      isUserScroll.current = false;
-      sectionToScroll.scrollIntoView({
-        block: "start",
-        inline: "nearest",
-        behavior: "smooth"
-      });
-      setSelectedIndex(index);
-    }, 10);
-  };
-  const handleClick = (event, index) => {
-    event.preventDefault();
-    scrollToSection(index);
-  };
-  const handleKeyDown = (event, index) => {
-    if (Event.isEnterKey(event)) {
-      scrollToSection(index);
-    }
-  };
-  return /*#__PURE__*/React.createElement(StyledAnchorNavigation, {
-    ref: contentRef,
-    "data-component": "anchor-navigation",
-    "data-element": dataElement,
-    "data-role": dataRole
-  }, /*#__PURE__*/React.createElement(StyledNavigation, {
-    ref: navigationRef,
-    "data-element": "anchor-sticky-navigation"
-  }, React.Children.map(stickyNavigation.props.children, (child, index) => /*#__PURE__*/React.cloneElement(child, {
-    href: child.props.href || "#",
-    // need to pass an href to ensure the link is tabbable by default
-    isSelected: index === selectedIndex,
-    onClick: event => handleClick(event, index),
-    onKeyDown: event => handleKeyDown(event, index)
-  }))), /*#__PURE__*/React.createElement(StyledContent, null, children));
-};
-AnchorNavigation.displayName = "AnchorNavigation";
-export default AnchorNavigation;
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import n,{useMemo as r,useState as o,useRef as i,useCallback as a,useEffect as c}from"react";import{isFragment as l}from"react-is";import s from"invariant";import m from"lodash/throttle";import{defaultFocusableSelectors as d}from"../../__internal__/focus-trap/focus-trap-utils.js";import p from"../../__internal__/utils/helpers/events/events.js";import{StyledAnchorNavigation as u,StyledNavigation as h,StyledContent as v}from"./anchor-navigation.style.js";import f from"./anchor-navigation-item/anchor-navigation-item.component.js";const g=({children:g,stickyNavigation:y,"data-element":w,"data-role":N})=>{s(l(y),"`stickyNavigation` prop in `AnchorNavigation` should be a React Fragment.");const b=r((()=>!n.Children.toArray(y.props.children).find((t=>!n.isValidElement(t)||"AnchorNavigationItem"!==t.type.displayName))),[y]);s(b,`\`stickyNavigation\` prop in \`AnchorNavigation\` should be a React Fragment that only contains children of type \`${f.displayName}\``);const[A,_]=o(0),k=i(n.Children.map(y.props.children,(t=>t.props.target))),C=i(null),R=i(null),j=i(!0),E=i(),x=a((()=>{if(null===R.current)return;const t=k.current.map((({current:t},e)=>[e,null==t?void 0:t.getBoundingClientRect().top])).filter((t=>void 0!==t[1])),{top:e}=R.current.getBoundingClientRect(),n=t.reduce(((n,r)=>{const[o,i]=r;return i-200>e?n:i>t[n][1]?o:n}),t[0][0]);_(n)}),[]),T=r((()=>m((()=>{j.current?x():(void 0!==E.current&&window.clearTimeout(E.current),E.current=setTimeout((()=>{j.current=!0}),150))}),100)),[x]);c((()=>(window.addEventListener("scroll",T,!0),()=>window.removeEventListener("scroll",T,!0))),[T]);const B=t=>{const e=k.current[t].current;var n;null!==e&&(e.dataset.carbonAnchornavRef||(e.dataset.carbonAnchornavRef="true"),(n=e).matches(d)||n.setAttribute("tabindex","-1"),n.focus({preventScroll:!0}),window.setTimeout((()=>{j.current=!1,e.scrollIntoView({block:"start",inline:"nearest",behavior:"smooth"}),_(t)}),10))};return t(u,{ref:C,"data-component":"anchor-navigation","data-element":w,"data-role":N,children:[e(h,{ref:R,"data-element":"anchor-sticky-navigation",children:n.Children.map(y.props.children,((t,e)=>n.cloneElement(t,{href:t.props.href||"#",isSelected:e===A,onClick:t=>((t,e)=>{t.preventDefault(),B(e)})(t,e),onKeyDown:t=>((t,e)=>{p.isEnterKey(t)&&B(e)})(t,e)})))}),e(v,{children:g})]})};g.displayName="AnchorNavigation";export{g as default};

package/esm/components/anchor-navigation/anchor-navigation.style.js

@@ -1,23 +1 @@
-import styled from "styled-components";
-const StyledAnchorNavigation = styled.div`
-  display: flex;
-  align-items: flex-start;
-  width: 100%;
-`;
-const StyledNavigation = styled.ul`
-  position: sticky;
-  top: 32px;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  max-width: 240px;
-`;
-const StyledContent = styled.div`
-  flex: 1;
-  margin-left: 32px;
-
-  [data-carbon-anchornav-ref="true"]:focus {
-    outline: none;
-  }
-`;
-export { StyledAnchorNavigation, StyledNavigation, StyledContent };
+import n from"styled-components";const t=n.div.withConfig({displayName:"anchor-navigation.style__StyledAnchorNavigation",componentId:"sc-efd02f80-0"})(["display:flex;align-items:flex-start;width:100%;"]),i=n.ul.withConfig({displayName:"anchor-navigation.style__StyledNavigation",componentId:"sc-efd02f80-1"})(["position:sticky;top:32px;list-style:none;margin:0;padding:0;max-width:240px;"]),o=n.div.withConfig({displayName:"anchor-navigation.style__StyledContent",componentId:"sc-efd02f80-2"})(['flex:1;margin-left:32px;[data-carbon-anchornav-ref="true"]:focus{outline:none;}']);export{t as StyledAnchorNavigation,o as StyledContent,i as StyledNavigation};

package/esm/components/anchor-navigation/anchor-section-divider.component.js

@@ -1,9 +1 @@
-import styled from "styled-components";
-const AnchorSectionDivider = styled.div.attrs({
-  "data-element": "anchor-navigation-divider"
-})`
-  background-color: var(--colorsActionMinor200);
-  height: 1px;
-`;
-AnchorSectionDivider.displayName = "AnchorSectionDivider";
-export default AnchorSectionDivider;
+import o from"styled-components";const i=o.div.attrs({"data-element":"anchor-navigation-divider"}).withConfig({displayName:"anchor-section-divider.component__AnchorSectionDivider",componentId:"sc-989a8d9c-0"})(["background-color:var(--colorsActionMinor200);height:1px;"]);i.displayName="AnchorSectionDivider";export{i as default};

package/esm/components/anchor-navigation/index.js

@@ -1,3 +1 @@
-export { default as AnchorNavigation } from "./anchor-navigation.component";
-export { default as AnchorNavigationItem } from "./anchor-navigation-item/anchor-navigation-item.component";
-export { default as AnchorSectionDivider } from "./anchor-section-divider.component";
+export{default as AnchorNavigation}from"./anchor-navigation.component.js";export{default as AnchorNavigationItem}from"./anchor-navigation-item/anchor-navigation-item.component.js";export{default as AnchorSectionDivider}from"./anchor-section-divider.component.js";

package/esm/components/badge/badge.component.js

@@ -1,56 +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 } from "react";
-import { StyledBadgeWrapper, StyledCrossIcon, StyledCounter, StyledBadge } from "./badge.style";
-export const Badge = ({
-  "aria-label": ariaLabel,
-  children,
-  counter = 0,
-  color = "--colorsActionMajor500",
-  onClick,
-  "data-element": dataElement,
-  "data-role": dataRole
-}) => {
-  const shouldDisplayCounter = +counter > 0;
-  const counterToDisplay = +counter > 99 ? 99 : counter;
-  const [isFocused, setIsFocused] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const renderCorrectBadge = () => {
-    const props = onClick ? {
-      buttonType: "secondary",
-      onClick
-    } : {
-      "aria-label": ariaLabel
-    };
-    if (shouldDisplayCounter) {
-      return /*#__PURE__*/React.createElement(StyledBadge, _extends({
-        "data-component": "badge",
-        "data-element": dataElement,
-        "data-role": dataRole,
-        color: color
-      }, props, {
-        onFocus: () => {
-          setIsFocused(true);
-        },
-        onBlur: () => {
-          setIsFocused(false);
-        },
-        onMouseEnter: () => {
-          setIsHovered(true);
-        },
-        onMouseLeave: () => {
-          setIsHovered(false);
-        },
-        isFocused: isFocused,
-        isHovered: isHovered
-      }), onClick && /*#__PURE__*/React.createElement(StyledCrossIcon, {
-        "data-element": "badge-cross-icon",
-        type: "cross"
-      }), /*#__PURE__*/React.createElement(StyledCounter, {
-        "data-element": "badge-counter"
-      }, counterToDisplay));
-    }
-    return null;
-  };
-  return /*#__PURE__*/React.createElement(StyledBadgeWrapper, null, children, renderCorrectBadge());
-};
-export default Badge;
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r}from"react";import{StyledBadgeWrapper as o,StyledBadge as n,StyledCrossIcon as c,StyledCounter as a}from"./badge.style.js";function l(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=({"aria-label":i,children:s,counter:u=0,color:b="--colorsActionMajor500",onClick:p,"data-element":d,"data-role":y})=>{const O=+u>0,f=+u>99?99:u,[m,j]=r(!1),[g,P]=r(!1);return e(o,{children:[s,O?e(n,(w=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){l(e,t,r[t])}))}return e}({"data-component":"badge","data-element":d,"data-role":y,color:b},p?{buttonType:"secondary",onClick:p}:{"aria-label":i}),h={onFocus:()=>{j(!0)},onBlur:()=>{j(!1)},onMouseEnter:()=>{P(!0)},onMouseLeave:()=>{P(!1)},isFocused:m,isHovered:g,children:[p&&t(c,{"data-element":"badge-cross-icon",type:"cross"}),t(a,{"data-element":"badge-counter",children:f})]},h=null!=h?h:{},Object.getOwnPropertyDescriptors?Object.defineProperties(w,Object.getOwnPropertyDescriptors(h)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(h)).forEach((function(e){Object.defineProperty(w,e,Object.getOwnPropertyDescriptor(h,e))})),w)):null]});var w,h};export{i as Badge,i as default};