@pismo/marola 1.0.21 → 1.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/dist/Dialog.module-Duis5XWM.js +1 -2
  2. package/dist/Group-ZXteFV4M.js +1 -2
  3. package/dist/Popover.module-B4boCutS.js +1 -2
  4. package/dist/SelectButton-B38avP9u.js +1 -2
  5. package/dist/Tabs.module-BZkDJFDM.js +1 -2
  6. package/dist/Toggle-BuZjueQ7.js +1 -2
  7. package/dist/assets/BankCard.css +1 -0
  8. package/dist/components/Adornment/Adornment.js +1 -2
  9. package/dist/components/Advice/Advice.js +1 -2
  10. package/dist/components/Alert/Alert.js +1 -2
  11. package/dist/components/Autocomplete/Autocomplete.js +1 -2
  12. package/dist/components/Avatar/Avatar.js +1 -2
  13. package/dist/components/BankCard/BankCard.d.ts +43 -0
  14. package/dist/components/BankCard/BankCard.js +161 -0
  15. package/dist/components/BankCard/BankCard.stories.d.ts +15 -0
  16. package/dist/components/BankCard/BankCard.test.d.ts +1 -0
  17. package/dist/components/Button/Button.js +1 -2
  18. package/dist/components/Checkbox/Checkbox.js +1 -2
  19. package/dist/components/Chip/Chip.stories.d.ts +1 -1
  20. package/dist/components/ConfirmationDialog/ConfirmationDialog.stories.d.ts +1 -1
  21. package/dist/components/Description/Description.js +1 -2
  22. package/dist/components/Dialog/Dialog.stories.d.ts +1 -1
  23. package/dist/components/EllipsisTooltip/EllipsisTooltip.js +1 -2
  24. package/dist/components/EllipsisTooltip/EllipsisTooltip.stories.d.ts +1 -1
  25. package/dist/components/Icon/Icon.js +71 -65
  26. package/dist/components/Icon/types.d.ts +1 -1
  27. package/dist/components/IconButton/IconButton.js +1 -2
  28. package/dist/components/Input/Input.js +1 -2
  29. package/dist/components/InputSearch/InputSearch.js +1 -2
  30. package/dist/components/LoadingSpinner/LoadingSpinner.js +1 -2
  31. package/dist/components/LoadingSpinner/LoadingSpinner.stories.d.ts +1 -1
  32. package/dist/components/PageHeader/PageHeader.js +1 -2
  33. package/dist/components/Pagination/Pagination.js +1 -2
  34. package/dist/components/Popover/Popover.stories.d.ts +1 -1
  35. package/dist/components/RadioButton/RadioButton.js +1 -2
  36. package/dist/components/ResultWithChips/ResultWithChips.js +1 -2
  37. package/dist/components/Skeleton/Skeleton.js +1 -2
  38. package/dist/components/Snackbar/Snackbar.js +1 -2
  39. package/dist/components/Snackbar/Snackbar.stories.d.ts +1 -1
  40. package/dist/components/SortTooltip/SortTooltip.js +1 -2
  41. package/dist/components/Stepper/Stepper.js +1 -2
  42. package/dist/components/StepperNavigator/StepperNavigator.js +1 -2
  43. package/dist/components/Table/Table.js +1 -2
  44. package/dist/components/Tag/Tag.js +1 -2
  45. package/dist/components/TextDisplay/TextDisplay.js +1 -2
  46. package/dist/components/Toggle/Toggle.js +1 -2
  47. package/dist/components/ToggleGroup/ToggleGroup.stories.d.ts +1 -1
  48. package/dist/components/Tooltip/Tooltip.js +1 -2
  49. package/dist/components/Tooltip/Tooltip.stories.d.ts +1 -1
  50. package/dist/components/TransactionRow/TransactionRow.js +1 -2
  51. package/dist/components/Typography/Typography.js +1 -2
  52. package/dist/components/Typography/Typography.stories.d.ts +1 -1
  53. package/dist/contexts/SnackbarProvider/SnackbarProvider.stories.d.ts +1 -1
  54. package/dist/main.d.ts +1 -0
  55. package/dist/main.js +95 -93
  56. package/package.json +2 -2
