@aws-amplify/ui 5.8.0 → 6.0.0

package/dist/esm/theme/tokens/components/card.mjs

@@ -1 +1,27 @@
-const o={backgroundColor:{value:"{colors.background.primary.value}"},borderRadius:{value:"{radii.xs.value}"},borderWidth:{value:"0"},borderStyle:{value:"solid"},borderColor:{value:"transparent"},boxShadow:{value:"none"},padding:{value:"{space.medium.value}"},outlined:{backgroundColor:{value:"{components.card.backgroundColor.value}"},borderRadius:{value:"{radii.xs.value}"},borderWidth:{value:"{borderWidths.small.value}"},borderStyle:{value:"solid"},borderColor:{value:"{colors.border.primary.value}"},boxShadow:{value:"{components.card.boxShadow.value}"}},elevated:{backgroundColor:{value:"{components.card.backgroundColor.value}"},borderRadius:{value:"{radii.xs.value}"},borderWidth:{value:"0"},borderStyle:{value:"solid"},borderColor:{value:"transparent"},boxShadow:{value:"{shadows.medium.value}"}}};export{o as card};
+const card = {
+    backgroundColor: { value: '{colors.background.primary.value}' },
+    borderRadius: { value: '{radii.xs.value}' },
+    borderWidth: { value: '0' },
+    borderStyle: { value: 'solid' },
+    borderColor: { value: 'transparent' },
+    boxShadow: { value: 'none' },
+    padding: { value: '{space.medium.value}' },
+    outlined: {
+        backgroundColor: { value: '{components.card.backgroundColor.value}' },
+        borderRadius: { value: '{radii.xs.value}' },
+        borderWidth: { value: '{borderWidths.small.value}' },
+        borderStyle: { value: 'solid' },
+        borderColor: { value: '{colors.border.primary.value}' },
+        boxShadow: { value: '{components.card.boxShadow.value}' },
+    },
+    elevated: {
+        backgroundColor: { value: '{components.card.backgroundColor.value}' },
+        borderRadius: { value: '{radii.xs.value}' },
+        borderWidth: { value: '0' },
+        borderStyle: { value: 'solid' },
+        borderColor: { value: 'transparent' },
+        boxShadow: { value: '{shadows.medium.value}' },
+    },
+};
+
+export { card };

package/dist/esm/theme/tokens/components/checkbox.mjs

