@teammodlr/ui-kit 2.0.24 → 2.0.27

package/src/components/select/style/Select.css.ts

@@ -1,261 +1,261 @@
-import { createVar, globalStyle, style, styleVariants } from "@vanilla-extract/css";
-import { themeVars } from "../../../styles/theme.css";
-import { fonts } from "../../../styles/typography.css";
-
-const sizes = {
-    xs: '26px',
-    sm: '30px',
-    md: '38px',
-    lg: '42px',
-    xl: '48px',
-};
-
-const borderRadiuses = {
-    xs: '2px',
-    sm: '3px',
-    md: '4px',
-    lg: '6px',
-    xl: '8px',
-};
-
-export const vars = {
-    height: createVar(),
-    radius: createVar(),
-    paddingX: createVar(),
-    paddingY: createVar(),
-    borderColor: createVar(),
-    backgroundColor: createVar(),
-    color: createVar(),
-    cursor: createVar(),
-    optionColor: createVar(),
-    optionBackgroundColor: createVar(),
-}
-
-export const wrapper = style({
-    position: 'relative',
-    outline: 'none',
-
-});
-
-export const base = style({
-    vars: {
-        [vars.height]: sizes.md,
-        [vars.radius]: borderRadiuses.md,
-        [vars.paddingX]: themeVars.space[2],
-        [vars.paddingY]: themeVars.space[0],
-        [vars.borderColor]: themeVars.color.gray[300],
-        [vars.color]: themeVars.color.gray[900],
-        [vars.backgroundColor]: '#FFFFFF',
-        [vars.cursor]: 'text',
-    },
-    height: vars.height,
-    minHeight: vars.height,
-    width: '100%',
-    borderRadius: vars.radius,
-    borderWidth: 1,
-    borderStyle: 'solid',
-    borderColor: vars.borderColor,
-    padding: `${vars.paddingY} ${vars.paddingX}`,
-    fontSize: themeVars.fontSize.base,
-    display: 'block',
-    textAlign: 'left',
-    appearance: 'none',
-    lineHeight: vars.height,
-    boxSizing: 'border-box',
-    resize: 'none',
-    boxShadow: 'none',
-    transition: `color .3s ${themeVars.transition.default},
-        background-color .3s ${themeVars.transition.default},
-        box-shadow .3s ${themeVars.transition.default},
-        border-color .3s ${themeVars.transition.default}`,
-    ':hover': {
-        vars: {
-            [vars.borderColor]: themeVars.color.blue[400],
-        }
-    },
-    ':focus': {
-        vars: {
-            [vars.borderColor]: themeVars.color.blue[500],
-        },
-        outline: 'none',
-        boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`,
-    }
-});
-
-export const selectedTags = style({
-    display: 'flex',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    gap: themeVars.space[1],
-});
-
-export const block = style({
-    width: '100%',
-});
-
-export const disabled = style({
-    vars: {
-        [vars.borderColor]: themeVars.color.gray[200],
-        [vars.color]: themeVars.color.gray[500],
-        [vars.backgroundColor]: themeVars.color.gray[50],
-        [vars.cursor]: 'not-allowed',
-    },
-    ':focus': {
-        boxShadow: 'none',
-    },
-    ':hover': {
-        cursor: 'not-allowed',
-    }
-});
-
-export const label = style({
-    fontWeight: "500",
-    display: 'inline-block',
-    fontSize: themeVars.fontSize.base,
-    wordBreak: 'break-word',
-    cursor: 'pointer',
-    marginBottom: themeVars.space[1],
-});
-
-export const description = style({
-    display: 'block',
-    textDecoration: 'none',
-    fontSize: themeVars.fontSize.base,
-    color: themeVars.color.gray[600],
-    lineHeight: themeVars.fontSize.large,
-    wordBreak: 'break-word',
-    marginBottom: themeVars.space[1.5],
-});
-
-export const errorMessage = style({
-    display: 'block',
-    textDecoration: 'none',
-    fontSize: themeVars.fontSize.base,
-    color: themeVars.color.red[600],
-    wordBreak: 'break-word',
-    marginTop: themeVars.space[1.5],
-});
-
-export const error = style({
-    vars: {
-        [vars.borderColor]: themeVars.color.red[500],
-    },
-    ':hover': {
-        vars: {
-            [vars.borderColor]: themeVars.color.red[500],
-        }
-    },
-    ':focus': {
-        boxShadow: `0 0 0 2px ${themeVars.color.red[200]}`,
-        vars: {
-            [vars.borderColor]: themeVars.color.red[500],
-        }
-    },
-});
-
-export const focused = style({
-    vars: {
-        [vars.borderColor]: themeVars.color.blue[500],
-    },
-    boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`
-});
-
-export const rightIcon = style({
-    pointerEvents: 'none',
-    position: 'absolute',
-    zIndex: 1,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: "2.25rem",
-    color: themeVars.color.gray[400],
-});
-
-export const hasRightIcon = style({
-    paddingRight: "2.25rem",
-});
-
-export const menu = style({
-    backgroundColor: "#FFFFFF",
-    borderRadius: "4px",
-    zIndex: 4000,
-    border: `1px solid ${themeVars.color.gray[200]}`,
-    boxShadow: themeVars.shadow.md,
-    maxHeight: "230px",
-    overflowY: "auto",
-});
-
-export const placeholder = style({
-    userSelect: "none",
-    color: themeVars.color.gray[500],
-})
-
-export const search = style({
-    padding: `${themeVars.space[1]} ${themeVars.space[1]} 0`,
-    backgroundColor: '#FFFFFF',
-    position: 'sticky',
-    top: 0,
-    zIndex: 1,
-});
-
-export const options = style({
-    padding: themeVars.space[1],
-    display: 'flex',
-    flexDirection: 'column',
-    gap: themeVars.space[0.5],
-});
-
-export const option = style({
-    vars: {
-        [vars.optionColor]: themeVars.color.gray[800],
-        [vars.optionBackgroundColor]: '#FFFFFF',
-    },
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-    cursor: "pointer",
-    minHeight: "36px",
-    fontSize: themeVars.fontSize.base,
-    paddingBlock: themeVars.space['1.5'],
-    paddingInline: themeVars.space['3'],
-    gap: themeVars.space[2],
-    color: vars.optionColor,
-    transition: "background-color 0.05s ease-in-out",
-    backgroundColor: vars.optionBackgroundColor,
-    borderRadius: borderRadiuses.md,
-    ':hover': {
-        vars: {
-            [vars.optionColor]: themeVars.color.gray[800],
-            [vars.optionBackgroundColor]: themeVars.color.gray[100],
-        },
-    }
-});
-
-export const optionFocused = style({
-    vars: {
-        [vars.optionColor]: themeVars.color.gray[800],
-        [vars.optionBackgroundColor]: themeVars.color.gray[100],
-    },
-    ':hover': {
-        vars: {
-            [vars.optionColor]: themeVars.color.gray[800],
-            [vars.optionBackgroundColor]: themeVars.color.gray[100],
-        },
-    }
-});
-
-export const optionSelected = style({
-    vars: {
-        [vars.optionColor]: themeVars.color.blue[50],
-        [vars.optionBackgroundColor]: themeVars.color.blue[500],
-    },
-    ':hover': {
-        vars: {
-            [vars.optionColor]: themeVars.color.blue[50],
-            [vars.optionBackgroundColor]: themeVars.color.blue[600],
-        },
-    }
-});
+import { createVar, globalStyle, style, styleVariants } from "@vanilla-extract/css";
+import { themeVars } from "../../../styles/theme.css";
+import { fonts } from "../../../styles/typography.css";
+
+const sizes = {
+    xs: '26px',
+    sm: '30px',
+    md: '38px',
+    lg: '42px',
+    xl: '48px',
+};
+
+const borderRadiuses = {
+    xs: '2px',
+    sm: '3px',
+    md: '4px',
+    lg: '6px',
+    xl: '8px',
+};
+
+export const vars = {
+    height: createVar(),
+    radius: createVar(),
+    paddingX: createVar(),
+    paddingY: createVar(),
+    borderColor: createVar(),
+    backgroundColor: createVar(),
+    color: createVar(),
+    cursor: createVar(),
+    optionColor: createVar(),
+    optionBackgroundColor: createVar(),
+}
+
+export const wrapper = style({
+    position: 'relative',
+    outline: 'none',
+
+});
+
+export const base = style({
+    vars: {
+        [vars.height]: sizes.md,
+        [vars.radius]: borderRadiuses.md,
+        [vars.paddingX]: themeVars.space[2],
+        [vars.paddingY]: themeVars.space[0],
+        [vars.borderColor]: themeVars.color.gray[300],
+        [vars.color]: themeVars.color.gray[900],
+        [vars.backgroundColor]: '#FFFFFF',
+        [vars.cursor]: 'text',
+    },
+    height: vars.height,
+    minHeight: vars.height,
+    width: '100%',
+    borderRadius: vars.radius,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: vars.borderColor,
+    padding: `${vars.paddingY} ${vars.paddingX}`,
+    fontSize: themeVars.fontSize.base,
+    display: 'block',
+    textAlign: 'left',
+    appearance: 'none',
+    lineHeight: vars.height,
+    boxSizing: 'border-box',
+    resize: 'none',
+    boxShadow: 'none',
+    transition: `color .3s ${themeVars.transition.default},
+        background-color .3s ${themeVars.transition.default},
+        box-shadow .3s ${themeVars.transition.default},
+        border-color .3s ${themeVars.transition.default}`,
+    ':hover': {
+        vars: {
+            [vars.borderColor]: themeVars.color.blue[400],
+        }
+    },
+    ':focus': {
+        vars: {
+            [vars.borderColor]: themeVars.color.blue[500],
+        },
+        outline: 'none',
+        boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`,
+    }
+});
+
+export const selectedTags = style({
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: themeVars.space[1],
+});
+
+export const block = style({
+    width: '100%',
+});
+
+export const disabled = style({
+    vars: {
+        [vars.borderColor]: themeVars.color.gray[200],
+        [vars.color]: themeVars.color.gray[500],
+        [vars.backgroundColor]: themeVars.color.gray[50],
+        [vars.cursor]: 'not-allowed',
+    },
+    ':focus': {
+        boxShadow: 'none',
+    },
+    ':hover': {
+        cursor: 'not-allowed',
+    }
+});
+
+export const label = style({
+    fontWeight: "500",
+    display: 'inline-block',
+    fontSize: themeVars.fontSize.base,
+    wordBreak: 'break-word',
+    cursor: 'pointer',
+    marginBottom: themeVars.space[1],
+});
+
+export const description = style({
+    display: 'block',
+    textDecoration: 'none',
+    fontSize: themeVars.fontSize.base,
+    color: themeVars.color.gray[600],
+    lineHeight: themeVars.fontSize.large,
+    wordBreak: 'break-word',
+    marginBottom: themeVars.space[1.5],
+});
+
+export const errorMessage = style({
+    display: 'block',
+    textDecoration: 'none',
+    fontSize: themeVars.fontSize.base,
+    color: themeVars.color.red[600],
+    wordBreak: 'break-word',
+    marginTop: themeVars.space[1.5],
+});
+
+export const error = style({
+    vars: {
+        [vars.borderColor]: themeVars.color.red[500],
+    },
+    ':hover': {
+        vars: {
+            [vars.borderColor]: themeVars.color.red[500],
+        }
+    },
+    ':focus': {
+        boxShadow: `0 0 0 2px ${themeVars.color.red[200]}`,
+        vars: {
+            [vars.borderColor]: themeVars.color.red[500],
+        }
+    },
+});
+
+export const focused = style({
+    vars: {
+        [vars.borderColor]: themeVars.color.blue[500],
+    },
+    boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`
+});
+
+export const rightIcon = style({
+    pointerEvents: 'none',
+    position: 'absolute',
+    zIndex: 1,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: "2.25rem",
+    color: themeVars.color.gray[400],
+});
+
+export const hasRightIcon = style({
+    paddingRight: "2.25rem",
+});
+
+export const menu = style({
+    backgroundColor: "#FFFFFF",
+    borderRadius: "4px",
+    zIndex: 4000,
+    border: `1px solid ${themeVars.color.gray[200]}`,
+    boxShadow: themeVars.shadow.md,
+    maxHeight: "230px",
+    overflowY: "auto",
+});
+
+export const placeholder = style({
+    userSelect: "none",
+    color: themeVars.color.gray[500],
+})
+
+export const search = style({
+    padding: `${themeVars.space[1]} ${themeVars.space[1]} 0`,
+    backgroundColor: '#FFFFFF',
+    position: 'sticky',
+    top: 0,
+    zIndex: 1,
+});
+
+export const options = style({
+    padding: themeVars.space[1],
+    display: 'flex',
+    flexDirection: 'column',
+    gap: themeVars.space[0.5],
+});
+
+export const option = style({
+    vars: {
+        [vars.optionColor]: themeVars.color.gray[800],
+        [vars.optionBackgroundColor]: '#FFFFFF',
+    },
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    cursor: "pointer",
+    minHeight: "36px",
+    fontSize: themeVars.fontSize.base,
+    paddingBlock: themeVars.space['1.5'],
+    paddingInline: themeVars.space['3'],
+    gap: themeVars.space[2],
+    color: vars.optionColor,
+    transition: "background-color 0.05s ease-in-out",
+    backgroundColor: vars.optionBackgroundColor,
+    borderRadius: borderRadiuses.md,
+    ':hover': {
+        vars: {
+            [vars.optionColor]: themeVars.color.gray[800],
+            [vars.optionBackgroundColor]: themeVars.color.gray[100],
+        },
+    }
+});
+
+export const optionFocused = style({
+    vars: {
+        [vars.optionColor]: themeVars.color.gray[800],
+        [vars.optionBackgroundColor]: themeVars.color.gray[100],
+    },
+    ':hover': {
+        vars: {
+            [vars.optionColor]: themeVars.color.gray[800],
+            [vars.optionBackgroundColor]: themeVars.color.gray[100],
+        },
+    }
+});
+
+export const optionSelected = style({
+    vars: {
+        [vars.optionColor]: themeVars.color.blue[50],
+        [vars.optionBackgroundColor]: themeVars.color.blue[500],
+    },
+    ':hover': {
+        vars: {
+            [vars.optionColor]: themeVars.color.blue[50],
+            [vars.optionBackgroundColor]: themeVars.color.blue[600],
+        },
+    }
+});

package/src/components/select/style/index.ts

@@ -1 +1 @@
-export * from './Select.css';
+export * from './Select.css';

package/src/components/skeleton/Skeleton.css

@@ -1,73 +1,73 @@
-.m-skeleton {
-    --skeleton-border-radius: 4px;
-    --skeleton-height: 100%;
-    --skeleton-width: 100%;
-    position: relative;
-    display: flex;
-    background: linear-gradient(-90deg, var(--gray-100) 0%, var(--gray-200) 50%, var(--gray-100) 100%);
-    background-size: 400% 400%;
-    overflow: hidden;
-    white-space: nowrap;
-    vertical-align: middle;
-    justify-content: center;
-    align-items: center;
-    box-sizing: content-box;
-    border-radius: var(--skeleton-border-radius);
-    font-weight: 600;
-    user-select: none;
-    width: var(--skeleton-width);
-    height: var(--skeleton-height);
-}
-
-.m-skeleton--thumb {
-    --skeleton-border-radius: 4px;
-    --skeleton-height: 128px;
-    --skeleton-width: 500px;
-}
-
-.m-skeleton--heading {
-    --skeleton-border-radius: 4px;
-    --skeleton-height: 32px;
-    --skeleton-width: 500px;
-}
-
-.m-skeleton--line {
-    --skeleton-border-radius: 4px;
-    --skeleton-height: 20px;
-    --skeleton-width: 500px;
-}
-
-.m-skeleton--circle {
-    --skeleton-border-radius: 50%;
-    --skeleton-height: 40px;
-    --skeleton-width: 40px;
-}
-
-.m-skeleton--block {
-    --skeleton-border-radius: 4px;
-    --skeleton-height: 100%;
-    --skeleton-width: 100%;
-}
-
-.m-skeleton--pulse {
-    animation: skeleton-pulse 1.5s ease-in-out infinite;
-    -webkit-animation: skeleton-pulse 1.5s ease-in-out infinite;
-}
-
-@keyframes skeleton-pulse {
-    0% {
-        background-position: 0 0;
-    }
-    100% {
-        background-position: -135% 0;
-    }
-}
-
-@-webkit-keyframes skeleton-pulse {
-    0% {
-        background-position: 0 0;
-    }
-    100% {
-        background-position: -135% 0;
-    }
-}
+.m-skeleton {
+    --skeleton-border-radius: 4px;
+    --skeleton-height: 100%;
+    --skeleton-width: 100%;
+    position: relative;
+    display: flex;
+    background: linear-gradient(-90deg, var(--gray-100) 0%, var(--gray-200) 50%, var(--gray-100) 100%);
+    background-size: 400% 400%;
+    overflow: hidden;
+    white-space: nowrap;
+    vertical-align: middle;
+    justify-content: center;
+    align-items: center;
+    box-sizing: content-box;
+    border-radius: var(--skeleton-border-radius);
+    font-weight: 600;
+    user-select: none;
+    width: var(--skeleton-width);
+    height: var(--skeleton-height);
+}
+
+.m-skeleton--thumb {
+    --skeleton-border-radius: 4px;
+    --skeleton-height: 128px;
+    --skeleton-width: 500px;
+}
+
+.m-skeleton--heading {
+    --skeleton-border-radius: 4px;
+    --skeleton-height: 32px;
+    --skeleton-width: 500px;
+}
+
+.m-skeleton--line {
+    --skeleton-border-radius: 4px;
+    --skeleton-height: 20px;
+    --skeleton-width: 500px;
+}
+
+.m-skeleton--circle {
+    --skeleton-border-radius: 50%;
+    --skeleton-height: 40px;
+    --skeleton-width: 40px;
+}
+
+.m-skeleton--block {
+    --skeleton-border-radius: 4px;
+    --skeleton-height: 100%;
+    --skeleton-width: 100%;
+}
+
+.m-skeleton--pulse {
+    animation: skeleton-pulse 1.5s ease-in-out infinite;
+    -webkit-animation: skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes skeleton-pulse {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: -135% 0;
+    }
+}
+
+@-webkit-keyframes skeleton-pulse {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: -135% 0;
+    }
+}