@logrock/pebbles - npm Package Compare versions

Comparing version 3.1.1 to 3.2.0

dist/components/Button/Button.types.d.ts

 import React from "react";
 export declare type ButtonProps = {
-    variant: "primary" | "destructive";
-    buttonStyle: "primary" | "secondary" | "tertiary" | "outlined";
-    buttonSize: "sXmall" | "small" | "medium" | "large";
+    variant?: "primary" | "destructive";
+    buttonStyle?: "primary" | "secondary" | "tertiary" | "outlined";
+    buttonSize?: "sXmall" | "small" | "medium" | "large";
     iconOnly?: boolean;
-    startIcon: React.ReactNode;
-    endIcon: React.ReactNode;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
 };

dist/components/Typography/Typography.styled.d.ts

@@ -11,2 +11,3 @@ import { TypographyParagraphProps, TypographyHeaderProps, TypographyOverlineProps } from "./Typography.types";
 export declare const ParagraphLarge: import("styled-components").StyledComponent<"p", any, TypographyParagraphProps, never>;
+export declare const paragraphMediumCSS: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<TypographyParagraphProps, any>>;
 export declare const ParagraphMedium: import("styled-components").StyledComponent<"p", any, TypographyParagraphProps, never>;
@@ -13,0 +14,0 @@ export declare const ParagraphSmall: import("styled-components").StyledComponent<"p", any, TypographyParagraphProps, never>;

dist/logrock-pebbles.es.js

@@ -564,2 +564,96 @@ var __defProp = Object.defineProperty;
 };
+const shadows = {
+  xSmall: "0px 1px 2px rgba(16, 24, 40, 0.05)",
+  small: "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px -1px rgba(16, 24, 40, 0.1)",
+  medium: "0px 4px 6px -1px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.1)",
+  large: "0px 10px 15px -3px rgba(16, 24, 40, 0.1), 0px 4px 6px -4px rgba(16, 24, 40, 0.1)",
+  xLarge: "0px 20px 25px -5px rgba(16, 24, 40, 0.1), 0px 8px 10px -6px rgba(16, 24, 40, 0.1)",
+  xxLarge: "0px 25px 50px -12px rgba(16, 24, 40, 0.25)",
+  upXSmall: "0px -1px 2px rgba(16, 24, 40, 0.05)",
+  upSmall: "0px -1px 3px rgba(16, 24, 40, 0.1), 0px -1px 2px -1px rgba(16, 24, 40, 0.1)",
+  upMedium: "0px -4px 6px -1px rgba(16, 24, 40, 0.1), 0px -2px 4px -2px rgba(16, 24, 40, 0.1)",
+  upLarge: "0px -10px 15px -3px rgba(16, 24, 40, 0.1), 0px -4px 6px -4px rgba(16, 24, 40, 0.1)",
+  upXLarge: "0px -20px 25px -5px rgba(16, 24, 40, 0.1), 0px -8px 10px -6px rgba(16, 24, 40, 0.1)",
+  upXxLarge: "0px -25px 50px -12px rgba(16, 24, 40, 0.25)"
+};
+const inputBox = {
+  fontFamily: "Archivo",
+  fontWeight: "normal",
+  fontStyle: "normal",
+  fontSize: "16px",
+  lineHeight: "24px",
+  fontFeatureSettings: "'salt' on",
+  padding: "10px 12px",
+  boxSizing: "border-box",
+  boxShadow: shadows.xSmall,
+  borderRadius: "2px",
+  border: "1px solid #D1D5DB",
+  margin: "8px 0px",
+  background: "white",
+  height: "50px",
+  width: "100%",
+  error: {
+    color: error[900],
+    border: `1px solid ${error[300]}`,
+    boxShadow: shadows.xSmall,
+    hintColor: neutral[500],
+    helperColor: error[600],
+    focused: {
+      boxSizing: "border-box",
+      boxShadow: `0px 0px 0px 4px ${error["100"]}`,
+      borderRadius: "2px",
+      border: `1px solid ${error["300"]}`
+    }
+  },
+  info: {
+    color: neutral[900],
+    border: "1px solid #D1D5DB",
+    boxShadow: shadows.xSmall,
+    hintColor: neutral[500],
+    helperColor: neutral[500],
+    focused: {
+      boxSizing: "border-box",
+      boxShadow: `0px 0px 0px 4px ${primary["100"]}`,
+      borderRadius: "2px",
+      border: `1px solid ${primary["300"]}`
+    }
+  },
+  label: {
+    color: "black",
+    fontStyle: "normal",
+    fontSize: "16px",
+    lineHeight: "24px",
+    fontWeight: 500
+  },
+  helper: {
+    fontStyle: "normal",
+    fontSize: "14px",
+    lineHeight: "20px",
+    fontWeight: 500,
+    margin: "0px 8px"
+  },
+  disabled: {
+    boxSizing: "border-box",
+    boxShadow: shadows.xSmall,
+    borderRadius: "2px",
+    border: `1px solid ${neutral["300"]}`
+  },
+  hint: {
+    background: "white",
+    top: "1px",
+    right: "2px",
+    margin: "1px 0px"
+  },
+  placeholder: {
+    color: neutral[400]
+  }
+};
+const select = {
+  items: {
+    hover: {
+      background: primary["50"]
+    },
+    shadow: "1px 1px 2px rgba(0, 0, 0, 0.3)"
+  }
+};
 const theme$1 = {
@@ -598,16 +692,3 @@ name: "light",
   },
-  shadows: {
-    xSmall: "0px 1px 2px rgba(16, 24, 40, 0.05)",
-    small: "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px -1px rgba(16, 24, 40, 0.1)",
-    medium: "0px 4px 6px -1px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.1)",
-    large: "0px 10px 15px -3px rgba(16, 24, 40, 0.1), 0px 4px 6px -4px rgba(16, 24, 40, 0.1)",
-    xLarge: "0px 20px 25px -5px rgba(16, 24, 40, 0.1), 0px 8px 10px -6px rgba(16, 24, 40, 0.1)",
-    xxLarge: "0px 25px 50px -12px rgba(16, 24, 40, 0.25)",
-    upXSmall: "0px -1px 2px rgba(16, 24, 40, 0.05)",
-    upSmall: "0px -1px 3px rgba(16, 24, 40, 0.1), 0px -1px 2px -1px rgba(16, 24, 40, 0.1)",
-    upMedium: "0px -4px 6px -1px rgba(16, 24, 40, 0.1), 0px -2px 4px -2px rgba(16, 24, 40, 0.1)",
-    upLarge: "0px -10px 15px -3px rgba(16, 24, 40, 0.1), 0px -4px 6px -4px rgba(16, 24, 40, 0.1)",
-    upXLarge: "0px -20px 25px -5px rgba(16, 24, 40, 0.1), 0px -8px 10px -6px rgba(16, 24, 40, 0.1)",
-    upXxLarge: "0px -25px 50px -12px rgba(16, 24, 40, 0.25)"
-  },
+  shadows,
   blurs: {
@@ -632,3 +713,5 @@ none: "0",
   },
-  buttons
+  buttons,
+  inputBox,
+  select
 };
