@laerdal/life-react-components 4.0.4 → 5.0.0-dev.2

package/dist/InputFields/styling.cjs

@@ -13,15 +13,15 @@ var _styles = require("../styles");
 var _typography = require("../styles/typography");
 var _types = require("../types");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var InputWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  ", ";\n  ", "\n  position: relative;\n  \n  ", "\n\n"])), function (props) {
-  return props.readOnly || props.disabled ? 'cursor: not-allowed;' : '';
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var InputWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  outline: none;\n  ", ";\n  ", "\n  position: relative;\n  \n  ", "\n\n"])), function (props) {
+  return props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '';
 }, function (props) {
-  return props.margin ? "margin: ".concat(props.margin, ";") : '';
+  return props.$margin ? "margin: ".concat(props.$margin, ";") : '';
 }, (0, _TooltipStyles.TooltipTrigger)('hover'));
 exports.InputWrapper = InputWrapper;
-var readOnlyState = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), function (props) {
+var readOnlyState = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\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"])), function (props) {
   return _styles.COLORS.getColor('neutral_100', props.theme);
 }, function (props) {
   return _styles.COLORS.getColor('neutral_300', props.theme);
@@ -29,15 +29,15 @@ var readOnlyState = (0, _styledComponents.css)(_templateObject2 || (_templateObj
   return _styles.COLORS.getColor('neutral_600', props.theme);
 });
 exports.readOnlyState = readOnlyState;
-var activeErrorMessageState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: inset 0 0 0 2px ", ";\n"])), function (props) {
+var activeErrorMessageState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  box-shadow: inset 0 0 0 2px ", ";\n"])), function (props) {
   return _styles.COLORS.getColor('critical_400', props.theme);
 });
 exports.activeErrorMessageState = activeErrorMessageState;
-var InputFieldStyling = _styledComponents.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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"])), function (props) {
-  return 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(_styles.COLORS.getColor('neutral_400', props.theme), ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.getColor('neutral_400', props.theme), ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.getColor('neutral_400', props.theme), ";");
+var InputFieldStyling = _styledComponents["default"].input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\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"])), function (props) {
+  return 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(_styles.COLORS.getColor('neutral_400', props.theme), ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.getColor('neutral_400', props.theme), ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.getColor('neutral_400', props.theme), ";");
 }, function (props) {
-  var _props$extraRightPadd;
-  return 16 + ((_props$extraRightPadd = props.extraRightPadding) !== null && _props$extraRightPadd !== void 0 ? _props$extraRightPadd : 0);
+  var _props$$extraRightPad;
+  return 16 + ((_props$$extraRightPad = props.$extraRightPadding) !== null && _props$$extraRightPad !== void 0 ? _props$$extraRightPad : 0);
 }, function (props) {
   return (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme));
 }, _styles.BREAKPOINTS.MEDIUM, function (props) {
@@ -45,9 +45,9 @@ var InputFieldStyling = _styledComponents.default.input(_templateObject4 || (_te
 }, function (props) {
   return _styles.COLORS.getColor('black', props.theme);
 }, function (props) {
-  return props.activeErrorMessage ? activeErrorMessageState : '';
+  return props.$activeErrorMessage ? activeErrorMessageState : '';
 }, function (props) {
-  return props.suppressReadOnlyStyles ? '' : readOnlyState;
+  return props.$suppressReadOnlyStyles ? '' : readOnlyState;
 }, function (props) {
   return _styles.COLORS.getColor('neutral_100', props.theme);
 }, function (props) {
@@ -64,33 +64,33 @@ var InputFieldStyling = _styledComponents.default.input(_templateObject4 || (_te
   return _styles.COLORS.getColor('primary_800', props.theme);
 });
 exports.InputFieldStyling = InputFieldStyling;
-var ValidationStyling = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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"])), function (props) {
+var ValidationStyling = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\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"])), function (props) {
   return (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme));
 }, (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, '#e76468'));
 exports.ValidationStyling = ValidationStyling;
-var Warning = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, null), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, null), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, null), (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, null));
+var Warning = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\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"])), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, null), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, null), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, null), (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, null));
 exports.Warning = Warning;
