npm - @mrshmllw/smores-react - Versions diffs - 16.3.1 → 16.5.0 - Mend

@mrshmllw/smores-react 16.3.1 → 16.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/dist/Button/Button.js +41 -19
package/dist/Button/Button.js.map +1 -1
package/dist/Dropdown/Dropdown.d.ts +5 -1
package/dist/Dropdown/Dropdown.js +57 -48
package/dist/Dropdown/Dropdown.js.map +1 -1
package/dist/Link/Link.js +12 -4
package/dist/Link/Link.js.map +1 -1
package/dist/fields/Field/Field.d.ts +2 -0
package/dist/fields/Field/Field.js.map +1 -1
package/dist/fields/components/InternalField.d.ts +5 -1
package/dist/fields/components/InternalField.js +8 -3
package/dist/fields/components/InternalField.js.map +1 -1
package/dist/fields/components/fieldStyles.d.ts +17 -0
package/dist/fields/components/fieldStyles.js +39 -0
package/dist/fields/components/fieldStyles.js.map +1 -0
package/package.json +1 -1

package/dist/Button/Button.js CHANGED Viewed

@@ -1,24 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, } from 'react';
 import styled, { css } from 'styled-components';
-import { IconContainer as CommonIconContainer } from '../sharedStyles/shared.styles';
 import { Box } from '../Box';
 import { Icon as IconComponent } from '../Icon';
 import { Loader } from '../Loader';
 import { focusOutlineStyle } from '../utils/focusOutline';
 export const Button = forwardRef((props, ref) => {
     const { children, id, className = '', disabled = false, handleClick, loading = false, primary = false, secondary = false, tertiary = false, fallbackStyle = false, textBtn = false, smallButton = false, icon, iconComponent, trailingIcon = false, forcedWidth = '', form, type, ...otherProps } = props;
-    const iconToRender = iconComponent ? (_jsx(CommonIconContainer, { $size: smallButton ? 16 : 24, children: iconComponent })) : icon ? (_jsx(IconContainer, { $trailingIcon: trailingIcon, render: icon, size: smallButton ? 16 : 24,
-        // Tertiary dims by colour rather than opacity when disabled
-        color: tertiary && disabled ? 'color.icon.nonEssential' : 'color.icon.base' })) : null;
-    return (_jsxs(Container, { forwardedAs: "button", id: id, className: className, disabled: disabled || loading, onClick: handleClick, $loading: loading, $primary: primary, $secondary: secondary, $tertiary: tertiary, $fallbackStyle: fallbackStyle, $textBtn: textBtn, $smallButton: smallButton, $trailingIcon: trailingIcon, $forcedWidth: forcedWidth, ...(form ? { form } : {}), type: type, ...otherProps, ref: ref, children: [loading && (_jsx(LoaderContainer, { children: _jsx(Loader, { color: "color.icon.base", height: "16" }) })), _jsxs(ContentContainer, { $hasIcon: !!iconToRender, $loading: loading, children: [!trailingIcon && iconToRender ? iconToRender : null, _jsx(ChildrenContainer, { className: "childrenContainer", children: children }), trailingIcon && iconToRender && textBtn ? iconToRender : null] })] }));
+    // Primary is the default type, so an untyped button gets Primary's hover and pressed states too
+    const isPrimary = primary || !(secondary || tertiary || fallbackStyle || textBtn);
+    // Icon-only buttons drop the gap so the icon stays centred
+    // React renders nothing for null, undefined, booleans and empty strings
+    const hasLabel = children != null && typeof children !== 'boolean' && children !== '';
+    const iconToRender = iconComponent ? (_jsx(CustomIconContainer, { children: iconComponent })) : icon ? (_jsx(IconComponent, { render: icon, size: iconSize,
+        // Matches the label, which tertiary dims by colour rather than opacity when disabled
+        color: tertiary && disabled ? 'color.icon.nonEssential' : 'color.icon.contrast' })) : null;
+    return (_jsxs(Container, { forwardedAs: "button", id: id, className: className, disabled: disabled || loading, onClick: handleClick, $loading: loading, $primary: isPrimary, $secondary: secondary, $tertiary: tertiary, $fallbackStyle: fallbackStyle, $textBtn: textBtn, $smallButton: smallButton, $trailingIcon: trailingIcon, $forcedWidth: forcedWidth, ...(form ? { form } : {}), type: type, ...otherProps, ref: ref, children: [loading && (_jsx(LoaderContainer, { children: _jsx(Loader, { color: "color.icon.base", height: "16" }) })), _jsxs(ContentContainer, { $loading: loading, $hasLabel: hasLabel, children: [!trailingIcon && iconToRender ? iconToRender : null, _jsx(ChildrenContainer, { className: "childrenContainer", children: children }), trailingIcon && iconToRender ? iconToRender : null] })] }));
 });
 Button.displayName = 'Button';
 const Container = styled(Box)(({ disabled, $loading, $primary, $secondary, $tertiary, $forcedWidth, $fallbackStyle, $textBtn, $smallButton, }) => css `
     position: relative;
     background-color: ${({ theme }) => theme.color.interactive.primary.base};
     box-shadow: none;
-    color: ${({ theme }) => theme.color.text.base};
+    color: ${({ theme }) => theme.color.text.contrast};
     padding: 0 20px;
     outline: none;
     border-radius: 10000px;
@@ -63,7 +67,7 @@ const Container = styled(Box)(({ disabled, $loading, $primary, $secondary, $tert
       }
       &:active {
         background-color: ${({ theme }) => !(disabled || $loading) &&
-        theme.color.interactive.neutral.subtle.pressed};
+        theme.color.interactive.neutral.subtle.selected};
       }
       ${disabled &&
@@ -85,16 +89,11 @@ const Container = styled(Box)(({ disabled, $loading, $primary, $secondary, $tert
     `}
   ${$smallButton &&
     css `
-      padding: 0 10px;
+      padding: 0 12px;
       min-width: 54px;
-      font-size: 14px;
       .childrenContainer {
-        padding: 9px 0;
-      }
-      span {
-        margin: 0 5px 0 0;
+        padding: 8px 0;
       }
     `}
   ${$textBtn &&
@@ -111,6 +110,15 @@ const Container = styled(Box)(({ disabled, $loading, $primary, $secondary, $tert
         background-color: transparent;
         color: ${({ theme }) => theme.color.text.subtle};
       }
+      ${$smallButton &&
+        css `
+          font-size: 14px;
+          .childrenContainer {
+            padding: 9px 0;
+          }
+        `}
     `}
   `);
 const LoaderContainer = styled.div `
@@ -126,14 +134,28 @@ const LoaderContainer = styled.div `
 const ContentContainer = styled.div `
   display: flex;
   align-items: center;
-  justify-content: ${({ $hasIcon }) => ($hasIcon ? 'space-evenly' : 'center')};
+  justify-content: center;
+  gap: ${({ $hasLabel }) => ($hasLabel ? '4px' : '0')};
   opacity: ${({ $loading }) => ($loading ? '0' : '1')};
 `;
-const IconContainer = styled(IconComponent)(({ $trailingIcon }) => css `
-    margin: ${$trailingIcon ? '0 0 0 10px' : '0 10px 0 0'};
-  `);
+const iconSize = 20;
+// Figma icons use Font Awesome's square bounding box, in which the glyph's em height
+// takes up 80% of the box, so custom (Font Awesome) icons are drawn at that size
+const CustomIconContainer = styled.span `
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: ${iconSize}px;
+  height: ${iconSize}px;
+  svg {
+    width: 100%;
+    height: 80%;
+    overflow: visible;
+  }
+`;
 const ChildrenContainer = styled.div `
   padding: 16px 0;
-  flex-grow: 1;
 `;
 //# sourceMappingURL=Button.js.map

package/dist/Button/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ButtonHTMLAttributes,\n FC,\n FormEvent,\n ReactNode,\n forwardRef,\n} from 'react'\nimport styled, { css } from 'styled-components'\nimport { IconContainer as CommonIconContainer } from '../sharedStyles/shared.styles'\n\nimport { TransientProps } from '../utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon as IconComponent, Icons } from '../Icon'\n\nimport { Loader } from '../Loader'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\ntype Props = {\n children: ReactNode\n id?: string\n className?: string\n disabled?: boolean\n handleClick?: (e: FormEvent<HTMLButtonElement>) => void\n loading?: boolean\n primary?: boolean\n secondary?: boolean\n /** Low-emphasis, text-only action, e.g. \"Skip\" or \"Cancel\" /\n tertiary?: boolean\n fallbackStyle?: boolean\n /* Legacy underlined text style. Prefer `tertiary` for new low-emphasis actions */\n textBtn?: boolean\n smallButton?: boolean\n icon?: Icons\n iconComponent?: ReactNode\n trailingIcon?: boolean\n forcedWidth?: string\n form?: string\n}\n\nexport type ButtonProps = Props &\n MarginProps &\n Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>\n\nexport const Button: FC<ButtonProps> = forwardRef<\n HTMLButtonElement,\n ButtonProps\n>((props, ref) => {\n const {\n children,\n id,\n className = '',\n disabled = false,\n handleClick,\n loading = false,\n primary = false,\n secondary = false,\n tertiary = false,\n fallbackStyle = false,\n textBtn = false,\n smallButton = false,\n icon,\n iconComponent,\n trailingIcon = false,\n forcedWidth = '',\n form,\n type,\n ...otherProps\n } = props\n\n const iconToRender = iconComponent ? (\n <CommonIconContainer $size={smallButton ? 16 : 24}>\n {iconComponent}\n </CommonIconContainer>\n ) : icon ? (\n <IconContainer\n $trailingIcon={trailingIcon}\n render={icon}\n size={smallButton ? 16 : 24}\n // Tertiary dims by colour rather than opacity when disabled\n color={\n tertiary && disabled ? 'color.icon.nonEssential' : 'color.icon.base'\n }\n />\n ) : null\n\n return (\n <Container\n forwardedAs=\"button\"\n id={id}\n className={className}\n disabled={disabled \|\| loading}\n onClick={handleClick}\n $loading={loading}\n $primary={primary}\n $secondary={secondary}\n $tertiary={tertiary}\n $fallbackStyle={fallbackStyle}\n $textBtn={textBtn}\n $smallButton={smallButton}\n $trailingIcon={trailingIcon}\n $forcedWidth={forcedWidth}\n {...(form ? { form } : {})}\n type={type}\n {...otherProps}\n ref={ref}\n >\n {loading && (\n <LoaderContainer>\n <Loader color=\"color.icon.base\" height=\"16\" />\n </LoaderContainer>\n )}\n <ContentContainer $hasIcon={!!iconToRender} $loading={loading}>\n {!trailingIcon && iconToRender ? iconToRender : null}\n <ChildrenContainer className=\"childrenContainer\">\n {children}\n </ChildrenContainer>\n {trailingIcon && iconToRender && textBtn ? iconToRender : null}\n </ContentContainer>\n </Container>\n )\n})\n\nButton.displayName = 'Button'\n\ntype IButton = TransientProps<\n Required<\n Pick<\n ButtonProps,\n \| 'primary'\n \| 'secondary'\n \| 'tertiary'\n \| 'forcedWidth'\n \| 'fallbackStyle'\n \| 'textBtn'\n \| 'trailingIcon'\n \| 'smallButton'\n >\n >\n> & {\n $loading: NonNullable<ButtonProps['loading']>\n disabled: boolean\n}\n\nconst Container = styled(Box)<IButton>(\n ({\n disabled,\n $loading,\n $primary,\n $secondary,\n $tertiary,\n $forcedWidth,\n $fallbackStyle,\n $textBtn,\n $smallButton,\n }) => css`\n position: relative;\n background-color: ${({ theme }) => theme.color.interactive.primary.base};\n box-shadow: none;\n color: ${({ theme }) => theme.color.text.base};\n padding: 0 20px;\n outline: none;\n border-radius: 10000px;\n font-weight: ${({ theme }) => theme.fontWeight[500]};\n cursor: ${disabled \|\| $loading ? 'not-allowed' : 'pointer'};\n line-height: 100%;\n font-size: 16px;\n opacity: ${disabled ? '0.5' : '1'};\n width: ${$forcedWidth ? $forcedWidth : 'auto'};\n\n ${focusOutlineStyle}\n\n ${\n $primary &&\n css`\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled \|\| $loading) && theme.color.interactive.primary.hover};\n }\n &:active {\n background-color: ${({ theme }) =>\n theme.color.interactive.primary.selected};\n }\n `\n }\n\n ${\n $secondary &&\n css`\n background-color: ${({ theme }) =>\n theme.color.interactive.secondary.base};\n\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled \|\| $loading) && theme.color.interactive.secondary.hover};\n }\n &:active {\n background-color: ${({ theme }) =>\n theme.color.interactive.secondary.selected};\n }\n `\n }\n ${\n $tertiary &&\n css`\n background-color: transparent;\n opacity: 1;\n\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled \|\| $loading) &&\n theme.color.interactive.neutral.subtle.hover};\n }\n &:active {\n background-color: ${({ theme }) =>\n !(disabled \|\| $loading) &&\n theme.color.interactive.neutral.subtle.pressed};\n }\n\n ${\n disabled &&\n css`\n color: ${({ theme }) => theme.color.text.nonEssential};\n `\n }\n `\n }\n ${\n $fallbackStyle &&\n css`\n background-color: ${({ theme }) => theme.color.interactive.neutral.subtle.base};\n\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled \|\| $loading) &&\n theme.color.interactive.neutral.subtle.hover};\n }\n &:active {\n background-color: ${({ theme }) =>\n theme.color.interactive.neutral.subtle.selected};\n }\n `\n }\n ${\n $smallButton &&\n css`\n padding: 0 10px;\n min-width: 54px;\n font-size: 14px;\n\n .childrenContainer {\n padding: 9px 0;\n }\n\n span {\n margin: 0 5px 0 0;\n }\n `\n }\n ${\n $textBtn &&\n css`\n background-color: transparent;\n padding: 0;\n border-radius: 0;\n text-decoration: underline;\n\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled \|\| $loading) && theme.color.interactive.primary.hover};\n }\n &:active {\n background-color: transparent;\n color: ${({ theme }) => theme.color.text.subtle};\n }\n `\n }\n `,\n)\n\nconst LoaderContainer = styled.div`\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n`\n\nconst ContentContainer = styled.div<{ $loading: boolean; $hasIcon?: boolean }>`\n display: flex;\n align-items: center;\n justify-content: ${({ $hasIcon }) => ($hasIcon ? 'space-evenly' : 'center')};\n opacity: ${({ $loading }) => ($loading ? '0' : '1')};\n`\n\nconst IconContainer = styled(IconComponent)<\n TransientProps<Pick<ButtonProps, 'trailingIcon'>>\n>(\n ({ $trailingIcon }) => css`\n margin: ${$trailingIcon ? '0 0 0 10px' : '0 10px 0 0'};\n `,\n)\n\nconst ChildrenContainer = styled.div`\n padding: 16px 0;\n flex-grow: 1;\n`\n"]}
1	+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ButtonHTMLAttributes,\n FC,\n FormEvent,\n ReactNode,\n forwardRef,\n} from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { TransientProps } from '../utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon as IconComponent, Icons } from '../Icon'\n\nimport { Loader } from '../Loader'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\ntype Props = {\n children: ReactNode\n id?: string\n className?: string\n disabled?: boolean\n handleClick?: (e: FormEvent<HTMLButtonElement>) => void\n loading?: boolean\n primary?: boolean\n secondary?: boolean\n /** Low-emphasis, text-only action, e.g. \"Skip\" or \"Cancel\" /\n tertiary?: boolean\n fallbackStyle?: boolean\n /* Legacy underlined text style. Prefer `tertiary` for new low-emphasis actions */\n textBtn?: boolean\n smallButton?: boolean\n icon?: Icons\n iconComponent?: ReactNode\n trailingIcon?: boolean\n forcedWidth?: string\n form?: string\n}\n\nexport type ButtonProps = Props &\n MarginProps &\n Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>\n\nexport const Button: FC<ButtonProps> = forwardRef<\n HTMLButtonElement,\n ButtonProps\n>((props, ref) => {\n const {\n children,\n id,\n className = '',\n disabled = false,\n handleClick,\n loading = false,\n primary = false,\n secondary = false,\n tertiary = false,\n fallbackStyle = false,\n textBtn = false,\n smallButton = false,\n icon,\n iconComponent,\n trailingIcon = false,\n forcedWidth = '',\n form,\n type,\n ...otherProps\n } = props\n\n // Primary is the default type, so an untyped button gets Primary's hover and pressed states too\n const isPrimary =\n primary \|\| !(secondary \|\| tertiary \|\| fallbackStyle \|\| textBtn)\n\n // Icon-only buttons drop the gap so the icon stays centred\n // React renders nothing for null, undefined, booleans and empty strings\n const hasLabel =\n children != null && typeof children !== 'boolean' && children !== ''\n\n const iconToRender = iconComponent ? (\n <CustomIconContainer>{iconComponent}</CustomIconContainer>\n ) : icon ? (\n <IconComponent\n render={icon}\n size={iconSize}\n // Matches the label, which tertiary dims by colour rather than opacity when disabled\n color={\n tertiary && disabled ? 'color.icon.nonEssential' : 'color.icon.contrast'\n }\n />\n ) : null\n\n return (\n <Container\n forwardedAs=\"button\"\n id={id}\n className={className}\n disabled={disabled \|\| loading}\n onClick={handleClick}\n $loading={loading}\n $primary={isPrimary}\n $secondary={secondary}\n $tertiary={tertiary}\n $fallbackStyle={fallbackStyle}\n $textBtn={textBtn}\n $smallButton={smallButton}\n $trailingIcon={trailingIcon}\n $forcedWidth={forcedWidth}\n {...(form ? { form } : {})}\n type={type}\n {...otherProps}\n ref={ref}\n >\n {loading && (\n <LoaderContainer>\n <Loader color=\"color.icon.base\" height=\"16\" />\n </LoaderContainer>\n )}\n <ContentContainer $loading={loading} $hasLabel={hasLabel}>\n {!trailingIcon && iconToRender ? iconToRender : null}\n <ChildrenContainer className=\"childrenContainer\">\n {children}\n </ChildrenContainer>\n {trailingIcon && iconToRender ? iconToRender : null}\n </ContentContainer>\n </Container>\n )\n})\n\nButton.displayName = 'Button'\n\ntype IButton = TransientProps<\n Required<\n Pick<\n ButtonProps,\n \| 'primary'\n \| 'secondary'\n \| 'tertiary'\n \| 'forcedWidth'\n \| 'fallbackStyle'\n \| 'textBtn'\n \| 'trailingIcon'\n \| 'smallButton'\n >\n >\n> & {\n $loading: NonNullable<ButtonProps['loading']>\n disabled: boolean\n}\n\nconst Container = styled(Box)<IButton>(\n ({\n disabled,\n $loading,\n $primary,\n $secondary,\n $tertiary,\n $forcedWidth,\n $fallbackStyle,\n $textBtn,\n $smallButton,\n }) => css`\n position: relative;\n background-color: ${({ theme }) => theme.color.interactive.primary.base};\n box-shadow: none;\n color: ${({ theme }) => theme.color.text.contrast};\n padding: 0 20px;\n outline: none;\n border-radius: 10000px;\n font-weight: ${({ theme }) => theme.fontWeight[500]};\n cursor: ${disabled \|\| $loading ? 'not-allowed' : 'pointer'};\n line-height: 100%;\n font-size: 16px;\n opacity: ${disabled ? '0.5' : '1'};\n width: ${$forcedWidth ? $forcedWidth : 'auto'};\n\n ${focusOutlineStyle}\n\n ${\n $primary &&\n css`\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled \|\| $loading) && theme.color.interactive.primary.hover};\n }\n &:active {\n background-color: ${({ theme }) =>\n theme.color.interactive.primary.selected};\n }\n `\n }\n\n ${\n $secondary &&\n css`\n background-color: ${({ theme }) =>\n theme.color.interactive.secondary.base};\n\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled \|\| $loading) && theme.color.interactive.secondary.hover};\n }\n &:active {\n background-color: ${({ theme }) =>\n theme.color.interactive.secondary.selected};\n }\n `\n }\n ${\n $tertiary &&\n css`\n background-color: transparent;\n opacity: 1;\n\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled \|\| $loading) &&\n theme.color.interactive.neutral.subtle.hover};\n }\n &:active {\n background-color: ${({ theme }) =>\n !(disabled \|\| $loading) &&\n theme.color.interactive.neutral.subtle.selected};\n }\n\n ${\n disabled &&\n css`\n color: ${({ theme }) => theme.color.text.nonEssential};\n `\n }\n `\n }\n ${\n $fallbackStyle &&\n css`\n background-color: ${({ theme }) => theme.color.interactive.neutral.subtle.base};\n\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled \|\| $loading) &&\n theme.color.interactive.neutral.subtle.hover};\n }\n &:active {\n background-color: ${({ theme }) =>\n theme.color.interactive.neutral.subtle.selected};\n }\n `\n }\n ${\n $smallButton &&\n css`\n padding: 0 12px;\n min-width: 54px;\n\n .childrenContainer {\n padding: 8px 0;\n }\n `\n }\n ${\n $textBtn &&\n css`\n background-color: transparent;\n padding: 0;\n border-radius: 0;\n text-decoration: underline;\n\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled \|\| $loading) && theme.color.interactive.primary.hover};\n }\n &:active {\n background-color: transparent;\n color: ${({ theme }) => theme.color.text.subtle};\n }\n\n ${\n $smallButton &&\n css`\n font-size: 14px;\n\n .childrenContainer {\n padding: 9px 0;\n }\n `\n }\n `\n }\n `,\n)\n\nconst LoaderContainer = styled.div`\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n`\n\nconst ContentContainer = styled.div<{ $loading: boolean; $hasLabel: boolean }>`\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ${({ $hasLabel }) => ($hasLabel ? '4px' : '0')};\n opacity: ${({ $loading }) => ($loading ? '0' : '1')};\n`\n\nconst iconSize = 20\n\n// Figma icons use Font Awesome's square bounding box, in which the glyph's em height\n// takes up 80% of the box, so custom (Font Awesome) icons are drawn at that size\nconst CustomIconContainer = styled.span`\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n width: ${iconSize}px;\n height: ${iconSize}px;\n\n svg {\n width: 100%;\n height: 80%;\n overflow: visible;\n }\n`\n\nconst ChildrenContainer = styled.div`\n padding: 16px 0;\n`\n"]}

