@aws-amplify/ui 5.8.0 → 6.0.0

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

@@ -1 +1,39 @@
-const e={maxWidth:{value:"60rem"},modal:{width:{value:"{space.relative.full}"},height:{value:"{space.relative.full}"},backgroundColor:{value:"{colors.overlay.50.value}"},top:{value:"{space.zero}"},left:{value:"{space.zero}"}},container:{widthMax:{value:"30rem"}},router:{borderWidth:{value:"{borderWidths.small.value}"},borderStyle:{value:"solid"},borderColor:{value:"{colors.border.primary.value}"},backgroundColor:{value:"{colors.background.primary.value}"},boxShadow:{value:"{shadows.medium.value}"}},footer:{paddingBottom:{value:"{space.medium.value}"}},form:{padding:{value:"{space.xl.value}"}},state:{inactive:{backgroundColor:{value:"{colors.background.secondary.value}"}}},orContainer:{color:{value:"{colors.neutral.80.value}"},orLine:{backgroundColor:{value:"{colors.background.primary.value}"}}}};export{e as authenticator};
+const authenticator = {
+    maxWidth: { value: '60rem' },
+    modal: {
+        width: { value: '{space.relative.full}' },
+        height: { value: '{space.relative.full}' },
+        backgroundColor: { value: '{colors.overlay.50.value}' },
+        top: { value: '{space.zero}' },
+        left: { value: '{space.zero}' },
+    },
+    container: {
+        widthMax: { value: '30rem' },
+    },
+    router: {
+        borderWidth: { value: '{borderWidths.small.value}' },
+        borderStyle: { value: 'solid' },
+        borderColor: { value: '{colors.border.primary.value}' },
+        backgroundColor: { value: '{colors.background.primary.value}' },
+        boxShadow: { value: '{shadows.medium.value}' },
+    },
+    footer: {
+        paddingBottom: { value: '{space.medium.value}' },
+    },
+    form: {
+        padding: { value: '{space.xl.value}' },
+    },
+    state: {
+        inactive: {
+            backgroundColor: { value: '{colors.background.secondary.value}' },
+        },
+    },
+    orContainer: {
+        color: { value: '{colors.neutral.80.value}' },
+        orLine: {
+            backgroundColor: { value: '{colors.background.primary.value}' },
+        },
+    },
+};
+
+export { authenticator };

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

@@ -1 +1,42 @@
-const a={menu:{width:{value:"100%"},marginBlockStart:{value:"{space.xxxs}"},backgroundColor:{value:"{colors.background.primary}"},borderColor:{value:"{colors.border.primary}"},borderWidth:{value:"{borderWidths.small}"},borderStyle:{value:"solid"},borderRadius:{value:"{radii.small}"},options:{display:{value:"flex"},flexDirection:{value:"column"},maxHeight:{value:"300px"}},option:{backgroundColor:{value:"{colors.background.primary}"},color:{value:"currentcolor"},cursor:{value:"pointer"},transitionDuration:{value:"{time.short}"},transitionProperty:{value:"background-color, color"},transitionTimingFunction:{value:"ease"},_active:{backgroundColor:{value:"{colors.brand.primary.80}"},color:{value:"{colors.white}"}}},_empty:{display:{value:"flex"}},_loading:{alignItems:{value:"center"},display:{value:"flex"},gap:{value:"{space.xxxs}"}},spaceShared:{paddingBlock:{value:"{space.xs}"},paddingInline:{value:"{space.small}"}}}};export{a as autocomplete};
+const autocomplete = {
+    menu: {
+        width: { value: '100%' },
+        marginBlockStart: { value: '{space.xxxs}' },
+        backgroundColor: { value: '{colors.background.primary}' },
+        borderColor: { value: '{colors.border.primary}' },
+        borderWidth: { value: '{borderWidths.small}' },
+        borderStyle: { value: 'solid' },
+        borderRadius: { value: '{radii.small}' },
+        options: {
+            display: { value: 'flex' },
+            flexDirection: { value: 'column' },
+            maxHeight: { value: '300px' },
+        },
+        option: {
+            backgroundColor: { value: '{colors.background.primary}' },
+            color: { value: 'currentcolor' },
+            cursor: { value: 'pointer' },
+            transitionDuration: { value: '{time.short}' },
+            transitionProperty: { value: 'background-color, color' },
+            transitionTimingFunction: { value: 'ease' },
+            _active: {
+                backgroundColor: { value: '{colors.primary.80}' },
+                color: { value: '{colors.white}' },
+            },
+        },
+        _empty: {
+            display: { value: 'flex' },
+        },
+        _loading: {
+            alignItems: { value: 'center' },
+            display: { value: 'flex' },
+            gap: { value: '{space.xxxs}' },
+        },
+        spaceShared: {
+            paddingBlock: { value: '{space.xs}' },
+            paddingInline: { value: '{space.small}' },
+        },
+    },
+};
+
+export { autocomplete };

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

