@iress-oss/ids-components 5.16.0 → 6.0.0-alpha.0

package/dist/src/styled-system/patterns/link-overlay.d.ts

@@ -0,0 +1,21 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface LinkOverlayProperties {
+   
+}
+
+
+interface LinkOverlayStyles extends LinkOverlayProperties, DistributiveOmit<SystemStyleObject, keyof LinkOverlayProperties > {}
+
+interface LinkOverlayPatternFn {
+  (styles?: LinkOverlayStyles): string
+  raw: (styles?: LinkOverlayStyles) => SystemStyleObject
+}
+
+
+export declare const linkOverlay: LinkOverlayPatternFn;

package/dist/src/styled-system/patterns/spacer.d.ts

@@ -0,0 +1,21 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface SpacerProperties {
+   size?: ConditionalValue<Tokens["spacing"]>
+}
+
+
+interface SpacerStyles extends SpacerProperties, DistributiveOmit<SystemStyleObject, keyof SpacerProperties > {}
+
+interface SpacerPatternFn {
+  (styles?: SpacerStyles): string
+  raw: (styles?: SpacerStyles) => SystemStyleObject
+}
+
+
+export declare const spacer: SpacerPatternFn;

package/dist/src/styled-system/patterns/square.d.ts

@@ -0,0 +1,21 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface SquareProperties {
+   size?: SystemProperties["width"]
+}
+
+
+interface SquareStyles extends SquareProperties, DistributiveOmit<SystemStyleObject, keyof SquareProperties > {}
+
+interface SquarePatternFn {
+  (styles?: SquareStyles): string
+  raw: (styles?: SquareStyles) => SystemStyleObject
+}
+
+
+export declare const square: SquarePatternFn;

package/dist/src/styled-system/patterns/stack.d.ts

@@ -0,0 +1,24 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface StackProperties {
+   align?: SystemProperties["alignItems"]
+	justify?: SystemProperties["justifyContent"]
+	direction?: SystemProperties["flexDirection"]
+	gap?: SystemProperties["gap"]
+}
+
+
+interface StackStyles extends StackProperties, DistributiveOmit<SystemStyleObject, keyof StackProperties > {}
+
+interface StackPatternFn {
+  (styles?: StackStyles): string
+  raw: (styles?: StackStyles) => SystemStyleObject
+}
+
+
+export declare const stack: StackPatternFn;

package/dist/src/styled-system/patterns/visually-hidden.d.ts

@@ -0,0 +1,21 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface VisuallyHiddenProperties {
+   
+}
+
+
+interface VisuallyHiddenStyles extends VisuallyHiddenProperties, DistributiveOmit<SystemStyleObject, keyof VisuallyHiddenProperties > {}
+
+interface VisuallyHiddenPatternFn {
+  (styles?: VisuallyHiddenStyles): string
+  raw: (styles?: VisuallyHiddenStyles) => SystemStyleObject
+}
+
+
+export declare const visuallyHidden: VisuallyHiddenPatternFn;

package/dist/src/styled-system/patterns/vstack.d.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface VstackProperties {
+   justify?: SystemProperties["justifyContent"]
+	gap?: SystemProperties["gap"]
+}
+
+
+interface VstackStyles extends VstackProperties, DistributiveOmit<SystemStyleObject, keyof VstackProperties > {}
+
+interface VstackPatternFn {
+  (styles?: VstackStyles): string
+  raw: (styles?: VstackStyles) => SystemStyleObject
+}
+
+
+export declare const vstack: VstackPatternFn;

package/dist/src/styled-system/patterns/wrap.d.ts

