@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1.full

package/dist/InputFields/styling.d.ts

@@ -1,38 +1,27 @@
-/// <reference types="react" />
-import { States } from '../types';
-export declare const InputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $readOnly?: boolean | undefined;
-    $disabled?: boolean | undefined;
-    $margin?: string | undefined;
-}>> & string;
-export declare const readOnlyState: import("styled-components").RuleSet<object>;
-export declare const activeErrorMessageState: import("styled-components").RuleSet<object>;
-declare const InputFieldStyling: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
-    $activeErrorMessage?: boolean | undefined;
-    $active?: boolean | undefined;
-    $withoutBorder?: boolean | undefined;
-    $size?: string | undefined;
-    $suppressReadOnlyStyles?: boolean | undefined;
-    $extraRightPadding?: number | undefined;
-}>> & string;
-declare const ValidationStyling: import("styled-components").RuleSet<object>;
-export declare const Warning: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
-export declare const ValidationMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, {
-    type: States.Valid | States.Invalid | States.Default;
-}>> & string;
-export declare const NoteMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
-export declare const AutofilledMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
-export { ValidationStyling, InputFieldStyling };
-export declare const StyledIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SearchIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
+import { States } from '../types';
+export declare const InputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $readOnly?: boolean;
+    $disabled?: boolean;
+    $margin?: string;
+}>> & string;
+export declare const readOnlyState: import("styled-components").RuleSet<object>;
+export declare const activeErrorMessageState: import("styled-components").RuleSet<object>;
+declare const InputFieldStyling: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+    $activeErrorMessage?: boolean;
+    $active?: boolean;
+    $withoutBorder?: boolean;
+    $size?: string;
+    $suppressReadOnlyStyles?: boolean;
+    $extraRightPadding?: number;
+}>> & string;
+declare const ValidationStyling: import("styled-components").RuleSet<object>;
+export declare const Warning: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, never>> & string;
+export declare const ValidationMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, {
+    type: States.Valid | States.Invalid | States.Default;
+}>> & string;
+export declare const NoteMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, never>> & string;
+export declare const AutofilledMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, never>> & string;
+export { ValidationStyling, InputFieldStyling };
+export declare const StyledIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SearchIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, never>> & string;

package/dist/InputFields/styling.js

