@dnanpm/styleguide 1.7.0 → 1.9.0

package/build/cjs/components/Accordion/Accordion.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+interface AccordionProps {
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * The actual content
+     * @type AccordionItem
+     */
+    children: React.ReactNode;
+    /** Allow multiple accordion items to be open
+     * @default true
+     */
+    allowMultiOpen?: boolean;
+    /**
+     * Display close button in the item content
+     * @default false
+     */
+    hasCloseButton?: boolean;
+    /**
+     * Title has color when item is open, hovered or focused
+     * @default true
+     */
+    highlightSelected?: boolean;
+    /**
+     * Label to show for the close button in the content
+     */
+    openLabel?: string;
+    /**
+     * Label to show for the close button in the content
+     */
+    closeLabel?: string;
+}
+/** @visibleName Accordion */
+declare const Accordion: ({ className, children, allowMultiOpen, highlightSelected, hasCloseButton, openLabel, closeLabel, }: AccordionProps) => JSX.Element;
+/** @component */
+export default Accordion;

package/build/cjs/components/Accordion/Accordion.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var AccordionItem = require('./AccordionItem.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/** @visibleName Accordion */
+const Accordion = ({ className, children, allowMultiOpen = true, highlightSelected = true, hasCloseButton = false, openLabel, closeLabel, }) => {
+    const [activeItem, setActiveItem] = React.useState(null);
+    const handleItemOpen = (index) => {
+        if (allowMultiOpen) {
+            return;
+        }
+        setActiveItem(index);
+    };
+    /** filter out immediate children that are not AccordionItems */
+    const accordionItems = React__default['default'].Children.map(children, (child, index) => {
+        if (React__default['default'].isValidElement(child) && child.type === AccordionItem['default']) {
+            return (React__default['default'].createElement(AccordionItem['default'], Object.assign({ closeFromParent: !allowMultiOpen && activeItem !== index, key: index + child.props.title, hasCloseButton: hasCloseButton, highlightSelected: highlightSelected, openLabel: openLabel, closeLabel: closeLabel, 
+                // tslint:disable-next-line: jsx-no-lambda
+                onOpen: () => handleItemOpen(index) }, child.props), child.props.children));
+        }
+    });
+    if (!accordionItems) {
+        return React__default['default'].createElement(React__default['default'].Fragment, null);
+    }
+    return React__default['default'].createElement("div", { className: className }, accordionItems);
+};
+
+exports.default = Accordion;

package/build/cjs/components/Accordion/AccordionItem.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+export interface AccordionItemProps {
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * The actual content
+     */
+    children?: React.ReactNode;
+    /**
+     * Accordion item title
+     */
+    title: string;
+    /**
+     * Display close button in the item content
+     * @default false
+     */
+    hasCloseButton?: boolean;
+    /**
+     * Title has color when item is open, hovered or focused
+     * @default true
+     */
+    highlightSelected?: boolean;
+    /**
+     * Label to show for the open icon for accessibility
+     */
+    openLabel?: string;
+    /**
+     * Label to show for the close button in the content
+     */
+    closeLabel?: string;
+    /**
+     * Accordion item is closed from a parent accordion
+     * @default false
+     */
+    closeFromParent?: boolean;
+    /**
+     * callback to parent accordion when item is expanded
+     */
+    onOpen?: () => void;
+}
+declare const AccordionItem: ({ title, children, hasCloseButton, highlightSelected, openLabel, closeLabel, closeFromParent, onOpen, ...props }: AccordionItemProps) => JSX.Element;
+/** @component */
+export default AccordionItem;

package/build/cjs/components/Accordion/AccordionItem.js

@@ -0,0 +1,100 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var styled = require('styled-components');
+var useElementDimensions = require('../../hooks/useElementDimensions.js');
+var styledUtils = require('../../utils/styledUtils.js');
+var Icon = require('../Icon/Icon.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+/* eslint-disable react-hooks/exhaustive-deps */
+const AccordionItemTitle = styled__default['default'].div `
+    font-size: ${p => p.theme.fontSize.defaultFontSize};
+    font-weight: ${p => p.theme.fontWeight.bold};
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    cursor: pointer;
+    color: ${p => p.isExpanded && p.highlightSelected ? p.theme.color.hotPink : p.theme.color.text};
+    padding: ${p => `${styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1.6)} ${styledUtils.getMultipliedSize(p.theme.base.baseHeight, 2)}`};
+    transition: color 0.2s;
+    ${p => p.highlightSelected &&
+    styled.css `
+            &:hover,
+            &:active,
+            &:focus {
+                color: ${p.theme.color.hotPink};
+                text-decoration: none;
+            }
+        `}
+`;
+const AccordionItemContainer = styled__default['default'].div `
+    margin: ${p => `0 ${styledUtils.getDividedSize(p.theme.base.baseHeight, 2.5)}}`};
+    border-bottom: 1px solid
+        ${p => (p.isExpanded && p.highlightSelected ? p.theme.color.hotPink : p.theme.color.gray15)};
+`;
+const AccordionItemContent = styled__default['default'].div `
+    overflow: hidden;
+    color: ${p => p.theme.color.slateGray};
+    transition: all 0.2s ease;
+    height: ${p => (p.isExpanded ? p.maxHeight / 16 + 1.25 : 0)}rem;
+    visibility: ${p => (p.isExpanded ? 'visible' : 'hidden')};
+`;
+const AccordionItemContentInner = styled__default['default'].div `
+    padding: ${p => `0 ${styledUtils.getMultipliedSize(p.theme.base.baseHeight, 2)} ${styledUtils.getMultipliedSize(p.theme.base.baseHeight, 2)}`};
+`;
+const CloseAccordionItemWrapper = styled__default['default'].div `
+    display: flex;
+    flex: 1;
+    justify-content: flex-end;
+`;
+const CloseAccordionItem = styled__default['default'].div `
+    display: flex;
+    gap: ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1)};
+    color: ${p => p.theme.color.text};
+    cursor: pointer;
+`;
+const AccordionItem = ({ title, children, hasCloseButton = false, highlightSelected = true, openLabel, closeLabel, closeFromParent = false, onOpen, ...props }) => {
+    const [isExpanded, setExpanded] = React.useState(false);
+    const toggleExpanded = () => {
+        setExpanded(!isExpanded);
+    };
+    // get height when element dimensions change
+    const { height: contentHeight, ref: contentRef } = useElementDimensions['default']();
+    React.useEffect(() => {
+        if (closeFromParent) {
+            setExpanded(false);
+        }
+    }, [closeFromParent]);
+    React.useEffect(() => {
+        if (isExpanded && onOpen) {
+            onOpen();
+        }
+    }, [isExpanded]);
+    const handleKeyDown = (e) => {
+        const key = e.key;
+        if (key === 'Enter' || key === ' ') {
+            e.preventDefault();
+            setExpanded(!isExpanded);
+        }
+    };
+    return (React__default['default'].createElement(AccordionItemContainer, { "aria-expanded": isExpanded, className: props.className, isExpanded: isExpanded, highlightSelected: highlightSelected },
+        React__default['default'].createElement(AccordionItemTitle, { tabIndex: 0, onKeyDown: handleKeyDown, isExpanded: isExpanded, highlightSelected: highlightSelected, onClick: toggleExpanded, role: "button" },
+            React__default['default'].createElement("span", null, title),
+            isExpanded ? (React__default['default'].createElement(Icon['default'], { name: "hlChevronUp", size: "1.5rem", right: true, "aria-label": closeLabel })) : (React__default['default'].createElement(Icon['default'], { name: "hlChevronDown", size: "1.5rem", right: true, "aria-label": openLabel }))),
+        React__default['default'].createElement(AccordionItemContent, { maxHeight: contentHeight, isExpanded: isExpanded },
+            React__default['default'].createElement(AccordionItemContentInner, { ref: contentRef },
+                children,
+                hasCloseButton && (React__default['default'].createElement(CloseAccordionItemWrapper, null,
+                    React__default['default'].createElement(CloseAccordionItem, { onClick: toggleExpanded, "aria-label": closeLabel, tabIndex: 0, onKeyDown: handleKeyDown, role: "button" },
+                        React__default['default'].createElement("span", null, closeLabel),
+                        React__default['default'].createElement(Icon['default'], { name: "hlX", size: "1.5rem" }))))))));
+};
+
+exports.default = AccordionItem;

