carbon-react 154.3.2 → 154.3.3-beta.1

package/lib/components/drawer/drawer.style.js

@@ -1,217 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledSidebarToggleButton = exports.StyledSidebarTitle = exports.StyledSidebarHeader = exports.StyledDrawerWrapper = exports.StyledDrawerSidebar = exports.StyledDrawerContent = exports.StyledDrawerChildren = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _tabs = _interopRequireDefault(require("../tabs/tabs.style"));
-var _box = _interopRequireDefault(require("../box"));
-var _stickyFooter = _interopRequireDefault(require("../../__internal__/sticky-footer/sticky-footer.style"));
-var _addFocusStyling = _interopRequireDefault(require("../../style/utils/add-focus-styling"));
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const defaultExpandedWidth = "var(--sizing500)";
-const StyledSidebarHeader = exports.StyledSidebarHeader = _styledComponents.default.div`
-  ${({
-  isExpanded
-}) => (0, _styledComponents.css)`
-    position: sticky;
-    top: 0;
-
-    ${isExpanded && (0, _styledComponents.css)`
-      border-bottom: var(--sizing010) solid #ccd6db;
-    `}
-  `}
-`;
-const StyledSidebarTitle = exports.StyledSidebarTitle = _styledComponents.default.div`
-  white-space: nowrap;
-  padding: var(--spacing300) var(--spacing500);
-`;
-const StyledDrawerChildren = exports.StyledDrawerChildren = _styledComponents.default.div`
-  flex: 1;
-  margin-left: 1px;
-  overflow: auto;
-`;
-const StyledDrawerSidebar = exports.StyledDrawerSidebar = (0, _styledComponents.default)(_box.default)`
-  ${({
-  hasControls,
-  isExpanded
-}) => (0, _styledComponents.css)`
-    ${!isExpanded && (0, _styledComponents.css)`
-      display: none;
-      opacity: 0;
-    `}
-
-    ${isExpanded && (0, _styledComponents.css)`
-      display: flex;
-      flex-direction: column;
-      flex: 1 1 0%;
-    `}
-
-      ${hasControls && (0, _styledComponents.css)`
-      ${_tabs.default} {
-        margin-top: 48px;
-        ${!isExpanded && (0, _styledComponents.css)`
-          display: none;
-        `}
-      }
-    `}
-  `}
-
-  &::-webkit-scrollbar {
-    width: 12px;
-  }
-`;
-const sidebarVisible = () => (0, _styledComponents.keyframes)`
-  0% {opacity: 0;}
-  50% {opacity: 0;}
-  100% {opacity: 1;}
-`;
-const sidebarHidden = () => (0, _styledComponents.keyframes)`
-  0% {opacity: 1;}
-  100% {opacity: 0; display: none;}
-`;
-const drawerOpen = expandedWidth => (0, _styledComponents.keyframes)`
-  0% {
-    width: ${defaultExpandedWidth};
-    overflow: hidden;
-    min-width: ${defaultExpandedWidth};
-  }
-  100% {
-    width: ${expandedWidth};
-    min-width: 52px;
-  }
-`;
-const drawerClose = expandedWidth => (0, _styledComponents.keyframes)`
-  0% {width: ${expandedWidth};}
-  100% {width: ${defaultExpandedWidth};}
-`;
-const buttonOpen = () => (0, _styledComponents.keyframes)`
-  0% {float: right;}
-  100% {float: right;}
-`;
-const buttonClose = () => (0, _styledComponents.keyframes)`
-  0% {float: right;}
-  80% {float: right;}
-  100% {float: left;}
-`;
-const StyledDrawerContent = exports.StyledDrawerContent = _styledComponents.default.aside`
-  display: flex;
-  flex-direction: column;
-  min-width: ${defaultExpandedWidth};
-  width: ${defaultExpandedWidth};
-  min-height: 40px;
-  height: auto;
-  position: relative;
-  overflow: auto;
-
-  ${({
-  backgroundColor
-}) => (0, _styledComponents.css)`
-    background-color: ${backgroundColor || "var(--colorsUtilityMajor040)"};
-    border-right: 1px solid ${backgroundColor || "var(--colorsUtilityMajor075)"};
-  `};
-
-  &.open {
-    min-width: 52px;
-    width: ${({
-  expandedWidth
-}) => expandedWidth};
-
-    ${StyledDrawerSidebar}, ${StyledSidebarTitle} {
-      display: block;
-      opacity: 1;
-    }
-  }
-
-  &.opening {
-    animation: ${({
-  animationDuration,
-  expandedWidth
-}) => (0, _styledComponents.css)`
-        ${drawerOpen(expandedWidth)} ${animationDuration}
-      `}
-      ease-in-out;
-
-    ${StyledDrawerSidebar}, ${StyledSidebarTitle} {
-      animation: ${sidebarVisible}
-        ${({
-  animationDuration
-}) => animationDuration} ease-in-out;
-    }
-  }
-
-  &.closed {
-    overflow: hidden;
-    ${StyledDrawerSidebar}, ${StyledSidebarTitle}, ${_stickyFooter.default} {
-      display: block;
-      opacity: 0;
-    }
-  }
-
-  &.closing {
-    animation: ${({
-  animationDuration,
-  expandedWidth
-}) => (0, _styledComponents.css)`
-        ${drawerClose(expandedWidth)} ${animationDuration}
-      `}
-      ease-in-out;
-
-    ${StyledDrawerSidebar}, ${StyledSidebarTitle}, ${_stickyFooter.default} {
-      animation: ${sidebarHidden}
-        ${({
-  animationDuration
-}) => animationDuration} ease-in-out;
-    }
-  }
-`;
-const StyledSidebarToggleButton = exports.StyledSidebarToggleButton = _styledComponents.default.button.attrs({
-  type: "button"
-})`
-  ${({
-  animationDuration,
-  isExpanded
-}) => (0, _styledComponents.css)`
-    position: absolute;
-    top: var(--spacing300);
-    right: 8px;
-    padding: var(--spacing100);
-    width: var(--spacing300);
-    height: var(--spacing300);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition: margin-right ${animationDuration} ease-in-out;
-    background-color: transparent;
-    border: none;
-    z-index: 1;
-    animation: ${buttonClose} ${animationDuration} ease-in-out;
-    border-radius: var(--borderRadius050);
-
-    &:focus {
-      ${(0, _addFocusStyling.default)()}
-    }
-
-    &:hover {
-      cursor: pointer;
-    }
-
-    ${isExpanded && (0, _styledComponents.css)`
-      transform: scaleX(-1);
-      animation: ${buttonOpen} ${animationDuration} ease-in-out;
-    `}
-  `}
-`;
-StyledSidebarToggleButton.defaultProps = {
-  theme: _base.default
-};
-const StyledDrawerWrapper = exports.StyledDrawerWrapper = _styledComponents.default.div`
-  display: flex;
-  height: ${({
-  height
-}) => height};
-`;
+"use strict";var e=require("styled-components"),t=require("../tabs/tabs.style.js"),a=require("../box/box.component.js"),i=require("../../__internal__/sticky-footer/sticky-footer.style.js"),o=require("../../style/utils/add-focus-styling.js"),r=require("../../style/themes/base/index.js");function n(e){return e&&e.__esModule?e:{default:e}}var s=n(e);const d="var(--sizing500)",l=s.default.div.withConfig({displayName:"drawer.style__StyledSidebarHeader",componentId:"sc-63a459a1-0"})(["",""],(({isExpanded:t})=>e.css(["position:sticky;top:0;",""],t&&e.css(["border-bottom:var(--sizing010) solid #ccd6db;"])))),p=s.default.div.withConfig({displayName:"drawer.style__StyledSidebarTitle",componentId:"sc-63a459a1-1"})(["white-space:nowrap;padding:var(--spacing300) var(--spacing500);"]),c=s.default.div.withConfig({displayName:"drawer.style__StyledDrawerChildren",componentId:"sc-63a459a1-2"})(["flex:1;margin-left:1px;overflow:auto;"]),y=s.default(a.Box).withConfig({displayName:"drawer.style__StyledDrawerSidebar",componentId:"sc-63a459a1-3"})([""," &::-webkit-scrollbar{width:12px;}"],(({hasControls:a,isExpanded:i})=>e.css([""," "," ",""],!i&&e.css(["display:none;opacity:0;"]),i&&e.css(["display:flex;flex-direction:column;flex:1 1 0%;"]),a&&e.css(["","{margin-top:48px;","}"],t.default,!i&&e.css(["display:none;"]))))),u=()=>e.keyframes(["0%{float:right;}100%{float:right;}"]),f=()=>e.keyframes(["0%{float:right;}80%{float:right;}100%{float:left;}"]),h=s.default.aside.withConfig({displayName:"drawer.style__StyledDrawerContent",componentId:"sc-63a459a1-4"})(["display:flex;flex-direction:column;min-width:",";width:",";min-height:40px;height:auto;position:relative;overflow:auto;",";&.open{min-width:52px;width:",";",",","{display:block;opacity:1;}}&.opening{animation:"," ease-in-out;",",","{animation:"," "," ease-in-out;}}&.closed{overflow:hidden;",",",",","{display:block;opacity:0;}}&.closing{animation:"," ease-in-out;",",",",","{animation:"," "," ease-in-out;}}"],d,d,(({backgroundColor:t})=>e.css(["background-color:",";border-right:1px solid ",";"],t||"var(--colorsUtilityMajor040)",t||"var(--colorsUtilityMajor075)")),(({expandedWidth:e})=>e),y,p,(({animationDuration:t,expandedWidth:a})=>e.css([""," ",""],(t=>e.keyframes(["0%{width:",";overflow:hidden;min-width:",";}100%{width:",";min-width:52px;}"],d,d,t))(a),t)),y,p,(()=>e.keyframes(["0%{opacity:0;}50%{opacity:0;}100%{opacity:1;}"])),(({animationDuration:e})=>e),y,p,i.default,(({animationDuration:t,expandedWidth:a})=>e.css([""," ",""],(t=>e.keyframes(["0%{width:",";}100%{width:",";}"],t,d))(a),t)),y,p,i.default,(()=>e.keyframes(["0%{opacity:1;}100%{opacity:0;display:none;}"])),(({animationDuration:e})=>e)),m=s.default.button.attrs({type:"button"}).withConfig({displayName:"drawer.style__StyledSidebarToggleButton",componentId:"sc-63a459a1-5"})(["",""],(({animationDuration:t,isExpanded:a})=>e.css(["position:absolute;top:var(--spacing300);right:8px;padding:var(--spacing100);width:var(--spacing300);height:var(--spacing300);display:flex;justify-content:center;align-items:center;transition:margin-right "," ease-in-out;background-color:transparent;border:none;z-index:1;animation:"," "," ease-in-out;border-radius:var(--borderRadius050);&:focus{","}&:hover{cursor:pointer;}",""],t,f,t,o.default(),a&&e.css(["transform:scaleX(-1);animation:"," "," ease-in-out;"],u,t))));m.defaultProps={theme:r.default};const g=s.default.div.withConfig({displayName:"drawer.style__StyledDrawerWrapper",componentId:"sc-63a459a1-6"})(["display:flex;height:",";"],(({height:e})=>e));exports.StyledDrawerChildren=c,exports.StyledDrawerContent=h,exports.StyledDrawerSidebar=y,exports.StyledDrawerWrapper=g,exports.StyledSidebarHeader=l,exports.StyledSidebarTitle=p,exports.StyledSidebarToggleButton=m;

