@stamcat/craftsman 0.0.27-alpha.13 → 0.0.27-alpha.15

package/src/components/index.d.ts

@@ -1,14 +1,15 @@
 export { Button } from './Button/Button';
 export { Input } from './Input/Input';
-export { InputPassword } from './Input/InputPassword';
+export { InputPassword } from './InputPassword/InputPassword';
 export { Loader } from './Loader/Loader';
-export { RadioButton } from './Input/RadioButton';
-export { Checkbox } from './Input/Checkbox';
-export { Textarea } from './Input/Textarea';
+export { RadioButton } from './RadioButton/RadioButton';
+export { Checkbox } from './Checkbox/Checkbox';
+export { Textarea } from './Textarea/Textarea';
 export { Text } from './Text/Text';
 export { Modal } from './Modal/Modal';
 export { Select } from './Select/Select';
-export { DatePicker } from './Input/DatePicker';
-export { InputPhone } from './Input/InputPhone';
+export { DatePicker } from './DatePicker/DatePicker';
+export { InputPhone } from './InputPhone/InputPhone';
 export { Pagination } from './Pagination/Pagination';
 export { Carousel } from './Carousel/Carousel';
+export { TimePicker } from './TimePicker/TimePicker';

package/src/utilities/validations.d.ts

@@ -1,5 +1,6 @@
 export declare function isEmpty(value: unknown): boolean;
 export declare function validateEmail(value: string): boolean;
+export declare function isTouchDevice(): boolean;
 export declare const getUnitLabel: (locale: Intl.LocalesArgument, unit: Intl.NumberFormatOptions["unit"], override?: string) => string;
 export declare const is24HourFormat: (locale: Intl.LocalesArgument) => boolean;
 export declare const getAmPmLabels: (locale: Intl.LocalesArgument) => [string, string];

package/src/utilities/validations.esm.js

