uikit-react-public 0.17.4 → 0.21.9

package/lib/theme/original/defaultTheme.ts

@@ -0,0 +1,207 @@
+import { typography, primitiveColour } from '../common/themeCommon';
+import color, { blackAndWhite, displayColours } from './color';
+import originalColour from './originalColourNewStructure';
+
+// UCL Theme
+
+const baseSizes = {
+  s1: '1px',
+  s2: '2px',
+  s4: '4px',
+  s6: '6px',
+  s8: '8px',
+  s12: '12px',
+  s16: '16px',
+  s20: '20px',
+  s24: '24px',
+  s28: '28px',
+  s32: '32px',
+  s36: '36px',
+  s40: '40px',
+  s44: '44px',
+  s48: '48px',
+  s52: '52px',
+  s56: '56px',
+  s60: '60px',
+  s64: '64px',
+  s72: '72px',
+  s80: '80px',
+};
+
+const margin = {
+  m0: 0,
+  m2: baseSizes.s2,
+  m4: baseSizes.s4,
+  m6: baseSizes.s6,
+  m8: baseSizes.s8,
+  m12: baseSizes.s12,
+  m16: baseSizes.s16,
+  m20: baseSizes.s20,
+  m24: baseSizes.s24,
+  m32: baseSizes.s32,
+  m40: baseSizes.s40,
+  m48: baseSizes.s48,
+  m56: baseSizes.s56,
+  m64: baseSizes.s64,
+  m72: baseSizes.s72,
+  m80: baseSizes.s80,
+};
+
+const padding = {
+  p0: 0,
+  p2: baseSizes.s2,
+  p4: baseSizes.s4,
+  p6: baseSizes.s6,
+  p8: baseSizes.s8,
+  p12: baseSizes.s12,
+  p16: baseSizes.s16,
+  p20: baseSizes.s20,
+  p24: baseSizes.s24,
+  p32: baseSizes.s32,
+  p40: baseSizes.s40,
+  p48: baseSizes.s48,
+  p56: baseSizes.s56,
+  p64: baseSizes.s64,
+  p72: baseSizes.s72,
+  p80: baseSizes.s80,
+};
+
+const breakpoints = {
+  mobile: 320,
+  tablet: 672,
+  desktop: 1056,
+  desktopLarge: 1536,
+};
+
+const createMediaQuery = (breakpoint: number) =>
+  // Breakpoints apply at the specified width and above
+  `@media (min-width: ${breakpoint}px)`;
+
+const custom = (breakpoint: number) =>
+  // Fallback for edge cases
+  createMediaQuery(breakpoint);
+
+const mq = {
+  mobile: createMediaQuery(breakpoints.mobile),
+  tablet: createMediaQuery(breakpoints.tablet),
+  desktop: createMediaQuery(breakpoints.desktop),
+  desktopLarge: createMediaQuery(breakpoints.desktopLarge),
+  custom,
+};
+
+const theme = {
+  // new
+  primitiveColour,
+  colour: originalColour,
+  typography,
+
+  // to deprecate
+  color,
+
+  thickness: {
+    t1: baseSizes.s1,
+    t2: baseSizes.s2,
+  },
+
+  width: {
+    h16: baseSizes.s16,
+    h20: baseSizes.s20,
+    h24: baseSizes.s24,
+  },
+
+  height: {
+    h16: baseSizes.s16,
+    h20: baseSizes.s20,
+    h24: baseSizes.s24,
+    h32: baseSizes.s32,
+    h36: baseSizes.s36,
+    h40: baseSizes.s40,
+    h80: baseSizes.s80,
+  },
+
+  margin,
+
+  padding,
+
+  radius: {
+    r2: baseSizes.s2,
+    r4: baseSizes.s4,
+    r8: baseSizes.s8,
+    r12: baseSizes.s12,
+    r16: baseSizes.s16,
+  },
+
+  border: {
+    b1: baseSizes.s1,
+    b2: baseSizes.s2,
+  },
+
+  outline: {
+    o2: baseSizes.s2,
+    o4: baseSizes.s4,
+  },
+
+  font: {
+    family: {
+      primary: 'Helvetica, "Helvetica Neue", Arial, sans-serif',
+      secondary:
+        'Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif',
+      fixed: 'Courier, fixed',
+    },
+    size: {
+      f12: '12px',
+      f14: '14px', // Font should be at least 14px in most cases
+      f16: '16px', // Prefer 16px to 14px in most cases
+      f18: '18px',
+      f20: '20px',
+      f22: '22px',
+      f24: '24px',
+      f26: '26px',
+      f28: '28px',
+      f30: '30px',
+      f32: '32px',
+      f36: '36px',
+      f40: '40px',
+    },
+    weight: {
+      light: 300,
+      regular: 400,
+      medium: 500,
+      semiBold: 600,
+      bold: 700,
+      extraBold: 800,
+    },
+    lineHeight: {
+      h100: '100%',
+      h110: '110%',
+      h120: '120%',
+      h130: '130%',
+      h140: '140%',
+      h150: '150%',
+    },
+  },
+
+  boxShadow: {
+    // offset-x | offset-y | blur-radius | spread-radius | color
+    y1: '0 1px 4px 1px rgba(0, 0, 0, 0.1)',
+    y2: '0 2px 4px 1px rgba(0, 0, 0, 0.1)',
+    x2y4: '2px 4px 8px 4px rgba(0, 0, 0, 0.1)',
+    focus: `0px 0px 0px 2px ${color.neutral.white}, 0px 0px 0px 4px ${color.neutral.black}, 0px 0px 0px 6px ${color.system.orange70}`,
+    active: `0px 6px 0px 0px ${color.interaction.blue80} inset`,
+    destructiveActive: `0px 6px 0px 0px ${color.system.red100} inset`,
+  },
+
+  breakpoints,
+  mq,
+
+  // For ease of use, margin and padding are added at the top level
+  // Usage: margin-top: ${theme.m16};
+  ...margin,
+  ...padding,
+};
+
+export type ThemeType = typeof theme;
+export type DisplayColoursType = typeof displayColours;
+export type BlackAndWhiteColoursType = typeof blackAndWhite;
+
+export default theme;

