carbon-react 154.3.2 → 154.4.0-beta.0

package/esm/components/settings-row/settings-row.component.js

@@ -1,33 +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 Heading from "../heading";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-import { StyledSettingsRow, StyledSettingsRowHeader, StyledSettingsRowInput } from "./settings-row.style";
-export const SettingsRow = ({
-  title,
-  headingType = "h3",
-  children,
-  description,
-  divider = true,
-  ...rest
-}) => {
-  const heading = () => {
-    if (!title) return null;
-    return /*#__PURE__*/React.createElement(Heading, {
-      headingType: headingType,
-      title: title,
-      subheader: description,
-      separator: description !== undefined,
-      divider: false
-    });
-  };
-  return /*#__PURE__*/React.createElement(StyledSettingsRow, _extends({
-    hasDivider: divider,
-    "data-role": "settings-row"
-  }, tagComponent("settings-row", rest), {
-    m: 0
-  }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(StyledSettingsRowHeader, null, heading()), /*#__PURE__*/React.createElement(StyledSettingsRowInput, null, children));
-};
-SettingsRow.displayName = "SettingsRow";
-export default SettingsRow;
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import"react";import{Heading as r}from"../heading/heading.component.js";import n from"../../__internal__/utils/helpers/tags/tags.js";import"../../style/utils/filter-styled-system-padding-props.js";import i from"../../style/utils/filter-styled-system-margin-props.js";import{StyledSettingsRow as o,StyledSettingsRowHeader as s,StyledSettingsRowInput as l}from"./settings-row.style.js";function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){c(e,t,r[t])}))}return e}function a(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 r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const u=c=>{var{title:u,headingType:y="h3",children:f,description:d,divider:b=!0}=c,O=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(c,["title","headingType","children","description","divider"]);return e(o,a(p(a(p({hasDivider:b,"data-role":"settings-row"},n("settings-row",O)),{m:0}),i(O)),{children:[t(s,{children:u?t(r,{headingType:y,title:u,subheader:d,separator:void 0!==d,divider:!1}):null}),t(l,{children:f})]}))};u.displayName="SettingsRow";export{u as SettingsRow,u as default};

package/esm/components/settings-row/settings-row.style.js

@@ -1,51 +1 @@
-import styled, { css } from "styled-components";
-import { margin } from "styled-system";
-import baseTheme from "../../style/themes/base";
-import { StyledHeader, StyledSeparator } from "../heading/heading.style";
-export const StyledSettingsRow = styled.div`
-  ${margin}
-
-  clear: both;
-  color: var(--colorsUtilityYin055);
-  display: flex;
-  font-size: 14px;
-  justify-content: space-between;
-  padding: 0;
-  position: relative;
-
-  ${({
-  hasDivider
-}) => hasDivider && css`
-      border-bottom: 1px solid var(--colorsUtilityMajor050);
-      padding-bottom: 30px;
-    `}
-
-  ${StyledHeader} {
-    margin-bottom: 0;
-  }
-
-  ${StyledSeparator} {
-    margin-bottom: 17px;
-  }
-
-  + & {
-    padding-top: 30px;
-  }
-`;
-StyledSettingsRow.defaultProps = {
-  theme: baseTheme
-};
-export const StyledSettingsRowHeader = styled.div`
-  box-sizing: border-box;
-  clear: both;
-  float: left;
-  max-width: 325px;
-  width: 35%;
-`;
-export const StyledSettingsRowInput = styled.div`
-  box-sizing: border-box;
-  clear: both;
-  float: left;
-  margin-left: 50px;
-  width: 100%;
-`;
+import t,{css as o}from"styled-components";import{margin as e}from"styled-system";import i from"../../style/themes/base/index.js";import{StyledHeader as s,StyledSeparator as n}from"../heading/heading.style.js";const d=t.div.withConfig({displayName:"settings-row.style__StyledSettingsRow",componentId:"sc-feab59b7-0"})([""," clear:both;color:var(--colorsUtilityYin055);display:flex;font-size:14px;justify-content:space-between;padding:0;position:relative;"," ","{margin-bottom:0;}","{margin-bottom:17px;}+ &{padding-top:30px;}"],e,(({hasDivider:t})=>t&&o(["border-bottom:1px solid var(--colorsUtilityMajor050);padding-bottom:30px;"])),s,n);d.defaultProps={theme:i};const r=t.div.withConfig({displayName:"settings-row.style__StyledSettingsRowHeader",componentId:"sc-feab59b7-1"})(["box-sizing:border-box;clear:both;float:left;max-width:325px;width:35%;"]),a=t.div.withConfig({displayName:"settings-row.style__StyledSettingsRowInput",componentId:"sc-feab59b7-2"})(["box-sizing:border-box;clear:both;float:left;margin-left:50px;width:100%;"]);export{d as StyledSettingsRow,r as StyledSettingsRowHeader,a as StyledSettingsRowInput};

package/esm/components/sidebar/__internal__/sidebar-header/index.js

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

package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.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 StyledSidebarHeader from "./sidebar-header.style";
-const SidebarHeader = ({
-  children,
-  id,
-  closeIcon,
-  ...rest
-}) => /*#__PURE__*/React.createElement(StyledSidebarHeader, _extends({
-  hasClose: !!closeIcon,
-  "data-component": "sidebar-header",
-  p: "27px 32px 32px"
-}, rest), /*#__PURE__*/React.createElement("div", {
-  "data-element": "sidebar-heading",
-  id: id
-}, children), closeIcon);
-SidebarHeader.displayName = "SidebarHeader";
-export default SidebarHeader;
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import"react";import t from"./sidebar-header.style.js";function n(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const o=o=>{var c,i,{children:a,id:l,closeIcon:p}=o,b=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},c=Object.keys(e);for(n=0;n<c.length;n++)t=c[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)t=c[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(o,["children","id","closeIcon"]);return e(t,(c=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){n(e,r,t[r])}))}return e}({hasClose:!!p,"data-component":"sidebar-header",p:"27px 32px 32px"},b),i=null!=(i={children:[r("div",{"data-element":"sidebar-heading",id:l,children:a}),p]})?i:{},Object.getOwnPropertyDescriptors?Object.defineProperties(c,Object.getOwnPropertyDescriptors(i)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(i)).forEach((function(e){Object.defineProperty(c,e,Object.getOwnPropertyDescriptor(i,e))})),c))};o.displayName="SidebarHeader";export{o as default};

