@gobolt/genesis 0.6.0 → 0.6.1

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" | "password";
+type ButtonThemeType = "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
 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" | "password";
+    $themeType?: "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
     $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" | "password";
+    $themeType?: "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
     $state?: "active" | "hover" | "pressed" | "focus" | "disabled" | "selected";
     children?: React.ReactNode;
     $isIconButton?: boolean;

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

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

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" | "password";
+type ThemeType = "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
 type Variant = "none" | "simple";
 interface SelectTriggerProperties {
     type?: ThemeType;

package/dist/components/Table/TableControls/SecondaryTableControlsRow.d.ts

@@ -1,12 +1,8 @@
 import { Change } from '../Table';
 import { InfiniteScrollChangeEvent } from '../InfiniteScrollTable/types';
 import * as React from "react";
-type Item = {
-    label: string;
-    value: unknown;
-};
 export type Groups = {
-    [key: string]: string[] | Item[];
+    [key: string]: string[];
 };
 export interface SecondaryTableControlsRowProps {
     groups: Groups | null;

package/dist/components/Table/TableControls/TableControls.d.ts

@@ -1,12 +1,6 @@
 import { PrimaryTableControlsRowProps } from './PrimaryTableControlsRow';
 import { SecondaryTableControlsRowProps } from './SecondaryTableControlsRow';
 import { ActionEvent, TableEventPayload } from '../../../types/events';
-export declare const TABLE_CONTROLS_EVENTS: {
-    GROUP_ITEM_CLICK: string;
-    ORDER_CLICK: string;
-    PRIMARY_SORT_CHANGE: string;
-    INPUT_CHANGE: string;
-};
 export type TableControlsData = {
     primaryTableRowData: PrimaryTableControlsRowProps;
     secondaryTableRowData?: SecondaryTableControlsRowProps;

package/dist/components/Table/TableControls/index.d.ts

@@ -1,2 +1,2 @@
-export { default, TABLE_CONTROLS_EVENTS } from './TableControls';
+export { default } from './TableControls';
 export type { TableControlsProps } from './TableControls';

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

@@ -12,6 +12,8 @@ export interface TypographyProps {
     isFullWidth?: boolean;
     style?: CSSProperties;
     isDisabled?: boolean;
+    fontWeight?: number;
+    fontSize?: string;
 }
-declare const Typography: ({ children, themeType, variant, state, color, isText, isFullWidth, style, isDisabled, ...rest }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
+declare const Typography: ({ children, themeType, variant, state, color, isText, isFullWidth, style, fontSize, fontWeight, isDisabled, ...rest }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
 export default Typography;

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

@@ -5,8 +5,10 @@ interface TypographyStyledProperties {
     $themeType?: keyof typeof TYPE;
     variant?: string;
     state?: keyof typeof STATE;
-    breakpoint?: keyof GenesisTheme["typography"];
+    breakpoint?: string;
     color?: string;
+    fontWeight?: number;
+    fontSize?: string;
     $isFullWidth?: boolean;
 }
 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"> & {

package/dist/components/index.d.ts

@@ -68,7 +68,6 @@ export type { TableWithControlsProps } from './TableWithControls';
 export { useTable } from './Table';
 export { useTableWithControls } from './TableWithControls';
 export type { UseTableConfig } from './Table';
-export { TABLE_CONTROLS_EVENTS } from './Table/TableControls';
 export { default as Tabs } from './Tabs';
 export type { TabsProps } from './Tabs';
 export { default as Tile } from './Tile';

package/dist/constants/index.d.ts

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

package/dist/index.cjs

@@ -59296,37 +59296,39 @@ const Avatar$1 = styled(Avatar$2)`
   return getGenesisClass$d(theme, type4, state);
 }}
 `;
+const getBreakpoint = (breakpoint) => {
+  {
+    return "medium";
+  }
+};
 const getVariant$2 = (typography2, variant, breakpoint) => {
-  const typeClass = typography2["medium"];
   return `
-        font-size: ${typeClass}.fontSize}px !important;
-        line-height: ${typeClass.lineHeight};
-        letter-spacing: ${typeClass.letterSpacing}px;
-        font-weight: ${typeClass.fontWeight};
+        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;
   }
-  const themeColor = colors2[$themeType];
-  if (themeColor?.active?.default) {
-    return themeColor.active.default;
-  }
-  return colors2?.secondary?.active?.default || "#000000";
+  return colors2[$themeType].active.color;
 };
 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, $isFullWidth) => `
+const getGenesisTypographyClass = ({ colors: colors2, typography: typography2 }, $themeType, variant, state, breakpoint, color2, fontSize, fontWeight, $isFullWidth) => `
     &.ant-typography {
       font-family: ${getFontFamily(variant)};
       color: ${getColor(color2, colors2, $themeType)} !important;
-      ${getVariant$2(typography2)}
+      ${getVariant$2(typography2, variant)}
       margin-bottom: 0 !important;
       width: ${$isFullWidth ? "100%" : "auto"};
+      font-weight: ${fontWeight} !important;
+      font-size: ${fontSize} !important;
       line-height: 1;
        -webkit-font-smoothing: antialiased;
 
@@ -59345,6 +59347,8 @@ const Headline = styled(Typography$1.Title)`
   state,
   breakpoint,
   color: color2,
+  fontSize,
+  fontWeight,
   $isFullWidth
 }) => {
   return getGenesisTypographyClass(
@@ -59354,6 +59358,8 @@ const Headline = styled(Typography$1.Title)`
     state,
     breakpoint,
     color2,
+    fontSize,
+    fontWeight,
     $isFullWidth
   );
 }}
@@ -59368,7 +59374,9 @@ const Paragraph = styled(
   state,
   breakpoint,
   color: color2,
-  $isFullWidth
+  $isFullWidth,
+  fontSize,
+  fontWeight
 }) => {
   return getGenesisTypographyClass(
     theme,
@@ -59377,6 +59385,8 @@ const Paragraph = styled(
     state,
     breakpoint,
     color2,
+    fontSize,
+    fontWeight,
     $isFullWidth
   );
 }}
@@ -59389,6 +59399,8 @@ const Text = styled(Typography$1.Text)`
   state,
   breakpoint,
   color: color2,
+  fontSize,
+  fontWeight,
   $isFullWidth
 }) => {
   return getGenesisTypographyClass(
@@ -59398,6 +59410,8 @@ const Text = styled(Typography$1.Text)`
     state,
     breakpoint,
     color2,
+    fontSize,
+    fontWeight,
     $isFullWidth
   );
 }}
@@ -59828,8 +59842,7 @@ const TYPE = {
   tertiary: "tertiary",
   destructive: "destructive",
   utility: "utility",
-  icon: "icon",
-  password: "primary"
+  icon: "icon"
 };
 const BREAKPOINTS = {
   wide: "wide",
@@ -60368,6 +60381,8 @@ const Typography = ({
   isText = false,
   isFullWidth,
   style: style2,
+  fontSize,
+  fontWeight,
   isDisabled,
   ...rest
 }) => {
@@ -60385,6 +60400,8 @@ const Typography = ({
         level: Number.parseInt(level),
         $isFullWidth: isFullWidth,
         style: style2,
+        fontSize,
+        fontWeight,
         disabled: isDisabled,
         ...rest,
         children: children2
@@ -60404,6 +60421,8 @@ const Typography = ({
         $isFullWidth: isFullWidth,
         style: style2,
         disabled: isDisabled,
+        fontSize,
+        fontWeight,
         ...rest,
         children: children2
       }
@@ -60420,6 +60439,8 @@ const Typography = ({
       $isFullWidth: isFullWidth,
       style: style2,
       disabled: isDisabled,
+      fontSize,
+      fontWeight,
       ...rest,
       children: children2
     }
@@ -74099,11 +74120,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, variant, state = "themeState") => {
+const getStateColors = (colors2, type4, state) => {
   const filled = {
     color: colors2.inputs.onsurface.active,
     borderColor: colors2[TYPE.secondary].active.borderColor,
-    ringColor: colors2[variant]?.focussed?.ringColor
+    ringColor: colors2[type4]?.focussed?.ringColor
   };
   const success = {
     color: colors2.status.success.default,
@@ -74119,7 +74140,7 @@ const getStateColors = (colors2, variant, state = "themeState") => {
     color: colors2.inputs.onsurface.active,
     backgroundColor: colors2.inputs.surface.active,
     borderColor: colors2.inputs.surface.border,
-    ringColor: variant && state ? colors2[variant]?.[state]?.ringColor : void 0
+    ringColor: type4 && state ? colors2[type4]?.[state]?.ringColor : void 0
   } : null;
   const stateMap = {
     filled,
@@ -74134,8 +74155,8 @@ const getStateColors = (colors2, variant, state = "themeState") => {
   const css = stateMap[getValidKey(state)];
   return css;
 };
-const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, components: components2, shadows: shadows2 }, type4, state, hasBeforeAddon, hasAfterAddon, size, variant) => {
-  const stateColors = getStateColors(colors2, variant, state);
+const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, components: components2, shadows: shadows2 }, type4, state, hasBeforeAddon, hasAfterAddon, size) => {
+  const stateColors = getStateColors(colors2, type4, state);
   const getBorderRadius = (hasBeforeAddon2, hasAfterAddon2) => {
     if (hasAfterAddon2 && !hasBeforeAddon2) {
       return `${borderRadius2.BorderRadiusMd}px 0px 0px ${borderRadius2.BorderRadiusMd}px`;
@@ -74159,8 +74180,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[variant].focussed.borderColor} !important;
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[variant].focussed.ringColor} !important;
+      border-color: ${colors2[type4].focussed.borderColor} !important;
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor} !important;
     }
 
     &.ant-input-outlined {
@@ -74176,13 +74197,13 @@ const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, co
         outline: none;
         color: ${stateColors.color};
         box-shadow: none;
-        border-color: ${colors2[variant].focussed.borderColor};
+        border-color: ${colors2[type4].focussed.borderColor};
       }
     }
 
     .ant-input-group:focus-within {
       outline: none;
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[variant].focussed.ringColor};
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
       border-radius: ${borderRadius2.BorderRadiusMd}px;
       transition: box-shadow 0.2s ease-in-out;
 
@@ -74190,7 +74211,7 @@ const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, co
       .ant-input:focus-within {
         box-shadow: none;
         border-radius: 0;
-        border-radius: ${getBorderRadius(hasBeforeAddon || false, hasAfterAddon || false)};
+        border-radius: ${getBorderRadius(hasBeforeAddon, hasAfterAddon)};
         border-color: #ddd;
       }
     }
@@ -74201,13 +74222,13 @@ const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, co
     .ant-input-group .ant-input:focus-within {
       outline: none;
       box-shadow: none;
-      border-color: ${colors2[variant].focussed.borderColor};
+      border-color: ${colors2[type4].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[variant].focussed.ringColor};
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
       border-radius: ${borderRadius2.BorderRadiusMd}px;
       transition: box-shadow 0.2s ease-in-out;
     }
@@ -74216,18 +74237,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[variant].focussed.ringColor};
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
       border-radius: ${borderRadius2.BorderRadiusMd}px;
-      border-color: ${colors2[variant].focussed.borderColor};
+      border-color: ${colors2[type4].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[variant].focussed.ringColor};
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
       border-radius: ${borderRadius2.BorderRadiusMd}px;
-      border-color: ${colors2[variant].focussed.borderColor};
+      border-color: ${colors2[type4].focussed.borderColor};
       transition: box-shadow 0.2s ease-in-out;
     }
 
@@ -74268,7 +74289,7 @@ const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, co
   `;
 };
 const Input$1 = styled(Input$2)`
-  ${({ theme, state, type: type4, size = "normal", ...rest }) => {
+  ${({ theme, state, type: type4 = TYPE.primary, size = "normal", ...rest }) => {
   const hasBeforeAddon = !!rest.addonBefore;
   const hasAfterAddon = !!rest.addonAfter;
   return getGenesisInputClass(
@@ -74277,8 +74298,7 @@ const Input$1 = styled(Input$2)`
     state,
     hasBeforeAddon,
     hasAfterAddon,
-    size,
-    TYPE.primary
+    size
   );
 }}
 `;
@@ -74310,9 +74330,9 @@ const Input2 = React.forwardRef(
     size = "normal",
     onChange,
     value: value2,
-    isPassword,
     ...rest
   }, ref) => {
+    const { type: type4, ...validRest } = rest;
     const addonAfter = React.isValidElement(rest.addonAfter) && rest.addonAfter.type === Select$1 ? React.cloneElement(
       rest.addonAfter,
       {
@@ -74335,7 +74355,7 @@ const Input2 = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(
       Input$1,
       {
-        ...rest,
+        ...validRest,
         ref,
         size,
         state,
@@ -74770,53 +74790,6 @@ 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)) {
@@ -74837,7 +74810,7 @@ const FormInput = React.forwardRef((props, ref) => {
   const { addonBefore, addonAfter, placeholder } = inputProps;
   if (addonBefore && !addonAfter) {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      StyledFormInput,
+      Input2,
       {
         ...inputProps,
         ref,
@@ -74851,7 +74824,7 @@ const FormInput = React.forwardRef((props, ref) => {
   }
   if (addonAfter && !addonBefore) {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      StyledFormInput,
+      Input2,
       {
         ...inputProps,
         ref,
@@ -74864,7 +74837,7 @@ const FormInput = React.forwardRef((props, ref) => {
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    StyledFormInput,
+    Input2,
     {
       ...inputProps,
       ref,
@@ -82573,7 +82546,6 @@ const TypographyWideFontSizeBody1 = 16;
 const TypographyMediumFontSizeBody1 = 16;
 const TypographyWideFontSizeHeading3 = Size4;
 const TypographyWideFontSizeSubHeading1 = 20;
-const TypographyWideFontSizeSubHeading2 = 16;
 const TypographyWideFontSizeSubHeading3 = 14;
 const TypographyWideFontSizeBody2 = 14;
 const TypographyWideFontSizeBody3 = 12;
@@ -82772,9 +82744,9 @@ const wideTypography = {
     letterSpacing: "0"
   },
   subHeading2: {
-    fontSize: TypographyWideFontSizeSubHeading2,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
+    fontSize: "24px",
+    lineHeight: "32px",
+    fontWeight: 400,
     letterSpacing: "0"
   },
   subHeading3: {
@@ -85794,7 +85766,7 @@ const GroupItem = ({
   onGroupItemClick,
   getCustomIcon
 }) => {
-  if (!items || items?.length === 0) return null;
+  if (items.length === 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Tooltip2, { tip: title, isAbsolutePositioned: false, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -85809,21 +85781,18 @@ const GroupItem = ({
         children: getCustomIcon ? getCustomIcon(title) : getIcon$1(title)
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 4 }, children: items?.map((item) => {
-      const isObjectItem = typeof item === "object" && item !== null && "label" in item && "value" in item;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Badge$1,
-        {
-          label: isObjectItem ? item.label : item?.toString() || "Undefined",
-          hasClose: true,
-          hasIcon: false,
-          state: "generic",
-          size: "small",
-          onClick: () => onGroupItemClick(title, item)
-        },
-        !item ? "Undefined" : item?.toString()
-      );
-    }) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 4 }, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+      Badge$1,
+      {
+        label: item,
+        hasClose: true,
+        hasIcon: false,
+        state: "generic",
+        size: "small",
+        onClick: () => onGroupItemClick(title, item)
+      },
+      item.toString()
+    )) })
   ] });
 };
 const GroupsRow = ({
@@ -85840,7 +85809,7 @@ const GroupsRow = ({
     GroupItem,
     {
       title: group.title,
-      items: group?.items,
+      items: group.items,
       onGroupItemClick,
       getCustomIcon
     },
@@ -85941,12 +85910,6 @@ const SecondaryTableControlsRow = ({
     }
   );
 };
-const TABLE_CONTROLS_EVENTS = {
-  GROUP_ITEM_CLICK: "groupItemClick",
-  ORDER_CLICK: "orderClick",
-  PRIMARY_SORT_CHANGE: "primarySortChange",
-  INPUT_CHANGE: "inputChange"
-};
 const TableControls = ({
   primaryTableRowData,
   secondaryTableRowData,
@@ -87446,7 +87409,6 @@ exports.SegmentedControls = SegmentedControls;
 exports.Select = Select;
 exports.Shapes = Shapes;
 exports.Switch = Switch;
-exports.TABLE_CONTROLS_EVENTS = TABLE_CONTROLS_EVENTS;
 exports.Table = TablePagination;
 exports.TableWithControls = TableWithControls;
 exports.Tabs = Tabs;

package/dist/index.js

@@ -59278,37 +59278,39 @@ const Avatar$1 = styled(Avatar$2)`
   return getGenesisClass$d(theme, type4, state);
 }}
 `;
+const getBreakpoint = (breakpoint) => {
+  {
+    return "medium";
+  }
+};
 const getVariant$2 = (typography2, variant, breakpoint) => {
-  const typeClass = typography2["medium"];
   return `
