@activecollab/components 1.0.209 → 1.0.211

package/dist/cjs/components/Steppers/DateStepper/DateStepper.js

@@ -9,7 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _moment = _interopRequireDefault(require("moment"));
 var _moment2 = _interopRequireDefault(require("react-day-picker/moment"));
-var _Button = require("../../Button/Button");
 var _ArrowLeft = _interopRequireDefault(require("../../Icons/collection/ArrowLeft"));
 var _DatePicker = require("../../DatePicker");
 var _ClassNames = require("../../DatePicker/ClassNames");
@@ -241,7 +240,7 @@ var DateStepper = function DateStepper(_ref) {
   }, [isDisabled]);
   return /*#__PURE__*/_react.default.createElement(_Styles.StyledButtonGroup, {
     className: (0, _classnames.default)("c-date-stepper", className)
-  }, renderLeftRightButtons ? /*#__PURE__*/_react.default.createElement(_Button.Button, {
+  }, renderLeftRightButtons ? /*#__PURE__*/_react.default.createElement(_Styles.StyledControl, {
     type: "button",
     variant: "secondary",
     onClick: onLeftClickHandler,
@@ -275,7 +274,7 @@ var DateStepper = function DateStepper(_ref) {
     modifiers: modifiers,
     dateRequired: true,
     fixedWeeks: true
-  })) : /*#__PURE__*/_react.default.createElement(_Styles.StyledSpan, null, getDateFormatted)), renderLeftRightButtons ? /*#__PURE__*/_react.default.createElement(_Button.Button, {
+  })) : /*#__PURE__*/_react.default.createElement(_Styles.StyledSpan, null, getDateFormatted)), renderLeftRightButtons ? /*#__PURE__*/_react.default.createElement(_Styles.StyledControl, {
     type: "button",
     variant: "secondary",
     onClick: onRightClickHandler,

package/dist/cjs/components/Steppers/DateStepper/DateStepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateStepper.js","names":["DateStepper","step","formatCallback","onChange","from","to","onBack","onForward","minValue","maxValue","className","period","datePickerClass","withDatePicker","defaultMonth","Date","popperClassName","position","useState","moment","fromDate","setFromDate","toDate","setToDate","showDatePicker","setShowDatePicker","month","setMonth","getDatesByPeriod","useCallback","interval","date","add","clone","startOf","endOf","getDateFormatted","useMemo","actualYear","year","showWeekOrCustomDateFormat","start","end","format","startDate","endDate","quarter","onChangeCallback","amount","newFrom","newTo","onDatePickerChange","dates","fromDateTemp","toDateTemp","isAfterMaxDate","isSameOrBefore","isBeforeMinDate","isSameOrAfter","useEffect","onRightClickHandler","onLeftClickHandler","renderLeftRightButtons","handleShow","closeMenu","onMonthChange","m","dateStepperWidth","fromDay","toDay","range","minWidth","isDisabled","day","dayFormat","isBefore","isAfter","modifiers","customClassNames","disabled","nonWorkingDay","classNames","MomentLocaleUtils","displayName"],"sources":["../../../../../src/components/Steppers/DateStepper/DateStepper.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo, useState, useEffect } from \"react\";\nimport classNames from \"classnames\";\nimport moment, { Moment } from \"moment\";\nimport MomentLocaleUtils from \"react-day-picker/moment\";\nimport { Placement } from \"@popperjs/core\";\nimport { Button } from \"../../Button/Button\";\nimport ArrowLeftIcon from \"../../Icons/collection/ArrowLeft\";\nimport { DatePicker } from \"../../DatePicker\";\nimport { customClassNames } from \"../../DatePicker/ClassNames\";\nimport {\n  StyledButton,\n  StyledButtonGroup,\n  StyledDiv,\n  StyledMenu,\n  StyledSpan,\n} from \"./Styles\";\nimport { ArrowRightIcon } from \"../../Icons\";\n\ninterface IDateStepperProps {\n  /** One of the possible steps for this component */\n  step:\n    | \"daily\"\n    | \"weekly\"\n    | \"monthly\"\n    | \"quarterly\"\n    | \"yearly\"\n    | \"custom\"\n    | string;\n  /** Callback function that will be called after the changed range */\n  onChange?: (from: Date, to: Date) => void;\n  /** Start date of the range */\n  from: Date | string;\n  /** End date of the range */\n  to: Date | string;\n  /** Callback function that will format the text label */\n  formatCallback?: (from: string | Date, to: string | Date) => string;\n  /** Default month */\n  defaultMonth?: Date;\n  /** Callback function onBack */\n  onBack?: (from: Date, to: Date) => void;\n  /** Callback function onForward */\n  onForward?: (from: Date, to: Date) => void;\n  /** Min date */\n  minValue?: Date;\n  /** Max fate */\n  maxValue?: Date;\n  /** html class */\n  className?: string;\n  /** Period for calculating week (isoWeek) */\n  period?: \"week\" | \"isoWeek\";\n  /** Classes for datePicker */\n  datePickerClass?: string;\n  /** Show datePicker in the middle button */\n  withDatePicker?: boolean;\n  /** Popper class name*/\n  popperClassName?: string;\n  /** DatePicker menu position */\n  position?: Placement;\n}\n\n/**\n * This component allow you to select date range. It accepts two parameters \"from\" and \"to\" as valid format\n * onChange and onBack and onForward it will return \"from: Date\" and \"to: Date\" as function arguments\n */\nexport const DateStepper: FC<IDateStepperProps> = ({\n  step,\n  formatCallback,\n  onChange,\n  from,\n  to,\n  onBack,\n  onForward,\n  minValue,\n  maxValue,\n  className,\n  period = \"week\",\n  datePickerClass,\n  withDatePicker = true,\n  defaultMonth = new Date(),\n  popperClassName,\n  position = \"bottom\",\n}) => {\n  const [fromDate, setFromDate] = useState(moment(from));\n  const [toDate, setToDate] = useState(moment(to));\n  const [showDatePicker, setShowDatePicker] = useState(false);\n  const [month, setMonth] = useState(defaultMonth);\n\n  const getDatesByPeriod = useCallback(\n    (interval: number): Moment[] => {\n      const date = fromDate ? fromDate : moment();\n      if (step === \"daily\") {\n        date.add(interval, \"days\");\n        return [date, date.clone()];\n      } else if (step === \"weekly\") {\n        date.add(interval, \"weeks\");\n        return [date.clone().startOf(period), date.clone().endOf(period)];\n      } else if (step === \"monthly\") {\n        date.add(interval, \"months\");\n        return [date.clone().startOf(\"month\"), date.clone().endOf(\"month\")];\n      } else if (step === \"quarterly\") {\n        date.add(interval, \"quarters\");\n        return [date.clone().startOf(\"quarter\"), date.clone().endOf(\"quarter\")];\n      } else if (step === \"yearly\") {\n        date.add(interval, \"years\");\n        return [date.clone().startOf(\"year\"), date.clone().endOf(\"year\")];\n      }\n      return [date, date];\n    },\n    [fromDate, period, step]\n  );\n\n  const getDateFormatted = useMemo(() => {\n    if (formatCallback) {\n      return formatCallback(fromDate.toDate(), toDate.toDate());\n    }\n\n    const actualYear = moment().year();\n\n    const showWeekOrCustomDateFormat = (start, end): string => {\n      if (start.year() === actualYear && end.year() === actualYear) {\n        return start.format(\"MMM DD\") + \" - \" + end.format(\"MMM DD\");\n      } else {\n        return start.format(\"MMM DD YYYY\") + \" - \" + end.format(\"MMM DD YYYY\");\n      }\n    };\n\n    if (step === \"daily\") {\n      if (fromDate.year() === actualYear) {\n        return fromDate.format(\"MMM DD\");\n      }\n      return fromDate.format(\"MMM DD YYYY\");\n    } else if (step === \"weekly\") {\n      const startDate = fromDate.clone().startOf(period);\n      const endDate = startDate.clone().endOf(period);\n      return showWeekOrCustomDateFormat(startDate, endDate);\n    } else if (step === \"monthly\") {\n      return fromDate.format(\"MMM YYYY\");\n    } else if (step === \"quarterly\") {\n      return `Q${fromDate.quarter()}/${fromDate.format(\"YYYY\")}`;\n    } else if (step === \"yearly\") {\n      return fromDate.format(\"YYYY\");\n    } else if (step === \"custom\") {\n      return showWeekOrCustomDateFormat(fromDate, toDate);\n    }\n\n    return \"\";\n  }, [fromDate, step, toDate, formatCallback, period]);\n\n  const onChangeCallback = useCallback(\n    (amount: number) => {\n      const [newFrom, newTo] = getDatesByPeriod(amount);\n      setFromDate(moment(newFrom));\n      setToDate(moment(newTo));\n\n      if (onChange) {\n        onChange(newFrom.toDate(), newTo.toDate());\n      }\n    },\n    [onChange, getDatesByPeriod]\n  );\n\n  const onDatePickerChange = useCallback(\n    (dates?: { from: Date; to: Date }) => {\n      const fromDateTemp = dates?.from;\n      const toDateTemp = dates?.to;\n\n      setFromDate(moment(fromDateTemp));\n      setToDate(moment(toDateTemp));\n\n      if (\n        onChange &&\n        fromDateTemp instanceof Date &&\n        toDateTemp instanceof Date\n      ) {\n        onChange(fromDateTemp, toDateTemp);\n      }\n    },\n    [onChange, setFromDate, setToDate]\n  );\n\n  const isAfterMaxDate = useMemo(() => {\n    return (\n      maxValue instanceof Date &&\n      moment(moment(maxValue).format(\"YYYY-MM-DD\")).isSameOrBefore(\n        toDate.format(\"YYYY-MM-DD\")\n      )\n    );\n  }, [maxValue, toDate]);\n\n  const isBeforeMinDate = useMemo(() => {\n    return (\n      minValue instanceof Date &&\n      moment(moment(minValue).format(\"YYYY-MM-DD\")).isSameOrAfter(\n        toDate.format(\"YYYY-MM-DD\")\n      )\n    );\n  }, [minValue, toDate]);\n\n  useEffect(() => {\n    if (isBeforeMinDate) {\n      if (step === \"daily\") {\n        setFromDate(moment(minValue));\n        setToDate(moment(minValue));\n      }\n    }\n    if (isAfterMaxDate) {\n      if (step === \"daily\") {\n        setFromDate(moment(maxValue));\n        setToDate(moment(maxValue));\n      }\n    }\n  }, [step, minValue, maxValue, isBeforeMinDate, isAfterMaxDate]);\n\n  const onRightClickHandler = useCallback(() => {\n    if (isAfterMaxDate) {\n      return;\n    }\n\n    onChangeCallback(1);\n\n    if (onForward) {\n      onForward(fromDate.toDate(), toDate.toDate());\n    }\n  }, [isAfterMaxDate, onChangeCallback, onForward, fromDate, toDate]);\n\n  const onLeftClickHandler = useCallback(() => {\n    if (isBeforeMinDate) {\n      return;\n    }\n\n    onChangeCallback(-1);\n\n    if (onBack) {\n      onBack(fromDate.toDate(), toDate.toDate());\n    }\n  }, [isBeforeMinDate, onChangeCallback, onBack, fromDate, toDate]);\n\n  const renderLeftRightButtons = useMemo(() => {\n    return step !== \"custom\";\n  }, [step]);\n\n  const handleShow = useCallback(() => {\n    setShowDatePicker(!showDatePicker);\n    if (fromDate) {\n      setMonth(fromDate.toDate());\n    }\n  }, [setShowDatePicker, showDatePicker, fromDate]);\n\n  const closeMenu = useCallback(() => {\n    setShowDatePicker(false);\n  }, []);\n\n  const onMonthChange = useCallback(\n    (m: Date) => {\n      setMonth(m);\n    },\n    [setMonth]\n  );\n\n  useEffect(() => {\n    setFromDate(moment(from));\n    setToDate(moment(to));\n  }, [from, to]);\n\n  const dateStepperWidth = (\n    fromDay: Moment,\n    toDay: Moment,\n    range: string\n  ): { minWidth: string } => {\n    if (\n      fromDay.year() !== moment().year() ||\n      toDay.year() !== moment().year()\n    ) {\n      switch (range) {\n        case \"daily\":\n        case \"monthly\":\n          return { minWidth: \"122px\" };\n        case \"weekly\":\n        case \"custom\":\n          return { minWidth: \"232px\" };\n      }\n    }\n    switch (range) {\n      case \"monthly\":\n        return { minWidth: \"122px\" };\n      case \"weekly\":\n      case \"custom\":\n        return { minWidth: \"182px\" };\n    }\n\n    return { minWidth: \"102px\" };\n  };\n  const isDisabled = useCallback(\n    (day: Date): boolean => {\n      const dayFormat = moment(day).format(\"YYYY-MM-DD\");\n\n      const isBefore =\n        maxValue instanceof Date &&\n        moment(moment(maxValue).format(\"YYYY-MM-DD\")).isBefore(dayFormat);\n      const isAfter =\n        minValue instanceof Date &&\n        moment(moment(minValue).format(\"YYYY-MM-DD\")).isAfter(dayFormat);\n\n      return isBefore || isAfter;\n    },\n    [maxValue, minValue]\n  );\n\n  const modifiers = useMemo(() => {\n    return {\n      [customClassNames.disabled]: (day: Date): boolean => {\n        return isDisabled(day);\n      },\n      [customClassNames.nonWorkingDay]: (day: Date): boolean => {\n        return isDisabled(day);\n      },\n    };\n  }, [isDisabled]);\n\n  return (\n    <StyledButtonGroup className={classNames(\"c-date-stepper\", className)}>\n      {renderLeftRightButtons ? (\n        <Button\n          type=\"button\"\n          variant=\"secondary\"\n          onClick={onLeftClickHandler}\n          disabled={isBeforeMinDate}\n        >\n          <ArrowLeftIcon />\n        </Button>\n      ) : null}\n      <StyledDiv\n        $isTargetable={step === \"yearly\" || !withDatePicker}\n        $isRounded={step === \"custom\"}\n        style={dateStepperWidth(fromDate, toDate, step)}\n      >\n        {withDatePicker ? (\n          <StyledMenu\n            target={\n              <StyledButton type=\"button\">\n                <span>{getDateFormatted}</span>\n              </StyledButton>\n            }\n            open={showDatePicker}\n            onOpen={handleShow}\n            onClose={closeMenu}\n            popperClassName={popperClassName}\n            position={position}\n          >\n            <DatePicker\n              month={month}\n              localeUtils={MomentLocaleUtils}\n              locale=\"en\"\n              selectionMode={step}\n              className={datePickerClass}\n              selectedDays={{ from: fromDate.toDate(), to: toDate.toDate() }}\n              onChange={onDatePickerChange}\n              onMonthChange={onMonthChange}\n              firstDayOfWeek={period === \"week\" ? 0 : 1}\n              modifiers={modifiers}\n              dateRequired\n              fixedWeeks\n            />\n          </StyledMenu>\n        ) : (\n          <StyledSpan>{getDateFormatted}</StyledSpan>\n        )}\n      </StyledDiv>\n      {renderLeftRightButtons ? (\n        <Button\n          type=\"button\"\n          variant=\"secondary\"\n          onClick={onRightClickHandler}\n          disabled={isAfterMaxDate}\n        >\n          <ArrowRightIcon />\n        </Button>\n      ) : null}\n    </StyledButtonGroup>\n  );\n};\n\nDateStepper.displayName = \"DateStepper\";\n"],"mappings":"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"}
+{"version":3,"file":"DateStepper.js","names":["DateStepper","step","formatCallback","onChange","from","to","onBack","onForward","minValue","maxValue","className","period","datePickerClass","withDatePicker","defaultMonth","Date","popperClassName","position","useState","moment","fromDate","setFromDate","toDate","setToDate","showDatePicker","setShowDatePicker","month","setMonth","getDatesByPeriod","useCallback","interval","date","add","clone","startOf","endOf","getDateFormatted","useMemo","actualYear","year","showWeekOrCustomDateFormat","start","end","format","startDate","endDate","quarter","onChangeCallback","amount","newFrom","newTo","onDatePickerChange","dates","fromDateTemp","toDateTemp","isAfterMaxDate","isSameOrBefore","isBeforeMinDate","isSameOrAfter","useEffect","onRightClickHandler","onLeftClickHandler","renderLeftRightButtons","handleShow","closeMenu","onMonthChange","m","dateStepperWidth","fromDay","toDay","range","minWidth","isDisabled","day","dayFormat","isBefore","isAfter","modifiers","customClassNames","disabled","nonWorkingDay","classNames","MomentLocaleUtils","displayName"],"sources":["../../../../../src/components/Steppers/DateStepper/DateStepper.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo, useState, useEffect } from \"react\";\nimport classNames from \"classnames\";\nimport moment, { Moment } from \"moment\";\nimport MomentLocaleUtils from \"react-day-picker/moment\";\nimport { Placement } from \"@popperjs/core\";\nimport ArrowLeftIcon from \"../../Icons/collection/ArrowLeft\";\nimport { DatePicker } from \"../../DatePicker\";\nimport { customClassNames } from \"../../DatePicker/ClassNames\";\nimport {\n  StyledButton,\n  StyledButtonGroup,\n  StyledDiv,\n  StyledMenu,\n  StyledSpan,\n  StyledControl,\n} from \"./Styles\";\nimport { ArrowRightIcon } from \"../../Icons\";\n\ninterface IDateStepperProps {\n  /** One of the possible steps for this component */\n  step:\n    | \"daily\"\n    | \"weekly\"\n    | \"monthly\"\n    | \"quarterly\"\n    | \"yearly\"\n    | \"custom\"\n    | string;\n  /** Callback function that will be called after the changed range */\n  onChange?: (from: Date, to: Date) => void;\n  /** Start date of the range */\n  from: Date | string;\n  /** End date of the range */\n  to: Date | string;\n  /** Callback function that will format the text label */\n  formatCallback?: (from: string | Date, to: string | Date) => string;\n  /** Default month */\n  defaultMonth?: Date;\n  /** Callback function onBack */\n  onBack?: (from: Date, to: Date) => void;\n  /** Callback function onForward */\n  onForward?: (from: Date, to: Date) => void;\n  /** Min date */\n  minValue?: Date;\n  /** Max fate */\n  maxValue?: Date;\n  /** html class */\n  className?: string;\n  /** Period for calculating week (isoWeek) */\n  period?: \"week\" | \"isoWeek\";\n  /** Classes for datePicker */\n  datePickerClass?: string;\n  /** Show datePicker in the middle button */\n  withDatePicker?: boolean;\n  /** Popper class name*/\n  popperClassName?: string;\n  /** DatePicker menu position */\n  position?: Placement;\n}\n\n/**\n * This component allow you to select date range. It accepts two parameters \"from\" and \"to\" as valid format\n * onChange and onBack and onForward it will return \"from: Date\" and \"to: Date\" as function arguments\n */\nexport const DateStepper: FC<IDateStepperProps> = ({\n  step,\n  formatCallback,\n  onChange,\n  from,\n  to,\n  onBack,\n  onForward,\n  minValue,\n  maxValue,\n  className,\n  period = \"week\",\n  datePickerClass,\n  withDatePicker = true,\n  defaultMonth = new Date(),\n  popperClassName,\n  position = \"bottom\",\n}) => {\n  const [fromDate, setFromDate] = useState(moment(from));\n  const [toDate, setToDate] = useState(moment(to));\n  const [showDatePicker, setShowDatePicker] = useState(false);\n  const [month, setMonth] = useState(defaultMonth);\n\n  const getDatesByPeriod = useCallback(\n    (interval: number): Moment[] => {\n      const date = fromDate ? fromDate : moment();\n      if (step === \"daily\") {\n        date.add(interval, \"days\");\n        return [date, date.clone()];\n      } else if (step === \"weekly\") {\n        date.add(interval, \"weeks\");\n        return [date.clone().startOf(period), date.clone().endOf(period)];\n      } else if (step === \"monthly\") {\n        date.add(interval, \"months\");\n        return [date.clone().startOf(\"month\"), date.clone().endOf(\"month\")];\n      } else if (step === \"quarterly\") {\n        date.add(interval, \"quarters\");\n        return [date.clone().startOf(\"quarter\"), date.clone().endOf(\"quarter\")];\n      } else if (step === \"yearly\") {\n        date.add(interval, \"years\");\n        return [date.clone().startOf(\"year\"), date.clone().endOf(\"year\")];\n      }\n      return [date, date];\n    },\n    [fromDate, period, step]\n  );\n\n  const getDateFormatted = useMemo(() => {\n    if (formatCallback) {\n      return formatCallback(fromDate.toDate(), toDate.toDate());\n    }\n\n    const actualYear = moment().year();\n\n    const showWeekOrCustomDateFormat = (start, end): string => {\n      if (start.year() === actualYear && end.year() === actualYear) {\n        return start.format(\"MMM DD\") + \" - \" + end.format(\"MMM DD\");\n      } else {\n        return start.format(\"MMM DD YYYY\") + \" - \" + end.format(\"MMM DD YYYY\");\n      }\n    };\n\n    if (step === \"daily\") {\n      if (fromDate.year() === actualYear) {\n        return fromDate.format(\"MMM DD\");\n      }\n      return fromDate.format(\"MMM DD YYYY\");\n    } else if (step === \"weekly\") {\n      const startDate = fromDate.clone().startOf(period);\n      const endDate = startDate.clone().endOf(period);\n      return showWeekOrCustomDateFormat(startDate, endDate);\n    } else if (step === \"monthly\") {\n      return fromDate.format(\"MMM YYYY\");\n    } else if (step === \"quarterly\") {\n      return `Q${fromDate.quarter()}/${fromDate.format(\"YYYY\")}`;\n    } else if (step === \"yearly\") {\n      return fromDate.format(\"YYYY\");\n    } else if (step === \"custom\") {\n      return showWeekOrCustomDateFormat(fromDate, toDate);\n    }\n\n    return \"\";\n  }, [fromDate, step, toDate, formatCallback, period]);\n\n  const onChangeCallback = useCallback(\n    (amount: number) => {\n      const [newFrom, newTo] = getDatesByPeriod(amount);\n      setFromDate(moment(newFrom));\n      setToDate(moment(newTo));\n\n      if (onChange) {\n        onChange(newFrom.toDate(), newTo.toDate());\n      }\n    },\n    [onChange, getDatesByPeriod]\n  );\n\n  const onDatePickerChange = useCallback(\n    (dates?: { from: Date; to: Date }) => {\n      const fromDateTemp = dates?.from;\n      const toDateTemp = dates?.to;\n\n      setFromDate(moment(fromDateTemp));\n      setToDate(moment(toDateTemp));\n\n      if (\n        onChange &&\n        fromDateTemp instanceof Date &&\n        toDateTemp instanceof Date\n      ) {\n        onChange(fromDateTemp, toDateTemp);\n      }\n    },\n    [onChange, setFromDate, setToDate]\n  );\n\n  const isAfterMaxDate = useMemo(() => {\n    return (\n      maxValue instanceof Date &&\n      moment(moment(maxValue).format(\"YYYY-MM-DD\")).isSameOrBefore(\n        toDate.format(\"YYYY-MM-DD\")\n      )\n    );\n  }, [maxValue, toDate]);\n\n  const isBeforeMinDate = useMemo(() => {\n    return (\n      minValue instanceof Date &&\n      moment(moment(minValue).format(\"YYYY-MM-DD\")).isSameOrAfter(\n        toDate.format(\"YYYY-MM-DD\")\n      )\n    );\n  }, [minValue, toDate]);\n\n  useEffect(() => {\n    if (isBeforeMinDate) {\n      if (step === \"daily\") {\n        setFromDate(moment(minValue));\n        setToDate(moment(minValue));\n      }\n    }\n    if (isAfterMaxDate) {\n      if (step === \"daily\") {\n        setFromDate(moment(maxValue));\n        setToDate(moment(maxValue));\n      }\n    }\n  }, [step, minValue, maxValue, isBeforeMinDate, isAfterMaxDate]);\n\n  const onRightClickHandler = useCallback(() => {\n    if (isAfterMaxDate) {\n      return;\n    }\n\n    onChangeCallback(1);\n\n    if (onForward) {\n      onForward(fromDate.toDate(), toDate.toDate());\n    }\n  }, [isAfterMaxDate, onChangeCallback, onForward, fromDate, toDate]);\n\n  const onLeftClickHandler = useCallback(() => {\n    if (isBeforeMinDate) {\n      return;\n    }\n\n    onChangeCallback(-1);\n\n    if (onBack) {\n      onBack(fromDate.toDate(), toDate.toDate());\n    }\n  }, [isBeforeMinDate, onChangeCallback, onBack, fromDate, toDate]);\n\n  const renderLeftRightButtons = useMemo(() => {\n    return step !== \"custom\";\n  }, [step]);\n\n  const handleShow = useCallback(() => {\n    setShowDatePicker(!showDatePicker);\n    if (fromDate) {\n      setMonth(fromDate.toDate());\n    }\n  }, [setShowDatePicker, showDatePicker, fromDate]);\n\n  const closeMenu = useCallback(() => {\n    setShowDatePicker(false);\n  }, []);\n\n  const onMonthChange = useCallback(\n    (m: Date) => {\n      setMonth(m);\n    },\n    [setMonth]\n  );\n\n  useEffect(() => {\n    setFromDate(moment(from));\n    setToDate(moment(to));\n  }, [from, to]);\n\n  const dateStepperWidth = (\n    fromDay: Moment,\n    toDay: Moment,\n    range: string\n  ): { minWidth: string } => {\n    if (\n      fromDay.year() !== moment().year() ||\n      toDay.year() !== moment().year()\n    ) {\n      switch (range) {\n        case \"daily\":\n        case \"monthly\":\n          return { minWidth: \"122px\" };\n        case \"weekly\":\n        case \"custom\":\n          return { minWidth: \"232px\" };\n      }\n    }\n    switch (range) {\n      case \"monthly\":\n        return { minWidth: \"122px\" };\n      case \"weekly\":\n      case \"custom\":\n        return { minWidth: \"182px\" };\n    }\n\n    return { minWidth: \"102px\" };\n  };\n  const isDisabled = useCallback(\n    (day: Date): boolean => {\n      const dayFormat = moment(day).format(\"YYYY-MM-DD\");\n\n      const isBefore =\n        maxValue instanceof Date &&\n        moment(moment(maxValue).format(\"YYYY-MM-DD\")).isBefore(dayFormat);\n      const isAfter =\n        minValue instanceof Date &&\n        moment(moment(minValue).format(\"YYYY-MM-DD\")).isAfter(dayFormat);\n\n      return isBefore || isAfter;\n    },\n    [maxValue, minValue]\n  );\n\n  const modifiers = useMemo(() => {\n    return {\n      [customClassNames.disabled]: (day: Date): boolean => {\n        return isDisabled(day);\n      },\n      [customClassNames.nonWorkingDay]: (day: Date): boolean => {\n        return isDisabled(day);\n      },\n    };\n  }, [isDisabled]);\n\n  return (\n    <StyledButtonGroup className={classNames(\"c-date-stepper\", className)}>\n      {renderLeftRightButtons ? (\n        <StyledControl\n          type=\"button\"\n          variant=\"secondary\"\n          onClick={onLeftClickHandler}\n          disabled={isBeforeMinDate}\n        >\n          <ArrowLeftIcon />\n        </StyledControl>\n      ) : null}\n      <StyledDiv\n        $isTargetable={step === \"yearly\" || !withDatePicker}\n        $isRounded={step === \"custom\"}\n        style={dateStepperWidth(fromDate, toDate, step)}\n      >\n        {withDatePicker ? (\n          <StyledMenu\n            target={\n              <StyledButton type=\"button\">\n                <span>{getDateFormatted}</span>\n              </StyledButton>\n            }\n            open={showDatePicker}\n            onOpen={handleShow}\n            onClose={closeMenu}\n            popperClassName={popperClassName}\n            position={position}\n          >\n            <DatePicker\n              month={month}\n              localeUtils={MomentLocaleUtils}\n              locale=\"en\"\n              selectionMode={step}\n              className={datePickerClass}\n              selectedDays={{ from: fromDate.toDate(), to: toDate.toDate() }}\n              onChange={onDatePickerChange}\n              onMonthChange={onMonthChange}\n              firstDayOfWeek={period === \"week\" ? 0 : 1}\n              modifiers={modifiers}\n              dateRequired\n              fixedWeeks\n            />\n          </StyledMenu>\n        ) : (\n          <StyledSpan>{getDateFormatted}</StyledSpan>\n        )}\n      </StyledDiv>\n      {renderLeftRightButtons ? (\n        <StyledControl\n          type=\"button\"\n          variant=\"secondary\"\n          onClick={onRightClickHandler}\n          disabled={isAfterMaxDate}\n        >\n          <ArrowRightIcon />\n        </StyledControl>\n      ) : null}\n    </StyledButtonGroup>\n  );\n};\n\nDateStepper.displayName = \"DateStepper\";\n"],"mappings":"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"}

