@dnanpm/styleguide 4.0.9 → 4.0.10

package/build/es/components/InfoDialog/InfoDialog.js

@@ -5,56 +5,41 @@ import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 
 const positionMap = {
-    left: 'left: 1.875rem',
-    right: 'right: 1.875rem',
-    middle: 'left: 50%; transform: translateX(-50%)',
+  left: 'left: 1.875rem',
+  right: 'right: 1.875rem',
+  middle: 'left: 50%; transform: translateX(-50%)'
 };
 const colorMap = {
-    default: theme.color.default.pink,
-    sale: theme.color.accent.orange,
+  default: theme.color.default.pink,
+  sale: theme.color.accent.orange
 };
-const InfoDialogContainer = styled.div `
-    position: relative;
-    font-size: ${theme.fontSize.s};
-    line-height: ${theme.lineHeight.s};
-    font-weight: ${theme.fontWeight.medium};
-    background-color: ${theme.color.background.white.default};
-    color: ${theme.color.text.black};
-    border-radius: ${theme.radius.default};
-    border: 2px solid ${({ type }) => colorMap[type]};
-    padding: ${getMultipliedSize(theme.base.baseHeight, 1.5)};
-    margin-top: ${getMultipliedSize(theme.base.baseHeight, 2)};
-    width: 100%;
-
-    &:before,
-    &:after {
-        content: '';
-        display: block;
-        position: absolute;
-        top: -${getMultipliedSize(theme.base.baseWidth, 0.9)};
-        z-index: 2;
-        width: 0;
-        height: 0;
-        overflow: hidden;
-        border: 20px solid transparent;
-        border-top: 0;
-        width: auto;
-        border-bottom-color: ${theme.color.default.white};
-        ${({ $position }) => positionMap[$position]};
-        border-width: 0px ${getMultipliedSize(theme.base.baseWidth, 1.2)}
-            ${getMultipliedSize(theme.base.baseWidth, 1.2)};
-    }
-
-    &:before {
-        top: -${getMultipliedSize(theme.base.baseWidth, 1.2)};
-        z-index: 1;
-        border-bottom-color: ${({ type }) => colorMap[type]};
-    }
-`;
+const InfoDialogContainer = styled.div.withConfig({
+  displayName: "InfoDialog__InfoDialogContainer",
+  componentId: "sc-zadhzk-0"
+})(["position:relative;font-size:", ";line-height:", ";font-weight:", ";background-color:", ";color:", ";border-radius:", ";border:2px solid ", ";padding:", ";margin-top:", ";width:100%;&:before,&:after{content:'';display:block;position:absolute;top:-", ";z-index:2;width:0;height:0;overflow:hidden;border:20px solid transparent;border-top:0;width:auto;border-bottom-color:", ";", ";border-width:0px ", " ", ";}&:before{top:-", ";z-index:1;border-bottom-color:", ";}"], theme.fontSize.s, theme.lineHeight.s, theme.fontWeight.medium, theme.color.background.white.default, theme.color.text.black, theme.radius.default, ({
+  type
+}) => colorMap[type], getMultipliedSize(theme.base.baseHeight, 1.5), getMultipliedSize(theme.base.baseHeight, 2), getMultipliedSize(theme.base.baseWidth, 0.9), theme.color.default.white, ({
+  $position
+}) => positionMap[$position], getMultipliedSize(theme.base.baseWidth, 1.2), getMultipliedSize(theme.base.baseWidth, 1.2), getMultipliedSize(theme.base.baseWidth, 1.2), ({
+  type
+}) => colorMap[type]);
 /** @visibleName Info Dialog */
