@epignosis_llc/gnosis 6.6.2 → 6.6.9

package/dist/tokens/index.cjs

@@ -0,0 +1,229 @@
+
+  /**
+   * @license
+   * author: epignosis front-end team
+   * @epignosis_llc/gnosis.js v6.6.8
+   * Released under the MIT license.
+   */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * Gnosis Design Tokens
+ *
+ * This file is a single source of truth for all design tokens in the Gnosis design system.
+ * Tokens are aligned with Figma design tokens.
+ */
+
+// ---------------------------------------------------------------------------
+// COLORS
+// ---------------------------------------------------------------------------
+// Base hex values
+var colorBase = {
+  primary: "#0046AB",
+  secondary: "#9EA5A9",
+  green: "#1B7855",
+  orange: "#FF9C28",
+  red: "#D12525",
+  black: "#000000",
+  white: "#FFFFFF",
+  blue: "#0046AB"
+};
+
+// Full palette — each color generated with palletGenerator (color lib lighten/darken)
+var colors = {
+  primary: {
+    lightest: "#247DFF",
+    lighter: "#0169FF",
+    light: "#0054CD",
+    base: "#0046AB",
+    dark: "#003889",
+    darker: "#002A67",
+    darkest: "#001C44"
+  },
+  secondary: {
+    lightest: "#FFFFFF",
+    lighter: "#F5F5F6",
+    light: "#C1C5C8",
+    base: "#9EA5A9",
+    dark: "#7B858A",
+    darker: "#5C6468",
+    darkest: "#3D4245"
+  },
+  green: {
+    lightest: "#2ECC90",
+    lighter: "#29B47F",
+    light: "#209066",
+    base: "#1B7855",
+    dark: "#166044",
+    darker: "#104833",
+    darkest: "#0B3022"
+  },
+  orange: {
+    lightest: "#FFFBF6",
+    lighter: "#FFE0BB",
+    light: "#FFB763",
+    base: "#FF9C28",
+    dark: "#EC7F00",
+    darker: "#B15F00",
+    darkest: "#764000"
+  },
+  red: {
+    lightest: "#F1B1B1",
+    lighter: "#EA8787",
+    light: "#DF4949",
+    base: "#D12525",
+    dark: "#A71E1E",
+    darker: "#7D1616",
+    darkest: "#540F0F"
+  },
+  black: "#000000",
+  white: "#FFFFFF",
+  blue: "#0046AB"
+};
+
+// ---------------------------------------------------------------------------
+// TYPOGRAPHY
+// ---------------------------------------------------------------------------
+var typography = {
+  // Font families
+  fontFamily: {
+    body: '"Mulish", Arial, sans-serif'
+  },
+  // Type scale (aligned with Figma design tokens)
+  fontSize: {
+    xxs: "0.5rem",
+    //  8px
+    xs: "0.75rem",
+    //  12px
+    sm: "0.875rem",
+    //  14px
+    md: "1rem",
+    //  16px  ← base
+    lg: "1.125rem",
+    //  18px
+    xl: "1.375rem",
+    //  22px
+    "2xl": "1.75rem",
+    //  28px
+    "3xl": "2.125rem" //  34px
+  },
+  // Global line height
+  lineHeight: {
+    base: 1.5715
+  },
+  // Font weights (browser defaults relied upon; explicit values used in components)
+  fontWeight: {
+    regular: 400,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800
+  }
+};
+
+// ---------------------------------------------------------------------------
+// SPACING
+// ---------------------------------------------------------------------------
+// Aligned with Figma design tokens
+var spacing = {
+  none: "0",
+  //  0px
+  xxs: "0.25rem",
+  //  4px
+  xs: "0.5rem",
+  //  8px
+  sm: "0.75rem",
+  //  12px
+  md: "1rem",
+  //  16px
+  lg: "1.5rem",
+  //  24px
+  xl: "2rem" //  32px
+};
+
+// ---------------------------------------------------------------------------
+// BORDER RADIUS
+// ---------------------------------------------------------------------------
+// Aligned with Figma design tokens
+var borderRadius = {
+  none: "0",
+  // 0px
+  sm: "5px",
+  // 5px - buttons, cards, alerts, chips, dropdowns, tooltips, pagination
+  xl: "30px",
+  // 30px - rounded elements
+  full: "50%" // circular elements
+};
+
+// ---------------------------------------------------------------------------
+// SHADOWS
+// ---------------------------------------------------------------------------
+// Shadow color = colors.secondary.light (#C1C5C8)
+var shadows = {
+  sm: "0 3px 6px #C1C5C8",
+  // dropdown, pagination, result card
+  checkbox: "0px 0px 0px 9px rgba(36, 125, 255, 0.25)" // focus ring on checkboxes
+};
+
+// ---------------------------------------------------------------------------
+// BREAKPOINTS
+// ---------------------------------------------------------------------------
+// From src/theme/utils/breakpoints.ts
+var breakpoints = {
+  xs: 320,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1600,
+  "3xl": 1920
+};
+
+// Corresponding media queries (min-width)
+var mediaQueries = {
+  xs: "@media screen and (min-width: 320px)",
+  sm: "@media screen and (min-width: 576px)",
+  md: "@media screen and (min-width: 768px)",
+  lg: "@media screen and (min-width: 992px)",
+  xl: "@media screen and (min-width: 1200px)",
+  xxl: "@media screen and (min-width: 1600px)",
+  "3xl": "@media screen and (min-width: 1920px)"
+};
+
+// ---------------------------------------------------------------------------
+// Z-INDEX
+// ---------------------------------------------------------------------------
+var zIndex = {
+  base: 0,
+  raised: 1,
+  overlay: 2,
+  drawer: 3,
+  dropdown: 100,
+  sidebar: 1001,
+  modal: 1001
+};
+
+// ---------------------------------------------------------------------------
+// TRANSITIONS
+// ---------------------------------------------------------------------------
+var transitions = {
+  fast: "0.2s",
+  base: "0.3s",
+  easeIn: "0.2s ease-in",
+  easeInOut: "0.3s ease-in-out",
+  easeOut: "0.2s ease"
+};
+
+exports.borderRadius = borderRadius;
+exports.breakpoints = breakpoints;
+exports.colorBase = colorBase;
+exports.colors = colors;
+exports.mediaQueries = mediaQueries;
+exports.shadows = shadows;
+exports.spacing = spacing;
+exports.transitions = transitions;
+exports.typography = typography;
+exports.zIndex = zIndex;
+//# sourceMappingURL=index.cjs.map