package/build/cjs/components/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AccordionItem } from './AccordionItem';
+export { default as Accordion } from './Accordion';

package/build/cjs/components/AmountSelector/AmountSelector.d.ts

@@ -0,0 +1,66 @@
+/// <reference types="react" />
+interface Props {
+    /**
+     * Unique ID for the input element
+     */
+    id: string;
+    /**
+     * On value change callback
+     */
+    onChange: (val: number) => void;
+    /**
+     * Name of the input element
+     */
+    name?: string;
+    /**
+     * Default value of input element
+     *
+     * @default 1
+     */
+    value?: number;
+    /**
+     * Allows to set step value for increase or decrease
+     *
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Allows to set minimum value
+     *
+     * @default 1
+     */
+    min?: number;
+    /**
+     * Allows to set maximum value
+     */
+    max?: number;
+    /**
+     * Allows to disable the component functionality
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Controls if input element's value can be updated directly
+     *
+     * @default true
+     */
+    readonly?: boolean;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows the `onChange` function to be called even after `min` property value is reached.
+     * When defined and `min` property value is reached, the `hlMinus` button  changes to `hlTrash` button
+     */
+    removable?: boolean;
+}
+/** @visibleName Amount Selector */
+declare const AmountSelector: ({ onChange, value, step, min, max, disabled, readonly, "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+/** @component */
+export default AmountSelector;

package/build/cjs/components/AmountSelector/AmountSelector.js

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var styled = require('../../themes/styled.js');
+var theme = require('../../themes/theme.js');
+var styledUtils = require('../../utils/styledUtils.js');
+require('../Buttons/ButtonBasicStyles.js');
+require('../PixelLoader/PixelLoaderStyles.js');
+require('../Buttons/ButtonPrimaryStyles.js');
+var ButtonSecondary = require('../Buttons/ButtonSecondary.js');
+require('../Buttons/ButtonTertiaryStyles.js');
+require('../Buttons/ButtonRoundStyles.js');
+require('../Buttons/CloseButton.js');
+require('../Buttons/ButtonIconStyles.js');
+var Icon = require('../Icon/Icon.js');
+require('../Buttons/ButtonIconPrimaryStyles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const Container = styled['default'].div `
+    display: flex;
+    width: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 12)};
+
+    input {
+        width: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 4)};
+        border: 0 none;
+        text-align: center;
+        outline: none;
+        -webkit-appearance: none;
+        -moz-appearance: textfield;
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            display: none;
+        }
+    }
+`;
+const StyledButtonSecondary = styled['default'](ButtonSecondary['default']) `
+    min-width: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 4)};
+`;
+/** @visibleName Amount Selector */
+const AmountSelector = ({ onChange, value = 1, step = 1, min = 1, max, disabled = false, readonly = true, 'data-testid': dataTestId, ...props }) => {
+    const isMinReached = (val) => val < min;
+    const isMaxReached = (val) => Boolean(max && val > max);
+    const isInRange = (val) => !isMinReached(val) && !isMaxReached(val);
+    const increase = () => {
+        const newValue = value + step;
+        if (!isMaxReached(newValue) && !disabled) {
+            onChange(newValue);
+        }
+    };
+    const decrease = () => {
+        const newValue = value - step;
+        if (!disabled && (!isMinReached(newValue) || props.removable)) {
+            onChange(newValue);
+        }
+    };
+    const handleChange = (event) => {
+        if (event.target.value) {
+            const integerInputValue = parseInt(event.target.value, 10);
+            if (isInRange(integerInputValue)) {
+                onChange(integerInputValue);
+            }
+            else {
+                onChange(max && isMaxReached(integerInputValue) ? max : min);
+            }
+        }
+        else {
+            onChange(min);
+        }
+    };
+    return (React__default['default'].createElement(Container, { disabled: disabled, "data-testid": dataTestId, className: props.className },
+        React__default['default'].createElement(StyledButtonSecondary, { disabled: disabled, onClick: decrease, "data-testid": dataTestId &&
+                `${dataTestId}${props.removable && isMinReached(value - step) ? '-remove' : '-decrease'}` },
+            React__default['default'].createElement(Icon['default'], { color: theme['default'].color.black, name: props.removable && isMinReached(value - step) ? 'hlTrash' : 'hlMinus' })),
+        React__default['default'].createElement("input", { id: props.id, name: props.name, type: "number", onChange: handleChange, value: value, readOnly: readonly || disabled, disabled: disabled }),
+        React__default['default'].createElement(StyledButtonSecondary, { disabled: disabled, onClick: increase, "data-testid": dataTestId ? `${dataTestId}-increase` : undefined },
+            React__default['default'].createElement(Icon['default'], { color: theme['default'].color.black, name: "hlPlus" }))));
+};
+
+exports.default = AmountSelector;

package/build/cjs/components/Card/Card.js

@@ -3,15 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var styledUtils = require('../../utils/styledUtils.js');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
+var styledUtils = require('../../utils/styledUtils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-/** @visibleName Cards */
 const showing = styled.keyframes `
   from {
     opacity:0.3;

package/build/cjs/components/Card/CardRow.js

@@ -11,7 +11,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-/** @visibleName CardRow */
 const CardElement = styled['default'].div `
     display: flex;
     justify-content: space-between;

package/build/cjs/components/Checkbox/Checkbox.d.ts

@@ -19,6 +19,7 @@ export interface CheckboxProps {
      * @default false
      */
     error?: boolean;
+    required?: boolean;
     errorMessage?: string;
     'data-testid'?: string;
 }

package/build/cjs/components/Checkbox/Checkbox.js

@@ -77,7 +77,10 @@ const ErrorMessage = styled['default'].div `
     color: ${props => props.theme.color.error};
     margin-top: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 1)};
 `;
-const Checkbox = ({ id, value, onChange, label, disabled, error, errorMessage, className, 'data-testid': dataTestId, }) => {
+const Mandatory = styled['default'].span `
+    color: ${props => props.theme.color.hotPink};
+`;
+const Checkbox = ({ id, value, onChange, label, disabled, error, errorMessage, className, required, 'data-testid': dataTestId, }) => {
     const handleChange = () => {
         if (onChange && !disabled) {
             onChange(!value);
@@ -85,7 +88,9 @@ const Checkbox = ({ id, value, onChange, label, disabled, error, errorMessage, c
     };
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
         React__default['default'].createElement(Input, { id: id, className: className, type: "checkbox", checked: Boolean(value), onChange: handleChange, disabled: disabled, "data-testid": dataTestId }),
-        React__default['default'].createElement(Label, { htmlFor: id, "data-testid": dataTestId && `${dataTestId}-label` }, label),
+        React__default['default'].createElement(Label, { htmlFor: id, "data-testid": dataTestId && `${dataTestId}-label` },
+            label,
+            required && React__default['default'].createElement(Mandatory, null, " *")),
         error && errorMessage && (React__default['default'].createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, errorMessage))));
 };
 

package/build/cjs/components/Footer/{index.d.ts → Footer.d.ts}

@@ -1,6 +1,5 @@
 import React from 'react';
 import { FooterNavigationProps } from './Components/FooterComponents';
-/** @visibleName Footer */
 interface FooterItemProps {
     businessId: string;
     footerNavigation: FooterNavigationProps;

package/build/cjs/components/Footer/{index.js → Footer.js}

@@ -81,6 +81,7 @@ const initialCollapse = {
     1: false,
     2: false,
 };
+/** @visibleName Footer */
 const Footer = ({ items = { businessId: 'NONE', footerNavigation: {} }, language = 'fi', zIndex = 1, isMobileFooter = false, collapseSize = 767, }) => {
     // Resets menu states when menu content alters between mobile and desktop
     const footerChanged = previousValue !== isMobileFooter;
@@ -126,6 +127,6 @@ const Footer = ({ items = { businessId: 'NONE', footerNavigation: {} }, language
 /** @component */
 // TODO: Remove ts-ignore after https://jira.dna.fi/browse/STYLE-232 is done
 // @ts-ignore
-var index = withSizes__default['default'](mapSizesToProps)(Footer);
+var Footer$1 = withSizes__default['default'](mapSizesToProps)(Footer);
 
-exports.default = index;
+exports.default = Footer$1;

package/build/cjs/components/Footer/context/FooterContext.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { FooterProps } from '../index';
+import { FooterProps } from '../Footer';
 declare const FooterContext: React.Context<FooterProps>;
 export default FooterContext;

package/build/{es/components/Helper/index.d.ts → cjs/components/Helper/Helper.d.ts}

@@ -12,6 +12,6 @@ export interface HelperProps {
      */
     right?: boolean;
 }
-declare const Helper: React.SFC<HelperProps>;
+declare const Helper: React.FunctionComponent<HelperProps>;
 /** @component */
 export default Helper;

package/build/cjs/components/Icon/Icons.d.ts

@@ -283,6 +283,7 @@ export declare const hlMarker: ({ size, color, ...props }: IconProps) => JSX.Ele
 export declare const hlMenu: ({ size, color, ...props }: IconProps) => JSX.Element;
 export declare const hlMemory: ({ size, color, ...props }: IconProps) => JSX.Element;
 export declare const hlMinimize: ({ size, color, ...props }: IconProps) => JSX.Element;
+export declare const hlMinus: ({ size, color, ...props }: IconProps) => JSX.Element;
 export declare const hlMobileData: ({ size, color, ...props }: IconProps) => JSX.Element;
 export declare const hlMobilePayment: ({ size, color, ...props }: IconProps) => JSX.Element;
 export declare const hlModem: ({ size, color, ...props }: IconProps) => JSX.Element;

package/build/cjs/components/Icon/Icons.js

@@ -689,6 +689,8 @@ const hlMemory = ({ size, color, ...props }) => (React__default['default'].creat
     React__default['default'].createElement("path", { d: "M7.8 8.4a.6.6 0 0 1-.6-.6V5.4a.6.6 0 1 1 1.2 0v2.4a.6.6 0 0 1-.6.6zM10.8 8.4a.6.6 0 0 1-.6-.6V5.4a.6.6 0 0 1 1.2 0v2.4a.6.6 0 0 1-.6.6zM13.8 8.4a.6.6 0 0 1-.6-.6V5.4a.6.6 0 1 1 1.2 0v2.4a.6.6 0 0 1-.6.6z" })));
 const hlMinimize = ({ size, color, ...props }) => (React__default['default'].createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: color, width: size, height: size }, props),
     React__default['default'].createElement("path", { d: "M21 21.6H3a.6.6 0 0 1 0-1.2h18a.6.6 0 0 1 0 1.2z" })));
+const hlMinus = ({ size, color, ...props }) => (React__default['default'].createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: color, width: size, height: size }, props),
+    React__default['default'].createElement("path", { d: "M21 12.6H3a.6.6 0 0 1 0-1.2h18a.6.6 0 1 1 0 1.2z" })));
 const hlMobileData = ({ size, color, ...props }) => (React__default['default'].createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: color, width: size, height: size }, props),
     React__default['default'].createElement("path", { d: "M18 12a.6.6 0 01-.42-1 5.4 5.4 0 000-7.64.601.601 0 11.85-.85 6.6 6.6 0 010 9.33.6.6 0 01-.43.16zM6 12a.6.6 0 01-.42-.18 6.6 6.6 0 010-9.33.601.601 0 11.85.85 5.4 5.4 0 000 7.64A.6.6 0 016 12zM15 10.2a.6.6 0 01-.42-1 2.79 2.79 0 000-4 .601.601 0 11.85-.85 4 4 0 010 5.65.6.6 0 01-.43.2zM9 10.2a.6.6 0 01-.42-.2 4 4 0 010-5.65.601.601 0 11.85.85 2.79 2.79 0 000 4 .6.6 0 01-.42 1H9zM13.2 7.2a1.2 1.2 0 10-1.8 1V21a.6.6 0 101.2 0V8.23a1.19 1.19 0 00.6-1.03z" })));
 const hlMobilePayment = ({ size, color, ...props }) => (React__default['default'].createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: color, width: size, height: size }, props),
@@ -941,6 +943,7 @@ exports.hlMarker = hlMarker;
 exports.hlMemory = hlMemory;
 exports.hlMenu = hlMenu;
 exports.hlMinimize = hlMinimize;
+exports.hlMinus = hlMinus;
 exports.hlMobileData = hlMobileData;
 exports.hlMobilePayment = hlMobilePayment;
 exports.hlModem = hlModem;

package/build/cjs/components/Input/Input.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var styled = require('../../themes/styled.js');
 var styledUtils = require('../../utils/styledUtils.js');
-var LabelText = require('../LabelText/LabelText.js');
 var Icon = require('../Icon/Icon.js');
+var LabelText = require('../LabelText/LabelText.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -19,7 +19,7 @@ const Tag = styled['default'].input `
     padding: 0 ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
     font-size: ${props => props.theme.fontSize.defaultFontSize};
     width: 100%;