@@ -1 +1,87 @@
-const e={cursor:{value:"pointer"},alignItems:{value:"center"},_disabled:{cursor:{value:"not-allowed"}},button:{position:{value:"relative"},alignItems:{value:"center"},justifyContent:{value:"center"},color:{value:"{colors.font.inverse.value}"},before:{width:{value:"100%"},height:{value:"100%"},borderWidth:{value:"{borderWidths.medium.value}"},borderRadius:{value:"20%"},borderStyle:{value:"solid"},borderColor:{value:"{colors.border.primary.value}"}},_focus:{outlineColor:{value:"{colors.transparent.value}"},outlineStyle:{value:"solid"},outlineWidth:{value:"{outlineWidths.medium.value}"},outlineOffset:{value:"{outlineOffsets.medium.value}"},borderColor:{value:"{colors.transparent.value}"},boxShadow:{value:{offsetX:"0px",offsetY:"0px",blurRadius:"0px",spreadRadius:"2px",color:"{colors.border.focus.value}"}}},_disabled:{borderColor:{value:"{colors.border.disabled.value}"}},_error:{borderColor:{value:"{colors.border.error.value}"},_focus:{borderColor:{value:"{colors.transparent.value}"},boxShadow:{value:{offsetX:"0px",offsetY:"0px",blurRadius:"0px",spreadRadius:"2px",color:"{colors.border.error.value}"}}}}},icon:{backgroundColor:{value:"{colors.brand.primary.80.value}"},borderRadius:{value:"20%"},opacity:{value:"{opacities.0.value}"},transform:{value:"scale(0)"},transitionProperty:{value:"all"},transitionDuration:{value:"{time.short.value}"},transitionTimingFunction:{value:"ease-in-out"},_checked:{opacity:{value:"{opacities.100.value}"},transform:{value:"scale(1)"},_disabled:{backgroundColor:{value:"{colors.background.disabled.value}"}}},_indeterminate:{opacity:{value:"{opacities.100.value}"},transform:{value:"scale(1)"},_disabled:{backgroundColor:{value:"{colors.background.disabled.value}"}}}},label:{_disabled:{color:{value:"{colors.font.disabled.value}"}}}};export{e as checkbox};
+const checkbox = {
+    cursor: { value: 'pointer' },
+    alignItems: { value: 'center' },
+    _disabled: {
+        cursor: {
+            value: 'not-allowed',
+        },
+    },
+    button: {
+        position: { value: 'relative' },
+        alignItems: { value: 'center' },
+        justifyContent: { value: 'center' },
+        color: { value: '{colors.font.inverse.value}' },
+        before: {
+            width: { value: '100%' },
+            height: { value: '100%' },
+            borderWidth: { value: '{borderWidths.medium.value}' },
+            borderRadius: { value: '20%' },
+            borderStyle: { value: 'solid' },
+            borderColor: { value: '{colors.border.primary.value}' },
+        },
+        _focus: {
+            outlineColor: { value: '{colors.transparent.value}' },
+            outlineStyle: { value: 'solid' },
+            outlineWidth: { value: '{outlineWidths.medium.value}' },
+            outlineOffset: { value: '{outlineOffsets.medium.value}' },
+            borderColor: { value: '{colors.transparent.value}' },
+            boxShadow: {
+                value: {
+                    offsetX: '0px',
+                    offsetY: '0px',
+                    blurRadius: '0px',
+                    spreadRadius: '2px',
+                    color: '{colors.border.focus.value}',
+                },
+            },
+        },
+        _disabled: {
+            borderColor: { value: '{colors.border.disabled.value}' },
+        },
+        _error: {
+            borderColor: { value: '{colors.border.error.value}' },
+            _focus: {
+                borderColor: { value: '{colors.transparent.value}' },
+                boxShadow: {
+                    value: {
+                        offsetX: '0px',
+                        offsetY: '0px',
+                        blurRadius: '0px',
+                        spreadRadius: '2px',
+                        color: '{colors.border.error.value}',
+                    },
+                },
+            },
+        },
+    },
+    icon: {
+        backgroundColor: { value: '{colors.primary.80.value}' },
+        borderRadius: { value: '20%' },
+        opacity: { value: '{opacities.0.value}' },
+        transform: { value: 'scale(0)' },
+        transitionProperty: { value: 'all' },
+        transitionDuration: { value: '{time.short.value}' },
+        transitionTimingFunction: { value: 'ease-in-out' },
+        _checked: {
+            opacity: { value: '{opacities.100.value}' },
+            transform: { value: 'scale(1)' },
+            _disabled: {
+                backgroundColor: { value: '{colors.background.disabled.value}' },
+            },
+        },
+        _indeterminate: {
+            opacity: { value: '{opacities.100.value}' },
+            transform: { value: 'scale(1)' },
+            _disabled: {
+                backgroundColor: { value: '{colors.background.disabled.value}' },
+            },
+        },
+    },
+    label: {
+        _disabled: {
+            color: { value: '{colors.font.disabled.value}' },
+        },
+    },
+};
+
+export { checkbox };

package/dist/esm/theme/tokens/components/checkboxField.mjs

@@ -1 +1,8 @@
-const e={alignItems:{value:"flex-start"},alignContent:{value:"center"},flexDirection:{value:"column"},justifyContent:{value:"center"}};export{e as checkboxfield};
+const checkboxfield = {
+    alignItems: { value: 'flex-start' },
+    alignContent: { value: 'center' },
+    flexDirection: { value: 'column' },
+    justifyContent: { value: 'center' },
+};
+
+export { checkboxfield };

package/dist/esm/theme/tokens/components/collection.mjs

@@ -1 +1,72 @@
-const o={pagination:{current:{color:{value:"{components.pagination.current.color}"},backgroundColor:{value:"{components.pagination.current.backgroundColor}"}},button:{color:{value:"{components.pagination.button.color}"},_hover:{backgroundColor:{value:"{components.pagination.button.hover.backgroundColor}"},color:{value:"{components.pagination.button.hover.color}"}},_disabled:{color:{value:"{components.pagination.button.disabled.color}"}}}},search:{input:{color:{value:"{components.searchfield.color}"}},button:{color:{value:"{components.searchfield.button.color}"},_active:{backgroundColor:{value:"{components.searchfield.button._active.backgroundColor}"},borderColor:{value:"{components.searchfield.button._active.borderColor}"},color:{value:"{components.searchfield.button._active.color}"}},_disabled:{backgroundColor:{value:"{components.searchfield.button._disabled.backgroundColor}"},borderColor:{value:"{components.searchfield.button._disabled.borderColor}"},color:{value:"{components.searchfield.button._disabled.color}"}},_focus:{backgroundColor:{value:"{components.searchfield.button._focus.backgroundColor}"},borderColor:{value:"{components.searchfield.button._focus.borderColor}"},color:{value:"{components.searchfield.button._focus.color}"}},_hover:{backgroundColor:{value:"{components.searchfield.button._hover.backgroundColor}"},borderColor:{value:"{components.searchfield.button._hover.borderColor}"},color:{value:"{components.searchfield.button._hover.color}"}}}}};export{o as collection};
+//we are reusing the types from the nested components but new tokens need to be created that reference the previous tokens so that they can inherit the needed values but can be overwritten and only effect the collection component.
+//only a subset of the design tokens of the nested components are being exposed, this can be expanded later.
+const collection = {
+    pagination: {
+        current: {
+            color: { value: '{components.pagination.current.color}' },
+            backgroundColor: {
+                value: '{components.pagination.current.backgroundColor}',
+            },
+        },
+        button: {
+            color: { value: '{components.pagination.button.color}' },
+            _hover: {
+                backgroundColor: {
+                    value: '{components.pagination.button.hover.backgroundColor}',
+                },
+                color: { value: '{components.pagination.button.hover.color}' },
+            },
+            _disabled: {
+                color: { value: '{components.pagination.button.disabled.color}' },
+            },
+        },
+    },
+    search: {
+        input: {
+            color: { value: '{components.searchfield.color}' },
+        },
+        button: {
+            color: { value: '{components.searchfield.button.color}' },
+            _active: {
+                backgroundColor: {
+                    value: '{components.searchfield.button._active.backgroundColor}',
+                },
+                borderColor: {
+                    value: '{components.searchfield.button._active.borderColor}',
+                },
+                color: { value: '{components.searchfield.button._active.color}' },
+            },
+            _disabled: {
+                backgroundColor: {
+                    value: '{components.searchfield.button._disabled.backgroundColor}',
+                },
+                borderColor: {
+                    value: '{components.searchfield.button._disabled.borderColor}',
+                },
+                color: {
+                    value: '{components.searchfield.button._disabled.color}',
+                },
+            },
+            _focus: {
+                backgroundColor: {
+                    value: '{components.searchfield.button._focus.backgroundColor}',
+                },
+                borderColor: {
+                    value: '{components.searchfield.button._focus.borderColor}',
+                },
+                color: { value: '{components.searchfield.button._focus.color}' },
+            },
+            _hover: {
+                backgroundColor: {
+                    value: '{components.searchfield.button._hover.backgroundColor}',
+                },
+                borderColor: {
+                    value: '{components.searchfield.button._hover.borderColor}',
+                },
+                color: { value: '{components.searchfield.button._hover.color}' },
+            },
+        },
+    },
+};
+
+export { collection };

package/dist/esm/theme/tokens/components/copy.mjs

@@ -1 +1,18 @@
-const e={fontSize:{value:"{fontSizes.xs}"},gap:{value:"{space.relative.medium}"},svg:{path:{fill:{value:"{colors.font.primary}"}}},toolTip:{bottom:{value:"{space.large}"},color:{value:"{colors.teal.100}"},fontSize:{value:"{fontSizes.xxs}"}}};export{e as copy};
+const copy = {
+    fontSize: { value: '{fontSizes.xs}' },
+    gap: { value: '{space.relative.medium}' },
+    svg: {
+        path: {
+            fill: {
+                value: '{colors.font.primary}',
+            },
+        },
+    },
+    toolTip: {
+        bottom: { value: '{space.large}' },
+        color: { value: '{colors.teal.100}' },
+        fontSize: { value: '{fontSizes.xxs}' },
+    },
+};
+
+export { copy };

package/dist/esm/theme/tokens/components/dialCodeSelect.mjs

@@ -1 +1,7 @@
-const e={height:{value:"{space.relative.full.value}"}};export{e as dialcodeselect};
+const dialcodeselect = {
+    height: {
+        value: '{space.relative.full.value}',
+    },
+};
+
+export { dialcodeselect };

package/dist/esm/theme/tokens/components/divider.mjs

@@ -1 +1,22 @@
-const e={borderStyle:{value:"solid"},borderColor:{value:"{colors.border.primary.value}"},borderWidth:{value:"{borderWidths.medium.value}"},label:{color:{value:"{colors.font.tertiary.value}"},paddingInline:{value:"{space.medium.value}"},fontSize:{value:"{fontSizes.small.value}"},backgroundColor:{value:"{colors.background.primary.value}"}},small:{borderWidth:{value:"{borderWidths.small.value}"}},large:{borderWidth:{value:"{borderWidths.large.value}"}},opacity:{value:"{opacities.60.value}"}};export{e as divider};
+const divider = {
+    borderStyle: { value: 'solid' },
+    borderColor: { value: '{colors.border.primary.value}' },
+    borderWidth: { value: '{borderWidths.medium.value}' },
+    label: {
+        color: { value: '{colors.font.tertiary.value}' },
+        paddingInline: { value: '{space.medium.value}' },
+        fontSize: { value: '{fontSizes.small.value}' },
+        backgroundColor: { value: '{colors.background.primary.value}' },
+    },
+    small: {
+        borderWidth: { value: '{borderWidths.small.value}' },
+    },
+    large: {
+        borderWidth: { value: '{borderWidths.large.value}' },
+    },
+    opacity: {
+        value: '{opacities.60.value}',
+    },
+};
+
+export { divider };

package/dist/esm/theme/tokens/components/dropZone.mjs

@@ -1 +1,46 @@
-const o={backgroundColor:{value:"{colors.background.primary}"},borderRadius:{value:"{radii.small}"},borderColor:{value:"{colors.border.primary}"},borderStyle:{value:"dashed"},borderWidth:{value:"{borderWidths.small}"},color:{value:"{colors.font.primary}"},gap:{value:"{space.small}"},paddingBlock:{value:"{space.xl}"},paddingInline:{value:"{space.large}"},textAlign:{value:"center"},_active:{backgroundColor:{value:"{colors.brand.primary.10}"},borderRadius:{value:"{components.dropzone.borderRadius}"},borderColor:{value:"{colors.border.pressed}"},borderStyle:{value:"{components.dropzone.borderStyle}"},borderWidth:{value:"{components.dropzone.borderWidth}"},color:{value:"{colors.font.primary}"}},_disabled:{backgroundColor:{value:"{colors.background.disabled}"},borderRadius:{value:"{components.dropzone.borderRadius}"},borderColor:{value:"{colors.border.disabled}"},borderStyle:{value:"{components.dropzone.borderStyle}"},borderWidth:{value:"{components.dropzone.borderWidth}"},color:{value:"{colors.font.disabled}"}},accepted:{backgroundColor:{value:"{colors.background.success}"},borderRadius:{value:"{components.dropzone.borderRadius}"},borderColor:{value:"{colors.border.success}"},borderStyle:{value:"{components.dropzone.borderStyle}"},borderWidth:{value:"{components.dropzone.borderWidth}"},color:{value:"{colors.font.success}"}},rejected:{backgroundColor:{value:"{colors.background.error}"},borderRadius:{value:"{components.dropzone.borderRadius}"},borderColor:{value:"{colors.border.pressed}"},borderStyle:{value:"{components.dropzone.borderStyle}"},borderWidth:{value:"{components.dropzone.borderWidth}"},color:{value:"{colors.font.error}"}}};export{o as dropzone};
+const dropzone = {
+    backgroundColor: { value: '{colors.background.primary}' },
+    borderRadius: { value: '{radii.small}' },
+    borderColor: { value: '{colors.border.primary}' },
+    borderStyle: { value: 'dashed' },
+    borderWidth: { value: '{borderWidths.small}' },
+    color: { value: '{colors.font.primary}' },
+    gap: { value: '{space.small}' },
+    paddingBlock: { value: '{space.xl}' },
+    paddingInline: { value: '{space.large}' },
+    textAlign: { value: 'center' },
+    _active: {
+        backgroundColor: { value: '{colors.primary.10}' },
+        borderRadius: { value: '{components.dropzone.borderRadius}' },
+        borderColor: { value: '{colors.border.pressed}' },
+        borderStyle: { value: '{components.dropzone.borderStyle}' },
+        borderWidth: { value: '{components.dropzone.borderWidth}' },
+        color: { value: '{colors.font.primary}' },
+    },
+    _disabled: {
+        backgroundColor: { value: '{colors.background.disabled}' },
+        borderRadius: { value: '{components.dropzone.borderRadius}' },
+        borderColor: { value: '{colors.border.disabled}' },
+        borderStyle: { value: '{components.dropzone.borderStyle}' },
+        borderWidth: { value: '{components.dropzone.borderWidth}' },
+        color: { value: '{colors.font.disabled}' },
+    },
+    accepted: {
+        backgroundColor: { value: '{colors.background.success}' },
+        borderRadius: { value: '{components.dropzone.borderRadius}' },
+        borderColor: { value: '{colors.border.success}' },
+        borderStyle: { value: '{components.dropzone.borderStyle}' },
+        borderWidth: { value: '{components.dropzone.borderWidth}' },
+        color: { value: '{colors.font.success}' },
+    },
+    rejected: {
+        backgroundColor: { value: '{colors.background.error}' },
+        borderRadius: { value: '{components.dropzone.borderRadius}' },
+        borderColor: { value: '{colors.border.pressed}' },
+        borderStyle: { value: '{components.dropzone.borderStyle}' },
+        borderWidth: { value: '{components.dropzone.borderWidth}' },
+        color: { value: '{colors.font.error}' },
+    },
+};
+
+export { dropzone };

package/dist/esm/theme/tokens/components/field.mjs

@@ -1 +1,20 @@
-const e={gap:{value:"{space.xs.value}"},fontSize:{value:"{fontSizes.medium.value}"},flexDirection:{value:"column"},small:{gap:{value:"{space.xxxs.value}"},fontSize:{value:"{fontSizes.small.value}"}},large:{gap:{value:"{space.small.value}"},fontSize:{value:"{fontSizes.large.value}"}},label:{color:{value:"{colors.font.secondary.value}"}}};export{e as field};
+const field = {
+    // default styles
+    gap: { value: '{space.xs.value}' },
+    fontSize: { value: '{fontSizes.medium.value}' },
+    flexDirection: { value: 'column' },
+    // Adjust base fontSize and gap for small and large sizes
+    small: {
+        gap: { value: '{space.xxxs.value}' },
+        fontSize: { value: '{fontSizes.small.value}' },
+    },
+    large: {
+        gap: { value: '{space.small.value}' },
+        fontSize: { value: '{fontSizes.large.value}' },
+    },
+    label: {
+        color: { value: '{colors.font.secondary.value}' },
+    },
+};
+
+export { field };

package/dist/esm/theme/tokens/components/fieldControl.mjs

@@ -1 +1,131 @@
-const e={borderStyle:{value:"solid"},borderColor:{value:"{colors.border.primary.value}"},borderWidth:{value:"{borderWidths.small.value}"},borderRadius:{value:"{radii.small.value}"},color:{value:"{colors.font.primary.value}"},paddingBlockStart:{value:"{space.xs.value}"},paddingBlockEnd:{value:"{space.xs.value}"},paddingInlineStart:{value:"{space.medium.value}"},paddingInlineEnd:{value:"{space.medium.value}"},fontSize:{value:"{components.field.fontSize.value}"},lineHeight:{value:"{lineHeights.medium.value}"},transitionDuration:{value:"{time.medium.value}"},outlineColor:{value:"{colors.transparent.value}"},outlineStyle:{value:"solid"},outlineWidth:{value:"{outlineWidths.medium.value}"},outlineOffset:{value:"{outlineOffsets.medium.value}"},small:{fontSize:{value:"{components.field.small.fontSize.value}"},paddingBlockStart:{value:"{space.xxs.value}"},paddingBlockEnd:{value:"{space.xxs.value}"},paddingInlineStart:{value:"{space.small.value}"},paddingInlineEnd:{value:"{space.small.value}"}},large:{fontSize:{value:"{components.field.large.fontSize.value}"},paddingBlockStart:{value:"{space.xs.value}"},paddingBlockEnd:{value:"{space.xs.value}"},paddingInlineStart:{value:"{space.medium.value}"},paddingInlineEnd:{value:"{space.medium.value}"}},quiet:{borderStyle:{value:"none"},borderInlineStart:{value:"none"},borderInlineEnd:{value:"none"},borderBlockStart:{value:"none"},borderRadius:{value:"0"},_focus:{borderBlockEndColor:{value:"{colors.border.focus.value}"},boxShadow:{value:{offsetX:"0px",offsetY:"1px",color:"{colors.border.focus.value}",blurRadius:"0px"}}},_error:{borderBlockEndColor:{value:"{colors.border.error.value}"},_focus:{boxShadow:{value:{offsetX:"0px",offsetY:"1px",color:"{colors.border.error.value}",blurRadius:"0px"}}}}},_focus:{borderColor:{value:"{colors.border.focus.value}"},boxShadow:{value:{offsetX:"0px",offsetY:"0px",blurRadius:"0px",spreadRadius:"1px",color:"{colors.border.focus.value}"}}},_disabled:{color:{value:"{colors.font.disabled.value}"},cursor:{value:"not-allowed"},borderColor:{value:"{colors.transparent.value}"},backgroundColor:{value:"{colors.background.disabled.value}"}},_error:{borderColor:{value:"{colors.border.error.value}"},color:{value:"{colors.font.error.value}"},_focus:{boxShadow:{value:{offsetX:"0px",offsetY:"0px",blurRadius:"0px",spreadRadius:"1px",color:"{colors.border.error.value}"}}}}};export{e as fieldcontrol};
+const fieldcontrol = {
+    borderStyle: { value: 'solid' },
+    borderColor: { value: '{colors.border.primary.value}' },
+    borderWidth: { value: '{borderWidths.small.value}' },
+    borderRadius: { value: '{radii.small.value}' },
+    color: { value: '{colors.font.primary.value}' },
+    paddingBlockStart: {
+        value: '{space.xs.value}',
+    },
+    paddingBlockEnd: {
+        value: '{space.xs.value}',
+    },
+    paddingInlineStart: {
+        value: '{space.medium.value}',
+    },
+    paddingInlineEnd: {
+        value: '{space.medium.value}',
+    },
+    fontSize: { value: '{components.field.fontSize.value}' },
+    lineHeight: { value: '{lineHeights.medium.value}' },
+    transitionDuration: { value: '{time.medium.value}' },
+    outlineColor: { value: '{colors.transparent.value}' },
+    outlineStyle: { value: 'solid' },
+    outlineWidth: { value: '{outlineWidths.medium.value}' },
+    outlineOffset: { value: '{outlineOffsets.medium.value}' },
+    small: {
+        fontSize: { value: '{components.field.small.fontSize.value}' },
+        paddingBlockStart: {
+            value: '{space.xxs.value}',
+        },
+        paddingBlockEnd: {
+            value: '{space.xxs.value}',
+        },
+        paddingInlineStart: {
+            value: '{space.small.value}',
+        },
+        paddingInlineEnd: {
+            value: '{space.small.value}',
+        },
+    },
+    large: {
+        fontSize: { value: '{components.field.large.fontSize.value}' },
+        paddingBlockStart: {
+            value: '{space.xs.value}',
+        },
+        paddingBlockEnd: {
+            value: '{space.xs.value}',
+        },
+        paddingInlineStart: {
+            value: '{space.medium.value}',
+        },
+        paddingInlineEnd: {
+            value: '{space.medium.value}',
+        },
+    },
+    quiet: {
+        borderStyle: { value: 'none' },
+        borderInlineStart: { value: 'none' },
+        borderInlineEnd: { value: 'none' },
+        borderBlockStart: { value: 'none' },
+        borderRadius: { value: '0' },
+        _focus: {
+            borderBlockEndColor: { value: '{colors.border.focus.value}' },
+            boxShadow: {
+                value: {
+                    offsetX: '0px',
+                    offsetY: '1px',
+                    color: '{colors.border.focus.value}',
+                    blurRadius: '0px',
+                },
+            },
+        },
+        _error: {
+            borderBlockEndColor: { value: '{colors.border.error.value}' },
+            _focus: {
+                boxShadow: {
+                    value: {
+                        offsetX: '0px',
+                        offsetY: '1px',
+                        color: '{colors.border.error.value}',
+                        blurRadius: '0px',
+                    },
+                },
+            },
+        },
+    },
+    _focus: {
+        // These focus styles have been calibrated to create
+        // a highly visible focus indicator per WCAG 2.1 guidliness:
+        // See: https://www.w3.org/WAI/WCAG21/Techniques/general/G195.html
+        //
+        // Key features:
+        // * Focus indicator area is at least the 1 CSS px border around the component.
+        // * Contrast between focused and unfocused states has a ratio of 3:1
+        //
+        // IMPORTANT: Must recalibrate if `colors.border.primary` or `colors.focus` are changed
+        borderColor: { value: '{colors.border.focus.value}' },
+        boxShadow: {
+            value: {
+                offsetX: '0px',
+                offsetY: '0px',
+                blurRadius: '0px',
+                spreadRadius: '1px',
+                color: '{colors.border.focus.value}',
+            },
+        },
+    },
+    _disabled: {
+        color: { value: '{colors.font.disabled.value}' },
+        cursor: { value: 'not-allowed' },
+        borderColor: { value: '{colors.transparent.value}' },
+        backgroundColor: { value: '{colors.background.disabled.value}' },
+    },
+    _error: {
+        borderColor: { value: '{colors.border.error.value}' },
+        color: { value: '{colors.font.error.value}' },
+        _focus: {
+            boxShadow: {
+                value: {
+                    offsetX: '0px',
+                    offsetY: '0px',
+                    blurRadius: '0px',
+                    spreadRadius: '1px',
+                    color: '{colors.border.error.value}',
+                },
+            },
+        },
+    },
+};
+
+export { fieldcontrol };

package/dist/esm/theme/tokens/components/fieldGroup.mjs

@@ -1 +1,11 @@
-const e={gap:{value:"{space.zero.value}"},vertical:{alignItems:{value:"center"}},outer:{alignItems:{value:"center"}}};export{e as fieldgroup};
+const fieldgroup = {
+    gap: { value: '{space.zero.value}' },
+    vertical: {
+        alignItems: { value: 'center' },
+    },
+    outer: {
+        alignItems: { value: 'center' },
+    },
+};
+
+export { fieldgroup };

package/dist/esm/theme/tokens/components/fieldMessages.mjs

@@ -1 +1,13 @@
-const o={error:{color:{value:"{colors.font.error.value}"},fontSize:{value:"{fontSizes.small.value}"}},description:{color:{value:"{colors.font.secondary.value}"},fontStyle:{value:"italic"},fontSize:{value:"{fontSizes.small.value}"}}};export{o as fieldmessages};
+const fieldmessages = {
+    error: {
+        color: { value: '{colors.font.error.value}' },
+        fontSize: { value: '{fontSizes.small.value}' },
+    },
+    description: {
+        color: { value: '{colors.font.secondary.value}' },
+        fontStyle: { value: 'italic' },
+        fontSize: { value: '{fontSizes.small.value}' },
+    },
+};
+
+export { fieldmessages };

package/dist/esm/theme/tokens/components/fieldset.mjs

@@ -1 +1,40 @@
-const e={backgroundColor:{value:"transparent"},borderRadius:{value:"{radii.xs.value}"},flexDirection:{value:"column"},gap:{value:"{components.field.gap.value}"},legend:{color:{value:"{colors.font.primary.value}"},fontSize:{value:"{components.field.fontSize.value}"},fontWeight:{value:"{fontWeights.bold.value}"},lineHeight:{value:"{lineHeights.medium.value}"},small:{fontSize:"{components.field.small.fontSize.value}"},large:{fontSize:"{components.field.large.fontSize.value}"}},outlined:{padding:"{space.medium.value}",borderColor:"{colors.neutral.40.value}",borderWidth:"{borderWidths.small.value}",borderStyle:"solid",small:{padding:"{space.small.value}"},large:{padding:"{space.large.value}"}},small:{gap:"{components.field.small.gap.value}"},large:{gap:"{components.field.large.gap.value}"}};export{e as fieldset};
+const fieldset = {
+    backgroundColor: { value: 'transparent' },
+    borderRadius: { value: '{radii.xs.value}' },
+    flexDirection: {
+        value: 'column',
+    },
+    gap: { value: '{components.field.gap.value}' },
+    legend: {
+        color: { value: '{colors.font.primary.value}' },
+        fontSize: { value: '{components.field.fontSize.value}' },
+        fontWeight: { value: '{fontWeights.bold.value}' },
+        lineHeight: { value: '{lineHeights.medium.value}' },
+        small: {
+            fontSize: '{components.field.small.fontSize.value}',
+        },
+        large: {
+            fontSize: '{components.field.large.fontSize.value}',
+        },
+    },
+    outlined: {
+        padding: '{space.medium.value}',
+        borderColor: '{colors.neutral.40.value}',
+        borderWidth: '{borderWidths.small.value}',
+        borderStyle: 'solid',
+        small: {
+            padding: '{space.small.value}',
+        },
+        large: {
+            padding: '{space.large.value}',
+        },
+    },
+    small: {
+        gap: '{components.field.small.gap.value}',
+    },
+    large: {
+        gap: '{components.field.large.gap.value}',
+    },
+};
+
+export { fieldset };

package/dist/esm/theme/tokens/components/flex.mjs

@@ -1 +1,9 @@
-const a={gap:{value:"{space.medium.value}"},justifyContent:{value:"normal"},alignItems:{value:"stretch"},alignContent:{value:"normal"},flexWrap:{value:"nowrap"}};export{a as flex};
+const flex = {
+    gap: { value: '{space.medium.value}' },
+    justifyContent: { value: 'normal' },
+    alignItems: { value: 'stretch' },
+    alignContent: { value: 'normal' },
+    flexWrap: { value: 'nowrap' },
+};
+
+export { flex };

package/dist/esm/theme/tokens/components/heading.mjs