package/lib/theme/original/originalColourNewStructure.ts

@@ -0,0 +1,185 @@
+import { tokens } from 'design-system-foundations-public';
+import tokenToHex from '../../utils/addAlphaToHex';
+import color from './color';
+
+const { light: lightThemeTokens } = tokens;
+
+// UCL Original Theme Colours - in new format
+
+const bg = {
+  default: tokenToHex(lightThemeTokens.colour.bg.default.$value),
+  brand: tokenToHex(lightThemeTokens.colour.bg.brand.$value),
+  inverse: color.interaction.blue70, // tokenToHex(lightThemeTokens.colour.bg.inverse.$value),
+  inversePrimary: color.interaction.blue100, // tokenToHex(lightThemeTokens.colour.bg['inverse-primary'].$value),
+};
+
+const border = {
+  default: tokenToHex(lightThemeTokens.colour.border.default.$value),
+  brand: color.interaction.blue70, // tokenToHex(lightThemeTokens.colour.border.brand.$value),
+  brandHover: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.border['brand-hover'].$value),
+  brandSubtle: color.base.blue20Alt, // tokenToHex(lightThemeTokens.colour.border['brand-subtle'].$value),
+  primary: tokenToHex(lightThemeTokens.colour.border.primary.$value),
+  secondary: tokenToHex(lightThemeTokens.colour.border.secondary.$value),
+  tertiary: tokenToHex(lightThemeTokens.colour.border.tertiary.$value),
+  subtle: tokenToHex(lightThemeTokens.colour.border.subtle.$value),
+  disabled: tokenToHex(lightThemeTokens.colour.border.disabled.$value),
+  inverse: tokenToHex(lightThemeTokens.colour.border.inverse.$value),
+  brandInverse: tokenToHex(
+    lightThemeTokens.colour.border['brand-inverse'].$value
+  ),
+  brandInverseSecondary: color.base.blue40, // tokenToHex(lightThemeTokens.colour.border['brand-inverse-secondary'].$value),
+  focus: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.border.focus.$value),
+  success: color.system.green70, // tokenToHex(lightThemeTokens.colour.border.success.$value),
+  critical: color.system.red70, // tokenToHex(lightThemeTokens.colour.border.critical.$value),
+  warning: color.system.orange70, // tokenToHex(lightThemeTokens.colour.border.warning.$value),
+};
+
+const fill = {
+  default: tokenToHex(lightThemeTokens.colour.fill.default.$value),
+  hover: tokenToHex(lightThemeTokens.colour.fill.hover.$value),
+  brand: color.interaction.blue70, // tokenToHex(lightThemeTokens.colour.fill.brand.$value),
+  brandHover: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.fill['brand-hover'].$value),
+  brandPressed: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.fill['brand-pressed'].$value),
+  brandSubtleSelected: color.interaction.blue10, // tokenToHex(lightThemeTokens.colour.fill['brand-subtle-selected'].$value),
+  brandSubtleHover: color.interaction.blue10, // tokenToHex(lightThemeTokens.colour.fill['brand-subtle-hover'].$value),
+  brandPrimary: color.interaction.blue100, // tokenToHex(lightThemeTokens.colour.fill['brand-primary'].$value),
+  disabled: tokenToHex(lightThemeTokens.colour.fill.disabled.$value),
+  inverse: tokenToHex(lightThemeTokens.colour.fill.inverse.$value),
+  brandInverseSecondary: color.base.blue40, // tokenToHex(lightThemeTokens.colour.fill['brand-inverse-secondary'].$value),
+  inverseHover: color.base.blue20Alt, // tokenToHex(lightThemeTokens.colour.fill['inverse-hover'].$value),
+  critical: color.system.red70, // tokenToHex(lightThemeTokens.colour.fill.critical.$value),
+  criticalHover: color.base.red80, // tokenToHex(lightThemeTokens.colour.fill['critical-hover'].$value),
+  criticalSelected: color.base.red80, // tokenToHex(lightThemeTokens.colour.fill['critical-selected'].$value),
+  criticalPressed: color.base.red90, // tokenToHex(lightThemeTokens.colour.fill['critical-pressed'].$value),
+  warning: tokenToHex(lightThemeTokens.colour.fill.warning.$value),
+  warningHover: tokenToHex(
+    lightThemeTokens.colour.fill['warning-hover'].$value
+  ),
+  warningSelected: tokenToHex(
+    lightThemeTokens.colour.fill['warning-selected'].$value
+  ),
+  warningPressed: tokenToHex(
+    lightThemeTokens.colour.fill['warning-pressed'].$value
+  ),
+  success: color.system.green70, // tokenToHex(lightThemeTokens.colour.fill.success.$value),
+};
+
+const icon = {
+  default: tokenToHex(lightThemeTokens.colour.icon.default.$value),
+  hover: tokenToHex(lightThemeTokens.colour.icon.hover.$value),
+  secondary: tokenToHex(lightThemeTokens.colour.icon.secondary.$value),
+  tertiary: tokenToHex(lightThemeTokens.colour.icon.tertiary.$value),
+  disabled: tokenToHex(lightThemeTokens.colour.icon.disabled.$value),
+  disabledOnBgFill: tokenToHex(
+    lightThemeTokens.colour.icon['disabled-on-bg-fill'].$value
+  ),
+  brand: color.interaction.blue70, // tokenToHex(lightThemeTokens.colour.icon.brand.$value),
+  brandHover: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.icon['brand-hover'].$value),
+  brandSelectedOnBgFill: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.icon['brand-selected-on-bg-fill'].$value),
+  visited: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.icon.visited.$value),
+  brandPrimary: color.interaction.blue100, // tokenToHex(lightThemeTokens.colour.icon['brand-primary'].$value),
+  brandInverted: tokenToHex(
+    lightThemeTokens.colour.icon['brand-inverted'].$value
+  ),
+  inverse: tokenToHex(lightThemeTokens.colour.icon.inverse.$value),
+  inverseHover: tokenToHex(
+    lightThemeTokens.colour.icon['inverse-hover'].$value
+  ),
+  brandInverseSecondary: color.base.blue40, // tokenToHex(lightThemeTokens.colour.icon['brand-inverse-secondary'].$value),
+  inverseTertiary: tokenToHex(
+    lightThemeTokens.colour.icon['inverse-tertiary'].$value
+  ),
+  inverseDisabled: tokenToHex(
+    lightThemeTokens.colour.icon['inverse-disabled'].$value
+  ),
+  critical: color.system.red70, // tokenToHex(lightThemeTokens.colour.icon.critical.$value),
+  criticalOnBgFill: color.base.red80, // tokenToHex(lightThemeTokens.colour.icon['critical-on-bg-fill'].$value),
+  success: color.system.green70, // tokenToHex(lightThemeTokens.colour.icon.success.$value),
+  successOnBgFill: tokenToHex(
+    lightThemeTokens.colour.icon['success-on-bg-fill'].$value
+  ),
+  warning: tokenToHex(lightThemeTokens.colour.icon.warning.$value),
+  warningOnBgFill: tokenToHex(
+    lightThemeTokens.colour.icon['warning-on-bg-fill'].$value
+  ),
+};
+
+const surface = {
+  default: tokenToHex(lightThemeTokens.colour.surface.default.$value),
+  primary: tokenToHex(lightThemeTokens.colour.surface.primary.$value),
+  secondary: tokenToHex(lightThemeTokens.colour.surface.secondary.$value),
+  brand: color.base.blue15, // tokenToHex(lightThemeTokens.colour.surface.brand.$value),
+  brandHover: color.interaction.blue10, // tokenToHex(lightThemeTokens.colour.surface['brand-hover'].$value),
+  brandSelected: color.interaction.blue10, // tokenToHex(lightThemeTokens.colour.surface['brand-selected'].$value),
+  warning: color.system.orange10, // tokenToHex(lightThemeTokens.colour.surface.warning.$value),
+  success: color.system.green10, // tokenToHex(lightThemeTokens.colour.surface.success.$value),
+  critical: color.system.red10, // tokenToHex(lightThemeTokens.colour.surface.critical.$value),
+  hover: tokenToHex(lightThemeTokens.colour.surface.hover.$value),
+  selected: tokenToHex(lightThemeTokens.colour.surface.selected.$value),
+  disabled: tokenToHex(lightThemeTokens.colour.surface.disabled.$value),
+  tertiary: tokenToHex(lightThemeTokens.colour.surface.tertiary.$value),
+  inverseBrand: color.interaction.blue70, // tokenToHex(lightThemeTokens.colour.surface['inverse-brand'].$value),
+  inverseBrandPrimary: color.interaction.blue100, // tokenToHex(lightThemeTokens.colour.surface['inverse-brand-primary'].$value),
+  backdrop: tokenToHex(lightThemeTokens.colour.surface.backdrop.$value),
+};
+
+const text = {
+  default: tokenToHex(lightThemeTokens.colour.text.default.$value),
+  secondary: tokenToHex(lightThemeTokens.colour.text.secondary.$value),
+  tertiary: tokenToHex(lightThemeTokens.colour.text.tertiary.$value),
+  disabled: tokenToHex(lightThemeTokens.colour.text.disabled.$value),
+  inverse: tokenToHex(lightThemeTokens.colour.text.inverse.$value),
+  onBgFillDisabled: tokenToHex(
+    lightThemeTokens.colour.text['on-bg-fill-disabled'].$value
+  ),
+  brand: color.interaction.blue70, // tokenToHex(lightThemeTokens.colour.text.brand.$value),
+  brandAccent: tokenToHex(lightThemeTokens.colour.text['brand-accent'].$value),
+  brandHover: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.text['brand-hover'].$value),
+  brandInverse: tokenToHex(
+    lightThemeTokens.colour.text['brand-inverse'].$value
+  ),
+  brandInverseSecondary: color.base.blue40, // tokenToHex(lightThemeTokens.colour.text['brand-inverse-secondary'].$value),
+  brandPrimary: color.interaction.blue100, // tokenToHex(lightThemeTokens.colour.text['brand-primary'].$value),
+  critical: color.system.red70, // tokenToHex(lightThemeTokens.colour.text.critical.$value),
+  warningOnBgFill: tokenToHex(
+    lightThemeTokens.colour.text['warning-on-bg-fill'].$value
+  ),
+};
+
+const link = {
+  default: tokenToHex(lightThemeTokens.colour.link.default.$value),
+  brand: color.interaction.blue70, // tokenToHex(lightThemeTokens.colour.link.brand.$value),
+  brandHover: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.link['brand-hover'].$value),
+  visited: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.link.visited.$value),
+  primary: color.interaction.blue100, // tokenToHex(lightThemeTokens.colour.link.primary.$value),
+  primaryHover: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.link['primary-hover'].$value),
+  disabled: tokenToHex(lightThemeTokens.colour.link.disabled.$value),
+  inverse: tokenToHex(lightThemeTokens.colour.link.inverse.$value),
+  inverseVisited: color.base.blue15, // tokenToHex(lightThemeTokens.colour.link['inverse-visited'].$value),
+  inverseDisabled: tokenToHex(
+    lightThemeTokens.colour.link['inverse-disabled'].$value
+  ),
+  inverseSecondary: color.base.blue40, // tokenToHex(lightThemeTokens.colour.link['inverse-secondary'].$value),
+  inverseTertiary: tokenToHex(
+    lightThemeTokens.colour.link['inverse-tertiary'].$value
+  ),
+};
+
+const speciality = {
+  inputDefault: tokenToHex(
+    lightThemeTokens.colour.speciality['input-default'].$value
+  ),
+};
+
+const colour = {
+  bg,
+  border,
+  fill,
+  icon,
+  surface,
+  text,
+  link,
+  speciality,
+};
+
+export default colour;

