@orfium/ictinus 5.4.0 → 5.5.0

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { rem } from 'polished';
 import * as react_media from 'react-media';
 import * as _emotion_react from '@emotion/react';
 import { CSSObject as CSSObject$1 } from '@emotion/react';
+import { DotKeys as DotKeys$1 } from 'theme/tokens/utils';
 export { default as ClickAwayListener } from 'components/utils/ClickAwayListener';
 import * as utils_types from 'utils/types';
 import { TestId as TestId$1, TestProps as TestProps$1 } from 'utils/types';
@@ -94,7 +95,7 @@ declare namespace elevation_d {
   };
 }
 
-declare const spacing$1: {
+declare const spacing$2: {
     readonly '0': {
         readonly value: "0px";
         readonly type: "spacing";
@@ -149,11 +150,11 @@ declare const spacing$1: {
     };
 };
 
-type SpacingKey = keyof typeof spacing$1;
+type SpacingKey = keyof typeof spacing$2;
 type Spacing = {
     get: (val: SpacingKey, fn?: (val: string) => unknown) => string;
 };
-declare const spacing: Spacing;
+declare const spacing$1: Spacing;
 
 type spacing_d_Spacing = Spacing;
 type spacing_d_SpacingKey = SpacingKey;
@@ -161,7 +162,7 @@ declare namespace spacing_d {
   export {
     spacing_d_Spacing as Spacing,
     spacing_d_SpacingKey as SpacingKey,
-    spacing as default,
+    spacing$1 as default,
   };
 }
 
@@ -421,6 +422,228 @@ declare namespace overrides_d {
   };
 }
 
+declare const borderRadius$1: {
+    readonly none: {
+        readonly value: "{borderRadius.0}";
+        readonly type: "borderRadius";
+    };
+    readonly sm: {
+        readonly value: "{borderRadius.1}";
+        readonly type: "borderRadius";
+    };
+    readonly md: {
+        readonly value: "{borderRadius.2}";
+        readonly type: "borderRadius";
+    };
+    readonly lg: {
+        readonly value: "{borderRadius.3}";
+        readonly type: "borderRadius";
+    };
+    readonly xl: {
+        readonly value: "{borderRadius.4}";
+        readonly type: "borderRadius";
+    };
+    readonly circle: {
+        readonly value: "{borderRadius.7}";
+        readonly type: "borderRadius";
+        readonly description: "Circular border radius (100%)";
+    };
+};
+
+type DimensionBorderRadiusKey = DotKeys$1<typeof borderRadius$1>;
+type DimensionBorderRadius = {
+    get: (val: DimensionBorderRadiusKey, fn?: (val: string) => unknown) => string;
+};
+
+declare const borderWidth$1: {
+    readonly default: {
+        readonly value: "{borderWidth.1}";
+        readonly type: "borderWidth";
+        readonly description: "Sets 'default' border width for components";
+    };
+    readonly active: {
+        readonly value: "{borderWidth.2}";
+        readonly type: "borderWidth";
+        readonly description: "Sets 'active' border width for components ";
+    };
+    readonly focused: {
+        readonly value: "{borderWidth.3}";
+        readonly type: "borderWidth";
+        readonly description: "Sets focused container borderWidth for component";
+    };
+    readonly innerFocused: {
+        readonly value: "{borderWidth.2}";
+        readonly type: "borderWidth";
+        readonly description: "Alternative borderWidth for nested focused elements";
+    };
+};
+
+type DimensionBorderWidthKey = DotKeys$1<typeof borderWidth$1>;
+type DimensionBorderWidth = {
+    get: (val: DimensionBorderWidthKey, fn?: (val: string) => unknown) => string;
+};
+
+declare const minHeight: {
+    readonly tableRow: {
+        readonly sm: {
+            readonly value: "{sizing.11}";
+            readonly type: "sizing";
+            readonly description: "Sets min.height for small table row (44px)";
+        };
+        readonly md: {
+            readonly value: "{sizing.13}";
+            readonly type: "sizing";
+            readonly description: "Sets min. height for medium table row (52px)";
+        };
+        readonly lg: {
+            readonly value: "{sizing.15}";
+            readonly type: "sizing";
+            readonly description: "Sets min. height for large table row (60px)";
+        };
+    };
+};
+
+type DimensionMinHeightKey = DotKeys$1<typeof minHeight>;
+type DimensionMinHeight = {
+    get: (val: DimensionMinHeightKey, fn?: (val: string) => unknown) => string;
+};
+
+declare const opacity$1: {
+    readonly disabled: {
+        readonly value: "50%";
+        readonly type: "opacity";
+        readonly description: "'Disabled' state";
+    };
+    readonly enabled: {
+        readonly value: "100%";
+        readonly type: "opacity";
+        readonly description: "'enabled' state";
+    };
+    readonly hidden: {
+        readonly value: "0%";
+        readonly type: "opacity";
+        readonly description: "'hidden' state";
+    };
+};
+
+type DimensionOpacityKey = DotKeys$1<typeof opacity$1>;
+type DimensionOpacity = {
+    get: (val: DimensionOpacityKey, fn?: (val: string) => unknown) => string;
+};
+
+declare const sizing$1: {
+    readonly icon: {
+        readonly xs: {
+            readonly value: "{sizing.3}";
+            readonly type: "sizing";
+            readonly description: "Sets extra small size for icon";
+        };
+        readonly sm: {
+            readonly value: "{sizing.4}";
+            readonly type: "sizing";
+            readonly description: "Sets small size for icon";
+        };
+        readonly md: {
+            readonly value: "{sizing.5}";
+            readonly type: "sizing";
+            readonly description: "Sets medium size for icon";
+        };
+        readonly lg: {
+            readonly value: "{sizing.6}";
+            readonly type: "sizing";
+            readonly description: "Sets large size for icon";
+        };
+        readonly xl: {
+            readonly value: "{sizing.9}";
+            readonly type: "sizing";
+            readonly description: "Sets extra large size for icon";
+        };
+    };
+};
+
+type DimensionSizingKey = DotKeys$1<typeof sizing$1>;
+type DimensionSizing = {
+    get: (val: DimensionSizingKey, fn?: (val: string) => unknown) => string;
+};
+
+declare const spacing: {
+    readonly none: {
+        readonly value: "{spacing.0}";
+        readonly type: "spacing";
+    };
+    readonly '2xs': {
+        readonly value: "{spacing.2}";
+        readonly type: "spacing";
+    };
+    readonly xs: {
+        readonly value: "{spacing.3}";
+        readonly type: "spacing";
+    };
+    readonly sm: {
+        readonly value: "{spacing.4}";
+        readonly type: "spacing";
+    };
+    readonly md: {
+        readonly value: "{spacing.5}";
+        readonly type: "spacing";
+    };
+    readonly lg: {
+        readonly value: "{spacing.6}";
+        readonly type: "spacing";
+    };
+    readonly xl: {
+        readonly value: "{spacing.7}";
+        readonly type: "spacing";
+    };
+    readonly '2xl': {
+        readonly value: "{spacing.8}";
+        readonly type: "spacing";
+    };
+    readonly '3xl': {
+        readonly value: "{spacing.9}";
+        readonly type: "spacing";
+    };
+    readonly '4xl': {
+        readonly value: "{spacing.12}";
+        readonly type: "spacing";
+    };
+};
+
+type DimensionSpacingKey = DotKeys$1<typeof spacing>;
+type DimensionSpacing = {
+    get: (val: DimensionSpacingKey, fn?: (val: string) => unknown) => string;
+};
+
+declare const state$1: {
+    readonly hover: {
+        readonly xs: {
+            readonly value: "{sizing.7}";
+            readonly type: "sizing";
+            readonly description: "Sets extra small hover size";
+        };
+        readonly sm: {
+            readonly value: "{sizing.8}";
+            readonly type: "sizing";
+            readonly description: "Sets small hover size";
+        };
+        readonly md: {
+            readonly value: "{sizing.9}";
+            readonly type: "sizing";
+            readonly description: "Sets medium hover size";
+        };
+        readonly lg: {
+            readonly value: "{sizing.10}";
+            readonly type: "sizing";
+            readonly description: "Sets large hover size";
+        };
+    };
+};
+
+type DimensionStateKey = DotKeys$1<typeof state$1>;
+type DimensionState = {
+    get: (val: DimensionStateKey, fn?: (val: string) => unknown) => string;
+};
+
 declare const borderRadius: {
     readonly '0': {
         readonly value: "0 px";
@@ -458,7 +681,7 @@ declare const borderRadius: {
         readonly description: "Corner radius = 48px";
     };
     readonly '7': {
-        readonly value: "100px";
+        readonly value: "9999px";
         readonly type: "borderRadius";
         readonly description: "Corner radius = 100px used for circles and pill shaped elements";
     };
@@ -929,7 +1152,7 @@ declare const sizing: {
         readonly type: "sizing";
     };
     readonly '15': {
-        readonly value: "64px";
+        readonly value: "60px";
         readonly type: "sizing";
     };
     readonly '16': {
@@ -1330,6 +1553,11 @@ declare const colors: {
                 readonly type: "color";
                 readonly description: "Sets borderColor for success";
             };
+            readonly focused: {
+                readonly value: "{colors.purple.5}";
+                readonly type: "color";
+                readonly description: "Sets focused container borderColor for component";
+            };
         };
     };
     readonly indicators: {
@@ -1376,58 +1604,7 @@ type SemanticDisabledState = {
     get: (val: DotKeys<typeof disabledState>) => string;
 };
 
-declare const icon: {
-    readonly size: {
-        readonly '1': {
-            readonly value: "{sizing.3}";
-            readonly type: "sizing";
-            readonly description: "Sets extra small icon size";
-        };
-        readonly '2': {
-            readonly value: "{sizing.4}";
-            readonly type: "sizing";
-            readonly description: "Sets small icon size";
-        };
-        readonly '3': {
-            readonly value: "{sizing.5}";
-            readonly type: "sizing";
-            readonly description: "Sets medium icon size";
-        };
-        readonly '4': {
-            readonly value: "{sizing.6}";
-            readonly type: "sizing";
-            readonly description: "Sets lage icon size";
-        };
-    };
-};
-
-type SemanticIcon = {
-    get: (val: DotKeys<typeof icon>) => string;
-};
-
 declare const state: {
-    readonly hover: {
-        readonly '1': {
-            readonly value: "{sizing.7}";
-            readonly type: "sizing";
-            readonly description: "Sets extra small hover size";
-        };
-        readonly '2': {
-            readonly value: "{sizing.8}";
-            readonly type: "sizing";
-            readonly description: "Sets small hover size";
-        };
-        readonly '3': {
-            readonly value: "{sizing.9}";
-            readonly type: "sizing";
-            readonly description: "Sets medium hover size";
-        };
-        readonly '4': {
-            readonly value: "{sizing.10}";
-            readonly type: "sizing";
-            readonly description: "Sets lage hover size";
-        };
-    };
     readonly borderRadius: {
         readonly hover: {
             readonly value: "{borderRadius.7}";
@@ -1442,6 +1619,13 @@ declare const state: {
             readonly description: "Sets transparent overlay for interactive icon on hover";
         };
     };
+    readonly loading: {
+        readonly gradient: {
+            readonly value: "{colors.gradient.1}";
+            readonly type: "color";
+            readonly description: "Alt loading state gradient";
+        };
+    };
 };
 
 type SemanticState = {
@@ -1819,11 +2003,19 @@ type ColorScheme = 'semantic' | 'dark';
 type SemanticTheme = {
     colors: SemanticColors;
     disabledState: SemanticDisabledState;
-    icon: SemanticIcon;
     state: SemanticState;
     typography: SemanticTypography;
     boxShadow: SemanticBoxShadow;
 };
+type Dimension = {
+    borderRadius: DimensionBorderRadius;
+    borderWidth: DimensionBorderWidth;
+    minHeight: DimensionMinHeight;
+    opacity: DimensionOpacity;
+    sizing: DimensionSizing;
+    spacing: DimensionSpacing;
+    state: DimensionState;
+};
 /** Will add more themes in the future (e.g.: DarkTheme) */
 type Tokens = SemanticTheme;
 type Theme = {
@@ -1838,6 +2030,7 @@ type Theme = {
         opacity: Opacity;
         sizing: Sizing;
     };
+    dimension: Dimension;
     tokens: Tokens;
     colorScheme: ColorScheme;
     overrides: Overrides;
@@ -2032,7 +2225,7 @@ type AvatarStackProps = {
     color?: AvatarColors;
 };
 
-declare const AvatarStack: React__default.ForwardRefExoticComponent<Omit<AvatarStackProps & TestProps$1 & Partial<Omit<React__default.HTMLProps<HTMLDivElement>, "color" | "size" | "css">>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const AvatarStack: React__default.ForwardRefExoticComponent<Omit<AvatarStackProps & TestProps$1 & Partial<Omit<React__default.HTMLProps<HTMLDivElement>, "color" | "css" | "size">>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
 type BreadcrumbItem = {
     /** Defines the label used for a link breadcrumb item */
@@ -2141,7 +2334,7 @@ declare const Button: React__default.ForwardRefExoticComponent<{
     sx?: {
         container?: _emotion_serialize.CSSObject;
     };
-} & TestProps$1 & EventButtonProps & Partial<Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "size" | "onClick" | "onBlur" | "css" | "disabled">> & {
+} & TestProps$1 & EventButtonProps & Partial<Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "disabled" | "onClick" | "onBlur" | "css" | "size">> & {
     /** An optional icon to put on the right of the button */
     iconRightName?: AcceptedIconNames$1;
     /** An optional icon to put on the left of the button */
@@ -2483,10 +2676,12 @@ type ExpandCollapseProps = SharedProps & (InternalProps | ExternalProps);
 
 declare const ExpandCollapse: (props: ExpandCollapseProps) => _emotion_react_jsx_runtime.JSX.Element;
 
+type LinkSizes = 1 | 2 | 3;
+
 declare const Link: React__default.ForwardRefExoticComponent<React__default.AnchorHTMLAttributes<HTMLAnchorElement> & {
-    type?: "inverted" | "primary";
+    type?: "primary" | "inverted";
     placement?: "inline" | "block";
-    size?: 2 | 1 | 3;
+    size?: LinkSizes;
     iconName?: components_Icon.AcceptedIconNames;
     isDisabled?: boolean;
     component?: prop_types.ReactComponentLike;
@@ -2996,7 +3191,7 @@ type TagProps = {
     onClear?: () => void;
 } & TestProps$1;
 
-declare const Tag: React__default.ForwardRefExoticComponent<Omit<Partial<Omit<React__default.HTMLProps<HTMLDivElement>, "color" | "size" | "css">> & {
+declare const Tag: React__default.ForwardRefExoticComponent<Omit<Partial<Omit<React__default.HTMLProps<HTMLDivElement>, "color" | "css" | "size">> & {
     color?: TagColors;
     size?: TagSizes;
     iconName?: AcceptedIconNames;
@@ -3016,7 +3211,7 @@ type SearchProps = {
 
 declare const _default$3: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<{
     onClear: () => void;
-} & Omit<TextFieldProps, "size" | "label" | "mask" | "status" | "isInteractive" | "isMulti" | "tags" | "onMultiValueDelete" | "onMultiValueClearAll" | "suffix"> & SearchFilterConfig & React__default.RefAttributes<HTMLInputElement>>>;
+} & Omit<TextFieldProps, "label" | "mask" | "status" | "size" | "isInteractive" | "isMulti" | "tags" | "onMultiValueDelete" | "onMultiValueClearAll" | "suffix"> & SearchFilterConfig & React__default.RefAttributes<HTMLInputElement>>>;
 
 declare const _default$2: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Partial<SearchProps> & React__default.RefAttributes<HTMLInputElement>>>;