@aws-amplify/ui 5.8.1 → 6.0.0

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

@@ -1 +1,111 @@
-import{alert as m}from"./alert.mjs";import{autocomplete as o}from"./autocomplete.mjs";import{authenticator as r}from"./authenticator.mjs";import{badge as e}from"./badge.mjs";import{breadcrumbs as i}from"./breadcrumbs.mjs";import{button as t}from"./button.mjs";import{card as s}from"./card.mjs";import{checkbox as p}from"./checkbox.mjs";import{checkboxfield as f}from"./checkboxField.mjs";import{collection as l}from"./collection.mjs";import{copy as a}from"./copy.mjs";import{dialcodeselect as d}from"./dialCodeSelect.mjs";import{divider as j}from"./divider.mjs";import{dropzone as n}from"./dropZone.mjs";import{expander as c}from"./expander.mjs";import{field as g}from"./field.mjs";import{fieldcontrol as u}from"./fieldControl.mjs";import{fieldgroup as h}from"./fieldGroup.mjs";import{fieldset as b}from"./fieldset.mjs";import{fieldmessages as x}from"./fieldMessages.mjs";import{fileuploader as F}from"./fileUploader.mjs";import{flex as k}from"./flex.mjs";import{heading as v}from"./heading.mjs";import{highlightmatch as w}from"./highlightMatch.mjs";import{icon as y}from"./icon.mjs";import{input as G}from"./input.mjs";import{image as M}from"./image.mjs";import{inappmessaging as A}from"./inAppMessaging.mjs";import{link as B}from"./link.mjs";import{liveness as C}from"./liveness.mjs";import{loader as z}from"./loader.mjs";import{menu as N}from"./menu.mjs";import{message as S}from"./message.mjs";import{pagination as U}from"./pagination.mjs";import{passwordfield as Z}from"./passwordField.mjs";import{phonenumberfield as q}from"./phoneNumberField.mjs";import{placeholder as D}from"./placeholder.mjs";import{radio as E}from"./radio.mjs";import{radiogroup as H}from"./radioGroup.mjs";import{rating as I}from"./rating.mjs";import{searchfield as J}from"./searchField.mjs";import{select as K}from"./select.mjs";import{selectfield as L}from"./selectField.mjs";import{sliderfield as O}from"./sliderField.mjs";import{stepperfield as P}from"./stepperField.mjs";import{storagemanager as Q}from"./storagemanager.mjs";import{switchfield as R}from"./switchField.mjs";import{table as T}from"./table.mjs";import{tabs as V}from"./tabs.mjs";import{text as W}from"./text.mjs";import{textareafield as X}from"./textAreaField.mjs";import{textfield as Y}from"./textField.mjs";import{togglebutton as $}from"./toggleButton.mjs";import{togglebuttongroup as _}from"./toggleButtonGroup.mjs";const mm={alert:m,authenticator:r,autocomplete:o,badge:e,breadcrumbs:i,button:t,card:s,checkbox:p,checkboxfield:f,collection:l,copy:a,countrycodeselect:d,divider:j,dropzone:n,expander:c,field:g,fieldcontrol:u,fieldgroup:h,fieldmessages:x,fieldset:b,fileuploader:F,flex:k,heading:v,icon:y,highlightmatch:w,image:M,inappmessaging:A,input:G,link:B,liveness:C,loader:z,menu:N,message:S,pagination:U,passwordfield:Z,phonenumberfield:q,placeholder:D,radio:E,radiogroup:H,rating:I,searchfield:J,select:K,selectfield:L,sliderfield:O,stepperfield:P,storagemanager:Q,switchfield:R,table:T,tabs:V,text:W,textareafield:X,textfield:Y,togglebutton:$,togglebuttongroup:_};export{mm as components};
+import { alert } from './alert.mjs';
+import { autocomplete } from './autocomplete.mjs';
+import { authenticator } from './authenticator.mjs';
+import { badge } from './badge.mjs';
+import { breadcrumbs } from './breadcrumbs.mjs';
+import { button } from './button.mjs';
+import { card } from './card.mjs';
+import { checkbox } from './checkbox.mjs';
+import { checkboxfield } from './checkboxField.mjs';
+import { collection } from './collection.mjs';
+import { copy } from './copy.mjs';
+import { dialcodeselect } from './dialCodeSelect.mjs';
+import { divider } from './divider.mjs';
+import { dropzone } from './dropZone.mjs';
+import { accordion } from './accordion.mjs';
+import { field } from './field.mjs';
+import { fieldcontrol } from './fieldControl.mjs';
+import { fieldgroup } from './fieldGroup.mjs';
+import { fieldset } from './fieldset.mjs';
+import { fieldmessages } from './fieldMessages.mjs';
+import { flex } from './flex.mjs';
+import { heading } from './heading.mjs';
+import { highlightmatch } from './highlightMatch.mjs';
+import { icon } from './icon.mjs';
+import { input } from './input.mjs';
+import { image } from './image.mjs';
+import { inappmessaging } from './inAppMessaging.mjs';
+import { link } from './link.mjs';
+import { liveness } from './liveness.mjs';
+import { loader } from './loader.mjs';
+import { menu } from './menu.mjs';
+import { message } from './message.mjs';
+import { pagination } from './pagination.mjs';
+import { passwordfield } from './passwordField.mjs';
+import { phonenumberfield } from './phoneNumberField.mjs';
+import { placeholder } from './placeholder.mjs';
+import { radio } from './radio.mjs';
+import { radiogroup } from './radioGroup.mjs';
+import { rating } from './rating.mjs';
+import { searchfield } from './searchField.mjs';
+import { select } from './select.mjs';
+import { selectfield } from './selectField.mjs';
+import { sliderfield } from './sliderField.mjs';
+import { stepperfield } from './stepperField.mjs';
+import { storagemanager } from './storagemanager.mjs';
+import { switchfield } from './switchField.mjs';
+import { table } from './table.mjs';
+import { tabs } from './tabs.mjs';
+import { text } from './text.mjs';
+import { textareafield } from './textAreaField.mjs';
+import { textfield } from './textField.mjs';
+import { togglebutton } from './toggleButton.mjs';
+import { togglebuttongroup } from './toggleButtonGroup.mjs';
+
+const components = {
+    accordion,
+    alert,
+    authenticator,
+    autocomplete,
+    badge,
+    breadcrumbs,
+    button,
+    card,
+    checkbox,
+    checkboxfield,
+    collection,
+    copy,
+    countrycodeselect: dialcodeselect,
+    divider,
+    dropzone,
+    field,
+    fieldcontrol,
+    fieldgroup,
+    fieldmessages,
+    fieldset,
+    flex,
+    heading,
+    icon,
+    highlightmatch,
+    image,
+    inappmessaging,
+    input,
+    link,
+    liveness,
+    loader,
+    menu,
+    message,
+    pagination,
+    passwordfield,
+    phonenumberfield,
+    placeholder,
+    radio,
+    radiogroup,
+    rating,
+    searchfield,
+    select,
+    selectfield,
+    sliderfield,
+    stepperfield,
+    storagemanager,
+    switchfield,
+    table,
+    tabs,
+    text,
+    textareafield,
+    textfield,
+    togglebutton,
+    togglebuttongroup,
+};
+
+export { components };