-var ErrorMessage = (0, _styledComponents.default)(Warning)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), function (props) {
+var ErrorMessage = (0, _styledComponents["default"])(Warning)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n"])), function (props) {
   return _styles.COLORS.getColor('critical_500', props.theme);
 });
 exports.ErrorMessage = ErrorMessage;
 var getStateColor = function getStateColor(type, theme) {
   if (type === _types.States.Valid) return _styles.COLORS.getColor('correct_500', theme);else if (type === _types.States.Default) return _styles.COLORS.getColor('neutral_500', theme);else return _styles.COLORS.getColor('critical_500', theme);
 };
-var ValidationMessage = (0, _styledComponents.default)(Warning)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), function (props) {
+var ValidationMessage = (0, _styledComponents["default"])(Warning)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n"])), function (props) {
   return getStateColor(props.type, props.theme);
 });
 exports.ValidationMessage = ValidationMessage;
-var NoteMessage = (0, _styledComponents.default)(Warning)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), function (props) {
+var NoteMessage = (0, _styledComponents["default"])(Warning)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n"])), function (props) {
   return _styles.COLORS.getColor('neutral_500', props.theme);
 });
 exports.NoteMessage = NoteMessage;
-var AutofilledMessage = (0, _styledComponents.default)(Warning)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), function (props) {
+var AutofilledMessage = (0, _styledComponents["default"])(Warning)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n"])), function (props) {
   return _styles.COLORS.getColor('neutral_600', props.theme);
 });
 exports.AutofilledMessage = AutofilledMessage;
-var StyledIcon = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 50%;\n"])));
+var StyledIcon = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  border-radius: 50%;\n"])));
 exports.StyledIcon = StyledIcon;
-var SearchIconWrapper = (0, _styledComponents.default)(StyledIcon)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  border-radius: 50%;\n"])));
+var SearchIconWrapper = (0, _styledComponents["default"])(StyledIcon)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  border-radius: 50%;\n"])));
 exports.SearchIconWrapper = SearchIconWrapper;
 //# sourceMappingURL=styling.cjs.map

package/dist/InputFields/styling.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styling.cjs","names":["InputWrapper","styled","div","props","readOnly","disabled","margin","TooltipTrigger","readOnlyState","css","COLORS","getColor","theme","activeErrorMessageState","InputFieldStyling","input","withoutBorder","extraRightPadding","ComponentSStyling","ComponentTextStyle","Italic","BREAKPOINTS","MEDIUM","ComponentMStyling","activeErrorMessage","suppressReadOnlyStyles","focusStyles","ValidationStyling","ComponentXXSStyling","Regular","Warning","ComponentXSStyling","ErrorMessage","getStateColor","type","States","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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"}
+{"version":3,"file":"styling.cjs","names":["_TooltipStyles","require","_styledComponents","_interopRequireWildcard","_styles","_typography","_types","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","InputWrapper","styled","div","_taggedTemplateLiteral2","props","$readOnly","$disabled","$margin","concat","TooltipTrigger","exports","readOnlyState","css","COLORS","getColor","theme","activeErrorMessageState","InputFieldStyling","input","$withoutBorder","_props$$extraRightPad","$extraRightPadding","ComponentSStyling","ComponentTextStyle","Italic","BREAKPOINTS","MEDIUM","ComponentMStyling","$activeErrorMessage","$suppressReadOnlyStyles","focusStyles","ValidationStyling","ComponentXXSStyling","Regular","Warning","ComponentXSStyling","ErrorMessage","getStateColor","type","States","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/styling.d.ts

@@ -1,27 +1,38 @@
+/// <reference types="react" />
 import { States } from '../types';
-export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {
-    readOnly?: boolean | undefined;
-    disabled?: boolean | undefined;
-    margin?: string | undefined;
-}, never>;
-export declare const readOnlyState: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-export declare const activeErrorMessageState: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-declare const InputFieldStyling: import("styled-components").StyledComponent<"input", any, {
-    activeErrorMessage?: boolean | undefined;
-    active?: boolean | undefined;
-    withoutBorder?: boolean | undefined;
-    size?: string | undefined;
-    suppressReadOnlyStyles?: boolean | undefined;
-    extraRightPadding?: number | undefined;
-}, never>;
-declare const ValidationStyling: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-export declare const Warning: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ErrorMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ValidationMessage: import("styled-components").StyledComponent<"div", any, {
+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;
-}, never>;
-export declare const NoteMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const AutofilledMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
+}>> & 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").StyledComponent<"div", any, {}, never>;
-export declare const SearchIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+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;

package/dist/InputFields/styling.js

@@ -6,9 +6,9 @@ import { BREAKPOINTS, COLORS, focusStyles } from '../styles';
 import { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';
 import { States } from '../types';
 export var InputWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n  ", ";\n  ", "\n  position: relative;\n  \n  ", "\n\n"])), function (props) {
-  return props.readOnly || props.disabled ? 'cursor: not-allowed;' : '';
+  return props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '';
 }, function (props) {
-  return props.margin ? "margin: ".concat(props.margin, ";") : '';
+  return props.$margin ? "margin: ".concat(props.$margin, ";") : '';
 }, TooltipTrigger('hover'));
 export var 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"])), function (props) {
   return COLORS.getColor('neutral_100', props.theme);