package/lib/theme/useTheme.tsx

@@ -1,24 +1,81 @@
-// We will probably move away from context/provider to store/hook for accessing theme.
+import { createContext, useState, useContext, ReactNode } from 'react';
+import { Global, css } from '@emotion/react';
+import { ThemeType } from './original/defaultTheme';
+import theme from './original/defaultTheme';
+import { uikitFontUrls } from './fonts';
 
-import {
-  createContext,
-  useState,
-  useContext,
-  ReactNode,
-} from 'react';
+const useThemeState = (initialTheme: ThemeType = theme as ThemeType) =>
+  useState(initialTheme);
 
-import theme, { ThemeType } from './defaultTheme';
-
-const useThemeState = () => useState(theme as ThemeType);
+const ThemeContext = createContext<ReturnType<typeof useThemeState> | null>(
+  null
+);
 
-const ThemeContext = createContext<ReturnType<
-  typeof useThemeState
-> | null>(null);
+const fontFaces = css`
+  @font-face {
+    font-family: 'DM Sans';
+    src: url(${uikitFontUrls.dmSansNormal}) format('woff2');
+    font-weight: 100 1000;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'DM Sans';
+    src: url(${uikitFontUrls.dmSansItalic}) format('woff2');
+    font-weight: 100 1000;
+    font-style: italic;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'DM Mono';
+    src: url(${uikitFontUrls.dmMonoItalic}) format('woff2');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'DM Mono';
+    src: url(${uikitFontUrls.dmMonoLight}) format('woff2');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'DM Mono';
+    src: url(${uikitFontUrls.dmMonoLightItalic}) format('woff2');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'DM Mono';
+    src: url(${uikitFontUrls.dmMonoMedium}) format('woff2');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'DM Mono';
+    src: url(${uikitFontUrls.dmMonoMediumItalic}) format('woff2');
+    font-weight: 500;
+    font-style: italic;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'DM Mono';
+    src: url(${uikitFontUrls.dmMonoRegular}) format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+  }
+`;
 
 export const ThemeContextProvider: React.FC<{
   children: ReactNode;
-}> = ({ children }) => (
-  <ThemeContext.Provider value={useThemeState()}>
+  initialTheme?: ThemeType;
+}> = ({ children, initialTheme }) => (
+  <ThemeContext.Provider value={useThemeState(initialTheme)}>
+    <Global styles={fontFaces} />
     {children}
   </ThemeContext.Provider>
 );