package/dist/cjs/components/Steppers/DateStepper/Styles.js

@@ -4,12 +4,14 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSpan = exports.StyledMenu = exports.StyledDiv = exports.StyledButtonGroup = exports.StyledButton = void 0;
+exports.StyledSpan = exports.StyledMenu = exports.StyledDiv = exports.StyledControl = exports.StyledButtonGroup = exports.StyledButton = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _ButtonGroup = require("../../ButtonGroup");
 var _FontStyle = require("../../FontStyle");
 var _BoxSizingStyle = require("../../BoxSizingStyle");
+var _BreakPoints = require("../../BreakPoints");
 var _Menu = require("../../Menu");
+var _Button = require("../../Button");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var StyledButton = _styledComponents.default.button.withConfig({
@@ -56,7 +58,7 @@ exports.StyledSpan = StyledSpan;
 var StyledDiv = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledDiv",
   componentId: "sc-1v8h7mt-4"
-})(["", " ", " ", " height:32px;transition:all 0.3s ease;background-color:transparent;border:solid 1px var(--color-theme-700);color:var(--color-theme-700);margin-right:-1px;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}&:hover{border-color:var(--color-primary);color:var(--color-primary);text-decoration:none;}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"], function (props) {
+})(["", " ", " ", " height:32px;transition:all 0.3s ease;background-color:transparent;border:solid 1px var(--color-theme-700);color:var(--color-theme-700);margin-right:-1px;display:none;", "{display:block;}svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}&:hover{border-color:var(--color-primary);color:var(--color-primary);text-decoration:none;}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"], function (props) {
   return props.$isTargetable && (0, _styledComponents.css)(["", ""], {
     "pointerEvents": "none"
   });
@@ -79,11 +81,17 @@ var StyledDiv = _styledComponents.default.div.withConfig({
   "cursor": "pointer",
   "borderWidth": "1px",
   "borderStyle": "solid"
-});
+}, _BreakPoints.screen.md);
 exports.StyledDiv = StyledDiv;