package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.style.js

@@ -1,35 +1 @@
-import styled, { css } from "styled-components";
-import { padding } from "styled-system";
-import { baseTheme } from "../../../../style/themes";
-import StyledIconButton from "../../../icon-button/icon-button.style";
-const StyledSidebarHeader = styled.div`
-  background-color: var(--colorsUtilityYang100);
-  box-shadow: inset 0 -1px 0 0 var(--colorsUtilityMajor100);
-  box-sizing: border-box;
-  width: 100%;
-  color: var(--colorsActionMinorYin090);
-  transition: all 0.2s ease;
-
-  ${padding}
-
-  ${({
-  hasClose
-}) => hasClose && css`
-      display: flex;
-      justify-content: space-between;
-
-      > ${StyledIconButton}:first-of-type {
-        position: absolute;
-        z-index: 1;
-        right: 25px;
-      }
-    `}
-
-    div[data-element="sidebar-heading"] {
-    width: 100%;
-  }
-`;
-StyledSidebarHeader.defaultProps = {
-  theme: baseTheme
-};
-export default StyledSidebarHeader;
+import e,{css as t}from"styled-components";import{padding as o}from"styled-system";import"../../../../style/themes/sage/index.js";import s from"../../../../style/themes/base/index.js";import"../../../../style/themes/none/index.js";import i from"../../../icon-button/icon-button.style.js";const r=e.div.withConfig({displayName:"sidebar-header.style__StyledSidebarHeader",componentId:"sc-192c151f-0"})(["background-color:var(--colorsUtilityYang100);box-shadow:inset 0 -1px 0 0 var(--colorsUtilityMajor100);box-sizing:border-box;width:100%;color:var(--colorsActionMinorYin090);transition:all 0.2s ease;"," ",' div[data-element="sidebar-heading"]{width:100%;}'],o,(({hasClose:e})=>e&&t(["display:flex;justify-content:space-between;> ",":first-of-type{position:absolute;z-index:1;right:25px;}"],i)));r.defaultProps={theme:s};export{r as default};