@@ -1,27 +1,214 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 import { TooltipTrigger } from '../Tooltips/TooltipStyles';
 import styled, { css } from 'styled-components';
 import { BREAKPOINTS, COLORS, focusStyles } from '../styles';
 import { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';
 import { States } from '../types';
-export const InputWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n  ", ";\n  ", "\n  position: relative;\n  \n  ", "\n\n"])), props => props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '', props => props.$margin ? "margin: ".concat(props.$margin, ";") : '', TooltipTrigger('hover'));
-export const readOnlyState = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: inset 0 0 0 1px ", " !important;\n  color: ", " !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n"])), props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('neutral_300', props.theme), props => COLORS.getColor('neutral_600', props.theme));
-export const activeErrorMessageState = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-shadow: inset 0 0 0 2px ", ";\n"])), props => COLORS.getColor('critical_400', props.theme));
-const InputFieldStyling = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  margin-bottom: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ", "\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 ", "px 0 16px !important;\n  text-overflow: ellipsis;\n\n  outline: none;\n  overflow: hidden;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ", " !important;\n\n  ", "\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ", " !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n"])), props => props.$withoutBorder ? "-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      " : "-webkit-box-shadow: inset 0px 0px 0px 1px ".concat(COLORS.getColor('neutral_400', props.theme), ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(COLORS.getColor('neutral_400', props.theme), ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(COLORS.getColor('neutral_400', props.theme), ";"), props => {
-  var _props$$extraRightPad;
-  return 16 + ((_props$$extraRightPad = props.$extraRightPadding) !== null && _props$$extraRightPad !== void 0 ? _props$$extraRightPad : 0);
-}, props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme)), BREAKPOINTS.MEDIUM, props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme)), props => COLORS.getColor('black', props.theme), props => props.$activeErrorMessage ? activeErrorMessageState : '', props => props.$suppressReadOnlyStyles ? '' : readOnlyState, props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('neutral_300', props.theme), props => COLORS.getColor('primary_800', props.theme), focusStyles, props => COLORS.getColor('critical_400', props.theme), props => COLORS.getColor('correct_500', props.theme), props => COLORS.getColor('primary_700', props.theme), props => COLORS.getColor('primary_800', props.theme));
-const ValidationStyling = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  &.error-msg {\n    ", "\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ", "\n    font-weight: 700;\n    line-height: 15px;\n  }\n"])), props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme)), ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468'));
-export const Warning = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 4px;\n  ", "\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ", " {\n    ", "\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ", "\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ", "\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n"])), ComponentXXSStyling(ComponentTextStyle.Regular, null), BREAKPOINTS.MEDIUM, ComponentXSStyling(ComponentTextStyle.Regular, null), ComponentXXSStyling(ComponentTextStyle.Regular, null), ComponentXSStyling(ComponentTextStyle.Regular, null));
-export const ErrorMessage = styled(Warning)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), props => COLORS.getColor('critical_500', props.theme));
+export const InputWrapper = styled.div`
+  outline: none;
+  ${props => props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : ''};
+  ${props => props.$margin ? `margin: ${props.$margin};` : ''}
+  position: relative;
+  
+  ${TooltipTrigger('hover')}
+
+`;
+export const readOnlyState = css`
+  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};
+  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_300', props.theme)} !important;
+  color: ${props => COLORS.getColor('neutral_600', props.theme)} !important;
+  pointer-events: none;
+  outline: none;
+  cursor: not-allowed;
+`;
+export const activeErrorMessageState = css`
+  box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_400', props.theme)};
+`;
+const InputFieldStyling = styled.input`
+  height: 48px;
+  width: 100%;
+  border-radius: 4px;
+  margin-bottom: 4px;
+
+  border: 0;
+  -webkit-appearance: none;
+  ${props => props.$withoutBorder ? `-webkit-box-shadow: none;
+      -moz-box-shadow: none;
+      box-shadow: none;
+      ` : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};
+      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};
+      box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};`}
+  background-color: #fff;
+  box-sizing: border-box;
+  padding: 0 ${props => 16 + (props.$extraRightPadding ?? 0)}px 0 16px !important;
+  text-overflow: ellipsis;
+
+  outline: none;
+  overflow: hidden;
+  position: relative;
+
+  font-size: 16px;
+
+  &::placeholder {
+    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}
+  }
+
+  ${BREAKPOINTS.MEDIUM} {
+    font-size: 18px;
+    line-height: 18px;
+    height: 56px;
+    padding: 0 16px !important;
+
+    &::placeholder {
+      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}
+    }
+  }
+
+  &.small {
+    font-size: 16px;
+    height: 48px;
+    &::placeholder {
+      font-size: 16px;
+    }
+  }
+  &.medium {
+    font-size: 18px;
+    height: 56px;
+    &::placeholder {
+      font-size: 18px;
+    }
+  }
+
+  color: ${props => COLORS.getColor('black', props.theme)} !important;
+
+  ${props => props.$activeErrorMessage ? activeErrorMessageState : ''}
+
+  &:read-only:not(:disabled) {
+    ${props => props.$suppressReadOnlyStyles ? '' : readOnlyState}
+  }
+
+  &:disabled {
+    border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};
+    pointer-events: none;
+    box-shadow: none !important;
+    outline: none;
+    cursor: not-allowed;
+    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;
+  }
+  &:focus:not(.focus-visible) {
+    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_800', props.theme)};
+  }
+
+  &.focus-visible {
+    ${focusStyles}
+  }
+
+  &.invalid {
+    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_400', props.theme)};
+  }
+  &.valid {
+    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('correct_500', props.theme)};
+  }
+
+  &:not(.placeholder) {
+    line-height: 40px;
+  }
+
+  &:hover {
+    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_700', props.theme)};
+  }
+
+  &.active {
+    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_800', props.theme)};
+  }
+
+  &.show-checkmark.valid {
+    background-image: none;
+  }
+
+  &.show-checkmark.pending {
+    background-image: none;
+  }
+`;
+const ValidationStyling = css`
+  &.error-msg {
+    ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+    text-align: center;
+    font-weight: 400;
+    box-sizing: border-box;
+  }
+
+  &.error-msg {
+    padding-top: 8px;
+    padding-bottom: 0;
+    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}
+    font-weight: 700;
+    line-height: 15px;
+  }
+`;
+export const Warning = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 4px;
+  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  ${BREAKPOINTS.MEDIUM} {
+    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  &.small {
+    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+  &.medium {
+    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  & * {
+    vertical-align: middle;
+    display: inline-block;
+  }
+
+  svg {
+    margin-right: 4px;
+  }
+`;
+export const ErrorMessage = styled(Warning)`
+  color: ${props => COLORS.getColor('critical_500', props.theme)};
+`;
 const getStateColor = (type, theme) => {
   if (type === States.Valid) return COLORS.getColor('correct_500', theme);else if (type === States.Default) return COLORS.getColor('neutral_500', theme);else return COLORS.getColor('critical_500', theme);
 };
-export const ValidationMessage = styled(Warning)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), props => getStateColor(props.type, props.theme));
-export const NoteMessage = styled(Warning)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), props => COLORS.getColor('neutral_500', props.theme));
-export const AutofilledMessage = styled(Warning)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), props => COLORS.getColor('neutral_600', props.theme));
+export const ValidationMessage = styled(Warning)`
+  color: ${props => getStateColor(props.type, props.theme)};
+`;
+export const NoteMessage = styled(Warning)`
+  color: ${props => COLORS.getColor('neutral_500', props.theme)};
+`;
+export const AutofilledMessage = styled(Warning)`
+  color: ${props => COLORS.getColor('neutral_600', props.theme)};
+`;
 export { ValidationStyling, InputFieldStyling };
-export const StyledIcon = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  border-radius: 50%;\n"])));
-export const SearchIconWrapper = styled(StyledIcon)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  position: absolute;\n  border-radius: 50%;\n"])));
+export const StyledIcon = styled.div`
+  border-radius: 50%;
+`;
+export const SearchIconWrapper = styled(StyledIcon)`
+  position: absolute;
+  border-radius: 50%;
+`;
 //# sourceMappingURL=styling.js.map

