@stamcat/craftsman 0.0.36 → 0.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {

package/src/components/DatePicker/DatePicker.css

@@ -1 +1 @@
-.react-date-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-date-picker__wrapper:focus{box-shadow:none;outline:0}.react-date-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-date-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-date-picker__wrapper{appearance:textfield}.react-date-picker__wrapper:disabled,.disabled.react-date-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}.react-date-picker,.react-date-picker *,.react-date-picker :before,.react-date-picker :after{box-sizing:border-box}@layer craftsman-component{.react-date-picker{display:inline-flex;position:relative}.react-date-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-date-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-date-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-date-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-date-picker__inputGroup__divider,.react-date-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-date-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-date-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-date-picker__inputGroup__input:disabled{background-color:unset}.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-date-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-date-picker__button{border:0;padding:4px 4px 4px 7px}.react-date-picker__button:hover{background:0 0}}@layer craftsman-base{.react-date-picker__calendar{z-index:1;width:350px;max-width:100vw}.react-date-picker__calendar .react-calendar{border-width:thin}.react-date-picker__calendar--closed,.react-date-picker__clock--closed{display:none}.react-date-picker__calendar .react-date-picker__inputGroup__input:invalid{background:unset}}
+@layer craftsman-base{.react-date-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-date-picker__wrapper:focus{box-shadow:none;outline:0}.react-date-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-date-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-date-picker__wrapper{appearance:textfield}.react-date-picker__wrapper:disabled,.disabled.react-date-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}.react-date-picker__calendar{z-index:1;width:350px;max-width:100vw}.react-date-picker__calendar .react-calendar{border-width:thin}.react-date-picker__calendar--closed,.react-date-picker__clock--closed{display:none}.react-date-picker__calendar .react-date-picker__inputGroup__input:invalid{background:unset}}.react-date-picker,.react-date-picker *,.react-date-picker :before,.react-date-picker :after{box-sizing:border-box}@layer craftsman-component{.react-date-picker{display:inline-flex;position:relative}.react-date-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-date-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-date-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-date-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-date-picker__inputGroup__divider,.react-date-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-date-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-date-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-date-picker__inputGroup__input:disabled{background-color:unset}.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-date-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-date-picker__button{border:0;padding:4px 4px 4px 7px}.react-date-picker__button:hover{background:0 0}}

package/src/components/DateRangePicker/DateRangePicker.css

@@ -1 +1 @@
-.react-daterange-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-daterange-picker__wrapper:focus{box-shadow:none;outline:0}.react-daterange-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-daterange-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-daterange-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-daterange-picker__wrapper{appearance:textfield}.react-daterange-picker__wrapper:disabled,.disabled.react-daterange-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}.react-daterange-picker,.react-daterange-picker *,.react-daterange-picker :before,.react-daterange-picker :after{box-sizing:border-box}@layer craftsman-component{.react-daterange-picker{display:inline-flex;position:relative}.react-daterange-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-daterange-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-daterange-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-daterange-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-daterange-picker__inputGroup__divider,.react-daterange-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-daterange-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-daterange-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-daterange-picker__inputGroup__input:disabled{background-color:unset}.react-daterange-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-daterange-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-daterange-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-daterange-picker__button{border:0;padding:4px 4px 4px 7px}.react-daterange-picker__button:hover{background:0 0}.react-daterange-picker__calendar{z-index:1;width:350px;max-width:100vw}.react-daterange-picker__calendar .react-calendar{border-width:thin}.react-daterange-picker__calendar--closed,.react-daterange-picker__clock--closed{display:none}.react-daterange-picker__calendar .react-daterange-picker__inputGroup__input:invalid{background:unset}}
+@layer craftsman-base{.react-daterange-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-daterange-picker__wrapper:focus{box-shadow:none;outline:0}.react-daterange-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-daterange-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-daterange-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-daterange-picker__wrapper{appearance:textfield}.react-daterange-picker__wrapper:disabled,.disabled.react-daterange-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}}.react-daterange-picker,.react-daterange-picker *,.react-daterange-picker :before,.react-daterange-picker :after{box-sizing:border-box}@layer craftsman-component{.react-daterange-picker{display:inline-flex;position:relative}.react-daterange-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-daterange-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-daterange-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-daterange-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-daterange-picker__inputGroup__divider,.react-daterange-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-daterange-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-daterange-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-daterange-picker__inputGroup__input:disabled{background-color:unset}.react-daterange-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-daterange-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-daterange-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-daterange-picker__button{border:0;padding:4px 4px 4px 7px}.react-daterange-picker__button:hover{background:0 0}.react-daterange-picker__calendar{z-index:1;width:350px;max-width:100vw}.react-daterange-picker__calendar .react-calendar{border-width:thin}.react-daterange-picker__calendar--closed,.react-daterange-picker__clock--closed{display:none}.react-daterange-picker__calendar .react-daterange-picker__inputGroup__input:invalid{background:unset}}

package/src/components/DateTimePicker/DateTimePicker.css