package/lib/components/drawer/index.js

@@ -1,13 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _drawer.default;
-  }
-});
-var _drawer = _interopRequireDefault(require("./drawer.component"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./drawer.component.js");exports.default=e.Drawer;

package/lib/components/drawer/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "../../../esm/components/drawer/index.js",
   "main": "./index.js",
+  "module": "../../../esm/components/drawer/index.js",
   "types": "./index.d.ts"
 }

package/lib/components/duelling-picklist/__internal__/duelling-picklist.context.js

@@ -1,13 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const FocusContext = /*#__PURE__*/_react.default.createContext({
-  setElementToFocus: /* istanbul ignore next */() => {},
-  elementToFocus: {}
-});
-var _default = exports.default = FocusContext;
+"use strict";function e(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});const t=e(require("react")).default.createContext({setElementToFocus:()=>{},elementToFocus:{}});exports.default=t;

package/lib/components/duelling-picklist/duelling-picklist.component.js

@@ -1,68 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.DuellingPicklist = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
-var _utils = require("../../style/utils");
-var _duellingPicklist = require("./duelling-picklist.style");
-var _picklist = require("./picklist/picklist.component");
-var _duellingPicklist2 = _interopRequireDefault(require("./__internal__/duelling-picklist.context"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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); }
-const DuellingPicklist = ({
-  children,
-  disabled,
-  leftControls,
-  rightControls,
-  leftLabel,
-  rightLabel,
-  ...rest
-}) => {
-  const shouldDisplayLabels = leftLabel || rightLabel;
-  const shouldDisplayControls = leftControls || rightControls;
-  const [elementToFocus, setElementToFocus] = (0, _react.useState)({});
-  let pickListIndex = 0;
-  const addElementToFocus = (itemIndex, listIndex, groupIndex) => {
-    setElementToFocus({
-      itemIndex,
-      listIndex,
-      groupIndex
-    });
-  };
-  const getIndex = () => {
-    const index = pickListIndex;
-    pickListIndex += 1;
-    return index;
-  };
-  const clonedChildren = _react.default.Children.map(children, child => {
-    if (/*#__PURE__*/_react.default.isValidElement(child) && child.type === _picklist.Picklist) {
-      return /*#__PURE__*/_react.default.cloneElement(child, {
-        index: getIndex()
-      });
-    }
-    return child;
-  });
-  return /*#__PURE__*/_react.default.createElement(_duellingPicklist.StyledDuellingPicklistOverlay, _extends({
-    disabled: disabled
-  }, (0, _utils.filterStyledSystemMarginProps)(rest), (0, _tags.default)("duelling-picklist", rest)), shouldDisplayLabels && /*#__PURE__*/_react.default.createElement(_duellingPicklist.StyledLabelContainer, null, /*#__PURE__*/_react.default.createElement(_duellingPicklist.StyledLabel, {
-    "data-element": "picklist-left-label"
-  }, leftLabel), /*#__PURE__*/_react.default.createElement(_duellingPicklist.StyledLabel, {
-    "data-element": "picklist-right-label"
-  }, rightLabel)), shouldDisplayControls && /*#__PURE__*/_react.default.createElement(_duellingPicklist.StyledControlsContainer, null, /*#__PURE__*/_react.default.createElement(_duellingPicklist.StyledControl, {
-    "data-element": "picklist-left-control"
-  }, leftControls), /*#__PURE__*/_react.default.createElement(_duellingPicklist.StyledControl, {
-    "data-element": "picklist-right-control"
-  }, rightControls)), /*#__PURE__*/_react.default.createElement(_duellingPicklist2.default.Provider, {
-    value: {
-      setElementToFocus: addElementToFocus,
-      elementToFocus
-    }
-  }, /*#__PURE__*/_react.default.createElement(_duellingPicklist.StyledDuellingPicklist, null, clonedChildren)));
-};
-exports.DuellingPicklist = DuellingPicklist;
-var _default = exports.default = DuellingPicklist;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../__internal__/utils/helpers/tags/tags.js");require("../../style/utils/filter-styled-system-padding-props.js");var l=require("../../style/utils/filter-styled-system-margin-props.js"),n=require("./duelling-picklist.style.js"),i=require("./picklist/picklist.component.js"),s=require("./__internal__/duelling-picklist.context.js");function o(e){return e&&e.__esModule?e:{default:e}}var c=o(t);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const u=o=>{var{children:u,disabled:d,leftControls:p,rightControls:f,leftLabel:y,rightLabel:b}=o,j=function(e,t){if(null==e)return{};var r,l,n=function(e,t){if(null==e)return{};var r,l,n={},i=Object.keys(e);for(l=0;l<i.length;l++)r=i[l],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(l=0;l<i.length;l++)r=i[l],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(o,["children","disabled","leftControls","rightControls","leftLabel","rightLabel"]);const O=y||b,g=p||f,[h,m]=t.useState({});let x=0;const P=()=>{const e=x;return x+=1,e},v=c.default.Children.map(u,(e=>c.default.isValidElement(e)&&e.type===i.Picklist?c.default.cloneElement(e,{index:P()}):e));return e.jsxs(n.StyledDuellingPicklistOverlay,(k=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},l=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(l=l.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),l.forEach((function(t){a(e,t,r[t])}))}return e}({disabled:d},l.default(j),r.default("duelling-picklist",j)),S=null!=(S={children:[O&&e.jsxs(n.StyledLabelContainer,{children:[e.jsx(n.StyledLabel,{"data-element":"picklist-left-label",children:y}),e.jsx(n.StyledLabel,{"data-element":"picklist-right-label",children:b})]}),g&&e.jsxs(n.StyledControlsContainer,{children:[e.jsx(n.StyledControl,{"data-element":"picklist-left-control",children:p}),e.jsx(n.StyledControl,{"data-element":"picklist-right-control",children:f})]}),e.jsx(s.default.Provider,{value:{setElementToFocus:(e,t,r)=>{m({itemIndex:e,listIndex:t,groupIndex:r})},elementToFocus:h},children:e.jsx(n.StyledDuellingPicklist,{children:v})})]})?S:{},Object.getOwnPropertyDescriptors?Object.defineProperties(k,Object.getOwnPropertyDescriptors(S)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(S)).forEach((function(e){Object.defineProperty(k,e,Object.getOwnPropertyDescriptor(S,e))})),k));var k,S};exports.DuellingPicklist=u,exports.default=u;

