@blockscout/ui-toolkit 0.0.1-alpha.1 → 0.0.1-alpha.3

package/dist/theme/foundations/zIndex.js

@@ -1,24 +0,0 @@
-const e = {
-  hide: { value: -1 },
-  auto: { value: "auto" },
-  base: { value: 0 },
-  docked: { value: 10 },
-  dropdown: { value: 1e3 },
-  sticky: { value: 1100 },
-  sticky1: { value: 1101 },
-  sticky2: { value: 1102 },
-  banner: { value: 1200 },
-  overlay: { value: 1300 },
-  modal: { value: 1400 },
-  popover: { value: 1500 },
-  tooltip: { value: 1550 },
-  // otherwise tooltips will not be visible in modals
-  tooltip2: { value: 1551 },
-  // for tooltips in tooltips
-  skipLink: { value: 1600 },
-  toast: { value: 1700 }
-};
-export {
-  e as default,
-  e as zIndex
-};

package/dist/theme/foundations/zIndex.ts

@@ -1,20 +0,0 @@
-export const zIndex = {
-  hide: { value: -1 },
-  auto: { value: 'auto' },
-  base: { value: 0 },
-  docked: { value: 10 },
-  dropdown: { value: 1000 },
-  sticky: { value: 1100 },
-  sticky1: { value: 1101 },
-  sticky2: { value: 1102 },
-  banner: { value: 1200 },
-  overlay: { value: 1300 },
-  modal: { value: 1400 },
-  popover: { value: 1500 },
-  tooltip: { value: 1550 }, // otherwise tooltips will not be visible in modals
-  tooltip2: { value: 1551 }, // for tooltips in tooltips
-  skipLink: { value: 1600 },
-  toast: { value: 1700 },
-};
-
-export default zIndex;

package/dist/theme/globalCss.js

@@ -1,51 +0,0 @@
-import e from "./globals/address-entity.js";
-import i from "./globals/recaptcha.js";
-import r from "./globals/scrollbar.js";
-const o = {
-  WebkitTextFillColor: "var(--chakra-colors-input-fg)",
-  "-webkit-box-shadow": "0 0 0px 1000px var(--chakra-colors-input-bg) inset",
-  transition: "background-color 5000s ease-in-out 0s"
-}, t = {
-  "&:-webkit-autofill": o,
-  "&:-webkit-autofill:hover": o,
-  "&:-webkit-autofill:focus": o
-}, s = {
-  body: {
-    bg: "global.body.bg",
-    color: "global.body.fg",
-    WebkitTapHighlightColor: "transparent",
-    fontVariantLigatures: "no-contextual",
-    focusRingStyle: "hidden"
-  },
-  mark: {
-    bg: "global.mark.bg",
-    color: "inherit"
-  },
-  "svg *::selection": {
-    color: "none",
-    background: "none"
-  },
-  form: {
-    w: "100%"
-  },
-  input: {
-    // hide number input arrows in Google Chrome
-    "&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
-      WebkitAppearance: "none",
-      margin: 0
-    },
-    ...t
-  },
-  textarea: {
-    ...t
-  },
-  select: {
-    ...t
-  },
-  ...i,
-  ...r,
-  ...e
-};
-export {
-  s as default
-};

package/dist/theme/globalCss.ts

@@ -1,57 +0,0 @@
-import type { SystemConfig } from '@chakra-ui/react';
-
-import addressEntity from './globals/address-entity';
-import recaptcha from './globals/recaptcha';
-import scrollbar from './globals/scrollbar';
-
-const webkitAutofillOverrides = {
-  WebkitTextFillColor: 'var(--chakra-colors-input-fg)',
-  '-webkit-box-shadow': '0 0 0px 1000px var(--chakra-colors-input-bg) inset',
-  transition: 'background-color 5000s ease-in-out 0s',
-};
-
-const webkitAutofillRules = {
-  '&:-webkit-autofill': webkitAutofillOverrides,
-  '&:-webkit-autofill:hover': webkitAutofillOverrides,
-  '&:-webkit-autofill:focus': webkitAutofillOverrides,
-};
-
-const globalCss: SystemConfig['globalCss'] = {
-  body: {
-    bg: 'global.body.bg',
-    color: 'global.body.fg',
-    WebkitTapHighlightColor: 'transparent',
-    fontVariantLigatures: 'no-contextual',
-    focusRingStyle: 'hidden',
-  },
-  mark: {
-    bg: 'global.mark.bg',
-    color: 'inherit',
-  },
-  'svg *::selection': {
-    color: 'none',
-    background: 'none',
-  },
-  form: {
-    w: '100%',
-  },
-  input: {
-    // hide number input arrows in Google Chrome
-    '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
-      WebkitAppearance: 'none',
-      margin: 0,
-    },
-    ...webkitAutofillRules,
-  },
-  textarea: {
-    ...webkitAutofillRules,
-  },
-  select: {
-    ...webkitAutofillRules,
-  },
-  ...recaptcha,
-  ...scrollbar,
-  ...addressEntity,
-};
-
-export default globalCss;