+var StyledControl = (0, _styledComponents.default)(_Button.Button).withConfig({
+  displayName: "Styles__StyledControl",
+  componentId: "sc-1v8h7mt-5"
+})(["border-radius:var(--ac-br-8);"]);
+exports.StyledControl = StyledControl;
 StyledButtonGroup.displayName = "StyledButtonGroup";
 StyledSpan.displayName = "StyledSpan";
 StyledDiv.displayName = "StyledDiv";
 StyledMenu.displayName = "StyledMenu";
 StyledButton.displayName = "StyledButton";
+StyledControl.displayName = "StyledControl";
 //# sourceMappingURL=Styles.js.map

package/dist/cjs/components/Steppers/DateStepper/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["StyledButton","styled","button","FontStyle","BoxSizingStyle","StyledMenu","Menu","StyledButtonGroup","ButtonGroup","StyledSpan","span","StyledDiv","div","props","$isTargetable","css","$isRounded","displayName"],"sources":["../../../../../src/components/Steppers/DateStepper/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ButtonGroup } from \"../../ButtonGroup\";\nimport { FontStyle } from \"../../FontStyle\";\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\nimport tw from \"twin.macro\";\nimport { Menu } from \"../../Menu\";\n\nexport const StyledButton = styled.button`\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${tw`\n    tw-relative\n    tw-antialiased\n    tw-align-middle\n    tw-font-medium\n    tw-inline-block\n    tw-leading-none\n    tw-m-0\n    tw-no-underline\n    tw-text-sm\n    tw-select-none\n    tw-cursor-pointer\n    tw-text-center\n  `}\n\n  color: var(--color-theme-700);\n  margin: 0;\n  padding: 0;\n  background: none;\n  width: 100%;\n  height: auto;\n  border: none;\n  height: 30px;\n  line-height: 1;\n  transition: all 0.3s ease;\n\n  svg {\n    fill: currentColor;\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: 50%;\n    pointer-events: none;\n  }\n`;\n\nexport const StyledMenu = styled(Menu)`\n  ${tw`\n    tw-w-auto\n    tw-h-auto\n    tw-py-4\n    tw-px-2\n  `}\n`;\n\nexport const StyledButtonGroup = styled(ButtonGroup)`\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  button:hover {\n    position: relative;\n    z-index: 1;\n  }\n`;\n\nexport const StyledSpan = styled.span`\n  line-height: 30px;\n  color: var(--color-theme-700);\n`;\n\ninterface StyledDiv {\n  $isTargetable: boolean;\n  $isRounded: boolean;\n}\n\nexport const StyledDiv = styled.div<StyledDiv>`\n  ${(props) =>\n    props.$isTargetable &&\n    css`\n      ${tw`tw-pointer-events-none`}\n    `}\n\n  ${(props) =>\n    props.$isRounded &&\n    css`\n      border-radius: var(--ac-br-rounded);\n    `}\n\n  ${tw`\n    tw-relative\n    tw-text-center\n    tw-p-0\n    tw-antialiased\n    tw-align-middle\n    tw-font-medium\n    tw-inline-block\n    tw-leading-none\n    tw-m-0\n    tw-no-underline\n    tw-text-sm\n    tw-select-none\n    tw-cursor-pointer\n    tw-border\n    tw-border-solid\n  `}\n\n  height: 32px;\n  transition: all 0.3s ease;\n  background-color: transparent;\n  border: solid 1px var(--color-theme-700);\n  color: var(--color-theme-700);\n  margin-right: -1px;\n\n  svg {\n    fill: currentColor;\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: 50%;\n    pointer-events: none;\n  }\n\n  &:hover {\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n    text-decoration: none;\n  }\n\n  &:active {\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n    background-color: var(--color-primary-200);\n  }\n`;\n\nStyledButtonGroup.displayName = \"StyledButtonGroup\";\nStyledSpan.displayName = \"StyledSpan\";\nStyledDiv.displayName = \"StyledDiv\";\nStyledMenu.displayName = \"StyledMenu\";\nStyledButton.displayName = \"StyledButton\";\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AAEA;AAAkC;AAAA;AAE3B,IAAMA,YAAY,GAAGC,yBAAM,CAACC,MAAM;EAAA;EAAA;AAAA,kVACrCC,oBAAS,EACTC,8BAAc,EAEZ;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAaJ,CAAC,CAkCF;AAAC;AAEK,IAAMC,UAAU,GAAG,IAAAJ,yBAAM,EAACK,UAAI,CAAC;EAAA;EAAA;AAAA,aAChC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAKJ,CAAC,CACF;AAAC;AAEK,IAAMC,iBAAiB,GAAG,IAAAN,yBAAM,EAACO,wBAAW,CAAC;EAAA;EAAA;AAAA,6DAChDL,oBAAS,EACTC,8BAAc,CAMjB;AAAC;AAEK,IAAMK,UAAU,GAAGR,yBAAM,CAACS,IAAI;EAAA;EAAA;AAAA,sDAGpC;AAAC;AAOK,IAAMC,SAAS,GAAGV,yBAAM,CAACW,GAAG;EAAA;EAAA;AAAA,mgBAC/B,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,aAAa,QACnBC,qBAAG,YACG;IAAA;EAAuB,CAAC,CAC7B;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACG,UAAU,QAChBD,qBAAG,0CAEF;AAAA,GAEC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAgBJ,CAAC,CAsCF;AAAC;AAEFR,iBAAiB,CAACU,WAAW,GAAG,mBAAmB;AACnDR,UAAU,CAACQ,WAAW,GAAG,YAAY;AACrCN,SAAS,CAACM,WAAW,GAAG,WAAW;AACnCZ,UAAU,CAACY,WAAW,GAAG,YAAY;AACrCjB,YAAY,CAACiB,WAAW,GAAG,cAAc"}
+{"version":3,"file":"Styles.js","names":["StyledButton","styled","button","FontStyle","BoxSizingStyle","StyledMenu","Menu","StyledButtonGroup","ButtonGroup","StyledSpan","span","StyledDiv","div","props","$isTargetable","css","$isRounded","screen","md","StyledControl","Button","displayName"],"sources":["../../../../../src/components/Steppers/DateStepper/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ButtonGroup } from \"../../ButtonGroup\";\nimport { FontStyle } from \"../../FontStyle\";\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\nimport { screen } from \"../../BreakPoints\";\nimport tw from \"twin.macro\";\nimport { Menu } from \"../../Menu\";\nimport { Button } from \"../../Button\";\n\nexport const StyledButton = styled.button`\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${tw`\n    tw-relative\n    tw-antialiased\n    tw-align-middle\n    tw-font-medium\n    tw-inline-block\n    tw-leading-none\n    tw-m-0\n    tw-no-underline\n    tw-text-sm\n    tw-select-none\n    tw-cursor-pointer\n    tw-text-center\n  `}\n\n  color: var(--color-theme-700);\n  margin: 0;\n  padding: 0;\n  background: none;\n  width: 100%;\n  height: auto;\n  border: none;\n  height: 30px;\n  line-height: 1;\n  transition: all 0.3s ease;\n\n  svg {\n    fill: currentColor;\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: 50%;\n    pointer-events: none;\n  }\n`;\n\nexport const StyledMenu = styled(Menu)`\n  ${tw`\n    tw-w-auto\n    tw-h-auto\n    tw-py-4\n    tw-px-2\n  `}\n`;\n\nexport const StyledButtonGroup = styled(ButtonGroup)`\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  button:hover {\n    position: relative;\n    z-index: 1;\n  }\n`;\n\nexport const StyledSpan = styled.span`\n  line-height: 30px;\n  color: var(--color-theme-700);\n`;\n\ninterface StyledDiv {\n  $isTargetable: boolean;\n  $isRounded: boolean;\n}\n\nexport const StyledDiv = styled.div<StyledDiv>`\n  ${(props) =>\n    props.$isTargetable &&\n    css`\n      ${tw`tw-pointer-events-none`}\n    `}\n\n  ${(props) =>\n    props.$isRounded &&\n    css`\n      border-radius: var(--ac-br-rounded);\n    `}\n\n  ${tw`\n    tw-relative\n    tw-text-center\n    tw-p-0\n    tw-antialiased\n    tw-align-middle\n    tw-font-medium\n    tw-inline-block\n    tw-leading-none\n    tw-m-0\n    tw-no-underline\n    tw-text-sm\n    tw-select-none\n    tw-cursor-pointer\n    tw-border\n    tw-border-solid\n  `}\n\n  height: 32px;\n  transition: all 0.3s ease;\n  background-color: transparent;\n  border: solid 1px var(--color-theme-700);\n  color: var(--color-theme-700);\n  margin-right: -1px;\n  display: none;\n\n  ${screen.md} {\n    display: block;\n  }\n\n  svg {\n    fill: currentColor;\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: 50%;\n    pointer-events: none;\n  }\n\n  &:hover {\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n    text-decoration: none;\n  }\n\n  &:active {\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n    background-color: var(--color-primary-200);\n  }\n`;\n\nexport const StyledControl = styled(Button)`\n  border-radius: var(--ac-br-8);\n`;\n\nStyledButtonGroup.displayName = \"StyledButtonGroup\";\nStyledSpan.displayName = \"StyledSpan\";\nStyledDiv.displayName = \"StyledDiv\";\nStyledMenu.displayName = \"StyledMenu\";\nStyledButton.displayName = \"StyledButton\";\nStyledControl.displayName = \"StyledControl\";\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAsC;AAAA;AAE/B,IAAMA,YAAY,GAAGC,yBAAM,CAACC,MAAM;EAAA;EAAA;AAAA,kVACrCC,oBAAS,EACTC,8BAAc,EAEZ;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAaJ,CAAC,CAkCF;AAAC;AAEK,IAAMC,UAAU,GAAG,IAAAJ,yBAAM,EAACK,UAAI,CAAC;EAAA;EAAA;AAAA,aAChC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAKJ,CAAC,CACF;AAAC;AAEK,IAAMC,iBAAiB,GAAG,IAAAN,yBAAM,EAACO,wBAAW,CAAC;EAAA;EAAA;AAAA,6DAChDL,oBAAS,EACTC,8BAAc,CAMjB;AAAC;AAEK,IAAMK,UAAU,GAAGR,yBAAM,CAACS,IAAI;EAAA;EAAA;AAAA,sDAGpC;AAAC;AAOK,IAAMC,SAAS,GAAGV,yBAAM,CAACW,GAAG;EAAA;EAAA;AAAA,oiBAC/B,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,aAAa,QACnBC,qBAAG,YACG;IAAA;EAAuB,CAAC,CAC7B;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACG,UAAU,QAChBD,qBAAG,0CAEF;AAAA,GAEC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAgBJ,CAAC,EAUCE,mBAAM,CAACC,EAAE,CAiCZ;AAAC;AAEK,IAAMC,aAAa,GAAG,IAAAlB,yBAAM,EAACmB,cAAM,CAAC;EAAA;EAAA;AAAA,qCAE1C;AAAC;AAEFb,iBAAiB,CAACc,WAAW,GAAG,mBAAmB;AACnDZ,UAAU,CAACY,WAAW,GAAG,YAAY;AACrCV,SAAS,CAACU,WAAW,GAAG,WAAW;AACnChB,UAAU,CAACgB,WAAW,GAAG,YAAY;AACrCrB,YAAY,CAACqB,WAAW,GAAG,cAAc;AACzCF,aAAa,CAACE,WAAW,GAAG,eAAe"}

package/dist/esm/components/Steppers/DateStepper/DateStepper.js

@@ -2,11 +2,10 @@ import React, { useCallback, useMemo, useState, useEffect } from "react";
 import classNames from "classnames";
 import moment from "moment";
 import MomentLocaleUtils from "react-day-picker/moment";
-import { Button } from "../../Button/Button";
 import ArrowLeftIcon from "../../Icons/collection/ArrowLeft";
 import { DatePicker } from "../../DatePicker";
 import { customClassNames } from "../../DatePicker/ClassNames";
-import { StyledButton, StyledButtonGroup, StyledDiv, StyledMenu, StyledSpan } from "./Styles";
+import { StyledButton, StyledButtonGroup, StyledDiv, StyledMenu, StyledSpan, StyledControl } from "./Styles";
 import { ArrowRightIcon } from "../../Icons";
 /**
  * This component allow you to select date range. It accepts two parameters "from" and "to" as valid format
@@ -219,7 +218,7 @@ export var DateStepper = function DateStepper(_ref) {
   }, [isDisabled]);
   return /*#__PURE__*/React.createElement(StyledButtonGroup, {
     className: classNames("c-date-stepper", className)
-  }, renderLeftRightButtons ? /*#__PURE__*/React.createElement(Button, {
+  }, renderLeftRightButtons ? /*#__PURE__*/React.createElement(StyledControl, {
     type: "button",
     variant: "secondary",
     onClick: onLeftClickHandler,
@@ -253,7 +252,7 @@ export var DateStepper = function DateStepper(_ref) {
     modifiers: modifiers,
     dateRequired: true,
     fixedWeeks: true
-  })) : /*#__PURE__*/React.createElement(StyledSpan, null, getDateFormatted)), renderLeftRightButtons ? /*#__PURE__*/React.createElement(Button, {
+  })) : /*#__PURE__*/React.createElement(StyledSpan, null, getDateFormatted)), renderLeftRightButtons ? /*#__PURE__*/React.createElement(StyledControl, {
     type: "button",
     variant: "secondary",
     onClick: onRightClickHandler,

package/dist/esm/components/Steppers/DateStepper/DateStepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateStepper.js","names":["React","useCallback","useMemo","useState","useEffect","classNames","moment","MomentLocaleUtils","Button","ArrowLeftIcon","DatePicker","customClassNames","StyledButton","StyledButtonGroup","StyledDiv","StyledMenu","StyledSpan","ArrowRightIcon","DateStepper","step","formatCallback","onChange","from","to","onBack","onForward","minValue","maxValue","className","period","datePickerClass","withDatePicker","defaultMonth","Date","popperClassName","position","fromDate","setFromDate","toDate","setToDate","showDatePicker","setShowDatePicker","month","setMonth","getDatesByPeriod","interval","date","add","clone","startOf","endOf","getDateFormatted","actualYear","year","showWeekOrCustomDateFormat","start","end","format","startDate","endDate","quarter","onChangeCallback","amount","newFrom","newTo","onDatePickerChange","dates","fromDateTemp","toDateTemp","isAfterMaxDate","isSameOrBefore","isBeforeMinDate","isSameOrAfter","onRightClickHandler","onLeftClickHandler","renderLeftRightButtons","handleShow","closeMenu","onMonthChange","m","dateStepperWidth","fromDay","toDay","range","minWidth","isDisabled","day","dayFormat","isBefore","isAfter","modifiers","disabled","nonWorkingDay","displayName"],"sources":["../../../../../src/components/Steppers/DateStepper/DateStepper.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo, useState, useEffect } from \"react\";\nimport classNames from \"classnames\";\nimport moment, { Moment } from \"moment\";\nimport MomentLocaleUtils from \"react-day-picker/moment\";\nimport { Placement } from \"@popperjs/core\";\nimport { Button } from \"../../Button/Button\";\nimport ArrowLeftIcon from \"../../Icons/collection/ArrowLeft\";\nimport { DatePicker } from \"../../DatePicker\";\nimport { customClassNames } from \"../../DatePicker/ClassNames\";\nimport {\n  StyledButton,\n  StyledButtonGroup,\n  StyledDiv,\n  StyledMenu,\n  StyledSpan,\n} from \"./Styles\";\nimport { ArrowRightIcon } from \"../../Icons\";\n\ninterface IDateStepperProps {\n  /** One of the possible steps for this component */\n  step:\n    | \"daily\"\n    | \"weekly\"\n    | \"monthly\"\n    | \"quarterly\"\n    | \"yearly\"\n    | \"custom\"\n    | string;\n  /** Callback function that will be called after the changed range */\n  onChange?: (from: Date, to: Date) => void;\n  /** Start date of the range */\n  from: Date | string;\n  /** End date of the range */\n  to: Date | string;\n  /** Callback function that will format the text label */\n  formatCallback?: (from: string | Date, to: string | Date) => string;\n  /** Default month */\n  defaultMonth?: Date;\n  /** Callback function onBack */\n  onBack?: (from: Date, to: Date) => void;\n  /** Callback function onForward */\n  onForward?: (from: Date, to: Date) => void;\n  /** Min date */\n  minValue?: Date;\n  /** Max fate */\n  maxValue?: Date;\n  /** html class */\n  className?: string;\n  /** Period for calculating week (isoWeek) */\n  period?: \"week\" | \"isoWeek\";\n  /** Classes for datePicker */\n  datePickerClass?: string;\n  /** Show datePicker in the middle button */\n  withDatePicker?: boolean;\n  /** Popper class name*/\n  popperClassName?: string;\n  /** DatePicker menu position */\n  position?: Placement;\n}\n\n/**\n * This component allow you to select date range. It accepts two parameters \"from\" and \"to\" as valid format\n * onChange and onBack and onForward it will return \"from: Date\" and \"to: Date\" as function arguments\n */\nexport const DateStepper: FC<IDateStepperProps> = ({\n  step,\n  formatCallback,\n  onChange,\n  from,\n  to,\n  onBack,\n  onForward,\n  minValue,\n  maxValue,\n  className,\n  period = \"week\",\n  datePickerClass,\n  withDatePicker = true,\n  defaultMonth = new Date(),\n  popperClassName,\n  position = \"bottom\",\n}) => {\n  const [fromDate, setFromDate] = useState(moment(from));\n  const [toDate, setToDate] = useState(moment(to));\n  const [showDatePicker, setShowDatePicker] = useState(false);\n  const [month, setMonth] = useState(defaultMonth);\n\n  const getDatesByPeriod = useCallback(\n    (interval: number): Moment[] => {\n      const date = fromDate ? fromDate : moment();\n      if (step === \"daily\") {\n        date.add(interval, \"days\");\n        return [date, date.clone()];\n      } else if (step === \"weekly\") {\n        date.add(interval, \"weeks\");\n        return [date.clone().startOf(period), date.clone().endOf(period)];\n      } else if (step === \"monthly\") {\n        date.add(interval, \"months\");\n        return [date.clone().startOf(\"month\"), date.clone().endOf(\"month\")];\n      } else if (step === \"quarterly\") {\n        date.add(interval, \"quarters\");\n        return [date.clone().startOf(\"quarter\"), date.clone().endOf(\"quarter\")];\n      } else if (step === \"yearly\") {\n        date.add(interval, \"years\");\n        return [date.clone().startOf(\"year\"), date.clone().endOf(\"year\")];\n      }\n      return [date, date];\n    },\n    [fromDate, period, step]\n  );\n\n  const getDateFormatted = useMemo(() => {\n    if (formatCallback) {\n      return formatCallback(fromDate.toDate(), toDate.toDate());\n    }\n\n    const actualYear = moment().year();\n\n    const showWeekOrCustomDateFormat = (start, end): string => {\n      if (start.year() === actualYear && end.year() === actualYear) {\n        return start.format(\"MMM DD\") + \" - \" + end.format(\"MMM DD\");\n      } else {\n        return start.format(\"MMM DD YYYY\") + \" - \" + end.format(\"MMM DD YYYY\");\n      }\n    };\n\n    if (step === \"daily\") {\n      if (fromDate.year() === actualYear) {\n        return fromDate.format(\"MMM DD\");\n      }\n      return fromDate.format(\"MMM DD YYYY\");\n    } else if (step === \"weekly\") {\n      const startDate = fromDate.clone().startOf(period);\n      const endDate = startDate.clone().endOf(period);\n      return showWeekOrCustomDateFormat(startDate, endDate);\n    } else if (step === \"monthly\") {\n      return fromDate.format(\"MMM YYYY\");\n    } else if (step === \"quarterly\") {\n      return `Q${fromDate.quarter()}/${fromDate.format(\"YYYY\")}`;\n    } else if (step === \"yearly\") {\n      return fromDate.format(\"YYYY\");\n    } else if (step === \"custom\") {\n      return showWeekOrCustomDateFormat(fromDate, toDate);\n    }\n\n    return \"\";\n  }, [fromDate, step, toDate, formatCallback, period]);\n\n  const onChangeCallback = useCallback(\n    (amount: number) => {\n      const [newFrom, newTo] = getDatesByPeriod(amount);\n      setFromDate(moment(newFrom));\n      setToDate(moment(newTo));\n\n      if (onChange) {\n        onChange(newFrom.toDate(), newTo.toDate());\n      }\n    },\n    [onChange, getDatesByPeriod]\n  );\n\n  const onDatePickerChange = useCallback(\n    (dates?: { from: Date; to: Date }) => {\n      const fromDateTemp = dates?.from;\n      const toDateTemp = dates?.to;\n\n      setFromDate(moment(fromDateTemp));\n      setToDate(moment(toDateTemp));\n\n      if (\n        onChange &&\n        fromDateTemp instanceof Date &&\n        toDateTemp instanceof Date\n      ) {\n        onChange(fromDateTemp, toDateTemp);\n      }\n    },\n    [onChange, setFromDate, setToDate]\n  );\n\n  const isAfterMaxDate = useMemo(() => {\n    return (\n      maxValue instanceof Date &&\n      moment(moment(maxValue).format(\"YYYY-MM-DD\")).isSameOrBefore(\n        toDate.format(\"YYYY-MM-DD\")\n      )\n    );\n  }, [maxValue, toDate]);\n\n  const isBeforeMinDate = useMemo(() => {\n    return (\n      minValue instanceof Date &&\n      moment(moment(minValue).format(\"YYYY-MM-DD\")).isSameOrAfter(\n        toDate.format(\"YYYY-MM-DD\")\n      )\n    );\n  }, [minValue, toDate]);\n\n  useEffect(() => {\n    if (isBeforeMinDate) {\n      if (step === \"daily\") {\n        setFromDate(moment(minValue));\n        setToDate(moment(minValue));\n      }\n    }\n    if (isAfterMaxDate) {\n      if (step === \"daily\") {\n        setFromDate(moment(maxValue));\n        setToDate(moment(maxValue));\n      }\n    }\n  }, [step, minValue, maxValue, isBeforeMinDate, isAfterMaxDate]);\n\n  const onRightClickHandler = useCallback(() => {\n    if (isAfterMaxDate) {\n      return;\n    }\n\n    onChangeCallback(1);\n\n    if (onForward) {\n      onForward(fromDate.toDate(), toDate.toDate());\n    }\n  }, [isAfterMaxDate, onChangeCallback, onForward, fromDate, toDate]);\n\n  const onLeftClickHandler = useCallback(() => {\n    if (isBeforeMinDate) {\n      return;\n    }\n\n    onChangeCallback(-1);\n\n    if (onBack) {\n      onBack(fromDate.toDate(), toDate.toDate());\n    }\n  }, [isBeforeMinDate, onChangeCallback, onBack, fromDate, toDate]);\n\n  const renderLeftRightButtons = useMemo(() => {\n    return step !== \"custom\";\n  }, [step]);\n\n  const handleShow = useCallback(() => {\n    setShowDatePicker(!showDatePicker);\n    if (fromDate) {\n      setMonth(fromDate.toDate());\n    }\n  }, [setShowDatePicker, showDatePicker, fromDate]);\n\n  const closeMenu = useCallback(() => {\n    setShowDatePicker(false);\n  }, []);\n\n  const onMonthChange = useCallback(\n    (m: Date) => {\n      setMonth(m);\n    },\n    [setMonth]\n  );\n\n  useEffect(() => {\n    setFromDate(moment(from));\n    setToDate(moment(to));\n  }, [from, to]);\n\n  const dateStepperWidth = (\n    fromDay: Moment,\n    toDay: Moment,\n    range: string\n  ): { minWidth: string } => {\n    if (\n      fromDay.year() !== moment().year() ||\n      toDay.year() !== moment().year()\n    ) {\n      switch (range) {\n        case \"daily\":\n        case \"monthly\":\n          return { minWidth: \"122px\" };\n        case \"weekly\":\n        case \"custom\":\n          return { minWidth: \"232px\" };\n      }\n    }\n    switch (range) {\n      case \"monthly\":\n        return { minWidth: \"122px\" };\n      case \"weekly\":\n      case \"custom\":\n        return { minWidth: \"182px\" };\n    }\n\n    return { minWidth: \"102px\" };\n  };\n  const isDisabled = useCallback(\n    (day: Date): boolean => {\n      const dayFormat = moment(day).format(\"YYYY-MM-DD\");\n\n      const isBefore =\n        maxValue instanceof Date &&\n        moment(moment(maxValue).format(\"YYYY-MM-DD\")).isBefore(dayFormat);\n      const isAfter =\n        minValue instanceof Date &&\n        moment(moment(minValue).format(\"YYYY-MM-DD\")).isAfter(dayFormat);\n\n      return isBefore || isAfter;\n    },\n    [maxValue, minValue]\n  );\n\n  const modifiers = useMemo(() => {\n    return {\n      [customClassNames.disabled]: (day: Date): boolean => {\n        return isDisabled(day);\n      },\n      [customClassNames.nonWorkingDay]: (day: Date): boolean => {\n        return isDisabled(day);\n      },\n    };\n  }, [isDisabled]);\n\n  return (\n    <StyledButtonGroup className={classNames(\"c-date-stepper\", className)}>\n      {renderLeftRightButtons ? (\n        <Button\n          type=\"button\"\n          variant=\"secondary\"\n          onClick={onLeftClickHandler}\n          disabled={isBeforeMinDate}\n        >\n          <ArrowLeftIcon />\n        </Button>\n      ) : null}\n      <StyledDiv\n        $isTargetable={step === \"yearly\" || !withDatePicker}\n        $isRounded={step === \"custom\"}\n        style={dateStepperWidth(fromDate, toDate, step)}\n      >\n        {withDatePicker ? (\n          <StyledMenu\n            target={\n              <StyledButton type=\"button\">\n                <span>{getDateFormatted}</span>\n              </StyledButton>\n            }\n            open={showDatePicker}\n            onOpen={handleShow}\n            onClose={closeMenu}\n            popperClassName={popperClassName}\n            position={position}\n          >\n            <DatePicker\n              month={month}\n              localeUtils={MomentLocaleUtils}\n              locale=\"en\"\n              selectionMode={step}\n              className={datePickerClass}\n              selectedDays={{ from: fromDate.toDate(), to: toDate.toDate() }}\n              onChange={onDatePickerChange}\n              onMonthChange={onMonthChange}\n              firstDayOfWeek={period === \"week\" ? 0 : 1}\n              modifiers={modifiers}\n              dateRequired\n              fixedWeeks\n            />\n          </StyledMenu>\n        ) : (\n          <StyledSpan>{getDateFormatted}</StyledSpan>\n        )}\n      </StyledDiv>\n      {renderLeftRightButtons ? (\n        <Button\n          type=\"button\"\n          variant=\"secondary\"\n          onClick={onRightClickHandler}\n          disabled={isAfterMaxDate}\n        >\n          <ArrowRightIcon />\n        </Button>\n      ) : null}\n    </StyledButtonGroup>\n  );\n};\n\nDateStepper.displayName = \"DateStepper\";\n"],"mappings":"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"}
+{"version":3,"file":"DateStepper.js","names":["React","useCallback","useMemo","useState","useEffect","classNames","moment","MomentLocaleUtils","ArrowLeftIcon","DatePicker","customClassNames","StyledButton","StyledButtonGroup","StyledDiv","StyledMenu","StyledSpan","StyledControl","ArrowRightIcon","DateStepper","step","formatCallback","onChange","from","to","onBack","onForward","minValue","maxValue","className","period","datePickerClass","withDatePicker","defaultMonth","Date","popperClassName","position","fromDate","setFromDate","toDate","setToDate","showDatePicker","setShowDatePicker","month","setMonth","getDatesByPeriod","interval","date","add","clone","startOf","endOf","getDateFormatted","actualYear","year","showWeekOrCustomDateFormat","start","end","format","startDate","endDate","quarter","onChangeCallback","amount","newFrom","newTo","onDatePickerChange","dates","fromDateTemp","toDateTemp","isAfterMaxDate","isSameOrBefore","isBeforeMinDate","isSameOrAfter","onRightClickHandler","onLeftClickHandler","renderLeftRightButtons","handleShow","closeMenu","onMonthChange","m","dateStepperWidth","fromDay","toDay","range","minWidth","isDisabled","day","dayFormat","isBefore","isAfter","modifiers","disabled","nonWorkingDay","displayName"],"sources":["../../../../../src/components/Steppers/DateStepper/DateStepper.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo, useState, useEffect } from \"react\";\nimport classNames from \"classnames\";\nimport moment, { Moment } from \"moment\";\nimport MomentLocaleUtils from \"react-day-picker/moment\";\nimport { Placement } from \"@popperjs/core\";\nimport ArrowLeftIcon from \"../../Icons/collection/ArrowLeft\";\nimport { DatePicker } from \"../../DatePicker\";\nimport { customClassNames } from \"../../DatePicker/ClassNames\";\nimport {\n  StyledButton,\n  StyledButtonGroup,\n  StyledDiv,\n  StyledMenu,\n  StyledSpan,\n  StyledControl,\n} from \"./Styles\";\nimport { ArrowRightIcon } from \"../../Icons\";\n\ninterface IDateStepperProps {\n  /** One of the possible steps for this component */\n  step:\n    | \"daily\"\n    | \"weekly\"\n    | \"monthly\"\n    | \"quarterly\"\n    | \"yearly\"\n    | \"custom\"\n    | string;\n  /** Callback function that will be called after the changed range */\n  onChange?: (from: Date, to: Date) => void;\n  /** Start date of the range */\n  from: Date | string;\n  /** End date of the range */\n  to: Date | string;\n  /** Callback function that will format the text label */\n  formatCallback?: (from: string | Date, to: string | Date) => string;\n  /** Default month */\n  defaultMonth?: Date;\n  /** Callback function onBack */\n  onBack?: (from: Date, to: Date) => void;\n  /** Callback function onForward */\n  onForward?: (from: Date, to: Date) => void;\n  /** Min date */\n  minValue?: Date;\n  /** Max fate */\n  maxValue?: Date;\n  /** html class */\n  className?: string;\n  /** Period for calculating week (isoWeek) */\n  period?: \"week\" | \"isoWeek\";\n  /** Classes for datePicker */\n  datePickerClass?: string;\n  /** Show datePicker in the middle button */\n  withDatePicker?: boolean;\n  /** Popper class name*/\n  popperClassName?: string;\n  /** DatePicker menu position */\n  position?: Placement;\n}\n\n/**\n * This component allow you to select date range. It accepts two parameters \"from\" and \"to\" as valid format\n * onChange and onBack and onForward it will return \"from: Date\" and \"to: Date\" as function arguments\n */\nexport const DateStepper: FC<IDateStepperProps> = ({\n  step,\n  formatCallback,\n  onChange,\n  from,\n  to,\n  onBack,\n  onForward,\n  minValue,\n  maxValue,\n  className,\n  period = \"week\",\n  datePickerClass,\n  withDatePicker = true,\n  defaultMonth = new Date(),\n  popperClassName,\n  position = \"bottom\",\n}) => {\n  const [fromDate, setFromDate] = useState(moment(from));\n  const [toDate, setToDate] = useState(moment(to));\n  const [showDatePicker, setShowDatePicker] = useState(false);\n  const [month, setMonth] = useState(defaultMonth);\n\n  const getDatesByPeriod = useCallback(\n    (interval: number): Moment[] => {\n      const date = fromDate ? fromDate : moment();\n      if (step === \"daily\") {\n        date.add(interval, \"days\");\n        return [date, date.clone()];\n      } else if (step === \"weekly\") {\n        date.add(interval, \"weeks\");\n        return [date.clone().startOf(period), date.clone().endOf(period)];\n      } else if (step === \"monthly\") {\n        date.add(interval, \"months\");\n        return [date.clone().startOf(\"month\"), date.clone().endOf(\"month\")];\n      } else if (step === \"quarterly\") {\n        date.add(interval, \"quarters\");\n        return [date.clone().startOf(\"quarter\"), date.clone().endOf(\"quarter\")];\n      } else if (step === \"yearly\") {\n        date.add(interval, \"years\");\n        return [date.clone().startOf(\"year\"), date.clone().endOf(\"year\")];\n      }\n      return [date, date];\n    },\n    [fromDate, period, step]\n  );\n\n  const getDateFormatted = useMemo(() => {\n    if (formatCallback) {\n      return formatCallback(fromDate.toDate(), toDate.toDate());\n    }\n\n    const actualYear = moment().year();\n\n    const showWeekOrCustomDateFormat = (start, end): string => {\n      if (start.year() === actualYear && end.year() === actualYear) {\n        return start.format(\"MMM DD\") + \" - \" + end.format(\"MMM DD\");\n      } else {\n        return start.format(\"MMM DD YYYY\") + \" - \" + end.format(\"MMM DD YYYY\");\n      }\n    };\n\n    if (step === \"daily\") {\n      if (fromDate.year() === actualYear) {\n        return fromDate.format(\"MMM DD\");\n      }\n      return fromDate.format(\"MMM DD YYYY\");\n    } else if (step === \"weekly\") {\n      const startDate = fromDate.clone().startOf(period);\n      const endDate = startDate.clone().endOf(period);\n      return showWeekOrCustomDateFormat(startDate, endDate);\n    } else if (step === \"monthly\") {\n      return fromDate.format(\"MMM YYYY\");\n    } else if (step === \"quarterly\") {\n      return `Q${fromDate.quarter()}/${fromDate.format(\"YYYY\")}`;\n    } else if (step === \"yearly\") {\n      return fromDate.format(\"YYYY\");\n    } else if (step === \"custom\") {\n      return showWeekOrCustomDateFormat(fromDate, toDate);\n    }\n\n    return \"\";\n  }, [fromDate, step, toDate, formatCallback, period]);\n\n  const onChangeCallback = useCallback(\n    (amount: number) => {\n      const [newFrom, newTo] = getDatesByPeriod(amount);\n      setFromDate(moment(newFrom));\n      setToDate(moment(newTo));\n\n      if (onChange) {\n        onChange(newFrom.toDate(), newTo.toDate());\n      }\n    },\n    [onChange, getDatesByPeriod]\n  );\n\n  const onDatePickerChange = useCallback(\n    (dates?: { from: Date; to: Date }) => {\n      const fromDateTemp = dates?.from;\n      const toDateTemp = dates?.to;\n\n      setFromDate(moment(fromDateTemp));\n      setToDate(moment(toDateTemp));\n\n      if (\n        onChange &&\n        fromDateTemp instanceof Date &&\n        toDateTemp instanceof Date\n      ) {\n        onChange(fromDateTemp, toDateTemp);\n      }\n    },\n    [onChange, setFromDate, setToDate]\n  );\n\n  const isAfterMaxDate = useMemo(() => {\n    return (\n      maxValue instanceof Date &&\n      moment(moment(maxValue).format(\"YYYY-MM-DD\")).isSameOrBefore(\n        toDate.format(\"YYYY-MM-DD\")\n      )\n    );\n  }, [maxValue, toDate]);\n\n  const isBeforeMinDate = useMemo(() => {\n    return (\n      minValue instanceof Date &&\n      moment(moment(minValue).format(\"YYYY-MM-DD\")).isSameOrAfter(\n        toDate.format(\"YYYY-MM-DD\")\n      )\n    );\n  }, [minValue, toDate]);\n\n  useEffect(() => {\n    if (isBeforeMinDate) {\n      if (step === \"daily\") {\n        setFromDate(moment(minValue));\n        setToDate(moment(minValue));\n      }\n    }\n    if (isAfterMaxDate) {\n      if (step === \"daily\") {\n        setFromDate(moment(maxValue));\n        setToDate(moment(maxValue));\n      }\n    }\n  }, [step, minValue, maxValue, isBeforeMinDate, isAfterMaxDate]);\n\n  const onRightClickHandler = useCallback(() => {\n    if (isAfterMaxDate) {\n      return;\n    }\n\n    onChangeCallback(1);\n\n    if (onForward) {\n      onForward(fromDate.toDate(), toDate.toDate());\n    }\n  }, [isAfterMaxDate, onChangeCallback, onForward, fromDate, toDate]);\n\n  const onLeftClickHandler = useCallback(() => {\n    if (isBeforeMinDate) {\n      return;\n    }\n\n    onChangeCallback(-1);\n\n    if (onBack) {\n      onBack(fromDate.toDate(), toDate.toDate());\n    }\n  }, [isBeforeMinDate, onChangeCallback, onBack, fromDate, toDate]);\n\n  const renderLeftRightButtons = useMemo(() => {\n    return step !== \"custom\";\n  }, [step]);\n\n  const handleShow = useCallback(() => {\n    setShowDatePicker(!showDatePicker);\n    if (fromDate) {\n      setMonth(fromDate.toDate());\n    }\n  }, [setShowDatePicker, showDatePicker, fromDate]);\n\n  const closeMenu = useCallback(() => {\n    setShowDatePicker(false);\n  }, []);\n\n  const onMonthChange = useCallback(\n    (m: Date) => {\n      setMonth(m);\n    },\n    [setMonth]\n  );\n\n  useEffect(() => {\n    setFromDate(moment(from));\n    setToDate(moment(to));\n  }, [from, to]);\n\n  const dateStepperWidth = (\n    fromDay: Moment,\n    toDay: Moment,\n    range: string\n  ): { minWidth: string } => {\n    if (\n      fromDay.year() !== moment().year() ||\n      toDay.year() !== moment().year()\n    ) {\n      switch (range) {\n        case \"daily\":\n        case \"monthly\":\n          return { minWidth: \"122px\" };\n        case \"weekly\":\n        case \"custom\":\n          return { minWidth: \"232px\" };\n      }\n    }\n    switch (range) {\n      case \"monthly\":\n        return { minWidth: \"122px\" };\n      case \"weekly\":\n      case \"custom\":\n        return { minWidth: \"182px\" };\n    }\n\n    return { minWidth: \"102px\" };\n  };\n  const isDisabled = useCallback(\n    (day: Date): boolean => {\n      const dayFormat = moment(day).format(\"YYYY-MM-DD\");\n\n      const isBefore =\n        maxValue instanceof Date &&\n        moment(moment(maxValue).format(\"YYYY-MM-DD\")).isBefore(dayFormat);\n      const isAfter =\n        minValue instanceof Date &&\n        moment(moment(minValue).format(\"YYYY-MM-DD\")).isAfter(dayFormat);\n\n      return isBefore || isAfter;\n    },\n    [maxValue, minValue]\n  );\n\n  const modifiers = useMemo(() => {\n    return {\n      [customClassNames.disabled]: (day: Date): boolean => {\n        return isDisabled(day);\n      },\n      [customClassNames.nonWorkingDay]: (day: Date): boolean => {\n        return isDisabled(day);\n      },\n    };\n  }, [isDisabled]);\n\n  return (\n    <StyledButtonGroup className={classNames(\"c-date-stepper\", className)}>\n      {renderLeftRightButtons ? (\n        <StyledControl\n          type=\"button\"\n          variant=\"secondary\"\n          onClick={onLeftClickHandler}\n          disabled={isBeforeMinDate}\n        >\n          <ArrowLeftIcon />\n        </StyledControl>\n      ) : null}\n      <StyledDiv\n        $isTargetable={step === \"yearly\" || !withDatePicker}\n        $isRounded={step === \"custom\"}\n        style={dateStepperWidth(fromDate, toDate, step)}\n      >\n        {withDatePicker ? (\n          <StyledMenu\n            target={\n              <StyledButton type=\"button\">\n                <span>{getDateFormatted}</span>\n              </StyledButton>\n            }\n            open={showDatePicker}\n            onOpen={handleShow}\n            onClose={closeMenu}\n            popperClassName={popperClassName}\n            position={position}\n          >\n            <DatePicker\n              month={month}\n              localeUtils={MomentLocaleUtils}\n              locale=\"en\"\n              selectionMode={step}\n              className={datePickerClass}\n              selectedDays={{ from: fromDate.toDate(), to: toDate.toDate() }}\n              onChange={onDatePickerChange}\n              onMonthChange={onMonthChange}\n              firstDayOfWeek={period === \"week\" ? 0 : 1}\n              modifiers={modifiers}\n              dateRequired\n              fixedWeeks\n            />\n          </StyledMenu>\n        ) : (\n          <StyledSpan>{getDateFormatted}</StyledSpan>\n        )}\n      </StyledDiv>\n      {renderLeftRightButtons ? (\n        <StyledControl\n          type=\"button\"\n          variant=\"secondary\"\n          onClick={onRightClickHandler}\n          disabled={isAfterMaxDate}\n        >\n          <ArrowRightIcon />\n        </StyledControl>\n      ) : null}\n    </StyledButtonGroup>\n  );\n};\n\nDateStepper.displayName = \"DateStepper\";\n"],"mappings":"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"}