@@ -1,5 +1,4 @@
1
- import './assets/Dialog.css';
2
- const _ = "_dialog_2iy7w_78", y = "_dialog__backdrop_2iy7w_88", a = "_dialog__panel_2iy7w_96", o = "_dialog__title_2iy7w_113", i = "_dialog__subtitle_2iy7w_120", p = "_dialog__divider_2iy7w_124", t = "_dialog__actions_2iy7w_138", g = {
1
+ import './assets/Dialog.css';const _ = "_dialog_2iy7w_78", y = "_dialog__backdrop_2iy7w_88", a = "_dialog__panel_2iy7w_96", o = "_dialog__title_2iy7w_113", i = "_dialog__subtitle_2iy7w_120", p = "_dialog__divider_2iy7w_124", t = "_dialog__actions_2iy7w_138", g = {
3
2
  "u-typography-h1": "_u-typography-h1_2iy7w_1",
4
3
  "u-typography-h2": "_u-typography-h2_2iy7w_8",
5
4
  "u-typography-h3": "_u-typography-h3_2iy7w_15",
@@ -1,10 +1,9 @@
1
- import './assets/Group.css';
2
1
  import { jsxs as l, jsx as o } from "react/jsx-runtime";
3
2
  import { forwardRef as n } from "react";
4
3
  import { c as m } from "./clsx-DB4S2d7J.js";
5
4
  import { Icon as u } from "./components/Icon/Icon.js";
6
5
  import { Typography as c } from "./components/Typography/Typography.js";
7
- const p = "_toggle__input_hu6m0_1", h = "_toggle__label_hu6m0_11", t = {
6
+ import './assets/Group.css';const p = "_toggle__input_hu6m0_1", h = "_toggle__label_hu6m0_11", t = {
8
7
  toggle__input: p,
9
8
  toggle__label: h,
10
9
  "toggle__label--selected": "_toggle__label--selected_hu6m0_21",
@@ -1,5 +1,4 @@
1
- import './assets/Popover.css';
2
- const o = "_popover_n95k7_1", p = {
1
+ import './assets/Popover.css';const o = "_popover_n95k7_1", p = {
3
2
  popover: o,
4
3
  "popover-header": "_popover-header_n95k7_6",
5
4
  "popover-footer": "_popover-footer_n95k7_10",
@@ -1,10 +1,9 @@
1
- import './assets/SelectButton.css';
2
1
  import { jsxs as l, jsx as e } from "react/jsx-runtime";
3
2
  import { forwardRef as g } from "react";
4
3
  import { c as d } from "./clsx-DB4S2d7J.js";
5
4
  import { Icon as p } from "./components/Icon/Icon.js";
6
5
  import { Typography as b } from "./components/Typography/Typography.js";
7
- const q = "_select__listbox__option__text_1abqy_65", x = "_select__wrapper_1abqy_78", m = "_select__label_1abqy_84", f = "_select_1abqy_57", w = "_select__popup_1abqy_99", v = "_select__listbox_1abqy_65", S = "_select__listbox__option_1abqy_65", k = "_select__listbox__option__icon_1abqy_129", t = {
6
+ import './assets/SelectButton.css';const q = "_select__listbox__option__text_1abqy_65", x = "_select__wrapper_1abqy_78", m = "_select__label_1abqy_84", f = "_select_1abqy_57", w = "_select__popup_1abqy_99", v = "_select__listbox_1abqy_65", S = "_select__listbox__option_1abqy_65", k = "_select__listbox__option__icon_1abqy_129", t = {
8
7
  "u-typography-h1": "_u-typography-h1_1abqy_1",
9
8
  "u-typography-h2": "_u-typography-h2_1abqy_8",
10
9
  "u-typography-h3": "_u-typography-h3_1abqy_15",
@@ -1,6 +1,5 @@
1
- import './assets/Tabs.css';
2
1
  import * as _ from "react";
3
- const a = /* @__PURE__ */ _.createContext(null);
2
+ import './assets/Tabs.css';const a = /* @__PURE__ */ _.createContext(null);
4
3
  process.env.NODE_ENV !== "production" && (a.displayName = "TabsContext");
5
4
  function o() {
6
5
  const t = _.useContext(a);
@@ -1,4 +1,3 @@
1
- import './assets/Toggle2.css';
2
1
  import { jsx as i, jsxs as k } from "react/jsx-runtime";
3
2
  import { forwardRef as u } from "react";
4
3
  import { c as l } from "./clsx-DB4S2d7J.js";
@@ -19,7 +18,7 @@ import "./components/Tabs/Tabs.js";
19
18
  import { s as y } from "./Group-ZXteFV4M.js";
20
19
  import "./contexts/SnackbarProvider/SnackbarProvider.js";
21
20
  import { B as x } from "./Button-BAljjMv3.js";
22
- const I = "_chip_1wvod_61", P = "_chip__adornment_1wvod_116", z = "_chip__remove_1wvod_121", n = {
21
+ import './assets/Toggle2.css';const I = "_chip_1wvod_61", P = "_chip__adornment_1wvod_116", z = "_chip__remove_1wvod_121", n = {
23
22
  "u-typography-h1": "_u-typography-h1_1wvod_1",
24
23
  "u-typography-h2": "_u-typography-h2_1wvod_8",
25
24
  "u-typography-h3": "_u-typography-h3_1wvod_15",
@@ -0,0 +1 @@
1
+ ._bank-card_1hmne_1{transition:all .3s;box-shadow:inset 0 -.0625rem #ebeaf07a;color:var(--gray-25);background:linear-gradient(72.27deg,#1a1a22 -111.98%,#525061 103.61%);border-radius:15px;display:flex;flex-direction:column;justify-content:space-between;padding:1rem 1.125rem;max-width:20.5rem}._bank-card_1hmne_1 ._logo-wrapper_1hmne_13{margin-bottom:1.5rem}._bank-card_1hmne_1 ._numbers-wrapper_1hmne_16{height:3.75rem;display:flex;justify-content:space-between;position:relative;font-size:1.3125rem;font-weight:700;margin-bottom:0;align-items:self-end}._bank-card_1hmne_1 ._numbers-wrapper_1hmne_16 ._helper_1hmne_26{position:absolute;top:0;opacity:1;font-style:normal;font-weight:400;font-size:.6875rem;line-height:1rem}._bank-card_1hmne_1 ._numbers-wrapper_1hmne_16 ._helper_1hmne_26:after{content:"";height:3.5rem;position:absolute;width:1px;left:-5px}._bank-card_1hmne_1 ._numbers-wrapper_1hmne_16 ._helper-bin-number_1hmne_42:after{background:var(--orange-6)}._bank-card_1hmne_1 ._numbers-wrapper_1hmne_16 ._helper-bin-range_1hmne_45:after{background:var(--green-6)}._bank-card_1hmne_1 ._numbers-wrapper_1hmne_16 ._helper-check-digit_1hmne_48{white-space:nowrap}._bank-card_1hmne_1 ._numbers-wrapper_1hmne_16 ._helper-check-digit_1hmne_48:after{background:var(--gold-3);right:-.25rem;left:auto}._bank-card_1hmne_1 ._numbers-wrapper_1hmne_16 ._number-section--02_1hmne_56 ._digit-wrapper_1hmne_56:nth-of-type(3)._bin-range_1hmne_56{padding-left:5px}._bank-card_1hmne_1 ._numbers-wrapper_1hmne_16 ._number-section--04_1hmne_59 ._digit-wrapper_1hmne_56._check-digit_1hmne_59{padding-left:5px}._bank-card_1hmne_1 ._numbers-wrapper_1hmne_16 ._number-section--04_1hmne_59 ._digit-wrapper_1hmne_56._check-digit_1hmne_59 ._helper-check-digit_1hmne_48{right:7.75%}._bank-card_1hmne_1 ._numbers-wrapper_1hmne_16 ._number-section_1hmne_56{display:flex;gap:.25rem;align-items:center}._bank-card_1hmne_1 ._numbers-wrapper_1hmne_16 ._bin-number_1hmne_70{color:var(--orange-6)}._bank-card_1hmne_1 ._numbers-wrapper_1hmne_16 ._bin-range_1hmne_56{color:var(--green-6)}._bank-card_1hmne_1 ._numbers-wrapper_1hmne_16 ._check-digit_1hmne_59{color:var(--gold-3)}._bank-card_1hmne_1 ._info-wrapper_1hmne_79{margin-top:1rem;flex:1;align-items:flex-end;display:flex;justify-content:space-between;gap:1rem}._bank-card_1hmne_1 ._info-wrapper_1hmne_79 ._info_1hmne_79:first-of-type{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._bank-card_1hmne_1 ._info-wrapper_1hmne_79 ._info_1hmne_79 ._label_1hmne_93{font-weight:400;font-size:.75rem}._bank-card_1hmne_1 ._info-wrapper_1hmne_79 ._info_1hmne_79 ._value_1hmne_97{font-size:1rem;font-weight:700;margin-top:.25rem}._bank-card_1hmne_1._highlight-bin_1hmne_103{transition:all .3s;color:#525061}._bank-card_1hmne_1._highlight-bin_1hmne_103 ._numbers-wrapper_1hmne_16._bin-range_1hmne_56,._bank-card_1hmne_1._highlight-bin_1hmne_103 ._numbers-wrapper_1hmne_16._check-digit_1hmne_59,._bank-card_1hmne_1._highlight-bin_1hmne_103 ._numbers-wrapper_1hmne_16 ._bin-range_1hmne_56,._bank-card_1hmne_1._highlight-bin_1hmne_103 ._numbers-wrapper_1hmne_16 ._check-digit_1hmne_59,._bank-card_1hmne_1._highlight-bin_1hmne_103 ._numbers-wrapper_1hmne_16 ._helper-bin-range_1hmne_45,._bank-card_1hmne_1._highlight-bin_1hmne_103 ._numbers-wrapper_1hmne_16 ._helper-check-digit_1hmne_48{color:#525061;transition:all .3s}._bank-card_1hmne_1._highlight-bin_1hmne_103 ._numbers-wrapper_1hmne_16._bin-range_1hmne_56:after,._bank-card_1hmne_1._highlight-bin_1hmne_103 ._numbers-wrapper_1hmne_16._check-digit_1hmne_59:after,._bank-card_1hmne_1._highlight-bin_1hmne_103 ._numbers-wrapper_1hmne_16 ._bin-range_1hmne_56:after,._bank-card_1hmne_1._highlight-bin_1hmne_103 ._numbers-wrapper_1hmne_16 ._check-digit_1hmne_59:after,._bank-card_1hmne_1._highlight-bin_1hmne_103 ._numbers-wrapper_1hmne_16 ._helper-bin-range_1hmne_45:after,._bank-card_1hmne_1._highlight-bin_1hmne_103 ._numbers-wrapper_1hmne_16 ._helper-check-digit_1hmne_48:after{background:#525061;transition:all .3s}._bank-card_1hmne_1._highlight-bin-range_1hmne_124{transition:all .3s;color:#525061}._bank-card_1hmne_1._highlight-bin-range_1hmne_124 ._numbers-wrapper_1hmne_16._bin-number_1hmne_70,._bank-card_1hmne_1._highlight-bin-range_1hmne_124 ._numbers-wrapper_1hmne_16._check-digit_1hmne_59,._bank-card_1hmne_1._highlight-bin-range_1hmne_124 ._numbers-wrapper_1hmne_16 ._bin-number_1hmne_70,._bank-card_1hmne_1._highlight-bin-range_1hmne_124 ._numbers-wrapper_1hmne_16 ._check-digit_1hmne_59,._bank-card_1hmne_1._highlight-bin-range_1hmne_124 ._numbers-wrapper_1hmne_16 ._helper-bin-number_1hmne_42,._bank-card_1hmne_1._highlight-bin-range_1hmne_124 ._numbers-wrapper_1hmne_16 ._helper-check-digit_1hmne_48{color:#525061;transition:all .3s}._bank-card_1hmne_1._highlight-bin-range_1hmne_124 ._numbers-wrapper_1hmne_16._bin-number_1hmne_70:after,._bank-card_1hmne_1._highlight-bin-range_1hmne_124 ._numbers-wrapper_1hmne_16._check-digit_1hmne_59:after,._bank-card_1hmne_1._highlight-bin-range_1hmne_124 ._numbers-wrapper_1hmne_16 ._bin-number_1hmne_70:after,._bank-card_1hmne_1._highlight-bin-range_1hmne_124 ._numbers-wrapper_1hmne_16 ._check-digit_1hmne_59:after,._bank-card_1hmne_1._highlight-bin-range_1hmne_124 ._numbers-wrapper_1hmne_16 ._helper-bin-number_1hmne_42:after,._bank-card_1hmne_1._highlight-bin-range_1hmne_124 ._numbers-wrapper_1hmne_16 ._helper-check-digit_1hmne_48:after{background:#525061;transition:all .3s}._bank-card_1hmne_1._highlight-no-highlight_1hmne_145{transition:all .3s;filter:grayscale(1) opacity(.5) contrast(.5)}._bank-card-wrapper_1hmne_150{container-type:inline-size;container-name:bank-card-wrapper}@container bank-card-wrapper (max-width: 19.25rem){._bank-card_1hmne_1 ._numbers-wrapper_1hmne_16{font-size:1.125rem}._bank-card_1hmne_1 ._numbers-wrapper_1hmne_16 ._number-section_1hmne_56{gap:.1rem}}@container bank-card-wrapper (max-width: 16rem){._bank-card_1hmne_1 ._numbers-wrapper_1hmne_16{font-size:.875rem}._bank-card_1hmne_1 ._numbers-wrapper_1hmne_16 ._number-section_1hmne_56{gap:.05rem}._bank-card_1hmne_1 ._numbers-wrapper_1hmne_16 ._helper_1hmne_26{font-size:.5rem}}
@@ -1,8 +1,7 @@
1
- import '../../assets/Adornment.css';
2
1
  import { jsx as n } from "react/jsx-runtime";
3
2
  import { c } from "../../clsx-DB4S2d7J.js";
4
3
  import { Icon as d } from "../Icon/Icon.js";
5
- const l = "_adornment_1bwrg_1", i = {
4
+ import '../../assets/Adornment.css';const l = "_adornment_1bwrg_1", i = {
6
5
  adornment: l
7
6
  }, g = (t) => {
8
7
  const e = c(t.className), { disabled: a, icon: m } = t, o = a ? "rgb(var(--gray-95-rgb), 0.4)" : t == null ? void 0 : t.color;
@@ -1,9 +1,8 @@
1
- import '../../assets/Advice.css';
2
1
  import { jsxs as _, jsx as r } from "react/jsx-runtime";
3
2
  import { c as g } from "../../clsx-DB4S2d7J.js";
4
3
  import { Icon as h } from "../Icon/Icon.js";
5
4
  import { Typography as m } from "../Typography/Typography.js";
6
- const x = "_advice_1wls4_1", f = "_advice__texts_1wls4_8", u = "_advice__content_1wls4_14", c = {
5
+ import '../../assets/Advice.css';const x = "_advice_1wls4_1", f = "_advice__texts_1wls4_8", u = "_advice__content_1wls4_14", c = {
7
6
  advice: x,
8
7
  advice__texts: f,
9
8
  advice__content: u
@@ -1,8 +1,7 @@
1
- import '../../assets/Alert.css';
2
1
  import { jsxs as p, jsx as a } from "react/jsx-runtime";
3
2
  import { c as y } from "../../clsx-DB4S2d7J.js";
4
3
  import { Icon as s } from "../Icon/Icon.js";
5
- const h = "_container_1043z_78", t = {
4
+ import '../../assets/Alert.css';const h = "_container_1043z_78", t = {
6
5
  "u-typography-h1": "_u-typography-h1_1043z_1",
7
6
  "u-typography-h2": "_u-typography-h2_1043z_8",
8
7
  "u-typography-h3": "_u-typography-h3_1043z_15",
@@ -1,4 +1,3 @@
1
- import '../../assets/Autocomplete.css';
2
1
  import { jsx as le, jsxs as lt } from "react/jsx-runtime";
3
2
  import * as h from "react";
4
3
  import { useId as at, useState as ut, createElement as ct } from "react";
@@ -8,7 +7,7 @@ import { b as je, s as dt } from "../../useSlotProps-C_I1kEHr.js";
8
7
  import { u as gt } from "../../useId-BW-oWmul.js";
9
8
  import { u as _e } from "../../useControlled-CCMYYdCM.js";
10
9
  import { u as ae } from "../../useEventCallback-BAQJJ3ye.js";
11
- const ht = (c) => {
10
+ import '../../assets/Autocomplete.css';const ht = (c) => {
12
11
  const b = h.useRef({});
13
12
  return h.useEffect(() => {
14
13
  b.current = c;
@@ -1,8 +1,7 @@
1
- import '../../assets/Avatar.css';
2
1
  import { jsxs as v, jsx as _ } from "react/jsx-runtime";
3
2
  import { forwardRef as c, useMemo as l } from "react";
4
3
  import { c as f } from "../../clsx-DB4S2d7J.js";
5
- const n = "_avatar_fk6lm_57", d = "_avatar__icon_fk6lm_108", k = "_avatar__image_fk6lm_108", b = "_avatar__text_fk6lm_108", t = {
4
+ import '../../assets/Avatar.css';const n = "_avatar_fk6lm_57", d = "_avatar__icon_fk6lm_108", k = "_avatar__image_fk6lm_108", b = "_avatar__text_fk6lm_108", t = {
6
5
  "u-typography-h1": "_u-typography-h1_fk6lm_1",
7
6
  "u-typography-h2": "_u-typography-h2_fk6lm_8",
8
7
  "u-typography-h3": "_u-typography-h3_fk6lm_15",
@@ -0,0 +1,43 @@
1
+ export type BankCardTranslations = {
2
+ binNumber?: string;
3
+ binRange?: string;
4
+ checkDigit?: string;
5
+ name?: string;
6
+ cvv?: string;
7
+ expiration?: string;
8
+ };
9
+ export type CardExpiration = {
10
+ month: string;
11
+ year: string;
12
+ };
13
+ export type CardNumbers = {
14
+ bin: string;
15
+ range: string;
16
+ checkDigit?: string;
17
+ };
18
+ export type HighlightCard = 'bin' | 'bin-range' | 'no-highlight';
19
+ export type BINValueText = {
20
+ numbers: string;
21
+ isBIN6: boolean;
22
+ };
23
+ export type BINValues = {
24
+ numbers: CardNumbers;
25
+ } | BINValueText;
26
+ export type CardInfo = {
27
+ name?: string;
28
+ cvv?: string;
29
+ expiration?: CardExpiration | string;
30
+ };
31
+ export type BankCardProps = {
32
+ infos?: CardInfo;
33
+ highlight?: HighlightCard;
34
+ noHelpers?: boolean;
35
+ /** Set language */
36
+ language?: string;
37
+ /** Set translations to labels */
38
+ translations?: Partial<BankCardTranslations>;
39
+ className?: string;
40
+ 'data-testid'?: string;
41
+ } & BINValues;
42
+ declare const BankCard: ({ infos, numbers, className, language, translations, highlight, noHelpers, ...rest }: BankCardProps) => import("react/jsx-runtime").JSX.Element;
43
+ export { BankCard };
@@ -0,0 +1,161 @@
1
+ import { jsx as r, jsxs as l } from "react/jsx-runtime";
2
+ import * as t from "react";
3
+ import { useMemo as E } from "react";
4
+ import { c as a } from "../../clsx-DB4S2d7J.js";
5
+ import '../../assets/BankCard.css';const M = (n) => /* @__PURE__ */ t.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 73, height: 17, viewBox: "0 0 73 17", fill: "none", style: {
6
+ fill: "currentcolor"
7
+ }, ...n }, /* @__PURE__ */ t.createElement("path", { d: "M29.5027 0C29.0333 0 28.6527 0.380558 28.6527 0.85V0.991667C28.6527 1.46111 29.0333 1.84167 29.5027 1.84167C29.9721 1.84167 30.3527 1.46111 30.3527 0.991667V0.85C30.3527 0.380558 29.9721 0 29.5027 0Z", fill: "currentColor" }), /* @__PURE__ */ t.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M26.1027 8.4807C26.1027 5.67354 23.8293 3.4 21.0224 3.4C18.1761 3.4 15.9027 5.67354 15.9027 8.4807C15.9027 8.48714 15.9027 8.49357 15.9027 8.5L15.9027 16.15C15.9027 16.6194 16.2833 17 16.7527 17C17.2221 17 17.6027 16.6194 17.6027 16.15V12.304C18.5065 13.1116 19.7029 13.6 21.0224 13.6C23.8293 13.6 26.1027 11.3272 26.1027 8.4807ZM24.4027 8.49041C24.4027 10.4018 22.9045 11.9 21.0123 11.9C19.1001 11.9 17.6027 10.4018 17.6027 8.49041C17.6027 6.59823 19.1001 5.1 21.0123 5.1C22.9045 5.1 24.4027 6.59823 24.4027 8.49041Z", fill: "currentColor" }), /* @__PURE__ */ t.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M72.8527 8.4807C72.8527 5.67354 70.5793 3.4 67.7724 3.4C64.9261 3.4 62.6527 5.67354 62.6527 8.4807C62.6527 11.3272 64.9261 13.6 67.7724 13.6C70.5793 13.6 72.8527 11.3272 72.8527 8.4807ZM71.1527 8.49041C71.1527 10.4018 69.6545 11.9 67.7624 11.9C65.8501 11.9 64.3527 10.4018 64.3527 8.49041C64.3527 6.59823 65.8501 5.1 67.7624 5.1C69.6545 5.1 71.1527 6.59823 71.1527 8.49041Z", fill: "currentColor" }), /* @__PURE__ */ t.createElement("path", { d: "M60.1027 8.5C60.1027 5.68218 57.8293 3.4 55.0224 3.4C53.2315 3.4 51.6674 4.30351 50.7537 5.67547C49.8434 4.30351 48.2886 3.4 46.5224 3.4C43.6761 3.4 41.4027 5.68218 41.4027 8.5V12.75C41.4027 13.2194 41.7833 13.6 42.2527 13.6C42.7221 13.6 43.1027 13.2194 43.1027 12.75L43.1027 8.5C43.1078 6.60524 44.6034 5.10646 46.5123 5.10646C48.4012 5.10646 49.8976 6.60524 49.9027 8.5V12.75C49.9027 13.2194 50.2833 13.6 50.7527 13.6C51.2221 13.6 51.6027 13.2194 51.6027 12.75L51.6027 8.5C51.6078 6.60524 53.1034 5.10646 55.0124 5.10646C56.9012 5.10646 58.3976 6.60524 58.4027 8.5L58.4027 12.75C58.4027 13.2194 58.7833 13.6 59.2527 13.6C59.7221 13.6 60.1027 13.2194 60.1027 12.75V8.5Z", fill: "currentColor" }), /* @__PURE__ */ t.createElement("path", { d: "M32.9027 6.369C32.9027 4.71394 34.2221 3.4 35.8837 3.4C36.5019 3.4 37.0711 3.61709 37.5274 3.87455C37.9887 4.13483 38.388 4.46626 38.6832 4.77006C39.0103 5.10674 39.0026 5.64488 38.6659 5.97201C38.3292 6.29915 37.791 6.29141 37.4639 5.95472C37.2633 5.74822 36.9903 5.52345 36.692 5.35511C36.3886 5.18395 36.1109 5.1 35.8837 5.1C35.155 5.1 34.6027 5.65885 34.6027 6.369C34.6027 6.62126 34.7071 6.81581 34.9941 7.04014C35.2638 7.25096 35.5934 7.41175 35.9911 7.60583L35.9912 7.60587L35.9931 7.60678C36.0239 7.62181 36.0551 7.63704 36.0867 7.6525L36.119 7.66832C36.1874 7.68289 36.2551 7.7062 36.3207 7.73875C36.3842 7.77033 36.4538 7.80398 36.5278 7.8398C36.9257 8.03236 37.4532 8.28759 37.8791 8.62047C38.4259 9.04788 38.9235 9.68861 38.9235 10.631C38.9235 12.2861 37.6041 13.6 35.9425 13.6C35.3244 13.6 34.7551 13.3829 34.2988 13.1255C33.8376 12.8652 33.4383 12.5337 33.1431 12.2299C32.8159 11.8933 32.8237 11.3551 33.1604 11.028C33.4971 10.7009 34.0352 10.7086 34.3623 11.0453C34.563 11.2518 34.8359 11.4765 35.1343 11.6449C35.4376 11.816 35.7154 11.9 35.9425 11.9C36.6712 11.9 37.2235 11.3412 37.2235 10.631C37.2235 10.3787 37.1191 10.1842 36.8321 9.95986C36.5624 9.74904 36.2329 9.58824 35.8351 9.39416L35.835 9.39411C35.7931 9.3737 35.7506 9.35292 35.7072 9.33168C35.6388 9.31711 35.5711 9.2938 35.5056 9.26125C35.4421 9.22972 35.3727 9.19613 35.2988 9.16037L35.2984 9.1602C34.9005 8.96764 34.3731 8.71241 33.9472 8.37953C33.4004 7.95212 32.9027 7.31139 32.9027 6.369Z", fill: "currentColor" }), /* @__PURE__ */ t.createElement("path", { d: "M28.6527 4.25C28.6527 3.78056 29.0333 3.4 29.5027 3.4C29.9721 3.4 30.3527 3.78056 30.3527 4.25V12.75C30.3527 13.2194 29.9721 13.6 29.5027 13.6C29.0333 13.6 28.6527 13.2194 28.6527 12.75V4.25Z", fill: "currentColor" }), /* @__PURE__ */ t.createElement("path", { d: "M7.79782 4.82504C8.92577 5.99405 10.0593 7.16884 11.272 6.00772C11.6161 5.6785 11.7274 5.07878 11.633 4.66536C11.0035 1.90807 7.30509 1.79573 5.677 3.20259L5.6791 3.21328C6.39503 3.37119 7.09534 4.09699 7.79782 4.82504Z", fill: "currentColor" }), /* @__PURE__ */ t.createElement("path", { d: "M10.4078 12.1909C8.92876 11.3964 9.69577 9.95529 10.459 8.5213C10.9343 7.62822 11.4082 6.7379 11.3372 6.00821L11.3467 6.00291C13.1878 7.11658 14.2238 10.6686 11.796 12.1194C11.432 12.337 10.8272 12.4165 10.4078 12.1909Z", fill: "currentColor" }), /* @__PURE__ */ t.createElement("path", { d: "M4.26017 13.2797C4.55877 11.6275 6.16633 11.9117 7.76599 12.1944C8.76225 12.3705 9.75543 12.5461 10.4274 12.253L10.4354 12.2604C9.9452 14.3556 6.88714 16.4385 4.75712 14.5779C4.43774 14.2989 4.17526 13.7483 4.26017 13.2797Z", fill: "currentColor" }), /* @__PURE__ */ t.createElement("path", { d: "M5.6585 3.27509C6.38805 4.78724 4.92048 5.50226 3.46013 6.21376C2.55064 6.65687 1.64395 7.09863 1.27253 7.73072L1.26172 7.72941C0.426829 5.74626 1.67652 2.26363 4.49341 2.51693C4.91577 2.5549 5.45175 2.84605 5.6585 3.27509Z", fill: "currentColor" }), /* @__PURE__ */ t.createElement("path", { d: "M3.44047 10.7683C3.21506 9.15954 2.98855 7.54285 1.32496 7.76941C0.853036 7.83347 0.410505 8.25325 0.243874 8.6432C-0.867492 11.2439 2.05851 13.5087 4.2026 13.3275L4.20718 13.3176C3.7208 12.769 3.58085 11.7702 3.44047 10.7683Z", fill: "currentColor" })), V = "_helper_1hmne_26", Z = "_info_1hmne_79", R = "_label_1hmne_93", X = "_value_1hmne_97", e = {
8
+ "bank-card": "_bank-card_1hmne_1",
9
+ "logo-wrapper": "_logo-wrapper_1hmne_13",
10
+ "numbers-wrapper": "_numbers-wrapper_1hmne_16",
11
+ helper: V,
12
+ "helper-bin-number": "_helper-bin-number_1hmne_42",
13
+ "helper-bin-range": "_helper-bin-range_1hmne_45",
14
+ "helper-check-digit": "_helper-check-digit_1hmne_48",
15
+ "number-section--02": "_number-section--02_1hmne_56",
16
+ "digit-wrapper": "_digit-wrapper_1hmne_56",
17
+ "bin-range": "_bin-range_1hmne_56",
18
+ "number-section--04": "_number-section--04_1hmne_59",
19
+ "check-digit": "_check-digit_1hmne_59",
20
+ "number-section": "_number-section_1hmne_56",
21
+ "bin-number": "_bin-number_1hmne_70",
22
+ "info-wrapper": "_info-wrapper_1hmne_79",
23
+ info: Z,
24
+ label: R,
25
+ value: X,
26
+ "highlight-bin": "_highlight-bin_1hmne_103",
27
+ "highlight-bin-range": "_highlight-bin-range_1hmne_124",
28
+ "highlight-no-highlight": "_highlight-no-highlight_1hmne_145",
29
+ "bank-card-wrapper": "_bank-card-wrapper_1hmne_150"
30
+ }, D = {
31
+ pt: {
32
+ binNumber: "Número BIN",
33
+ binRange: "Intervalo",
34
+ checkDigit: "Validador",
35
+ name: "Nome",
36
+ cvv: "CVV",
37
+ expiration: "EXP"
38
+ },
39
+ en: {
40
+ binNumber: "BIN Number",
41
+ binRange: "Range",
42
+ checkDigit: "Check Digit",
43
+ name: "Name",
44
+ cvv: "CVV",
45
+ expiration: "EXP"
46
+ }
47
+ // example to add a new language translation
48
+ // es: {
49
+ // binNumber: "BIN Number",
50
+ // binRange: "Range",
51
+ // checkDigit: "Check Digit",
52
+ // name: "Name",
53
+ // cvv: "CVV",
54
+ // expiration: "EXP",
55
+ // },
56
+ }, y = ({
57
+ infos: n,
58
+ numbers: d,
59
+ className: o,
60
+ language: _ = "en",
61
+ translations: u,
62
+ highlight: g,
63
+ noHelpers: c,
64
+ ...N
65
+ }) => {
66
+ const v = { ...D[_], ...u || {} }, m = (h) => v[h], w = E(() => {
67
+ var h, i;
68
+ return n != null && n.expiration ? typeof (n == null ? void 0 : n.expiration) == "string" ? n == null ? void 0 : n.expiration : `${(h = n == null ? void 0 : n.expiration) == null ? void 0 : h.month}/${(i = n == null ? void 0 : n.expiration) == null ? void 0 : i.year}` : "XX/XX";
69
+ }, [n == null ? void 0 : n.expiration]), x = () => {
70
+ const { bin: h, range: i, checkDigit: s } = d, p = h.length <= 6, C = h.padStart(p ? 6 : 8, "0").slice(0, p ? 6 : 8), b = i.padStart(p ? 9 : 7, "0").slice(0, p ? 9 : 7);
71
+ return `${C}${b}${s || "X"}`;
72
+ }, k = () => {
73
+ const h = typeof d == "string", i = h ? d : x(), s = h ? N.isBIN6 : d.bin.length <= 6, p = /* @__PURE__ */ l("span", { className: a(e["number-section"], e["number-section--01"]), children: [
74
+ !c && /* @__PURE__ */ r(
75
+ "span",
76
+ {
77
+ className: a(e.helper, e["bin-number"], e["helper-bin-number"]),
78
+ children: m`binNumber`
79
+ }
80
+ ),
81
+ /* @__PURE__ */ r("span", { className: a(e["digit-wrapper"], !c && e["bin-number"]), children: i[0] }),
82
+ /* @__PURE__ */ r("span", { className: a(e["digit-wrapper"], !c && e["bin-number"]), children: i[1] }),
83
+ /* @__PURE__ */ r("span", { className: a(e["digit-wrapper"], !c && e["bin-number"]), children: i[2] }),
84
+ /* @__PURE__ */ r("span", { className: a(e["digit-wrapper"], !c && e["bin-number"]), children: i[3] })
85
+ ] }), C = /* @__PURE__ */ l("span", { className: a(e["number-section"], e["number-section--02"]), children: [
86
+ /* @__PURE__ */ r("span", { className: a(e["digit-wrapper"], !c && e["bin-number"]), children: i[4] }),
87
+ /* @__PURE__ */ r("span", { className: a(e["digit-wrapper"], !c && e["bin-number"]), children: i[5] }),
88
+ /* @__PURE__ */ l(
89
+ "span",
90
+ {
91
+ className: a(
92
+ e["digit-wrapper"],
93
+ !c && (s ? e["bin-range"] : e["bin-number"])
94
+ ),
95
+ children: [
96
+ s && !c && /* @__PURE__ */ r(
97
+ "span",
98
+ {
99
+ className: a(e.helper, e["bin-range"], e["helper-bin-range"]),
100
+ children: m`binRange`
101
+ }
102
+ ),
103
+ i[6]
104
+ ]
105
+ }
106
+ ),
107
+ /* @__PURE__ */ r(
108
+ "span",
109
+ {
110
+ className: a(
111
+ e["digit-wrapper"],
112
+ !c && (s ? e["bin-range"] : e["bin-number"])
113
+ ),
114
+ children: i[7]
115
+ }
116
+ )
117
+ ] }), b = /* @__PURE__ */ l("span", { className: a(e["number-section"], e["number-section--03"]), children: [
118
+ !s && !c && /* @__PURE__ */ r("span", { className: a(e.helper, e["bin-range"], e["helper-bin-range"]), children: m`binRange` }),
119
+ /* @__PURE__ */ r("span", { className: a(e["digit-wrapper"], !c && e["bin-range"]), children: i[8] }),
120
+ /* @__PURE__ */ r("span", { className: a(e["digit-wrapper"], !c && e["bin-range"]), children: i[9] }),
121
+ /* @__PURE__ */ r("span", { className: a(e["digit-wrapper"], !c && e["bin-range"]), children: i[10] }),
122
+ /* @__PURE__ */ r("span", { className: a(e["digit-wrapper"], !c && e["bin-range"]), children: i[11] })
123
+ ] }), L = /* @__PURE__ */ l("span", { className: a(e["number-section"], e["number-section--04"]), children: [
124
+ /* @__PURE__ */ r("span", { className: a(e["digit-wrapper"], !c && e["bin-range"]), children: i[12] }),
125
+ /* @__PURE__ */ r("span", { className: a(e["digit-wrapper"], !c && e["bin-range"]), children: i[13] }),
126
+ /* @__PURE__ */ r("span", { className: a(e["digit-wrapper"], !c && e["bin-range"]), children: i[14] }),
127
+ /* @__PURE__ */ l("span", { className: a(e["digit-wrapper"], !c && e["check-digit"]), children: [
128
+ !c && /* @__PURE__ */ r(
129
+ "span",
130
+ {
131
+ className: a(e.helper, e["check-digit"], e["helper-check-digit"]),
132
+ children: m`checkDigit`
133
+ }
134
+ ),
135
+ i[15]
136
+ ] })
137
+ ] });
138
+ return [p, C, b, L];
139
+ };
140
+ return /* @__PURE__ */ r("div", { className: e["bank-card-wrapper"], children: /* @__PURE__ */ l("div", { className: a(e["bank-card"], o, g && e[`highlight-${g}`]), children: [
141
+ /* @__PURE__ */ r("div", { className: e["logo-wrapper"], children: /* @__PURE__ */ r(M, {}) }),
142
+ /* @__PURE__ */ r("div", { className: e["numbers-wrapper"], children: k() }),
143
+ /* @__PURE__ */ l("div", { className: e["info-wrapper"], children: [
144
+ /* @__PURE__ */ l("div", { className: e.info, children: [
145
+ /* @__PURE__ */ r("div", { className: e.label, children: m`name` }),
146
+ /* @__PURE__ */ r("div", { className: e.value, children: (n == null ? void 0 : n.name) || "Xxxxx X Xxxx" })
147
+ ] }),
148
+ /* @__PURE__ */ l("div", { className: e.info, children: [
149
+ /* @__PURE__ */ r("div", { className: e.label, children: m`cvv` }),
150
+ /* @__PURE__ */ r("div", { className: e.value, children: (n == null ? void 0 : n.cvv) || "123" })
151
+ ] }),
152
+ /* @__PURE__ */ l("div", { className: e.info, children: [
153
+ /* @__PURE__ */ r("div", { className: e.label, children: m`expiration` }),
154
+ /* @__PURE__ */ r("div", { className: e.value, children: w })
155
+ ] })
156
+ ] })
157
+ ] }) });
158
+ };
159
+ export {
160
+ y as BankCard
161
+ };
@@ -0,0 +1,15 @@
1
+ import { StoryObj } from '@storybook/react';
2
+
3
+ declare const meta: {
4
+ title: string;
5
+ component: ({ infos, numbers, className, language, translations, highlight, noHelpers, ...rest }: import('./BankCard').BankCardProps) => import("react/jsx-runtime").JSX.Element;
6
+ tags: string[];
7
+ parameters: {
8
+ layout: string;
9
+ };
10
+ };
11
+ export default meta;
12
+ type Story = StoryObj<typeof meta>;
13
+ export declare const BankCardNumbersAsObject: Story;
14
+ export declare const BankCardNumbersAsString: Story;
15
+ export declare const BankCardNoHelpers: Story;
@@ -0,0 +1 @@
1
+ export {};
@@ -1,10 +1,9 @@
1
- import '../../assets/Button.css';
2
1
  import { jsx as p, jsxs as l } from "react/jsx-runtime";
3
2
  import { forwardRef as x, useMemo as c } from "react";
4
3
  import { c as v } from "../../clsx-DB4S2d7J.js";
5
4
  import { LoadingSpinner as m } from "../LoadingSpinner/LoadingSpinner.js";
6
5
  import { B as f } from "../../Button-BAljjMv3.js";
7
- const k = "_button_dxo5v_57", t = {
6
+ import '../../assets/Button.css';const k = "_button_dxo5v_57", t = {
8
7
  "u-typography-h1": "_u-typography-h1_dxo5v_1",
9
8
  "u-typography-h2": "_u-typography-h2_dxo5v_8",
10
9
  "u-typography-h3": "_u-typography-h3_dxo5v_15",
@@ -1,9 +1,8 @@
1
- import '../../assets/Checkbox.css';
2
1
  import { jsxs as w, jsx as c } from "react/jsx-runtime";
3
2
  import * as l from "react";
4
3
  import { useState as k, useEffect as i } from "react";
5
4
  import { c as _ } from "../../clsx-DB4S2d7J.js";
6
- const v = (a) => /* @__PURE__ */ l.createElement("svg", { width: 14, height: 10, viewBox: "0 0 14 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a }, /* @__PURE__ */ l.createElement("path", { d: "M13.7063 0.293438C14.0969 0.684062 14.0969 1.31531 13.7063 1.70594L5.70625 9.70594C5.31563 10.0966 4.68437 10.0966 4.29375 9.70594L0.292875 5.70594C-0.097625 5.31531 -0.097625 4.68406 0.292875 4.29344C0.683437 3.90281 1.31656 3.90281 1.70719 4.29344L4.97188 7.58406L12.2937 0.293438C12.6844 -0.0978125 13.3156 -0.0978125 13.7063 0.293438Z", fill: "#F7F7FC" })), N = "_label_xqg5n_65", z = "_checkmark_xqg5n_94", e = {
5
+ import '../../assets/Checkbox.css';const v = (a) => /* @__PURE__ */ l.createElement("svg", { width: 14, height: 10, viewBox: "0 0 14 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a }, /* @__PURE__ */ l.createElement("path", { d: "M13.7063 0.293438C14.0969 0.684062 14.0969 1.31531 13.7063 1.70594L5.70625 9.70594C5.31563 10.0966 4.68437 10.0966 4.29375 9.70594L0.292875 5.70594C-0.097625 5.31531 -0.097625 4.68406 0.292875 4.29344C0.683437 3.90281 1.31656 3.90281 1.70719 4.29344L4.97188 7.58406L12.2937 0.293438C12.6844 -0.0978125 13.3156 -0.0978125 13.7063 0.293438Z", fill: "#F7F7FC" })), N = "_label_xqg5n_65", z = "_checkmark_xqg5n_94", e = {
7
6
  "u-typography-h1": "_u-typography-h1_xqg5n_1",
8
7
  "u-typography-h2": "_u-typography-h2_xqg5n_8",
9
8
  "u-typography-h3": "_u-typography-h3_xqg5n_15",
@@ -4,7 +4,7 @@ declare const meta: {
4
4
  title: string;
5
5
  component: import('react').ForwardRefExoticComponent<import('./Chip').ChipProps & import('react').RefAttributes<unknown>>;
6
6
  tags: string[];
7
- decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
7
+ decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
8
8
  label: import('react').ReactNode;
9
9
  loading?: boolean | undefined;
10
10
  leftAdornment?: import('../Adornment/Adornment').AdornmentProps | undefined;
@@ -5,7 +5,7 @@ declare const meta: {
5
5
  title: string;
6
6
  component: ({ open, onClose, title, subtitle, content, cancelAction, confirmAction, confirmLabel, cancelLabel, }: ConfirmationDialogProps) => import("react/jsx-runtime").JSX.Element;
7
7
  tags: string[];
8
- decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
8
+ decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
9
9
  open: boolean;
10
10
  onClose: () => void;
11
11
  title?: import('react').ReactNode;
@@ -1,9 +1,8 @@
1
- import '../../assets/Description.css';
2
1
  import { jsxs as u, jsx as t } from "react/jsx-runtime";
3
2
  import { c as g } from "../../clsx-DB4S2d7J.js";
4
3
  import { Skeleton as y } from "../Skeleton/Skeleton.js";
5
4
  import { Typography as _ } from "../Typography/Typography.js";
6
- const l = "_container_he0z3_78", a = {
5
+ import '../../assets/Description.css';const l = "_container_he0z3_78", a = {
7
6
  "u-typography-h1": "_u-typography-h1_he0z3_1",
8
7
  "u-typography-h2": "_u-typography-h2_he0z3_8",
9
8
  "u-typography-h3": "_u-typography-h3_he0z3_15",
@@ -10,7 +10,7 @@ declare const meta: {
10
10
  Actions: import('react').FunctionComponent<import('./Actions').DialogActionProps>;
11
11
  };
12
12
  tags: string[];
13
- decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
13
+ decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
14
14
  color?: string | undefined;
15
15
  ref?: ((instance: HTMLDivElement | null) => void) | import('react').RefObject<HTMLDivElement> | null | undefined;
16
16
  children: import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>> & import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<unknown>>;
@@ -1,9 +1,8 @@
1
- import '../../assets/EllipsisTooltip.css';
2
1
  import { jsx as s, jsxs as d, Fragment as f } from "react/jsx-runtime";
3
2
  import { useState as g } from "react";
4
3
  import { c as v } from "../../clsx-DB4S2d7J.js";
5
4
  import { Tooltip as x } from "../Tooltip/Tooltip.js";
6
- const H = {
5
+ import '../../assets/EllipsisTooltip.css';const H = {
7
6
  "ellipsis-tooltip": "_ellipsis-tooltip_1ov97_1"
8
7
  }, W = ({
9
8
  lineClamp: e = 1,
@@ -8,7 +8,7 @@ declare const meta: {
8
8
  parameters: {
9
9
  layout: string;
10
10
  };
11
- decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
11
+ decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
12
12
  children: import('react').ReactNode;
13
13
  title: import('react').ReactNode;
14
14
  style?: import('react').CSSProperties | undefined;