@@ -1 +1 @@
-.react-datetime-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-datetime-picker__wrapper:focus{box-shadow:none;outline:0}.react-datetime-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-datetime-picker__wrapper::-webkit-outer-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-datetime-picker__wrapper{appearance:textfield}.react-datetime-picker__wrapper:disabled,.disabled.react-datetime-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}.react-datetime-picker,.react-datetime-picker *,.react-datetime-picker :before,.react-datetime-picker :after{box-sizing:border-box}@layer craftsman-component{.react-datetime-picker{display:inline-flex;position:relative}.react-datetime-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-datetime-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-datetime-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-datetime-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-datetime-picker__inputGroup__divider,.react-datetime-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-datetime-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-datetime-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-datetime-picker__inputGroup__input:disabled{background-color:unset}.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-datetime-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-datetime-picker__button{border:0;padding:4px 4px 4px 7px}.react-datetime-picker__button:hover{background:0 0}.react-datetime-picker__calendar--closed,.react-datetime-picker__clock--closed{display:none}.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-date-picker__inputGroup__input:invalid,.react-datetime-picker__inputGroup__input:invalid{background:unset}.dateTimePicker__time-display{margin-top:8px;display:flex}.dateTimePicker__wrapper{display:inline-block}}
+@layer craftsman-base{.react-datetime-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-datetime-picker__wrapper:focus{box-shadow:none;outline:0}.react-datetime-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-datetime-picker__wrapper::-webkit-outer-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-datetime-picker__wrapper{appearance:textfield}.react-datetime-picker__wrapper:disabled,.disabled.react-datetime-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}}.react-datetime-picker,.react-datetime-picker *,.react-datetime-picker :before,.react-datetime-picker :after{box-sizing:border-box}@layer craftsman-component{.react-datetime-picker{display:inline-flex;position:relative}.react-datetime-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-datetime-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-datetime-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-datetime-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-datetime-picker__inputGroup__divider,.react-datetime-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-datetime-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-datetime-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-datetime-picker__inputGroup__input:disabled{background-color:unset}.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-datetime-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-datetime-picker__button{border:0;padding:4px 4px 4px 7px}.react-datetime-picker__button:hover{background:0 0}.react-datetime-picker__calendar--closed,.react-datetime-picker__clock--closed{display:none}.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-date-picker__inputGroup__input:invalid,.react-datetime-picker__inputGroup__input:invalid{background:unset}.dateTimePicker__time-display{margin-top:8px;display:flex}.dateTimePicker__wrapper{display:inline-block}}

package/src/components/InputNumber/InputNumber.css

@@ -1 +1 @@
-@layer craftsman-component{.inputNumber.input-wrapper[data-label-position=inside] .input-label{left:40px}.inputNumber .input-field{gap:calc(var(--w-gutter) * .5)}.inputNumber .input-field[data-has-end-adornment=true]>.input{padding-right:calc(var(--w-gutter) * .75)}.inputNumber .input-field[data-has-pre-adornment=true]>.input{padding-left:calc(var(--w-gutter) * .75)}.inputNumber .input-end-adornment,.inputNumber .input-pre-adornment{position:unset;transform:unset;top:unset}}
+@layer craftsman-base;@layer craftsman-component{.inputNumber.input-wrapper[data-label-position=inside] .input-label{left:40px}.inputNumber .input-field{gap:calc(var(--w-gutter) * .5)}.inputNumber .input-field[data-has-end-adornment=true]>.input{padding-right:calc(var(--w-gutter) * .75)}.inputNumber .input-field[data-has-pre-adornment=true]>.input{padding-left:calc(var(--w-gutter) * .75)}.inputNumber .input-end-adornment,.inputNumber .input-pre-adornment{position:unset;transform:unset;top:unset}}

package/src/components/InputPhone/InputPhone.css