package/dist/esm/components/Steppers/DateStepper/Styles.d.ts

@@ -8,5 +8,6 @@ interface StyledDiv {
     $isRounded: boolean;
 }
 export declare const StyledDiv: import("styled-components").StyledComponent<"div", any, StyledDiv, never>;
+export declare const StyledControl: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../Button").IButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
 export {};
 //# sourceMappingURL=Styles.d.ts.map

package/dist/esm/components/Steppers/DateStepper/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Steppers/DateStepper/Styles.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,YAAY,uEAmDxB,CAAC;AAEF,eAAO,MAAM,UAAU,6GAOtB,CAAC;AAEF,eAAO,MAAM,iBAAiB,6wJAQ7B,CAAC;AAEF,eAAO,MAAM,UAAU,qEAGtB,CAAC;AAEF,UAAU,SAAS;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,2EAmErB,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Steppers/DateStepper/Styles.ts"],"names":[],"mappings":";AASA,eAAO,MAAM,YAAY,uEAmDxB,CAAC;AAEF,eAAO,MAAM,UAAU,6GAOtB,CAAC;AAEF,eAAO,MAAM,iBAAiB,6wJAQ7B,CAAC;AAEF,eAAO,MAAM,UAAU,qEAGtB,CAAC;AAEF,UAAU,SAAS;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,2EAwErB,CAAC;AAEF,eAAO,MAAM,aAAa,gMAEzB,CAAC"}

