@npm_leadtech/legal-lib-components 4.1.7 → 4.1.11

package/dist/src/components/atoms/CardPane/CardPane.scss

@@ -0,0 +1,106 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.marker {
+  display: inline-block;
+  margin-left: -10px;
+  @-moz-document url-prefix() {
+    margin-left: 0px;
+  }
+  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    margin-left: 0px;
+  }
+}
+.position {
+  margin-left: 2px;
+  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    margin-left: 15px;
+  }
+}
+@-moz-document url-prefix() {
+  .position {
+    margin-left: 15px;
+  }
+}
+
+.pane {
+  align-items: flex-start;
+  border-top: 1px solid get-color(neutral, neutral-4);
+  display: flex;
+  font-family: $font-sans;
+  padding: 1.5rem 0;
+  flex-direction: row;
+  flex-wrap: wrap;
+  &-wrapper {
+    margin-top: 1rem;
+    padding-right: 0;
+    width: 100%;
+    @include portrait-tablets {
+      margin-top: 0;
+      padding-right: 0.875rem;
+      width: 50%;
+    }
+    @include landscape-tablets {
+      padding-right: 0.55rem;
+    }
+    @include laptop {
+      padding-right: 0.875rem;
+    }
+    &:first-child {
+      margin-top: 0;
+    }
+    &:nth-child(2) {
+      text-align: right;
+      @media (min-width: #{$xxs}) and (max-width: #{$sm}) {
+        text-align: left;
+      }
+    }
+    &:nth-child(3) {
+      margin-top: 30px;
+    }
+    &:last-child {
+      padding-right: 0;
+    }
+    span {
+      display: block;
+      &.marker {
+        display: inline-block;
+        text-indent: -0.625rem;
+      }
+    }
+  }
+  &--title {
+    color: get-color(neutral, neutral-2);
+    font-size: 0.875rem;
+    line-height: 1.29;
+    @include portrait-tablets {
+      font-size: 0.65rem;
+    }
+    @include landscape-tablets {
+      font-size: 0.75rem;
+    }
+    @include laptop {
+      font-size: 0.875rem;
+    }
+  }
+  &--description {
+    color: get-color(neutral);
+    font-size: 1rem;
+    font-weight: 700;
+    letter-spacing: -0.3px;
+    line-height: 1.38;
+    margin-top: 2px;
+
+    &--active {
+      color: get-color(primary);
+    }
+
+    &--inactive {
+      color: get-color(error);
+    }
+  }
+
+  @include portrait-tablets {
+    flex-direction: row;
+  }
+}

package/dist/src/components/atoms/CardPane/CardPane.tsx

@@ -0,0 +1,19 @@
+import React, { type FC } from 'react'
+
+import CardPaneInfo from './CardPaneInfo'
+import { type CardPaneProps } from './CardPaneProps.types'
+// import './CardPane.scss'
+
+const CardPane: FC<CardPaneProps> = ({ data }) => {
+  if (data?.length === 0) return null
+
+  return (
+    <div className='pane'>
+      {data.map((item) => (
+        <CardPaneInfo key={item.id} {...item} />
+      ))}
+    </div>
+  )
+}
+
+export default CardPane

package/dist/src/components/atoms/CardPane/CardPaneInfo.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CardPaneInfo = ({ description, subdescription, id, title }) => {
+    if (description === 'Active' || description === 'Inactive') {
+        let descriptionClass;
+        if (description === 'Active') {
+            descriptionClass = 'pane--description--active';
+        }
+        else if (description === 'Inactive') {
+            descriptionClass = 'pane--description--inactive';
+        }
+        return (_jsxs("div", { className: 'pane-wrapper', children: [_jsx("div", { className: 'pane--title', children: title }), _jsx("div", { "data-testid": 'description-div', className: descriptionClass, children: _jsx("li", { className: 'position', children: _jsx("div", { className: 'marker', children: description }) }) })] }, id));
+    }
+    return (_jsxs("div", { className: 'pane-wrapper', children: [_jsx("div", { className: 'pane--title', children: title }), _jsxs("div", { className: 'pane--description', children: [description, subdescription !== undefined && _jsx("span", { className: 'pane--description--subdescription', children: subdescription })] })] }, id));
+};
+export default CardPaneInfo;