@@ -647,211 +730,185 @@ const theme = __spreadProps(__spreadValues({}, theme$1), {
 const DisplayLarge = styled.h1`
+  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
   font-family: ${({ theme: theme2 }) => theme2.typography.displayLarge.fontFamily};
-  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
-
   font-size: ${({ theme: theme2 }) => theme2.typography.displayLarge.mobile.fontSize};
+  font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.displayLarge.mobile.weights[weight] : theme2.typography.displayLarge.mobile.weights.normal};
+  letter-spacing: ${({ theme: theme2 }) => theme2.typography.displayLarge.mobile.tracking};
   line-height: ${({ theme: theme2 }) => theme2.typography.displayLarge.mobile.lineHeight};
-  letter-spacing: ${({ theme: theme2 }) => theme2.typography.displayLarge.mobile.tracking};
-  font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.displayLarge.mobile.weights[weight] : theme2.typography.displayLarge.mobile.weights.normal};
 
   ${up("desktop")} {
     font-size: ${({ theme: theme2 }) => theme2.typography.displayLarge.desktop.fontSize};
+    font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.displayLarge.desktop.weights[weight] : theme2.typography.displayLarge.desktop.weights.normal};
+    letter-spacing: ${({ theme: theme2 }) => theme2.typography.displayLarge.desktop.tracking};
     line-height: ${({ theme: theme2 }) => theme2.typography.displayLarge.desktop.lineHeight};
-    letter-spacing: ${({ theme: theme2 }) => theme2.typography.displayLarge.desktop.tracking};
-    font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.displayLarge.desktop.weights[weight] : theme2.typography.displayLarge.desktop.weights.normal};
   }
 `;
 const DisplaySmall = styled.h2`
+  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
   font-family: ${({ theme: theme2 }) => theme2.typography.displaySmall.fontFamily};
-  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
-
   font-size: ${({ theme: theme2 }) => theme2.typography.displaySmall.mobile.fontSize};
+  font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.displaySmall.mobile.weights[weight] : theme2.typography.displaySmall.mobile.weights.normal};
+  letter-spacing: ${({ theme: theme2 }) => theme2.typography.displaySmall.mobile.tracking};
   line-height: ${({ theme: theme2 }) => theme2.typography.displaySmall.mobile.lineHeight};
-  letter-spacing: ${({ theme: theme2 }) => theme2.typography.displaySmall.mobile.tracking};
-  font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.displaySmall.mobile.weights[weight] : theme2.typography.displaySmall.mobile.weights.normal};
 
   ${up("desktop")} {
     font-size: ${({ theme: theme2 }) => theme2.typography.displaySmall.desktop.fontSize};
+    font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.displaySmall.desktop.weights[weight] : theme2.typography.displaySmall.desktop.weights.normal};
+    letter-spacing: ${({ theme: theme2 }) => theme2.typography.displaySmall.desktop.tracking};
     line-height: ${({ theme: theme2 }) => theme2.typography.displaySmall.desktop.lineHeight};
-    letter-spacing: ${({ theme: theme2 }) => theme2.typography.displaySmall.desktop.tracking};
-    font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.displaySmall.desktop.weights[weight] : theme2.typography.displaySmall.desktop.weights.normal};
   }
 `;
 const HeadingH1 = styled.h1`
+  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
   font-family: ${({ theme: theme2 }) => theme2.typography.headingH1.fontFamily};
-  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
-
   font-size: ${({ theme: theme2 }) => theme2.typography.headingH1.mobile.fontSize};
+  font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.headingH1.mobile.weights[weight] : theme2.typography.headingH1.mobile.weights.normal};
+  letter-spacing: ${({ theme: theme2 }) => theme2.typography.headingH1.mobile.tracking};
   line-height: ${({ theme: theme2 }) => theme2.typography.headingH1.mobile.lineHeight};
-  letter-spacing: ${({ theme: theme2 }) => theme2.typography.headingH1.mobile.tracking};
-  font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.headingH1.mobile.weights[weight] : theme2.typography.headingH1.mobile.weights.normal};
 
   ${up("desktop")} {
     font-size: ${({ theme: theme2 }) => theme2.typography.headingH1.desktop.fontSize};
+    font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.headingH1.desktop.weights[weight] : theme2.typography.headingH1.desktop.weights.normal};
+    letter-spacing: ${({ theme: theme2 }) => theme2.typography.headingH1.desktop.tracking};
     line-height: ${({ theme: theme2 }) => theme2.typography.headingH1.desktop.lineHeight};
-    letter-spacing: ${({ theme: theme2 }) => theme2.typography.headingH1.desktop.tracking};
-    font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.headingH1.desktop.weights[weight] : theme2.typography.headingH1.desktop.weights.normal};
   }
 `;
 const HeadingH2 = styled.h2`
+  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
   font-family: ${({ theme: theme2 }) => theme2.typography.headingH2.fontFamily};
-  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
-
   font-size: ${({ theme: theme2 }) => theme2.typography.headingH2.mobile.fontSize};
+  font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.headingH2.mobile.weights[weight] : theme2.typography.headingH2.mobile.weights.normal};
+  letter-spacing: ${({ theme: theme2 }) => theme2.typography.headingH2.mobile.tracking};
   line-height: ${({ theme: theme2 }) => theme2.typography.headingH2.mobile.lineHeight};
-  letter-spacing: ${({ theme: theme2 }) => theme2.typography.headingH2.mobile.tracking};
-  font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.headingH2.mobile.weights[weight] : theme2.typography.headingH2.mobile.weights.normal};
 
   ${up("desktop")} {
     font-size: ${({ theme: theme2 }) => theme2.typography.headingH2.desktop.fontSize};
+    font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.headingH2.desktop.weights[weight] : theme2.typography.headingH2.desktop.weights.normal};
+    letter-spacing: ${({ theme: theme2 }) => theme2.typography.headingH2.desktop.tracking};
     line-height: ${({ theme: theme2 }) => theme2.typography.headingH2.desktop.lineHeight};
-    letter-spacing: ${({ theme: theme2 }) => theme2.typography.headingH2.desktop.tracking};
-    font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.headingH2.desktop.weights[weight] : theme2.typography.headingH2.desktop.weights.normal};
   }
 `;
 const HeadingH3 = styled.h3`
+  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
   font-family: ${({ theme: theme2 }) => theme2.typography.headingH3.fontFamily};
-  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
-
   font-size: ${({ theme: theme2 }) => theme2.typography.headingH3.mobile.fontSize};
+  font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.headingH3.mobile.weights[weight] : theme2.typography.headingH3.mobile.weights.normal};
+  letter-spacing: ${({ theme: theme2 }) => theme2.typography.headingH3.mobile.tracking};
   line-height: ${({ theme: theme2 }) => theme2.typography.headingH3.mobile.lineHeight};
-  letter-spacing: ${({ theme: theme2 }) => theme2.typography.headingH3.mobile.tracking};
-  font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.headingH3.mobile.weights[weight] : theme2.typography.headingH3.mobile.weights.normal};
 
   ${up("desktop")} {
     font-size: ${({ theme: theme2 }) => theme2.typography.headingH3.desktop.fontSize};
+    font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.headingH3.desktop.weights[weight] : theme2.typography.headingH3.desktop.weights.normal};
+    letter-spacing: ${({ theme: theme2 }) => theme2.typography.headingH3.desktop.tracking};
     line-height: ${({ theme: theme2 }) => theme2.typography.headingH3.desktop.lineHeight};
-    letter-spacing: ${({ theme: theme2 }) => theme2.typography.headingH3.desktop.tracking};
-    font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.headingH3.desktop.weights[weight] : theme2.typography.headingH3.desktop.weights.normal};
   }
 `;
 const HeadingH4 = styled.h4`
+  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
   font-family: ${({ theme: theme2 }) => theme2.typography.headingH4.fontFamily};
-  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
-
   font-size: ${({ theme: theme2 }) => theme2.typography.headingH4.mobile.fontSize};
+  font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.headingH4.mobile.weights[weight] : theme2.typography.headingH4.mobile.weights.normal};
+  letter-spacing: ${({ theme: theme2 }) => theme2.typography.headingH4.mobile.tracking};
   line-height: ${({ theme: theme2 }) => theme2.typography.headingH4.mobile.lineHeight};
-  letter-spacing: ${({ theme: theme2 }) => theme2.typography.headingH4.mobile.tracking};
-  font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.headingH4.mobile.weights[weight] : theme2.typography.headingH4.mobile.weights.normal};
 
   ${up("desktop")} {
     font-size: ${({ theme: theme2 }) => theme2.typography.headingH4.desktop.fontSize};
+    font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.headingH4.desktop.weights[weight] : theme2.typography.headingH4.desktop.weights.normal};
+    letter-spacing: ${({ theme: theme2 }) => theme2.typography.headingH4.desktop.tracking};
     line-height: ${({ theme: theme2 }) => theme2.typography.headingH4.desktop.lineHeight};
-    letter-spacing: ${({ theme: theme2 }) => theme2.typography.headingH4.desktop.tracking};
-    font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.headingH4.desktop.weights[weight] : theme2.typography.headingH4.desktop.weights.normal};
   }
 `;
 const HeadingH5 = styled.h5`
+  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
   font-family: ${({ theme: theme2 }) => theme2.typography.headingH5.fontFamily};
-  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
-
   font-size: ${({ theme: theme2 }) => theme2.typography.headingH5.mobile.fontSize};
+  font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.headingH5.mobile.weights[weight] : theme2.typography.headingH5.mobile.weights.normal};
+  letter-spacing: ${({ theme: theme2 }) => theme2.typography.headingH5.mobile.tracking};
   line-height: ${({ theme: theme2 }) => theme2.typography.headingH5.mobile.lineHeight};
-  letter-spacing: ${({ theme: theme2 }) => theme2.typography.headingH5.mobile.tracking};
-  font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.headingH5.mobile.weights[weight] : theme2.typography.headingH5.mobile.weights.normal};
 
   ${up("desktop")} {
     font-size: ${({ theme: theme2 }) => theme2.typography.headingH5.desktop.fontSize};
+    font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.headingH5.desktop.weights[weight] : theme2.typography.headingH5.desktop.weights.normal};
+    letter-spacing: ${({ theme: theme2 }) => theme2.typography.headingH5.desktop.tracking};
     line-height: ${({ theme: theme2 }) => theme2.typography.headingH5.desktop.lineHeight};
-    letter-spacing: ${({ theme: theme2 }) => theme2.typography.headingH5.desktop.tracking};
-    font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.headingH5.desktop.weights[weight] : theme2.typography.headingH5.desktop.weights.normal};
   }
 `;
 const HeadingH6 = styled.h6`
+  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
   font-family: ${({ theme: theme2 }) => theme2.typography.headingH6.fontFamily};
-  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
-
   font-size: ${({ theme: theme2 }) => theme2.typography.headingH6.mobile.fontSize};
+  font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.headingH6.mobile.weights[weight] : theme2.typography.headingH6.mobile.weights.normal};
+  letter-spacing: ${({ theme: theme2 }) => theme2.typography.headingH6.mobile.tracking};
   line-height: ${({ theme: theme2 }) => theme2.typography.headingH6.mobile.lineHeight};
-  letter-spacing: ${({ theme: theme2 }) => theme2.typography.headingH6.mobile.tracking};
-  font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.headingH6.mobile.weights[weight] : theme2.typography.headingH6.mobile.weights.normal};
 
   ${up("desktop")} {
     font-size: ${({ theme: theme2 }) => theme2.typography.headingH6.desktop.fontSize};
+    font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.headingH6.desktop.weights[weight] : theme2.typography.headingH6.desktop.weights.normal};
+    letter-spacing: ${({ theme: theme2 }) => theme2.typography.headingH6.desktop.tracking};
     line-height: ${({ theme: theme2 }) => theme2.typography.headingH6.desktop.lineHeight};
-    letter-spacing: ${({ theme: theme2 }) => theme2.typography.headingH6.desktop.tracking};
-    font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.headingH6.desktop.weights[weight] : theme2.typography.headingH6.desktop.weights.normal};
   }
 `;
 const ParagraphLarge = styled.p`
+  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
   font-family: ${({ theme: theme2 }) => theme2.typography.paragraphLarge.fontFamily};
-  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
-
   font-size: ${({ theme: theme2 }) => theme2.typography.paragraphLarge.fontSize};
+  font-style: ${({ italic }) => italic ? "italic" : "normal"};
+  font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.paragraphLarge.weights[weight] : theme2.typography.paragraphLarge.weights.normal};
   line-height: ${({ theme: theme2 }) => theme2.typography.paragraphLarge.lineHeight};
-
-  font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.paragraphLarge.weights[weight] : theme2.typography.paragraphLarge.weights.normal};
-
   text-decoration: ${decorationsFromProps};
-  font-style: ${({ italic }) => italic ? "italic" : "normal"};
 `;
-const ParagraphMedium = styled.p`
+const paragraphMediumCSS = css`
+  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
   font-family: ${({ theme: theme2 }) => theme2.typography.paragraphMedium.fontFamily};
-  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
-
   font-size: ${({ theme: theme2 }) => theme2.typography.paragraphMedium.fontSize};
+  font-style: ${({ italic }) => italic ? "italic" : "normal"};
+  font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.paragraphMedium.weights[weight] : theme2.typography.paragraphMedium.weights.normal};
   line-height: ${({ theme: theme2 }) => theme2.typography.paragraphMedium.lineHeight};
-
-  font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.paragraphMedium.weights[weight] : theme2.typography.paragraphMedium.weights.normal};
-
   text-decoration: ${decorationsFromProps};
-  font-style: ${({ italic }) => italic ? "italic" : "normal"};
 `;
+const ParagraphMedium = styled.p`
+  ${paragraphMediumCSS}
+`;
 const ParagraphSmall = styled.p`
+  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
   font-family: ${({ theme: theme2 }) => theme2.typography.paragraphSmall.fontFamily};
-  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
-
   font-size: ${({ theme: theme2 }) => theme2.typography.paragraphSmall.fontSize};
+  font-style: ${({ italic }) => italic ? "italic" : "normal"};
+  font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.paragraphSmall.weights[weight] : theme2.typography.paragraphSmall.weights.normal};
   line-height: ${({ theme: theme2 }) => theme2.typography.paragraphSmall.lineHeight};
-
-  font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.paragraphSmall.weights[weight] : theme2.typography.paragraphSmall.weights.normal};
-
   text-decoration: ${decorationsFromProps};
-  font-style: ${({ italic }) => italic ? "italic" : "normal"};
 `;
 const ParagraphXSmall = styled.p`
+  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
   font-family: ${({ theme: theme2 }) => theme2.typography.paragraphXSmall.fontFamily};
-  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
-
   font-size: ${({ theme: theme2 }) => theme2.typography.paragraphXSmall.fontSize};
+  font-style: ${({ italic }) => italic ? "italic" : "normal"};
+  font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.paragraphXSmall.weights[weight] : theme2.typography.paragraphXSmall.weights.normal};
   line-height: ${({ theme: theme2 }) => theme2.typography.paragraphXSmall.lineHeight};