package/dist/esm/theme/tokens/components/input.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 input};
+const input = {
+    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 { input };

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

@@ -1 +1,9 @@
-const o={active:{color:{value:"{colors.font.active.value}"}},color:{value:"{colors.font.interactive.value}"},focus:{color:{value:"{colors.font.focus.value}"}},hover:{color:{value:"{colors.font.hover.value}"}},visited:{color:{value:"{colors.font.interactive.value}"}}};export{o as link};
+const link = {
+    active: { color: { value: '{colors.font.active.value}' } },
+    color: { value: '{colors.font.interactive.value}' },
+    focus: { color: { value: '{colors.font.focus.value}' } },
+    hover: { color: { value: '{colors.font.hover.value}' } },
+    visited: { color: { value: '{colors.font.interactive.value}' } },
+};
+
+export { link };

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

@@ -1 +1,7 @@
-const o={cameraModule:{backgroundColor:{value:"{colors.black}"}}};export{o as liveness};
+const liveness = {
+    cameraModule: {
+        backgroundColor: { value: '{colors.black}' },
+    },
+};
+
+export { liveness };

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

@@ -1 +1,42 @@
-const e={width:{value:"{fontSizes.medium.value}"},height:{value:"{fontSizes.medium.value}"},fontSize:{value:"{fontSizes.xs.value}"},strokeEmpty:{value:"{colors.neutral.20.value}"},strokeFilled:{value:"{colors.brand.primary.80.value}"},strokeLinecap:{value:"round"},animationDuration:{value:"1s"},small:{width:{value:"{fontSizes.small.value}"},height:{value:"{fontSizes.small.value}"},fontSize:{value:"{fontSizes.xxs.value}"}},large:{width:{value:"{fontSizes.large.value}"},height:{value:"{fontSizes.large.value}"},fontSize:{value:"{fontSizes.small.value}"}},linear:{width:{value:"100%"},minWidth:{value:"5rem"},fontSize:{value:"{fontSizes.xxs.value}"},strokeWidth:{value:"{fontSizes.xxs.value}"},strokeFilled:{value:"{colors.brand.primary.80.value}"},strokeEmpty:{value:"{colors.neutral.20.value}"},strokeLinecap:{value:"round"},animationDuration:{value:"1s"},small:{strokeWidth:{value:"{fontSizes.xxxs.value}"},fontSize:{value:"{fontSizes.xxxs.value}"}},large:{strokeWidth:{value:"{fontSizes.xs.value}"},fontSize:{value:"{fontSizes.xs.value}"}}},text:{fill:{value:"{colors.font.primary.value}"}}};export{e as loader};
+const loader = {
+    width: { value: '{fontSizes.medium.value}' },
+    height: { value: '{fontSizes.medium.value}' },
+    fontSize: { value: '{fontSizes.xs.value}' },
+    strokeEmpty: { value: '{colors.neutral.20.value}' },
+    strokeFilled: { value: '{colors.primary.80.value}' },
+    strokeLinecap: { value: 'round' },
+    animationDuration: { value: '1s' },
+    small: {
+        width: { value: '{fontSizes.small.value}' },
+        height: { value: '{fontSizes.small.value}' },
+        fontSize: { value: '{fontSizes.xxs.value}' },
+    },
+    large: {
+        width: { value: '{fontSizes.large.value}' },
+        height: { value: '{fontSizes.large.value}' },
+        fontSize: { value: '{fontSizes.small.value}' },
+    },
+    linear: {
+        width: { value: '100%' },
+        minWidth: { value: '5rem' },
+        fontSize: { value: '{fontSizes.xxs.value}' },
+        strokeWidth: { value: '{fontSizes.xxs.value}' },
+        strokeFilled: { value: '{colors.primary.80.value}' },
+        strokeEmpty: { value: '{colors.neutral.20.value}' },
+        strokeLinecap: { value: 'round' },
+        animationDuration: { value: '1s' },
+        small: {
+            strokeWidth: { value: '{fontSizes.xxxs.value}' },
+            fontSize: { value: '{fontSizes.xxxs.value}' },
+        },
+        large: {
+            strokeWidth: { value: '{fontSizes.xs.value}' },
+            fontSize: { value: '{fontSizes.xs.value}' },
+        },
+    },
+    text: {
+        fill: { value: '{colors.font.primary.value}' },
+    },
+};
+
+export { loader };

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

@@ -1 +1,27 @@
-const e={backgroundColor:{value:"{colors.background.primary.value}"},borderRadius:{value:"{radii.medium.value}"},borderWidth:{value:"{borderWidths.small.value}"},borderStyle:{value:"solid"},borderColor:{value:"{colors.border.primary.value}"},boxShadow:{value:"{shadows.large.value}"},flexDirection:{value:"column"},gap:{value:"{space.zero.value}"},maxWidth:{value:"30rem"},minWidth:{value:"14rem"},small:{width:{value:"{fontSizes.medium.value}"},height:{value:"{fontSizes.medium.value}"}},large:{width:{value:"{fontSizes.xxxl.value}"},height:{value:"{fontSizes.xxxl.value}"}},item:{minHeight:{value:"2.5rem"},paddingInlineStart:{value:"{space.medium.value}"},paddingInlineEnd:{value:"{space.medium.value}"}}};export{e as menu};
+const menu = {
+    backgroundColor: { value: '{colors.background.primary.value}' },
+    borderRadius: { value: '{radii.medium.value}' },
+    borderWidth: { value: '{borderWidths.small.value}' },
+    borderStyle: { value: 'solid' },
+    borderColor: { value: '{colors.border.primary.value}' },
+    boxShadow: { value: '{shadows.large.value}' },
+    flexDirection: { value: 'column' },
+    gap: { value: '{space.zero.value}' },
+    maxWidth: { value: '30rem' },
+    minWidth: { value: '14rem' },
+    small: {
+        width: { value: '{fontSizes.medium.value}' },
+        height: { value: '{fontSizes.medium.value}' },
+    },
+    large: {
+        width: { value: '{fontSizes.xxxl.value}' },
+        height: { value: '{fontSizes.xxxl.value}' },
+    },
+    item: {
+        minHeight: { value: '2.5rem' },
+        paddingInlineStart: { value: '{space.medium.value}' },
+        paddingInlineEnd: { value: '{space.medium.value}' },
+    },
+};
+
+export { menu };

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

@@ -1 +1,102 @@
-const o={alignItems:{value:"center"},backgroundColor:{value:"{colors.background.tertiary.value}"},borderColor:{value:"transparent"},borderStyle:{value:"solid"},borderWidth:{value:"{borderWidths.small.value}"},borderRadius:{value:"{radii.xs.value}"},color:{value:"{colors.font.primary.value}"},justifyContent:{value:"flex-start"},paddingBlock:{value:"{space.small.value}"},paddingInline:{value:"{space.medium.value}"},lineHeight:{value:"{lineHeights.small.value}"},icon:{size:{value:"{fontSizes.xl.value}"}},heading:{fontSize:{value:"{fontSizes.medium.value}"},fontWeight:{value:"{fontWeights.bold.value}"}},dismiss:{gap:{value:"{space.xxs.value}"}},plain:{color:{value:"{colors.font.primary.value}"},backgroundColor:{value:"{colors.background.primary.value}"},borderColor:{value:"transparent"},info:{color:{value:"{colors.font.info.value}"},backgroundColor:{value:"{colors.background.primary.value}"},borderColor:{value:"transparent"}},error:{color:{value:"{colors.font.error.value}"},backgroundColor:{value:"{colors.background.primary.value}"},borderColor:{value:"transparent"}},success:{color:{value:"{colors.font.success.value}"},backgroundColor:{value:"{colors.background.primary.value}"},borderColor:{value:"transparent"}},warning:{color:{value:"{colors.font.warning.value}"},backgroundColor:{value:"{colors.background.primary.value}"},borderColor:{value:"transparent"}}},outlined:{color:{value:"{colors.font.primary.value}"},backgroundColor:{value:"{colors.background.primary.value}"},borderColor:{value:"{colors.border.primary.value}"},info:{color:{value:"{colors.font.info.value}"},backgroundColor:{value:"{colors.background.primary.value}"},borderColor:{value:"{colors.border.info.value}"}},error:{color:{value:"{colors.font.error.value}"},backgroundColor:{value:"{colors.background.primary.value}"},borderColor:{value:"{colors.border.error.value}"}},success:{color:{value:"{colors.font.success.value}"},backgroundColor:{value:"{colors.background.primary.value}"},borderColor:{value:"{colors.border.success.value}"}},warning:{color:{value:"{colors.font.warning.value}"},backgroundColor:{value:"{colors.background.primary.value}"},borderColor:{value:"{colors.border.warning.value}"}}},filled:{color:{value:"{colors.font.primary.value}"},backgroundColor:{value:"{colors.background.secondary.value}"},borderColor:{value:"transparent"},info:{color:{value:"{colors.font.info.value}"},backgroundColor:{value:"{colors.background.info.value}"},borderColor:{value:"transparent"}},error:{color:{value:"{colors.font.error.value}"},backgroundColor:{value:"{colors.background.error.value}"},borderColor:{value:"transparent"}},success:{color:{value:"{colors.font.success.value}"},backgroundColor:{value:"{colors.background.success.value}"},borderColor:{value:"transparent"}},warning:{color:{value:"{colors.font.warning.value}"},backgroundColor:{value:"{colors.background.warning.value}"},borderColor:{value:"transparent"}}}};export{o as message};
+const message = {
+    // Default styles
+    alignItems: { value: 'center' },
+    backgroundColor: { value: '{colors.background.tertiary.value}' },
+    borderColor: { value: 'transparent' },
+    borderStyle: { value: 'solid' },
+    borderWidth: { value: '{borderWidths.small.value}' },
+    borderRadius: { value: '{radii.xs.value}' },
+    color: { value: '{colors.font.primary.value}' },
+    justifyContent: { value: 'flex-start' },
+    paddingBlock: { value: '{space.small.value}' },
+    paddingInline: { value: '{space.medium.value}' },
+    lineHeight: { value: '{lineHeights.small.value}' },
+    icon: {
+        size: { value: '{fontSizes.xl.value}' },
+    },
+    heading: {
+        fontSize: { value: '{fontSizes.medium.value}' },
+        fontWeight: { value: '{fontWeights.bold.value}' },
+    },
+    dismiss: {
+        gap: { value: '{space.xxs.value}' },
+    },
+    // Variations
+    plain: {
+        color: { value: '{colors.font.primary.value}' },
+        backgroundColor: { value: '{colors.background.primary.value}' },
+        borderColor: { value: 'transparent' },
+        info: {
+            color: { value: '{colors.font.info.value}' },
+            backgroundColor: { value: '{colors.background.primary.value}' },
+            borderColor: { value: 'transparent' },
+        },
+        error: {
+            color: { value: '{colors.font.error.value}' },
+            backgroundColor: { value: '{colors.background.primary.value}' },
+            borderColor: { value: 'transparent' },
+        },
+        success: {
+            color: { value: '{colors.font.success.value}' },
+            backgroundColor: { value: '{colors.background.primary.value}' },
+            borderColor: { value: 'transparent' },
+        },
+        warning: {
+            color: { value: '{colors.font.warning.value}' },
+            backgroundColor: { value: '{colors.background.primary.value}' },
+            borderColor: { value: 'transparent' },
+        },
+    },
+    outlined: {
+        color: { value: '{colors.font.primary.value}' },
+        backgroundColor: { value: '{colors.background.primary.value}' },
+        borderColor: { value: '{colors.border.primary.value}' },
+        info: {
+            color: { value: '{colors.font.info.value}' },
+            backgroundColor: { value: '{colors.background.primary.value}' },
+            borderColor: { value: '{colors.border.info.value}' },
+        },
+        error: {
+            color: { value: '{colors.font.error.value}' },
+            backgroundColor: { value: '{colors.background.primary.value}' },
+            borderColor: { value: '{colors.border.error.value}' },
+        },
+        success: {
+            color: { value: '{colors.font.success.value}' },
+            backgroundColor: { value: '{colors.background.primary.value}' },
+            borderColor: { value: '{colors.border.success.value}' },
+        },
+        warning: {
+            color: { value: '{colors.font.warning.value}' },
+            backgroundColor: { value: '{colors.background.primary.value}' },
+            borderColor: { value: '{colors.border.warning.value}' },
+        },
+    },
+    filled: {
+        color: { value: '{colors.font.primary.value}' },
+        backgroundColor: { value: '{colors.background.secondary.value}' },
+        borderColor: { value: 'transparent' },
+        info: {
+            color: { value: '{colors.font.info.value}' },
+            backgroundColor: { value: '{colors.background.info.value}' },
+            borderColor: { value: 'transparent' },
+        },
+        error: {
+            color: { value: '{colors.font.error.value}' },
+            backgroundColor: { value: '{colors.background.error.value}' },
+            borderColor: { value: 'transparent' },
+        },
+        success: {
+            color: { value: '{colors.font.success.value}' },
+            backgroundColor: { value: '{colors.background.success.value}' },
+            borderColor: { value: 'transparent' },
+        },
+        warning: {
+            color: { value: '{colors.font.warning.value}' },
+            backgroundColor: { value: '{colors.background.warning.value}' },
+            borderColor: { value: 'transparent' },
+        },
+    },
+};
+
+export { message };

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

@@ -1 +1,40 @@
-const e={current:{alignItems:{value:"center"},justifyContent:{value:"center"},color:{value:"{colors.font.inverse.value}"},fontSize:{value:"{fontSizes.small.value}"},backgroundColor:{value:"{colors.overlay.40.value}"}},button:{color:{value:"{colors.font.primary.value}"},paddingInlineStart:{value:"{space.xxs.value}"},paddingInlineEnd:{value:"{space.xxs.value}"},transitionProperty:{value:"background-color"},transitionDuration:{value:"{time.medium.value}"},hover:{backgroundColor:{value:"{colors.overlay.10.value}"},color:{value:"{colors.font.primary.value}"}},disabled:{color:{value:"{colors.font.disabled.value}"}}},ellipsis:{alignItems:{value:"baseline"},justifyContent:{value:"center"},paddingInlineStart:{value:"{space.xs.value}"},paddingInlineEnd:{value:"{space.xs.value}"}},itemContainer:{marginLeft:{value:"{space.xxxs.value}"},marginRight:{value:"{space.xxxs.value}"}},itemShared:{height:{value:"{fontSizes.xxl.value}"},minWidth:{value:"{fontSizes.xxl.value}"},borderRadius:{value:"{fontSizes.medium.value}"}}};export{e as pagination};
+const pagination = {
+    current: {
+        alignItems: { value: 'center' },
+        justifyContent: { value: 'center' },
+        color: { value: '{colors.font.inverse.value}' },
+        fontSize: { value: '{fontSizes.small.value}' },
+        backgroundColor: { value: '{colors.overlay.40.value}' },
+    },
+    button: {
+        color: { value: '{colors.font.primary.value}' },
+        paddingInlineStart: { value: '{space.xxs.value}' },
+        paddingInlineEnd: { value: '{space.xxs.value}' },
+        transitionProperty: { value: 'background-color' },
+        transitionDuration: { value: '{time.medium.value}' },
+        hover: {
+            backgroundColor: { value: '{colors.overlay.10.value}' },
+            color: { value: '{colors.font.primary.value}' },
+        },
+        disabled: {
+            color: { value: '{colors.font.disabled.value}' },
+        },
+    },
+    ellipsis: {
+        alignItems: { value: 'baseline' },
+        justifyContent: { value: 'center' },
+        paddingInlineStart: { value: '{space.xs.value}' },
+        paddingInlineEnd: { value: '{space.xs.value}' },
+    },
+    itemContainer: {
+        marginLeft: { value: '{space.xxxs.value}' },
+        marginRight: { value: '{space.xxxs.value}' },
+    },
+    itemShared: {
+        height: { value: '{fontSizes.xxl.value}' },
+        minWidth: { value: '{fontSizes.xxl.value}' },
+        borderRadius: { value: '{fontSizes.medium.value}' },
+    },
+};
+
+export { pagination };

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

@@ -1 +1,38 @@
-const o={color:{value:"{components.fieldcontrol.color.value}"},button:{color:{value:"{components.button.color.value}"},_active:{backgroundColor:{value:"{components.button._active.backgroundColor.value}"},borderColor:{value:"{components.button._active.borderColor.value}"},color:{value:"{components.button._active.color.value}"}},_disabled:{backgroundColor:{value:"{components.button._disabled.backgroundColor.value}"},borderColor:{value:"{components.button._disabled.borderColor.value}"},color:{value:"{components.button._disabled.color.value}"}},_focus:{backgroundColor:{value:"{components.button._focus.backgroundColor.value}"},borderColor:{value:"{components.button._focus.borderColor.value}"},color:{value:"{components.button._focus.color.value}"}},_hover:{backgroundColor:{value:"{components.button._hover.backgroundColor.value}"},borderColor:{value:"{components.button._hover.borderColor.value}"},color:{value:"{components.button._hover.color.value}"}}}};export{o as passwordfield};
+const passwordfield = {
+    color: { value: '{components.fieldcontrol.color.value}' },
+    button: {
+        color: { value: '{components.button.color.value}' },
+        _active: {
+            backgroundColor: {
+                value: '{components.button._active.backgroundColor.value}',
+            },
+            borderColor: { value: '{components.button._active.borderColor.value}' },
+            color: { value: '{components.button._active.color.value}' },
+        },
+        _disabled: {
+            backgroundColor: {
+                value: '{components.button._disabled.backgroundColor.value}',
+            },
+            borderColor: {
+                value: '{components.button._disabled.borderColor.value}',
+            },
+            color: { value: '{components.button._disabled.color.value}' },
+        },
+        _focus: {
+            backgroundColor: {
+                value: '{components.button._focus.backgroundColor.value}',
+            },
+            borderColor: { value: '{components.button._focus.borderColor.value}' },
+            color: { value: '{components.button._focus.color.value}' },
+        },
+        _hover: {
+            backgroundColor: {
+                value: '{components.button._hover.backgroundColor.value}',
+            },
+            borderColor: { value: '{components.button._hover.borderColor.value}' },
+            color: { value: '{components.button._hover.color.value}' },
+        },
+    },
+};
+
+export { passwordfield };

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

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

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

@@ -1 +1,18 @@
-const a={borderRadius:{value:"{radii.small.value}"},transitionDuration:{value:"{time.long.value}"},startColor:{value:"{colors.background.secondary.value}"},endColor:{value:"{colors.background.tertiary.value}"},small:{height:{value:"{space.small.value}"}},default:{height:{value:"{space.medium.value}"}},large:{height:{value:"{space.large.value}"}}};export{a as placeholder};
+const placeholder = {
+    borderRadius: { value: '{radii.small.value}' },
+    transitionDuration: { value: '{time.long.value}' },
+    startColor: { value: '{colors.background.secondary.value}' },
+    endColor: { value: '{colors.background.tertiary.value}' },
+    // sizes
+    small: {
+        height: { value: '{space.small.value}' },
+    },
+    default: {
+        height: { value: '{space.medium.value}' },
+    },
+    large: {
+        height: { value: '{space.large.value}' },
+    },
+};
+
+export { placeholder };

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

@@ -1 +1,67 @@
-const e={alignItems:{value:"center"},justifyContent:{value:"flex-start"},gap:{value:"inherit"},_disabled:{cursor:{value:"not-allowed"}},button:{alignItems:{value:"center"},justifyContent:{value:"center"},width:{value:"{fontSizes.medium.value}"},height:{value:"{fontSizes.medium.value}"},boxSizing:{value:"border-box"},borderWidth:{value:"{borderWidths.medium.value}"},borderStyle:{value:"solid"},borderRadius:{value:"50%"},borderColor:{value:"{colors.border.primary.value}"},color:{value:"{colors.background.primary.value}"},backgroundColor:{value:"{colors.background.primary.value}"},transitionProperty:{value:"all"},transitionDuration:{value:"{time.medium.value}"},outlineColor:{value:"{colors.transparent.value}"},outlineStyle:{value:"solid"},outlineWidth:{value:"{outlineWidths.medium.value}"},outlineOffset:{value:"{outlineOffsets.medium.value}"},padding:{value:"{borderWidths.medium.value}"},small:{width:{value:"{fontSizes.small.value}"},height:{value:"{fontSizes.small.value}"}},large:{width:{value:"{fontSizes.large.value}"},height:{value:"{fontSizes.large.value}"}},_checked:{color:{value:"{colors.brand.primary.80.value}"},_disabled:{color:{value:"{colors.background.disabled.value}"}}},_focus:{borderColor:{value:"{colors.border.focus.value}"},boxShadow:{value:"{components.fieldcontrol._focus.boxShadow.value}"}},_error:{borderColor:{value:"{colors.border.error.value}"},_focus:{boxShadow:{value:"{components.fieldcontrol._error._focus.boxShadow.value}"}}},_disabled:{borderColor:{value:"{colors.border.disabled.value}"},backgroundColor:{value:"{colors.background.primary.value}"}}},label:{color:{value:"{components.text.color.value}"},_disabled:{color:{value:"{colors.font.disabled.value}"}}}};export{e as radio};
+const radio = {
+    alignItems: { value: 'center' },
+    justifyContent: { value: 'flex-start' },
+    gap: { value: 'inherit' },
+    _disabled: { cursor: { value: 'not-allowed' } },
+    button: {
+        alignItems: { value: 'center' },
+        justifyContent: { value: 'center' },
+        width: { value: '{fontSizes.medium.value}' },
+        height: { value: '{fontSizes.medium.value}' },
+        boxSizing: { value: 'border-box' },
+        borderWidth: { value: '{borderWidths.medium.value}' },
+        borderStyle: { value: 'solid' },
+        borderRadius: { value: '50%' },
+        borderColor: { value: '{colors.border.primary.value}' },
+        color: { value: '{colors.background.primary.value}' },
+        backgroundColor: { value: '{colors.background.primary.value}' },
+        transitionProperty: { value: 'all' },
+        transitionDuration: { value: '{time.medium.value}' },
+        outlineColor: { value: '{colors.transparent.value}' },
+        outlineStyle: { value: 'solid' },
+        outlineWidth: { value: '{outlineWidths.medium.value}' },
+        outlineOffset: { value: '{outlineOffsets.medium.value}' },
+        // We want the dot inside the border to be a border-width from the border
+        padding: { value: '{borderWidths.medium.value}' },
+        small: {
+            width: { value: '{fontSizes.small.value}' },
+            height: { value: '{fontSizes.small.value}' },
+        },
+        large: {
+            width: { value: '{fontSizes.large.value}' },
+            height: { value: '{fontSizes.large.value}' },
+        },
+        _checked: {
+            color: {
+                value: '{colors.primary.80.value}',
+            },
+            _disabled: { color: { value: '{colors.background.disabled.value}' } },
+        },
+        _focus: {
+            borderColor: { value: '{colors.border.focus.value}' },
+            boxShadow: { value: '{components.fieldcontrol._focus.boxShadow.value}' },
+        },
+        _error: {
+            borderColor: { value: '{colors.border.error.value}' },
+            _focus: {
+                boxShadow: {
+                    value: '{components.fieldcontrol._error._focus.boxShadow.value}',
+                },
+            },
+        },
+        _disabled: {
+            borderColor: { value: '{colors.border.disabled.value}' },
+            backgroundColor: { value: '{colors.background.primary.value}' },
+        },
+    },
+    label: {
+        color: { value: '{components.text.color.value}' },
+        _disabled: {
+            color: {
+                value: '{colors.font.disabled.value}',
+            },
+        },
+    },
+};
+
+export { radio };

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

@@ -1 +1,19 @@
-const o={radio:{borderWidth:{value:"{components.radio.button.borderWidth}"},borderColor:{value:"{components.radio.button.borderColor}"},backgroundColor:{value:"{components.radio.button.backgroundColor}"},_checked:{color:{value:"{components.radio.button._checked.color}"}},label:{color:{value:"{components.radio.label.color}"}}},label:{color:{value:"{components.field.label.color}"}}};export{o as radiogroup};
+const radiogroup = {
+    radio: {
+        borderWidth: { value: '{components.radio.button.borderWidth}' },
+        borderColor: { value: '{components.radio.button.borderColor}' },
+        backgroundColor: { value: '{components.radio.button.backgroundColor}' },
+        _checked: {
+            color: { value: '{components.radio.button._checked.color}' },
+        },
+        label: {
+            color: { value: '{components.radio.label.color}' },
+        },
+    },
+    legend: {
+        color: { value: '{components.fieldset.legend.color}' },
+        fontWeight: { value: '{fontWeights.normal}' },
+    },
+};
+
+export { radiogroup };

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

@@ -1 +1,9 @@
-const l={large:{size:{value:"{fontSizes.xxxl.value}"}},default:{size:{value:"{fontSizes.xl.value}"}},small:{size:{value:"{fontSizes.small.value}"}},filled:{color:{value:"{colors.brand.secondary.80.value}"}},empty:{color:{value:"{colors.background.tertiary.value}"}}};export{l as rating};
+const rating = {
+    large: { size: { value: '{fontSizes.xxxl.value}' } },
+    default: { size: { value: '{fontSizes.xl.value}' } },
+    small: { size: { value: '{fontSizes.small.value}' } },
+    filled: { color: { value: '{colors.secondary.80.value}' } },
+    empty: { color: { value: '{colors.background.tertiary.value}' } },
+};
+
+export { rating };

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

@@ -1 +1,39 @@
-const o={color:{value:"{components.fieldcontrol.color.value}"},button:{color:{value:"{components.button.color.value}"},backgroundColor:{value:"{colors.background.primary.value}"},_active:{backgroundColor:{value:"{components.button._active.backgroundColor.value}"},borderColor:{value:"{components.button._active.borderColor.value}"},color:{value:"{components.button._active.color.value}"}},_disabled:{backgroundColor:{value:"{components.button._disabled.backgroundColor.value}"},borderColor:{value:"{components.button._disabled.borderColor.value}"},color:{value:"{components.button._disabled.color.value}"}},_focus:{backgroundColor:{value:"{components.button._focus.backgroundColor.value}"},borderColor:{value:"{components.button._focus.borderColor.value}"},color:{value:"{components.button._focus.color.value}"}},_hover:{backgroundColor:{value:"{components.button._hover.backgroundColor.value}"},borderColor:{value:"{components.button._hover.borderColor.value}"},color:{value:"{components.button._hover.color.value}"}}}};export{o as searchfield};
+const searchfield = {
+    color: { value: '{components.fieldcontrol.color.value}' },
+    button: {
+        color: { value: '{components.button.color.value}' },
+        backgroundColor: { value: '{colors.background.primary.value}' },
+        _active: {
+            backgroundColor: {
+                value: '{components.button._active.backgroundColor.value}',
+            },
+            borderColor: { value: '{components.button._active.borderColor.value}' },
+            color: { value: '{components.button._active.color.value}' },
+        },
+        _disabled: {
+            backgroundColor: {
+                value: '{components.button._disabled.backgroundColor.value}',
+            },
+            borderColor: {
+                value: '{components.button._disabled.borderColor.value}',
+            },
+            color: { value: '{components.button._disabled.color.value}' },
+        },
+        _focus: {
+            backgroundColor: {
+                value: '{components.button._focus.backgroundColor.value}',
+            },
+            borderColor: { value: '{components.button._focus.borderColor.value}' },
+            color: { value: '{components.button._focus.color.value}' },
+        },
+        _hover: {
+            backgroundColor: {
+                value: '{components.button._hover.backgroundColor.value}',
+            },
+            borderColor: { value: '{components.button._hover.borderColor.value}' },
+            color: { value: '{components.button._hover.color.value}' },
+        },
+    },
+};
+
+export { searchfield };