package/dist/src/components/atoms/CardPane/CardPaneInfo.tsx

@@ -0,0 +1,36 @@
+import React, { type FC } from 'react'
+
+import { type CardPaneInfoProps } from './CardPaneProps.types'
+
+const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id, title }) => {
+  if (description === 'Active' || description === 'Inactive') {
+    let descriptionClass
+    if (description === 'Active') {
+      descriptionClass = 'pane--description--active'
+    } else if (description === 'Inactive') {
+      descriptionClass = 'pane--description--inactive'
+    }
+    return (
+      <div key={id} className='pane-wrapper'>
+        <div className='pane--title'>{title}</div>
+        <div data-testid='description-div' className={descriptionClass}>
+          <li className='position'>
+            <div className='marker'>{description}</div>
+          </li>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div key={id} className='pane-wrapper'>
+      <div className='pane--title'>{title}</div>
+      <div className='pane--description'>
+        {description}
+        {subdescription !== undefined && <span className='pane--description--subdescription'>{subdescription}</span>}
+      </div>
+    </div>
+  )
+}
+
+export default CardPaneInfo

package/dist/src/components/atoms/CardPane/CardPaneProps.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/atoms/CardPane/CardPaneProps.types.ts

@@ -0,0 +1,10 @@
+export interface CardPaneProps {
+  data: CardPaneInfoProps[]
+}
+
+export interface CardPaneInfoProps {
+  description: string
+  id: string
+  title: string
+  subdescription?: string
+}

package/dist/src/components/atoms/CardPane/index.js

@@ -0,0 +1 @@
+export { default as CardPane } from './CardPane';

package/dist/src/components/atoms/CardPane/index.ts

@@ -0,0 +1,2 @@
+export { default as CardPane } from './CardPane'
+export { type CardPaneInfoProps, type CardPaneProps } from './CardPaneProps.types'

package/dist/src/components/atoms/Checkbox/Checkbox.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import { type CheckboxProps } from './CheckboxProps.types';
+declare const Checkbox: FC<CheckboxProps>;
+export default Checkbox;

package/dist/src/components/atoms/Checkbox/Checkbox.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// import './Checkbox.scss'
+const Checkbox = ({ name, className = '', value, validate = false, tooltip = undefined, isValidGroup = false, label = '', onChange, disabled, dataQa }) => {
+    const classStyle = `${validate ? 'e-checkbox' : 'e-checkbox --is-invalid'} ${className} ${!isValidGroup ? '--group-invalid' : ''} `;
+    return (_jsxs("div", { className: classStyle, children: [tooltip !== undefined && _jsx("p", { className: 'tooltip-form sans-serif --small', children: tooltip }), _jsx("input", { type: 'checkbox', name: name, id: name, onChange: onChange, value: value === '1' ? value : '0', checked: value === '1', disabled: disabled, "data-qa": dataQa }), _jsx("label", { htmlFor: name, "data-qa": name, children: _jsx("span", { dangerouslySetInnerHTML: { __html: label } }) })] }));
+};
+export default Checkbox;

package/dist/src/components/atoms/Checkbox/Checkbox.scss

@@ -0,0 +1,132 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.e-checkbox {
+  display: flex;
+  flex-direction: column-reverse;
+  justify-content: flex-end;
+  position: relative;
+  font-size: 1rem;
+  margin-bottom: 0.5rem;
+
+  &-wrapper {
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  input {
+    &:not(:checked),
+    &:checked {
+      position: absolute;
+      left: -9999px;
+    }
+
+    &:not(:checked) + label,
+    &:checked + label {
+      cursor: pointer;
+      font-size: 1rem;
+      font-weight: normal;
+      display: flex;
+      position: relative;
+      padding-top: 0;
+      top: 35%;
+      padding-left: 1.5rem;
+      margin-right: 1.5rem;
+
+      span {
+        margin-left: 0.5rem;
+      }
+
+      &:before {
+        content: '';
+        background-color: get-color(others, white);
+        border: 1px solid get-color(neutral);
+        left: 1px;
+        position: absolute;
+        top: 0;
+        height: 1.5rem;
+        width: 1.5rem;
+        border-radius: $global-border-radius;
+      }
+
+      &:after {
+        background-color: currentColor;
+        content: '';
+        padding: 0 0.5em;
+        margin: 0 0.125rem;
+        -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogc2tldGNodG9vbCA2MCAoMTAxMDEwKSAtIGh0dHBzOi8vc2tldGNoLmNvbSAtLT4KICAgIDx0aXRsZT5BNzI2QkEzMC0zMDVGLTQ2OEQtQURCMi1FMzU3ODVCQjFFQjlfb3V0bGluZWQ8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIHNrZXRjaHRvb2wuPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPHBvbHlnb24gaWQ9InBhdGgtMSIgcG9pbnRzPSI1Ljg2NjY2Njc4IDEwLjU5OTk5OTkgMy4wNjY2NjY3MiA3LjgwMDAwMDAxIDIuMTMzMzMzMzcgOC43MzMzMzMzMSA1Ljg2NjY2Njc4IDEyLjQ2NjY2NjUgMTMuODY2NjY3IDQuNDY2NjY2NzcgMTIuOTMzMzMzNiAzLjUzMzMzMzQ2Ij48L3BvbHlnb24+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iQXNzZXQtQXJ0Ym9hcmQtUGFnZSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Imljb24vZG9uZV8yNHB4Ij4KICAgICAgICAgICAgPG1hc2sgaWQ9Im1hc2stMiIgZmlsbD0id2hpdGUiPgogICAgICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgPC9tYXNrPgogICAgICAgICAgICA8ZyBpZD0iaWNvbi9hY3Rpb24vZG9uZV8yNHB4IiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvZz4KICAgICAgICAgICAgPGcgaWQ9IuKGsy1Db2xvci1Db2xvci0vLUljb25zLS8tTmV1dHJhbHMtLy1XaGl0ZSIgbWFzaz0idXJsKCNtYXNrLTIpIiBmaWxsPSIjMDU2NDZFIj4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PC9yZWN0PgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=);
+        mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogc2tldGNodG9vbCA2MCAoMTAxMDEwKSAtIGh0dHBzOi8vc2tldGNoLmNvbSAtLT4KICAgIDx0aXRsZT5BNzI2QkEzMC0zMDVGLTQ2OEQtQURCMi1FMzU3ODVCQjFFQjlfb3V0bGluZWQ8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIHNrZXRjaHRvb2wuPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPHBvbHlnb24gaWQ9InBhdGgtMSIgcG9pbnRzPSI1Ljg2NjY2Njc4IDEwLjU5OTk5OTkgMy4wNjY2NjY3MiA3LjgwMDAwMDAxIDIuMTMzMzMzMzcgOC43MzMzMzMzMSA1Ljg2NjY2Njc4IDEyLjQ2NjY2NjUgMTMuODY2NjY3IDQuNDY2NjY2NzcgMTIuOTMzMzMzNiAzLjUzMzMzMzQ2Ij48L3BvbHlnb24+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iQXNzZXQtQXJ0Ym9hcmQtUGFnZSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Imljb24vZG9uZV8yNHB4Ij4KICAgICAgICAgICAgPG1hc2sgaWQ9Im1hc2stMiIgZmlsbD0id2hpdGUiPgogICAgICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgPC9tYXNrPgogICAgICAgICAgICA8ZyBpZD0iaWNvbi9hY3Rpb24vZG9uZV8yNHB4IiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvZz4KICAgICAgICAgICAgPGcgaWQ9IuKGsy1Db2xvci1Db2xvci0vLUljb25zLS8tTmV1dHJhbHMtLy1XaGl0ZSIgbWFzaz0idXJsKCNtYXNrLTIpIiBmaWxsPSIjMDU2NDZFIj4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjAiIHk9IjAiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PC9yZWN0PgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=);
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        mask-position: center;
+        clip-path: padding-box inset(0.28125em 0);
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        left: 0.09rem;
+        top: 2px;
+        color: get-color(primary);
+      }
+    }
+
+    &:not(:checked) {
+      & + label {
+        &:after {
+          opacity: 0;
+          transform: scale(0);
+          top: 3px;
+          left: 0.25rem;
+        }
+
+        &:hover {
+          &:before {
+            background-color: get-color(primary, main-light-5);
+          }
+        }
+      }
+    }
+
+    &:checked {
+      & + label {
+        &:after {
+          opacity: 1;
+          transform: scale(1);
+        }
+
+        &:before {
+          background-color: get-color(primary, main-light-5);
+          border: 1.5px solid get-color(primary);
+          border-radius: $global-border-radius;
+        }
+      }
+    }
+
+    &[disabled] {
+      & + label {
+        opacity: 0.4;
+
+        &:before,
+        &:after {
+          opacity: 0.7;
+        }
+      }
+    }
+  }
+
+  &.--is-invalid,
+  &.--group-invalid {
+    input {
+      &:not(:checked) + label,
+      &:checked + label {
+        &:before {
+          border: 2px solid get-color(error);
+        }
+      }
+    }
+  }
+
+  .tooltip-form {
+    margin-top: 0;
+  }
+}