package/dist/tokens/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/theme/tokens.ts"],"sourcesContent":["/**\n * Gnosis Design Tokens\n *\n * This file is a single source of truth for all design tokens in the Gnosis design system.\n * Tokens are aligned with Figma design tokens.\n */\n\n// ---------------------------------------------------------------------------\n// COLORS\n// ---------------------------------------------------------------------------\n// Base hex values\nexport const colorBase = {\n  primary: \"#0046AB\",\n  secondary: \"#9EA5A9\",\n  green: \"#1B7855\",\n  orange: \"#FF9C28\",\n  red: \"#D12525\",\n  black: \"#000000\",\n  white: \"#FFFFFF\",\n  blue: \"#0046AB\",\n} as const;\n\n// Full palette — each color generated with palletGenerator (color lib lighten/darken)\nexport const colors = {\n  primary: {\n    lightest: \"#247DFF\",\n    lighter: \"#0169FF\",\n    light: \"#0054CD\",\n    base: \"#0046AB\",\n    dark: \"#003889\",\n    darker: \"#002A67\",\n    darkest: \"#001C44\",\n  },\n  secondary: {\n    lightest: \"#FFFFFF\",\n    lighter: \"#F5F5F6\",\n    light: \"#C1C5C8\",\n    base: \"#9EA5A9\",\n    dark: \"#7B858A\",\n    darker: \"#5C6468\",\n    darkest: \"#3D4245\",\n  },\n  green: {\n    lightest: \"#2ECC90\",\n    lighter: \"#29B47F\",\n    light: \"#209066\",\n    base: \"#1B7855\",\n    dark: \"#166044\",\n    darker: \"#104833\",\n    darkest: \"#0B3022\",\n  },\n  orange: {\n    lightest: \"#FFFBF6\",\n    lighter: \"#FFE0BB\",\n    light: \"#FFB763\",\n    base: \"#FF9C28\",\n    dark: \"#EC7F00\",\n    darker: \"#B15F00\",\n    darkest: \"#764000\",\n  },\n  red: {\n    lightest: \"#F1B1B1\",\n    lighter: \"#EA8787\",\n    light: \"#DF4949\",\n    base: \"#D12525\",\n    dark: \"#A71E1E\",\n    darker: \"#7D1616\",\n    darkest: \"#540F0F\",\n  },\n  black: \"#000000\",\n  white: \"#FFFFFF\",\n  blue: \"#0046AB\",\n} as const;\n\n// ---------------------------------------------------------------------------\n// TYPOGRAPHY\n// ---------------------------------------------------------------------------\nexport const typography = {\n  // Font families\n  fontFamily: {\n    body: '\"Mulish\", Arial, sans-serif',\n  },\n\n  // Type scale (aligned with Figma design tokens)\n  fontSize: {\n    xxs: \"0.5rem\", //  8px\n    xs: \"0.75rem\", //  12px\n    sm: \"0.875rem\", //  14px\n    md: \"1rem\", //  16px  ← base\n    lg: \"1.125rem\", //  18px\n    xl: \"1.375rem\", //  22px\n    \"2xl\": \"1.75rem\", //  28px\n    \"3xl\": \"2.125rem\", //  34px\n  },\n\n  // Global line height\n  lineHeight: {\n    base: 1.5715,\n  },\n\n  // Font weights (browser defaults relied upon; explicit values used in components)\n  fontWeight: {\n    regular: 400,\n    semibold: 600,\n    bold: 700,\n    extrabold: 800,\n  },\n} as const;\n\n// ---------------------------------------------------------------------------\n// SPACING\n// ---------------------------------------------------------------------------\n// Aligned with Figma design tokens\nexport const spacing = {\n  none: \"0\", //  0px\n  xxs: \"0.25rem\", //  4px\n  xs: \"0.5rem\", //  8px\n  sm: \"0.75rem\", //  12px\n  md: \"1rem\", //  16px\n  lg: \"1.5rem\", //  24px\n  xl: \"2rem\", //  32px\n} as const;\n\n// ---------------------------------------------------------------------------\n// BORDER RADIUS\n// ---------------------------------------------------------------------------\n// Aligned with Figma design tokens\nexport const borderRadius = {\n  none: \"0\", // 0px\n  sm: \"5px\", // 5px - buttons, cards, alerts, chips, dropdowns, tooltips, pagination\n  xl: \"30px\", // 30px - rounded elements\n  full: \"50%\", // circular elements\n} as const;\n\n// ---------------------------------------------------------------------------\n// SHADOWS\n// ---------------------------------------------------------------------------\n// Shadow color = colors.secondary.light (#C1C5C8)\nexport const shadows = {\n  sm: \"0 3px 6px #C1C5C8\", // dropdown, pagination, result card\n  checkbox: \"0px 0px 0px 9px rgba(36, 125, 255, 0.25)\", // focus ring on checkboxes\n} as const;\n\n// ---------------------------------------------------------------------------\n// BREAKPOINTS\n// ---------------------------------------------------------------------------\n// From src/theme/utils/breakpoints.ts\nexport const breakpoints = {\n  xs: 320,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n  xxl: 1600,\n  \"3xl\": 1920,\n} as const;\n\n// Corresponding media queries (min-width)\nexport const mediaQueries = {\n  xs: \"@media screen and (min-width: 320px)\",\n  sm: \"@media screen and (min-width: 576px)\",\n  md: \"@media screen and (min-width: 768px)\",\n  lg: \"@media screen and (min-width: 992px)\",\n  xl: \"@media screen and (min-width: 1200px)\",\n  xxl: \"@media screen and (min-width: 1600px)\",\n  \"3xl\": \"@media screen and (min-width: 1920px)\",\n} as const;\n\n// ---------------------------------------------------------------------------\n// Z-INDEX\n// ---------------------------------------------------------------------------\nexport const zIndex = {\n  base: 0,\n  raised: 1,\n  overlay: 2,\n  drawer: 3,\n  dropdown: 100,\n  sidebar: 1001,\n  modal: 1001,\n} as const;\n\n// ---------------------------------------------------------------------------\n// TRANSITIONS\n// ---------------------------------------------------------------------------\nexport const transitions = {\n  fast: \"0.2s\",\n  base: \"0.3s\",\n  easeIn: \"0.2s ease-in\",\n  easeInOut: \"0.3s ease-in-out\",\n  easeOut: \"0.2s ease\",\n} as const;\n"],"names":["colorBase","primary","secondary","green","orange","red","black","white","blue","colors","lightest","lighter","light","base","dark","darker","darkest","typography","fontFamily","body","fontSize","xxs","xs","sm","md","lg","xl","lineHeight","fontWeight","regular","semibold","bold","extrabold","spacing","none","borderRadius","full","shadows","checkbox","breakpoints","xxl","mediaQueries","zIndex","raised","overlay","drawer","dropdown","sidebar","modal","transitions","fast","easeIn","easeInOut","easeOut"],"mappings":"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"}

