@gobolt/genesis 0.2.16 → 0.2.18

package/dist/components/DateRangePicker/DateRangePicker.cjs

@@ -11,7 +11,8 @@ const DateRangerPicker = (props) => {
       ...props,
       style: {
         border: `1px solid ${theme.colors.inputs.surface.border}`,
-        padding: "8px"
+        padding: "8px",
+        width: "100%"
       }
     }
   );

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -10,7 +10,8 @@ const DateRangerPicker = (props) => {
       ...props,
       style: {
         border: `1px solid ${theme.colors.inputs.surface.border}`,
-        padding: "8px"
+        padding: "8px",
+        width: "100%"
       }
     }
   );

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

@@ -6,4 +6,5 @@ type Story = StoryObj<typeof DateRangePicker>;
 export declare const DateRange: Story;
 export declare const DateTimeRange: Story;
 export declare const SetDateRange: Story;
+export declare const FillParentWidth: Story;
 export declare const CommplexRow: Story;

package/dist/components/Input/Input.cjs

@@ -11,18 +11,20 @@ const Input = ({
   ...rest
 }) => {
   const { type, ...validRest } = rest;
-  const validSize = size === "normal" ? "middle" : size;
   const addonAfter = React.isValidElement(rest.addonAfter) && rest.addonAfter.type === index ? React.cloneElement(rest.addonAfter, {
     suffixIcon: /* @__PURE__ */ jsxRuntime.jsx(DropdownChevron, {})
   }) : rest.addonAfter;
   return /* @__PURE__ */ jsxRuntime.jsx(
     styles.Input,
     {
-      size: validSize,
+      size,
       state,
       disabled: state === "disabled" || rest.disabled,
       ...validRest,
-      addonAfter
+      addonAfter,
+      style: {
+        height: size === "normal" || size === "large" ? "40px" : "32px"
+      }
     }
   );
 };

package/dist/components/Input/Input.js

@@ -10,18 +10,20 @@ const Input = ({
   ...rest
 }) => {
   const { type, ...validRest } = rest;
-  const validSize = size === "normal" ? "middle" : size;
   const addonAfter = React__default.isValidElement(rest.addonAfter) && rest.addonAfter.type === Select ? React__default.cloneElement(rest.addonAfter, {
     suffixIcon: /* @__PURE__ */ jsx(DropdownChevron, {})
   }) : rest.addonAfter;
   return /* @__PURE__ */ jsx(
     Input$1,
     {
-      size: validSize,
+      size,
       state,
       disabled: state === "disabled" || rest.disabled,
       ...validRest,
-      addonAfter
+      addonAfter,
+      style: {
+        height: size === "normal" || size === "large" ? "40px" : "32px"
+      }
     }
   );
 };

package/dist/components/Input/styles.cjs

@@ -37,7 +37,7 @@ const getStateColors = (colors, type, state) => {
   const css = stateMap[getValidKey(state)];
   return css;
 };
