@bbl-digital/snorre 4.2.74 → 4.2.76

package/lib/v2/core/Button/styles.js

@@ -1,88 +1,235 @@
-"use strict";
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+export const Btn = styled.button ``;
+const styles = {
+    default: (theme) => css `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    height: 38px;
+    padding: 0 1.5em;
+    border-radius: 100px;
+    background-color: ${theme.btnDefault};
+    border: none;
+    color: ${theme.btnDefaultFontColor};
+    text-align: center;
+    font-size: 16px;
+    font-weight: 600;
+    font-style: normal;
+    cursor: pointer;
+    text-decoration: none;
+    &:focus-visible {
+      text-decoration: underline;
+      background-color: ${theme.primary};
+      outline: none;
+    }
+    &:hover {
+      background-color: ${theme.primary};
+    }
+    &:active {
+      background-color: ${theme.btnDefault};
+      text-decoration: none;
+    }
+  `,
+    highlighted: css `
+    height: 46px;
+    font-size: 16px;
+    line-height: 22px;
+    border-radius: 23px;
+  `,
+    secondary: (theme) => css `
+    // theme.primary with opacity 0.1
+    background-color: ${theme.primary10opa};
+    border: none;
+    color: ${theme.btnDefault};
+    &:hover,
+    &:active {
+      color: ${theme.btnDefaultFontColor};
+    }
+    &:focus-visible {
+      color: ${theme.btnDefaultFontColor};
+    }
+  `,
+    ghost: (theme) => css `
+    background-color: transparent;
+    border: none;
+    color: ${theme.primary};
+    &:hover,
+    &:active {
+      background-color: ${theme.primary10opa};
+      color: ${theme.btnDefault};
+    }
+    &:focus-visible {
+      background-color: ${theme.primary};
+      color: ${theme.btnDefaultFontColor};
+    }
+  `,
+    icon: (theme) => css `
+    display: inline-flex;
+    justify-content: space-between;
+    padding: 12px 16px;
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.styles = exports.default = exports.Btn = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = require("@emotion/react");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const Btn = exports.Btn = /*#__PURE__*/(0, _base.default)("button", process.env.NODE_ENV === "production" ? {
-  target: "ezrww4d0"
-} : {
-  target: "ezrww4d0",
-  label: "Btn"
-})();
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "1g8p5l7",
-  styles: "background-color:transparent;color:black"
-} : {
-  name: "xfcu8k-successOutline",
-  styles: "background-color:transparent;color:black;label:successOutline;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "takjl9",
-  styles: "display:inline-flex;justify-content:space-between;padding:12px 16px;&:hover,&:focus,&:active{&>svg{fill:currentColor!important;}}&>svg{height:1em!important;width:fit-content!important;fill:currentColor!important;>polygon{fill:currentColor!important;}}"
-} : {
-  name: "1q0slkd-icon",
-  styles: "display:inline-flex;justify-content:space-between;padding:12px 16px;&:hover,&:focus,&:active{&>svg{fill:currentColor!important;}}&>svg{height:1em!important;width:fit-content!important;fill:currentColor!important;>polygon{fill:currentColor!important;}};label:icon;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-const styles = exports.styles = {
-  default: theme => /*#__PURE__*/(0, _react.css)("display:flex;align-items:center;justify-content:center;gap:4px;height:38px;padding:0 1.5em;border-radius:100px;background-color:", theme.btnDefault, ";border:none;color:", theme.btnDefaultFontColor, ";text-align:center;font-size:16px;font-weight:600;font-style:normal;cursor:pointer;text-decoration:none;&:focus-visible{text-decoration:underline;background-color:", theme.primary, ";outline:none;}&:hover{background-color:", theme.primary, ";}&:active{background-color:", theme.btnDefault, ";text-decoration:none;}" + (process.env.NODE_ENV === "production" ? "" : ";label:default;")),
-  highlighted: process.env.NODE_ENV === "production" ? {
-    name: "1qllkub",
-    styles: "height:46px;font-size:16px;line-height:22px;border-radius:23px"
-  } : {
-    name: "lx2bay-highlighted",
-    styles: "height:46px;font-size:16px;line-height:22px;border-radius:23px;label:highlighted;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  },
-  secondary: theme => /*#__PURE__*/(0, _react.css)("background-color:", theme.primary10opa, ";border:none;color:", theme.btnDefault, ";&:hover,&:active{color:", theme.btnDefaultFontColor, ";}&:focus-visible{color:", theme.btnDefaultFontColor, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:secondary;")),
-  ghost: theme => /*#__PURE__*/(0, _react.css)("background-color:transparent;border:none;color:", theme.primary, ";&:hover,&:active{background-color:", theme.primary10opa, ";color:", theme.btnDefault, ";}&:focus-visible{background-color:", theme.primary, ";color:", theme.btnDefaultFontColor, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:ghost;")),
-  icon: theme => _ref2,
-  outline: theme => /*#__PURE__*/(0, _react.css)("border:2px solid ", theme.btnDefault, ";color:black;background-color:white;&>svg>polygon{fill:black!important;}&:hover,&:focus{color:", theme.btnHoverTextColor, ";border:2px solid ", theme.primary, ";&>svg>polygon,&>svg>path{fill:", theme.btnHoverTextColor, "!important;}}&:focus{color:", theme.btnHoverTextColor, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:outline;")),
-  success: theme => /*#__PURE__*/(0, _react.css)("background-color:", theme.btnSuccess, ";border-color:", theme.btnSuccess, ";color:black;&:focus{text-decoration:underline;background-color:", theme.btnSuccessLighter, ";border-color:", theme.btnSuccessLighter, ";color:black;}&:hover{background-color:", theme.btnSuccessDarker, ";border-color:", theme.btnSuccessDarker, ";color:black;}" + (process.env.NODE_ENV === "production" ? "" : ";label:success;")),
-  danger: theme => /*#__PURE__*/(0, _react.css)("background-color:", theme.btnDanger, ";border-color:", theme.btnDanger, ";color:white;&:focus{text-decoration:underline;background-color:", theme.btnDangerLighter, ";border-color:", theme.btnDangerLighter, ";}&:hover{background-color:", theme.btnDangerDarker, ";border-color:", theme.btnDangerDarker, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:danger;")),
-  disabled: theme => /*#__PURE__*/(0, _react.css)("background-color:", theme.btnDisabled, ";border-color:", theme.btnDisabled, ";color:", theme.neutral500, ";&:hover{background-color:", theme.btnDisabled, ";border-color:", theme.btnDisabled, ";color:", theme.neutral500, ";cursor:default;}" + (process.env.NODE_ENV === "production" ? "" : ";label:disabled;")),
-  border: color => /*#__PURE__*/(0, _react.css)("border-color:", color, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:border;")),
-  loading: theme => /*#__PURE__*/(0, _react.css)("opacity:0.8;cursor:default;&:hover{&>span>div>div{background:", theme.btnDefaultFontColor, ";}}" + (process.env.NODE_ENV === "production" ? "" : ";label:loading;")),
-  nostyle: process.env.NODE_ENV === "production" ? {
-    name: "423zxq",
-    styles: "padding:0;outline:none;border:none;background-color:transparent;height:auto;color:black;&:hover,&:focus,&:active{background-color:transparent;border:none;color:black;}&>svg>polygon{fill:black;}"
-  } : {
-    name: "4mfvfl-nostyle",
-    styles: "padding:0;outline:none;border:none;background-color:transparent;height:auto;color:black;&:hover,&:focus,&:active{background-color:transparent;border:none;color:black;}&>svg>polygon{fill:black;};label:nostyle;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  },
-  back: theme => /*#__PURE__*/(0, _react.css)("background-color:transparent;color:black;border:2px solid ", theme.btnBackBorder, ";height:32px;padding:0 1.5em;&>span{padding:0 0.5em;}&:focus{border-color:", theme.secondary, ";background-color:transparent;color:black;text-decoration:none;}&:hover,&:active{background-color:", theme.secondary, ";border:2px solid ", theme.btnBackBorder, ";color:", theme.btnHoverTextColor, ";&>svg{fill:", theme.btnHoverTextColor, "!important;}}" + (process.env.NODE_ENV === "production" ? "" : ";label:back;")),
-  small: process.env.NODE_ENV === "production" ? {
-    name: "1larmsk",
-    styles: "padding:8px 16px;font-size:14px"
-  } : {
-    name: "xx6wlz-small",
-    styles: "padding:8px 16px;font-size:14px;label:small;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  },
-  dangerOutline: theme => /*#__PURE__*/(0, _react.css)("background-color:transparent;color:", theme.btnDanger, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:dangerOutline;")),
-  successOutline: theme => _ref,
-  transparentBg: process.env.NODE_ENV === "production" ? {
-    name: "1peqg37",
-    styles: "background-color:transparent"
-  } : {
-    name: "x2hhac-transparentBg",
-    styles: "background-color:transparent;label:transparentBg;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  },
-  focusable: process.env.NODE_ENV === "production" ? {
-    name: "1qjpqms",
-    styles: "&:focus-visible{outline:1px dotted #212121;outline:5px auto -webkit-focus-ring-color;}"
-  } : {
-    name: "jatm0f-focusable",
-    styles: "&:focus-visible{outline:1px dotted #212121;outline:5px auto -webkit-focus-ring-color;};label:focusable;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  }
+    &:hover,
+    &:focus,
+    &:active {
+      & > svg {
+        fill: currentColor !important;
+      }
+    }
+
+    & > svg {
+      height: 1em !important;
+      width: fit-content !important;
+      fill: currentColor !important;
+      > polygon {
+        fill: currentColor !important;
+      }
+    }
+  `,
+    outline: (theme) => css `
+    border: 2px solid ${theme.btnDefault};
+    color: black;
+    background-color: white;
+
+    & > svg > polygon {
+      fill: black !important; // TODO: Find fix
+    }
+
+    &:hover,
+    &:focus {
+      color: ${theme.btnHoverTextColor};
+      border: 2px solid ${theme.primary};
+      & > svg > polygon,
+      & > svg > path {
+        fill: ${theme.btnHoverTextColor} !important; // TODO: Find fix
+      }
+    }
+
+    &:focus {
+      color: ${theme.btnHoverTextColor};
+    }
+  `,
+    success: (theme) => css `
+    background-color: ${theme.btnSuccess};
+    border-color: ${theme.btnSuccess};
+    color: black;
+    &:focus {
+      text-decoration: underline;
+      background-color: ${theme.btnSuccessLighter};
+      border-color: ${theme.btnSuccessLighter};
+      color: black;
+    }
+    &:hover {
+      background-color: ${theme.btnSuccessDarker};
+      border-color: ${theme.btnSuccessDarker};
+      color: black;
+    }
+  `,
+    danger: (theme) => css `
+    background-color: ${theme.btnDanger};
+    border-color: ${theme.btnDanger};
+    color: white;
+    &:focus {
+      text-decoration: underline;
+      background-color: ${theme.btnDangerLighter};
+      border-color: ${theme.btnDangerLighter};
+    }
+    &:hover {
+      background-color: ${theme.btnDangerDarker};
+      border-color: ${theme.btnDangerDarker};
+    }
+  `,
+    disabled: (theme) => css `
+    background-color: ${theme.btnDisabled};
+    border-color: ${theme.btnDisabled};
+    color: ${theme.neutral500};
+    &:hover {
+      background-color: ${theme.btnDisabled};
+      border-color: ${theme.btnDisabled};
+      color: ${theme.neutral500};
+      cursor: default;
+    }
+  `,
+    border: (color) => css `
+    border-color: ${color};
+  `,
+    loading: (theme) => css `
+    opacity: 0.8;
+    cursor: default;
+
+    &:hover {
+      & > span > div > div {
+        background: ${theme.btnDefaultFontColor};
+      }
+    }
+  `,
+    nostyle: css `
+    padding: 0;
+    outline: none;
+    border: none;
+    background-color: transparent;
+    height: auto;
+    color: black;
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: transparent;
+      border: none;
+      color: black;
+    }
+
+    & > svg > polygon {
+      fill: black;
+    }
+  `,
+    back: (theme) => css `
+    background-color: transparent;
+    color: black;
+    border: 2px solid ${theme.btnBackBorder};
+    height: 32px;
+    padding: 0 1.5em;
+    & > span {
+      padding: 0 0.5em;
+    }
+    &:focus {
+      border-color: ${theme.secondary};
+      background-color: transparent;
+      color: black;
+      text-decoration: none;
+    }
+    &:hover,
+    &:active {
+      background-color: ${theme.secondary};
+      border: 2px solid ${theme.btnBackBorder};
+      color: ${theme.btnHoverTextColor};
+
+      & > svg {
+        fill: ${theme.btnHoverTextColor} !important;
+      }
+    }
+  `,
+    small: css `
+    padding: 8px 16px;
+    font-size: 14px;
+  `,
+    dangerOutline: (theme) => css `
+    background-color: transparent;
+    color: ${theme.btnDanger};
+  `,
+    successOutline: (theme) => css `
+    background-color: transparent;
+    color: black;
+  `,
+    transparentBg: css `
+    background-color: transparent;
+  `,
+    focusable: css `
+    &:focus-visible {
+      outline: 1px dotted #212121;
+      outline: 5px auto -webkit-focus-ring-color;
+    }
+  `,
 };