package/lib/components/duelling-picklist/duelling-picklist.style.js

@@ -1,65 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledPicklistPlaceholder = exports.StyledLabelContainer = exports.StyledLabel = exports.StyledDuellingPicklistOverlay = exports.StyledDuellingPicklist = exports.StyledControlsContainer = exports.StyledControl = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _styledSystem = require("styled-system");
-var _themes = require("../../style/themes");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const StyledDuellingPicklistOverlay = exports.StyledDuellingPicklistOverlay = _styledComponents.default.div`
-  ${_styledSystem.margin}
-
-  transition: opacity 0.3s;
-
-  ${({
-  disabled
-}) => disabled && (0, _styledComponents.css)`
-      opacity: 0.2;
-      pointer-events: none;
-      user-select: none;
-    `}
-`;
-const StyledDuellingPicklist = exports.StyledDuellingPicklist = _styledComponents.default.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: stretch;
-  position: relative;
-`;
-const StyledLabelContainer = exports.StyledLabelContainer = _styledComponents.default.div`
-  display: flex;
-  justify-content: space-around;
-  margin-top: 40px;
-  margin-bottom: 16px;
-`;
-const StyledLabel = exports.StyledLabel = _styledComponents.default.p`
-  font-weight: 500;
-  font-size: 12px;
-  letter-spacing: 1;
-  margin: 0;
-`;
-const StyledControlsContainer = exports.StyledControlsContainer = _styledComponents.default.div`
-  display: flex;
-  justify-content: space-around;
-  margin-bottom: 16px;
-`;
-const StyledControl = exports.StyledControl = _styledComponents.default.div`
-  width: 50%;
-  padding-right: 40px;
-
-  & ~ & {
-    padding-right: 0;
-    padding-left: 40px;
-  }
-`;
-const StyledPicklistPlaceholder = exports.StyledPicklistPlaceholder = _styledComponents.default.div`
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-StyledDuellingPicklistOverlay.defaultProps = {
-  theme: _themes.baseTheme
-};
+"use strict";var e=require("styled-components"),t=require("styled-system");require("../../style/themes/sage/index.js");var i=require("../../style/themes/base/index.js");function l(e){return e&&e.__esModule?e:{default:e}}require("../../style/themes/none/index.js");var n=l(e);const s=n.default.div.withConfig({displayName:"duelling-picklist.style__StyledDuellingPicklistOverlay",componentId:"sc-ca896caf-0"})([""," transition:opacity 0.3s;",""],t.margin,(({disabled:t})=>t&&e.css(["opacity:0.2;pointer-events:none;user-select:none;"]))),a=n.default.div.withConfig({displayName:"duelling-picklist.style__StyledDuellingPicklist",componentId:"sc-ca896caf-1"})(["display:flex;justify-content:space-between;align-items:stretch;position:relative;"]),d=n.default.div.withConfig({displayName:"duelling-picklist.style__StyledLabelContainer",componentId:"sc-ca896caf-2"})(["display:flex;justify-content:space-around;margin-top:40px;margin-bottom:16px;"]),o=n.default.p.withConfig({displayName:"duelling-picklist.style__StyledLabel",componentId:"sc-ca896caf-3"})(["font-weight:500;font-size:12px;letter-spacing:1;margin:0;"]),c=n.default.div.withConfig({displayName:"duelling-picklist.style__StyledControlsContainer",componentId:"sc-ca896caf-4"})(["display:flex;justify-content:space-around;margin-bottom:16px;"]),p=n.default.div.withConfig({displayName:"duelling-picklist.style__StyledControl",componentId:"sc-ca896caf-5"})(["width:50%;padding-right:40px;& ~ &{padding-right:0;padding-left:40px;}"]),r=n.default.div.withConfig({displayName:"duelling-picklist.style__StyledPicklistPlaceholder",componentId:"sc-ca896caf-6"})(["height:100%;display:flex;justify-content:center;align-items:center;"]);s.defaultProps={theme:i.default},exports.StyledControl=p,exports.StyledControlsContainer=c,exports.StyledDuellingPicklist=a,exports.StyledDuellingPicklistOverlay=s,exports.StyledLabel=o,exports.StyledLabelContainer=d,exports.StyledPicklistPlaceholder=r;

