@mrshmllw/smores-react 16.7.1 → 16.9.0

package/dist/ButtonContainer/ButtonContainer.d.ts

@@ -0,0 +1,32 @@
+import { FC, ReactElement } from 'react';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+type ButtonElement = ReactElement<{
+    'aria-describedby'?: string;
+}>;
+export type ButtonContainerOrientation = 'vertical' | 'horizontal';
+export type ButtonContainerSupportingMessage = {
+    /** Short plain text, e.g. reassurance copy. Required, so an icon never shows on its own */
+    text: string;
+    /** Optional decorative icon shown before the text */
+    icon?: IconDefinition;
+};
+export type ButtonContainerProps = {
+    className?: string;
+    /** Main action. Shown first when vertical, last (right) when horizontal */
+    primaryButton: ButtonElement;
+    /** Optional supporting action */
+    secondaryButton?: ButtonElement;
+    /** Optional low-emphasis action. Shown last when vertical, first (left) when horizontal */
+    tertiaryButton?: ButtonElement;
+    /** Stack the buttons vertically or lay them out side by side */
+    orientation?: ButtonContainerOrientation;
+    /** Optional message shown below the buttons, e.g. reassurance copy */
+    supportingMessage?: ButtonContainerSupportingMessage;
+    /**
+     * Pin the container to the bottom of the viewport on mobile.
+     * On larger screens it always sits in the page flow.
+     */
+    pinned?: boolean;
+};
+export declare const ButtonContainer: FC<ButtonContainerProps>;
+export {};

package/dist/ButtonContainer/ButtonContainer.js

