@blateral/b.kit 2.2.6 → 2.3.0-beta.1.0

package/lib/esm/Callout-03ad4c6e.js

@@ -0,0 +1,99 @@
+import { a as __makeTemplateObject, d as __rest, _ as __assign } from './ClockFilled-cff5900e.js';
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+import { u as useLibTheme } from './LibThemeProvider-17012395.js';
+import { f as styleTextColor, m as mq, a as getFonts, w as withRange } from './styles-eca3acc8.js';
+
+var BaseStyles = styled.h1.withConfig({
+  displayName: "Callout__BaseStyles",
+  componentId: "sc-1rvhtfe-0"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin: 0;\n    padding: 0;\n    ", "\n\n    hyphens: auto;\n    /* -webkit-hyphens: auto; */\n    /* overflow-wrap: break-word; */\n\n    ", "\n\n    text-shadow: ", ";\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n        margin: 0;\n        padding: 0;\n        border: 0;\n        outline: 0;\n        font-weight: inherit;\n        font-style: inherit;\n        font-size: 100%;\n        font-family: inherit;\n        vertical-align: baseline;\n    }\n"], ["\n    margin: 0;\n    padding: 0;\n    ", "\n\n    hyphens: auto;\n    /* -webkit-hyphens: auto; */\n    /* overflow-wrap: break-word; */\n\n    ", "\n\n    text-shadow: ", ";\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n        margin: 0;\n        padding: 0;\n        border: 0;\n        outline: 0;\n        font-weight: inherit;\n        font-style: inherit;\n        font-size: 100%;\n        font-family: inherit;\n        vertical-align: baseline;\n    }\n"])), function (_a) {
+  var textColor = _a.textColor,
+      textGradient = _a.textGradient;
+  return styleTextColor(textColor, textGradient);
+}, function (props) {
+  return !props.hyphens && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            @media ", " {\n                hyphens: none;\n            }\n        "], ["\n            @media ", " {\n                hyphens: none;\n            }\n        "])), mq.large);
+}, function (_a) {
+  var hasShadow = _a.hasShadow;
+  return hasShadow && '1px 2px 8px rgba(0, 0, 0, 0.25)';
+});
+var View = styled(BaseStyles).withConfig({
+  displayName: "Callout__View",
+  componentId: "sc-1rvhtfe-1"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    font-weight: ", ";\n    font-style: ", ";\n    ", "\n    line-height: ", ";\n    letter-spacing: ", ";\n    text-transform: ", ";\n    text-decoration: ", ";\n"], ["\n    font-family: ", ";\n    font-weight: ", ";\n    font-style: ", ";\n    ", "\n    line-height: ", ";\n    letter-spacing: ", ";\n    text-transform: ", ";\n    text-decoration: ", ";\n"])), function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getFonts(theme).callout[size].family;
+}, function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getFonts(theme).callout[size].weight;
+}, function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getFonts(theme).callout[size].style;
+}, function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return withRange(getFonts(theme).callout[size].size, 'font-size');
+}, function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getFonts(theme).callout[size].lineHeight;
+}, function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getFonts(theme).callout[size].letterSpacing;
+}, function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getFonts(theme).callout[size].textTransform;
+}, function (_a) {
+  var theme = _a.theme,
+      size = _a.size;
+  return getFonts(theme).callout[size].textDecoration;
+});
+
+var Callout = function (_a) {
+  var _b;
+
+  var isInverted = _a.isInverted,
+      _c = _a.renderAs,
+      renderAs = _c === void 0 ? 'h2' : _c,
+      className = _a.className,
+      _d = _a.size,
+      size = _d === void 0 ? 'medium' : _d,
+      textColor = _a.textColor,
+      textGradient = _a.textGradient,
+      _e = _a.hyphens,
+      hyphens = _e === void 0 ? false : _e,
+      _f = _a.hasShadow,
+      hasShadow = _f === void 0 ? false : _f,
+      innerHTML = _a.innerHTML,
+      children = _a.children,
+      rest = __rest(_a, ["isInverted", "renderAs", "className", "size", "textColor", "textGradient", "hyphens", "hasShadow", "innerHTML", "children"]);
+
+  var fonts = useLibTheme().fonts;
+  var fontSettings = (_b = fonts === null || fonts === void 0 ? void 0 : fonts.callout) === null || _b === void 0 ? void 0 : _b[size];
+  return React.createElement(View, __assign({
+    as: renderAs,
+    size: size,
+    textColor: textColor || (isInverted ? fontSettings.colorInverted : fontSettings.color),
+    textGradient: textGradient || (!textColor ? isInverted ? fontSettings.colorGradientInverted : fontSettings.colorGradient : undefined),
+    hyphens: hyphens,
+    hasShadow: hasShadow,
+    dangerouslySetInnerHTML: innerHTML && !children ? {
+      __html: innerHTML
+    } : undefined,
+    className: className
+  }, rest), children);
+};
+
+Callout.defaultProps = {
+  renderAs: 'h1',
+  size: 'medium'
+};
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { Callout as C };
+//# sourceMappingURL=Callout-03ad4c6e.js.map