package/dist/theme/globals/address-entity.js

@@ -1,34 +0,0 @@
-const e = {
-  ".address-entity": {
-    "&.address-entity_highlighted": {
-      _before: {
-        content: '" "',
-        position: "absolute",
-        py: 1,
-        pl: 1,
-        pr: 0,
-        top: "-5px",
-        left: "-5px",
-        width: "calc(100% + 6px)",
-        height: "calc(100% + 10px)",
-        borderRadius: "base",
-        borderColor: "address.highlighted.border",
-        borderWidth: "1px",
-        borderStyle: "dashed",
-        bgColor: "address.highlighted.bg",
-        zIndex: -1
-      }
-    }
-  },
-  ".address-entity_no-copy": {
-    "&.address-entity_highlighted": {
-      _before: {
-        pr: 2,
-        width: "calc(100% + 6px + 8px)"
-      }
-    }
-  }
-};
-export {
-  e as default
-};

package/dist/theme/globals/address-entity.ts

@@ -1,33 +0,0 @@
-const styles = {
-  '.address-entity': {
-    '&.address-entity_highlighted': {
-      _before: {
-        content: `" "`,
-        position: 'absolute',
-        py: 1,
-        pl: 1,
-        pr: 0,
-        top: '-5px',
-        left: '-5px',
-        width: `calc(100% + 6px)`,
-        height: 'calc(100% + 10px)',
-        borderRadius: 'base',
-        borderColor: 'address.highlighted.border',
-        borderWidth: '1px',
-        borderStyle: 'dashed',
-        bgColor: 'address.highlighted.bg',
-        zIndex: -1,
-      },
-    },
-  },
-  '.address-entity_no-copy': {
-    '&.address-entity_highlighted': {
-      _before: {
-        pr: 2,
-        width: `calc(100% + 6px + 8px)`,
-      },
-    },
-  },
-};
-
-export default styles;

package/dist/theme/globals/recaptcha.js

@@ -1,21 +0,0 @@
-const e = {
-  ".grecaptcha-badge": {
-    visibility: "hidden"
-  },
-  'div:has(div):has(iframe[title="recaptcha challenge expires in two minutes"])': {
-    "&::after": {
-      content: '" "',
-      display: "block",
-      position: "fixed",
-      top: 0,
-      left: 0,
-      width: "100vw",
-      height: "100vh",
-      zIndex: 1e5,
-      bgColor: "blackAlpha.300"
-    }
-  }
-};
-export {
-  e as default
-};

package/dist/theme/globals/recaptcha.ts

@@ -1,20 +0,0 @@
-const styles = {
-  '.grecaptcha-badge': {
-    visibility: 'hidden',
-  },
-  'div:has(div):has(iframe[title="recaptcha challenge expires in two minutes"])': {
-    '&::after': {
-      content: `" "`,
-      display: 'block',
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      width: '100vw',
-      height: '100vh',
-      zIndex: 100000,
-      bgColor: 'blackAlpha.300',
-    },
-  },
-};
-
-export default styles;

package/dist/theme/globals/scrollbar.js

@@ -1,33 +0,0 @@
-const r = {
-  "body *::-webkit-scrollbar": {
-    width: "20px"
-  },
-  "body *::-webkit-scrollbar-track": {
-    backgroundColor: "transparent"
-  },
-  "body *::-webkit-scrollbar-thumb": {
-    backgroundColor: "{colors.global.scrollbar.thumb}",
-    borderRadius: "20px",
-    border: "8px solid rgba(0,0,0,0)",
-    backgroundClip: "content-box",
-    minHeight: "32px"
-  },
-  "body *::-webkit-scrollbar-button": {
-    display: "none"
-  },
-  "body *::-webkit-scrollbar-corner": {
-    backgroundColor: "transparent"
-  },
-  "body *::-webkit-resizer": {
-    // FIXME for dark mode we need to use a different image - /static/resizer_dark.png
-    backgroundImage: "url(/static/resizer_light.png)",
-    backgroundSize: "20px"
-  },
-  "body *": {
-    scrollbarWidth: "thin",
-    scrollbarColor: "{colors.global.scrollbar.thumb} transparent"
-  }
-};
-export {
-  r as default
-};