-        font-size: ${typeClass}.fontSize}px !important;
-        line-height: ${typeClass.lineHeight};
-        letter-spacing: ${typeClass.letterSpacing}px;
-        font-weight: ${typeClass.fontWeight};
+        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;
   }
-  const themeColor = colors2[$themeType];
-  if (themeColor?.active?.default) {
-    return themeColor.active.default;
-  }
-  return colors2?.secondary?.active?.default || "#000000";
+  return colors2[$themeType].active.color;
 };
 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, $isFullWidth) => `
+const getGenesisTypographyClass = ({ colors: colors2, typography: typography2 }, $themeType, variant, state, breakpoint, color2, fontSize, fontWeight, $isFullWidth) => `
     &.ant-typography {
       font-family: ${getFontFamily(variant)};
       color: ${getColor(color2, colors2, $themeType)} !important;
-      ${getVariant$2(typography2)}
+      ${getVariant$2(typography2, variant)}
       margin-bottom: 0 !important;
       width: ${$isFullWidth ? "100%" : "auto"};
+      font-weight: ${fontWeight} !important;
+      font-size: ${fontSize} !important;
       line-height: 1;
        -webkit-font-smoothing: antialiased;
 
@@ -59327,6 +59329,8 @@ const Headline = styled(Typography$1.Title)`
   state,
   breakpoint,
   color: color2,
+  fontSize,
+  fontWeight,
   $isFullWidth
 }) => {
   return getGenesisTypographyClass(
@@ -59336,6 +59340,8 @@ const Headline = styled(Typography$1.Title)`
     state,
     breakpoint,
     color2,
+    fontSize,
+    fontWeight,
     $isFullWidth
   );
 }}