package/lib/esm/Callout-03ad4c6e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout-03ad4c6e.js","sources":["../../src/components/typography/Callout.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { useLibTheme } from 'utils/LibThemeProvider';\nimport {\n    FontOptionType,\n    getFonts as font,\n    mq,\n    styleTextColor,\n    withRange,\n} from 'utils/styles';\n\n// Styles\nconst BaseStyles = styled.h1<{\n    size: FontOptionType;\n    hyphens?: boolean;\n    hasShadow?: boolean;\n    textColor?: string;\n    textGradient?: string;\n}>`\n    margin: 0;\n    padding: 0;\n    ${({ textColor, textGradient }) => styleTextColor(textColor, textGradient)}\n\n    hyphens: auto;\n    /* -webkit-hyphens: auto; */\n    /* overflow-wrap: break-word; */\n\n    ${(props: { hyphens?: boolean }) =>\n        !props.hyphens &&\n        css`\n            @media ${mq.large} {\n                hyphens: none;\n            }\n        `}\n\n    text-shadow: ${({ hasShadow }) =>\n        hasShadow && '1px 2px 8px rgba(0, 0, 0, 0.25)'};\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n        margin: 0;\n        padding: 0;\n        border: 0;\n        outline: 0;\n        font-weight: inherit;\n        font-style: inherit;\n        font-size: 100%;\n        font-family: inherit;\n        vertical-align: baseline;\n    }\n`;\n\nconst View = styled(BaseStyles)`\n    font-family: ${({ theme, size }) => font(theme).callout[size].family};\n    font-weight: ${({ theme, size }) => font(theme).callout[size].weight};\n    font-style: ${({ theme, size }) => font(theme).callout[size].style};\n    ${({ theme, size }) =>\n        withRange(font(theme).callout[size].size, 'font-size')}\n    line-height: ${({ theme, size }) => font(theme).callout[size].lineHeight};\n    letter-spacing: ${({ theme, size }) =>\n        font(theme).callout[size].letterSpacing};\n    text-transform: ${({ theme, size }) =>\n        font(theme).callout[size].textTransform};\n    text-decoration: ${({ theme, size }) =>\n        font(theme).callout[size].textDecoration};\n`;\n\nexport type CalloutTag =\n    | 'h1'\n    | 'h2'\n    | 'h3'\n    | 'h4'\n    | 'h5'\n    | 'h6'\n    | 'span'\n    | 'div'\n    | 'blockquote';\n\nconst Callout: React.FC<{\n    isInverted?: boolean;\n    renderAs?: CalloutTag;\n    size?: FontOptionType;\n    textColor?: string;\n    textGradient?: string;\n    hyphens?: boolean;\n    hasShadow?: boolean;\n    innerHTML?: string;\n\n    className?: string;\n    children?: React.ReactNode;\n}> = ({\n    isInverted,\n    renderAs = 'h2',\n    className,\n    size = 'medium',\n    textColor,\n    textGradient,\n    hyphens = false,\n    hasShadow = false,\n    innerHTML,\n    children,\n    ...rest\n}) => {\n    const { fonts } = useLibTheme();\n    const fontSettings = fonts?.callout?.[size];\n\n    return (\n        <View\n            as={renderAs}\n            size={size}\n            textColor={\n                textColor ||\n                (isInverted ? fontSettings.colorInverted : fontSettings.color)\n            }\n            textGradient={\n                textGradient ||\n                (!textColor\n                    ? isInverted\n                        ? fontSettings.colorGradientInverted\n                        : fontSettings.colorGradient\n                    : undefined)\n            }\n            hyphens={hyphens}\n            hasShadow={hasShadow}\n            dangerouslySetInnerHTML={\n                innerHTML && !children ? { __html: innerHTML } : undefined\n            }\n            className={className}\n            {...rest}\n        >\n            {children}\n        </View>\n    );\n};\n\nCallout.defaultProps = {\n    renderAs: 'h1',\n    size: 'medium',\n};\n\nexport default Callout;\n"],"names":["BaseStyles","styled","h1","templateObject_2","__makeTemplateObject","_a","textColor","textGradient","styleTextColor","props","hyphens","css","templateObject_1","mq","large","hasShadow","View","templateObject_3","theme","size","font","callout","family","weight","style","withRange","lineHeight","letterSpacing","textTransform","textDecoration","Callout","isInverted","_c","renderAs","className","_d","_e","_f","innerHTML","children","rest","__rest","fonts","useLibTheme","fontSettings","_b","React","createElement","__assign","as","colorInverted","color","colorGradientInverted","colorGradient","undefined","dangerouslySetInnerHTML","__html","defaultProps"],"mappings":"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"}