-const getGenesisInputClass = ({ colors, borderRadius, components }, type, state, hasBeforeAddon, hasAfterAddon) => {
+const getGenesisInputClass = ({ colors, borderRadius, components }, type, state, hasBeforeAddon, hasAfterAddon, size) => {
   const stateColors = getStateColors(colors, type, state);
   const getBorderRadius = (hasBeforeAddon2, hasAfterAddon2) => {
     if (hasAfterAddon2 && !hasBeforeAddon2) {
@@ -53,6 +53,7 @@ const getGenesisInputClass = ({ colors, borderRadius, components }, type, state,
         font-family: 'Inter', sans-serif;
         color: ${stateColors.color};
         border-color: ${stateColors.borderColor};
+        height: ${size === "normal" || size === "large" ? "40px" : "32px !important"};
     }
 
     &.ant-input-outlined {
@@ -139,7 +140,7 @@ const getGenesisInputClass = ({ colors, borderRadius, components }, type, state,
   `;
 };
 const Input = styled(index$1)`
-  ${({ theme, state, type = index.TYPE.primary, ...rest }) => {
+  ${({ theme, state, type = index.TYPE.primary, size = "normal", ...rest }) => {
   const hasBeforeAddon = !!rest.addonBefore;
   const hasAfterAddon = !!rest.addonAfter;
   return getGenesisInputClass(
@@ -147,7 +148,8 @@ const Input = styled(index$1)`
     type,
     state,
     hasBeforeAddon,
-    hasAfterAddon
+    hasAfterAddon,
+    size
   );
 }}
 `;

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

@@ -1,7 +1,8 @@
 import { InputProps as AntInputProps } from 'antd';
 import { STATE } from '../../constants';
-interface InputStyledProps extends AntInputProps {
+interface InputStyledProps extends Omit<AntInputProps, "size"> {
     state?: keyof typeof STATE;
+    size?: "normal" | "small" | "large";
 }
 export declare const Input: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<AntInputProps & import('react').RefAttributes<import('rc-input').InputRef>, "ref"> & {
     ref?: import('react').Ref<import('rc-input').InputRef>;

package/dist/components/Input/styles.js

@@ -36,7 +36,7 @@ const getStateColors = (colors, type, state) => {
   const css = stateMap[getValidKey(state)];
   return css;
 };
-const getGenesisInputClass = ({ colors, borderRadius, components }, type, state, hasBeforeAddon, hasAfterAddon) => {
+const getGenesisInputClass = ({ colors, borderRadius, components }, type, state, hasBeforeAddon, hasAfterAddon, size) => {
   const stateColors = getStateColors(colors, type, state);
   const getBorderRadius = (hasBeforeAddon2, hasAfterAddon2) => {
     if (hasAfterAddon2 && !hasBeforeAddon2) {
@@ -52,6 +52,7 @@ const getGenesisInputClass = ({ colors, borderRadius, components }, type, state,
         font-family: 'Inter', sans-serif;
         color: ${stateColors.color};
         border-color: ${stateColors.borderColor};
+        height: ${size === "normal" || size === "large" ? "40px" : "32px !important"};
     }
 
     &.ant-input-outlined {
@@ -138,7 +139,7 @@ const getGenesisInputClass = ({ colors, borderRadius, components }, type, state,
   `;
 };
 const Input = styled(Input$1)`
-  ${({ theme, state, type = TYPE.primary, ...rest }) => {
+  ${({ theme, state, type = TYPE.primary, size = "normal", ...rest }) => {
   const hasBeforeAddon = !!rest.addonBefore;
   const hasAfterAddon = !!rest.addonAfter;
   return getGenesisInputClass(
@@ -146,7 +147,8 @@ const Input = styled(Input$1)`
     type,
     state,
     hasBeforeAddon,
-    hasAfterAddon
+    hasAfterAddon,
+    size
   );
 }}
 `;

package/dist/components/Select/Select.cjs

@@ -11,6 +11,7 @@ const Select = ({
   variant = "none",
   defaultValue,
   onChange,
+  size = "normal",
   ...rest
 }) => {
   const { breakpoint } = useGenesis.useGenesis();
@@ -33,6 +34,7 @@ const Select = ({
     styles.Select,
     {
       ...rest,
+      size,
       defaultValue,
       $variant: variant,
       suffixIcon: /* @__PURE__ */ jsxRuntime.jsx(DropdownChevron, {}),

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

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { TYPE, STATE } from '../../constants';
 import { SelectProps as AntSelectProps } from 'antd';
-export interface SelectProps extends Omit<AntSelectProps, "variant"> {
+export interface SelectProps extends Omit<AntSelectProps, "variant" | "size"> {
     type?: keyof typeof TYPE;
     state?: keyof typeof STATE;
     options?: {
@@ -11,6 +11,7 @@ export interface SelectProps extends Omit<AntSelectProps, "variant"> {
     variant?: "simple" | "none";
     defaultValue?: string | string[] | number | number[] | unknown;
     onChange?: (value: string | string[]) => void;
+    size?: "normal" | "small" | "large";
 }
-declare const Select: ({ type, state, variant, defaultValue, onChange, ...rest }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const Select: ({ type, state, variant, defaultValue, onChange, size, ...rest }: SelectProps) => import("react/jsx-runtime").JSX.Element;
 export default Select;

package/dist/components/Select/Select.js

@@ -10,6 +10,7 @@ const Select = ({
   variant = "none",
   defaultValue,
   onChange,
+  size = "normal",
   ...rest
 }) => {
   const { breakpoint } = useGenesis();
@@ -32,6 +33,7 @@ const Select = ({
     Select$1,
     {
       ...rest,
+      size,
       defaultValue,
       $variant: variant,
       suffixIcon: /* @__PURE__ */ jsx(DropdownChevron, {}),

package/dist/components/Select/styles.cjs

@@ -39,7 +39,7 @@ const getSimpleVariant = (colors, type, state, borderRadius) => {
     }
   `;
 };
-const getGenesisClass = ({ colors, sizing: sizing2, typography, borderRadius }, type, state, $variant) => {
+const getGenesisClass = ({ colors, sizing: sizing2, typography, borderRadius }, type, state, $variant, size) => {
   var _a, _b, _c, _d;
   if ($variant === "simple") {
     return getSimpleVariant(colors, type, state, borderRadius);
@@ -55,8 +55,7 @@ const getGenesisClass = ({ colors, sizing: sizing2, typography, borderRadius },
 
       width: 100%; 
       min-width: 250px;
-      height: auto;
-      min-height: 32px;
+      height: ${size === "normal" || size === "large" ? "40px" : "32px"};
 
       //background-color:  ${colors[type][state].backgroundColor}
       background-color: #fff;
@@ -221,7 +220,13 @@ const SelectDropdown = styled.div`
   }
 `;
 const Select = styled(index)`
-  ${({ theme: theme2, type = "primary", state = "active", $variant = "none" }) => getGenesisClass(theme2, type, state, $variant)}
+  ${({
+  theme: theme2,
+  type = "primary",
+  state = "active",
+  $variant = "none",
+  size = "normal"
+}) => getGenesisClass(theme2, type, state, $variant, size)}
 `;
 exports.Select = Select;
 exports.SelectDropdown = SelectDropdown;

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

@@ -11,6 +11,7 @@ interface SelectWrapperProps {
     $isFocused: boolean;
     type: keyof typeof TYPE;
     variant?: "simple" | "none";
+    size?: "normal" | "small" | "large";
 }
 export declare const SelectWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SelectWrapperProps>> & string;
 export declare const getGenesisClass: ({ colors, sizing, typography, borderRadius }: {
@@ -18,7 +19,7 @@ export declare const getGenesisClass: ({ colors, sizing, typography, borderRadiu
     sizing: any;
     typography: any;
     borderRadius: any;
-}, type: any, state: any, $variant: any) => string;
+}, type: any, state: any, $variant: any, size: any) => string;
 interface SelectMenuItemProps {
     theme: GenesisTheme;
     type?: keyof typeof TYPE;
@@ -29,6 +30,7 @@ interface SelectDropdownProps {
     theme: GenesisTheme;
     type?: keyof typeof TYPE;
     state?: keyof Breakpoint;
+    size?: "normal" | "small" | "large";
 }
 export declare const SelectDropdown: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SelectDropdownProps>> & string;
 type StyledSelectComponent = StyledComponent<typeof AntSelect, any, StyledSelectProps & {

package/dist/components/Select/styles.js

@@ -38,7 +38,7 @@ const getSimpleVariant = (colors, type, state, borderRadius) => {
     }
   `;
 };
-const getGenesisClass = ({ colors, sizing: sizing2, typography, borderRadius }, type, state, $variant) => {
+const getGenesisClass = ({ colors, sizing: sizing2, typography, borderRadius }, type, state, $variant, size) => {
   var _a, _b, _c, _d;
   if ($variant === "simple") {
     return getSimpleVariant(colors, type, state, borderRadius);
@@ -54,8 +54,7 @@ const getGenesisClass = ({ colors, sizing: sizing2, typography, borderRadius },
 
       width: 100%; 
       min-width: 250px;
-      height: auto;
-      min-height: 32px;
+      height: ${size === "normal" || size === "large" ? "40px" : "32px"};
 
       //background-color:  ${colors[type][state].backgroundColor}
       background-color: #fff;
@@ -220,7 +219,13 @@ const SelectDropdown = styled.div`
   }
 `;
 const Select = styled(Select$1)`
-  ${({ theme: theme2, type = "primary", state = "active", $variant = "none" }) => getGenesisClass(theme2, type, state, $variant)}
+  ${({
+  theme: theme2,
+  type = "primary",
+  state = "active",
+  $variant = "none",
+  size = "normal"
+}) => getGenesisClass(theme2, type, state, $variant, size)}
 `;
 export {
   Select,

package/dist/components/index.d.ts

@@ -25,8 +25,6 @@ export { default as ErrorBoundaryFallback } from './ErrorBoundaryFallback';
 export type { ErrorBoundaryFallbackProps } from './ErrorBoundaryFallback';
 export { default as Form } from './Form';
 export type { FormProps } from './Form';
-export { default as GoBolt } from './GoBolt';
-export type { GoBoltProps } from './GoBolt';
 export { default as Input } from './Input';
 export type { InputProps } from './Input';
 export { default as Layout } from './Layout';

package/dist/index.cjs

@@ -14,7 +14,6 @@ var DateRangePicker = require("./components/DateRangePicker/DateRangePicker.cjs"
 var ErrorBoundary = require("./components/ErrorBoundary/ErrorBoundary.cjs");
 var ErrorBoundaryFallback = require("./components/ErrorBoundaryFallback/ErrorBoundaryFallback.cjs");
 var Form = require("./components/Form/Form.cjs");
-var GoBolt = require("./components/GoBolt/GoBolt.cjs");
 var Input = require("./components/Input/Input.cjs");
 var Layout = require("./components/Layout/Layout.cjs");
 var Message = require("./components/Message/Message.cjs");
@@ -55,7 +54,6 @@ exports.DateRangePicker = DateRangePicker;
 exports.ErrorBoundary = ErrorBoundary;
 exports.ErrorBoundaryFallback = ErrorBoundaryFallback;
 exports.Form = Form.default;
-exports.GoBolt = GoBolt;
 exports.Input = Input;
 exports.Layout = Layout;
 exports.Message = Message;

package/dist/index.js

@@ -13,27 +13,26 @@ import { default as default12 } from "./components/DateRangePicker/DateRangePick
 import { default as default13 } from "./components/ErrorBoundary/ErrorBoundary.js";
 import { default as default14 } from "./components/ErrorBoundaryFallback/ErrorBoundaryFallback.js";
 import { default as default15 } from "./components/Form/Form.js";
-import { default as default16 } from "./components/GoBolt/GoBolt.js";
-import { default as default17 } from "./components/Input/Input.js";
-import { default as default18 } from "./components/Layout/Layout.js";
-import { default as default19 } from "./components/Message/Message.js";
-import { default as default20 } from "./components/Notification/Notification.js";
-import { default as default21 } from "./components/Popover/Popover.js";
-import { default as default22 } from "./components/Progress/Progress.js";
-import { default as default23 } from "./components/Radio/RadioGroup.js";
-import { default as default24 } from "./components/Row/Row.js";
-import { default as default25 } from "./components/SegmentedControls/SegmentedControls.js";
-import { default as default26 } from "./components/Select/Select.js";
-import { default as default27 } from "./components/Select/MultiSelectCount.js";
-import { default as default28 } from "./components/Shapes/Shapes.js";
-import { default as default29 } from "./components/Switch/Switch.js";
-import { default as default30 } from "./components/Table/Table.js";
-import { default as default31 } from "./components/Table/TableWithControls/TableWithControls.js";
-import { default as default32 } from "./components/Tabs/Tabs.js";
-import { default as default33 } from "./components/Tile/Tile.js";
-import { default as default34 } from "./components/Toast/Toast.js";
-import { default as default35 } from "./components/Tooltip/Tooltip.js";
-import { default as default36 } from "./components/Typography/Typography.js";
+import { default as default16 } from "./components/Input/Input.js";
+import { default as default17 } from "./components/Layout/Layout.js";
+import { default as default18 } from "./components/Message/Message.js";
+import { default as default19 } from "./components/Notification/Notification.js";
+import { default as default20 } from "./components/Popover/Popover.js";
+import { default as default21 } from "./components/Progress/Progress.js";
+import { default as default22 } from "./components/Radio/RadioGroup.js";
+import { default as default23 } from "./components/Row/Row.js";
+import { default as default24 } from "./components/SegmentedControls/SegmentedControls.js";
+import { default as default25 } from "./components/Select/Select.js";
+import { default as default26 } from "./components/Select/MultiSelectCount.js";
+import { default as default27 } from "./components/Shapes/Shapes.js";
+import { default as default28 } from "./components/Switch/Switch.js";
+import { default as default29 } from "./components/Table/Table.js";
+import { default as default30 } from "./components/Table/TableWithControls/TableWithControls.js";
+import { default as default31 } from "./components/Tabs/Tabs.js";
+import { default as default32 } from "./components/Tile/Tile.js";
+import { default as default33 } from "./components/Toast/Toast.js";
+import { default as default34 } from "./components/Tooltip/Tooltip.js";
+import { default as default35 } from "./components/Typography/Typography.js";
 import { GenesisProvider } from "./providers/GenesisProvider.js";
 import { useTable } from "./components/Table/useTable.js";
 import { useTableWithControls } from "./components/Table/TableWithControls/useTableWithControls.js";
@@ -54,28 +53,27 @@ export {
   default2 as GENESIS,
   GenesisProvider,
   GlobalStyles,
-  default16 as GoBolt,
   default8 as IconButton,
-  default17 as Input,
-  default18 as Layout,
-  default19 as Message,
-  default27 as MultiSelectCount,
-  default20 as Notification,
-  default21 as Popover,
-  default22 as Progress,
-  default23 as RadioGroup,
-  default24 as Row,
-  default25 as SegmentedControls,
-  default26 as Select,
-  default28 as Shapes,
-  default29 as Switch,
-  default30 as Table,
-  default31 as TableWithControls,
-  default32 as Tabs,
-  default33 as Tile,
-  default34 as Toast,
-  default35 as Tooltip,
-  default36 as Typography,
+  default16 as Input,
+  default17 as Layout,
+  default18 as Message,
+  default26 as MultiSelectCount,
+  default19 as Notification,
+  default20 as Popover,
+  default21 as Progress,
+  default22 as RadioGroup,
+  default23 as Row,
+  default24 as SegmentedControls,
+  default25 as Select,
+  default27 as Shapes,
+  default28 as Switch,
+  default29 as Table,
+  default30 as TableWithControls,
+  default31 as Tabs,
+  default32 as Tile,
+  default33 as Toast,
+  default34 as Tooltip,
+  default35 as Typography,
   TypographySizeKey,
   default7 as UtilityButton,
   baseTokens,

package/package.json

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

package/dist/components/GoBolt/GoBolt.cjs

@@ -1,6 +0,0 @@
-"use strict";
-var jsxRuntime = require("react/jsx-runtime");
-const GoBolt = ({ hello = "hello world" }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("p", { children: hello });
-};
-module.exports = GoBolt;

package/dist/components/GoBolt/GoBolt.d.ts

@@ -1,7 +0,0 @@
-export interface GoBoltProps {
-    hello?: string;
-}
-declare const GoBolt: ({ hello }: {
-    hello?: string;
-}) => import("react/jsx-runtime").JSX.Element;
-export default GoBolt;

package/dist/components/GoBolt/GoBolt.js

@@ -1,7 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-const GoBolt = ({ hello = "hello world" }) => {
-  return /* @__PURE__ */ jsx("p", { children: hello });
-};
-export {
-  GoBolt as default
-};

package/dist/components/GoBolt/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './GoBolt';
-export type { GoBoltProps } from './GoBolt';