@@ -0,0 +1,25 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { SystemProperties } from '../types/style-props';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface WrapProperties {
+   gap?: SystemProperties["gap"]
+	rowGap?: SystemProperties["gap"]
+	columnGap?: SystemProperties["gap"]
+	align?: SystemProperties["alignItems"]
+	justify?: SystemProperties["justifyContent"]
+}
+
+
+interface WrapStyles extends WrapProperties, DistributiveOmit<SystemStyleObject, keyof WrapProperties > {}
+
+interface WrapPatternFn {
+  (styles?: WrapStyles): string
+  raw: (styles?: WrapStyles) => SystemStyleObject
+}
+
+
+export declare const wrap: WrapPatternFn;

package/dist/src/styled-system/recipes/button.d.ts

@@ -0,0 +1,38 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface ButtonVariant {
+  active: boolean
+fluid: "true" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl"
+inButtonGroup: boolean
+loading: boolean
+mode: "primary" | "secondary" | "tertiary"
+noWrap: boolean
+status: "success" | "danger"
+}
+
+type ButtonVariantMap = {
+  [key in keyof ButtonVariant]: Array<ButtonVariant[key]>
+}
+
+export type ButtonVariantProps = {
+  [key in keyof ButtonVariant]?: ButtonVariant[key] | undefined
+}
+
+export interface ButtonRecipe {
+  __type: ButtonVariantProps
+  (props?: ButtonVariantProps): Pretty<Record<"root" | "prepend" | "append" | "spinner", string>>
+  raw: (props?: ButtonVariantProps) => ButtonVariantProps
+  variantMap: ButtonVariantMap
+  variantKeys: Array<keyof ButtonVariant>
+  splitVariantProps<Props extends ButtonVariantProps>(props: Props): [ButtonVariantProps, Pretty<DistributiveOmit<Props, keyof ButtonVariantProps>>]
+  getVariantProps: (props?: ButtonVariantProps) => ButtonVariantProps
+}
+
+/**
+ * Button styles
+
+
+ */
+export declare const button: ButtonRecipe

package/dist/src/styled-system/recipes/index.d.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+export * from './button';
+export * from './table';
+export * from './text';

package/dist/src/styled-system/recipes/table.d.ts

@@ -0,0 +1,46 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface TableVariant {
+  alternate: boolean
+/**
+ * @default false
+ */
+compact: boolean
+/**
+ * @default false
+ */
+hover: boolean
+removeRowBorders: boolean
+/**
+ * @default false
+ */
+sortButtonNoWrap: boolean
+/**
+ * @default false
+ */
+tableBodyOpen: boolean
+hiddenCaption: boolean
+}
+
+type TableVariantMap = {
+  [key in keyof TableVariant]: Array<TableVariant[key]>
+}
+
+export type TableVariantProps = {
+  [key in keyof TableVariant]?: ConditionalValue<TableVariant[key]> | undefined
+}
+
+export interface TableRecipe {
+  __type: TableVariantProps
+  (props?: TableVariantProps): Pretty<Record<"root" | "table" | "caption" | "sortHeader" | "sortIcon" | "activator" | "rowGroupHeader", string>>
+  raw: (props?: TableVariantProps) => TableVariantProps
+  variantMap: TableVariantMap
+  variantKeys: Array<keyof TableVariant>
+  splitVariantProps<Props extends TableVariantProps>(props: Props): [TableVariantProps, Pretty<DistributiveOmit<Props, keyof TableVariantProps>>]
+  getVariantProps: (props?: TableVariantProps) => TableVariantProps
+}
+
+
+export declare const table: TableRecipe

package/dist/src/styled-system/recipes/text.d.ts

@@ -0,0 +1,35 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface TextVariant {
+  /**
+ * @default "div"
+ */
+element: "p" | "div" | "span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "code" | "small" | "cite" | "caption" | "strong" | "em" | "a" | "blockquote" | "pre"
+}
+
+type TextVariantMap = {
+  [key in keyof TextVariant]: Array<TextVariant[key]>
+}
+
+export type TextVariantProps = {
+  [key in keyof TextVariant]?: TextVariant[key] | undefined
+}
+
+export interface TextRecipe {
+  __type: TextVariantProps
+  (props?: TextVariantProps): string
+  raw: (props?: TextVariantProps) => TextVariantProps
+  variantMap: TextVariantMap
+  variantKeys: Array<keyof TextVariant>
+  splitVariantProps<Props extends TextVariantProps>(props: Props): [TextVariantProps, Pretty<DistributiveOmit<Props, keyof TextVariantProps>>]
+  getVariantProps: (props?: TextVariantProps) => TextVariantProps
+}
+
+/**
+ * The styles for an element that displays text based on the design system guidelines.
+
+
+ */
+export declare const text: TextRecipe