@@ -1 +1 @@
-@layer craftsman-component{.inputPhone[data-label-position=inside] .input-label{top:15px;left:50px}.inputPhone .react-international-phone-country-selector{position:relative}.inputPhone .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}.inputPhone .react-international-phone-country-selector-button{height:var(--react-international-phone-height,36px);box-sizing:border-box;border:1px solid var(--react-international-phone-country-selector-border-color,var(--react-international-phone-border-color,gainsboro));appearance:button;background-color:var(--react-international-phone-country-selector-background-color,var(--react-international-phone-background-color,white));cursor:pointer;text-transform:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.inputPhone .react-international-phone-country-selector-button:hover{background-color:var(--react-international-phone-country-selector-background-color-hover,whitesmoke)}.inputPhone .react-international-phone-country-selector-button--hide-dropdown{cursor:auto}.inputPhone .react-international-phone-country-selector-button--hide-dropdown:hover{background-color:#0000}.inputPhone .react-international-phone-country-selector-button--disabled{background-color:var(--react-international-phone-disabled-country-selector-background-color,var(--react-international-phone-disabled-background-color,whitesmoke));cursor:auto}.inputPhone .react-international-phone-country-selector-button--disabled:hover{background-color:var(--react-international-phone-disabled-country-selector-background-color,var(--react-international-phone-disabled-background-color,whitesmoke))}.inputPhone .react-international-phone-country-selector-button__button-content{justify-content:center;align-items:center;display:flex}.inputPhone .react-international-phone-country-selector-button__flag-emoji{margin:0 4px}.inputPhone .react-international-phone-country-selector-button__flag-emoji--disabled{opacity:.75}.inputPhone .react-international-phone-country-selector-button__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 .1s ease-out}.inputPhone .react-international-phone-country-selector-button__dropdown-arrow--active{transform:rotateX(180deg)}.inputPhone .react-international-phone-country-selector-button__dropdown-arrow--disabled{border-top-color:var(--react-international-phone-disabled-country-selector-arrow-color,#999)}.inputPhone .react-international-phone-country-selector-dropdown{z-index:1000;top:var(--react-international-phone-dropdown-top,44px);left:var(--react-international-phone-dropdown-left,0);background-color:var(--react-international-phone-dropdown-item-background-color,var(--react-international-phone-background-color,white));width:300px;max-height:200px;box-shadow:var(--react-international-phone-dropdown-shadow,2px 2px 16px #00000040);color:var(--react-international-phone-dropdown-item-text-color,var(--react-international-phone-text-color,#222));flex-direction:column;margin:0;padding:4px 0;list-style:none;display:flex;position:absolute;overflow-y:scroll}.inputPhone .react-international-phone-country-selector-dropdown__preferred-list-divider{height:1px;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));border:none}.inputPhone .react-international-phone-country-selector-dropdown__list-item{min-height:var(--react-international-phone-dropdown-item-height,28px);box-sizing:border-box;align-items:center;padding:2px 8px;display:flex}.inputPhone .react-international-phone-country-selector-dropdown__list-item:hover{background-color:var(--react-international-phone-selected-dropdown-item-background-color,var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke));cursor:pointer}.inputPhone .react-international-phone-country-selector-dropdown__list-item--selected,.inputPhone .react-international-phone-country-selector-dropdown__list-item--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))}.inputPhone .react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,.inputPhone .react-international-phone-country-selector-dropdown__list-item--focused .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))}.inputPhone .react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color,var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke))}.inputPhone .react-international-phone-country-selector-dropdown__list-item-flag-emoji{margin-right:8px}.inputPhone .react-international-phone-country-selector-dropdown__list-item-country-name{font-size:var(--react-international-phone-dropdown-item-font-size,14px);text-overflow:ellipsis;white-space:nowrap;margin-right:8px;overflow:hidden}.inputPhone .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-dropdown-item-dial-code-color,gray);font-size:var(--react-international-phone-dropdown-item-font-size,14px)}.inputPhone .react-international-phone-dial-code-preview{border:1px solid var(--react-international-phone-dial-code-preview-border-color,var(--react-international-phone-border-color,gainsboro));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));justify-content:center;align-items:center;margin-right:-1px;padding:0 8px;display:flex}.inputPhone .react-international-phone-dial-code-preview--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))}.inputPhone .react-international-phone-input-container{display:flex}.inputPhone .react-international-phone-input-container .react-international-phone-country-selector-button{border-radius:var(--react-international-phone-border-radius,4px);border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px}.inputPhone .react-international-phone-input-container .react-international-phone-input{height:var(--react-international-phone-height,36px);box-sizing:border-box;border:1px solid var(--react-international-phone-border-color,gainsboro);border-radius:var(--react-international-phone-border-radius,4px);background-color:var(--react-international-phone-background-color,white);color:var(--react-international-phone-text-color,#222);font-family:inherit;font-size:var(--react-international-phone-font-size,13px);border-top-left-radius:0;border-bottom-left-radius:0;margin:0;padding:0 8px;overflow:visible}.inputPhone .react-international-phone-input-container .react-international-phone-input:focus{outline:none}.inputPhone .react-international-phone-input-container .react-international-phone-input--disabled{background-color:var(--react-international-phone-disabled-background-color,whitesmoke);color:var(--react-international-phone-disabled-text-color,#666)}}
+@layer craftsman-base;@layer craftsman-component{.inputPhone[data-label-position=inside] .input-label{top:15px;left:50px}.inputPhone .react-international-phone-country-selector{position:relative}.inputPhone .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}.inputPhone .react-international-phone-country-selector-button{height:var(--react-international-phone-height,36px);box-sizing:border-box;border:1px solid var(--react-international-phone-country-selector-border-color,var(--react-international-phone-border-color,gainsboro));appearance:button;background-color:var(--react-international-phone-country-selector-background-color,var(--react-international-phone-background-color,white));cursor:pointer;text-transform:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.inputPhone .react-international-phone-country-selector-button:hover{background-color:var(--react-international-phone-country-selector-background-color-hover,whitesmoke)}.inputPhone .react-international-phone-country-selector-button--hide-dropdown{cursor:auto}.inputPhone .react-international-phone-country-selector-button--hide-dropdown:hover{background-color:#0000}.inputPhone .react-international-phone-country-selector-button--disabled{background-color:var(--react-international-phone-disabled-country-selector-background-color,var(--react-international-phone-disabled-background-color,whitesmoke));cursor:auto}.inputPhone .react-international-phone-country-selector-button--disabled:hover{background-color:var(--react-international-phone-disabled-country-selector-background-color,var(--react-international-phone-disabled-background-color,whitesmoke))}.inputPhone .react-international-phone-country-selector-button__button-content{justify-content:center;align-items:center;display:flex}.inputPhone .react-international-phone-country-selector-button__flag-emoji{margin:0 4px}.inputPhone .react-international-phone-country-selector-button__flag-emoji--disabled{opacity:.75}.inputPhone .react-international-phone-country-selector-button__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 .1s ease-out}.inputPhone .react-international-phone-country-selector-button__dropdown-arrow--active{transform:rotateX(180deg)}.inputPhone .react-international-phone-country-selector-button__dropdown-arrow--disabled{border-top-color:var(--react-international-phone-disabled-country-selector-arrow-color,#999)}.inputPhone .react-international-phone-country-selector-dropdown{z-index:1000;top:var(--react-international-phone-dropdown-top,44px);left:var(--react-international-phone-dropdown-left,0);background-color:var(--react-international-phone-dropdown-item-background-color,var(--react-international-phone-background-color,white));width:300px;max-height:200px;box-shadow:var(--react-international-phone-dropdown-shadow,2px 2px 16px #00000040);color:var(--react-international-phone-dropdown-item-text-color,var(--react-international-phone-text-color,#222));flex-direction:column;margin:0;padding:4px 0;list-style:none;display:flex;position:absolute;overflow-y:scroll}.inputPhone .react-international-phone-country-selector-dropdown__preferred-list-divider{height:1px;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));border:none}.inputPhone .react-international-phone-country-selector-dropdown__list-item{min-height:var(--react-international-phone-dropdown-item-height,28px);box-sizing:border-box;align-items:center;padding:2px 8px;display:flex}.inputPhone .react-international-phone-country-selector-dropdown__list-item:hover{background-color:var(--react-international-phone-selected-dropdown-item-background-color,var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke));cursor:pointer}.inputPhone .react-international-phone-country-selector-dropdown__list-item--selected,.inputPhone .react-international-phone-country-selector-dropdown__list-item--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))}.inputPhone .react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,.inputPhone .react-international-phone-country-selector-dropdown__list-item--focused .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))}.inputPhone .react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color,var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke))}.inputPhone .react-international-phone-country-selector-dropdown__list-item-flag-emoji{margin-right:8px}.inputPhone .react-international-phone-country-selector-dropdown__list-item-country-name{font-size:var(--react-international-phone-dropdown-item-font-size,14px);text-overflow:ellipsis;white-space:nowrap;margin-right:8px;overflow:hidden}.inputPhone .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-dropdown-item-dial-code-color,gray);font-size:var(--react-international-phone-dropdown-item-font-size,14px)}.inputPhone .react-international-phone-dial-code-preview{border:1px solid var(--react-international-phone-dial-code-preview-border-color,var(--react-international-phone-border-color,gainsboro));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));justify-content:center;align-items:center;margin-right:-1px;padding:0 8px;display:flex}.inputPhone .react-international-phone-dial-code-preview--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))}.inputPhone .react-international-phone-input-container{display:flex}.inputPhone .react-international-phone-input-container .react-international-phone-country-selector-button{border-radius:var(--react-international-phone-border-radius,4px);border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px}.inputPhone .react-international-phone-input-container .react-international-phone-input{height:var(--react-international-phone-height,36px);box-sizing:border-box;border:1px solid var(--react-international-phone-border-color,gainsboro);border-radius:var(--react-international-phone-border-radius,4px);background-color:var(--react-international-phone-background-color,white);color:var(--react-international-phone-text-color,#222);font-family:inherit;font-size:var(--react-international-phone-font-size,13px);border-top-left-radius:0;border-bottom-left-radius:0;margin:0;padding:0 8px;overflow:visible}.inputPhone .react-international-phone-input-container .react-international-phone-input:focus{outline:none}.inputPhone .react-international-phone-input-container .react-international-phone-input--disabled{background-color:var(--react-international-phone-disabled-background-color,whitesmoke);color:var(--react-international-phone-disabled-text-color,#666)}}

package/src/components/Modal/Modal.css

@@ -1 +1 @@
-.modal.wrapper,.modal .background{width:100%;height:100%;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideIn{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideOut{0%{transform:translateY(0)}to{transform:translateY(100%)}}@layer craftsman-component{.modal.wrapper{z-index:1000;justify-content:center;align-items:center;display:flex}.modal .background{z-index:1001;background-color:#00000080;animation-fill-mode:forwards}.modal .background[data-is-closing=true]{animation:.3s ease-in-out fadeOut}.modal .background[data-is-closing=false]{animation:.3s ease-in-out fadeIn}.modal .content{padding:var(--w-gutter);z-index:1002;background-color:var(--white);-webkit-overflow-scrolling:touch;touch-action:pan-y;max-height:80vh;animation-fill-mode:forwards;overflow-y:auto}.modal .content[data-is-closing=true]{animation:.3s ease-in-out slideOut}.modal .content[data-is-closing=false]{animation:.3s ease-in-out slideIn}.modal .content.panel{height:100%;position:fixed;top:0;right:0}.modal .content.dialog{border-radius:8px}.modal .content>header{width:100%;margin-bottom:calc(var(--w-gutter) * .5);justify-content:space-between;display:inline-flex}.modal .content>header>button:only-child{margin-left:auto}.modal .actionContainer{margin-top:calc(var(--w-gutter) * 2);background-color:var(--white);gap:var(--w-gutter);height:fit-content;display:flex}.modal .closeModal{border-radius:50%;justify-content:center;width:30px;height:30px;padding:0;text-decoration:none;display:inline-flex}@media (width>=0) and (width<=660px){.modal .content.panel,.modal .content.dialog{width:100%;height:100%}}@media (width>=660px){.modal .content.panel{width:calc((var(--w-column) * 4) + (var(--w-gutter) * 3))}.modal .content.dialog{width:calc((var(--w-column) * 6) + (var(--w-gutter) * 5))}}@media (width>=1040px){.modal .content.dialog{width:calc((var(--w-column) * 8) + (var(--w-gutter) * 7))}}}
+@layer craftsman-base{.modal.wrapper,.modal .background{width:100%;height:100%;position:fixed;inset:0}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideIn{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideOut{0%{transform:translateY(0)}to{transform:translateY(100%)}}@layer craftsman-component{.modal.wrapper{z-index:1000;justify-content:center;align-items:center;display:flex}.modal .background{z-index:1001;background-color:#00000080;animation-fill-mode:forwards}.modal .background[data-is-closing=true]{animation:.3s ease-in-out fadeOut}.modal .background[data-is-closing=false]{animation:.3s ease-in-out fadeIn}.modal .content{padding:var(--w-gutter);z-index:1002;background-color:var(--white);-webkit-overflow-scrolling:touch;touch-action:pan-y;max-height:80vh;animation-fill-mode:forwards;overflow-y:auto}.modal .content[data-is-closing=true]{animation:.3s ease-in-out slideOut}.modal .content[data-is-closing=false]{animation:.3s ease-in-out slideIn}.modal .content.panel{height:100%;position:fixed;top:0;right:0}.modal .content.dialog{border-radius:8px}.modal .content>header{width:100%;margin-bottom:calc(var(--w-gutter) * .5);justify-content:space-between;display:inline-flex}.modal .content>header>button:only-child{margin-left:auto}.modal .actionContainer{margin-top:calc(var(--w-gutter) * 2);background-color:var(--white);gap:var(--w-gutter);height:fit-content;display:flex}.modal .closeModal{border-radius:50%;justify-content:center;width:30px;height:30px;padding:0;text-decoration:none;display:inline-flex}@media (width>=0) and (width<=660px){.modal .content.panel,.modal .content.dialog{width:100%;height:100%}}@media (width>=660px){.modal .content.panel{width:calc((var(--w-column) * 4) + (var(--w-gutter) * 3))}.modal .content.dialog{width:calc((var(--w-column) * 6) + (var(--w-gutter) * 5))}}@media (width>=1040px){.modal .content.dialog{width:calc((var(--w-column) * 8) + (var(--w-gutter) * 7))}}}

package/src/components/TimePicker/TimePicker.css

@@ -1 +1 @@
-.react-time-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-time-picker__wrapper:focus{box-shadow:none;outline:0}.react-time-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-time-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper{appearance:textfield}.react-time-picker__wrapper:disabled,.disabled.react-time-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}.react-time-picker,.react-time-picker *,.react-time-picker :before,.react-time-picker :after{box-sizing:border-box}@layer craftsman-component{.react-time-picker{display:inline-flex;position:relative}.react-time-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-time-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-time-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-time-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-time-picker__inputGroup__divider,.react-time-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-time-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-time-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-time-picker__inputGroup__input:disabled{background-color:unset}.react-time-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-time-picker__button{border:0;padding:4px 4px 4px 7px}.react-time-picker__button:hover{background:0 0}.react-time-picker__wrapper{padding:6px 24px 6px 8px}.react-time-picker__inputGroup__input:invalid{background:#ff00001a}.react-time-picker__inputGroup__amPm{font:inherit;appearance:menulist}.react-time-picker__button:enabled{cursor:pointer}.react-time-picker__button:enabled:hover .react-time-picker__button__icon,.react-time-picker__button:enabled:focus .react-time-picker__button__icon{stroke:#0078d7}.react-time-picker__button:disabled .react-time-picker__button__icon{stroke:#6d6d6d}.react-time-picker__button svg{display:inherit}.react-time-picker__clock{z-index:1;background-color:#fff;border:thin solid #a0a096;width:200px;max-width:100vw;height:200px;padding:25px}.react-time-picker__clock--closed,.timePicker .react-time-picker__clock{display:none}.timePicker .timePicker__field{position:relative}.timePicker .timePicker__field .input-view-toggle{padding:4px;line-height:1;position:absolute;top:50%;right:4px;transform:translateY(-50%)}.timePicker__display{background-color:var(--white);border:1px solid var(--gray400);z-index:1;border-radius:8px;height:160px;display:inline-flex;position:relative}.timePicker__display:before,.timePicker__display:after{content:"";z-index:1;pointer-events:none;height:calc(50% - 16px);display:block;position:absolute;left:0;right:0}.timePicker__display:before{border-bottom:.5px solid rgba(var(--text-high-contrast-rgb-value), .3);background:linear-gradient(to top, rgba(var(--background-site-rgb-value), .65) 0%, rgba(var(--background-site-rgb-value), 1) 100%);top:-.5px}.timePicker__display:after{border-top:.5px solid rgba(var(--text-high-contrast-rgb-value), .3);background:linear-gradient(to bottom, rgba(var(--background-site-rgb-value), .65) 0%, rgba(var(--background-site-rgb-value), 1) 100%);bottom:-.5px}.timePicker__display .ios-picker{flex-direction:row;align-items:center;gap:6px;height:100%;padding:0 12px;font-size:16px;line-height:1;display:flex}.timePicker__display .ios-picker--disabled{pointer-events:none;opacity:.5}.timePicker__display .ios-picker__scene{touch-action:pan-x;align-items:center;min-width:30px;height:100%;display:flex;overflow:hidden}.timePicker__display .ios-picker__viewport{perspective:1000px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-webkit-tap-highlight-color:transparent;width:100%;height:32px}.timePicker__display .ios-picker__viewport--perspective-left{perspective-origin:calc(50% + 130px);transform:translate(27px)}.timePicker__display .ios-picker__viewport--perspective-right{perspective-origin:calc(50% - 130px);transform:translate(-27px)}.timePicker__display .ios-picker__viewport--perspective-center{perspective-origin:50%}.timePicker__display .ios-picker__container{width:100%;height:100%;transform-style:preserve-3d;will-change:transform}.timePicker__display .ios-picker__slide{text-align:center;backface-visibility:hidden;opacity:0;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.timePicker__display .ios-picker__label{white-space:nowrap;pointer-events:none;font-weight:700}}
+@layer craftsman-base{.react-time-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-time-picker__wrapper:focus{box-shadow:none;outline:0}.react-time-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-time-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper{appearance:textfield}.react-time-picker__wrapper:disabled,.disabled.react-time-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}}.react-time-picker,.react-time-picker *,.react-time-picker :before,.react-time-picker :after{box-sizing:border-box}@layer craftsman-component{.react-time-picker{display:inline-flex;position:relative}.react-time-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-time-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-time-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-time-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-time-picker__inputGroup__divider,.react-time-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-time-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-time-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-time-picker__inputGroup__input:disabled{background-color:unset}.react-time-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-time-picker__button{border:0;padding:4px 4px 4px 7px}.react-time-picker__button:hover{background:0 0}.react-time-picker__wrapper{padding:6px 24px 6px 8px}.react-time-picker__inputGroup__input:invalid{background:#ff00001a}.react-time-picker__inputGroup__amPm{font:inherit;appearance:menulist}.react-time-picker__button:enabled{cursor:pointer}.react-time-picker__button:enabled:hover .react-time-picker__button__icon,.react-time-picker__button:enabled:focus .react-time-picker__button__icon{stroke:#0078d7}.react-time-picker__button:disabled .react-time-picker__button__icon{stroke:#6d6d6d}.react-time-picker__button svg{display:inherit}.react-time-picker__clock{z-index:1;background-color:#fff;border:thin solid #a0a096;width:200px;max-width:100vw;height:200px;padding:25px}.react-time-picker__clock--closed,.timePicker .react-time-picker__clock{display:none}.timePicker .timePicker__field{position:relative}.timePicker .timePicker__field .input-view-toggle{padding:4px;line-height:1;position:absolute;top:50%;right:4px;transform:translateY(-50%)}.timePicker__display{background-color:var(--white);border:1px solid var(--gray400);z-index:1;border-radius:8px;height:160px;display:inline-flex;position:relative}.timePicker__display:before,.timePicker__display:after{content:"";z-index:1;pointer-events:none;height:calc(50% - 16px);display:block;position:absolute;left:0;right:0}.timePicker__display:before{border-bottom:.5px solid rgba(var(--text-high-contrast-rgb-value), .3);background:linear-gradient(to top, rgba(var(--background-site-rgb-value), .65) 0%, rgba(var(--background-site-rgb-value), 1) 100%);top:-.5px}.timePicker__display:after{border-top:.5px solid rgba(var(--text-high-contrast-rgb-value), .3);background:linear-gradient(to bottom, rgba(var(--background-site-rgb-value), .65) 0%, rgba(var(--background-site-rgb-value), 1) 100%);bottom:-.5px}.timePicker__display .ios-picker{flex-direction:row;align-items:center;gap:6px;height:100%;padding:0 12px;font-size:16px;line-height:1;display:flex}.timePicker__display .ios-picker--disabled{pointer-events:none;opacity:.5}.timePicker__display .ios-picker__scene{touch-action:pan-x;align-items:center;min-width:30px;height:100%;display:flex;overflow:hidden}.timePicker__display .ios-picker__viewport{perspective:1000px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-webkit-tap-highlight-color:transparent;width:100%;height:32px}.timePicker__display .ios-picker__viewport--perspective-left{perspective-origin:calc(50% + 130px);transform:translate(27px)}.timePicker__display .ios-picker__viewport--perspective-right{perspective-origin:calc(50% - 130px);transform:translate(-27px)}.timePicker__display .ios-picker__viewport--perspective-center{perspective-origin:50%}.timePicker__display .ios-picker__container{width:100%;height:100%;transform-style:preserve-3d;will-change:transform}.timePicker__display .ios-picker__slide{text-align:center;backface-visibility:hidden;opacity:0;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.timePicker__display .ios-picker__label{white-space:nowrap;pointer-events:none;font-weight:700}}

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

@@ -1,67 +1,68 @@
 @use "../../utilities/functions" as u;
 
-%text-link {
-    padding: 0;
+@layer craftsman-base {
+  %text-link {
+      padding: 0;
+      border: none;
+      background: none;
+      color: var(--blue500);
+
+      &:hover {
+          color: var(--teal700);
+          background-color: transparent;
+          text-decoration: underline;
+          cursor: pointer;
+          &.disabled, &:disabled {
+            cursor: not-allowed;
+            color: #{u.color("gray400")};
+          }
+      }
+  }
+
+  %button-styles {
+    --btn-size: 1;
+    color: var(--blue600);
     border: none;
-    background: none;
-    color: var(--blue500);
+    cursor: pointer;
+    display: inline-flex;
+    flex-flow: row wrap;
+    align-items: center;
+    font-weight: 500;
+    transition: 0.125s;
+    padding: calc(#{u.width(gutter, 0.5)} * var(--btn-size)) calc(#{u.width(gutter, 0.75)} * var(--btn-size));
+    border-radius: calc(#{u.width(gutter, 0.75)} * var(--btn-size));
+    font-size: max(10px, calc(#{u.width(text)} * var(--btn-size)));
+    border: 1px solid var(--blue500);
+    background-color: var(--white);
 
     &:hover {
-        color: var(--teal700);
-        background-color: transparent;
-        text-decoration: underline;
-        cursor: pointer;
-        &.disabled, &:disabled {
-        cursor: not-allowed;
-        color: #{u.color("gray400")};
-        }
+      background-color: var(--teal200);
     }
-}
-
-%button-styles {
---btn-size: 1;
-color: var(--blue600);
-border: none;
-cursor: pointer;
-display: inline-flex;
-flex-flow: row wrap;
-align-items: center;
-font-weight: 500;
-transition: 0.125s;
-padding: calc(#{u.width(gutter, 0.5)} * var(--btn-size)) calc(#{u.width(gutter, 0.75)} * var(--btn-size));
-border-radius: calc(#{u.width(gutter, 0.75)} * var(--btn-size));
-font-size: max(10px, calc(#{u.width(text)} * var(--btn-size)));
-border: 1px solid var(--blue500);
-background-color: var(--white);
 
-&:hover {
-    background-color: var(--teal200);
-}
-
-&.primary {
-    color: var(--white);
-    background-color: var(--blue500);
+    &.primary {
+      color: var(--white);
+      background-color: var(--blue500);
 
-    &:hover {
-    background-color: var(--blue700);
+      &:hover {
+        background-color: var(--blue700);
+      }
+    }
+    
+    &.text {
+      @extend %text-link;
     }
-}
-
-&.text {
-    @extend %text-link;
-}
 
-&:disabled,
-&.disabled {
-    cursor: not-allowed;
-    border-color:  #{u.color("gray200")};
-    color:  #{u.color("gray400")};
+    &:disabled,
+    &.disabled {
+      cursor: not-allowed;
+      border-color:  #{u.color("gray200")};
+      color:  #{u.color("gray400")};
 
-    &.primary {
-    border-color:  #{u.color("gray200")};
-    background-color:  #{u.color("gray400")};
-    color:  #{u.color("gray200")};
+      &.primary {
+        border-color:  #{u.color("gray200")};
+        background-color:  #{u.color("gray400")};
+        color:  #{u.color("gray200")};
+      }
     }
+  }
 }
-}
-

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

@@ -1,82 +1,83 @@
 @use "../../utilities/functions" as u;
 
-%checkbox {
-    appearance: none;
-    box-sizing: border-box;
-    position: relative;
-    display: inline-block;
-    vertical-align: baseline;
-    top: 0.08em;
-    margin: 0;
-    padding: 0;
-    --checkbox-size: 1;
-    height: calc(#{u.width("gutter")} * var(--checkbox-size));
-    width: calc(#{u.width("gutter")} * var(--checkbox-size));
-    border-radius: 4px;
-    border: 1px solid var(--blue500);
-    background: #fff;
-
-    &::before {
-        content: "";
-        position: absolute;
-        inset: 0;
+@layer craftsman-base {
+    %checkbox {
+        appearance: none;
+        box-sizing: border-box;
+        position: relative;
+        display: inline-block;
+        vertical-align: baseline;
+        top: 0.08em;
+        margin: 0;
+        padding: 0;
+        --checkbox-size: 1;
+        height: calc(#{u.width("gutter")} * var(--checkbox-size));
+        width: calc(#{u.width("gutter")} * var(--checkbox-size));
         border-radius: 4px;
-        background: transparent;
-        transition: background-color 0.15s ease;
-    }
-
-    &::after {
-        position: absolute;
-        left: 50%;
-        top: 45%;
-        width: calc(5px * var(--checkbox-size));
-        height: calc(8px * var(--checkbox-size));
-        content: "";
-        display: block;
-        border: solid white;
-        border-width: 0 2px 2px 0;
-        transform: translate(-50%, -58%) rotate(45deg) scale(0);
-        transform-origin: center;
-        transition: transform 0.15s ease;
-    }
-
-    &:checked {
-        border-color: var(--blue500);
+        border: 1px solid var(--blue500);
+        background: #fff;
 
         &::before {
-        background-color: var(--blue500);
-        border-radius: unset;
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: 4px;
+            background: transparent;
+            transition: background-color 0.15s ease;
         }
 
         &::after {
-        transform: translate(-50%, -58%) rotate(45deg) scale(1);
+            position: absolute;
+            left: 50%;
+            top: 45%;
+            width: calc(5px * var(--checkbox-size));
+            height: calc(8px * var(--checkbox-size));
+            content: "";
+            display: block;
+            border: solid white;
+            border-width: 0 2px 2px 0;
+            transform: translate(-50%, -58%) rotate(45deg) scale(0);
+            transform-origin: center;
+            transition: transform 0.15s ease;
         }
-    }
 
-    &:disabled {
-        border-color: var(--gray500);
+        &:checked {
+            border-color: var(--blue500);
 
-        &::before {
-        background-color: var(--gray200);
-        }
+            &::before {
+            background-color: var(--blue500);
+            border-radius: unset;
+            }
 
-        &::after {
-        border-color: var(--gray200);
-        transform: translate(-50%, -58%) rotate(45deg) scale(1);
+            &::after {
+            transform: translate(-50%, -58%) rotate(45deg) scale(1);
+            }
         }
-    }
 
-    &:checked:disabled {
-        border-color: var(--gray400);
+        &:disabled {
+            border-color: var(--gray500);
 
-        &::before {
-        background: var(--gray400);
+            &::before {
+            background-color: var(--gray200);
+            }
+
+            &::after {
+            border-color: var(--gray200);
+            transform: translate(-50%, -58%) rotate(45deg) scale(1);
+            }
         }
 
-        &::after {
-        border-color: var(--white);
-        transform: translate(-50%, -58%) rotate(45deg) scale(1);
+        &:checked:disabled {
+            border-color: var(--gray400);
+
+            &::before {
+            background: var(--gray400);
+            }
+
+            &::after {
+            border-color: var(--white);
+            transform: translate(-50%, -58%) rotate(45deg) scale(1);
+            }
         }
     }
 }
-

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

@@ -1,22 +1,23 @@
 @use "../../utilities/functions" as u;
 
-%code {
-    background-color: var(--gray200);
-    color: var(--gray800);
-    padding: #{u.width(gutter, 0.125)} #{u.width(gutter, 0.25)};
-    margin: #{u.width(gutter, 0.125)};
-    display: inline-block;
-    font-size: var(--w-text, 14px);
+@layer craftsman-base {
+    %code {
+        background-color: var(--gray200);
+        color: var(--gray800);
+        padding: #{u.width(gutter, 0.125)} #{u.width(gutter, 0.25)};
+        margin: #{u.width(gutter, 0.125)};
+        display: inline-block;
+        font-size: var(--w-text, 14px);
 
-    &:has(pre) {
-    padding: #{u.width(gutter)};
-    border-radius: #{u.width(gutter, 0.5)};
-    background-color: var(--gray800);
-    color: var(--gray200);
-    }
+        &:has(pre) {
+        padding: #{u.width(gutter)};
+        border-radius: #{u.width(gutter, 0.5)};
+        background-color: var(--gray800);
+        color: var(--gray200);
+        }
 
-    &:has(pre) pre {
-    margin: 0;
+        &:has(pre) pre {
+        margin: 0;
+        }
     }
 }
-

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

@@ -1,35 +1,37 @@
 @use "../../utilities/functions" as u;
 
-%input-base {
-color: var(--text);
-border-radius: 6px;
-border: 1px solid var(--gray400);
-padding: #{u.width("gutter", 0.5)};
-background-color: var(--white);
-&:focus {
-    outline: 0;
-    box-shadow: none;
-}
-&:hover {
-    border-color: #{u.color("gray500")};
-}
+@layer craftsman-base {
 
-&[type="number"]::-webkit-outer-spin-button,
-&[type="number"]::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}
+  %input-base {
+    color: var(--text);
+    border-radius: 6px;
+    border: 1px solid var(--gray400);
+    padding: #{u.width("gutter", 0.5)};
+    background-color: var(--white);
+    &:focus {
+      outline: 0;
+      box-shadow: none;
+    }
+    &:hover {
+        border-color: #{u.color("gray500")};
+    }
 
-&[type="number"] {
-    -moz-appearance: textfield;
-    appearance: textfield;
-}
+    &[type="number"]::-webkit-outer-spin-button,
+    &[type="number"]::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
 
-&:disabled,
-&.disabled {
-    border-color: var(--gray400);
-    background-color: var(--gray100);
-}
+    &[type="number"] {
+      -moz-appearance: textfield;
+      appearance: textfield;
+    }
 
-}
+    &:disabled,
+    &.disabled {
+      border-color: var(--gray400);
+      background-color: var(--gray100);
+    }
 
+  }
+}

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

@@ -1,9 +1,11 @@
-%modal-overlay {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
+@layer craftsman-base {
+    %modal-overlay {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    }
 }

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

@@ -1,36 +1,37 @@
 @use "../../utilities/functions" as u;
 
-%radio {
-    transition: border-color 0.2s ease;
-    appearance: none;
-    cursor: pointer;
-    position: relative;
-    display: inline-grid;
-    place-content: center;
-    padding: 0;
-    --radio-size: 1;
-    width: calc(#{u.width("gutter")} * var(--radio-size));
-    height: calc(#{u.width("gutter")} * var(--radio-size));
-    border: 1px solid var(--blue600);
-    border-radius: 50%;
-    box-sizing: border-box;
-
-    &::before {
-        content: "";
-        width: calc(#{u.width("gutter", 0.5)} * var(--radio-size));
-        height: calc(#{u.width("gutter", 0.5)} * var(--radio-size));
+@layer craftsman-base {
+    %radio {
+        transition: border-color 0.2s ease;
+        appearance: none;
+        cursor: pointer;
+        position: relative;
+        display: inline-grid;
+        place-content: center;
+        padding: 0;
+        --radio-size: 1;
+        width: calc(#{u.width("gutter")} * var(--radio-size));
+        height: calc(#{u.width("gutter")} * var(--radio-size));
+        border: 1px solid var(--blue600);
         border-radius: 50%;
-        transform: scale(0);
-        transition: transform 0.2s ease;
-        background-color: var(--blue600);
-    }
-
-    &:checked {
-        border-color: var(--gray500);
+        box-sizing: border-box;
 
         &::before {
-        transform: scale(1);
+            content: "";
+            width: calc(#{u.width("gutter", 0.5)} * var(--radio-size));
+            height: calc(#{u.width("gutter", 0.5)} * var(--radio-size));
+            border-radius: 50%;
+            transform: scale(0);
+            transition: transform 0.2s ease;
+            background-color: var(--blue600);
+        }
+
+        &:checked {
+            border-color: var(--gray500);
+
+            &::before {
+            transform: scale(1);
+            }
         }
     }
 }
-

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

@@ -1,45 +1,44 @@
 @use "../../utilities/functions" as u;
 @use "./input";
-
-%select-styles {
-    padding-right: 40px;
-    position: relative;
-    &:focus-visible {
-        outline: none;
-    }
-    &:-moz-focusring {
-        color: transparent;
-        text-shadow: 0 0 0 #{u.color("text")};
-    }
-    &::picker-icon {
-        color: #999999;
-        transition: 0.2s rotate;
-        content: "";
-        display: inline-block;
-        width: 7px;
-        height: 7px;
-        border-style: solid;
-        border-width: 0 2px 2px 0;
-        transform: rotate(45deg);
-        margin: 0px 2px 0 12px;
-        position: absolute;
-        right: 14px;
-        top: 14px;
-    }
-    &:open::picker-icon {
-        margin-top: 4px;
-        rotate: 180deg;
-    }
-    option {
-        padding: #{u.width("gutter", 0.5)};
-        &:hover,
-        &:focus {
-            background: #{u.color("gray300")};
+@layer craftsman-base {
+    %select-styles {
+        padding-right: 40px;
+        position: relative;
+        &:focus-visible {
+            outline: none;
         }
-        &::checkmark {
+        &:-moz-focusring {
+            color: transparent;
+            text-shadow: 0 0 0 #{u.color("text")};
+        }
+        &::picker-icon {
+            color: #999999;
+            transition: 0.2s rotate;
             content: "";
+            display: inline-block;
+            width: 7px;
+            height: 7px;
+            border-style: solid;
+            border-width: 0 2px 2px 0;
+            transform: rotate(45deg);
+            margin: 0px 2px 0 12px;
+            position: absolute;
+            right: 14px;
+            top: 14px;
+        }
+        &:open::picker-icon {
+            margin-top: 4px;
+            rotate: 180deg;
+        }
+        option {
+            padding: #{u.width("gutter", 0.5)};
+            &:hover,
+            &:focus {
+                background: #{u.color("gray300")};
+            }
+            &::checkmark {
+                content: "";
+            }
         }
     }
 }
-
-

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

@@ -52,4 +52,3 @@
 @mixin xsmall {
     font-size: #{u.width(text, 0.5)};
 }
-