package/dist/src/components/atoms/Checkbox/Checkbox.tsx

@@ -0,0 +1,43 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React, { type FC } from 'react'
+
+import { type CheckboxProps } from './CheckboxProps.types'
+// import './Checkbox.scss'
+
+const Checkbox: FC<CheckboxProps> = ({
+  name,
+  className = '',
+  value,
+  validate = false,
+  tooltip = undefined,
+  isValidGroup = false,
+  label = '',
+  onChange,
+  disabled,
+  dataQa
+}) => {
+  const classStyle = `${validate ? 'e-checkbox' : 'e-checkbox --is-invalid'} ${className} ${
+    !isValidGroup ? '--group-invalid' : ''
+  } `
+
+  return (
+    <div className={classStyle}>
+      {tooltip !== undefined && <p className='tooltip-form sans-serif --small'>{tooltip}</p>}
+      <input
+        type='checkbox'
+        name={name}
+        id={name}
+        onChange={onChange}
+        value={value === '1' ? value : '0'}
+        checked={value === '1'}
+        disabled={disabled}
+        data-qa={dataQa}
+      />
+      <label htmlFor={name} data-qa={name}>
+        <span dangerouslySetInnerHTML={{ __html: label }} />
+      </label>
+    </div>
+  )
+}
+
+export default Checkbox