package/dist/InputFields/styling.js.map

@@ -1 +1 @@
-{"version":3,"file":"styling.js","names":["TooltipTrigger","styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentXSStyling","States","InputWrapper","div","_templateObject","_taggedTemplateLiteral","props","$readOnly","$disabled","$margin","concat","readOnlyState","_templateObject2","getColor","theme","activeErrorMessageState","_templateObject3","InputFieldStyling","input","_templateObject4","$withoutBorder","_props$$extraRightPad","$extraRightPadding","Italic","MEDIUM","$activeErrorMessage","$suppressReadOnlyStyles","ValidationStyling","_templateObject5","Regular","Warning","_templateObject6","ErrorMessage","_templateObject7","getStateColor","type","Valid","Default","ValidationMessage","_templateObject8","NoteMessage","_templateObject9","AutofilledMessage","_templateObject10","StyledIcon","_templateObject11","SearchIconWrapper","_templateObject12"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport styled, { css } from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\r\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\r\nimport {Size, States} from '../types';\r\n\r\nexport const InputWrapper = styled.div<{ $readOnly?: boolean; $disabled?: boolean; $margin?: string }>`\r\n  outline: none;\r\n  ${(props) => (props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '')};\r\n  ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n  position: relative;\r\n  \r\n  ${TooltipTrigger('hover')}\r\n\r\n`;\r\n\r\nexport const readOnlyState = css`\r\n  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)} !important;\r\n  pointer-events: none;\r\n  outline: none;\r\n  cursor: not-allowed;\r\n`;\r\nexport const activeErrorMessageState = css`\r\n  box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_400', props.theme)};\r\n`;\r\n\r\nconst InputFieldStyling = styled.input<{\r\n  $activeErrorMessage?: boolean;\r\n  $active?: boolean;\r\n  $withoutBorder?: boolean;\r\n  $size?: string;\r\n  $suppressReadOnlyStyles?: boolean;\r\n  $extraRightPadding?: number;\r\n}>`\r\n  height: 48px;\r\n  width: 100%;\r\n  border-radius: 4px;\r\n  margin-bottom: 4px;\r\n\r\n  border: 0;\r\n  -webkit-appearance: none;\r\n  ${(props) =>\r\n    props.$withoutBorder\r\n      ? `-webkit-box-shadow: none;\r\n      -moz-box-shadow: none;\r\n      box-shadow: none;\r\n      `\r\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};\r\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};\r\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};`}\r\n  background-color: #fff;\r\n  box-sizing: border-box;\r\n  padding: 0 ${props => 16 + (props.$extraRightPadding ?? 0)}px 0 16px !important;\r\n  text-overflow: ellipsis;\r\n\r\n  outline: none;\r\n  overflow: hidden;\r\n  position: relative;\r\n\r\n  font-size: 16px;\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    font-size: 18px;\r\n    line-height: 18px;\r\n    height: 56px;\r\n    padding: 0 16px !important;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    font-size: 16px;\r\n    height: 48px;\r\n    &::placeholder {\r\n      font-size: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    font-size: 18px;\r\n    height: 56px;\r\n    &::placeholder {\r\n      font-size: 18px;\r\n    }\r\n  }\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)} !important;\r\n\r\n  ${(props) => (props.$activeErrorMessage ? activeErrorMessageState : '')}\r\n\r\n  &:read-only:not(:disabled) {\r\n    ${(props) => (props.$suppressReadOnlyStyles ? '' : readOnlyState)}\r\n  }\r\n\r\n  &:disabled {\r\n    border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    pointer-events: none;\r\n    box-shadow: none !important;\r\n    outline: none;\r\n    cursor: not-allowed;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  }\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &.focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_400', props.theme)};\r\n  }\r\n  &.valid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('correct_500', props.theme)};\r\n  }\r\n\r\n  &:not(.placeholder) {\r\n    line-height: 40px;\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &.show-checkmark.valid {\r\n    background-image: none;\r\n  }\r\n\r\n  &.show-checkmark.pending {\r\n    background-image: none;\r\n  }\r\n`;\r\n\r\nconst ValidationStyling = css`\r\n  &.error-msg {\r\n    ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    text-align: center;\r\n    font-weight: 400;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  &.error-msg {\r\n    padding-top: 8px;\r\n    padding-bottom: 0;\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\r\n    font-weight: 700;\r\n    line-height: 15px;\r\n  }\r\n`;\r\n\r\nexport const Warning = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin-bottom: 4px;\r\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  & * {\r\n    vertical-align: middle;\r\n    display: inline-block;\r\n  }\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n  }\r\n`;\r\nexport const ErrorMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n`;\r\n\r\nconst getStateColor = (type: States, theme: any) => {\r\n  if(type === States.Valid) \r\n    return COLORS.getColor('correct_500', theme);\r\n  else if (type === States.Default)\r\n    return COLORS.getColor('neutral_500', theme);\r\n  else \r\n    return COLORS.getColor('critical_500', theme);\r\n};\r\n  \r\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\r\n  color: ${(props) => getStateColor(props.type, props.theme)};\r\n`;\r\n\r\nexport const NoteMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n`;\r\nexport const AutofilledMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n`;\r\n\r\nexport { ValidationStyling, InputFieldStyling };\r\n\r\nexport const StyledIcon = styled.div`\r\n  border-radius: 50%;\r\n`;\r\n\r\nexport const SearchIconWrapper = styled(StyledIcon)`\r\n  position: absolute;\r\n  border-radius: 50%;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"styling.js","names":["TooltipTrigger","styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentXSStyling","States","InputWrapper","div","props","$readOnly","$disabled","$margin","readOnlyState","getColor","theme","activeErrorMessageState","InputFieldStyling","input","$withoutBorder","$extraRightPadding","Italic","MEDIUM","$activeErrorMessage","$suppressReadOnlyStyles","ValidationStyling","Regular","Warning","ErrorMessage","getStateColor","type","Valid","Default","ValidationMessage","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport styled, { css } from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\r\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\r\nimport {Size, States} from '../types';\r\n\r\nexport const InputWrapper = styled.div<{ $readOnly?: boolean; $disabled?: boolean; $margin?: string }>`\r\n  outline: none;\r\n  ${(props) => (props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '')};\r\n  ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n  position: relative;\r\n  \r\n  ${TooltipTrigger('hover')}\r\n\r\n`;\r\n\r\nexport const readOnlyState = css`\r\n  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)} !important;\r\n  pointer-events: none;\r\n  outline: none;\r\n  cursor: not-allowed;\r\n`;\r\nexport const activeErrorMessageState = css`\r\n  box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_400', props.theme)};\r\n`;\r\n\r\nconst InputFieldStyling = styled.input<{\r\n  $activeErrorMessage?: boolean;\r\n  $active?: boolean;\r\n  $withoutBorder?: boolean;\r\n  $size?: string;\r\n  $suppressReadOnlyStyles?: boolean;\r\n  $extraRightPadding?: number;\r\n}>`\r\n  height: 48px;\r\n  width: 100%;\r\n  border-radius: 4px;\r\n  margin-bottom: 4px;\r\n\r\n  border: 0;\r\n  -webkit-appearance: none;\r\n  ${(props) =>\r\n    props.$withoutBorder\r\n      ? `-webkit-box-shadow: none;\r\n      -moz-box-shadow: none;\r\n      box-shadow: none;\r\n      `\r\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};\r\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};\r\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};`}\r\n  background-color: #fff;\r\n  box-sizing: border-box;\r\n  padding: 0 ${props => 16 + (props.$extraRightPadding ?? 0)}px 0 16px !important;\r\n  text-overflow: ellipsis;\r\n\r\n  outline: none;\r\n  overflow: hidden;\r\n  position: relative;\r\n\r\n  font-size: 16px;\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    font-size: 18px;\r\n    line-height: 18px;\r\n    height: 56px;\r\n    padding: 0 16px !important;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    font-size: 16px;\r\n    height: 48px;\r\n    &::placeholder {\r\n      font-size: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    font-size: 18px;\r\n    height: 56px;\r\n    &::placeholder {\r\n      font-size: 18px;\r\n    }\r\n  }\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)} !important;\r\n\r\n  ${(props) => (props.$activeErrorMessage ? activeErrorMessageState : '')}\r\n\r\n  &:read-only:not(:disabled) {\r\n    ${(props) => (props.$suppressReadOnlyStyles ? '' : readOnlyState)}\r\n  }\r\n\r\n  &:disabled {\r\n    border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    pointer-events: none;\r\n    box-shadow: none !important;\r\n    outline: none;\r\n    cursor: not-allowed;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  }\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &.focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_400', props.theme)};\r\n  }\r\n  &.valid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('correct_500', props.theme)};\r\n  }\r\n\r\n  &:not(.placeholder) {\r\n    line-height: 40px;\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &.show-checkmark.valid {\r\n    background-image: none;\r\n  }\r\n\r\n  &.show-checkmark.pending {\r\n    background-image: none;\r\n  }\r\n`;\r\n\r\nconst ValidationStyling = css`\r\n  &.error-msg {\r\n    ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    text-align: center;\r\n    font-weight: 400;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  &.error-msg {\r\n    padding-top: 8px;\r\n    padding-bottom: 0;\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\r\n    font-weight: 700;\r\n    line-height: 15px;\r\n  }\r\n`;\r\n\r\nexport const Warning = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin-bottom: 4px;\r\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  & * {\r\n    vertical-align: middle;\r\n    display: inline-block;\r\n  }\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n  }\r\n`;\r\nexport const ErrorMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n`;\r\n\r\nconst getStateColor = (type: States, theme: any) => {\r\n  if(type === States.Valid) \r\n    return COLORS.getColor('correct_500', theme);\r\n  else if (type === States.Default)\r\n    return COLORS.getColor('neutral_500', theme);\r\n  else \r\n    return COLORS.getColor('critical_500', theme);\r\n};\r\n  \r\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\r\n  color: ${(props) => getStateColor(props.type, props.theme)};\r\n`;\r\n\r\nexport const NoteMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n`;\r\nexport const AutofilledMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n`;\r\n\r\nexport { ValidationStyling, InputFieldStyling };\r\n\r\nexport const StyledIcon = styled.div`\r\n  border-radius: 50%;\r\n`;\r\n\r\nexport const SearchIconWrapper = styled(StyledIcon)`\r\n  position: absolute;\r\n  border-radius: 50%;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/types.d.ts

@@ -1,69 +1,69 @@
-import { Size, States, Testable } from '../types';
-import React from 'react';
-export type TextareaProps = Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> & {
-    /**
-     * Required. The ID of the textarea.
-     */
-    id: string;
-    /**
-     * Optional. The state of the textarea. Can be 'Invalid' or 'Valid'.
-     */
-    state?: States.Invalid | States.Valid;
-    /**
-     * Optional. A function to be called when the text in the textarea changes.
-     * It should take a string representing the new text.
-     */
-    onChange?: (text: string) => void;
-    /**
-     * Optional. The validation message to be displayed when the textarea is in an error state.
-     */
-    validationMessage?: string;
-    /**
-     * Required. The size of the textarea. Can be 'Small' or 'Medium'.
-     */
-    size: Size.Small | Size.Medium;
-    /**
-     * Optional. A boolean indicating whether the height of the textarea should automatically adjust to fit the text.
-     */
-    autoHeight?: boolean;
-    /**
-     * Optional. The margin of the textarea. Can be any valid CSS margin value.
-     */
-    margin?: string;
-    /**
-     * Optional. A note to be displayed below the textarea.
-     */
-    note?: TextFieldNote;
-};
-export type TextFieldNote = {
-    message: string;
-    icon: React.ReactNode;
-};
-export interface CheckboxProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'> {
-    /** Optional. Id of the checkbox. */
-    id?: string;
-    /** Required. Current state of the checkbox. */
-    selected: boolean;
-    /** Optional. Handler to be called when checkbox is selected/unselected */
-    select?: (selected: boolean) => void;
-    /** Optional. Label to be shown on the right side of the checkbox. */
-    label?: string;
-    /** Optional. If checkbox is selected and invalid flag is set, then checkbox will be shown in 'invalid' state. */
-    invalid?: boolean;
-    /** Optional. If set, then user can not interact with it. */
-    disabled?: boolean;
-    /** Optional. Margin property. */
-    margin?: string;
-    /** Optional. Size of the Checkbox. Defaults to 'medium'. */
-    size?: Size.Small | Size.Medium | Size.Large;
-    /** Optional. pointer-events: none style will be set to the checkbox if this flag is set. */
-    iconPointerEventsTransparent?: boolean;
-    /** Optional. If set then checkbox will be shown in 'semi-selected' state. */
-    semiSelected?: boolean;
-    /** Optional. If set, then user can not select/unselect the checkbox */
-    readOnly?: boolean;
-    /** Optional. Tab index attribute of the checkbox. */
-    tabIndexVal?: number;
-    /** Optional. Custom classname to be set to the checkbox. */
-    className?: string;
-}
+import { Size, States, Testable } from '../types';
+import React from 'react';
+export type TextareaProps = Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> & {
+    /**
+     * Required. The ID of the textarea.
+     */
+    id: string;
+    /**
+     * Optional. The state of the textarea. Can be 'Invalid' or 'Valid'.
+     */
+    state?: States.Invalid | States.Valid;
+    /**
+     * Optional. A function to be called when the text in the textarea changes.
+     * It should take a string representing the new text.
+     */
+    onChange?: (text: string) => void;
+    /**
+     * Optional. The validation message to be displayed when the textarea is in an error state.
+     */
+    validationMessage?: string;
+    /**
+     * Required. The size of the textarea. Can be 'Small' or 'Medium'.
+     */
+    size: Size.Small | Size.Medium;
+    /**
+     * Optional. A boolean indicating whether the height of the textarea should automatically adjust to fit the text.
+     */
+    autoHeight?: boolean;
+    /**
+     * Optional. The margin of the textarea. Can be any valid CSS margin value.
+     */
+    margin?: string;
+    /**
+     * Optional. A note to be displayed below the textarea.
+     */
+    note?: TextFieldNote;
+};
+export type TextFieldNote = {
+    message: string;
+    icon: React.ReactNode;
+};
+export interface CheckboxProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'> {
+    /** Optional. Id of the checkbox. */
+    id?: string;
+    /** Required. Current state of the checkbox. */
+    selected: boolean;
+    /** Optional. Handler to be called when checkbox is selected/unselected */
+    select?: (selected: boolean) => void;
+    /** Optional. Label to be shown on the right side of the checkbox. */
+    label?: string;
+    /** Optional. If checkbox is selected and invalid flag is set, then checkbox will be shown in 'invalid' state. */
+    invalid?: boolean;
+    /** Optional. If set, then user can not interact with it. */
+    disabled?: boolean;
+    /** Optional. Margin property. */
+    margin?: string;
+    /** Optional. Size of the Checkbox. Defaults to 'medium'. */
+    size?: Size.Small | Size.Medium | Size.Large;
+    /** Optional. pointer-events: none style will be set to the checkbox if this flag is set. */
+    iconPointerEventsTransparent?: boolean;
+    /** Optional. If set then checkbox will be shown in 'semi-selected' state. */
+    semiSelected?: boolean;
+    /** Optional. If set, then user can not select/unselect the checkbox */
+    readOnly?: boolean;
+    /** Optional. Tab index attribute of the checkbox. */
+    tabIndexVal?: number;
+    /** Optional. Custom classname to be set to the checkbox. */
+    className?: string;
+}