package/dist/src/styled-system/tokens/index.d.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+import type { Token } from './tokens';
+
+export declare const token: {
+  (path: Token, fallback?: string): string
+  var: (path: Token, fallback?: string) => string
+}
+
+export * from './tokens';

package/dist/src/styled-system/tokens/tokens.d.ts

@@ -0,0 +1,30 @@
+/* eslint-disable */
+export type Token = "borders.alert" | "borders.divider" | "borders.input" | "borders.placeholder" | "borders.hover" | "borders.table" | "colors.colour.primary.fill" | "colors.colour.primary.fillHover" | "colors.colour.primary.onFill" | "colors.colour.primary.surface" | "colors.colour.primary.surfaceHover" | "colors.colour.primary.text" | "colors.colour.neutral.10" | "colors.colour.neutral.20" | "colors.colour.neutral.30" | "colors.colour.neutral.40" | "colors.colour.neutral.50" | "colors.colour.neutral.60" | "colors.colour.neutral.70" | "colors.colour.neutral.80" | "colors.colour.accent.brand" | "colors.colour.system.success.fill" | "colors.colour.system.success.fillHover" | "colors.colour.system.success.onFill" | "colors.colour.system.success.surface" | "colors.colour.system.success.surfaceHover" | "colors.colour.system.success.text" | "colors.colour.system.danger.fill" | "colors.colour.system.danger.fillHover" | "colors.colour.system.danger.onFill" | "colors.colour.system.danger.surface" | "colors.colour.system.danger.surfaceHover" | "colors.colour.system.danger.text" | "colors.colour.system.warning.fill" | "colors.colour.system.warning.onFill" | "colors.colour.system.warning.surface" | "colors.colour.system.warning.text" | "colors.colour.system.info.fill" | "colors.colour.system.info.onFill" | "colors.colour.system.info.surface" | "colors.colour.system.info.text" | "colors.colour.system.backdrop.fill" | "colors.transparent" | "colors.alt" | "radii.radius.000" | "radii.radius.025" | "radii.radius.050" | "radii.radius.075" | "radii.radius.100" | "radii.radius.system.badge" | "radii.radius.system.button" | "radii.radius.system.form" | "radii.radius.system.layout" | "radii.none" | "sizes.container.xs" | "sizes.container.sm" | "sizes.container.md" | "sizes.container.lg" | "sizes.container.xl" | "sizes.container.xxl" | "sizes.input.2" | "sizes.input.4" | "sizes.input.6" | "sizes.input.8" | "sizes.input.10" | "sizes.input.12" | "sizes.input.16" | "sizes.input.25perc" | "sizes.input.50perc" | "sizes.input.75perc" | "sizes.input.100perc" | "sizes.overlay.sm" | "sizes.overlay.md" | "sizes.overlay.lg" | "sizes.chevron.select" | "sizes.chevron.table" | "sizes.input.height" | "sizes.progress.height" | "sizes.slider.track" | "sizes.slider.thumb" | "sizes.slider.tick" | "sizes.toggle.width" | "sizes.toggle.thumb" | "sizes.typography.base" | "sizes.breakpoint-xs" | "sizes.breakpoint-sm" | "sizes.breakpoint-md" | "sizes.breakpoint-lg" | "sizes.breakpoint-xl" | "sizes.breakpoint-xxl" | "spacing.spacing.000" | "spacing.spacing.050" | "spacing.spacing.100" | "spacing.spacing.150" | "spacing.spacing.200" | "spacing.spacing.250" | "spacing.spacing.300" | "spacing.spacing.350" | "spacing.spacing.400" | "spacing.spacing.500" | "spacing.spacing.600" | "spacing.spacing.700" | "spacing.spacing.800" | "spacing.spacing.900" | "spacing.spacing.1000" | "spacing.spacing.1200" | "spacing.none" | "spacing.xs" | "spacing.sm" | "spacing.md" | "spacing.lg" | "spacing.xl" | "spacing.field.footer" | "spacing.slider.tick" | "zIndex.100" | "zIndex.200" | "zIndex.300" | "zIndex.400" | "zIndex.500" | "zIndex.600" | "zIndex.000" | "breakpoints.xs" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" | "breakpoints.xl" | "breakpoints.xxl" | "spacing.-spacing.000" | "spacing.-spacing.050" | "spacing.-spacing.100" | "spacing.-spacing.150" | "spacing.-spacing.200" | "spacing.-spacing.250" | "spacing.-spacing.300" | "spacing.-spacing.350" | "spacing.-spacing.400" | "spacing.-spacing.500" | "spacing.-spacing.600" | "spacing.-spacing.700" | "spacing.-spacing.800" | "spacing.-spacing.900" | "spacing.-spacing.1000" | "spacing.-spacing.1200" | "spacing.-none" | "spacing.-xs" | "spacing.-sm" | "spacing.-md" | "spacing.-lg" | "spacing.-xl" | "spacing.-field.footer" | "spacing.-slider.tick" | "colors.colorPalette"
+
+export type ColorPalette = "colour.primary.fill" | "colour.primary.fillHover" | "colour.primary.onFill" | "colour.primary.surface" | "colour.primary.surfaceHover" | "colour.primary.text" | "colour.neutral.10" | "colour.neutral.20" | "colour.neutral.30" | "colour.neutral.40" | "colour.neutral.50" | "colour.neutral.60" | "colour.neutral.70" | "colour.neutral.80" | "colour.accent.brand" | "colour.system.success.fill" | "colour.system.success.fillHover" | "colour.system.success.onFill" | "colour.system.success.surface" | "colour.system.success.surfaceHover" | "colour.system.success.text" | "colour.system.danger.fill" | "colour.system.danger.fillHover" | "colour.system.danger.onFill" | "colour.system.danger.surface" | "colour.system.danger.surfaceHover" | "colour.system.danger.text" | "colour.system.warning.fill" | "colour.system.warning.onFill" | "colour.system.warning.surface" | "colour.system.warning.text" | "colour.system.info.fill" | "colour.system.info.onFill" | "colour.system.info.surface" | "colour.system.info.text" | "colour.system.backdrop.fill" | "transparent" | "alt"
+
+export type BorderToken = "alert" | "divider" | "input" | "placeholder" | "hover" | "table"
+
+export type ColorToken = "colour.primary.fill" | "colour.primary.fillHover" | "colour.primary.onFill" | "colour.primary.surface" | "colour.primary.surfaceHover" | "colour.primary.text" | "colour.neutral.10" | "colour.neutral.20" | "colour.neutral.30" | "colour.neutral.40" | "colour.neutral.50" | "colour.neutral.60" | "colour.neutral.70" | "colour.neutral.80" | "colour.accent.brand" | "colour.system.success.fill" | "colour.system.success.fillHover" | "colour.system.success.onFill" | "colour.system.success.surface" | "colour.system.success.surfaceHover" | "colour.system.success.text" | "colour.system.danger.fill" | "colour.system.danger.fillHover" | "colour.system.danger.onFill" | "colour.system.danger.surface" | "colour.system.danger.surfaceHover" | "colour.system.danger.text" | "colour.system.warning.fill" | "colour.system.warning.onFill" | "colour.system.warning.surface" | "colour.system.warning.text" | "colour.system.info.fill" | "colour.system.info.onFill" | "colour.system.info.surface" | "colour.system.info.text" | "colour.system.backdrop.fill" | "transparent" | "alt" | "colorPalette"
+
+export type RadiusToken = "radius.000" | "radius.025" | "radius.050" | "radius.075" | "radius.100" | "radius.system.badge" | "radius.system.button" | "radius.system.form" | "radius.system.layout" | "none"
+
+export type SizeToken = "container.xs" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "container.xxl" | "input.2" | "input.4" | "input.6" | "input.8" | "input.10" | "input.12" | "input.16" | "input.25perc" | "input.50perc" | "input.75perc" | "input.100perc" | "overlay.sm" | "overlay.md" | "overlay.lg" | "chevron.select" | "chevron.table" | "input.height" | "progress.height" | "slider.track" | "slider.thumb" | "slider.tick" | "toggle.width" | "toggle.thumb" | "typography.base" | "breakpoint-xs" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl" | "breakpoint-xxl"
+
+export type SpacingToken = "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | "spacing.400" | "spacing.500" | "spacing.600" | "spacing.700" | "spacing.800" | "spacing.900" | "spacing.1000" | "spacing.1200" | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "field.footer" | "slider.tick" | "-spacing.000" | "-spacing.050" | "-spacing.100" | "-spacing.150" | "-spacing.200" | "-spacing.250" | "-spacing.300" | "-spacing.350" | "-spacing.400" | "-spacing.500" | "-spacing.600" | "-spacing.700" | "-spacing.800" | "-spacing.900" | "-spacing.1000" | "-spacing.1200" | "-none" | "-xs" | "-sm" | "-md" | "-lg" | "-xl" | "-field.footer" | "-slider.tick"
+
+export type ZIndexToken = "100" | "200" | "300" | "400" | "500" | "600" | "000"
+
+export type BreakpointToken = "xs" | "sm" | "md" | "lg" | "xl" | "xxl"
+
+export type Tokens = {
+		borders: BorderToken
+		colors: ColorToken
+		radii: RadiusToken
+		sizes: SizeToken
+		spacing: SpacingToken
+		zIndex: ZIndexToken
+		breakpoints: BreakpointToken
+} & { [token: string]: never }
+
+export type TokenCategory = "aspectRatios" | "zIndex" | "opacity" | "colors" | "fonts" | "fontSizes" | "fontWeights" | "lineHeights" | "letterSpacings" | "sizes" | "cursor" | "shadows" | "spacing" | "radii" | "borders" | "borderWidths" | "durations" | "easings" | "animations" | "blurs" | "gradients" | "breakpoints" | "assets"