package/dist/theme/globals/scrollbar.ts

@@ -1,32 +0,0 @@
-const scrollbar = {
-  'body *::-webkit-scrollbar': {
-    width: '20px',
-  },
-  'body *::-webkit-scrollbar-track': {
-    backgroundColor: 'transparent',
-  },
-  'body *::-webkit-scrollbar-thumb': {
-    backgroundColor: '{colors.global.scrollbar.thumb}',
-    borderRadius: '20px',
-    border: `8px solid rgba(0,0,0,0)`,
-    backgroundClip: 'content-box',
-    minHeight: '32px',
-  },
-  'body *::-webkit-scrollbar-button': {
-    display: 'none',
-  },
-  'body *::-webkit-scrollbar-corner': {
-    backgroundColor: 'transparent',
-  },
-  'body *::-webkit-resizer': {
-    // FIXME for dark mode we need to use a different image - /static/resizer_dark.png
-    backgroundImage: 'url(/static/resizer_light.png)',
-    backgroundSize: '20px',
-  },
-  'body *': {
-    scrollbarWidth: 'thin',
-    scrollbarColor: `{colors.global.scrollbar.thumb} transparent`,
-  },
-};
-
-export default scrollbar;

package/dist/theme/index.d.ts

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

package/dist/theme/index.ts

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

package/dist/theme/recipes/accordion.recipe.js

@@ -1,143 +0,0 @@
-import { defineSlotRecipe as i } from "@chakra-ui/react";
-const e = i({
-  className: "chakra-accordion",
-  slots: ["root", "item", "itemTrigger", "itemContent", "itemBody", "itemIndicator"],
-  base: {
-    root: {
-      width: "full",
-      "--accordion-radius": "none"
-    },
-    item: {
-      overflowAnchor: "none",
-      borderColor: "border.divider"
-    },
-    itemTrigger: {
-      display: "flex",
-      alignItems: "center",
-      width: "full",
-      outline: "0",
-      gap: "1",
-      fontWeight: "medium",
-      borderRadius: "var(--accordion-radius)",
-      cursor: "pointer",
-      _focusVisible: {
-        outline: "2px solid",
-        outlineColor: "colorPalette.focusRing"
-      }
-    },
-    itemBody: {
-      pt: "0",
-      pb: "var(--accordion-padding-y)"
-    },
-    itemContent: {
-      overflow: "hidden",
-      borderRadius: "var(--accordion-radius)",
-      _open: {
-        animationName: "expand-height, fade-in",
-        animationDuration: "moderate"
-      },
-      _closed: {
-        animationName: "collapse-height, fade-out",
-        animationDuration: "moderate"
-      }
-    },
-    itemIndicator: {
-      transition: "rotate 0.2s ease-in-out",
-      transformOrigin: "center"
-    }
-  },
-  variants: {
-    noAnimation: {
-      true: {
-        itemContent: {
-          _open: {
-            animationName: "none"
-          },
-          _closed: {
-            animationName: "none"
-          }
-        },
-        itemIndicator: {
-          transition: "none"
-        }
-      }
-    },
-    variant: {
-      outline: {
-        item: {
-          borderBottomWidth: "1px"
-        },
-        itemIndicator: {
-          color: "gray.500"
-        }
-      },
-      faq: {
-        item: {
-          borderBottomWidth: "1px"
-        },
-        itemTrigger: {
-          textStyle: "heading.md"
-        },
-        itemIndicator: {
-          color: "link.primary",
-          _groupHover: {
-            color: "link.primary.hover"
-          }
-        }
-      }
-    },
-    size: {
-      sm: {
-        root: {
-          "--accordion-padding-x": "0",
-          "--accordion-padding-y": "spacing.2"
-        },
-        itemTrigger: {
-          textStyle: "sm",
-          py: "var(--accordion-padding-y)"
-        },
-        itemIndicator: {
-          boxSize: "5"
-        }
-      },
-      md: {
-        root: {
-          "--accordion-padding-x": "0",
-          "--accordion-padding-y": "spacing.3"
-        },
-        itemTrigger: {
-          textStyle: "md",
-          py: "var(--accordion-padding-y)"
-        },
-        itemIndicator: {
-          boxSize: "5"
-        }
-      }
-    }
-  },
-  compoundVariants: [
-    {
-      variant: "faq",
-      size: "md",
-      css: {
-        itemIndicator: {
-          boxSize: "14px",
-          margin: "5px"
-        },
-        itemBody: {
-          paddingLeft: "36px"
-        },
-        itemTrigger: {
-          gap: "3"
-        }
-      }
-    }
-  ],
-  defaultVariants: {
-    size: "md",
-    variant: "outline"
-  }
-});
-export {
-  e as recipe
-};