package/dist/Layouts/index.cjs

@@ -5,10 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PageWidth = exports.Columns = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styles = require("../styles");
-var _templateObject, _templateObject2;
 const GRID = {
   GAP: {
     SMALL: '16px',
@@ -21,6 +19,55 @@ const GRID = {
     LARGE: '32px 64px 128px'
   }
 };
-const PageWidth = exports.PageWidth = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  margin: ", ";\n  ", "\n\n  ", " {\n    margin: ", ";\n    ", "\n  }\n\n  ", " {\n    margin: ", ";\n    ", "\n  }\n\n  ", " {\n    max-width: ", ";\n\n    margin: 32px auto 128px;\n    ", "\n  }\n"])), GRID.GUTTER.SMALL, props => props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;', _styles.BREAKPOINTS.MEDIUM, GRID.GUTTER.MEDIUM, props => props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;', _styles.BREAKPOINTS.LARGE, GRID.GUTTER.LARGE, props => props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;', _styles.BREAKPOINTS.LARGE, props => props.$useMaxWidth ? props.$maxWidth ? 'min(100% - 128px,' + props.$maxWidth + 'px)' : 'calc(100% - 128px)' : 'calc(1600px - 128px)', props => props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;');
-const Columns = exports.Columns = _styledComponents.default.section(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: grid;\n  grid-gap: ", ";\n  word-break: break-word; /* Prevent long words from breaking the layout \u2013 consider making this rule global */\n\n  ", " {\n    grid-template-columns: ", ";\n    -ms-grid-columns: ", ";\n    grid-gap: ", ";\n  }\n\n  ", " {\n    grid-gap: ", ";\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ", ";\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ", ";\n  }\n"])), props => props.$gap || GRID.GAP.SMALL, _styles.BREAKPOINTS.MEDIUM, props => props.$columns, props => props.$columns, props => props.$gap || GRID.GAP.MEDIUM, _styles.BREAKPOINTS.LARGE, props => props.$gap || GRID.GAP.LARGE, GRID.GAP.MEDIUM, props => props.$printColumns || 'none');
+const PageWidth = exports.PageWidth = _styledComponents.default.div`
+  display: block;
+  margin: ${GRID.GUTTER.SMALL};
+  ${props => props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;'}
+
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    margin: ${GRID.GUTTER.MEDIUM};
+    ${props => props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;'}
+  }
+
+  ${_styles.BREAKPOINTS.LARGE} {
+    margin: ${GRID.GUTTER.LARGE};
+    ${props => props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;'}
+  }
+
+  ${_styles.BREAKPOINTS.LARGE} {
+    max-width: ${props => props.$useMaxWidth ? props.$maxWidth ? 'min(100% - 128px,' + props.$maxWidth + 'px)' : 'calc(100% - 128px)' : 'calc(1600px - 128px)'};
+
+    margin: 32px auto 128px;
+    ${props => props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;'}
+  }
+`;
+const Columns = exports.Columns = _styledComponents.default.section`
+  width: 100%;
+  display: grid;
+  grid-gap: ${props => props.$gap || GRID.GAP.SMALL};
+  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */
+
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    grid-template-columns: ${props => props.$columns};
+    -ms-grid-columns: ${props => props.$columns};
+    grid-gap: ${props => props.$gap || GRID.GAP.MEDIUM};
+  }
+
+  ${_styles.BREAKPOINTS.LARGE} {
+    grid-gap: ${props => props.$gap || GRID.GAP.LARGE};
+  }
+
+  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    display: -ms-grid;
+
+    > *:not(:first-child) {
+      margin-left: ${GRID.GAP.MEDIUM};
+    }
+  }
+
+  @media print {
+    grid-gap: 0;
+    grid-template-columns: ${props => props.$printColumns || 'none'};
+  }
+`;
 //# sourceMappingURL=index.cjs.map

package/dist/Layouts/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["_styledComponents","_interopRequireDefault","require","_styles","_templateObject","_templateObject2","GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","exports","styled","div","_taggedTemplateLiteral2","default","props","$unsetMargin","BREAKPOINTS","$useMaxWidth","$maxWidth","Columns","section","$gap","$columns","$printColumns"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\r\n\r\nimport {BREAKPOINTS} from '../styles';\r\n\r\nconst GRID = {\r\n  GAP: {\r\n    SMALL: '16px',\r\n    MEDIUM: '24px',\r\n    LARGE: '32px',\r\n  },\r\n  GUTTER: {\r\n    SMALL: '16px 16px 32px',\r\n    MEDIUM: '24px 32px 64px',\r\n    LARGE: '32px 64px 128px',\r\n  },\r\n};\r\n\r\nexport const PageWidth = styled.div<{ $useMaxWidth?: boolean; $maxWidth?: number; $unsetMargin?: boolean; }>`\r\n  display: block;\r\n  margin: ${GRID.GUTTER.SMALL};\r\n  ${props => props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: ${GRID.GUTTER.MEDIUM};\r\n    ${props => props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    margin: ${GRID.GUTTER.LARGE};\r\n    ${props => props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    max-width: ${(props) => (\r\n            props.$useMaxWidth\r\n                    ? (props.$maxWidth\r\n                            ? 'min(100% - 128px,' + props.$maxWidth + 'px)'\r\n                            : 'calc(100% - 128px)')\r\n                    : 'calc(1600px - 128px)')};\r\n\r\n    margin: 32px auto 128px;\r\n    ${props => props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n`;\r\n\r\nexport const Columns = styled.section<{ $gap?: string; $columns?: string; $printColumns?: string }>`\r\n  width: 100%;\r\n  display: grid;\r\n  grid-gap: ${(props) => props.$gap || GRID.GAP.SMALL};\r\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    grid-template-columns: ${(props) => props.$columns};\r\n    -ms-grid-columns: ${(props) => props.$columns};\r\n    grid-gap: ${(props) => props.$gap || GRID.GAP.MEDIUM};\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    grid-gap: ${(props) => props.$gap || GRID.GAP.LARGE};\r\n  }\r\n\r\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\r\n    display: -ms-grid;\r\n\r\n    > *:not(:first-child) {\r\n      margin-left: ${GRID.GAP.MEDIUM};\r\n    }\r\n  }\r\n\r\n  @media print {\r\n    grid-gap: 0;\r\n    grid-template-columns: ${(props) => props.$printColumns || 'none'};\r\n  }\r\n`;\r\n"],"mappings":";;;;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,OAAA,GAAAD,OAAA;AAAsC,IAAAE,eAAA,EAAAC,gBAAA;AAEtC,MAAMC,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT,CAAC;EACDC,MAAM,EAAE;IACNH,KAAK,EAAE,gBAAgB;IACvBC,MAAM,EAAE,gBAAgB;IACxBC,KAAK,EAAE;EACT;AACF,CAAC;AAEM,MAAME,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,yBAAM,CAACC,GAAG,CAAAX,eAAA,KAAAA,eAAA,OAAAY,uBAAA,CAAAC,OAAA,qOAEvBX,IAAI,CAACK,MAAM,CAACH,KAAK,EACzBU,KAAK,IAAIA,KAAK,CAACC,YAAY,IAAI,kCAAkC,EAEjEC,mBAAW,CAACX,MAAM,EACRH,IAAI,CAACK,MAAM,CAACF,MAAM,EAC1BS,KAAK,IAAIA,KAAK,CAACC,YAAY,IAAI,kCAAkC,EAGnEC,mBAAW,CAACV,KAAK,EACPJ,IAAI,CAACK,MAAM,CAACD,KAAK,EACzBQ,KAAK,IAAIA,KAAK,CAACC,YAAY,IAAI,kCAAkC,EAGnEC,mBAAW,CAACV,KAAK,EACHQ,KAAK,IACXA,KAAK,CAACG,YAAY,GACPH,KAAK,CAACI,SAAS,GACR,mBAAmB,GAAGJ,KAAK,CAACI,SAAS,GAAG,KAAK,GAC7C,oBAAoB,GAC5B,sBAAuB,EAGvCJ,KAAK,IAAIA,KAAK,CAACC,YAAY,IAAI,kCAAkC,CAEtE;AAEM,MAAMI,OAAO,GAAAV,OAAA,CAAAU,OAAA,GAAGT,yBAAM,CAACU,OAAO,CAAAnB,gBAAA,KAAAA,gBAAA,OAAAW,uBAAA,CAAAC,OAAA,wjBAGtBC,KAAK,IAAKA,KAAK,CAACO,IAAI,IAAInB,IAAI,CAACC,GAAG,CAACC,KAAK,EAGjDY,mBAAW,CAACX,MAAM,EACQS,KAAK,IAAKA,KAAK,CAACQ,QAAQ,EAC7BR,KAAK,IAAKA,KAAK,CAACQ,QAAQ,EAChCR,KAAK,IAAKA,KAAK,CAACO,IAAI,IAAInB,IAAI,CAACC,GAAG,CAACE,MAAM,EAGpDW,mBAAW,CAACV,KAAK,EACJQ,KAAK,IAAKA,KAAK,CAACO,IAAI,IAAInB,IAAI,CAACC,GAAG,CAACG,KAAK,EAOlCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMNS,KAAK,IAAKA,KAAK,CAACS,aAAa,IAAI,MAAM,CAEpE","ignoreList":[]}
+{"version":3,"file":"index.cjs","names":["_styledComponents","_interopRequireDefault","require","_styles","GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","exports","styled","div","props","$unsetMargin","BREAKPOINTS","$useMaxWidth","$maxWidth","Columns","section","$gap","$columns","$printColumns"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\r\n\r\nimport {BREAKPOINTS} from '../styles';\r\n\r\nconst GRID = {\r\n  GAP: {\r\n    SMALL: '16px',\r\n    MEDIUM: '24px',\r\n    LARGE: '32px',\r\n  },\r\n  GUTTER: {\r\n    SMALL: '16px 16px 32px',\r\n    MEDIUM: '24px 32px 64px',\r\n    LARGE: '32px 64px 128px',\r\n  },\r\n};\r\n\r\nexport const PageWidth = styled.div<{ $useMaxWidth?: boolean; $maxWidth?: number; $unsetMargin?: boolean; }>`\r\n  display: block;\r\n  margin: ${GRID.GUTTER.SMALL};\r\n  ${props => props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: ${GRID.GUTTER.MEDIUM};\r\n    ${props => props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    margin: ${GRID.GUTTER.LARGE};\r\n    ${props => props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    max-width: ${(props) => (\r\n            props.$useMaxWidth\r\n                    ? (props.$maxWidth\r\n                            ? 'min(100% - 128px,' + props.$maxWidth + 'px)'\r\n                            : 'calc(100% - 128px)')\r\n                    : 'calc(1600px - 128px)')};\r\n\r\n    margin: 32px auto 128px;\r\n    ${props => props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\r\n  }\r\n`;\r\n\r\nexport const Columns = styled.section<{ $gap?: string; $columns?: string; $printColumns?: string }>`\r\n  width: 100%;\r\n  display: grid;\r\n  grid-gap: ${(props) => props.$gap || GRID.GAP.SMALL};\r\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    grid-template-columns: ${(props) => props.$columns};\r\n    -ms-grid-columns: ${(props) => props.$columns};\r\n    grid-gap: ${(props) => props.$gap || GRID.GAP.MEDIUM};\r\n  }\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    grid-gap: ${(props) => props.$gap || GRID.GAP.LARGE};\r\n  }\r\n\r\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\r\n    display: -ms-grid;\r\n\r\n    > *:not(:first-child) {\r\n      margin-left: ${GRID.GAP.MEDIUM};\r\n    }\r\n  }\r\n\r\n  @media print {\r\n    grid-gap: 0;\r\n    grid-template-columns: ${(props) => props.$printColumns || 'none'};\r\n  }\r\n`;\r\n"],"mappings":";;;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,OAAA,GAAAD,OAAA;AAEA,MAAME,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT,CAAC;EACDC,MAAM,EAAE;IACNH,KAAK,EAAE,gBAAgB;IACvBC,MAAM,EAAE,gBAAgB;IACxBC,KAAK,EAAE;EACT;AACF,CAAC;AAEM,MAAME,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,yBAAM,CAACC,GAA4E;AAC5G;AACA,YAAYT,IAAI,CAACK,MAAM,CAACH,KAAK;AAC7B,IAAIQ,KAAK,IAAIA,KAAK,CAACC,YAAY,IAAI,kCAAkC;AACrE;AACA,IAAIC,mBAAW,CAACT,MAAM;AACtB,cAAcH,IAAI,CAACK,MAAM,CAACF,MAAM;AAChC,MAAMO,KAAK,IAAIA,KAAK,CAACC,YAAY,IAAI,kCAAkC;AACvE;AACA;AACA,IAAIC,mBAAW,CAACR,KAAK;AACrB,cAAcJ,IAAI,CAACK,MAAM,CAACD,KAAK;AAC/B,MAAMM,KAAK,IAAIA,KAAK,CAACC,YAAY,IAAI,kCAAkC;AACvE;AACA;AACA,IAAIC,mBAAW,CAACR,KAAK;AACrB,iBAAkBM,KAAK,IACXA,KAAK,CAACG,YAAY,GACPH,KAAK,CAACI,SAAS,GACR,mBAAmB,GAAGJ,KAAK,CAACI,SAAS,GAAG,KAAK,GAC7C,oBAAoB,GAC5B,sBAAuB;AAC7C;AACA;AACA,MAAMJ,KAAK,IAAIA,KAAK,CAACC,YAAY,IAAI,kCAAkC;AACvE;AACA,CAAC;AAEM,MAAMI,OAAO,GAAAR,OAAA,CAAAQ,OAAA,GAAGP,yBAAM,CAACQ,OAAqE;AACnG;AACA;AACA,cAAeN,KAAK,IAAKA,KAAK,CAACO,IAAI,IAAIjB,IAAI,CAACC,GAAG,CAACC,KAAK;AACrD;AACA;AACA,IAAIU,mBAAW,CAACT,MAAM;AACtB,6BAA8BO,KAAK,IAAKA,KAAK,CAACQ,QAAQ;AACtD,wBAAyBR,KAAK,IAAKA,KAAK,CAACQ,QAAQ;AACjD,gBAAiBR,KAAK,IAAKA,KAAK,CAACO,IAAI,IAAIjB,IAAI,CAACC,GAAG,CAACE,MAAM;AACxD;AACA;AACA,IAAIS,mBAAW,CAACR,KAAK;AACrB,gBAAiBM,KAAK,IAAKA,KAAK,CAACO,IAAI,IAAIjB,IAAI,CAACC,GAAG,CAACG,KAAK;AACvD;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqBJ,IAAI,CAACC,GAAG,CAACE,MAAM;AACpC;AACA;AACA;AACA;AACA;AACA,6BAA8BO,KAAK,IAAKA,KAAK,CAACS,aAAa,IAAI,MAAM;AACrE;AACA,CAAC","ignoreList":[]}