@@ -59350,7 +59356,9 @@ const Paragraph = styled(
   state,
   breakpoint,
   color: color2,
-  $isFullWidth
+  $isFullWidth,
+  fontSize,
+  fontWeight
 }) => {
   return getGenesisTypographyClass(
     theme,
@@ -59359,6 +59367,8 @@ const Paragraph = styled(
     state,
     breakpoint,
     color2,
+    fontSize,
+    fontWeight,
     $isFullWidth
   );
 }}
@@ -59371,6 +59381,8 @@ const Text = styled(Typography$1.Text)`
   state,
   breakpoint,
   color: color2,
+  fontSize,
+  fontWeight,
   $isFullWidth
 }) => {
   return getGenesisTypographyClass(
@@ -59380,6 +59392,8 @@ const Text = styled(Typography$1.Text)`
     state,
     breakpoint,
     color2,
+    fontSize,
+    fontWeight,
     $isFullWidth
   );
 }}
@@ -59810,8 +59824,7 @@ const TYPE = {
   tertiary: "tertiary",
   destructive: "destructive",
   utility: "utility",
-  icon: "icon",
-  password: "primary"
+  icon: "icon"
 };
 const BREAKPOINTS = {
   wide: "wide",
@@ -60350,6 +60363,8 @@ const Typography = ({
   isText = false,
   isFullWidth,
   style: style2,
+  fontSize,
+  fontWeight,
   isDisabled,
   ...rest
 }) => {
@@ -60367,6 +60382,8 @@ const Typography = ({
         level: Number.parseInt(level),
         $isFullWidth: isFullWidth,
         style: style2,
+        fontSize,
+        fontWeight,
         disabled: isDisabled,
         ...rest,
         children: children2
@@ -60386,6 +60403,8 @@ const Typography = ({
         $isFullWidth: isFullWidth,
         style: style2,
         disabled: isDisabled,
+        fontSize,
+        fontWeight,
         ...rest,
         children: children2
       }
@@ -60402,6 +60421,8 @@ const Typography = ({
       $isFullWidth: isFullWidth,
       style: style2,
       disabled: isDisabled,
+      fontSize,
+      fontWeight,
       ...rest,
       children: children2
     }
@@ -74081,11 +74102,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, variant, state = "themeState") => {
+const getStateColors = (colors2, type4, state) => {
   const filled = {
     color: colors2.inputs.onsurface.active,
     borderColor: colors2[TYPE.secondary].active.borderColor,
-    ringColor: colors2[variant]?.focussed?.ringColor
+    ringColor: colors2[type4]?.focussed?.ringColor
   };
   const success = {
     color: colors2.status.success.default,
@@ -74101,7 +74122,7 @@ const getStateColors = (colors2, variant, state = "themeState") => {
     color: colors2.inputs.onsurface.active,
     backgroundColor: colors2.inputs.surface.active,
     borderColor: colors2.inputs.surface.border,
-    ringColor: variant && state ? colors2[variant]?.[state]?.ringColor : void 0
+    ringColor: type4 && state ? colors2[type4]?.[state]?.ringColor : void 0
   } : null;
   const stateMap = {
     filled,
@@ -74116,8 +74137,8 @@ const getStateColors = (colors2, variant, state = "themeState") => {
   const css = stateMap[getValidKey(state)];
   return css;
 };
-const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, components: components2, shadows: shadows2 }, type4, state, hasBeforeAddon, hasAfterAddon, size, variant) => {
-  const stateColors = getStateColors(colors2, variant, state);
+const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, components: components2, shadows: shadows2 }, type4, state, hasBeforeAddon, hasAfterAddon, size) => {
+  const stateColors = getStateColors(colors2, type4, state);
   const getBorderRadius = (hasBeforeAddon2, hasAfterAddon2) => {
     if (hasAfterAddon2 && !hasBeforeAddon2) {
       return `${borderRadius2.BorderRadiusMd}px 0px 0px ${borderRadius2.BorderRadiusMd}px`;
@@ -74141,8 +74162,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[variant].focussed.borderColor} !important;
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[variant].focussed.ringColor} !important;
+      border-color: ${colors2[type4].focussed.borderColor} !important;
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor} !important;
     }
 
     &.ant-input-outlined {
@@ -74158,13 +74179,13 @@ const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, co
         outline: none;
         color: ${stateColors.color};
         box-shadow: none;
-        border-color: ${colors2[variant].focussed.borderColor};
+        border-color: ${colors2[type4].focussed.borderColor};
       }
     }
 
     .ant-input-group:focus-within {
       outline: none;
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[variant].focussed.ringColor};
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
       border-radius: ${borderRadius2.BorderRadiusMd}px;
       transition: box-shadow 0.2s ease-in-out;
 
@@ -74172,7 +74193,7 @@ const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, co
       .ant-input:focus-within {
         box-shadow: none;
         border-radius: 0;
-        border-radius: ${getBorderRadius(hasBeforeAddon || false, hasAfterAddon || false)};
+        border-radius: ${getBorderRadius(hasBeforeAddon, hasAfterAddon)};
         border-color: #ddd;
       }
     }
@@ -74183,13 +74204,13 @@ const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, co
     .ant-input-group .ant-input:focus-within {
       outline: none;
       box-shadow: none;
-      border-color: ${colors2[variant].focussed.borderColor};
+      border-color: ${colors2[type4].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[variant].focussed.ringColor};
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
       border-radius: ${borderRadius2.BorderRadiusMd}px;
       transition: box-shadow 0.2s ease-in-out;
     }
@@ -74198,18 +74219,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[variant].focussed.ringColor};
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
       border-radius: ${borderRadius2.BorderRadiusMd}px;
-      border-color: ${colors2[variant].focussed.borderColor};
+      border-color: ${colors2[type4].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[variant].focussed.ringColor};
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
       border-radius: ${borderRadius2.BorderRadiusMd}px;
-      border-color: ${colors2[variant].focussed.borderColor};
+      border-color: ${colors2[type4].focussed.borderColor};
       transition: box-shadow 0.2s ease-in-out;
     }
 
@@ -74250,7 +74271,7 @@ const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, co
   `;
 };
 const Input$1 = styled(Input$2)`
-  ${({ theme, state, type: type4, size = "normal", ...rest }) => {
+  ${({ theme, state, type: type4 = TYPE.primary, size = "normal", ...rest }) => {
   const hasBeforeAddon = !!rest.addonBefore;
   const hasAfterAddon = !!rest.addonAfter;
   return getGenesisInputClass(
@@ -74259,8 +74280,7 @@ const Input$1 = styled(Input$2)`
     state,
     hasBeforeAddon,
     hasAfterAddon,
-    size,
-    TYPE.primary
+    size
   );
 }}
 `;
@@ -74292,9 +74312,9 @@ const Input2 = React__default.forwardRef(
     size = "normal",
     onChange,
     value: value2,
-    isPassword,
     ...rest
   }, ref) => {
+    const { type: type4, ...validRest } = rest;
     const addonAfter = React__default.isValidElement(rest.addonAfter) && rest.addonAfter.type === Select$1 ? React__default.cloneElement(
       rest.addonAfter,
       {
@@ -74317,7 +74337,7 @@ const Input2 = React__default.forwardRef(
     return /* @__PURE__ */ jsx(
       Input$1,
       {
-        ...rest,
+        ...validRest,
         ref,
         size,
         state,
@@ -74752,53 +74772,6 @@ 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)) {
@@ -74819,7 +74792,7 @@ const FormInput = React__default.forwardRef((props, ref) => {
   const { addonBefore, addonAfter, placeholder } = inputProps;
   if (addonBefore && !addonAfter) {
     return /* @__PURE__ */ jsx(
-      StyledFormInput,
+      Input2,
       {
         ...inputProps,
         ref,
@@ -74833,7 +74806,7 @@ const FormInput = React__default.forwardRef((props, ref) => {
   }
   if (addonAfter && !addonBefore) {
     return /* @__PURE__ */ jsx(
-      StyledFormInput,
+      Input2,
       {
         ...inputProps,
         ref,
@@ -74846,7 +74819,7 @@ const FormInput = React__default.forwardRef((props, ref) => {
     );
   }
   return /* @__PURE__ */ jsx(
-    StyledFormInput,
+    Input2,
     {
       ...inputProps,
       ref,
@@ -82555,7 +82528,6 @@ const TypographyWideFontSizeBody1 = 16;
 const TypographyMediumFontSizeBody1 = 16;
 const TypographyWideFontSizeHeading3 = Size4;
 const TypographyWideFontSizeSubHeading1 = 20;
-const TypographyWideFontSizeSubHeading2 = 16;
 const TypographyWideFontSizeSubHeading3 = 14;
 const TypographyWideFontSizeBody2 = 14;
 const TypographyWideFontSizeBody3 = 12;
@@ -82754,9 +82726,9 @@ const wideTypography = {
     letterSpacing: "0"
   },
   subHeading2: {
-    fontSize: TypographyWideFontSizeSubHeading2,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
+    fontSize: "24px",
+    lineHeight: "32px",
+    fontWeight: 400,
     letterSpacing: "0"
   },
   subHeading3: {
@@ -85776,7 +85748,7 @@ const GroupItem = ({
   onGroupItemClick,
   getCustomIcon
 }) => {
-  if (!items || items?.length === 0) return null;
+  if (items.length === 0) return null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Tooltip2, { tip: title, isAbsolutePositioned: false, children: /* @__PURE__ */ jsx(
       "div",
@@ -85791,21 +85763,18 @@ const GroupItem = ({
         children: getCustomIcon ? getCustomIcon(title) : getIcon$1(title)
       }
     ) }),
-    /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4 }, children: items?.map((item) => {
-      const isObjectItem = typeof item === "object" && item !== null && "label" in item && "value" in item;
-      return /* @__PURE__ */ jsx(
-        Badge$1,
-        {
-          label: isObjectItem ? item.label : item?.toString() || "Undefined",
-          hasClose: true,
-          hasIcon: false,
-          state: "generic",
-          size: "small",
-          onClick: () => onGroupItemClick(title, item)
-        },
-        !item ? "Undefined" : item?.toString()
-      );
-    }) })
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4 }, children: items.map((item) => /* @__PURE__ */ jsx(
+      Badge$1,
+      {
+        label: item,
+        hasClose: true,
+        hasIcon: false,
+        state: "generic",
+        size: "small",
+        onClick: () => onGroupItemClick(title, item)
+      },
+      item.toString()
+    )) })
   ] });
 };
 const GroupsRow = ({
@@ -85822,7 +85791,7 @@ const GroupsRow = ({
     GroupItem,
     {
       title: group.title,
-      items: group?.items,
+      items: group.items,
       onGroupItemClick,
       getCustomIcon
     },
@@ -85923,12 +85892,6 @@ const SecondaryTableControlsRow = ({
     }
   );
 };
-const TABLE_CONTROLS_EVENTS = {
-  GROUP_ITEM_CLICK: "groupItemClick",
-  ORDER_CLICK: "orderClick",
-  PRIMARY_SORT_CHANGE: "primarySortChange",
-  INPUT_CHANGE: "inputChange"
-};
 const TableControls = ({
   primaryTableRowData,
   secondaryTableRowData,
@@ -87429,7 +87392,6 @@ export {
   Select,
   Shapes,
   Switch,
-  TABLE_CONTROLS_EVENTS,
   TablePagination as Table,
   TableWithControls,
   Tabs,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gobolt/genesis",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",
@@ -150,7 +150,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.5.2",
-    "@gobolt/genesis-tokens": "^0.0.9",
+    "@gobolt/genesis-tokens": "^0.0.10",
     "@mdx-js/react": "^3.0.1",
     "@secondcloset/types": "^3.4.6",
     "@types/d3": "^7.4.3",

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

@@ -1,3 +0,0 @@
-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>>;