package/esm/components/sidebar/__internal__/sidebar.context.js

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

package/esm/components/sidebar/index.js

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

package/esm/components/sidebar/sidebar.component.js

@@ -1,111 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useRef } from "react";
-import Modal from "../modal";
-import { StyledSidebar, StyledSidebarContent } from "./sidebar.style";
-import IconButton from "../icon-button";
-import Icon from "../icon";
-import FocusTrap from "../../__internal__/focus-trap";
-import SidebarHeader from "./__internal__/sidebar-header";
-import createGuid from "../../__internal__/utils/helpers/guid";
-import useLocale from "../../hooks/__internal__/useLocale";
-import { filterStyledSystemPaddingProps } from "../../style/utils";
-import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
-import SidebarContext from "./__internal__/sidebar.context";
-
-// TODO FE-5408 will investigate why React.RefObject<T> produces a failed prop type when current = null
-
-export const Sidebar = /*#__PURE__*/React.forwardRef(({
-  "aria-describedby": ariaDescribedBy,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  "data-element": dataElement = "sidebar",
-  "data-role": dataRole,
-  open,
-  bespokeFocusTrap,
-  disableAutoFocus = false,
-  disableEscKey = false,
-  enableBackgroundUI = false,
-  header,
-  position = "right",
-  size = "medium",
-  children,
-  onCancel,
-  role = "dialog",
-  focusFirstElement,
-  focusableContainers,
-  focusableSelectors,
-  width,
-  headerPadding = {},
-  topModalOverride,
-  restoreFocusOnClose = true,
-  className,
-  ...rest
-}, ref) => {
-  const locale = useLocale();
-  const {
-    current: headerId
-  } = useRef(createGuid());
-  const sidebarRef = useRef(null);
-  const setRefs = useCallback(reference => {
-    sidebarRef.current = reference;
-    if (!ref) return;
-    if (typeof ref === "object") ref.current = reference;
-    if (typeof ref === "function") ref(reference);
-  }, [ref]);
-  const isTopModal = useModalAria(sidebarRef);
-  const closeIcon = () => {
-    if (!onCancel) return null;
-    return /*#__PURE__*/React.createElement(IconButton, {
-      "aria-label": locale.sidebar.ariaLabels.close(),
-      onClick: onCancel,
-      "data-element": "close"
-    }, /*#__PURE__*/React.createElement(Icon, {
-      type: "close"
-    }));
-  };
-  const sidebar = /*#__PURE__*/React.createElement(StyledSidebar, {
-    "aria-modal": !enableBackgroundUI && isTopModal,
-    "aria-describedby": ariaDescribedBy,
-    "aria-label": ariaLabel,
-    "aria-labelledby": !ariaLabelledBy && !ariaLabel ? headerId : ariaLabelledBy,
-    "data-component": "sidebar",
-    "data-element": dataElement,
-    "data-role": dataRole,
-    ref: setRefs,
-    position: position,
-    size: size,
-    onCancel: onCancel,
-    role: role,
-    width: width,
-    className: className
-  }, header && /*#__PURE__*/React.createElement(SidebarHeader, _extends({
-    closeIcon: closeIcon()
-  }, headerPadding, {
-    id: headerId
-  }), header), !header && closeIcon(), /*#__PURE__*/React.createElement(StyledSidebarContent, _extends({
-    "data-element": "sidebar-content",
-    "data-role": "sidebar-content"
-  }, filterStyledSystemPaddingProps(rest)), /*#__PURE__*/React.createElement(SidebarContext.Provider, {
-    value: {
-      isInSidebar: true
-    }
-  }, children)));
-  return /*#__PURE__*/React.createElement(Modal, {
-    open: open,
-    onCancel: onCancel,
-    disableEscKey: disableEscKey,
-    enableBackgroundUI: enableBackgroundUI,
-    topModalOverride: topModalOverride,
-    restoreFocusOnClose: restoreFocusOnClose
-  }, enableBackgroundUI ? sidebar : /*#__PURE__*/React.createElement(FocusTrap, {
-    wrapperRef: sidebarRef,
-    isOpen: open,
-    additionalWrapperRefs: focusableContainers,
-    focusableSelectors: focusableSelectors,
-    focusFirstElement: focusFirstElement,
-    autoFocus: !disableAutoFocus,
-    bespokeTrap: bespokeFocusTrap
-  }, sidebar));
-});
-Sidebar.displayName = "Sidebar";
-export default Sidebar;
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import o,{useRef as t,useCallback as a}from"react";import n from"../modal/modal.component.js";import{StyledSidebar as i,StyledSidebarContent as l}from"./sidebar.style.js";import s from"../icon-button/icon-button.component.js";import c from"../icon/icon.component.js";import d from"../../__internal__/focus-trap/focus-trap.component.js";import b from"./__internal__/sidebar-header/sidebar-header.component.js";import p from"../../__internal__/utils/helpers/guid/index.js";import u from"../../hooks/__internal__/useLocale/useLocale.js";import f from"../../style/utils/filter-styled-system-padding-props.js";import m from"../../hooks/__internal__/useModalAria/useModalAria.js";import y from"./__internal__/sidebar.context.js";function O(e,r,o){return r in e?Object.defineProperty(e,r,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[r]=o,e}function j(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){O(e,r,o[r])}))}return e}function h(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r.push.apply(r,o)}return r}(Object(r)).forEach((function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(r,o))})),e}const _=o.forwardRef(((o,O)=>{var{"aria-describedby":_,"aria-label":g,"aria-labelledby":w,"data-element":P="sidebar","data-role":v,open:k,bespokeFocusTrap:F,disableAutoFocus:S=!1,disableEscKey:C=!1,enableBackgroundUI:E=!1,header:x,position:I="right",size:M="medium",children:A,onCancel:D,role:N="dialog",focusFirstElement:z,focusableContainers:B,focusableSelectors:K,width:L,headerPadding:R={},topModalOverride:T,restoreFocusOnClose:U=!0,className:W}=o,q=function(e,r){if(null==e)return{};var o,t,a=function(e,r){if(null==e)return{};var o,t,a={},n=Object.keys(e);for(t=0;t<n.length;t++)o=n[t],r.indexOf(o)>=0||(a[o]=e[o]);return a}(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)&&(a[o]=e[o])}return a}(o,["aria-describedby","aria-label","aria-labelledby","data-element","data-role","open","bespokeFocusTrap","disableAutoFocus","disableEscKey","enableBackgroundUI","header","position","size","children","onCancel","role","focusFirstElement","focusableContainers","focusableSelectors","width","headerPadding","topModalOverride","restoreFocusOnClose","className"]);const G=u(),{current:H}=t(p()),J=t(null),Q=a((e=>{J.current=e,O&&("object"==typeof O&&(O.current=e),"function"==typeof O&&O(e))}),[O]),V=m(J),X=()=>D?r(s,{"aria-label":G.sidebar.ariaLabels.close(),onClick:D,"data-element":"close",children:r(c,{type:"close"})}):null,Y=e(i,{"aria-modal":!E&&V,"aria-describedby":_,"aria-label":g,"aria-labelledby":w||g?w:H,"data-component":"sidebar","data-element":P,"data-role":v,ref:Q,position:I,size:M,onCancel:D,role:N,width:L,className:W,children:[x&&r(b,h(j({closeIcon:X()},R),{id:H,children:x})),!x&&X(),r(l,h(j({"data-element":"sidebar-content","data-role":"sidebar-content"},f(q)),{children:r(y.Provider,{value:{isInSidebar:!0},children:A})}))]});return r(n,{open:k,onCancel:D,disableEscKey:C,enableBackgroundUI:E,topModalOverride:T,restoreFocusOnClose:U,children:E?Y:r(d,{wrapperRef:J,isOpen:k,additionalWrapperRefs:B,focusableSelectors:K,focusFirstElement:z,autoFocus:!S,bespokeTrap:F,children:Y})})}));_.displayName="Sidebar";export{_ as Sidebar,_ as default};