package/dist/theme/recipes/accordion.recipe.ts

@@ -1,145 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react';
-
-export const recipe = defineSlotRecipe({
-  className: 'chakra-accordion',
-  slots: [ 'root', 'item', 'itemTrigger', 'itemContent', 'itemBody', 'itemIndicator' ],
-  base: {
-    root: {
-      width: 'full',
-      '--accordion-radius': 'none',
-    },
-    item: {
-      overflowAnchor: 'none',
-      borderColor: 'border.divider',
-    },
-    itemTrigger: {
-      display: 'flex',
-      alignItems: 'center',
-      width: 'full',
-      outline: '0',
-      gap: '1',
-      fontWeight: 'medium',
-      borderRadius: 'var(--accordion-radius)',
-      cursor: 'pointer',
-      _focusVisible: {
-        outline: '2px solid',
-        outlineColor: 'colorPalette.focusRing',
-      },
-    },
-    itemBody: {
-      pt: '0',
-      pb: 'var(--accordion-padding-y)',
-    },
-    itemContent: {
-      overflow: 'hidden',
-      borderRadius: 'var(--accordion-radius)',
-      _open: {
-        animationName: 'expand-height, fade-in',
-        animationDuration: 'moderate',
-      },
-      _closed: {
-        animationName: 'collapse-height, fade-out',
-        animationDuration: 'moderate',
-      },
-    },
-    itemIndicator: {
-      transition: 'rotate 0.2s ease-in-out',
-      transformOrigin: 'center',
-    },
-  },
-
-  variants: {
-    noAnimation: {
-      'true': {
-        itemContent: {
-          _open: {
-            animationName: 'none',
-          },
-          _closed: {
-            animationName: 'none',
-          },
-        },
-        itemIndicator: {
-          transition: 'none',
-        },
-      },
-    },
-    variant: {
-      outline: {
-        item: {
-          borderBottomWidth: '1px',
-        },
-        itemIndicator: {
-          color: 'gray.500',
-        },
-      },
-      faq: {
-        item: {
-          borderBottomWidth: '1px',
-        },
-        itemTrigger: {
-          textStyle: 'heading.md',
-        },
-        itemIndicator: {
-          color: 'link.primary',
-          _groupHover: {
-            color: 'link.primary.hover',
-          },
-        },
-      },
-    },
-
-    size: {
-      sm: {
-        root: {
-          '--accordion-padding-x': '0',
-          '--accordion-padding-y': 'spacing.2',
-        },
-        itemTrigger: {
-          textStyle: 'sm',
-          py: 'var(--accordion-padding-y)',
-        },
-        itemIndicator: {
-          boxSize: '5',
-        },
-      },
-      md: {
-        root: {
-          '--accordion-padding-x': '0',
-          '--accordion-padding-y': 'spacing.3',
-        },
-        itemTrigger: {
-          textStyle: 'md',
-          py: 'var(--accordion-padding-y)',
-        },
-        itemIndicator: {
-          boxSize: '5',
-        },
-      },
-    },
-  },
-
-  compoundVariants: [
-    {
-      variant: 'faq',
-      size: 'md',
-      css: {
-        itemIndicator: {
-          boxSize: '14px',
-          margin: '5px',
-        },
-        itemBody: {
-          paddingLeft: '36px',
-        },
-        itemTrigger: {
-          gap: '3',
-        },
-      },
-    },
-  ],
-
-  defaultVariants: {
-    size: 'md',
-    variant: 'outline',
-  },
-});