-
-  font-weight: ${({ theme: theme2, weight }) => weight ? theme2.typography.paragraphXSmall.weights[weight] : theme2.typography.paragraphXSmall.weights.normal};
-
   text-decoration: ${decorationsFromProps};
-  font-style: ${({ italic }) => italic ? "italic" : "normal"};
 `;
 const OverlineLarge = styled.p`
+  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
   font-family: ${({ theme: theme2 }) => theme2.typography.overlineLarge.fontFamily};
-  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
-
   font-size: ${({ theme: theme2 }) => theme2.typography.overlineLarge.fontSize};
-  line-height: ${({ theme: theme2 }) => theme2.typography.overlineLarge.lineHeight};
-
   font-weight: ${({ theme: theme2 }) => theme2.typography.overlineLarge.weight};
-
   letter-spacing: 1px;
+  line-height: ${({ theme: theme2 }) => theme2.typography.overlineLarge.lineHeight};
   text-transform: uppercase;
 `;
 const OverlineMedium = styled.p`
+  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
   font-family: ${({ theme: theme2 }) => theme2.typography.overlineMedium.fontFamily};
-  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
-
   font-size: ${({ theme: theme2 }) => theme2.typography.overlineMedium.fontSize};
-  line-height: ${({ theme: theme2 }) => theme2.typography.overlineMedium.lineHeight};
-
   font-weight: ${({ theme: theme2 }) => theme2.typography.overlineMedium.weight};
-
   letter-spacing: 1px;
+  line-height: ${({ theme: theme2 }) => theme2.typography.overlineMedium.lineHeight};
   text-transform: uppercase;
 `;
 const OverlineSmall = styled.p`
+  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
   font-family: ${({ theme: theme2 }) => theme2.typography.overlineSmall.fontFamily};
-  color: ${({ theme: theme2 }) => theme2.colors.neutral["900"]};
-
   font-size: ${({ theme: theme2 }) => theme2.typography.overlineSmall.fontSize};
-  line-height: ${({ theme: theme2 }) => theme2.typography.overlineSmall.lineHeight};
-
   font-weight: ${({ theme: theme2 }) => theme2.typography.overlineSmall.weight};
-
   letter-spacing: 1px;
+  line-height: ${({ theme: theme2 }) => theme2.typography.overlineSmall.lineHeight};
   text-transform: uppercase;
@@ -988,7 +1045,7 @@ `;
   ${({ buttonSize, theme: theme2 }) => css`
-    padding: ${theme2.buttons.regular[buttonSize].verticalPadding}
-      ${theme2.buttons.regular[buttonSize].horizontalPadding};
+    padding: ${theme2.buttons.regular[buttonSize || "medium"].verticalPadding}
+      ${theme2.buttons.regular[buttonSize || "medium"].horizontalPadding};
 
-    border-radius: ${theme2.buttons.regular[buttonSize].borderRadius};
-    font-size: ${theme2.buttons.regular[buttonSize].fontSize};
+    border-radius: ${theme2.buttons.regular[buttonSize || "medium"].borderRadius};
+    font-size: ${theme2.buttons.regular[buttonSize || "medium"].fontSize};
   `}
@@ -998,6 +1055,6 @@ `;
   ${({ theme: theme2, buttonStyle }) => css`
-    background: ${theme2.buttons.regular.disabled[buttonStyle].background};
-    border-color: ${theme2.buttons.regular.disabled[buttonStyle].borderColor};
-    border-width: ${theme2.buttons.regular.disabled[buttonStyle].borderWidth};
-    color: ${theme2.buttons.regular.disabled[buttonStyle].contentColor};
+    background: ${theme2.buttons.regular.disabled[buttonStyle || "primary"].background};
+    border-color: ${theme2.buttons.regular.disabled[buttonStyle || "primary"].borderColor};
+    border-width: ${theme2.buttons.regular.disabled[buttonStyle || "primary"].borderWidth};
+    color: ${theme2.buttons.regular.disabled[buttonStyle || "primary"].contentColor};
   `}
@@ -1007,6 +1064,6 @@ `;
   ${({ theme: theme2, buttonStyle, variant }) => css`
-    background: ${theme2.buttons.regular[variant][buttonStyle].background};
-    border-color: ${theme2.buttons.regular[variant][buttonStyle].borderColor};
-    border-width: ${theme2.buttons.regular[variant][buttonStyle].borderWidth};
-    color: ${theme2.buttons.regular[variant][buttonStyle].contentColor};
+    background: ${theme2.buttons.regular[variant || "primary"][buttonStyle || "primary"].background};
+    border-color: ${theme2.buttons.regular[variant || "primary"][buttonStyle || "primary"].borderColor};
+    border-width: ${theme2.buttons.regular[variant || "primary"][buttonStyle || "primary"].borderWidth};
+    color: ${theme2.buttons.regular[variant || "primary"][buttonStyle || "primary"].contentColor};
   `}
@@ -1021,3 +1078,3 @@ `;
 const startIconMargin = css`
-  margin-right: ${({ theme: theme2, buttonSize }) => theme2.buttons.regular[buttonSize].iconPadding};
+  margin-right: ${({ theme: theme2, buttonSize }) => theme2.buttons.regular[buttonSize || "medium"].iconPadding};
 `;
@@ -1029,3 +1086,3 @@ const StartIcon = styled.div`
 const endIconMargin = css`
-  margin-left: ${({ theme: theme2, buttonSize }) => theme2.buttons.regular[buttonSize].iconPadding};
+  margin-left: ${({ theme: theme2, buttonSize }) => theme2.buttons.regular[buttonSize || "medium"].iconPadding};
 `;
@@ -1038,12 +1095,12 @@ const EndIcon = styled.div`
   ${({ buttonSize, theme: theme2 }) => css`
-    padding: ${theme2.buttons.icon[buttonSize].verticalPadding}
-      ${theme2.buttons.icon[buttonSize].horizontalPadding};
+    padding: ${theme2.buttons.icon[buttonSize || "medium"].verticalPadding}
+      ${theme2.buttons.icon[buttonSize || "medium"].horizontalPadding};
 
-    border-radius: ${theme2.buttons.icon[buttonSize].borderRadius};
-    font-size: ${theme2.buttons.icon[buttonSize].fontSize};
+    border-radius: ${theme2.buttons.icon[buttonSize || "medium"].borderRadius};
+    font-size: ${theme2.buttons.icon[buttonSize || "medium"].fontSize};
   `}
 `;
 const iconButtonIconSizeCSS = css`
-  width: ${({ theme: theme2, buttonSize }) => theme2.buttons.icon[buttonSize].buttonSize};
-  height: ${({ theme: theme2, buttonSize }) => theme2.buttons.icon[buttonSize].buttonSize};
+  width: ${({ theme: theme2, buttonSize }) => theme2.buttons.icon[buttonSize || "medium"].buttonSize};
+  height: ${({ theme: theme2, buttonSize }) => theme2.buttons.icon[buttonSize || "medium"].buttonSize};
 `;
@@ -1050,0 +1107,0 @@ const IconButtonIcon = styled.div`

dist/logrock-pebbles.umd.js