package/lib/esm/Checkbox-76c2576b.js

@@ -0,0 +1,135 @@
+import { a as __makeTemplateObject, u as Check } from './ClockFilled-cff5900e.js';
+import { C as Copy } from './Copy-d2be4fb7.js';
+import React__default from 'react';
+import styled from 'styled-components';
+import { u as useLibTheme } from './LibThemeProvider-17012395.js';
+import { s as spacings, g as getColors } from './styles-eca3acc8.js';
+
+var View = styled.label.withConfig({
+  displayName: "Checkbox__View",
+  componentId: "sc-ve3szk-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge * 2);
+var Label = styled(Copy).withConfig({
+  displayName: "Checkbox__Label",
+  componentId: "sc-ve3szk-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-top: 2px;\n    text-align: left;\n    user-select: none;\n\n    & > * {\n        margin: 0;\n    }\n"], ["\n    padding-top: 2px;\n    text-align: left;\n    user-select: none;\n\n    & > * {\n        margin: 0;\n    }\n"])));
+var CheckboxContainer = styled.div.withConfig({
+  displayName: "Checkbox__CheckboxContainer",
+  componentId: "sc-ve3szk-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    color: ", ";\n    cursor: ", ";\n    pointer-events: ", ";\n\n    border: 2px solid transparent;\n\n    &:focus-within {\n        outline: 1px solid\n            ", ";\n        outline-offset: 0;\n    }\n"], ["\n    color: ", ";\n    cursor: ", ";\n    pointer-events: ", ";\n\n    border: 2px solid transparent;\n\n    &:focus-within {\n        outline: 1px solid\n            ", ";\n        outline-offset: 0;\n    }\n"])), function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).text.inverted;
+}, function (_a) {
+  var isDisabled = _a.isDisabled;
+  return isDisabled ? 'default' : 'pointer';
+}, function (_a) {
+  var isDisabled = _a.isDisabled;
+  return isDisabled ? 'none' : 'all';
+}, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted,
+      isDisabled = _a.isDisabled;
+  return isDisabled ? 'transparent' : isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
+});
+var Original = styled.input.withConfig({
+  displayName: "Checkbox__Original",
+  componentId: "sc-ve3szk-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    position: absolute;\n    left: -9999px;\n    opacity: 0;\n"], ["\n    position: absolute;\n    left: -9999px;\n    opacity: 0;\n"])));
+var Box = styled.span.withConfig({
+  displayName: "Checkbox__Box",
+  componentId: "sc-ve3szk-4"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    display: block;\n    position: relative;\n\n    border: 2px solid\n        ", ";\n\n    background-color: ", ";\n"], ["\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    display: block;\n    position: relative;\n\n    border: 2px solid\n        ", ";\n\n    background-color: ", ";\n"])), function (_a) {
+  var isSelected = _a.isSelected,
+      isDisabled = _a.isDisabled,
+      isInverted = _a.isInverted,
+      theme = _a.theme;
+
+  if (isDisabled) {
+    return isInverted ? getColors(theme).text.subtileInverted : getColors(theme).text.subtile;
+  }
+
+  if (isSelected) {
+    return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
+  }
+
+  return isInverted ? getColors(theme).elementBg.light : getColors(theme).elementBg.medium;
+}, function (_a) {
+  var isSelected = _a.isSelected,
+      isDisabled = _a.isDisabled,
+      isInverted = _a.isInverted,
+      theme = _a.theme;
+
+  if (isDisabled) {
+    return isInverted ? getColors(theme).text.subtileInverted : getColors(theme).text.subtile;
+  }
+
+  if (isSelected) {
+    return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
+  }
+
+  return 'transparent';
+});
+var StyledCheck = styled(Check).withConfig({
+  displayName: "Checkbox__StyledCheck",
+  componentId: "sc-ve3szk-5"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    width: 80%;\n    height: 80%;\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n"], ["\n    width: 80%;\n    height: 80%;\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n"])));
+
+var Checkbox = function (_a) {
+  var label = _a.label,
+      isDisabled = _a.isDisabled,
+      isSelected = _a.isSelected,
+      isInverted = _a.isInverted,
+      onChange = _a.onChange,
+      onBlur = _a.onBlur,
+      onClick = _a.onClick,
+      name = _a.name,
+      value = _a.value,
+      isRequired = _a.isRequired;
+  var colors = useLibTheme().colors;
+  return React__default.createElement(View, null, React__default.createElement(CheckboxContainer, {
+    isDisabled: isDisabled,
+    isInverted: isInverted,
+    onClick: onClick
+  }, React__default.createElement(Box, {
+    isSelected: isSelected,
+    isInverted: isInverted,
+    isDisabled: isDisabled
+  }, isSelected && React__default.createElement(StyledCheck, null)), React__default.createElement(Original, {
+    type: "checkbox",
+    name: "".concat(name, "[]"),
+    value: value,
+    checked: isSelected,
+    required: isRequired,
+    onChange: onChange,
+    onBlur: onBlur
+  })), label && React__default.createElement(Label, {
+    renderAs: "span",
+    size: "small",
+    type: "copy-b",
+    isInverted: isInverted,
+    textColor: isDisabled ? isInverted ? colors.text.subtileInverted : colors.text.subtile : undefined,
+    innerHTML: "".concat(label).concat(isRequired ? '<span> *</span>' : '')
+  }));
+};
+/**
+ * Function to compare both field prop states
+ * @param prev Previous props
+ * @param next Next props
+ * @returns
+ */
+
+
+var areEqual = function (prev, next) {
+  // only apply logic if memo functionality is enabled
+  if (!prev.enableMemo) return false;
+  if (prev.label !== next.label) return false;
+  if (prev.isSelected !== next.isSelected) return false;
+  if (prev.value !== next.value) return false;
+  return true;
+};
+
+var Checkbox$1 = React__default.memo(Checkbox, areEqual);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+
+export { Checkbox$1 as C };
+//# sourceMappingURL=Checkbox-76c2576b.js.map

package/lib/esm/Checkbox-76c2576b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox-76c2576b.js","sources":["../../src/components/fields/Checkbox.tsx"],"sourcesContent":["import Check from 'components/base/icons/Check';\nimport Copy from 'components/typography/Copy';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { useLibTheme } from 'utils/LibThemeProvider';\nimport { getColors as color, spacings } from 'utils/styles';\n\nconst View = styled.label`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ${spacings.nudge * 2}px;\n    }\n`;\n\nconst Label = styled(Copy)`\n    padding-top: 2px;\n    text-align: left;\n    user-select: none;\n\n    & > * {\n        margin: 0;\n    }\n`;\n\nconst CheckboxContainer = styled.div<{\n    isDisabled?: boolean;\n    isInverted?: boolean;\n}>`\n    color: ${({ theme }) => color(theme).text.inverted};\n    cursor: ${({ isDisabled }) => (isDisabled ? 'default' : 'pointer')};\n    pointer-events: ${({ isDisabled }) => (isDisabled ? 'none' : 'all')};\n\n    border: 2px solid transparent;\n\n    &:focus-within {\n        outline: 1px solid\n            ${({ theme, isInverted, isDisabled }) =>\n                isDisabled\n                    ? 'transparent'\n                    : isInverted\n                    ? color(theme).primary.inverted\n                    : color(theme).primary.default};\n        outline-offset: 0;\n    }\n`;\n\nconst Original = styled.input`\n    position: absolute;\n    left: -9999px;\n    opacity: 0;\n`;\n\nconst Box = styled.span<{\n    isSelected?: boolean;\n    isInverted?: boolean;\n    isDisabled?: boolean;\n}>`\n    width: 20px;\n    min-width: 20px;\n    height: 20px;\n    display: block;\n    position: relative;\n\n    border: 2px solid\n        ${({ isSelected, isDisabled, isInverted, theme }) => {\n            if (isDisabled) {\n                return isInverted\n                    ? color(theme).text.subtileInverted\n                    : color(theme).text.subtile;\n            }\n            if (isSelected) {\n                return isInverted\n                    ? color(theme).primary.inverted\n                    : color(theme).primary.default;\n            }\n            return isInverted\n                ? color(theme).elementBg.light\n                : color(theme).elementBg.medium;\n        }};\n\n    background-color: ${({ isSelected, isDisabled, isInverted, theme }) => {\n        if (isDisabled) {\n            return isInverted\n                ? color(theme).text.subtileInverted\n                : color(theme).text.subtile;\n        }\n        if (isSelected) {\n            return isInverted\n                ? color(theme).primary.inverted\n                : color(theme).primary.default;\n        }\n        return 'transparent';\n    }};\n`;\n\nconst StyledCheck = styled(Check)`\n    width: 80%;\n    height: 80%;\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n`;\n\nexport interface CheckboxProps {\n    enableMemo?: boolean;\n    label?: string;\n\n    onChange?: (e: React.SyntheticEvent<HTMLInputElement>) => void;\n    onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => void;\n    onClick?: () => void;\n\n    name?: string;\n    value?: string;\n\n    isDisabled?: boolean;\n    isSelected?: boolean;\n    isInverted?: boolean;\n    isRequired?: boolean;\n}\n\nconst Checkbox: React.FC<CheckboxProps> = ({\n    label,\n    isDisabled,\n    isSelected,\n    isInverted,\n    onChange,\n    onBlur,\n    onClick,\n    name,\n    value,\n    isRequired,\n}) => {\n    const { colors } = useLibTheme();\n\n    return (\n        <View>\n            <CheckboxContainer\n                isDisabled={isDisabled}\n                isInverted={isInverted}\n                onClick={onClick}\n            >\n                <Box\n                    isSelected={isSelected}\n                    isInverted={isInverted}\n                    isDisabled={isDisabled}\n                >\n                    {isSelected && <StyledCheck />}\n                </Box>\n                <Original\n                    type=\"checkbox\"\n                    name={`${name}[]`}\n                    value={value}\n                    checked={isSelected}\n                    required={isRequired}\n                    onChange={onChange}\n                    onBlur={onBlur}\n                />\n            </CheckboxContainer>\n            {label && (\n                <Label\n                    renderAs=\"span\"\n                    size=\"small\"\n                    type=\"copy-b\"\n                    isInverted={isInverted}\n                    textColor={\n                        isDisabled\n                            ? isInverted\n                                ? colors.text.subtileInverted\n                                : colors.text.subtile\n                            : undefined\n                    }\n                    innerHTML={`${label}${isRequired ? '<span> *</span>' : ''}`}\n                />\n            )}\n        </View>\n    );\n};\n\n/**\n * Function to compare both field prop states\n * @param prev Previous props\n * @param next Next props\n * @returns\n */\nconst areEqual = (prev: CheckboxProps, next: CheckboxProps) => {\n    // only apply logic if memo functionality is enabled\n    if (!prev.enableMemo) return false;\n\n    if (prev.label !== next.label) return false;\n    if (prev.isSelected !== next.isSelected) return false;\n    if (prev.value !== next.value) return false;\n\n    return true;\n};\n\nexport default React.memo(Checkbox, areEqual);\n"],"names":["View","styled","label","spacings","nudge","Label","Copy","templateObject_2","__makeTemplateObject","CheckboxContainer","div","_a","theme","color","text","inverted","isDisabled","isInverted","primary","default","Original","input","templateObject_4","Box","span","templateObject_5","isSelected","subtileInverted","subtile","elementBg","light","medium","StyledCheck","Check","templateObject_6","Checkbox","onChange","onBlur","onClick","name","value","isRequired","colors","useLibTheme","React","createElement","type","concat","checked","required","renderAs","size","textColor","undefined","innerHTML","areEqual","prev","next","enableMemo","memo"],"mappings":"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"}