@common-origin/design-system 2.12.1 → 2.12.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Common Origin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/atoms/Box/Box.d.ts

@@ -1,26 +1,26 @@
 import React from 'react';
-import tokens from '../../../styles/tokens.json';
+import type { Tokens } from '../../../types/tokens';
 export interface BoxProps {
     display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'none';
     flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
     justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
     alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
     flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
-    gap?: keyof typeof tokens.semantic.spacing.layout;
-    m?: keyof typeof tokens.semantic.spacing.layout;
-    mt?: keyof typeof tokens.semantic.spacing.layout;
-    mr?: keyof typeof tokens.semantic.spacing.layout;
-    mb?: keyof typeof tokens.semantic.spacing.layout;
-    ml?: keyof typeof tokens.semantic.spacing.layout;
-    mx?: keyof typeof tokens.semantic.spacing.layout;
-    my?: keyof typeof tokens.semantic.spacing.layout;
-    p?: keyof typeof tokens.semantic.spacing.layout;
-    pt?: keyof typeof tokens.semantic.spacing.layout;
-    pr?: keyof typeof tokens.semantic.spacing.layout;
-    pb?: keyof typeof tokens.semantic.spacing.layout;
-    pl?: keyof typeof tokens.semantic.spacing.layout;
-    px?: keyof typeof tokens.semantic.spacing.layout;
-    py?: keyof typeof tokens.semantic.spacing.layout;
+    gap?: keyof Tokens['semantic']['spacing']['layout'];
+    m?: keyof Tokens['semantic']['spacing']['layout'];
+    mt?: keyof Tokens['semantic']['spacing']['layout'];
+    mr?: keyof Tokens['semantic']['spacing']['layout'];
+    mb?: keyof Tokens['semantic']['spacing']['layout'];
+    ml?: keyof Tokens['semantic']['spacing']['layout'];
+    mx?: keyof Tokens['semantic']['spacing']['layout'];
+    my?: keyof Tokens['semantic']['spacing']['layout'];
+    p?: keyof Tokens['semantic']['spacing']['layout'];
+    pt?: keyof Tokens['semantic']['spacing']['layout'];
+    pr?: keyof Tokens['semantic']['spacing']['layout'];
+    pb?: keyof Tokens['semantic']['spacing']['layout'];
+    pl?: keyof Tokens['semantic']['spacing']['layout'];
+    px?: keyof Tokens['semantic']['spacing']['layout'];
+    py?: keyof Tokens['semantic']['spacing']['layout'];
     width?: string;
     height?: string;
     maxWidth?: string;
@@ -32,18 +32,18 @@ export interface BoxProps {
     right?: string;
     bottom?: string;
     left?: string;
-    borderRadius?: keyof typeof tokens.semantic.border.radius;
-    border?: keyof typeof tokens.semantic.color.border;
-    borderTop?: keyof typeof tokens.semantic.color.border;
-    borderRight?: keyof typeof tokens.semantic.color.border;
-    borderBottom?: keyof typeof tokens.semantic.color.border;
-    borderLeft?: keyof typeof tokens.semantic.color.border;
-    bg?: keyof typeof tokens.semantic.color.background;
-    color?: keyof typeof tokens.semantic.color.text;
-    shadow?: keyof typeof tokens.semantic.elevation;
+    borderRadius?: keyof Tokens['semantic']['border']['radius'];
+    border?: keyof Tokens['semantic']['color']['border'];
+    borderTop?: keyof Tokens['semantic']['color']['border'];
+    borderRight?: keyof Tokens['semantic']['color']['border'];
+    borderBottom?: keyof Tokens['semantic']['color']['border'];
+    borderLeft?: keyof Tokens['semantic']['color']['border'];
+    bg?: keyof Tokens['semantic']['color']['background'];
+    color?: keyof Tokens['semantic']['color']['text'];
+    shadow?: keyof Tokens['semantic']['elevation'];
     cursor?: 'auto' | 'default' | 'pointer' | 'wait' | 'text' | 'move' | 'help' | 'not-allowed';
     transition?: string;
-    hoverShadow?: keyof typeof tokens.semantic.elevation;
+    hoverShadow?: keyof Tokens['semantic']['elevation'];
     hoverTransform?: string;
     overflow?: 'visible' | 'hidden' | 'scroll' | 'auto';
     overflowX?: 'visible' | 'hidden' | 'scroll' | 'auto';

package/dist/components/atoms/Chip/shared/ChipBase.d.ts

@@ -1,6 +1,12 @@
 import { InternalStyledProps } from './types';
-export declare const StyledChip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, InternalStyledProps>> & string;
-export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+export declare const StyledChip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, InternalStyledProps>> & string;
+export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $disabled?: boolean;
 }>> & string;

package/dist/components/layout/GridSystem/GridSystem.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import tokens from '@/styles/tokens.json';
+import type { Tokens } from '../../../types/tokens';
 interface GridProps {
     cols?: number;
-    gap?: keyof typeof tokens.base.spacing;
-    gapX?: keyof typeof tokens.base.spacing;
-    gapY?: keyof typeof tokens.base.spacing;
+    gap?: keyof Tokens['base']['spacing'];
+    gapX?: keyof Tokens['base']['spacing'];
+    gapY?: keyof Tokens['base']['spacing'];
     className?: string;
     children: React.ReactNode;
 }
@@ -30,21 +30,21 @@ interface ResponsiveGridProps {
     colsMd?: number;
     colsLg?: number;
     colsXl?: number;
-    gap?: keyof typeof tokens.base.spacing;
-    gapSm?: keyof typeof tokens.base.spacing;
-    gapMd?: keyof typeof tokens.base.spacing;
-    gapLg?: keyof typeof tokens.base.spacing;
-    gapXl?: keyof typeof tokens.base.spacing;
-    gapX?: keyof typeof tokens.base.spacing;
-    gapXSm?: keyof typeof tokens.base.spacing;
-    gapXMd?: keyof typeof tokens.base.spacing;
-    gapXLg?: keyof typeof tokens.base.spacing;
-    gapXXl?: keyof typeof tokens.base.spacing;
-    gapY?: keyof typeof tokens.base.spacing;
-    gapYSm?: keyof typeof tokens.base.spacing;
-    gapYMd?: keyof typeof tokens.base.spacing;
-    gapYLg?: keyof typeof tokens.base.spacing;
-    gapYXl?: keyof typeof tokens.base.spacing;
+    gap?: keyof Tokens['base']['spacing'];
+    gapSm?: keyof Tokens['base']['spacing'];
+    gapMd?: keyof Tokens['base']['spacing'];
+    gapLg?: keyof Tokens['base']['spacing'];
+    gapXl?: keyof Tokens['base']['spacing'];
+    gapX?: keyof Tokens['base']['spacing'];
+    gapXSm?: keyof Tokens['base']['spacing'];
+    gapXMd?: keyof Tokens['base']['spacing'];
+    gapXLg?: keyof Tokens['base']['spacing'];
+    gapXXl?: keyof Tokens['base']['spacing'];
+    gapY?: keyof Tokens['base']['spacing'];
+    gapYSm?: keyof Tokens['base']['spacing'];
+    gapYMd?: keyof Tokens['base']['spacing'];
+    gapYLg?: keyof Tokens['base']['spacing'];
+    gapYXl?: keyof Tokens['base']['spacing'];
     className?: string;
     children: React.ReactNode;
 }

package/dist/components/molecules/Checkbox/SelectableInputBase.d.ts

@@ -8,25 +8,33 @@ interface StyledCheckboxInputProps {
  * Hidden native checkbox input for accessibility
  * Maintains keyboard navigation and screen reader support
  */
-export declare const HiddenCheckboxInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledCheckboxInputProps>> & string;
+export declare const HiddenCheckboxInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, StyledCheckboxInputProps>> & string;
 /**
  * Custom checkbox visual component
  * 24px × 24px for 8px grid alignment
  * Uses component.input.* tokens for consistency with TextField
  */
-export declare const StyledCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledCheckboxInputProps>> & string;
+export declare const StyledCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, StyledCheckboxInputProps>> & string;
 /**
  * Container for checkbox with proper spacing and alignment
  * 48px min-height for touch target (8px grid aligned)
  */
-export declare const StyledCheckboxContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
+export declare const StyledCheckboxContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $disabled: boolean;
     $labelPosition: "left" | "right";
 }>> & string;
 /**
  * Label text with proper typography
  */
-export declare const StyledCheckboxLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+export declare const StyledCheckboxLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $disabled: boolean;
 }>> & string;
 export {};

package/dist/components/molecules/Dropdown/Dropdown.d.ts

@@ -15,7 +15,9 @@ export interface DropdownProps {
     helperText?: string;
     error?: string;
 }
-declare const DropdownOption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+declare const DropdownOption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $isSelected: boolean;
     $isFocused: boolean;
 }>> & string;

package/dist/components/molecules/TextField/InputBase.d.ts

@@ -10,9 +10,13 @@ interface StyledInputBaseProps {
     $hasError?: boolean;
     $disabled?: boolean;
 }
-export declare const StyledInputBase: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledInputBaseProps>> & string;
+export declare const StyledInputBase: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, StyledInputBaseProps>> & string;
 /**
  * Base styled textarea with shared styling
  */
-export declare const StyledTextAreaBase: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, StyledInputBaseProps>> & string;
+export declare const StyledTextAreaBase: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, StyledInputBaseProps>> & string;
 export {};