package/dist/src/styled-system/types/composition.d.ts

@@ -0,0 +1,164 @@
+/* eslint-disable */
+import type {  CompositionStyleObject  } from './system-types';
+
+interface Token<T> {
+  value: T
+  description?: string
+}
+
+interface Recursive<T> {
+  [key: string]: Recursive<T> | T
+}
+
+/* -----------------------------------------------------------------------------
+ * Text styles
+ * -----------------------------------------------------------------------------*/
+
+type TextStyleProperty =
+  | 'font'
+  | 'fontFamily'
+  | 'fontFeatureSettings'
+  | 'fontKerning'
+  | 'fontLanguageOverride'
+  | 'fontOpticalSizing'
+  | 'fontPalette'
+  | 'fontSize'
+  | 'fontSizeAdjust'
+  | 'fontStretch'
+  | 'fontStyle'
+  | 'fontSynthesis'
+  | 'fontVariant'
+  | 'fontVariantAlternates'
+  | 'fontVariantCaps'
+  | 'fontVariantLigatures'
+  | 'fontVariantNumeric'
+  | 'fontVariantPosition'
+  | 'fontVariationSettings'
+  | 'fontWeight'
+  | 'hypens'
+  | 'hyphenateCharacter'
+  | 'hyphenateLimitChars'
+  | 'letterSpacing'
+  | 'lineBreak'
+  | 'lineHeight'
+  | 'quotes'
+  | 'overflowWrap'
+  | 'textCombineUpright'
+  | 'textDecoration'
+  | 'textDecorationColor'
+  | 'textDecorationLine'
+  | 'textDecorationSkipInk'
+  | 'textDecorationStyle'
+  | 'textDecorationThickness'
+  | 'textEmphasis'
+  | 'textEmphasisColor'
+  | 'textEmphasisPosition'
+  | 'textEmphasisStyle'
+  | 'textIndent'
+  | 'textJustify'
+  | 'textOrientation'
+  | 'textOverflow'
+  | 'textRendering'
+  | 'textShadow'
+  | 'textTransform'
+  | 'textUnderlineOffset'
+  | 'textUnderlinePosition'
+  | 'textWrap'
+  | 'textWrapMode'
+  | 'textWrapStyle'
+  | 'verticalAlign'
+  | 'whiteSpace'
+  | 'wordBreak'
+  | 'wordSpacing'
+
+export type TextStyle = CompositionStyleObject<TextStyleProperty>
+
+export type TextStyles = Recursive<Token<TextStyle>>
+
+/* -----------------------------------------------------------------------------
+ * Layer styles
+ * -----------------------------------------------------------------------------*/
+
+type Placement =
+  | 'Top'
+  | 'Right'
+  | 'Bottom'
+  | 'Left'
+  | 'Inline'
+  | 'Block'
+  | 'InlineStart'
+  | 'InlineEnd'
+  | 'BlockStart'
+  | 'BlockEnd'
+
+type Radius =
+  | `Top${'Right' | 'Left'}`
+  | `Bottom${'Right' | 'Left'}`
+  | `Start${'Start' | 'End'}`
+  | `End${'Start' | 'End'}`
+
+type LayerStyleProperty =
+  | 'background'
+  | 'backgroundColor'
+  | 'backgroundImage'
+  | 'borderRadius'
+  | 'border'
+  | 'borderWidth'
+  | 'borderColor'
+  | 'borderStyle'
+  | 'boxShadow'
+  | 'filter'
+  | 'backdropFilter'
+  | 'transform'
+  | 'color'
+  | 'opacity'
+  | 'backgroundBlendMode'
+  | 'backgroundAttachment'
+  | 'backgroundClip'
+  | 'backgroundOrigin'
+  | 'backgroundPosition'
+  | 'backgroundRepeat'
+  | 'backgroundSize'
+  | `border${Placement}`
+  | `border${Placement}Width`
+  | 'borderRadius'
+  | `border${Radius}Radius`
+  | `border${Placement}Color`
+  | `border${Placement}Style`
+  | 'padding'
+  | `padding${Placement}`
+
+export type LayerStyle = CompositionStyleObject<LayerStyleProperty>
+
+export type LayerStyles = Recursive<Token<LayerStyle>>
+
+/* -----------------------------------------------------------------------------
+ * Motion styles
+ * -----------------------------------------------------------------------------*/
+
+type AnimationStyleProperty =
+  | 'animation'
+  | 'animationComposition'
+  | 'animationDelay'
+  | 'animationDirection'
+  | 'animationDuration'
+  | 'animationFillMode'
+  | 'animationIterationCount'
+  | 'animationName'
+  | 'animationPlayState'
+  | 'animationTimingFunction'
+  | 'animationRange'
+  | 'animationRangeStart'
+  | 'animationRangeEnd'
+  | 'animationTimeline'
+  | 'transformOrigin'
+
+export type AnimationStyle = CompositionStyleObject<AnimationStyleProperty>
+
+export type AnimationStyles = Recursive<Token<AnimationStyle>>
+
+export interface CompositionStyles {
+  textStyles: TextStyles
+  layerStyles: LayerStyles
+  animationStyles: AnimationStyles
+}