@gobolt/genesis 0.6.2 → 0.6.3

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

@@ -9,7 +9,6 @@ export interface InputProps extends BaseInputProps {
     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/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/styles.d.ts

@@ -5,11 +5,12 @@ interface TypographyStyledProperties {
     $themeType?: keyof typeof TYPE;
     variant?: string;
     state?: keyof typeof STATE;
-    breakpoint?: keyof GenesisTheme["typography"];
     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/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/index.cjs

@@ -59296,15 +59296,6 @@ const Avatar$1 = styled(Avatar$2)`
   return getGenesisClass$d(theme, type4, state);
 }}
 `;
-const getVariant$2 = (typography2, variant, breakpoint, fontSize, fontWeight) => {
-  const typeClass = typography2["medium"];
-  return `
-        font-size: ${typeClass}.fontSize}px !important;
-        line-height: ${typeClass.lineHeight};
-        letter-spacing: ${typeClass.letterSpacing}px;
-        font-weight: ${typeClass.fontWeight};
-      `;
-};
 const getColor = (color2, colors2, $themeType) => {
   if (color2) {
     return color2;
@@ -59320,12 +59311,13 @@ const getFontFamily = (variant) => {
     ${variant.includes("digits") ? "'Roboto Mono', sans-serif" : "'Inter', sans-serif"} !important;
   `;
 };
-const getGenesisTypographyClass = ({ colors: colors2, typography: typography2 }, $themeType, variant, state, breakpoint, color2, $isFullWidth, fontSize, fontWeight) => `
+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)}
       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
+    fontWeight,
+    $letterSpacing,
+    $lineHeight
   );
 }}
 `;
@@ -59397,22 +59393,24 @@ const Text = styled(Typography$1.Text)`
   $themeType,
   variant,
   state,
-  breakpoint,
   color: color2,
   $isFullWidth,
   fontSize,
-  fontWeight
+  fontWeight,
+  $letterSpacing,
+  $lineHeight
 }) => {
   return getGenesisTypographyClass(
     theme,
     $themeType,
     variant,
     state,
-    breakpoint,
     color2,
     $isFullWidth,
     fontSize,
-    fontWeight
+    fontWeight,
+    $letterSpacing,
+    $lineHeight
   );
 }}
 `;
@@ -60180,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`
@@ -60387,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(
@@ -60396,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
       }
@@ -60417,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
       }
@@ -60435,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
     }
@@ -74332,7 +74334,6 @@ const Input2 = React.forwardRef(
     size = "normal",
     onChange,
     value: value2,
-    isPassword,
     ...rest
   }, ref) => {
     const addonAfter = React.isValidElement(rest.addonAfter) && rest.addonAfter.type === Select$1 ? React.cloneElement(
@@ -82611,7 +82612,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;
@@ -82810,9 +82810,9 @@ const wideTypography = {
     letterSpacing: "0"
   },
   subHeading2: {
-    fontSize: TypographyWideFontSizeSubHeading2,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
+    fontSize: "24px",
+    lineHeight: "32px",
+    fontWeight: 400,
     letterSpacing: "0"
   },
   subHeading3: {
@@ -85832,7 +85832,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",
@@ -85847,21 +85847,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 = ({
@@ -85878,7 +85875,7 @@ const GroupsRow = ({
     GroupItem,
     {
       title: group.title,
-      items: group?.items,
+      items: group.items,
       onGroupItemClick,
       getCustomIcon
     },
@@ -85979,12 +85976,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,
@@ -87484,7 +87475,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,15 +59278,6 @@ const Avatar$1 = styled(Avatar$2)`
   return getGenesisClass$d(theme, type4, state);
 }}
 `;
-const getVariant$2 = (typography2, variant, breakpoint, fontSize, fontWeight) => {
-  const typeClass = typography2["medium"];
-  return `
-        font-size: ${typeClass}.fontSize}px !important;
-        line-height: ${typeClass.lineHeight};
-        letter-spacing: ${typeClass.letterSpacing}px;
-        font-weight: ${typeClass.fontWeight};
-      `;
-};
 const getColor = (color2, colors2, $themeType) => {
   if (color2) {
     return color2;
@@ -59302,12 +59293,13 @@ const getFontFamily = (variant) => {
     ${variant.includes("digits") ? "'Roboto Mono', sans-serif" : "'Inter', sans-serif"} !important;
   `;
 };
-const getGenesisTypographyClass = ({ colors: colors2, typography: typography2 }, $themeType, variant, state, breakpoint, color2, $isFullWidth, fontSize, fontWeight) => `
+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)}
       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
+    fontWeight,
+    $letterSpacing,
+    $lineHeight
   );
 }}
 `;
@@ -59379,22 +59375,24 @@ const Text = styled(Typography$1.Text)`
   $themeType,
   variant,
   state,
-  breakpoint,
   color: color2,
   $isFullWidth,
   fontSize,
-  fontWeight
+  fontWeight,
+  $letterSpacing,
+  $lineHeight
 }) => {
   return getGenesisTypographyClass(
     theme,
     $themeType,
     variant,
     state,
-    breakpoint,
     color2,
     $isFullWidth,
     fontSize,
-    fontWeight
+    fontWeight,
+    $letterSpacing,
+    $lineHeight
   );
 }}
 `;
@@ -60162,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`
@@ -60369,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(
@@ -60378,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
       }
@@ -60399,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
       }
@@ -60417,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
     }
@@ -74314,7 +74316,6 @@ const Input2 = React__default.forwardRef(
     size = "normal",
     onChange,
     value: value2,
-    isPassword,
     ...rest
   }, ref) => {
     const addonAfter = React__default.isValidElement(rest.addonAfter) && rest.addonAfter.type === Select$1 ? React__default.cloneElement(
@@ -82593,7 +82594,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;
@@ -82792,9 +82792,9 @@ const wideTypography = {
     letterSpacing: "0"
   },
   subHeading2: {
-    fontSize: TypographyWideFontSizeSubHeading2,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
+    fontSize: "24px",
+    lineHeight: "32px",
+    fontWeight: 400,
     letterSpacing: "0"
   },
   subHeading3: {
@@ -85814,7 +85814,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",
@@ -85829,21 +85829,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 = ({
@@ -85860,7 +85857,7 @@ const GroupsRow = ({
     GroupItem,
     {
       title: group.title,
-      items: group?.items,
+      items: group.items,
       onGroupItemClick,
       getCustomIcon
     },
@@ -85961,12 +85958,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,
@@ -87467,7 +87458,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.2",
+  "version": "0.6.3",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",