package/dist/tokens/index.js

@@ -0,0 +1,216 @@
+
+  /**
+   * @license
+   * author: epignosis front-end team
+   * @epignosis_llc/gnosis.js v6.6.8
+   * Released under the MIT license.
+   */
+
+/**
+ * Gnosis Design Tokens
+ *
+ * This file is a single source of truth for all design tokens in the Gnosis design system.
+ * Tokens are aligned with Figma design tokens.
+ */
+
+// ---------------------------------------------------------------------------
+// COLORS
+// ---------------------------------------------------------------------------
+// Base hex values
+var colorBase = {
+  primary: "#0046AB",
+  secondary: "#9EA5A9",
+  green: "#1B7855",
+  orange: "#FF9C28",
+  red: "#D12525",
+  black: "#000000",
+  white: "#FFFFFF",
+  blue: "#0046AB"
+};
+
+// Full palette — each color generated with palletGenerator (color lib lighten/darken)
+var colors = {
+  primary: {
+    lightest: "#247DFF",
+    lighter: "#0169FF",
+    light: "#0054CD",
+    base: "#0046AB",
+    dark: "#003889",
+    darker: "#002A67",
+    darkest: "#001C44"
+  },
+  secondary: {
+    lightest: "#FFFFFF",
+    lighter: "#F5F5F6",
+    light: "#C1C5C8",
+    base: "#9EA5A9",
+    dark: "#7B858A",
+    darker: "#5C6468",
+    darkest: "#3D4245"
+  },
+  green: {
+    lightest: "#2ECC90",
+    lighter: "#29B47F",
+    light: "#209066",
+    base: "#1B7855",
+    dark: "#166044",
+    darker: "#104833",
+    darkest: "#0B3022"
+  },
+  orange: {
+    lightest: "#FFFBF6",
+    lighter: "#FFE0BB",
+    light: "#FFB763",
+    base: "#FF9C28",
+    dark: "#EC7F00",
+    darker: "#B15F00",
+    darkest: "#764000"
+  },
+  red: {
+    lightest: "#F1B1B1",
+    lighter: "#EA8787",
+    light: "#DF4949",
+    base: "#D12525",
+    dark: "#A71E1E",
+    darker: "#7D1616",
+    darkest: "#540F0F"
+  },
+  black: "#000000",
+  white: "#FFFFFF",
+  blue: "#0046AB"
+};
+
+// ---------------------------------------------------------------------------
+// TYPOGRAPHY
+// ---------------------------------------------------------------------------
+var typography = {
+  // Font families
+  fontFamily: {
+    body: '"Mulish", Arial, sans-serif'
+  },
+  // Type scale (aligned with Figma design tokens)
+  fontSize: {
+    xxs: "0.5rem",
+    //  8px
+    xs: "0.75rem",
+    //  12px
+    sm: "0.875rem",
+    //  14px
+    md: "1rem",
+    //  16px  ← base
+    lg: "1.125rem",
+    //  18px
+    xl: "1.375rem",
+    //  22px
+    "2xl": "1.75rem",
+    //  28px
+    "3xl": "2.125rem" //  34px
+  },
+  // Global line height
+  lineHeight: {
+    base: 1.5715
+  },
+  // Font weights (browser defaults relied upon; explicit values used in components)
+  fontWeight: {
+    regular: 400,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800
+  }
+};
+
+// ---------------------------------------------------------------------------
+// SPACING
+// ---------------------------------------------------------------------------
+// Aligned with Figma design tokens
+var spacing = {
+  none: "0",
+  //  0px
+  xxs: "0.25rem",
+  //  4px
+  xs: "0.5rem",
+  //  8px
+  sm: "0.75rem",
+  //  12px
+  md: "1rem",
+  //  16px
+  lg: "1.5rem",
+  //  24px
+  xl: "2rem" //  32px
+};
+
+// ---------------------------------------------------------------------------
+// BORDER RADIUS
+// ---------------------------------------------------------------------------
+// Aligned with Figma design tokens
+var borderRadius = {
+  none: "0",
+  // 0px
+  sm: "5px",
+  // 5px - buttons, cards, alerts, chips, dropdowns, tooltips, pagination
+  xl: "30px",
+  // 30px - rounded elements
+  full: "50%" // circular elements
+};
+
+// ---------------------------------------------------------------------------
+// SHADOWS
+// ---------------------------------------------------------------------------
+// Shadow color = colors.secondary.light (#C1C5C8)
+var shadows = {
+  sm: "0 3px 6px #C1C5C8",
+  // dropdown, pagination, result card
+  checkbox: "0px 0px 0px 9px rgba(36, 125, 255, 0.25)" // focus ring on checkboxes
+};
+
+// ---------------------------------------------------------------------------
+// BREAKPOINTS
+// ---------------------------------------------------------------------------
+// From src/theme/utils/breakpoints.ts
+var breakpoints = {
+  xs: 320,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1600,
+  "3xl": 1920
+};
+
+// Corresponding media queries (min-width)
+var mediaQueries = {
+  xs: "@media screen and (min-width: 320px)",
+  sm: "@media screen and (min-width: 576px)",
+  md: "@media screen and (min-width: 768px)",
+  lg: "@media screen and (min-width: 992px)",
+  xl: "@media screen and (min-width: 1200px)",
+  xxl: "@media screen and (min-width: 1600px)",
+  "3xl": "@media screen and (min-width: 1920px)"
+};
+
+// ---------------------------------------------------------------------------
+// Z-INDEX
+// ---------------------------------------------------------------------------
+var zIndex = {
+  base: 0,
+  raised: 1,
+  overlay: 2,
+  drawer: 3,
+  dropdown: 100,
+  sidebar: 1001,
+  modal: 1001
+};
+
+// ---------------------------------------------------------------------------
+// TRANSITIONS
+// ---------------------------------------------------------------------------
+var transitions = {
+  fast: "0.2s",
+  base: "0.3s",
+  easeIn: "0.2s ease-in",
+  easeInOut: "0.3s ease-in-out",
+  easeOut: "0.2s ease"
+};
+
+export { borderRadius, breakpoints, colorBase, colors, mediaQueries, shadows, spacing, transitions, typography, zIndex };
+//# sourceMappingURL=index.js.map

