@transferwise/components 46.140.0 → 46.141.0

package/build/promoCard/PromoCardGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PromoCardGroup.mjs","sources":["../../src/promoCard/PromoCardGroup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { FunctionComponent, ReactNode, useState, useEffect, useMemo } from 'react';\n\nimport { PromoCardProps } from './PromoCard';\nimport PromoCardContext from './PromoCardContext';\n\nexport type AriaRoleRadioGroup = 'radiogroup';\n\nexport interface PromoCardGroupProps {\n  /**\n   * Optional class name(s) to add to the group container.\n   */\n  className?: string;\n  /**\n   * The PromoCard components to display inside the group.\n   */\n  children: ReactNode;\n  /**\n   * The default checked for the group.\n   */\n  defaultChecked?: string;\n  /**\n   * Optional ID to add to the group container.\n   */\n  id?: string;\n  /**\n   * Whether the group is disabled or not.\n   */\n  isDisabled?: boolean;\n  /**\n   * Optional label to display above the group.\n   */\n  label?: string;\n  /**\n   * Optional function to call when the group value changes.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * Optional ID to add to the group container for testing purposes.\n   */\n  testId?: string;\n}\n\n/**\n * PromoCardGroup component.\n *\n * A PromoCardGroup is a container for PromoCard components that allows the user to select one or more\n * cards from a group. It can be used to display a set of related options, and can be customized with\n * various props to suit different use cases.\n *\n * @param {ReactNode} children - The PromoCard components to display inside the group.\n * @param {string} className - Optional class name(s) to add to the group container.\n * @param {string} defaultChecked - The default value for the group.\n * @param {string} id - Optional ID to add to the group container.\n * @param {boolean} isDisabled=false - Whether the group is disabled or not.\n * @param {string} label - Optional label to display above the group.\n * @param {Function} onChange - Optional function to call when the group value changes.\n * @param {string} testId - Optional ID to add to the group container for testing purposes.\n * @returns {React.JSX.Element} - The PromoCardGroup component.\n */\nconst PromoCardGroup: FunctionComponent<PromoCardGroupProps> = ({\n  children,\n  className,\n  defaultChecked = '',\n  id,\n  isDisabled = false,\n  onChange = () => {},\n  testId,\n}) => {\n  const [state, setState] = useState<string>(defaultChecked);\n  const [containerRole, setContainerRole] = useState<string | null>(null);\n\n  /**\n   * The context value for the PromoCardGroup.\n   *\n   * The context value is an object that contains the current state of the\n   * group, whether the group is disabled or not, and a function to call when\n   * the group value changes. This value is used to provide context to child\n   * PromoCard components, allowing them to interact with the group and update\n   * its state.\n   */\n  const contextValue = useMemo(() => {\n    const handleOnChange = (value: string) => {\n      setState(value);\n      onChange(value);\n    };\n\n    return { state, isDisabled, onChange: handleOnChange };\n  }, [state, isDisabled, onChange]);\n\n  const commonClasses = clsx(\n    {\n      'np-CardGroup': true,\n      'is-disabled': isDisabled,\n    },\n    className,\n  );\n\n  const commonProps = {\n    className: commonClasses,\n    id,\n    'data-testid': testId,\n    role: containerRole as AriaRoleRadioGroup | undefined, // Add the role attribute here\n  };\n\n  useEffect(() => {\n    setState(defaultChecked);\n\n    // Collect an array of types from the children PromoCard components\n    const types =\n      React.Children.map(children, (child) => {\n        if (React.isValidElement<PromoCardProps>(child) && child.props.type) {\n          return child.props.type;\n        }\n        return null;\n      })?.filter((type): type is 'radio' | 'checkbox' => type !== null && type !== undefined) ?? [];\n\n    // Check if all types are the same\n    const allTypesAreTheSame = types.every((type) => type === types[0]);\n\n    // If all types are the same and the type is 'radio', set the container role\n    setContainerRole(allTypesAreTheSame && types[0] === 'radio' ? 'radiogroup' : null);\n  }, [defaultChecked, children]);\n\n  return (\n    <PromoCardContext.Provider value={contextValue}>\n      <div {...commonProps}>{children}</div>\n    </PromoCardContext.Provider>\n  );\n};\n\nexport default React.memo(PromoCardGroup);\n"],"names":["PromoCardGroup","children","className","defaultChecked","id","isDisabled","onChange","testId","state","setState","useState","containerRole","setContainerRole","contextValue","useMemo","handleOnChange","value","commonClasses","clsx","commonProps","role","useEffect","types","React","Children","map","child","isValidElement","props","type","filter","undefined","allTypesAreTheSame","every","_jsx","PromoCardContext","Provider","memo"],"mappings":";;;;;AA4DA,MAAMA,cAAc,GAA2CA,CAAC;EAC9DC,QAAQ;EACRC,SAAS;AACTC,EAAAA,cAAc,GAAG,EAAE;EACnBC,EAAE;AACFC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,QAAQ,GAAGA,MAAK,CAAE,CAAC;AACnBC,EAAAA;AAAM,CACP,KAAI;EACH,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,QAAQ,CAASP,cAAc,CAAC;EAC1D,MAAM,CAACQ,aAAa,EAAEC,gBAAgB,CAAC,GAAGF,QAAQ,CAAgB,IAAI,CAAC;AAEvE;;;;;;;;AAQG;AACH,EAAA,MAAMG,YAAY,GAAGC,OAAO,CAAC,MAAK;IAChC,MAAMC,cAAc,GAAIC,KAAa,IAAI;MACvCP,QAAQ,CAACO,KAAK,CAAC;MACfV,QAAQ,CAACU,KAAK,CAAC;IACjB,CAAC;IAED,OAAO;MAAER,KAAK;MAAEH,UAAU;AAAEC,MAAAA,QAAQ,EAAES;KAAgB;EACxD,CAAC,EAAE,CAACP,KAAK,EAAEH,UAAU,EAAEC,QAAQ,CAAC,CAAC;EAEjC,MAAMW,aAAa,GAAGC,IAAI,CACxB;AACE,IAAA,cAAc,EAAE,IAAI;AACpB,IAAA,aAAa,EAAEb;GAChB,EACDH,SAAS,CACV;AAED,EAAA,MAAMiB,WAAW,GAAG;AAClBjB,IAAAA,SAAS,EAAEe,aAAa;IACxBb,EAAE;AACF,IAAA,aAAa,EAAEG,MAAM;IACrBa,IAAI,EAAET,aAA+C;GACtD;AAEDU,EAAAA,SAAS,CAAC,MAAK;IACbZ,QAAQ,CAACN,cAAc,CAAC;AAExB;IACA,MAAMmB,KAAK,GACTC,cAAK,CAACC,QAAQ,CAACC,GAAG,CAACxB,QAAQ,EAAGyB,KAAK,IAAI;AACrC,MAAA,iBAAIH,cAAK,CAACI,cAAc,CAAiBD,KAAK,CAAC,IAAIA,KAAK,CAACE,KAAK,CAACC,IAAI,EAAE;AACnE,QAAA,OAAOH,KAAK,CAACE,KAAK,CAACC,IAAI;AACzB,MAAA;AACA,MAAA,OAAO,IAAI;AACb,IAAA,CAAC,CAAC,EAAEC,MAAM,CAAED,IAAI,IAAmCA,IAAI,KAAK,IAAI,IAAIA,IAAI,KAAKE,SAAS,CAAC,IAAI,EAAE;AAE/F;AACA,IAAA,MAAMC,kBAAkB,GAAGV,KAAK,CAACW,KAAK,CAAEJ,IAAI,IAAKA,IAAI,KAAKP,KAAK,CAAC,CAAC,CAAC,CAAC;AAEnE;AACAV,IAAAA,gBAAgB,CAACoB,kBAAkB,IAAIV,KAAK,CAAC,CAAC,CAAC,KAAK,OAAO,GAAG,YAAY,GAAG,IAAI,CAAC;AACpF,EAAA,CAAC,EAAE,CAACnB,cAAc,EAAEF,QAAQ,CAAC,CAAC;AAE9B,EAAA,oBACEiC,GAAA,CAACC,gBAAgB,CAACC,QAAQ,EAAA;AAACpB,IAAAA,KAAK,EAAEH,YAAa;AAAAZ,IAAAA,QAAA,eAC7CiC,GAAA,CAAA,KAAA,EAAA;AAAA,MAAA,GAASf,WAAW;AAAAlB,MAAAA,QAAA,EAAGA;KAAc;AACvC,GAA2B,CAAC;AAEhC,CAAC;AAED,6BAAA,aAAesB,cAAK,CAACc,IAAI,CAACrC,cAAc,CAAC;;;;"}
+{"version":3,"file":"PromoCardGroup.mjs","sources":["../../src/promoCard/PromoCardGroup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { FunctionComponent, ReactNode, useState, useEffect, useMemo } from 'react';\n\nimport { PromoCardProps } from './PromoCard';\nimport PromoCardContext from './PromoCardContext';\n\nexport type AriaRoleRadioGroup = 'radiogroup';\n\nexport interface PromoCardGroupProps {\n  /**\n   * Optional class name(s) to add to the group container.\n   */\n  className?: string;\n  /**\n   * The PromoCard components to display inside the group.\n   */\n  children: ReactNode;\n  /**\n   * The default checked for the group.\n   */\n  defaultChecked?: string;\n  /**\n   * Optional ID to add to the group container.\n   */\n  id?: string;\n  /**\n   * Whether the group is disabled or not.\n   */\n  isDisabled?: boolean;\n  /**\n   * Optional label to display above the group.\n   */\n  label?: string;\n  /**\n   * Optional function to call when the group value changes.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * Optional ID to add to the group container for testing purposes.\n   */\n  testId?: string;\n}\n\n/**\n * PromoCardGroup component.\n *\n * A PromoCardGroup is a container for PromoCard components that allows the user to select one or more\n * cards from a group. It can be used to display a set of related options, and can be customized with\n * various props to suit different use cases.\n *\n * @param {ReactNode} children - The PromoCard components to display inside the group.\n * @param {string} className - Optional class name(s) to add to the group container.\n * @param {string} defaultChecked - The default value for the group.\n * @param {string} id - Optional ID to add to the group container.\n * @param {boolean} isDisabled=false - Whether the group is disabled or not.\n * @param {string} label - Optional label to display above the group.\n * @param {Function} onChange - Optional function to call when the group value changes.\n * @param {string} testId - Optional ID to add to the group container for testing purposes.\n * @returns {React.JSX.Element} - The PromoCardGroup component.\n */\nconst PromoCardGroup: FunctionComponent<PromoCardGroupProps> = ({\n  children,\n  className,\n  defaultChecked = '',\n  id,\n  isDisabled = false,\n  onChange = () => {},\n  testId,\n}) => {\n  const [promoCardState, setPromoCardState] = useState<{\n    defaultChecked: string;\n    state: string;\n  }>({\n    defaultChecked,\n    state: defaultChecked,\n  });\n\n  useEffect(() => {\n    if (promoCardState.defaultChecked !== defaultChecked) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing defaultChecked prop to internal state\n      setPromoCardState({\n        defaultChecked,\n        state: defaultChecked,\n      });\n    }\n  }, [defaultChecked, promoCardState.defaultChecked]);\n\n  const { state } = promoCardState;\n  const setState = (newState: string) =>\n    setPromoCardState((prev) => ({ ...prev, state: newState }));\n\n  // Derive container role from children\n  const containerRole = useMemo(() => {\n    // Collect an array of types from the children PromoCard components\n    const types =\n      React.Children.map(children, (child) => {\n        if (React.isValidElement<PromoCardProps>(child) && child.props.type) {\n          return child.props.type;\n        }\n        return null;\n      })?.filter((type): type is 'radio' | 'checkbox' => type !== null && type !== undefined) ?? [];\n\n    // Check if all types are the same\n    const allTypesAreTheSame = types.every((type) => type === types[0]);\n\n    // If all types are the same and the type is 'radio', return 'radiogroup'\n    return allTypesAreTheSame && types[0] === 'radio' ? 'radiogroup' : null;\n  }, [children]);\n\n  /**\n   * The context value for the PromoCardGroup.\n   *\n   * The context value is an object that contains the current state of the\n   * group, whether the group is disabled or not, and a function to call when\n   * the group value changes. This value is used to provide context to child\n   * PromoCard components, allowing them to interact with the group and update\n   * its state.\n   */\n  const contextValue = useMemo(() => {\n    const handleOnChange = (value: string) => {\n      setState(value);\n      onChange(value);\n    };\n\n    return { state, isDisabled, onChange: handleOnChange };\n  }, [state, isDisabled, onChange]);\n\n  const commonClasses = clsx(\n    {\n      'np-CardGroup': true,\n      'is-disabled': isDisabled,\n    },\n    className,\n  );\n\n  const commonProps = {\n    className: commonClasses,\n    id,\n    'data-testid': testId,\n    role: containerRole as AriaRoleRadioGroup | undefined, // Add the role attribute here\n  };\n\n  return (\n    <PromoCardContext.Provider value={contextValue}>\n      <div {...commonProps}>{children}</div>\n    </PromoCardContext.Provider>\n  );\n};\n\nexport default React.memo(PromoCardGroup);\n"],"names":["PromoCardGroup","children","className","defaultChecked","id","isDisabled","onChange","testId","promoCardState","setPromoCardState","useState","state","useEffect","setState","newState","prev","containerRole","useMemo","types","React","Children","map","child","isValidElement","props","type","filter","undefined","allTypesAreTheSame","every","contextValue","handleOnChange","value","commonClasses","clsx","commonProps","role","_jsx","PromoCardContext","Provider","memo"],"mappings":"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"}

package/build/segmentedControl/SegmentedControl.js

@@ -37,6 +37,7 @@ const SegmentedControl = ({
   segments,
   onChange
 }) => {
+  const isMountedRef = React.useRef(false);
   const [animate, setAnimate] = React.useState(false);
   const segmentsRef = React.useRef(null);
   if (segments.length > 3) {
@@ -60,7 +61,11 @@ const SegmentedControl = ({
     }
   };
   React.useEffect(() => {
-    setAnimate(true);
+    if (isMountedRef.current) {
+      setAnimate(true);
+    } else {
+      isMountedRef.current = true;
+    }
     updateSegmentPosition();
     const handleWindowSizeChange = () => {
       setAnimate(false);

package/build/segmentedControl/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sources":["../../src/segmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createRef, useEffect, useRef, useState } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\n\ntype SegmentBase = { id: string; label: string; value: string };\n\ntype Segment = SegmentBase & { controls?: never };\ntype SegmentWithControls = SegmentBase & { controls: string };\n\nexport type Segments = readonly Segment[] | readonly SegmentWithControls[];\n\ntype SegmentedControlPropsBase = {\n  name: string;\n  value: string;\n  mode: 'input' | 'view';\n  onChange: (value: string) => void;\n};\n\ntype SegmentedControlViewProps = {\n  mode: 'view';\n  segments: readonly SegmentWithControls[];\n};\n\ntype SegmentedControlInputProps = {\n  mode: 'input';\n  segments: readonly Segment[];\n};\n\nexport type SegmentedControlProps = SegmentedControlPropsBase &\n  (SegmentedControlViewProps | SegmentedControlInputProps);\n\nconst SegmentedControl = ({\n  name,\n  value,\n  mode = 'input',\n  segments,\n  onChange,\n}: SegmentedControlProps) => {\n  const [animate, setAnimate] = useState(false);\n\n  const segmentsRef = useRef<HTMLDivElement>(null);\n\n  if (segments.length > 3) {\n    throw new Error(\n      'SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control',\n    );\n  }\n\n  const segmentsWithRefs = segments.map((segment) => ({\n    ...segment,\n    ref: createRef<HTMLLabelElement | HTMLButtonElement>(),\n  }));\n\n  const updateSegmentPosition = () => {\n    const selectedSegmentRef = segmentsWithRefs.find((segment) => segment.value === value)?.ref;\n\n    // We grab the active segments style object from the ref\n    // and set the css variables to the selected segments width and x position.\n    // This is so we can animate the highlight to the selected segment\n    if (selectedSegmentRef?.current && segmentsRef.current) {\n      const { style } = segmentsRef.current;\n      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);\n      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);\n    }\n  };\n\n  useEffect(() => {\n    setAnimate(true);\n    updateSegmentPosition();\n\n    const handleWindowSizeChange = () => {\n      setAnimate(false);\n      updateSegmentPosition();\n    };\n\n    window.addEventListener('resize', handleWindowSizeChange);\n    return () => {\n      window.removeEventListener('resize', handleWindowSizeChange);\n    };\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [segmentsWithRefs, value]);\n\n  return (\n    <div\n      ref={segmentsRef}\n      data-testid=\"segmented-control\"\n      className={clsx('segmented-control', {\n        'segmented-control--input': mode === 'input',\n      })}\n    >\n      <div\n        className={clsx('segmented-control__segments', {\n          'segmented-control__segments--no-animate': !animate,\n        })}\n        role={mode !== 'input' ? 'tablist' : undefined}\n      >\n        {segmentsWithRefs.map((segment) => {\n          const onSelect = () => {\n            setAnimate(true);\n            onChange(segment.value);\n          };\n          return mode === 'input' ? (\n            <label\n              ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}\n              key={segment.id}\n              htmlFor={segment.id}\n              className={clsx('segmented-control__segment', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n            >\n              <input\n                type=\"radio\"\n                className=\"segmented-control__radio-input\"\n                id={segment.id}\n                name={name}\n                value={segment.value}\n                checked={value === segment.value}\n                onChange={onSelect}\n              />\n              <Body\n                className=\"segmented-control__text\"\n                as=\"span\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </label>\n          ) : (\n            <button\n              ref={segment.ref as React.MutableRefObject<HTMLButtonElement | null>}\n              key={segment.id}\n              type=\"button\"\n              role=\"tab\"\n              id={segment.id}\n              aria-controls={segment.controls}\n              aria-selected={value === segment.value}\n              className={clsx('segmented-control__segment', 'segmented-control__button', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n              onClick={onSelect}\n            >\n              <Body\n                as=\"span\"\n                className=\"segmented-control__text\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default SegmentedControl;\n"],"names":["SegmentedControl","name","value","mode","segments","onChange","animate","setAnimate","useState","segmentsRef","useRef","length","Error","segmentsWithRefs","map","segment","ref","createRef","updateSegmentPosition","selectedSegmentRef","find","current","style","setProperty","offsetWidth","offsetLeft","useEffect","handleWindowSizeChange","window","addEventListener","removeEventListener","_jsx","className","clsx","children","role","undefined","onSelect","_jsxs","htmlFor","id","type","checked","Body","as","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","label","controls","onClick"],"mappings":"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"}
+{"version":3,"file":"SegmentedControl.js","sources":["../../src/segmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createRef, useEffect, useRef, useState } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\n\ntype SegmentBase = { id: string; label: string; value: string };\n\ntype Segment = SegmentBase & { controls?: never };\ntype SegmentWithControls = SegmentBase & { controls: string };\n\nexport type Segments = readonly Segment[] | readonly SegmentWithControls[];\n\ntype SegmentedControlPropsBase = {\n  name: string;\n  value: string;\n  mode: 'input' | 'view';\n  onChange: (value: string) => void;\n};\n\ntype SegmentedControlViewProps = {\n  mode: 'view';\n  segments: readonly SegmentWithControls[];\n};\n\ntype SegmentedControlInputProps = {\n  mode: 'input';\n  segments: readonly Segment[];\n};\n\nexport type SegmentedControlProps = SegmentedControlPropsBase &\n  (SegmentedControlViewProps | SegmentedControlInputProps);\n\nconst SegmentedControl = ({\n  name,\n  value,\n  mode = 'input',\n  segments,\n  onChange,\n}: SegmentedControlProps) => {\n  const isMountedRef = useRef(false);\n  const [animate, setAnimate] = useState(false);\n\n  const segmentsRef = useRef<HTMLDivElement>(null);\n\n  if (segments.length > 3) {\n    throw new Error(\n      'SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control',\n    );\n  }\n\n  const segmentsWithRefs = segments.map((segment) => ({\n    ...segment,\n    ref: createRef<HTMLLabelElement | HTMLButtonElement>(),\n  }));\n\n  const updateSegmentPosition = () => {\n    const selectedSegmentRef = segmentsWithRefs.find((segment) => segment.value === value)?.ref;\n\n    // We grab the active segments style object from the ref\n    // and set the css variables to the selected segments width and x position.\n    // This is so we can animate the highlight to the selected segment\n    if (selectedSegmentRef?.current && segmentsRef.current) {\n      const { style } = segmentsRef.current;\n      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);\n      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);\n    }\n  };\n\n  useEffect(() => {\n    if (isMountedRef.current) {\n      setAnimate(true);\n    } else {\n      isMountedRef.current = true;\n    }\n\n    updateSegmentPosition();\n\n    const handleWindowSizeChange = () => {\n      setAnimate(false);\n      updateSegmentPosition();\n    };\n\n    window.addEventListener('resize', handleWindowSizeChange);\n    return () => {\n      window.removeEventListener('resize', handleWindowSizeChange);\n    };\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [segmentsWithRefs, value]);\n\n  return (\n    <div\n      ref={segmentsRef}\n      data-testid=\"segmented-control\"\n      className={clsx('segmented-control', {\n        'segmented-control--input': mode === 'input',\n      })}\n    >\n      <div\n        className={clsx('segmented-control__segments', {\n          'segmented-control__segments--no-animate': !animate,\n        })}\n        role={mode !== 'input' ? 'tablist' : undefined}\n      >\n        {segmentsWithRefs.map((segment) => {\n          const onSelect = () => {\n            setAnimate(true);\n            onChange(segment.value);\n          };\n          return mode === 'input' ? (\n            <label\n              ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}\n              key={segment.id}\n              htmlFor={segment.id}\n              className={clsx('segmented-control__segment', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n            >\n              <input\n                type=\"radio\"\n                className=\"segmented-control__radio-input\"\n                id={segment.id}\n                name={name}\n                value={segment.value}\n                checked={value === segment.value}\n                onChange={onSelect}\n              />\n              <Body\n                className=\"segmented-control__text\"\n                as=\"span\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </label>\n          ) : (\n            <button\n              ref={segment.ref as React.MutableRefObject<HTMLButtonElement | null>}\n              key={segment.id}\n              type=\"button\"\n              role=\"tab\"\n              id={segment.id}\n              aria-controls={segment.controls}\n              aria-selected={value === segment.value}\n              className={clsx('segmented-control__segment', 'segmented-control__button', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n              onClick={onSelect}\n            >\n              <Body\n                as=\"span\"\n                className=\"segmented-control__text\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default SegmentedControl;\n"],"names":["SegmentedControl","name","value","mode","segments","onChange","isMountedRef","useRef","animate","setAnimate","useState","segmentsRef","length","Error","segmentsWithRefs","map","segment","ref","createRef","updateSegmentPosition","selectedSegmentRef","find","current","style","setProperty","offsetWidth","offsetLeft","useEffect","handleWindowSizeChange","window","addEventListener","removeEventListener","_jsx","className","clsx","children","role","undefined","onSelect","_jsxs","htmlFor","id","type","checked","Body","as","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","label","controls","onClick"],"mappings":"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"}

package/build/segmentedControl/SegmentedControl.mjs

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { useState, useRef, createRef, useEffect } from 'react';
+import { useRef, useState, createRef, useEffect } from 'react';
 import Body from '../body/Body.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
@@ -33,6 +33,7 @@ const SegmentedControl = ({
   segments,
   onChange
 }) => {
+  const isMountedRef = useRef(false);
   const [animate, setAnimate] = useState(false);
   const segmentsRef = useRef(null);
   if (segments.length > 3) {
@@ -56,7 +57,11 @@ const SegmentedControl = ({
     }
   };
   useEffect(() => {
-    setAnimate(true);
+    if (isMountedRef.current) {
+      setAnimate(true);
+    } else {
+      isMountedRef.current = true;
+    }
     updateSegmentPosition();
     const handleWindowSizeChange = () => {
       setAnimate(false);

package/build/segmentedControl/SegmentedControl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.mjs","sources":["../../src/segmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createRef, useEffect, useRef, useState } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\n\ntype SegmentBase = { id: string; label: string; value: string };\n\ntype Segment = SegmentBase & { controls?: never };\ntype SegmentWithControls = SegmentBase & { controls: string };\n\nexport type Segments = readonly Segment[] | readonly SegmentWithControls[];\n\ntype SegmentedControlPropsBase = {\n  name: string;\n  value: string;\n  mode: 'input' | 'view';\n  onChange: (value: string) => void;\n};\n\ntype SegmentedControlViewProps = {\n  mode: 'view';\n  segments: readonly SegmentWithControls[];\n};\n\ntype SegmentedControlInputProps = {\n  mode: 'input';\n  segments: readonly Segment[];\n};\n\nexport type SegmentedControlProps = SegmentedControlPropsBase &\n  (SegmentedControlViewProps | SegmentedControlInputProps);\n\nconst SegmentedControl = ({\n  name,\n  value,\n  mode = 'input',\n  segments,\n  onChange,\n}: SegmentedControlProps) => {\n  const [animate, setAnimate] = useState(false);\n\n  const segmentsRef = useRef<HTMLDivElement>(null);\n\n  if (segments.length > 3) {\n    throw new Error(\n      'SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control',\n    );\n  }\n\n  const segmentsWithRefs = segments.map((segment) => ({\n    ...segment,\n    ref: createRef<HTMLLabelElement | HTMLButtonElement>(),\n  }));\n\n  const updateSegmentPosition = () => {\n    const selectedSegmentRef = segmentsWithRefs.find((segment) => segment.value === value)?.ref;\n\n    // We grab the active segments style object from the ref\n    // and set the css variables to the selected segments width and x position.\n    // This is so we can animate the highlight to the selected segment\n    if (selectedSegmentRef?.current && segmentsRef.current) {\n      const { style } = segmentsRef.current;\n      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);\n      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);\n    }\n  };\n\n  useEffect(() => {\n    setAnimate(true);\n    updateSegmentPosition();\n\n    const handleWindowSizeChange = () => {\n      setAnimate(false);\n      updateSegmentPosition();\n    };\n\n    window.addEventListener('resize', handleWindowSizeChange);\n    return () => {\n      window.removeEventListener('resize', handleWindowSizeChange);\n    };\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [segmentsWithRefs, value]);\n\n  return (\n    <div\n      ref={segmentsRef}\n      data-testid=\"segmented-control\"\n      className={clsx('segmented-control', {\n        'segmented-control--input': mode === 'input',\n      })}\n    >\n      <div\n        className={clsx('segmented-control__segments', {\n          'segmented-control__segments--no-animate': !animate,\n        })}\n        role={mode !== 'input' ? 'tablist' : undefined}\n      >\n        {segmentsWithRefs.map((segment) => {\n          const onSelect = () => {\n            setAnimate(true);\n            onChange(segment.value);\n          };\n          return mode === 'input' ? (\n            <label\n              ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}\n              key={segment.id}\n              htmlFor={segment.id}\n              className={clsx('segmented-control__segment', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n            >\n              <input\n                type=\"radio\"\n                className=\"segmented-control__radio-input\"\n                id={segment.id}\n                name={name}\n                value={segment.value}\n                checked={value === segment.value}\n                onChange={onSelect}\n              />\n              <Body\n                className=\"segmented-control__text\"\n                as=\"span\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </label>\n          ) : (\n            <button\n              ref={segment.ref as React.MutableRefObject<HTMLButtonElement | null>}\n              key={segment.id}\n              type=\"button\"\n              role=\"tab\"\n              id={segment.id}\n              aria-controls={segment.controls}\n              aria-selected={value === segment.value}\n              className={clsx('segmented-control__segment', 'segmented-control__button', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n              onClick={onSelect}\n            >\n              <Body\n                as=\"span\"\n                className=\"segmented-control__text\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default SegmentedControl;\n"],"names":["SegmentedControl","name","value","mode","segments","onChange","animate","setAnimate","useState","segmentsRef","useRef","length","Error","segmentsWithRefs","map","segment","ref","createRef","updateSegmentPosition","selectedSegmentRef","find","current","style","setProperty","offsetWidth","offsetLeft","useEffect","handleWindowSizeChange","window","addEventListener","removeEventListener","_jsx","className","clsx","children","role","undefined","onSelect","_jsxs","htmlFor","id","type","checked","Body","as","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","label","controls","onClick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAMA,gBAAgB,GAAGA,CAAC;EACxBC,IAAI;EACJC,KAAK;AACLC,EAAAA,IAAI,GAAG,OAAO;EACdC,QAAQ;AACRC,EAAAA;AAAQ,CACc,KAAI;EAC1B,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;AAE7C,EAAA,MAAMC,WAAW,GAAGC,MAAM,CAAiB,IAAI,CAAC;AAEhD,EAAA,IAAIN,QAAQ,CAACO,MAAM,GAAG,CAAC,EAAE;AACvB,IAAA,MAAM,IAAIC,KAAK,CACb,oHAAoH,CACrH;AACH,EAAA;AAEA,EAAA,MAAMC,gBAAgB,GAAGT,QAAQ,CAACU,GAAG,CAAEC,OAAO,KAAM;AAClD,IAAA,GAAGA,OAAO;IACVC,GAAG,eAAEC,SAAS;AACf,GAAA,CAAC,CAAC;EAEH,MAAMC,qBAAqB,GAAGA,MAAK;AACjC,IAAA,MAAMC,kBAAkB,GAAGN,gBAAgB,CAACO,IAAI,CAAEL,OAAO,IAAKA,OAAO,CAACb,KAAK,KAAKA,KAAK,CAAC,EAAEc,GAAG;AAE3F;AACA;AACA;AACA,IAAA,IAAIG,kBAAkB,EAAEE,OAAO,IAAIZ,WAAW,CAACY,OAAO,EAAE;MACtD,MAAM;AAAEC,QAAAA;OAAO,GAAGb,WAAW,CAACY,OAAO;AACrCC,MAAAA,KAAK,CAACC,WAAW,CAAC,2BAA2B,EAAE,CAAA,EAAGJ,kBAAkB,CAACE,OAAO,CAACG,WAAW,CAAA,EAAA,CAAI,CAAC;AAC7FF,MAAAA,KAAK,CAACC,WAAW,CAAC,uBAAuB,EAAE,CAAA,EAAGJ,kBAAkB,CAACE,OAAO,CAACI,UAAU,CAAA,EAAA,CAAI,CAAC;AAC1F,IAAA;EACF,CAAC;AAEDC,EAAAA,SAAS,CAAC,MAAK;IACbnB,UAAU,CAAC,IAAI,CAAC;AAChBW,IAAAA,qBAAqB,EAAE;IAEvB,MAAMS,sBAAsB,GAAGA,MAAK;MAClCpB,UAAU,CAAC,KAAK,CAAC;AACjBW,MAAAA,qBAAqB,EAAE;IACzB,CAAC;AAEDU,IAAAA,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEF,sBAAsB,CAAC;AACzD,IAAA,OAAO,MAAK;AACVC,MAAAA,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAEH,sBAAsB,CAAC;IAC9D,CAAC;AAED;AACF,EAAA,CAAC,EAAE,CAACd,gBAAgB,EAAEX,KAAK,CAAC,CAAC;AAE7B,EAAA,oBACE6B,GAAA,CAAA,KAAA,EAAA;AACEf,IAAAA,GAAG,EAAEP,WAAY;AACjB,IAAA,aAAA,EAAY,mBAAmB;AAC/BuB,IAAAA,SAAS,EAAEC,IAAI,CAAC,mBAAmB,EAAE;MACnC,0BAA0B,EAAE9B,IAAI,KAAK;AACtC,KAAA,CAAE;AAAA+B,IAAAA,QAAA,eAEHH,GAAA,CAAA,KAAA,EAAA;AACEC,MAAAA,SAAS,EAAEC,IAAI,CAAC,6BAA6B,EAAE;AAC7C,QAAA,yCAAyC,EAAE,CAAC3B;AAC7C,OAAA,CAAE;AACH6B,MAAAA,IAAI,EAAEhC,IAAI,KAAK,OAAO,GAAG,SAAS,GAAGiC,SAAU;AAAAF,MAAAA,QAAA,EAE9CrB,gBAAgB,CAACC,GAAG,CAAEC,OAAO,IAAI;QAChC,MAAMsB,QAAQ,GAAGA,MAAK;UACpB9B,UAAU,CAAC,IAAI,CAAC;AAChBF,UAAAA,QAAQ,CAACU,OAAO,CAACb,KAAK,CAAC;QACzB,CAAC;AACD,QAAA,OAAOC,IAAI,KAAK,OAAO,gBACrBmC,IAAA,CAAA,OAAA,EAAA;UACEtB,GAAG,EAAED,OAAO,CAACC,GAAuD;UAEpEuB,OAAO,EAAExB,OAAO,CAACyB,EAAG;AACpBR,UAAAA,SAAS,EAAEC,IAAI,CAAC,4BAA4B,EAAE;AAC5C,YAAA,qCAAqC,EAAE/B,KAAK,KAAKa,OAAO,CAACb;AAC1D,WAAA,CAAE;AAAAgC,UAAAA,QAAA,gBAEHH,GAAA,CAAA,OAAA,EAAA;AACEU,YAAAA,IAAI,EAAC,OAAO;AACZT,YAAAA,SAAS,EAAC,gCAAgC;YAC1CQ,EAAE,EAAEzB,OAAO,CAACyB,EAAG;AACfvC,YAAAA,IAAI,EAAEA,IAAK;YACXC,KAAK,EAAEa,OAAO,CAACb,KAAM;AACrBwC,YAAAA,OAAO,EAAExC,KAAK,KAAKa,OAAO,CAACb,KAAM;AACjCG,YAAAA,QAAQ,EAAEgC;AAAS,WAAA,CAErB,eAAAN,GAAA,CAACY,IAAI,EAAA;AACHX,YAAAA,SAAS,EAAC,yBAAyB;AACnCY,YAAAA,EAAE,EAAC,MAAM;AACTH,YAAAA,IAAI,EACFvC,KAAK,KAAKa,OAAO,CAACb,KAAK,GAAG2C,UAAU,CAACC,iBAAiB,GAAGD,UAAU,CAACE,YACrE;YAAAb,QAAA,EAEAnB,OAAO,CAACiC;AAAK,WACV,CACR;AAAA,SAAA,EAxBOjC,OAAO,CAACyB,EAwBR,CAAC,gBAERT,GAAA,CAAA,QAAA,EAAA;UACEf,GAAG,EAAED,OAAO,CAACC,GAAwD;AAErEyB,UAAAA,IAAI,EAAC,QAAQ;AACbN,UAAAA,IAAI,EAAC,KAAK;UACVK,EAAE,EAAEzB,OAAO,CAACyB,EAAG;UACf,eAAA,EAAezB,OAAO,CAACkC,QAAS;AAChC,UAAA,eAAA,EAAe/C,KAAK,KAAKa,OAAO,CAACb,KAAM;AACvC8B,UAAAA,SAAS,EAAEC,IAAI,CAAC,4BAA4B,EAAE,2BAA2B,EAAE;AACzE,YAAA,qCAAqC,EAAE/B,KAAK,KAAKa,OAAO,CAACb;AAC1D,WAAA,CAAE;AACHgD,UAAAA,OAAO,EAAEb,QAAS;UAAAH,QAAA,eAElBH,GAAA,CAACY,IAAI,EAAA;AACHC,YAAAA,EAAE,EAAC,MAAM;AACTZ,YAAAA,SAAS,EAAC,yBAAyB;AACnCS,YAAAA,IAAI,EACFvC,KAAK,KAAKa,OAAO,CAACb,KAAK,GAAG2C,UAAU,CAACC,iBAAiB,GAAGD,UAAU,CAACE,YACrE;YAAAb,QAAA,EAEAnB,OAAO,CAACiC;WACL;SACR,EApBOjC,OAAO,CAACyB,EAoBP,CACT;MACH,CAAC;KACE;AACP,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"SegmentedControl.mjs","sources":["../../src/segmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createRef, useEffect, useRef, useState } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\n\ntype SegmentBase = { id: string; label: string; value: string };\n\ntype Segment = SegmentBase & { controls?: never };\ntype SegmentWithControls = SegmentBase & { controls: string };\n\nexport type Segments = readonly Segment[] | readonly SegmentWithControls[];\n\ntype SegmentedControlPropsBase = {\n  name: string;\n  value: string;\n  mode: 'input' | 'view';\n  onChange: (value: string) => void;\n};\n\ntype SegmentedControlViewProps = {\n  mode: 'view';\n  segments: readonly SegmentWithControls[];\n};\n\ntype SegmentedControlInputProps = {\n  mode: 'input';\n  segments: readonly Segment[];\n};\n\nexport type SegmentedControlProps = SegmentedControlPropsBase &\n  (SegmentedControlViewProps | SegmentedControlInputProps);\n\nconst SegmentedControl = ({\n  name,\n  value,\n  mode = 'input',\n  segments,\n  onChange,\n}: SegmentedControlProps) => {\n  const isMountedRef = useRef(false);\n  const [animate, setAnimate] = useState(false);\n\n  const segmentsRef = useRef<HTMLDivElement>(null);\n\n  if (segments.length > 3) {\n    throw new Error(\n      'SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control',\n    );\n  }\n\n  const segmentsWithRefs = segments.map((segment) => ({\n    ...segment,\n    ref: createRef<HTMLLabelElement | HTMLButtonElement>(),\n  }));\n\n  const updateSegmentPosition = () => {\n    const selectedSegmentRef = segmentsWithRefs.find((segment) => segment.value === value)?.ref;\n\n    // We grab the active segments style object from the ref\n    // and set the css variables to the selected segments width and x position.\n    // This is so we can animate the highlight to the selected segment\n    if (selectedSegmentRef?.current && segmentsRef.current) {\n      const { style } = segmentsRef.current;\n      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);\n      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);\n    }\n  };\n\n  useEffect(() => {\n    if (isMountedRef.current) {\n      setAnimate(true);\n    } else {\n      isMountedRef.current = true;\n    }\n\n    updateSegmentPosition();\n\n    const handleWindowSizeChange = () => {\n      setAnimate(false);\n      updateSegmentPosition();\n    };\n\n    window.addEventListener('resize', handleWindowSizeChange);\n    return () => {\n      window.removeEventListener('resize', handleWindowSizeChange);\n    };\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [segmentsWithRefs, value]);\n\n  return (\n    <div\n      ref={segmentsRef}\n      data-testid=\"segmented-control\"\n      className={clsx('segmented-control', {\n        'segmented-control--input': mode === 'input',\n      })}\n    >\n      <div\n        className={clsx('segmented-control__segments', {\n          'segmented-control__segments--no-animate': !animate,\n        })}\n        role={mode !== 'input' ? 'tablist' : undefined}\n      >\n        {segmentsWithRefs.map((segment) => {\n          const onSelect = () => {\n            setAnimate(true);\n            onChange(segment.value);\n          };\n          return mode === 'input' ? (\n            <label\n              ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}\n              key={segment.id}\n              htmlFor={segment.id}\n              className={clsx('segmented-control__segment', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n            >\n              <input\n                type=\"radio\"\n                className=\"segmented-control__radio-input\"\n                id={segment.id}\n                name={name}\n                value={segment.value}\n                checked={value === segment.value}\n                onChange={onSelect}\n              />\n              <Body\n                className=\"segmented-control__text\"\n                as=\"span\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </label>\n          ) : (\n            <button\n              ref={segment.ref as React.MutableRefObject<HTMLButtonElement | null>}\n              key={segment.id}\n              type=\"button\"\n              role=\"tab\"\n              id={segment.id}\n              aria-controls={segment.controls}\n              aria-selected={value === segment.value}\n              className={clsx('segmented-control__segment', 'segmented-control__button', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n              onClick={onSelect}\n            >\n              <Body\n                as=\"span\"\n                className=\"segmented-control__text\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default SegmentedControl;\n"],"names":["SegmentedControl","name","value","mode","segments","onChange","isMountedRef","useRef","animate","setAnimate","useState","segmentsRef","length","Error","segmentsWithRefs","map","segment","ref","createRef","updateSegmentPosition","selectedSegmentRef","find","current","style","setProperty","offsetWidth","offsetLeft","useEffect","handleWindowSizeChange","window","addEventListener","removeEventListener","_jsx","className","clsx","children","role","undefined","onSelect","_jsxs","htmlFor","id","type","checked","Body","as","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","label","controls","onClick"],"mappings":"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"}

package/build/styles/css/neptune.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:11 GMT
+ * Generated on Thu, 14 May 2026 16:11:43 GMT
  */
 
 :root {
@@ -144,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-personal {
@@ -328,7 +328,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -512,7 +512,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -696,7 +696,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-personal--dark {
@@ -880,7 +880,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-platform {
@@ -1064,7 +1064,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1248,7 +1248,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-business {
@@ -1433,7 +1433,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-business--dark {
@@ -1618,7 +1618,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1803,7 +1803,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-business--bright-green {
@@ -4351,48 +4351,53 @@ a.text-inverse:focus {
 
 @media (max-width: 320px) {
   .np-theme-personal {
-    --delta: 2;
-    --size-4: calc(4px / var(--delta));
-    --size-5: calc(5px / var(--delta));
-    --size-8: calc(8px / var(--delta));
-    --size-10: calc(10px / var(--delta));
-    --size-12: calc(12px / var(--delta));
-    --size-14: calc(14px / var(--delta));
-    --size-16: calc(16px / var(--delta));
-    --size-24: calc(24px / var(--delta));
-    --size-32: calc(32px / var(--delta));
-    --size-40: calc(40px / var(--delta));
-    --size-48: calc(48px / var(--delta));
-    --size-52: calc(52px / var(--delta));
-    --size-56: calc(56px / var(--delta));
-    --size-60: calc(60px / var(--delta));
-    --size-64: calc(64px / var(--delta));
-    --size-72: calc(72px / var(--delta));
-    --size-80: calc(80px / var(--delta));
-    --size-88: calc(88px / var(--delta));
-    --size-96: calc(96px / var(--delta));
-    --size-104: calc(104px / var(--delta));
-    --size-112: calc(112px / var(--delta));
-    --size-120: calc(120px / var(--delta));
-    --size-126: calc(126px / var(--delta));
-    --size-128: calc(128px / var(--delta));
-    --size-146: calc(146px / var(--delta));
-    --size-154: calc(154px / var(--delta));
-    --size-x-small: calc(24px / var(--delta));
-    --size-small: calc(32px / var(--delta));
-    --size-medium: calc(40px / var(--delta));
-    --size-large: calc(48px / var(--delta));
-    --size-x-large: calc(56px / var(--delta));
-    --size-2x-large: calc(72px / var(--delta));
-    --space-content-horizontal: calc(16px / var(--delta));
-    --space-small: calc(16px / var(--delta));
-    --space-medium: calc(32px / var(--delta));
-    --space-large: calc(40px / var(--delta));
-    --space-x-large: calc(56px / var(--delta));
-    --padding-x-small: var(--size-8);
-    --padding-small: var(--size-16);
-    --padding-medium: var(--size-24);
-    --padding-large: var(--size-32);
+    --padding-x-small: 4px;
+    --padding-small: 8px;
+    --padding-medium: 12px;
+    --padding-large: 16px;
+    --size-4: 2px;
+    --size-5: 2.5px;
+    --size-8: 4px;
+    --size-10: 5px;
+    --size-12: 6px;
+    --size-14: 7px;
+    --size-16: 8px;
+    --size-24: 12px;
+    --size-32: 16px;
+    --size-40: 20px;
+    --size-48: 24px;
+    --size-52: 26px;
+    --size-56: 28px;
+    --size-60: 30px;
+    --size-64: 32px;
+    --size-72: 36px;
+    --size-80: 40px;
+    --size-88: 44px;
+    --size-96: 48px;
+    --size-104: 52px;
+    --size-112: 56px;
+    --size-120: 60px;
+    --size-126: 63px;
+    --size-128: 64px;
+    --size-146: 73px;
+    --size-154: 77px;
+    --size-160: 80px;
+    --size-x-small: 12px;
+    --size-small: 16px;
+    --size-medium: 20px;
+    --size-large: 24px;
+    --size-x-large: 28px;
+    --size-2x-large: 36px;
+    --space-content-horizontal: 8px;
+    --space-small: 8px;
+    --space-medium: 16px;
+    --space-large: 20px;
+    --space-x-large: 28px;
+  }
+}
+
+@media (max-width: 320px) {
+  .np-theme-personal {
     --input-height-base: var(--size-32);
     --input-height-large: var(--input-height-small);
     --input-padding: var(--input-padding-small);

package/build/styles/less/neptune-tokens.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly, this file was auto-generated.
-// Generated on Wed, 13 May 2026 12:45:11 GMT
+// Generated on Thu, 14 May 2026 16:11:43 GMT
 
 @color-dark-content-primary: #e2e6e8;
 @color-dark-content-secondary: #c9cbce;
@@ -222,7 +222,7 @@
 @font-family-display: 'Wise Sans', 'Inter', sans-serif;
 
 // Do not edit directly, this file was auto-generated.
-// Generated on Wed, 13 May 2026 12:45:11 GMT
+// Generated on Thu, 14 May 2026 16:11:43 GMT
 
 @color-base-blue-light: #00b9ff;
 @color-base-blue-mid: #00a2dd;

package/build/styles/main.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:11 GMT
+ * Generated on Thu, 14 May 2026 16:11:43 GMT
  */
 
 :root {
@@ -144,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-personal {
@@ -328,7 +328,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -512,7 +512,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -696,7 +696,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-personal--dark {
@@ -880,7 +880,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-platform {
@@ -1064,7 +1064,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1248,7 +1248,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-business {
@@ -1433,7 +1433,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-business--dark {
@@ -1618,7 +1618,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1803,7 +1803,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-business--bright-green {
@@ -4351,48 +4351,53 @@ a.text-inverse:focus {
 
 @media (max-width: 320px) {
   .np-theme-personal {
-    --delta: 2;
-    --size-4: calc(4px / var(--delta));
-    --size-5: calc(5px / var(--delta));
-    --size-8: calc(8px / var(--delta));
-    --size-10: calc(10px / var(--delta));
-    --size-12: calc(12px / var(--delta));
-    --size-14: calc(14px / var(--delta));
-    --size-16: calc(16px / var(--delta));
-    --size-24: calc(24px / var(--delta));
-    --size-32: calc(32px / var(--delta));
-    --size-40: calc(40px / var(--delta));
-    --size-48: calc(48px / var(--delta));
-    --size-52: calc(52px / var(--delta));
-    --size-56: calc(56px / var(--delta));
-    --size-60: calc(60px / var(--delta));
-    --size-64: calc(64px / var(--delta));
-    --size-72: calc(72px / var(--delta));
-    --size-80: calc(80px / var(--delta));
-    --size-88: calc(88px / var(--delta));
-    --size-96: calc(96px / var(--delta));
-    --size-104: calc(104px / var(--delta));
-    --size-112: calc(112px / var(--delta));
-    --size-120: calc(120px / var(--delta));
-    --size-126: calc(126px / var(--delta));
-    --size-128: calc(128px / var(--delta));
-    --size-146: calc(146px / var(--delta));
-    --size-154: calc(154px / var(--delta));
-    --size-x-small: calc(24px / var(--delta));
-    --size-small: calc(32px / var(--delta));
-    --size-medium: calc(40px / var(--delta));
-    --size-large: calc(48px / var(--delta));
-    --size-x-large: calc(56px / var(--delta));
-    --size-2x-large: calc(72px / var(--delta));
-    --space-content-horizontal: calc(16px / var(--delta));
-    --space-small: calc(16px / var(--delta));
-    --space-medium: calc(32px / var(--delta));
-    --space-large: calc(40px / var(--delta));
-    --space-x-large: calc(56px / var(--delta));
-    --padding-x-small: var(--size-8);
-    --padding-small: var(--size-16);
-    --padding-medium: var(--size-24);
-    --padding-large: var(--size-32);
+    --padding-x-small: 4px;
+    --padding-small: 8px;
+    --padding-medium: 12px;
+    --padding-large: 16px;
+    --size-4: 2px;
+    --size-5: 2.5px;
+    --size-8: 4px;
+    --size-10: 5px;
+    --size-12: 6px;
+    --size-14: 7px;
+    --size-16: 8px;
+    --size-24: 12px;
+    --size-32: 16px;
+    --size-40: 20px;
+    --size-48: 24px;
+    --size-52: 26px;
+    --size-56: 28px;
+    --size-60: 30px;
+    --size-64: 32px;
+    --size-72: 36px;
+    --size-80: 40px;
+    --size-88: 44px;
+    --size-96: 48px;
+    --size-104: 52px;
+    --size-112: 56px;
+    --size-120: 60px;
+    --size-126: 63px;
+    --size-128: 64px;
+    --size-146: 73px;
+    --size-154: 77px;
+    --size-160: 80px;
+    --size-x-small: 12px;
+    --size-small: 16px;
+    --size-medium: 20px;
+    --size-large: 24px;
+    --size-x-large: 28px;
+    --size-2x-large: 36px;
+    --space-content-horizontal: 8px;
+    --space-small: 8px;
+    --space-medium: 16px;
+    --space-large: 20px;
+    --space-x-large: 28px;
+  }
+}
+
+@media (max-width: 320px) {
+  .np-theme-personal {
     --input-height-base: var(--size-32);
     --input-height-large: var(--input-height-small);
     --input-padding: var(--input-padding-small);

package/build/styles/props/neptune-tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:11 GMT
+ * Generated on Thu, 14 May 2026 16:11:43 GMT
  */
 
 :root {