package/esm/components/sidebar/sidebar.config.js

@@ -1,11 +1 @@
-export const SIDEBAR_SIZES_CSS = {
-  "extra-small": "214px",
-  small: "314px",
-  "medium-small": "414px",
-  medium: "514px",
-  "medium-large": "614px",
-  large: "714px",
-  "extra-large": "814px"
-};
-export const SIDEBAR_SIZES = ["extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"];
-export const SIDEBAR_ALIGNMENTS = ["left", "right"];
+const l={"extra-small":"214px",small:"314px","medium-small":"414px",medium:"514px","medium-large":"614px",large:"714px","extra-large":"814px"},e=["extra-small","small","medium-small","medium","medium-large","large","extra-large"],m=["left","right"];export{m as SIDEBAR_ALIGNMENTS,e as SIDEBAR_SIZES,l as SIDEBAR_SIZES_CSS};

package/esm/components/sidebar/sidebar.style.js

@@ -1,79 +1 @@
-import styled, { css } from "styled-components";
-import { padding as paddingFn } from "styled-system";
-import computeSizing from "../../style/utils/element-sizing";
-import baseTheme from "../../style/themes/base";
-import StyledIconButton from "../icon-button/icon-button.style";
-import { SIDEBAR_SIZES_CSS } from "./sidebar.config";
-import { StyledForm, StyledFormContent } from "../form/form.style";
-const StyledSidebar = styled.div`
-  // prevents outline being added in safari
-  :focus {
-    outline: none;
-  }
-
-  ${({
-  onCancel,
-  position,
-  size,
-  theme,
-  width
-}) => css`
-    background: var(--colorsUtilityMajor025);
-    border-radius: 1px;
-    bottom: 0;
-    position: fixed;
-    display: flex;
-    flex-direction: column;
-    top: 0;
-    z-index: ${theme.zIndex.fullScreenModal};
-    max-width: 100vw;
-
-    ${!width && size && css`
-      width: ${SIDEBAR_SIZES_CSS[size]};
-    `}
-    ${width && computeSizing({
-  width
-})}
-
-    ${position && css`
-      box-shadow: var(--boxShadow300);
-      ${position}: 0;
-    `}
-
-    ${onCancel && css`
-      > ${StyledIconButton}:first-of-type {
-        position: absolute;
-        z-index: 1;
-        right: 25px;
-        top: 25px;
-      }
-    `}
-  `}
-`;
-const StyledSidebarContent = styled.div`
-  box-sizing: border-box;
-  display: block;
-  overflow-y: auto;
-  flex-grow: 1;
-
-  padding: var(--spacing300) var(--spacing400) var(--spacing400);
-  ${paddingFn}
-
-  &:has(${StyledForm}.sticky) {
-    display: flex;
-    flex-direction: column;
-    overflow-y: hidden;
-    padding: 0;
-
-    ${StyledForm}.sticky {
-      ${StyledFormContent} {
-        padding: var(--spacing300) var(--spacing400) var(--spacing400);
-        ${paddingFn}
-      }
-    }
-  }
-`;
-StyledSidebar.defaultProps = {
-  theme: baseTheme
-};
-export { StyledSidebar, StyledSidebarContent };
+import o,{css as i}from"styled-components";import{padding as e}from"styled-system";import t from"../../style/utils/element-sizing.js";import s from"../../style/themes/base/index.js";import n from"../icon-button/icon-button.style.js";import{SIDEBAR_SIZES_CSS as r}from"./sidebar.config.js";import{StyledForm as d,StyledFormContent as a}from"../form/form.style.js";const l=o.div.withConfig({displayName:"sidebar.style__StyledSidebar",componentId:"sc-ecf3e9f9-0"})([":focus{outline:none;}",""],(({onCancel:o,position:e,size:s,theme:d,width:a})=>i(["background:var(--colorsUtilityMajor025);border-radius:1px;bottom:0;position:fixed;display:flex;flex-direction:column;top:0;z-index:",";max-width:100vw;"," "," "," ",""],d.zIndex.fullScreenModal,!a&&s&&i(["width:",";"],r[s]),a&&t({width:a}),e&&i(["box-shadow:var(--boxShadow300);",":0;"],e),o&&i(["> ",":first-of-type{position:absolute;z-index:1;right:25px;top:25px;}"],n)))),p=o.div.withConfig({displayName:"sidebar.style__StyledSidebarContent",componentId:"sc-ecf3e9f9-1"})(["box-sizing:border-box;display:block;overflow-y:auto;flex-grow:1;padding:var(--spacing300) var(--spacing400) var(--spacing400);"," &:has(",".sticky){display:flex;flex-direction:column;overflow-y:hidden;padding:0;",".sticky{","{padding:var(--spacing300) var(--spacing400) var(--spacing400);","}}}"],e,d,d,a,e);l.defaultProps={theme:s};export{l as StyledSidebar,p as StyledSidebarContent};

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