@@ -5,14 +5,17 @@ function e(e) {
 function t(e) {
 	return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
 }
-var n = (e, t, n) => n ?? new Intl.NumberFormat(e, {
+function n() {
+	return typeof window < "u" && window.matchMedia("(pointer: coarse)").matches;
+}
+var r = (e, t, n) => n ?? new Intl.NumberFormat(e, {
 	style: "unit",
 	unit: t,
 	unitDisplay: "long"
-}).formatToParts(1).find((e) => e.type === "unit")?.value ?? String(t), r = (e) => {
+}).formatToParts(1).find((e) => e.type === "unit")?.value ?? String(t), i = (e) => {
 	let t = new Intl.DateTimeFormat(e, { hour: "numeric" }).resolvedOptions();
 	return t.hourCycle === "h23" || t.hourCycle === "h24";
-}, i = (e) => {
+}, a = (e) => {
 	let t = new Intl.DateTimeFormat(e, {
 		hour: "numeric",
 		hour12: !0
@@ -20,4 +23,4 @@ var n = (e, t, n) => n ?? new Intl.NumberFormat(e, {
 	return [t.formatToParts(new Date(2e3, 0, 1, 9)).find((e) => e.type === "dayPeriod")?.value ?? "AM", t.formatToParts(new Date(2e3, 0, 1, 21)).find((e) => e.type === "dayPeriod")?.value ?? "PM"];
 };
 //#endregion
-export { i as getAmPmLabels, n as getUnitLabel, r as is24HourFormat, e as isEmpty, t as validateEmail };
+export { a as getAmPmLabels, r as getUnitLabel, i as is24HourFormat, e as isEmpty, n as isTouchDevice, t as validateEmail };

package/src/components/Input/DatePicker.d.ts

@@ -1,8 +0,0 @@
-import { default as React } from 'react';
-import { LabeledInput } from './InputWrapper';
-import { DatePickerProps } from 'react-date-picker';
-export type InputProps = DatePickerProps & LabeledInput & {
-    id?: string;
-    style?: React.CSSProperties;
-};
-export declare const DatePicker: React.FC<InputProps>;

package/src/styles/global/components/_reactCalendar.css

@@ -1 +0,0 @@
-.react-calendar{background:#fff;border:1px solid #a0a096;width:350px;max-width:100%;font-family:Arial,Helvetica,sans-serif;line-height:1.125em}.react-calendar--doubleView{width:700px}.react-calendar--doubleView .react-calendar__viewContainer{margin:-.5em;display:flex}.react-calendar--doubleView .react-calendar__viewContainer>*{width:50%;margin:.5em}.react-calendar,.react-calendar *,.react-calendar :before,.react-calendar :after{box-sizing:border-box}.react-calendar button{border:0;outline:none;margin:0}.react-calendar button:enabled:hover{cursor:pointer}.react-calendar__navigation{height:44px;margin-bottom:1em;display:flex}.react-calendar__navigation button{background:0 0;min-width:44px}.react-calendar__navigation button:disabled{background-color:#f0f0f0}.react-calendar__navigation button:enabled:hover,.react-calendar__navigation button:enabled:focus{background-color:#e6e6e6}.react-calendar__month-view__weekdays{text-align:center;text-transform:uppercase;font:inherit;font-size:.75em;font-weight:700}.react-calendar__month-view__weekdays__weekday{padding:.5em}.react-calendar__month-view__weekNumbers .react-calendar__tile{font:inherit;justify-content:center;align-items:center;font-size:.75em;font-weight:700;display:flex}.react-calendar__month-view__days__day--weekend{color:#d10000}.react-calendar__month-view__days__day--neighboringMonth,.react-calendar__decade-view__years__year--neighboringDecade,.react-calendar__century-view__decades__decade--neighboringCentury{color:#757575}.react-calendar__year-view .react-calendar__tile,.react-calendar__decade-view .react-calendar__tile,.react-calendar__century-view .react-calendar__tile{padding:2em .5em}.react-calendar__tile{text-align:center;max-width:100%;font:inherit;background:0 0;padding:10px 6.6667px;font-size:.833em}.react-calendar__tile:disabled{color:#ababab;background-color:#f0f0f0}.react-calendar__month-view__days__day--neighboringMonth:disabled,.react-calendar__decade-view__years__year--neighboringDecade:disabled,.react-calendar__century-view__decades__decade--neighboringCentury:disabled{color:#cdcdcd}.react-calendar__tile:enabled:hover,.react-calendar__tile:enabled:focus{background-color:#e6e6e6}.react-calendar__tile--now{background:#ffff76}.react-calendar__tile--now:enabled:hover,.react-calendar__tile--now:enabled:focus{background:#ffffa9}.react-calendar__tile--hasActive{background:#76baff}.react-calendar__tile--hasActive:enabled:hover,.react-calendar__tile--hasActive:enabled:focus{background:#a9d4ff}.react-calendar__tile--active{color:#fff;background:#006edc}.react-calendar__tile--active:enabled:hover,.react-calendar__tile--active:enabled:focus{background:#1087ff}.react-calendar--selectRange .react-calendar__tile--hover{background-color:#e6e6e6}.react-calendar{border-color:var(--gray400)}.react-calendar button{justify-content:center}.react-calendar__month-view__days button.react-calendar__tile{height:50px}.react-calendar__month-view__days button.react-calendar__tile:hover,.react-calendar__month-view__days button.react-calendar__tile--active,.react-calendar__month-view__days button.react-calendar__tile--now{border-radius:50%}.react-datetime-picker button{color:unset}.react-datetime-picker button.react-calendar__tile--active{background-color:var(--blue500);color:var(--white)}.react-datetime-picker button.react-calendar__tile--active:hover{background-color:var(--blue500)}.react-datetime-picker button.react-calendar__tile--now{border:1px solid var(--text)}.react-datetime-picker button.react-calendar__tile--now:hover{background-color:var(--gray100)}.react-datetime-picker button.react-calendar__tile--hasActive{background:var(--blue500)}.react-datetime-picker button.react-calendar__tile--hasActive:hover{background:var(--blue300)}.react-datetime-picker button:hover{background-color:unset}.react-datetime-picker input[type=number]{appearance:textfield}.react-datetime-picker input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.react-datetime-picker input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.react-datetime-picker input{background-color:unset;border:unset;box-sizing:unset;border-radius:unset}.react-datetime-picker input:focus,.react-datetime-picker input:focus-visible{border:unset;color:unset;background:unset;outline:none}

package/src/styles/global/components/_reactCalendar.scss

@@ -1,237 +0,0 @@
-@use "../../utilities/functions" as u;
-
-.react-calendar {
-    width: 350px;
-    max-width: 100%;
-    background: white;
-    border: 1px solid #a0a096;
-    font-family: "Arial", "Helvetica", sans-serif;
-    line-height: 1.125em;
-}
-
-.react-calendar--doubleView {
-    width: 700px;
-}
-
-.react-calendar--doubleView .react-calendar__viewContainer {
-    display: flex;
-    margin: -0.5em;
-}
-
-.react-calendar--doubleView .react-calendar__viewContainer > * {
-    width: 50%;
-    margin: 0.5em;
-}
-
-.react-calendar,
-.react-calendar *,
-.react-calendar *:before,
-.react-calendar *:after {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
-.react-calendar button {
-    margin: 0;
-    border: 0;
-    outline: none;
-}
-
-.react-calendar button:enabled:hover {
-    cursor: pointer;
-}
-
-.react-calendar__navigation {
-    display: flex;
-    height: 44px;
-    margin-bottom: 1em;
-}
-
-.react-calendar__navigation button {
-    min-width: 44px;
-    background: none;
-}
-
-.react-calendar__navigation button:disabled {
-    background-color: #f0f0f0;
-}
-
-.react-calendar__navigation button:enabled:hover,
-.react-calendar__navigation button:enabled:focus {
-    background-color: #e6e6e6;
-}
-
-.react-calendar__month-view__weekdays {
-    text-align: center;
-    text-transform: uppercase;
-    font: inherit;
-    font-size: 0.75em;
-    font-weight: bold;
-}
-
-.react-calendar__month-view__weekdays__weekday {
-    padding: 0.5em;
-}
-
-.react-calendar__month-view__weekNumbers .react-calendar__tile {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font: inherit;
-    font-size: 0.75em;
-    font-weight: bold;
-}
-
-.react-calendar__month-view__days__day--weekend {
-    color: #d10000;
-}
-
-.react-calendar__month-view__days__day--neighboringMonth,
-.react-calendar__decade-view__years__year--neighboringDecade,
-.react-calendar__century-view__decades__decade--neighboringCentury {
-    color: #757575;
-}
-
-.react-calendar__year-view .react-calendar__tile,
-.react-calendar__decade-view .react-calendar__tile,
-.react-calendar__century-view .react-calendar__tile {
-    padding: 2em 0.5em;
-}
-
-.react-calendar__tile {
-    max-width: 100%;
-    padding: 10px 6.6667px;
-    background: none;
-    text-align: center;
-    font: inherit;
-    font-size: 0.833em;
-}
-
-.react-calendar__tile:disabled {
-    background-color: #f0f0f0;
-    color: #ababab;
-}
-
-.react-calendar__month-view__days__day--neighboringMonth:disabled,
-.react-calendar__decade-view__years__year--neighboringDecade:disabled,
-.react-calendar__century-view__decades__decade--neighboringCentury:disabled {
-    color: #cdcdcd;
-}
-
-.react-calendar__tile:enabled:hover,
-.react-calendar__tile:enabled:focus {
-    background-color: #e6e6e6;
-}
-
-.react-calendar__tile--now {
-    background: #ffff76;
-}
-
-.react-calendar__tile--now:enabled:hover,
-.react-calendar__tile--now:enabled:focus {
-    background: #ffffa9;
-}
-
-.react-calendar__tile--hasActive {
-    background: #76baff;
-}
-
-.react-calendar__tile--hasActive:enabled:hover,
-.react-calendar__tile--hasActive:enabled:focus {
-    background: #a9d4ff;
-}
-
-.react-calendar__tile--active {
-    background: #006edc;
-    color: white;
-}
-
-.react-calendar__tile--active:enabled:hover,
-.react-calendar__tile--active:enabled:focus {
-    background: #1087ff;
-}
-
-.react-calendar--selectRange .react-calendar__tile--hover {
-    background-color: #e6e6e6;
-}
-.react-calendar {
-    border-color: #{u.color("gray400")};
-}
-.react-calendar button {
-    justify-content: center;
-}
-.react-calendar__month-view__days {
-    button {
-        &.react-calendar__tile {
-            height: 50px;
-            &:hover {
-                border-radius: 50%;
-            }
-            &--active {
-                border-radius: 50%;
-            }
-            &--now {
-                border-radius: 50%;
-            }
-        }
-    }
-}
-
-// .react-calendar__month-view__days__day--weekend {
-//     color: unset;
-// }
-.react-datetime-picker {
-    button {
-        color: unset;
-        &.react-calendar__tile {
-            &--active {
-                background-color: #{u.color("blue500")};
-                color: #{u.color("white")};
-                &:hover {
-                    background-color: #{u.color("blue500")};
-                }
-            }
-            &--now {
-                // background-color: unset;
-                border: 1px solid #{u.color("text")};
-                &:hover {
-                    background-color: #{u.color("gray100")};
-                }
-            }
-            &--hasActive {
-                background: #{u.color("blue500")};
-                &:hover {
-                    background: #{u.color("blue300")};
-                }
-            }
-        }
-        &:hover {
-            background-color: unset;
-        }
-    }
-    input {
-        /* Disable spinner/flipper buttons */
-        &[type="number"] {
-            -webkit-appearance: textfield;
-            -moz-appearance: textfield;
-            appearance: textfield;
-        }
-        &::-webkit-inner-spin-button,
-        &::-webkit-outer-spin-button {
-            -webkit-appearance: none;
-            margin: 0;
-        }
-        background-color: unset;
-        border: unset;
-        box-sizing: unset;
-        border-radius: unset;
-        &:focus,
-        &:focus-visible {
-            border: unset;
-            color: unset;
-            background: unset;
-            outline: none;
-        }
-    }
-}

package/src/styles/global/components/_reactDatePicker.css

@@ -1 +0,0 @@
-@layer craftsman-base{.react-date-picker__wrapper:focus,.react-datetime-picker__wrapper:focus{box-shadow:none;outline:0}.react-date-picker__wrapper,.react-datetime-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:3px}[type=number].react-date-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-date-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-date-picker__wrapper,[type=number].react-datetime-picker__wrapper{appearance:textfield}.react-date-picker__wrapper:disabled,.react-datetime-picker__wrapper:disabled,.disabled.react-date-picker__wrapper,.disabled.react-datetime-picker__wrapper{border-color:var(--gray200);background-color:var(--gray100)}}.react-date-picker,.react-date-picker *,.react-date-picker :before,.react-date-picker :after,.react-datetime-picker,.react-datetime-picker *,.react-datetime-picker :before,.react-datetime-picker :after{box-sizing:border-box}.react-date-picker,.react-datetime-picker{display:inline-flex;position:relative}.react-date-picker--disabled,.react-datetime-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-date-picker__wrapper,.react-datetime-picker__wrapper{border:1px solid var(--gray400);border-radius:3px;flex-grow:1;flex-shrink:0;padding:2px;display:flex}.react-date-picker__inputGroup,.react-datetime-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-date-picker__inputGroup__divider,.react-datetime-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-date-picker__inputGroup__divider,.react-date-picker__inputGroup__leadingZero,.react-datetime-picker__inputGroup__divider,.react-datetime-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-date-picker__inputGroup__input,.react-datetime-picker__inputGroup__input{color:currentColor;min-width:.54em;height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}.react-date-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-date-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-datetime-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-datetime-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-date-picker__inputGroup__input--hasLeadingZero,.react-datetime-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-date-picker__button,.react-datetime-picker__button{background:0 0;border:0;padding:4px 6px}.react-date-picker__button :enabled,.react-datetime-picker__button :enabled{cursor:pointer}.react-date-picker__button :enabled:hover .react-date-picker__button__icon,.react-date-picker__button :enabled:hover .react-datetime-picker__button__icon,.react-date-picker__button :enabled:focus .react-date-picker__button__icon,.react-date-picker__button :enabled:focus .react-datetime-picker__button__icon,.react-datetime-picker__button :enabled:hover .react-date-picker__button__icon,.react-datetime-picker__button :enabled:hover .react-datetime-picker__button__icon,.react-datetime-picker__button :enabled:focus .react-date-picker__button__icon,.react-datetime-picker__button :enabled:focus .react-datetime-picker__button__icon{stroke:#0078d7}.react-date-picker__button :disabled .react-date-picker__button__icon,.react-date-picker__button :disabled .react-datetime-picker__button__icon,.react-datetime-picker__button :disabled .react-date-picker__button__icon,.react-datetime-picker__button :disabled .react-datetime-picker__button__icon{stroke:#6d6d6d}.react-date-picker__button svg,.react-datetime-picker__button svg{display:inherit}.react-date-picker__calendar--closed,.react-date-picker__clock--closed,.react-datetime-picker__calendar--closed,.react-datetime-picker__clock--closed{display:none}.react-date-picker__calendar{z-index:1;width:350px;max-width:100vw}.react-datetime-picker__calendar,.react-datetime-picker__clock{z-index:1}.react-datetime-picker__inputGroup__input:invalid{background:#ff00001a}.react-datetime-picker__inputGroup__amPm{font:inherit;appearance:menulist}.react-datetime-picker__calendar{width:350px;max-width:100vw}.react-datetime-picker__calendar .react-calendar{border-width:thin}.react-datetime-picker__clock{background-color:#fff;border:thin solid #a0a096;width:200px;max-width:100vw;height:200px;padding:25px}.react-date-picker__calendar .react-calendar{border-width:thin}.react-date-picker__inputGroup__input:invalid,.react-datetime-picker__inputGroup__input:invalid{background:unset}

package/src/styles/global/components/_reactPhone.scss

@@ -1,265 +0,0 @@
-@use "./input";
-@use "../../utilities/functions" as u;
-
-.input-phone {
-    &[data-label-position="inside"] {
-        .input-label {
-            top: 15px;
-            left: 50px;
-        }
-    }
-
-    .react-international-phone-country-selector {
-        position: relative;
-    }
-
-    .react-international-phone-flag-emoji {
-        width: var(--react-international-phone-flag-width, 24px);
-        height: var(--react-international-phone-flag-height, 24px);
-        box-sizing: border-box;
-    }
-
-    .react-international-phone-country-selector-button {
-        display: flex;
-        height: var(--react-international-phone-height, 36px);
-        box-sizing: border-box;
-        align-items: center;
-        justify-content: center;
-        padding: 0;
-        border: 1px solid
-            var(
-                --react-international-phone-country-selector-border-color,
-                var(--react-international-phone-border-color, gainsboro)
-            );
-        margin: 0;
-        appearance: button;
-        -webkit-appearance: button;
-        background-color: var(
-            --react-international-phone-country-selector-background-color,
-            var(--react-international-phone-background-color, white)
-        );
-        cursor: pointer;
-        text-transform: none;
-        user-select: none;
-
-        &:hover {
-            background-color: var(--react-international-phone-country-selector-background-color-hover, whitesmoke);
-        }
-
-        &--hide-dropdown {
-            cursor: auto;
-
-            &:hover {
-                background-color: transparent;
-            }
-        }
-
-        &--disabled {
-            background-color: var(
-                --react-international-phone-disabled-country-selector-background-color,
-                var(--react-international-phone-disabled-background-color, whitesmoke)
-            );
-            cursor: auto;
-
-            &:hover {
-                background-color: var(
-                    --react-international-phone-disabled-country-selector-background-color,
-                    var(--react-international-phone-disabled-background-color, whitesmoke)
-                );
-            }
-        }
-
-        &__button-content {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        &__flag-emoji {
-            margin: 0 4px;
-
-            &--disabled {
-                opacity: 0.75;
-            }
-        }
-
-        &__dropdown-arrow {
-            border-top: var(--react-international-phone-country-selector-arrow-size, 4px) solid
-                var(--react-international-phone-country-selector-arrow-color, #777);
-            border-right: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;
-            border-left: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;
-            margin-right: 4px;
-            transition: all 0.1s ease-out;
-
-            &--active {
-                transform: rotateX(180deg);
-            }
-
-            &--disabled {
-                border-top-color: var(--react-international-phone-disabled-country-selector-arrow-color, #999);
-            }
-        }
-    }
-
-    .react-international-phone-country-selector-dropdown {
-        position: absolute;
-        z-index: 1000;
-        top: var(--react-international-phone-dropdown-top, 44px);
-        left: var(--react-international-phone-dropdown-left, 0);
-        display: flex;
-        width: 300px;
-        max-height: 200px;
-        flex-direction: column;
-        padding: 4px 0;
-        margin: 0;
-        background-color: var(
-            --react-international-phone-dropdown-item-background-color,
-            var(--react-international-phone-background-color, white)
-        );
-        box-shadow: var(--react-international-phone-dropdown-shadow, 2px 2px 16px rgba(0, 0, 0, 0.25));
-        color: var(
-            --react-international-phone-dropdown-item-text-color,
-            var(--react-international-phone-text-color, #222)
-        );
-        list-style: none;
-        overflow-y: scroll;
-
-        &__preferred-list-divider {
-            height: 1px;
-            border: none;
-            margin: var(--react-international-phone-dropdown-preferred-list-divider-margin, 0);
-            background: var(
-                --react-international-phone-dropdown-preferred-list-divider-color,
-                var(--react-international-phone-border-color, gainsboro)
-            );
-        }
-
-        &__list-item {
-            display: flex;
-            min-height: var(--react-international-phone-dropdown-item-height, 28px);
-            box-sizing: border-box;
-            align-items: center;
-            padding: 2px 8px;
-
-            &:hover {
-                background-color: var(
-                    --react-international-phone-selected-dropdown-item-background-color,
-                    var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke)
-                );
-                cursor: pointer;
-            }
-
-            &--selected,
-            &--focused {
-                background-color: var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke);
-                color: var(
-                    --react-international-phone-selected-dropdown-item-text-color,
-                    var(--react-international-phone-text-color, #222)
-                );
-
-                .react-international-phone-country-selector-dropdown__list-item-dial-code {
-                    color: var(
-                        --react-international-phone-selected-dropdown-item-dial-code-color,
-                        var(--react-international-phone-dropdown-item-dial-code-color, gray)
-                    );
-                }
-            }
-
-            &--focused {
-                background-color: var(
-                    --react-international-phone-selected-dropdown-item-background-color,
-                    var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke)
-                );
-            }
-
-            &-flag-emoji {
-                margin-right: 8px;
-            }
-
-            &-country-name {
-                overflow: hidden;
-                margin-right: 8px;
-                font-size: var(--react-international-phone-dropdown-item-font-size, 14px);
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-
-            &-dial-code {
-                color: var(--react-international-phone-dropdown-item-dial-code-color, gray);
-                font-size: var(--react-international-phone-dropdown-item-font-size, 14px);
-            }
-        }
-    }
-
-    .react-international-phone-dial-code-preview {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0 8px;
-        border: 1px solid
-            var(
-                --react-international-phone-dial-code-preview-border-color,
-                var(--react-international-phone-border-color, gainsboro)
-            );
-        margin-right: -1px;
-        background-color: var(
-            --react-international-phone-dial-code-preview-background-color,
-            var(--react-international-phone-background-color, white)
-        );
-        color: var(
-            --react-international-phone-dial-code-preview-text-color,
-            var(--react-international-phone-text-color, #222)
-        );
-        font-size: var(
-            --react-international-phone-dial-code-preview-font-size,
-            var(--react-international-phone-font-size, 13px)
-        );
-
-        &--disabled {
-            background-color: var(
-                --react-international-phone-dial-code-preview-disabled-background-color,
-                var(--react-international-phone-disabled-background-color, whitesmoke)
-            );
-            color: var(
-                --react-international-phone-dial-code-preview-disabled-text-color,
-                var(--react-international-phone-disabled-text-color, #666)
-            );
-        }
-    }
-
-    .react-international-phone-input-container {
-        display: flex;
-
-        .react-international-phone-country-selector-button {
-            border-radius: var(--react-international-phone-border-radius, 4px);
-            margin-right: -1px;
-            border-bottom-right-radius: 0;
-            border-top-right-radius: 0;
-        }
-
-        .react-international-phone-input {
-            overflow: visible;
-            height: var(--react-international-phone-height, 36px);
-            box-sizing: border-box;
-            padding: 0 8px;
-            border: 1px solid var(--react-international-phone-border-color, gainsboro);
-            border-radius: var(--react-international-phone-border-radius, 4px);
-            margin: 0;
-            background-color: var(--react-international-phone-background-color, white);
-            border-bottom-left-radius: 0;
-            border-top-left-radius: 0;
-            color: var(--react-international-phone-text-color, #222);
-            font-family: inherit;
-            font-size: var(--react-international-phone-font-size, 13px);
-
-            &:focus {
-                outline: none;
-            }
-
-            &--disabled {
-                background-color: var(--react-international-phone-disabled-background-color, whitesmoke);
-                color: var(--react-international-phone-disabled-text-color, #666);
-            }
-        }
-    }
-}