@@ -21,10 +21,10 @@ export var activeErrorMessageState = css(_templateObject3 || (_templateObject3 =
   return COLORS.getColor('critical_400', props.theme);
 });
 var 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"])), function (props) {
-  return 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), ";");
+  return 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), ";");
 }, function (props) {
-  var _props$extraRightPadd;
-  return 16 + ((_props$extraRightPadd = props.extraRightPadding) !== null && _props$extraRightPadd !== void 0 ? _props$extraRightPadd : 0);
+  var _props$$extraRightPad;
+  return 16 + ((_props$$extraRightPad = props.$extraRightPadding) !== null && _props$$extraRightPad !== void 0 ? _props$$extraRightPad : 0);
 }, function (props) {
   return ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme));
 }, BREAKPOINTS.MEDIUM, function (props) {
@@ -32,9 +32,9 @@ var InputFieldStyling = styled.input(_templateObject4 || (_templateObject4 = _ta
 }, function (props) {
   return COLORS.getColor('black', props.theme);
 }, function (props) {
-  return props.activeErrorMessage ? activeErrorMessageState : '';
+  return props.$activeErrorMessage ? activeErrorMessageState : '';
 }, function (props) {
-  return props.suppressReadOnlyStyles ? '' : readOnlyState;
+  return props.$suppressReadOnlyStyles ? '' : readOnlyState;
 }, function (props) {
   return COLORS.getColor('neutral_100', props.theme);
 }, function (props) {

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","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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"}
+{"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":[]}

package/dist/InputFields/types.cjs.map

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

package/dist/InputFields/types.js.map

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

package/dist/Layouts/index.cjs

@@ -21,30 +21,30 @@ var GRID = {
     LARGE: '32px 64px 128px'
   }
 };
-var 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, function (props) {
-  return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
+var 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, function (props) {
+  return props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;';
 }, _styles.BREAKPOINTS.MEDIUM, GRID.GUTTER.MEDIUM, function (props) {
-  return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
+  return props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;';
 }, _styles.BREAKPOINTS.LARGE, GRID.GUTTER.LARGE, function (props) {
-  return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
+  return props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;';
 }, _styles.BREAKPOINTS.LARGE, function (props) {
-  return props.useMaxWidth ? props.maxWidth ? 'min(100% - 128px,' + props.maxWidth + 'px)' : 'calc(100% - 128px)' : 'calc(1600px - 128px)';
+  return props.$useMaxWidth ? props.$maxWidth ? 'min(100% - 128px,' + props.$maxWidth + 'px)' : 'calc(100% - 128px)' : 'calc(1600px - 128px)';
 }, function (props) {
-  return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
+  return props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;';
 });
 exports.PageWidth = PageWidth;
-var 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"])), function (props) {
-  return props.gap || GRID.GAP.SMALL;
+var 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"])), function (props) {
+  return props.$gap || GRID.GAP.SMALL;
 }, _styles.BREAKPOINTS.MEDIUM, function (props) {
-  return props.columns;
+  return props.$columns;
 }, function (props) {
-  return props.columns;
+  return props.$columns;
 }, function (props) {
-  return props.gap || GRID.GAP.MEDIUM;
+  return props.$gap || GRID.GAP.MEDIUM;
 }, _styles.BREAKPOINTS.LARGE, function (props) {
-  return props.gap || GRID.GAP.LARGE;
+  return props.$gap || GRID.GAP.LARGE;
 }, GRID.GAP.MEDIUM, function (props) {
-  return props.printColumns || 'none';
+  return props.$printColumns || 'none';
 });
 exports.Columns = Columns;
 //# sourceMappingURL=index.cjs.map