-var _default = exports.default = styles;
+export default styles;
+export { styles };

package/lib/v2/core/ButtonsFilter/ButtonsFilter.stories.d.ts

@@ -6,4 +6,3 @@ type Story = StoryObj<typeof ButtonsFilter>;
 export declare const Default: Story;
 export declare const Loading: Story;
 export declare const ObjectValues: Story;
-//# sourceMappingURL=ButtonsFilter.stories.d.ts.map

package/lib/v2/core/ButtonsFilter/ButtonsFilter.stories.js

@@ -1,45 +1,33 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ObjectValues = exports.Loading = exports.Default = void 0;
-var _ = _interopRequireDefault(require("."));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import ButtonsFilter from '.';
 const meta = {
-  title: 'v2/Core/ButtonsFilter',
-  component: _.default
+    title: 'v2/Core/ButtonsFilter',
+    component: ButtonsFilter,
 };
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  name: 'Default',
-  args: {
-    values: ['One', 'Two', 'Three'],
-    disabled: false,
-    onChange: e => console.log(e)
-  }
+export default meta;
+export const Default = {
+    name: 'Default',
+    args: {
+        values: ['One', 'Two', 'Three'],
+        disabled: false,
+        onChange: (e) => console.log(e),
+    },
 };
-const Loading = exports.Loading = {
-  name: 'Loading',
-  args: {
-    loading: true
-  }
+export const Loading = {
+    name: 'Loading',
+    args: {
+        loading: true,
+    },
+};
+export const ObjectValues = {
+    name: 'Object Values',
+    args: {
+        values: [
+            { label: 'One', value: 15 },
+            { label: 'Two', value: 2 },
+            { label: 'Three', value: 5 },
+        ],
+        labelField: 'label',
+        valueField: 'value',
+        onChange: (e) => console.log(e),
+    },
 };
-const ObjectValues = exports.ObjectValues = {
-  name: 'Object Values',
-  args: {
-    values: [{
-      label: 'One',
-      value: 15
-    }, {
-      label: 'Two',
-      value: 2
-    }, {
-      label: 'Three',
-      value: 5
-    }],
-    labelField: 'label',
-    valueField: 'value',
-    onChange: e => console.log(e)
-  }
-};

package/lib/v2/core/ButtonsFilter/index.d.ts

@@ -12,4 +12,3 @@ interface IProps extends AriaAttributes {
 }
 declare const ButtonsFilter: React.FC<IProps>;
 export default ButtonsFilter;
-//# sourceMappingURL=index.d.ts.map

package/lib/v2/core/ButtonsFilter/index.js

@@ -1,82 +1,44 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _Button = _interopRequireDefault(require("../Button"));
-var _styles = require("./styles");
-var _Skeleton = _interopRequireDefault(require("../../../core/Skeleton"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-
+import { useEffect, useMemo, useState } from 'react';
+import Button from '../Button';
+import { Wrapper } from './styles';
+import Skeleton from '../../../core/Skeleton';
 const resolve = (value, field) => {
-  if (!field || !value) return null;
-  const valueIsObject = typeof value === 'object';
-  return valueIsObject ? value[field] : value;
+    if (!field || !value)
+        return null;
+    const valueIsObject = typeof value === 'object';
+    return valueIsObject ? value[field] : value;
 };
-const ButtonsFilter = ({
-  values,
-  value,
-  disabled,
-  skeletons = 3,
-  labelField,
-  valueField,
-  loading,
-  onChange,
-  ...rest
-}) => {
-  const [selected, setSelected] = (0, _react.useState)(undefined);
-  const isEmpty = !values?.length;
-  const handleClick = value => {
-    setSelected(value);
-    onChange?.(value);
-  };
-  const resolvedValues = (0, _react.useMemo)(() => {
-    if (!values) return [];
-    return values.map(value => ({
-      label: resolve(value, labelField),
-      value: resolve(value, valueField)
-    }));
-  }, [values, labelField, valueField]);
-  (0, _react.useEffect)(() => {
-    if (loading || isEmpty || selected !== undefined) return;
-    const firstValue = resolve(value || values[0], valueField);
-    const selectedExists = resolvedValues.some(({
-      value
-    }) => value === selected);
-    if (!selectedExists) {
-      setSelected(firstValue);
-      onChange?.(firstValue);
-    }
-  }, [values, loading, selected, isEmpty, valueField, onChange]);
-  if (loading) return (0, _jsxRuntime.jsx)(_styles.Wrapper, {
-    children: Array.from({
-      length: skeletons
-    }).map((_, index) => (0, _jsxRuntime.jsx)(_Skeleton.default, {
-      width: "100px",
-      height: "32px",
-      borderRadius: "100px",
-      rectangle: true
-    }, index))
-  });
-  if (isEmpty) return null;
-  return (0, _jsxRuntime.jsx)(_styles.Wrapper, {
-    children: resolvedValues.map(({
-      label,
-      value
-    }) => (0, _jsxRuntime.jsx)(_Button.default, {
-      small: true,
-      title: label,
-      onClick: () => handleClick(value),
-      secondary: selected !== value,
-      "aria-pressed": selected === value,
-      disabled: disabled,
-      ...rest,
-      children: label
-    }, value))
-  });
+const ButtonsFilter = ({ values, value, disabled, skeletons = 3, labelField, valueField, loading, onChange, ...rest }) => {
+    const [selected, setSelected] = useState(undefined);
+    const isEmpty = !values?.length;
+    const handleClick = (value) => {
+        setSelected(value);
+        onChange?.(value);
+    };
+    const resolvedValues = useMemo(() => {
+        if (!values)
+            return [];
+        return values.map((value) => ({
+            label: resolve(value, labelField),
+            value: resolve(value, valueField),
+        }));
+    }, [values, labelField, valueField]);
+    useEffect(() => {
+        if (loading || isEmpty || selected !== undefined)
+            return;
+        const firstValue = resolve(value || values[0], valueField);
+        const selectedExists = resolvedValues.some(({ value }) => value === selected);
+        if (!selectedExists) {
+            setSelected(firstValue);
+            onChange?.(firstValue);
+        }
+    }, [values, loading, selected, isEmpty, valueField, onChange]);
+    if (loading)
+        return (_jsx(Wrapper, { children: Array.from({ length: skeletons }).map((_, index) => (_jsx(Skeleton, { width: "100px", height: "32px", borderRadius: "100px", rectangle: true }, index))) }));
+    if (isEmpty)
+        return null;
+    return (_jsx(Wrapper, { children: resolvedValues.map(({ label, value }) => (_jsx(Button, { small: true, title: label, onClick: () => handleClick(value), secondary: selected !== value, "aria-pressed": selected === value, disabled: disabled, ...rest, children: label }, value))) }));
 };
-var _default = exports.default = ButtonsFilter;
+export default ButtonsFilter;

package/lib/v2/core/ButtonsFilter/styles.d.ts

@@ -2,4 +2,3 @@ export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-//# sourceMappingURL=styles.d.ts.map

package/lib/v2/core/ButtonsFilter/styles.js

@@ -1,22 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Wrapper = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const Wrapper = exports.Wrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "e1djumss0"
-} : {
-  target: "e1djumss0",
-  label: "Wrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "xlb5bl",
-  styles: "display:flex;gap:8px;flex-flow:wrap;width:100%"
-} : {
-  name: "xlb5bl",
-  styles: "display:flex;gap:8px;flex-flow:wrap;width:100%",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+import styled from '@emotion/styled';
+export const Wrapper = styled.div `
+  display: flex;
+  gap: 8px;
+  flex-flow: wrap;
+  width: 100%;
+`;

package/lib/v2/core/Chip/Chip.stories.d.ts

@@ -14,4 +14,3 @@ export declare const OutlineSecondary: Story;
 export declare const Success: Story;
 export declare const Warning: Story;
 export declare const Error: Story;
-//# sourceMappingURL=Chip.stories.d.ts.map