-    height: 40px;
+    height: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 4)};
     border: 1px solid ${props => props.theme.color.gray15};
     &::-ms-clear,
     &::-ms-reveal {
@@ -51,8 +51,8 @@ const FieldWrapper = styled['default'].div `
         position: absolute;
         z-index: 1;
         top: 0;
-        right: 0.625rem;
-        height: 40px;
+        right: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
+        height: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 4)};
     }
 `;
 const FieldContainer = styled['default'].div `

package/build/cjs/components/LabelText/LabelText.d.ts

@@ -1,4 +1,4 @@
-/** @visibleName Label text */
+/** @visibleName Label Text */
 export declare const LabelText: import("styled-components").StyledComponent<"label", {
     base: {
         baseHeight: {
@@ -48,7 +48,7 @@ export declare const LabelText: import("styled-components").StyledComponent<"lab
         gray5: string;
     };
     fontFamily: {
-        baseFontFamily: string; /** @visibleName Label text */
+        baseFontFamily: string; /** @visibleName Label Text */
     };
     fontSize: {
         defaultFontSize: string;

package/build/cjs/components/LabelText/LabelText.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var styled = require('../../themes/styled.js');
 var styledUtils = require('../../utils/styledUtils.js');
 
-/** @visibleName Label text */
+/** @visibleName Label Text */
 const LabelText = styled['default'].label(({ theme, htmlFor }) => ({
     fontSize: theme.fontSize.defaultFontSize,
     display: 'block',

package/build/cjs/components/MainNavigation/ChildComponents/BusinessMenu.js

@@ -39,25 +39,19 @@ const BusinessMenuList = styled['default'].ul `
     height: 100%;
 `;
 const BusinessMenu = () => {
-    const { items: data, lang: language, isMobileMenu, resetMenuEvents, menuLevel: { scrollPosition }, } = React.useContext(NavContext['default']);
+    const { items: data, lang: language, isMobileMenu, resetMenuEvents } = React.useContext(NavContext['default']);
     const ref = React.useRef(null);
     if (!data.businessId || (!data.businessSelector && data.businessSelector.items.length > 0)) {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
     const currentBusinessId = data.businessId;
     const businessMenuItems = data.businessSelector.items;
-    const getTabIndex = () => {
-        if ((scrollPosition && scrollPosition > 0) || !isMobileMenu) {
-            return -1;
-        }
-        return undefined;
-    };
     if (!businessMenuItems.length) {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
     return (React__default['default'].createElement(BusinessMenuList, { isMobileMenu: isMobileMenu, ref: ref, role: "menubar", "aria-hidden": "false", "data-testid": "business-menu-ul" }, businessMenuItems.map((item, index) => {
-        return (React__default['default'].createElement(BusinessMenuItem, { className: "menu-item", key: item.businessId, "data-testid": `business-menu-selection-item-${index + 1}` },
-            React__default['default'].createElement(BusinessMenuLink, { className: "menu-link", href: item.urls[language], onClick: resetMenuEvents, tabIndex: getTabIndex(), isActive: item.businessId === currentBusinessId, isMobileMenu: isMobileMenu }, item.titles[language])));
+        return (React__default['default'].createElement(BusinessMenuItem, { className: "menu-item", key: item.businessId, "data-testid": `business-menu-selection-item-${index + 1}`, role: "none" },
+            React__default['default'].createElement(BusinessMenuLink, { className: "menu-link", href: item.urls[language], onClick: resetMenuEvents, isActive: item.businessId === currentBusinessId, isMobileMenu: isMobileMenu, role: "menuitem" }, item.titles[language])));
     })));
 };