package/lib/components/duelling-picklist/index.js

@@ -1,48 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "DuellingPicklist", {
-  enumerable: true,
-  get: function () {
-    return _duellingPicklist.default;
-  }
-});
-Object.defineProperty(exports, "Picklist", {
-  enumerable: true,
-  get: function () {
-    return _picklist.default;
-  }
-});
-Object.defineProperty(exports, "PicklistDivider", {
-  enumerable: true,
-  get: function () {
-    return _picklistDivider.default;
-  }
-});
-Object.defineProperty(exports, "PicklistGroup", {
-  enumerable: true,
-  get: function () {
-    return _picklistGroup.default;
-  }
-});
-Object.defineProperty(exports, "PicklistItem", {
-  enumerable: true,
-  get: function () {
-    return _picklistItem.default;
-  }
-});
-Object.defineProperty(exports, "PicklistPlaceholder", {
-  enumerable: true,
-  get: function () {
-    return _picklistPlaceholder.default;
-  }
-});
-var _duellingPicklist = _interopRequireDefault(require("./duelling-picklist.component"));
-var _picklistDivider = _interopRequireDefault(require("./picklist-divider/picklist-divider.component"));
-var _picklistItem = _interopRequireDefault(require("./picklist-item/picklist-item.component"));
-var _picklist = _interopRequireDefault(require("./picklist/picklist.component"));
-var _picklistPlaceholder = _interopRequireDefault(require("./picklist-placeholder/picklist-placeholder.component"));
-var _picklistGroup = _interopRequireDefault(require("./picklist-group/picklist-group.component"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+"use strict";var i=require("./duelling-picklist.component.js"),e=require("./picklist-divider/picklist-divider.component.js"),t=require("./picklist-item/picklist-item.component.js"),l=require("./picklist/picklist.component.js"),s=require("./picklist-placeholder/picklist-placeholder.component.js"),c=require("./picklist-group/picklist-group.component.js");exports.DuellingPicklist=i.DuellingPicklist,exports.PicklistDivider=e.default,exports.PicklistItem=t.PicklistItem,exports.Picklist=l.Picklist,exports.PicklistPlaceholder=s.PicklistPlaceholder,exports.PicklistGroup=c.PicklistGroup;

package/lib/components/duelling-picklist/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "../../../esm/components/duelling-picklist/index.js",
   "main": "./index.js",
+  "module": "../../../esm/components/duelling-picklist/index.js",
   "types": "./index.d.ts"
 }

package/lib/components/duelling-picklist/picklist/picklist.component.js

@@ -1,77 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Picklist = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactTransitionGroup = require("react-transition-group");
-var _picklist = require("./picklist.style");
-var _duellingPicklist = _interopRequireDefault(require("../__internal__/duelling-picklist.context"));
-var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
-var _picklistGroup = _interopRequireDefault(require("../picklist-group/picklist-group.component"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const Picklist = ({
-  disabled,
-  children,
-  placeholder,
-  index
-}) => {
-  const {
-    elementToFocus,
-    setElementToFocus
-  } = (0, _react.useContext)(_duellingPicklist.default);
-  const isEmpty = (0, _react.useMemo)(() => !_react.default.Children.toArray(children).length, [children]);
-  const filteredChildren = _react.default.Children.toArray(children);
-  const refs = (0, _react.useMemo)(() => Array.from({
-    length: filteredChildren.length
-  }, () => /*#__PURE__*/_react.default.createRef()), [filteredChildren.length]);
-  const focusItem = (0, _react.useCallback)((ev, itemIndex) => {
-    ev.preventDefault();
-    refs[itemIndex].current?.focus();
-  }, [refs]);
-  const handleKeyDown = (0, _react.useCallback)(ev => {
-    if (_events.default.isHomeKey(ev)) {
-      focusItem(ev, 0);
-    } else if (_events.default.isEndKey(ev)) {
-      focusItem(ev, refs.length - 1);
-    }
-  }, [focusItem, refs]);
-  const content = filteredChildren.map((child, childIndex) => {
-    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
-      return child;
-    }
-    const props = {
-      ref: refs[childIndex],
-      disabled,
-      index: childIndex,
-      listIndex: index,
-      isLastGroup: child.type === _picklistGroup.default && childIndex === filteredChildren.length - 1
-    };
-    return /*#__PURE__*/_react.default.cloneElement(child, props);
-  });
-  (0, _react.useEffect)(() => {
-    if (elementToFocus.groupIndex === undefined && elementToFocus.listIndex === index && elementToFocus.itemIndex !== undefined) {
-      const itemToBeFocused = refs[elementToFocus.itemIndex]?.current;
-      if (itemToBeFocused) {
-        itemToBeFocused.focus();
-        setElementToFocus();
-      } else {
-        setElementToFocus(0, index === 0 ? 1 : 0, elementToFocus.groupIndex);
-      }
-    }
-  }, [elementToFocus, index, refs, setElementToFocus]);
-  return /*#__PURE__*/_react.default.createElement(_picklist.StyledPicklist, {
-    "data-element": "picklist",
-    "data-role": "picklist",
-    scrollVariant: "light",
-    onKeyDown: handleKeyDown
-  }, isEmpty && /*#__PURE__*/_react.default.createElement(_picklist.StyledEmptyContainer, null, placeholder), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, {
-    component: null
-  }, content));
-};
-exports.Picklist = Picklist;
-Picklist.displayName = "Picklist";
-var _default = exports.default = Picklist;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-transition-group"),l=require("./picklist.style.js"),i=require("../__internal__/duelling-picklist.context.js"),n=require("../../../__internal__/utils/helpers/events/events.js"),s=require("../picklist-group/picklist-group.component.js");function u(e){return e&&e.__esModule?e:{default:e}}var o=u(t);const a=({disabled:u,children:a,placeholder:d,index:c})=>{const{elementToFocus:p,setElementToFocus:f}=t.useContext(i.default),m=t.useMemo((()=>!o.default.Children.toArray(a).length),[a]),x=o.default.Children.toArray(a),h=t.useMemo((()=>Array.from({length:x.length},(()=>o.default.createRef()))),[x.length]),g=t.useCallback(((e,t)=>{var r;e.preventDefault(),null===(r=h[t].current)||void 0===r||r.focus()}),[h]),v=t.useCallback((e=>{n.default.isHomeKey(e)?g(e,0):n.default.isEndKey(e)&&g(e,h.length-1)}),[g,h]),y=x.map(((e,t)=>{if(!o.default.isValidElement(e))return e;const r={ref:h[t],disabled:u,index:t,listIndex:c,isLastGroup:e.type===s.PicklistGroup&&t===x.length-1};return o.default.cloneElement(e,r)}));return t.useEffect((()=>{if(void 0===p.groupIndex&&p.listIndex===c&&void 0!==p.itemIndex){var e;const t=null===(e=h[p.itemIndex])||void 0===e?void 0:e.current;t?(t.focus(),f()):f(0,0===c?1:0,p.groupIndex)}}),[p,c,h,f]),e.jsxs(l.StyledPicklist,{"data-element":"picklist","data-role":"picklist",scrollVariant:"light",onKeyDown:v,children:[m&&e.jsx(l.StyledEmptyContainer,{children:d}),e.jsx(r.TransitionGroup,{component:null,children:y})]})};a.displayName="Picklist",exports.Picklist=a,exports.default=a;

package/lib/components/duelling-picklist/picklist/picklist.style.js

@@ -1,58 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledPicklist = exports.StyledEmptyContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _box = _interopRequireDefault(require("../../box/box.style"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// TODO: remove polymorphism when we revisit as part of ticket FE-6177
-const StyledPicklist = exports.StyledPicklist = (0, _styledComponents.default)(_box.default).attrs({
-  as: "ul"
-})`
-  position: relative;
-  list-style: none;
-  margin: 0;
-  padding: 8px 8px 8px 8px;
-  width: 100%;
-  box-sizing: border-box;
-  overflow-y: auto;
-  height: 400px;
-
-  & + & {
-    margin-left: 32px;
-  }
-
-  .picklist-item-enter {
-    opacity: 0;
-    transform: translate(-16px);
-    transition: all 300ms ease-in;
-  }
-
-  .picklist-item-enter-active {
-    opacity: 1;
-    transform: translate(0px);
-    transition: all 300ms ease-in;
-  }
-
-  .picklist-group-enter {
-    opacity: 0;
-    transform: translate(-16px);
-    transition: all 300ms ease-in;
-  }
-
-  .picklist-group-enter-active {
-    opacity: 1;
-    transform: translate(0px);
-    transition: all 300ms ease-in;
-  }
-`;
-const StyledEmptyContainer = exports.StyledEmptyContainer = _styledComponents.default.li`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 100%;
-`;
+"use strict";var t=require("styled-components"),e=require("../../box/box.style.js");function i(t){return t&&t.__esModule?t:{default:t}}var s=i(t);const a=s.default(e.default).attrs({as:"ul"}).withConfig({displayName:"picklist.style__StyledPicklist",componentId:"sc-77f9122f-0"})(["position:relative;list-style:none;margin:0;padding:8px 8px 8px 8px;width:100%;box-sizing:border-box;overflow-y:auto;height:400px;& + &{margin-left:32px;}.picklist-item-enter{opacity:0;transform:translate(-16px);transition:all 300ms ease-in;}.picklist-item-enter-active{opacity:1;transform:translate(0px);transition:all 300ms ease-in;}.picklist-group-enter{opacity:0;transform:translate(-16px);transition:all 300ms ease-in;}.picklist-group-enter-active{opacity:1;transform:translate(0px);transition:all 300ms ease-in;}"]),n=s.default.li.withConfig({displayName:"picklist.style__StyledEmptyContainer",componentId:"sc-77f9122f-1"})(["position:absolute;top:0;bottom:0;left:0;right:0;height:100%;"]);exports.StyledEmptyContainer=n,exports.StyledPicklist=a;

package/lib/components/duelling-picklist/picklist-divider/picklist-divider.component.js

@@ -1,14 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _picklistDivider = _interopRequireDefault(require("./picklist-divider.style"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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); }
-const PicklistDivider = props => /*#__PURE__*/_react.default.createElement(_picklistDivider.default, _extends({}, props, {
-  "data-element": "picklist-divider"
-}));
-var _default = exports.default = PicklistDivider;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var r=require("./picklist-divider.style.js");function t(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}exports.default=n=>{return e.jsx(r.default,(c=function(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},c=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(c=c.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),c.forEach((function(r){t(e,r,n[r])}))}return e}({},n),o=null!=(o={"data-element":"picklist-divider"})?o:{},Object.getOwnPropertyDescriptors?Object.defineProperties(c,Object.getOwnPropertyDescriptors(o)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(o)).forEach((function(e){Object.defineProperty(c,e,Object.getOwnPropertyDescriptor(o,e))})),c));var c,o};

package/lib/components/duelling-picklist/picklist-divider/picklist-divider.style.js

@@ -1,19 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const StyledPicklistDivider = _styledComponents.default.div`
-  min-width: 2px;
-  background-image: linear-gradient(
-    180deg,
-    #bfcbd1 0%,
-    rgba(191, 203, 209, 0) 99.9%
-  );
-  margin-left: 16px;
-  margin-right: 16px;
-`;
-var _default = exports.default = StyledPicklistDivider;
+"use strict";function e(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});const i=e(require("styled-components")).default.div.withConfig({displayName:"picklist-divider.style__StyledPicklistDivider",componentId:"sc-6d9e8575-0"})(["min-width:2px;background-image:linear-gradient( 180deg,#bfcbd1 0%,rgba(191,203,209,0) 99.9% );margin-left:16px;margin-right:16px;"]);exports.default=i;