@@ -1,203 +0,176 @@
-var oo=Object.defineProperty,to=Object.defineProperties;var ro=Object.getOwnPropertyDescriptors;var H=Object.getOwnPropertySymbols;var R=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable;var T=(t,a,r)=>a in t?oo(t,a,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[a]=r,k=(t,a)=>{for(var r in a||(a={}))R.call(a,r)&&T(t,r,a[r]);if(H)for(var r of H(a))W.call(a,r)&&T(t,r,a[r]);return t},S=(t,a)=>to(t,ro(a));var X=(t,a)=>{var r={};for(var h in t)R.call(t,h)&&a.indexOf(h)<0&&(r[h]=t[h]);if(t!=null&&H)for(var h of H(t))a.indexOf(h)<0&&W.call(t,h)&&(r[h]=t[h]);return r};(function(t,a){typeof exports=="object"&&typeof module!="undefined"?a(exports,require("styled-breakpoints"),require("styled-components"),require("react")):typeof define=="function"&&define.amd?define(["exports","styled-breakpoints","styled-components","react"],a):(t=typeof globalThis!="undefined"?globalThis:t||self,a(t["@logrock/pebbles"]={},t["styled-breakpoints"],t["styled-components"],t.React))})(this,function(t,a,r,h){"use strict";function w(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var n=w(r),I=w(h);const s={"50":"#F9FAFB","100":"#F3F4F6","200":"#E5E7EB","300":"#D1D5DB","400":"#9CA3AF","500":"#6B7280","600":"#4B5563","700":"#374151","800":"#1F2937","900":"#111827"},m={"50":"#FDF5E1","100":"#F9E0A5","200":"#F7D586","300":"#F5CB68","400":"#F1B72C","500":"#F1B72C","600":"#E6A50F","700":"#C08A0C","800":"#996E0A","900":"#735307"},q={"50":"#DCE6FD","100":"#B9CCFB","200":"#96B3F8","300":"#729AF6","400":"#4F81F4","500":"#2C67F1","600":"#0E4DE0","700":"#0B3EB3","800":"#092E86","900":"#061F59"},N={"50":"#F0FDF4","100":"#DCFCE7","200":"#BBF7D0","300":"#86EFAC","400":"#4ADE80","500":"#22C55E","600":"#16A34A","700":"#15803D","800":"#166534","900":"#14532D"},V={"50":"#FEF1DC","100":"#FBD696","200":"#F9C873","300":"#F8BA50","400":"#F6AD2D","500":"#F59E0B","600":"#DF9009","700":"#B27307","800":"#9C6506","900":"#593A04"},y={"50":"#FEF2F2","100":"#FEE2E2","200":"#FECACA","300":"#FCA5A5","400":"#F87171","500":"#EF4444","600":"#DC2626","700":"#B91C1C","800":"#991B1B","900":"#7F1D1D"},u={"0":"#FFFFFF","100":"#000000"},U={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"52px",lineHeight:"56px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"52px",lineHeight:"56px",tracking:"-0.02em"}},G={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"44px",lineHeight:"48px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"52px",lineHeight:"56px",tracking:"-0.02em"}},J={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"40px",lineHeight:"48px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"36px",lineHeight:"44px",tracking:"-0.02em"}},Y={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"36px",lineHeight:"44px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"32px",lineHeight:"40px",tracking:"-0.02em"}},K={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"32px",lineHeight:"40px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"28px",lineHeight:"36px",tracking:"-0.02em"}},Q={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"28px",lineHeight:"36px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"24px",lineHeight:"32px",tracking:"-0.02em"}},Z={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"24px",lineHeight:"32px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"20px",lineHeight:"28px",tracking:"-0.02em"}},ee={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"20px",lineHeight:"28px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"18px",lineHeight:"24px",tracking:"-0.02em"}},oe={fontFamily:"Archivo, sans-serif",fontSize:"18px",lineHeight:"28px",weights:{normal:400,bold:500,bolder:600}},te={fontFamily:"Archivo, sans-serif",fontSize:"16px",lineHeight:"24px",weights:{normal:400,bold:500,bolder:600}},re={fontFamily:"Archivo, sans-serif",fontSize:"14px",lineHeight:"20px",weights:{normal:400,bold:500,bolder:600}},ae={fontFamily:"Archivo, sans-serif",fontSize:"12px",lineHeight:"20px",weights:{normal:400,bold:500,bolder:600}},ie={fontFamily:"Archivo, sans-serif",fontSize:"14px",lineHeight:"20px",weight:600,textTransform:"uppercase"},ne={fontFamily:"Archivo, sans-serif",fontSize:"12px",lineHeight:"20px",weight:600,textTransform:"uppercase"},le={fontFamily:"Archivo, sans-serif",fontSize:"11px",lineHeight:"20px",weight:600,textTransform:"uppercase"},pe={background:"linear-gradient(98.41deg, #FF5F6D 0%, #FFC371 100%)"},ge={background:"linear-gradient(98.41deg, #16BFFD 0%, #CB3066 100%)"},de={background:"linear-gradient(98.41deg, #EECDA3 0%, #EF629F 100%)"},se={background:"linear-gradient(98.41deg, #4CA1AF 0%, #C4E0E5 100%)"},he={background:"linear-gradient(98.41deg, #F1F2B5 0%, #135058 100%, #135058 100%)"},ye={background:"linear-gradient(98.41deg, #FF6E7F 0%, #BFE9FF 100%)"},ce={background:"linear-gradient(98.41deg, #1D2B64 0%, #F8CDDA 100%)"},fe={background:"linear-gradient(98.41deg, #FC00FF 0%, #00B6DE 100%)"},me={background:"linear-gradient(98.41deg, #02AAB0 0%, #00CDAC 100%)"},be={background:"linear-gradient(98.41deg, #4568DC 0%, #B06AB3 100%)"},d={xxsm:"4px",xsm:"8px",sm:"12px",md:"16px",big:"20px",xbig:"24px",xxbig:"28px",xxxbig:"32px",lg:"40px",xlg:"48px",xxlg:"64px",xxxlg:"80px",huge:"96px",xhuge:"128px",xxhuge:"160px",xxxhuge:"192px"},z={primary:{background:m["500"],borderColor:m["500"],borderWidth:0,contentColor:u["100"]},secondary:{background:m["200"],borderColor:m["200"],borderWidth:0,contentColor:u["100"]},tertiary:{background:"transparent",borderColor:"transparent",borderWidth:0,contentColor:m["800"]},outlined:{background:"transparent",borderColor:s["200"],borderWidth:"1px",contentColor:s["700"]}},v={primary:{background:y["500"],borderColor:y["500"],borderWidth:0,contentColor:u["0"]},secondary:{background:y["50"],borderColor:y["50"],borderWidth:0,contentColor:y["600"]},tertiary:{background:"transparent",borderColor:"transparent",borderWidth:0,contentColor:y["600"]},outlined:{background:"transparent",borderColor:y["300"],borderWidth:"1px",contentColor:y["500"]}},C={primary:{background:s["200"],borderColor:s["200"],borderWidth:0,contentColor:s["400"]},secondary:{background:s["200"],borderColor:s["200"],borderWidth:0,contentColor:s["400"]},tertiary:{background:"transparent",borderColor:"transparent",borderWidth:0,contentColor:s["300"]},outlined:{background:"transparent",borderColor:s["400"],borderWidth:"1px",contentColor:s["300"]}},ue={fontFamily:"Archivo, sans-serif",fontWeight:500,regular:{xSmall:{borderRadius:"2px",fontSize:"14px",iconPadding:d.xxsm,horizontalPadding:"10px",verticalPadding:"6px"},small:{borderRadius:"2px",fontSize:"14px",iconPadding:d.xxsm,horizontalPadding:d.md,verticalPadding:d.xsm},medium:{borderRadius:"2px",fontSize:"16px",iconPadding:d.xxsm,horizontalPadding:d.big,verticalPadding:d.xsm},large:{borderRadius:"2px",fontSize:"18px",iconPadding:d.xxsm,horizontalPadding:d.xbig,verticalPadding:"14px"},primary:z,destructive:v,disabled:C},icon:{xSmall:{borderRadius:"2px",size:"14px",horizontalPadding:"11px",verticalPadding:"10px"},small:{borderRadius:"2px",size:"14px",horizontalPadding:"13px",verticalPadding:"14px"},medium:{borderRadius:"2px",size:d.md,horizontalPadding:"14px",verticalPadding:d.md},large:{borderRadius:"2px",size:d.md,horizontalPadding:d.md,verticalPadding:"22px"},primary:z,destructive:v,disabled:C}},P={name:"light",breakpoints:{mobile:"1023px",desktop:"1024px"},spacings:d,colors:{neutral:s,primary:m,secondary:q,error:y,success:N,warning:V,shades:u},typography:{displayLarge:U,displaySmall:G,headingH1:J,headingH2:Y,headingH3:K,headingH4:Q,headingH5:Z,headingH6:ee,paragraphLarge:oe,paragraphMedium:te,paragraphSmall:re,paragraphXSmall:ae,overlineLarge:ie,overlineMedium:ne,overlineSmall:le},shadows:{xSmall:"0px 1px 2px rgba(16, 24, 40, 0.05)",small:"0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px -1px rgba(16, 24, 40, 0.1)",medium:"0px 4px 6px -1px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.1)",large:"0px 10px 15px -3px rgba(16, 24, 40, 0.1), 0px 4px 6px -4px rgba(16, 24, 40, 0.1)",xLarge:"0px 20px 25px -5px rgba(16, 24, 40, 0.1), 0px 8px 10px -6px rgba(16, 24, 40, 0.1)",xxLarge:"0px 25px 50px -12px rgba(16, 24, 40, 0.25)",upXSmall:"0px -1px 2px rgba(16, 24, 40, 0.05)",upSmall:"0px -1px 3px rgba(16, 24, 40, 0.1), 0px -1px 2px -1px rgba(16, 24, 40, 0.1)",upMedium:"0px -4px 6px -1px rgba(16, 24, 40, 0.1), 0px -2px 4px -2px rgba(16, 24, 40, 0.1)",upLarge:"0px -10px 15px -3px rgba(16, 24, 40, 0.1), 0px -4px 6px -4px rgba(16, 24, 40, 0.1)",upXLarge:"0px -20px 25px -5px rgba(16, 24, 40, 0.1), 0px -8px 10px -6px rgba(16, 24, 40, 0.1)",upXxLarge:"0px -25px 50px -12px rgba(16, 24, 40, 0.25)"},blurs:{none:"0",small:"8px",medium:"16px",large:"24px",xLarge:"40px"},gradients:{sunburst:pe,blueMoon:ce,blueberryWine:be,cherryCola:de,coldSky:se,darkWineSea:ge,morningSakura:ye,oliveGarden:he,synthwave:fe,teaLeaves:me},buttons:ue},xe=S(k({},P),{name:"dark"}),x=({underlined:e,strikedThrough:o})=>{const i=[];return e&&i.push("underline"),o&&i.push("line-through"),i.join(" ")},$e=n.default.h1`
+var io=Object.defineProperty,no=Object.defineProperties;var po=Object.getOwnPropertyDescriptors;var S=Object.getOwnPropertySymbols;var W=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var X=(r,a,t)=>a in r?io(r,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[a]=t,k=(r,a)=>{for(var t in a||(a={}))W.call(a,t)&&X(r,t,a[t]);if(S)for(var t of S(a))T.call(a,t)&&X(r,t,a[t]);return r},F=(r,a)=>no(r,po(a));var I=(r,a)=>{var t={};for(var y in r)W.call(r,y)&&a.indexOf(y)<0&&(t[y]=r[y]);if(r!=null&&S)for(var y of S(r))a.indexOf(y)<0&&T.call(r,y)&&(t[y]=r[y]);return t};(function(r,a){typeof exports=="object"&&typeof module!="undefined"?a(exports,require("styled-breakpoints"),require("styled-components"),require("react")):typeof define=="function"&&define.amd?define(["exports","styled-breakpoints","styled-components","react"],a):(r=typeof globalThis!="undefined"?globalThis:r||self,a(r["@logrock/pebbles"]={},r["styled-breakpoints"],r["styled-components"],r.React))})(this,function(r,a,t,y){"use strict";function z(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var n=z(t),q=z(y);const p={"50":"#F9FAFB","100":"#F3F4F6","200":"#E5E7EB","300":"#D1D5DB","400":"#9CA3AF","500":"#6B7280","600":"#4B5563","700":"#374151","800":"#1F2937","900":"#111827"},c={"50":"#FDF5E1","100":"#F9E0A5","200":"#F7D586","300":"#F5CB68","400":"#F1B72C","500":"#F1B72C","600":"#E6A50F","700":"#C08A0C","800":"#996E0A","900":"#735307"},N={"50":"#DCE6FD","100":"#B9CCFB","200":"#96B3F8","300":"#729AF6","400":"#4F81F4","500":"#2C67F1","600":"#0E4DE0","700":"#0B3EB3","800":"#092E86","900":"#061F59"},V={"50":"#F0FDF4","100":"#DCFCE7","200":"#BBF7D0","300":"#86EFAC","400":"#4ADE80","500":"#22C55E","600":"#16A34A","700":"#15803D","800":"#166534","900":"#14532D"},U={"50":"#FEF1DC","100":"#FBD696","200":"#F9C873","300":"#F8BA50","400":"#F6AD2D","500":"#F59E0B","600":"#DF9009","700":"#B27307","800":"#9C6506","900":"#593A04"},s={"50":"#FEF2F2","100":"#FEE2E2","200":"#FECACA","300":"#FCA5A5","400":"#F87171","500":"#EF4444","600":"#DC2626","700":"#B91C1C","800":"#991B1B","900":"#7F1D1D"},u={"0":"#FFFFFF","100":"#000000"},G={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"52px",lineHeight:"56px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"52px",lineHeight:"56px",tracking:"-0.02em"}},J={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"44px",lineHeight:"48px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"52px",lineHeight:"56px",tracking:"-0.02em"}},Y={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"40px",lineHeight:"48px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"36px",lineHeight:"44px",tracking:"-0.02em"}},K={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"36px",lineHeight:"44px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"32px",lineHeight:"40px",tracking:"-0.02em"}},Q={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"32px",lineHeight:"40px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"28px",lineHeight:"36px",tracking:"-0.02em"}},Z={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"28px",lineHeight:"36px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"24px",lineHeight:"32px",tracking:"-0.02em"}},ee={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"24px",lineHeight:"32px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"20px",lineHeight:"28px",tracking:"-0.02em"}},oe={fontFamily:"Archivo, sans-serif",desktop:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"20px",lineHeight:"28px",tracking:"-0.02em"},mobile:{weights:{normal:500,bold:600,bolder:700,boldest:800},fontSize:"18px",lineHeight:"24px",tracking:"-0.02em"}},re={fontFamily:"Archivo, sans-serif",fontSize:"18px",lineHeight:"28px",weights:{normal:400,bold:500,bolder:600}},te={fontFamily:"Archivo, sans-serif",fontSize:"16px",lineHeight:"24px",weights:{normal:400,bold:500,bolder:600}},ae={fontFamily:"Archivo, sans-serif",fontSize:"14px",lineHeight:"20px",weights:{normal:400,bold:500,bolder:600}},ie={fontFamily:"Archivo, sans-serif",fontSize:"12px",lineHeight:"20px",weights:{normal:400,bold:500,bolder:600}},ne={fontFamily:"Archivo, sans-serif",fontSize:"14px",lineHeight:"20px",weight:600,textTransform:"uppercase"},pe={fontFamily:"Archivo, sans-serif",fontSize:"12px",lineHeight:"20px",weight:600,textTransform:"uppercase"},le={fontFamily:"Archivo, sans-serif",fontSize:"11px",lineHeight:"20px",weight:600,textTransform:"uppercase"},ge={background:"linear-gradient(98.41deg, #FF5F6D 0%, #FFC371 100%)"},de={background:"linear-gradient(98.41deg, #16BFFD 0%, #CB3066 100%)"},se={background:"linear-gradient(98.41deg, #EECDA3 0%, #EF629F 100%)"},he={background:"linear-gradient(98.41deg, #4CA1AF 0%, #C4E0E5 100%)"},ye={background:"linear-gradient(98.41deg, #F1F2B5 0%, #135058 100%, #135058 100%)"},ce={background:"linear-gradient(98.41deg, #FF6E7F 0%, #BFE9FF 100%)"},me={background:"linear-gradient(98.41deg, #1D2B64 0%, #F8CDDA 100%)"},fe={background:"linear-gradient(98.41deg, #FC00FF 0%, #00B6DE 100%)"},be={background:"linear-gradient(98.41deg, #02AAB0 0%, #00CDAC 100%)"},xe={background:"linear-gradient(98.41deg, #4568DC 0%, #B06AB3 100%)"},h={xxsm:"4px",xsm:"8px",sm:"12px",md:"16px",big:"20px",xbig:"24px",xxbig:"28px",xxxbig:"32px",lg:"40px",xlg:"48px",xxlg:"64px",xxxlg:"80px",huge:"96px",xhuge:"128px",xxhuge:"160px",xxxhuge:"192px"},v={primary:{background:c["500"],borderColor:c["500"],borderWidth:0,contentColor:u["100"]},secondary:{background:c["200"],borderColor:c["200"],borderWidth:0,contentColor:u["100"]},tertiary:{background:"transparent",borderColor:"transparent",borderWidth:0,contentColor:c["800"]},outlined:{background:"transparent",borderColor:p["200"],borderWidth:"1px",contentColor:p["700"]}},C={primary:{background:s["500"],borderColor:s["500"],borderWidth:0,contentColor:u["0"]},secondary:{background:s["50"],borderColor:s["50"],borderWidth:0,contentColor:s["600"]},tertiary:{background:"transparent",borderColor:"transparent",borderWidth:0,contentColor:s["600"]},outlined:{background:"transparent",borderColor:s["300"],borderWidth:"1px",contentColor:s["500"]}},P={primary:{background:p["200"],borderColor:p["200"],borderWidth:0,contentColor:p["400"]},secondary:{background:p["200"],borderColor:p["200"],borderWidth:0,contentColor:p["400"]},tertiary:{background:"transparent",borderColor:"transparent",borderWidth:0,contentColor:p["300"]},outlined:{background:"transparent",borderColor:p["400"],borderWidth:"1px",contentColor:p["300"]}},ue={fontFamily:"Archivo, sans-serif",fontWeight:500,regular:{xSmall:{borderRadius:"2px",fontSize:"14px",iconPadding:h.xxsm,horizontalPadding:"10px",verticalPadding:"6px"},small:{borderRadius:"2px",fontSize:"14px",iconPadding:h.xxsm,horizontalPadding:h.md,verticalPadding:h.xsm},medium:{borderRadius:"2px",fontSize:"16px",iconPadding:h.xxsm,horizontalPadding:h.big,verticalPadding:h.xsm},large:{borderRadius:"2px",fontSize:"18px",iconPadding:h.xxsm,horizontalPadding:h.xbig,verticalPadding:"14px"},primary:v,destructive:C,disabled:P},icon:{xSmall:{borderRadius:"2px",size:"14px",horizontalPadding:"11px",verticalPadding:"10px"},small:{borderRadius:"2px",size:"14px",horizontalPadding:"13px",verticalPadding:"14px"},medium:{borderRadius:"2px",size:h.md,horizontalPadding:"14px",verticalPadding:h.md},large:{borderRadius:"2px",size:h.md,horizontalPadding:h.md,verticalPadding:"22px"},primary:v,destructive:C,disabled:P}},b={xSmall:"0px 1px 2px rgba(16, 24, 40, 0.05)",small:"0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px -1px rgba(16, 24, 40, 0.1)",medium:"0px 4px 6px -1px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.1)",large:"0px 10px 15px -3px rgba(16, 24, 40, 0.1), 0px 4px 6px -4px rgba(16, 24, 40, 0.1)",xLarge:"0px 20px 25px -5px rgba(16, 24, 40, 0.1), 0px 8px 10px -6px rgba(16, 24, 40, 0.1)",xxLarge:"0px 25px 50px -12px rgba(16, 24, 40, 0.25)",upXSmall:"0px -1px 2px rgba(16, 24, 40, 0.05)",upSmall:"0px -1px 3px rgba(16, 24, 40, 0.1), 0px -1px 2px -1px rgba(16, 24, 40, 0.1)",upMedium:"0px -4px 6px -1px rgba(16, 24, 40, 0.1), 0px -2px 4px -2px rgba(16, 24, 40, 0.1)",upLarge:"0px -10px 15px -3px rgba(16, 24, 40, 0.1), 0px -4px 6px -4px rgba(16, 24, 40, 0.1)",upXLarge:"0px -20px 25px -5px rgba(16, 24, 40, 0.1), 0px -8px 10px -6px rgba(16, 24, 40, 0.1)",upXxLarge:"0px -25px 50px -12px rgba(16, 24, 40, 0.25)"},$e={fontFamily:"Archivo",fontWeight:"normal",fontStyle:"normal",fontSize:"16px",lineHeight:"24px",fontFeatureSettings:"'salt' on",padding:"10px 12px",boxSizing:"border-box",boxShadow:b.xSmall,borderRadius:"2px",border:"1px solid #D1D5DB",margin:"8px 0px",background:"white",height:"50px",width:"100%",error:{color:s[900],border:`1px solid ${s[300]}`,boxShadow:b.xSmall,hintColor:p[500],helperColor:s[600],focused:{boxSizing:"border-box",boxShadow:`0px 0px 0px 4px ${s["100"]}`,borderRadius:"2px",border:`1px solid ${s["300"]}`}},info:{color:p[900],border:"1px solid #D1D5DB",boxShadow:b.xSmall,hintColor:p[500],helperColor:p[500],focused:{boxSizing:"border-box",boxShadow:`0px 0px 0px 4px ${c["100"]}`,borderRadius:"2px",border:`1px solid ${c["300"]}`}},label:{color:"black",fontStyle:"normal",fontSize:"16px",lineHeight:"24px",fontWeight:500},helper:{fontStyle:"normal",fontSize:"14px",lineHeight:"20px",fontWeight:500,margin:"0px 8px"},disabled:{boxSizing:"border-box",boxShadow:b.xSmall,borderRadius:"2px",border:`1px solid ${p["300"]}`},hint:{background:"white",top:"1px",right:"2px",margin:"1px 0px"},placeholder:{color:p[400]}},He={items:{hover:{background:c["50"]},shadow:"1px 1px 2px rgba(0, 0, 0, 0.3)"}},A={name:"light",breakpoints:{mobile:"1023px",desktop:"1024px"},spacings:h,colors:{neutral:p,primary:c,secondary:N,error:s,success:V,warning:U,shades:u},typography:{displayLarge:G,displaySmall:J,headingH1:Y,headingH2:K,headingH3:Q,headingH4:Z,headingH5:ee,headingH6:oe,paragraphLarge:re,paragraphMedium:te,paragraphSmall:ae,paragraphXSmall:ie,overlineLarge:ne,overlineMedium:pe,overlineSmall:le},shadows:b,blurs:{none:"0",small:"8px",medium:"16px",large:"24px",xLarge:"40px"},gradients:{sunburst:ge,blueMoon:me,blueberryWine:xe,cherryCola:se,coldSky:he,darkWineSea:de,morningSakura:ce,oliveGarden:ye,synthwave:fe,teaLeaves:be},buttons:ue,inputBox:$e,select:He},Se=F(k({},A),{name:"dark"}),$=({underlined:e,strikedThrough:o})=>{const i=[];return e&&i.push("underline"),o&&i.push("line-through"),i.join(" ")},ke=n.default.h1`
+  color: ${({theme:e})=>e.colors.neutral["900"]};
   font-family: ${({theme:e})=>e.typography.displayLarge.fontFamily};