package/dist/Dropdown/Dropdown.d.ts CHANGED Viewed

@@ -18,7 +18,11 @@ export interface Props extends CommonFieldProps {
     frontIcon?: Icons;
     iconComponent?: ReactNode;
     fallbackStyle?: boolean;
-    onSelect: (element: string) => void;
+    /** Accessible name, for when there is no visible `label` */
+    'aria-label'?: string;
+    /** Lets the browser autofill the field, e.g. `honorific-prefix` */
+    autoComplete?: string;
+    onSelect?: (element: string) => void;
     onBlur?: (e: FocusEvent<HTMLSelectElement>) => void;
 }
 type TruncateProps = {

package/dist/Dropdown/Dropdown.js CHANGED Viewed

@@ -4,18 +4,21 @@ 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 { useUniqueId } from '../utils/id';
 import { useControllableState } from '../utils/useControlledState';
 import { IconContainer } from '../sharedStyles/shared.styles';
-import { faChevronDown } from '@awesome.me/kit-46ca99185c/icons/classic/regular';
+import { faChevronDown } from '@awesome.me/kit-46ca99185c/icons/classic/solid';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-export const Dropdown = forwardRef(function Dropdown({ id: idProp, placeholder, showDefaultOption = false, customDefaultOption, name, value: valueProp, defaultValue, disabled = false, list, onSelect, error = false, onInputChange, onBlur, frontIcon, iconComponent, fallbackStyle, ...fieldProps }, ref) {
+export const Dropdown = forwardRef(function Dropdown({ id: idProp, placeholder, showDefaultOption = false, customDefaultOption, name, value: valueProp, defaultValue, disabled = false, list, onSelect, error = false, onInputChange, onBlur, frontIcon, iconComponent, fallbackStyle, required, 'aria-label': ariaLabel, autoComplete, ...fieldProps }, ref) {
     const theme = useTheme();
     const [value, setValue] = useControllableState({
         initialState: defaultValue,
         stateProp: valueProp,
     });
     const id = useUniqueId(idProp);
+    const assistiveTextId = `${id}-assistive-text`;
+    const errorMsgId = `${id}-error`;
     const hasOptGroups = list.findIndex((item) => !!item.optionGroupLabel) !== -1;
     const dropdownItemsGroups = useMemo(() => {
         const itemsPerGroupLabel = new Map();
@@ -33,64 +36,70 @@ export const Dropdown = forwardRef(function Dropdown({ id: idProp, placeholder,
         }
         return customDefaultOption ?? 'Select an option';
     };
-    const iconToRender = iconComponent ? (_jsx(InputLeadingIconContainer, { $size: 16, $iconColor: theme.color.text.base, children: iconComponent })) : frontIcon ? (_jsx(StyledFrontIcon, { $disabled: disabled, render: frontIcon, color: "sesame" })) : null;
-    return (_jsx(Field, { ...fieldProps, htmlFor: id, error: error, children: _jsxs(Box, { flex: true, alignItems: "center", style: { position: 'relative' }, children: [iconToRender, _jsxs(StyledSelect, { id: id, disabled: disabled || list.length < 1, onChange: (event) => {
+    // Only reference messages that the field actually renders.
+    const describedBy = [
+        fieldProps.assistiveText &&
+            (!fieldProps.renderAsTitle || fieldProps.label) &&
+            assistiveTextId,
+        error && fieldProps.errorMsg && errorMsgId,
+    ]
+        .filter(Boolean)
+        .join(' ') || undefined;
+    const iconToRender = iconComponent ? (_jsx(InputLeadingIconContainer, { $size: 16, $iconColor: theme.color.text.base, children: iconComponent })) : frontIcon ? (_jsx(StyledFrontIcon, { render: frontIcon, color: "color.icon.subtle" })) : null;
+    return (_jsx(Field, { ...fieldProps, htmlFor: id, error: error, required: required, assistiveTextId: assistiveTextId, errorMsgId: errorMsgId, children: _jsxs(Box, { flex: true, alignItems: "center", style: { position: 'relative' }, children: [iconToRender, _jsxs(StyledSelect, { id: id, disabled: disabled || list.length < 1, onChange: (event) => {
                         const value = event.currentTarget.value;
                         onSelect?.(value);
                         onInputChange?.(event);
                         setValue(value);
-                    }, $error: error, ref: ref, onBlur: onBlur, name: name, $frontIcon: frontIcon, $fallbackStyle: fallbackStyle, value: value ?? '', children: [hasOptGroups ? (_jsx("optgroup", { label: defaultOptionLabel(), children: _jsx("option", { value: "", hidden: !showDefaultOption, disabled: true, children: defaultOptionLabel() }) })) : (_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: 20, children: _jsx(FontAwesomeIcon, { icon: faChevronDown, color: theme.color.illustration.neutral[400] }) }) })] }) }));
+                    }, $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: 16, children: _jsx(FontAwesomeIcon, { icon: faChevronDown, color: theme.color.icon.subtle }) }) })] }) }));
 });
-const resetSelect = css `
-  border: none;
-  border-radius: 0;
-  font-size: 16px;
-  appearance: none; /* remove default arrow */
-  outline: none;
-`;
-const StyledSelect = styled.select `
-  ${resetSelect}
-  width: 100%;
-  height: 32px;
-  color: ${({ value, theme }) => value === '' ? theme.color.text.subtle : theme.color.text.base};
-  cursor: pointer;
-  background-color: ${({ $fallbackStyle, theme }) => $fallbackStyle
-    ? theme.color.surface.base[300]
-    : theme.color.background['000']};
-  border-radius: 12px;
-  padding: 18px 14px;
-  border: 2px solid
-    ${({ $error, theme }) => $error ? theme.color.feedback.negative[200] : theme.color.border.subtle};
-  height: auto;
+// Figma's 32px chevron slot sits 12px from the edge, 16px from the text
+const CHEVRON_INSET = 20;
+const StyledSelect = styled.select.attrs(fieldFocusAttrs)(({ theme, $error, $frontIcon, $fallbackStyle, value }) => {
+    const borderColor = (color) => $error ? theme.color.feedback.negative[200] : color;
+    return css `
+      appearance: none;
+      width: 100%;
+      height: 48px;
+      margin: 0;
+      padding: 12px 60px 12px ${$frontIcon ? '42px' : '12px'};
+      border: 2px solid ${borderColor(theme.color.border.subtle)};
+      border-radius: 12px;
+      background-color: ${$fallbackStyle
+        ? theme.color.surface.base[300]
+        : theme.color.background['000']};
+      color: ${value === '' ? theme.color.text.subtle : theme.color.text.base};
+      font-family: inherit;
+      font-size: 16px;
+      line-height: 20px;
+      text-overflow: ellipsis;
+      cursor: pointer;
+      outline: none;
-  ${({ $frontIcon }) => $frontIcon &&
-    $frontIcon != '' &&
-    `
-      padding-left: 42px;
-    `}
+      option,
+      optgroup {
+        color: ${theme.color.text.base};
+      }
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
+      // 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)};
+      }
-  ${({ $error }) => !$error &&
-    css `
-      :not(:disabled) {
-        &:hover,
-        &:focus,
-        &:focus-visible,
-        &:checked {
-          border-color: ${({ theme }) => theme.color.icon.nonEssential};
+      &:focus {
+        border-color: ${borderColor(theme.color.border.contrast)};
       }
-    `}
-`;
+      ${fieldFocusRing}
+      ${fieldDisabledStyle}
+    `;
+});
 const Caret = styled.div `
   position: absolute;
   z-index: 1;
-  right: 15px;
+  right: ${CHEVRON_INSET}px;
+  display: flex;
   pointer-events: none;
-  color: ${({ theme }) => theme.color.icon.nonEssential};
 `;
 //# sourceMappingURL=Dropdown.js.map

package/dist/Dropdown/Dropdown.js.map CHANGED Viewed

	@@ -1 +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 { useUniqueId } from '../utils/id'\nimport { useControllableState } from '../utils/useControlledState'\nimport { IconContainer } from '../sharedStyles/shared.styles'\nimport { faChevronDown } from '@awesome.me/kit-46ca99185c/icons/classic/regular'\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 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 ...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 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 const iconToRender = iconComponent ? (\n <InputLeadingIconContainer $size={16} $iconColor={theme.color.text.base}>\n {iconComponent}\n </InputLeadingIconContainer>\n ) : frontIcon ? (\n <StyledFrontIcon $disabled={disabled} render={frontIcon} color=\"sesame\" />\n ) : null\n\n return (\n <Field {...fieldProps} htmlFor={id} error={error}>\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 $frontIcon={frontIcon}\n $fallbackStyle={fallbackStyle}\n value={value ?? ''}\n >\n {hasOptGroups ? (\n <optgroup label={defaultOptionLabel()}>\n <option value=\"\" hidden={!showDefaultOption} disabled>\n {defaultOptionLabel()}\n </option>\n </optgroup>\n ) : (\n <option value=\"\" hidden={!showDefaultOption} disabled>\n {defaultOptionLabel()}\n </option>\n )}\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={20}>\n <FontAwesomeIcon\n icon={faChevronDown}\n color={theme.color.illustration.neutral[400]}\n />\n </IconContainer>\n </Caret>\n </Box>\n </Field>\n )\n})\n\nconst resetSelect = css`\n border: none;\n border-radius: 0;\n font-size: 16px;\n appearance: none; /* remove default arrow */\n outline: none;\n`\n\ninterface SSelect {\n $error: boolean\n $frontIcon?: string\n $fallbackStyle?: boolean\n value?: string \| null\n}\n\nconst StyledSelect = styled.select<SSelect>`\n ${resetSelect}\n width: 100%;\n height: 32px;\n color: ${({ value, theme }) =>\n value === '' ? theme.color.text.subtle : theme.color.text.base};\n cursor: pointer;\n background-color: ${({ $fallbackStyle, theme }) =>\n $fallbackStyle\n ? theme.color.surface.base[300]\n : theme.color.background['000']};\n\n border-radius: 12px;\n padding: 18px 14px;\n border: 2px solid\n ${({ $error, theme }) =>\n $error ? theme.color.feedback.negative[200] : theme.color.border.subtle};\n height: auto;\n\n ${({ $frontIcon }) =>\n $frontIcon &&\n $frontIcon != '' &&\n `\n padding-left: 42px;\n `}\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n ${({ $error }) =>\n !$error &&\n css`\n :not(:disabled) {\n &:hover,\n &:focus,\n &:focus-visible,\n &:checked {\n border-color: ${({ theme }) => theme.color.icon.nonEssential};\n }\n `}\n`\n\nconst Caret = styled.div`\n position: absolute;\n z-index: 1;\n right: 15px;\n pointer-events: none;\n color: ${({ theme }) => theme.color.icon.nonEssential};\n`\n"]}
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={16}>\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\n// Figma's 32px chevron slot sits 12px from the edge, 16px from the text\nconst CHEVRON_INSET = 20\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 60px 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"]}

