Socket
Socket
Sign inDemoInstall

@logrock/pebbles

Package Overview
Dependencies
91
Maintainers
1
Versions
189
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 2.2.0 to 2.3.0

dist/components/Button/Button.d.ts
dist/components/Button/Button.styled.d.ts
dist/components/Button/Button.types.d.ts
dist/components/Button/index.d.ts
dist/components/Typography/index.d.ts
dist/components/Typography/Typography.styled.d.ts
dist/components/Typography/Typography.types.d.ts
dist/fonts/Archivo.ttf
README.md

1650

dist/logrock-pebbles.es.js

@@ -1,509 +0,112 @@

const neutral$1 = {
50: "#F9FAFB",
100: "#F3F4F6",
200: "#E5E7EB",
300: "#D1D5DB",
400: "#9CA3AF",
500: "#6B7280",
600: "#4B5563",
700: "#374151",
800: "#1F2937",
900: "#111827"
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
const primary$1 = {
50: "#FDF5E1",
100: "#F9E0A5",
200: "#F7D586",
300: "#F5CB68",
400: "#F1B72C",
500: "#F1B72C",
600: "#E6A50F",
700: "#C08A0C",
800: "#996E0A",
900: "#735307"
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
target[prop] = source[prop];
}
return target;
};
const secondary$1 = {
50: "#DCE6FD",
100: "#B9CCFB",
200: "#96B3F8",
300: "#729AF6",
400: "#4F81F4",
500: "#2C67F1",
600: "#0E4DE0",
700: "#0B3EB3",
800: "#092E86",
900: "#061F59"
};
const success$1 = {
50: "#F0FDF4",
100: "#DCFCE7",
200: "#BBF7D0",
300: "#86EFAC",
400: "#4ADE80",
500: "#22C55E",
600: "#16A34A",
700: "#15803D",
800: "#166534",
900: "#14532D"
};
const warning$1 = {
50: "#FEF1DC",
100: "#FBD696",
200: "#F9C873",
300: "#F8BA50",
400: "#F6AD2D",
500: "#F59E0B",
600: "#DF9009",
700: "#B27307",
800: "#9C6506",
900: "#593A04"
};
const error$1 = {
50: "#FEF2F2",
100: "#FEE2E2",
200: "#FECACA",
300: "#FCA5A5",
400: "#F87171",
500: "#EF4444",
600: "#DC2626",
700: "#B91C1C",
800: "#991B1B",
900: "#7F1D1D"
};
const shades$1 = {
0: "#FFFFFF",
100: "#000000"
};
const displayLarge$1 = {
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"
}
};
const displaySmall$1 = {
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"
}
};
const headingH1$1 = {
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"
}
};
const headingH2$1 = {
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"
}
};
const headingH3$1 = {
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"
}
};
const headingH4$1 = {
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"
}
};
const headingH5$1 = {
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"
}
};
const headingH6$1 = {
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"
}
};
const paragraphLarge$1 = {
fontSize: "18px",
lineHeight: "28px",
weights: {
normal: 400,
bold: 500,
bolder: 600
}
};
const paragraphMedium$1 = {
fontSize: "16px",
lineHeight: "24px",
weights: {
normal: 400,
bold: 500,
bolder: 600
}
};
const paragraphSmall$1 = {
fontSize: "14px",
lineHeight: "20px",
weights: {
normal: 400,
bold: 500,
bolder: 600
}
};
const paragraphXSmall$1 = {
fontSize: "12px",
lineHeight: "20px",
weights: {
normal: 400,
bold: 500,
bolder: 600
}
};
const overlineLarge$1 = {
fontSize: "14px",
lineHeight: "20px",
weights: {
normal: 600,
bold: 600,
bolder: 600
}
};
const overlineSmall$1 = {
fontSize: "12px",
lineHeight: "20px",
weights: {
normal: 600,
bold: 600,
bolder: 600
}
};
const sunburst$1 = {
background: "linear-gradient(98.41deg, #FF5F6D 0%, #FFC371 100%)"
};
const darkWineSea$1 = {
background: "linear-gradient(98.41deg, #16BFFD 0%, #CB3066 100%)"
};
const cherryCola$1 = {
background: "linear-gradient(98.41deg, #EECDA3 0%, #EF629F 100%)"
};
const coldSky$1 = {
background: "linear-gradient(98.41deg, #4CA1AF 0%, #C4E0E5 100%)"
};
const oliveGarden$1 = {
background: "linear-gradient(98.41deg, #F1F2B5 0%, #135058 100%, #135058 100%)"
};
const morningSakura$1 = {
background: "linear-gradient(98.41deg, #FF6E7F 0%, #BFE9FF 100%)"
};
const blueMoon$1 = {
background: "linear-gradient(98.41deg, #1D2B64 0%, #F8CDDA 100%)"
};
const synthwave$1 = {
background: "linear-gradient(98.41deg, #FC00FF 0%, #00B6DE 100%)"
};
const teaLeaves$1 = {
background: "linear-gradient(98.41deg, #02AAB0 0%, #00CDAC 100%)"
};
const blueberryWine$1 = {
background: "linear-gradient(98.41deg, #4568DC 0%, #B06AB3 100%)"
};
const theme$1 = {
name: "light",
spacings: {
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"
},
colors: {
neutral: neutral$1,
primary: primary$1,
secondary: secondary$1,
error: error$1,
success: success$1,
warning: warning$1,
shades: shades$1
},
typography: {
displayLarge: displayLarge$1,
displaySmall: displaySmall$1,
headingH1: headingH1$1,
headingH2: headingH2$1,
headingH3: headingH3$1,
headingH4: headingH4$1,
headingH5: headingH5$1,
headingH6: headingH6$1,
paragraphLarge: paragraphLarge$1,
paragraphMedium: paragraphMedium$1,
paragraphSmall: paragraphSmall$1,
paragraphXSmall: paragraphXSmall$1,
overlineLarge: overlineLarge$1,
overlineSmall: overlineSmall$1
},
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: sunburst$1,
blueMoon: blueMoon$1,
blueberryWine: blueberryWine$1,
cherryCola: cherryCola$1,
coldSky: coldSky$1,
darkWineSea: darkWineSea$1,
morningSakura: morningSakura$1,
oliveGarden: oliveGarden$1,
synthwave: synthwave$1,
teaLeaves: teaLeaves$1
}
};
import styled, { css } from "styled-components";
import require$$0 from "preact";
const neutral = {
50: "#F9FAFB",
100: "#F3F4F6",
200: "#E5E7EB",
300: "#D1D5DB",
400: "#9CA3AF",
500: "#6B7280",
600: "#4B5563",
700: "#374151",
800: "#1F2937",
900: "#111827"
"50": "#F9FAFB",
"100": "#F3F4F6",
"200": "#E5E7EB",
"300": "#D1D5DB",
"400": "#9CA3AF",
"500": "#6B7280",
"600": "#4B5563",
"700": "#374151",
"800": "#1F2937",
"900": "#111827"
};
const primary = {
50: "#FDF5E1",
100: "#F9E0A5",
200: "#F7D586",
300: "#F5CB68",
400: "#F1B72C",
500: "#F1B72C",
600: "#E6A50F",
700: "#C08A0C",
800: "#996E0A",
900: "#735307"
"50": "#FDF5E1",
"100": "#F9E0A5",
"200": "#F7D586",
"300": "#F5CB68",
"400": "#F1B72C",
"500": "#F1B72C",
"600": "#E6A50F",
"700": "#C08A0C",
"800": "#996E0A",
"900": "#735307"
};
const secondary = {
50: "#DCE6FD",
100: "#B9CCFB",
200: "#96B3F8",
300: "#729AF6",
400: "#4F81F4",
500: "#2C67F1",
600: "#0E4DE0",
700: "#0B3EB3",
800: "#092E86",
900: "#061F59"
"50": "#DCE6FD",
"100": "#B9CCFB",
"200": "#96B3F8",
"300": "#729AF6",
"400": "#4F81F4",
"500": "#2C67F1",
"600": "#0E4DE0",
"700": "#0B3EB3",
"800": "#092E86",
"900": "#061F59"
};
const success = {
50: "#F0FDF4",
100: "#DCFCE7",
200: "#BBF7D0",
300: "#86EFAC",
400: "#4ADE80",
500: "#22C55E",
600: "#16A34A",
700: "#15803D",
800: "#166534",
900: "#14532D"
"50": "#F0FDF4",
"100": "#DCFCE7",
"200": "#BBF7D0",
"300": "#86EFAC",
"400": "#4ADE80",
"500": "#22C55E",
"600": "#16A34A",
"700": "#15803D",
"800": "#166534",
"900": "#14532D"
};
const warning = {
50: "#FEF1DC",
100: "#FBD696",
200: "#F9C873",
300: "#F8BA50",
400: "#F6AD2D",
500: "#F59E0B",
600: "#DF9009",
700: "#B27307",
800: "#9C6506",
900: "#593A04"
"50": "#FEF1DC",
"100": "#FBD696",
"200": "#F9C873",
"300": "#F8BA50",
"400": "#F6AD2D",
"500": "#F59E0B",
"600": "#DF9009",
"700": "#B27307",
"800": "#9C6506",
"900": "#593A04"
};
const error = {
50: "#FEF2F2",
100: "#FEE2E2",
200: "#FECACA",
300: "#FCA5A5",
400: "#F87171",
500: "#EF4444",
600: "#DC2626",
700: "#B91C1C",
800: "#991B1B",
900: "#7F1D1D"
"50": "#FEF2F2",
"100": "#FEE2E2",
"200": "#FECACA",
"300": "#FCA5A5",
"400": "#F87171",
"500": "#EF4444",
"600": "#DC2626",
"700": "#B91C1C",
"800": "#991B1B",
"900": "#7F1D1D"
};
const shades = {
0: "#FFFFFF",
100: "#000000"
"0": "#FFFFFF",
"100": "#000000"
};
const displayLarge = {
fontFamily: "Archivo, sans-serif",
desktop: {

@@ -533,2 +136,3 @@ weights: {

const displaySmall = {
fontFamily: "Archivo, sans-serif",
desktop: {

@@ -558,2 +162,3 @@ weights: {

const headingH1 = {
fontFamily: "Archivo, sans-serif",
desktop: {

@@ -583,2 +188,3 @@ weights: {

const headingH2 = {
fontFamily: "Archivo, sans-serif",
desktop: {

@@ -608,2 +214,3 @@ weights: {

const headingH3 = {
fontFamily: "Archivo, sans-serif",
desktop: {

@@ -633,2 +240,3 @@ weights: {

const headingH4 = {
fontFamily: "Archivo, sans-serif",
desktop: {

@@ -658,2 +266,3 @@ weights: {

const headingH5 = {
fontFamily: "Archivo, sans-serif",
desktop: {

@@ -683,2 +292,3 @@ weights: {

const headingH6 = {
fontFamily: "Archivo, sans-serif",
desktop: {

@@ -708,2 +318,3 @@ weights: {

const paragraphLarge = {
fontFamily: "Archivo, sans-serif",
fontSize: "18px",

@@ -718,2 +329,3 @@ lineHeight: "28px",

const paragraphMedium = {
fontFamily: "Archivo, sans-serif",
fontSize: "16px",

@@ -728,2 +340,3 @@ lineHeight: "24px",

const paragraphSmall = {
fontFamily: "Archivo, sans-serif",
fontSize: "14px",

@@ -738,2 +351,3 @@ lineHeight: "20px",

const paragraphXSmall = {
fontFamily: "Archivo, sans-serif",
fontSize: "12px",

@@ -748,19 +362,22 @@ lineHeight: "20px",

const overlineLarge = {
fontFamily: "Archivo, sans-serif",
fontSize: "14px",
lineHeight: "20px",
weights: {
normal: 600,
bold: 600,
bolder: 600
}
weight: 600,
textTransform: "uppercase"
};
const overlineSmall = {
const overlineMedium = {
fontFamily: "Archivo, sans-serif",
fontSize: "12px",
lineHeight: "20px",
weights: {
normal: 600,
bold: 600,
bolder: 600
}
weight: 600,
textTransform: "uppercase"
};
const overlineSmall = {
fontFamily: "Archivo, sans-serif",
fontSize: "11px",
lineHeight: "20px",
weight: 600,
textTransform: "uppercase"
};
const sunburst = {

@@ -796,22 +413,171 @@ background: "linear-gradient(98.41deg, #FF5F6D 0%, #FFC371 100%)"

};
const theme = {
name: "dark",
spacings: {
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"
const spacings = {
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"
};
const primaryVariant = {
primary: {
background: primary["500"],
borderColor: primary["500"],
borderWidth: 0,
contentColor: shades["100"]
},
secondary: {
background: primary["200"],
borderColor: primary["200"],
borderWidth: 0,
contentColor: shades["100"]
},
tertiary: {
background: "transparent",
borderColor: "transparent",
borderWidth: 0,
contentColor: primary["800"]
},
outlined: {
background: "transparent",
borderColor: neutral["200"],
borderWidth: "1px",
contentColor: neutral["700"]
}
};
const destructiveVariant = {
primary: {
background: error["500"],
borderColor: error["500"],
borderWidth: 0,
contentColor: shades["0"]
},
secondary: {
background: error["50"],
borderColor: error["50"],
borderWidth: 0,
contentColor: error["600"]
},
tertiary: {
background: "transparent",
borderColor: "transparent",
borderWidth: 0,
contentColor: error["600"]
},
outlined: {
background: "transparent",
borderColor: error["300"],
borderWidth: "1px",
contentColor: error["500"]
}
};
const disabledVariant = {
primary: {
background: neutral["200"],
borderColor: neutral["200"],
borderWidth: 0,
contentColor: neutral["400"]
},
secondary: {
background: neutral["200"],
borderColor: neutral["200"],
borderWidth: 0,
contentColor: neutral["400"]
},
tertiary: {
background: "transparent",
borderColor: "transparent",
borderWidth: 0,
contentColor: neutral["300"]
},
outlined: {
background: "transparent",
borderColor: neutral["400"],
borderWidth: "1px",
contentColor: neutral["300"]
}
};
const buttons = {
fontFamily: "Archivo, sans-serif",
fontWeight: 500,
regular: {
xSmall: {
borderRadius: "2px",
fontSize: "14px",
iconPadding: spacings.xxsm,
horizontalPadding: "10px",
verticalPadding: "6px"
},
small: {
borderRadius: "2px",
fontSize: "14px",
iconPadding: spacings.xxsm,
horizontalPadding: spacings.md,
verticalPadding: spacings.xsm
},
medium: {
borderRadius: "2px",
fontSize: "16px",
iconPadding: spacings.xxsm,
horizontalPadding: spacings.big,
verticalPadding: spacings.xsm
},
large: {
borderRadius: "2px",
fontSize: "18px",
iconPadding: spacings.xxsm,
horizontalPadding: spacings.xbig,
verticalPadding: "14px"
},
primary: primaryVariant,
destructive: destructiveVariant,
disabled: disabledVariant
},
icon: {
xSmall: {
borderRadius: "2px",
size: "14px",
horizontalPadding: "11px",
verticalPadding: "10px"
},
small: {
borderRadius: "2px",
size: "14px",
horizontalPadding: "13px",
verticalPadding: "14px"
},
medium: {
borderRadius: "2px",
size: spacings.md,
horizontalPadding: "14px",
verticalPadding: spacings.md
},
large: {
borderRadius: "2px",
size: spacings.md,
horizontalPadding: spacings.md,
verticalPadding: "22px"
},
primary: primaryVariant,
destructive: destructiveVariant,
disabled: disabledVariant
}
};
const theme$1 = {
name: "light",
breakpoints: {
mobile: "1023px",
desktop: "1024px"
},
spacings,
colors: {

@@ -840,2 +606,3 @@ neutral,

overlineLarge,
overlineMedium,
overlineSmall

@@ -875,4 +642,843 @@ },

teaLeaves
},
buttons
};
const theme = __spreadProps(__spreadValues({}, theme$1), {
name: "dark"
});
var styledBreakpoints$2 = {};
var styledBreakpoints$1 = {};
const createInvariantWithPrefix$3 = (errorPrefix = "[prefix]: ") => (condition, message = "Invariant failed") => {
if (!condition) {
throw new Error(errorPrefix + message);
}
};
export { theme as darkTheme, theme$1 as lightTheme };
const memoize$3 = (fn, map = /* @__PURE__ */ new Map()) => {
return (...args) => {
const key = JSON.stringify(args);
if (!map.has(key)) {
map.set(key, fn(...args));
}
return map.get(key);
};
};
const get$2 = (o, path, defaultValue) => {
const [head, ...tail] = typeof path === "string" ? path.replace(/\[(\d+)]/g, ".$1").split(".") : path;
if (!o[head])
return defaultValue;
return !tail.length ? o[head] : get$2(o[head], tail, defaultValue);
};
var library$1 = {
createInvariantWithPrefix: createInvariantWithPrefix$3,
memoize: memoize$3,
get: get$2
};
const { get: get$1, memoize: memoize$2, createInvariantWithPrefix: createInvariantWithPrefix$2 } = library$1;
var library = {
get: get$1,
memoize: memoize$2,
createInvariantWithPrefix: createInvariantWithPrefix$2
};
var core = {};
var breakpoints = {};
const { createInvariantWithPrefix: createInvariantWithPrefix$1, memoize: memoize$1 } = library;
const DEFAULT_BREAKPOINTS = {
xs: "0px",
sm: "576px",
md: "768px",
lg: "992px",
xl: "1200px",
xxl: "1400px"
};
const ERROR_PREFIX = "[breakpoints]: ";
const defaultOptions$1 = {
breakpoints: DEFAULT_BREAKPOINTS,
errorPrefix: ERROR_PREFIX
};
breakpoints.DEFAULT_BREAKPOINTS = DEFAULT_BREAKPOINTS;
breakpoints.ERROR_PREFIX = ERROR_PREFIX;
breakpoints.createBreakpoints = memoize$1(({ breakpoints: breakpoints2, errorPrefix } = defaultOptions$1) => {
const names = Object.keys(breakpoints2);
const validation = createValidation({
names,
breakpoints: breakpoints2,
errorPrefix
});
const getValueByName = memoize$1((name) => {
validation.checkIsValidName(name);
validation.checkIsFirstName(name);
return breakpoints2[name];
});
const getNextName = (name) => {
const nextIndex = names.indexOf(name) + 1;
return names[nextIndex];
};
const getNextValueByName = (name) => {
validation.checkIsValidName(name);
validation.checkIsLastName(name);
return breakpoints2[getNextName(name)];
};
const calcMaxWidth = memoize$1((name) => {
const nextValue = getNextValueByName(name);
return `${parseFloat(nextValue) - 0.02}px`;
});
const between = (min, max) => ({
min: getValueByName(min),
max: calcMaxWidth(max)
});
return {
up: getValueByName,
down: calcMaxWidth,
between,
only: (name) => between(name, name)
};
});
function createValidation({ names, breakpoints: breakpoints2, errorPrefix }) {
const invariant = createInvariantWithPrefix$1(errorPrefix);
return {
checkIsValidName: (name) => {
invariant(breakpoints2[name], `breakpoint \`${name}\` not found in ${names.join(", ")}.`);
},
checkIsFirstName: (name) => {
const value = breakpoints2[name];
const isNotZero = parseFloat(value) !== 0;
invariant(isNotZero, `\`${name}: ${value}\` cannot be assigned as minimum breakpoint.`);
},
checkIsLastName: (name) => {
const currentIndex = names.indexOf(name);
const nextIndex = currentIndex + 1;
const isNotLast = names.length !== nextIndex;
const validName = names[names.length - 2];
invariant(isNotLast, `\`${name}\` doesn't have a maximum width. Use \`${validName}\`. See https://github.com/mg901/styled-breakpoints/issues/4 .`);
}
};
}
const { createBreakpoints: createBreakpoints$1 } = breakpoints;
core.createBreakpoints = createBreakpoints$1;
const { get, createInvariantWithPrefix, memoize } = library;
const { createBreakpoints } = core;
const defaultOptions = {
errorPrefix: "[styled-breakpoints]: ",
pathToMediaQueries: "breakpoints",
defaultBreakpoints: {
xs: "0px",
sm: "576px",
md: "768px",
lg: "992px",
xl: "1200px",
xxl: "1400px"
}
};
styledBreakpoints$1.createStyledBreakpoints = (options = defaultOptions) => {
const invariant = createInvariantWithPrefix(options.errorPrefix);
const checkAllValuesHasPixels = memoize((breakpoints2) => {
const invalidBreakpoints = Object.entries(breakpoints2).reduce((acc, [key, value]) => {
const hasPx = /^\d+px$/;
if (!hasPx.test(value)) {
acc += `${key}: ${value}, `;
}
return acc;
}, "");
invariant(invalidBreakpoints.length === 0, `Check your theme. \`${invalidBreakpoints.trimEnd()}\` are invalid breakpoints. Use only pixels.`);
});
const getMediaQueriesFromTheme = ({ theme: theme2 = {} }) => {
const memoizedGet = memoize(get);
const memoizedMediaQueries = memoizedGet(theme2, options.pathToMediaQueries, options.defaultBreakpoints);
checkAllValuesHasPixels(memoizedMediaQueries);
return memoizedMediaQueries;
};
const withBreakpoints = (fn) => (props) => {
const mediaQueriesFromTheme = getMediaQueriesFromTheme(props);
const breakpoints2 = createBreakpoints({
breakpoints: mediaQueriesFromTheme,
errorPrefix: options.errorPrefix
});
return fn(breakpoints2);
};
const checkIsValidOrientation = (x) => {
const validOrientations = x === "portrait" || x === "landscape";
invariant(validOrientations, `\`${x}\` is invalid orientation. Use \`landscape\` or \`portrait\`.`);
};
const withOrientation = (mediaQuery, orientation) => {
checkIsValidOrientation(orientation);
return `${mediaQuery} and (orientation: ${orientation})`;
};
const withOrientationOrNot = memoize((orientation, result) => orientation ? withOrientation(result, orientation) : result);
const withMinAndMaxMedia = ({ min, max }) => `@media (min-width: ${min}) and (max-width: ${max})`;
return {
up: (name, orientation) => withBreakpoints(({ up }) => withOrientationOrNot(orientation, `@media (min-width: ${up(name)})`)),
down: (name, orientation) => withBreakpoints(({ down }) => withOrientationOrNot(orientation, `@media (max-width: ${down(name)})`)),
between: (min, max, orientation) => withBreakpoints(({ between }) => withOrientationOrNot(orientation, withMinAndMaxMedia(between(min, max)))),
only: (name, orientation) => withBreakpoints(({ only }) => withOrientationOrNot(orientation, withMinAndMaxMedia(only(name))))
};
};
const { createStyledBreakpoints: createStyledBreakpoints$1 } = styledBreakpoints$1;
styledBreakpoints$2.createStyledBreakpoints = createStyledBreakpoints$1;
const { createStyledBreakpoints } = styledBreakpoints$2;
var styledBreakpoints = createStyledBreakpoints();
const decorationsFromProps = ({
underlined,
strikedThrough
}) => {
const decorations = [];
if (underlined)
decorations.push("underline");
if (strikedThrough)
decorations.push("line-through");
return decorations.join(" ");
};
const DisplayLarge = styled.h1`
font-family: ${({
theme: theme2
}) => theme2.typography.displayLarge.fontFamily};
color: ${({
theme: theme2
}) => theme2.colors.neutral["900"]};
font-size: ${({
theme: theme2
}) => theme2.typography.displayLarge.mobile.fontSize};
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};
${styledBreakpoints.up("desktop")} {
font-size: ${({
theme: theme2
}) => theme2.typography.displayLarge.desktop.fontSize};
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`
font-family: ${({
theme: theme2
}) => theme2.typography.displaySmall.fontFamily};
color: ${({
theme: theme2
}) => theme2.colors.neutral["900"]};
font-size: ${({
theme: theme2
}) => theme2.typography.displaySmall.mobile.fontSize};
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};
${styledBreakpoints.up("desktop")} {
font-size: ${({
theme: theme2
}) => theme2.typography.displaySmall.desktop.fontSize};
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`
font-family: ${({
theme: theme2
}) => theme2.typography.headingH1.fontFamily};
color: ${({
theme: theme2
}) => theme2.colors.neutral["900"]};
font-size: ${({
theme: theme2
}) => theme2.typography.headingH1.mobile.fontSize};
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};
${styledBreakpoints.up("desktop")} {
font-size: ${({
theme: theme2
}) => theme2.typography.headingH1.desktop.fontSize};
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`
font-family: ${({
theme: theme2
}) => theme2.typography.headingH2.fontFamily};
color: ${({
theme: theme2
}) => theme2.colors.neutral["900"]};
font-size: ${({
theme: theme2
}) => theme2.typography.headingH2.mobile.fontSize};
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};
${styledBreakpoints.up("desktop")} {
font-size: ${({
theme: theme2
}) => theme2.typography.headingH2.desktop.fontSize};
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`
font-family: ${({
theme: theme2
}) => theme2.typography.headingH3.fontFamily};
color: ${({
theme: theme2
}) => theme2.colors.neutral["900"]};
font-size: ${({
theme: theme2
}) => theme2.typography.headingH3.mobile.fontSize};
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};
${styledBreakpoints.up("desktop")} {
font-size: ${({
theme: theme2
}) => theme2.typography.headingH3.desktop.fontSize};
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`
font-family: ${({
theme: theme2
}) => theme2.typography.headingH4.fontFamily};
color: ${({
theme: theme2
}) => theme2.colors.neutral["900"]};
font-size: ${({
theme: theme2
}) => theme2.typography.headingH4.mobile.fontSize};
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};
${styledBreakpoints.up("desktop")} {
font-size: ${({
theme: theme2
}) => theme2.typography.headingH4.desktop.fontSize};
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`
font-family: ${({
theme: theme2
}) => theme2.typography.headingH5.fontFamily};
color: ${({
theme: theme2
}) => theme2.colors.neutral["900"]};
font-size: ${({
theme: theme2
}) => theme2.typography.headingH5.mobile.fontSize};
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};
${styledBreakpoints.up("desktop")} {
font-size: ${({
theme: theme2
}) => theme2.typography.headingH5.desktop.fontSize};
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`
font-family: ${({
theme: theme2
}) => theme2.typography.headingH6.fontFamily};
color: ${({
theme: theme2
}) => theme2.colors.neutral["900"]};
font-size: ${({
theme: theme2
}) => theme2.typography.headingH6.mobile.fontSize};
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};
${styledBreakpoints.up("desktop")} {
font-size: ${({
theme: theme2
}) => theme2.typography.headingH6.desktop.fontSize};
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`
font-family: ${({
theme: theme2
}) => theme2.typography.paragraphLarge.fontFamily};
color: ${({
theme: theme2
}) => theme2.colors.neutral["900"]};
font-size: ${({
theme: theme2
}) => theme2.typography.paragraphLarge.fontSize};
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`
font-family: ${({
theme: theme2
}) => theme2.typography.paragraphMedium.fontFamily};
color: ${({
theme: theme2
}) => theme2.colors.neutral["900"]};
font-size: ${({
theme: theme2
}) => theme2.typography.paragraphMedium.fontSize};
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 ParagraphSmall = styled.p`
font-family: ${({
theme: theme2
}) => theme2.typography.paragraphSmall.fontFamily};
color: ${({
theme: theme2
}) => theme2.colors.neutral["900"]};
font-size: ${({
theme: theme2
}) => theme2.typography.paragraphSmall.fontSize};
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`
font-family: ${({
theme: theme2
}) => theme2.typography.paragraphXSmall.fontFamily};
color: ${({
theme: theme2
}) => theme2.colors.neutral["900"]};
font-size: ${({
theme: theme2
}) => theme2.typography.paragraphXSmall.fontSize};
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`
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;
text-transform: uppercase;
`;
const OverlineMedium = styled.p`
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;
text-transform: uppercase;
`;
const OverlineSmall = styled.p`
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;
text-transform: uppercase;
`;
const baseButtonCSS = css`
display: flex;
flex-flow: row nowrap;
align-items: center;
border-style: solid;
font-family: ${({
theme: theme2
}) => theme2.buttons.fontFamily};
&,
& * {
font-weight: ${({
theme: theme2
}) => theme2.buttons.fontWeight};
}
& path {
fill: currentColor;
fill-rule: evenodd;
}
`;
const baseIconCSS = css`
display: flex;
flex-flow: row nowrap;
align-items: center;
`;
const buttonSizeCSS = css`
${({
buttonSize,
theme: theme2
}) => css`
padding: ${theme2.buttons.regular[buttonSize].verticalPadding}
${theme2.buttons.regular[buttonSize].horizontalPadding};
border-radius: ${theme2.buttons.regular[buttonSize].borderRadius};
font-size: ${theme2.buttons.regular[buttonSize].fontSize};
`}
`;
const buttonDisabledCSS = css`
${({
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};
`}
`;
const buttonVariantCSS = css`
${({
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};
`}
`;
const RegularButton = styled.button`
${baseButtonCSS}
${buttonSizeCSS}
${({
disabled
}) => disabled ? buttonDisabledCSS : buttonVariantCSS}
`;
const startIconMargin = css`
margin-right: ${({
theme: theme2,
buttonSize
}) => theme2.buttons.regular[buttonSize].iconPadding};
`;
const StartIcon = styled.div`
${baseIconCSS}
${startIconMargin}
`;
const endIconMargin = css`
margin-left: ${({
theme: theme2,
buttonSize
}) => theme2.buttons.regular[buttonSize].iconPadding};
`;
const EndIcon = styled.div`
${baseIconCSS}
${endIconMargin}
`;
const iconButtonSizeCSS = css`
${({
buttonSize,
theme: theme2
}) => css`
padding: ${theme2.buttons.icon[buttonSize].verticalPadding}
${theme2.buttons.icon[buttonSize].horizontalPadding};
border-radius: ${theme2.buttons.icon[buttonSize].borderRadius};
font-size: ${theme2.buttons.icon[buttonSize].fontSize};
`}
`;
const iconButtonIconSizeCSS = css`
width: ${({
theme: theme2,
buttonSize
}) => theme2.buttons.icon[buttonSize].buttonSize};
height: ${({
theme: theme2,
buttonSize
}) => theme2.buttons.icon[buttonSize].buttonSize};
`;
const IconButtonIcon = styled.div`
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
${iconButtonIconSizeCSS}
`;
const IconButton = styled.button`
${baseButtonCSS}
${iconButtonSizeCSS}
${({
disabled
}) => disabled ? buttonDisabledCSS : buttonVariantCSS}
`;
var jsxs$1;
var jsx$1;
var r = require$$0, _ = 0;
function e(e2, o, n, t, l) {
var u, f, i = {};
for (f in o)
f == "ref" ? u = o[f] : i[f] = o[f];
var p = { type: e2, props: i, key: n, ref: u, __k: null, __: null, __b: 0, __e: null, __d: void 0, __c: null, __h: null, constructor: void 0, __v: --_, __source: t, __self: l };
if (typeof e2 == "function" && (u = e2.defaultProps))
for (f in u)
i[f] === void 0 && (i[f] = u[f]);
return r.options.vnode && r.options.vnode(p), p;
}
jsx$1 = e, jsxs$1 = e;
const jsx = jsx$1;
const jsxs = jsxs$1;
const Button = (_a) => {
var _b = _a, {
buttonSize = "medium",
variant = "primary",
buttonStyle = "primary",
iconOnly = false,
startIcon = null,
endIcon = null,
children
} = _b, rest = __objRest(_b, [
"buttonSize",
"variant",
"buttonStyle",
"iconOnly",
"startIcon",
"endIcon",
"children"
]);
if (iconOnly)
return jsx(IconButton, __spreadProps(__spreadValues({}, rest), {
variant,
buttonStyle,
buttonSize,
children: jsx(IconButtonIcon, {
buttonSize,
children: startIcon || endIcon
})
}));
return jsxs(RegularButton, __spreadProps(__spreadValues({}, rest), {
variant,
buttonStyle,
buttonSize,
children: [startIcon && jsx(StartIcon, {
buttonSize,
children: startIcon
}), children, endIcon && jsx(EndIcon, {
buttonSize,
children: endIcon
})]
}));
};
export { Button, DisplayLarge, DisplaySmall, HeadingH1, HeadingH2, HeadingH3, HeadingH4, HeadingH5, HeadingH6, OverlineLarge, OverlineMedium, OverlineSmall, ParagraphLarge, ParagraphMedium, ParagraphSmall, ParagraphXSmall, theme as darkTheme, theme$1 as lightTheme };

279

dist/logrock-pebbles.umd.js

@@ -1,1 +0,278 @@

(function(e,a){typeof exports=="object"&&typeof module!="undefined"?a(exports):typeof define=="function"&&define.amd?define(["exports"],a):(e=typeof globalThis!="undefined"?globalThis:e||self,a(e["@logrock/pebbles"]={}))})(this,function(e){"use strict";const n={name:"light",spacings:{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"},colors:{neutral:{50:"#F9FAFB",100:"#F3F4F6",200:"#E5E7EB",300:"#D1D5DB",400:"#9CA3AF",500:"#6B7280",600:"#4B5563",700:"#374151",800:"#1F2937",900:"#111827"},primary:{50:"#FDF5E1",100:"#F9E0A5",200:"#F7D586",300:"#F5CB68",400:"#F1B72C",500:"#F1B72C",600:"#E6A50F",700:"#C08A0C",800:"#996E0A",900:"#735307"},secondary:{50:"#DCE6FD",100:"#B9CCFB",200:"#96B3F8",300:"#729AF6",400:"#4F81F4",500:"#2C67F1",600:"#0E4DE0",700:"#0B3EB3",800:"#092E86",900:"#061F59"},error:{50:"#FEF2F2",100:"#FEE2E2",200:"#FECACA",300:"#FCA5A5",400:"#F87171",500:"#EF4444",600:"#DC2626",700:"#B91C1C",800:"#991B1B",900:"#7F1D1D"},success:{50:"#F0FDF4",100:"#DCFCE7",200:"#BBF7D0",300:"#86EFAC",400:"#4ADE80",500:"#22C55E",600:"#16A34A",700:"#15803D",800:"#166534",900:"#14532D"},warning:{50:"#FEF1DC",100:"#FBD696",200:"#F9C873",300:"#F8BA50",400:"#F6AD2D",500:"#F59E0B",600:"#DF9009",700:"#B27307",800:"#9C6506",900:"#593A04"},shades:{0:"#FFFFFF",100:"#000000"}},typography:{displayLarge:{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"}},displaySmall:{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"}},headingH1:{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"}},headingH2:{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"}},headingH3:{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"}},headingH4:{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"}},headingH5:{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"}},headingH6:{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"}},paragraphLarge:{fontSize:"18px",lineHeight:"28px",weights:{normal:400,bold:500,bolder:600}},paragraphMedium:{fontSize:"16px",lineHeight:"24px",weights:{normal:400,bold:500,bolder:600}},paragraphSmall:{fontSize:"14px",lineHeight:"20px",weights:{normal:400,bold:500,bolder:600}},paragraphXSmall:{fontSize:"12px",lineHeight:"20px",weights:{normal:400,bold:500,bolder:600}},overlineLarge:{fontSize:"14px",lineHeight:"20px",weights:{normal:600,bold:600,bolder:600}},overlineSmall:{fontSize:"12px",lineHeight:"20px",weights:{normal:600,bold:600,bolder:600}}},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:{background:"linear-gradient(98.41deg, #FF5F6D 0%, #FFC371 100%)"},blueMoon:{background:"linear-gradient(98.41deg, #1D2B64 0%, #F8CDDA 100%)"},blueberryWine:{background:"linear-gradient(98.41deg, #4568DC 0%, #B06AB3 100%)"},cherryCola:{background:"linear-gradient(98.41deg, #EECDA3 0%, #EF629F 100%)"},coldSky:{background:"linear-gradient(98.41deg, #4CA1AF 0%, #C4E0E5 100%)"},darkWineSea:{background:"linear-gradient(98.41deg, #16BFFD 0%, #CB3066 100%)"},morningSakura:{background:"linear-gradient(98.41deg, #FF6E7F 0%, #BFE9FF 100%)"},oliveGarden:{background:"linear-gradient(98.41deg, #F1F2B5 0%, #135058 100%, #135058 100%)"},synthwave:{background:"linear-gradient(98.41deg, #FC00FF 0%, #00B6DE 100%)"},teaLeaves:{background:"linear-gradient(98.41deg, #02AAB0 0%, #00CDAC 100%)"}}},r={name:"dark",spacings:{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"},colors:{neutral:{50:"#F9FAFB",100:"#F3F4F6",200:"#E5E7EB",300:"#D1D5DB",400:"#9CA3AF",500:"#6B7280",600:"#4B5563",700:"#374151",800:"#1F2937",900:"#111827"},primary:{50:"#FDF5E1",100:"#F9E0A5",200:"#F7D586",300:"#F5CB68",400:"#F1B72C",500:"#F1B72C",600:"#E6A50F",700:"#C08A0C",800:"#996E0A",900:"#735307"},secondary:{50:"#DCE6FD",100:"#B9CCFB",200:"#96B3F8",300:"#729AF6",400:"#4F81F4",500:"#2C67F1",600:"#0E4DE0",700:"#0B3EB3",800:"#092E86",900:"#061F59"},error:{50:"#FEF2F2",100:"#FEE2E2",200:"#FECACA",300:"#FCA5A5",400:"#F87171",500:"#EF4444",600:"#DC2626",700:"#B91C1C",800:"#991B1B",900:"#7F1D1D"},success:{50:"#F0FDF4",100:"#DCFCE7",200:"#BBF7D0",300:"#86EFAC",400:"#4ADE80",500:"#22C55E",600:"#16A34A",700:"#15803D",800:"#166534",900:"#14532D"},warning:{50:"#FEF1DC",100:"#FBD696",200:"#F9C873",300:"#F8BA50",400:"#F6AD2D",500:"#F59E0B",600:"#DF9009",700:"#B27307",800:"#9C6506",900:"#593A04"},shades:{0:"#FFFFFF",100:"#000000"}},typography:{displayLarge:{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"}},displaySmall:{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"}},headingH1:{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"}},headingH2:{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"}},headingH3:{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"}},headingH4:{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"}},headingH5:{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"}},headingH6:{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"}},paragraphLarge:{fontSize:"18px",lineHeight:"28px",weights:{normal:400,bold:500,bolder:600}},paragraphMedium:{fontSize:"16px",lineHeight:"24px",weights:{normal:400,bold:500,bolder:600}},paragraphSmall:{fontSize:"14px",lineHeight:"20px",weights:{normal:400,bold:500,bolder:600}},paragraphXSmall:{fontSize:"12px",lineHeight:"20px",weights:{normal:400,bold:500,bolder:600}},overlineLarge:{fontSize:"14px",lineHeight:"20px",weights:{normal:600,bold:600,bolder:600}},overlineSmall:{fontSize:"12px",lineHeight:"20px",weights:{normal:600,bold:600,bolder:600}}},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:{background:"linear-gradient(98.41deg, #FF5F6D 0%, #FFC371 100%)"},blueMoon:{background:"linear-gradient(98.41deg, #1D2B64 0%, #F8CDDA 100%)"},blueberryWine:{background:"linear-gradient(98.41deg, #4568DC 0%, #B06AB3 100%)"},cherryCola:{background:"linear-gradient(98.41deg, #EECDA3 0%, #EF629F 100%)"},coldSky:{background:"linear-gradient(98.41deg, #4CA1AF 0%, #C4E0E5 100%)"},darkWineSea:{background:"linear-gradient(98.41deg, #16BFFD 0%, #CB3066 100%)"},morningSakura:{background:"linear-gradient(98.41deg, #FF6E7F 0%, #BFE9FF 100%)"},oliveGarden:{background:"linear-gradient(98.41deg, #F1F2B5 0%, #135058 100%, #135058 100%)"},synthwave:{background:"linear-gradient(98.41deg, #FC00FF 0%, #00B6DE 100%)"},teaLeaves:{background:"linear-gradient(98.41deg, #02AAB0 0%, #00CDAC 100%)"}}};e.darkTheme=r,e.lightTheme=n,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"});
var Ft=Object.defineProperty,St=Object.defineProperties;var wt=Object.getOwnPropertyDescriptors;var v=Object.getOwnPropertySymbols;var Y=Object.prototype.hasOwnProperty,ee=Object.prototype.propertyIsEnumerable;var Z=(o,a,c)=>a in o?Ft(o,a,{enumerable:!0,configurable:!0,writable:!0,value:c}):o[a]=c,C=(o,a)=>{for(var c in a||(a={}))Y.call(a,c)&&Z(o,c,a[c]);if(v)for(var c of v(a))ee.call(a,c)&&Z(o,c,a[c]);return o},B=(o,a)=>St(o,wt(a));var te=(o,a)=>{var c={};for(var f in o)Y.call(o,f)&&a.indexOf(f)<0&&(c[f]=o[f]);if(o!=null&&v)for(var f of v(o))a.indexOf(f)<0&&ee.call(o,f)&&(c[f]=o[f]);return c};(function(o,a){typeof exports=="object"&&typeof module!="undefined"?a(exports,require("styled-components"),require("preact")):typeof define=="function"&&define.amd?define(["exports","styled-components","preact"],a):(o=typeof globalThis!="undefined"?globalThis:o||self,a(o["@logrock/pebbles"]={},o.styled,o.Preact))})(this,function(o,a,c){"use strict";function f(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var g=f(a),oe=f(c);const x={"50":"#F9FAFB","100":"#F3F4F6","200":"#E5E7EB","300":"#D1D5DB","400":"#9CA3AF","500":"#6B7280","600":"#4B5563","700":"#374151","800":"#1F2937","900":"#111827"},k={"50":"#FDF5E1","100":"#F9E0A5","200":"#F7D586","300":"#F5CB68","400":"#F1B72C","500":"#F1B72C","600":"#E6A50F","700":"#C08A0C","800":"#996E0A","900":"#735307"},ie={"50":"#DCE6FD","100":"#B9CCFB","200":"#96B3F8","300":"#729AF6","400":"#4F81F4","500":"#2C67F1","600":"#0E4DE0","700":"#0B3EB3","800":"#092E86","900":"#061F59"},ae={"50":"#F0FDF4","100":"#DCFCE7","200":"#BBF7D0","300":"#86EFAC","400":"#4ADE80","500":"#22C55E","600":"#16A34A","700":"#15803D","800":"#166534","900":"#14532D"},re={"50":"#FEF1DC","100":"#FBD696","200":"#F9C873","300":"#F8BA50","400":"#F6AD2D","500":"#F59E0B","600":"#DF9009","700":"#B27307","800":"#9C6506","900":"#593A04"},b={"50":"#FEF2F2","100":"#FEE2E2","200":"#FECACA","300":"#FCA5A5","400":"#F87171","500":"#EF4444","600":"#DC2626","700":"#B91C1C","800":"#991B1B","900":"#7F1D1D"},F={"0":"#FFFFFF","100":"#000000"},ne={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"}},le={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"}},pe={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"}},ge={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"}},se={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"}},de={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"}},he={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"}},ce={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"}},ye={fontFamily:"Archivo, sans-serif",fontSize:"18px",lineHeight:"28px",weights:{normal:400,bold:500,bolder:600}},me={fontFamily:"Archivo, sans-serif",fontSize:"16px",lineHeight:"24px",weights:{normal:400,bold:500,bolder:600}},fe={fontFamily:"Archivo, sans-serif",fontSize:"14px",lineHeight:"20px",weights:{normal:400,bold:500,bolder:600}},xe={fontFamily:"Archivo, sans-serif",fontSize:"12px",lineHeight:"20px",weights:{normal:400,bold:500,bolder:600}},ue={fontFamily:"Archivo, sans-serif",fontSize:"14px",lineHeight:"20px",weight:600,textTransform:"uppercase"},be={fontFamily:"Archivo, sans-serif",fontSize:"12px",lineHeight:"20px",weight:600,textTransform:"uppercase"},$e={fontFamily:"Archivo, sans-serif",fontSize:"11px",lineHeight:"20px",weight:600,textTransform:"uppercase"},ke={background:"linear-gradient(98.41deg, #FF5F6D 0%, #FFC371 100%)"},He={background:"linear-gradient(98.41deg, #16BFFD 0%, #CB3066 100%)"},Fe={background:"linear-gradient(98.41deg, #EECDA3 0%, #EF629F 100%)"},Se={background:"linear-gradient(98.41deg, #4CA1AF 0%, #C4E0E5 100%)"},we={background:"linear-gradient(98.41deg, #F1F2B5 0%, #135058 100%, #135058 100%)"},ze={background:"linear-gradient(98.41deg, #FF6E7F 0%, #BFE9FF 100%)"},ve={background:"linear-gradient(98.41deg, #1D2B64 0%, #F8CDDA 100%)"},Ce={background:"linear-gradient(98.41deg, #FC00FF 0%, #00B6DE 100%)"},Be={background:"linear-gradient(98.41deg, #02AAB0 0%, #00CDAC 100%)"},Pe={background:"linear-gradient(98.41deg, #4568DC 0%, #B06AB3 100%)"},m={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"},E={primary:{background:k["500"],borderColor:k["500"],borderWidth:0,contentColor:F["100"]},secondary:{background:k["200"],borderColor:k["200"],borderWidth:0,contentColor:F["100"]},tertiary:{background:"transparent",borderColor:"transparent",borderWidth:0,contentColor:k["800"]},outlined:{background:"transparent",borderColor:x["200"],borderWidth:"1px",contentColor:x["700"]}},L={primary:{background:b["500"],borderColor:b["500"],borderWidth:0,contentColor:F["0"]},secondary:{background:b["50"],borderColor:b["50"],borderWidth:0,contentColor:b["600"]},tertiary:{background:"transparent",borderColor:"transparent",borderWidth:0,contentColor:b["600"]},outlined:{background:"transparent",borderColor:b["300"],borderWidth:"1px",contentColor:b["500"]}},D={primary:{background:x["200"],borderColor:x["200"],borderWidth:0,contentColor:x["400"]},secondary:{background:x["200"],borderColor:x["200"],borderWidth:0,contentColor:x["400"]},tertiary:{background:"transparent",borderColor:"transparent",borderWidth:0,contentColor:x["300"]},outlined:{background:"transparent",borderColor:x["400"],borderWidth:"1px",contentColor:x["300"]}},Ae={fontFamily:"Archivo, sans-serif",fontWeight:500,regular:{xSmall:{borderRadius:"2px",fontSize:"14px",iconPadding:m.xxsm,horizontalPadding:"10px",verticalPadding:"6px"},small:{borderRadius:"2px",fontSize:"14px",iconPadding:m.xxsm,horizontalPadding:m.md,verticalPadding:m.xsm},medium:{borderRadius:"2px",fontSize:"16px",iconPadding:m.xxsm,horizontalPadding:m.big,verticalPadding:m.xsm},large:{borderRadius:"2px",fontSize:"18px",iconPadding:m.xxsm,horizontalPadding:m.xbig,verticalPadding:"14px"},primary:E,destructive:L,disabled:D},icon:{xSmall:{borderRadius:"2px",size:"14px",horizontalPadding:"11px",verticalPadding:"10px"},small:{borderRadius:"2px",size:"14px",horizontalPadding:"13px",verticalPadding:"14px"},medium:{borderRadius:"2px",size:m.md,horizontalPadding:"14px",verticalPadding:m.md},large:{borderRadius:"2px",size:m.md,horizontalPadding:m.md,verticalPadding:"22px"},primary:E,destructive:L,disabled:D}},_={name:"light",breakpoints:{mobile:"1023px",desktop:"1024px"},spacings:m,colors:{neutral:x,primary:k,secondary:ie,error:b,success:ae,warning:re,shades:F},typography:{displayLarge:ne,displaySmall:le,headingH1:pe,headingH2:ge,headingH3:se,headingH4:de,headingH5:he,headingH6:ce,paragraphLarge:ye,paragraphMedium:me,paragraphSmall:fe,paragraphXSmall:xe,overlineLarge:ue,overlineMedium:be,overlineSmall:$e},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:ke,blueMoon:ve,blueberryWine:Pe,cherryCola:Fe,coldSky:Se,darkWineSea:He,morningSakura:ze,oliveGarden:we,synthwave:Ce,teaLeaves:Be},buttons:Ae},Ee=B(C({},_),{name:"dark"});var I={},M={};const Le=(e="[prefix]: ")=>(t,r="Invariant failed")=>{if(!t)throw new Error(e+r)},De=(e,t=new Map)=>(...r)=>{const p=JSON.stringify(r);return t.has(p)||t.set(p,e(...r)),t.get(p)},W=(e,t,r)=>{const[p,...l]=typeof t=="string"?t.replace(/\[(\d+)]/g,".$1").split("."):t;return e[p]?l.length?W(e[p],l,r):e[p]:r};var _e={createInvariantWithPrefix:Le,memoize:De,get:W};const{get:Ie,memoize:Me,createInvariantWithPrefix:We}=_e;var O={get:Ie,memoize:Me,createInvariantWithPrefix:We},R={},S={};const{createInvariantWithPrefix:Oe,memoize:P}=O,N={xs:"0px",sm:"576px",md:"768px",lg:"992px",xl:"1200px",xxl:"1400px"},T="[breakpoints]: ",Re={breakpoints:N,errorPrefix:T};S.DEFAULT_BREAKPOINTS=N,S.ERROR_PREFIX=T,S.createBreakpoints=P(({breakpoints:e,errorPrefix:t}=Re)=>{const r=Object.keys(e),p=Ne({names:r,breakpoints:e,errorPrefix:t}),l=P(i=>(p.checkIsValidName(i),p.checkIsFirstName(i),e[i])),d=i=>{const n=r.indexOf(i)+1;return r[n]},s=i=>(p.checkIsValidName(i),p.checkIsLastName(i),e[d(i)]),h=P(i=>{const n=s(i);return`${parseFloat(n)-.02}px`}),u=(i,n)=>({min:l(i),max:h(n)});return{up:l,down:h,between:u,only:i=>u(i,i)}});function Ne({names:e,breakpoints:t,errorPrefix:r}){const p=Oe(r);return{checkIsValidName:l=>{p(t[l],`breakpoint \`${l}\` not found in ${e.join(", ")}.`)},checkIsFirstName:l=>{const d=t[l],s=parseFloat(d)!==0;p(s,`\`${l}: ${d}\` cannot be assigned as minimum breakpoint.`)},checkIsLastName:l=>{const s=e.indexOf(l)+1,h=e.length!==s,u=e[e.length-2];p(h,`\`${l}\` doesn't have a maximum width. Use \`${u}\`. See https://github.com/mg901/styled-breakpoints/issues/4 .`)}}}const{createBreakpoints:Te}=S;R.createBreakpoints=Te;const{get:Xe,createInvariantWithPrefix:je,memoize:A}=O,{createBreakpoints:Ve}=R,Qe={errorPrefix:"[styled-breakpoints]: ",pathToMediaQueries:"breakpoints",defaultBreakpoints:{xs:"0px",sm:"576px",md:"768px",lg:"992px",xl:"1200px",xxl:"1400px"}};M.createStyledBreakpoints=(e=Qe)=>{const t=je(e.errorPrefix),r=A(i=>{const n=Object.entries(i).reduce((y,[H,J])=>(/^\d+px$/.test(J)||(y+=`${H}: ${J}, `),y),"");t(n.length===0,`Check your theme. \`${n.trimEnd()}\` are invalid breakpoints. Use only pixels.`)}),p=({theme:i={}})=>{const y=A(Xe)(i,e.pathToMediaQueries,e.defaultBreakpoints);return r(y),y},l=i=>n=>{const y=p(n),H=Ve({breakpoints:y,errorPrefix:e.errorPrefix});return i(H)},d=i=>{t(i==="portrait"||i==="landscape",`\`${i}\` is invalid orientation. Use \`landscape\` or \`portrait\`.`)},s=(i,n)=>(d(n),`${i} and (orientation: ${n})`),h=A((i,n)=>i?s(n,i):n),u=({min:i,max:n})=>`@media (min-width: ${i}) and (max-width: ${n})`;return{up:(i,n)=>l(({up:y})=>h(n,`@media (min-width: ${y(i)})`)),down:(i,n)=>l(({down:y})=>h(n,`@media (max-width: ${y(i)})`)),between:(i,n,y)=>l(({between:H})=>h(y,u(H(i,n)))),only:(i,n)=>l(({only:y})=>h(n,u(y(i))))}};const{createStyledBreakpoints:Ue}=M;I.createStyledBreakpoints=Ue;const{createStyledBreakpoints:qe}=I;var $=qe();const w=({underlined:e,strikedThrough:t})=>{const r=[];return e&&r.push("underline"),t&&r.push("line-through"),r.join(" ")},Ge=g.default.h1`
font-family: ${({theme:e})=>e.typography.displayLarge.fontFamily};
color: ${({theme:e})=>e.colors.neutral["900"]};
font-size: ${({theme:e})=>e.typography.displayLarge.mobile.fontSize};
line-height: ${({theme:e})=>e.typography.displayLarge.mobile.lineHeight};
letter-spacing: ${({theme:e})=>e.typography.displayLarge.mobile.tracking};
font-weight: ${({theme:e,weight:t})=>t?e.typography.displayLarge.mobile.weights[t]:e.typography.displayLarge.mobile.weights.normal};
${$.up("desktop")} {
font-size: ${({theme:e})=>e.typography.displayLarge.desktop.fontSize};
line-height: ${({theme:e})=>e.typography.displayLarge.desktop.lineHeight};
letter-spacing: ${({theme:e})=>e.typography.displayLarge.desktop.tracking};
font-weight: ${({theme:e,weight:t})=>t?e.typography.displayLarge.desktop.weights[t]:e.typography.displayLarge.desktop.weights.normal};
}
`,Ke=g.default.h2`
font-family: ${({theme:e})=>e.typography.displaySmall.fontFamily};
color: ${({theme:e})=>e.colors.neutral["900"]};
font-size: ${({theme:e})=>e.typography.displaySmall.mobile.fontSize};
line-height: ${({theme:e})=>e.typography.displaySmall.mobile.lineHeight};
letter-spacing: ${({theme:e})=>e.typography.displaySmall.mobile.tracking};
font-weight: ${({theme:e,weight:t})=>t?e.typography.displaySmall.mobile.weights[t]:e.typography.displaySmall.mobile.weights.normal};
${$.up("desktop")} {
font-size: ${({theme:e})=>e.typography.displaySmall.desktop.fontSize};
line-height: ${({theme:e})=>e.typography.displaySmall.desktop.lineHeight};
letter-spacing: ${({theme:e})=>e.typography.displaySmall.desktop.tracking};
font-weight: ${({theme:e,weight:t})=>t?e.typography.displaySmall.desktop.weights[t]:e.typography.displaySmall.desktop.weights.normal};
}
`,Je=g.default.h1`
font-family: ${({theme:e})=>e.typography.headingH1.fontFamily};
color: ${({theme:e})=>e.colors.neutral["900"]};
font-size: ${({theme:e})=>e.typography.headingH1.mobile.fontSize};
line-height: ${({theme:e})=>e.typography.headingH1.mobile.lineHeight};
letter-spacing: ${({theme:e})=>e.typography.headingH1.mobile.tracking};
font-weight: ${({theme:e,weight:t})=>t?e.typography.headingH1.mobile.weights[t]:e.typography.headingH1.mobile.weights.normal};
${$.up("desktop")} {
font-size: ${({theme:e})=>e.typography.headingH1.desktop.fontSize};
line-height: ${({theme:e})=>e.typography.headingH1.desktop.lineHeight};
letter-spacing: ${({theme:e})=>e.typography.headingH1.desktop.tracking};
font-weight: ${({theme:e,weight:t})=>t?e.typography.headingH1.desktop.weights[t]:e.typography.headingH1.desktop.weights.normal};
}
`,Ze=g.default.h2`
font-family: ${({theme:e})=>e.typography.headingH2.fontFamily};
color: ${({theme:e})=>e.colors.neutral["900"]};
font-size: ${({theme:e})=>e.typography.headingH2.mobile.fontSize};
line-height: ${({theme:e})=>e.typography.headingH2.mobile.lineHeight};
letter-spacing: ${({theme:e})=>e.typography.headingH2.mobile.tracking};
font-weight: ${({theme:e,weight:t})=>t?e.typography.headingH2.mobile.weights[t]:e.typography.headingH2.mobile.weights.normal};
${$.up("desktop")} {
font-size: ${({theme:e})=>e.typography.headingH2.desktop.fontSize};
line-height: ${({theme:e})=>e.typography.headingH2.desktop.lineHeight};
letter-spacing: ${({theme:e})=>e.typography.headingH2.desktop.tracking};
font-weight: ${({theme:e,weight:t})=>t?e.typography.headingH2.desktop.weights[t]:e.typography.headingH2.desktop.weights.normal};
}
`,Ye=g.default.h3`
font-family: ${({theme:e})=>e.typography.headingH3.fontFamily};
color: ${({theme:e})=>e.colors.neutral["900"]};
font-size: ${({theme:e})=>e.typography.headingH3.mobile.fontSize};
line-height: ${({theme:e})=>e.typography.headingH3.mobile.lineHeight};
letter-spacing: ${({theme:e})=>e.typography.headingH3.mobile.tracking};
font-weight: ${({theme:e,weight:t})=>t?e.typography.headingH3.mobile.weights[t]:e.typography.headingH3.mobile.weights.normal};
${$.up("desktop")} {
font-size: ${({theme:e})=>e.typography.headingH3.desktop.fontSize};
line-height: ${({theme:e})=>e.typography.headingH3.desktop.lineHeight};
letter-spacing: ${({theme:e})=>e.typography.headingH3.desktop.tracking};
font-weight: ${({theme:e,weight:t})=>t?e.typography.headingH3.desktop.weights[t]:e.typography.headingH3.desktop.weights.normal};
}
`,et=g.default.h4`
font-family: ${({theme:e})=>e.typography.headingH4.fontFamily};
color: ${({theme:e})=>e.colors.neutral["900"]};
font-size: ${({theme:e})=>e.typography.headingH4.mobile.fontSize};
line-height: ${({theme:e})=>e.typography.headingH4.mobile.lineHeight};
letter-spacing: ${({theme:e})=>e.typography.headingH4.mobile.tracking};
font-weight: ${({theme:e,weight:t})=>t?e.typography.headingH4.mobile.weights[t]:e.typography.headingH4.mobile.weights.normal};
${$.up("desktop")} {
font-size: ${({theme:e})=>e.typography.headingH4.desktop.fontSize};
line-height: ${({theme:e})=>e.typography.headingH4.desktop.lineHeight};
letter-spacing: ${({theme:e})=>e.typography.headingH4.desktop.tracking};
font-weight: ${({theme:e,weight:t})=>t?e.typography.headingH4.desktop.weights[t]:e.typography.headingH4.desktop.weights.normal};
}
`,tt=g.default.h5`
font-family: ${({theme:e})=>e.typography.headingH5.fontFamily};
color: ${({theme:e})=>e.colors.neutral["900"]};
font-size: ${({theme:e})=>e.typography.headingH5.mobile.fontSize};
line-height: ${({theme:e})=>e.typography.headingH5.mobile.lineHeight};
letter-spacing: ${({theme:e})=>e.typography.headingH5.mobile.tracking};
font-weight: ${({theme:e,weight:t})=>t?e.typography.headingH5.mobile.weights[t]:e.typography.headingH5.mobile.weights.normal};
${$.up("desktop")} {
font-size: ${({theme:e})=>e.typography.headingH5.desktop.fontSize};
line-height: ${({theme:e})=>e.typography.headingH5.desktop.lineHeight};
letter-spacing: ${({theme:e})=>e.typography.headingH5.desktop.tracking};
font-weight: ${({theme:e,weight:t})=>t?e.typography.headingH5.desktop.weights[t]:e.typography.headingH5.desktop.weights.normal};
}
`,ot=g.default.h6`
font-family: ${({theme:e})=>e.typography.headingH6.fontFamily};
color: ${({theme:e})=>e.colors.neutral["900"]};
font-size: ${({theme:e})=>e.typography.headingH6.mobile.fontSize};
line-height: ${({theme:e})=>e.typography.headingH6.mobile.lineHeight};
letter-spacing: ${({theme:e})=>e.typography.headingH6.mobile.tracking};
font-weight: ${({theme:e,weight:t})=>t?e.typography.headingH6.mobile.weights[t]:e.typography.headingH6.mobile.weights.normal};
${$.up("desktop")} {
font-size: ${({theme:e})=>e.typography.headingH6.desktop.fontSize};
line-height: ${({theme:e})=>e.typography.headingH6.desktop.lineHeight};
letter-spacing: ${({theme:e})=>e.typography.headingH6.desktop.tracking};
font-weight: ${({theme:e,weight:t})=>t?e.typography.headingH6.desktop.weights[t]:e.typography.headingH6.desktop.weights.normal};
}
`,it=g.default.p`
font-family: ${({theme:e})=>e.typography.paragraphLarge.fontFamily};
color: ${({theme:e})=>e.colors.neutral["900"]};
font-size: ${({theme:e})=>e.typography.paragraphLarge.fontSize};
line-height: ${({theme:e})=>e.typography.paragraphLarge.lineHeight};
font-weight: ${({theme:e,weight:t})=>t?e.typography.paragraphLarge.weights[t]:e.typography.paragraphLarge.weights.normal};
text-decoration: ${w};
font-style: ${({italic:e})=>e?"italic":"normal"};
`,at=g.default.p`
font-family: ${({theme:e})=>e.typography.paragraphMedium.fontFamily};
color: ${({theme:e})=>e.colors.neutral["900"]};
font-size: ${({theme:e})=>e.typography.paragraphMedium.fontSize};
line-height: ${({theme:e})=>e.typography.paragraphMedium.lineHeight};
font-weight: ${({theme:e,weight:t})=>t?e.typography.paragraphMedium.weights[t]:e.typography.paragraphMedium.weights.normal};
text-decoration: ${w};
font-style: ${({italic:e})=>e?"italic":"normal"};
`,rt=g.default.p`
font-family: ${({theme:e})=>e.typography.paragraphSmall.fontFamily};
color: ${({theme:e})=>e.colors.neutral["900"]};
font-size: ${({theme:e})=>e.typography.paragraphSmall.fontSize};
line-height: ${({theme:e})=>e.typography.paragraphSmall.lineHeight};
font-weight: ${({theme:e,weight:t})=>t?e.typography.paragraphSmall.weights[t]:e.typography.paragraphSmall.weights.normal};
text-decoration: ${w};
font-style: ${({italic:e})=>e?"italic":"normal"};
`,nt=g.default.p`
font-family: ${({theme:e})=>e.typography.paragraphXSmall.fontFamily};
color: ${({theme:e})=>e.colors.neutral["900"]};
font-size: ${({theme:e})=>e.typography.paragraphXSmall.fontSize};
line-height: ${({theme:e})=>e.typography.paragraphXSmall.lineHeight};
font-weight: ${({theme:e,weight:t})=>t?e.typography.paragraphXSmall.weights[t]:e.typography.paragraphXSmall.weights.normal};
text-decoration: ${w};
font-style: ${({italic:e})=>e?"italic":"normal"};
`,lt=g.default.p`
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;
text-transform: uppercase;
`,pt=g.default.p`
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;
text-transform: uppercase;
`,gt=g.default.p`
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;
text-transform: uppercase;
`,X=a.css`
display: flex;
flex-flow: row nowrap;
align-items: center;
border-style: solid;
font-family: ${({theme:e})=>e.buttons.fontFamily};
&,
& * {
font-weight: ${({theme:e})=>e.buttons.fontWeight};
}
& path {
fill: currentColor;
fill-rule: evenodd;
}
`,j=a.css`
display: flex;
flex-flow: row nowrap;
align-items: center;
`,st=a.css`
${({buttonSize:e,theme:t})=>a.css`
padding: ${t.buttons.regular[e].verticalPadding}
${t.buttons.regular[e].horizontalPadding};
border-radius: ${t.buttons.regular[e].borderRadius};
font-size: ${t.buttons.regular[e].fontSize};
`}
`,V=a.css`
${({theme:e,buttonStyle:t})=>a.css`
background: ${e.buttons.regular.disabled[t].background};
border-color: ${e.buttons.regular.disabled[t].borderColor};
border-width: ${e.buttons.regular.disabled[t].borderWidth};
color: ${e.buttons.regular.disabled[t].contentColor};
`}
`,Q=a.css`
${({theme:e,buttonStyle:t,variant:r})=>a.css`
background: ${e.buttons.regular[r][t].background};
border-color: ${e.buttons.regular[r][t].borderColor};
border-width: ${e.buttons.regular[r][t].borderWidth};
color: ${e.buttons.regular[r][t].contentColor};
`}
`,dt=g.default.button`
${X}
${st}
${({disabled:e})=>e?V:Q}
`,ht=a.css`
margin-right: ${({theme:e,buttonSize:t})=>e.buttons.regular[t].iconPadding};
`,ct=g.default.div`
${j}
${ht}
`,yt=a.css`
margin-left: ${({theme:e,buttonSize:t})=>e.buttons.regular[t].iconPadding};
`,mt=g.default.div`
${j}
${yt}
`,ft=a.css`
${({buttonSize:e,theme:t})=>a.css`
padding: ${t.buttons.icon[e].verticalPadding}
${t.buttons.icon[e].horizontalPadding};
border-radius: ${t.buttons.icon[e].borderRadius};
font-size: ${t.buttons.icon[e].fontSize};
`}
`,xt=a.css`
width: ${({theme:e,buttonSize:t})=>e.buttons.icon[t].buttonSize};
height: ${({theme:e,buttonSize:t})=>e.buttons.icon[t].buttonSize};
`,ut=g.default.div`
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
${xt}
`,bt=g.default.button`
${X}
${ft}
${({disabled:e})=>e?V:Q}
`;var U,q,G=oe.default,$t=0;function K(e,t,r,p,l){var d,s,h={};for(s in t)s=="ref"?d=t[s]:h[s]=t[s];var u={type:e,props:h,key:r,ref:d,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:--$t,__source:p,__self:l};if(typeof e=="function"&&(d=e.defaultProps))for(s in d)h[s]===void 0&&(h[s]=d[s]);return G.options.vnode&&G.options.vnode(u),u}q=K,U=K;const z=q,kt=U,Ht=u=>{var i=u,{buttonSize:e="medium",variant:t="primary",buttonStyle:r="primary",iconOnly:p=!1,startIcon:l=null,endIcon:d=null,children:s}=i,h=te(i,["buttonSize","variant","buttonStyle","iconOnly","startIcon","endIcon","children"]);return p?z(bt,B(C({},h),{variant:t,buttonStyle:r,buttonSize:e,children:z(ut,{buttonSize:e,children:l||d})})):kt(dt,B(C({},h),{variant:t,buttonStyle:r,buttonSize:e,children:[l&&z(ct,{buttonSize:e,children:l}),s,d&&z(mt,{buttonSize:e,children:d})]}))};o.Button=Ht,o.DisplayLarge=Ge,o.DisplaySmall=Ke,o.HeadingH1=Je,o.HeadingH2=Ze,o.HeadingH3=Ye,o.HeadingH4=et,o.HeadingH5=tt,o.HeadingH6=ot,o.OverlineLarge=lt,o.OverlineMedium=pt,o.OverlineSmall=gt,o.ParagraphLarge=it,o.ParagraphMedium=at,o.ParagraphSmall=rt,o.ParagraphXSmall=nt,o.darkTheme=Ee,o.lightTheme=_,Object.defineProperty(o,"__esModule",{value:!0}),o[Symbol.toStringTag]="Module"});

6

dist/main.d.ts

@@ -1,3 +0,7 @@

export type { default as Theme } from "./types/theme";
export { light as lightTheme } from "./theme";
export { dark as darkTheme } from "./theme";
export type { default as Theme } from "./types/theme";
export { DisplayLarge, DisplaySmall, HeadingH1, HeadingH2, HeadingH3, HeadingH4, HeadingH5, HeadingH6, OverlineLarge, OverlineMedium, OverlineSmall, ParagraphLarge, ParagraphMedium, ParagraphSmall, ParagraphXSmall, } from "./components/Typography";
export type { TypographyHeaderProps, TypographyOverlineProps, TypographyParagraphProps, } from "./components/Typography";
export { default as Button } from "./components/Button";
export type { ButtonProps } from "./components/Button";

124

dist/theme/light/colors.d.ts
export declare const neutral: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
"50": string;
"100": string;
"200": string;
"300": string;
"400": string;
"500": string;
"600": string;
"700": string;
"800": string;
"900": string;
};
export declare const primary: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
"50": string;
"100": string;
"200": string;
"300": string;
"400": string;
"500": string;
"600": string;
"700": string;
"800": string;
"900": string;
};
export declare const secondary: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
"50": string;
"100": string;
"200": string;
"300": string;
"400": string;
"500": string;
"600": string;
"700": string;
"800": string;
"900": string;
};
export declare const success: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
"50": string;
"100": string;
"200": string;
"300": string;
"400": string;
"500": string;
"600": string;
"700": string;
"800": string;
"900": string;
};
export declare const warning: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
"50": string;
"100": string;
"200": string;
"300": string;
"400": string;
"500": string;
"600": string;
"700": string;
"800": string;
"900": string;
};
export declare const error: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
"50": string;
"100": string;
"200": string;
"300": string;
"400": string;
"500": string;
"600": string;
"700": string;
"800": string;
"900": string;
};
export declare const shades: {
0: string;
100: string;
"0": string;
"100": string;
};

262

dist/theme/light/typography.d.ts

@@ -1,246 +0,16 @@

export declare const displayLarge: {
desktop: {
weights: {
normal: number;
bold: number;
bolder: number;
boldest: number;
};
fontSize: string;
lineHeight: string;
tracking: string;
};
mobile: {
weights: {
normal: number;
bold: number;
bolder: number;
boldest: number;
};
fontSize: string;
lineHeight: string;
tracking: string;
};
};
export declare const displaySmall: {
desktop: {
weights: {
normal: number;
bold: number;
bolder: number;
boldest: number;
};
fontSize: string;
lineHeight: string;
tracking: string;
};
mobile: {
weights: {
normal: number;
bold: number;
bolder: number;
boldest: number;
};
fontSize: string;
lineHeight: string;
tracking: string;
};
};
export declare const headingH1: {
desktop: {
weights: {
normal: number;
bold: number;
bolder: number;
boldest: number;
};
fontSize: string;
lineHeight: string;
tracking: string;
};
mobile: {
weights: {
normal: number;
bold: number;
bolder: number;
boldest: number;
};
fontSize: string;
lineHeight: string;
tracking: string;
};
};
export declare const headingH2: {
desktop: {
weights: {
normal: number;
bold: number;
bolder: number;
boldest: number;
};
fontSize: string;
lineHeight: string;
tracking: string;
};
mobile: {
weights: {
normal: number;
bold: number;
bolder: number;
boldest: number;
};
fontSize: string;
lineHeight: string;
tracking: string;
};
};
export declare const headingH3: {
desktop: {
weights: {
normal: number;
bold: number;
bolder: number;
boldest: number;
};
fontSize: string;
lineHeight: string;
tracking: string;
};
mobile: {
weights: {
normal: number;
bold: number;
bolder: number;
boldest: number;
};
fontSize: string;
lineHeight: string;
tracking: string;
};
};
export declare const headingH4: {
desktop: {
weights: {
normal: number;
bold: number;
bolder: number;
boldest: number;
};
fontSize: string;
lineHeight: string;
tracking: string;
};
mobile: {
weights: {
normal: number;
bold: number;
bolder: number;
boldest: number;
};
fontSize: string;
lineHeight: string;
tracking: string;
};
};
export declare const headingH5: {
desktop: {
weights: {
normal: number;
bold: number;
bolder: number;
boldest: number;
};
fontSize: string;
lineHeight: string;
tracking: string;
};
mobile: {
weights: {
normal: number;
bold: number;
bolder: number;
boldest: number;
};
fontSize: string;
lineHeight: string;
tracking: string;
};
};
export declare const headingH6: {
desktop: {
weights: {
normal: number;
bold: number;
bolder: number;
boldest: number;
};
fontSize: string;
lineHeight: string;
tracking: string;
};
mobile: {
weights: {
normal: number;
bold: number;
bolder: number;
boldest: number;
};
fontSize: string;
lineHeight: string;
tracking: string;
};
};
export declare const paragraphLarge: {
fontSize: string;
lineHeight: string;
weights: {
normal: number;
bold: number;
bolder: number;
};
};
export declare const paragraphMedium: {
fontSize: string;
lineHeight: string;
weights: {
normal: number;
bold: number;
bolder: number;
};
};
export declare const paragraphSmall: {
fontSize: string;
lineHeight: string;
weights: {
normal: number;
bold: number;
bolder: number;
};
};
export declare const paragraphXSmall: {
fontSize: string;
lineHeight: string;
weights: {
normal: number;
bold: number;
bolder: number;
};
};
export declare const overlineLarge: {
fontSize: string;
lineHeight: string;
weights: {
normal: number;
bold: number;
bolder: number;
};
};
export declare const overlineSmall: {
fontSize: string;
lineHeight: string;
weights: {
normal: number;
bold: number;
bolder: number;
};
};
import { OverlineProps, HeaderProps, ParagraphProps } from "../../types/theme";
export declare const displayLarge: HeaderProps;
export declare const displaySmall: HeaderProps;
export declare const headingH1: HeaderProps;
export declare const headingH2: HeaderProps;
export declare const headingH3: HeaderProps;
export declare const headingH4: HeaderProps;
export declare const headingH5: HeaderProps;
export declare const headingH6: HeaderProps;
export declare const paragraphLarge: ParagraphProps;
export declare const paragraphMedium: ParagraphProps;
export declare const paragraphSmall: ParagraphProps;
export declare const paragraphXSmall: ParagraphProps;
export declare const overlineLarge: OverlineProps;
export declare const overlineMedium: OverlineProps;
export declare const overlineSmall: OverlineProps;

70

dist/types/theme.d.ts

@@ -44,3 +44,4 @@ import * as CSS from "csstype";

}
interface HeaderProps {
export interface HeaderProps {
fontFamily: CSS.Property.FontFamily;
desktop: {

@@ -69,3 +70,4 @@ weights: {

}
interface ParagraphProps {
export interface ParagraphProps {
fontFamily: CSS.Property.FontFamily;
fontSize: CSS.Property.FontSize;

@@ -79,2 +81,9 @@ lineHeight: CSS.Property.LineHeight;

}
export interface OverlineProps {
fontFamily: CSS.Property.FontFamily;
fontSize: CSS.Property.FontSize;
lineHeight: CSS.Property.LineHeight;
weight: CSS.Property.FontWeight;
textTransform: CSS.Property.TextTransform;
}
interface Typography {

@@ -93,4 +102,5 @@ displayLarge: HeaderProps;

paragraphXSmall: ParagraphProps;
overlineLarge: ParagraphProps;
overlineSmall: ParagraphProps;
overlineLarge: OverlineProps;
overlineMedium: OverlineProps;
overlineSmall: OverlineProps;
}

@@ -133,3 +143,54 @@ interface Shadows {

}
interface ButtonStyle {
background: CSS.Property.BackgroundColor;
borderColor: CSS.Property.BorderColor;
borderWidth: CSS.Property.BorderWidth;
contentColor: CSS.Property.Color;
}
export interface ButtonVariant {
primary: ButtonStyle;
secondary: ButtonStyle;
tertiary: ButtonStyle;
outlined: ButtonStyle;
}
interface ButtonSize {
verticalPadding: CSS.Property.PaddingTop;
horizontalPadding: CSS.Property.PaddingLeft;
fontSize: CSS.Property.FontSize;
iconPadding: CSS.Property.Padding;
borderRadius: CSS.Property.BorderRadius;
}
interface IconButtonSize {
verticalPadding: CSS.Property.PaddingTop;
horizontalPadding: CSS.Property.PaddingLeft;
size: CSS.Property.Width;
borderRadius: CSS.Property.BorderRadius;
}
export interface Buttons {
fontFamily: CSS.Property.FontFamily;
fontWeight: CSS.Property.FontWeight;
regular: {
large: ButtonSize;
medium: ButtonSize;
small: ButtonSize;
xSmall: ButtonSize;
primary: ButtonVariant;
destructive: ButtonVariant;
disabled: ButtonVariant;
};
icon: {
large: IconButtonSize;
medium: IconButtonSize;
small: IconButtonSize;
xSmall: IconButtonSize;
primary: ButtonVariant;
destructive: ButtonVariant;
disabled: ButtonVariant;
};
}
export default interface Theme {
breakpoints: {
mobile: string;
desktop: string;
};
name: string;

@@ -142,3 +203,4 @@ spacings: Spacings;

gradients: Gradients;
buttons: Buttons;
}
export {};

45

package.json
{
"name": "@logrock/pebbles",
"version": "2.2.0",
"version": "2.3.0",
"files": [

@@ -21,6 +21,12 @@ "dist"

"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
"build-storybook": "build-storybook",
"_postinstall": "husky install",
"prepack": "pinst --disable",
"postpack": "pinst --enable",
"commit": "cz"
},
"devDependencies": {
"@babel/core": "^7.17.5",
"@commitlint/cli": "^16.2.1",
"@commitlint/config-conventional": "^16.2.1",
"@mdx-js/react": "^1.6.22",

@@ -39,11 +45,31 @@ "@preact/preset-vite": "^2.1.5",

"@types/styled-components": "^5.1.23",
"@typescript-eslint/eslint-plugin": "^5.12.1",
"@typescript-eslint/parser": "^5.12.1",
"babel-loader": "^8.2.3",
"commitizen": "^4.2.4",
"copy-webpack-plugin": "^10.2.4",
"core-js": "^3.21.1",
"csstype": "^3.0.10",
"cz-conventional-changelog": "3.3.0",
"eslint": "^8.10.0",
"eslint-config-preact": "^1.3.0",
"eslint-config-prettier": "^8.4.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^6.0.0",
"husky": "^7.0.4",
"jest": "^27.5.1",
"lint-staged": "^12.3.4",
"pinst": "^3.0.0",
"preact": "^10.5.15",
"prettier": "^2.5.1",
"semantic-release": "^18.0.1",
"semantic-release-slack-bot": "^3.5.2",
"storybook-addon-styled-component-theme": "^2.0.0",
"styled-breakpoints": "^10.0.1",
"styled-components": "^5.3.3",
"typescript": "^4.5.4",
"ts-loader": "^9.2.6",
"tsconfig-paths-webpack-plugin": "^3.5.2",
"typescript": "^4.5.5",
"vite": "^2.8.0"

@@ -53,2 +79,3 @@ },

"preact": "^10",
"styled-breakpoints": "*",
"styled-components": "^5"

@@ -63,3 +90,15 @@ },

"access": "public"
},
"dependencies": {
"@types/jest": "^27.4.1"
},
"lint-staged": {
"**/*.{js,ts,jsx,tsx,mdx}": "eslint --fix",
"**/*": "prettier --write --ignore-unknown"
},
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
}
dist/theme/dark/colors.d.ts
dist/theme/dark/gradients.d.ts
dist/theme/dark/typography.d.ts
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc