@aws-amplify/ui 5.8.1 → 6.0.0

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

@@ -1 +1,63 @@
-const a={color:{value:"{components.fieldcontrol.color}"},backgroundColor:{value:"{colors.background.primary.value}"},paddingInlineEnd:{value:"{space.xxl.value}"},_disabled:{color:{value:"{colors.font.disabled.value}"},backgroundColor:{value:"{colors.background.disabled.value}"}},wrapper:{flex:{value:"1"},display:{value:"block"},position:{value:"relative"},cursor:{value:"pointer"}},iconWrapper:{alignItems:{value:"center"},position:{value:"absolute"},top:{value:"50%"},right:{value:"{space.medium.value}"},transform:{value:"translateY(-50%)"},pointerEvents:{value:"none"},small:{right:{value:"{space.xs.value}"}},large:{right:{value:"{space.medium.value}"}}},option:{backgroundColor:{value:"transparent"},color:{value:"{colors.font.primary.value}"},_disabled:{color:{value:"{colors.font.disabled.value}"},backgroundColor:{value:"transparent"}}},whiteSpace:{value:"nowrap"},minWidth:{value:"6.5rem"},small:{minWidth:{value:"5.5rem"},paddingInlineEnd:{value:"{space.xl.value}"}},large:{minWidth:{value:"7.5rem"},paddingInlineEnd:{value:"{space.xxl.value}"}},expanded:{paddingBlock:{value:"{space.xs.value}"},paddingInline:{value:"{space.small.value}"},option:{paddingBlock:{value:"{space.xs.value}"},paddingInline:{value:"{space.small.value}"}}}};export{a as select};
+const select = {
+    color: { value: '{components.fieldcontrol.color}' },
+    backgroundColor: { value: '{colors.background.primary.value}' },
+    paddingInlineEnd: { value: '{space.xxl.value}' },
+    _disabled: {
+        color: { value: '{colors.font.disabled.value}' },
+        backgroundColor: { value: '{colors.background.disabled.value}' },
+    },
+    // wrappers
+    wrapper: {
+        flex: { value: '1' },
+        display: { value: 'block' },
+        position: { value: 'relative' },
+        cursor: { value: 'pointer' },
+    },
+    iconWrapper: {
+        alignItems: { value: 'center' },
+        position: { value: 'absolute' },
+        top: { value: '50%' },
+        right: { value: '{space.medium.value}' },
+        transform: { value: 'translateY(-50%)' },
+        pointerEvents: { value: 'none' },
+        small: {
+            right: { value: '{space.xs.value}' },
+        },
+        large: {
+            right: { value: '{space.medium.value}' },
+        },
+    },
+    // It's important to test these option values on Chrome/FireFox/Edge
+    // on Windows because they allow styling of the option element.
+    // Chrome/Safari/Firefox on Mac uses the system ui.
+    option: {
+        backgroundColor: { value: 'transparent' },
+        color: { value: '{colors.font.primary.value}' },
+        _disabled: {
+            color: { value: '{colors.font.disabled.value}' },
+            backgroundColor: {
+                value: 'transparent',
+            },
+        },
+    },
+    whiteSpace: { value: 'nowrap' },
+    minWidth: { value: '6.5rem' },
+    small: {
+        minWidth: { value: '5.5rem' },
+        paddingInlineEnd: { value: '{space.xl.value}' },
+    },
+    large: {
+        minWidth: { value: '7.5rem' },
+        paddingInlineEnd: { value: '{space.xxl.value}' },
+    },
+    expanded: {
+        paddingBlock: { value: '{space.xs.value}' },
+        paddingInline: { value: '{space.small.value}' },
+        option: {
+            paddingBlock: { value: '{space.xs.value}' },
+            paddingInline: { value: '{space.small.value}' },
+        },
+    },
+};
+
+export { select };

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

@@ -1 +1,16 @@
-const o={borderColor:{value:"{components.fieldcontrol.borderColor}"},color:{value:"{components.fieldcontrol.color}"},flexDirection:{value:"column"},fontSize:{value:"{components.fieldcontrol.fontSize}"},_focus:{borderColor:{value:"{components.fieldcontrol._focus.borderColor}"}},label:{color:{value:"{components.field.label.color}"}}};export{o as selectfield};
+const selectfield = {
+    borderColor: { value: '{components.fieldcontrol.borderColor}' },
+    color: { value: '{components.fieldcontrol.color}' },
+    flexDirection: {
+        value: 'column',
+    },
+    fontSize: { value: '{components.fieldcontrol.fontSize}' },
+    _focus: {
+        borderColor: { value: '{components.fieldcontrol._focus.borderColor}' },
+    },
+    label: {
+        color: { value: '{components.field.label.color}' },
+    },
+};
+
+export { selectfield };

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

@@ -1 +1,70 @@
-const r={paddingBlock:{value:"{space.xs.value}"},track:{backgroundColor:{value:"{colors.background.quaternary.value}"},borderRadius:{value:"9999px"},height:{value:"0.375rem"},minWidth:{value:"10rem"}},range:{backgroundColor:{value:"{colors.brand.primary.80.value}"},borderRadius:{value:"9999px"},_disabled:{backgroundColor:{value:"{colors.background.disabled.value}"}}},thumb:{width:{value:"1.25rem"},height:{value:"1.25rem"},backgroundColor:{value:"{colors.background.primary.value}"},boxShadow:{value:"{shadows.small.value}"},borderRadius:{value:"50%"},borderWidth:{value:"{borderWidths.medium.value}"},borderColor:{value:"{colors.border.primary.value}"},borderStyle:{value:"solid"},_disabled:{backgroundColor:{value:"{colors.background.disabled.value}"},borderColor:{value:"transparent"},boxShadow:{value:"none"}},_hover:{backgroundColor:{value:"{colors.background.primary.value}"},borderColor:{value:"{colors.border.focus.value}"}},_focus:{borderColor:{value:"{colors.border.focus.value}"},boxShadow:{value:{offsetX:"0",offsetY:"0",blurRadius:"0",spreadRadius:"2px",color:"{colors.border.focus.value}"}}}},small:{track:{height:{value:"0.25rem"}},thumb:{width:{value:"1rem"},height:{value:"1rem"}}},large:{track:{height:{value:"0.625rem"}},thumb:{width:{value:"1.5rem"},height:{value:"1.5rem"}}}};export{r as sliderfield};
+const sliderfield = {
+    paddingBlock: { value: '{space.xs.value}' },
+    // The track is the thin background of the slider
+    track: {
+        backgroundColor: { value: '{colors.background.quaternary.value}' },
+        borderRadius: { value: '9999px' },
+        height: { value: '0.375rem' },
+        minWidth: { value: '10rem' },
+    },
+    // The range is the filled part of the track
+    range: {
+        backgroundColor: { value: '{colors.primary.80.value}' },
+        borderRadius: { value: '9999px' },
+        _disabled: {
+            backgroundColor: { value: '{colors.background.disabled.value}' },
+        },
+    },
+    // The thumb is the circle above the track that the user drags
+    thumb: {
+        width: { value: '1.25rem' },
+        height: { value: '1.25rem' },
+        backgroundColor: { value: '{colors.background.primary.value}' },
+        boxShadow: { value: '{shadows.small.value}' },
+        borderRadius: { value: '50%' },
+        borderWidth: { value: '{borderWidths.medium.value}' },
+        borderColor: { value: '{colors.border.primary.value}' },
+        borderStyle: { value: 'solid' },
+        _disabled: {
+            backgroundColor: { value: '{colors.background.disabled.value}' },
+            borderColor: { value: 'transparent' },
+            boxShadow: { value: 'none' },
+        },
+        _hover: {
+            backgroundColor: { value: '{colors.background.primary.value}' },
+            borderColor: { value: '{colors.border.focus.value}' },
+        },
+        _focus: {
+            borderColor: { value: '{colors.border.focus.value}' },
+            boxShadow: {
+                value: {
+                    offsetX: '0',
+                    offsetY: '0',
+                    blurRadius: '0',
+                    spreadRadius: '2px',
+                    color: '{colors.border.focus.value}',
+                },
+            },
+        },
+    },
+    small: {
+        track: {
+            height: { value: '0.25rem' },
+        },
+        thumb: {
+            width: { value: '1rem' },
+            height: { value: '1rem' },
+        },
+    },
+    large: {
+        track: {
+            height: { value: '0.625rem' },
+        },
+        thumb: {
+            width: { value: '1.5rem' },
+            height: { value: '1.5rem' },
+        },
+    },
+};
+
+export { sliderfield };

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

@@ -1 +1,33 @@
-const o={borderColor:{value:"{components.fieldcontrol.borderColor}"},flexDirection:{value:"column"},input:{color:{value:"{components.fieldcontrol.color}"},fontSize:{value:"{components.fieldcontrol.fontSize}"},textAlign:{value:"center"}},button:{color:{value:"{components.button.color}"},backgroundColor:{value:"{colors.transparent}"},_active:{color:{value:"{components.button._active.color}"},backgroundColor:{value:"{components.button._active.backgroundColor}"}},_focus:{color:{value:"{components.button._focus.color}"},backgroundColor:{value:"{components.button._focus.backgroundColor}"}},_disabled:{color:{value:"{components.button._disabled.color}"},backgroundColor:{value:"{components.fieldcontrol._disabled.backgroundColor}"}},_hover:{color:{value:"{components.button._hover.color}"},backgroundColor:{value:"{components.button._hover.backgroundColor}"}}}};export{o as stepperfield};
+const stepperfield = {
+    borderColor: { value: '{components.fieldcontrol.borderColor}' },
+    flexDirection: { value: 'column' },
+    input: {
+        color: { value: '{components.fieldcontrol.color}' },
+        fontSize: { value: '{components.fieldcontrol.fontSize}' },
+        textAlign: { value: 'center' },
+    },
+    button: {
+        color: { value: '{components.button.color}' },
+        backgroundColor: { value: '{colors.transparent}' },
+        _active: {
+            color: { value: '{components.button._active.color}' },
+            backgroundColor: { value: '{components.button._active.backgroundColor}' },
+        },
+        _focus: {
+            color: { value: '{components.button._focus.color}' },
+            backgroundColor: { value: '{components.button._focus.backgroundColor}' },
+        },
+        _disabled: {
+            color: { value: '{components.button._disabled.color}' },
+            backgroundColor: {
+                value: '{components.fieldcontrol._disabled.backgroundColor}',
+            },
+        },
+        _hover: {
+            color: { value: '{components.button._hover.color}' },
+            backgroundColor: { value: '{components.button._hover.backgroundColor}' },
+        },
+    },
+};
+
+export { stepperfield };

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

@@ -1 +1,97 @@
-import{fileuploader as e}from"./fileUploader.mjs";const s=Object.assign(Object.assign({},e),{filelist:{flexDirection:{value:"column"},gap:{value:"{space.small}"}},previewer:Object.assign(Object.assign({},e.previewer),{footer:{justifyContent:{value:"flex-end"}}})});export{s as storagemanager};
+const storagemanager = {
+    dropzone: {
+        backgroundColor: { value: '{colors.background.primary}' },
+        borderRadius: { value: '{radii.small}' },
+        borderColor: { value: '{colors.border.primary}' },
+        borderStyle: { value: 'dashed' },
+        borderWidth: { value: '{borderWidths.small}' },
+        gap: { value: '{space.small}' },
+        paddingBlock: { value: '{space.xl}' },
+        paddingInline: { value: '{space.large}' },
+        textAlign: { value: 'center' },
+        _active: {
+            backgroundColor: { value: '{colors.primary.10}' },
+            borderRadius: {
+                value: '{components.storagemanager.dropzone.borderRadius}',
+            },
+            borderColor: { value: '{colors.border.pressed}' },
+            borderStyle: {
+                value: '{components.storagemanager.dropzone.borderStyle}',
+            },
+            borderWidth: { value: '{borderWidths.medium}' },
+        },
+        icon: {
+            color: { value: '{colors.border.primary}' },
+            fontSize: { value: '{fontSizes.xxl}' },
+        },
+        text: {
+            color: { value: '{colors.font.tertiary}' },
+            fontSize: { value: '{fontSizes.medium}' },
+            fontWeight: { value: '{fontWeights.bold}' },
+        },
+    },
+    file: {
+        backgroundColor: { value: '{colors.background.primary}' },
+        borderRadius: { value: '{radii.small}' },
+        borderColor: { value: '{colors.border.primary}' },
+        borderStyle: { value: 'solid' },
+        borderWidth: { value: '{borderWidths.small}' },
+        paddingBlock: { value: '{space.xs}' },
+        paddingInline: { value: '{space.small}' },
+        gap: { value: '{space.small}' },
+        alignItems: { value: 'baseline' },
+        name: {
+            fontSize: { value: '{fontSizes.medium}' },
+            fontWeight: { value: '{fontWeights.bold}' },
+            color: { value: '{colors.font.primary}' },
+        },
+        size: {
+            fontSize: { value: '{fontSizes.small}' },
+            fontWeight: { value: '{fontWeights.normal}' },
+            color: { value: '{colors.font.tertiary}' },
+        },
+        image: {
+            width: { value: '{space.xxl}' },
+            height: { value: '{space.xxl}' },
+            backgroundColor: { value: '{colors.background.secondary}' },
+            color: { value: '{colors.font.tertiary}' },
+            borderRadius: { value: '{radii.small}' },
+        },
+    },
+    filelist: {
+        flexDirection: { value: 'column' },
+        gap: { value: '{space.small}' },
+    },
+    loader: {
+        strokeLinecap: { value: 'round' },
+        strokeEmpty: { value: '{colors.border.secondary}' },
+        strokeFilled: { value: '{components.loader.strokeFilled}' },
+        strokeWidth: { value: '{borderWidths.large}' },
+    },
+    previewer: {
+        backgroundColor: { value: '{colors.background.primary}' },
+        borderColor: { value: '{colors.border.primary}' },
+        borderStyle: { value: 'solid' },
+        borderWidth: { value: '{borderWidths.small}' },
+        borderRadius: { value: '{radii.small}' },
+        paddingBlock: { value: '{space.zero}' },
+        paddingInline: { value: '{space.zero}' },
+        maxHeight: { value: '40rem' },
+        maxWidth: { value: 'auto' },
+        text: {
+            fontSize: { value: '{fontSizes.medium}' },
+            fontWeight: { value: '{fontWeights.bold}' },
+            color: { value: '{colors.font.primary}' },
+        },
+        body: {
+            paddingBlock: { value: '{space.medium}' },
+            paddingInline: { value: '{space.medium}' },
+            gap: { value: '{space.small}' },
+        },
+        footer: {
+            justifyContent: { value: 'flex-end' },
+        },
+    },
+};
+
+export { storagemanager };

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

@@ -1 +1,61 @@
-const e={_disabled:{opacity:{value:"{opacities.60.value}"}},_focused:{shadow:{value:{offsetX:"0px",offsetY:"0px",blurRadius:"0px",spreadRadius:"2px",color:"{colors.border.focus.value}"}}},fontSize:{value:"{fontSizes.medium.value}"},large:{fontSize:{value:"{fontSizes.large.value}"}},small:{fontSize:{value:"{fontSizes.small.value}"}},label:{padding:{value:"{space.xs.value}"}},thumb:{backgroundColor:{value:"{colors.background.primary.value}"},borderColor:{value:"transparent"},borderWidth:{value:"{borderWidths.small.value}"},borderStyle:{value:"solid"},borderRadius:{value:"{radii.xxxl.value}"},checked:{transform:{value:"{transforms.slideX.medium.value}"}},transition:{duration:{value:"{time.medium.value}"}},width:{value:"{space.relative.medium.value}"}},track:{backgroundColor:{value:"{colors.background.quaternary.value}"},borderRadius:{value:"{radii.xxxl.value}"},checked:{backgroundColor:{value:"{colors.brand.primary.80.value}"}},height:{value:"{space.relative.medium.value}"},padding:{value:"{outlineWidths.medium.value}"},transition:{duration:{value:"{time.short.value}"}},width:{value:"{space.relative.xl.value}"},_error:{backgroundColor:{value:"{colors.background.error.value}"}}}};export{e as switchfield};
+const switchfield = {
+    // States
+    _disabled: {
+        opacity: { value: '{opacities.60.value}' },
+    },
+    _focused: {
+        shadow: {
+            value: {
+                offsetX: '0px',
+                offsetY: '0px',
+                blurRadius: '0px',
+                spreadRadius: '2px',
+                color: '{colors.border.focus.value}',
+            },
+        },
+    },
+    // Sizes
+    fontSize: { value: '{fontSizes.medium.value}' },
+    large: {
+        fontSize: { value: '{fontSizes.large.value}' },
+    },
+    small: {
+        fontSize: { value: '{fontSizes.small.value}' },
+    },
+    // Child elements
+    label: {
+        padding: { value: '{space.xs.value}' },
+    },
+    thumb: {
+        backgroundColor: { value: '{colors.background.primary.value}' },
+        borderColor: { value: 'transparent' },
+        borderWidth: { value: '{borderWidths.small.value}' },
+        borderStyle: { value: 'solid' },
+        borderRadius: { value: '{radii.xxxl.value}' },
+        checked: {
+            transform: { value: '{transforms.slideX.medium.value}' },
+        },
+        transition: {
+            duration: { value: '{time.medium.value}' },
+        },
+        width: { value: '{space.relative.medium.value}' },
+    },
+    track: {
+        backgroundColor: { value: '{colors.background.quaternary.value}' },
+        borderRadius: { value: '{radii.xxxl.value}' },
+        checked: {
+            backgroundColor: { value: '{colors.primary.80.value}' },
+        },
+        height: { value: '{space.relative.medium.value}' },
+        padding: { value: '{outlineWidths.medium.value}' },
+        transition: {
+            duration: { value: '{time.short.value}' },
+        },
+        width: { value: '{space.relative.xl.value}' },
+        _error: {
+            backgroundColor: { value: '{colors.background.error.value}' },
+        },
+    },
+};
+
+export { switchfield };

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

@@ -1 +1,105 @@
-const e={borderCollapse:{value:"collapse"},display:{value:"table"},width:{value:"100%"},head:{display:{value:"table-header-group"},verticalAlign:{value:"middle"}},body:{display:{value:"table-row-group"},verticalAlign:{value:"middle"}},foot:{display:{value:"table-footer-group"},verticalAlign:{value:"middle"}},row:{display:{value:"table-row"},verticalAlign:{value:"middle"},hover:{backgroundColor:{value:"{colors.background.tertiary.value}"}},striped:{backgroundColor:{value:"{colors.background.secondary.value}"}}},header:{borderColor:{value:"{colors.border.tertiary.value}"},borderStyle:{value:"solid"},borderWidth:{value:"{borderWidths.small.value}"},color:{value:"{colors.font.primary.value}"},display:{value:"table-cell"},fontSize:{value:"{fontSizes.medium.value}"},fontWeight:{value:"{fontWeights.bold.value}"},padding:{value:"{space.medium.value}"},verticalAlign:{value:"middle"},large:{fontSize:{value:"{fontSizes.large.value}"},padding:{value:"{space.large.value}"}},small:{fontSize:{value:"{fontSizes.small.value}"},padding:{value:"{space.xs.value}"}}},data:{borderColor:{value:"{colors.border.tertiary.value}"},borderStyle:{value:"solid"},borderWidth:{value:"{borderWidths.small.value}"},color:{value:"{colors.font.primary.value}"},display:{value:"table-cell"},fontSize:{value:"{fontSizes.medium.value}"},fontWeight:{value:"{fontWeights.normal.value}"},padding:{value:"{space.medium.value}"},verticalAlign:{value:"middle"},large:{fontSize:{value:"{fontSizes.large.value}"},padding:{value:"{space.large.value}"}},small:{fontSize:{value:"{fontSizes.small.value}"},padding:{value:"{space.xs.value}"}}},caption:{captionSide:{value:"bottom"},color:{value:"{colors.font.primary.value}"},display:{value:"table-caption"},fontSize:{value:"{fontSizes.medium.value}"},textAlign:{value:"center"},wordBreak:{value:"break-all"},large:{fontSize:{value:"{fontSizes.large.value}"}},small:{fontSize:{value:"{fontSizes.small.value}"}}}};export{e as table};
+const table = {
+    /**
+     * Default table styles
+     */
+    borderCollapse: { value: 'collapse' },
+    display: { value: 'table' },
+    width: { value: '100%' },
+    /**
+     * Default table head styles
+     */
+    head: {
+        display: { value: 'table-header-group' },
+        verticalAlign: { value: 'middle' },
+    },
+    /**
+     * Default table body styles
+     */
+    body: {
+        display: { value: 'table-row-group' },
+        verticalAlign: { value: 'middle' },
+    },
+    /**
+     * Default table foot styles
+     */
+    foot: {
+        display: { value: 'table-footer-group' },
+        verticalAlign: { value: 'middle' },
+    },
+    /**
+     * Default table row styles
+     */
+    row: {
+        display: { value: 'table-row' },
+        verticalAlign: { value: 'middle' },
+        hover: {
+            backgroundColor: { value: '{colors.background.tertiary.value}' },
+        },
+        striped: {
+            backgroundColor: { value: '{colors.background.secondary.value}' },
+        },
+    },
+    /**
+     * Default table header cell styles
+     */
+    header: {
+        borderColor: { value: '{colors.border.tertiary.value}' },
+        borderStyle: { value: 'solid' },
+        borderWidth: { value: '{borderWidths.small.value}' },
+        color: { value: '{colors.font.primary.value}' },
+        display: { value: 'table-cell' },
+        fontSize: { value: '{fontSizes.medium.value}' },
+        fontWeight: { value: '{fontWeights.bold.value}' },
+        padding: { value: '{space.medium.value}' },
+        verticalAlign: { value: 'middle' },
+        large: {
+            fontSize: { value: '{fontSizes.large.value}' },
+            padding: { value: '{space.large.value}' },
+        },
+        small: {
+            fontSize: { value: '{fontSizes.small.value}' },
+            padding: { value: '{space.xs.value}' },
+        },
+    },
+    /**
+     * Default table data cell styles
+     */
+    data: {
+        borderColor: { value: '{colors.border.tertiary.value}' },
+        borderStyle: { value: 'solid' },
+        borderWidth: { value: '{borderWidths.small.value}' },
+        color: { value: '{colors.font.primary.value}' },
+        display: { value: 'table-cell' },
+        fontSize: { value: '{fontSizes.medium.value}' },
+        fontWeight: { value: '{fontWeights.normal.value}' },
+        padding: { value: '{space.medium.value}' },
+        verticalAlign: { value: 'middle' },
+        large: {
+            fontSize: { value: '{fontSizes.large.value}' },
+            padding: { value: '{space.large.value}' },
+        },
+        small: {
+            fontSize: { value: '{fontSizes.small.value}' },
+            padding: { value: '{space.xs.value}' },
+        },
+    },
+    /**
+     * Default table caption styles
+     */
+    caption: {
+        captionSide: { value: 'bottom' },
+        color: { value: '{colors.font.primary.value}' },
+        display: { value: 'table-caption' },
+        fontSize: { value: '{fontSizes.medium.value}' },
+        textAlign: { value: 'center' },
+        wordBreak: { value: 'break-all' },
+        large: {
+            fontSize: { value: '{fontSizes.large.value}' },
+        },
+        small: {
+            fontSize: { value: '{fontSizes.small.value}' },
+        },
+    },
+};
+
+export { table };

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

@@ -1 +1,59 @@
-const e={backgroundColor:{value:"transparent"},borderColor:{value:"{colors.border.secondary.value}"},borderStyle:{value:"solid"},borderWidth:{value:"{borderWidths.medium.value}"},gap:{value:"0"},item:{backgroundColor:{value:"transparent"},borderColor:{value:"{colors.border.secondary.value}"},borderStyle:{value:"solid"},borderWidth:{value:"{borderWidths.medium.value}"},color:{value:"{colors.font.secondary.value}"},fontSize:{value:"{fontSizes.medium.value}"},fontWeight:{value:"{fontWeights.bold.value}"},paddingVertical:{value:"{space.small.value}"},paddingHorizontal:{value:"{space.medium.value}"},textAlign:{value:"center"},transitionDuration:{value:"{time.medium.value}"},_hover:{color:{value:"{colors.font.hover.value}"}},_focus:{color:{value:"{colors.font.focus.value}"}},_active:{color:{value:"{colors.font.interactive.value}"},borderColor:{value:"{colors.font.interactive.value}"},backgroundColor:{value:"transparent"}},_disabled:{color:{value:"{colors.font.disabled.value}"},backgroundColor:{value:"transparent"},borderColor:{value:"{colors.border.tertiary.value}"}}}};export{e as tabs};
+const tabs = {
+    backgroundColor: { value: 'transparent' },
+    borderColor: { value: '{colors.border.secondary.value}' },
+    borderStyle: { value: 'solid' },
+    borderWidth: { value: '{borderWidths.medium.value}' },
+    gap: { value: '0' },
+    item: {
+        backgroundColor: { value: 'transparent' },
+        borderColor: { value: '{colors.border.secondary.value}' },
+        borderStyle: { value: 'solid' },
+        borderWidth: { value: '{borderWidths.medium.value}' },
+        color: { value: '{colors.font.secondary.value}' },
+        fontSize: { value: '{fontSizes.medium.value}' },
+        fontWeight: { value: '{fontWeights.bold.value}' },
+        paddingVertical: { value: '{space.small.value}' },
+        paddingHorizontal: { value: '{space.medium.value}' },
+        textAlign: { value: 'center' },
+        transitionDuration: { value: '{time.medium.value}' },
+        _hover: {
+            backgroundColor: { value: 'transparent' },
+            borderColor: { value: '{colors.border.focus.value}' },
+            boxShadow: { value: 'none' },
+            color: { value: '{colors.font.hover.value}' },
+        },
+        _focus: {
+            backgroundColor: { value: 'transparent' },
+            borderColor: { value: '{colors.border.focus.value}' },
+            boxShadow: {
+                value: {
+                    offsetX: '0px',
+                    offsetY: '0px',
+                    blurRadius: '0px',
+                    spreadRadius: '{borderWidths.medium}',
+                    color: '{colors.border.focus.value}',
+                },
+            },
+            color: { value: '{colors.font.focus.value}' },
+        },
+        _active: {
+            backgroundColor: { value: 'transparent' },
+            borderColor: { value: '{colors.font.interactive.value}' },
+            boxShadow: { value: 'none' },
+            color: { value: '{colors.font.interactive.value}' },
+        },
+        _disabled: {
+            backgroundColor: { value: 'transparent' },
+            borderColor: { value: '{colors.border.tertiary.value}' },
+            boxShadow: { value: 'none' },
+            color: { value: '{colors.font.disabled.value}' },
+        },
+    },
+    panel: {
+        backgroundColor: { value: 'transparent' },
+        paddingInline: { value: '0' },
+        paddingBlock: { value: '{space.small.value}' },
+    },
+};
+
+export { tabs };

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