-  color: ${({theme:e})=>e.colors.neutral["900"]};
-
   font-size: ${({theme:e})=>e.typography.displayLarge.mobile.fontSize};
+  font-weight: ${({theme:e,weight:o})=>o?e.typography.displayLarge.mobile.weights[o]:e.typography.displayLarge.mobile.weights.normal};
+  letter-spacing: ${({theme:e})=>e.typography.displayLarge.mobile.tracking};
   line-height: ${({theme:e})=>e.typography.displayLarge.mobile.lineHeight};
-  letter-spacing: ${({theme:e})=>e.typography.displayLarge.mobile.tracking};
-  font-weight: ${({theme:e,weight:o})=>o?e.typography.displayLarge.mobile.weights[o]:e.typography.displayLarge.mobile.weights.normal};
 
   ${a.up("desktop")} {
     font-size: ${({theme:e})=>e.typography.displayLarge.desktop.fontSize};
+    font-weight: ${({theme:e,weight:o})=>o?e.typography.displayLarge.desktop.weights[o]:e.typography.displayLarge.desktop.weights.normal};
+    letter-spacing: ${({theme:e})=>e.typography.displayLarge.desktop.tracking};
     line-height: ${({theme:e})=>e.typography.displayLarge.desktop.lineHeight};
-    letter-spacing: ${({theme:e})=>e.typography.displayLarge.desktop.tracking};
-    font-weight: ${({theme:e,weight:o})=>o?e.typography.displayLarge.desktop.weights[o]:e.typography.displayLarge.desktop.weights.normal};
   }
-`,He=n.default.h2`
+`,Fe=n.default.h2`
+  color: ${({theme:e})=>e.colors.neutral["900"]};
   font-family: ${({theme:e})=>e.typography.displaySmall.fontFamily};
-  color: ${({theme:e})=>e.colors.neutral["900"]};
-
   font-size: ${({theme:e})=>e.typography.displaySmall.mobile.fontSize};
