@redsift/design-system 12.5.6 → 12.5.7-muiv6

package/CONTRIBUTING.md

@@ -101,6 +101,10 @@ import { sum as d3sum, scaleOrdinal as d3scaleOrdinal, ScaleOrdinal as d3ScaleOr
 
 ## Component
 
+### Design principles
+
+Before any design/API decision (defaults, adding/exposing styling or spacing props), follow [`docs/design-guidelines.md`](docs/design-guidelines.md) and reference principles by slug (e.g. `DS-SPACING-01`) in code, PRs and reviews.
+
 ### Scaffolding
 
 Each component should be in its own folder. If a subcomponent can be used as a standalone component, it should be in its own folder too. For instance, `CheckboxGroup` uses `Checkbox` but `Checkbox` can be used alone. In this case, `CheckboxGroup` and `Checkbox` both have their own folder. For `PieChart` and `PieChartSlice`, a `PieChartSlice` can not be used alone. It only exists inside a `PieChart` component. Therefore, both components are inside the same folder.
@@ -412,6 +416,8 @@ yarn build:products
 
 ## Publishing a release
 
+> **Canonical process:** the full, up-to-date release workflow — the three parallel MUI DataGrid version lines (muiv6 / muiv7 / muiv8), peer-dependency bumps, docs/MCP regeneration and the pre-release checklist — lives in **`.github/instructions/release.instructions.md`**. Follow that as the source of truth. The steps below are a simplified single-line summary and omit the multi-version release details.
+
 ### Stable release
 
 1. Make sure you're on the release branch (ex: `release/vX.Y.Z`) and a PR is opened on Github

package/_internal/Alert2.js

@@ -3,14 +3,14 @@ import React__default, { forwardRef, useState, useEffect, useCallback } from 're
 import classNames from 'classnames';
 import { mdiClose, mdiAlert, mdiTriangleOutline, mdiCheckCircle, mdiCheck, mdiAlertCircle, mdiAlertOutline, mdiInformation, mdiInformationOutline } from '@redsift/icons';
 import styled, { css } from 'styled-components';
-import { i as baseStyling } from './styles5.js';
+import { i as baseStyling, c as baseInternalSpacing } from './styles5.js';
 import { T as Theme, N as NotificationsColorPalette } from './colors.js';
 import { u as useMessageFormatter } from './useMessageFormatter.js';
 import { F as Flexbox } from './Flexbox2.js';
 import { T as Text } from './Text2.js';
 import { tA as RedsiftTypographyFontWeightSemiBold } from './redsift-design-tokens.js';
 import { I as IconButton } from './IconButton.js';
-import { f as getStylingTransientProps } from './styles.js';
+import { i as getContainerStylingTransientProps } from './styles.js';
 import { u as useTheme } from './useTheme.js';
 import { a as Icon } from './Icon2.js';
 
@@ -30,6 +30,10 @@ const AlertStyleVariant = {
 
 /**
  * Component props.
+ *
+ * `Alert` is container-like: alongside the positioning `StylingProps` it accepts
+ * `InternalSpacingProps` (`padding`, `paddingTop`, …) with an `8px` default.
+ * Prefer the default — see `DS-SPACING-01` in `docs/design-guidelines.md`.
  */
 
 var close$1 = "Close";
@@ -53,7 +57,10 @@ var intlMessages = {
 const StyledAlert = styled.div`
   ${baseStyling}
 
-  padding: 16px;
+  /* Default padding — overridable via InternalSpacingProps (padding/paddingTop/…).
+     Declared before baseInternalSpacing so a consumer-passed value wins by source order. */
+  padding: 8px;
+  ${baseInternalSpacing}
   ${_ref => {
   let {
     $hasTitle,
@@ -183,7 +190,7 @@ const Alert = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     transientProps,
     otherProps
-  } = getStylingTransientProps(props);
+  } = getContainerStylingTransientProps(props);
   const {
       children,
       className,

package/_internal/Alert2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert2.js","sources":["../../src/components/alert/types.ts","../../src/components/alert/intl/index.ts","../../src/components/alert/styles.ts","../../src/components/alert/Alert.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { ValueOf, StylingProps, StylingTransientProps, Theme } from '../..';\n\n/**\n * Component variant.\n */\nexport const AlertVariant = {\n  success: 'success',\n  error: 'error',\n  warning: 'warning',\n  info: 'info',\n} as const;\nexport type AlertVariant = ValueOf<typeof AlertVariant>;\n\nexport const AlertStyleVariant = {\n  default: 'default',\n  minimal: 'minimal',\n} as const;\nexport type AlertStyleVariant = ValueOf<typeof AlertStyleVariant>;\n\n/**\n * Component props.\n */\nexport interface AlertProps extends ComponentProps<'div'>, StylingProps {\n  /** Whether the component can be closed or not. */\n  isClosable?: boolean;\n  /** Whether the component is closed or not. Used for controlled version. */\n  isClosed?: boolean;\n  /** Method to handle component change. */\n  onClose?(isClosed: boolean): void;\n  /** Title. */\n  title?: string;\n  /** Theme. */\n  theme?: Theme;\n  /** Variant */\n  variant?: AlertVariant;\n  /** Style variant. */\n  styleVariant?: AlertStyleVariant;\n}\n\nexport interface StyledAlertProps extends ComponentProps<'div'>, StylingTransientProps {\n  $hasTitle: boolean;\n  $isClosable: AlertProps['isClosable'];\n  $isClosed: AlertProps['isClosed'];\n  $variant: AlertProps['variant'];\n  $theme: AlertProps['theme'];\n  $styleVariant: AlertProps['styleVariant'];\n}\n","import enUS from './en-US.json';\nimport frFR from './fr-FR.json';\n\nexport default {\n  'en-US': enUS,\n  'fr-FR': frFR,\n};\n","import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledAlertProps } from './types';\nimport { Theme } from '../../types';\n\n/**\n * Component style.\n */\nexport const StyledAlert = styled.div<StyledAlertProps>`\n  ${baseStyling}\n\n  padding: 16px;\n  ${({ $hasTitle, $isClosable, $isClosed, $variant, $styleVariant, $theme }) => css`\n    color: var(--redsift-color-neutral-${$theme === Theme.light ? 'x-dark-grey' : 'white'});\n    display: ${!$isClosed ? 'block' : 'none'};\n    background-color: ${$styleVariant == 'minimal'\n      ? `var(--redsift-color-neutral-${$theme !== Theme.light ? 'x-dark-grey' : 'white'})`\n      : `var(--redsift-color-${$theme}-components-alert-${$variant}-background)`};\n\n    border: ${$styleVariant == 'minimal'\n      ? `1px solid var(--redsift-color-${$theme}-components-alert-${$variant}-border)`\n      : 'none'};\n    border-radius: ${$styleVariant == 'minimal' ? '8px' : '4px'};\n\n    .redsift-alert-header__icon-button {\n      background-color: transparent;\n      padding: 0px;\n      .redsift-icon {\n        color: var(--redsift-color-neutral-x-dark-grey);\n      }\n\n      &:hover,\n      &:focus-visible {\n        background-color: var(--redsift-color-notifications-${$variant}-active);\n      }\n    }\n\n    .redsift-alert__content {\n      margin-top: ${$hasTitle ? '8px' : '-24px'};\n      margin-left: 38px;\n      ${$isClosable\n        ? css`\n            margin-right: 24px;\n          `\n        : ''};\n    }\n  `}\n`;\n","import React, { forwardRef, RefObject, useCallback, useEffect, useState } from 'react';\nimport classNames from 'classnames';\n\nimport { useMessageFormatter } from '../../react-aria/react-aria/i18n';\nimport intlMessages from './intl';\n\nimport {\n  mdiAlert,\n  mdiTriangleOutline,\n  mdiAlertCircle,\n  mdiAlertOutline,\n  mdiCheck,\n  mdiCheckCircle,\n  mdiClose,\n  mdiInformation,\n  mdiInformationOutline,\n} from '@redsift/icons';\nimport { IconButton } from '../icon-button';\nimport { NotificationsColorPalette, Comp, Theme, getStylingTransientProps } from '../../types';\nimport { StyledAlert } from './styles';\nimport { AlertProps, AlertVariant, AlertStyleVariant } from './types';\nimport { Icon } from '../icon';\nimport { Text } from '../text';\nimport { Flexbox } from '../flexbox';\nimport { RedsiftTypographyFontWeightSemiBold } from '../../utils';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Alert';\nconst CLASSNAME = 'redsift-alert';\n\nconst getVariant = (variant: AlertVariant, styleVariant: AlertStyleVariant, theme: Theme) => {\n  switch (variant) {\n    case AlertVariant.info:\n    default:\n      return {\n        color: theme === Theme.light ? NotificationsColorPalette.info : 'white',\n        icon: styleVariant == 'default' ? mdiInformation : mdiInformationOutline,\n      };\n    case AlertVariant.error:\n      return {\n        color: theme === Theme.light ? NotificationsColorPalette.error : 'white',\n        icon: styleVariant == 'default' ? mdiAlertCircle : mdiAlertOutline,\n      };\n    case AlertVariant.success:\n      return {\n        color: theme === Theme.light ? NotificationsColorPalette.success : 'white',\n        icon: styleVariant == 'default' ? mdiCheckCircle : mdiCheck,\n      };\n    case AlertVariant.warning:\n      return {\n        color: theme === Theme.light ? NotificationsColorPalette.warning : 'white',\n        icon: styleVariant == 'default' ? mdiAlert : mdiTriangleOutline,\n      };\n  }\n};\n\n/**\n * Alert displays a short, important message that attracts the user's attention\n * without interrupting the user's task. Alerts come in four variants:\n * `success`, `warning`, `error`, and `info`.\n *\n * Style variants: `default` (filled icon) and `minimal` (outline icon).\n *\n * Alerts can be controlled (using `isClosed` and `onClose`) or uncontrolled\n * (internally manages its closed state with `isClosable`).\n *\n * @example\n * // Basic info alert\n * <Alert>Your session will expire in 5 minutes.</Alert>\n *\n * @example\n * // All variants with title\n * <Alert variant=\"success\" title=\"Success\">Operation completed.</Alert>\n * <Alert variant=\"warning\" title=\"Warning\">Please review your changes.</Alert>\n * <Alert variant=\"error\" title=\"Error\">Something went wrong.</Alert>\n * <Alert variant=\"info\" title=\"Info\">New features available.</Alert>\n *\n * @example\n * // Minimal style variant\n * <Alert variant=\"warning\" styleVariant=\"minimal\" title=\"Attention\">\n *   This action requires confirmation.\n * </Alert>\n *\n * @example\n * // Closable alert (uncontrolled - self-dismissing)\n * <Alert variant=\"info\" isClosable title=\"Tip\">\n *   You can dismiss this message.\n * </Alert>\n *\n * @example\n * // Controlled alert with external state\n * const [isClosed, setIsClosed] = useState(false);\n * <Alert\n *   variant=\"warning\"\n *   isClosable\n *   isClosed={isClosed}\n *   onClose={setIsClosed}\n *   title=\"Review Required\"\n * >\n *   Please check the form before submitting.\n * </Alert>\n *\n * @example\n * // Alert with rich content (buttons, links)\n * <Alert variant=\"warning\" title=\"Update Available\">\n *   <Flexbox flexDirection=\"column\" alignItems=\"flex-start\" gap=\"8px\">\n *     <Text>A new version is available.</Text>\n *     <Button color=\"warning\" variant=\"secondary\">Update Now</Button>\n *   </Flexbox>\n * </Alert>\n */\nexport const Alert: Comp<AlertProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { transientProps, otherProps } = getStylingTransientProps(props);\n\n  const {\n    children,\n    className,\n    isClosable,\n    isClosed: propsIsClosed,\n    onClose,\n    theme: propsTheme,\n    title,\n    variant: propsVariant,\n    styleVariant: propsStyleVariant,\n    ...forwardedProps\n  } = otherProps;\n\n  const theme = useTheme(propsTheme);\n  const variant = Object.values(AlertVariant).includes(propsVariant!) ? propsVariant : 'info';\n  const styleVariant = Object.values(AlertStyleVariant).includes(propsStyleVariant!) ? propsStyleVariant : 'default';\n\n  const format = useMessageFormatter(intlMessages);\n\n  const { color, icon } = getVariant(variant!, styleVariant!, theme);\n  const [isClosed, setIsClosed] = useState(propsIsClosed);\n\n  useEffect(() => {\n    setIsClosed(propsIsClosed);\n  }, [propsIsClosed]);\n\n  const handleClose = useCallback(() => {\n    if (onClose) {\n      onClose(true);\n    }\n    if (propsIsClosed === undefined || propsIsClosed === null) {\n      setIsClosed(true);\n    }\n  }, [onClose]);\n\n  return (\n    <StyledAlert\n      {...forwardedProps}\n      {...transientProps}\n      className={classNames(Alert.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n      $hasTitle={Boolean(title)}\n      $isClosable={isClosable}\n      $isClosed={isClosed}\n      $theme={theme}\n      $variant={variant}\n      $styleVariant={styleVariant}\n    >\n      <Flexbox className={`${Alert.className}__header`} justifyContent=\"space-between\">\n        <Flexbox className={`${Alert.className}-header__title`} gap=\"14px\" alignItems=\"center\">\n          <Icon icon={icon} color={color} />\n          {title ? <Text fontWeight={RedsiftTypographyFontWeightSemiBold}>{title}</Text> : null}\n        </Flexbox>\n\n        {isClosable ? (\n          <IconButton\n            aria-label={format('close')}\n            className={`${Alert.className}-header__icon-button`}\n            icon={mdiClose}\n            onClick={handleClose}\n            color={color}\n          />\n        ) : null}\n      </Flexbox>\n\n      {children ? <div className={`${Alert.className}__content`}>{children}</div> : null}\n    </StyledAlert>\n  );\n});\nAlert.className = CLASSNAME;\nAlert.displayName = COMPONENT_NAME;\n"],"names":["AlertVariant","success","error","warning","info","AlertStyleVariant","default","minimal","enUS","frFR","StyledAlert","styled","div","baseStyling","_ref","$hasTitle","$isClosable","$isClosed","$variant","$styleVariant","$theme","css","Theme","light","COMPONENT_NAME","CLASSNAME","getVariant","variant","styleVariant","theme","color","NotificationsColorPalette","icon","mdiInformation","mdiInformationOutline","mdiAlertCircle","mdiAlertOutline","mdiCheckCircle","mdiCheck","mdiAlert","mdiTriangleOutline","Alert","forwardRef","props","ref","transientProps","otherProps","getStylingTransientProps","children","className","isClosable","isClosed","propsIsClosed","onClose","propsTheme","title","propsVariant","propsStyleVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","includes","format","useMessageFormatter","intlMessages","setIsClosed","useState","useEffect","handleClose","useCallback","undefined","React","createElement","_extends","classNames","Boolean","Flexbox","justifyContent","gap","alignItems","Icon","Text","fontWeight","RedsiftTypographyFontWeightSemiBold","IconButton","mdiClose","onClick","displayName"],"mappings":"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"}
+{"version":3,"file":"Alert2.js","sources":["../../src/components/alert/types.ts","../../src/components/alert/intl/index.ts","../../src/components/alert/styles.ts","../../src/components/alert/Alert.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport {\n  ValueOf,\n  StylingProps,\n  StylingTransientProps,\n  InternalSpacingProps,\n  InternalSpacingTransientProps,\n  Theme,\n} from '../..';\n\n/**\n * Component variant.\n */\nexport const AlertVariant = {\n  success: 'success',\n  error: 'error',\n  warning: 'warning',\n  info: 'info',\n} as const;\nexport type AlertVariant = ValueOf<typeof AlertVariant>;\n\nexport const AlertStyleVariant = {\n  default: 'default',\n  minimal: 'minimal',\n} as const;\nexport type AlertStyleVariant = ValueOf<typeof AlertStyleVariant>;\n\n/**\n * Component props.\n *\n * `Alert` is container-like: alongside the positioning `StylingProps` it accepts\n * `InternalSpacingProps` (`padding`, `paddingTop`, …) with an `8px` default.\n * Prefer the default — see `DS-SPACING-01` in `docs/design-guidelines.md`.\n */\nexport interface AlertProps extends ComponentProps<'div'>, StylingProps, InternalSpacingProps {\n  /** Whether the component can be closed or not. */\n  isClosable?: boolean;\n  /** Whether the component is closed or not. Used for controlled version. */\n  isClosed?: boolean;\n  /** Method to handle component change. */\n  onClose?(isClosed: boolean): void;\n  /** Title. */\n  title?: string;\n  /** Theme. */\n  theme?: Theme;\n  /** Variant */\n  variant?: AlertVariant;\n  /** Style variant. */\n  styleVariant?: AlertStyleVariant;\n}\n\nexport interface StyledAlertProps extends ComponentProps<'div'>, StylingTransientProps, InternalSpacingTransientProps {\n  $hasTitle: boolean;\n  $isClosable: AlertProps['isClosable'];\n  $isClosed: AlertProps['isClosed'];\n  $variant: AlertProps['variant'];\n  $theme: AlertProps['theme'];\n  $styleVariant: AlertProps['styleVariant'];\n}\n","import enUS from './en-US.json';\nimport frFR from './fr-FR.json';\n\nexport default {\n  'en-US': enUS,\n  'fr-FR': frFR,\n};\n","import styled, { css } from 'styled-components';\nimport { baseStyling, baseInternalSpacing } from '../shared';\nimport { StyledAlertProps } from './types';\nimport { Theme } from '../../types';\n\n/**\n * Component style.\n */\nexport const StyledAlert = styled.div<StyledAlertProps>`\n  ${baseStyling}\n\n  /* Default padding — overridable via InternalSpacingProps (padding/paddingTop/…).\n     Declared before baseInternalSpacing so a consumer-passed value wins by source order. */\n  padding: 8px;\n  ${baseInternalSpacing}\n  ${({ $hasTitle, $isClosable, $isClosed, $variant, $styleVariant, $theme }) => css`\n    color: var(--redsift-color-neutral-${$theme === Theme.light ? 'x-dark-grey' : 'white'});\n    display: ${!$isClosed ? 'block' : 'none'};\n    background-color: ${$styleVariant == 'minimal'\n      ? `var(--redsift-color-neutral-${$theme !== Theme.light ? 'x-dark-grey' : 'white'})`\n      : `var(--redsift-color-${$theme}-components-alert-${$variant}-background)`};\n\n    border: ${$styleVariant == 'minimal'\n      ? `1px solid var(--redsift-color-${$theme}-components-alert-${$variant}-border)`\n      : 'none'};\n    border-radius: ${$styleVariant == 'minimal' ? '8px' : '4px'};\n\n    .redsift-alert-header__icon-button {\n      background-color: transparent;\n      padding: 0px;\n      .redsift-icon {\n        color: var(--redsift-color-neutral-x-dark-grey);\n      }\n\n      &:hover,\n      &:focus-visible {\n        background-color: var(--redsift-color-notifications-${$variant}-active);\n      }\n    }\n\n    .redsift-alert__content {\n      margin-top: ${$hasTitle ? '8px' : '-24px'};\n      margin-left: 38px;\n      ${$isClosable\n        ? css`\n            margin-right: 24px;\n          `\n        : ''};\n    }\n  `}\n`;\n","import React, { forwardRef, RefObject, useCallback, useEffect, useState } from 'react';\nimport classNames from 'classnames';\n\nimport { useMessageFormatter } from '../../react-aria/react-aria/i18n';\nimport intlMessages from './intl';\n\nimport {\n  mdiAlert,\n  mdiTriangleOutline,\n  mdiAlertCircle,\n  mdiAlertOutline,\n  mdiCheck,\n  mdiCheckCircle,\n  mdiClose,\n  mdiInformation,\n  mdiInformationOutline,\n} from '@redsift/icons';\nimport { IconButton } from '../icon-button';\nimport { NotificationsColorPalette, Comp, Theme, getContainerStylingTransientProps } from '../../types';\nimport { StyledAlert } from './styles';\nimport { AlertProps, AlertVariant, AlertStyleVariant } from './types';\nimport { Icon } from '../icon';\nimport { Text } from '../text';\nimport { Flexbox } from '../flexbox';\nimport { RedsiftTypographyFontWeightSemiBold } from '../../utils';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Alert';\nconst CLASSNAME = 'redsift-alert';\n\nconst getVariant = (variant: AlertVariant, styleVariant: AlertStyleVariant, theme: Theme) => {\n  switch (variant) {\n    case AlertVariant.info:\n    default:\n      return {\n        color: theme === Theme.light ? NotificationsColorPalette.info : 'white',\n        icon: styleVariant == 'default' ? mdiInformation : mdiInformationOutline,\n      };\n    case AlertVariant.error:\n      return {\n        color: theme === Theme.light ? NotificationsColorPalette.error : 'white',\n        icon: styleVariant == 'default' ? mdiAlertCircle : mdiAlertOutline,\n      };\n    case AlertVariant.success:\n      return {\n        color: theme === Theme.light ? NotificationsColorPalette.success : 'white',\n        icon: styleVariant == 'default' ? mdiCheckCircle : mdiCheck,\n      };\n    case AlertVariant.warning:\n      return {\n        color: theme === Theme.light ? NotificationsColorPalette.warning : 'white',\n        icon: styleVariant == 'default' ? mdiAlert : mdiTriangleOutline,\n      };\n  }\n};\n\n/**\n * Alert displays a short, important message that attracts the user's attention\n * without interrupting the user's task. Alerts come in four variants:\n * `success`, `warning`, `error`, and `info`.\n *\n * Style variants: `default` (filled icon) and `minimal` (outline icon).\n *\n * Alerts can be controlled (using `isClosed` and `onClose`) or uncontrolled\n * (internally manages its closed state with `isClosable`).\n *\n * @example\n * // Basic info alert\n * <Alert>Your session will expire in 5 minutes.</Alert>\n *\n * @example\n * // All variants with title\n * <Alert variant=\"success\" title=\"Success\">Operation completed.</Alert>\n * <Alert variant=\"warning\" title=\"Warning\">Please review your changes.</Alert>\n * <Alert variant=\"error\" title=\"Error\">Something went wrong.</Alert>\n * <Alert variant=\"info\" title=\"Info\">New features available.</Alert>\n *\n * @example\n * // Minimal style variant\n * <Alert variant=\"warning\" styleVariant=\"minimal\" title=\"Attention\">\n *   This action requires confirmation.\n * </Alert>\n *\n * @example\n * // Closable alert (uncontrolled - self-dismissing)\n * <Alert variant=\"info\" isClosable title=\"Tip\">\n *   You can dismiss this message.\n * </Alert>\n *\n * @example\n * // Controlled alert with external state\n * const [isClosed, setIsClosed] = useState(false);\n * <Alert\n *   variant=\"warning\"\n *   isClosable\n *   isClosed={isClosed}\n *   onClose={setIsClosed}\n *   title=\"Review Required\"\n * >\n *   Please check the form before submitting.\n * </Alert>\n *\n * @example\n * // Alert with rich content (buttons, links)\n * <Alert variant=\"warning\" title=\"Update Available\">\n *   <Flexbox flexDirection=\"column\" alignItems=\"flex-start\" gap=\"8px\">\n *     <Text>A new version is available.</Text>\n *     <Button color=\"warning\" variant=\"secondary\">Update Now</Button>\n *   </Flexbox>\n * </Alert>\n */\nexport const Alert: Comp<AlertProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { transientProps, otherProps } = getContainerStylingTransientProps(props);\n\n  const {\n    children,\n    className,\n    isClosable,\n    isClosed: propsIsClosed,\n    onClose,\n    theme: propsTheme,\n    title,\n    variant: propsVariant,\n    styleVariant: propsStyleVariant,\n    ...forwardedProps\n  } = otherProps;\n\n  const theme = useTheme(propsTheme);\n  const variant = Object.values(AlertVariant).includes(propsVariant!) ? propsVariant : 'info';\n  const styleVariant = Object.values(AlertStyleVariant).includes(propsStyleVariant!) ? propsStyleVariant : 'default';\n\n  const format = useMessageFormatter(intlMessages);\n\n  const { color, icon } = getVariant(variant!, styleVariant!, theme);\n  const [isClosed, setIsClosed] = useState(propsIsClosed);\n\n  useEffect(() => {\n    setIsClosed(propsIsClosed);\n  }, [propsIsClosed]);\n\n  const handleClose = useCallback(() => {\n    if (onClose) {\n      onClose(true);\n    }\n    if (propsIsClosed === undefined || propsIsClosed === null) {\n      setIsClosed(true);\n    }\n  }, [onClose]);\n\n  return (\n    <StyledAlert\n      {...forwardedProps}\n      {...transientProps}\n      className={classNames(Alert.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n      $hasTitle={Boolean(title)}\n      $isClosable={isClosable}\n      $isClosed={isClosed}\n      $theme={theme}\n      $variant={variant}\n      $styleVariant={styleVariant}\n    >\n      <Flexbox className={`${Alert.className}__header`} justifyContent=\"space-between\">\n        <Flexbox className={`${Alert.className}-header__title`} gap=\"14px\" alignItems=\"center\">\n          <Icon icon={icon} color={color} />\n          {title ? <Text fontWeight={RedsiftTypographyFontWeightSemiBold}>{title}</Text> : null}\n        </Flexbox>\n\n        {isClosable ? (\n          <IconButton\n            aria-label={format('close')}\n            className={`${Alert.className}-header__icon-button`}\n            icon={mdiClose}\n            onClick={handleClose}\n            color={color}\n          />\n        ) : null}\n      </Flexbox>\n\n      {children ? <div className={`${Alert.className}__content`}>{children}</div> : null}\n    </StyledAlert>\n  );\n});\nAlert.className = CLASSNAME;\nAlert.displayName = COMPONENT_NAME;\n"],"names":["AlertVariant","success","error","warning","info","AlertStyleVariant","default","minimal","enUS","frFR","StyledAlert","styled","div","baseStyling","baseInternalSpacing","_ref","$hasTitle","$isClosable","$isClosed","$variant","$styleVariant","$theme","css","Theme","light","COMPONENT_NAME","CLASSNAME","getVariant","variant","styleVariant","theme","color","NotificationsColorPalette","icon","mdiInformation","mdiInformationOutline","mdiAlertCircle","mdiAlertOutline","mdiCheckCircle","mdiCheck","mdiAlert","mdiTriangleOutline","Alert","forwardRef","props","ref","transientProps","otherProps","getContainerStylingTransientProps","children","className","isClosable","isClosed","propsIsClosed","onClose","propsTheme","title","propsVariant","propsStyleVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","includes","format","useMessageFormatter","intlMessages","setIsClosed","useState","useEffect","handleClose","useCallback","undefined","React","createElement","_extends","classNames","Boolean","Flexbox","justifyContent","gap","alignItems","Icon","Text","fontWeight","RedsiftTypographyFontWeightSemiBold","IconButton","mdiClose","onClick","displayName"],"mappings":"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"}

package/_internal/TextField.js

@@ -114,6 +114,17 @@ const StyledTextField = styled.div`
           `}
     }
 
+    /* Required indicator (DS-34): an asterisk, independent of the invalid state.
+       Rendered inside both the visible label and the (hidden) legend so the
+       fieldset notch reserves the same width. It inherits the label colour
+       (neutral by default, product colour on focus) — deliberately NOT red for a
+       plain required field. Red is reserved for the invalid state, which the
+       label colour already drives, so the asterisk turns red only when isInvalid. */
+    .redsift-text-field__asterisk {
+      margin-left: 2px;
+      color: inherit;
+    }
+
     .redsift-text-field__input-wrapper {
       align-items: flex-start;
       box-sizing: border-box;
@@ -608,6 +619,14 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     }
     setValue('');
   }, [onChange]);
+
+  // The asterisk is the required indicator, decoupled from the invalid (red
+  // border) state — see DS-34. aria-hidden because `aria-required` on the input
+  // already conveys the required state to assistive tech; the `*` is visual only.
+  const requiredMark = isRequired ? /*#__PURE__*/React__default.createElement("span", {
+    className: `${TextField.className}__asterisk`,
+    "aria-hidden": "true"
+  }, "*") : null;
   return /*#__PURE__*/React__default.createElement(StyledTextField, _extends({}, focusWithinProps, forwardedProps, transientProps, {
     $label: label,
     $hasContent: isFocusWithin || Boolean(isControlled ? propsValue : value) || Boolean(placeholder) || Boolean(pills && pills.length > 0),
@@ -617,7 +636,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     $isGradient: isGradient,
     $isDisabled: isDisabled,
     $isFocusVisible: isFocusVisible,
-    $isInvalid: isInvalid || isRequired && !(isControlled ? propsValue : value),
+    $isInvalid: isInvalid,
     $isRequired: isRequired,
     $isFocused: Boolean(isFocused || forceColor),
     $theme: theme,
@@ -630,9 +649,9 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
   }, /*#__PURE__*/React__default.createElement("legend", {
     id: labelId,
     className: `${TextField.className}-input-wrapper-fieldset__legend`
-  }, label ? /*#__PURE__*/React__default.createElement("span", null, label) : null)), label ? /*#__PURE__*/React__default.createElement("label", {
+  }, label ? /*#__PURE__*/React__default.createElement("span", null, label, requiredMark) : null)), label ? /*#__PURE__*/React__default.createElement("label", {
     className: `${TextField.className}__label`
-  }, /*#__PURE__*/React__default.createElement("span", null, label)) : null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("span", null, label, requiredMark)) : null, /*#__PURE__*/React__default.createElement("div", {
     className: `${TextField.className}__input-wrapper`
   }, leftIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends({
     color: isDisabled ? 'question' : 'black'
@@ -656,7 +675,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
       onFocusProps === null || onFocusProps === void 0 ? void 0 : onFocusProps(event);
     },
     "aria-disabled": isDisabled,
-    "aria-invalid": isInvalid || isRequired && !(isControlled ? propsValue : value),
+    "aria-invalid": isInvalid || undefined,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby || (label ? labelId : undefined),
     "aria-readonly": isReadOnly,
@@ -689,13 +708,13 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
   }, hasClearButton !== true && hasClearButton, {
     onClick: handleClear,
     className: "right clear"
-  })) : null, typeof internal === 'function' ? internal(isControlled ? propsValue : value, isDisabled, isInvalid || isRequired && !(isControlled ? propsValue : value), isRequired) : internal, (hasClearButton || internal) && after ? /*#__PURE__*/React__default.createElement("span", {
+  })) : null, typeof internal === 'function' ? internal(isControlled ? propsValue : value, isDisabled, isInvalid, isRequired) : internal, (hasClearButton || internal) && after ? /*#__PURE__*/React__default.createElement("span", {
     style: {
       borderLeft: '1px solid var(--redsift-color-neutral-mid-grey)',
       position: 'relative',
       top: '-2px'
     }
-  }) : null, typeof after === 'function' ? after(isControlled ? propsValue : value, isDisabled, isInvalid || isRequired && !(isControlled ? propsValue : value), isRequired) : after) : null));
+  }) : null, typeof after === 'function' ? after(isControlled ? propsValue : value, isDisabled, isInvalid, isRequired) : after) : null));
 });
 TextField.className = CLASSNAME;
 TextField.displayName = COMPONENT_NAME;

package/_internal/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sources":["../../src/components/text-field/types.ts","../../src/components/text-field/styles.ts","../../src/components/text-field/intl/index.ts","../../src/components/text-field/TextField.tsx"],"sourcesContent":["import { ChangeEvent, ComponentProps, MutableRefObject, ReactNode } from 'react';\nimport { ButtonsColorPalette, StylingProps, StylingTransientProps, Theme, ValueOf } from '../../types';\nimport { IconProps } from '../icon';\nimport { IconButtonProps } from '../icon-button';\nimport { PillProps } from '../pill';\nimport { HighlightNonAsciiOptions } from '../../utils/highlightNonAscii';\n\n/**\n * Component variant.\n */\nexport const TextFieldVariant = {\n  default: 'default',\n  underline: 'underline',\n} as const;\nexport type TextFieldVariant = ValueOf<typeof TextFieldVariant>;\n\n/**\n * Component color.\n */\nexport type TextFieldColor = ButtonsColorPalette;\n\n/**\n * Component props.\n */\nexport interface TextFieldProps extends Omit<ComponentProps<'div'>, 'onChange'>, StylingProps {\n  /** Whether the component can be autofocused. */\n  autoFocus?: boolean;\n  /** Color variant. */\n  color?: TextFieldColor;\n  /** Force color even when not focused. */\n  forceColor?: boolean;\n  /**\n   * Default value.\n   * Used for uncontrolled version.\n   */\n  defaultValue?: string;\n  /** Whether the clear button is displayed or not. */\n  hasClearButton?: boolean | Omit<Partial<IconButtonProps>, 'ref'>;\n  /** Place for icon buttons between the clear button and the separator. */\n  internal?:\n    | ReactNode\n    | ((value?: string, isDisabled?: boolean, isInvalid?: boolean, isRequired?: boolean) => ReactNode);\n  /** Place for icon buttons after the separator. */\n  after?: ReactNode | ((value?: string, isDisabled?: boolean, isInvalid?: boolean, isRequired?: boolean) => ReactNode);\n  /** Custom props to pass to the input element. */\n  inputProps?: ComponentProps<'input'>;\n  /** Custom ref object to pass to the input element. */\n  inputRef?: MutableRefObject<HTMLInputElement>;\n  /** @deprecated Whether the component should use the product colors or shades of grey. */\n  isColored?: boolean;\n  /** Whether the component is disabled or not. */\n  isDisabled?: boolean;\n  /** Whether the component is invalid or not. */\n  isInvalid?: boolean;\n  /** Whether the component is read only or not. */\n  isReadOnly?: boolean;\n  /** Whether the component is required or not. */\n  isRequired?: boolean;\n  /** Label */\n  label?: string;\n  /**\n   * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />\n   * Can also be a ReactElement.\n   */\n  leftIcon?: Omit<IconProps, 'ref'>;\n  /** Name to pass to the input element. */\n  name?: string;\n  /** Method to handle component change. */\n  onChange?(value?: string, name?: string, event?: ChangeEvent<HTMLInputElement>): void;\n  /** Method to handle component clear. */\n  onClear?(): void;\n  /** List of Pills. */\n  pills?: Omit<PillProps, 'ref'>[];\n  /** Placeholder. */\n  placeholder?: string;\n  /** Theme. */\n  theme?: Theme;\n  /** Input type. */\n  type?: string;\n  /**\n   * Input value.\n   * Used for controlled version.\n   */\n  value?: string;\n  /**\n   * TextField variant.\n   * @default 'default'\n   */\n  variant?: TextFieldVariant;\n  /**\n   * Highlight non-ASCII characters in the input. Useful for IDN domain names where\n   * Unicode lookalike characters can be confusing. Uses an overlay to display\n   * highlighted characters while maintaining input functionality.\n   *\n   * - `true`: enables both font change and background highlight\n   * - `{ font?: boolean, background?: boolean | string }`: fine-grained control\n   *\n   * @example\n   * // Both font and background (default)\n   * <TextField highlightNonAscii label=\"Domain\" />\n   *\n   * @example\n   * // Background only\n   * <TextField highlightNonAscii={{ font: false }} label=\"Domain\" />\n   */\n  highlightNonAscii?: boolean | HighlightNonAsciiOptions;\n}\n\nexport interface StyledTextFieldProps extends ComponentProps<'div'>, StylingTransientProps {\n  $label?: TextFieldProps['label'];\n  $color: TextFieldProps['color'];\n  $isGradient: boolean;\n  $hasLeftIcon: boolean;\n  $hasContent: boolean;\n  $hasHighlightOverlay: boolean;\n  $isDisabled: TextFieldProps['isDisabled'];\n  $isInvalid: TextFieldProps['isInvalid'];\n  $isFocused: boolean;\n  $isFocusVisible: boolean;\n  $isRequired: TextFieldProps['isRequired'];\n  $theme: TextFieldProps['theme'];\n  $variant: TextFieldProps['variant'];\n}\n\nexport interface StyledHighlightOverlayProps {\n  $font: boolean;\n  $background: boolean | string;\n  $hasInvisible?: boolean;\n}\n","import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledTextFieldProps, StyledHighlightOverlayProps, TextFieldVariant } from './types';\nimport { Theme, NotificationsColorPalette } from '../../types';\n\n/**\n * Component style.\n */\nexport const StyledTextField = styled.div<StyledTextFieldProps>`\n  height: fit-content;\n  position: relative;\n  width: fit-content;\n  margin: 0;\n  min-width: 0;\n  padding: 0;\n  ${baseStyling}\n\n  border: 0;\n  display: inline-flex;\n  flex-direction: column;\n  vertical-align: top;\n\n  ${({\n    $label,\n    $hasLeftIcon,\n    $hasContent,\n    $hasHighlightOverlay,\n    $isFocused,\n    $isDisabled,\n    $isInvalid,\n    $color,\n    $isGradient,\n    $theme,\n    $variant,\n  }) => css`\n    ${$isDisabled\n      ? css`\n          pointer-events: none;\n        `\n      : ''}\n\n    .redsift-text-field__label {\n      font-family: var(--redsift-typography-input-text-font-family);\n      font-size: var(--redsift-typography-input-text-font-size);\n      font-weight: var(--redsift-typography-input-text-font-weight);\n      line-height: var(--redsift-typography-input-text-line-height);\n      left: ${$hasLeftIcon && !$hasContent ? '32px' : '0'};\n      overflow: hidden;\n      pointer-events: none;\n      position: absolute;\n      text-overflow: ellipsis;\n      top: ${$hasContent ? '-8px' : '-7px'};\n      transform-origin: top left;\n      transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n        max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n      white-space: nowrap;\n      z-index: 1;\n\n      ${!$hasContent\n        ? css`\n            max-width: calc(100% - 24px);\n            transform: translate(${$variant === TextFieldVariant.underline ? '0px' : '14px'}, 16px) scale(1);\n          `\n        : css`\n            max-width: calc(133% - 32px);\n            transform: translate(${$variant === TextFieldVariant.underline ? '0px' : '14px'}, 1px) scale(0.733);\n          `}\n\n      ${!$isGradient\n        ? css`\n            color: var(\n              --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid\n                  ? 'error'\n                  : $isFocused\n                  ? $color\n                  : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}\n            );\n          `\n        : css`\n            background-color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'});\n            ${$variant !== TextFieldVariant.underline\n              ? css`\n                  padding-right: 7px;\n                  padding-left: 5px;\n                `\n              : ''}\n            > span {\n              background: var(\n                --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid\n                    ? 'error'\n                    : $isFocused\n                    ? $color\n                    : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}\n              );\n              background-clip: text;\n              color: transparent;\n            }\n          `}\n    }\n\n    .redsift-text-field__input-wrapper {\n      align-items: flex-start;\n      box-sizing: border-box;\n      cursor: text;\n      display: inline-flex;\n      min-height: 42px;\n      position: relative;\n    }\n\n    .redsift-text-field-input-wrapper__pills-and-input {\n      align-items: flex-start;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column-reverse;\n      flex-wrap: wrap;\n      flex: 1 1 auto;\n      padding-bottom: 7px;\n      ${$variant !== TextFieldVariant.underline && !$hasLeftIcon\n        ? css`\n            padding-left: 16px;\n          `\n        : ''}\n      ${$variant !== TextFieldVariant.underline\n        ? css`\n            padding-right: 16px;\n          `\n        : ''}\n      padding-top: ${$label ? '9px' : '7px'};\n\n      .redsift-pill {\n        margin: 3px 6px 3px 0;\n      }\n    }\n\n    .redsift-text-field-input-wrapper-pills-and-input__input {\n      background: none;\n      border: 0;\n      box-sizing: content-box;\n      display: flex;\n      flex: 1 1 auto;\n      font-family: ${$hasHighlightOverlay\n        ? 'var(--redsift-typography-font-family-inconsolata)'\n        : 'var(--redsift-typography-input-text-font-family)'};\n      font-size: var(--redsift-typography-input-text-font-size);\n      font-weight: var(--redsift-typography-input-text-font-weight);\n      line-height: var(--redsift-typography-input-text-line-height);\n      min-width: 0;\n      min-width: 100px;\n      padding: 2px 0;\n      width: 100%;\n\n      ${$isDisabled\n        ? css`\n            color: var(--redsift-color-grey-l2);\n          `\n        : $hasHighlightOverlay\n        ? css`\n            color: transparent;\n            caret-color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n          `\n        : css`\n            color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n          `}\n    }\n\n    .redsift-text-field-input-wrapper-pills-and-input__input-container {\n      position: relative;\n      display: flex;\n      flex: 1 1 auto;\n      min-width: 100px;\n      width: 100%;\n    }\n\n    .redsift-text-field-input-wrapper-pills-and-input__highlight-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      pointer-events: none;\n      font-family: var(--redsift-typography-font-family-inconsolata);\n      font-size: var(--redsift-typography-input-text-font-size);\n      font-weight: var(--redsift-typography-input-text-font-weight);\n      line-height: var(--redsift-typography-input-text-line-height);\n      padding: 2px 0;\n      white-space: pre;\n      overflow: hidden;\n      color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n\n      /* Remove padding from marks to maintain exact character alignment with input */\n      mark {\n        padding: 0;\n      }\n    }\n\n    .redsift-text-field-input-wrapper-pills-and-input__input::placeholder {\n      color: var(--redsift-color-neutral-mid-grey);\n    }\n\n    .redsift-text-field-input-wrapper-pills-and-input__input:focus {\n      outline: 0;\n    }\n\n    .redsift-text-field-input-wrapper__fieldset {\n      border-style: solid;\n      bottom: 0;\n      left: 1px;\n      margin: 0;\n      min-width: 0%;\n      overflow: hidden;\n      padding: 0 8px;\n      pointer-events: none;\n      position: absolute;\n      right: 0;\n      text-align: left;\n      top: -5px;\n\n      ${!$isGradient || $isDisabled || !$isFocused || $isInvalid\n        ? css`\n            ${$variant === TextFieldVariant.underline\n              ? css`\n                  border-bottom-width: 2px;\n                `\n              : css`\n                  border-radius: 4px;\n                  border-width: 2px;\n                `}\n            border-color: var(\n              --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid\n              ? 'error'\n              : $isFocused\n              ? $color\n              : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}\n            );\n          `\n        : css`\n            ${$variant === TextFieldVariant.underline\n              ? css`\n                  border-bottom: 2px solid transparent;\n                `\n              : css`\n                  border: 2px solid transparent;\n                  border-radius: 4px;\n                `}\n            background: transparent;\n            background-clip: padding-box, border-box;\n            background-origin: border-box;\n            background-image: linear-gradient(\n                90deg,\n                var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'}),\n                var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'})\n              ),\n              var(--redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-default);\n          `}\n    }\n\n    .redsift-text-field-input-wrapper-fieldset__legend {\n      display: block;\n      float: unset;\n      font-size: 11px;\n      height: 11px;\n      overflow: hidden;\n      padding: 0;\n      visibility: hidden;\n      white-space: nowrap;\n      width: auto;\n\n      ${!$hasContent\n        ? css`\n            max-width: 0.01px;\n            transition: max-width 50ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n          `\n        : css`\n            max-width: 100%;\n            transition: max-width 100ms cubic-bezier(0, 0, 0.2, 1) 50ms;\n          `}\n    }\n\n    .redsift-text-field-input-wrapper-fieldset__legend > span {\n      display: inline-block;\n      opacity: 0;\n      padding-left: 5px;\n      padding-right: 5px;\n      visibility: visible;\n    }\n\n    .redsift-text-field-input-wrapper__toolbar {\n      position: relative;\n      top: 9px;\n    }\n\n    .redsift-icon-button:not(.redsift-pill > .redsift-icon-button) {\n      padding: 2px;\n      position: relative;\n      top: -2px;\n      height: 28px;\n      width: 28px;\n    }\n\n    ${$variant !== TextFieldVariant.underline\n      ? css`\n          .redsift-icon.left {\n            padding-left: 12px;\n            padding-right: 8px;\n            line-height: 28px;\n          }\n\n          .redsift-text-field-input-wrapper__toolbar {\n            padding-right: 8px;\n          }\n        `\n      : css`\n          .redsift-icon.left {\n            padding-right: 8px;\n          }\n        `}\n\n    .redsift-icon.left,\n    .redsift-icon.right {\n      top: 9px;\n    }\n  `}\n`;\n\n/**\n * Resolves background color from prop value.\n * Handles: boolean (true=warning), palette colors, and custom CSS values.\n */\nconst resolveBackgroundColor = (background: true | string): string => {\n  if (background === true) {\n    return 'var(--redsift-color-notifications-warning-primary)';\n  }\n  // Check if it's a notification palette color name\n  const paletteColors = Object.values(NotificationsColorPalette);\n  if (paletteColors.includes(background as NotificationsColorPalette)) {\n    return `var(--redsift-color-notifications-${background}-primary)`;\n  }\n  // Assume it's a CSS color value (hex, rgb, etc.)\n  return background;\n};\n\n/**\n * Styled marker for highlighted non-ASCII characters in TextField.\n */\nexport const StyledHighlightMarker = styled.mark<StyledHighlightOverlayProps>`\n  ${({ $font, $background, $hasInvisible }) => css`\n    /* Reset the default <mark> styling */\n    background: ${$background ? resolveBackgroundColor($background) : 'transparent'};\n    color: inherit;\n    border-radius: 2px;\n    padding: 0 1px;\n    position: relative;\n\n    /* Use Inconsolata with bold weight to break kerning and reveal lookalike chars */\n    ${$font &&\n    css`\n      font-family: var(--redsift-typography-font-family-inconsolata);\n      font-weight: 700;\n    `}\n\n    /* Show a visual indicator for invisible/zero-width characters */\n    ${$hasInvisible &&\n    css`\n      &::after {\n        content: '•';\n        position: absolute;\n        bottom: 0;\n        left: 50%;\n        transform: translateX(-50%);\n        color: var(--redsift-color-neutral-x-dark-grey);\n        ${$background &&\n        css`\n          background-color: ${resolveBackgroundColor($background)};\n          opacity: 0.8;\n        `}\n        border-radius: 2px;\n        pointer-events: none;\n      }\n    `}\n  `}\n`;\n","import enUS from './en-US.json';\nimport frFR from './fr-FR.json';\n\nexport default {\n  'en-US': enUS,\n  'fr-FR': frFR,\n};\n","import React, {\n  MouseEvent,\n  ComponentProps,\n  forwardRef,\n  MutableRefObject,\n  ReactNode,\n  useCallback,\n  useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { useFocusRing } from '../../react-aria/react-aria/focus';\nimport { useFocusWithin } from '../../react-aria/react-aria/interactions';\nimport { ButtonsColorPalette, Comp, getStylingTransientProps } from '../../types';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport {\n  isNonAscii,\n  containsInvisibleChars,\n  normalizeHighlightOptions,\n  NormalizedHighlightOptions,\n} from '../../utils/highlightNonAscii';\nimport { TextFieldProps, TextFieldVariant } from './types';\nimport { StyledTextField, StyledHighlightMarker } from './styles';\nimport { Icon } from '../../components/icon';\nimport { mdiClose } from '@redsift/icons';\nimport { Flexbox } from '../flexbox';\nimport { IconButton } from '../icon-button';\nimport { Pill } from '../pill';\nimport { useTheme } from '../theme';\nimport { useMessageFormatter } from '../../react-aria/react-aria/i18n';\nimport { useId } from '../../utils';\n\nimport intlMessages from './intl';\n\nconst COMPONENT_NAME = 'TextField';\nconst CLASSNAME = 'redsift-text-field';\n\n/**\n * Processes a string and wraps consecutive non-ASCII characters in highlight markers.\n * Groups consecutive non-ASCII characters to minimize DOM nodes.\n * Invisible characters are NOT replaced (to maintain width alignment) but marked\n * with a $hasInvisible prop for CSS-based visual indication.\n */\nconst highlightNonAsciiChars = (text: string, options: NormalizedHighlightOptions): ReactNode[] => {\n  const result: ReactNode[] = [];\n  let currentAscii = '';\n  let currentNonAscii = '';\n  let keyIndex = 0;\n\n  // Use Array.from to correctly handle Unicode surrogate pairs (e.g., emojis)\n  const chars = Array.from(text);\n\n  for (const char of chars) {\n    if (isNonAscii(char)) {\n      // Flush ASCII buffer\n      if (currentAscii) {\n        result.push(currentAscii);\n        currentAscii = '';\n      }\n      currentNonAscii += char;\n    } else {\n      // Flush non-ASCII buffer\n      if (currentNonAscii) {\n        result.push(\n          <StyledHighlightMarker\n            key={keyIndex++}\n            $font={options.font}\n            $background={options.background}\n            $hasInvisible={containsInvisibleChars(currentNonAscii)}\n          >\n            {currentNonAscii}\n          </StyledHighlightMarker>\n        );\n        currentNonAscii = '';\n      }\n      currentAscii += char;\n    }\n  }\n\n  // Flush remaining buffers\n  if (currentAscii) {\n    result.push(currentAscii);\n  }\n  if (currentNonAscii) {\n    result.push(\n      <StyledHighlightMarker\n        key={keyIndex}\n        $font={options.font}\n        $background={options.background}\n        $hasInvisible={containsInvisibleChars(currentNonAscii)}\n      >\n        {currentNonAscii}\n      </StyledHighlightMarker>\n    );\n  }\n\n  return result;\n};\n\n/**\n * TextField allows users to enter single-line text input. Supports validation,\n * icons, clear button, and controlled/uncontrolled modes.\n *\n * Variants: `default` (bordered), `underline` (bottom border only)\n * Colors: `primary`, `success`, `warning`, `error`, `info`, `question`, `neutral`, `radar`\n *\n * @example\n * // Basic text field\n * <TextField label=\"Email\" type=\"email\" placeholder=\"Enter email...\" />\n *\n * @example\n * // Controlled with validation\n * const [username, setUsername] = useState('');\n * <TextField\n *   label=\"Username\"\n *   value={username}\n *   onChange={setUsername}\n *   isInvalid={username.length < 3}\n *   isRequired\n * />\n *\n * @example\n * // Search field with icon and clear button\n * <TextField\n *   label=\"Search\"\n *   leftIcon={{ icon: mdiMagnify }}\n *   hasClearButton\n *   onClear={() => setQuery('')}\n *   value={query}\n *   onChange={setQuery}\n * />\n *\n * @example\n * // Underline variant\n * <TextField label=\"Name\" variant=\"underline\" />\n *\n * @example\n * // States\n * <TextField label=\"Disabled\" isDisabled />\n * <TextField label=\"Read-only\" isReadOnly value=\"Cannot edit\" />\n * <TextField label=\"Required\" isRequired />\n * <TextField label=\"Invalid\" isInvalid />\n *\n * @example\n * // With internal buttons (copy, generate, etc.)\n * <TextField\n *   label=\"API Key\"\n *   value={apiKey}\n *   internal={(props) => (\n *     <IconButton icon={mdiContentCopy} aria-label=\"Copy\" onClick={handleCopy} />\n *   )}\n * />\n *\n * @example\n * // With pills (tag input pattern)\n * <TextField\n *   label=\"Tags\"\n *   pills={tags.map(tag => ({ label: tag, onDelete: () => removeTag(tag) }))}\n * />\n *\n * @example\n * // Colored field (Radar AI)\n * <TextField label=\"Radar Prompt\" color=\"radar\" />\n */\nexport const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { transientProps, otherProps } = getStylingTransientProps(props);\n\n  const {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    after,\n    autoFocus,\n    className,\n    color: propsColor,\n    defaultValue = '',\n    forceColor,\n    hasClearButton,\n    highlightNonAscii,\n    inputProps,\n    inputRef,\n    internal,\n    isColored = true,\n    isDisabled,\n    isInvalid,\n    isReadOnly,\n    isRequired,\n    label,\n    leftIcon,\n    name,\n    onBlur: onBlurProps,\n    onChange,\n    onClear,\n    onFocus: onFocusProps,\n    pills,\n    placeholder,\n    theme: propsTheme,\n    type,\n    value: propsValue,\n    variant = TextFieldVariant.default,\n    ...forwardedProps\n  } = otherProps;\n\n  const theme = useTheme(propsTheme);\n  const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : isColored ? 'primary' : 'grey';\n  const isGradient = color === ButtonsColorPalette.radar;\n\n  const format = useMessageFormatter(intlMessages);\n\n  const {\n    isFocusVisible,\n    isFocused,\n    focusProps: { onFocus, onBlur },\n  } = useFocusRing({\n    autoFocus,\n  });\n  const [isFocusWithin, setFocusWithin] = useState(Boolean(autoFocus));\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: (isFocusWithin) => setFocusWithin(isFocusWithin),\n  });\n\n  const [value, setValue] = useState(defaultValue);\n  const isControlled = propsValue !== null && propsValue !== undefined;\n\n  const [labelId] = useId();\n\n  // Normalize highlight options - force font: false since the input uses Inconsolata directly\n  const highlightOptions = highlightNonAscii ? { ...normalizeHighlightOptions(highlightNonAscii), font: false } : null;\n\n  warnIfNoAccessibleLabelFound(props as ComponentProps<'label'>, [label], 'TextField');\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (isDisabled || isReadOnly) {\n        return;\n      }\n\n      if (onChange) {\n        onChange(event.target.value, name, event);\n      } else {\n        setValue(event.target.value);\n      }\n    },\n    [onChange]\n  );\n\n  const handleClear = useCallback(() => {\n    if (isDisabled || isReadOnly) {\n      return;\n    }\n\n    if (onChange) {\n      onChange('');\n    }\n    if (onClear) {\n      onClear();\n    }\n    if (hasClearButton && hasClearButton !== true && hasClearButton.onClick) {\n      hasClearButton.onClick({} as MouseEvent<HTMLButtonElement>);\n    }\n    setValue('');\n  }, [onChange]);\n\n  return (\n    <StyledTextField\n      {...focusWithinProps}\n      {...forwardedProps}\n      {...transientProps}\n      $label={label}\n      $hasContent={\n        isFocusWithin ||\n        Boolean(isControlled ? propsValue : value) ||\n        Boolean(placeholder) ||\n        Boolean(pills && pills.length > 0)\n      }\n      $hasLeftIcon={Boolean(leftIcon)}\n      $hasHighlightOverlay={Boolean(highlightNonAscii)}\n      $color={color}\n      $isGradient={isGradient}\n      $isDisabled={isDisabled}\n      $isFocusVisible={isFocusVisible}\n      $isInvalid={isInvalid || (isRequired && !(isControlled ? propsValue : value))}\n      $isRequired={isRequired}\n      $isFocused={Boolean(isFocused || forceColor)}\n      $theme={theme}\n      $variant={variant}\n      className={classNames(TextField.className, className)}\n      ref={ref as MutableRefObject<HTMLDivElement>}\n    >\n      <fieldset aria-hidden=\"true\" className={`${TextField.className}-input-wrapper__fieldset`}>\n        <legend id={labelId} className={`${TextField.className}-input-wrapper-fieldset__legend`}>\n          {label ? <span>{label}</span> : null}\n        </legend>\n      </fieldset>\n      {label ? (\n        <label className={`${TextField.className}__label`}>\n          <span>{label}</span>\n        </label>\n      ) : null}\n      <div className={`${TextField.className}__input-wrapper`}>\n        {leftIcon ? (\n          <Icon color={isDisabled ? 'question' : 'black'} {...leftIcon} aria-hidden=\"true\" className=\"left\" />\n        ) : null}\n        <div className={`${TextField.className}-input-wrapper__pills-and-input`}>\n          <div className={`${TextField.className}-input-wrapper-pills-and-input__input-container`}>\n            {highlightOptions ? (\n              <div\n                className={`${TextField.className}-input-wrapper-pills-and-input__highlight-overlay`}\n                aria-hidden=\"true\"\n              >\n                {highlightNonAsciiChars((isControlled ? propsValue : value) || '', highlightOptions)}\n              </div>\n            ) : null}\n            <input\n              {...inputProps}\n              onBlur={(event) => {\n                onBlur?.(event);\n                onBlurProps?.(event);\n              }}\n              onFocus={(event) => {\n                onFocus?.(event);\n                onFocusProps?.(event);\n              }}\n              aria-disabled={isDisabled}\n              aria-invalid={isInvalid || (isRequired && !(isControlled ? propsValue : value))}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledby || (label ? labelId : undefined)}\n              aria-readonly={isReadOnly}\n              aria-required={isRequired}\n              autoFocus={autoFocus}\n              className={`${TextField.className}-input-wrapper-pills-and-input__input`}\n              disabled={isDisabled}\n              name={name}\n              onChange={handleChange}\n              placeholder={placeholder}\n              ref={inputRef as MutableRefObject<HTMLInputElement>}\n              type={type}\n              value={isControlled ? propsValue : value}\n            />\n          </div>\n          <div>\n            {pills?.map((pill, index) => (\n              <Pill theme={theme} key={`${labelId}-pill-${index}`} color=\"blue\" size=\"small\" {...pill} />\n            ))}\n          </div>\n        </div>\n        {hasClearButton || internal || after ? (\n          <Flexbox className={`${TextField.className}-input-wrapper__toolbar`} gap=\"8px\">\n            {hasClearButton ? (\n              <IconButton\n                theme={theme}\n                aria-label={label ? format('clear-field', { label }) : format('clear')}\n                color=\"grey\"\n                isDisabled={isDisabled}\n                icon={mdiClose}\n                {...(hasClearButton !== true && hasClearButton)}\n                onClick={handleClear}\n                className=\"right clear\"\n              />\n            ) : null}\n            {typeof internal === 'function'\n              ? internal(\n                  isControlled ? propsValue : value,\n                  isDisabled,\n                  isInvalid || (isRequired && !(isControlled ? propsValue : value)),\n                  isRequired\n                )\n              : internal}\n            {(hasClearButton || internal) && after ? (\n              <span\n                style={{\n                  borderLeft: '1px solid var(--redsift-color-neutral-mid-grey)',\n                  position: 'relative',\n                  top: '-2px',\n                }}\n              />\n            ) : null}\n            {typeof after === 'function'\n              ? after(\n                  isControlled ? propsValue : value,\n                  isDisabled,\n                  isInvalid || (isRequired && !(isControlled ? propsValue : value)),\n                  isRequired\n                )\n              : after}\n          </Flexbox>\n        ) : null}\n      </div>\n    </StyledTextField>\n  );\n});\nTextField.className = CLASSNAME;\nTextField.displayName = COMPONENT_NAME;\n"],"names":["TextFieldVariant","default","underline","StyledTextField","styled","div","baseStyling","_ref","$label","$hasLeftIcon","$hasContent","$hasHighlightOverlay","$isFocused","$isDisabled","$isInvalid","$color","$isGradient","$theme","$variant","css","Theme","dark","resolveBackgroundColor","background","paletteColors","Object","values","NotificationsColorPalette","includes","StyledHighlightMarker","mark","_ref2","$font","$background","$hasInvisible","enUS","frFR","COMPONENT_NAME","CLASSNAME","highlightNonAsciiChars","text","options","result","currentAscii","currentNonAscii","keyIndex","chars","Array","from","char","isNonAscii","push","React","createElement","key","font","containsInvisibleChars","TextField","forwardRef","props","ref","transientProps","otherProps","getStylingTransientProps","ariaLabel","ariaLabelledby","after","autoFocus","className","color","propsColor","defaultValue","forceColor","hasClearButton","highlightNonAscii","inputProps","inputRef","internal","isColored","isDisabled","isInvalid","isReadOnly","isRequired","label","leftIcon","name","onBlur","onBlurProps","onChange","onClear","onFocus","onFocusProps","pills","placeholder","theme","propsTheme","type","value","propsValue","variant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","ButtonsColorPalette","isGradient","radar","format","useMessageFormatter","intlMessages","isFocusVisible","isFocused","focusProps","useFocusRing","isFocusWithin","setFocusWithin","useState","Boolean","focusWithinProps","useFocusWithin","onFocusWithinChange","setValue","isControlled","undefined","labelId","useId","highlightOptions","_objectSpread","normalizeHighlightOptions","warnIfNoAccessibleLabelFound","handleChange","useCallback","event","target","handleClear","onClick","_extends","length","$isFocusVisible","$isRequired","classNames","id","Icon","disabled","map","pill","index","Pill","size","Flexbox","gap","IconButton","icon","mdiClose","style","borderLeft","position","top","displayName"],"mappings":"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"}
+{"version":3,"file":"TextField.js","sources":["../../src/components/text-field/types.ts","../../src/components/text-field/styles.ts","../../src/components/text-field/intl/index.ts","../../src/components/text-field/TextField.tsx"],"sourcesContent":["import { ChangeEvent, ComponentProps, MutableRefObject, ReactNode } from 'react';\nimport { ButtonsColorPalette, StylingProps, StylingTransientProps, Theme, ValueOf } from '../../types';\nimport { IconProps } from '../icon';\nimport { IconButtonProps } from '../icon-button';\nimport { PillProps } from '../pill';\nimport { HighlightNonAsciiOptions } from '../../utils/highlightNonAscii';\n\n/**\n * Component variant.\n */\nexport const TextFieldVariant = {\n  default: 'default',\n  underline: 'underline',\n} as const;\nexport type TextFieldVariant = ValueOf<typeof TextFieldVariant>;\n\n/**\n * Component color.\n */\nexport type TextFieldColor = ButtonsColorPalette;\n\n/**\n * Component props.\n */\nexport interface TextFieldProps extends Omit<ComponentProps<'div'>, 'onChange'>, StylingProps {\n  /** Whether the component can be autofocused. */\n  autoFocus?: boolean;\n  /** Color variant. */\n  color?: TextFieldColor;\n  /** Force color even when not focused. */\n  forceColor?: boolean;\n  /**\n   * Default value.\n   * Used for uncontrolled version.\n   */\n  defaultValue?: string;\n  /** Whether the clear button is displayed or not. */\n  hasClearButton?: boolean | Omit<Partial<IconButtonProps>, 'ref'>;\n  /** Place for icon buttons between the clear button and the separator. */\n  internal?:\n    | ReactNode\n    | ((value?: string, isDisabled?: boolean, isInvalid?: boolean, isRequired?: boolean) => ReactNode);\n  /** Place for icon buttons after the separator. */\n  after?: ReactNode | ((value?: string, isDisabled?: boolean, isInvalid?: boolean, isRequired?: boolean) => ReactNode);\n  /** Custom props to pass to the input element. */\n  inputProps?: ComponentProps<'input'>;\n  /** Custom ref object to pass to the input element. */\n  inputRef?: MutableRefObject<HTMLInputElement>;\n  /** @deprecated Whether the component should use the product colors or shades of grey. */\n  isColored?: boolean;\n  /** Whether the component is disabled or not. */\n  isDisabled?: boolean;\n  /**\n   * Whether the component is invalid or not. This is the *only* trigger for the\n   * error (red) border and `aria-invalid`; drive it yourself (e.g. on blur) for\n   * touch-based validation. `isRequired` no longer implies it.\n   */\n  isInvalid?: boolean;\n  /** Whether the component is read only or not. */\n  isReadOnly?: boolean;\n  /**\n   * Whether the component is required or not. Renders an asterisk (*) next to\n   * the label and sets `aria-required`. The asterisk inherits the label colour\n   * (neutral by default); it does **not** set the error border and is not red on\n   * its own — pass `isInvalid` for the red/error state.\n   */\n  isRequired?: boolean;\n  /** Label */\n  label?: string;\n  /**\n   * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />\n   * Can also be a ReactElement.\n   */\n  leftIcon?: Omit<IconProps, 'ref'>;\n  /** Name to pass to the input element. */\n  name?: string;\n  /** Method to handle component change. */\n  onChange?(value?: string, name?: string, event?: ChangeEvent<HTMLInputElement>): void;\n  /** Method to handle component clear. */\n  onClear?(): void;\n  /** List of Pills. */\n  pills?: Omit<PillProps, 'ref'>[];\n  /** Placeholder. */\n  placeholder?: string;\n  /** Theme. */\n  theme?: Theme;\n  /** Input type. */\n  type?: string;\n  /**\n   * Input value.\n   * Used for controlled version.\n   */\n  value?: string;\n  /**\n   * TextField variant.\n   * @default 'default'\n   */\n  variant?: TextFieldVariant;\n  /**\n   * Highlight non-ASCII characters in the input. Useful for IDN domain names where\n   * Unicode lookalike characters can be confusing. Uses an overlay to display\n   * highlighted characters while maintaining input functionality.\n   *\n   * - `true`: enables both font change and background highlight\n   * - `{ font?: boolean, background?: boolean | string }`: fine-grained control\n   *\n   * @example\n   * // Both font and background (default)\n   * <TextField highlightNonAscii label=\"Domain\" />\n   *\n   * @example\n   * // Background only\n   * <TextField highlightNonAscii={{ font: false }} label=\"Domain\" />\n   */\n  highlightNonAscii?: boolean | HighlightNonAsciiOptions;\n}\n\nexport interface StyledTextFieldProps extends ComponentProps<'div'>, StylingTransientProps {\n  $label?: TextFieldProps['label'];\n  $color: TextFieldProps['color'];\n  $isGradient: boolean;\n  $hasLeftIcon: boolean;\n  $hasContent: boolean;\n  $hasHighlightOverlay: boolean;\n  $isDisabled: TextFieldProps['isDisabled'];\n  $isInvalid: TextFieldProps['isInvalid'];\n  $isFocused: boolean;\n  $isFocusVisible: boolean;\n  $isRequired: TextFieldProps['isRequired'];\n  $theme: TextFieldProps['theme'];\n  $variant: TextFieldProps['variant'];\n}\n\nexport interface StyledHighlightOverlayProps {\n  $font: boolean;\n  $background: boolean | string;\n  $hasInvisible?: boolean;\n}\n","import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledTextFieldProps, StyledHighlightOverlayProps, TextFieldVariant } from './types';\nimport { Theme, NotificationsColorPalette } from '../../types';\n\n/**\n * Component style.\n */\nexport const StyledTextField = styled.div<StyledTextFieldProps>`\n  height: fit-content;\n  position: relative;\n  width: fit-content;\n  margin: 0;\n  min-width: 0;\n  padding: 0;\n  ${baseStyling}\n\n  border: 0;\n  display: inline-flex;\n  flex-direction: column;\n  vertical-align: top;\n\n  ${({\n    $label,\n    $hasLeftIcon,\n    $hasContent,\n    $hasHighlightOverlay,\n    $isFocused,\n    $isDisabled,\n    $isInvalid,\n    $color,\n    $isGradient,\n    $theme,\n    $variant,\n  }) => css`\n    ${$isDisabled\n      ? css`\n          pointer-events: none;\n        `\n      : ''}\n\n    .redsift-text-field__label {\n      font-family: var(--redsift-typography-input-text-font-family);\n      font-size: var(--redsift-typography-input-text-font-size);\n      font-weight: var(--redsift-typography-input-text-font-weight);\n      line-height: var(--redsift-typography-input-text-line-height);\n      left: ${$hasLeftIcon && !$hasContent ? '32px' : '0'};\n      overflow: hidden;\n      pointer-events: none;\n      position: absolute;\n      text-overflow: ellipsis;\n      top: ${$hasContent ? '-8px' : '-7px'};\n      transform-origin: top left;\n      transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n        max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n      white-space: nowrap;\n      z-index: 1;\n\n      ${!$hasContent\n        ? css`\n            max-width: calc(100% - 24px);\n            transform: translate(${$variant === TextFieldVariant.underline ? '0px' : '14px'}, 16px) scale(1);\n          `\n        : css`\n            max-width: calc(133% - 32px);\n            transform: translate(${$variant === TextFieldVariant.underline ? '0px' : '14px'}, 1px) scale(0.733);\n          `}\n\n      ${!$isGradient\n        ? css`\n            color: var(\n              --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid\n                  ? 'error'\n                  : $isFocused\n                  ? $color\n                  : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}\n            );\n          `\n        : css`\n            background-color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'});\n            ${$variant !== TextFieldVariant.underline\n              ? css`\n                  padding-right: 7px;\n                  padding-left: 5px;\n                `\n              : ''}\n            > span {\n              background: var(\n                --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid\n                    ? 'error'\n                    : $isFocused\n                    ? $color\n                    : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}\n              );\n              background-clip: text;\n              color: transparent;\n            }\n          `}\n    }\n\n    /* Required indicator (DS-34): an asterisk, independent of the invalid state.\n       Rendered inside both the visible label and the (hidden) legend so the\n       fieldset notch reserves the same width. It inherits the label colour\n       (neutral by default, product colour on focus) — deliberately NOT red for a\n       plain required field. Red is reserved for the invalid state, which the\n       label colour already drives, so the asterisk turns red only when isInvalid. */\n    .redsift-text-field__asterisk {\n      margin-left: 2px;\n      color: inherit;\n    }\n\n    .redsift-text-field__input-wrapper {\n      align-items: flex-start;\n      box-sizing: border-box;\n      cursor: text;\n      display: inline-flex;\n      min-height: 42px;\n      position: relative;\n    }\n\n    .redsift-text-field-input-wrapper__pills-and-input {\n      align-items: flex-start;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column-reverse;\n      flex-wrap: wrap;\n      flex: 1 1 auto;\n      padding-bottom: 7px;\n      ${$variant !== TextFieldVariant.underline && !$hasLeftIcon\n        ? css`\n            padding-left: 16px;\n          `\n        : ''}\n      ${$variant !== TextFieldVariant.underline\n        ? css`\n            padding-right: 16px;\n          `\n        : ''}\n      padding-top: ${$label ? '9px' : '7px'};\n\n      .redsift-pill {\n        margin: 3px 6px 3px 0;\n      }\n    }\n\n    .redsift-text-field-input-wrapper-pills-and-input__input {\n      background: none;\n      border: 0;\n      box-sizing: content-box;\n      display: flex;\n      flex: 1 1 auto;\n      font-family: ${$hasHighlightOverlay\n        ? 'var(--redsift-typography-font-family-inconsolata)'\n        : 'var(--redsift-typography-input-text-font-family)'};\n      font-size: var(--redsift-typography-input-text-font-size);\n      font-weight: var(--redsift-typography-input-text-font-weight);\n      line-height: var(--redsift-typography-input-text-line-height);\n      min-width: 0;\n      min-width: 100px;\n      padding: 2px 0;\n      width: 100%;\n\n      ${$isDisabled\n        ? css`\n            color: var(--redsift-color-grey-l2);\n          `\n        : $hasHighlightOverlay\n        ? css`\n            color: transparent;\n            caret-color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n          `\n        : css`\n            color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n          `}\n    }\n\n    .redsift-text-field-input-wrapper-pills-and-input__input-container {\n      position: relative;\n      display: flex;\n      flex: 1 1 auto;\n      min-width: 100px;\n      width: 100%;\n    }\n\n    .redsift-text-field-input-wrapper-pills-and-input__highlight-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      pointer-events: none;\n      font-family: var(--redsift-typography-font-family-inconsolata);\n      font-size: var(--redsift-typography-input-text-font-size);\n      font-weight: var(--redsift-typography-input-text-font-weight);\n      line-height: var(--redsift-typography-input-text-line-height);\n      padding: 2px 0;\n      white-space: pre;\n      overflow: hidden;\n      color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n\n      /* Remove padding from marks to maintain exact character alignment with input */\n      mark {\n        padding: 0;\n      }\n    }\n\n    .redsift-text-field-input-wrapper-pills-and-input__input::placeholder {\n      color: var(--redsift-color-neutral-mid-grey);\n    }\n\n    .redsift-text-field-input-wrapper-pills-and-input__input:focus {\n      outline: 0;\n    }\n\n    .redsift-text-field-input-wrapper__fieldset {\n      border-style: solid;\n      bottom: 0;\n      left: 1px;\n      margin: 0;\n      min-width: 0%;\n      overflow: hidden;\n      padding: 0 8px;\n      pointer-events: none;\n      position: absolute;\n      right: 0;\n      text-align: left;\n      top: -5px;\n\n      ${!$isGradient || $isDisabled || !$isFocused || $isInvalid\n        ? css`\n            ${$variant === TextFieldVariant.underline\n              ? css`\n                  border-bottom-width: 2px;\n                `\n              : css`\n                  border-radius: 4px;\n                  border-width: 2px;\n                `}\n            border-color: var(\n              --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid\n              ? 'error'\n              : $isFocused\n              ? $color\n              : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}\n            );\n          `\n        : css`\n            ${$variant === TextFieldVariant.underline\n              ? css`\n                  border-bottom: 2px solid transparent;\n                `\n              : css`\n                  border: 2px solid transparent;\n                  border-radius: 4px;\n                `}\n            background: transparent;\n            background-clip: padding-box, border-box;\n            background-origin: border-box;\n            background-image: linear-gradient(\n                90deg,\n                var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'}),\n                var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'})\n              ),\n              var(--redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-default);\n          `}\n    }\n\n    .redsift-text-field-input-wrapper-fieldset__legend {\n      display: block;\n      float: unset;\n      font-size: 11px;\n      height: 11px;\n      overflow: hidden;\n      padding: 0;\n      visibility: hidden;\n      white-space: nowrap;\n      width: auto;\n\n      ${!$hasContent\n        ? css`\n            max-width: 0.01px;\n            transition: max-width 50ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n          `\n        : css`\n            max-width: 100%;\n            transition: max-width 100ms cubic-bezier(0, 0, 0.2, 1) 50ms;\n          `}\n    }\n\n    .redsift-text-field-input-wrapper-fieldset__legend > span {\n      display: inline-block;\n      opacity: 0;\n      padding-left: 5px;\n      padding-right: 5px;\n      visibility: visible;\n    }\n\n    .redsift-text-field-input-wrapper__toolbar {\n      position: relative;\n      top: 9px;\n    }\n\n    .redsift-icon-button:not(.redsift-pill > .redsift-icon-button) {\n      padding: 2px;\n      position: relative;\n      top: -2px;\n      height: 28px;\n      width: 28px;\n    }\n\n    ${$variant !== TextFieldVariant.underline\n      ? css`\n          .redsift-icon.left {\n            padding-left: 12px;\n            padding-right: 8px;\n            line-height: 28px;\n          }\n\n          .redsift-text-field-input-wrapper__toolbar {\n            padding-right: 8px;\n          }\n        `\n      : css`\n          .redsift-icon.left {\n            padding-right: 8px;\n          }\n        `}\n\n    .redsift-icon.left,\n    .redsift-icon.right {\n      top: 9px;\n    }\n  `}\n`;\n\n/**\n * Resolves background color from prop value.\n * Handles: boolean (true=warning), palette colors, and custom CSS values.\n */\nconst resolveBackgroundColor = (background: true | string): string => {\n  if (background === true) {\n    return 'var(--redsift-color-notifications-warning-primary)';\n  }\n  // Check if it's a notification palette color name\n  const paletteColors = Object.values(NotificationsColorPalette);\n  if (paletteColors.includes(background as NotificationsColorPalette)) {\n    return `var(--redsift-color-notifications-${background}-primary)`;\n  }\n  // Assume it's a CSS color value (hex, rgb, etc.)\n  return background;\n};\n\n/**\n * Styled marker for highlighted non-ASCII characters in TextField.\n */\nexport const StyledHighlightMarker = styled.mark<StyledHighlightOverlayProps>`\n  ${({ $font, $background, $hasInvisible }) => css`\n    /* Reset the default <mark> styling */\n    background: ${$background ? resolveBackgroundColor($background) : 'transparent'};\n    color: inherit;\n    border-radius: 2px;\n    padding: 0 1px;\n    position: relative;\n\n    /* Use Inconsolata with bold weight to break kerning and reveal lookalike chars */\n    ${$font &&\n    css`\n      font-family: var(--redsift-typography-font-family-inconsolata);\n      font-weight: 700;\n    `}\n\n    /* Show a visual indicator for invisible/zero-width characters */\n    ${$hasInvisible &&\n    css`\n      &::after {\n        content: '•';\n        position: absolute;\n        bottom: 0;\n        left: 50%;\n        transform: translateX(-50%);\n        color: var(--redsift-color-neutral-x-dark-grey);\n        ${$background &&\n        css`\n          background-color: ${resolveBackgroundColor($background)};\n          opacity: 0.8;\n        `}\n        border-radius: 2px;\n        pointer-events: none;\n      }\n    `}\n  `}\n`;\n","import enUS from './en-US.json';\nimport frFR from './fr-FR.json';\n\nexport default {\n  'en-US': enUS,\n  'fr-FR': frFR,\n};\n","import React, {\n  MouseEvent,\n  ComponentProps,\n  forwardRef,\n  MutableRefObject,\n  ReactNode,\n  useCallback,\n  useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { useFocusRing } from '../../react-aria/react-aria/focus';\nimport { useFocusWithin } from '../../react-aria/react-aria/interactions';\nimport { ButtonsColorPalette, Comp, getStylingTransientProps } from '../../types';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport {\n  isNonAscii,\n  containsInvisibleChars,\n  normalizeHighlightOptions,\n  NormalizedHighlightOptions,\n} from '../../utils/highlightNonAscii';\nimport { TextFieldProps, TextFieldVariant } from './types';\nimport { StyledTextField, StyledHighlightMarker } from './styles';\nimport { Icon } from '../../components/icon';\nimport { mdiClose } from '@redsift/icons';\nimport { Flexbox } from '../flexbox';\nimport { IconButton } from '../icon-button';\nimport { Pill } from '../pill';\nimport { useTheme } from '../theme';\nimport { useMessageFormatter } from '../../react-aria/react-aria/i18n';\nimport { useId } from '../../utils';\n\nimport intlMessages from './intl';\n\nconst COMPONENT_NAME = 'TextField';\nconst CLASSNAME = 'redsift-text-field';\n\n/**\n * Processes a string and wraps consecutive non-ASCII characters in highlight markers.\n * Groups consecutive non-ASCII characters to minimize DOM nodes.\n * Invisible characters are NOT replaced (to maintain width alignment) but marked\n * with a $hasInvisible prop for CSS-based visual indication.\n */\nconst highlightNonAsciiChars = (text: string, options: NormalizedHighlightOptions): ReactNode[] => {\n  const result: ReactNode[] = [];\n  let currentAscii = '';\n  let currentNonAscii = '';\n  let keyIndex = 0;\n\n  // Use Array.from to correctly handle Unicode surrogate pairs (e.g., emojis)\n  const chars = Array.from(text);\n\n  for (const char of chars) {\n    if (isNonAscii(char)) {\n      // Flush ASCII buffer\n      if (currentAscii) {\n        result.push(currentAscii);\n        currentAscii = '';\n      }\n      currentNonAscii += char;\n    } else {\n      // Flush non-ASCII buffer\n      if (currentNonAscii) {\n        result.push(\n          <StyledHighlightMarker\n            key={keyIndex++}\n            $font={options.font}\n            $background={options.background}\n            $hasInvisible={containsInvisibleChars(currentNonAscii)}\n          >\n            {currentNonAscii}\n          </StyledHighlightMarker>\n        );\n        currentNonAscii = '';\n      }\n      currentAscii += char;\n    }\n  }\n\n  // Flush remaining buffers\n  if (currentAscii) {\n    result.push(currentAscii);\n  }\n  if (currentNonAscii) {\n    result.push(\n      <StyledHighlightMarker\n        key={keyIndex}\n        $font={options.font}\n        $background={options.background}\n        $hasInvisible={containsInvisibleChars(currentNonAscii)}\n      >\n        {currentNonAscii}\n      </StyledHighlightMarker>\n    );\n  }\n\n  return result;\n};\n\n/**\n * TextField allows users to enter single-line text input. Supports validation,\n * icons, clear button, and controlled/uncontrolled modes.\n *\n * Variants: `default` (bordered), `underline` (bottom border only)\n * Colors: `primary`, `success`, `warning`, `error`, `info`, `question`, `neutral`, `radar`\n *\n * @example\n * // Basic text field\n * <TextField label=\"Email\" type=\"email\" placeholder=\"Enter email...\" />\n *\n * @example\n * // Controlled with validation\n * const [username, setUsername] = useState('');\n * <TextField\n *   label=\"Username\"\n *   value={username}\n *   onChange={setUsername}\n *   isInvalid={username.length < 3}\n *   isRequired\n * />\n *\n * @example\n * // Search field with icon and clear button\n * <TextField\n *   label=\"Search\"\n *   leftIcon={{ icon: mdiMagnify }}\n *   hasClearButton\n *   onClear={() => setQuery('')}\n *   value={query}\n *   onChange={setQuery}\n * />\n *\n * @example\n * // Underline variant\n * <TextField label=\"Name\" variant=\"underline\" />\n *\n * @example\n * // States\n * <TextField label=\"Disabled\" isDisabled />\n * <TextField label=\"Read-only\" isReadOnly value=\"Cannot edit\" />\n * <TextField label=\"Required\" isRequired />\n * <TextField label=\"Invalid\" isInvalid />\n *\n * @example\n * // With internal buttons (copy, generate, etc.)\n * <TextField\n *   label=\"API Key\"\n *   value={apiKey}\n *   internal={(props) => (\n *     <IconButton icon={mdiContentCopy} aria-label=\"Copy\" onClick={handleCopy} />\n *   )}\n * />\n *\n * @example\n * // With pills (tag input pattern)\n * <TextField\n *   label=\"Tags\"\n *   pills={tags.map(tag => ({ label: tag, onDelete: () => removeTag(tag) }))}\n * />\n *\n * @example\n * // Colored field (Radar AI)\n * <TextField label=\"Radar Prompt\" color=\"radar\" />\n */\nexport const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { transientProps, otherProps } = getStylingTransientProps(props);\n\n  const {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    after,\n    autoFocus,\n    className,\n    color: propsColor,\n    defaultValue = '',\n    forceColor,\n    hasClearButton,\n    highlightNonAscii,\n    inputProps,\n    inputRef,\n    internal,\n    isColored = true,\n    isDisabled,\n    isInvalid,\n    isReadOnly,\n    isRequired,\n    label,\n    leftIcon,\n    name,\n    onBlur: onBlurProps,\n    onChange,\n    onClear,\n    onFocus: onFocusProps,\n    pills,\n    placeholder,\n    theme: propsTheme,\n    type,\n    value: propsValue,\n    variant = TextFieldVariant.default,\n    ...forwardedProps\n  } = otherProps;\n\n  const theme = useTheme(propsTheme);\n  const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : isColored ? 'primary' : 'grey';\n  const isGradient = color === ButtonsColorPalette.radar;\n\n  const format = useMessageFormatter(intlMessages);\n\n  const {\n    isFocusVisible,\n    isFocused,\n    focusProps: { onFocus, onBlur },\n  } = useFocusRing({\n    autoFocus,\n  });\n  const [isFocusWithin, setFocusWithin] = useState(Boolean(autoFocus));\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: (isFocusWithin) => setFocusWithin(isFocusWithin),\n  });\n\n  const [value, setValue] = useState(defaultValue);\n  const isControlled = propsValue !== null && propsValue !== undefined;\n\n  const [labelId] = useId();\n\n  // Normalize highlight options - force font: false since the input uses Inconsolata directly\n  const highlightOptions = highlightNonAscii ? { ...normalizeHighlightOptions(highlightNonAscii), font: false } : null;\n\n  warnIfNoAccessibleLabelFound(props as ComponentProps<'label'>, [label], 'TextField');\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (isDisabled || isReadOnly) {\n        return;\n      }\n\n      if (onChange) {\n        onChange(event.target.value, name, event);\n      } else {\n        setValue(event.target.value);\n      }\n    },\n    [onChange]\n  );\n\n  const handleClear = useCallback(() => {\n    if (isDisabled || isReadOnly) {\n      return;\n    }\n\n    if (onChange) {\n      onChange('');\n    }\n    if (onClear) {\n      onClear();\n    }\n    if (hasClearButton && hasClearButton !== true && hasClearButton.onClick) {\n      hasClearButton.onClick({} as MouseEvent<HTMLButtonElement>);\n    }\n    setValue('');\n  }, [onChange]);\n\n  // The asterisk is the required indicator, decoupled from the invalid (red\n  // border) state — see DS-34. aria-hidden because `aria-required` on the input\n  // already conveys the required state to assistive tech; the `*` is visual only.\n  const requiredMark = isRequired ? (\n    <span className={`${TextField.className}__asterisk`} aria-hidden=\"true\">\n      *\n    </span>\n  ) : null;\n\n  return (\n    <StyledTextField\n      {...focusWithinProps}\n      {...forwardedProps}\n      {...transientProps}\n      $label={label}\n      $hasContent={\n        isFocusWithin ||\n        Boolean(isControlled ? propsValue : value) ||\n        Boolean(placeholder) ||\n        Boolean(pills && pills.length > 0)\n      }\n      $hasLeftIcon={Boolean(leftIcon)}\n      $hasHighlightOverlay={Boolean(highlightNonAscii)}\n      $color={color}\n      $isGradient={isGradient}\n      $isDisabled={isDisabled}\n      $isFocusVisible={isFocusVisible}\n      $isInvalid={isInvalid}\n      $isRequired={isRequired}\n      $isFocused={Boolean(isFocused || forceColor)}\n      $theme={theme}\n      $variant={variant}\n      className={classNames(TextField.className, className)}\n      ref={ref as MutableRefObject<HTMLDivElement>}\n    >\n      <fieldset aria-hidden=\"true\" className={`${TextField.className}-input-wrapper__fieldset`}>\n        <legend id={labelId} className={`${TextField.className}-input-wrapper-fieldset__legend`}>\n          {label ? (\n            <span>\n              {label}\n              {requiredMark}\n            </span>\n          ) : null}\n        </legend>\n      </fieldset>\n      {label ? (\n        <label className={`${TextField.className}__label`}>\n          <span>\n            {label}\n            {requiredMark}\n          </span>\n        </label>\n      ) : null}\n      <div className={`${TextField.className}__input-wrapper`}>\n        {leftIcon ? (\n          <Icon color={isDisabled ? 'question' : 'black'} {...leftIcon} aria-hidden=\"true\" className=\"left\" />\n        ) : null}\n        <div className={`${TextField.className}-input-wrapper__pills-and-input`}>\n          <div className={`${TextField.className}-input-wrapper-pills-and-input__input-container`}>\n            {highlightOptions ? (\n              <div\n                className={`${TextField.className}-input-wrapper-pills-and-input__highlight-overlay`}\n                aria-hidden=\"true\"\n              >\n                {highlightNonAsciiChars((isControlled ? propsValue : value) || '', highlightOptions)}\n              </div>\n            ) : null}\n            <input\n              {...inputProps}\n              onBlur={(event) => {\n                onBlur?.(event);\n                onBlurProps?.(event);\n              }}\n              onFocus={(event) => {\n                onFocus?.(event);\n                onFocusProps?.(event);\n              }}\n              aria-disabled={isDisabled}\n              aria-invalid={isInvalid || undefined}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledby || (label ? labelId : undefined)}\n              aria-readonly={isReadOnly}\n              aria-required={isRequired}\n              autoFocus={autoFocus}\n              className={`${TextField.className}-input-wrapper-pills-and-input__input`}\n              disabled={isDisabled}\n              name={name}\n              onChange={handleChange}\n              placeholder={placeholder}\n              ref={inputRef as MutableRefObject<HTMLInputElement>}\n              type={type}\n              value={isControlled ? propsValue : value}\n            />\n          </div>\n          <div>\n            {pills?.map((pill, index) => (\n              <Pill theme={theme} key={`${labelId}-pill-${index}`} color=\"blue\" size=\"small\" {...pill} />\n            ))}\n          </div>\n        </div>\n        {hasClearButton || internal || after ? (\n          <Flexbox className={`${TextField.className}-input-wrapper__toolbar`} gap=\"8px\">\n            {hasClearButton ? (\n              <IconButton\n                theme={theme}\n                aria-label={label ? format('clear-field', { label }) : format('clear')}\n                color=\"grey\"\n                isDisabled={isDisabled}\n                icon={mdiClose}\n                {...(hasClearButton !== true && hasClearButton)}\n                onClick={handleClear}\n                className=\"right clear\"\n              />\n            ) : null}\n            {typeof internal === 'function'\n              ? internal(\n                  isControlled ? propsValue : value,\n                  isDisabled,\n                  isInvalid,\n                  isRequired\n                )\n              : internal}\n            {(hasClearButton || internal) && after ? (\n              <span\n                style={{\n                  borderLeft: '1px solid var(--redsift-color-neutral-mid-grey)',\n                  position: 'relative',\n                  top: '-2px',\n                }}\n              />\n            ) : null}\n            {typeof after === 'function'\n              ? after(\n                  isControlled ? propsValue : value,\n                  isDisabled,\n                  isInvalid,\n                  isRequired\n                )\n              : after}\n          </Flexbox>\n        ) : null}\n      </div>\n    </StyledTextField>\n  );\n});\nTextField.className = CLASSNAME;\nTextField.displayName = COMPONENT_NAME;\n"],"names":["TextFieldVariant","default","underline","StyledTextField","styled","div","baseStyling","_ref","$label","$hasLeftIcon","$hasContent","$hasHighlightOverlay","$isFocused","$isDisabled","$isInvalid","$color","$isGradient","$theme","$variant","css","Theme","dark","resolveBackgroundColor","background","paletteColors","Object","values","NotificationsColorPalette","includes","StyledHighlightMarker","mark","_ref2","$font","$background","$hasInvisible","enUS","frFR","COMPONENT_NAME","CLASSNAME","highlightNonAsciiChars","text","options","result","currentAscii","currentNonAscii","keyIndex","chars","Array","from","char","isNonAscii","push","React","createElement","key","font","containsInvisibleChars","TextField","forwardRef","props","ref","transientProps","otherProps","getStylingTransientProps","ariaLabel","ariaLabelledby","after","autoFocus","className","color","propsColor","defaultValue","forceColor","hasClearButton","highlightNonAscii","inputProps","inputRef","internal","isColored","isDisabled","isInvalid","isReadOnly","isRequired","label","leftIcon","name","onBlur","onBlurProps","onChange","onClear","onFocus","onFocusProps","pills","placeholder","theme","propsTheme","type","value","propsValue","variant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","ButtonsColorPalette","isGradient","radar","format","useMessageFormatter","intlMessages","isFocusVisible","isFocused","focusProps","useFocusRing","isFocusWithin","setFocusWithin","useState","Boolean","focusWithinProps","useFocusWithin","onFocusWithinChange","setValue","isControlled","undefined","labelId","useId","highlightOptions","_objectSpread","normalizeHighlightOptions","warnIfNoAccessibleLabelFound","handleChange","useCallback","event","target","handleClear","onClick","requiredMark","_extends","length","$isFocusVisible","$isRequired","classNames","id","Icon","disabled","map","pill","index","Pill","size","Flexbox","gap","IconButton","icon","mdiClose","style","borderLeft","position","top","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;AAOA;AACA;AACA;AACO,MAAMA,gBAAgB,GAAG;AAC9BC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,SAAS,EAAE,WAAA;AACb,EAAU;;AAGV;AACA;AACA;;AAGA;AACA;AACA;;AClBA;AACA;AACA;AACaC,MAAAA,eAAe,GAAGC,MAAM,CAACC,GAA0B,CAAA;AAChE;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,WAAY,CAAA;AAChB;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;IACDC,MAAM;IACNC,YAAY;IACZC,WAAW;IACXC,oBAAoB;IACpBC,UAAU;IACVC,WAAW;IACXC,UAAU;IACVC,MAAM;IACNC,WAAW;IACXC,MAAM;AACNC,IAAAA,QAAAA;AACF,GAAC,GAAAX,IAAA,CAAA;AAAA,EAAA,OAAKY,GAAI,CAAA;AACZ,IAAMN,EAAAA,WAAW,GACTM,GAAI,CAAA;AACZ;AACA,QAAA,CAAS,GACD,EAAG,CAAA;AACX;AACA;AACA;AACA;AACA;AACA;AACA,YAAA,EAAcV,YAAY,IAAI,CAACC,WAAW,GAAG,MAAM,GAAG,GAAI,CAAA;AAC1D;AACA;AACA;AACA;AACA,WAAA,EAAaA,WAAW,GAAG,MAAM,GAAG,MAAO,CAAA;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA,MAAQ,EAAA,CAACA,WAAW,GACVS,GAAI,CAAA;AACd;AACA,iCAAmCD,EAAAA,QAAQ,KAAKlB,gBAAgB,CAACE,SAAS,GAAG,KAAK,GAAG,MAAO,CAAA;AAC5F,UAAA,CAAW,GACDiB,GAAI,CAAA;AACd;AACA,iCAAmCD,EAAAA,QAAQ,KAAKlB,gBAAgB,CAACE,SAAS,GAAG,KAAK,GAAG,MAAO,CAAA;AAC5F,UAAY,CAAA,CAAA;AACZ;AACA,MAAQ,EAAA,CAACc,WAAW,GACVG,GAAI,CAAA;AACd;AACA,8BAAA,EAAgCF,MAAO,CAAuCH,qCAAAA,EAAAA,UAAU,GACpE,OAAO,GACPF,UAAU,GACVG,MAAM,GACN,MAAO,CAAQF,MAAAA,EAAAA,WAAW,GAAG,UAAU,GAAG,SAAU,CAAA;AACxE;AACA,UAAA,CAAW,GACDM,GAAI,CAAA;AACd,0DAA4DF,EAAAA,MAAM,KAAKG,KAAK,CAACC,IAAI,GAAG,aAAa,GAAG,OAAQ,CAAA;AAC5G,YAAA,EAAcH,QAAQ,KAAKlB,gBAAgB,CAACE,SAAS,GACrCiB,GAAI,CAAA;AACpB;AACA;AACA,gBAAA,CAAiB,GACD,EAAG,CAAA;AACnB;AACA;AACA,gCAAA,EAAkCF,MAAO,CAAuCH,qCAAAA,EAAAA,UAAU,GACpE,OAAO,GACPF,UAAU,GACVG,MAAM,GACN,MAAO,CAAQF,MAAAA,EAAAA,WAAW,GAAG,UAAU,GAAG,SAAU,CAAA;AAC1E;AACA;AACA;AACA;AACA,UAAY,CAAA,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAQK,EAAAA,QAAQ,KAAKlB,gBAAgB,CAACE,SAAS,IAAI,CAACO,YAAY,GACtDU,GAAI,CAAA;AACd;AACA,UAAA,CAAW,GACD,EAAG,CAAA;AACb,MAAA,EAAQD,QAAQ,KAAKlB,gBAAgB,CAACE,SAAS,GACrCiB,GAAI,CAAA;AACd;AACA,UAAA,CAAW,GACD,EAAG,CAAA;AACb,mBAAA,EAAqBX,MAAM,GAAG,KAAK,GAAG,KAAM,CAAA;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAA,EAAqBG,oBAAoB,GAC/B,mDAAmD,GACnD,kDAAmD,CAAA;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAQE,EAAAA,WAAW,GACTM,GAAI,CAAA;AACd;AACA,UAAW,CAAA,GACDR,oBAAoB,GACpBQ,GAAI,CAAA;AACd;AACA,qDAAuDF,EAAAA,MAAM,KAAKG,KAAK,CAACC,IAAI,GAAG,OAAO,GAAG,aAAc,CAAA;AACvG,UAAA,CAAW,GACDF,GAAI,CAAA;AACd,+CAAiDF,EAAAA,MAAM,KAAKG,KAAK,CAACC,IAAI,GAAG,OAAO,GAAG,aAAc,CAAA;AACjG,UAAY,CAAA,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,yCAA2CJ,EAAAA,MAAM,KAAKG,KAAK,CAACC,IAAI,GAAG,OAAO,GAAG,aAAc,CAAA;AAC3F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAQ,EAAA,CAACL,WAAW,IAAIH,WAAW,IAAI,CAACD,UAAU,IAAIE,UAAU,GACtDK,GAAI,CAAA;AACd,YAAA,EAAcD,QAAQ,KAAKlB,gBAAgB,CAACE,SAAS,GACrCiB,GAAI,CAAA;AACpB;AACA,gBAAA,CAAiB,GACDA,GAAI,CAAA;AACpB;AACA;AACA,gBAAkB,CAAA,CAAA;AAClB;AACA,8BAAA,EAAgCF,MAAO,CAAuCH,qCAAAA,EAAAA,UAAU,GACxE,OAAO,GACPF,UAAU,GACVG,MAAM,GACN,MAAO,CAAQF,MAAAA,EAAAA,WAAW,GAAG,UAAU,GAAG,SAAU,CAAA;AACpE;AACA,UAAA,CAAW,GACDM,GAAI,CAAA;AACd,YAAA,EAAcD,QAAQ,KAAKlB,gBAAgB,CAACE,SAAS,GACrCiB,GAAI,CAAA;AACpB;AACA,gBAAA,CAAiB,GACDA,GAAI,CAAA;AACpB;AACA;AACA,gBAAkB,CAAA,CAAA;AAClB;AACA;AACA;AACA;AACA;AACA,4CAA8CF,EAAAA,MAAM,KAAKG,KAAK,CAACC,IAAI,GAAG,aAAa,GAAG,OAAQ,CAAA;AAC9F,4CAA8CJ,EAAAA,MAAM,KAAKG,KAAK,CAACC,IAAI,GAAG,aAAa,GAAG,OAAQ,CAAA;AAC9F;AACA,kCAAoCJ,EAAAA,MAAO,wCAAuCF,MAAO,CAAA;AACzF,UAAY,CAAA,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAQ,EAAA,CAACL,WAAW,GACVS,GAAI,CAAA;AACd;AACA;AACA,UAAA,CAAW,GACDA,GAAI,CAAA;AACd;AACA;AACA,UAAY,CAAA,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMD,QAAQ,KAAKlB,gBAAgB,CAACE,SAAS,GACrCiB,GAAI,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAA,CAAS,GACDA,GAAI,CAAA;AACZ;AACA;AACA;AACA,QAAU,CAAA,CAAA;AACV;AACA;AACA;AACA;AACA;AACA,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ,EAAC;;AAED;AACA;AACA;AACA;AACA,MAAMG,sBAAsB,GAAIC,UAAyB,IAAa;EACpE,IAAIA,UAAU,KAAK,IAAI,EAAE;AACvB,IAAA,OAAO,oDAAoD,CAAA;AAC7D,GAAA;AACA;AACA,EAAA,MAAMC,aAAa,GAAGC,MAAM,CAACC,MAAM,CAACC,yBAAyB,CAAC,CAAA;AAC9D,EAAA,IAAIH,aAAa,CAACI,QAAQ,CAACL,UAAuC,CAAC,EAAE;IACnE,OAAQ,CAAA,kCAAA,EAAoCA,UAAW,CAAU,SAAA,CAAA,CAAA;AACnE,GAAA;AACA;AACA,EAAA,OAAOA,UAAU,CAAA;AACnB,CAAC,CAAA;;AAED;AACA;AACA;AACaM,MAAAA,qBAAqB,GAAGzB,MAAM,CAAC0B,IAAkC,CAAA;AAC9E,EAAA,EAAIC,KAAA,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC,WAAW;AAAEC,IAAAA,aAAAA;AAAc,GAAC,GAAAH,KAAA,CAAA;AAAA,EAAA,OAAKZ,GAAI,CAAA;AACnD;AACA,gBAAA,EAAkBc,WAAW,GAAGX,sBAAsB,CAACW,WAAW,CAAC,GAAG,aAAc,CAAA;AACpF;AACA;AACA;AACA;AACA;AACA;AACA,IAAMD,EAAAA,KAAK,IACPb,GAAI,CAAA;AACR;AACA;AACA,IAAM,CAAA,CAAA;AACN;AACA;AACA,IAAMe,EAAAA,aAAa,IACff,GAAI,CAAA;AACR;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAUc,EAAAA,WAAW,IACbd,GAAI,CAAA;AACZ,4BAA8BG,EAAAA,sBAAsB,CAACW,WAAW,CAAE,CAAA;AAClE;AACA,QAAU,CAAA,CAAA;AACV;AACA;AACA;AACA,IAAM,CAAA,CAAA;AACN,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ;;;;;;;;;;;;;;ACpYA,mBAAe;AACb,EAAA,OAAO,EAAEE,IAAI;AACb,EAAA,OAAO,EAAEC,IAAAA;AACX,CAAC;;;AC2BD,MAAMC,cAAc,GAAG,WAAW,CAAA;AAClC,MAAMC,SAAS,GAAG,oBAAoB,CAAA;;AAEtC;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,sBAAsB,GAAGA,CAACC,IAAY,EAAEC,OAAmC,KAAkB;EACjG,MAAMC,MAAmB,GAAG,EAAE,CAAA;EAC9B,IAAIC,YAAY,GAAG,EAAE,CAAA;EACrB,IAAIC,eAAe,GAAG,EAAE,CAAA;EACxB,IAAIC,QAAQ,GAAG,CAAC,CAAA;;AAEhB;AACA,EAAA,MAAMC,KAAK,GAAGC,KAAK,CAACC,IAAI,CAACR,IAAI,CAAC,CAAA;AAE9B,EAAA,KAAK,MAAMS,IAAI,IAAIH,KAAK,EAAE;AACxB,IAAA,IAAII,UAAU,CAACD,IAAI,CAAC,EAAE;AACpB;AACA,MAAA,IAAIN,YAAY,EAAE;AAChBD,QAAAA,MAAM,CAACS,IAAI,CAACR,YAAY,CAAC,CAAA;AACzBA,QAAAA,YAAY,GAAG,EAAE,CAAA;AACnB,OAAA;AACAC,MAAAA,eAAe,IAAIK,IAAI,CAAA;AACzB,KAAC,MAAM;AACL;AACA,MAAA,IAAIL,eAAe,EAAE;AACnBF,QAAAA,MAAM,CAACS,IAAI,eACTC,cAAA,CAAAC,aAAA,CAACxB,qBAAqB,EAAA;UACpByB,GAAG,EAAET,QAAQ,EAAG;UAChBb,KAAK,EAAES,OAAO,CAACc,IAAK;UACpBtB,WAAW,EAAEQ,OAAO,CAAClB,UAAW;UAChCW,aAAa,EAAEsB,sBAAsB,CAACZ,eAAe,CAAA;SAEpDA,EAAAA,eACoB,CACzB,CAAC,CAAA;AACDA,QAAAA,eAAe,GAAG,EAAE,CAAA;AACtB,OAAA;AACAD,MAAAA,YAAY,IAAIM,IAAI,CAAA;AACtB,KAAA;AACF,GAAA;;AAEA;AACA,EAAA,IAAIN,YAAY,EAAE;AAChBD,IAAAA,MAAM,CAACS,IAAI,CAACR,YAAY,CAAC,CAAA;AAC3B,GAAA;AACA,EAAA,IAAIC,eAAe,EAAE;AACnBF,IAAAA,MAAM,CAACS,IAAI,eACTC,cAAA,CAAAC,aAAA,CAACxB,qBAAqB,EAAA;AACpByB,MAAAA,GAAG,EAAET,QAAS;MACdb,KAAK,EAAES,OAAO,CAACc,IAAK;MACpBtB,WAAW,EAAEQ,OAAO,CAAClB,UAAW;MAChCW,aAAa,EAAEsB,sBAAsB,CAACZ,eAAe,CAAA;KAEpDA,EAAAA,eACoB,CACzB,CAAC,CAAA;AACH,GAAA;AAEA,EAAA,OAAOF,MAAM,CAAA;AACf,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMe,SAA+C,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACxF,MAAM;IAAEC,cAAc;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGC,wBAAwB,CAACJ,KAAK,CAAC,CAAA;EAEtE,MAAM;AACJ,MAAA,YAAY,EAAEK,SAAS;AACvB,MAAA,iBAAiB,EAAEC,cAAc;MACjCC,KAAK;MACLC,SAAS;MACTC,SAAS;AACTC,MAAAA,KAAK,EAAEC,UAAU;AACjBC,MAAAA,YAAY,GAAG,EAAE;MACjBC,UAAU;MACVC,cAAc;MACdC,iBAAiB;MACjBC,UAAU;MACVC,QAAQ;MACRC,QAAQ;AACRC,MAAAA,SAAS,GAAG,IAAI;MAChBC,UAAU;MACVC,SAAS;MACTC,UAAU;MACVC,UAAU;MACVC,KAAK;MACLC,QAAQ;MACRC,IAAI;AACJC,MAAAA,MAAM,EAAEC,WAAW;MACnBC,QAAQ;MACRC,OAAO;AACPC,MAAAA,OAAO,EAAEC,YAAY;MACrBC,KAAK;MACLC,WAAW;AACXC,MAAAA,KAAK,EAAEC,UAAU;MACjBC,IAAI;AACJC,MAAAA,KAAK,EAAEC,UAAU;MACjBC,OAAO,GAAGnG,gBAAgB,CAACC,OAAAA;AAE7B,KAAC,GAAG6D,UAAU;AADTsC,IAAAA,cAAc,GAAAC,wBAAA,CACfvC,UAAU,EAAAwC,SAAA,CAAA,CAAA;AAEd,EAAA,MAAMR,KAAK,GAAGS,QAAQ,CAACR,UAAU,CAAC,CAAA;EAClC,MAAM1B,KAAK,GAAG5C,MAAM,CAACC,MAAM,CAAC8E,mBAAmB,CAAC,CAAC5E,QAAQ,CAAC0C,UAAW,CAAC,GAAGA,UAAU,GAAGQ,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;AACpH,EAAA,MAAM2B,UAAU,GAAGpC,KAAK,KAAKmC,mBAAmB,CAACE,KAAK,CAAA;AAEtD,EAAA,MAAMC,MAAM,GAAGC,mBAAmB,CAACC,YAAY,CAAC,CAAA;EAEhD,MAAM;IACJC,cAAc;IACdC,SAAS;AACTC,IAAAA,UAAU,EAAE;MAAEtB,OAAO;AAAEJ,MAAAA,MAAAA;AAAO,KAAA;GAC/B,GAAG2B,YAAY,CAAC;AACf9C,IAAAA,SAAAA;AACF,GAAC,CAAC,CAAA;AACF,EAAA,MAAM,CAAC+C,aAAa,EAAEC,cAAc,CAAC,GAAGC,QAAQ,CAACC,OAAO,CAAClD,SAAS,CAAC,CAAC,CAAA;EACpE,MAAM;AAAEmD,IAAAA,gBAAAA;GAAkB,GAAGC,cAAc,CAAC;AAC1CC,IAAAA,mBAAmB,EAAGN,aAAa,IAAKC,cAAc,CAACD,aAAa,CAAA;AACtE,GAAC,CAAC,CAAA;EAEF,MAAM,CAACjB,KAAK,EAAEwB,QAAQ,CAAC,GAAGL,QAAQ,CAAC7C,YAAY,CAAC,CAAA;EAChD,MAAMmD,YAAY,GAAGxB,UAAU,KAAK,IAAI,IAAIA,UAAU,KAAKyB,SAAS,CAAA;AAEpE,EAAA,MAAM,CAACC,OAAO,CAAC,GAAGC,KAAK,EAAE,CAAA;;AAEzB;EACA,MAAMC,gBAAgB,GAAGpD,iBAAiB,GAAAqD,cAAA,CAAAA,cAAA,CAAQC,EAAAA,EAAAA,yBAAyB,CAACtD,iBAAiB,CAAC,CAAA,EAAA,EAAA,EAAA;AAAEnB,IAAAA,IAAI,EAAE,KAAA;AAAK,GAAA,CAAA,GAAK,IAAI,CAAA;EAEpH0E,4BAA4B,CAACtE,KAAK,EAA6B,CAACwB,KAAK,CAAC,EAAE,WAAW,CAAC,CAAA;AAEpF,EAAA,MAAM+C,YAAY,GAAGC,WAAW,CAC7BC,KAA0C,IAAK;IAC9C,IAAIrD,UAAU,IAAIE,UAAU,EAAE;AAC5B,MAAA,OAAA;AACF,KAAA;AAEA,IAAA,IAAIO,QAAQ,EAAE;MACZA,QAAQ,CAAC4C,KAAK,CAACC,MAAM,CAACpC,KAAK,EAAEZ,IAAI,EAAE+C,KAAK,CAAC,CAAA;AAC3C,KAAC,MAAM;AACLX,MAAAA,QAAQ,CAACW,KAAK,CAACC,MAAM,CAACpC,KAAK,CAAC,CAAA;AAC9B,KAAA;AACF,GAAC,EACD,CAACT,QAAQ,CACX,CAAC,CAAA;AAED,EAAA,MAAM8C,WAAW,GAAGH,WAAW,CAAC,MAAM;IACpC,IAAIpD,UAAU,IAAIE,UAAU,EAAE;AAC5B,MAAA,OAAA;AACF,KAAA;AAEA,IAAA,IAAIO,QAAQ,EAAE;MACZA,QAAQ,CAAC,EAAE,CAAC,CAAA;AACd,KAAA;AACA,IAAA,IAAIC,OAAO,EAAE;AACXA,MAAAA,OAAO,EAAE,CAAA;AACX,KAAA;IACA,IAAIhB,cAAc,IAAIA,cAAc,KAAK,IAAI,IAAIA,cAAc,CAAC8D,OAAO,EAAE;AACvE9D,MAAAA,cAAc,CAAC8D,OAAO,CAAC,EAAmC,CAAC,CAAA;AAC7D,KAAA;IACAd,QAAQ,CAAC,EAAE,CAAC,CAAA;AACd,GAAC,EAAE,CAACjC,QAAQ,CAAC,CAAC,CAAA;;AAEd;AACA;AACA;AACA,EAAA,MAAMgD,YAAY,GAAGtD,UAAU,gBAC7B9B,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMe,IAAAA,SAAS,EAAG,CAAA,EAAEX,SAAS,CAACW,SAAU,CAAY,UAAA,CAAA;IAAC,aAAY,EAAA,MAAA;GAAO,EAAA,GAElE,CAAC,GACL,IAAI,CAAA;AAER,EAAA,oBACEhB,cAAA,CAAAC,aAAA,CAAClD,eAAe,EAAAsI,QAAA,CAAA,EAAA,EACVnB,gBAAgB,EAChBlB,cAAc,EACdvC,cAAc,EAAA;AAClBrD,IAAAA,MAAM,EAAE2E,KAAM;IACdzE,WAAW,EACTwG,aAAa,IACbG,OAAO,CAACK,YAAY,GAAGxB,UAAU,GAAGD,KAAK,CAAC,IAC1CoB,OAAO,CAACxB,WAAW,CAAC,IACpBwB,OAAO,CAACzB,KAAK,IAAIA,KAAK,CAAC8C,MAAM,GAAG,CAAC,CAClC;AACDjI,IAAAA,YAAY,EAAE4G,OAAO,CAACjC,QAAQ,CAAE;AAChCzE,IAAAA,oBAAoB,EAAE0G,OAAO,CAAC3C,iBAAiB,CAAE;AACjD3D,IAAAA,MAAM,EAAEsD,KAAM;AACdrD,IAAAA,WAAW,EAAEyF,UAAW;AACxB5F,IAAAA,WAAW,EAAEkE,UAAW;AACxB4D,IAAAA,eAAe,EAAE7B,cAAe;AAChChG,IAAAA,UAAU,EAAEkE,SAAU;AACtB4D,IAAAA,WAAW,EAAE1D,UAAW;AACxBtE,IAAAA,UAAU,EAAEyG,OAAO,CAACN,SAAS,IAAIvC,UAAU,CAAE;AAC7CvD,IAAAA,MAAM,EAAE6E,KAAM;AACd5E,IAAAA,QAAQ,EAAEiF,OAAQ;IAClB/B,SAAS,EAAEyE,UAAU,CAACpF,SAAS,CAACW,SAAS,EAAEA,SAAS,CAAE;AACtDR,IAAAA,GAAG,EAAEA,GAAAA;GAELR,CAAAA,eAAAA,cAAA,CAAAC,aAAA,CAAA,UAAA,EAAA;AAAU,IAAA,aAAA,EAAY,MAAM;AAACe,IAAAA,SAAS,EAAG,CAAA,EAAEX,SAAS,CAACW,SAAU,CAAA,wBAAA,CAAA;GAC7DhB,eAAAA,cAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AAAQyF,IAAAA,EAAE,EAAElB,OAAQ;AAACxD,IAAAA,SAAS,EAAG,CAAA,EAAEX,SAAS,CAACW,SAAU,CAAA,+BAAA,CAAA;AAAiC,GAAA,EACrFe,KAAK,gBACJ/B,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA,IAAA,EACG8B,KAAK,EACLqD,YACG,CAAC,GACL,IACE,CACA,CAAC,EACVrD,KAAK,gBACJ/B,cAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;AAAOe,IAAAA,SAAS,EAAG,CAAA,EAAEX,SAAS,CAACW,SAAU,CAAA,OAAA,CAAA;AAAS,GAAA,eAChDhB,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA,IAAA,EACG8B,KAAK,EACLqD,YACG,CACD,CAAC,GACN,IAAI,eACRpF,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKe,IAAAA,SAAS,EAAG,CAAA,EAAEX,SAAS,CAACW,SAAU,CAAA,eAAA,CAAA;GACpCgB,EAAAA,QAAQ,gBACPhC,cAAA,CAAAC,aAAA,CAAC0F,IAAI,EAAAN,QAAA,CAAA;AAACpE,IAAAA,KAAK,EAAEU,UAAU,GAAG,UAAU,GAAG,OAAA;AAAQ,GAAA,EAAKK,QAAQ,EAAA;AAAE,IAAA,aAAA,EAAY,MAAM;AAAChB,IAAAA,SAAS,EAAC,MAAA;AAAM,GAAA,CAAE,CAAC,GAClG,IAAI,eACRhB,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKe,IAAAA,SAAS,EAAG,CAAA,EAAEX,SAAS,CAACW,SAAU,CAAA,+BAAA,CAAA;GACrChB,eAAAA,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKe,IAAAA,SAAS,EAAG,CAAA,EAAEX,SAAS,CAACW,SAAU,CAAA,+CAAA,CAAA;AAAiD,GAAA,EACrF0D,gBAAgB,gBACf1E,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEe,IAAAA,SAAS,EAAG,CAAA,EAAEX,SAAS,CAACW,SAAU,CAAmD,iDAAA,CAAA;IACrF,aAAY,EAAA,MAAA;GAEX7B,EAAAA,sBAAsB,CAAC,CAACmF,YAAY,GAAGxB,UAAU,GAAGD,KAAK,KAAK,EAAE,EAAE6B,gBAAgB,CAChF,CAAC,GACJ,IAAI,eACR1E,cAAA,CAAAC,aAAA,CAAA,OAAA,EAAAoF,QAAA,CAAA,EAAA,EACM9D,UAAU,EAAA;IACdW,MAAM,EAAG8C,KAAK,IAAK;AACjB9C,MAAAA,MAAM,aAANA,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAANA,MAAM,CAAG8C,KAAK,CAAC,CAAA;AACf7C,MAAAA,WAAW,aAAXA,WAAW,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAXA,WAAW,CAAG6C,KAAK,CAAC,CAAA;KACpB;IACF1C,OAAO,EAAG0C,KAAK,IAAK;AAClB1C,MAAAA,OAAO,aAAPA,OAAO,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAPA,OAAO,CAAG0C,KAAK,CAAC,CAAA;AAChBzC,MAAAA,YAAY,aAAZA,YAAY,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAZA,YAAY,CAAGyC,KAAK,CAAC,CAAA;KACrB;AACF,IAAA,eAAA,EAAerD,UAAW;IAC1B,cAAcC,EAAAA,SAAS,IAAI2C,SAAU;AACrC,IAAA,YAAA,EAAY3D,SAAU;AACtB,IAAA,iBAAA,EAAiBC,cAAc,KAAKkB,KAAK,GAAGyC,OAAO,GAAGD,SAAS,CAAE;AACjE,IAAA,eAAA,EAAe1C,UAAW;AAC1B,IAAA,eAAA,EAAeC,UAAW;AAC1Bf,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,SAAS,EAAG,CAAA,EAAEX,SAAS,CAACW,SAAU,CAAuC,qCAAA,CAAA;AACzE4E,IAAAA,QAAQ,EAAEjE,UAAW;AACrBM,IAAAA,IAAI,EAAEA,IAAK;AACXG,IAAAA,QAAQ,EAAE0C,YAAa;AACvBrC,IAAAA,WAAW,EAAEA,WAAY;AACzBjC,IAAAA,GAAG,EAAEgB,QAA+C;AACpDoB,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,KAAK,EAAEyB,YAAY,GAAGxB,UAAU,GAAGD,KAAAA;GACpC,CAAA,CACE,CAAC,eACN7C,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA,IAAA,EACGuC,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAALA,KAAK,CAAEqD,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,kBACtB/F,cAAA,CAAAC,aAAA,CAAC+F,IAAI,EAAAX,QAAA,CAAA;AAAC3C,IAAAA,KAAK,EAAEA,KAAM;AAACxC,IAAAA,GAAG,EAAG,CAAA,EAAEsE,OAAQ,CAAA,MAAA,EAAQuB,KAAM,CAAE,CAAA;AAAC9E,IAAAA,KAAK,EAAC,MAAM;AAACgF,IAAAA,IAAI,EAAC,OAAA;AAAO,GAAA,EAAKH,IAAI,CAAG,CAC3F,CACE,CACF,CAAC,EACLzE,cAAc,IAAII,QAAQ,IAAIX,KAAK,gBAClCd,cAAA,CAAAC,aAAA,CAACiG,OAAO,EAAA;AAAClF,IAAAA,SAAS,EAAG,CAAA,EAAEX,SAAS,CAACW,SAAU,CAAyB,uBAAA,CAAA;AAACmF,IAAAA,GAAG,EAAC,KAAA;GACtE9E,EAAAA,cAAc,gBACbrB,cAAA,CAAAC,aAAA,CAACmG,UAAU,EAAAf,QAAA,CAAA;AACT3C,IAAAA,KAAK,EAAEA,KAAM;AACb,IAAA,YAAA,EAAYX,KAAK,GAAGwB,MAAM,CAAC,aAAa,EAAE;AAAExB,MAAAA,KAAAA;AAAM,KAAC,CAAC,GAAGwB,MAAM,CAAC,OAAO,CAAE;AACvEtC,IAAAA,KAAK,EAAC,MAAM;AACZU,IAAAA,UAAU,EAAEA,UAAW;AACvB0E,IAAAA,IAAI,EAAEC,QAAAA;AAAS,GAAA,EACVjF,cAAc,KAAK,IAAI,IAAIA,cAAc,EAAA;AAC9C8D,IAAAA,OAAO,EAAED,WAAY;AACrBlE,IAAAA,SAAS,EAAC,aAAA;AAAa,GAAA,CACxB,CAAC,GACA,IAAI,EACP,OAAOS,QAAQ,KAAK,UAAU,GAC3BA,QAAQ,CACN6C,YAAY,GAAGxB,UAAU,GAAGD,KAAK,EACjClB,UAAU,EACVC,SAAS,EACTE,UACF,CAAC,GACDL,QAAQ,EACX,CAACJ,cAAc,IAAII,QAAQ,KAAKX,KAAK,gBACpCd,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AACEsG,IAAAA,KAAK,EAAE;AACLC,MAAAA,UAAU,EAAE,iDAAiD;AAC7DC,MAAAA,QAAQ,EAAE,UAAU;AACpBC,MAAAA,GAAG,EAAE,MAAA;AACP,KAAA;AAAE,GACH,CAAC,GACA,IAAI,EACP,OAAO5F,KAAK,KAAK,UAAU,GACxBA,KAAK,CACHwD,YAAY,GAAGxB,UAAU,GAAGD,KAAK,EACjClB,UAAU,EACVC,SAAS,EACTE,UACF,CAAC,GACDhB,KACG,CAAC,GACR,IACD,CACU,CAAC,CAAA;AAEtB,CAAC,EAAC;AACFT,SAAS,CAACW,SAAS,GAAG9B,SAAS,CAAA;AAC/BmB,SAAS,CAACsG,WAAW,GAAG1H,cAAc;;;;"}

package/index.d.ts

@@ -2311,8 +2311,12 @@ declare const AlertStyleVariant: {
 type AlertStyleVariant = ValueOf<typeof AlertStyleVariant>;
 /**
  * Component props.
+ *
+ * `Alert` is container-like: alongside the positioning `StylingProps` it accepts
+ * `InternalSpacingProps` (`padding`, `paddingTop`, …) with an `8px` default.
+ * Prefer the default — see `DS-SPACING-01` in `docs/design-guidelines.md`.
  */
-interface AlertProps extends ComponentProps<'div'>, StylingProps {
+interface AlertProps extends ComponentProps<'div'>, StylingProps, InternalSpacingProps {
     /** Whether the component can be closed or not. */
     isClosable?: boolean;
     /** Whether the component is closed or not. Used for controlled version. */
@@ -2328,7 +2332,7 @@ interface AlertProps extends ComponentProps<'div'>, StylingProps {
     /** Style variant. */
     styleVariant?: AlertStyleVariant;
 }
-interface StyledAlertProps extends ComponentProps<'div'>, StylingTransientProps {
+interface StyledAlertProps extends ComponentProps<'div'>, StylingTransientProps, InternalSpacingTransientProps {
     $hasTitle: boolean;
     $isClosable: AlertProps['isClosable'];
     $isClosed: AlertProps['isClosed'];
@@ -5337,11 +5341,20 @@ interface TextFieldProps extends Omit<ComponentProps<'div'>, 'onChange'>, Stylin
     isColored?: boolean;
     /** Whether the component is disabled or not. */
     isDisabled?: boolean;
-    /** Whether the component is invalid or not. */
+    /**
+     * Whether the component is invalid or not. This is the *only* trigger for the
+     * error (red) border and `aria-invalid`; drive it yourself (e.g. on blur) for
+     * touch-based validation. `isRequired` no longer implies it.
+     */
     isInvalid?: boolean;
     /** Whether the component is read only or not. */
     isReadOnly?: boolean;
-    /** Whether the component is required or not. */
+    /**
+     * Whether the component is required or not. Renders an asterisk (*) next to
+     * the label and sets `aria-required`. The asterisk inherits the label colour
+     * (neutral by default); it does **not** set the error border and is not red on
+     * its own — pass `isInvalid` for the red/error state.
+     */
     isRequired?: boolean;
     /** Label */
     label?: string;

package/package.json

@@ -33,7 +33,7 @@
     "version": "version-changelog ../../CHANGELOG.md && changelog-verify ../../CHANGELOG.md && git add ../../CHANGELOG.md"
   },
   "types": "index.d.ts",
-  "version": "12.5.6",
+  "version": "12.5.7-muiv6",
   "dependencies": {
     "@react-spring/web": "^9.7.1",
     "classnames": "^2.3.1",
@@ -94,10 +94,10 @@
     "version-changelog": "^3.1.1"
   },
   "peerDependencies": {
-    "@redsift/icons": "^12.5.6-0",
+    "@redsift/icons": "^12.5.7-0",
     "react": ">=17",
     "react-dom": ">=17",
     "styled-components": "6.1.19"
   },
-  "gitHead": "4766a439a603d095b3d6e0abe2cd0b3a0d2b43c0"
+  "gitHead": "babc964c4b96de7a529d908429b65e7fa767f601"
 }