package/dist/src/components/atoms/Checkbox/CheckboxProps.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/atoms/Checkbox/CheckboxProps.types.ts

@@ -0,0 +1,13 @@
+export interface CheckboxProps {
+  dataQa: string
+  id?: string
+  name?: string
+  className?: string
+  value?: string
+  validate?: boolean
+  tooltip?: string
+  isValidGroup?: boolean
+  label?: string
+  onChange?: (e: any) => void
+  disabled?: boolean
+}

package/dist/src/components/atoms/Checkbox/index.js

@@ -0,0 +1 @@
+export { default as Checkbox } from './Checkbox';

package/dist/src/components/atoms/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { default as Checkbox } from './Checkbox'
+export { type CheckboxProps } from './CheckboxProps.types'

package/dist/src/components/atoms/DatePickerCustom/DatePickerCustom.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import { type DatePickerCustomProps } from './DatePickerCustomProps.types';
+declare const DatePickerCustom: FC<DatePickerCustomProps>;
+export default DatePickerCustom;

package/dist/src/components/atoms/DatePickerCustom/DatePickerCustom.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import DatePicker, { registerLocale } from 'react-datepicker';
+import { useState } from 'react';
+import { de } from 'date-fns/locale';
+// import './DatePickerCustom.scss'
+// import './DatepickerPlugin.scss'
+registerLocale('de', de);
+const DatePickerCustom = ({ class: className, dateFormat = 'MM/dd/yyyy', isStartDate = false, isValidGroup = false, label, locale = 'en', name, onChange, relatedDate, tooltip, type, validate = false, value }) => {
+    const [date, setDate] = useState(() => {
+        return typeof value === 'string' && value !== '' ? new Date(value) : null;
+    });
+    const returnYears = (currentYear) => {
+        const years = [];
+        const minYear = new Date().getFullYear() - 100;
+        const maxYear = new Date().getFullYear() + 500;
+        for (let i = minYear; i <= maxYear; i++) {
+            years.push(_jsx("option", { value: i, defaultValue: currentYear, children: i }, i));
+        }
+        return years;
+    };
+    const handleChange = (date) => {
+        setDate(date);
+        if (onChange != null) {
+            const dateObject = {
+                target: {
+                    name,
+                    value: date
+                }
+            };
+            onChange(dateObject);
+        }
+    };
+    const addDays = (date, days) => {
+        const result = new Date(date);
+        result.setDate(result.getDate() + days);
+        return result;
+    };
+    const classStyle = `${validate ? 'e-datepicker' : 'e-datepicker is-invalid'} ${className ?? ''} e-${type} ${!isValidGroup ? '--group-invalid' : ''}\``;
+    let minDate;
+    let maxDate;
+    if (relatedDate != null) {
+        if (isStartDate) {
+            maxDate = relatedDate;
+            maxDate = addDays(maxDate, -1);
+        }
+        else {
+            minDate = relatedDate;
+            minDate = addDays(minDate, 1);
+        }
+    }
+    const TooltipObject = tooltip !== undefined ? _jsx("p", { className: 'tooltip-form sans-serif --small', children: tooltip }) : '';
+    const actualYear = new Date().getFullYear();
+    const intlForMonths = new Intl.DateTimeFormat(locale, { month: 'long' });
+    const months = [...Array(12).keys()].map((monthIndex) => {
+        const monthName = intlForMonths.format(new Date(actualYear, monthIndex));
+        return {
+            monthName
+        };
+    });
+    return (_jsxs("div", { className: classStyle, "data-qa": name, children: [TooltipObject, _jsx(DatePicker, { locale: locale, dateFormat: dateFormat, renderCustomHeader: ({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => (_jsxs("div", { style: {
+                        margin: 10,
+                        display: 'flex',
+                        justifyContent: 'center'
+                    }, children: [_jsx("button", { className: 'DayPickerNavigation_leftButton', onClick: decreaseMonth, disabled: prevMonthButtonDisabled, children: '<' }), _jsx("select", { className: 'CalendarYear', value: date.getFullYear(), onChange: ({ target: { value } }) => {
+                                changeYear(Number(value));
+                            }, children: returnYears(date.getFullYear()) }), _jsx("select", { className: 'CalendarMonth', value: date.getMonth(), onChange: ({ target: { value } }) => {
+                                changeMonth(Number(value));
+                            }, children: months.map(({ monthName }, value) => (_jsx("option", { value: value, defaultValue: date.getMonth(), children: monthName }, monthName))) }), _jsx("button", { className: 'DayPickerNavigation_rightButton', onClick: increaseMonth, disabled: nextMonthButtonDisabled, children: '>' })] })), selected: date, minDate: minDate, maxDate: maxDate, onChange: (date) => {
+                    handleChange(date);
+                }, popperPlacement: 'bottom', popperModifiers: [
+                    {
+                        name: 'flip',
+                        options: {
+                            fallbackPlacements: ['bottom']
+                        }
+                    }
+                ] }), _jsx("div", { className: 'e-datepicker__inner', children: _jsx("label", { className: 'e-datepicker__label', children: label }) })] }));
+};
+export default DatePickerCustom;

package/dist/src/components/atoms/DatePickerCustom/DatePickerCustom.scss

@@ -0,0 +1,116 @@
+@import '../../../globalStyles/variables.scss';
+@import '../../../globalStyles/mediaqueries.scss';
+
+.e-datepicker {
+  max-width: 55%;
+  width: 100%;
+  display: flex;
+  flex-flow: column-reverse;
+  margin-bottom: 2rem;
+  &__inner {
+    margin-bottom: 0.5rem;
+  }
+  &__label {
+    font-weight: bold;
+  }
+
+  ul li {
+    margin: 0;
+
+    &::before {
+      background-color: transparent;
+    }
+  }
+
+  .react-datepicker {
+    border: 0.5px solid get-color(neutral, neutral-4);
+  }
+
+  .react-datepicker__input-container input {
+    color: get-color(neutral, main);
+    border-radius: 4px;
+    font-size: 1rem;
+    background-color: get-color(neutral, neutral-4);
+    height: 40px;
+    width: 100%;
+    padding: 0.75rem 0 0.75rem 0.75rem;
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48IS0tR2VuZXJhdG9yOiBza2V0Y2h0b29sIDYwICgxMDEwMTApIC0gaHR0cHM6Ly9za2V0Y2guY29tLS0+PHRpdGxlPjNEODAzNjU0LUI3NjEtNEZEQy05MThDLTc1QzUwMjdEODcyMDwvdGl0bGU+PGRlc2M+Q3JlYXRlZCB3aXRoIHNrZXRjaHRvb2wuPC9kZXNjPjxkZWZzPjxwYXRoIGQ9Ik0yMiwzIEwxOSwzIEwxOSwxIEwxNywxIEwxNywzIEw3LDMgTDcsMSBMNSwxIEw1LDMgTDIsMyBMMiwyMyBMMjIsMjMgTDIyLDMgWiBNMjAsMjEgTDQsMjEgTDQsOCBMMjAsOCBMMjAsMjEgWiIgaWQ9InBhdGgtMSIvPjwvZGVmcz48ZyBpZD0iQXNzZXQtQXJ0Ym9hcmQtUGFnZSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgaWQ9Imljb24vbmF2aWdhdGlvbi9leHBhbmRfbW9yZV8yNHB4LWljb24vYWN0aW9uL2NhbGVuZGFyX3RvZGF5XzI0cHgiPjxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj48dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiLz48L21hc2s+PGcgaWQ9Imljb24vYWN0aW9uL2NhbGVuZGFyX3RvZGF5XzI0cHgiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxnIGlkPSLihrMtQ29sb3ItY29sb3ItLy1JY29ucy0vLUJsYWNrLS8tSW5hY3RpdmUiIG1hc2s9InVybCgjbWFzay0yKSIgZmlsbD0iIzQzNDM0MyI+PHJlY3QgaWQ9IlJlY3RhbmdsZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+PC9nPjwvZz48L2c+PC9zdmc+);
+    background-position: 95% 50%;
+    background-repeat: no-repeat;
+    transition: box-shadow 0.3s ease;
+    box-shadow: 0 0 0 0 get-color(primary, main-light-4);
+    margin: 0.0005em;
+    border: none;
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px get-color(primary, main-light-1);
+    }
+  }
+
+  .react-datepicker__day {
+    font-size: 14px;
+    text-align: center;
+    border: 0.5px solid get-color(neutral, neutral-4);
+    width: 39px;
+    height: 38px;
+    border-collapse: collapse;
+    vertical-align: middle;
+    display: table-cell;
+    line-height: 1.7rem;
+  }
+
+  .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after {
+    border-bottom-color: get-color(others, white);
+  }
+
+  .react-datepicker__day--selected {
+    background-color: get-color(primary, main-light-2);
+    border: 1px double get-color(primary, main-light-2);
+
+    &:hover {
+      background-color: get-color(primary, main-light-2);
+    }
+  }
+
+  .react-datepicker__day--keyboard-selected {
+    background-color: inherit;
+    color: inherit;
+
+    &:hover {
+      border-radius: 0.3rem;
+      background-color: #f0f0f0;
+    }
+  }
+
+  .react-datepicker__month-container {
+    padding: 0 15px 15px;
+  }
+
+  .react-datepicker__month {
+    margin: 0;
+  }
+
+  .react-datepicker__header {
+    background-color: inherit;
+    border: none;
+
+    button {
+      border: 0.5px solid get-color(neutral, neutral-4);
+    }
+
+    select {
+      -webkit-appearance: menulist-button;
+      background-color: get-color(others, white);
+    }
+  }
+
+  .react-datepicker__day-name {
+    width: 33px;
+  }
+
+  .react-datepicker__day--outside-month {
+    color: get-color(neutral, neutral-3);
+    pointer-events: none;
+  }
+}