+  font-weight: ${({theme:e,weight:o})=>o?e.typography.displaySmall.mobile.weights[o]:e.typography.displaySmall.mobile.weights.normal};
+  letter-spacing: ${({theme:e})=>e.typography.displaySmall.mobile.tracking};
   line-height: ${({theme:e})=>e.typography.displaySmall.mobile.lineHeight};
-  letter-spacing: ${({theme:e})=>e.typography.displaySmall.mobile.tracking};
-  font-weight: ${({theme:e,weight:o})=>o?e.typography.displaySmall.mobile.weights[o]:e.typography.displaySmall.mobile.weights.normal};
 
   ${a.up("desktop")} {
     font-size: ${({theme:e})=>e.typography.displaySmall.desktop.fontSize};
+    font-weight: ${({theme:e,weight:o})=>o?e.typography.displaySmall.desktop.weights[o]:e.typography.displaySmall.desktop.weights.normal};
+    letter-spacing: ${({theme:e})=>e.typography.displaySmall.desktop.tracking};
     line-height: ${({theme:e})=>e.typography.displaySmall.desktop.lineHeight};
-    letter-spacing: ${({theme:e})=>e.typography.displaySmall.desktop.tracking};
-    font-weight: ${({theme:e,weight:o})=>o?e.typography.displaySmall.desktop.weights[o]:e.typography.displaySmall.desktop.weights.normal};
   }
-`,ke=n.default.h1`
+`,we=n.default.h1`
+  color: ${({theme:e})=>e.colors.neutral["900"]};
   font-family: ${({theme:e})=>e.typography.headingH1.fontFamily};
-  color: ${({theme:e})=>e.colors.neutral["900"]};
-
   font-size: ${({theme:e})=>e.typography.headingH1.mobile.fontSize};
+  font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH1.mobile.weights[o]:e.typography.headingH1.mobile.weights.normal};
+  letter-spacing: ${({theme:e})=>e.typography.headingH1.mobile.tracking};
   line-height: ${({theme:e})=>e.typography.headingH1.mobile.lineHeight};
-  letter-spacing: ${({theme:e})=>e.typography.headingH1.mobile.tracking};
-  font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH1.mobile.weights[o]:e.typography.headingH1.mobile.weights.normal};
 
   ${a.up("desktop")} {
     font-size: ${({theme:e})=>e.typography.headingH1.desktop.fontSize};
+    font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH1.desktop.weights[o]:e.typography.headingH1.desktop.weights.normal};
+    letter-spacing: ${({theme:e})=>e.typography.headingH1.desktop.tracking};
     line-height: ${({theme:e})=>e.typography.headingH1.desktop.lineHeight};
-    letter-spacing: ${({theme:e})=>e.typography.headingH1.desktop.tracking};
-    font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH1.desktop.weights[o]:e.typography.headingH1.desktop.weights.normal};
   }
-`,Se=n.default.h2`
+`,ze=n.default.h2`
+  color: ${({theme:e})=>e.colors.neutral["900"]};
   font-family: ${({theme:e})=>e.typography.headingH2.fontFamily};
-  color: ${({theme:e})=>e.colors.neutral["900"]};
-
   font-size: ${({theme:e})=>e.typography.headingH2.mobile.fontSize};
+  font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH2.mobile.weights[o]:e.typography.headingH2.mobile.weights.normal};
+  letter-spacing: ${({theme:e})=>e.typography.headingH2.mobile.tracking};
   line-height: ${({theme:e})=>e.typography.headingH2.mobile.lineHeight};
-  letter-spacing: ${({theme:e})=>e.typography.headingH2.mobile.tracking};
-  font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH2.mobile.weights[o]:e.typography.headingH2.mobile.weights.normal};
 
   ${a.up("desktop")} {
     font-size: ${({theme:e})=>e.typography.headingH2.desktop.fontSize};
+    font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH2.desktop.weights[o]:e.typography.headingH2.desktop.weights.normal};
+    letter-spacing: ${({theme:e})=>e.typography.headingH2.desktop.tracking};
     line-height: ${({theme:e})=>e.typography.headingH2.desktop.lineHeight};
-    letter-spacing: ${({theme:e})=>e.typography.headingH2.desktop.tracking};
-    font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH2.desktop.weights[o]:e.typography.headingH2.desktop.weights.normal};
   }
-`,Fe=n.default.h3`
+`,ve=n.default.h3`
+  color: ${({theme:e})=>e.colors.neutral["900"]};
   font-family: ${({theme:e})=>e.typography.headingH3.fontFamily};
-  color: ${({theme:e})=>e.colors.neutral["900"]};
-
   font-size: ${({theme:e})=>e.typography.headingH3.mobile.fontSize};
+  font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH3.mobile.weights[o]:e.typography.headingH3.mobile.weights.normal};
+  letter-spacing: ${({theme:e})=>e.typography.headingH3.mobile.tracking};
   line-height: ${({theme:e})=>e.typography.headingH3.mobile.lineHeight};
-  letter-spacing: ${({theme:e})=>e.typography.headingH3.mobile.tracking};
-  font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH3.mobile.weights[o]:e.typography.headingH3.mobile.weights.normal};
 
   ${a.up("desktop")} {
     font-size: ${({theme:e})=>e.typography.headingH3.desktop.fontSize};
+    font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH3.desktop.weights[o]:e.typography.headingH3.desktop.weights.normal};
+    letter-spacing: ${({theme:e})=>e.typography.headingH3.desktop.tracking};
     line-height: ${({theme:e})=>e.typography.headingH3.desktop.lineHeight};
-    letter-spacing: ${({theme:e})=>e.typography.headingH3.desktop.tracking};
-    font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH3.desktop.weights[o]:e.typography.headingH3.desktop.weights.normal};
   }
-`,we=n.default.h4`
+`,Ce=n.default.h4`
+  color: ${({theme:e})=>e.colors.neutral["900"]};
   font-family: ${({theme:e})=>e.typography.headingH4.fontFamily};
-  color: ${({theme:e})=>e.colors.neutral["900"]};
-
   font-size: ${({theme:e})=>e.typography.headingH4.mobile.fontSize};
+  font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH4.mobile.weights[o]:e.typography.headingH4.mobile.weights.normal};
+  letter-spacing: ${({theme:e})=>e.typography.headingH4.mobile.tracking};
   line-height: ${({theme:e})=>e.typography.headingH4.mobile.lineHeight};
-  letter-spacing: ${({theme:e})=>e.typography.headingH4.mobile.tracking};
-  font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH4.mobile.weights[o]:e.typography.headingH4.mobile.weights.normal};
 
   ${a.up("desktop")} {
     font-size: ${({theme:e})=>e.typography.headingH4.desktop.fontSize};
+    font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH4.desktop.weights[o]:e.typography.headingH4.desktop.weights.normal};
+    letter-spacing: ${({theme:e})=>e.typography.headingH4.desktop.tracking};
     line-height: ${({theme:e})=>e.typography.headingH4.desktop.lineHeight};
-    letter-spacing: ${({theme:e})=>e.typography.headingH4.desktop.tracking};
-    font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH4.desktop.weights[o]:e.typography.headingH4.desktop.weights.normal};
   }
-`,ze=n.default.h5`
+`,Pe=n.default.h5`
+  color: ${({theme:e})=>e.colors.neutral["900"]};
   font-family: ${({theme:e})=>e.typography.headingH5.fontFamily};
-  color: ${({theme:e})=>e.colors.neutral["900"]};
-
   font-size: ${({theme:e})=>e.typography.headingH5.mobile.fontSize};
+  font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH5.mobile.weights[o]:e.typography.headingH5.mobile.weights.normal};
+  letter-spacing: ${({theme:e})=>e.typography.headingH5.mobile.tracking};
   line-height: ${({theme:e})=>e.typography.headingH5.mobile.lineHeight};
-  letter-spacing: ${({theme:e})=>e.typography.headingH5.mobile.tracking};
-  font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH5.mobile.weights[o]:e.typography.headingH5.mobile.weights.normal};
 
   ${a.up("desktop")} {
     font-size: ${({theme:e})=>e.typography.headingH5.desktop.fontSize};
+    font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH5.desktop.weights[o]:e.typography.headingH5.desktop.weights.normal};
+    letter-spacing: ${({theme:e})=>e.typography.headingH5.desktop.tracking};
     line-height: ${({theme:e})=>e.typography.headingH5.desktop.lineHeight};
-    letter-spacing: ${({theme:e})=>e.typography.headingH5.desktop.tracking};
-    font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH5.desktop.weights[o]:e.typography.headingH5.desktop.weights.normal};
   }
-`,ve=n.default.h6`
+`,Ae=n.default.h6`
+  color: ${({theme:e})=>e.colors.neutral["900"]};
   font-family: ${({theme:e})=>e.typography.headingH6.fontFamily};
-  color: ${({theme:e})=>e.colors.neutral["900"]};
-
   font-size: ${({theme:e})=>e.typography.headingH6.mobile.fontSize};
+  font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH6.mobile.weights[o]:e.typography.headingH6.mobile.weights.normal};
+  letter-spacing: ${({theme:e})=>e.typography.headingH6.mobile.tracking};
   line-height: ${({theme:e})=>e.typography.headingH6.mobile.lineHeight};
-  letter-spacing: ${({theme:e})=>e.typography.headingH6.mobile.tracking};
-  font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH6.mobile.weights[o]:e.typography.headingH6.mobile.weights.normal};
 
   ${a.up("desktop")} {
     font-size: ${({theme:e})=>e.typography.headingH6.desktop.fontSize};
+    font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH6.desktop.weights[o]:e.typography.headingH6.desktop.weights.normal};
+    letter-spacing: ${({theme:e})=>e.typography.headingH6.desktop.tracking};
     line-height: ${({theme:e})=>e.typography.headingH6.desktop.lineHeight};
-    letter-spacing: ${({theme:e})=>e.typography.headingH6.desktop.tracking};
-    font-weight: ${({theme:e,weight:o})=>o?e.typography.headingH6.desktop.weights[o]:e.typography.headingH6.desktop.weights.normal};
   }
-`,Ce=n.default.p`
+`,De=n.default.p`
+  color: ${({theme:e})=>e.colors.neutral["900"]};
   font-family: ${({theme:e})=>e.typography.paragraphLarge.fontFamily};
-  color: ${({theme:e})=>e.colors.neutral["900"]};
-
   font-size: ${({theme:e})=>e.typography.paragraphLarge.fontSize};
+  font-style: ${({italic:e})=>e?"italic":"normal"};
+  font-weight: ${({theme:e,weight:o})=>o?e.typography.paragraphLarge.weights[o]:e.typography.paragraphLarge.weights.normal};
   line-height: ${({theme:e})=>e.typography.paragraphLarge.lineHeight};
-
-  font-weight: ${({theme:e,weight:o})=>o?e.typography.paragraphLarge.weights[o]:e.typography.paragraphLarge.weights.normal};
-
-  text-decoration: ${x};
-  font-style: ${({italic:e})=>e?"italic":"normal"};
-`,Pe=n.default.p`
+  text-decoration: ${$};
+`,Ee=t.css`
+  color: ${({theme:e})=>e.colors.neutral["900"]};
   font-family: ${({theme:e})=>e.typography.paragraphMedium.fontFamily};