@@ -1,2 +1 @@
-export { default as SimpleColorPicker } from "./simple-color-picker.component";
-export { default as SimpleColor } from "./simple-color";
+export{SimpleColorPicker}from"./simple-color-picker.component.js";export{SimpleColor}from"./simple-color/simple-color.component.js";

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

@@ -1 +1 @@
-export { default } from "./simple-color.component";
+export{SimpleColor as default}from"./simple-color.component.js";

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

@@ -1,44 +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, { useRef } from "react";
-import guid from "../../../__internal__/utils/helpers/guid";
-import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
-import { StyledSimpleColor, StyledColorSampleBox, StyledTickIcon, StyledSimpleColorInput } from "./simple-color.style";
-export const SimpleColor = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    onChange,
-    onBlur,
-    onMouseDown,
-    value,
-    name,
-    checked = false,
-    id,
-    defaultChecked,
-    className,
-    ...rest
-  } = props;
-  const {
-    current: inputId
-  } = useRef(id || guid());
-  return /*#__PURE__*/React.createElement(StyledSimpleColor, _extends({
-    className: className
-  }, tagComponent("simple-color", props)), /*#__PURE__*/React.createElement(StyledSimpleColorInput, _extends({
-    onChange: onChange,
-    onBlur: onBlur,
-    onMouseDown: onMouseDown,
-    checked: checked,
-    name: name,
-    type: "radio",
-    role: "radio",
-    value: value,
-    ref: ref,
-    id: inputId,
-    defaultChecked: defaultChecked
-  }, rest)), /*#__PURE__*/React.createElement(StyledColorSampleBox, {
-    color: value
-  }, checked && /*#__PURE__*/React.createElement(StyledTickIcon, {
-    color: value,
-    type: "tick"
-  })));
-});
-SimpleColor.displayName = "SimpleColor";
-export default SimpleColor;
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import t,{useRef as o}from"react";import n from"../../../__internal__/utils/helpers/guid/index.js";import c from"../../../__internal__/utils/helpers/tags/tags.js";import{StyledSimpleColor as l,StyledSimpleColorInput as i,StyledColorSampleBox as a,StyledTickIcon as u}from"./simple-color.style.js";function s(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function p(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){s(e,r,t[r])}))}return e}const f=t.forwardRef(((t,s)=>{const{onChange:f,onBlur:m,onMouseDown:O,value:b,name:y,checked:d=!1,id:j,defaultChecked:g,className:h}=t,w=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},c=Object.keys(e);for(o=0;o<c.length;o++)t=c[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(o=0;o<c.length;o++)t=c[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(t,["onChange","onBlur","onMouseDown","value","name","checked","id","defaultChecked","className"]),{current:P}=o(j||n());return e(l,(v=p({className:h},c("simple-color",t)),k=null!=(k={children:[r(i,p({onChange:f,onBlur:m,onMouseDown:O,checked:d,name:y,type:"radio",role:"radio",value:b,ref:s,id:P,defaultChecked:g},w)),r(a,{color:b,children:d&&r(u,{color:b,type:"tick"})})]})?k:{},Object.getOwnPropertyDescriptors?Object.defineProperties(v,Object.getOwnPropertyDescriptors(k)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(k)).forEach((function(e){Object.defineProperty(v,e,Object.getOwnPropertyDescriptor(k,e))})),v));var v,k}));f.displayName="SimpleColor";export{f as SimpleColor,f as default};

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

@@ -1,82 +1 @@
-import styled, { css } from "styled-components";
-import { Input } from "../../../__internal__/input";
-import checkerBoardSvg from "./checker-board.svg";
-import Icon from "../../icon";
-import getRgbValues from "../../../style/utils/get-rgb-values";
-import addFocusStyling from "../../../style/utils/add-focus-styling";
-export const StyledSimpleColor = styled.div`
-  width: var(--sizing700);
-  height: var(--sizing700);
-  margin-right: 2px;
-  margin-bottom: 2px;
-
-  &:hover {
-    cursor: pointer;
-  }
-`;
-export const StyledColorSampleBox = styled.div`
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  ${({
-  color
-}) => color !== "transparent" && css`
-      background-color: ${color};
-    `}
-
-  ${({
-  color
-}) => color === "transparent" && css`
-      background-color: #eeeeee;
-      background-image: url(${checkerBoardSvg});
-      background-size: 14px 14px;
-      background-position: -2px -2px;
-    `}
-`;
-export const StyledSimpleColorInput = styled(Input)`
-  position: absolute;
-  opacity: 0;
-  height: var(--sizing700);
-  width: var(--sizing700);
-  margin: 0;
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  &:disabled:hover {
-    cursor: not-allowed;
-  }
-
-  &:focus + ${StyledColorSampleBox} {
-    ${addFocusStyling(true)}
-  }
-`;
-const getIconColor = color => {
-  const rgbValues = getRgbValues(color);
-  const [r, g, b] = rgbValues;
-  // color contrast calculating formula as per W3 suggestions
-  const redMultiplier = 299,
-    greenMultiplier = 587,
-    blueMultiplier = 114;
-  const contrast = (Math.round(r * redMultiplier) + Math.round(g * greenMultiplier) + Math.round(b * blueMultiplier)) / 1000;
-  if (contrast < 128) return "var(--colorsUtilityYang100)";
-  return "var(--colorsUtilityYin090)";
-};
-export const StyledTickIcon = styled(Icon)`
-  height: 20px;
-  width: 20px;
-  pointer-events: none;
-  display: block;
-
-  &::before {
-    font-size: 20px;
-    color: ${({
-  color
-}) => getIconColor(color)};
-  }
-`;
+import o,{css as t}from"styled-components";import i from"../../../__internal__/input/input.component.js";import"react/jsx-runtime";import"react";import"../../../__internal__/input/input-presentation.style.js";import"../../carbon-provider/__internal__/new-validation.context.js";import e from"./checker-board.svg";import r from"../../icon/icon.component.js";import n from"../../../style/utils/get-rgb-values.js";import s from"../../../style/utils/add-focus-styling.js";const l=o.div.withConfig({displayName:"simple-color.style__StyledSimpleColor",componentId:"sc-88573bbe-0"})(["width:var(--sizing700);height:var(--sizing700);margin-right:2px;margin-bottom:2px;&:hover{cursor:pointer;}"]),p=o.div.withConfig({displayName:"simple-color.style__StyledColorSampleBox",componentId:"sc-88573bbe-1"})(["height:100%;width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;"," ",""],(({color:o})=>"transparent"!==o&&t(["background-color:",";"],o)),(({color:o})=>"transparent"===o&&t(["background-color:#eeeeee;background-image:url(",");background-size:14px 14px;background-position:-2px -2px;"],e))),a=o(i).withConfig({displayName:"simple-color.style__StyledSimpleColorInput",componentId:"sc-88573bbe-2"})(["position:absolute;opacity:0;height:var(--sizing700);width:var(--sizing700);margin:0;&:hover{cursor:pointer;}&:disabled:hover{cursor:not-allowed;}&:focus + ","{","}"],p,s(!0)),c=o(r).withConfig({displayName:"simple-color.style__StyledTickIcon",componentId:"sc-88573bbe-3"})(["height:20px;width:20px;pointer-events:none;display:block;&::before{font-size:20px;color:",";}"],(({color:o})=>(o=>{const t=n(o),[i,e,r]=t;return(Math.round(299*i)+Math.round(587*e)+Math.round(114*r))/1e3<128?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)"})(o)));export{p as StyledColorSampleBox,l as StyledSimpleColor,a as StyledSimpleColorInput,c as StyledTickIcon};