carbon-react 154.3.2 → 154.4.0-beta.0

package/esm/components/date/__internal__/date-picker/date-picker.component.js

@@ -1,204 +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 { flip, offset } from "@floating-ui/dom";
-import React, { useCallback, useEffect, useMemo, useRef, useState, useContext } from "react";
-import { DayPicker, defaultLocale } from "react-day-picker";
-import useLocale from "../../../../hooks/__internal__/useLocale";
-import Popover from "../../../../__internal__/popover";
-import Navbar from "../navbar";
-import Weekday from "../weekday";
-import { getDisabledDays } from "../utils";
-import { defaultFocusableSelectors } from "../../../../__internal__/focus-trap/focus-trap-utils";
-import Events from "../../../../__internal__/utils/helpers/events";
-import FlatTableContext from "../../../flat-table/__internal__/flat-table.context";
-import StyledDayPicker from "./day-picker.style";
-const popoverMiddleware = [offset(3), flip({
-  fallbackStrategy: "initialPlacement"
-})];
-const Nav = Navbar;
-export const DatePicker = ({
-  inputElement,
-  minDate,
-  maxDate,
-  selectedDays,
-  disablePortal,
-  onDayClick,
-  pickerMouseDown,
-  pickerProps,
-  open,
-  setOpen,
-  pickerTabGuardId,
-  onPickerClose,
-  ariaLabel: datePickerAriaLabel,
-  ariaLabelledBy: datePickerAriaLabelledBy
-}) => {
-  const [focusedMonth, setFocusedMonth] = useState(selectedDays || new Date());
-  const locale = useLocale();
-  const {
-    localize,
-    options
-  } = locale.date.dateFnsLocale();
-  const {
-    weekStartsOn
-  } = options || /* istanbul ignore next */{};
-  const weekdaysLong = useMemo(() => Array.from({
-    length: 7
-  }).map((_, i) => localize?.day(i)), [localize]);
-  const weekdaysShort = useMemo(() => {
-    const isGivenLocale = str => locale.locale().includes(str);
-    return Array.from({
-      length: 7
-    }).map((_, i) => localize?.day(i, ["de", "pl"].some(isGivenLocale) ? {
-      width: "wide"
-    } : {
-      width: "abbreviated"
-    }).substring(0, isGivenLocale("de") ? 2 : 3));
-  }, [locale, localize]);
-  const ref = useRef(null);
-  const handleDayClick = (date, e) => {
-    /* istanbul ignore else */
-    if (date) onDayClick?.(date, e);
-    onPickerClose?.();
-  };
-  const handleKeyUp = useCallback(ev => {
-    /* istanbul ignore else */
-    if (open && Events.isEscKey(ev)) {
-      setFocusedMonth(selectedDays);
-      inputElement.current?.querySelector("input")?.focus();
-      setOpen(false);
-      onPickerClose?.();
-      ev.stopPropagation();
-    }
-  }, [inputElement, onPickerClose, open, selectedDays, setOpen]);
-  const handleOnKeyDown = ev => {
-    /* istanbul ignore else */
-    if (ref.current?.querySelector(".rdp-nav button") === document.activeElement && Events.isTabKey(ev) && Events.isShiftKey(ev)) {
-      ev.preventDefault();
-      setOpen(false);
-      onPickerClose?.();
-      inputElement.current?.querySelector("input")?.focus();
-    }
-  };
-  const handleOnDayKeyDown = (_day, _modifiers, ev) => {
-    // timeout added to prevent this handler from interfering with the useFocusPortalContent hook, when the date-range
-    // is used inside of a popover-container and it is the last focusable element of the popover-container
-    setTimeout(() => {
-      // we need to manually handle this as the picker may be in a Portal
-      /* istanbul ignore else */
-      if (Events.isTabKey(ev) && !Events.isShiftKey(ev)) {
-        ev.preventDefault();
-        setOpen(false);
-        onPickerClose?.();
-        const input = inputElement.current?.querySelector("input");
-
-        /* istanbul ignore else */
-        if (input) {
-          const elements = Array.from(document.querySelectorAll(defaultFocusableSelectors) || /* istanbul ignore next */[]);
-          const elementsInPicker = Array.from(ref.current?.querySelectorAll("button, [tabindex]") || /* istanbul ignore next */[]);
-          const filteredElements = elements.filter(el => Number(el.tabIndex) !== -1 && !elementsInPicker.includes(el));
-          const nextIndex = filteredElements.indexOf(input) + 1;
-          filteredElements[nextIndex]?.focus();
-        }
-      }
-    }, 0);
-  };
-  const {
-    isInFlatTable,
-    setHasOpenDatePicker
-  } = useContext(FlatTableContext);
-  useEffect(() => {
-    setHasOpenDatePicker?.(!!open);
-  }, [open, setHasOpenDatePicker]);
-  useEffect(() => {
-    if (selectedDays) {
-      setFocusedMonth(selectedDays);
-    }
-  }, [selectedDays]);
-  useEffect(() => {
-    if (!open && selectedDays) {
-      const fMonth = focusedMonth?.getMonth();
-      const sMonth = selectedDays?.getMonth();
-      if (fMonth !== sMonth) setFocusedMonth(selectedDays);
-    }
-  }, [focusedMonth, open, selectedDays]);
-  if (!open) {
-    return null;
-  }
-  const handleTabGuardFocus = () => {
-    ref.current?.querySelector("button")?.focus();
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popover, {
-    placement: "bottom-start",
-    reference: inputElement,
-    middleware: popoverMiddleware,
-    disablePortal: disablePortal,
-    disableBackgroundUI: isInFlatTable
-  }, /*#__PURE__*/React.createElement(StyledDayPicker, {
-    id: "styled-day-picker",
-    "data-role": "date-picker",
-    ref: ref,
-    onMouseDown: pickerMouseDown,
-    onKeyUp: handleKeyUp,
-    onKeyDown: handleOnKeyDown,
-    role: "region",
-    "aria-label": datePickerAriaLabel,
-    "aria-labelledby": datePickerAriaLabelledBy
-  }, /*#__PURE__*/React.createElement("div", {
-    id: pickerTabGuardId
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-    ,
-    tabIndex: 0,
-    onFocus: handleTabGuardFocus
-  }), /*#__PURE__*/React.createElement(DayPicker, _extends({
-    formatters: {
-      formatCaption: month => `${localize?.month(month.getMonth())} ${month.getFullYear()}`
-    },
-    required: false,
-    weekStartsOn: weekStartsOn,
-    onMonthChange: setFocusedMonth,
-    disabled: getDisabledDays(minDate, maxDate),
-    locale: {
-      localize: {
-        ...defaultLocale.localize
-      }
-    },
-    selected: selectedDays,
-    month: focusedMonth || /* istanbul ignore next */new Date(),
-    onDayClick: (d, _, e) => {
-      const date = d;
-      handleDayClick(date, e);
-    },
-    components: {
-      Nav,
-      Weekday: props => {
-        const fixedDays = {
-          Sunday: 0,
-          Monday: 1,
-          Tuesday: 2,
-          Wednesday: 3,
-          Thursday: 4,
-          Friday: 5,
-          Saturday: 6
-        };
-        const {
-          className,
-          "aria-label": ariaLabel
-        } = props;
-        const dayIndex = fixedDays[ariaLabel];
-        return /*#__PURE__*/React.createElement(Weekday, {
-          className: className,
-          title: weekdaysLong[dayIndex]
-        }, weekdaysShort[dayIndex]);
-      }
-    },
-    fixedWeeks: true,
-    defaultMonth: selectedDays || undefined,
-    onDayKeyDown: (date, modifiers, e) => {
-      handleOnDayKeyDown(date, modifiers, e);
-    }
-  }, pickerProps, {
-    showOutsideDays: true,
-    mode: "single"
-  })))));
-};
-DatePicker.displayName = "DatePicker";
-export default DatePicker;
+import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import{offset as o,flip as n}from"@floating-ui/dom";import{useState as l,useMemo as a,useRef as i,useCallback as c,useContext as u,useEffect as s}from"react";import{DayPicker as d,defaultLocale as p}from"react-day-picker";import m from"../../../../hooks/__internal__/useLocale/useLocale.js";import y from"../../../../__internal__/popover/popover.component.js";import{Navbar as f}from"../navbar/navbar.component.js";import{Weekday as b}from"../weekday/weekday.component.js";import{getDisabledDays as v}from"../utils.js";import{defaultFocusableSelectors as O}from"../../../../__internal__/focus-trap/focus-trap-utils.js";import h from"../../../../__internal__/utils/helpers/events/events.js";import g from"../../../flat-table/__internal__/flat-table.context.js";import j from"./day-picker.style.js";function w(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function k(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){w(e,t,r[t])}))}return e}const D=[o(3),n({fallbackStrategy:"initialPlacement"})],_=f,P=({inputElement:o,minDate:n,maxDate:f,selectedDays:w,disablePortal:P,onDayClick:S,pickerMouseDown:x,pickerProps:q,open:K,setOpen:M,pickerTabGuardId:T,onPickerClose:A,ariaLabel:C,ariaLabelledBy:E})=>{const[F,I]=l(w||new Date),L=m(),{localize:N,options:z}=L.date.dateFnsLocale(),{weekStartsOn:W}=z||{},B=a((()=>Array.from({length:7}).map(((e,t)=>null==N?void 0:N.day(t)))),[N]),U=a((()=>{const e=e=>L.locale().includes(e);return Array.from({length:7}).map(((t,r)=>null==N?void 0:N.day(r,["de","pl"].some(e)?{width:"wide"}:{width:"abbreviated"}).substring(0,e("de")?2:3)))}),[L,N]),$=i(null),G=c((e=>{var t,r;K&&h.isEscKey(e)&&(I(w),null===(r=o.current)||void 0===r||null===(t=r.querySelector("input"))||void 0===t||t.focus(),M(!1),null==A||A(),e.stopPropagation())}),[o,A,K,w,M]),{isInFlatTable:H,setHasOpenDatePicker:Y}=u(g);return s((()=>{null==Y||Y(!!K)}),[K,Y]),s((()=>{w&&I(w)}),[w]),s((()=>{!K&&w&&(null==F?void 0:F.getMonth())!==(null==w?void 0:w.getMonth())&&I(w)}),[F,K,w]),K?e(t,{children:e(y,{placement:"bottom-start",reference:o,middleware:D,disablePortal:P,disableBackgroundUI:H,children:r(j,{id:"styled-day-picker","data-role":"date-picker",ref:$,onMouseDown:x,onKeyUp:G,onKeyDown:e=>{var t,r,n;(null===(t=$.current)||void 0===t?void 0:t.querySelector(".rdp-nav button"))===document.activeElement&&h.isTabKey(e)&&h.isShiftKey(e)&&(e.preventDefault(),M(!1),null==A||A(),null===(n=o.current)||void 0===n||null===(r=n.querySelector("input"))||void 0===r||r.focus())},role:"region","aria-label":C,"aria-labelledby":E,children:[e("div",{id:T,tabIndex:0,onFocus:()=>{var e,t;null===(t=$.current)||void 0===t||null===(e=t.querySelector("button"))||void 0===e||e.focus()}}),e(d,(J=k({formatters:{formatCaption:e=>`${null==N?void 0:N.month(e.getMonth())} ${e.getFullYear()}`},required:!1,weekStartsOn:W,onMonthChange:I,disabled:v(n,f),locale:{localize:k({},p.localize)},selected:w,month:F||new Date,onDayClick:(e,t,r)=>{((e,t)=>{e&&(null==S||S(e,t)),null==A||A()})(e,r)},components:{Nav:_,Weekday:t=>{const{className:r,"aria-label":o}=t,n={Sunday:0,Monday:1,Tuesday:2,Wednesday:3,Thursday:4,Friday:5,Saturday:6}[o];return e(b,{className:r,title:B[n],children:U[n]})}},fixedWeeks:!0,defaultMonth:w||void 0,onDayKeyDown:(e,t,r)=>{var n;n=r,setTimeout((()=>{if(h.isTabKey(n)&&!h.isShiftKey(n)){var e;n.preventDefault(),M(!1),null==A||A();const l=null===(e=o.current)||void 0===e?void 0:e.querySelector("input");if(l){var t,r;const e=Array.from(document.querySelectorAll(O)||[]),o=Array.from((null===(t=$.current)||void 0===t?void 0:t.querySelectorAll("button, [tabindex]"))||[]),n=e.filter((e=>-1!==Number(e.tabIndex)&&!o.includes(e))),a=n.indexOf(l)+1;null===(r=n[a])||void 0===r||r.focus()}}}),0)}},q),Q={showOutsideDays:!0,mode:"single"},Q=null!=Q?Q:{},Object.getOwnPropertyDescriptors?Object.defineProperties(J,Object.getOwnPropertyDescriptors(Q)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(Q)).forEach((function(e){Object.defineProperty(J,e,Object.getOwnPropertyDescriptor(Q,e))})),J))]})})}):null;var J,Q};P.displayName="DatePicker";export{P as DatePicker,P as default};