package/dist/tokens/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/theme/tokens.ts"],"sourcesContent":["/**\n * Gnosis Design Tokens\n *\n * This file is a single source of truth for all design tokens in the Gnosis design system.\n * Tokens are aligned with Figma design tokens.\n */\n\n// ---------------------------------------------------------------------------\n// COLORS\n// ---------------------------------------------------------------------------\n// Base hex values\nexport const colorBase = {\n  primary: \"#0046AB\",\n  secondary: \"#9EA5A9\",\n  green: \"#1B7855\",\n  orange: \"#FF9C28\",\n  red: \"#D12525\",\n  black: \"#000000\",\n  white: \"#FFFFFF\",\n  blue: \"#0046AB\",\n} as const;\n\n// Full palette — each color generated with palletGenerator (color lib lighten/darken)\nexport const colors = {\n  primary: {\n    lightest: \"#247DFF\",\n    lighter: \"#0169FF\",\n    light: \"#0054CD\",\n    base: \"#0046AB\",\n    dark: \"#003889\",\n    darker: \"#002A67\",\n    darkest: \"#001C44\",\n  },\n  secondary: {\n    lightest: \"#FFFFFF\",\n    lighter: \"#F5F5F6\",\n    light: \"#C1C5C8\",\n    base: \"#9EA5A9\",\n    dark: \"#7B858A\",\n    darker: \"#5C6468\",\n    darkest: \"#3D4245\",\n  },\n  green: {\n    lightest: \"#2ECC90\",\n    lighter: \"#29B47F\",\n    light: \"#209066\",\n    base: \"#1B7855\",\n    dark: \"#166044\",\n    darker: \"#104833\",\n    darkest: \"#0B3022\",\n  },\n  orange: {\n    lightest: \"#FFFBF6\",\n    lighter: \"#FFE0BB\",\n    light: \"#FFB763\",\n    base: \"#FF9C28\",\n    dark: \"#EC7F00\",\n    darker: \"#B15F00\",\n    darkest: \"#764000\",\n  },\n  red: {\n    lightest: \"#F1B1B1\",\n    lighter: \"#EA8787\",\n    light: \"#DF4949\",\n    base: \"#D12525\",\n    dark: \"#A71E1E\",\n    darker: \"#7D1616\",\n    darkest: \"#540F0F\",\n  },\n  black: \"#000000\",\n  white: \"#FFFFFF\",\n  blue: \"#0046AB\",\n} as const;\n\n// ---------------------------------------------------------------------------\n// TYPOGRAPHY\n// ---------------------------------------------------------------------------\nexport const typography = {\n  // Font families\n  fontFamily: {\n    body: '\"Mulish\", Arial, sans-serif',\n  },\n\n  // Type scale (aligned with Figma design tokens)\n  fontSize: {\n    xxs: \"0.5rem\", //  8px\n    xs: \"0.75rem\", //  12px\n    sm: \"0.875rem\", //  14px\n    md: \"1rem\", //  16px  ← base\n    lg: \"1.125rem\", //  18px\n    xl: \"1.375rem\", //  22px\n    \"2xl\": \"1.75rem\", //  28px\n    \"3xl\": \"2.125rem\", //  34px\n  },\n\n  // Global line height\n  lineHeight: {\n    base: 1.5715,\n  },\n\n  // Font weights (browser defaults relied upon; explicit values used in components)\n  fontWeight: {\n    regular: 400,\n    semibold: 600,\n    bold: 700,\n    extrabold: 800,\n  },\n} as const;\n\n// ---------------------------------------------------------------------------\n// SPACING\n// ---------------------------------------------------------------------------\n// Aligned with Figma design tokens\nexport const spacing = {\n  none: \"0\", //  0px\n  xxs: \"0.25rem\", //  4px\n  xs: \"0.5rem\", //  8px\n  sm: \"0.75rem\", //  12px\n  md: \"1rem\", //  16px\n  lg: \"1.5rem\", //  24px\n  xl: \"2rem\", //  32px\n} as const;\n\n// ---------------------------------------------------------------------------\n// BORDER RADIUS\n// ---------------------------------------------------------------------------\n// Aligned with Figma design tokens\nexport const borderRadius = {\n  none: \"0\", // 0px\n  sm: \"5px\", // 5px - buttons, cards, alerts, chips, dropdowns, tooltips, pagination\n  xl: \"30px\", // 30px - rounded elements\n  full: \"50%\", // circular elements\n} as const;\n\n// ---------------------------------------------------------------------------\n// SHADOWS\n// ---------------------------------------------------------------------------\n// Shadow color = colors.secondary.light (#C1C5C8)\nexport const shadows = {\n  sm: \"0 3px 6px #C1C5C8\", // dropdown, pagination, result card\n  checkbox: \"0px 0px 0px 9px rgba(36, 125, 255, 0.25)\", // focus ring on checkboxes\n} as const;\n\n// ---------------------------------------------------------------------------\n// BREAKPOINTS\n// ---------------------------------------------------------------------------\n// From src/theme/utils/breakpoints.ts\nexport const breakpoints = {\n  xs: 320,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n  xxl: 1600,\n  \"3xl\": 1920,\n} as const;\n\n// Corresponding media queries (min-width)\nexport const mediaQueries = {\n  xs: \"@media screen and (min-width: 320px)\",\n  sm: \"@media screen and (min-width: 576px)\",\n  md: \"@media screen and (min-width: 768px)\",\n  lg: \"@media screen and (min-width: 992px)\",\n  xl: \"@media screen and (min-width: 1200px)\",\n  xxl: \"@media screen and (min-width: 1600px)\",\n  \"3xl\": \"@media screen and (min-width: 1920px)\",\n} as const;\n\n// ---------------------------------------------------------------------------\n// Z-INDEX\n// ---------------------------------------------------------------------------\nexport const zIndex = {\n  base: 0,\n  raised: 1,\n  overlay: 2,\n  drawer: 3,\n  dropdown: 100,\n  sidebar: 1001,\n  modal: 1001,\n} as const;\n\n// ---------------------------------------------------------------------------\n// TRANSITIONS\n// ---------------------------------------------------------------------------\nexport const transitions = {\n  fast: \"0.2s\",\n  base: \"0.3s\",\n  easeIn: \"0.2s ease-in\",\n  easeInOut: \"0.3s ease-in-out\",\n  easeOut: \"0.2s ease\",\n} as const;\n"],"names":["colorBase","primary","secondary","green","orange","red","black","white","blue","colors","lightest","lighter","light","base","dark","darker","darkest","typography","fontFamily","body","fontSize","xxs","xs","sm","md","lg","xl","lineHeight","fontWeight","regular","semibold","bold","extrabold","spacing","none","borderRadius","full","shadows","checkbox","breakpoints","xxl","mediaQueries","zIndex","raised","overlay","drawer","dropdown","sidebar","modal","transitions","fast","easeIn","easeInOut","easeOut"],"mappings":"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"}

