@integrigo/integrigo-ui 1.6.16-c → 1.6.16-e

Sign up to get free protection for your applications and to get access to all the features.
Files changed (18) hide show
  1. package/lib/index.d.ts +1 -0
  2. package/lib/index.esm.js +1 -1
  3. package/lib/index.js +1 -1
  4. package/lib/src/components/atoms/Chip/Chip.d.ts +3 -3
  5. package/lib/src/components/atoms/Dot/Dot.stories.d.ts +3 -3
  6. package/lib/src/components/atoms/Icon/Icon.d.ts +1 -0
  7. package/lib/src/components/atoms/Icon/Icon.stories.d.ts +2 -2
  8. package/lib/src/components/atoms/Icon/icons/CalendarSlash.d.ts +3 -0
  9. package/lib/src/components/molecules/Checkbox/Checkbox.stories.d.ts +4 -4
  10. package/lib/src/components/molecules/Input/Input.d.ts +1 -1
  11. package/lib/src/components/molecules/Input/Input.stories.d.ts +9 -9
  12. package/lib/src/components/molecules/Radio/Radio.stories.d.ts +4 -4
  13. package/package.json +1 -1
  14. package/src/components/atoms/Chip/Chip.tsx +93 -66
  15. package/src/components/atoms/Icon/Icon.tsx +2 -0
  16. package/src/components/atoms/Icon/icons/CalendarSlash.tsx +9 -0
  17. package/src/components/atoms/Initials/Initials.tsx +1 -0
  18. package/src/components/molecules/Profile/Profile.tsx +12 -3
package/lib/src/components/atoms/Chip/Chip.d.ts CHANGED
@@ -1,11 +1,11 @@
1
- import { MouseEvent, FC } from 'react';
2
- import { IconType } from '../Icon';
1
+ import { MouseEvent, FC } from "react";
2
+ import { IconType } from "../Icon";
3
3
  declare type OnClickFunctionType = (e: MouseEvent<HTMLDivElement>) => void;
4
4
  export interface ChipProps {
5
5
  iconLeft?: IconType;
6
6
  iconRight?: IconType;
7
7
  size?: ChipSize;
8
- label: string;
8
+ label: React.ReactNode;
9
9
  variant?: ChipVariant;
10
10
  onClick?: OnClickFunctionType;
11
11
  }
