@gobolt/genesis 0.2.20 → 0.3.0

package/README.md

@@ -8,7 +8,7 @@
 
 [Storybook hosted on Google Cloud](https://genesis-storybook-365607811897.us-central1.run.app/?path=/docs/genesis-design-system-design-tokens-color-tokens--docs)
 
-The GENESIS design system standardizes our colors, fonts, and sizing tokens across all our apps. 
+The GENESIS design system standardizes our colors, fonts, and sizing tokens across all our apps.
 
 It unifies frontend app development around these core libraries:
 
@@ -17,7 +17,6 @@ It unifies frontend app development around these core libraries:
 - [Typescript](https://www.typescriptlang.org/) v5
 - [React](https://react.dev/) v18
 
-
 ## 📦 Development
 
 ```bash
@@ -25,14 +24,14 @@ npm install
 npm start
 ```
 
-To scaffold a new component, run `npm run generate` and add the component name in PascalCase 
+To scaffold a new component, run `npm run generate` and add the component name in PascalCase
 
 example:
+
 ```
 npm run generate RadioGroup
 ```
 
-
 ## 🔨 Usage
 
 Install the GENESIS library
@@ -41,7 +40,7 @@ Install the GENESIS library
 npm install @gobolt/genesis
 ```
 
-The `GenesisProvider` must included within the application as it supplies the Genesis Theme. 
+The `GenesisProvider` must included within the application as it supplies the Genesis Theme.
 
 ```jsx
 import { Button, GenesisProvider } from '@gobolt/genesis;
@@ -65,12 +64,12 @@ The library exports both the components and their types which are documented in
 ## 🧪 Testing
 
 ```
-npm test 
+npm test
 ```
 
-[husky](https://typicode.github.io/husky/) has been configured to automatically run the tests on push to Github and will enforce that all tests pass.  
+[husky](https://typicode.github.io/husky/) has been configured to automatically run the tests on push to Github and will enforce that all tests pass.
 
-## 🚀 Publishing 
+## 🚀 Publishing
 
 This project uses [rollup](https://rollupjs.org/) to create the package and [changesets](https://github.com/changesets/changesets) to manage it's versions. We only need to run changesets when we're ready to release and publish the library.
 
@@ -88,13 +87,13 @@ just deploy
 
 See the .justfile which simplifies this [Storybook GCP script on Notion](https://www.notion.so/gobolt/Deploy-Genesis-Storybook-to-GCP-1759f4303960806e8d88cf1e751cb19d).
 
-requires: [just](https://github.com/casey/just) 
+requires: [just](https://github.com/casey/just)
 
 ```
 brew install just
 ```
 
-## Test the build 
+## Test the build
 
 If you want to test the build before deploying...
 
@@ -102,4 +101,4 @@ If you want to test the build before deploying...
 rm -rf storybook-static
 npm build-storybook
 python3 -m http.server 6006 -d storybook-static
-```
+```

package/dist/_virtual/index5.cjs

@@ -1,6 +1,6 @@
 "use strict";
 var _commonjsHelpers = require("./_commonjsHelpers.cjs");
-var index = require("../node_modules/debounce/index.cjs");
-var debounceExports = /* @__PURE__ */ index.__require();
-var debounce = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(debounceExports);
-module.exports = debounce;
+var index = require("../node_modules/copy-to-clipboard/index.cjs");
+var copyToClipboardExports = index.__require();
+var copy = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(copyToClipboardExports);
+module.exports = copy;

package/dist/_virtual/index5.js

@@ -1,7 +1,7 @@
 import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
-import { __require as requireDebounce } from "../node_modules/debounce/index.js";
-var debounceExports = /* @__PURE__ */ requireDebounce();
-var debounce = /* @__PURE__ */ getDefaultExportFromCjs(debounceExports);
+import { __require as requireCopyToClipboard } from "../node_modules/copy-to-clipboard/index.js";
+var copyToClipboardExports = requireCopyToClipboard();
+var copy = /* @__PURE__ */ getDefaultExportFromCjs(copyToClipboardExports);
 export {
-  debounce as default
+  copy as default
 };

package/dist/_virtual/index6.cjs

@@ -1,6 +1,6 @@
 "use strict";
 var _commonjsHelpers = require("./_commonjsHelpers.cjs");
-var index = require("../node_modules/copy-to-clipboard/index.cjs");
-var copyToClipboardExports = index.__require();
-var copy = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(copyToClipboardExports);
-module.exports = copy;
+var index = require("../node_modules/style-to-js/cjs/index.cjs");
+var cjsExports = index.__require();
+var styleToJs = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(cjsExports);
+module.exports = styleToJs;

package/dist/_virtual/index6.js

@@ -1,7 +1,7 @@
 import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
-import { __require as requireCopyToClipboard } from "../node_modules/copy-to-clipboard/index.js";
-var copyToClipboardExports = requireCopyToClipboard();
-var copy = /* @__PURE__ */ getDefaultExportFromCjs(copyToClipboardExports);
+import { __require as requireCjs } from "../node_modules/style-to-js/cjs/index.js";
+var cjsExports = requireCjs();
+var styleToJs = /* @__PURE__ */ getDefaultExportFromCjs(cjsExports);
 export {
-  copy as default
+  styleToJs as default
 };

package/dist/_virtual/index7.cjs

@@ -1,3 +1,6 @@
 "use strict";
-var debounce = { exports: {} };
-exports.__module = debounce;
+var _commonjsHelpers = require("./_commonjsHelpers.cjs");
+var index = require("../node_modules/extend/index.cjs");
+var extendExports = index.__require();
+var extend = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(extendExports);
+module.exports = extend;

package/dist/_virtual/index7.js

@@ -1,4 +1,7 @@
-var debounce = { exports: {} };
+import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
+import { __require as requireExtend } from "../node_modules/extend/index.js";
+var extendExports = requireExtend();
+var extend = /* @__PURE__ */ getDefaultExportFromCjs(extendExports);
 export {
-  debounce as __module
+  extend as default
 };

package/dist/_virtual/index8.cjs

@@ -0,0 +1,3 @@
+"use strict";
+var cjs = {};
+exports.__exports = cjs;

package/dist/_virtual/index8.js

@@ -0,0 +1,4 @@
+var cjs = {};
+export {
+  cjs as __exports
+};

package/dist/_virtual/utilities.cjs

@@ -0,0 +1,3 @@
+"use strict";
+var utilities = {};
+exports.__exports = utilities;

package/dist/_virtual/utilities.js

@@ -0,0 +1,4 @@
+var utilities = {};
+export {
+  utilities as __exports
+};

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

@@ -1,5 +1,5 @@
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
-interface StyledAvatarProps {
+interface StyledAvatarProperties {
     theme?: GenesisTheme;
     type?: "primary" | "secondary";
     state?: "active" | "disabled";
@@ -11,7 +11,7 @@ export declare const getGenesisClass: ({ colors, borderRadius, sizing }: {
 }, type?: string, state?: string) => string;
 export declare const Avatar: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('antd').AvatarProps & import('react').RefAttributes<HTMLSpanElement>, "ref"> & {
     ref?: import('react').Ref<HTMLSpanElement>;
-}, StyledAvatarProps>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd').AvatarProps & import('react').RefAttributes<HTMLSpanElement>> & {
+}, StyledAvatarProperties>> & string & Omit<import('react').ForwardRefExoticComponent<import('antd').AvatarProps & import('react').RefAttributes<HTMLSpanElement>> & {
     Group: import('react').FC<import('antd/es/avatar/AvatarGroup').AvatarGroupProps>;
 }, keyof import('react').Component<any, {}, any>>;
 export {};

package/dist/components/Badge/Badge.cjs

@@ -34,7 +34,7 @@ const Badge = ({
         style: {
           padding: "4px 4px"
         },
-        hasHover,
+        $hasHover: hasHover,
         ...rest,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -65,8 +65,8 @@ const Badge = ({
       state,
       disabled: isDisabled,
       style: { cursor: role === "button" ? "pointer" : "default" },
-      backgroundColor,
-      hasHover,
+      $backgroundColor: backgroundColor,
+      $hasHover: hasHover,
       ...rest,
       children: [
         iconUtil.getBadgeStateIcon(

package/dist/components/Badge/Badge.js

@@ -33,7 +33,7 @@ const Badge = ({
         style: {
           padding: "4px 4px"
         },
-        hasHover,
+        $hasHover: hasHover,
         ...rest,
         children: /* @__PURE__ */ jsx(
           "div",
@@ -64,8 +64,8 @@ const Badge = ({
       state,
       disabled: isDisabled,
       style: { cursor: role === "button" ? "pointer" : "default" },
-      backgroundColor,
-      hasHover,
+      $backgroundColor: backgroundColor,
+      $hasHover: hasHover,
       ...rest,
       children: [
         getBadgeStateIcon(

package/dist/components/Badge/__stories__/Badge.stories.d.ts

@@ -10,6 +10,7 @@ export declare const Warning: Story;
 export declare const Generic: Story;
 export declare const Hollow: Story;
 export declare const Disabled: Story;
+export declare const CompareSeveralBadges: Story;
 export declare const Icon: Story;
 export declare const WithClose: Story;
 export declare const NoIconNoCloseNoHover: Story;

package/dist/components/Badge/styles.cjs

@@ -6,8 +6,9 @@ const getBorderColor = (theme, state) => {
   }
   return theme.colors.status[state].surface;
 };
-const getGenesisClass = (theme, state, label, disabled, backgroundColor, textColor, hasHover) => `
-  display: flex;
+const getGenesisClass = (theme, state, label, disabled, $backgroundColor, $hasHover) => `
+  display: inline-flex; 
+  align-self: inherit;
   gap: 4px;
   justify-content: center;
   align-items: center;
@@ -18,10 +19,10 @@ const getGenesisClass = (theme, state, label, disabled, backgroundColor, textCol
   padding-right: ${theme.components.badge["right-padding"]}px;
   border-radius: ${theme.components.badge.radius}px;
   border: 1px solid ${getBorderColor(theme, state)};
-  background-color: ${backgroundColor || theme.colors.status[state].surface};
+  background-color: ${$backgroundColor || theme.colors.status[state].surface};
 
   &:not(:disabled):hover {
-    ${hasHover ? `background-color: ${theme.colors.status[state]["surface-hover"]};` : ""}
+    ${$hasHover ? `background-color: ${theme.colors.status[state]["surface-hover"]};` : ""}
   }
 
   ${disabled ? `
@@ -41,18 +42,16 @@ const Badge = styled.div`
   state,
   label,
   disabled,
-  backgroundColor,
-  textColor,
-  hasHover
+  $backgroundColor,
+  $hasHover
 }) => {
   return getGenesisClass(
     theme,
     state,
     label,
     disabled,
-    backgroundColor,
-    textColor,
-    hasHover
+    $backgroundColor,
+    $hasHover
   );
 }}
 `;

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

@@ -1,14 +1,13 @@
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
 import { State } from './Badge';
-interface StyledBadgeProps {
+interface StyledBadgeProperties {
     theme?: GenesisTheme;
     state?: State;
     label?: string;
     disabled?: boolean;
-    backgroundColor?: string;
-    textColor?: string;
-    hasHover?: boolean;
+    $backgroundColor?: string;
+    $hasHover?: boolean;
 }
-export declare const getGenesisClass: (theme: GenesisTheme, state: State, label?: string, disabled?: boolean, backgroundColor?: string, textColor?: string, hasHover?: boolean) => string;
-export declare const Badge: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledBadgeProps>> & string;
+export declare const getGenesisClass: (theme: GenesisTheme, state: State, label?: string, disabled?: boolean, $backgroundColor?: string, $hasHover?: boolean) => string;
+export declare const Badge: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledBadgeProperties>> & string;
 export {};

package/dist/components/Badge/styles.js

@@ -5,8 +5,9 @@ const getBorderColor = (theme, state) => {
   }
   return theme.colors.status[state].surface;
 };
-const getGenesisClass = (theme, state, label, disabled, backgroundColor, textColor, hasHover) => `
-  display: flex;
+const getGenesisClass = (theme, state, label, disabled, $backgroundColor, $hasHover) => `
+  display: inline-flex; 
+  align-self: inherit;
   gap: 4px;
   justify-content: center;
   align-items: center;
@@ -17,10 +18,10 @@ const getGenesisClass = (theme, state, label, disabled, backgroundColor, textCol
   padding-right: ${theme.components.badge["right-padding"]}px;
   border-radius: ${theme.components.badge.radius}px;
   border: 1px solid ${getBorderColor(theme, state)};
-  background-color: ${backgroundColor || theme.colors.status[state].surface};
+  background-color: ${$backgroundColor || theme.colors.status[state].surface};
 
   &:not(:disabled):hover {
-    ${hasHover ? `background-color: ${theme.colors.status[state]["surface-hover"]};` : ""}
+    ${$hasHover ? `background-color: ${theme.colors.status[state]["surface-hover"]};` : ""}
   }
 
   ${disabled ? `
@@ -40,18 +41,16 @@ const Badge = styled.div`
   state,
   label,
   disabled,
-  backgroundColor,
-  textColor,
-  hasHover
+  $backgroundColor,
+  $hasHover
 }) => {
   return getGenesisClass(
     theme,
     state,
     label,
     disabled,
-    backgroundColor,
-    textColor,
-    hasHover
+    $backgroundColor,
+    $hasHover
   );
 }}
 `;

package/dist/components/Breadcrumb/styles.cjs

@@ -58,7 +58,9 @@ const BreadcrumbWrapper = styled.div`
     `}
   opacity: ${({ $isDisabled }) => $isDisabled ? 0.5 : 1};
 `;
-const Breadcrumb = styled(Breadcrumb$1)`
+const Breadcrumb = styled(
+  Breadcrumb$1
+)`
   ${({ theme, breakpoint }) => theme && getGenesisClass(theme, breakpoint)}
 `;
 exports.Breadcrumb = Breadcrumb;

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

@@ -1,17 +1,17 @@
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
-interface StyledBreadcrumbProps {
+interface StyledBreadcrumbProperties {
     theme?: GenesisTheme;
     $isDisabled?: boolean;
 }
-interface StyledBreadcrumbComponentProps extends StyledBreadcrumbProps {
+interface StyledBreadcrumbComponentProperties extends StyledBreadcrumbProperties {
     type?: string;
     state?: string;
     breakpoint?: string;
     role?: string;
 }
 export declare const getGenesisClass: ({ colors, typography }: GenesisTheme, breakpoint?: string) => string;
-export declare const BreadcrumbWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledBreadcrumbProps>> & string;
-export declare const Breadcrumb: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('antd').BreadcrumbProps<import('antd/es/_util/type').AnyObject>, StyledBreadcrumbComponentProps>> & string & Omit<{
+export declare const BreadcrumbWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledBreadcrumbProperties>> & string;
+export declare const Breadcrumb: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('antd').BreadcrumbProps<import('antd/es/_util/type').AnyObject>, StyledBreadcrumbComponentProperties>> & string & Omit<{
     <T extends import('antd/es/_util/type').AnyObject = import('antd/es/_util/type').AnyObject>(props: import('antd').BreadcrumbProps<T>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
     Item: React.FC<import('antd').BreadcrumbItemProps> & {
         __ANT_BREADCRUMB_ITEM: boolean;

package/dist/components/Breadcrumb/styles.js

@@ -56,7 +56,9 @@ const BreadcrumbWrapper = styled.div`
     `}
   opacity: ${({ $isDisabled }) => $isDisabled ? 0.5 : 1};
 `;
-const Breadcrumb = styled(Breadcrumb$1)`
+const Breadcrumb = styled(
+  Breadcrumb$1
+)`
   ${({ theme, breakpoint }) => theme && getGenesisClass(theme, breakpoint)}
 `;
 export {

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

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

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

@@ -1,5 +1,5 @@
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
-interface StyledIconButtonProps {
+interface StyledIconButtonProperties {
     theme?: GenesisTheme;
     $themeType?: "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
     $state?: "active" | "hover" | "pressed" | "focus" | "disabled" | "selected";
@@ -8,5 +8,5 @@ interface StyledIconButtonProps {
     $isSelected?: boolean;
     size?: "small" | "normal" | "large";
 }
-export declare const Button: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledIconButtonProps>> & string;
+export declare const Button: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledIconButtonProperties>> & string;
 export {};

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

@@ -1,6 +1,6 @@
-import { ButtonProps as AntButtonProps } from 'antd/es/button';
+import { ButtonProps as AntButtonProperties } from 'antd/es/button';
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
-interface StyledButtonProps extends Omit<AntButtonProps, "type" | "size"> {
+interface StyledButtonProperties extends Omit<AntButtonProperties, "type" | "size"> {
     theme?: GenesisTheme;
     $themeType?: "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
     $state?: "active" | "hover" | "pressed" | "focus" | "disabled" | "selected";
@@ -8,9 +8,9 @@ interface StyledButtonProps extends Omit<AntButtonProps, "type" | "size"> {
     $isIconButton?: boolean;
     size?: "small" | "normal" | "large";
 }
-export declare const Button: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<AntButtonProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref"> & {
+export declare const Button: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<AntButtonProperties & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>, "ref"> & {
     ref?: import('react').Ref<HTMLAnchorElement | HTMLButtonElement>;
-}, StyledButtonProps>> & string & Omit<import('react').ForwardRefExoticComponent<AntButtonProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>> & {
+}, StyledButtonProperties>> & string & Omit<import('react').ForwardRefExoticComponent<AntButtonProperties & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>> & {
     Group: import('react').FC<import('antd/es/button').ButtonGroupProps>;
 }, keyof import('react').Component<any, {}, any>>;
 export {};

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

@@ -1,5 +1,5 @@
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
-interface StyledCardProps {
+interface StyledCardProperties {
     theme?: GenesisTheme;
     type?: "primary" | "secondary";
     state?: "active" | "disabled";
@@ -11,5 +11,5 @@ export declare const getGenesisClass: ({ colors, borderRadius, sizing }: {
 }, type?: string, state?: string) => string;
 export declare const Card: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('antd').CardProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: import('react').Ref<HTMLDivElement>;
-}, StyledCardProps>> & string & Omit<import('antd/es/card').CardInterface, keyof import('react').Component<any, {}, any>>;
+}, StyledCardProperties>> & string & Omit<import('antd/es/card').CardInterface, keyof import('react').Component<any, {}, any>>;
 export {};