@gobolt/genesis 0.6.1 → 0.6.3

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

@@ -1,7 +1,7 @@
 import { default as React, MouseEvent } from 'react';
 import { ButtonProps as AntButtonProperties } from 'antd/es/button';
 import { STATE } from '../../constants';
-type ButtonThemeType = "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
+type ButtonThemeType = "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon" | "password";
 export interface ButtonProps extends Omit<AntButtonProperties, "type" | "size"> {
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     children?: React.ReactNode;

package/dist/components/Button/icon-button-styles.d.ts

@@ -1,7 +1,7 @@
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
 interface StyledIconButtonProperties {
     theme?: GenesisTheme;
-    $themeType?: "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
+    $themeType?: "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon" | "password";
     $state?: "active" | "hover" | "pressed" | "focus" | "disabled" | "selected";
     children?: React.ReactNode;
     $isIconButton?: boolean;

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

@@ -2,7 +2,7 @@ import { ButtonProps as AntButtonProperties } from 'antd/es/button';
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
 interface StyledButtonProperties extends Omit<AntButtonProperties, "type" | "size"> {
     theme?: GenesisTheme;
-    $themeType?: "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
+    $themeType?: "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon" | "password";
     $state?: "active" | "hover" | "pressed" | "focus" | "disabled" | "selected";
     children?: React.ReactNode;
     $isIconButton?: boolean;

package/dist/components/Input/Input.d.ts

@@ -8,6 +8,7 @@ export interface InputProps extends BaseInputProps {
     size?: "normal" | "small" | "large";
     onChange?: (actionEvent: InputEvent) => void;
     value?: string;
+    rest?: HTMLInputElement;
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
 export default Input;

package/dist/components/InputAddon/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledFormInput: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<import('..').InputProps & import('react').RefAttributes<import('rc-input').InputRef>, "ref"> & {
+    ref?: ((instance: import('rc-input').InputRef | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<import('rc-input').InputRef> | null | undefined;
+}, never>> & string & Omit<import('react').ForwardRefExoticComponent<import('..').InputProps & import('react').RefAttributes<import('rc-input').InputRef>>, keyof import('react').Component<any, {}, any>>;

package/dist/components/Select/SelectTrigger.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { STATE } from '../../constants';
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
-type ThemeType = "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
+type ThemeType = "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon" | "password";
 type Variant = "none" | "simple";
 interface SelectTriggerProperties {
     type?: ThemeType;

package/dist/components/Typography/styles.d.ts

@@ -5,11 +5,12 @@ interface TypographyStyledProperties {
     $themeType?: keyof typeof TYPE;
     variant?: string;
     state?: keyof typeof STATE;
-    breakpoint?: string;
     color?: string;
     fontWeight?: number;
     fontSize?: string;
     $isFullWidth?: boolean;
+    $letterSpacing?: string;
+    $lineHeight?: string;
 }
 export declare const Headline: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('antd/es/typography/Title').TitleProps & import('react').RefAttributes<HTMLElement>, "ref"> & {
     ref?: ((instance: HTMLElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLElement> | null | undefined;

package/dist/constants/index.d.ts

@@ -5,6 +5,7 @@ export declare const TYPE: {
     destructive: string;
     utility: string;
     icon: string;
+    password: string;
 };
 export declare const BREAKPOINTS: {
     wide: string;
@@ -86,6 +87,7 @@ declare const _default: {
         destructive: string;
         utility: string;
         icon: string;
+        password: string;
     };
     BREAKPOINTS: {
         wide: string;

package/dist/index.cjs

@@ -59296,36 +59296,28 @@ const Avatar$1 = styled(Avatar$2)`
   return getGenesisClass$d(theme, type4, state);
 }}
 `;
-const getBreakpoint = (breakpoint) => {
-  {
-    return "medium";
-  }
-};
-const getVariant$2 = (typography2, variant, breakpoint) => {
-  return `
-        font-size: ${typography2[getBreakpoint()][variant].fontSize}px !important;
-        line-height: ${typography2[getBreakpoint()][variant].lineHeight};
-        letter-spacing: ${typography2[getBreakpoint()][variant].letterSpacing}px;
-        font-weight: ${typography2[getBreakpoint()][variant].fontWeight};
-      `;
-};
 const getColor = (color2, colors2, $themeType) => {
   if (color2) {
     return color2;
   }
-  return colors2[$themeType].active.color;
+  const themeColor = colors2[$themeType];
+  if (themeColor?.active?.default) {
+    return themeColor.active.default;
+  }
+  return colors2?.secondary?.active?.default || "#000000";
 };
 const getFontFamily = (variant) => {
   return `
     ${variant.includes("digits") ? "'Roboto Mono', sans-serif" : "'Inter', sans-serif"} !important;
   `;
 };
-const getGenesisTypographyClass = ({ colors: colors2, typography: typography2 }, $themeType, variant, state, breakpoint, color2, fontSize, fontWeight, $isFullWidth) => `
+const getGenesisTypographyClass = ({ colors: colors2, typography: typography2 }, $themeType, variant, state, color2, $isFullWidth, fontSize, fontWeight, $letterSpacing, $lineHeight) => `
     &.ant-typography {
       font-family: ${getFontFamily(variant)};
       color: ${getColor(color2, colors2, $themeType)} !important;
-      ${getVariant$2(typography2, variant)}
       margin-bottom: 0 !important;
+      letter-spacing: ${$letterSpacing} !important;
+      line-height: ${$lineHeight} !important;
       width: ${$isFullWidth ? "100%" : "auto"};
       font-weight: ${fontWeight} !important;
       font-size: ${fontSize} !important;
@@ -59345,22 +59337,24 @@ const Headline = styled(Typography$1.Title)`
   $themeType,
   variant,
   state,
-  breakpoint,
   color: color2,
   fontSize,
   fontWeight,
-  $isFullWidth
+  $isFullWidth,
+  $letterSpacing,
+  $lineHeight
 }) => {
   return getGenesisTypographyClass(
     theme,
     $themeType,
     variant,
     state,
-    breakpoint,
     color2,
+    $isFullWidth,
     fontSize,
     fontWeight,
-    $isFullWidth
+    $letterSpacing,
+    $lineHeight
   );
 }}
 `;
@@ -59372,22 +59366,24 @@ const Paragraph = styled(
   $themeType,
   variant,
   state,
-  breakpoint,
   color: color2,
   $isFullWidth,
   fontSize,
-  fontWeight
+  fontWeight,
+  $letterSpacing,
+  $lineHeight
 }) => {
   return getGenesisTypographyClass(
     theme,
     $themeType,
     variant,
     state,
-    breakpoint,
     color2,
+    $isFullWidth,
     fontSize,
     fontWeight,
-    $isFullWidth
+    $letterSpacing,
+    $lineHeight
   );
 }}
 `;
@@ -59397,22 +59393,24 @@ const Text = styled(Typography$1.Text)`
   $themeType,
   variant,
   state,
-  breakpoint,
   color: color2,
+  $isFullWidth,
   fontSize,
   fontWeight,
-  $isFullWidth
+  $letterSpacing,
+  $lineHeight
 }) => {
   return getGenesisTypographyClass(
     theme,
     $themeType,
     variant,
     state,
-    breakpoint,
     color2,
+    $isFullWidth,
     fontSize,
     fontWeight,
-    $isFullWidth
+    $letterSpacing,
+    $lineHeight
   );
 }}
 `;
@@ -59842,7 +59840,8 @@ const TYPE = {
   tertiary: "tertiary",
   destructive: "destructive",
   utility: "utility",
-  icon: "icon"
+  icon: "icon",
+  password: "primary"
 };
 const BREAKPOINTS = {
   wide: "wide",
@@ -60179,14 +60178,15 @@ const ToastRow = styled.div`
   align-items: center;
   gap: ${({ theme }) => theme.sizing.Size4}px;
   padding: ${({ theme }) => theme.sizing.Size3}px;
-  background-color: ${({ theme, state }) => theme.colors.surface.default};
+  /* background-color: ${({ theme, state }) => theme.colors.surface.default}; */
   border-left: ${({ theme, state }) => `2px solid ${theme.colors.status[state].default}`};
   pointer-events: none;
   cursor: default;
   border-radius: ${({ theme }) => theme.borderRadius.BorderRadiusXs}px;
   height: 56px;
   width: ${({ theme, state, size }) => size === "standard" ? "340px" : "240px"};
-  background-color: ${({ theme, state }) => theme.colors.surface.default};
+  /* background-color: ${({ theme, state }) => theme.colors.surface.default}; */
+  background-color: white;
   box-shadow: 0px 4px 16px 0px #00000026;
 `;
 const ToastCloseButton = styled.button`
@@ -60386,7 +60386,7 @@ const Typography = ({
   isDisabled,
   ...rest
 }) => {
-  const { breakpoint } = useGenesis();
+  const { breakpoint, theme } = useGenesis();
   if (variant.startsWith("display") || variant.startsWith("heading")) {
     const level = variant.split("heading")[1] || variant.split("display")[1];
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -60395,14 +60395,15 @@ const Typography = ({
         state,
         $themeType: themeType,
         variant,
-        breakpoint,
         color: color2,
         level: Number.parseInt(level),
         $isFullWidth: isFullWidth,
         style: style2,
-        fontSize,
+        fontSize: fontSize ?? theme.typography[breakpoint][variant].fontSize,
         fontWeight,
         disabled: isDisabled,
+        $letterSpacing: theme.typography[breakpoint][variant].letterSpacing,
+        $lineHeight: theme.typography[breakpoint][variant].lineHeight,
         ...rest,
         children: children2
       }
@@ -60416,13 +60417,14 @@ const Typography = ({
         state,
         $themeType: themeType,
         variant: validVariant,
-        breakpoint,
         color: color2,
         $isFullWidth: isFullWidth,
         style: style2,
         disabled: isDisabled,
-        fontSize,
+        fontSize: fontSize ?? theme.typography[breakpoint][variant].fontSize,
         fontWeight,
+        $letterSpacing: theme.typography[breakpoint][variant].letterSpacing,
+        $lineHeight: theme.typography[breakpoint][variant].lineHeight,
         ...rest,
         children: children2
       }
@@ -60434,13 +60436,14 @@ const Typography = ({
       state,
       $themeType: themeType,
       variant: validVariant,
-      breakpoint,
       color: color2,
       $isFullWidth: isFullWidth,
       style: style2,
       disabled: isDisabled,
-      fontSize,
+      fontSize: fontSize ?? theme.typography[breakpoint][variant].fontSize,
       fontWeight,
+      $letterSpacing: theme.typography[breakpoint][variant].letterSpacing,
+      $lineHeight: theme.typography[breakpoint][variant].lineHeight,
       ...rest,
       children: children2
     }
@@ -74120,11 +74123,11 @@ const Message$1 = ({ message: message2, handle, isThinking = false }) => {
     /* @__PURE__ */ jsxRuntime.jsx(TextContainer, { $isBot: isBot, children: isThinking ? /* @__PURE__ */ jsxRuntime.jsx(ThinkingIndicator, {}) : handle === "bot" ? /* @__PURE__ */ jsxRuntime.jsx(Markdown, { children: message2 }) : /* @__PURE__ */ jsxRuntime.jsx(MessageText, { children: message2 }) })
   ] });
 };
-const getStateColors = (colors2, type4, state) => {
+const getStateColors = (colors2, variant, state = "themeState") => {
   const filled = {
     color: colors2.inputs.onsurface.active,
     borderColor: colors2[TYPE.secondary].active.borderColor,
-    ringColor: colors2[type4]?.focussed?.ringColor
+    ringColor: colors2[variant]?.focussed?.ringColor
   };
   const success = {
     color: colors2.status.success.default,
@@ -74140,7 +74143,7 @@ const getStateColors = (colors2, type4, state) => {
     color: colors2.inputs.onsurface.active,
     backgroundColor: colors2.inputs.surface.active,
     borderColor: colors2.inputs.surface.border,
-    ringColor: type4 && state ? colors2[type4]?.[state]?.ringColor : void 0
+    ringColor: variant && state ? colors2[variant]?.[state]?.ringColor : void 0
   } : null;
   const stateMap = {
     filled,
@@ -74155,8 +74158,8 @@ const getStateColors = (colors2, type4, state) => {
   const css = stateMap[getValidKey(state)];
   return css;
 };
-const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, components: components2, shadows: shadows2 }, type4, state, hasBeforeAddon, hasAfterAddon, size) => {
-  const stateColors = getStateColors(colors2, type4, state);
+const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, components: components2, shadows: shadows2 }, type4, state, hasBeforeAddon, hasAfterAddon, size, variant) => {
+  const stateColors = getStateColors(colors2, variant, state);
   const getBorderRadius = (hasBeforeAddon2, hasAfterAddon2) => {
     if (hasAfterAddon2 && !hasBeforeAddon2) {
       return `${borderRadius2.BorderRadiusMd}px 0px 0px ${borderRadius2.BorderRadiusMd}px`;
@@ -74180,8 +74183,8 @@ const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, co
     &.ant-input.ant-input:focus-visible,
     &.ant-input.ant-input-focused {
       outline: none !important;
-      border-color: ${colors2[type4].focussed.borderColor} !important;
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor} !important;
+      border-color: ${colors2[variant].focussed.borderColor} !important;
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[variant].focussed.ringColor} !important;
     }
 
     &.ant-input-outlined {
@@ -74197,13 +74200,13 @@ const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, co
         outline: none;
         color: ${stateColors.color};
         box-shadow: none;
-        border-color: ${colors2[type4].focussed.borderColor};
+        border-color: ${colors2[variant].focussed.borderColor};
       }
     }
 
     .ant-input-group:focus-within {
       outline: none;
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[variant].focussed.ringColor};
       border-radius: ${borderRadius2.BorderRadiusMd}px;
       transition: box-shadow 0.2s ease-in-out;
 
@@ -74211,7 +74214,7 @@ const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, co
       .ant-input:focus-within {
         box-shadow: none;
         border-radius: 0;
-        border-radius: ${getBorderRadius(hasBeforeAddon, hasAfterAddon)};
+        border-radius: ${getBorderRadius(hasBeforeAddon || false, hasAfterAddon || false)};
         border-color: #ddd;
       }
     }
@@ -74222,13 +74225,13 @@ const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, co
     .ant-input-group .ant-input:focus-within {
       outline: none;
       box-shadow: none;
-      border-color: ${colors2[type4].focussed.borderColor};
+      border-color: ${colors2[variant].focussed.borderColor};
     }
 
     /* Single focus ring on group */
     .ant-input-group:focus-within {
       outline: none;
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[variant].focussed.ringColor};
       border-radius: ${borderRadius2.BorderRadiusMd}px;
       transition: box-shadow 0.2s ease-in-out;
     }
@@ -74237,18 +74240,18 @@ const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, co
     &:not(.ant-input-group):focus-visible {
       outline: none;
       color: ${stateColors.color};
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[variant].focussed.ringColor};
       border-radius: ${borderRadius2.BorderRadiusMd}px;
-      border-color: ${colors2[type4].focussed.borderColor};
+      border-color: ${colors2[variant].focussed.borderColor};
       transition: box-shadow 0.2s ease-in-out;
     }
 
     &:not(.ant-input-group .ant-input):focus-visible {
       outline: none;
       color: ${stateColors.color};
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[variant].focussed.ringColor};
       border-radius: ${borderRadius2.BorderRadiusMd}px;
-      border-color: ${colors2[type4].focussed.borderColor};
+      border-color: ${colors2[variant].focussed.borderColor};
       transition: box-shadow 0.2s ease-in-out;
     }
 
@@ -74289,7 +74292,7 @@ const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, co
   `;
 };
 const Input$1 = styled(Input$2)`
-  ${({ theme, state, type: type4 = TYPE.primary, size = "normal", ...rest }) => {
+  ${({ theme, state, type: type4, size = "normal", ...rest }) => {
   const hasBeforeAddon = !!rest.addonBefore;
   const hasAfterAddon = !!rest.addonAfter;
   return getGenesisInputClass(
@@ -74298,7 +74301,8 @@ const Input$1 = styled(Input$2)`
     state,
     hasBeforeAddon,
     hasAfterAddon,
-    size
+    size,
+    TYPE.primary
   );
 }}
 `;
@@ -74332,7 +74336,6 @@ const Input2 = React.forwardRef(
     value: value2,
     ...rest
   }, ref) => {
-    const { type: type4, ...validRest } = rest;
     const addonAfter = React.isValidElement(rest.addonAfter) && rest.addonAfter.type === Select$1 ? React.cloneElement(
       rest.addonAfter,
       {
@@ -74355,7 +74358,7 @@ const Input2 = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(
       Input$1,
       {
-        ...validRest,
+        ...rest,
         ref,
         size,
         state,
@@ -74790,6 +74793,53 @@ const Solid = (properties) => /* @__PURE__ */ jsxRuntime.jsx(
 const UnitNumber = ({ variant }) => {
   return variant === "outline" ? /* @__PURE__ */ jsxRuntime.jsx(Outline, {}) : /* @__PURE__ */ jsxRuntime.jsx(Solid, {});
 };
+const StyledFormInput = styled(Input2)`
+  /* Ensure the border color matches regular Input using Genesis theme token */
+  &.ant-input,
+  .ant-input-group .ant-input {
+    border-color: ${({ theme }) => theme.colors.inputs.surface.border} !important;
+  }
+
+  /* Input group wrapper styling - most specific selector for addon scenarios */
+  &.ant-input-group-wrapper .ant-input-group {
+    .ant-input {
+      border-color: ${({ theme }) => theme.colors.inputs.surface.border} !important;
+    }
+
+    .ant-input-group-addon {
+      border-color: ${({ theme }) => theme.colors.inputs.surface.border} !important;
+      background-color: #f5f5f5;
+    }
+  }
+
+  /* When input is in a group wrapper */
+  .ant-input-group-wrapper & {
+    border-color: ${({ theme }) => theme.colors.inputs.surface.border} !important;
+  }
+
+  /* Direct targeting of input group elements */
+  .ant-input-group .ant-input {
+    border-color: ${({ theme }) => theme.colors.inputs.surface.border} !important;
+  }
+
+  .ant-input-group-addon {
+    border-color: ${({ theme }) => theme.colors.inputs.surface.border} !important;
+  }
+
+  /* Hover and focus states should maintain the correct colors */
+  &.ant-input:hover,
+  &.ant-input:focus,
+  .ant-input-group .ant-input:hover,
+  .ant-input-group .ant-input:focus,
+  .ant-input-group-wrapper .ant-input-group:hover .ant-input,
+  .ant-input-group-wrapper .ant-input-group:focus-within .ant-input,
+  .ant-input-group-wrapper .ant-input-group:hover .ant-input-group-addon,
+  .ant-input-group-wrapper
+    .ant-input-group:focus-within
+    .ant-input-group-addon {
+    border-color: ${({ theme }) => theme.colors.inputs.surface.border} !important;
+  }
+`;
 const defaultValidator = (_rule, value2) => {
   console.log(`Validating value: ${value2}, Type: ${typeof value2}`);
   if (!value2 || /^\d+$/.test(value2)) {
@@ -74810,7 +74860,7 @@ const FormInput = React.forwardRef((props, ref) => {
   const { addonBefore, addonAfter, placeholder } = inputProps;
   if (addonBefore && !addonAfter) {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Input2,
+      StyledFormInput,
       {
         ...inputProps,
         ref,
@@ -74824,7 +74874,7 @@ const FormInput = React.forwardRef((props, ref) => {
   }
   if (addonAfter && !addonBefore) {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Input2,
+      StyledFormInput,
       {
         ...inputProps,
         ref,
@@ -74837,7 +74887,7 @@ const FormInput = React.forwardRef((props, ref) => {
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Input2,
+    StyledFormInput,
     {
       ...inputProps,
       ref,
@@ -81696,10 +81746,18 @@ const Progress = ({
             alignItems: "center",
             width: percentDisplayWidth
           },
-          children: /* @__PURE__ */ jsxRuntime.jsxs(Typography, { color: overrideTextColor ?? textColor, variant: "digits3", children: [
-            overallPercent,
-            "%"
-          ] })
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            Typography,
+            {
+              color: overrideTextColor ?? textColor,
+              variant: "digits3",
+              fontWeight: 700,
+              children: [
+                overallPercent,
+                "%"
+              ]
+            }
+          )
         }
       )
     ] });
@@ -81758,10 +81816,18 @@ const Progress = ({
             alignItems: "center",
             width: percentDisplayWidth
           },
-          children: /* @__PURE__ */ jsxRuntime.jsxs(Typography, { color: overrideTextColor ?? textColor, variant: "digits3", children: [
-            combinedPercent,
-            "%"
-          ] })
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            Typography,
+            {
+              color: overrideTextColor ?? textColor,
+              variant: "digits3",
+              fontWeight: 700,
+              children: [
+                combinedPercent,
+                "%"
+              ]
+            }
+          )
         }
       )
     ] });

package/dist/index.js

@@ -59278,36 +59278,28 @@ const Avatar$1 = styled(Avatar$2)`
   return getGenesisClass$d(theme, type4, state);
 }}
 `;
-const getBreakpoint = (breakpoint) => {
-  {
-    return "medium";
-  }
-};
-const getVariant$2 = (typography2, variant, breakpoint) => {
-  return `
-        font-size: ${typography2[getBreakpoint()][variant].fontSize}px !important;
-        line-height: ${typography2[getBreakpoint()][variant].lineHeight};
-        letter-spacing: ${typography2[getBreakpoint()][variant].letterSpacing}px;
-        font-weight: ${typography2[getBreakpoint()][variant].fontWeight};
-      `;
-};
 const getColor = (color2, colors2, $themeType) => {
   if (color2) {
     return color2;
   }
-  return colors2[$themeType].active.color;
+  const themeColor = colors2[$themeType];
+  if (themeColor?.active?.default) {
+    return themeColor.active.default;
+  }
+  return colors2?.secondary?.active?.default || "#000000";
 };
 const getFontFamily = (variant) => {
   return `
     ${variant.includes("digits") ? "'Roboto Mono', sans-serif" : "'Inter', sans-serif"} !important;
   `;
 };
-const getGenesisTypographyClass = ({ colors: colors2, typography: typography2 }, $themeType, variant, state, breakpoint, color2, fontSize, fontWeight, $isFullWidth) => `
+const getGenesisTypographyClass = ({ colors: colors2, typography: typography2 }, $themeType, variant, state, color2, $isFullWidth, fontSize, fontWeight, $letterSpacing, $lineHeight) => `
     &.ant-typography {
       font-family: ${getFontFamily(variant)};
       color: ${getColor(color2, colors2, $themeType)} !important;
-      ${getVariant$2(typography2, variant)}
       margin-bottom: 0 !important;
+      letter-spacing: ${$letterSpacing} !important;
+      line-height: ${$lineHeight} !important;
       width: ${$isFullWidth ? "100%" : "auto"};
       font-weight: ${fontWeight} !important;
       font-size: ${fontSize} !important;
@@ -59327,22 +59319,24 @@ const Headline = styled(Typography$1.Title)`
   $themeType,
   variant,
   state,
-  breakpoint,
   color: color2,
   fontSize,
   fontWeight,
-  $isFullWidth
+  $isFullWidth,
+  $letterSpacing,
+  $lineHeight
 }) => {
   return getGenesisTypographyClass(
     theme,
     $themeType,
     variant,
     state,
-    breakpoint,
     color2,
+    $isFullWidth,
     fontSize,
     fontWeight,
-    $isFullWidth
+    $letterSpacing,
+    $lineHeight
   );
 }}
 `;
@@ -59354,22 +59348,24 @@ const Paragraph = styled(
   $themeType,
   variant,
   state,
-  breakpoint,
   color: color2,
   $isFullWidth,
   fontSize,
-  fontWeight
+  fontWeight,
+  $letterSpacing,
+  $lineHeight
 }) => {
   return getGenesisTypographyClass(
     theme,
     $themeType,
     variant,
     state,
-    breakpoint,
     color2,
+    $isFullWidth,
     fontSize,
     fontWeight,
-    $isFullWidth
+    $letterSpacing,
+    $lineHeight
   );
 }}
 `;
@@ -59379,22 +59375,24 @@ const Text = styled(Typography$1.Text)`
   $themeType,
   variant,
   state,
-  breakpoint,
   color: color2,
+  $isFullWidth,
   fontSize,
   fontWeight,
-  $isFullWidth
+  $letterSpacing,
+  $lineHeight
 }) => {
   return getGenesisTypographyClass(
     theme,
     $themeType,
     variant,
     state,
-    breakpoint,
     color2,
+    $isFullWidth,
     fontSize,
     fontWeight,
-    $isFullWidth
+    $letterSpacing,
+    $lineHeight
   );
 }}
 `;
@@ -59824,7 +59822,8 @@ const TYPE = {
   tertiary: "tertiary",
   destructive: "destructive",
   utility: "utility",
-  icon: "icon"
+  icon: "icon",
+  password: "primary"
 };
 const BREAKPOINTS = {
   wide: "wide",
@@ -60161,14 +60160,15 @@ const ToastRow = styled.div`
   align-items: center;
   gap: ${({ theme }) => theme.sizing.Size4}px;
   padding: ${({ theme }) => theme.sizing.Size3}px;
-  background-color: ${({ theme, state }) => theme.colors.surface.default};
+  /* background-color: ${({ theme, state }) => theme.colors.surface.default}; */
   border-left: ${({ theme, state }) => `2px solid ${theme.colors.status[state].default}`};
   pointer-events: none;
   cursor: default;
   border-radius: ${({ theme }) => theme.borderRadius.BorderRadiusXs}px;
   height: 56px;
   width: ${({ theme, state, size }) => size === "standard" ? "340px" : "240px"};
-  background-color: ${({ theme, state }) => theme.colors.surface.default};
+  /* background-color: ${({ theme, state }) => theme.colors.surface.default}; */
+  background-color: white;
   box-shadow: 0px 4px 16px 0px #00000026;
 `;
 const ToastCloseButton = styled.button`
@@ -60368,7 +60368,7 @@ const Typography = ({
   isDisabled,
   ...rest
 }) => {
-  const { breakpoint } = useGenesis();
+  const { breakpoint, theme } = useGenesis();
   if (variant.startsWith("display") || variant.startsWith("heading")) {
     const level = variant.split("heading")[1] || variant.split("display")[1];
     return /* @__PURE__ */ jsx(
@@ -60377,14 +60377,15 @@ const Typography = ({
         state,
         $themeType: themeType,
         variant,
-        breakpoint,
         color: color2,
         level: Number.parseInt(level),
         $isFullWidth: isFullWidth,
         style: style2,
-        fontSize,
+        fontSize: fontSize ?? theme.typography[breakpoint][variant].fontSize,
         fontWeight,
         disabled: isDisabled,
+        $letterSpacing: theme.typography[breakpoint][variant].letterSpacing,
+        $lineHeight: theme.typography[breakpoint][variant].lineHeight,
         ...rest,
         children: children2
       }
@@ -60398,13 +60399,14 @@ const Typography = ({
         state,
         $themeType: themeType,
         variant: validVariant,
-        breakpoint,
         color: color2,
         $isFullWidth: isFullWidth,
         style: style2,
         disabled: isDisabled,
-        fontSize,
+        fontSize: fontSize ?? theme.typography[breakpoint][variant].fontSize,
         fontWeight,
+        $letterSpacing: theme.typography[breakpoint][variant].letterSpacing,
+        $lineHeight: theme.typography[breakpoint][variant].lineHeight,
         ...rest,
         children: children2
       }
@@ -60416,13 +60418,14 @@ const Typography = ({
       state,
       $themeType: themeType,
       variant: validVariant,
-      breakpoint,
       color: color2,
       $isFullWidth: isFullWidth,
       style: style2,
       disabled: isDisabled,
-      fontSize,
+      fontSize: fontSize ?? theme.typography[breakpoint][variant].fontSize,
       fontWeight,
+      $letterSpacing: theme.typography[breakpoint][variant].letterSpacing,
+      $lineHeight: theme.typography[breakpoint][variant].lineHeight,
       ...rest,
       children: children2
     }
@@ -74102,11 +74105,11 @@ const Message$1 = ({ message: message2, handle, isThinking = false }) => {
     /* @__PURE__ */ jsx(TextContainer, { $isBot: isBot, children: isThinking ? /* @__PURE__ */ jsx(ThinkingIndicator, {}) : handle === "bot" ? /* @__PURE__ */ jsx(Markdown, { children: message2 }) : /* @__PURE__ */ jsx(MessageText, { children: message2 }) })
   ] });
 };
-const getStateColors = (colors2, type4, state) => {
+const getStateColors = (colors2, variant, state = "themeState") => {
   const filled = {
     color: colors2.inputs.onsurface.active,
     borderColor: colors2[TYPE.secondary].active.borderColor,
-    ringColor: colors2[type4]?.focussed?.ringColor
+    ringColor: colors2[variant]?.focussed?.ringColor
   };
   const success = {
     color: colors2.status.success.default,
@@ -74122,7 +74125,7 @@ const getStateColors = (colors2, type4, state) => {
     color: colors2.inputs.onsurface.active,
     backgroundColor: colors2.inputs.surface.active,
     borderColor: colors2.inputs.surface.border,
-    ringColor: type4 && state ? colors2[type4]?.[state]?.ringColor : void 0
+    ringColor: variant && state ? colors2[variant]?.[state]?.ringColor : void 0
   } : null;
   const stateMap = {
     filled,
@@ -74137,8 +74140,8 @@ const getStateColors = (colors2, type4, state) => {
   const css = stateMap[getValidKey(state)];
   return css;
 };
-const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, components: components2, shadows: shadows2 }, type4, state, hasBeforeAddon, hasAfterAddon, size) => {
-  const stateColors = getStateColors(colors2, type4, state);
+const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, components: components2, shadows: shadows2 }, type4, state, hasBeforeAddon, hasAfterAddon, size, variant) => {
+  const stateColors = getStateColors(colors2, variant, state);
   const getBorderRadius = (hasBeforeAddon2, hasAfterAddon2) => {
     if (hasAfterAddon2 && !hasBeforeAddon2) {
       return `${borderRadius2.BorderRadiusMd}px 0px 0px ${borderRadius2.BorderRadiusMd}px`;
@@ -74162,8 +74165,8 @@ const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, co
     &.ant-input.ant-input:focus-visible,
     &.ant-input.ant-input-focused {
       outline: none !important;
-      border-color: ${colors2[type4].focussed.borderColor} !important;
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor} !important;
+      border-color: ${colors2[variant].focussed.borderColor} !important;
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[variant].focussed.ringColor} !important;
     }
 
     &.ant-input-outlined {
@@ -74179,13 +74182,13 @@ const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, co
         outline: none;
         color: ${stateColors.color};
         box-shadow: none;
-        border-color: ${colors2[type4].focussed.borderColor};
+        border-color: ${colors2[variant].focussed.borderColor};
       }
     }
 
     .ant-input-group:focus-within {
       outline: none;
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[variant].focussed.ringColor};
       border-radius: ${borderRadius2.BorderRadiusMd}px;
       transition: box-shadow 0.2s ease-in-out;
 
@@ -74193,7 +74196,7 @@ const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, co
       .ant-input:focus-within {
         box-shadow: none;
         border-radius: 0;
-        border-radius: ${getBorderRadius(hasBeforeAddon, hasAfterAddon)};
+        border-radius: ${getBorderRadius(hasBeforeAddon || false, hasAfterAddon || false)};
         border-color: #ddd;
       }
     }
@@ -74204,13 +74207,13 @@ const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, co
     .ant-input-group .ant-input:focus-within {
       outline: none;
       box-shadow: none;
-      border-color: ${colors2[type4].focussed.borderColor};
+      border-color: ${colors2[variant].focussed.borderColor};
     }
 
     /* Single focus ring on group */
     .ant-input-group:focus-within {
       outline: none;
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[variant].focussed.ringColor};
       border-radius: ${borderRadius2.BorderRadiusMd}px;
       transition: box-shadow 0.2s ease-in-out;
     }
@@ -74219,18 +74222,18 @@ const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, co
     &:not(.ant-input-group):focus-visible {
       outline: none;
       color: ${stateColors.color};
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[variant].focussed.ringColor};
       border-radius: ${borderRadius2.BorderRadiusMd}px;
-      border-color: ${colors2[type4].focussed.borderColor};
+      border-color: ${colors2[variant].focussed.borderColor};
       transition: box-shadow 0.2s ease-in-out;
     }
 
     &:not(.ant-input-group .ant-input):focus-visible {
       outline: none;
       color: ${stateColors.color};
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[variant].focussed.ringColor};
       border-radius: ${borderRadius2.BorderRadiusMd}px;
-      border-color: ${colors2[type4].focussed.borderColor};
+      border-color: ${colors2[variant].focussed.borderColor};
       transition: box-shadow 0.2s ease-in-out;
     }
 
@@ -74271,7 +74274,7 @@ const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, co
   `;
 };
 const Input$1 = styled(Input$2)`
-  ${({ theme, state, type: type4 = TYPE.primary, size = "normal", ...rest }) => {
+  ${({ theme, state, type: type4, size = "normal", ...rest }) => {
   const hasBeforeAddon = !!rest.addonBefore;
   const hasAfterAddon = !!rest.addonAfter;
   return getGenesisInputClass(
@@ -74280,7 +74283,8 @@ const Input$1 = styled(Input$2)`
     state,
     hasBeforeAddon,
     hasAfterAddon,
-    size
+    size,
+    TYPE.primary
   );
 }}
 `;
@@ -74314,7 +74318,6 @@ const Input2 = React__default.forwardRef(
     value: value2,
     ...rest
   }, ref) => {
-    const { type: type4, ...validRest } = rest;
     const addonAfter = React__default.isValidElement(rest.addonAfter) && rest.addonAfter.type === Select$1 ? React__default.cloneElement(
       rest.addonAfter,
       {
@@ -74337,7 +74340,7 @@ const Input2 = React__default.forwardRef(
     return /* @__PURE__ */ jsx(
       Input$1,
       {
-        ...validRest,
+        ...rest,
         ref,
         size,
         state,
@@ -74772,6 +74775,53 @@ const Solid = (properties) => /* @__PURE__ */ jsx(
 const UnitNumber = ({ variant }) => {
   return variant === "outline" ? /* @__PURE__ */ jsx(Outline, {}) : /* @__PURE__ */ jsx(Solid, {});
 };
+const StyledFormInput = styled(Input2)`
+  /* Ensure the border color matches regular Input using Genesis theme token */
+  &.ant-input,
+  .ant-input-group .ant-input {
+    border-color: ${({ theme }) => theme.colors.inputs.surface.border} !important;
+  }
+
+  /* Input group wrapper styling - most specific selector for addon scenarios */
+  &.ant-input-group-wrapper .ant-input-group {
+    .ant-input {
+      border-color: ${({ theme }) => theme.colors.inputs.surface.border} !important;
+    }
+
+    .ant-input-group-addon {
+      border-color: ${({ theme }) => theme.colors.inputs.surface.border} !important;
+      background-color: #f5f5f5;
+    }
+  }
+
+  /* When input is in a group wrapper */
+  .ant-input-group-wrapper & {
+    border-color: ${({ theme }) => theme.colors.inputs.surface.border} !important;
+  }
+
+  /* Direct targeting of input group elements */
+  .ant-input-group .ant-input {
+    border-color: ${({ theme }) => theme.colors.inputs.surface.border} !important;
+  }
+
+  .ant-input-group-addon {
+    border-color: ${({ theme }) => theme.colors.inputs.surface.border} !important;
+  }
+
+  /* Hover and focus states should maintain the correct colors */
+  &.ant-input:hover,
+  &.ant-input:focus,
+  .ant-input-group .ant-input:hover,
+  .ant-input-group .ant-input:focus,
+  .ant-input-group-wrapper .ant-input-group:hover .ant-input,
+  .ant-input-group-wrapper .ant-input-group:focus-within .ant-input,
+  .ant-input-group-wrapper .ant-input-group:hover .ant-input-group-addon,
+  .ant-input-group-wrapper
+    .ant-input-group:focus-within
+    .ant-input-group-addon {
+    border-color: ${({ theme }) => theme.colors.inputs.surface.border} !important;
+  }
+`;
 const defaultValidator = (_rule, value2) => {
   console.log(`Validating value: ${value2}, Type: ${typeof value2}`);
   if (!value2 || /^\d+$/.test(value2)) {
@@ -74792,7 +74842,7 @@ const FormInput = React__default.forwardRef((props, ref) => {
   const { addonBefore, addonAfter, placeholder } = inputProps;
   if (addonBefore && !addonAfter) {
     return /* @__PURE__ */ jsx(
-      Input2,
+      StyledFormInput,
       {
         ...inputProps,
         ref,
@@ -74806,7 +74856,7 @@ const FormInput = React__default.forwardRef((props, ref) => {
   }
   if (addonAfter && !addonBefore) {
     return /* @__PURE__ */ jsx(
-      Input2,
+      StyledFormInput,
       {
         ...inputProps,
         ref,
@@ -74819,7 +74869,7 @@ const FormInput = React__default.forwardRef((props, ref) => {
     );
   }
   return /* @__PURE__ */ jsx(
-    Input2,
+    StyledFormInput,
     {
       ...inputProps,
       ref,
@@ -81678,10 +81728,18 @@ const Progress = ({
             alignItems: "center",
             width: percentDisplayWidth
           },
-          children: /* @__PURE__ */ jsxs(Typography, { color: overrideTextColor ?? textColor, variant: "digits3", children: [
-            overallPercent,
-            "%"
-          ] })
+          children: /* @__PURE__ */ jsxs(
+            Typography,
+            {
+              color: overrideTextColor ?? textColor,
+              variant: "digits3",
+              fontWeight: 700,
+              children: [
+                overallPercent,
+                "%"
+              ]
+            }
+          )
         }
       )
     ] });
@@ -81740,10 +81798,18 @@ const Progress = ({
             alignItems: "center",
             width: percentDisplayWidth
           },
-          children: /* @__PURE__ */ jsxs(Typography, { color: overrideTextColor ?? textColor, variant: "digits3", children: [
-            combinedPercent,
-            "%"
-          ] })
+          children: /* @__PURE__ */ jsxs(
+            Typography,
+            {
+              color: overrideTextColor ?? textColor,
+              variant: "digits3",
+              fontWeight: 700,
+              children: [
+                combinedPercent,
+                "%"
+              ]
+            }
+          )
         }
       )
     ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gobolt/genesis",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",