package/lib/types/assets.d.ts

@@ -0,0 +1,10 @@
+// lib/types/assets.d.ts
+declare module '*.woff2?url' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.woff2' {
+  const src: string;
+  export default src;
+}

package/lib/utils/addAlphaToHex.ts

@@ -0,0 +1,29 @@
+const tokenToHex = (token: { hex: string; alpha?: number }) => {
+
+  const { hex, alpha } = token;
+
+  const effectiveAlpha = alpha ?? 1;
+
+  if (isNaN(effectiveAlpha) || effectiveAlpha === 1) {
+    return hex;
+  }
+
+  const clean = hex.replace('#', '');
+
+  // Convert #RGB to #RRGGBB
+  const normalized =
+    clean.length === 3
+      ? clean.split('').map((c) => c + c).join('')
+      : clean.slice(0, 6);
+
+  if (!effectiveAlpha || effectiveAlpha === 1) return `#${normalized}`;
+
+  const alphaHex = Math.round(effectiveAlpha * 255)
+    .toString(16)
+    .padStart(2, '0')
+    .toUpperCase();
+
+  return `#${normalized}${alphaHex}`;
+};
+
+export default tokenToHex;

package/lib/utils/scrollToTop.ts

@@ -0,0 +1,5 @@
+const scrollToTop = () => {
+  window?.scrollTo({ top: 0, behavior: 'smooth' });
+};
+
+export default scrollToTop;

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.17.4",
+  "version": "0.21.9",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -10,6 +10,9 @@
     "dist",
     "lib"
   ],
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "dev": "vite",
     "dev_expose": "vite --host",