package/lib/src/components/atoms/Dot/Dot.stories.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  import { ComponentMeta, ComponentStory } from '@storybook/react';
3
3
  declare const _default: ComponentMeta<import("react").FCS<{
4
4
  icon?: (import("react").SVGProps<SVGSVGElement> & {
5
- type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users";
5
+ type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users";
6
6
  size?: "big" | "small" | "ultra-small" | "medium" | {
7
7
  width: number;
8
8
  height: number;
@@ -16,7 +16,7 @@ declare const _default: ComponentMeta<import("react").FCS<{
16
16
  export default _default;
17
17
  export declare const Icon: ComponentStory<import("react").FCS<{
18
18
  icon?: (import("react").SVGProps<SVGSVGElement> & {
19
- type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users";
19
+ type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users";
20
20
  size?: "big" | "small" | "ultra-small" | "medium" | {
21
21
  width: number;
22
22
  height: number;
@@ -29,7 +29,7 @@ export declare const Icon: ComponentStory<import("react").FCS<{
29
29
  }>>;
30
30
  export declare const Basic: ComponentStory<import("react").FCS<{
31
31
  icon?: (import("react").SVGProps<SVGSVGElement> & {
32
- type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users";
32
+ type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users";
33
33
  size?: "big" | "small" | "ultra-small" | "medium" | {
34
34
  width: number;
35
35
  height: number;
package/lib/src/components/atoms/Icon/Icon.d.ts CHANGED
@@ -5,6 +5,7 @@ export declare const iconHashMap: {
5
5
  "arrow-right": React.FCS<{}>;
6
6
  bars: React.FCS<{}>;
7
7
  bell: React.FCS<{}>;
8
+ "calendar-slash": React.FCS<{}>;
8
9
  "check-circle": React.FCS<{}>;
9
10
  "check-square": React.FCS<{}>;
10
11
  "clipboad-notes": React.FCS<{}>;
package/lib/src/components/atoms/Icon/Icon.stories.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { ComponentStory, ComponentMeta } from '@storybook/react';
3
3
  declare const _default: ComponentMeta<React.FCS<React.SVGProps<SVGSVGElement> & {
4
- type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users";
4
+ type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users";
5
5
  size?: "big" | "small" | "ultra-small" | "medium" | {
6
6
  width: number;
7
7
  height: number;
@@ -9,7 +9,7 @@ declare const _default: ComponentMeta<React.FCS<React.SVGProps<SVGSVGElement> &
9
9
  }>>;
10
10
  export default _default;
11
11
  export declare const SimpleIcon: ComponentStory<React.FCS<React.SVGProps<SVGSVGElement> & {
12
- type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users";
12
+ type: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users";
13
13
  size?: "big" | "small" | "ultra-small" | "medium" | {
14
14
  width: number;
15
15
  height: number;
package/lib/src/components/atoms/Icon/icons/CalendarSlash.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import React from "react";
2
+ declare const CalendarSlash: React.FCS;
3
+ export default CalendarSlash;
package/lib/src/components/molecules/Checkbox/Checkbox.stories.d.ts CHANGED
@@ -1,19 +1,19 @@
1
1
  import React from 'react';
2
2
  import { ComponentStory, ComponentMeta } from '@storybook/react';
3
- declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
3
+ declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
4
4
  size?: "s" | "m" | "l" | "xl" | undefined;
5
5
  label?: string | undefined;
6
6
  } & React.RefAttributes<HTMLInputElement>>>;
7
7
  export default _default;
8
- export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
8
+ export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
9
9
  size?: "s" | "m" | "l" | "xl" | undefined;
10
10
  label?: string | undefined;
11
11
  } & React.RefAttributes<HTMLInputElement>>>;
12
- export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
12
+ export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
13
13
  size?: "s" | "m" | "l" | "xl" | undefined;
14
14
  label?: string | undefined;
15
15
  } & React.RefAttributes<HTMLInputElement>>>;
16
- export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
16
+ export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
17
17
  size?: "s" | "m" | "l" | "xl" | undefined;
18
18
  label?: string | undefined;
19
19
  } & React.RefAttributes<HTMLInputElement>>>;
package/lib/src/components/molecules/Input/Input.d.ts CHANGED
@@ -13,7 +13,7 @@ export declare type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement
13
13
  export declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & FieldProps<any, any> & {
14
14
  label?: string | undefined;
15
15
  validationType?: ValidationType | undefined;
16
- icon?: "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "close" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
16
+ icon?: "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "close" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
17
17
  size?: "xl" | "l" | "m" | "s" | undefined;
18
18
  direction?: "ltr" | "rtl" | undefined;
19
19
  onIconClick?: (() => void) | undefined;
package/lib/src/components/molecules/Input/Input.stories.d.ts CHANGED
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
3
3
  declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
4
4
  label?: string | undefined;
5
5
  validationType?: import("../../../types/validation").ValidationType | undefined;
6
- icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
6
+ icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
7
7
  size?: "s" | "m" | "l" | "xl" | undefined;
8
8
  direction?: "rtl" | "ltr" | undefined;
9
9
  onIconClick?: (() => void) | undefined;
@@ -12,7 +12,7 @@ export default _default;
12
12
  export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
13
13
  label?: string | undefined;
14
14
  validationType?: import("../../../types/validation").ValidationType | undefined;
15
- icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
15
+ icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
16
16
  size?: "s" | "m" | "l" | "xl" | undefined;
17
17
  direction?: "rtl" | "ltr" | undefined;
18
18
  onIconClick?: (() => void) | undefined;
@@ -20,7 +20,7 @@ export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<
20
20
  export declare const Success: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
21
21
  label?: string | undefined;
22
22
  validationType?: import("../../../types/validation").ValidationType | undefined;
23
- icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
23
+ icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
24
24
  size?: "s" | "m" | "l" | "xl" | undefined;
25
25
  direction?: "rtl" | "ltr" | undefined;
26
26
  onIconClick?: (() => void) | undefined;
@@ -28,7 +28,7 @@ export declare const Success: ComponentStory<React.ForwardRefExoticComponent<Omi
28
28
  export declare const Error: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
29
29
  label?: string | undefined;
30
30
  validationType?: import("../../../types/validation").ValidationType | undefined;
31
- icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
31
+ icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
32
32
  size?: "s" | "m" | "l" | "xl" | undefined;
33
33
  direction?: "rtl" | "ltr" | undefined;
34
34
  onIconClick?: (() => void) | undefined;
@@ -36,7 +36,7 @@ export declare const Error: ComponentStory<React.ForwardRefExoticComponent<Omit<
36
36
  export declare const Disabled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
37
37
  label?: string | undefined;
38
38
  validationType?: import("../../../types/validation").ValidationType | undefined;
39
- icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
39
+ icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
40
40
  size?: "s" | "m" | "l" | "xl" | undefined;
41
41
  direction?: "rtl" | "ltr" | undefined;
42
42
  onIconClick?: (() => void) | undefined;
@@ -44,7 +44,7 @@ export declare const Disabled: ComponentStory<React.ForwardRefExoticComponent<Om
44
44
  export declare const IconLTR: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
45
45
  label?: string | undefined;
46
46
  validationType?: import("../../../types/validation").ValidationType | undefined;
47
- icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
47
+ icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
48
48
  size?: "s" | "m" | "l" | "xl" | undefined;
49
49
  direction?: "rtl" | "ltr" | undefined;
50
50
  onIconClick?: (() => void) | undefined;
@@ -52,7 +52,7 @@ export declare const IconLTR: ComponentStory<React.ForwardRefExoticComponent<Omi
52
52
  export declare const IconRTL: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
53
53
  label?: string | undefined;
54
54
  validationType?: import("../../../types/validation").ValidationType | undefined;
55
- icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
55
+ icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
56
56
  size?: "s" | "m" | "l" | "xl" | undefined;
57
57
  direction?: "rtl" | "ltr" | undefined;
58
58
  onIconClick?: (() => void) | undefined;
@@ -60,7 +60,7 @@ export declare const IconRTL: ComponentStory<React.ForwardRefExoticComponent<Omi
60
60
  export declare const DisabledIcon: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
61
61
  label?: string | undefined;
62
62
  validationType?: import("../../../types/validation").ValidationType | undefined;
63
- icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
63
+ icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
64
64
  size?: "s" | "m" | "l" | "xl" | undefined;
65
65
  direction?: "rtl" | "ltr" | undefined;
66
66
  onIconClick?: (() => void) | undefined;
@@ -68,7 +68,7 @@ export declare const DisabledIcon: ComponentStory<React.ForwardRefExoticComponen
68
68
  export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("formik").FieldProps<any, any> & {
69
69
  label?: string | undefined;
70
70
  validationType?: import("../../../types/validation").ValidationType | undefined;
71
- icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
71
+ icon?: "close" | "angle-down" | "arrow-left" | "arrow-right" | "bars" | "bell" | "calendar-slash" | "check-circle" | "check-square" | "clipboad-notes" | "create-dashboard" | "dice-five" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "envelope" | "exclamation-circle" | "exclamation-triangle" | "exit" | "facebook" | "home" | "image-edit" | "instagram" | "linkedin" | "lock" | "minus" | "phone" | "plus" | "process" | "points-circle" | "redo" | "setting" | "user" | "user-circle" | "user-plus" | "users" | undefined;
72
72
  size?: "s" | "m" | "l" | "xl" | undefined;
73
73
  direction?: "rtl" | "ltr" | undefined;
74
74
  onIconClick?: (() => void) | undefined;
package/lib/src/components/molecules/Radio/Radio.stories.d.ts CHANGED
@@ -1,20 +1,20 @@
1
1
  import React from 'react';
2
2
  import { ComponentMeta, ComponentStory } from '@storybook/react';
3
3
  import { Size } from './Radio';
4
- declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
4
+ declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
5
5
  size?: Size | undefined;
6
6
  label?: string | undefined;
7
7
  } & React.RefAttributes<HTMLInputElement>>>;
8
8
  export default _default;
9
- export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
9
+ export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
10
10
  size?: Size | undefined;
11
11
  label?: string | undefined;
12
12
  } & React.RefAttributes<HTMLInputElement>>>;
13
- export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
13
+ export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
14
14
  size?: Size | undefined;
15
15
  label?: string | undefined;
16
16
  } & React.RefAttributes<HTMLInputElement>>>;
17
- export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
17
+ export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
18
18
  size?: Size | undefined;
19
19
  label?: string | undefined;
20
20
  } & React.RefAttributes<HTMLInputElement>>>;
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "registry": "https://npm.pkg.github.com/integrigo"
5
5
  },
6
- "version": "1.6.16c",
6
+ "version": "1.6.16e",
7
7
  "main": "lib/index.js",
8
8
  "module": "lib/index.esm.js",
9
9
  "types": "lib/index.d.ts",
package/src/components/atoms/Chip/Chip.tsx CHANGED
@@ -1,31 +1,31 @@
1
- import { MouseEvent, FC } from 'react';
2
- import styled from 'styled-components';
3
- import { Icon, IconType } from '../Icon';
1
+ import { MouseEvent, FC } from "react";
2
+ import styled from "styled-components";
3
+ import { Icon, IconType } from "../Icon";
4
4
 
5
5
  type OnClickFunctionType = (e: MouseEvent<HTMLDivElement>) => void;
6
6
 
7
7
  export interface ChipProps {
8
- iconLeft?: IconType,
9
- iconRight?: IconType,
10
- size?: ChipSize,
11
- label: string;
8
+ iconLeft?: IconType;
9
+ iconRight?: IconType;
10
+ size?: ChipSize;
11
+ label: React.ReactNode;
12
12
  variant?: ChipVariant;
13
13
  onClick?: OnClickFunctionType;
14
14
  }
15
15
 
16
16
  export enum ChipVariant {
17
- transparent = 'transparent',
18
- white = 'white',
19
- primary = 'primary',
20
- secondary = 'secondary',
21
- grey = 'grey'
17
+ transparent = "transparent",
18
+ white = "white",
19
+ primary = "primary",
20
+ secondary = "secondary",
21
+ grey = "grey",
22
22
  }
23
23
 
24
24
  export enum ChipSize {
25
- xl = 'xl',
26
- l = 'l',
27
- m = 'm',
28
- s = 's',
25
+ xl = "xl",
26
+ l = "l",
27
+ m = "m",
28
+ s = "s",
29
29
  }
30
30
 
31
31
  const sizeVariant = {
@@ -34,72 +34,77 @@ const sizeVariant = {
34
34
  width: 25,
35
35
  height: 25,
36
36
  },
37
- gap: '12.5px',
38
- paddingY: '12.5px',
39
- paddingX: '17.5px',
40
- border: '2px',
41
- fontSize: '20px',
42
- lineHeight: '30px',
37
+ gap: "12.5px",
38
+ paddingY: "12.5px",
39
+ paddingX: "17.5px",
40
+ border: "2px",
41
+ fontSize: "20px",
42
+ lineHeight: "30px",
43
43
  },
44
44
  l: {
45
45
  iconSize: {
46
46
  width: 20,
47
47
  height: 20,
48
48
  },
49
- gap: '10px',
50
- paddingY: '10px',
51
- paddingX: '14px',
52
- border: '2px',
53
- fontSize: '16px',
54
- lineHeight: '24px',
49
+ gap: "10px",
50
+ paddingY: "10px",
51
+ paddingX: "14px",
52
+ border: "2px",
53
+ fontSize: "16px",
54
+ lineHeight: "24px",
55
55
  },
56
56
  m: {
57
57
  iconSize: {
58
58
  width: 15,
59
59
  height: 15,
60
60
  },
61
- gap: '7.5px',
62
- paddingY: '7.5px',
63
- paddingX: '10.5px',
64
- border: '2px',
65
- fontSize: '12px',
66
- lineHeight: '18px',
61
+ gap: "7.5px",
62
+ paddingY: "7.5px",
63
+ paddingX: "10.5px",
64
+ border: "2px",
65
+ fontSize: "12px",
66
+ lineHeight: "18px",
67
67
  },
68
68
  s: {
69
69
  iconSize: {
70
70
  width: 10,
71
71
  height: 10,
72
72
  },
73
- gap: '5px',
74
- paddingY: '5px',
75
- paddingX: '7px',
76
- border: '1.5px',
77
- fontSize: '8px',
78
- lineHeight: '12px',
73
+ gap: "5px",
74
+ paddingY: "5px",
75
+ paddingX: "7px",
76
+ border: "1.5px",
77
+ fontSize: "8px",
78
+ lineHeight: "12px",
79
79
  },
80
80
  };
81
81
 
82
82
  const colorVariant = {
83
83
  primary: {
84
- fontColor: 'var(--shades-of-grey-0)',
84
+ fontColor: "var(--shades-of-grey-0)",
85
85
  },
86
86
  secondary: {
87
- fontColor: 'var(--color-orange)',
87
+ fontColor: "var(--color-orange)",
88
88
  },
89
89
  transparent: {
90
- fontColor: 'var(--shades-of-grey-100)',
90
+ fontColor: "var(--shades-of-grey-100)",
91
91
  },
92
92
  white: {
93
- fontColor: 'var(--shades-of-grey-100);',
93
+ fontColor: "var(--shades-of-grey-100);",
94
94
  },
95
95
  grey: {
96
- fontColor: 'var(--shades-of-grey-100)',
97
- }
96
+ fontColor: "var(--shades-of-grey-100)",
97
+ },
98
98
  };
99
99
 
100
100
  export const Chip: FC<ChipProps> = (props: ChipProps) => {
101
101
  const {
102
- iconLeft, iconRight, label, size = ChipSize.m, variant = ChipVariant.primary, onClick,
102
+ iconLeft,
103
+ iconRight,
104
+ label,
105
+ size = ChipSize.m,
106
+ variant = ChipVariant.primary,
107
+ onClick,
103
108
  } = props;
104
109
 
105
110
  return (
@@ -136,7 +141,9 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
136
141
  border-color: var(--color-orange);
137
142
  border-style: solid;
138
143
 
139
- ${clickable && `
144
+ ${
145
+ clickable &&
146
+ `
140
147
  cursor: pointer;
141
148
 
142
149
  &:hover {
@@ -146,11 +153,14 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
146
153
  &:active {
147
154
  opacity: 0.65;
148
155
  }
149
- `}
156
+ `
157
+ }
150
158
  `;
151
159
  case ChipVariant.transparent:
152
160
  return `
153
- ${clickable && `
161
+ ${
162
+ clickable &&
163
+ `
154
164
  &:hover {
155
165
  background-color: var(--shades-of-grey-40);
156
166
  }
@@ -158,13 +168,16 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
158
168
  &:active {
159
169
  background-color: var(--shades-of-grey-60);
160
170
  }
161
- `}
171
+ `
172
+ }
162
173
  `;
163
174
  case ChipVariant.grey:
164
175
  return `
165
176
  background-color: var(--shades-of-grey-20);
166
177
 
167
- ${clickable && `
178
+ ${
179
+ clickable &&
180
+ `
168
181
  &:hover {
169
182
  background-color: var(--shades-of-grey-40);
170
183
  }
@@ -172,7 +185,8 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
172
185
  &:active {
173
186
  background-color: var(--shades-of-grey-40);
174
187
  }
175
- `}
188
+ `
189
+ }
176
190
  `;
177
191
  case ChipVariant.white:
178
192
  return `
@@ -180,7 +194,9 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
180
194
  border-color: var(--shades-of-grey-40);
181
195
  border-style: solid;
182
196
 
183
- ${clickable && `
197
+ ${
198
+ clickable &&
199
+ `
184
200
  &:hover {
185
201
  background-color: var(--shades-of-grey-20);
186
202
  }
@@ -188,7 +204,8 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
188
204
  &:active {
189
205
  border-color: var(--shades-of-grey-100);
190
206
  }
191
- `}
207
+ `
208
+ }
192
209
  `;
193
210
  case ChipVariant.primary:
194
211
  default:
@@ -197,7 +214,9 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
197
214
  border-color: var(--color-orange);
198
215
  border-style: solid;
199
216
 
200
- ${clickable && `
217
+ ${
218
+ clickable &&
219
+ `
201
220
  &:hover {
202
221
  opacity: 0.8;
203
222
  }
@@ -205,27 +224,35 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
205
224
  &:active {
206
225
  opacity: 0.65;
207
226
  }
208
- `}
227
+ `
228
+ }
209
229
  `;
210
230
  }
211
231
  };
212
232
 
213
- Chip.displayName = 'Chip';
233
+ Chip.displayName = "Chip";
214
234
 
215
- const ChipWrapper = styled.div<{ size: ChipSize, variant: ChipVariant, onClick?: OnClickFunctionType }>`
235
+ const ChipWrapper = styled.div<{
236
+ size: ChipSize;
237
+ variant: ChipVariant;
238
+ onClick?: OnClickFunctionType;
239
+ }>`
216
240
  border-radius: 100px;
217
241
  display: flex;
218
242
  justify-content: center;
219
243
  width: min-content;
220
-
244
+
221
245
  ${(p) => `
222
246
  border-width: ${sizeVariant[p.size].border};
223
247
  padding: ${sizeVariant[p.size].paddingY} ${sizeVariant[p.size].paddingX};
224
248
  color: ${colorVariant[p.variant].fontColor};
225
- ${getVariantStyles(p.variant, typeof p.onClick === 'function')}
226
- ${typeof p.onClick === 'function' && `
249
+ ${getVariantStyles(p.variant, typeof p.onClick === "function")}
250
+ ${
251
+ typeof p.onClick === "function" &&
252
+ `
227
253
  cursor: pointer;
228
- `}
254
+ `
255
+ }
229
256
  `}
230
257
  `;
231
258
 
@@ -234,10 +261,10 @@ const IconWrapper = styled.span`
234
261
  align-items: center;
235
262
  `;
236
263
 
237
- IconWrapper.displayName = 'IconWrapper';
264
+ IconWrapper.displayName = "IconWrapper";
238
265
 
239
266
  const Text = styled.span<{
240
- size: ChipSize
267
+ size: ChipSize;
241
268
  }>`
242
269
  color: inherit;
243
270
  font-weight: bold;
@@ -248,4 +275,4 @@ const Text = styled.span<{
248
275
  `}
249
276
  `;
250
277
 
251
- Text.displayName = 'Text';
278
+ Text.displayName = "Text";
package/src/components/atoms/Icon/Icon.tsx CHANGED
@@ -6,6 +6,7 @@ import ArrowLeft from "./icons/ArrowLeft";
6
6
  import ArrowRight from "./icons/ArrowRight";
7
7
  import Bars from "./icons/Bars";
8
8
  import Bell from "./icons/Bell";
9
+ import CalendarSlash from "./icons/CalendarSlash";
9
10
  import CheckCircle from "./icons/CheckCircle";
10
11
  import CheckSquare from "./icons/CheckSquare";
11
12
  import ClipboardNotes from "./icons/ClipboardNotes";
@@ -43,6 +44,7 @@ export const iconHashMap = {
43
44
  "arrow-right": ArrowRight,
44
45
  bars: Bars,
45
46
  bell: Bell,
47
+ "calendar-slash": CalendarSlash,
46
48
  "check-circle": CheckCircle,
47
49
  "check-square": CheckSquare,
48
50
  "clipboad-notes": ClipboardNotes,
package/src/components/atoms/Icon/icons/CalendarSlash.tsx ADDED
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+
3
+ const CalendarSlash: React.FCS = (props) => (
4
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
5
+ <path d="M11.6599 7H14.9999V8C14.9999 8.26522 15.1053 8.51957 15.2928 8.70711C15.4804 8.89465 15.7347 9 15.9999 9C16.2652 9 16.5195 8.89465 16.707 8.70711C16.8946 8.51957 16.9999 8.26522 16.9999 8V7H17.9999C18.2652 7 18.5195 7.10536 18.707 7.2929C18.8946 7.48043 18.9999 7.73479 18.9999 8V11H17.6599C17.3947 11 17.1404 11.1054 16.9528 11.2929C16.7653 11.4804 16.6599 11.7348 16.6599 12C16.6599 12.2652 16.7653 12.5196 16.9528 12.7071C17.1404 12.8946 17.3947 13 17.6599 13H18.9999V14.34C18.9999 14.6052 19.1053 14.8596 19.2928 15.0471C19.4804 15.2346 19.7347 15.34 19.9999 15.34C20.2652 15.34 20.5195 15.2346 20.707 15.0471C20.8946 14.8596 20.9999 14.6052 20.9999 14.34V8C20.9999 7.20435 20.6839 6.44129 20.1213 5.87868C19.5587 5.31607 18.7956 5 17.9999 5H16.9999V4C16.9999 3.73479 16.8946 3.48043 16.707 3.2929C16.5195 3.10536 16.2652 3 15.9999 3C15.7347 3 15.4804 3.10536 15.2928 3.2929C15.1053 3.48043 14.9999 3.73479 14.9999 4V5H11.6599C11.3947 5 11.1404 5.10536 10.9528 5.2929C10.7653 5.48043 10.6599 5.73479 10.6599 6C10.6599 6.26522 10.7653 6.51957 10.9528 6.70711C11.1404 6.89465 11.3947 7 11.6599 7ZM21.7099 20.29L20.1099 18.69L3.70994 2.29C3.6167 2.19676 3.50601 2.1228 3.38419 2.07234C3.26237 2.02188 3.1318 1.99591 2.99994 1.99591C2.86808 1.99591 2.73751 2.02188 2.61569 2.07234C2.49387 2.1228 2.38318 2.19676 2.28994 2.29C2.10164 2.47831 1.99585 2.7337 1.99585 3C1.99585 3.2663 2.10164 3.5217 2.28994 3.71L4.19994 5.61C3.8287 5.88843 3.52711 6.24918 3.31889 6.66389C3.11067 7.0786 3.00149 7.53596 2.99994 8V18C2.99994 18.7957 3.31601 19.5587 3.87862 20.1213C4.44123 20.6839 5.20429 21 5.99994 21H17.9999C18.4469 20.9974 18.8877 20.8949 19.2899 20.7L20.2899 21.7C20.3829 21.7937 20.4935 21.8681 20.6154 21.9189C20.7372 21.9697 20.8679 21.9958 20.9999 21.9958C21.132 21.9958 21.2627 21.9697 21.3845 21.9189C21.5064 21.8681 21.617 21.7937 21.7099 21.7C21.8962 21.5126 22.0007 21.2592 22.0007 20.995C22.0007 20.7308 21.8962 20.4774 21.7099 20.29ZM4.99994 8C5.00207 7.7962 5.06642 7.59791 5.18438 7.4317C5.30234 7.26549 5.46827 7.13929 5.65994 7.07L9.58994 11H4.99994V8ZM5.99994 19C5.73472 19 5.48037 18.8946 5.29283 18.7071C5.1053 18.5196 4.99994 18.2652 4.99994 18V13H11.5899L17.5899 19H5.99994Z" />
6
+ </svg>
7
+ );
8
+
9
+ export default CalendarSlash;
package/src/components/atoms/Initials/Initials.tsx CHANGED
@@ -27,6 +27,7 @@ const Root = styled.div<{ size: number, color: string }>`
27
27
  background-color: ${p => p.color};
28
28
  color: var(--color-white);
29
29
  display: flex;
30
+ font-size: ${p => `calc(${p.size}px / 2)`};
30
31
  align-items: center;
31
32
  justify-content: center;
32
33
  text-transform: uppercase;