@@ -1 +1,28 @@
-const o={color:{value:"{colors.font.primary.value}"},primary:{color:{value:"{colors.font.primary.value}"}},secondary:{color:{value:"{colors.font.secondary.value}"}},tertiary:{color:{value:"{colors.font.tertiary.value}"}},error:{color:{value:"{colors.font.error.value}"}},warning:{color:{value:"{colors.font.warning.value}"}},success:{color:{value:"{colors.font.success.value}"}},info:{color:{value:"{colors.font.info.value}"}}};export{o as text};
+const text = {
+    // default styles
+    color: { value: '{colors.font.primary.value}' },
+    // variations
+    primary: {
+        color: { value: '{colors.font.primary.value}' },
+    },
+    secondary: {
+        color: { value: '{colors.font.secondary.value}' },
+    },
+    tertiary: {
+        color: { value: '{colors.font.tertiary.value}' },
+    },
+    error: {
+        color: { value: '{colors.font.error.value}' },
+    },
+    warning: {
+        color: { value: '{colors.font.warning.value}' },
+    },
+    success: {
+        color: { value: '{colors.font.success.value}' },
+    },
+    info: {
+        color: { value: '{colors.font.info.value}' },
+    },
+};
+
+export { text };

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

@@ -1 +1,11 @@
-const o={color:{value:"{components.fieldcontrol.color.value}"},borderColor:{value:"{components.fieldcontrol.borderColor.value}"},_focus:{borderColor:{value:"{components.fieldcontrol._focus.borderColor.value}"}}};export{o as textareafield};
+const textareafield = {
+    color: { value: '{components.fieldcontrol.color.value}' },
+    borderColor: { value: '{components.fieldcontrol.borderColor.value}' },
+    _focus: {
+        borderColor: {
+            value: '{components.fieldcontrol._focus.borderColor.value}',
+        },
+    },
+};
+
+export { textareafield };

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

@@ -1 +1,12 @@
-const o={color:{value:"{components.fieldcontrol.color.value}"},borderColor:{value:"{components.fieldcontrol.borderColor.value}"},fontSize:{value:"{components.fieldcontrol.fontSize.value}"},_focus:{borderColor:{value:"{components.fieldcontrol._focus.borderColor.value}"}}};export{o as textfield};
+const textfield = {
+    color: { value: '{components.fieldcontrol.color.value}' },
+    borderColor: { value: '{components.fieldcontrol.borderColor.value}' },
+    fontSize: { value: '{components.fieldcontrol.fontSize.value}' },
+    _focus: {
+        borderColor: {
+            value: '{components.fieldcontrol._focus.borderColor.value}',
+        },
+    },
+};
+
+export { textfield };