package/dist/Layouts/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","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;AAEA;AAAsC;AAEtC,IAAMA,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,IAAME,SAAS,GAAGC,yBAAM,CAACC,GAAG,+SAEvBR,IAAI,CAACK,MAAM,CAACH,KAAK,EACzB,UAAAO,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAEhEC,mBAAW,CAACR,MAAM,EACRH,IAAI,CAACK,MAAM,CAACF,MAAM,EAC1B,UAAAM,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEC,mBAAW,CAACP,KAAK,EACPJ,IAAI,CAACK,MAAM,CAACD,KAAK,EACzB,UAAAK,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEC,mBAAW,CAACP,KAAK,EACJ,UAACK,KAAK;EAAA,OACXA,KAAK,CAACG,WAAW,GACNH,KAAK,CAACI,QAAQ,GACP,mBAAmB,GAAGJ,KAAK,CAACI,QAAQ,GAAG,KAAK,GAC5C,oBAAoB,GAC5B,sBAAsB;AAAA,CAAC,EAGvC,UAAAJ,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,EAErE;AAAC;AAEK,IAAMI,OAAO,GAAGP,yBAAM,CAACQ,OAAO,ooBAGvB,UAACN,KAAK;EAAA,OAAKA,KAAK,CAACO,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACC,KAAK;AAAA,GAGhDS,mBAAW,CAACR,MAAM,EACO,UAACM,KAAK;EAAA,OAAKA,KAAK,CAACQ,OAAO;AAAA,GAC7B,UAACR,KAAK;EAAA,OAAKA,KAAK,CAACQ,OAAO;AAAA,GAChC,UAACR,KAAK;EAAA,OAAKA,KAAK,CAACO,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACE,MAAM;AAAA,GAGnDQ,mBAAW,CAACP,KAAK,EACL,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACO,GAAG,IAAIhB,IAAI,CAACC,GAAG,CAACG,KAAK;AAAA,GAOjCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMP,UAACM,KAAK;EAAA,OAAKA,KAAK,CAACS,YAAY,IAAI,MAAM;AAAA,EAEnE;AAAC"}
+{"version":3,"file":"index.cjs","names":["_styledComponents","_interopRequireDefault","require","_styles","_templateObject","_templateObject2","GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","styled","div","_taggedTemplateLiteral2","props","$unsetMargin","BREAKPOINTS","$useMaxWidth","$maxWidth","exports","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,IAAMC,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,IAAME,SAAS,GAAGC,4BAAM,CAACC,GAAG,CAAAV,eAAA,KAAAA,eAAA,OAAAW,uBAAA,gPAEvBT,IAAI,CAACK,MAAM,CAACH,KAAK,EACzB,UAAAQ,KAAK;EAAA,OAAIA,KAAK,CAACC,YAAY,IAAI,kCAAkC;AAAA,GAEjEC,mBAAW,CAACT,MAAM,EACRH,IAAI,CAACK,MAAM,CAACF,MAAM,EAC1B,UAAAO,KAAK;EAAA,OAAIA,KAAK,CAACC,YAAY,IAAI,kCAAkC;AAAA,GAGnEC,mBAAW,CAACR,KAAK,EACPJ,IAAI,CAACK,MAAM,CAACD,KAAK,EACzB,UAAAM,KAAK;EAAA,OAAIA,KAAK,CAACC,YAAY,IAAI,kCAAkC;AAAA,GAGnEC,mBAAW,CAACR,KAAK,EACJ,UAACM,KAAK;EAAA,OACXA,KAAK,CAACG,YAAY,GACPH,KAAK,CAACI,SAAS,GACR,mBAAmB,GAAGJ,KAAK,CAACI,SAAS,GAAG,KAAK,GAC7C,oBAAoB,GAC5B,sBAAsB;AAAA,CAAC,EAGvC,UAAAJ,KAAK;EAAA,OAAIA,KAAK,CAACC,YAAY,IAAI,kCAAkC;AAAA,EAEtE;AAACI,OAAA,CAAAT,SAAA,GAAAA,SAAA;AAEK,IAAMU,OAAO,GAAGT,4BAAM,CAACU,OAAO,CAAAlB,gBAAA,KAAAA,gBAAA,OAAAU,uBAAA,mkBAGvB,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACQ,IAAI,IAAIlB,IAAI,CAACC,GAAG,CAACC,KAAK;AAAA,GAGjDU,mBAAW,CAACT,MAAM,EACO,UAACO,KAAK;EAAA,OAAKA,KAAK,CAACS,QAAQ;AAAA,GAC9B,UAACT,KAAK;EAAA,OAAKA,KAAK,CAACS,QAAQ;AAAA,GACjC,UAACT,KAAK;EAAA,OAAKA,KAAK,CAACQ,IAAI,IAAIlB,IAAI,CAACC,GAAG,CAACE,MAAM;AAAA,GAGpDS,mBAAW,CAACR,KAAK,EACL,UAACM,KAAK;EAAA,OAAKA,KAAK,CAACQ,IAAI,IAAIlB,IAAI,CAACC,GAAG,CAACG,KAAK;AAAA,GAOlCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMP,UAACO,KAAK;EAAA,OAAKA,KAAK,CAACU,aAAa,IAAI,MAAM;AAAA,EAEpE;AAACL,OAAA,CAAAC,OAAA,GAAAA,OAAA","ignoreList":[]}

package/dist/Layouts/index.d.ts

@@ -1,10 +1,11 @@
-export declare const PageWidth: import("styled-components").StyledComponent<"div", any, {
-    useMaxWidth?: boolean | undefined;
-    maxWidth?: number | undefined;
-    unsetMargin?: boolean | undefined;
-}, never>;
-export declare const Columns: import("styled-components").StyledComponent<"section", any, {
-    gap?: string | undefined;
-    columns?: string | undefined;
-    printColumns?: string | undefined;
-}, never>;
+/// <reference types="react" />
+export declare const PageWidth: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $useMaxWidth?: boolean | undefined;
+    $maxWidth?: number | undefined;
+    $unsetMargin?: boolean | undefined;
+}>> & string;
+export declare const Columns: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {
+    $gap?: string | undefined;
+    $columns?: string | undefined;
+    $printColumns?: string | undefined;
+}>> & string;