@@ -1 +1,30 @@
-const e={color:{value:"{colors.font.primary.value}"},lineHeight:{value:"{lineHeights.small.value}"},1:{fontSize:{value:"{fontSizes.xxxxl.value}"},fontWeight:{value:"{fontWeights.light.value}"}},2:{fontSize:{value:"{fontSizes.xxxl.value}"},fontWeight:{value:"{fontWeights.normal.value}"}},3:{fontSize:{value:"{fontSizes.xxl.value}"},fontWeight:{value:"{fontWeights.medium.value}"}},4:{fontSize:{value:"{fontSizes.xl.value}"},fontWeight:{value:"{fontWeights.semibold.value}"}},5:{fontSize:{value:"{fontSizes.large.value}"},fontWeight:{value:"{fontWeights.bold.value}"}},6:{fontSize:{value:"{fontSizes.medium.value}"},fontWeight:{value:"{fontWeights.extrabold.value}"}}};export{e as heading};
+const heading = {
+    color: { value: '{colors.font.primary.value}' },
+    lineHeight: { value: '{lineHeights.small.value}' },
+    1: {
+        fontSize: { value: '{fontSizes.xxxxl.value}' },
+        fontWeight: { value: '{fontWeights.light.value}' },
+    },
+    2: {
+        fontSize: { value: '{fontSizes.xxxl.value}' },
+        fontWeight: { value: '{fontWeights.normal.value}' },
+    },
+    3: {
+        fontSize: { value: '{fontSizes.xxl.value}' },
+        fontWeight: { value: '{fontWeights.medium.value}' },
+    },
+    4: {
+        fontSize: { value: '{fontSizes.xl.value}' },
+        fontWeight: { value: '{fontWeights.semibold.value}' },
+    },
+    5: {
+        fontSize: { value: '{fontSizes.large.value}' },
+        fontWeight: { value: '{fontWeights.bold.value}' },
+    },
+    6: {
+        fontSize: { value: '{fontSizes.medium.value}' },
+        fontWeight: { value: '{fontWeights.extrabold.value}' },
+    },
+};
+
+export { heading };

package/dist/esm/theme/tokens/components/highlightMatch.mjs

@@ -1 +1,7 @@
-const t={highlighted:{fontWeight:{value:"{fontWeights.bold}"}}};export{t as highlightmatch};
+const highlightmatch = {
+    highlighted: {
+        fontWeight: { value: '{fontWeights.bold}' },
+    },
+};
+
+export { highlightmatch };

package/dist/esm/theme/tokens/components/icon.mjs

@@ -1 +1,6 @@
-const e={lineHeight:{value:1},height:{value:"1em"}};export{e as icon};
+const icon = {
+    lineHeight: { value: 1 },
+    height: { value: '1em' }, // Should match height of parent container font-size
+};
+
+export { icon };

package/dist/esm/theme/tokens/components/image.mjs

@@ -1 +1,8 @@
-const i={maxWidth:{value:"100%"},height:{value:"auto"},objectFit:{value:"initial"},objectPosition:{value:"initial"}};export{i as image};
+const image = {
+    maxWidth: { value: '100%' },
+    height: { value: 'auto' },
+    objectFit: { value: 'initial' },
+    objectPosition: { value: 'initial' },
+};
+
+export { image };

package/dist/esm/theme/tokens/components/inAppMessaging.mjs

@@ -1 +1,23 @@
-const e={banner:{height:{value:"150px "},width:{value:"400px "}},button:{backgroundColor:{value:"#e8e8e8"},borderRadius:{value:"5px"},color:{value:"black"}},dialog:{height:{value:"50vh"},minHeight:{value:"400px"},minWidth:{value:"400px"},width:{value:"30vw"}},header:{fontSize:{value:"{fontSizes.medium.value}"},fontWeight:{value:"{fontWeights.extrabold.value}"}}};export{e as inappmessaging};
+const inappmessaging = {
+    banner: {
+        height: { value: '150px ' },
+        width: { value: '400px ' },
+    },
+    button: {
+        backgroundColor: { value: '#e8e8e8' },
+        borderRadius: { value: '5px' },
+        color: { value: 'black' },
+    },
+    dialog: {
+        height: { value: '50vh' },
+        minHeight: { value: '400px' },
+        minWidth: { value: '400px' },
+        width: { value: '30vw' },
+    },
+    header: {
+        fontSize: { value: '{fontSizes.medium.value}' },
+        fontWeight: { value: '{fontWeights.extrabold.value}' },
+    },
+};
+
+export { inappmessaging };