package/esm/components/date/__internal__/date-picker/day-picker.style.js

@@ -1,462 +1 @@
-import styled, { css } from "styled-components";
-import baseTheme from "../../../../style/themes/base";
-import addFocusStyling from "../../../../style/utils/add-focus-styling";
-const officialReactDayPickerStyling = () => css`
-  /* Variables declaration */
-  /* prettier-ignore */
-  .rdp-root {
-    --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */
-    --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */
-
-    --rdp-day-height: 2.75rem; /* The height of the day cells. */
-    --rdp-day-width: 2.75rem; /* The width of the day cells. */
-
-    --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */
-    --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */
-    --rdp-day_button-height: var(--rdp-day-height); /* The height of the day cells. */
-    --rdp-day_button-width: var(--rdp-day-width); /* The width of the day cells. */
-
-    --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
-    --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */
-    --rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */
-    --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */
-
-    --rdp-dropdown-gap: 0.5rem;/* The gap between the dropdowns used in the month captons. */
-
-    --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */
-
-    --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */
-    --rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */
-    --rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */
-    --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */
-
-    --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */
-    --rdp-range_middle-foreground-color: white; /* The foregraound color for days in the middle of a range. */
-    --rdp-range_middle-color: inherit;/* The color of the range text. */
-
-    --rdp-range_start-color: white; /* The color of the range text. */
-    --rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%); /* Used for the background of the start of the selected range. */
-    --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */
-
-    --rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%); /* Used for the background of the end of the selected range. */
-    --rdp-range_end-color: white;/* The color of the range text. */
-    --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */
-
-    --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */
-    --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */
-
-    --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
-    --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
-    --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
-    --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */
-
-    --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
-    --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
-    --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */
-
-    --rdp-gradient-direction: 90deg;
-  }
-
-  .rdp-root[dir="rtl"] {
-    --rdp-gradient-direction: -90deg;
-  }
-
-  /* Root of the component. */
-  .rdp-root {
-    position: relative; /* Required to position the navigation toolbar. */
-    box-sizing: border-box;
-  }
-
-  .rdp-root * {
-    box-sizing: border-box;
-  }
-
-  .rdp-day {
-    width: var(--sizing500);
-    height: var(--sizing450);
-    text-align: center;
-  }
-
-  .rdp-day_button {
-    background: none;
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
-    font: inherit;
-    color: inherit;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    min-width: var(--sizing500);
-    height: var(--sizing450);
-    border: var(--rdp-day_button-border);
-    border-radius: var(--rdp-day_button-border-radius);
-  }
-
-  .rdp-day_button:disabled {
-    cursor: revert;
-  }
-
-  .rdp-day_button {
-    outline: none;
-  }
-
-  .rdp-caption_label {
-    z-index: 1;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    white-space: nowrap;
-    border: 0;
-  }
-
-  .rdp-button_next,
-  .rdp-button_previous {
-    border: none;
-    background: none;
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
-    font: inherit;
-    color: inherit;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    appearance: none;
-    width: var(--rdp-nav_button-width);
-    height: var(--rdp-nav_button-height);
-  }
-
-  .rdp-button_next:disabled,
-  .rdp-button_previous:disabled {
-    cursor: revert;
-    opacity: var(--rdp-nav_button-disabled-opacity);
-  }
-
-  .rdp-chevron {
-    display: inline-block;
-    fill: var(--rdp-accent-color);
-  }
-
-  .rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
-    transform: rotate(180deg);
-  }
-
-  .rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
-    transform: rotate(180deg);
-    transform-origin: 50%;
-  }
-
-  .rdp-dropdowns {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    gap: var(--rdp-dropdown-gap);
-  }
-  .rdp-dropdown {
-    z-index: 2;
-    /* Reset */
-    opacity: 0;
-    appearance: none;
-    position: absolute;
-    inset-block-start: 0;
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    cursor: inherit;
-    border: none;
-    line-height: inherit;
-  }
-
-  .rdp-dropdown_root {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-  }
-
-  .rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
-    opacity: var(--rdp-disabled-opacity);
-  }
-
-  .rdp-month_caption {
-    display: flex;
-    align-content: center;
-    height: var(--rdp-nav-height);
-    font-weight: bold;
-    font-size: large;
-  }
-
-  .rdp-months {
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--rdp-months-gap);
-    max-width: fit-content;
-  }
-
-  .rdp-month_grid {
-    border-collapse: collapse;
-  }
-
-  .rdp-nav {
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-end: 0;
-    display: flex;
-    align-items: center;
-    height: var(--rdp-nav-height);
-    width: 100%;
-  }
-
-  .rdp-weekday {
-    opacity: var(--rdp-weekday-opacity);
-    padding: var(--rdp-weekday-padding);
-    font-weight: 500;
-    font-size: smaller;
-    text-align: var(--rdp-weekday-text-align);
-    text-transform: var(--rdp-weekday-text-transform);
-  }
-
-  .rdp-week_number {
-    opacity: var(--rdp-week_number-opacity);
-    font-weight: 400;
-    font-size: small;
-    height: var(--rdp-week_number-height);
-    width: var(--rdp-week_number-width);
-    border: var(--rdp-week_number-border);
-    border-radius: var(--rdp-week_number-border-radius);
-    text-align: var(--rdp-weeknumber-text-align);
-  }
-
-  /* DAY MODIFIERS */
-  .rdp-today:not(.rdp-outside) {
-    color: var(--rdp-today-color);
-  }
-
-  .rdp-selected {
-    font-weight: bold;
-    font-size: large;
-  }
-
-  .rdp-selected .rdp-day_button {
-    border: var(--rdp-selected-border);
-  }
-
-  .rdp-outside {
-    opacity: var(--rdp-outside-opacity);
-  }
-
-  .rdp-disabled {
-    opacity: var(--rdp-disabled-opacity);
-  }
-
-  .rdp-hidden {
-    visibility: hidden;
-    color: var(--rdp-range_start-color);
-  }
-
-  .rdp-range_start {
-    background: var(--rdp-range_start-background);
-  }
-
-  .rdp-range_start .rdp-day_button {
-    background-color: var(--rdp-range_start-date-background-color);
-    color: var(--rdp-range_start-color);
-  }
-
-  .rdp-range_middle {
-    background-color: var(--rdp-range_middle-background-color);
-  }
-
-  .rdp-range_middle .rdp-day_button {
-    border-color: transparent;
-    border: unset;
-    border-radius: unset;
-    color: var(--rdp-range_middle-color);
-  }
-
-  .rdp-range_end {
-    background: var(--rdp-range_end-background);
-    color: var(--rdp-range_end-color);
-  }
-
-  .rdp-range_end .rdp-day_button {
-    color: var(--rdp-range_start-color);
-    background-color: var(--rdp-range_end-date-background-color);
-  }
-
-  .rdp-range_start.rdp-range_end {
-    background: revert;
-  }
-
-  .rdp-focusable {
-    cursor: pointer;
-  }
-`;
-const StyledDayPicker = styled.div`
-  ${officialReactDayPickerStyling}
-
-  .rdp-root {
-    z-index: 2000;
-    top: calc(100% + 1px);
-    left: 0;
-    background-color: var(--colorsUtilityYang100);
-    box-shadow: var(--boxShadow100);
-    display: block;
-    overflow: hidden;
-    padding: var(--spacing300);
-    text-align: center;
-    user-select: none;
-    border-radius: var(--borderRadius050);
-  }
-
-  .rdp-root * {
-    box-sizing: border-box;
-  }
-
-  .rdp-root:focus {
-    outline: none;
-  }
-
-  .rdp-root abbr[title] {
-    border: none;
-    cursor: initial;
-  }
-
-  .rdp-months {
-    padding: 0;
-  }
-
-  .rdp-month {
-    margin: 0 0 2px;
-  }
-
-  .rdp-month_grid,
-  .rdp_weeks {
-    width: 100%;
-    margin-top: 8px;
-  }
-
-  .rdp-month_caption {
-    color: var(--colorsActionMajorYin090);
-    line-height: var(--sizing500);
-    height: var(--sizing500);
-    font-size: 16px;
-    font-weight: 800;
-    display: block;
-
-    > div {
-      margin: 0 auto;
-      width: 80%;
-    }
-  }
-
-  .rdp-weekday {
-    border: medium;
-    width: var(--sizing500);
-    height: var(--sizing450);
-    font-weight: 800;
-    color: var(--colorsActionMinor500);
-    text-transform: uppercase;
-    font-size: 12px;
-    text-align: center;
-  }
-
-  .rdp-day {
-    min-width: var(--sizing500);
-    height: var(--sizing450);
-    padding: 0;
-    background-color: transparent;
-    cursor: pointer;
-    border: none;
-    font-weight: var(--fontWeights500);
-    font-size: var(--fontSizes100);
-    line-height: var(--lineHeights500);
-    border-radius: var(--borderRadius400);
-
-    &:hover {
-      background-color: var(--colorsActionMinor050);
-      color: var(--colorsActionMajorYin090);
-    }
-
-    + * {
-      border-left: 1px;
-    }
-
-    abbr {
-      text-decoration: none;
-    }
-  }
-
-  .rdp-today,
-  .rdp-today.rdp-outside {
-    color: var(--colorsActionMajorYin090);
-    background-color: var(--colorsActionMinor200);
-  }
-
-  .rdp-outside {
-    color: var(--colorsActionMajorYin055);
-    background-color: transparent;
-  }
-
-  .rdp-today:not(.rdp-outside) {
-    font-weight: var(--fontWeights500);
-    border-radius: var(--borderRadius400);
-    color: inherit;
-  }
-
-  .rdp-disabled,
-  .rdp-disabled:hover {
-    color: var(--colorsActionMajorYin030);
-    background-color: var(--colorsUtilityYang100);
-    cursor: default;
-
-    &.rdp-today {
-      background-color: var(--colorsActionMinor200);
-    }
-  }
-
-  .rdp-selected:not(.rdp-disabled):not(.rdp-outside) {
-    background-color: var(--colorsActionMajor500);
-    color: var(--colorsUtilityYang100);
-    border-radius: var(--borderRadius400);
-  }
-
-  .rdp-selected.rdp-disabled:not(.rdp-outside) {
-    background-color: var(--colorsActionMajor500);
-    color: var(--colorsUtilityYang100);
-  }
-
-  .rdp-selected {
-    &:focus-visible {
-      outline: none;
-    }
-  }
-
-  .rdp-selected .rdp-day_button {
-    border: none;
-    &:focus-visible {
-      outline: none;
-    }
-  }
-
-  .rdp-focused:not(.rdp-disabled):not(.rdp-outside) {
-    ${addFocusStyling(true)}
-    border-radius: var(--borderRadius400);
-  }
-
-  .rdp-day.rdp-selected {
-    &:focus {
-      ${addFocusStyling(true)}
-    }
-  }
-`;
-StyledDayPicker.defaultProps = {
-  theme: baseTheme
-};
-export default StyledDayPicker;
+import r,{css as o}from"styled-components";import d from"../../../../style/themes/base/index.js";import e from"../../../../style/utils/add-focus-styling.js";const t=r.div.withConfig({displayName:"day-picker.style__StyledDayPicker",componentId:"sc-9d8bf795-0"})([""," .rdp-root{z-index:2000;top:calc(100% + 1px);left:0;background-color:var(--colorsUtilityYang100);box-shadow:var(--boxShadow100);display:block;overflow:hidden;padding:var(--spacing300);text-align:center;user-select:none;border-radius:var(--borderRadius050);}.rdp-root *{box-sizing:border-box;}.rdp-root:focus{outline:none;}.rdp-root abbr[title]{border:none;cursor:initial;}.rdp-months{padding:0;}.rdp-month{margin:0 0 2px;}.rdp-month_grid,.rdp_weeks{width:100%;margin-top:8px;}.rdp-month_caption{color:var(--colorsActionMajorYin090);line-height:var(--sizing500);height:var(--sizing500);font-size:16px;font-weight:800;display:block;> div{margin:0 auto;width:80%;}}.rdp-weekday{border:medium;width:var(--sizing500);height:var(--sizing450);font-weight:800;color:var(--colorsActionMinor500);text-transform:uppercase;font-size:12px;text-align:center;}.rdp-day{min-width:var(--sizing500);height:var(--sizing450);padding:0;background-color:transparent;cursor:pointer;border:none;font-weight:var(--fontWeights500);font-size:var(--fontSizes100);line-height:var(--lineHeights500);border-radius:var(--borderRadius400);&:hover{background-color:var(--colorsActionMinor050);color:var(--colorsActionMajorYin090);}+ *{border-left:1px;}abbr{text-decoration:none;}}.rdp-today,.rdp-today.rdp-outside{color:var(--colorsActionMajorYin090);background-color:var(--colorsActionMinor200);}.rdp-outside{color:var(--colorsActionMajorYin055);background-color:transparent;}.rdp-today:not(.rdp-outside){font-weight:var(--fontWeights500);border-radius:var(--borderRadius400);color:inherit;}.rdp-disabled,.rdp-disabled:hover{color:var(--colorsActionMajorYin030);background-color:var(--colorsUtilityYang100);cursor:default;&.rdp-today{background-color:var(--colorsActionMinor200);}}.rdp-selected:not(.rdp-disabled):not(.rdp-outside){background-color:var(--colorsActionMajor500);color:var(--colorsUtilityYang100);border-radius:var(--borderRadius400);}.rdp-selected.rdp-disabled:not(.rdp-outside){background-color:var(--colorsActionMajor500);color:var(--colorsUtilityYang100);}.rdp-selected{&:focus-visible{outline:none;}}.rdp-selected .rdp-day_button{border:none;&:focus-visible{outline:none;}}.rdp-focused:not(.rdp-disabled):not(.rdp-outside){"," border-radius:var(--borderRadius400);}.rdp-day.rdp-selected{&:focus{","}}"],(()=>o(['.rdp-root{--rdp-accent-color:blue;--rdp-accent-background-color:#f0f0ff;--rdp-day-height:2.75rem;--rdp-day-width:2.75rem;--rdp-day_button-border-radius:100%;--rdp-day_button-border:2px solid transparent;--rdp-day_button-height:var(--rdp-day-height);--rdp-day_button-width:var(--rdp-day-width);--rdp-selected-border:2px solid var(--rdp-accent-color);--rdp-disabled-opacity:0.5;--rdp-outside-opacity:0.75;--rdp-today-color:var(--rdp-accent-color);--rdp-dropdown-gap:0.5rem;--rdp-months-gap:2rem;--rdp-nav_button-disabled-opacity:0.5;--rdp-nav_button-height:2.25rem;--rdp-nav_button-width:2.25rem;--rdp-nav-height:2.75rem;--rdp-range_middle-background-color:var(--rdp-accent-background-color);--rdp-range_middle-foreground-color:white;--rdp-range_middle-color:inherit;--rdp-range_start-color:white;--rdp-range_start-background:linear-gradient(var(--rdp-gradient-direction),transparent 50%,var(--rdp-range_middle-background-color) 50%);--rdp-range_start-date-background-color:var(--rdp-accent-color);--rdp-range_end-background:linear-gradient(var(--rdp-gradient-direction),var(--rdp-range_middle-background-color) 50%,transparent 50%);--rdp-range_end-color:white;--rdp-range_end-date-background-color:var(--rdp-accent-color);--rdp-week_number-border-radius:100%;--rdp-week_number-border:2px solid transparent;--rdp-week_number-height:var(--rdp-day-height);--rdp-week_number-opacity:0.75;--rdp-week_number-width:var(--rdp-day-width);--rdp-weeknumber-text-align:center;--rdp-weekday-opacity:0.75;--rdp-weekday-padding:0.5rem 0rem;--rdp-weekday-text-align:center;--rdp-gradient-direction:90deg;}.rdp-root[dir="rtl"]{--rdp-gradient-direction:-90deg;}.rdp-root{position:relative;box-sizing:border-box;}.rdp-root *{box-sizing:border-box;}.rdp-day{width:var(--sizing500);height:var(--sizing450);text-align:center;}.rdp-day_button{background:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;justify-content:center;align-items:center;display:flex;min-width:var(--sizing500);height:var(--sizing450);border:var(--rdp-day_button-border);border-radius:var(--rdp-day_button-border-radius);}.rdp-day_button:disabled{cursor:revert;}.rdp-day_button{outline:none;}.rdp-caption_label{z-index:1;position:relative;display:inline-flex;align-items:center;white-space:nowrap;border:0;}.rdp-button_next,.rdp-button_previous{border:none;background:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;-moz-appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;position:relative;appearance:none;width:var(--rdp-nav_button-width);height:var(--rdp-nav_button-height);}.rdp-button_next:disabled,.rdp-button_previous:disabled{cursor:revert;opacity:var(--rdp-nav_button-disabled-opacity);}.rdp-chevron{display:inline-block;fill:var(--rdp-accent-color);}.rdp-root[dir="rtl"] .rdp-nav .rdp-chevron{transform:rotate(180deg);}.rdp-root[dir="rtl"] .rdp-nav .rdp-chevron{transform:rotate(180deg);transform-origin:50%;}.rdp-dropdowns{position:relative;display:inline-flex;align-items:center;gap:var(--rdp-dropdown-gap);}.rdp-dropdown{z-index:2;opacity:0;appearance:none;position:absolute;inset-block-start:0;inset-block-end:0;inset-inline-start:0;width:100%;margin:0;padding:0;cursor:inherit;border:none;line-height:inherit;}.rdp-dropdown_root{position:relative;display:inline-flex;align-items:center;}.rdp-dropdown_root[data-disabled="true"] .rdp-chevron{opacity:var(--rdp-disabled-opacity);}.rdp-month_caption{display:flex;align-content:center;height:var(--rdp-nav-height);font-weight:bold;font-size:large;}.rdp-months{position:relative;display:flex;flex-wrap:wrap;gap:var(--rdp-months-gap);max-width:fit-content;}.rdp-month_grid{border-collapse:collapse;}.rdp-nav{position:absolute;inset-block-start:0;inset-inline-end:0;display:flex;align-items:center;height:var(--rdp-nav-height);width:100%;}.rdp-weekday{opacity:var(--rdp-weekday-opacity);padding:var(--rdp-weekday-padding);font-weight:500;font-size:smaller;text-align:var(--rdp-weekday-text-align);text-transform:var(--rdp-weekday-text-transform);}.rdp-week_number{opacity:var(--rdp-week_number-opacity);font-weight:400;font-size:small;height:var(--rdp-week_number-height);width:var(--rdp-week_number-width);border:var(--rdp-week_number-border);border-radius:var(--rdp-week_number-border-radius);text-align:var(--rdp-weeknumber-text-align);}.rdp-today:not(.rdp-outside){color:var(--rdp-today-color);}.rdp-selected{font-weight:bold;font-size:large;}.rdp-selected .rdp-day_button{border:var(--rdp-selected-border);}.rdp-outside{opacity:var(--rdp-outside-opacity);}.rdp-disabled{opacity:var(--rdp-disabled-opacity);}.rdp-hidden{visibility:hidden;color:var(--rdp-range_start-color);}.rdp-range_start{background:var(--rdp-range_start-background);}.rdp-range_start .rdp-day_button{background-color:var(--rdp-range_start-date-background-color);color:var(--rdp-range_start-color);}.rdp-range_middle{background-color:var(--rdp-range_middle-background-color);}.rdp-range_middle .rdp-day_button{border-color:transparent;border:unset;border-radius:unset;color:var(--rdp-range_middle-color);}.rdp-range_end{background:var(--rdp-range_end-background);color:var(--rdp-range_end-color);}.rdp-range_end .rdp-day_button{color:var(--rdp-range_start-color);background-color:var(--rdp-range_end-date-background-color);}.rdp-range_start.rdp-range_end{background:revert;}.rdp-focusable{cursor:pointer;}'])),e(!0),e(!0));t.defaultProps={theme:d};export{t as default};

package/esm/components/date/__internal__/date-picker/index.js

@@ -1 +1 @@
-export { default } from "./date-picker.component";
+export{DatePicker as default}from"./date-picker.component.js";