@@ -0,0 +1,131 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, cloneElement, useEffect, useId, useRef, useState, } from 'react';
+import styled, { css, useTheme } from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+export const ButtonContainer = ({ className, primaryButton, secondaryButton, tertiaryButton, orientation = 'vertical', supportingMessage, pinned = true, }) => {
+    const theme = useTheme();
+    const supportingTextId = useId();
+    const containerRef = useRef(null);
+    const [containerHeight, setContainerHeight] = useState(0);
+    // Reserve the pinned container's height in the page flow so it never covers content
+    useEffect(() => {
+        const element = containerRef.current;
+        if (!pinned || !element || typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(() => {
+            setContainerHeight(element.getBoundingClientRect().height);
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [pinned]);
+    const hasSupportingMessage = Boolean(supportingMessage?.text?.trim());
+    const describedPrimaryButton = hasSupportingMessage
+        ? cloneElement(primaryButton, {
+            'aria-describedby': [
+                primaryButton.props['aria-describedby'],
+                supportingTextId,
+            ]
+                .filter(Boolean)
+                .join(' '),
+        })
+        : primaryButton;
+    // DOM order follows the visual order so keyboard focus moves the way the buttons read
+    const buttons = orientation === 'horizontal'
+        ? [tertiaryButton, secondaryButton, describedPrimaryButton]
+        : [describedPrimaryButton, secondaryButton, tertiaryButton];
+    return (_jsxs(_Fragment, { children: [pinned && _jsx(Spacer, { "aria-hidden": "true", $height: containerHeight }), _jsxs(Container, { ref: containerRef, className: className, $pinned: pinned, children: [_jsx(ButtonGroup, { $orientation: orientation, children: buttons.map((button, index) => button && _jsx(Fragment, { children: button }, index)) }), supportingMessage && hasSupportingMessage && (_jsxs(SupportingText, { id: supportingTextId, children: [supportingMessage.icon && (_jsx(SupportingIconContainer, { children: _jsx(FontAwesomeIcon, { icon: supportingMessage.icon, color: theme.color.icon.subtle }) })), supportingMessage.text] }))] })] }));
+};
+const desktopMediaQuery = '@media (min-width: 768px)';
+const desktopVerticalButtonMaxWidth = '400px';
+const desktopHorizontalButtonMinWidth = '160px';
+const Spacer = styled.div(({ $height }) => css `
+    height: ${$height}px;
+
+    ${desktopMediaQuery} {
+      display: none;
+    }
+  `);
+const Container = styled.div(({ theme, $pinned }) => css `
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space[150]};
+    width: 100%;
+    // The library ships no CSS reset, so keep the pinned padding inside the viewport width
+    box-sizing: border-box;
+
+    ${$pinned &&
+    css `
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: ${theme.elevation.floating};
+        padding: ${theme.space[200]};
+        padding-bottom: calc(
+          ${theme.space[200]} + env(safe-area-inset-bottom, 0px)
+        );
+        background-color: ${theme.color.surface.base[200]};
+        border-radius: ${theme.radius[200]} ${theme.radius[200]} 0 0;
+
+        ${desktopMediaQuery} {
+          position: static;
+          z-index: auto;
+          padding: 0;
+          background-color: transparent;
+          border-radius: 0;
+        }
+      `}
+  `);
+// On desktop, horizontal buttons all match the width of the longest label
+const ButtonGroup = styled.div(({ theme, $orientation }) => css `
+    display: grid;
+    gap: ${theme.space[150]};
+
+    ${$orientation === 'vertical' &&
+    css `
+        ${desktopMediaQuery} {
+          grid-template-columns: minmax(0, ${desktopVerticalButtonMaxWidth});
+          justify-content: center;
+        }
+      `}
+
+    ${$orientation === 'horizontal' &&
+    css `
+        grid-auto-flow: column;
+        grid-auto-columns: minmax(0, 1fr);
+
+        // On desktop the buttons share the width of the longest label, centred
+        ${desktopMediaQuery} {
+          grid-auto-columns: minmax(${desktopHorizontalButtonMinWidth}, 1fr);
+          width: fit-content;
+          max-width: 100%;
+          margin: 0 auto;
+        }
+      `}
+  `);
+// Figma icons use Font Awesome's square "full" bounding box (640 units),
+// in which the glyph's 512 unit em height takes up 80% of the box
+const SupportingIconContainer = styled.span(({ theme }) => css `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    margin-right: ${theme.space['050']};
+    vertical-align: top;
+
+    svg {
+      width: 100%;
+      height: 80%;
+      overflow: visible;
+    }
+  `);
+const SupportingText = styled.p(({ theme }) => css `
+    margin: 0;
+    font-size: ${theme.font.body[200].fontSize};
+    font-weight: ${theme.font.body[200].fontWeight};
+    line-height: ${theme.font.body[200].lineHeight};
+    color: ${theme.color.text.subtle};
+    text-align: center;
+  `);
+//# sourceMappingURL=ButtonContainer.js.map

package/dist/ButtonContainer/ButtonContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonContainer.js","sourceRoot":"","sources":["../../src/ButtonContainer/ButtonContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  Fragment,\n  ReactElement,\n  cloneElement,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react'\nimport styled, { css, useTheme } from 'styled-components'\nimport { IconDefinition } from '@fortawesome/fontawesome-svg-core'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\n\ntype ButtonElement = ReactElement<{ 'aria-describedby'?: string }>\n\nexport type ButtonContainerOrientation = 'vertical' | 'horizontal'\n\nexport type ButtonContainerSupportingMessage = {\n  /** Short plain text, e.g. reassurance copy. Required, so an icon never shows on its own */\n  text: string\n  /** Optional decorative icon shown before the text */\n  icon?: IconDefinition\n}\n\nexport type ButtonContainerProps = {\n  className?: string\n  /** Main action. Shown first when vertical, last (right) when horizontal */\n  primaryButton: ButtonElement\n  /** Optional supporting action */\n  secondaryButton?: ButtonElement\n  /** Optional low-emphasis action. Shown last when vertical, first (left) when horizontal */\n  tertiaryButton?: ButtonElement\n  /** Stack the buttons vertically or lay them out side by side */\n  orientation?: ButtonContainerOrientation\n  /** Optional message shown below the buttons, e.g. reassurance copy */\n  supportingMessage?: ButtonContainerSupportingMessage\n  /**\n   * Pin the container to the bottom of the viewport on mobile.\n   * On larger screens it always sits in the page flow.\n   */\n  pinned?: boolean\n}\n\nexport const ButtonContainer: FC<ButtonContainerProps> = ({\n  className,\n  primaryButton,\n  secondaryButton,\n  tertiaryButton,\n  orientation = 'vertical',\n  supportingMessage,\n  pinned = true,\n}) => {\n  const theme = useTheme()\n  const supportingTextId = useId()\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [containerHeight, setContainerHeight] = useState(0)\n\n  // Reserve the pinned container's height in the page flow so it never covers content\n  useEffect(() => {\n    const element = containerRef.current\n    if (!pinned || !element || typeof ResizeObserver === 'undefined') return\n\n    const observer = new ResizeObserver(() => {\n      setContainerHeight(element.getBoundingClientRect().height)\n    })\n    observer.observe(element)\n\n    return () => observer.disconnect()\n  }, [pinned])\n\n  const hasSupportingMessage = Boolean(supportingMessage?.text?.trim())\n\n  const describedPrimaryButton = hasSupportingMessage\n    ? cloneElement(primaryButton, {\n        'aria-describedby': [\n          primaryButton.props['aria-describedby'],\n          supportingTextId,\n        ]\n          .filter(Boolean)\n          .join(' '),\n      })\n    : primaryButton\n\n  // DOM order follows the visual order so keyboard focus moves the way the buttons read\n  const buttons =\n    orientation === 'horizontal'\n      ? [tertiaryButton, secondaryButton, describedPrimaryButton]\n      : [describedPrimaryButton, secondaryButton, tertiaryButton]\n\n  return (\n    <>\n      {pinned && <Spacer aria-hidden=\"true\" $height={containerHeight} />}\n      <Container ref={containerRef} className={className} $pinned={pinned}>\n        <ButtonGroup $orientation={orientation}>\n          {buttons.map(\n            (button, index) =>\n              button && <Fragment key={index}>{button}</Fragment>,\n          )}\n        </ButtonGroup>\n        {supportingMessage && hasSupportingMessage && (\n          <SupportingText id={supportingTextId}>\n            {supportingMessage.icon && (\n              <SupportingIconContainer>\n                <FontAwesomeIcon\n                  icon={supportingMessage.icon}\n                  color={theme.color.icon.subtle}\n                />\n              </SupportingIconContainer>\n            )}\n            {supportingMessage.text}\n          </SupportingText>\n        )}\n      </Container>\n    </>\n  )\n}\n\nconst desktopMediaQuery = '@media (min-width: 768px)'\nconst desktopVerticalButtonMaxWidth = '400px'\nconst desktopHorizontalButtonMinWidth = '160px'\n\nconst Spacer = styled.div<{ $height: number }>(\n  ({ $height }) => css`\n    height: ${$height}px;\n\n    ${desktopMediaQuery} {\n      display: none;\n    }\n  `,\n)\n\nconst Container = styled.div<{ $pinned: boolean }>(\n  ({ theme, $pinned }) => css`\n    display: flex;\n    flex-direction: column;\n    gap: ${theme.space[150]};\n    width: 100%;\n    // The library ships no CSS reset, so keep the pinned padding inside the viewport width\n    box-sizing: border-box;\n\n    ${\n      $pinned &&\n      css`\n        position: fixed;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        z-index: ${theme.elevation.floating};\n        padding: ${theme.space[200]};\n        padding-bottom: calc(\n          ${theme.space[200]} + env(safe-area-inset-bottom, 0px)\n        );\n        background-color: ${theme.color.surface.base[200]};\n        border-radius: ${theme.radius[200]} ${theme.radius[200]} 0 0;\n\n        ${desktopMediaQuery} {\n          position: static;\n          z-index: auto;\n          padding: 0;\n          background-color: transparent;\n          border-radius: 0;\n        }\n      `\n    }\n  `,\n)\n\n// On desktop, horizontal buttons all match the width of the longest label\nconst ButtonGroup = styled.div<{ $orientation: ButtonContainerOrientation }>(\n  ({ theme, $orientation }) => css`\n    display: grid;\n    gap: ${theme.space[150]};\n\n    ${\n      $orientation === 'vertical' &&\n      css`\n        ${desktopMediaQuery} {\n          grid-template-columns: minmax(0, ${desktopVerticalButtonMaxWidth});\n          justify-content: center;\n        }\n      `\n    }\n\n    ${\n      $orientation === 'horizontal' &&\n      css`\n        grid-auto-flow: column;\n        grid-auto-columns: minmax(0, 1fr);\n\n        // On desktop the buttons share the width of the longest label, centred\n        ${desktopMediaQuery} {\n          grid-auto-columns: minmax(${desktopHorizontalButtonMinWidth}, 1fr);\n          width: fit-content;\n          max-width: 100%;\n          margin: 0 auto;\n        }\n      `\n    }\n  `,\n)\n\n// Figma icons use Font Awesome's square \"full\" bounding box (640 units),\n// in which the glyph's 512 unit em height takes up 80% of the box\nconst SupportingIconContainer = styled.span(\n  ({ theme }) => css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    margin-right: ${theme.space['050']};\n    vertical-align: top;\n\n    svg {\n      width: 100%;\n      height: 80%;\n      overflow: visible;\n    }\n  `,\n)\n\nconst SupportingText = styled.p(\n  ({ theme }) => css`\n    margin: 0;\n    font-size: ${theme.font.body[200].fontSize};\n    font-weight: ${theme.font.body[200].fontWeight};\n    line-height: ${theme.font.body[200].lineHeight};\n    color: ${theme.color.text.subtle};\n    text-align: center;\n  `,\n)\n"]}

package/dist/ButtonContainer/index.d.ts

@@ -0,0 +1,2 @@
+export { ButtonContainer } from './ButtonContainer';
+export type { ButtonContainerOrientation, ButtonContainerProps, ButtonContainerSupportingMessage, } from './ButtonContainer';

package/dist/ButtonContainer/index.js

@@ -0,0 +1,2 @@
+export { ButtonContainer } from './ButtonContainer';
+//# sourceMappingURL=index.js.map

package/dist/ButtonContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ButtonContainer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA","sourcesContent":["export { ButtonContainer } from './ButtonContainer'\nexport type {\n  ButtonContainerOrientation,\n  ButtonContainerProps,\n  ButtonContainerSupportingMessage,\n} from './ButtonContainer'\n"]}

package/dist/Dropdown/Dropdown.js

@@ -4,7 +4,7 @@ import styled, { css, useTheme } from 'styled-components';
 import { Box } from '../Box';
 import { Field } from '../fields/Field';
 import { InputLeadingIconContainer, StyledFrontIcon, } from '../fields/components/CommonInput';
-import { fieldDisabledStyle, fieldFocusAttrs, fieldFocusRing, } from '../fields/components/fieldStyles';
+import { fieldDisabledStyle, fieldFocusAttrs, fieldFocusRing, fieldHoverBorderColor, } from '../fields/components/fieldStyles';
 import { useUniqueId } from '../utils/id';
 import { useControllableState } from '../utils/useControlledState';
 import { IconContainer } from '../sharedStyles/shared.styles';
@@ -54,7 +54,7 @@ export const Dropdown = forwardRef(function Dropdown({ id: idProp, placeholder,
                     }, $error: error, ref: ref, onBlur: onBlur, name: name, autoComplete: autoComplete, "aria-label": ariaLabel, "aria-invalid": error || undefined, "aria-required": required || undefined, "aria-describedby": describedBy, $frontIcon: !!iconToRender, $fallbackStyle: fallbackStyle, value: value ?? '', children: [_jsx("option", { value: "", hidden: !showDefaultOption, disabled: true, children: defaultOptionLabel() }), dropdownItemsGroups.map((groupItems, i) => hasOptGroups ? (_jsx("optgroup", { label: groupItems[0].optionGroupLabel ?? 'Other', children: groupItems.map((el, j) => (_jsx("option", { value: el.value, children: el.label }, `${i}-${j}`))) }, i)) : (groupItems.map((el, j) => (_jsx("option", { value: el.value, children: el.label }, j)))))] }), _jsx(Caret, { children: _jsx(IconContainer, { $size: CHEVRON_SIZE, children: _jsx(FontAwesomeIcon, { icon: faChevronDown, color: theme.color.icon.subtle }) }) })] }) }));
 });
 const CHEVRON_SIZE = 16;