-  color: ${({theme:e})=>e.colors.neutral["900"]};
-
   font-size: ${({theme:e})=>e.typography.paragraphMedium.fontSize};
+  font-style: ${({italic:e})=>e?"italic":"normal"};
+  font-weight: ${({theme:e,weight:o})=>o?e.typography.paragraphMedium.weights[o]:e.typography.paragraphMedium.weights.normal};
   line-height: ${({theme:e})=>e.typography.paragraphMedium.lineHeight};
-
-  font-weight: ${({theme:e,weight:o})=>o?e.typography.paragraphMedium.weights[o]:e.typography.paragraphMedium.weights.normal};
-
-  text-decoration: ${x};
-  font-style: ${({italic:e})=>e?"italic":"normal"};
-`,Ae=n.default.p`
+  text-decoration: ${$};
+`,Le=n.default.p`
+  ${Ee}
+`,Be=n.default.p`
+  color: ${({theme:e})=>e.colors.neutral["900"]};
   font-family: ${({theme:e})=>e.typography.paragraphSmall.fontFamily};
-  color: ${({theme:e})=>e.colors.neutral["900"]};
-
   font-size: ${({theme:e})=>e.typography.paragraphSmall.fontSize};
+  font-style: ${({italic:e})=>e?"italic":"normal"};
+  font-weight: ${({theme:e,weight:o})=>o?e.typography.paragraphSmall.weights[o]:e.typography.paragraphSmall.weights.normal};
   line-height: ${({theme:e})=>e.typography.paragraphSmall.lineHeight};
-
-  font-weight: ${({theme:e,weight:o})=>o?e.typography.paragraphSmall.weights[o]:e.typography.paragraphSmall.weights.normal};
-
-  text-decoration: ${x};
-  font-style: ${({italic:e})=>e?"italic":"normal"};
-`,Ee=n.default.p`
+  text-decoration: ${$};
+`,Oe=n.default.p`
+  color: ${({theme:e})=>e.colors.neutral["900"]};
   font-family: ${({theme:e})=>e.typography.paragraphXSmall.fontFamily};
-  color: ${({theme:e})=>e.colors.neutral["900"]};
-
   font-size: ${({theme:e})=>e.typography.paragraphXSmall.fontSize};
+  font-style: ${({italic:e})=>e?"italic":"normal"};
+  font-weight: ${({theme:e,weight:o})=>o?e.typography.paragraphXSmall.weights[o]:e.typography.paragraphXSmall.weights.normal};
   line-height: ${({theme:e})=>e.typography.paragraphXSmall.lineHeight};
-
-  font-weight: ${({theme:e,weight:o})=>o?e.typography.paragraphXSmall.weights[o]:e.typography.paragraphXSmall.weights.normal};
-
-  text-decoration: ${x};
-  font-style: ${({italic:e})=>e?"italic":"normal"};
-`,Le=n.default.p`
+  text-decoration: ${$};
+`,je=n.default.p`
+  color: ${({theme:e})=>e.colors.neutral["900"]};
   font-family: ${({theme:e})=>e.typography.overlineLarge.fontFamily};
-  color: ${({theme:e})=>e.colors.neutral["900"]};
-
   font-size: ${({theme:e})=>e.typography.overlineLarge.fontSize};
-  line-height: ${({theme:e})=>e.typography.overlineLarge.lineHeight};
-
   font-weight: ${({theme:e})=>e.typography.overlineLarge.weight};
-
   letter-spacing: 1px;
+  line-height: ${({theme:e})=>e.typography.overlineLarge.lineHeight};
   text-transform: uppercase;
-`,De=n.default.p`
+`,_e=n.default.p`
+  color: ${({theme:e})=>e.colors.neutral["900"]};
   font-family: ${({theme:e})=>e.typography.overlineMedium.fontFamily};
-  color: ${({theme:e})=>e.colors.neutral["900"]};
-
   font-size: ${({theme:e})=>e.typography.overlineMedium.fontSize};
-  line-height: ${({theme:e})=>e.typography.overlineMedium.lineHeight};
-
   font-weight: ${({theme:e})=>e.typography.overlineMedium.weight};
-
   letter-spacing: 1px;
+  line-height: ${({theme:e})=>e.typography.overlineMedium.lineHeight};
   text-transform: uppercase;
-`,Oe=n.default.p`
+`,Re=n.default.p`
+  color: ${({theme:e})=>e.colors.neutral["900"]};
   font-family: ${({theme:e})=>e.typography.overlineSmall.fontFamily};
-  color: ${({theme:e})=>e.colors.neutral["900"]};
-
   font-size: ${({theme:e})=>e.typography.overlineSmall.fontSize};
-  line-height: ${({theme:e})=>e.typography.overlineSmall.lineHeight};
-
   font-weight: ${({theme:e})=>e.typography.overlineSmall.weight};
-
   letter-spacing: 1px;
+  line-height: ${({theme:e})=>e.typography.overlineSmall.lineHeight};
   text-transform: uppercase;
-`;var F={exports:{}},b={};/*
+`;var w={exports:{}},x={};/*
 object-assign
 (c) Sindre Sorhus
 @license MIT
-*/var A=Object.getOwnPropertySymbols,Be=Object.prototype.hasOwnProperty,je=Object.prototype.propertyIsEnumerable;function _e(e){if(e==null)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}function Me(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de",Object.getOwnPropertyNames(e)[0]==="5")return!1;for(var o={},i=0;i<10;i++)o["_"+String.fromCharCode(i)]=i;var l=Object.getOwnPropertyNames(o).map(function(g){return o[g]});if(l.join("")!=="0123456789")return!1;var p={};return"abcdefghijklmnopqrst".split("").forEach(function(g){p[g]=g}),Object.keys(Object.assign({},p)).join("")==="abcdefghijklmnopqrst"}catch{return!1}}Me();/** @license React v17.0.2
+*/var D=Object.getOwnPropertySymbols,Me=Object.prototype.hasOwnProperty,We=Object.prototype.propertyIsEnumerable;function Te(e){if(e==null)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}function Xe(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de",Object.getOwnPropertyNames(e)[0]==="5")return!1;for(var o={},i=0;i<10;i++)o["_"+String.fromCharCode(i)]=i;var l=Object.getOwnPropertyNames(o).map(function(d){return o[d]});if(l.join("")!=="0123456789")return!1;var g={};return"abcdefghijklmnopqrst".split("").forEach(function(d){g[d]=d}),Object.keys(Object.assign({},g)).join("")==="abcdefghijklmnopqrst"}catch{return!1}}Xe();/** @license React v17.0.2
  * react-jsx-runtime.production.min.js
@@ -209,3 +182,3 @@ *
  * LICENSE file in the root directory of this source tree.
- */var Re=I.default,E=60103;if(b.Fragment=60107,typeof Symbol=="function"&&Symbol.for){var L=Symbol.for;E=L("react.element"),b.Fragment=L("react.fragment")}var We=Re.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,Te=Object.prototype.hasOwnProperty,Xe={key:!0,ref:!0,__self:!0,__source:!0};function D(e,o,i){var l,p={},g=null,c=null;i!==void 0&&(g=""+i),o.key!==void 0&&(g=""+o.key),o.ref!==void 0&&(c=o.ref);for(l in o)Te.call(o,l)&&!Xe.hasOwnProperty(l)&&(p[l]=o[l]);if(e&&e.defaultProps)for(l in o=e.defaultProps,o)p[l]===void 0&&(p[l]=o[l]);return{$$typeof:E,type:e,key:g,ref:c,props:p,_owner:We.current}}b.jsx=D,b.jsxs=D,F.exports=b;const $=F.exports.jsx,Ie=F.exports.jsxs,O=r.css`
+ */var Ie=q.default,E=60103;if(x.Fragment=60107,typeof Symbol=="function"&&Symbol.for){var L=Symbol.for;E=L("react.element"),x.Fragment=L("react.fragment")}var qe=Ie.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,Ne=Object.prototype.hasOwnProperty,Ve={key:!0,ref:!0,__self:!0,__source:!0};function B(e,o,i){var l,g={},d=null,m=null;i!==void 0&&(d=""+i),o.key!==void 0&&(d=""+o.key),o.ref!==void 0&&(m=o.ref);for(l in o)Ne.call(o,l)&&!Ve.hasOwnProperty(l)&&(g[l]=o[l]);if(e&&e.defaultProps)for(l in o=e.defaultProps,o)g[l]===void 0&&(g[l]=o[l]);return{$$typeof:E,type:e,key:d,ref:m,props:g,_owner:qe.current}}x.jsx=B,x.jsxs=B,w.exports=x;const H=w.exports.jsx,Ue=w.exports.jsxs,O=t.css`
   display: flex;
@@ -226,55 +199,55 @@ flex-flow: row nowrap;
   }
-`,B=r.css`
+`,j=t.css`
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
-`,qe=r.css`
-  ${({buttonSize:e,theme:o})=>r.css`
-    padding: ${o.buttons.regular[e].verticalPadding}
-      ${o.buttons.regular[e].horizontalPadding};
+`,Ge=t.css`
+  ${({buttonSize:e,theme:o})=>t.css`
+    padding: ${o.buttons.regular[e||"medium"].verticalPadding}
+      ${o.buttons.regular[e||"medium"].horizontalPadding};
 
-    border-radius: ${o.buttons.regular[e].borderRadius};
-    font-size: ${o.buttons.regular[e].fontSize};
+    border-radius: ${o.buttons.regular[e||"medium"].borderRadius};
+    font-size: ${o.buttons.regular[e||"medium"].fontSize};
   `}
-`,j=r.css`
-  ${({theme:e,buttonStyle:o})=>r.css`
-    background: ${e.buttons.regular.disabled[o].background};
-    border-color: ${e.buttons.regular.disabled[o].borderColor};
-    border-width: ${e.buttons.regular.disabled[o].borderWidth};
-    color: ${e.buttons.regular.disabled[o].contentColor};
+`,_=t.css`
+  ${({theme:e,buttonStyle:o})=>t.css`
+    background: ${e.buttons.regular.disabled[o||"primary"].background};
+    border-color: ${e.buttons.regular.disabled[o||"primary"].borderColor};
+    border-width: ${e.buttons.regular.disabled[o||"primary"].borderWidth};
+    color: ${e.buttons.regular.disabled[o||"primary"].contentColor};
   `}
-`,_=r.css`
-  ${({theme:e,buttonStyle:o,variant:i})=>r.css`
-    background: ${e.buttons.regular[i][o].background};
-    border-color: ${e.buttons.regular[i][o].borderColor};
-    border-width: ${e.buttons.regular[i][o].borderWidth};
-    color: ${e.buttons.regular[i][o].contentColor};
+`,R=t.css`
+  ${({theme:e,buttonStyle:o,variant:i})=>t.css`
+    background: ${e.buttons.regular[i||"primary"][o||"primary"].background};
+    border-color: ${e.buttons.regular[i||"primary"][o||"primary"].borderColor};
+    border-width: ${e.buttons.regular[i||"primary"][o||"primary"].borderWidth};
+    color: ${e.buttons.regular[i||"primary"][o||"primary"].contentColor};
   `}
-`,Ne=n.default.button`
+`,Je=n.default.button`
   ${O}
-  ${qe}
+  ${Ge}
   
-  ${({disabled:e})=>e?j:_}
-`,Ve=r.css`
-  margin-right: ${({theme:e,buttonSize:o})=>e.buttons.regular[o].iconPadding};
-`,Ue=n.default.div`
-  ${B}
-  ${Ve}
-`,Ge=r.css`
-  margin-left: ${({theme:e,buttonSize:o})=>e.buttons.regular[o].iconPadding};
-`,Je=n.default.div`
-  ${B}
-  ${Ge}
-`,Ye=r.css`
-  ${({buttonSize:e,theme:o})=>r.css`
-    padding: ${o.buttons.icon[e].verticalPadding}
-      ${o.buttons.icon[e].horizontalPadding};
+  ${({disabled:e})=>e?_:R}
+`,Ye=t.css`
+  margin-right: ${({theme:e,buttonSize:o})=>e.buttons.regular[o||"medium"].iconPadding};
+`,Ke=n.default.div`
+  ${j}
+  ${Ye}
+`,Qe=t.css`
+  margin-left: ${({theme:e,buttonSize:o})=>e.buttons.regular[o||"medium"].iconPadding};
+`,Ze=n.default.div`
+  ${j}
+  ${Qe}
+`,eo=t.css`
+  ${({buttonSize:e,theme:o})=>t.css`
+    padding: ${o.buttons.icon[e||"medium"].verticalPadding}
+      ${o.buttons.icon[e||"medium"].horizontalPadding};
 
-    border-radius: ${o.buttons.icon[e].borderRadius};
-    font-size: ${o.buttons.icon[e].fontSize};
+    border-radius: ${o.buttons.icon[e||"medium"].borderRadius};
+    font-size: ${o.buttons.icon[e||"medium"].fontSize};
   `}
-`,Ke=r.css`
-  width: ${({theme:e,buttonSize:o})=>e.buttons.icon[o].buttonSize};
-  height: ${({theme:e,buttonSize:o})=>e.buttons.icon[o].buttonSize};
-`,Qe=n.default.div`
+`,oo=t.css`
+  width: ${({theme:e,buttonSize:o})=>e.buttons.icon[o||"medium"].buttonSize};
+  height: ${({theme:e,buttonSize:o})=>e.buttons.icon[o||"medium"].buttonSize};
+`,ro=n.default.div`
   display: flex;
@@ -285,8 +258,8 @@ flex-flow: row nowrap;
 
-  ${Ke}
-`,Ze=n.default.button`
+  ${oo}
+`,to=n.default.button`
   ${O}
-  ${Ye}
+  ${eo}
 
-  ${({disabled:e})=>e?j:_}
-`,eo=ao=>{var M=ao,{buttonSize:e="medium",variant:o="primary",buttonStyle:i="primary",iconOnly:l=!1,startIcon:p=null,endIcon:g=null,children:c}=M,f=X(M,["buttonSize","variant","buttonStyle","iconOnly","startIcon","endIcon","children"]);return l?$(Ze,S(k({},f),{variant:o,buttonStyle:i,buttonSize:e,children:$(Qe,{buttonSize:e,children:p||g},void 0)}),void 0):Ie(Ne,S(k({},f),{variant:o,buttonStyle:i,buttonSize:e,children:[p&&$(Ue,{buttonSize:e,children:p},void 0),c,g&&$(Je,{buttonSize:e,children:g},void 0)]}),void 0)};t.Button=eo,t.DisplayLarge=$e,t.DisplaySmall=He,t.HeadingH1=ke,t.HeadingH2=Se,t.HeadingH3=Fe,t.HeadingH4=we,t.HeadingH5=ze,t.HeadingH6=ve,t.OverlineLarge=Le,t.OverlineMedium=De,t.OverlineSmall=Oe,t.ParagraphLarge=Ce,t.ParagraphMedium=Pe,t.ParagraphSmall=Ae,t.ParagraphXSmall=Ee,t.darkTheme=xe,t.lightTheme=P,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});
+  ${({disabled:e})=>e?_:R}
+`,ao=lo=>{var M=lo,{buttonSize:e="medium",variant:o="primary",buttonStyle:i="primary",iconOnly:l=!1,startIcon:g=null,endIcon:d=null,children:m}=M,f=I(M,["buttonSize","variant","buttonStyle","iconOnly","startIcon","endIcon","children"]);return l?H(to,F(k({},f),{variant:o,buttonStyle:i,buttonSize:e,children:H(ro,{buttonSize:e,children:g||d},void 0)}),void 0):Ue(Je,F(k({},f),{variant:o,buttonStyle:i,buttonSize:e,children:[g&&H(Ke,{buttonSize:e,children:g},void 0),m,d&&H(Ze,{buttonSize:e,children:d},void 0)]}),void 0)};r.Button=ao,r.DisplayLarge=ke,r.DisplaySmall=Fe,r.HeadingH1=we,r.HeadingH2=ze,r.HeadingH3=ve,r.HeadingH4=Ce,r.HeadingH5=Pe,r.HeadingH6=Ae,r.OverlineLarge=je,r.OverlineMedium=_e,r.OverlineSmall=Re,r.ParagraphLarge=De,r.ParagraphMedium=Le,r.ParagraphSmall=Be,r.ParagraphXSmall=Oe,r.darkTheme=Se,r.lightTheme=A,Object.defineProperty(r,"__esModule",{value:!0}),r[Symbol.toStringTag]="Module"});

dist/types/theme.d.ts

@@ -186,2 +186,78 @@ import * as CSS from "csstype";
 }