package/dist/Link/Link.js CHANGED Viewed

@@ -1,15 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { darken } from 'polished';
 import styled, { css } from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowUpRightFromSquare } from '@awesome.me/kit-46ca99185c/icons/classic/regular';
 import { Icon } from '../Icon';
 import { theme as oldTheme } from '../theme';
 import { focusOutline } from '../utils/focusOutline';
 import { IconContainer } from '../sharedStyles/shared.styles';
-export const Link = ({ className, href, onClick, openInNewTab, download, children, typo = 'regular', highlight = false, iconToRender: legacyIcon = openInNewTab ? 'new-window' : undefined, iconComponent, isTrailingIcon = true, }) => {
+const ICON_SPACING = '4px';
+export const Link = ({ className, href, onClick, openInNewTab, download, children, typo = 'regular', highlight = false, iconToRender: legacyIcon, iconComponent = !legacyIcon && openInNewTab ? (_jsx(FontAwesomeIcon, { icon: faArrowUpRightFromSquare })) : undefined, isTrailingIcon = true, }) => {
+    // Icon-only links keep the icon flush
+    const iconSpacing = children ? ICON_SPACING : '0';
     const iconToRender = iconComponent ? (_jsx(IconContainer, { $size: typo === 'regular' ? 16 : 12, style: {
-            paddingRight: isTrailingIcon ? '0' : '4px',
-            paddingLeft: isTrailingIcon ? '8px' : '0',
-        }, children: iconComponent })) : legacyIcon ? (_jsx(Icon, { mt: { custom: '3px' }, size: typo === 'regular' ? 14 : 12, render: legacyIcon, color: highlight ? 'color.surface.brand.400' : 'color.surface.base.900' })) : null;
+            alignSelf: 'center',
+            marginRight: isTrailingIcon ? '0' : iconSpacing,
+            marginLeft: isTrailingIcon ? iconSpacing : '0',
+        }, children: iconComponent })) : legacyIcon ? (_jsx(Icon, { mt: { custom: '3px' }, ...(isTrailingIcon
+            ? { ml: { custom: iconSpacing } }
+            : { mr: { custom: iconSpacing } }), size: typo === 'regular' ? 14 : 12, render: legacyIcon, color: highlight ? 'color.interactive.primary.base' : 'color.text.base' })) : null;
     return (_jsxs(LinkWrapper, { href: href, className: className, onClick: onClick, download: download, $typo: typo, $highlight: highlight, ...(openInNewTab && {
             rel: 'noopener noreferrer',
             target: '_blank',

package/dist/Link/Link.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;~~AAE~~/C,OAAO,EAAE,IAAI,EAAS,MAAM,SAAS,CAAA;AACrC,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;~~AAkB7D~~,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,SAAS,EACT,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,SAAS,EAChB,SAAS,GAAG,KAAK,EACjB,YAAY,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC,CAAC,~~YAAY~~,CAAC,CAAC,CAAC,SAAS,~~EAClE,aAAa,~~EACb,cAAc,GAAG,IAAI,GACtB,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,aAAa,CAAC,CAAC,CAAC,CACnC,KAAC,aAAa,IACZ,KAAK,EAAE,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EACnC,KAAK,EAAE;YACL,~~YAAY~~,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,~~KAAK~~;~~YAC1C~~,~~WAAW~~,EAAE,cAAc,CAAC,CAAC,CAAC,~~KAAK~~,CAAC,CAAC,CAAC,GAAG;~~SAC1C~~,YAEA,aAAa,GACA,CACjB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CACf,KAAC,IAAI,IACH,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,~~EACrB~~,IAAI,EAAE,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAClC,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,~~yBAAyB~~,CAAC,CAAC,CAAC,~~wBAAwB~~,GACvE,CACH,CAAC,CAAC,CAAC,IAAI,CAAA;IAER,OAAO,CACL,MAAC,WAAW,IACV,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,IAAI,EACX,UAAU,EAAE,SAAS,KACjB,CAAC,YAAY,IAAI;YACnB,GAAG,EAAE,qBAAqB;YAC1B,MAAM,EAAE,QAAQ;SACjB,CAAC,aAED,CAAC,cAAc,IAAI,YAAY,EAC/B,QAAQ,EACR,cAAc,IAAI,YAAY,IACnB,CACf,CAAA;AACH,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAC1B,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;MACjC,YAAY,EAAE;;;;MAKd,KAAK,KAAK,SAAS;IACnB,GAAG,CAAA;;;OAIL;;MAGE,KAAK,KAAK,OAAO;IACjB,GAAG,CAAA;;;OAIL;;mBAEe,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;aAGxC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IACvE;;;;;;eAMW,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM;;;gBAGtB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM;;;;;eAKxB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;;;gBAGpB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM;;;GAGpC,CACF,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,KAAK,EAAqB,EAAE,EAAE,CAAC,GAAG,CAAA;MAChE,WAAW;aACJ,KAAK;;;cAGJ,KAAK;;;;eAIJ,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC;;;gBAGjB,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC;;;;CAIjC,CAAA","sourcesContent":["import { darken } from 'polished'\nimport { FC, MouseEventHandler, ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Icon, Icons } from '../Icon'\nimport { theme as oldTheme } from '../theme'\nimport { focusOutline } from '../utils/focusOutline'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\ntype LinkTypo = 'regular' \| 'small'\n\nexport type LinkProps = {\n className?: string\n href: string\n onClick?: MouseEventHandler\n openInNewTab?: boolean\n children?: ReactNode\n download?: boolean\n typo?: LinkTypo\n highlight?: boolean\n iconToRender?: Icons\n iconComponent?: ReactNode\n isTrailingIcon?: boolean\n}\n\nexport const Link: FC<LinkProps> = ({\n className,\n href,\n onClick,\n openInNewTab,\n download,\n children,\n typo = 'regular',\n highlight = false,\n iconToRender: legacyIcon = openInNewTab ? ~~'new-window'~~ : undefined,\n ~~iconComponent,\n~~ isTrailingIcon = true,\n}) => {\n const iconToRender = iconComponent ? (\n <IconContainer\n $size={typo === 'regular' ? 16 : 12}\n style={{\n ~~paddingRight~~: isTrailingIcon ? '0' : ~~'4px'~~,\n ~~paddingLeft~~: isTrailingIcon ? ~~'8px'~~ : '0',\n }}\n >\n {iconComponent}\n </IconContainer>\n ) : legacyIcon ? (\n <Icon\n mt={{ custom: '3px' }}\n size={typo === 'regular' ? 14 : 12}\n render={legacyIcon}\n color={highlight ? 'color.~~surface~~.~~brand~~.~~400~~' : 'color.~~surface~~.base~~.900~~'}\n />\n ) : null\n\n return (\n <LinkWrapper\n href={href}\n className={className}\n onClick={onClick}\n download={download}\n $typo={typo}\n $highlight={highlight}\n {...(openInNewTab && {\n rel: 'noopener noreferrer',\n target: '_blank',\n })}\n >\n {!isTrailingIcon && iconToRender}\n {children}\n {isTrailingIcon && iconToRender}\n </LinkWrapper>\n )\n}\n\nconst LinkWrapper = styled.a<{ $typo: LinkTypo; $highlight: boolean }>(\n ({ $typo, $highlight, theme }) => css`\n ${focusOutline()}\n display: inline-flex;\n flex-direction: row;\n\n ${\n $typo === 'regular' &&\n css`\n font-size: 16px;\n line-height: 20px;\n `\n }\n\n ${\n $typo === 'small' &&\n css`\n font-size: 14px;\n line-height: 20px;\n `\n }\n\n font-weight: ${oldTheme.font.weight.medium};\n text-decoration: underline;\n color: ${\n $highlight ? theme.color.interactive.primary.base : theme.color.text.base\n };\n\n background: none;\n cursor: pointer;\n\n &:hover {\n color: ${theme.color.text.subtle};\n\n path {\n fill: ${theme.color.icon.subtle};\n }\n }\n\n &:active {\n color: ${theme.color.text.base};\n\n path {\n fill: ${theme.color.icon.subtle};\n }\n }\n `,\n)\n\n/*\n Internal utility to override styling in other components (see Text)\n * @internal\n */\nexport const linkStyleOverride = ({ color }: { color: string }) => css`\n & ${LinkWrapper} {\n color: ${color};\n\n path {\n fill: ${color};\n }\n\n &:hover {\n color: ${darken(0.1, color)};\n\n path {\n fill: ${darken(0.1, color)};\n }\n }\n }\n`\n"]}
1	+ {"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"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","sourcesContent":["import { darken } from 'polished'\nimport { FC, MouseEventHandler, ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faArrowUpRightFromSquare } from '@awesome.me/kit-46ca99185c/icons/classic/regular'\n\nimport { Icon, Icons } from '../Icon'\nimport { theme as oldTheme } from '../theme'\nimport { focusOutline } from '../utils/focusOutline'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\ntype LinkTypo = 'regular' \| 'small'\n\nconst ICON_SPACING = '4px'\n\nexport type LinkProps = {\n className?: string\n href: string\n onClick?: MouseEventHandler\n openInNewTab?: boolean\n children?: ReactNode\n download?: boolean\n typo?: LinkTypo\n highlight?: boolean\n iconToRender?: Icons\n iconComponent?: ReactNode\n isTrailingIcon?: boolean\n}\n\nexport const Link: FC<LinkProps> = ({\n className,\n href,\n onClick,\n openInNewTab,\n download,\n children,\n typo = 'regular',\n highlight = false,\n iconToRender: legacyIcon,\n iconComponent = !legacyIcon && openInNewTab ? (\n <FontAwesomeIcon icon={faArrowUpRightFromSquare} />\n ) : undefined,\n isTrailingIcon = true,\n}) => {\n // Icon-only links keep the icon flush\n const iconSpacing = children ? ICON_SPACING : '0'\n\n const iconToRender = iconComponent ? (\n <IconContainer\n $size={typo === 'regular' ? 16 : 12}\n style={{\n alignSelf: 'center',\n marginRight: isTrailingIcon ? '0' : iconSpacing,\n marginLeft: isTrailingIcon ? iconSpacing : '0',\n }}\n >\n {iconComponent}\n </IconContainer>\n ) : legacyIcon ? (\n <Icon\n mt={{ custom: '3px' }}\n {...(isTrailingIcon\n ? { ml: { custom: iconSpacing } }\n : { mr: { custom: iconSpacing } })}\n size={typo === 'regular' ? 14 : 12}\n render={legacyIcon}\n color={highlight ? 'color.interactive.primary.base' : 'color.text.base'}\n />\n ) : null\n\n return (\n <LinkWrapper\n href={href}\n className={className}\n onClick={onClick}\n download={download}\n $typo={typo}\n $highlight={highlight}\n {...(openInNewTab && {\n rel: 'noopener noreferrer',\n target: '_blank',\n })}\n >\n {!isTrailingIcon && iconToRender}\n {children}\n {isTrailingIcon && iconToRender}\n </LinkWrapper>\n )\n}\n\nconst LinkWrapper = styled.a<{ $typo: LinkTypo; $highlight: boolean }>(\n ({ $typo, $highlight, theme }) => css`\n ${focusOutline()}\n display: inline-flex;\n flex-direction: row;\n\n ${\n $typo === 'regular' &&\n css`\n font-size: 16px;\n line-height: 20px;\n `\n }\n\n ${\n $typo === 'small' &&\n css`\n font-size: 14px;\n line-height: 20px;\n `\n }\n\n font-weight: ${oldTheme.font.weight.medium};\n text-decoration: underline;\n color: ${\n $highlight ? theme.color.interactive.primary.base : theme.color.text.base\n };\n\n background: none;\n cursor: pointer;\n\n &:hover {\n color: ${theme.color.text.subtle};\n\n path {\n fill: ${theme.color.icon.subtle};\n }\n }\n\n &:active {\n color: ${theme.color.text.base};\n\n path {\n fill: ${theme.color.icon.subtle};\n }\n }\n `,\n)\n\n/*\n Internal utility to override styling in other components (see Text)\n * @internal\n */\nexport const linkStyleOverride = ({ color }: { color: string }) => css`\n & ${LinkWrapper} {\n color: ${color};\n\n path {\n fill: ${color};\n }\n\n &:hover {\n color: ${darken(0.1, color)};\n\n path {\n fill: ${darken(0.1, color)};\n }\n }\n }\n`\n"]}

package/dist/fields/Field/Field.d.ts CHANGED Viewed

@@ -3,5 +3,7 @@ import { CommonFieldProps } from '../commonFieldTypes';
 export interface FieldProps extends CommonFieldProps {
     htmlFor?: string;
     children: ReactNode;
+    assistiveTextId?: string;
+    errorMsgId?: string;
 }
 export declare const Field: ({ children, ...fieldProps }: FieldProps) => import("react").JSX.Element;

package/dist/fields/Field/Field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/fields/Field/Field.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;~~AAO3D~~,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAc,EAAE,EAAE;IAC/D,OAAO,CACL,KAAC,aAAa,IAAC,SAAS,EAAC,OAAO,KAAK,UAAU,YAC5C,QAAQ,GACK,CACjB,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { ReactNode } from 'react'\n\nimport { CommonFieldProps } from '../commonFieldTypes'\nimport { InternalField } from '../components/InternalField'\n\nexport interface FieldProps extends CommonFieldProps {\n htmlFor?: string\n children: ReactNode\n}\n\nexport const Field = ({ children, ...fieldProps }: FieldProps) => {\n return (\n <InternalField fieldType=\"field\" {...fieldProps}>\n {children}\n </InternalField>\n )\n}\n"]}
1	+ {"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/fields/Field/Field.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAS3D,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAc,EAAE,EAAE;IAC/D,OAAO,CACL,KAAC,aAAa,IAAC,SAAS,EAAC,OAAO,KAAK,UAAU,YAC5C,QAAQ,GACK,CACjB,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { ReactNode } from 'react'\n\nimport { CommonFieldProps } from '../commonFieldTypes'\nimport { InternalField } from '../components/InternalField'\n\nexport interface FieldProps extends CommonFieldProps {\n htmlFor?: string\n children: ReactNode\n assistiveTextId?: string\n errorMsgId?: string\n}\n\nexport const Field = ({ children, ...fieldProps }: FieldProps) => {\n return (\n <InternalField fieldType=\"field\" {...fieldProps}>\n {children}\n </InternalField>\n )\n}\n"]}

package/dist/fields/components/InternalField.d.ts CHANGED Viewed

@@ -5,6 +5,10 @@ interface InternalFieldProps extends CommonFieldProps {
     className?: string;
     htmlFor?: string;
     fieldType: 'field' | 'fieldset';
+    /** id for the assistive text, so a control can reference it with `aria-describedby` */
+    assistiveTextId?: string;
+    /** id for the error message, so a control can reference it with `aria-describedby` */
+    errorMsgId?: string;
 }
-export declare const InternalField: ({ children, fieldType, renderAsTitle, htmlFor, className, label, assistiveText, error, errorMsg, required, completed, ...marginProps }: InternalFieldProps) => import("react").JSX.Element;
+export declare const InternalField: ({ children, fieldType, renderAsTitle, htmlFor, className, label, assistiveText, error, errorMsg, required, completed, assistiveTextId, errorMsgId, ...marginProps }: InternalFieldProps) => import("react").JSX.Element;
 export {};

package/dist/fields/components/InternalField.js CHANGED Viewed

@@ -3,12 +3,17 @@ import styled, { css } from 'styled-components';
 import { Box } from '../../Box';
 import { Icon } from '../../Icon';
 import { Text } from '../../Text';
-export const InternalField = ({ children, fieldType, renderAsTitle, htmlFor, className, label, assistiveText, error, errorMsg, required, completed, ...marginProps }) => {
+import { markPointerFocus } from './fieldStyles';
+export const InternalField = ({ children, fieldType, renderAsTitle, htmlFor, className, label, assistiveText, error, errorMsg, required, completed, assistiveTextId, errorMsgId, ...marginProps }) => {
     const labelTag = fieldType === 'field' ? 'label' : 'legend';
+    // Clicking a label focuses its field, which shouldn't show the focus ring.
+    const handleLabelPointerDown = htmlFor
+        ? () => markPointerFocus(document.getElementById(htmlFor))
+        : undefined;
     const textColor = error ? 'color.feedback.negative.200' : 'color.text.subtle';
-    return (_jsxs(Container, { forwardedAs: fieldType === 'field' ? 'div' : 'fieldset', className: className, ...marginProps, children: [label && (_jsx(_Fragment, { children: renderAsTitle ? (_jsxs(Box, { mb: "space.200", children: [_jsx(Text, { tag: labelTag, typo: "heading-small", htmlFor: htmlFor, children: label }), assistiveText && (_jsx(Text, { tag: "p", color: "sesame", mt: "space.050", children: assistiveText }))] })) : (_jsxs(Text, { tag: labelTag, typo: "label", color: textColor, htmlFor: htmlFor, mb: "space.050", children: [label, required && (_jsx(Text, { tag: "span", typo: "body-small", color: "color.feedback.negative.200", children: "*" }))] })) })), _jsx(Box, { children: children }), fieldType === 'field' && assistiveText && !renderAsTitle && (_jsx(Text, { tag: labelTag, typo: "caption", color: textColor, mt: "space.050", children: assistiveText })), error &&
+    return (_jsxs(Container, { forwardedAs: fieldType === 'field' ? 'div' : 'fieldset', className: className, ...marginProps, children: [label && (_jsx(_Fragment, { children: renderAsTitle ? (_jsxs(Box, { mb: "space.200", children: [_jsx(Text, { tag: labelTag, typo: "heading-small", htmlFor: htmlFor, onPointerDown: handleLabelPointerDown, children: label }), assistiveText && (_jsx(Text, { tag: "p", color: "color.text.subtle", mt: "space.050", id: assistiveTextId, children: assistiveText }))] })) : (_jsxs(Text, { tag: labelTag, typo: "label", color: textColor, htmlFor: htmlFor, onPointerDown: handleLabelPointerDown, mb: "space.050", children: [label, required && (_jsx(Text, { tag: "span", typo: "body-small", color: "color.feedback.negative.200", children: "*" }))] })) })), _jsx(Box, { children: children }), fieldType === 'field' && assistiveText && !renderAsTitle && (_jsx(Text, { tag: labelTag, typo: "caption", color: textColor, mt: "space.050", id: assistiveTextId, children: assistiveText })), error &&
                 errorMsg &&
-                (typeof errorMsg === 'string' ? (_jsxs(Box, { flex: true, alignItems: "center", mt: "space.100", gap: "space.050", children: [_jsx(Icon, { render: "warning", size: 16, color: "color.feedback.negative.200" }), _jsx(Text, { tag: "span", typo: "caption", color: "color.feedback.negative.200", children: errorMsg })] })) : (_jsx(Box, { mt: "space.100", children: errorMsg }))), completed !== undefined && (_jsx(AnimationWrapper, { $displayStatus: completed, $isError: !!(error && errorMsg), children: _jsxs(StatusWrapper, { mt: 'space.100', children: [_jsx(Icon, { render: "included", size: 16, color: "color.feedback.positive.200" }), _jsx(Text, { typo: "caption", color: "color.feedback.positive.200", children: "Complete" })] }) }))] }));
+                (typeof errorMsg === 'string' ? (_jsxs(Box, { flex: true, alignItems: "center", mt: "space.100", gap: "space.050", id: errorMsgId, children: [_jsx(Icon, { render: "warning", size: 16, color: "color.feedback.negative.200" }), _jsx(Text, { tag: "span", typo: "caption", color: "color.feedback.negative.200", children: errorMsg })] })) : (_jsx(Box, { mt: "space.100", id: errorMsgId, children: errorMsg }))), completed !== undefined && (_jsx(AnimationWrapper, { $displayStatus: completed, $isError: !!(error && errorMsg), children: _jsxs(StatusWrapper, { mt: 'space.100', children: [_jsx(Icon, { render: "included", size: 16, color: "color.feedback.positive.200" }), _jsx(Text, { typo: "caption", color: "color.feedback.positive.200", children: "Complete" })] }) }))] }));
 };
 const AnimationWrapper = styled(Box) `
   width: 0;

package/dist/fields/components/InternalField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalField.js","sourceRoot":"","sources":["../../../src/fields/components/InternalField.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;~~AAUjC~~,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,aAAa,EACb,OAAO,EACP,SAAS,EACT,KAAK,EACL,aAAa,EACb,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,GAAG,WAAW,EACK,EAAE,EAAE;IACvB,MAAM,QAAQ,GAAG,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAA;~~IAE3D~~,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,mBAAmB,CAAA;IAC7E,OAAO,CACL,MAAC,SAAS,IACR,WAAW,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,EACvD,SAAS,EAAE,SAAS,KAChB,WAAW,aAEd,KAAK,IAAI,CACR,4BACG,aAAa,CAAC,CAAC,CAAC,CACf,MAAC,GAAG,IAAC,EAAE,EAAC,WAAW,aACjB,KAAC,IAAI,~~IAAC~~,GAAG,EAAE,QAAQ,~~EAAE~~,IAAI,EAAC,eAAe,~~EAAC~~,OAAO,EAAE,OAAO,~~YACvD~~,KAAK,GACD,EAEN,aAAa,IAAI,CAChB,KAAC,IAAI,~~IAAC~~,GAAG,EAAC,GAAG,~~EAAC~~,KAAK,EAAC,~~QAAQ~~,~~EAAC~~,EAAE,EAAC,WAAW,~~YACxC~~,aAAa,GACT,CACR,IACG,CACP,CAAC,CAAC,CAAC,CACF,MAAC,IAAI,IACH,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAC,WAAW,aAEb,KAAK,EACL,QAAQ,IAAI,CACX,KAAC,IAAI,IACH,GAAG,EAAC,MAAM,EACV,IAAI,EAAC,YAAY,EACjB,KAAK,EAAC,6BAA6B,kBAG9B,CACR,IACI,CACR,GACA,CACJ,EAED,KAAC,GAAG,cAAE,QAAQ,GAAO,EACpB,SAAS,KAAK,OAAO,IAAI,aAAa,IAAI,CAAC,aAAa,IAAI,CAC3D,KAAC,IAAI,~~IAAC~~,GAAG,EAAE,QAAQ,~~EAAE~~,IAAI,EAAC,SAAS,~~EAAC~~,KAAK,EAAE,SAAS,~~EAAE~~,EAAE,EAAC,WAAW,~~YACjE~~,aAAa,GACT,CACR,EAEA,KAAK;gBACJ,QAAQ;gBACR,CAAC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC9B,MAAC,GAAG,~~IAAC~~,IAAI,~~QAAC~~,UAAU,EAAC,QAAQ,~~EAAC~~,EAAE,EAAC,WAAW,~~EAAC~~,GAAG,EAAC,WAAW,~~aAC1D~~,KAAC,IAAI,IACH,MAAM,EAAC,SAAS,EAChB,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,6BAA6B,GACnC,EACF,KAAC,IAAI,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,6BAA6B,YAChE,QAAQ,GACJ,IACH,CACP,CAAC,CAAC,CAAC,CACF,KAAC,GAAG,IAAC,EAAE,EAAC,WAAW,~~YAAE~~,QAAQ,~~GAAO~~,~~CACrC~~,CAAC,EAGH,SAAS,KAAK,SAAS,IAAI,CAC1B,KAAC,gBAAgB,IACf,cAAc,EAAE,SAAS,EACzB,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,IAAI,QAAQ,CAAC,YAE/B,MAAC,aAAa,IAAC,EAAE,EAAE,WAAW,aAC5B,KAAC,IAAI,IACH,MAAM,EAAC,UAAU,EACjB,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,6BAA6B,GACnC,EACF,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,6BAA6B,yBAEjD,IACO,GACC,CACpB,IACS,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAGlC;;;;IAIE,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CACvB,cAAc;IACd,GAAG,CAAA;;;KAGF;;;IAGD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjB,QAAQ;IACR,GAAG,CAAA;;KAEF;CACJ,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;SAGxB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;CACzC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;CAQ5B,CAAA","sourcesContent":["import { ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../../Box'\nimport { Icon } from '../../Icon'\nimport { Text } from '../../Text'\nimport { CommonFieldProps } from '../commonFieldTypes'\n\ninterface InternalFieldProps extends CommonFieldProps {\n children: ReactNode\n className?: string\n htmlFor?: string\n fieldType: 'field' \| 'fieldset'\n}\n\nexport const InternalField = ({\n children,\n fieldType,\n renderAsTitle,\n htmlFor,\n className,\n label,\n assistiveText,\n error,\n errorMsg,\n required,\n completed,\n ...marginProps\n}: InternalFieldProps) => {\n const labelTag = fieldType === 'field' ? 'label' : 'legend'\n\n const textColor = error ? 'color.feedback.negative.200' : 'color.text.subtle'\n return (\n <Container\n forwardedAs={fieldType === 'field' ? 'div' : 'fieldset'}\n className={className}\n {...marginProps}\n >\n {label && (\n <>\n {renderAsTitle ? (\n <Box mb=\"space.200\">\n <Text tag={labelTag} typo=\"heading-small\" htmlFor={htmlFor}>\n {label}\n </Text>\n\n {assistiveText && (\n <Text tag=\"p\" color=\"~~sesame~~\" mt=\"space.050\">\n {assistiveText}\n </Text>\n )}\n </Box>\n ) : (\n <Text\n tag={labelTag}\n typo=\"label\"\n color={textColor}\n htmlFor={htmlFor}\n mb=\"space.050\"\n >\n {label}\n {required && (\n <Text\n tag=\"span\"\n typo=\"body-small\"\n color=\"color.feedback.negative.200\"\n >\n \n </Text>\n )}\n </Text>\n )}\n </>\n )}\n\n <Box>{children}</Box>\n {fieldType === 'field' && assistiveText && !renderAsTitle && (\n <Text tag={labelTag} typo=\"caption\" color={textColor} mt=\"space.050\">\n {assistiveText}\n </Text>\n )}\n\n {error &&\n errorMsg &&\n (typeof errorMsg === 'string' ? (\n <Box flex alignItems=\"center\" mt=\"space.100\" gap=\"space.050\">\n <Icon\n render=\"warning\"\n size={16}\n color=\"color.feedback.negative.200\"\n />\n <Text tag=\"span\" typo=\"caption\" color=\"color.feedback.negative.200\">\n {errorMsg}\n </Text>\n </Box>\n ) : (\n <Box mt=\"space.100\">{errorMsg}</Box>\n ))}\n\n {/ When completed is false, whitespace is rendered /}\n {completed !== undefined && (\n <AnimationWrapper\n $displayStatus={completed}\n $isError={!!(error && errorMsg)}\n >\n <StatusWrapper mt={'space.100'}>\n <Icon\n render=\"included\"\n size={16}\n color=\"color.feedback.positive.200\"\n />\n <Text typo=\"caption\" color=\"color.feedback.positive.200\">\n Complete\n </Text>\n </StatusWrapper>\n </AnimationWrapper>\n )}\n </Container>\n )\n}\n\nconst AnimationWrapper = styled(Box)<{\n $displayStatus: boolean\n $isError: boolean\n}>`\n width: 0;\n overflow: hidden;\n\n ${({ $displayStatus }) =>\n $displayStatus &&\n css`\n transition: width 0.6s ease-in;\n width: 100%;\n `}\n\n / This enables animation to appear when previous state is error */\n ${({ $isError }) =>\n $isError &&\n css`\n height: 0;\n `}\n`\n\nconst StatusWrapper = styled(Box)`\n display: flex;\n align-items: center;\n gap: ${({ theme }) => theme.space['050']};\n`\n\nconst Container = styled(Box)`\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n\n // In case, the element is a 'fieldset', we remove the border\n border: 0;\n`\n"]}
1	+ {"version":3,"file":"InternalField.js","sourceRoot":"","sources":["../../../src/fields/components/InternalField.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../../Box'\nimport { Icon } from '../../Icon'\nimport { Text } from '../../Text'\nimport { CommonFieldProps } from '../commonFieldTypes'\nimport { markPointerFocus } from './fieldStyles'\n\ninterface InternalFieldProps extends CommonFieldProps {\n children: ReactNode\n className?: string\n htmlFor?: string\n fieldType: 'field' \| 'fieldset'\n /** id for the assistive text, so a control can reference it with `aria-describedby` /\n assistiveTextId?: string\n /* id for the error message, so a control can reference it with `aria-describedby` /\n errorMsgId?: string\n}\n\nexport const InternalField = ({\n children,\n fieldType,\n renderAsTitle,\n htmlFor,\n className,\n label,\n assistiveText,\n error,\n errorMsg,\n required,\n completed,\n assistiveTextId,\n errorMsgId,\n ...marginProps\n}: InternalFieldProps) => {\n const labelTag = fieldType === 'field' ? 'label' : 'legend'\n // Clicking a label focuses its field, which shouldn't show the focus ring.\n const handleLabelPointerDown = htmlFor\n ? () => markPointerFocus(document.getElementById(htmlFor))\n : undefined\n\n const textColor = error ? 'color.feedback.negative.200' : 'color.text.subtle'\n return (\n <Container\n forwardedAs={fieldType === 'field' ? 'div' : 'fieldset'}\n className={className}\n {...marginProps}\n >\n {label && (\n <>\n {renderAsTitle ? (\n <Box mb=\"space.200\">\n <Text\n tag={labelTag}\n typo=\"heading-small\"\n htmlFor={htmlFor}\n onPointerDown={handleLabelPointerDown}\n >\n {label}\n </Text>\n\n {assistiveText && (\n <Text\n tag=\"p\"\n color=\"color.text.subtle\"\n mt=\"space.050\"\n id={assistiveTextId}\n >\n {assistiveText}\n </Text>\n )}\n </Box>\n ) : (\n <Text\n tag={labelTag}\n typo=\"label\"\n color={textColor}\n htmlFor={htmlFor}\n onPointerDown={handleLabelPointerDown}\n mb=\"space.050\"\n >\n {label}\n {required && (\n <Text\n tag=\"span\"\n typo=\"body-small\"\n color=\"color.feedback.negative.200\"\n >\n \n </Text>\n )}\n </Text>\n )}\n </>\n )}\n\n <Box>{children}</Box>\n {fieldType === 'field' && assistiveText && !renderAsTitle && (\n <Text\n tag={labelTag}\n typo=\"caption\"\n color={textColor}\n mt=\"space.050\"\n id={assistiveTextId}\n >\n {assistiveText}\n </Text>\n )}\n\n {error &&\n errorMsg &&\n (typeof errorMsg === 'string' ? (\n <Box\n flex\n alignItems=\"center\"\n mt=\"space.100\"\n gap=\"space.050\"\n id={errorMsgId}\n >\n <Icon\n render=\"warning\"\n size={16}\n color=\"color.feedback.negative.200\"\n />\n <Text tag=\"span\" typo=\"caption\" color=\"color.feedback.negative.200\">\n {errorMsg}\n </Text>\n </Box>\n ) : (\n <Box mt=\"space.100\" id={errorMsgId}>\n {errorMsg}\n </Box>\n ))}\n\n {/* When completed is false, whitespace is rendered /}\n {completed !== undefined && (\n <AnimationWrapper\n $displayStatus={completed}\n $isError={!!(error && errorMsg)}\n >\n <StatusWrapper mt={'space.100'}>\n <Icon\n render=\"included\"\n size={16}\n color=\"color.feedback.positive.200\"\n />\n <Text typo=\"caption\" color=\"color.feedback.positive.200\">\n Complete\n </Text>\n </StatusWrapper>\n </AnimationWrapper>\n )}\n </Container>\n )\n}\n\nconst AnimationWrapper = styled(Box)<{\n $displayStatus: boolean\n $isError: boolean\n}>`\n width: 0;\n overflow: hidden;\n\n ${({ $displayStatus }) =>\n $displayStatus &&\n css`\n transition: width 0.6s ease-in;\n width: 100%;\n `}\n\n / This enables animation to appear when previous state is error */\n ${({ $isError }) =>\n $isError &&\n css`\n height: 0;\n `}\n`\n\nconst StatusWrapper = styled(Box)`\n display: flex;\n align-items: center;\n gap: ${({ theme }) => theme.space['050']};\n`\n\nconst Container = styled(Box)`\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n\n // In case, the element is a 'fieldset', we remove the border\n border: 0;\n`\n"]}

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

@@ -0,0 +1,17 @@
+import { FocusEvent, FocusEventHandler, PointerEvent, PointerEventHandler } from 'react';
+/**
+ * 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
+ * for keyboard focus.
+ */
+export declare const markPointerFocus: (element: HTMLElement | null) => void;
+/** Pass to styled-components `.attrs`. Callers' own handlers still run. */
+export declare const fieldFocusAttrs: <T extends HTMLElement>({ onPointerDown, onBlurCapture, }: {
+    onPointerDown?: PointerEventHandler<T>;
+    onBlurCapture?: FocusEventHandler<T>;
+}) => {
+    onPointerDown: (event: PointerEvent<T>) => void;
+    onBlurCapture: (event: FocusEvent<T>) => void;
+};
+export declare const fieldFocusRing: import("styled-components").RuleSet<object>;
+export declare const fieldDisabledStyle: import("styled-components").RuleSet<object>;

package/dist/fields/components/fieldStyles.js ADDED Viewed

@@ -0,0 +1,39 @@
+import { css } 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
+ * for keyboard focus.
+ */
+export const markPointerFocus = (element) => {
+    if (element)
+        element.dataset.pointerFocus = '';
+};
+/** Pass to styled-components `.attrs`. Callers' own handlers still run. */
+export const fieldFocusAttrs = ({ onPointerDown, onBlurCapture, }) => ({
+    onPointerDown: (event) => {
+        markPointerFocus(event.currentTarget);
+        onPointerDown?.(event);
+    },
+    onBlurCapture: (event) => {
+        delete event.currentTarget.dataset.pointerFocus;
+        onBlurCapture?.(event);
+    },
+});
+export const fieldFocusRing = css `
+  &:focus-visible:not([data-pointer-focus]) {
+    outline: 2px solid ${({ theme }) => theme.color.focus.onLight};
+    outline-offset: 2px;
+  }
+`;
+export const fieldDisabledStyle = css `
+  &:disabled {
+    border-color: ${({ theme }) => theme.color.feedback.inactive[100]};
+    background-color: ${({ theme }) => theme.color.feedback.inactive[50]};
+    color: ${({ theme }) => theme.color.text.subtle};
+    cursor: not-allowed;
+    /* Safari fades disabled fields on top of these colours */
+    opacity: 1;
+    -webkit-text-fill-color: currentColor;
+  }
+`;
+//# sourceMappingURL=fieldStyles.js.map

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

@@ -0,0 +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"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@mrshmllw/smores-react",
-  "version": "16.3.1",
+  "version": "16.5.0",
   "description": "Collection of React components used by Marshmallow Technology",
   "main": "./dist/index.js",
   "type": "module",