@@ -1 +1,44 @@
-const a={color:{value:"{colors.font.primary.value}"},lineHeight:{value:1},fontWeight:{value:"{fontWeights.semibold.value}"},fontSize:{value:"{fontSizes.small.value}"},textAlign:{value:"center"},paddingVertical:{value:"{space.xs.value}"},paddingHorizontal:{value:"{space.small.value}"},backgroundColor:{value:"{colors.background.tertiary.value}"},borderRadius:{value:"{radii.xl.value}"},info:{color:{value:"{colors.font.info.value}"},backgroundColor:{value:"{colors.background.info.value}"}},warning:{color:{value:"{colors.font.warning.value}"},backgroundColor:{value:"{colors.background.warning.value}"}},success:{color:{value:"{colors.font.success.value}"},backgroundColor:{value:"{colors.background.success.value}"}},error:{color:{value:"{colors.font.error.value}"},backgroundColor:{value:"{colors.background.error.value}"}},small:{fontSize:{value:"{fontSizes.xs.value}"},paddingVertical:{value:"{space.xxs.value}"},paddingHorizontal:{value:"{space.xs.value}"}},large:{fontSize:{value:"{fontSizes.medium.value}"},paddingVertical:{value:"{space.small.value}"},paddingHorizontal:{value:"{space.medium.value}"}}};export{a as badge};
+const badge = {
+    // Default styles
+    color: { value: '{colors.font.primary.value}' },
+    lineHeight: { value: 1 },
+    fontWeight: { value: '{fontWeights.semibold.value}' },
+    fontSize: { value: '{fontSizes.small.value}' },
+    textAlign: { value: 'center' },
+    paddingVertical: { value: '{space.xs.value}' },
+    paddingHorizontal: { value: '{space.small.value}' },
+    backgroundColor: { value: '{colors.background.tertiary.value}' },
+    // An arbitrarily large value to ensure that the left and right sides of the badge are perfectly rounded for any size variation
+    borderRadius: { value: '{radii.xl.value}' },
+    // Variations
+    info: {
+        color: { value: '{colors.font.info.value}' },
+        backgroundColor: { value: '{colors.background.info.value}' },
+    },
+    warning: {
+        color: { value: '{colors.font.warning.value}' },
+        backgroundColor: { value: '{colors.background.warning.value}' },
+    },
+    success: {
+        color: { value: '{colors.font.success.value}' },
+        backgroundColor: { value: '{colors.background.success.value}' },
+    },
+    error: {
+        color: { value: '{colors.font.error.value}' },
+        backgroundColor: { value: '{colors.background.error.value}' },
+    },
+    // Sizes
+    small: {
+        fontSize: { value: '{fontSizes.xs.value}' },
+        paddingVertical: { value: '{space.xxs.value}' },
+        paddingHorizontal: { value: '{space.xs.value}' },
+    },
+    // medium is the default size
+    large: {
+        fontSize: { value: '{fontSizes.medium.value}' },
+        paddingVertical: { value: '{space.small.value}' },
+        paddingHorizontal: { value: '{space.medium.value}' },
+    },
+};
+
+export { badge };

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

@@ -1 +1,34 @@
-const e={flexDirection:{value:"row"},flexWrap:{value:"wrap"},gap:{value:"0"},color:{value:"{colors.font.tertiary}"},item:{flexDirection:{value:"row"},color:{value:"inherit"},fontSize:{value:"inherit"},alignItems:{value:"center"},lineHeight:{value:"1"}},separator:{color:{value:"inherit"},fontSize:{value:"inherit"},paddingInline:{value:"{space.xxs}"}},link:{color:{value:"{components.link.color}"},fontSize:{value:"inherit"},fontWeight:{value:"normal"},textDecoration:{value:"none"},paddingInline:{value:"{space.xs}"},paddingBlock:{value:"{space.xxs}"},current:{color:{value:"inherit"},fontSize:{value:"inherit"},fontWeight:{value:"normal"},textDecoration:{value:"none"}}}};export{e as breadcrumbs};
+const breadcrumbs = {
+    flexDirection: { value: 'row' },
+    flexWrap: { value: 'wrap' },
+    gap: { value: '0' },
+    color: { value: '{colors.font.tertiary}' },
+    item: {
+        flexDirection: { value: 'row' },
+        color: { value: 'inherit' },
+        fontSize: { value: 'inherit' },
+        alignItems: { value: 'center' },
+        lineHeight: { value: '1' },
+    },
+    separator: {
+        color: { value: 'inherit' },
+        fontSize: { value: 'inherit' },
+        paddingInline: { value: '{space.xxs}' },
+    },
+    link: {
+        color: { value: '{components.link.color}' },
+        fontSize: { value: 'inherit' },
+        fontWeight: { value: 'normal' },
+        textDecoration: { value: 'none' },
+        paddingInline: { value: '{space.xs}' },
+        paddingBlock: { value: '{space.xxs}' },
+        current: {
+            color: { value: 'inherit' },
+            fontSize: { value: 'inherit' },
+            fontWeight: { value: 'normal' },
+            textDecoration: { value: 'none' },
+        },
+    },
+};
+
+export { breadcrumbs };