+export interface Focused {
+    boxSizing: CSS.Property.BoxSizing;
+    boxShadow: CSS.Property.BoxShadow;
+    borderRadius: CSS.Property.BorderRadius;
+    border: CSS.Property.Border;
+}
+export interface InputBox {
+    fontFamily: CSS.Property.FontFamily;
+    fontWeight: CSS.Property.FontWeight;
+    fontStyle: CSS.Property.FontStyle;
+    fontSize: CSS.Property.FontSize;
+    lineHeight: CSS.Property.LineHeight;
+    fontFeatureSettings: CSS.Property.FontFeatureSettings;
+    padding: CSS.Property.Padding;
+    boxSizing: CSS.Property.BoxSizing;
+    boxShadow: CSS.Property.BoxShadow;
+    borderRadius: CSS.Property.BorderRadius;
+    border: CSS.Property.Border;
+    margin: CSS.Property.Margin;
+    background: CSS.Property.Background;
+    height: CSS.Property.Height;
+    width: CSS.Property.Width;
+    placeholder: {
+        color: CSS.Property.Color;
+    };
+    error: {
+        color: CSS.Property.Color;
+        border: CSS.Property.Border;
+        boxShadow: CSS.Property.BoxShadow;
+        hintColor: CSS.Property.Color;
+        helperColor: CSS.Property.Color;
+        focused: Focused;
+    };
+    info: {
+        color: CSS.Property.Color;
+        border: CSS.Property.Border;
+        boxShadow: CSS.Property.BoxShadow;
+        hintColor: CSS.Property.Color;
+        helperColor: CSS.Property.Color;
+        focused: Focused;
+    };
+    disabled: {
+        boxSizing: CSS.Property.BoxSizing;
+        boxShadow: CSS.Property.BoxShadow;
+        borderRadius: CSS.Property.BorderRadius;
+        border: CSS.Property.Border;
+    };
+    label: {
+        color: CSS.Property.Color;
+        fontStyle: CSS.Property.FontStyle;
+        fontSize: CSS.Property.FontSize;
+        fontWeight: CSS.Property.FontWeight;
+        lineHeight: CSS.Property.LineHeight;
+    };
+    helper: {
+        fontStyle: CSS.Property.FontStyle;
+        fontSize: CSS.Property.FontSize;
+        fontWeight: CSS.Property.FontWeight;
+        lineHeight: CSS.Property.LineHeight;
+        margin: CSS.Property.Margin;
+    };
+    hint: {
+        background: CSS.Property.Background;
+        top: CSS.Property.Inset;
+        right: CSS.Property.Inset;
+        margin: CSS.Property.Margin;
+    };
+}
+export interface Select {
+    items: {
+        hover: {
+            background: CSS.Property.Background;
+        };
+        shadow: "1px 1px 2px rgba(0, 0, 0, 0.3)";
+    };
+}
 export default interface Theme {
@@ -200,3 +276,5 @@ breakpoints: {
     buttons: Buttons;
+    inputBox: InputBox;
+    select: Select;
 }
 export {};

package.json

 {
   "name": "@logrock/pebbles",
   "author": "lipe-dev",
+  "homepage": "https://github.com/LogRock/pebbles",
   "files": [
@@ -16,3 +17,3 @@ "dist"
   },
-  "version": "3.1.1",
+  "version": "3.2.0",
   "scripts": {
@@ -37,2 +38,4 @@ "build": "tsc --noEmit && vite build",
     "@fontsource/archivo": "^4.5.3",
+    "@mdi/js": "^6.5.95",
+    "@mdi/react": "^1.5.0",
     "@mdx-js/react": "^1.6.22",
@@ -80,3 +83,3 @@ "@react-theming/storybook-addon": "^1.1.5",
     "jest-watch-typeahead": "^1.0.0",
-    "lint-staged": ">=10",
+    "lint-staged": "12.3.4",
     "pinst": "^3.0.0",
@@ -103,2 +106,4 @@ "postcss-syntax": "^0.36.2",
     "@fontsource/archivo": "*",
+    "@mdi/js": "^6.5.95",
+    "@mdi/react": "^1.5.0",
     "react": "*",
@@ -160,3 +165,3 @@ "react-dom": "*",
     "type": "git",
-    "url": "https://github.com/LogRock/pebbles-react.git"
+    "url": "https://github.com/LogRock/pebbles.git"
   },
@@ -163,0 +168,0 @@ "config": {

README.md

@@ -29,6 +29,11 @@ # @LogRock/Pebbles
 ```js
-import "@fontsource/archivo
-import "@fontsource/archivo/variable-full.css";
+import "@fontsource/archivo/400.css";
+import "@fontsource/archivo/500.css";
+import "@fontsource/archivo/600.css";
+import "@fontsource/archivo/700.css";
+import "@fontsource/archivo/800.css";
 ```
 
+You can, alternatively, make it available as a Variable font if you want. The only requirement is having all weights from 400 to 800 available for the default theme to work best.
+
 If you customize the theme by changing any of the fontFamily properties, make sure that the font you want to use is also made available, by exposing it in any ways you like (fontsource is the best!)
@@ -35,0 +40,0 @@

Fixed alerts

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

738748

increased by1.35%

Number of package files

30

increased by36.36%

Lines of code

1982

increased by14.37%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

74

increased by7.25%

Worsened metrics

Dependency count

7

increased by40%

Dev dependency count

70

increased by2.94%

No dependency changes