@teammodlr/ui-kit 2.0.29 → 2.0.30

package/src/components/checkbox/Checkbox.css

@@ -1,185 +0,0 @@
-.m-checkbox {
-    --checkbox-width: 22px;
-    --checkbox-height: 22px;
-    --checkbox-border-radius: 6px;
-    --checkbox-border-width: 1px;
-    --checkbox-background-color: var(--white);
-    --checkbox-border-color: var(--gray-300);
-    --checkbox-gap: 6px;
-
-    --checkbox-tick-width: 4px;
-    --checkbox-tick-height: 10px;
-    --checkbox-tick-height-negative: -10px;
-
-    --checkbox-tick-top: 8px;
-    --checkbox-tick-left: 3px;
-    --checkbox-tick-border-width: 3px;
-
-    display: flex;
-    align-items: center;
-    position: relative;
-    font-weight: bold;
-    cursor: pointer;
-    gap: var(--checkbox-gap);
-}
-
-.m-checkbox.m-checkbox--xs {
-    --checkbox-width: 16px;
-    --checkbox-height: 16px;
-    --checkbox-border-radius: 4px;
-    --checkbox-border-width: 1px;
-    --checkbox-tick-top: 6px;
-    --checkbox-tick-left: 1px;
-
-    --checkbox-tick-width: 3px;
-    --checkbox-tick-height: 8px;
-    --checkbox-tick-height-negative: -8px;
-}
-
-.m-checkbox.m-checkbox--sm {
-    --checkbox-width: 20px;
-    --checkbox-height: 20px;
-    --checkbox-border-radius: 4px;
-    --checkbox-border-width: 1px;
-    --checkbox-tick-top: 7px;
-    --checkbox-tick-left: 2px;
-}
-
-.m-checkbox.m-checkbox--lg {
-    --checkbox-width: 26px;
-    --checkbox-height: 26px;
-    --checkbox-border-radius: 8px;
-    --checkbox-border-width: 1px;
-
-    --checkbox-tick-top: 10px;
-    --checkbox-tick-left: 3px;
-
-    --checkbox-tick-border-width: 4px;
-    --checkbox-tick-width: 4px;
-    --checkbox-tick-height: 14px;
-    --checkbox-tick-height-negative: -14px;
-}
-
-.m-checkbox.m-checkbox--xl {
-    --checkbox-width: 32px;
-    --checkbox-height: 32px;
-    --checkbox-border-radius: 8px;
-    --checkbox-border-width: 1px;
-
-    --checkbox-tick-top: 14px;
-    --checkbox-tick-left: 5px;
-
-    --checkbox-tick-border-width: 4px;
-    --checkbox-tick-width: 5px;
-    --checkbox-tick-height: 16px;
-    --checkbox-tick-height-negative: -16px;
-}
-
-.m-checkbox.m-checkbox--blue.m-checkbox--checked {
-    --checkbox-background-color: var(--blue);
-    --checkbox-border-color: var(--blue);
-}
-
-.m-checkbox.m-checkbox--green.m-checkbox--checked {
-    --checkbox-background-color: var(--green);
-    --checkbox-border-color: var(--green);
-}
-
-.m-checkbox.m-checkbox--red.m-checkbox--checked {
-    --checkbox-background-color: var(--red);
-    --checkbox-border-color: var(--red);
-}
-
-.m-checkbox.m-checkbox--yellow.m-checkbox--checked {
-    --checkbox-background-color: var(--yellow);
-    --checkbox-border-color: var(--yellow);
-}
-
-.m-checkbox input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-    display: none;
-}
-
-.m-checkbox span {
-    display: flex;
-    height: var(--checkbox-height);
-    width: var(--checkbox-width);
-    border-radius: var(--checkbox-border-radius);
-    border: var(--checkbox-border-width) solid var(--checkbox-border-color);
-    background-color: var(--checkbox-background-color);
-    transition: all 125ms cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-}
-
-.m-checkbox:hover:not(.m-checkbox--checked):not(.m-checkbox--disabled) span {
-    --checkbox-border-color: var(--gray-400);
-    --checkbox-background-color: var(--gray-100);
-}
-
-.m-checkbox.m-checkbox--disabled span, 
-.m-checkbox.m-checkbox--disabled .m-checkbox__label {
-    cursor: not-allowed;
-}
-
-.m-checkbox.m-checkbox--disabled span {
-    opacity: 0.6;
-}
-
-.m-checkbox:not(.m-checkbox--checked).m-checkbox--disabled span {
-    --checkbox-border-color: var(--gray-300);
-    --checkbox-background-color: var(--gray-100);
-}
-
-.m-checkbox.m-checkbox--checked span {
-    background-color: var(--checkbox-background-color);
-    border-color: var(--checkbox-background-color);
-}
-
-.m-checkbox.m-checkbox--checked span::before {
-    content: "";
-    position: absolute;
-    transform: rotate(45deg);
-    border-right: var(--checkbox-tick-border-width) solid transparent;
-    border-bottom: var(--checkbox-tick-border-width) solid transparent;
-    top: var(--checkbox-tick-top);
-    left: var(--checkbox-tick-left);
-    color: #FFFFFF;
-    transform-origin: 0% 100%;
-    animation: draw-tick 125ms 170ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-.m-checkbox .m-checkbox__label {
-    display: inline-block;
-    vertical-align: middle;
-    font-size: 14px;
-    line-height: 24px;
-    color: #000000;
-    font-weight: 400;
-    user-select: none;
-}
-
-@keyframes draw-tick {
-    0% {
-        height: 0px;
-        width: 0px;
-        border-color: #FFF;
-        transform: translate3d(0, 0, 0) rotate(45deg);
-    }
-
-    25% {
-        height: 0px;
-        width: var(--checkbox-tick-width);
-        transform: translate3d(0, 0, 0) rotate(45deg);
-    }
-
-    100% {
-        border-color: #FFF;
-        height: var(--checkbox-tick-height);
-        width: var(--checkbox-tick-width);
-        transform: translate3d(0, var(--checkbox-tick-height-negative), 0) rotate(45deg);
-    }
-}

package/src/components/input/Input.css

@@ -1,173 +0,0 @@
-.m-input__container {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-}
-
-.m-input {
-    --input-height: 40px;
-    --input-padding: 0 8px;
-    --input-font-size: 15px;
-    --input-border-radius: 4px;
-    --input-clear-size: 1.2rem;
-    --input-background-color: var(--white);
-    --input-border-color: var(--gray-200);
-
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    height: var(--input-height);
-    font-size: var(--input-font-size);
-    background-color: var(--input-background-color);
-    border: 1px solid var(--input-border-color);
-    box-shadow: none;
-    border-radius: var(--input-border-radius);
-    outline: 0;
-    cursor: text;
-    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1), background-color .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.m-input.m-input--disabled {
-    --input-border-color: var(--gray-300);
-    --input-background-color: var(--gray-100);
-    opacity: 0.6;
-    cursor: not-allowed;
-}
-
-.m-input.m-input--disabled input {
-    cursor: not-allowed;
-}
-
-.m-input:not(.m-input--disabled):focus-within {
-    --input-border-color: var(--blue);
-    box-shadow: 0 0 0 2px var(--blue-outline);
-}
-
-.m-input:not(.m-input--disabled):not(:focus-within):hover {
-    --input-border-color: var(--gray-400);
-}
-
-.m-input input {
-    flex: 1 0 0;
-    min-width: 0;
-    height: 100%;
-    padding: var(--input-padding);
-    font-size: inherit;
-    color: var(--gray-600);
-    background-color: transparent;
-    border: 0;
-    outline: 0;
-    border-radius: var(--input-border-radius);
-}
-
-.m-input__clearable {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 6px;
-}
-
-.m-input .m-input__clearable i.m-icon--close {
-    cursor: pointer;
-    width: var(--input-clear-size);
-    height: var(--input-clear-size);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 100%;
-    color: var(--gray-500);
-    background-color: transparent;
-    transition: background-color .125s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.m-input .m-input__clearable i.m-icon--close:hover {
-    color: var(--gray-500);
-    background-color: var(--gray-150);
-}
-
-.m-input i.m-icon--close::before {
-    --close-icon-size: 16px;
-    background-color: currentColor;
-    content: "";
-    width: var(--close-icon-size);
-    height: var(--close-icon-size);
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");
-    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");
-    -webkit-mask-position: center center;
-    mask-position: center center;
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-    -webkit-mask-size: var(--close-icon-size) var(--close-icon-size);
-    mask-size: var(--close-icon-size) var(--close-icon-size);
-}
-
-.m-input--xs {
-    --input-height: 32px;
-    --input-padding: 0 8px;
-    --input-font-size: 13px;
-    --input-border-radius: 4px;
-    --input-clear-size: 1.2rem;
-}
-
-.m-input--sm {
-    --input-height: 36px;
-    --input-padding: 0 8px;
-    --input-font-size: 14px;
-    --input-border-radius: 4px;
-    --input-clear-size: 1.2rem;
-}
-
-.m-input--md {
-    --input-height: 40px;
-    --input-padding: 0 8px;
-    --input-font-size: 15px;
-    --input-border-radius: 4px;
-    --input-clear-size: 1.2rem;
-}
-
-.m-input--lg {
-    --input-height: 42px;
-    --input-padding: 0 8px;
-    --input-font-size: 16px;
-    --input-border-radius: 4px;
-    --input-clear-size: 1.2rem;
-}
-
-.m-input--xl {
-    --input-height: 46px;
-    --input-padding: 0 8px;
-    --input-font-size: 18px;
-    --input-border-radius: 6px;
-    --input-clear-size: 1.2rem;
-}
-
-.m-input__label {
-    margin-bottom: 5px;
-    color: var(--gray-600);
-    font-size: 15px;
-    font-weight: 600;
-}
-
-.m-input__help {
-    margin-top: 4px;
-    color: var(--gray-500);
-    font-size: 15px;
-    font-weight: 400;
-}
-
-.m-input__error {
-    margin: 4px 0 8px 0;
-    color: var(--red);
-    font-size: 15px;
-    font-weight: 400;
-}
-
-.m-form .m-form__input {
-    margin-bottom: 16px;
-}
-
-.m-form .m-form__input .m-input__error {
-    margin: 4px 0 0 0;
-}
-

package/src/components/link/Link.css

@@ -1,147 +0,0 @@
-.m-link {
-    --link-color: var(--blue);
-    --link-color-hover: var(--blue-hover);
-    --link-color-focus: var(--blue-focus);
-    --link-color-visited: var(--blue-focus);
-    color: var(--link-color);
-    text-decoration: none;
-    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.m-link--underline {
-    text-decoration: underline;
-}
-
-.m-link--block {
-    display: flex;
-}
-
-.m-link:visited {
-    color: var(--link-color-visited);
-}
-
-.m-link:hover {
-    color: var(--link-color-hover);
-    text-decoration: underline;
-}
-
-.m-link:focus,
-.m-link:active {
-    color: var(--link-color-focus);
-}
-
-.m-link--blue {
-    --link-color: var(--blue);
-    --link-color-hover: var(--blue-hover);
-    --link-color-focus: var(--blue-focus);
-    --link-color-visited: var(--blue-focus);
-}
-
-.m-link--blue:visited {
-    --link-color: var(--blue);
-    --link-color-hover: var(--blue-hover);
-    --link-color-focus: var(--blue-focus);
-    --link-color-visited: var(--blue-focus);
-}
-
-.m-link--blue:hover {
-    --link-color: var(--blue-hover);
-    --link-color-hover: var(--blue-hover);
-    --link-color-focus: var(--blue-focus);
-    --link-color-visited: var(--blue-focus);
-}
-
-.m-link--blue:focus,
-.m-link--blue:active {
-    --link-color: var(--blue-focus);
-    --link-color-hover: var(--blue-focus);
-    --link-color-focus: var(--blue-focus);
-    --link-color-visited: var(--blue-focus);
-}
-
-.m-link--green {
-    --link-color: var(--green);
-    --link-color-hover: var(--green-hover);
-    --link-color-focus: var(--green-focus);
-    --link-color-visited: var(--green-focus);
-}
-
-.m-link--green:visited {
-    --link-color: var(--green);
-    --link-color-hover: var(--green-hover);
-    --link-color-focus: var(--green-focus);
-    --link-color-visited: var(--green-focus);
-}
-
-.m-link--green:hover {
-    --link-color: var(--green-hover);
-    --link-color-hover: var(--green-hover);
-    --link-color-focus: var(--green-focus);
-    --link-color-visited: var(--green-focus);
-}
-
-.m-link--green:focus,
-.m-link--green:active {
-    --link-color: var(--green-focus);
-    --link-color-hover: var(--green-focus);
-    --link-color-focus: var(--green-focus);
-    --link-color-visited: var(--green-focus);
-}
-
-.m-link--red {
-    --link-color: var(--red);
-    --link-color-hover: var(--red-hover);
-    --link-color-focus: var(--red-focus);
-    --link-color-visited: var(--red-focus);
-}
-
-.m-link--red:visited {
-    --link-color: var(--red);
-    --link-color-hover: var(--red-hover);
-    --link-color-focus: var(--red-focus);
-    --link-color-visited: var(--red-focus);
-}
-
-.m-link--red:hover {
-    --link-color: var(--red-hover);
-    --link-color-hover: var(--red-hover);
-    --link-color-focus: var(--red-focus);
-    --link-color-visited: var(--red-focus);
-}
-
-.m-link--red:focus,
-.m-link--red:active {
-    --link-color: var(--red-focus);
-    --link-color-hover: var(--red-focus);
-    --link-color-focus: var(--red-focus);
-    --link-color-visited: var(--red-focus);
-}
-
-.m-link--yellow {
-    --link-color: var(--yellow);
-    --link-color-hover: var(--yellow-hover);
-    --link-color-focus: var(--yellow-focus);
-    --link-color-visited: var(--yellow-focus);
-}
-
-.m-link--yellow:visited {
-    --link-color: var(--yellow);
-    --link-color-hover: var(--yellow-hover);
-    --link-color-focus: var(--yellow-focus);
-    --link-color-visited: var(--yellow-focus);
-}
-
-.m-link--yellow:hover {
-    --link-color: var(--yellow-hover);
-    --link-color-hover: var(--yellow-hover);
-    --link-color-focus: var(--yellow-focus);
-    --link-color-visited: var(--yellow-focus);
-}
-
-.m-link--yellow:focus,
-.m-link--yellow:active {
-    --link-color: var(--yellow-focus);
-    --link-color-hover: var(--yellow-focus);
-    --link-color-focus: var(--yellow-focus);
-    --link-color-visited: var(--yellow-focus);
-}

package/src/components/messageprovider/MessageProvider.css

@@ -1,23 +0,0 @@
-.m-message-provider__container {
-    z-index: 5000;
-    position: fixed;
-    height: 0;
-    overflow: visible;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.m-message-provider__container--top {
-    top: 12px;
-    left: 0;
-    right: 0;
-}
-
-.m-message__wrapper {
-    margin: 0 0 8px 0;
-    z-index: 0;
-    transform-origin: top center;
-    display: flex;
-    align-items: center;
-}

package/src/components/radio/Checkbox.css

@@ -1,185 +0,0 @@
-.m-checkbox {
-    --checkbox-width: 22px;
-    --checkbox-height: 22px;
-    --checkbox-border-radius: 6px;
-    --checkbox-border-width: 1px;
-    --checkbox-background-color: var(--white);
-    --checkbox-border-color: var(--gray-300);
-    --checkbox-gap: 6px;
-
-    --checkbox-tick-width: 4px;
-    --checkbox-tick-height: 10px;
-    --checkbox-tick-height-negative: -10px;
-
-    --checkbox-tick-top: 8px;
-    --checkbox-tick-left: 3px;
-    --checkbox-tick-border-width: 3px;
-
-    display: flex;
-    align-items: center;
-    position: relative;
-    font-weight: bold;
-    cursor: pointer;
-    gap: var(--checkbox-gap);
-}
-
-.m-checkbox.m-checkbox--xs {
-    --checkbox-width: 16px;
-    --checkbox-height: 16px;
-    --checkbox-border-radius: 4px;
-    --checkbox-border-width: 1px;
-    --checkbox-tick-top: 6px;
-    --checkbox-tick-left: 1px;
-
-    --checkbox-tick-width: 3px;
-    --checkbox-tick-height: 8px;
-    --checkbox-tick-height-negative: -8px;
-}
-
-.m-checkbox.m-checkbox--sm {
-    --checkbox-width: 20px;
-    --checkbox-height: 20px;
-    --checkbox-border-radius: 4px;
-    --checkbox-border-width: 1px;
-    --checkbox-tick-top: 7px;
-    --checkbox-tick-left: 2px;
-}
-
-.m-checkbox.m-checkbox--lg {
-    --checkbox-width: 26px;
-    --checkbox-height: 26px;
-    --checkbox-border-radius: 8px;
-    --checkbox-border-width: 1px;
-
-    --checkbox-tick-top: 10px;
-    --checkbox-tick-left: 3px;
-
-    --checkbox-tick-border-width: 4px;
-    --checkbox-tick-width: 4px;
-    --checkbox-tick-height: 14px;
-    --checkbox-tick-height-negative: -14px;
-}
-
-.m-checkbox.m-checkbox--xl {
-    --checkbox-width: 32px;
-    --checkbox-height: 32px;
-    --checkbox-border-radius: 8px;
-    --checkbox-border-width: 1px;
-
-    --checkbox-tick-top: 14px;
-    --checkbox-tick-left: 5px;
-
-    --checkbox-tick-border-width: 4px;
-    --checkbox-tick-width: 5px;
-    --checkbox-tick-height: 16px;
-    --checkbox-tick-height-negative: -16px;
-}
-
-.m-checkbox.m-checkbox--blue.m-checkbox--checked {
-    --checkbox-background-color: var(--blue);
-    --checkbox-border-color: var(--blue);
-}
-
-.m-checkbox.m-checkbox--green.m-checkbox--checked {
-    --checkbox-background-color: var(--green);
-    --checkbox-border-color: var(--green);
-}
-
-.m-checkbox.m-checkbox--red.m-checkbox--checked {
-    --checkbox-background-color: var(--red);
-    --checkbox-border-color: var(--red);
-}
-
-.m-checkbox.m-checkbox--yellow.m-checkbox--checked {
-    --checkbox-background-color: var(--yellow);
-    --checkbox-border-color: var(--yellow);
-}
-
-.m-checkbox input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-    display: none;
-}
-
-.m-checkbox span {
-    display: flex;
-    height: var(--checkbox-height);
-    width: var(--checkbox-width);
-    border-radius: var(--checkbox-border-radius);
-    border: var(--checkbox-border-width) solid var(--checkbox-border-color);
-    background-color: var(--checkbox-background-color);
-    transition: all 125ms cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-}
-
-.m-checkbox:hover:not(.m-checkbox--checked):not(.m-checkbox--disabled) span {
-    --checkbox-border-color: var(--gray-400);
-    --checkbox-background-color: var(--gray-100);
-}
-
-.m-checkbox.m-checkbox--disabled span, 
-.m-checkbox.m-checkbox--disabled .m-checkbox__label {
-    cursor: not-allowed;
-}
-
-.m-checkbox.m-checkbox--disabled span {
-    opacity: 0.6;
-}
-
-.m-checkbox:not(.m-checkbox--checked).m-checkbox--disabled span {
-    --checkbox-border-color: var(--gray-300);
-    --checkbox-background-color: var(--gray-100);
-}
-
-.m-checkbox.m-checkbox--checked span {
-    background-color: var(--checkbox-background-color);
-    border-color: var(--checkbox-background-color);
-}
-
-.m-checkbox.m-checkbox--checked span::before {
-    content: "";
-    position: absolute;
-    transform: rotate(45deg);
-    border-right: var(--checkbox-tick-border-width) solid transparent;
-    border-bottom: var(--checkbox-tick-border-width) solid transparent;
-    top: var(--checkbox-tick-top);
-    left: var(--checkbox-tick-left);
-    color: #FFFFFF;
-    transform-origin: 0% 100%;
-    animation: draw-tick 125ms 170ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-.m-checkbox .m-checkbox__label {
-    display: inline-block;
-    vertical-align: middle;
-    font-size: 14px;
-    line-height: 24px;
-    color: #000000;
-    font-weight: 400;
-    user-select: none;
-}
-
-@keyframes draw-tick {
-    0% {
-        height: 0px;
-        width: 0px;
-        border-color: #FFF;
-        transform: translate3d(0, 0, 0) rotate(45deg);
-    }
-
-    25% {
-        height: 0px;
-        width: var(--checkbox-tick-width);
-        transform: translate3d(0, 0, 0) rotate(45deg);
-    }
-
-    100% {
-        border-color: #FFF;
-        height: var(--checkbox-tick-height);
-        width: var(--checkbox-tick-width);
-        transform: translate3d(0, var(--checkbox-tick-height-negative), 0) rotate(45deg);
-    }
-}