@@ -25,9 +28,7 @@
     "coverage": "vitest run --coverage",
     "report": "vite ./coverage",
     "preview": "vite preview",
-    "prepublishOnly": "npm run build",
-    "prepare": "husky",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006 --disable-telemetry",
     "build-storybook": "storybook build",
     "predeploy": "npm run build-storybook",
     "deploy": "gh-pages -d storybook-static"
@@ -39,7 +40,9 @@
   },
   "dependencies": {
     "@emotion/css": "^11.13.5",
-    "@floating-ui/react-dom": "^2.1.2"
+    "@emotion/react": "^11.14.0",
+    "@floating-ui/react-dom": "^2.1.2",
+    "design-system-foundations-public": "0.0.37"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -63,7 +66,8 @@
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^22.13.10",
-    "@types/react-dom": "^19.1.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.26.1",
     "@typescript-eslint/parser": "^8.26.1",
     "@vitejs/plugin-basic-ssl": "^2.0.0",
@@ -86,6 +90,7 @@
     "prettier": "^3.5.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-router": "^7.13.1",
     "storybook": "^8.6.4",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.26.1",

package/dist/components/Button/buttonPrimaryStyle.d.ts

@@ -1,4 +0,0 @@
-import { ThemeType } from '../../theme';
-import { ButtonBaseProps } from './Button';
-declare const buttonPrimaryStyle: (theme: ThemeType, destructive: ButtonBaseProps["destructive"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"]) => string;
-export default buttonPrimaryStyle;

package/dist/components/Button/buttonSecondaryStyle.d.ts

@@ -1,4 +0,0 @@
-import { ThemeType } from '../../theme';
-import { ButtonBaseProps } from './Button';
-declare const buttonSecondaryStyle: (theme: ThemeType, destructive: ButtonBaseProps["destructive"], disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"]) => string;
-export default buttonSecondaryStyle;

package/dist/components/Button/buttonTertiaryStyle.d.ts

@@ -1,4 +0,0 @@
-import { ThemeType } from '../../theme';
-import { ButtonBaseProps } from './Button';
-declare const buttonTertiaryStyle: (theme: ThemeType, disabled: ButtonBaseProps["disabled"], loading: ButtonBaseProps["loading"]) => string;
-export default buttonTertiaryStyle;