package/dist/esm/components/Steppers/DateStepper/Styles.js

@@ -2,7 +2,9 @@ import styled, { css } from "styled-components";
 import { ButtonGroup } from "../../ButtonGroup";
 import { FontStyle } from "../../FontStyle";
 import { BoxSizingStyle } from "../../BoxSizingStyle";
+import { screen } from "../../BreakPoints";
 import { Menu } from "../../Menu";
+import { Button } from "../../Button";
 export var StyledButton = styled.button.withConfig({
   displayName: "Styles__StyledButton",
   componentId: "sc-1v8h7mt-0"
@@ -43,7 +45,7 @@ export var StyledSpan = styled.span.withConfig({
 export var StyledDiv = styled.div.withConfig({
   displayName: "Styles__StyledDiv",
   componentId: "sc-1v8h7mt-4"
-})(["", " ", " ", " height:32px;transition:all 0.3s ease;background-color:transparent;border:solid 1px var(--color-theme-700);color:var(--color-theme-700);margin-right:-1px;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}&:hover{border-color:var(--color-primary);color:var(--color-primary);text-decoration:none;}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"], function (props) {
+})(["", " ", " ", " height:32px;transition:all 0.3s ease;background-color:transparent;border:solid 1px var(--color-theme-700);color:var(--color-theme-700);margin-right:-1px;display:none;", "{display:block;}svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}&:hover{border-color:var(--color-primary);color:var(--color-primary);text-decoration:none;}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"], function (props) {
   return props.$isTargetable && css(["", ""], {
     "pointerEvents": "none"
   });
@@ -66,10 +68,15 @@ export var StyledDiv = styled.div.withConfig({
   "cursor": "pointer",
   "borderWidth": "1px",
   "borderStyle": "solid"
-});
+}, screen.md);
+export var StyledControl = styled(Button).withConfig({
+  displayName: "Styles__StyledControl",
+  componentId: "sc-1v8h7mt-5"
+})(["border-radius:var(--ac-br-8);"]);
 StyledButtonGroup.displayName = "StyledButtonGroup";
 StyledSpan.displayName = "StyledSpan";
 StyledDiv.displayName = "StyledDiv";
 StyledMenu.displayName = "StyledMenu";
 StyledButton.displayName = "StyledButton";
+StyledControl.displayName = "StyledControl";
 //# sourceMappingURL=Styles.js.map

package/dist/esm/components/Steppers/DateStepper/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","ButtonGroup","FontStyle","BoxSizingStyle","Menu","StyledButton","button","StyledMenu","StyledButtonGroup","StyledSpan","span","StyledDiv","div","props","$isTargetable","$isRounded","displayName"],"sources":["../../../../../src/components/Steppers/DateStepper/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ButtonGroup } from \"../../ButtonGroup\";\nimport { FontStyle } from \"../../FontStyle\";\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\nimport tw from \"twin.macro\";\nimport { Menu } from \"../../Menu\";\n\nexport const StyledButton = styled.button`\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${tw`\n    tw-relative\n    tw-antialiased\n    tw-align-middle\n    tw-font-medium\n    tw-inline-block\n    tw-leading-none\n    tw-m-0\n    tw-no-underline\n    tw-text-sm\n    tw-select-none\n    tw-cursor-pointer\n    tw-text-center\n  `}\n\n  color: var(--color-theme-700);\n  margin: 0;\n  padding: 0;\n  background: none;\n  width: 100%;\n  height: auto;\n  border: none;\n  height: 30px;\n  line-height: 1;\n  transition: all 0.3s ease;\n\n  svg {\n    fill: currentColor;\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: 50%;\n    pointer-events: none;\n  }\n`;\n\nexport const StyledMenu = styled(Menu)`\n  ${tw`\n    tw-w-auto\n    tw-h-auto\n    tw-py-4\n    tw-px-2\n  `}\n`;\n\nexport const StyledButtonGroup = styled(ButtonGroup)`\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  button:hover {\n    position: relative;\n    z-index: 1;\n  }\n`;\n\nexport const StyledSpan = styled.span`\n  line-height: 30px;\n  color: var(--color-theme-700);\n`;\n\ninterface StyledDiv {\n  $isTargetable: boolean;\n  $isRounded: boolean;\n}\n\nexport const StyledDiv = styled.div<StyledDiv>`\n  ${(props) =>\n    props.$isTargetable &&\n    css`\n      ${tw`tw-pointer-events-none`}\n    `}\n\n  ${(props) =>\n    props.$isRounded &&\n    css`\n      border-radius: var(--ac-br-rounded);\n    `}\n\n  ${tw`\n    tw-relative\n    tw-text-center\n    tw-p-0\n    tw-antialiased\n    tw-align-middle\n    tw-font-medium\n    tw-inline-block\n    tw-leading-none\n    tw-m-0\n    tw-no-underline\n    tw-text-sm\n    tw-select-none\n    tw-cursor-pointer\n    tw-border\n    tw-border-solid\n  `}\n\n  height: 32px;\n  transition: all 0.3s ease;\n  background-color: transparent;\n  border: solid 1px var(--color-theme-700);\n  color: var(--color-theme-700);\n  margin-right: -1px;\n\n  svg {\n    fill: currentColor;\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: 50%;\n    pointer-events: none;\n  }\n\n  &:hover {\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n    text-decoration: none;\n  }\n\n  &:active {\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n    background-color: var(--color-primary-200);\n  }\n`;\n\nStyledButtonGroup.displayName = \"StyledButtonGroup\";\nStyledSpan.displayName = \"StyledSpan\";\nStyledDiv.displayName = \"StyledDiv\";\nStyledMenu.displayName = \"StyledMenu\";\nStyledButton.displayName = \"StyledButton\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,cAAc,QAAQ,sBAAsB;AAErD,SAASC,IAAI,QAAQ,YAAY;AAEjC,OAAO,IAAMC,YAAY,GAAGN,MAAM,CAACO,MAAM;EAAA;EAAA;AAAA,kVACrCJ,SAAS,EACTC,cAAc,EAEZ;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAaJ,CAAC,CAkCF;AAED,OAAO,IAAMI,UAAU,GAAGR,MAAM,CAACK,IAAI,CAAC;EAAA;EAAA;AAAA,aAChC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAKJ,CAAC,CACF;AAED,OAAO,IAAMI,iBAAiB,GAAGT,MAAM,CAACE,WAAW,CAAC;EAAA;EAAA;AAAA,6DAChDC,SAAS,EACTC,cAAc,CAMjB;AAED,OAAO,IAAMM,UAAU,GAAGV,MAAM,CAACW,IAAI;EAAA;EAAA;AAAA,sDAGpC;AAOD,OAAO,IAAMC,SAAS,GAAGZ,MAAM,CAACa,GAAG;EAAA;EAAA;AAAA,mgBAC/B,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,aAAa,IACnBd,GAAG,WACG;IAAA;EAAuB,CAAC,CAC7B;AAAA,GAED,UAACa,KAAK;EAAA,OACNA,KAAK,CAACE,UAAU,IAChBf,GAAG,yCAEF;AAAA,GAEC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAgBJ,CAAC,CAsCF;AAEDQ,iBAAiB,CAACQ,WAAW,GAAG,mBAAmB;AACnDP,UAAU,CAACO,WAAW,GAAG,YAAY;AACrCL,SAAS,CAACK,WAAW,GAAG,WAAW;AACnCT,UAAU,CAACS,WAAW,GAAG,YAAY;AACrCX,YAAY,CAACW,WAAW,GAAG,cAAc"}
+{"version":3,"file":"Styles.js","names":["styled","css","ButtonGroup","FontStyle","BoxSizingStyle","screen","Menu","Button","StyledButton","button","StyledMenu","StyledButtonGroup","StyledSpan","span","StyledDiv","div","props","$isTargetable","$isRounded","md","StyledControl","displayName"],"sources":["../../../../../src/components/Steppers/DateStepper/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ButtonGroup } from \"../../ButtonGroup\";\nimport { FontStyle } from \"../../FontStyle\";\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\nimport { screen } from \"../../BreakPoints\";\nimport tw from \"twin.macro\";\nimport { Menu } from \"../../Menu\";\nimport { Button } from \"../../Button\";\n\nexport const StyledButton = styled.button`\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${tw`\n    tw-relative\n    tw-antialiased\n    tw-align-middle\n    tw-font-medium\n    tw-inline-block\n    tw-leading-none\n    tw-m-0\n    tw-no-underline\n    tw-text-sm\n    tw-select-none\n    tw-cursor-pointer\n    tw-text-center\n  `}\n\n  color: var(--color-theme-700);\n  margin: 0;\n  padding: 0;\n  background: none;\n  width: 100%;\n  height: auto;\n  border: none;\n  height: 30px;\n  line-height: 1;\n  transition: all 0.3s ease;\n\n  svg {\n    fill: currentColor;\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: 50%;\n    pointer-events: none;\n  }\n`;\n\nexport const StyledMenu = styled(Menu)`\n  ${tw`\n    tw-w-auto\n    tw-h-auto\n    tw-py-4\n    tw-px-2\n  `}\n`;\n\nexport const StyledButtonGroup = styled(ButtonGroup)`\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  button:hover {\n    position: relative;\n    z-index: 1;\n  }\n`;\n\nexport const StyledSpan = styled.span`\n  line-height: 30px;\n  color: var(--color-theme-700);\n`;\n\ninterface StyledDiv {\n  $isTargetable: boolean;\n  $isRounded: boolean;\n}\n\nexport const StyledDiv = styled.div<StyledDiv>`\n  ${(props) =>\n    props.$isTargetable &&\n    css`\n      ${tw`tw-pointer-events-none`}\n    `}\n\n  ${(props) =>\n    props.$isRounded &&\n    css`\n      border-radius: var(--ac-br-rounded);\n    `}\n\n  ${tw`\n    tw-relative\n    tw-text-center\n    tw-p-0\n    tw-antialiased\n    tw-align-middle\n    tw-font-medium\n    tw-inline-block\n    tw-leading-none\n    tw-m-0\n    tw-no-underline\n    tw-text-sm\n    tw-select-none\n    tw-cursor-pointer\n    tw-border\n    tw-border-solid\n  `}\n\n  height: 32px;\n  transition: all 0.3s ease;\n  background-color: transparent;\n  border: solid 1px var(--color-theme-700);\n  color: var(--color-theme-700);\n  margin-right: -1px;\n  display: none;\n\n  ${screen.md} {\n    display: block;\n  }\n\n  svg {\n    fill: currentColor;\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: 50%;\n    pointer-events: none;\n  }\n\n  &:hover {\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n    text-decoration: none;\n  }\n\n  &:active {\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n    background-color: var(--color-primary-200);\n  }\n`;\n\nexport const StyledControl = styled(Button)`\n  border-radius: var(--ac-br-8);\n`;\n\nStyledButtonGroup.displayName = \"StyledButtonGroup\";\nStyledSpan.displayName = \"StyledSpan\";\nStyledDiv.displayName = \"StyledDiv\";\nStyledMenu.displayName = \"StyledMenu\";\nStyledButton.displayName = \"StyledButton\";\nStyledControl.displayName = \"StyledControl\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,SAASC,IAAI,QAAQ,YAAY;AACjC,SAASC,MAAM,QAAQ,cAAc;AAErC,OAAO,IAAMC,YAAY,GAAGR,MAAM,CAACS,MAAM;EAAA;EAAA;AAAA,kVACrCN,SAAS,EACTC,cAAc,EAEZ;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAaJ,CAAC,CAkCF;AAED,OAAO,IAAMM,UAAU,GAAGV,MAAM,CAACM,IAAI,CAAC;EAAA;EAAA;AAAA,aAChC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAKJ,CAAC,CACF;AAED,OAAO,IAAMK,iBAAiB,GAAGX,MAAM,CAACE,WAAW,CAAC;EAAA;EAAA;AAAA,6DAChDC,SAAS,EACTC,cAAc,CAMjB;AAED,OAAO,IAAMQ,UAAU,GAAGZ,MAAM,CAACa,IAAI;EAAA;EAAA;AAAA,sDAGpC;AAOD,OAAO,IAAMC,SAAS,GAAGd,MAAM,CAACe,GAAG;EAAA;EAAA;AAAA,oiBAC/B,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,aAAa,IACnBhB,GAAG,WACG;IAAA;EAAuB,CAAC,CAC7B;AAAA,GAED,UAACe,KAAK;EAAA,OACNA,KAAK,CAACE,UAAU,IAChBjB,GAAG,yCAEF;AAAA,GAEC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAgBJ,CAAC,EAUCI,MAAM,CAACc,EAAE,CAiCZ;AAED,OAAO,IAAMC,aAAa,GAAGpB,MAAM,CAACO,MAAM,CAAC;EAAA;EAAA;AAAA,qCAE1C;AAEDI,iBAAiB,CAACU,WAAW,GAAG,mBAAmB;AACnDT,UAAU,CAACS,WAAW,GAAG,YAAY;AACrCP,SAAS,CAACO,WAAW,GAAG,WAAW;AACnCX,UAAU,CAACW,WAAW,GAAG,YAAY;AACrCb,YAAY,CAACa,WAAW,GAAG,cAAc;AACzCD,aAAa,CAACC,WAAW,GAAG,eAAe"}

package/dist/index.js

@@ -4838,6 +4838,21 @@
   };
   DatePicker.displayName = "DatePicker";
 
+  var size = {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    xxl: "1536px"
+  };
+  var screen = {
+    sm: "@media (min-width: ".concat(size.sm, ")"),
+    md: "@media (min-width: ".concat(size.md, ")"),
+    lg: "@media (min-width: ".concat(size.lg, ")"),
+    xl: "@media (min-width: ".concat(size.xl, ")"),
+    xxl: "@media (min-width: ".concat(size.xxl, ")")
+  };
+
   var StyledButton$1 = styled__default["default"].button.withConfig({
     displayName: "Styles__StyledButton",
     componentId: "sc-1v8h7mt-0"
@@ -4878,7 +4893,7 @@
   var StyledDiv$1 = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledDiv",
     componentId: "sc-1v8h7mt-4"
-  })(["", " ", " ", " height:32px;transition:all 0.3s ease;background-color:transparent;border:solid 1px var(--color-theme-700);color:var(--color-theme-700);margin-right:-1px;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}&:hover{border-color:var(--color-primary);color:var(--color-primary);text-decoration:none;}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"], function (props) {
+  })(["", " ", " ", " height:32px;transition:all 0.3s ease;background-color:transparent;border:solid 1px var(--color-theme-700);color:var(--color-theme-700);margin-right:-1px;display:none;", "{display:block;}svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}&:hover{border-color:var(--color-primary);color:var(--color-primary);text-decoration:none;}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"], function (props) {
     return props.$isTargetable && styled.css(["", ""], {
       "pointerEvents": "none"
     });
@@ -4901,12 +4916,17 @@
     "cursor": "pointer",
     "borderWidth": "1px",
     "borderStyle": "solid"
-  });
+  }, screen.md);
+  var StyledControl = styled__default["default"](Button).withConfig({
+    displayName: "Styles__StyledControl",
+    componentId: "sc-1v8h7mt-5"
+  })(["border-radius:var(--ac-br-8);"]);
   StyledButtonGroup.displayName = "StyledButtonGroup";
   StyledSpan$1.displayName = "StyledSpan";
   StyledDiv$1.displayName = "StyledDiv";
   StyledMenu$1.displayName = "StyledMenu";
   StyledButton$1.displayName = "StyledButton";
