Updating types

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/report.api.md

@@ -11,14 +11,7 @@ import * as React_3 from 'react';
 import { RefAttributes } from 'react';
 
 // @public (undocumented)
-export type AlignItemsProps =
-  | 'stretch'
-  | 'flex-start'
-  | 'center'
-  | 'flex-end'
-  | Partial<
-      Record<Breakpoint, 'stretch' | 'flex-start' | 'center' | 'flex-end'>
-    >;
+export type AlignItems = 'stretch' | 'start' | 'center' | 'end';
 
 // @public (undocumented)
 export type AsProps =
@@ -50,12 +43,7 @@ export type Background =
     >;
 
 // @public (undocumented)
-export type BorderRadiusProps =
-  | 'none'
-  | 'small'
-  | 'medium'
-  | 'full'
-  | Partial<Record<Breakpoint, 'none' | 'small' | 'medium' | 'full'>>;
+export type BorderRadius = 'none' | 'small' | 'medium' | 'full';
 
 // @public (undocumented)
 export const Box: ForwardRefExoticComponent<
@@ -63,31 +51,25 @@ export const Box: ForwardRefExoticComponent<
 >;
 
 // @public (undocumented)
-export interface BoxProps extends SpaceProps, ColorProps {
-  // (undocumented)
-  alignItems?: AlignItemsProps;
+export interface BoxProps extends UtilityProps {
   // (undocumented)
   as?: keyof JSX.IntrinsicElements;
   // (undocumented)
-  borderRadius?: BorderRadiusProps;
-  // (undocumented)
   children?: React.ReactNode;
   // (undocumented)
   className?: string;
   // (undocumented)
-  display?: DisplayProps;
-  // (undocumented)
-  flexDirection?: FlexDirectionProps;
-  // (undocumented)
-  flexWrap?: FlexWrapProps;
-  // (undocumented)
-  justifyContent?: JustifyContentProps;
-  // (undocumented)
   style?: React.CSSProperties;
 }
 
 // @public (undocumented)
-export type Breakpoint = keyof typeof breakpoints;
+export type BoxShadow = 'small' | 'medium' | 'large';
+
+// @public (undocumented)
+export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+// @public (undocumented)
+export type BreakpointLocal = keyof typeof breakpoints;
 
 // @public (undocumented)
 export const breakpoints: {
@@ -209,27 +191,16 @@ export interface ContainerProps
 }
 
 // @public (undocumented)
-export type DisplayProps =
-  | 'flex'
-  | 'none'
-  | 'inline'
-  | 'block'
-  | Partial<Record<Breakpoint, 'flex' | 'none' | 'inline' | 'block'>>;
+export type Display = 'none' | 'flex' | 'block' | 'inline';
 
 // @public (undocumented)
-export type FlexDirectionProps =
-  | 'row'
-  | 'column'
-  | Partial<Record<Breakpoint, 'row' | 'column'>>;
+export type FlexDirection = 'row' | 'column';
 
 // @public (undocumented)
-export type FlexWrapProps =
-  | 'wrap'
-  | 'nowrap'
-  | Partial<Record<Breakpoint, 'wrap' | 'nowrap'>>;
+export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
 
 // @public (undocumented)
-export type Gap = Space | Partial<Record<Breakpoint, Space>>;
+export type Gap = SpaceLocal | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 // @public (undocumented)
 export const Grid: ForwardRefExoticComponent<
@@ -332,69 +303,78 @@ export interface InlineProps extends SpaceProps, ColorProps {
 }
 
 // @public (undocumented)
-export type JustifyContentProps =
+export type JustifyContent =
   | 'stretch'
-  | 'flex-start'
+  | 'start'
   | 'center'
-  | 'flex-end'
-  | 'space-around'
-  | 'space-between'
-  | Partial<
-      Record<
-        Breakpoint,
-        | 'stretch'
-        | 'flex-start'
-        | 'center'
-        | 'flex-end'
-        | 'space-around'
-        | 'space-between'
-      >
-    >;
+  | 'end'
+  | 'around'
+  | 'between';
 
 // @public (undocumented)
-export type Margin = Space | Partial<Record<Breakpoint, Space>>;
+export type Margin = SpaceLocal | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 // @public (undocumented)
-export type MarginBottom = Space | Partial<Record<Breakpoint, Space>>;
+export type MarginBottom =
+  | SpaceLocal
+  | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 // @public (undocumented)
-export type MarginLeft = Space | Partial<Record<Breakpoint, Space>>;
+export type MarginLeft =
+  | SpaceLocal
+  | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 // @public (undocumented)
-export type MarginRight = Space | Partial<Record<Breakpoint, Space>>;
+export type MarginRight =
+  | SpaceLocal
+  | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 // @public (undocumented)
-export type MarginTop = Space | Partial<Record<Breakpoint, Space>>;
+export type MarginTop =
+  | SpaceLocal
+  | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 // @public (undocumented)
-export type MarginX = Space | Partial<Record<Breakpoint, Space>>;
+export type MarginX = SpaceLocal | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 // @public (undocumented)
-export type MarginY = Space | Partial<Record<Breakpoint, Space>>;
+export type MarginY = SpaceLocal | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 // @public (undocumented)
-export type Padding = Space | Partial<Record<Breakpoint, Space>>;
+export type Padding = SpaceLocal | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 // @public (undocumented)
-export type PaddingBottom = Space | Partial<Record<Breakpoint, Space>>;
+export type PaddingBottom =
+  | SpaceLocal
+  | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 // @public (undocumented)
-export type PaddingLeft = Space | Partial<Record<Breakpoint, Space>>;
+export type PaddingLeft =
+  | SpaceLocal
+  | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 // @public (undocumented)
-export type PaddingRight = Space | Partial<Record<Breakpoint, Space>>;
+export type PaddingRight =
+  | SpaceLocal
+  | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 // @public (undocumented)
-export type PaddingTop = Space | Partial<Record<Breakpoint, Space>>;
+export type PaddingTop =
+  | SpaceLocal
+  | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 // @public (undocumented)
-export type PaddingX = Space | Partial<Record<Breakpoint, Space>>;
+export type PaddingX =
+  | SpaceLocal
+  | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 // @public (undocumented)
-export type PaddingY = Space | Partial<Record<Breakpoint, Space>>;
+export type PaddingY =
+  | SpaceLocal
+  | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 // @public (undocumented)
-export type Space = keyof typeof space;
+export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
 // @public (undocumented)
 export const space: {
@@ -408,6 +388,9 @@ export const space: {
   '2xl': string;
 };
 
+// @public (undocumented)
+export type SpaceLocal = keyof typeof space;
+
 // @public (undocumented)
 export interface SpaceProps {
   // (undocumented)
@@ -519,4 +502,52 @@ export const themes: {
     selector: string;
   };
 };
+
+// @public (undocumented)
+export interface UtilityProps {
+  // (undocumented)
+  alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
+  // (undocumented)
+  borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
+  // (undocumented)
+  boxShadow?: BoxShadow | Partial<Record<Breakpoint, BoxShadow>>;
+  // (undocumented)
+  display?: Display | Partial<Record<Breakpoint, Display>>;
+  // (undocumented)
+  flexDirection?: FlexDirection | Partial<Record<Breakpoint, FlexDirection>>;
+  // (undocumented)
+  flexWrap?: FlexWrap | Partial<Record<Breakpoint, FlexWrap>>;
+  // (undocumented)
+  gap?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  justifyContent?: JustifyContent | Partial<Record<Breakpoint, JustifyContent>>;
+  // (undocumented)
+  margin?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  marginBottom?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  marginLeft?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  marginRight?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  marginTop?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  marginX?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  marginY?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  padding?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  paddingBottom?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  paddingLeft?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  paddingRight?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  paddingTop?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  paddingX?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  paddingY?: Space | Partial<Record<Breakpoint, Space>>;
+}
 ```

packages/canon/src/components/Button/types.ts

@@ -14,8 +14,7 @@
  * limitations under the License.
  */
 import { IconNames } from '../Icon';
-import { Breakpoint } from '../../layout/types';
-
+import type { Breakpoint } from '../../types';
 /**
  * Properties for {@link Button}
  *

packages/canon/src/components/Grid/types.ts

@@ -13,9 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Breakpoint, ColorProps } from '../../layout/types';
+import { ColorProps } from '../../layout/types';
 import { SpaceProps } from '../../layout/types';
-
+import type { Breakpoint } from '../../types';
 /** @public */
 export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 

packages/canon/src/components/Heading/types.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Breakpoint } from '../../layout/types';
+import { Breakpoint } from '../../types';
 
 /** @public */
 export interface HeadingProps {

packages/canon/src/components/Inline/types.ts

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { AsProps, Breakpoint, ColorProps } from '../../layout/types';
+import { AsProps, ColorProps } from '../../layout/types';
 import { SpaceProps } from '../../layout/types';
-
+import type { Breakpoint } from '../../types';
 /** @public */
 export interface InlineProps extends SpaceProps, ColorProps {
   children: React.ReactNode;

packages/canon/src/components/Stack/types.ts

@@ -13,9 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AsProps, Breakpoint, ColorProps } from '../../layout/types';
+import { AsProps, ColorProps } from '../../layout/types';
 import { SpaceProps } from '../../layout/types';
-
+import type { Breakpoint } from '../../types';
 /** @public */
 export interface StackProps extends SpaceProps, ColorProps {
   children: React.ReactNode;

packages/canon/src/components/Text/types.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Breakpoint } from '../../layout/types';
+import type { Breakpoint } from '../../types';
 
 /** @public */
 export interface TextProps {

packages/canon/src/contexts/canon.tsx

@@ -18,21 +18,14 @@ import React, { createContext, useContext, ReactNode } from 'react';
 import { IconMap, IconNames } from '../components/Icon/types';
 import { defaultIcons } from '../components/Icon/icons';
 import { useMediaQuery } from '../hooks/useMediaQuery';
-import { Breakpoints } from '../types';
-
-const defaultBreakpoints: Breakpoints = {
-  xs: '0px',
-  sm: '640px',
-  md: '768px',
-  lg: '1024px',
-  xl: '1280px',
-  '2xl': '1536px',
-};
+import type { Breakpoint } from '../types';
 
 interface CanonContextProps {
   icons: IconMap;
-  breakpoint: keyof Breakpoints;
-  getResponsiveValue: (value: string | Partial<Breakpoints>) => string;
+  breakpoint: Breakpoint;
+  getResponsiveValue: (
+    value: string | Partial<Record<Breakpoint, string>>,
+  ) => string;
 }
 
 const CanonContext = createContext<CanonContextProps>({
@@ -44,21 +37,20 @@ const CanonContext = createContext<CanonContextProps>({
 interface CanonProviderProps {
   children?: ReactNode;
   overrides?: Partial<Record<IconNames, React.ComponentType>>;
-  breakpoints?: Partial<Breakpoints>;
 }
 
 /** @public */
 export const CanonProvider = (props: CanonProviderProps) => {
-  const { children, overrides, breakpoints = defaultBreakpoints } = props;
+  const { children, overrides } = props;
 
   // Merge provided overrides with default icons
   const combinedIcons = { ...defaultIcons, ...overrides };
 
-  const isBreakpointSm = useMediaQuery(`(min-width: ${breakpoints.sm})`);
-  const isBreakpointMd = useMediaQuery(`(min-width: ${breakpoints.md})`);
-  const isBreakpointLg = useMediaQuery(`(min-width: ${breakpoints.lg})`);
-  const isBreakpointXl = useMediaQuery(`(min-width: ${breakpoints.xl})`);
-  const isBreakpoint2xl = useMediaQuery(`(min-width: ${breakpoints['2xl']})`);
+  const isBreakpointSm = useMediaQuery(`(min-width: 640px)`);
+  const isBreakpointMd = useMediaQuery(`(min-width: 768px)`);
+  const isBreakpointLg = useMediaQuery(`(min-width: 1024px)`);
+  const isBreakpointXl = useMediaQuery(`(min-width: 1280px)`);
+  const isBreakpoint2xl = useMediaQuery(`(min-width: 1536px)`);
 
   // Determine the current breakpoint
   const breakpoint = (() => {
@@ -70,9 +62,11 @@ export const CanonProvider = (props: CanonProviderProps) => {
     return 'xs';
   })();
 
-  const getResponsiveValue = (value: string | Partial<Breakpoints>) => {
+  const getResponsiveValue = (
+    value: string | Partial<Record<Breakpoint, string>>,
+  ) => {
     if (typeof value === 'object') {
-      const breakpointsOrder: (keyof Breakpoints)[] = [
+      const breakpointsOrder: Breakpoint[] = [
         'xs',
         'sm',
         'md',

packages/canon/src/index.ts

@@ -20,9 +20,6 @@
  * @packageDocumentation
  */
 
-// Layout types
-export * from './layout/types';
-
 // Layout components
 export * from './components/Box';
 export * from './components/Grid';
@@ -35,3 +32,7 @@ export * from './components/Button';
 export * from './components/Icon';
 export * from './components/Checkbox';
 export * from './components/Table';
+
+// Types
+export * from './layout/types';
+export * from './types';

packages/canon/src/layout/types.ts

@@ -13,61 +13,82 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { breakpoints, space, themes } from './properties';
 
 /** @public */
-export type Breakpoint = keyof typeof breakpoints;
+export type BreakpointLocal = keyof typeof breakpoints;
 
 /** @public */
-export type Space = keyof typeof space;
+export type SpaceLocal = keyof typeof space;
 
 /** @public */
 export type Theme = keyof typeof themes;
 
 /** @public */
-export type Gap = Space | Partial<Record<Breakpoint, Space>>;
+export type Gap = SpaceLocal | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 /** @public */
-export type PaddingLeft = Space | Partial<Record<Breakpoint, Space>>;
+export type PaddingLeft =
+  | SpaceLocal
+  | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 /** @public */
-export type PaddingRight = Space | Partial<Record<Breakpoint, Space>>;
+export type PaddingRight =
+  | SpaceLocal
+  | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 /** @public */
-export type PaddingTop = Space | Partial<Record<Breakpoint, Space>>;
+export type PaddingTop =
+  | SpaceLocal
+  | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 /** @public */
-export type PaddingBottom = Space | Partial<Record<Breakpoint, Space>>;
+export type PaddingBottom =
+  | SpaceLocal
+  | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 /** @public */
-export type Padding = Space | Partial<Record<Breakpoint, Space>>;
+export type Padding = SpaceLocal | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 /** @public */
-export type PaddingX = Space | Partial<Record<Breakpoint, Space>>;
+export type PaddingX =
+  | SpaceLocal
+  | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 /** @public */
-export type PaddingY = Space | Partial<Record<Breakpoint, Space>>;
+export type PaddingY =
+  | SpaceLocal
+  | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 /** @public */
-export type MarginLeft = Space | Partial<Record<Breakpoint, Space>>;
+export type MarginLeft =
+  | SpaceLocal
+  | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 /** @public */
-export type MarginRight = Space | Partial<Record<Breakpoint, Space>>;
+export type MarginRight =
+  | SpaceLocal
+  | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 /** @public */
-export type MarginTop = Space | Partial<Record<Breakpoint, Space>>;
+export type MarginTop =
+  | SpaceLocal
+  | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 /** @public */
-export type MarginBottom = Space | Partial<Record<Breakpoint, Space>>;
+export type MarginBottom =
+  | SpaceLocal
+  | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 /** @public */
-export type Margin = Space | Partial<Record<Breakpoint, Space>>;
+export type Margin = SpaceLocal | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 /** @public */
-export type MarginX = Space | Partial<Record<Breakpoint, Space>>;
+export type MarginX = SpaceLocal | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 /** @public */
-export type MarginY = Space | Partial<Record<Breakpoint, Space>>;
+export type MarginY = SpaceLocal | Partial<Record<BreakpointLocal, SpaceLocal>>;
 
 /** @public */
 export interface SpaceProps {

packages/canon/src/types.ts

@@ -13,19 +13,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export interface Breakpoints {
-  xs: string;
-  sm: string;
-  md: string;
-  lg: string;
-  xl: string;
-  '2xl': string;
-}
 
+/** @public */
+export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+/** @public */
 export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+/** @public */
 export type Display = 'none' | 'flex' | 'block' | 'inline';
+
+/** @public */
 export type FlexDirection = 'row' | 'column';
+
+/** @public */
 export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+
+/** @public */
 export type JustifyContent =
   | 'stretch'
   | 'start'
@@ -33,37 +37,38 @@ export type JustifyContent =
   | 'end'
   | 'around'
   | 'between';
+
+/** @public */
 export type AlignItems = 'stretch' | 'start' | 'center' | 'end';
+
+/** @public */
 export type BorderRadius = 'none' | 'small' | 'medium' | 'full';
+
+/** @public */
 export type BoxShadow = 'small' | 'medium' | 'large';
 
+/** @public */
 export interface UtilityProps {
-  display?: Display | Partial<Record<keyof Breakpoints, Display>>;
-  flexDirection?:
-    | FlexDirection
-    | Partial<Record<keyof Breakpoints, FlexDirection>>;
-  flexWrap?: FlexWrap | Partial<Record<keyof Breakpoints, FlexWrap>>;
-  justifyContent?:
-    | JustifyContent
-    | Partial<Record<keyof Breakpoints, JustifyContent>>;
-  alignItems?: AlignItems | Partial<Record<keyof Breakpoints, AlignItems>>;
-  borderRadius?:
-    | BorderRadius
-    | Partial<Record<keyof Breakpoints, BorderRadius>>;
-  boxShadow?: BoxShadow | Partial<Record<keyof Breakpoints, BoxShadow>>;
-  padding?: Space | Partial<Record<keyof Breakpoints, Space>>;
-  paddingX?: Space | Partial<Record<keyof Breakpoints, Space>>;
-  paddingY?: Space | Partial<Record<keyof Breakpoints, Space>>;
-  paddingLeft?: Space | Partial<Record<keyof Breakpoints, Space>>;
-  paddingRight?: Space | Partial<Record<keyof Breakpoints, Space>>;
-  paddingTop?: Space | Partial<Record<keyof Breakpoints, Space>>;
-  paddingBottom?: Space | Partial<Record<keyof Breakpoints, Space>>;
-  margin?: Space | Partial<Record<keyof Breakpoints, Space>>;
-  marginX?: Space | Partial<Record<keyof Breakpoints, Space>>;
-  marginY?: Space | Partial<Record<keyof Breakpoints, Space>>;
-  marginLeft?: Space | Partial<Record<keyof Breakpoints, Space>>;
-  marginRight?: Space | Partial<Record<keyof Breakpoints, Space>>;
-  marginTop?: Space | Partial<Record<keyof Breakpoints, Space>>;
-  marginBottom?: Space | Partial<Record<keyof Breakpoints, Space>>;
-  gap?: Space | Partial<Record<keyof Breakpoints, Space>>;
+  display?: Display | Partial<Record<Breakpoint, Display>>;
+  flexDirection?: FlexDirection | Partial<Record<Breakpoint, FlexDirection>>;
+  flexWrap?: FlexWrap | Partial<Record<Breakpoint, FlexWrap>>;
+  justifyContent?: JustifyContent | Partial<Record<Breakpoint, JustifyContent>>;
+  alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
+  borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
+  boxShadow?: BoxShadow | Partial<Record<Breakpoint, BoxShadow>>;
+  padding?: Space | Partial<Record<Breakpoint, Space>>;
+  paddingX?: Space | Partial<Record<Breakpoint, Space>>;
+  paddingY?: Space | Partial<Record<Breakpoint, Space>>;
+  paddingLeft?: Space | Partial<Record<Breakpoint, Space>>;
+  paddingRight?: Space | Partial<Record<Breakpoint, Space>>;
+  paddingTop?: Space | Partial<Record<Breakpoint, Space>>;
+  paddingBottom?: Space | Partial<Record<Breakpoint, Space>>;
+  margin?: Space | Partial<Record<Breakpoint, Space>>;
+  marginX?: Space | Partial<Record<Breakpoint, Space>>;
+  marginY?: Space | Partial<Record<Breakpoint, Space>>;
+  marginLeft?: Space | Partial<Record<Breakpoint, Space>>;
+  marginRight?: Space | Partial<Record<Breakpoint, Space>>;
+  marginTop?: Space | Partial<Record<Breakpoint, Space>>;
+  marginBottom?: Space | Partial<Record<Breakpoint, Space>>;
+  gap?: Space | Partial<Record<Breakpoint, Space>>;
 }

packages/canon/src/utils/getClassNames.ts

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { Breakpoints, UtilityProps } from '../types';
+import type { Breakpoint, UtilityProps } from '../types';
 
 const spaceMap = (type: string) => ({
   none: `${type}-none`,
@@ -93,7 +93,7 @@ const generateClassNames = (propName: string, propValue: any) => {
     classNames.push(`cu-${value}`);
   } else if (typeof propValue === 'object') {
     // If the property value is an object, map each key-value pair
-    Object.entries(propValue as Record<keyof Breakpoints, string>).forEach(
+    Object.entries(propValue as Record<Breakpoint, string>).forEach(
       ([breakpoint, value]) => {
         const mappedValue = valueMap[propName]?.[value] || value;