package/dist/tokens/tokens.css

@@ -0,0 +1,168 @@
+/**
+ * Gnosis Design Tokens — CSS Custom Properties
+ *
+ * All design tokens exported as CSS variables for use in CSS/SCSS.
+ * These mirror the tokens defined in src/theme/tokens.ts
+ */
+
+:root {
+  /* ---------------------------------------------------------------------------
+   * COLORS - Base
+   * ---------------------------------------------------------------------------*/
+  --color-base-primary: #0046ab;
+  --color-base-secondary: #9ea5a9;
+  --color-base-green: #1b7855;
+  --color-base-orange: #ff9c28;
+  --color-base-red: #d12525;
+  --color-base-black: #000000;
+  --color-base-white: #ffffff;
+  --color-base-blue: #0046ab;
+
+  /* ---------------------------------------------------------------------------
+   * COLORS - Primary Palette
+   * ---------------------------------------------------------------------------*/
+  --color-primary-lightest: #247dff;
+  --color-primary-lighter: #0169ff;
+  --color-primary-light: #0054cd;
+  --color-primary-base: #0046ab;
+  --color-primary-dark: #003889;
+  --color-primary-darker: #002a67;
+  --color-primary-darkest: #001c44;
+
+  /* ---------------------------------------------------------------------------
+   * COLORS - Secondary Palette
+   * ---------------------------------------------------------------------------*/
+  --color-secondary-lightest: #ffffff;
+  --color-secondary-lighter: #f5f5f6;
+  --color-secondary-light: #c1c5c8;
+  --color-secondary-base: #9ea5a9;
+  --color-secondary-dark: #7b858a;
+  --color-secondary-darker: #5c6468;
+  --color-secondary-darkest: #3d4245;
+
+  /* ---------------------------------------------------------------------------
+   * COLORS - Green Palette
+   * ---------------------------------------------------------------------------*/
+  --color-green-lightest: #2ecc90;
+  --color-green-lighter: #29b47f;
+  --color-green-light: #209066;
+  --color-green-base: #1b7855;
+  --color-green-dark: #166044;
+  --color-green-darker: #104833;
+  --color-green-darkest: #0b3022;
+
+  /* ---------------------------------------------------------------------------
+   * COLORS - Orange Palette
+   * ---------------------------------------------------------------------------*/
+  --color-orange-lightest: #fffbf6;
+  --color-orange-lighter: #ffe0bb;
+  --color-orange-light: #ffb763;
+  --color-orange-base: #ff9c28;
+  --color-orange-dark: #ec7f00;
+  --color-orange-darker: #b15f00;
+  --color-orange-darkest: #764000;
+
+  /* ---------------------------------------------------------------------------
+   * COLORS - Red Palette
+   * ---------------------------------------------------------------------------*/
+  --color-red-lightest: #f1b1b1;
+  --color-red-lighter: #ea8787;
+  --color-red-light: #df4949;
+  --color-red-base: #d12525;
+  --color-red-dark: #a71e1e;
+  --color-red-darker: #7d1616;
+  --color-red-darkest: #540f0f;
+
+  /* ---------------------------------------------------------------------------
+   * COLORS - Named
+   * ---------------------------------------------------------------------------*/
+  --color-black: #000000;
+  --color-white: #ffffff;
+  --color-blue: #0046ab;
+
+  /* ---------------------------------------------------------------------------
+   * TYPOGRAPHY - Font Family
+   * ---------------------------------------------------------------------------*/
+  --font-family-body: "Mulish", Arial, sans-serif;
+
+  /* ---------------------------------------------------------------------------
+   * TYPOGRAPHY - Font Size (aligned with Figma)
+   * ---------------------------------------------------------------------------*/
+  --font-size-xxs: 0.5rem; /* 8px */
+  --font-size-xs: 0.75rem; /* 12px */
+  --font-size-sm: 0.875rem; /* 14px */
+  --font-size-md: 1rem; /* 16px - base */
+  --font-size-lg: 1.125rem; /* 18px */
+  --font-size-xl: 1.375rem; /* 22px */
+  --font-size-2xl: 1.75rem; /* 28px */
+  --font-size-3xl: 2.125rem; /* 34px */
+
+  /* ---------------------------------------------------------------------------
+   * TYPOGRAPHY - Line Height
+   * ---------------------------------------------------------------------------*/
+  --line-height-base: 1.5715;
+
+  /* ---------------------------------------------------------------------------
+   * TYPOGRAPHY - Font Weight
+   * ---------------------------------------------------------------------------*/
+  --font-weight-regular: 400;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+
+  /* ---------------------------------------------------------------------------
+   * SPACING (aligned with Figma)
+   * ---------------------------------------------------------------------------*/
+  --spacing-none: 0; /* 0px */
+  --spacing-xxs: 0.25rem; /* 4px */
+  --spacing-xs: 0.5rem; /* 8px */
+  --spacing-sm: 0.75rem; /* 12px */
+  --spacing-md: 1rem; /* 16px */
+  --spacing-lg: 1.5rem; /* 24px */
+  --spacing-xl: 2rem; /* 32px */
+
+  /* ---------------------------------------------------------------------------
+   * BORDER RADIUS (aligned with Figma)
+   * ---------------------------------------------------------------------------*/
+  --border-radius-none: 0;
+  --border-radius-sm: 5px;
+  --border-radius-xl: 30px;
+  --border-radius-full: 50%;
+
+  /* ---------------------------------------------------------------------------
+   * SHADOWS
+   * ---------------------------------------------------------------------------*/
+  --shadow-sm: 0 3px 6px #c1c5c8;
+  --shadow-checkbox: 0px 0px 0px 9px rgba(36, 125, 255, 0.25);
+
+  /* ---------------------------------------------------------------------------
+   * BREAKPOINTS (px values)
+   * ---------------------------------------------------------------------------*/
+  --breakpoint-xs: 320px;
+  --breakpoint-sm: 576px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 992px;
+  --breakpoint-xl: 1200px;
+  --breakpoint-xxl: 1600px;
+  --breakpoint-3xl: 1920px;
+
+  /* ---------------------------------------------------------------------------
+   * Z-INDEX
+   * ---------------------------------------------------------------------------*/
+  --z-index-base: 0;
+  --z-index-raised: 1;
+  --z-index-overlay: 2;
+  --z-index-drawer: 3;
+  --z-index-dropdown: 100;
+  --z-index-sidebar: 1001;
+  --z-index-modal: 1001;
+
+  /* ---------------------------------------------------------------------------
+   * TRANSITIONS
+   * ---------------------------------------------------------------------------*/
+  --transition-fast: 0.2s;
+  --transition-base: 0.3s;
+  --transition-ease-in: 0.2s ease-in;
+  --transition-ease-in-out: 0.3s ease-in-out;
+  --transition-ease-out: 0.2s ease;
+}

package/dist/types/icons/client/skills/index.d.ts

@@ -1,4 +1,5 @@
 export { default as BrainSVG } from "./brain.svg";
+export { default as BrainCircuitSVG } from "./brain-circuit-icon.svg";
 export { default as DeactivateSVG } from "./deactivate.svg";
 export { default as AiChipSVG } from "./ai_chip.svg";
 export { default as ExitAssessmentSVG } from "./exit_assessment.svg";

package/dist/types/index.d.ts

@@ -24,6 +24,7 @@ export { default as ToastNotification } from "./components/Toast/ToastNotificati
 export { default as Heading } from "./components/Heading/Heading";
 export { default as Text } from "./components/Text/Text";
 export { typeScale } from "./theme/utils/typography";
+export { colorBase, colors, typography, spacing, borderRadius, shadows, breakpoints, mediaQueries, zIndex, transitions, } from "./theme/tokens";
 export { default as Label } from "./components/FormElements/Label/Label";
 export { default as Input } from "./components/FormElements/Input/Input";
 export { default as FormError } from "./components/FormElements/FormError/FormError";