package/dist/Layouts/index.js

@@ -15,27 +15,27 @@ var GRID = {
   }
 };
 export var PageWidth = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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, function (props) {
-  return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
+  return props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;';
 }, BREAKPOINTS.MEDIUM, GRID.GUTTER.MEDIUM, function (props) {
-  return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
+  return props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;';
 }, BREAKPOINTS.LARGE, GRID.GUTTER.LARGE, function (props) {
-  return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
+  return props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;';
 }, BREAKPOINTS.LARGE, function (props) {
-  return props.useMaxWidth ? props.maxWidth ? 'min(100% - 128px,' + props.maxWidth + 'px)' : 'calc(100% - 128px)' : 'calc(1600px - 128px)';
+  return props.$useMaxWidth ? props.$maxWidth ? 'min(100% - 128px,' + props.$maxWidth + 'px)' : 'calc(100% - 128px)' : 'calc(1600px - 128px)';
 }, function (props) {
-  return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
+  return props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;';
 });
 export var Columns = styled.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), function (props) {
-  return props.gap || GRID.GAP.SMALL;
+  return props.$gap || GRID.GAP.SMALL;
 }, BREAKPOINTS.MEDIUM, function (props) {
-  return props.columns;
+  return props.$columns;
 }, function (props) {
-  return props.columns;
+  return props.$columns;
 }, function (props) {
-  return props.gap || GRID.GAP.MEDIUM;
+  return props.$gap || GRID.GAP.MEDIUM;
 }, BREAKPOINTS.LARGE, function (props) {
-  return props.gap || GRID.GAP.LARGE;
+  return props.$gap || GRID.GAP.LARGE;
 }, GRID.GAP.MEDIUM, function (props) {
-  return props.printColumns || 'none';
+  return props.$printColumns || 'none';
 });
 //# sourceMappingURL=index.js.map