-const CHEVRON_INSET = 20;
+const CHEVRON_INSET = 16;
 const CHEVRON_TEXT_GAP = 4;
 const TEXT_PADDING_RIGHT = CHEVRON_INSET + CHEVRON_SIZE + CHEVRON_TEXT_GAP;
 const StyledSelect = styled.select.attrs(fieldFocusAttrs)(({ theme, $error, $frontIcon, $fallbackStyle, value }) => {
@@ -74,7 +74,7 @@ const StyledSelect = styled.select.attrs(fieldFocusAttrs)(({ theme, $error, $fro
       font-family: inherit;
       font-size: 16px;
       line-height: 20px;
-      text-overflow: ellipsis;
+      text-overflow: clip;
       cursor: pointer;
       outline: none;
 
@@ -86,7 +86,7 @@ const StyledSelect = styled.select.attrs(fieldFocusAttrs)(({ theme, $error, $fro
       // Hover mustn't override the focus border while the pointer is over a
       // focused field.
       &:hover:not(:disabled):not(:focus) {
-        border-color: ${borderColor(theme.color.border.base)};
+        border-color: ${fieldHoverBorderColor(theme, $error)};
       }
 
       &:focus {

package/dist/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  useMemo,\n} from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icons } from '../Icon'\n\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport {\n  InputLeadingIconContainer,\n  StyledFrontIcon,\n} from '../fields/components/CommonInput'\nimport {\n  fieldDisabledStyle,\n  fieldFocusAttrs,\n  fieldFocusRing,\n} from '../fields/components/fieldStyles'\nimport { useUniqueId } from '../utils/id'\nimport { useControllableState } from '../utils/useControlledState'\nimport { IconContainer } from '../sharedStyles/shared.styles'\nimport { faChevronDown } from '@awesome.me/kit-46ca99185c/icons/classic/solid'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\n\nexport type DropdownItem = {\n  optionGroupLabel?: string\n  label: string\n  value: string\n}\n\nexport interface Props extends CommonFieldProps {\n  placeholder?: string\n  showDefaultOption?: boolean\n  customDefaultOption?: string\n  name?: string\n  value?: string | null\n  defaultValue?: string\n  disabled?: boolean\n  list: DropdownItem[]\n  frontIcon?: Icons\n  iconComponent?: ReactNode\n  fallbackStyle?: boolean\n  /** Accessible name, for when there is no visible `label` */\n  'aria-label'?: string\n  /** Lets the browser autofill the field, e.g. `honorific-prefix` */\n  autoComplete?: string\n  onSelect?: (element: string) => void\n  onBlur?: (e: FocusEvent<HTMLSelectElement>) => void\n}\n\ntype TruncateProps =\n  | {\n      onSelect: (e: string) => void\n      onInputChange?: (e: FormEvent<HTMLSelectElement>) => void\n    }\n  | {\n      onSelect?: (e: string) => void\n      onInputChange: (e: FormEvent<HTMLSelectElement>) => void\n    }\n\nexport type DropdownProps = Props & TruncateProps\n\nexport const Dropdown = forwardRef(function Dropdown(\n  {\n    id: idProp,\n    placeholder,\n    showDefaultOption = false,\n    customDefaultOption,\n    name,\n    value: valueProp,\n    defaultValue,\n    disabled = false,\n    list,\n    onSelect,\n    error = false,\n    onInputChange,\n    onBlur,\n    frontIcon,\n    iconComponent,\n    fallbackStyle,\n    required,\n    'aria-label': ariaLabel,\n    autoComplete,\n    ...fieldProps\n  }: DropdownProps,\n  ref: ForwardedRef<HTMLSelectElement>,\n) {\n  const theme = useTheme()\n  const [value, setValue] = useControllableState({\n    initialState: defaultValue,\n    stateProp: valueProp,\n  })\n  const id = useUniqueId(idProp)\n  const assistiveTextId = `${id}-assistive-text`\n  const errorMsgId = `${id}-error`\n  const hasOptGroups = list.findIndex((item) => !!item.optionGroupLabel) !== -1\n\n  const dropdownItemsGroups = useMemo(() => {\n    const itemsPerGroupLabel = new Map<string, DropdownItem[]>()\n\n    list.forEach((item) => {\n      const key = item.optionGroupLabel ?? ''\n      const group = itemsPerGroupLabel.get(key) ?? []\n\n      group.push(item)\n      itemsPerGroupLabel.set(key, group)\n    })\n\n    return Array.from(itemsPerGroupLabel.values())\n  }, [list])\n\n  const defaultOptionLabel = () => {\n    if (!showDefaultOption) {\n      return placeholder\n    }\n    return customDefaultOption ?? 'Select an option'\n  }\n\n  // Only reference messages that the field actually renders.\n  const describedBy =\n    [\n      fieldProps.assistiveText &&\n        (!fieldProps.renderAsTitle || fieldProps.label) &&\n        assistiveTextId,\n      error && fieldProps.errorMsg && errorMsgId,\n    ]\n      .filter(Boolean)\n      .join(' ') || undefined\n\n  const iconToRender = iconComponent ? (\n    <InputLeadingIconContainer $size={16} $iconColor={theme.color.text.base}>\n      {iconComponent}\n    </InputLeadingIconContainer>\n  ) : frontIcon ? (\n    <StyledFrontIcon render={frontIcon} color=\"color.icon.subtle\" />\n  ) : null\n\n  return (\n    <Field\n      {...fieldProps}\n      htmlFor={id}\n      error={error}\n      required={required}\n      assistiveTextId={assistiveTextId}\n      errorMsgId={errorMsgId}\n    >\n      <Box flex alignItems=\"center\" style={{ position: 'relative' }}>\n        {iconToRender}\n        <StyledSelect\n          id={id}\n          disabled={disabled || list.length < 1}\n          onChange={(event) => {\n            const value = event.currentTarget.value\n\n            onSelect?.(value)\n            onInputChange?.(event)\n            setValue(value)\n          }}\n          $error={error}\n          ref={ref}\n          onBlur={onBlur}\n          name={name}\n          autoComplete={autoComplete}\n          aria-label={ariaLabel}\n          aria-invalid={error || undefined}\n          aria-required={required || undefined}\n          aria-describedby={describedBy}\n          $frontIcon={!!iconToRender}\n          $fallbackStyle={fallbackStyle}\n          value={value ?? ''}\n        >\n          <option value=\"\" hidden={!showDefaultOption} disabled>\n            {defaultOptionLabel()}\n          </option>\n\n          {dropdownItemsGroups.map((groupItems, i) =>\n            hasOptGroups ? (\n              <optgroup\n                key={i}\n                label={groupItems[0].optionGroupLabel ?? 'Other'}\n              >\n                {groupItems.map((el, j) => (\n                  <option key={`${i}-${j}`} value={el.value}>\n                    {el.label}\n                  </option>\n                ))}\n              </optgroup>\n            ) : (\n              groupItems.map((el, j) => (\n                <option key={j} value={el.value}>\n                  {el.label}\n                </option>\n              ))\n            ),\n          )}\n        </StyledSelect>\n        <Caret>\n          <IconContainer $size={CHEVRON_SIZE}>\n            <FontAwesomeIcon\n              icon={faChevronDown}\n              color={theme.color.icon.subtle}\n            />\n          </IconContainer>\n        </Caret>\n      </Box>\n    </Field>\n  )\n})\n\ninterface SSelect {\n  $error: boolean\n  $frontIcon: boolean\n  $fallbackStyle?: boolean\n  value?: string | null\n}\n\nconst CHEVRON_SIZE = 16\nconst CHEVRON_INSET = 20\nconst CHEVRON_TEXT_GAP = 4\nconst TEXT_PADDING_RIGHT = CHEVRON_INSET + CHEVRON_SIZE + CHEVRON_TEXT_GAP\n\nconst StyledSelect = styled.select.attrs(fieldFocusAttrs)<SSelect>(\n  ({ theme, $error, $frontIcon, $fallbackStyle, value }) => {\n    const borderColor = (color: string) =>\n      $error ? theme.color.feedback.negative[200] : color\n\n    return css`\n      appearance: none;\n      width: 100%;\n      height: 48px;\n      margin: 0;\n      padding: 12px ${TEXT_PADDING_RIGHT}px 12px ${$frontIcon ? '42px' : '12px'};\n      border: 2px solid ${borderColor(theme.color.border.subtle)};\n      border-radius: 12px;\n      background-color: ${\n        $fallbackStyle\n          ? theme.color.surface.base[300]\n          : theme.color.background['000']\n      };\n      color: ${value === '' ? theme.color.text.subtle : theme.color.text.base};\n      font-family: inherit;\n      font-size: 16px;\n      line-height: 20px;\n      text-overflow: ellipsis;\n      cursor: pointer;\n      outline: none;\n\n      option,\n      optgroup {\n        color: ${theme.color.text.base};\n      }\n\n      // Hover mustn't override the focus border while the pointer is over a\n      // focused field.\n      &:hover:not(:disabled):not(:focus) {\n        border-color: ${borderColor(theme.color.border.base)};\n      }\n\n      &:focus {\n        border-color: ${borderColor(theme.color.border.contrast)};\n      }\n\n      ${fieldFocusRing}\n      ${fieldDisabledStyle}\n    `\n  },\n)\n\nconst Caret = styled.div`\n  position: absolute;\n  z-index: 1;\n  right: ${CHEVRON_INSET}px;\n  display: flex;\n  pointer-events: none;\n`\n"]}
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  useMemo,\n} from 'react'\nimport styled, { css, useTheme } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icons } from '../Icon'\n\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport {\n  InputLeadingIconContainer,\n  StyledFrontIcon,\n} from '../fields/components/CommonInput'\nimport {\n  fieldDisabledStyle,\n  fieldFocusAttrs,\n  fieldFocusRing,\n  fieldHoverBorderColor,\n} from '../fields/components/fieldStyles'\nimport { useUniqueId } from '../utils/id'\nimport { useControllableState } from '../utils/useControlledState'\nimport { IconContainer } from '../sharedStyles/shared.styles'\nimport { faChevronDown } from '@awesome.me/kit-46ca99185c/icons/classic/solid'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\n\nexport type DropdownItem = {\n  optionGroupLabel?: string\n  label: string\n  value: string\n}\n\nexport interface Props extends CommonFieldProps {\n  placeholder?: string\n  showDefaultOption?: boolean\n  customDefaultOption?: string\n  name?: string\n  value?: string | null\n  defaultValue?: string\n  disabled?: boolean\n  list: DropdownItem[]\n  frontIcon?: Icons\n  iconComponent?: ReactNode\n  fallbackStyle?: boolean\n  /** Accessible name, for when there is no visible `label` */\n  'aria-label'?: string\n  /** Lets the browser autofill the field, e.g. `honorific-prefix` */\n  autoComplete?: string\n  onSelect?: (element: string) => void\n  onBlur?: (e: FocusEvent<HTMLSelectElement>) => void\n}\n\ntype TruncateProps =\n  | {\n      onSelect: (e: string) => void\n      onInputChange?: (e: FormEvent<HTMLSelectElement>) => void\n    }\n  | {\n      onSelect?: (e: string) => void\n      onInputChange: (e: FormEvent<HTMLSelectElement>) => void\n    }\n\nexport type DropdownProps = Props & TruncateProps\n\nexport const Dropdown = forwardRef(function Dropdown(\n  {\n    id: idProp,\n    placeholder,\n    showDefaultOption = false,\n    customDefaultOption,\n    name,\n    value: valueProp,\n    defaultValue,\n    disabled = false,\n    list,\n    onSelect,\n    error = false,\n    onInputChange,\n    onBlur,\n    frontIcon,\n    iconComponent,\n    fallbackStyle,\n    required,\n    'aria-label': ariaLabel,\n    autoComplete,\n    ...fieldProps\n  }: DropdownProps,\n  ref: ForwardedRef<HTMLSelectElement>,\n) {\n  const theme = useTheme()\n  const [value, setValue] = useControllableState({\n    initialState: defaultValue,\n    stateProp: valueProp,\n  })\n  const id = useUniqueId(idProp)\n  const assistiveTextId = `${id}-assistive-text`\n  const errorMsgId = `${id}-error`\n  const hasOptGroups = list.findIndex((item) => !!item.optionGroupLabel) !== -1\n\n  const dropdownItemsGroups = useMemo(() => {\n    const itemsPerGroupLabel = new Map<string, DropdownItem[]>()\n\n    list.forEach((item) => {\n      const key = item.optionGroupLabel ?? ''\n      const group = itemsPerGroupLabel.get(key) ?? []\n\n      group.push(item)\n      itemsPerGroupLabel.set(key, group)\n    })\n\n    return Array.from(itemsPerGroupLabel.values())\n  }, [list])\n\n  const defaultOptionLabel = () => {\n    if (!showDefaultOption) {\n      return placeholder\n    }\n    return customDefaultOption ?? 'Select an option'\n  }\n\n  // Only reference messages that the field actually renders.\n  const describedBy =\n    [\n      fieldProps.assistiveText &&\n        (!fieldProps.renderAsTitle || fieldProps.label) &&\n        assistiveTextId,\n      error && fieldProps.errorMsg && errorMsgId,\n    ]\n      .filter(Boolean)\n      .join(' ') || undefined\n\n  const iconToRender = iconComponent ? (\n    <InputLeadingIconContainer $size={16} $iconColor={theme.color.text.base}>\n      {iconComponent}\n    </InputLeadingIconContainer>\n  ) : frontIcon ? (\n    <StyledFrontIcon render={frontIcon} color=\"color.icon.subtle\" />\n  ) : null\n\n  return (\n    <Field\n      {...fieldProps}\n      htmlFor={id}\n      error={error}\n      required={required}\n      assistiveTextId={assistiveTextId}\n      errorMsgId={errorMsgId}\n    >\n      <Box flex alignItems=\"center\" style={{ position: 'relative' }}>\n        {iconToRender}\n        <StyledSelect\n          id={id}\n          disabled={disabled || list.length < 1}\n          onChange={(event) => {\n            const value = event.currentTarget.value\n\n            onSelect?.(value)\n            onInputChange?.(event)\n            setValue(value)\n          }}\n          $error={error}\n          ref={ref}\n          onBlur={onBlur}\n          name={name}\n          autoComplete={autoComplete}\n          aria-label={ariaLabel}\n          aria-invalid={error || undefined}\n          aria-required={required || undefined}\n          aria-describedby={describedBy}\n          $frontIcon={!!iconToRender}\n          $fallbackStyle={fallbackStyle}\n          value={value ?? ''}\n        >\n          <option value=\"\" hidden={!showDefaultOption} disabled>\n            {defaultOptionLabel()}\n          </option>\n\n          {dropdownItemsGroups.map((groupItems, i) =>\n            hasOptGroups ? (\n              <optgroup\n                key={i}\n                label={groupItems[0].optionGroupLabel ?? 'Other'}\n              >\n                {groupItems.map((el, j) => (\n                  <option key={`${i}-${j}`} value={el.value}>\n                    {el.label}\n                  </option>\n                ))}\n              </optgroup>\n            ) : (\n              groupItems.map((el, j) => (\n                <option key={j} value={el.value}>\n                  {el.label}\n                </option>\n              ))\n            ),\n          )}\n        </StyledSelect>\n        <Caret>\n          <IconContainer $size={CHEVRON_SIZE}>\n            <FontAwesomeIcon\n              icon={faChevronDown}\n              color={theme.color.icon.subtle}\n            />\n          </IconContainer>\n        </Caret>\n      </Box>\n    </Field>\n  )\n})\n\ninterface SSelect {\n  $error: boolean\n  $frontIcon: boolean\n  $fallbackStyle?: boolean\n  value?: string | null\n}\n\nconst CHEVRON_SIZE = 16\nconst CHEVRON_INSET = 16\nconst CHEVRON_TEXT_GAP = 4\nconst TEXT_PADDING_RIGHT = CHEVRON_INSET + CHEVRON_SIZE + CHEVRON_TEXT_GAP\n\nconst StyledSelect = styled.select.attrs(fieldFocusAttrs)<SSelect>(\n  ({ theme, $error, $frontIcon, $fallbackStyle, value }) => {\n    const borderColor = (color: string) =>\n      $error ? theme.color.feedback.negative[200] : color\n\n    return css`\n      appearance: none;\n      width: 100%;\n      height: 48px;\n      margin: 0;\n      padding: 12px ${TEXT_PADDING_RIGHT}px 12px ${$frontIcon ? '42px' : '12px'};\n      border: 2px solid ${borderColor(theme.color.border.subtle)};\n      border-radius: 12px;\n      background-color: ${\n        $fallbackStyle\n          ? theme.color.surface.base[300]\n          : theme.color.background['000']\n      };\n      color: ${value === '' ? theme.color.text.subtle : theme.color.text.base};\n      font-family: inherit;\n      font-size: 16px;\n      line-height: 20px;\n      text-overflow: clip;\n      cursor: pointer;\n      outline: none;\n\n      option,\n      optgroup {\n        color: ${theme.color.text.base};\n      }\n\n      // Hover mustn't override the focus border while the pointer is over a\n      // focused field.\n      &:hover:not(:disabled):not(:focus) {\n        border-color: ${fieldHoverBorderColor(theme, $error)};\n      }\n\n      &:focus {\n        border-color: ${borderColor(theme.color.border.contrast)};\n      }\n\n      ${fieldFocusRing}\n      ${fieldDisabledStyle}\n    `\n  },\n)\n\nconst Caret = styled.div`\n  position: absolute;\n  z-index: 1;\n  right: ${CHEVRON_INSET}px;\n  display: flex;\n  pointer-events: none;\n`\n"]}

package/dist/Textarea/Textarea.js

@@ -21,7 +21,7 @@ const StyledTextArea = styled.textarea `
   box-sizing: border-box;
   border-radius: 12px;
   width: 100%;
-  padding: 18px 14px;
+  padding: 12px;
   color: ${({ theme }) => theme.color.text.base};
   resize: ${({ $resize }) => $resize};
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'text')};

package/dist/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuC,UAAU,EAAE,MAAM,OAAO,CAAA;AACvE,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AA+BzC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAClD,EACE,EAAE,EAAE,MAAM,EACV,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,aAAa,EACb,MAAM,GAAG,MAAM,EACf,KAAK,GAAG,KAAK,EACb,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,MAAM,EACN,IAAI,GAAG,CAAC,EACR,aAAa,EACb,GAAG,UAAU,EACC,EAChB,GAAsC;IAEtC,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,OAAO,CACL,KAAC,KAAK,OAAK,UAAU,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,YAC9C,KAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,KAAK,EACb,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,MAAM,EACf,cAAc,EAAE,aAAa,EAC7B,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAiC,EAAE,EAAE;gBAC9C,QAAQ,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;gBACjC,aAAa,EAAE,CAAC,CAAC,CAAC,CAAA;YACpB,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,GACV,GACI,CACT,CAAA;AACH,CAAC,CAAC,CAAA;AASF,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAU;;;;gBAIhC,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,EAAE,CAC1C,cAAc;IACZ,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;IAC/B,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC;sBACf,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;WAKnD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;YACnC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO;YACxB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC;aACpD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;kBACrC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CACpC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;oBAMvD,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CACpC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI;;CAE1E,CAAA","sourcesContent":["import { FocusEvent, FormEvent, ForwardedRef, forwardRef } from 'react'\nimport styled from 'styled-components'\n\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { useUniqueId } from '../utils/id'\nimport { MarginProps } from '../utils/space'\n\ntype BaseProps = {\n  id?: string\n  placeholder?: string\n  name?: string\n  value: string\n  error?: boolean\n  errorMsg?: string\n  resize?: 'none' | 'both'\n  disabled?: boolean\n  maxLength?: number\n  onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void\n  rows?: number\n  fallbackStyle?: boolean\n} & CommonFieldProps &\n  MarginProps\n\ntype TruncateProps =\n  | {\n      onChange: (e: string) => void\n      onInputChange?: (e: FormEvent<HTMLTextAreaElement>) => void\n    }\n  | {\n      onChange?: (e: string) => void\n      onInputChange: (e: FormEvent<HTMLTextAreaElement>) => void\n    }\n\nexport type TextareaProps = BaseProps & TruncateProps\n\nexport const Textarea = forwardRef(function Textarea(\n  {\n    id: idProp,\n    name,\n    value,\n    onChange,\n    onInputChange,\n    resize = 'none',\n    error = false,\n    placeholder,\n    disabled = false,\n    maxLength,\n    onBlur,\n    rows = 4,\n    fallbackStyle,\n    ...fieldProps\n  }: TextareaProps,\n  ref: ForwardedRef<HTMLTextAreaElement>,\n) {\n  const id = useUniqueId(idProp)\n  return (\n    <Field {...fieldProps} htmlFor={id} error={error}>\n      <StyledTextArea\n        ref={ref}\n        $error={error}\n        id={id}\n        name={name}\n        disabled={disabled}\n        $resize={resize}\n        $fallbackStyle={fallbackStyle}\n        placeholder={placeholder}\n        value={value}\n        onChange={(e: FormEvent<HTMLTextAreaElement>) => {\n          onChange?.(e.currentTarget.value)\n          onInputChange?.(e)\n        }}\n        maxLength={maxLength}\n        onBlur={onBlur}\n        rows={rows}\n      />\n    </Field>\n  )\n})\n\ninterface TextArea {\n  $resize: 'none' | 'both'\n  disabled: boolean\n  $error: boolean\n  $fallbackStyle?: boolean\n}\n\nconst StyledTextArea = styled.textarea<TextArea>`\n  font-size: 16px;\n  font: inherit;\n  line-height: 20px;\n  background: ${({ $fallbackStyle, theme }) =>\n    $fallbackStyle\n      ? theme.color.surface.base[300]\n      : theme.color.background['000']};\n  border: 2px solid ${({ theme }) => theme.color.border.subtle};\n  box-sizing: border-box;\n  border-radius: 12px;\n  width: 100%;\n  padding: 18px 14px;\n  color: ${({ theme }) => theme.color.text.base};\n  resize: ${({ $resize }) => $resize};\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'text')};\n  opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};\n  border-color: ${({ $error, theme }) =>\n    $error ? theme.color.feedback.negative[200] : theme.color.border.subtle};\n  outline: none;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    border-color: ${({ $error, theme }) =>\n      $error ? theme.color.feedback.negative[200] : theme.color.border.base};\n  }\n`\n"]}
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuC,UAAU,EAAE,MAAM,OAAO,CAAA;AACvE,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AA+BzC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAClD,EACE,EAAE,EAAE,MAAM,EACV,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,aAAa,EACb,MAAM,GAAG,MAAM,EACf,KAAK,GAAG,KAAK,EACb,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,MAAM,EACN,IAAI,GAAG,CAAC,EACR,aAAa,EACb,GAAG,UAAU,EACC,EAChB,GAAsC;IAEtC,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,OAAO,CACL,KAAC,KAAK,OAAK,UAAU,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,YAC9C,KAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,KAAK,EACb,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,MAAM,EACf,cAAc,EAAE,aAAa,EAC7B,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAiC,EAAE,EAAE;gBAC9C,QAAQ,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;gBACjC,aAAa,EAAE,CAAC,CAAC,CAAC,CAAA;YACpB,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,GACV,GACI,CACT,CAAA;AACH,CAAC,CAAC,CAAA;AASF,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAU;;;;gBAIhC,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,EAAE,CAC1C,cAAc;IACZ,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;IAC/B,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC;sBACf,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;WAKnD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;YACnC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO;YACxB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC;aACpD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;kBACrC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CACpC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;oBAMvD,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CACpC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI;;CAE1E,CAAA","sourcesContent":["import { FocusEvent, FormEvent, ForwardedRef, forwardRef } from 'react'\nimport styled from 'styled-components'\n\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { useUniqueId } from '../utils/id'\nimport { MarginProps } from '../utils/space'\n\ntype BaseProps = {\n  id?: string\n  placeholder?: string\n  name?: string\n  value: string\n  error?: boolean\n  errorMsg?: string\n  resize?: 'none' | 'both'\n  disabled?: boolean\n  maxLength?: number\n  onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void\n  rows?: number\n  fallbackStyle?: boolean\n} & CommonFieldProps &\n  MarginProps\n\ntype TruncateProps =\n  | {\n      onChange: (e: string) => void\n      onInputChange?: (e: FormEvent<HTMLTextAreaElement>) => void\n    }\n  | {\n      onChange?: (e: string) => void\n      onInputChange: (e: FormEvent<HTMLTextAreaElement>) => void\n    }\n\nexport type TextareaProps = BaseProps & TruncateProps\n\nexport const Textarea = forwardRef(function Textarea(\n  {\n    id: idProp,\n    name,\n    value,\n    onChange,\n    onInputChange,\n    resize = 'none',\n    error = false,\n    placeholder,\n    disabled = false,\n    maxLength,\n    onBlur,\n    rows = 4,\n    fallbackStyle,\n    ...fieldProps\n  }: TextareaProps,\n  ref: ForwardedRef<HTMLTextAreaElement>,\n) {\n  const id = useUniqueId(idProp)\n  return (\n    <Field {...fieldProps} htmlFor={id} error={error}>\n      <StyledTextArea\n        ref={ref}\n        $error={error}\n        id={id}\n        name={name}\n        disabled={disabled}\n        $resize={resize}\n        $fallbackStyle={fallbackStyle}\n        placeholder={placeholder}\n        value={value}\n        onChange={(e: FormEvent<HTMLTextAreaElement>) => {\n          onChange?.(e.currentTarget.value)\n          onInputChange?.(e)\n        }}\n        maxLength={maxLength}\n        onBlur={onBlur}\n        rows={rows}\n      />\n    </Field>\n  )\n})\n\ninterface TextArea {\n  $resize: 'none' | 'both'\n  disabled: boolean\n  $error: boolean\n  $fallbackStyle?: boolean\n}\n\nconst StyledTextArea = styled.textarea<TextArea>`\n  font-size: 16px;\n  font: inherit;\n  line-height: 20px;\n  background: ${({ $fallbackStyle, theme }) =>\n    $fallbackStyle\n      ? theme.color.surface.base[300]\n      : theme.color.background['000']};\n  border: 2px solid ${({ theme }) => theme.color.border.subtle};\n  box-sizing: border-box;\n  border-radius: 12px;\n  width: 100%;\n  padding: 12px;\n  color: ${({ theme }) => theme.color.text.base};\n  resize: ${({ $resize }) => $resize};\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'text')};\n  opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};\n  border-color: ${({ $error, theme }) =>\n    $error ? theme.color.feedback.negative[200] : theme.color.border.subtle};\n  outline: none;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    border-color: ${({ $error, theme }) =>\n      $error ? theme.color.feedback.negative[200] : theme.color.border.base};\n  }\n`\n"]}

package/dist/fields/components/CommonInput.d.ts

@@ -12,9 +12,11 @@ interface IInput {
 interface SIcon {
     $disabled?: boolean;
 }
-export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
+export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}, IInput>> & string;
+}, IInput>, "onBlurCapture" | "onPointerDown"> & Partial<Pick<import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, IInput>, "onBlurCapture" | "onPointerDown">>> & string;
 export declare const InputLeadingIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }, {

package/dist/fields/components/CommonInput.js

@@ -1,32 +1,37 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { Icon } from '../../Icon';
 import { IconContainer } from '../../sharedStyles/shared.styles';
-export const Input = styled.input `
-  border: none;
-  color: ${({ $error, theme }) => $error ? theme.color.feedback.negative[200] : theme.color.text.base};
-  font-size: 16px;
+import { fieldDisabledStyle, fieldFocusAttrs, fieldFocusRing, fieldHoverBorderColor, } from './fieldStyles';
+export const Input = styled.input.attrs(fieldFocusAttrs) `
+  box-sizing: border-box;
   width: 100%;
-  outline: none;
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'initial')};
-  opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
-  padding: 18px 14px;
+  height: 48px;
+  margin: 0;
+  padding: 12px;
+  border: 2px solid
+    ${({ $error, theme }) => $error ? theme.color.feedback.negative[200] : theme.color.border.subtle};
+  border-radius: 12px;
   background-color: ${({ $fallbackStyle, theme }) => $fallbackStyle
     ? theme.color.surface.base[300]
     : theme.color.background['000']};
-  border: 2px solid
-    ${({ $error, theme }) => $error ? theme.color.feedback.negative[200] : theme.color.border.subtle};
+  color: ${({ $error, theme }) => $error ? theme.color.feedback.negative[200] : theme.color.text.base};
+  font-family: inherit;
+  font-size: 16px;
+  line-height: 20px;
+  outline: none;
 
-  ${({ disabled, $error, theme }) => !disabled &&
-    !$error &&
-    css `
-      &:hover,
-      &:focus-within {
-        border-color: ${theme.color.border.base};
-      }
-    `}
+  &:hover:not(:disabled):not(:focus) {
+    border-color: ${({ $error, theme }) => fieldHoverBorderColor(theme, $error)};
+  }
 
-  border-radius: 12px;
-  height: auto;
+  &:focus {
+    border-color: ${({ $error, theme }) => $error
+    ? theme.color.feedback.negative[200]
+    : theme.color.border.contrast};
+  }
+
+  ${fieldFocusRing}
+  ${fieldDisabledStyle}
 
   ${({ $frontIcon }) => $frontIcon &&
     `

package/dist/fields/components/CommonInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommonInput.js","sourceRoot":"","sources":["../../../src/fields/components/CommonInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components'\nimport { Icon, Icons } from '../../Icon'\nimport { IconContainer } from '../../sharedStyles/shared.styles'\n\ninterface IInput {\n  $error?: boolean\n  disabled?: boolean\n  selected?: boolean\n  step?: number\n  value?: string\n  $frontIcon?: boolean\n  $trailingIcon?: Icons\n  $fallbackStyle?: boolean\n}\n\ninterface SIcon {\n  $disabled?: boolean\n}\n\nexport const Input = styled.input<IInput>`\n  border: none;\n  color: ${({ $error, theme }) =>\n    $error ? theme.color.feedback.negative[200] : theme.color.text.base};\n  font-size: 16px;\n  width: 100%;\n  outline: none;\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'initial')};\n  opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};\n  padding: 18px 14px;\n  background-color: ${({ $fallbackStyle, theme }) =>\n    $fallbackStyle\n      ? theme.color.surface.base[300]\n      : theme.color.background['000']};\n  border: 2px solid\n    ${({ $error, theme }) =>\n      $error ? theme.color.feedback.negative[200] : theme.color.border.subtle};\n\n  ${({ disabled, $error, theme }) =>\n    !disabled &&\n    !$error &&\n    css`\n      &:hover,\n      &:focus-within {\n        border-color: ${theme.color.border.base};\n      }\n    `}\n\n  border-radius: 12px;\n  height: auto;\n\n  ${({ $frontIcon }) =>\n    $frontIcon &&\n    `\n      padding-left: 42px;\n    `}\n\n  ${({ $trailingIcon }) =>\n    $trailingIcon &&\n    `\n      padding-right: 42px;\n    `}\n\n  /* Remove the spinner on Firefox and Webkit browsers */\n  -moz-appearance: textfield;\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  &::placeholder {\n    color: ${({ theme }) => theme.color.text.subtle};\n  }\n\n  &:-webkit-autofill {\n    animation-name: onAutoFillStart;\n    animation-duration: 2s;\n  }\n\n  @keyframes onAutoFillStart {\n    from {\n      background-color: inherit;\n    }\n    to {\n      background-color: inherit;\n    }\n  }\n`\n\nexport const InputLeadingIconContainer = styled(IconContainer)<SIcon>`\n  position: relative;\n  left: 36px;\n  margin-left: ${({ $size }) => -$size}px;\n  z-index: 1;\n  opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n  color: ${({ theme }) => theme.color.text.base};\n`\n\nexport const StyledFrontIcon = styled(Icon)<SIcon>`\n  position: relative;\n  left: 36px;\n  margin-left: -24px;\n  z-index: 1;\n  opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n  color: ${({ theme }) => theme.color.text.base};\n`\n\nexport const StyledTrailingIcon = styled(Icon)<SIcon>`\n  position: relative;\n  right: 36px;\n  margin-right: -36px;\n  opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n  color: ${({ theme }) => theme.color.text.base};\n`\n\nexport const InputTrailingIconContainer = styled(IconContainer)<SIcon>`\n  position: relative;\n  right: 36px;\n  margin-right: -36px;\n  opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n  color: ${({ theme }) => theme.color.text.base};\n`\n"]}
+{"version":3,"file":"CommonInput.js","sourceRoot":"","sources":["../../../src/fields/components/CommonInput.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,IAAI,EAAS,MAAM,YAAY,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAChE,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,cAAc,EACd,qBAAqB,GACtB,MAAM,eAAe,CAAA;AAiBtB,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,eAAe,CAAC,CAAQ;;;;;;;MAO1D,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CACtB,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;sBAEvD,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,EAAE,CAChD,cAAc;IACZ,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;IAC/B,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC;WAC1B,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAC7B,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;;;;;;;oBAOnD,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,qBAAqB,CAAC,KAAK,EAAE,MAAM,CAAC;;;;oBAI3D,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CACpC,MAAM;IACJ,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;IACpC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;;;IAGjC,cAAc;IACd,kBAAkB;;IAElB,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CACnB,UAAU;IACV;;KAEC;;IAED,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACtB,aAAa;IACb;;KAEC;;;;;;;;;;;;aAYQ,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM;;;;;;;;;;;;;;;;CAgBlD,CAAA;AAED,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAO;;;iBAGpD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK;;aAEzB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;WAC9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;CAC9C,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAO;;;;;aAKrC,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;WAC9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;CAC9C,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAO;;;;aAIxC,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;WAC9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;CAC9C,CAAA;AAED,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,aAAa,CAAC,CAAO;;;;aAIzD,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;WAC9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;CAC9C,CAAA","sourcesContent":["import styled from 'styled-components'\nimport { Icon, Icons } from '../../Icon'\nimport { IconContainer } from '../../sharedStyles/shared.styles'\nimport {\n  fieldDisabledStyle,\n  fieldFocusAttrs,\n  fieldFocusRing,\n  fieldHoverBorderColor,\n} from './fieldStyles'\n\ninterface IInput {\n  $error?: boolean\n  disabled?: boolean\n  selected?: boolean\n  step?: number\n  value?: string\n  $frontIcon?: boolean\n  $trailingIcon?: Icons\n  $fallbackStyle?: boolean\n}\n\ninterface SIcon {\n  $disabled?: boolean\n}\n\nexport const Input = styled.input.attrs(fieldFocusAttrs)<IInput>`\n  box-sizing: border-box;\n  width: 100%;\n  height: 48px;\n  margin: 0;\n  padding: 12px;\n  border: 2px solid\n    ${({ $error, theme }) =>\n      $error ? theme.color.feedback.negative[200] : theme.color.border.subtle};\n  border-radius: 12px;\n  background-color: ${({ $fallbackStyle, theme }) =>\n    $fallbackStyle\n      ? theme.color.surface.base[300]\n      : theme.color.background['000']};\n  color: ${({ $error, theme }) =>\n    $error ? theme.color.feedback.negative[200] : theme.color.text.base};\n  font-family: inherit;\n  font-size: 16px;\n  line-height: 20px;\n  outline: none;\n\n  &:hover:not(:disabled):not(:focus) {\n    border-color: ${({ $error, theme }) => fieldHoverBorderColor(theme, $error)};\n  }\n\n  &:focus {\n    border-color: ${({ $error, theme }) =>\n      $error\n        ? theme.color.feedback.negative[200]\n        : theme.color.border.contrast};\n  }\n\n  ${fieldFocusRing}\n  ${fieldDisabledStyle}\n\n  ${({ $frontIcon }) =>\n    $frontIcon &&\n    `\n      padding-left: 42px;\n    `}\n\n  ${({ $trailingIcon }) =>\n    $trailingIcon &&\n    `\n      padding-right: 42px;\n    `}\n\n  /* Remove the spinner on Firefox and Webkit browsers */\n  -moz-appearance: textfield;\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  &::placeholder {\n    color: ${({ theme }) => theme.color.text.subtle};\n  }\n\n  &:-webkit-autofill {\n    animation-name: onAutoFillStart;\n    animation-duration: 2s;\n  }\n\n  @keyframes onAutoFillStart {\n    from {\n      background-color: inherit;\n    }\n    to {\n      background-color: inherit;\n    }\n  }\n`\n\nexport const InputLeadingIconContainer = styled(IconContainer)<SIcon>`\n  position: relative;\n  left: 36px;\n  margin-left: ${({ $size }) => -$size}px;\n  z-index: 1;\n  opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n  color: ${({ theme }) => theme.color.text.base};\n`\n\nexport const StyledFrontIcon = styled(Icon)<SIcon>`\n  position: relative;\n  left: 36px;\n  margin-left: -24px;\n  z-index: 1;\n  opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n  color: ${({ theme }) => theme.color.text.base};\n`\n\nexport const StyledTrailingIcon = styled(Icon)<SIcon>`\n  position: relative;\n  right: 36px;\n  margin-right: -36px;\n  opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n  color: ${({ theme }) => theme.color.text.base};\n`\n\nexport const InputTrailingIconContainer = styled(IconContainer)<SIcon>`\n  position: relative;\n  right: 36px;\n  margin-right: -36px;\n  opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n  color: ${({ theme }) => theme.color.text.base};\n`\n"]}

package/dist/fields/components/fieldStyles.d.ts

@@ -1,4 +1,5 @@
 import { FocusEvent, FocusEventHandler, PointerEvent, PointerEventHandler } from 'react';
+import { DefaultTheme } from 'styled-components';
 /**
  * Browsers treat text fields as `:focus-visible` even when they are clicked,
  * so fields flag focus that comes from a pointer and only show the focus ring
@@ -15,3 +16,4 @@ export declare const fieldFocusAttrs: <T extends HTMLElement>({ onPointerDown, o
 };
 export declare const fieldFocusRing: import("styled-components").RuleSet<object>;
 export declare const fieldDisabledStyle: import("styled-components").RuleSet<object>;
+export declare const fieldHoverBorderColor: (theme: DefaultTheme, error?: boolean) => string;

package/dist/fields/components/fieldStyles.js

@@ -36,4 +36,5 @@ export const fieldDisabledStyle = css `
     -webkit-text-fill-color: currentColor;
   }
 `;
+export const fieldHoverBorderColor = (theme, error) => error ? theme.color.feedback.negative[300] : theme.color.border.base;
 //# sourceMappingURL=fieldStyles.js.map

package/dist/fields/components/fieldStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"fieldStyles.js","sourceRoot":"","sources":["../../../src/fields/components/fieldStyles.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAEvC;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,OAA2B,EAAE,EAAE;IAC9D,IAAI,OAAO;QAAE,OAAO,CAAC,OAAO,CAAC,YAAY,GAAG,EAAE,CAAA;AAChD,CAAC,CAAA;AAED,2EAA2E;AAC3E,MAAM,CAAC,MAAM,eAAe,GAAG,CAAwB,EACrD,aAAa,EACb,aAAa,GAId,EAAE,EAAE,CAAC,CAAC;IACL,aAAa,EAAE,CAAC,KAAsB,EAAE,EAAE;QACxC,gBAAgB,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA;QACrC,aAAa,EAAE,CAAC,KAAK,CAAC,CAAA;IACxB,CAAC;IACD,aAAa,EAAE,CAAC,KAAoB,EAAE,EAAE;QACtC,OAAO,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,YAAY,CAAA;QAC/C,aAAa,EAAE,CAAC,KAAK,CAAC,CAAA;IACxB,CAAC;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;yBAER,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO;;;CAGhE,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;oBAEjB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;wBAC7C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;aAC3D,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM;;;;;;CAMlD,CAAA","sourcesContent":["import {\n  FocusEvent,\n  FocusEventHandler,\n  PointerEvent,\n  PointerEventHandler,\n} from 'react'\nimport { css } from 'styled-components'\n\n/**\n * Browsers treat text fields as `:focus-visible` even when they are clicked,\n * so fields flag focus that comes from a pointer and only show the focus ring\n * for keyboard focus.\n */\nexport const markPointerFocus = (element: HTMLElement | null) => {\n  if (element) element.dataset.pointerFocus = ''\n}\n\n/** Pass to styled-components `.attrs`. Callers' own handlers still run. */\nexport const fieldFocusAttrs = <T extends HTMLElement>({\n  onPointerDown,\n  onBlurCapture,\n}: {\n  onPointerDown?: PointerEventHandler<T>\n  onBlurCapture?: FocusEventHandler<T>\n}) => ({\n  onPointerDown: (event: PointerEvent<T>) => {\n    markPointerFocus(event.currentTarget)\n    onPointerDown?.(event)\n  },\n  onBlurCapture: (event: FocusEvent<T>) => {\n    delete event.currentTarget.dataset.pointerFocus\n    onBlurCapture?.(event)\n  },\n})\n\nexport const fieldFocusRing = css`\n  &:focus-visible:not([data-pointer-focus]) {\n    outline: 2px solid ${({ theme }) => theme.color.focus.onLight};\n    outline-offset: 2px;\n  }\n`\n\nexport const fieldDisabledStyle = css`\n  &:disabled {\n    border-color: ${({ theme }) => theme.color.feedback.inactive[100]};\n    background-color: ${({ theme }) => theme.color.feedback.inactive[50]};\n    color: ${({ theme }) => theme.color.text.subtle};\n    cursor: not-allowed;\n    /* Safari fades disabled fields on top of these colours */\n    opacity: 1;\n    -webkit-text-fill-color: currentColor;\n  }\n`\n"]}
+{"version":3,"file":"fieldStyles.js","sourceRoot":"","sources":["../../../src/fields/components/fieldStyles.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,GAAG,EAAgB,MAAM,mBAAmB,CAAA;AAErD;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,OAA2B,EAAE,EAAE;IAC9D,IAAI,OAAO;QAAE,OAAO,CAAC,OAAO,CAAC,YAAY,GAAG,EAAE,CAAA;AAChD,CAAC,CAAA;AAED,2EAA2E;AAC3E,MAAM,CAAC,MAAM,eAAe,GAAG,CAAwB,EACrD,aAAa,EACb,aAAa,GAId,EAAE,EAAE,CAAC,CAAC;IACL,aAAa,EAAE,CAAC,KAAsB,EAAE,EAAE;QACxC,gBAAgB,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA;QACrC,aAAa,EAAE,CAAC,KAAK,CAAC,CAAA;IACxB,CAAC;IACD,aAAa,EAAE,CAAC,KAAoB,EAAE,EAAE;QACtC,OAAO,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,YAAY,CAAA;QAC/C,aAAa,EAAE,CAAC,KAAK,CAAC,CAAA;IACxB,CAAC;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;yBAER,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO;;;CAGhE,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;oBAEjB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;wBAC7C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;aAC3D,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM;;;;;;CAMlD,CAAA;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAmB,EAAE,KAAe,EAAE,EAAE,CAC5E,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA","sourcesContent":["import {\n  FocusEvent,\n  FocusEventHandler,\n  PointerEvent,\n  PointerEventHandler,\n} from 'react'\nimport { css, DefaultTheme } from 'styled-components'\n\n/**\n * Browsers treat text fields as `:focus-visible` even when they are clicked,\n * so fields flag focus that comes from a pointer and only show the focus ring\n * for keyboard focus.\n */\nexport const markPointerFocus = (element: HTMLElement | null) => {\n  if (element) element.dataset.pointerFocus = ''\n}\n\n/** Pass to styled-components `.attrs`. Callers' own handlers still run. */\nexport const fieldFocusAttrs = <T extends HTMLElement>({\n  onPointerDown,\n  onBlurCapture,\n}: {\n  onPointerDown?: PointerEventHandler<T>\n  onBlurCapture?: FocusEventHandler<T>\n}) => ({\n  onPointerDown: (event: PointerEvent<T>) => {\n    markPointerFocus(event.currentTarget)\n    onPointerDown?.(event)\n  },\n  onBlurCapture: (event: FocusEvent<T>) => {\n    delete event.currentTarget.dataset.pointerFocus\n    onBlurCapture?.(event)\n  },\n})\n\nexport const fieldFocusRing = css`\n  &:focus-visible:not([data-pointer-focus]) {\n    outline: 2px solid ${({ theme }) => theme.color.focus.onLight};\n    outline-offset: 2px;\n  }\n`\n\nexport const fieldDisabledStyle = css`\n  &:disabled {\n    border-color: ${({ theme }) => theme.color.feedback.inactive[100]};\n    background-color: ${({ theme }) => theme.color.feedback.inactive[50]};\n    color: ${({ theme }) => theme.color.text.subtle};\n    cursor: not-allowed;\n    /* Safari fades disabled fields on top of these colours */\n    opacity: 1;\n    -webkit-text-fill-color: currentColor;\n  }\n`\n\nexport const fieldHoverBorderColor = (theme: DefaultTheme, error?: boolean) =>\n  error ? theme.color.feedback.negative[300] : theme.color.border.base\n"]}

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export * from './BadgeList';
 export * from './Banner';
 export * from './Box';
 export * from './Button';
+export * from './ButtonContainer';
 export * from './Card';
 export * from './CheckBox';
 export * from './CheckBoxGroup';

package/dist/index.js

@@ -6,6 +6,7 @@ export * from './BadgeList';
 export * from './Banner';
 export * from './Box';
 export * from './Button';
+export * from './ButtonContainer';
 export * from './Card';
 export * from './CheckBox';
 export * from './CheckBoxGroup';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,wBAAwB,CAAA;AACtC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,0CAA0C,CAAA;AACxD,cAAc,gDAAgD,CAAA;AAC9D,cAAc,4BAA4B,CAAA;AAC1C,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,8BAA8B,CAAA","sourcesContent":["export * from './Accordion'\nexport * from './ActionDropdown'\nexport * from './Badge'\nexport * from './Alert'\nexport * from './BadgeList'\nexport * from './Banner'\nexport * from './Box'\nexport * from './Button'\nexport * from './Card'\nexport * from './CheckBox'\nexport * from './CheckBoxGroup'\nexport * from './Chip'\nexport * from './CurrencyInput'\nexport * from './Datepicker'\nexport * from './Divider'\nexport * from './Dropdown'\nexport * from './fields/Field'\nexport * from './fields/Fieldset'\nexport * from './fontStyle'\nexport * from './hooks'\nexport * from './Icon'\nexport * from './IconStrict'\nexport * from './IconWrapper'\nexport * from './LabelledText'\nexport * from './Link'\nexport * from './Loader'\nexport * from './Logo'\nexport * from './Modal'\nexport * from './NumberInput'\nexport * from './Pagination'\nexport * from './ProgressIndicator'\nexport * from './PromoCard'\nexport * from './RadioGroup'\nexport * from './RichText'\nexport * from './RichTextEditor'\nexport * from './Row'\nexport * from './SearchInput'\nexport * from './SegmentedControl'\nexport * from './SliderInput'\nexport * from './Snackbar'\nexport * from './SupportMessage'\nexport * from './Table'\nexport * from './Tag'\nexport * from './Text'\nexport * from './Textarea'\nexport * from './TextDateOfBirthInput'\nexport * from './TextInput'\nexport * from './theme'\nexport * from './Toggle'\nexport * from './Tooltip'\nexport * from './utils/dateOfBirth/dateOfBirthValidator'\nexport * from './utils/dateOfBirth/dateOfBirthValidator.utils'\nexport * from './utils/dateOfBirth/schema'\nexport * from './utils/utilTypes'\nexport * from './utils/space'\nexport * from './ThemeProvider'\nexport * from './styled'\nexport * from './sharedStyles/shared.styles'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,wBAAwB,CAAA;AACtC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,0CAA0C,CAAA;AACxD,cAAc,gDAAgD,CAAA;AAC9D,cAAc,4BAA4B,CAAA;AAC1C,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,8BAA8B,CAAA","sourcesContent":["export * from './Accordion'\nexport * from './ActionDropdown'\nexport * from './Badge'\nexport * from './Alert'\nexport * from './BadgeList'\nexport * from './Banner'\nexport * from './Box'\nexport * from './Button'\nexport * from './ButtonContainer'\nexport * from './Card'\nexport * from './CheckBox'\nexport * from './CheckBoxGroup'\nexport * from './Chip'\nexport * from './CurrencyInput'\nexport * from './Datepicker'\nexport * from './Divider'\nexport * from './Dropdown'\nexport * from './fields/Field'\nexport * from './fields/Fieldset'\nexport * from './fontStyle'\nexport * from './hooks'\nexport * from './Icon'\nexport * from './IconStrict'\nexport * from './IconWrapper'\nexport * from './LabelledText'\nexport * from './Link'\nexport * from './Loader'\nexport * from './Logo'\nexport * from './Modal'\nexport * from './NumberInput'\nexport * from './Pagination'\nexport * from './ProgressIndicator'\nexport * from './PromoCard'\nexport * from './RadioGroup'\nexport * from './RichText'\nexport * from './RichTextEditor'\nexport * from './Row'\nexport * from './SearchInput'\nexport * from './SegmentedControl'\nexport * from './SliderInput'\nexport * from './Snackbar'\nexport * from './SupportMessage'\nexport * from './Table'\nexport * from './Tag'\nexport * from './Text'\nexport * from './Textarea'\nexport * from './TextDateOfBirthInput'\nexport * from './TextInput'\nexport * from './theme'\nexport * from './Toggle'\nexport * from './Tooltip'\nexport * from './utils/dateOfBirth/dateOfBirthValidator'\nexport * from './utils/dateOfBirth/dateOfBirthValidator.utils'\nexport * from './utils/dateOfBirth/schema'\nexport * from './utils/utilTypes'\nexport * from './utils/space'\nexport * from './ThemeProvider'\nexport * from './styled'\nexport * from './sharedStyles/shared.styles'\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrshmllw/smores-react",
-  "version": "16.7.1",
+  "version": "16.9.0",
   "description": "Collection of React components used by Marshmallow Technology",
   "main": "./dist/index.js",
   "type": "module",
@@ -86,7 +86,7 @@
     "eslint-plugin-prettier": "^5.5.6",
     "husky": "^9.1.7",
     "jest-styled-components": "^7.4.0",
-    "jsdom": "^30.1.1",
+    "jsdom": "^30.1.2",
     "lint-staged": "^17.6.0",
     "oxlint": "^1.78.0",
     "oxlint-tsgolint": "^7.0.2003",