@pingux/astro 2.239.0-alpha.0 → 2.241.0-alpha.0

package/lib/cjs/styles/themes/next-gen/variants/input.js

@@ -154,8 +154,9 @@ input.multivaluesWrapper = {
   borderWidth: 1,
   flexDirection: 'row !important',
   flexWrap: 'wrap',
+  rowGap: 'xs',
   pt: 6,
-  pr: 10,
+  pr: 12,
   pb: 5,
   pl: 12,
   borderRadius: _onyxTokens.astroTokens.radius.input,
@@ -166,7 +167,7 @@ input.multivaluesWrapper = {
     flex: 1,
     height: 27,
     lineHeight: '100%',
-    p: 5,
+    p: 0,
     '&.is-focused': {
       boxShadow: 'none',
       outline: 'none'
@@ -176,7 +177,7 @@ input.multivaluesWrapper = {
     ...defaultFocus
   },
   '&.is-error': {
-    borderColor: 'critical.dark'
+    borderColor: _onyxTokens.astroTokens.color.red.base
   },
   '&.is-read-only': {
     alignItems: 'center',

package/lib/cjs/styles/themes/next-gen/variants/text.js

@@ -166,7 +166,7 @@ const text = exports.text = {
   },
   placeholder: {
     color: _onyxTokens.astroTokens.color.gray[600],
-    fontWeight: 1
+    fontWeight: 400
   },
   paragraph: {
     lineHeight: 'body'

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -903,12 +903,15 @@ declare const _default: {
         };
         option: {
             py: string;
-            pl: string;
+            pl: number;
             pr: number;
             justifyContent: string;
             borderRadius: number;
             lineHeight: string;
             color: string;
+            '&.is-disabled': {
+                color: string;
+            };
             '&.is-focused': {
                 color: string;
                 bg: string;

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -177,12 +177,15 @@ const listBox = {
   },
   option: {
     py: 'md-s',
-    pl: 'md-s',
+    pl: _onyxTokens.astroTokens.spacing.md,
     pr: _onyxTokens.astroTokens.spacing.md,
     justifyContent: 'space-between',
     borderRadius: _onyxTokens.astroTokens.radius.md,
     lineHeight: 'body',
     color: _onyxTokens.astroTokens.color.common.menu.item.text,
+    '&.is-disabled': {
+      color: _onyxTokens.astroTokens.color.gray[700]
+    },
     '&.is-focused': {
       color: _onyxTokens.astroTokens.color.common.menu.item.hover.text,
       bg: 'gray-100',

package/lib/cjs/types/index.d.ts

@@ -44,6 +44,7 @@ export * from './item';
 export * from './label';
 export * from './labelValuePairs';
 export * from './link';
+export * from './linkSelectField';
 export * from './listBox';
 export * from './listItem';
 export * from './loader';

package/lib/cjs/types/index.js

@@ -509,6 +509,17 @@ Object.keys(_link).forEach(function (key) {
     }
   });
 });
+var _linkSelectField = require("./linkSelectField");
+Object.keys(_linkSelectField).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _linkSelectField[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _linkSelectField[key];
+    }
+  });
+});
 var _listBox = require("./listBox");
 Object.keys(_listBox).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/cjs/types/linkSelectField.d.ts

@@ -0,0 +1,111 @@
+import { UseSelectFieldProps } from '../hooks/useSelectField/useSelectField';
+import { IconProps } from './icon';
+import { Status } from './item';
+export interface LinkSelectFieldProps extends Omit<UseSelectFieldProps<object>, 'align' | 'helperText' | 'label'> {
+    /** Alignment of the popover menu relative to the trigger. */
+    align?: 'start' | 'end' | 'middle';
+    /** Where the popover menu opens relative to its trigger. */
+    direction?: 'top' | 'right' | 'bottom' | 'left';
+    /** The initial selected key in the collection (uncontrolled). */
+    defaultSelectedKey?: string;
+    /** Array of keys to disable within the options list. */
+    disabledKeys?: Iterable<string>;
+    /** Whether the collection allows empty selection. */
+    hasNoEmptySelection?: boolean;
+    /** Whether the field has a status indicator. */
+    hasNoStatusIndicator?: boolean;
+    /** Text rendered below the input. */
+    helperText?: React.ReactNode;
+    /** Props object that is spread directly into the helphint element. */
+    helpHintProps?: Record<string, unknown>;
+    /** If present this prop will cause a help hint to render in the label of the field. */
+    hintText?: string;
+    /** The label for the select element. */
+    label?: React.ReactNode;
+    /** Sets the default open state of the menu. */
+    isDefaultOpen?: boolean;
+    /** Whether the input is disabled. */
+    isDisabled?: boolean;
+    /** Whether the items are currently loading. */
+    isLoading?: boolean;
+    /** @ignore Whether the menu should automatically flip direction when space is limited. */
+    isNotFlippable?: boolean;
+    /** Sets the open state of the menu. */
+    isOpen?: boolean;
+    /** @ignore Whether the input can be selected but not changed by the user. */
+    isReadOnly?: boolean;
+    /** Whether user input is required on the input before form submission. */
+    isRequired?: boolean;
+    /**
+     * *For performance reasons, use this prop instead of Array.map when iteratively rendering Items*.
+     * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
+     */
+    items?: Iterable<object>;
+    /** The name for the select element, used when submitting a form. */
+    name?: string;
+    /** Temporary text that occupies the text input when it is empty. */
+    placeholder?: string;
+    /** The currently selected key in the collection (controlled). */
+    selectedKey?: string;
+    /**
+     * Handler that is called when more items should be loaded, e.g. while scrolling near the bottom.
+     *
+     * () => any
+     */
+    onLoadMore?: () => unknown;
+    /**
+     * Method that is called when the open state of the menu changes.
+     *
+     * (isOpen: boolean) => void
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Handler that is called when the selection changes.
+     *
+     * (key: Key) => any
+     */
+    onSelectionChange?: (key: React.Key | null) => void;
+    /** Display an inline loader inside the select trigger while loading. */
+    hasInlineLoader?: boolean;
+    /**
+     * Props object that is spread directly into the Icon inside the default trigger button.
+     * Supports all IconProps (icon, title, size, color, sx, etc.).
+     * The sx prop is merged with the rotation style.
+     */
+    iconProps?: IconProps;
+    /** Width of the popover menu. Accepts any valid CSS unit. */
+    popoverWidth?: string | number;
+    /**
+     * A ReactNode that replaces the default Button trigger entirely.
+     * When provided, the local Button element is not rendered.
+     */
+    trigger?: React.ReactNode;
+    /** Props object that is spread directly into the default trigger button. */
+    triggerProps?: Record<string, unknown>;
+    /** Determines any status related styling. */
+    status?: Status;
+    /** Props object spread into the outer-most container. Wrapper and label will be children. */
+    containerProps?: Record<string, unknown>;
+    /** Props object that is spread directly into the input element. Will be a child
+     * of the Wrapper. */
+    controlProps?: Record<string, unknown>;
+    /** Props object spread to the field control wrapper, i.e. the immediate parent
+     * element for the control, sibling of the label, and child of the field container. */
+    controlWrapperProps?: Record<string, unknown>;
+    /** Props object spread to the field label, i.e. the visible text which labels the control. */
+    labelProps?: Record<string, unknown>;
+    /** Identifies the element (or elements) whose contents or presence
+     * are controlled by the current element. */
+    'aria-controls'?: string;
+    /** Identifies the element (or elements) that describes the object. */
+    'aria-describedby'?: string;
+    /** Identifies the element (or elements) that provide a detailed, extended description
+     * for the object. */
+    'aria-details'?: string;
+    /** Identifies the element that provides an error message for the object. */
+    'aria-errormessage'?: string;
+    /** Defines a string value that labels the current element. */
+    'aria-label'?: string;
+    /** Identifies the element (or elements) that labels the current element. */
+    'aria-labelledby'?: string;
+}

package/lib/cjs/types/linkSelectField.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/Input/Input.styles.js

@@ -175,7 +175,7 @@ input.multivaluesWrapper = {
   flexDirection: 'row !important',
   flexWrap: 'wrap',
   pt: 6,
-  pr: 10,
+  pr: 12,
   pb: 5,
   pl: 12,
   borderRadius: '2px',

package/lib/components/LinkSelectField/LinkSelectField.js

@@ -1,15 +1,13 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { forwardRef } from 'react';
 import { VisuallyHidden } from 'react-aria';
-import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, Button, Icon, Loader, Text } from '../..';
 import { useGetTheme, usePropWarning, useSelectField } from '../../hooks';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
-import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
+import { getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
+import { statusDefaultProp } from '../../utils/docUtils/statusProp';
 import SelectFieldBase from '../SelectFieldBase';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 const displayName = 'LinkSelectField';
@@ -67,7 +65,7 @@ const LinkSelectField = /*#__PURE__*/forwardRef((props, ref) => {
     variant: "selectLink",
     tabIndex: isDisabled ? -1 : 0
   }, getPendoID(displayName), triggerProps, raTriggerProps, ariaProps, {
-    "aria-describedby": helperText && helperTextId
+    "aria-describedby": helperText ? helperTextId : undefined
   }), ___EmotionJSX(Text, {
     variant: "linkSelectFieldLabel",
     className: "link-select-field-placeholder"
@@ -96,92 +94,11 @@ const LinkSelectField = /*#__PURE__*/forwardRef((props, ref) => {
     id: helperTextId
   }, helperText));
   return ___EmotionJSX(SelectFieldBase, _extends({}, props, selectFieldProps, {
+    label: props.label,
+    helperText: props.helperText,
     trigger: triggerProp || triggerNode
   }));
 });
-LinkSelectField.propTypes = {
-  /** Alignment of the popover menu relative to the trigger. */
-  align: PropTypes.oneOf(['start', 'end', 'middle']),
-  /** Where the popover menu opens relative to its trigger. */
-  direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-  /** The initial selected key in the collection (uncontrolled). */
-  defaultSelectedKey: PropTypes.string,
-  /** Array of keys to disable within the options list. */
-  disabledKeys: PropTypes.arrayOf(PropTypes.string),
-  /** Whether the collection allows empty selection. */
-  hasNoEmptySelection: PropTypes.bool,
-  /** Whether the field has a status indicator. */
-  hasNoStatusIndicator: PropTypes.bool,
-  /** Text rendered below the input. */
-  helperText: PropTypes.node,
-  /** Props object that is spread directly into the helphint element. */
-  helpHintProps: PropTypes.shape({}),
-  /** If present this prop will cause a help hint to render in the label of the field. */
-  hintText: PropTypes.string,
-  /** Sets the default open state of the menu. */
-  isDefaultOpen: PropTypes.bool,
-  /** Whether the input is disabled. */
-  isDisabled: PropTypes.bool,
-  /** Whether the items are currently loading. */
-  isLoading: PropTypes.bool,
-  /** @ignore Whether the menu should automatically flip direction when space is limited. */
-  isNotFlippable: PropTypes.bool,
-  /** Sets the open state of the menu. */
-  isOpen: PropTypes.bool,
-  /** @ignore Whether the input can be selected but not changed by the user. */
-  isReadOnly: PropTypes.bool,
-  /** Whether user input is required on the input before form submission. */
-  isRequired: PropTypes.bool,
-  /**
-   * *For performance reasons, use this prop instead of Array.map when iteratively rendering Items*.
-   * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
-   */
-  items: PropTypes.arrayOf(PropTypes.shape({})),
-  /** The label for the select element. */
-  label: PropTypes.node,
-  /** The name for the select element, used when submitting a form. */
-  name: PropTypes.string,
-  /** Temporary text that occupies the text input when it is empty. */
-  placeholder: PropTypes.string,
-  /** The currently selected key in the collection (controlled). */
-  selectedKey: PropTypes.string,
-  /**
-   * Handler that is called when more items should be loaded, e.g. while scrolling near the bottom.
-   *
-   * () => any
-   */
-  onLoadMore: PropTypes.func,
-  /**
-   * Method that is called when the open state of the menu changes.
-   *
-   * (isOpen: boolean) => void
-   */
-  onOpenChange: PropTypes.func,
-  /**
-   * Handler that is called when the selection changes.
-   *
-   * (key: Key) => any
-   */
-  onSelectionChange: PropTypes.func,
-  /** Display an inline loader inside the select trigger while loading. */
-  hasInlineLoader: PropTypes.bool,
-  /**
-   * Props object that is spread directly into the Icon inside the default trigger button.
-   * Supports all IconProps (icon, title, size, color, sx, etc.).
-   * The sx prop is merged with the rotation style.
-   */
-  iconProps: PropTypes.shape({}),
-  /** Width of the popover menu. Accepts any valid CSS unit. */
-  popoverWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * A ReactNode that replaces the default Button trigger entirely.
-   * When provided, the local Button element is not rendered.
-   */
-  trigger: PropTypes.node,
-  ...statusPropTypes,
-  ...inputFieldAttributesBasePropTypes,
-  ...ariaAttributesBasePropTypes
-};
 LinkSelectField.defaultProps = {
   placeholder: 'Select',
   align: 'start',

package/lib/components/ListBox/Option.js

@@ -6,6 +6,7 @@ import { useOption } from '@react-aria/listbox';
 import { useMultivaluesContext } from '../../context/MultivaluesContext';
 import { useGetTheme, useStatusClasses } from '../../hooks';
 import Box from '../Box';
+import { OnyxDefaultCheckboxIcon } from '../Checkbox/CheckboxIcons';
 import Icon from '../Icon';
 import { ListBoxContext } from './ListBoxContext';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -117,17 +118,30 @@ const Option = /*#__PURE__*/forwardRef((props, ref) => {
     onPointerOver: setFocusOnHover
   }, theseOptionProps, others, {
     "aria-label": ariaLabel
-  }), isCondensed ? ___EmotionJSX(Box, {
-    isRow: true,
-    alignItems: "center",
-    flex: "1"
-  }, ___EmotionJSX(Icon, {
+  }), isCondensed && (isOnyx ? ___EmotionJSX(OnyxDefaultCheckboxIcon, {
+    isChecked: isSelected,
+    sx: {
+      mr: 'sm',
+      color: isSelected ? 'primary' : 'gray-500',
+      '&.is-disabled': {
+        color: 'gray-400'
+      },
+      '&.is-focused, &.is-focus-visible': {
+        outline: '2px solid',
+        outlineColor: 'focus'
+      }
+    }
+  }) : ___EmotionJSX(Icon, {
     icon: isSelected ? CheckedIcon : UncheckedIcon,
     color: "active",
-    mr: "xs",
+    mr: "sm",
     className: classNames,
     variant: "listBox.checkboxIcon"
-  }), rendered) : ___EmotionJSX(React.Fragment, null, isSelected && !isOnyx && shouldShowSelectedOption && ___EmotionJSX(Icon, {
+  })), isCondensed && ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
+    flex: "1"
+  }, rendered), !isCondensed && ___EmotionJSX(React.Fragment, null, isSelected && !isOnyx && shouldShowSelectedOption && ___EmotionJSX(Icon, {
     icon: CircleSmallIcon,
     title: {
       name: 'Circle Small Icon'

package/lib/components/MultivaluesField/BadgeLabelTooltip.js

@@ -45,6 +45,7 @@ const BadgeLabelTooltip = ({
     variant: "badge.deleteButton",
     "aria-describedby": "selectedKeysState"
   }, item.buttonProps), ___EmotionJSX(Icon, {
+    color: "text.primary",
     icon: Clear,
     size: 14,
     title: {

package/lib/components/MultivaluesField/CondensedMultivaluesField.js

@@ -240,10 +240,12 @@ const CondensedMultivaluesField = /*#__PURE__*/forwardRef((props, ref) => {
     onPress: handleSelection,
     ref: buttonRef,
     variant: "listBoxLink",
-    mt: "sm",
-    ml: "14px",
     sx: {
-      fontWeight: '400'
+      fontWeight: '400',
+      width: '100%',
+      justifyContent: 'flex-start',
+      pl: 'lg',
+      pr: 'md'
     }
   }, selectionState), ___EmotionJSX(DismissButton, {
     onDismiss: close
@@ -329,7 +331,7 @@ const CondensedMultivaluesField = /*#__PURE__*/forwardRef((props, ref) => {
   }, ___EmotionJSX(Icon, _extends({
     icon: isOpen ? MenuUp : MenuDown
   }, isOnyx && {
-    size: 'sm'
+    size: 'md'
   }, {
     title: {
       name: ''

package/lib/components/MultivaluesField/DefaultMultivaluesField.js

@@ -439,7 +439,11 @@ const DefaultMultivaluesField = /*#__PURE__*/forwardRef((props, ref) => {
         isRow: true,
         sx: {
           p: 0,
-          flexWrap: 'wrap'
+          flexWrap: 'wrap',
+          ...(isOnyx && {
+            columnGap: 'xs',
+            rowGap: 'xs'
+          })
         }
       }, selectedItems), isOnyx ? onyxReadOnlyInputEntry : readOnlyInputEntry, selectionManager.selectedKeys.size > 0 && visuallyHidden)
     },

package/lib/styles/themeOverrides/nextGenDarkMode/colors.js

@@ -175,6 +175,7 @@ export const colors = {
   badge,
   codeEditor,
   critical: {
+    bright: astroTokensDark.color.red[300],
     dark: astroTokensDark.color.red[100]
   },
   common

package/lib/styles/themeOverrides/nextGenDarkMode/variants/badges.js

@@ -104,32 +104,42 @@ const countNeutral = {
   }
 };
 const readOnlyBadge = {
-  color: astroTokensDark.color.gray[100],
-  backgroundColor: '#23282E !important',
+  color: astroTokensDark.color.gray[600],
+  backgroundColor: 'white !important',
   borderColor: 'border.attachment',
   '& span': {
-    color: astroTokensDark.color.gray[100]
+    fontWeight: 0,
+    color: astroTokensDark.color.gray[600],
+    fontSize: astroTokensDark.default['font-size'].small,
+    lineHeight: '18px'
   }
 };
 const readOnlyFieldBadge = {
-  color: astroTokensDark.color.gray[100],
-  backgroundColor: '#23282E !important',
-  borderColor: 'border.attachment',
+  ...readOnlyBadge,
   '& span': {
-    color: astroTokensDark.color.gray[100]
+    fontWeight: 0,
+    color: astroTokensDark.color.gray[600]
   }
 };
+
+// Onyx dark selected-tag spec: neutral surface, not the light-theme blue (UXE-8463 QA)
 const selectedItemBadge = {
-  backgroundColor: '#155CBA !important',
+  backgroundColor: '#2C323A !important',
   '& span': {
-    color: astroTokensDark.color.gray[100]
+    color: astroTokensDark.color.gray[200]
+  },
+  '& svg': {
+    color: astroTokensDark.color.gray[200],
+    path: {
+      fill: astroTokensDark.color.gray[200]
+    }
   }
 };
 const itemBadgeWithSlot = {
   ...selectedItemBadge,
   '& svg': {
     path: {
-      fill: astroTokensDark.color.gray[100]
+      fill: astroTokensDark.color.gray[200]
     }
   }
 };

package/lib/styles/themeOverrides/nextGenDarkMode/variants/forms.js

@@ -30,7 +30,7 @@ export const checkbox = {
   '.is-focused &': {
     outline: '2px solid',
     outlineColor: astroTokensDark.color.blue[400],
-    outlineOffset: '2px'
+    outlineOffset: '0px'
   },
   'input:disabled ~ &': {
     opacity: 0.5

package/lib/styles/themeOverrides/nextGenDarkMode/variants/input.js

@@ -26,6 +26,7 @@ input.fieldControlWrapper = {
 };
 input.multivaluesWrapper = {
   backgroundColor: 'backgroundBase',
+  rowGap: 'xs',
   '&.is-read-only': {
     boxShadow: 'inset 0 0 0 100px #30373f',
     border: '1px solid',

package/lib/styles/themeOverrides/nextGenDarkMode/variants/text.js

@@ -34,7 +34,7 @@ export const text = {
   },
   placeholder: {
     color: astroTokensDark.color.gray[400],
-    fontWeight: 1
+    fontWeight: 400
   },
   messagesText: {
     '&.is-success, &.is-warning, &.is-error, &.is-default': {

package/lib/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -20,6 +20,9 @@ const listBox = {
   },
   option: {
     color: astroTokensDark.color.common.menu.item.text,
+    '&.is-disabled': {
+      color: astroTokensDark.color.gray[400]
+    },
     '&.is-focused': {
       color: astroTokensDark.color.common.menu.item.hover.text,
       bg: '#2C323A'

package/lib/styles/themes/next-gen/forms.js

@@ -24,7 +24,7 @@ export const checkbox = {
   '.is-focused &': {
     outline: '2px solid',
     outlineColor: colors.focus,
-    outlineOffset: '2px'
+    outlineOffset: '0px'
   },
   'input:disabled ~ &': {
     opacity: 0.5

package/lib/styles/themes/next-gen/variants/badges.js

@@ -100,10 +100,24 @@ const info = {
 const selectedItemBadge = {
   ...baseBadge,
   backgroundColor: '#eaf2fd !important',
-  paddingRight: '0px !important',
+  pt: 'xs',
+  pb: 'xs',
+  m: 0,
+  mr: 0,
+  my: 0,
+  pr: 'sm',
+  pl: 'sm',
+  maxWidth: 'none',
   '& span': {
     ...badgeFont,
-    color: 'text.primary'
+    fontWeight: 0,
+    color: 'text.primary',
+    fontSize: astroTokens.default['font-size'].small,
+    lineHeight: '18px',
+    mr: 0
+  },
+  '& button': {
+    ml: 'sm'
   }
 };
 const readOnlyBadge = {
@@ -112,17 +126,19 @@ const readOnlyBadge = {
   borderColor: 'border.hairline',
   backgroundColor: '#FFFFFF !important',
   '& span': {
-    ...badgeFont,
-    color: 'text.primary',
-    lineHeight: 'xs'
+    fontWeight: 0,
+    color: astroTokens.color.gray[600],
+    fontSize: astroTokens.default['font-size'].small,
+    lineHeight: '18px'
   }
 };
 const readOnlyFieldBadge = {
   ...readOnlyBadge,
   '& span': {
-    ...badgeFont,
-    color: 'text.primary',
-    lineHeight: 'xs'
+    fontWeight: 0,
+    color: astroTokens.color.gray[600],
+    fontSize: astroTokens.default['font-size'].small,
+    lineHeight: '18px'
   }
 };
 const itemBadgeWithSlot = {

package/lib/styles/themes/next-gen/variants/input.js

@@ -148,8 +148,9 @@ input.multivaluesWrapper = {
   borderWidth: 1,
   flexDirection: 'row !important',
   flexWrap: 'wrap',
+  rowGap: 'xs',
   pt: 6,
-  pr: 10,
+  pr: 12,
   pb: 5,
   pl: 12,
   borderRadius: astroTokens.radius.input,
@@ -160,7 +161,7 @@ input.multivaluesWrapper = {
     flex: 1,
     height: 27,
     lineHeight: '100%',
-    p: 5,
+    p: 0,
     '&.is-focused': {
       boxShadow: 'none',
       outline: 'none'
@@ -170,7 +171,7 @@ input.multivaluesWrapper = {
     ...defaultFocus
   },
   '&.is-error': {
-    borderColor: 'critical.dark'
+    borderColor: astroTokens.color.red.base
   },
   '&.is-read-only': {
     alignItems: 'center',

package/lib/styles/themes/next-gen/variants/text.js

@@ -160,7 +160,7 @@ export const text = {
   },
   placeholder: {
     color: astroTokens.color.gray[600],
-    fontWeight: 1
+    fontWeight: 400
   },
   paragraph: {
     lineHeight: 'body'