package/dist/Layouts/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","BREAKPOINTS","GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","div","props","unsetMargin","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,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAAQC,WAAW,QAAO,WAAW;AAErC,IAAMC,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;AAED,OAAO,IAAME,SAAS,GAAGR,MAAM,CAACS,GAAG,iSAEvBP,IAAI,CAACK,MAAM,CAACH,KAAK,EACzB,UAAAM,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAEhEV,WAAW,CAACI,MAAM,EACRH,IAAI,CAACK,MAAM,CAACF,MAAM,EAC1B,UAAAK,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEV,WAAW,CAACK,KAAK,EACPJ,IAAI,CAACK,MAAM,CAACD,KAAK,EACzB,UAAAI,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEV,WAAW,CAACK,KAAK,EACJ,UAACI,KAAK;EAAA,OACXA,KAAK,CAACE,WAAW,GACNF,KAAK,CAACG,QAAQ,GACP,mBAAmB,GAAGH,KAAK,CAACG,QAAQ,GAAG,KAAK,GAC5C,oBAAoB,GAC5B,sBAAsB;AAAA,CAAC,EAGvC,UAAAH,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,EAErE;AAED,OAAO,IAAMG,OAAO,GAAGd,MAAM,CAACe,OAAO,snBAGvB,UAACL,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACC,KAAK;AAAA,GAGhDH,WAAW,CAACI,MAAM,EACO,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACO,OAAO;AAAA,GAC7B,UAACP,KAAK;EAAA,OAAKA,KAAK,CAACO,OAAO;AAAA,GAChC,UAACP,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACE,MAAM;AAAA,GAGnDJ,WAAW,CAACK,KAAK,EACL,UAACI,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACG,KAAK;AAAA,GAOjCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMP,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACQ,YAAY,IAAI,MAAM;AAAA,EAEnE"}
+{"version":3,"file":"index.js","names":["styled","BREAKPOINTS","GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","div","_templateObject","_taggedTemplateLiteral","props","$unsetMargin","$useMaxWidth","$maxWidth","Columns","section","_templateObject2","$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,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAAQC,WAAW,QAAO,WAAW;AAErC,IAAMC,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;AAED,OAAO,IAAME,SAAS,GAAGR,MAAM,CAACS,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,oOAEvBT,IAAI,CAACK,MAAM,CAACH,KAAK,EACzB,UAAAQ,KAAK;EAAA,OAAIA,KAAK,CAACC,YAAY,IAAI,kCAAkC;AAAA,GAEjEZ,WAAW,CAACI,MAAM,EACRH,IAAI,CAACK,MAAM,CAACF,MAAM,EAC1B,UAAAO,KAAK;EAAA,OAAIA,KAAK,CAACC,YAAY,IAAI,kCAAkC;AAAA,GAGnEZ,WAAW,CAACK,KAAK,EACPJ,IAAI,CAACK,MAAM,CAACD,KAAK,EACzB,UAAAM,KAAK;EAAA,OAAIA,KAAK,CAACC,YAAY,IAAI,kCAAkC;AAAA,GAGnEZ,WAAW,CAACK,KAAK,EACJ,UAACM,KAAK;EAAA,OACXA,KAAK,CAACE,YAAY,GACPF,KAAK,CAACG,SAAS,GACR,mBAAmB,GAAGH,KAAK,CAACG,SAAS,GAAG,KAAK,GAC7C,oBAAoB,GAC5B,sBAAsB;AAAA,CAAC,EAGvC,UAAAH,KAAK;EAAA,OAAIA,KAAK,CAACC,YAAY,IAAI,kCAAkC;AAAA,EAEtE;AAED,OAAO,IAAMG,OAAO,GAAGhB,MAAM,CAACiB,OAAO,CAAAC,gBAAA,KAAAA,gBAAA,GAAAP,sBAAA,ujBAGvB,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACO,IAAI,IAAIjB,IAAI,CAACC,GAAG,CAACC,KAAK;AAAA,GAGjDH,WAAW,CAACI,MAAM,EACO,UAACO,KAAK;EAAA,OAAKA,KAAK,CAACQ,QAAQ;AAAA,GAC9B,UAACR,KAAK;EAAA,OAAKA,KAAK,CAACQ,QAAQ;AAAA,GACjC,UAACR,KAAK;EAAA,OAAKA,KAAK,CAACO,IAAI,IAAIjB,IAAI,CAACC,GAAG,CAACE,MAAM;AAAA,GAGpDJ,WAAW,CAACK,KAAK,EACL,UAACM,KAAK;EAAA,OAAKA,KAAK,CAACO,IAAI,IAAIjB,IAAI,CAACC,GAAG,CAACG,KAAK;AAAA,GAOlCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMP,UAACO,KAAK;EAAA,OAAKA,KAAK,CAACS,aAAa,IAAI,MAAM;AAAA,EAEpE","ignoreList":[]}