+  StyledControl.displayName = "StyledControl";
 
   /**
    * This component allow you to select date range. It accepts two parameters "from" and "to" as valid format
@@ -5124,7 +5144,7 @@
     }, [isDisabled]);
     return /*#__PURE__*/React__default["default"].createElement(StyledButtonGroup, {
       className: classNames__default["default"]("c-date-stepper", className)
-    }, renderLeftRightButtons ? /*#__PURE__*/React__default["default"].createElement(Button, {
+    }, renderLeftRightButtons ? /*#__PURE__*/React__default["default"].createElement(StyledControl, {
       type: "button",
       variant: "secondary",
       onClick: onLeftClickHandler,
@@ -5158,7 +5178,7 @@
       modifiers: modifiers,
       dateRequired: true,
       fixedWeeks: true
-    })) : /*#__PURE__*/React__default["default"].createElement(StyledSpan$1, null, getDateFormatted)), renderLeftRightButtons ? /*#__PURE__*/React__default["default"].createElement(Button, {
+    })) : /*#__PURE__*/React__default["default"].createElement(StyledSpan$1, null, getDateFormatted)), renderLeftRightButtons ? /*#__PURE__*/React__default["default"].createElement(StyledControl, {
       type: "button",
       variant: "secondary",
       onClick: onRightClickHandler,
@@ -9148,21 +9168,6 @@
   };
   SlideFromTop.displayName = "SlideFromTop";
 
-  var size = {
-    sm: "640px",
-    md: "768px",
-    lg: "1024px",
-    xl: "1280px",
-    xxl: "1536px"
-  };
-  var screen = {
-    sm: "@media (min-width: ".concat(size.sm, ")"),
-    md: "@media (min-width: ".concat(size.md, ")"),
-    lg: "@media (min-width: ".concat(size.lg, ")"),
-    xl: "@media (min-width: ".concat(size.xl, ")"),
-    xxl: "@media (min-width: ".concat(size.xxl, ")")
-  };
-
   var StyledDialog = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledDialog",
     componentId: "sc-jwpvgm-0"