-const InfoDialog = (_a) => {
-    var { position = 'middle', type = 'default', 'data-testid': dataTestId } = _a, props = __rest(_a, ["position", "type", 'data-testid']);
-    return (React__default.createElement(InfoDialogContainer, { id: props.id, "data-testid": dataTestId, className: props.className, "$position": position, type: type, role: "region", "aria-label": props.ariaLabel }, props.children));
+const InfoDialog = _a => {
+  var {
+      position = 'middle',
+      type = 'default',
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ["position", "type", 'data-testid']);
+  return /*#__PURE__*/React__default.createElement(InfoDialogContainer, {
+    id: props.id,
+    "data-testid": dataTestId,
+    className: props.className,
+    "$position": position,
+    type: type,
+    role: "region",
+    "aria-label": props.ariaLabel
+  }, props.children);
 };
 
 export { InfoDialog as default };

package/build/es/components/Input/Input.js

@@ -9,178 +9,162 @@ import Icon from '../Icon/Icon.js';
 import LabelText from '../LabelText/LabelText.js';
 
 const iconsMap = {
-    success: Check,
-    error: Error,
+  success: Check,
+  error: Error
 };
-const FieldContainer = styled.div `
-    color: ${theme.color.text.black};
-    margin-bottom: ${getMultipliedSize(theme.base.baseWidth, 1)};
-`;
-const FieldWrapper = styled.div `
-    position: relative;
-    display: flex;
-    border-radius: ${theme.radius.s};
-    border: 1px solid ${theme.color.line.L01};
-    height: ${getMultipliedSize(theme.base.baseHeight, 4)};
-    padding: 0 ${getMultipliedSize(theme.base.baseWidth, 1)};
-    background-color: ${theme.color.background.white.default};
-    align-items: center;
-
-    ${({ $status }) => $status === 'error' &&
-    `
+const FieldContainer = styled.div.withConfig({
+  displayName: "Input__FieldContainer",
+  componentId: "sc-1fin9kc-0"
+})(["color:", ";margin-bottom:", ";"], theme.color.text.black, getMultipliedSize(theme.base.baseWidth, 1));
+const FieldWrapper = styled.div.withConfig({
+  displayName: "Input__FieldWrapper",
+  componentId: "sc-1fin9kc-1"
+})(["position:relative;display:flex;border-radius:", ";border:1px solid ", ";height:", ";padding:0 ", ";background-color:", ";align-items:center;", " ", " ", "  ", " &:focus-within{border:2px solid ", ";box-shadow:0px 0px 0px 2px ", ";border-radius:", ";}"], theme.radius.s, theme.color.line.L01, getMultipliedSize(theme.base.baseHeight, 4), getMultipliedSize(theme.base.baseWidth, 1), theme.color.background.white.default, ({
+  $status
+}) => $status === 'error' && `
         border-bottom: 4px solid ${theme.color.notification.error};
-    `}
-
-    ${({ $type }) => $type === 'range' &&
-    `
+    `, ({
+  $type
+}) => $type === 'range' && `
         border: 0;
         background: none;
-    `}
-
-    ${({ $type }) => $type === 'hidden' &&
-    `
+    `, ({
+  $type
+}) => $type === 'hidden' && `
         display: none;
-    `} 
-
-    ${({ $disabled, $readonly }) => ($disabled || $readonly) &&
-    `
+    `, ({
+  $disabled,
+  $readonly
+}) => ($disabled || $readonly) && `
         background-color: ${theme.color.background.sand.E01};
-    `}
-
-    &:focus-within {
-        border: 2px solid ${theme.color.focus.light};
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.dark};
-        border-radius: ${theme.radius.s};
-    }
-`;
-const IconWrapper = styled.div `
-    margin-left: ${getMultipliedSize(theme.base.baseWidth, 1)};
-    display: flex;
-    flex-wrap: nowrap;
-    border-radius: ${theme.radius.s};
-    align-items: center;
-
-    & span.dnasg-icon {
-        margin-left: ${getDividedSize(theme.base.baseWidth, 2)};
-
-        &:first-of-type {
-            margin-left: 0;
-        }
-    }
-`;
-const StyledInput = styled.input `
-    position: relative;
-    display: inline-block;
-    appearance: none;
-    vertical-align: middle;
-    font-family: ${theme.fontFamily.default};
-    font-size: ${theme.fontSize.default};
-    border-radius: ${theme.radius.s};
-    width: 100%;
-    border: 0 none;
-    outline: 0;
-    padding: 0;
-    background: transparent;
-
-    ${({ readOnly }) => readOnly &&
-    `
+    `, theme.color.focus.light, theme.color.focus.dark, theme.radius.s);
+const IconWrapper = styled.div.withConfig({
+  displayName: "Input__IconWrapper",
+  componentId: "sc-1fin9kc-2"
+})(["margin-left:", ";display:flex;flex-wrap:nowrap;border-radius:", ";align-items:center;& span.dnasg-icon{margin-left:", ";&:first-of-type{margin-left:0;}}"], getMultipliedSize(theme.base.baseWidth, 1), theme.radius.s, getDividedSize(theme.base.baseWidth, 2));
+const StyledInput = styled.input.withConfig({
+  displayName: "Input__StyledInput",
+  componentId: "sc-1fin9kc-3"
+})(["position:relative;display:inline-block;appearance:none;vertical-align:middle;font-family:", ";font-size:", ";border-radius:", ";width:100%;border:0 none;outline:0;padding:0;background:transparent;", " &[type='range']{appearance:auto;}&::-ms-clear,&::-ms-reveal{display:none;}&:invalid{box-shadow:none;}&::placeholder{color:", "", ";}"], theme.fontFamily.default, theme.fontSize.default, theme.radius.s, ({
+  readOnly
+}) => readOnly && `
         color: ${theme.color.default.black};
         cursor: default;
-    `}
-
-    &[type='range'] {
-        appearance: auto;
+    `, theme.color.text.black, theme.color.transparency.T40);
+const StyledButtonIcon = styled(ButtonIcon).withConfig({
+  displayName: "Input__StyledButtonIcon",
+  componentId: "sc-1fin9kc-4"
+})([".dnasg-icon svg{fill:", ";}"], theme.color.text.black);
+const Message = styled.div.withConfig({
+  displayName: "Input__Message",
+  componentId: "sc-1fin9kc-5"
+})(["font-size:", ";font-weight:", ";line-height:", ";color:", ";margin-top:", ";"], theme.fontSize.s, theme.fontWeight.book, theme.lineHeight.s, theme.color.text.gray, getMultipliedSize(theme.base.baseHeight, 0.5));
+const ErrorMessage = styled(Message).withConfig({
+  displayName: "Input__ErrorMessage",
+  componentId: "sc-1fin9kc-6"
+})(["font-weight:", ";color:", ";"], theme.fontWeight.medium, theme.color.notification.error);
+const Input = /*#__PURE__*/forwardRef((_a, ref) => {
+  var _b, _c, _d;
+  var {
+      type = 'text',
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ["type", 'data-testid']);
+  const [showPassword, setShowPassword] = useState(false);
+  const togglePasswordVisibility = () => {
+    if (props.showPasswordToggle && !props.disabled) {
+      setShowPassword(!showPassword);
     }
-
-    &::-ms-clear,
-    &::-ms-reveal {
-        display: none;
+  };
+  const handleOnBlur = e => {
+    if (props.onBlur) {
+      props.onBlur(e.target.value, e);
     }
-
-    &:invalid {
-        box-shadow: none;
+  };
+  const handleChange = e => {
+    if (props.onChange) {
+      props.onChange(e.target.value, e);
     }
-
-    &::placeholder {
-        color: ${theme.color.text.black}${theme.color.transparency.T40};
+  };
+  const onClick = e => {
+    e.preventDefault();
+    e.currentTarget.focus();
+  };
+  const getDescribedBy = () => {
+    if (props.status === 'error' && props.errorMessage) {
+      return `${props.id}-error`;
+    }
+    if (props.status === 'comment' && props.commentMessage) {
+      return `${props.id}-comment`;
     }
-`;
-const StyledButtonIcon = styled(ButtonIcon) `
-    .dnasg-icon svg {
-        fill: ${theme.color.text.black};
+    return undefined;
+  };
+  const getInputType = () => {
+    if (props.showPasswordToggle) {
+      return showPassword ? 'text' : 'password';
     }
-`;
-const Message = styled.div `
-    font-size: ${theme.fontSize.s};
-    font-weight: ${theme.fontWeight.book};
-    line-height: ${theme.lineHeight.s};
-    color: ${theme.color.text.gray};
-    margin-top: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
-`;
-const ErrorMessage = styled(Message) `
-    font-weight: ${theme.fontWeight.medium};
-    color: ${theme.color.notification.error};
-`;
-const Input = forwardRef((_a, ref) => {
-    var _b, _c, _d;
-    var { type = 'text', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
-    const [showPassword, setShowPassword] = useState(false);
-    const togglePasswordVisibility = () => {
-        if (props.showPasswordToggle && !props.disabled) {
-            setShowPassword(!showPassword);
-        }
-    };
-    const handleOnBlur = (e) => {
-        if (props.onBlur) {
-            props.onBlur(e.target.value, e);
-        }
-    };
-    const handleChange = (e) => {
-        if (props.onChange) {
-            props.onChange(e.target.value, e);
-        }
-    };
-    const onClick = (e) => {
-        e.preventDefault();
-        e.currentTarget.focus();
-    };
-    const getDescribedBy = () => {
-        if (props.status === 'error' && props.errorMessage) {
-            return `${props.id}-error`;
-        }
-        if (props.status === 'comment' && props.commentMessage) {
-            return `${props.id}-comment`;
-        }
-        return undefined;
-    };
-    const getInputType = () => {
-        if (props.showPasswordToggle) {
-            return showPassword ? 'text' : 'password';
-        }
-        return type;
-    };
-    const inputType = getInputType();
-    return (React__default.createElement(FieldContainer, { className: props.className, "data-testid": dataTestId && `${dataTestId}-container` },
-        props.label && (React__default.createElement(LabelText, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: props.status === 'error' ? props.status : undefined, isMandatory: props.required }, props.label)),
-        React__default.createElement(FieldWrapper, { "$status": props.status, "$type": inputType, "$disabled": props.disabled, "$readonly": props.readonly && !props.readonlyUnstyled },
-            React__default.createElement(StyledInput, { id: props.id, name: props.name, type: inputType, value: props.value, placeholder: props.placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, autoComplete: props.autocomplete, "aria-disabled": props.disabled, "aria-readonly": props.readonly || props.readonlyUnstyled || undefined, "aria-label": !props.label ? ((_b = props.ariaLabel) !== null && _b !== void 0 ? _b : props.id) : undefined, ref: ref, tabIndex: props.tabIndex, "aria-describedby": getDescribedBy(), "data-testid": dataTestId, readOnly: props.readonly || props.readonlyUnstyled }),
-            ((props.status && props.status !== 'comment') ||
-                props.showPasswordToggle ||
-                props.disabled ||
-                props.readonly ||
-                props.readonlyUnstyled ||
-                props.onClearableButtonClick) && (React__default.createElement(IconWrapper, null,
-                props.showPasswordToggle && (React__default.createElement(StyledButtonIcon, { icon: showPassword ? EyeOpen : EyeClosed, onClick: togglePasswordVisibility, ariaLabel: showPassword
-                        ? ((_c = props.hidePasswordLabel) !== null && _c !== void 0 ? _c : props.passwordToggleLabel)
-                        : ((_d = props.showPasswordLabel) !== null && _d !== void 0 ? _d : props.passwordToggleLabel) })),
-                (props.status === 'success' || props.status === 'error') && (React__default.createElement(Icon, { "aria-hidden": true, icon: iconsMap[props.status], color: theme.color.notification[props.status] })),
-                (props.disabled || (props.readonly && !props.readonlyUnstyled)) && (React__default.createElement(Icon, { "aria-hidden": true, icon: Lock, className: props.className && `${props.className}-lock-icon` })),
-                props.onClearableButtonClick &&
-                    Boolean(props.value) &&
-                    !props.disabled &&
-                    (!props.readonly || props.readonlyUnstyled) && (React__default.createElement(ButtonIcon, { icon: Close, onClick: props.onClearableButtonClick, ariaLabel: props.clearButtonLabel }))))),
-        props.status === 'error' && props.errorMessage && (React__default.createElement(ErrorMessage, { id: `${props.id}-error`, "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage)),
-        props.status === 'comment' && props.commentMessage && (React__default.createElement(Message, { id: `${props.id}-comment`, "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
+    return type;
+  };
+  const inputType = getInputType();
+  return /*#__PURE__*/React__default.createElement(FieldContainer, {
+    className: props.className,
+    "data-testid": dataTestId && `${dataTestId}-container`
+  }, props.label && (/*#__PURE__*/React__default.createElement(LabelText, {
+    htmlFor: props.id,
+    "data-testid": dataTestId && `${dataTestId}-label`,
+    status: props.status === 'error' ? props.status : undefined,
+    isMandatory: props.required
+  }, props.label)), /*#__PURE__*/React__default.createElement(FieldWrapper, {
+    "$status": props.status,
+    "$type": inputType,
+    "$disabled": props.disabled,
+    "$readonly": props.readonly && !props.readonlyUnstyled
+  }, /*#__PURE__*/React__default.createElement(StyledInput, {
+    id: props.id,
+    name: props.name,
+    type: inputType,
+    value: props.value,
+    placeholder: props.placeholder,
+    onChange: handleChange,
+    onBlur: handleOnBlur,
+    onFocus: props.onFocus,
+    onClick: onClick,
+    onKeyDown: props.onKeyDown,
+    onKeyPress: props.onKeyPress,
+    required: props.required,
+    disabled: props.disabled,
+    autoComplete: props.autocomplete,
+    "aria-disabled": props.disabled,
+    "aria-readonly": props.readonly || props.readonlyUnstyled || undefined,
+    "aria-label": !props.label ? (_b = props.ariaLabel) !== null && _b !== void 0 ? _b : props.id : undefined,
+    ref: ref,
+    tabIndex: props.tabIndex,
+    "aria-describedby": getDescribedBy(),
+    "data-testid": dataTestId,
+    readOnly: props.readonly || props.readonlyUnstyled
+  }), (props.status && props.status !== 'comment' || props.showPasswordToggle || props.disabled || props.readonly || props.readonlyUnstyled || props.onClearableButtonClick) && (/*#__PURE__*/React__default.createElement(IconWrapper, null, props.showPasswordToggle && (/*#__PURE__*/React__default.createElement(StyledButtonIcon, {
+    icon: showPassword ? EyeOpen : EyeClosed,
+    onClick: togglePasswordVisibility,
+    ariaLabel: showPassword ? (_c = props.hidePasswordLabel) !== null && _c !== void 0 ? _c : props.passwordToggleLabel : (_d = props.showPasswordLabel) !== null && _d !== void 0 ? _d : props.passwordToggleLabel
+  })), (props.status === 'success' || props.status === 'error') && (/*#__PURE__*/React__default.createElement(Icon, {
+    "aria-hidden": true,
+    icon: iconsMap[props.status],
+    color: theme.color.notification[props.status]
+  })), (props.disabled || props.readonly && !props.readonlyUnstyled) && (/*#__PURE__*/React__default.createElement(Icon, {
+    "aria-hidden": true,
+    icon: Lock,
+    className: props.className && `${props.className}-lock-icon`
+  })), props.onClearableButtonClick && Boolean(props.value) && !props.disabled && (!props.readonly || props.readonlyUnstyled) && (/*#__PURE__*/React__default.createElement(ButtonIcon, {
+    icon: Close,
+    onClick: props.onClearableButtonClick,
+    ariaLabel: props.clearButtonLabel
+  }))))), props.status === 'error' && props.errorMessage && (/*#__PURE__*/React__default.createElement(ErrorMessage, {
+    id: `${props.id}-error`,
+    "data-testid": dataTestId && `${dataTestId}-error`
+  }, props.errorMessage)), props.status === 'comment' && props.commentMessage && (/*#__PURE__*/React__default.createElement(Message, {
+    id: `${props.id}-comment`,
+    "data-testid": dataTestId && `${dataTestId}-comment`
+  }, props.commentMessage)));
 });
 
 export { Input as default };

package/build/es/components/Label/Label.js

@@ -5,29 +5,29 @@ import theme from '../../themes/theme.js';
 import { getDividedSize, getMultipliedSize } from '../../utils/styledUtils.js';
 
 const colorsMap = {
-    campaign: theme.color.background.pink.E01,
-    new: theme.color.background.lemon.default,
-    presale: theme.color.background.orange.default,
-    other: theme.color.background.sky.default,
+  campaign: theme.color.background.pink.E01,
+  new: theme.color.background.lemon.default,
+  presale: theme.color.background.orange.default,
+  other: theme.color.background.sky.default
 };
-const StyledLabel = styled.span `
-    display: inline-block;
-    color: ${theme.color.text.black};
-    background-color: ${({ type }) => colorsMap[type]};
-    font-size: ${theme.fontSize.s};
-    font-weight: ${theme.fontWeight.bold};
-    line-height: ${theme.lineHeight.s};
-    padding: ${getDividedSize(theme.base.baseWidth, 5)}
-        ${getMultipliedSize(theme.base.baseWidth, 2)};
-    text-align: center;
-    text-transform: uppercase;
-    border-radius: ${theme.radius.pill};
-    margin: 0;
-`;
-const Label = (_a) => {
-    var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
-    const HeadingTag = props.headingLevel || 'span';
-    return (React__default.createElement(StyledLabel, { as: HeadingTag, type: props.type, className: props.className, "data-testid": dataTestId }, props.children));
+const StyledLabel = styled.span.withConfig({
+  displayName: "Label__StyledLabel",
+  componentId: "sc-1sntznq-0"
+})(["display:inline-block;color:", ";background-color:", ";font-size:", ";font-weight:", ";line-height:", ";padding:", " ", ";text-align:center;text-transform:uppercase;border-radius:", ";margin:0;"], theme.color.text.black, ({
+  type
+}) => colorsMap[type], theme.fontSize.s, theme.fontWeight.bold, theme.lineHeight.s, getDividedSize(theme.base.baseWidth, 5), getMultipliedSize(theme.base.baseWidth, 2), theme.radius.pill);
+const Label = _a => {
+  var {
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ['data-testid']);
+  const HeadingTag = props.headingLevel || 'span';
+  return /*#__PURE__*/React__default.createElement(StyledLabel, {
+    as: HeadingTag,
+    type: props.type,
+    className: props.className,
+    "data-testid": dataTestId
+  }, props.children);
 };
 
 export { Label as default };

package/build/es/components/LabelText/LabelText.js

@@ -4,24 +4,31 @@ import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getDividedSize } from '../../utils/styledUtils.js';
 
-const Label = styled.label `
-    display: block;
-    color: ${({ $status }) => $status === 'error' ? theme.color.notification.error : theme.color.text.gray};
-    font-weight: ${theme.fontWeight.medium};
-    font-size: ${theme.fontSize.default};
-    line-height: ${theme.lineHeight.default};
-    margin-bottom: ${getDividedSize(theme.base.baseWidth, 2)};
-    ${({ htmlFor }) => htmlFor && `cursor: pointer`};
-`;
-const Mandatory = styled.span `
-    color: ${theme.color.text.pink};
-`;
+const Label = styled.label.withConfig({
+  displayName: "LabelText__Label",
+  componentId: "sc-1jltcfz-0"
+})(["display:block;color:", ";font-weight:", ";font-size:", ";line-height:", ";margin-bottom:", ";", ";"], ({
+  $status
+}) => $status === 'error' ? theme.color.notification.error : theme.color.text.gray, theme.fontWeight.medium, theme.fontSize.default, theme.lineHeight.default, getDividedSize(theme.base.baseWidth, 2), ({
+  htmlFor
+}) => htmlFor && `cursor: pointer`);
+const Mandatory = styled.span.withConfig({
+  displayName: "LabelText__Mandatory",
+  componentId: "sc-1jltcfz-1"
+})(["color:", ";"], theme.color.text.pink);
 /** @visibleName Label Text */
-const LabelText = (_a) => {
-    var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
-    return (React__default.createElement(Label, { id: props.id, htmlFor: props.htmlFor, className: props.className, "data-testid": dataTestId, "$status": props.status },
-        props.children,
-        props.isMandatory && React__default.createElement(Mandatory, null, "*")));
+const LabelText = _a => {
+  var {
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ['data-testid']);
+  return /*#__PURE__*/React__default.createElement(Label, {
+    id: props.id,
+    htmlFor: props.htmlFor,
+    className: props.className,
+    "data-testid": dataTestId,
+    "$status": props.status
+  }, props.children, props.isMandatory && /*#__PURE__*/React__default.createElement(Mandatory, null, "*"));
 };
 
 export { LabelText as default };

package/build/es/components/MainHeaderNavigation/ChildComponents/BusinessMenu.js

@@ -3,53 +3,38 @@ import { styled } from 'styled-components';
 import theme from '../../../themes/theme.js';
 import { getMultipliedSize, media } from '../../../utils/styledUtils.js';
 
-const BusinessMenuLink = styled.a `
-    background-color: ${p => p.$isActive ? theme.color.background.white.default : theme.color.background.plum.E02};
-    color: ${p => (p.$isActive ? theme.color.text.black : theme.color.text.white)};
-    font-family: ${theme.fontFamily.default};
-    font-weight: ${theme.fontWeight.medium};
-    font-size: ${theme.fontSize.xs};
-    line-height: ${theme.lineHeight.s};
-    border-radius: ${theme.radius.pill};
-    text-decoration: none;
-    display: block;
-    padding: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
-    ${media.md `
+const BusinessMenuLink = styled.a.withConfig({
+  displayName: "BusinessMenu__BusinessMenuLink",
+  componentId: "sc-g2o49g-0"
+})(["background-color:", ";color:", ";font-family:", ";font-weight:", ";font-size:", ";line-height:", ";border-radius:", ";text-decoration:none;display:block;padding:", ";", ";", ";&:hover,&:focus{text-decoration:none;color:", ";background-color:", ";outline:none;}&:focus-visible{outline:none;box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";}"], p => p.$isActive ? theme.color.background.white.default : theme.color.background.plum.E02, p => p.$isActive ? theme.color.text.black : theme.color.text.white, theme.fontFamily.default, theme.fontWeight.medium, theme.fontSize.xs, theme.lineHeight.s, theme.radius.pill, getMultipliedSize(theme.base.baseHeight, 0.5), media.md`
         padding: ${getMultipliedSize(theme.base.baseHeight, 0.5)} ${getMultipliedSize(theme.base.baseWidth, 1)};
-    `};
-    ${media.xs `
+    `, media.xs`
         font-size: ${theme.fontSize.s};
-    `};
-
-    &:hover,
-    &:focus {
-        text-decoration: none;
-        color: ${p => (p.$isActive ? theme.color.text.black : theme.color.text.white)};
-        background-color: ${p => p.$isActive
-    ? theme.color.background.white.default
-    : theme.color.background.plum.default};
-        outline: none;
-    }
-    &:focus-visible {
-        outline: none;
-        box-shadow:
-            0px 0px 0px 2px ${theme.color.focus.light},
-            0px 0px 0px 4px ${theme.color.focus.dark};
-    }
-`;
-const BusinessMenuList = styled.nav `
-    display: flex;
-    gap: ${getMultipliedSize(theme.base.baseWidth, 1)};
-    padding: ${getMultipliedSize(theme.base.baseHeight, 0.5)} ${getMultipliedSize(theme.base.baseWidth, 1)};
-    ${media.md `
+    `, p => p.$isActive ? theme.color.text.black : theme.color.text.white, p => p.$isActive ? theme.color.background.white.default : theme.color.background.plum.default, theme.color.focus.light, theme.color.focus.dark);
+const BusinessMenuList = styled.nav.withConfig({
+  displayName: "BusinessMenu__BusinessMenuList",
+  componentId: "sc-g2o49g-1"
+})(["display:flex;gap:", ";padding:", " ", ";", ";"], getMultipliedSize(theme.base.baseWidth, 1), getMultipliedSize(theme.base.baseHeight, 0.5), getMultipliedSize(theme.base.baseWidth, 1), media.md`
         padding: ${getMultipliedSize(theme.base.baseHeight, 1)} ${getMultipliedSize(theme.base.baseWidth, 1.5)};
-    `};
-`;
-const BusinessMenu = ({ ariaLabel, currentBusinessId, items, lang }) => {
-    if (!(items === null || items === void 0 ? void 0 : items.length)) {
-        return null;
-    }
-    return (React__default.createElement(BusinessMenuList, { "aria-label": ariaLabel, "data-testid": "business-menu" }, items.map(item => (React__default.createElement(BusinessMenuLink, { className: `menu-link ${item.businessId === currentBusinessId ? 'active-site' : ''}`, href: item.urls[lang], "$isActive": item.businessId === currentBusinessId, key: item.businessId }, item.titles[lang])))));
+    `);
+const BusinessMenu = ({
+  ariaLabel,
+  currentBusinessId,
+  items,
+  lang
+}) => {
+  if (!(items === null || items === void 0 ? void 0 : items.length)) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement(BusinessMenuList, {
+    "aria-label": ariaLabel,
+    "data-testid": "business-menu"
+  }, items.map(item => (/*#__PURE__*/React__default.createElement(BusinessMenuLink, {
+    className: `menu-link ${item.businessId === currentBusinessId ? 'active-site' : ''}`,
+    href: item.urls[lang],
+    "$isActive": item.businessId === currentBusinessId,
+    key: item.businessId
+  }, item.titles[lang]))));
 };
 
 export { BusinessMenu as default };