@bikdotai/bik-component-library 0.0.4 → 0.0.5-beta

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 (187) hide show
  1. package/package.json +6 -1
  2. package/dist/cjs/_virtual/_tslib.js +0 -1
  3. package/dist/cjs/assets/icons/check.svg.js +0 -1
  4. package/dist/cjs/assets/icons/errorInfo.svg.js +0 -1
  5. package/dist/cjs/bundle.css +0 -621
  6. package/dist/cjs/components/TypographyStyle.d.ts +0 -15
  7. package/dist/cjs/components/TypographyStyle.js +0 -88
  8. package/dist/cjs/components/button/Button.d.ts +0 -3
  9. package/dist/cjs/components/button/Button.js +0 -1
  10. package/dist/cjs/components/button/Button.styled.d.ts +0 -13
  11. package/dist/cjs/components/button/Button.styled.js +0 -1
  12. package/dist/cjs/components/button/index.d.ts +0 -1
  13. package/dist/cjs/components/button/model.d.ts +0 -57
  14. package/dist/cjs/components/button/themes.d.ts +0 -18
  15. package/dist/cjs/components/button/themes.js +0 -1
  16. package/dist/cjs/components/checkBox/CheckBox.d.ts +0 -9
  17. package/dist/cjs/components/checkBox/CheckBox.js +0 -1
  18. package/dist/cjs/components/checkBox/CheckBox.styled.d.ts +0 -7
  19. package/dist/cjs/components/checkBox/CheckBox.styled.js +0 -26
  20. package/dist/cjs/components/checkBox/index.d.ts +0 -1
  21. package/dist/cjs/components/icon-button/IconButton.d.ts +0 -3
  22. package/dist/cjs/components/icon-button/IconButton.js +0 -1
  23. package/dist/cjs/components/icon-button/IconButton.styled.d.ts +0 -6
  24. package/dist/cjs/components/icon-button/IconButton.styled.js +0 -3
  25. package/dist/cjs/components/icon-button/index.d.ts +0 -1
  26. package/dist/cjs/components/icon-button/model.d.ts +0 -37
  27. package/dist/cjs/components/icon-button/theme.d.ts +0 -3
  28. package/dist/cjs/components/icon-button/theme.js +0 -1
  29. package/dist/cjs/components/input/Input.d.ts +0 -36
  30. package/dist/cjs/components/input/Input.styled.d.ts +0 -114
  31. package/dist/cjs/components/input/index.d.ts +0 -1
  32. package/dist/cjs/components/list-item/ListItem.d.ts +0 -16
  33. package/dist/cjs/components/list-item/ListItem.js +0 -1
  34. package/dist/cjs/components/list-item/ListItem.styled.d.ts +0 -9
  35. package/dist/cjs/components/list-item/ListItem.styled.js +0 -1
  36. package/dist/cjs/components/list-item/index.d.ts +0 -1
  37. package/dist/cjs/components/list-item/themes.d.ts +0 -3
  38. package/dist/cjs/components/list-item/themes.js +0 -1
  39. package/dist/cjs/components/pagination/Pagination.d.ts +0 -9
  40. package/dist/cjs/components/pagination/Pagination.js +0 -1
  41. package/dist/cjs/components/pagination/Pagination.styled.d.ts +0 -5
  42. package/dist/cjs/components/pagination/Pagination.styled.js +0 -1
  43. package/dist/cjs/components/pagination/index.d.ts +0 -1
  44. package/dist/cjs/components/radioButton/RadioButton.d.ts +0 -8
  45. package/dist/cjs/components/radioButton/RadioButton.js +0 -1
  46. package/dist/cjs/components/radioButton/RadioButton.styled.d.ts +0 -7
  47. package/dist/cjs/components/radioButton/RadioButton.styled.js +0 -20
  48. package/dist/cjs/components/radioButton/index.d.ts +0 -1
  49. package/dist/cjs/components/sample-button/SampleButton.d.ts +0 -18
  50. package/dist/cjs/components/sample-button/SampleButton.styled.d.ts +0 -9
  51. package/dist/cjs/components/sample-button/index.d.ts +0 -1
  52. package/dist/cjs/components/sample-button/themes.d.ts +0 -2
  53. package/dist/cjs/components/spinner/Spinner.d.ts +0 -6
  54. package/dist/cjs/components/spinner/Spinner.js +0 -1
  55. package/dist/cjs/components/spinner/index.d.ts +0 -1
  56. package/dist/cjs/components/spinner/model.d.ts +0 -13
  57. package/dist/cjs/components/spinner/themes.d.ts +0 -3
  58. package/dist/cjs/components/spinner/themes.js +0 -1
  59. package/dist/cjs/components/stepper/Stepper.d.ts +0 -22
  60. package/dist/cjs/components/stepper/Stepper.js +0 -1
  61. package/dist/cjs/components/stepper/Stepper.styled.d.ts +0 -6
  62. package/dist/cjs/components/stepper/Stepper.styled.js +0 -83
  63. package/dist/cjs/components/stepper/StepperService.d.ts +0 -4
  64. package/dist/cjs/components/stepper/WorkingStepper.d.ts +0 -15
  65. package/dist/cjs/components/stepper/index.d.ts +0 -1
  66. package/dist/cjs/components/stepper/themes.d.ts +0 -18
  67. package/dist/cjs/components/stepper/themes.js +0 -1
  68. package/dist/cjs/components/tag/Tag.d.ts +0 -6
  69. package/dist/cjs/components/tag/Tag.js +0 -1
  70. package/dist/cjs/components/tag/Tag.styled.d.ts +0 -6
  71. package/dist/cjs/components/tag/Tag.styled.js +0 -26
  72. package/dist/cjs/components/tag/index.d.ts +0 -1
  73. package/dist/cjs/components/tag/model.d.ts +0 -34
  74. package/dist/cjs/components/tag/themes.d.ts +0 -6
  75. package/dist/cjs/components/tag/themes.js +0 -1
  76. package/dist/cjs/components/toaster/Toaster.d.ts +0 -27
  77. package/dist/cjs/components/toaster/Toaster.js +0 -1
  78. package/dist/cjs/components/toaster/Toaster.styled.d.ts +0 -4
  79. package/dist/cjs/components/toaster/Toaster.styled.js +0 -35
  80. package/dist/cjs/components/toaster/index.d.ts +0 -1
  81. package/dist/cjs/components/tooltips/Tooltip.d.ts +0 -10
  82. package/dist/cjs/components/tooltips/Tooltip.js +0 -1
  83. package/dist/cjs/components/tooltips/TooltipInternal.d.ts +0 -10
  84. package/dist/cjs/components/tooltips/TooltipInternal.js +0 -1
  85. package/dist/cjs/components/tooltips/index.d.ts +0 -1
  86. package/dist/cjs/constants/Theme.d.ts +0 -587
  87. package/dist/cjs/constants/Theme.js +0 -1
  88. package/dist/cjs/constants/breakpoints.d.ts +0 -6
  89. package/dist/cjs/constants/colors.d.ts +0 -7
  90. package/dist/cjs/constants/spacing.d.ts +0 -2
  91. package/dist/cjs/index.d.ts +0 -12
  92. package/dist/cjs/index.js +0 -1
  93. package/dist/cjs/utils/classNames.d.ts +0 -7
  94. package/dist/cjs/utils/rgba.d.ts +0 -8
  95. package/dist/esm/_virtual/_tslib.js +0 -1
  96. package/dist/esm/assets/icons/check.svg.js +0 -1
  97. package/dist/esm/assets/icons/errorInfo.svg.js +0 -1
  98. package/dist/esm/bundle.css +0 -621
  99. package/dist/esm/components/TypographyStyle.d.ts +0 -15
  100. package/dist/esm/components/TypographyStyle.js +0 -88
  101. package/dist/esm/components/button/Button.d.ts +0 -3
  102. package/dist/esm/components/button/Button.js +0 -1
  103. package/dist/esm/components/button/Button.styled.d.ts +0 -13
  104. package/dist/esm/components/button/Button.styled.js +0 -1
  105. package/dist/esm/components/button/index.d.ts +0 -1
  106. package/dist/esm/components/button/model.d.ts +0 -57
  107. package/dist/esm/components/button/themes.d.ts +0 -18
  108. package/dist/esm/components/button/themes.js +0 -1
  109. package/dist/esm/components/checkBox/CheckBox.d.ts +0 -9
  110. package/dist/esm/components/checkBox/CheckBox.js +0 -1
  111. package/dist/esm/components/checkBox/CheckBox.styled.d.ts +0 -7
  112. package/dist/esm/components/checkBox/CheckBox.styled.js +0 -26
  113. package/dist/esm/components/checkBox/index.d.ts +0 -1
  114. package/dist/esm/components/icon-button/IconButton.d.ts +0 -3
  115. package/dist/esm/components/icon-button/IconButton.js +0 -1
  116. package/dist/esm/components/icon-button/IconButton.styled.d.ts +0 -6
  117. package/dist/esm/components/icon-button/IconButton.styled.js +0 -3
  118. package/dist/esm/components/icon-button/index.d.ts +0 -1
  119. package/dist/esm/components/icon-button/model.d.ts +0 -37
  120. package/dist/esm/components/icon-button/theme.d.ts +0 -3
  121. package/dist/esm/components/icon-button/theme.js +0 -1
  122. package/dist/esm/components/input/Input.d.ts +0 -36
  123. package/dist/esm/components/input/Input.styled.d.ts +0 -114
  124. package/dist/esm/components/input/index.d.ts +0 -1
  125. package/dist/esm/components/list-item/ListItem.d.ts +0 -16
  126. package/dist/esm/components/list-item/ListItem.js +0 -1
  127. package/dist/esm/components/list-item/ListItem.styled.d.ts +0 -9
  128. package/dist/esm/components/list-item/ListItem.styled.js +0 -1
  129. package/dist/esm/components/list-item/index.d.ts +0 -1
  130. package/dist/esm/components/list-item/themes.d.ts +0 -3
  131. package/dist/esm/components/list-item/themes.js +0 -1
  132. package/dist/esm/components/pagination/Pagination.d.ts +0 -9
  133. package/dist/esm/components/pagination/Pagination.js +0 -1
  134. package/dist/esm/components/pagination/Pagination.styled.d.ts +0 -5
  135. package/dist/esm/components/pagination/Pagination.styled.js +0 -1
  136. package/dist/esm/components/pagination/index.d.ts +0 -1
  137. package/dist/esm/components/radioButton/RadioButton.d.ts +0 -8
  138. package/dist/esm/components/radioButton/RadioButton.js +0 -1
  139. package/dist/esm/components/radioButton/RadioButton.styled.d.ts +0 -7
  140. package/dist/esm/components/radioButton/RadioButton.styled.js +0 -20
  141. package/dist/esm/components/radioButton/index.d.ts +0 -1
  142. package/dist/esm/components/sample-button/SampleButton.d.ts +0 -18
  143. package/dist/esm/components/sample-button/SampleButton.styled.d.ts +0 -9
  144. package/dist/esm/components/sample-button/index.d.ts +0 -1
  145. package/dist/esm/components/sample-button/themes.d.ts +0 -2
  146. package/dist/esm/components/spinner/Spinner.d.ts +0 -6
  147. package/dist/esm/components/spinner/Spinner.js +0 -1
  148. package/dist/esm/components/spinner/index.d.ts +0 -1
  149. package/dist/esm/components/spinner/model.d.ts +0 -13
  150. package/dist/esm/components/spinner/themes.d.ts +0 -3
  151. package/dist/esm/components/spinner/themes.js +0 -1
  152. package/dist/esm/components/stepper/Stepper.d.ts +0 -22
  153. package/dist/esm/components/stepper/Stepper.js +0 -1
  154. package/dist/esm/components/stepper/Stepper.styled.d.ts +0 -6
  155. package/dist/esm/components/stepper/Stepper.styled.js +0 -83
  156. package/dist/esm/components/stepper/StepperService.d.ts +0 -4
  157. package/dist/esm/components/stepper/WorkingStepper.d.ts +0 -15
  158. package/dist/esm/components/stepper/index.d.ts +0 -1
  159. package/dist/esm/components/stepper/themes.d.ts +0 -18
  160. package/dist/esm/components/stepper/themes.js +0 -1
  161. package/dist/esm/components/tag/Tag.d.ts +0 -6
  162. package/dist/esm/components/tag/Tag.js +0 -1
  163. package/dist/esm/components/tag/Tag.styled.d.ts +0 -6
  164. package/dist/esm/components/tag/Tag.styled.js +0 -26
  165. package/dist/esm/components/tag/index.d.ts +0 -1
  166. package/dist/esm/components/tag/model.d.ts +0 -34
  167. package/dist/esm/components/tag/themes.d.ts +0 -6
  168. package/dist/esm/components/tag/themes.js +0 -1
  169. package/dist/esm/components/toaster/Toaster.d.ts +0 -27
  170. package/dist/esm/components/toaster/Toaster.js +0 -1
  171. package/dist/esm/components/toaster/Toaster.styled.d.ts +0 -4
  172. package/dist/esm/components/toaster/Toaster.styled.js +0 -35
  173. package/dist/esm/components/toaster/index.d.ts +0 -1
  174. package/dist/esm/components/tooltips/Tooltip.d.ts +0 -10
  175. package/dist/esm/components/tooltips/Tooltip.js +0 -1
  176. package/dist/esm/components/tooltips/TooltipInternal.d.ts +0 -10
  177. package/dist/esm/components/tooltips/TooltipInternal.js +0 -1
  178. package/dist/esm/components/tooltips/index.d.ts +0 -1
  179. package/dist/esm/constants/Theme.d.ts +0 -587
  180. package/dist/esm/constants/Theme.js +0 -1
  181. package/dist/esm/constants/breakpoints.d.ts +0 -6
  182. package/dist/esm/constants/colors.d.ts +0 -7
  183. package/dist/esm/constants/spacing.d.ts +0 -2
  184. package/dist/esm/index.d.ts +0 -12
  185. package/dist/esm/index.js +0 -1
  186. package/dist/esm/utils/classNames.d.ts +0 -7
  187. package/dist/esm/utils/rgba.d.ts +0 -8
@@ -1,9 +0,0 @@
1
- /// <reference types="react" />
2
- import type { Color, Variant } from './SampleButton';
3
- export declare const SampleButton: import("@emotion/styled").StyledComponent<{
4
- theme?: import("@emotion/react").Theme | undefined;
5
- as?: import("react").ElementType<any> | undefined;
6
- } & {
7
- $color: Color;
8
- variant: Variant;
9
- }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
@@ -1 +0,0 @@
1
- export * from './SampleButton';
@@ -1,2 +0,0 @@
1
- import type { Color, Variant } from './SampleButton';
2
- export declare function getTheme(color: Color, variant: Variant): import("@emotion/utils").SerializedStyles;
@@ -1,6 +0,0 @@
1
- /// <reference types="react" />
2
- import { SpinnerProps } from './model';
3
- export declare const Spinner: {
4
- ({ size, color, className }: SpinnerProps): JSX.Element;
5
- displayName: string;
6
- };
@@ -1 +0,0 @@
1
- import{jsx as e}from"react/jsx-runtime";import t from"react-lottie";import{COLORS as r}from"../../constants/Theme.js";import{SizeMap as i}from"./themes.js";const o={[r.stroke.brand]:require("./lotties/brand.json"),[r.content.primary]:require("./lotties/black.json"),[r.content.primaryInverse]:require("./lotties/white.json"),[r.content.negative]:require("./lotties/red.json")},s=s=>{let{size:n,color:a,className:c}=s;const l={loop:!0,autoplay:!0,animationData:o[null!=a?a:r.stroke.brand],rendererSettings:{preserveAspectRatio:"xMidYMid slice"}};return e("div",Object.assign({className:`spinner-container ${c}`},{children:e(t,{options:l,height:i[n],width:i[n],isStopped:!1,isPaused:!1})}))};s.displayName="Spinner";export{s as Spinner};
@@ -1 +0,0 @@
1
- export * from './Spinner';
@@ -1,13 +0,0 @@
1
- /// <reference types="react" />
2
- export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
3
- /**
4
- * Size of the spinner
5
- *
6
- */
7
- size: 'small' | 'large';
8
- /**
9
- * Color of the spinner.
10
- * Defaults to COLORS.content.brand
11
- */
12
- color?: string;
13
- }
@@ -1,3 +0,0 @@
1
- export declare const SizeMap: {
2
- [key in 'small' | 'large']: number;
3
- };
@@ -1 +0,0 @@
1
- const l={small:16,large:40};export{l as SizeMap};
@@ -1,22 +0,0 @@
1
- /// <reference types="react" />
2
- export type StepperStates = 'default' | 'completed' | 'error' | 'active' | 'inactive';
3
- export interface StepperProps {
4
- steps: EachStep[];
5
- activeStep: EachStep;
6
- onClickingEachStep: (step: EachStep) => void;
7
- }
8
- export interface EachStep {
9
- stepKey: string;
10
- stepName: string;
11
- isCompleted: boolean;
12
- isError: boolean;
13
- isInActive: boolean;
14
- }
15
- export interface SingleStepperProps {
16
- index: number;
17
- isLastElement: boolean;
18
- eachStep: EachStep;
19
- isActive: boolean;
20
- onClickingStep: (step: EachStep) => void;
21
- }
22
- export declare const Stepper: (stepperDetails: StepperProps) => JSX.Element;
@@ -1 +0,0 @@
1
- import{jsx as e,jsxs as t}from"react/jsx-runtime";import{COLORS as i}from"../../constants/Theme.js";import s from"../../assets/icons/check.svg.js";import c from"../../assets/icons/errorInfo.svg.js";import{BodySecondary as r,BodyPrimary as n}from"../TypographyStyle.js";import{StepperContainer as o,SingleStepperChildContainer as a}from"./Stepper.styled.js";const l=t=>{const{steps:i,activeStep:s,onClickingEachStep:c}=t;return e(o,{children:i.map(((t,r)=>e(p,{eachStep:t,onClickingStep:e=>{c(e)},isActive:(null==s?void 0:s.stepKey)==(null==t?void 0:t.stepKey),isLastElement:r==i.length-1,index:r},r)))})},p=o=>{const{eachStep:l,isLastElement:p,index:d,isActive:m,onClickingStep:h}=o,{stepName:g,isCompleted:v,isError:j,isInActive:S}=l,b=()=>m?"active":v?"completed":j?"error":S?"inactive":"default";return t(a,Object.assign({onClick:()=>{!S&&h(l)},selectedState:b()},{children:[t("div",Object.assign({className:`hover-container ${S?"blocked":"pointer"} `},{children:[e("div",Object.assign({className:"badge"},{children:"completed"==b()?e(s,{height:16,width:16,color:i.content.positive}):"error"==b()?e(c,{height:16,width:16}):e(r,Object.assign({className:"badge-text"},{children:d+1}))})),e(n,Object.assign({className:"step-text",title:g},{children:g}))]})),e("div",{className:p?"":"horizontal-divider"})]}))};export{l as Stepper};
@@ -1,6 +0,0 @@
1
- import { StepperStates } from './Stepper';
2
- export declare const StepperContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
3
- export declare const SingleStepperChildContainer: import("styled-components").StyledComponent<"div", any, {
4
- selectedState: StepperStates;
5
- }, never>;
6
- export declare const WorkingStepperContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -1,83 +0,0 @@
1
- import e from"styled-components";import{getTheme as t}from"./themes.js";const o=e.div`
2
- display: flex;
3
- flex-direction: row;
4
- justify-content: center;
5
- align-items: center;
6
- gap: 16px;
7
- `,i=e.div`
8
- display: flex;
9
- flex-direction: row;
10
- justify-content: center;
11
- align-items: center;
12
- gap: 8px;
13
-
14
- .pointer {
15
- cursor: pointer;
16
- }
17
- .blocked {
18
- cursor: not-allowed;
19
- }
20
-
21
- .hover-container {
22
- padding: 6px 8px 6px 6px;
23
- display: flex;
24
- flex-direction: row;
25
- justify-content: center;
26
- align-items: center;
27
- gap: 8px;
28
- &:hover {
29
- padding: 6px 8px 6px 6px;
30
- background: #f0f0f0;
31
- border-radius: 30px;
32
- }
33
- }
34
- .badge {
35
- display: flex;
36
- flex-direction: row;
37
- justify-content: center;
38
- align-items: center;
39
- padding: 4px;
40
- gap: 10px;
41
- width: 32px;
42
- height: 24px;
43
- background: ${e=>t(e.selectedState).badgeBackground};
44
- border: 1px solid ${e=>t(e.selectedState).badgeBorder};
45
- border-radius: 30px;
46
- .badge-text {
47
- font-weight: ${e=>t(e.selectedState).fontWeight};
48
- color: ${e=>t(e.selectedState).badgeColor};
49
- }
50
- }
51
- .step-text {
52
- font-weight: ${e=>t(e.selectedState).fontWeight};
53
- font-feature-settings: 'tnum' on, 'lnum' on, 'case' on, 'ss04' on;
54
- color: ${e=>t(e.selectedState).textColor};
55
- white-space: nowrap;
56
- overflow: hidden;
57
- text-overflow: ellipsis;
58
- max-width: 200px;
59
- }
60
- .horizontal-divider {
61
- width: 48px;
62
- height: 1px;
63
- background: ${e=>t(e.selectedState).dividerBackground};
64
- margin-left: 8px;
65
- }
66
- `;e.div`
67
- .top-bar {
68
- position: sticky;
69
- top: 0px;
70
- display: flex;
71
- flex-direction: row;
72
- justify-content: center;
73
- align-items: center;
74
- background: white;
75
- }
76
- .main-container {
77
- display: flex;
78
- flex-direction: column;
79
- justify-content: center;
80
- align-items: center;
81
- overflow-y: auto;
82
- }
83
- `;export{i as SingleStepperChildContainer,o as StepperContainer};
@@ -1,4 +0,0 @@
1
- import { EachStep } from './Stepper';
2
- export default class StepperService {
3
- updateSteps: (steps: EachStep[], stepToUpdate: EachStep, propertiesToUpdate: Partial<EachStep>) => EachStep[];
4
- }
@@ -1,15 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const WorkingStepper: () => JSX.Element;
3
- export declare enum STEPENUM {
4
- STEP1 = "STEP1",
5
- STEP2 = "STEP2",
6
- STEP3 = "STEP3",
7
- STEP4 = "STEP4"
8
- }
9
- export declare const Steps: {
10
- stepKey: STEPENUM;
11
- stepName: string;
12
- isCompleted: boolean;
13
- isError: boolean;
14
- isInActive: boolean;
15
- }[];
@@ -1 +0,0 @@
1
- export * from './Stepper';
@@ -1,18 +0,0 @@
1
- import type { StepperStates } from './Stepper';
2
- export declare function getTheme(step: StepperStates): {
3
- textColor: string;
4
- badgeColor: string;
5
- badgeBackground: string;
6
- badgeBorder: string;
7
- dividerBackground: string;
8
- fontWeight: string;
9
- background?: undefined;
10
- } | {
11
- textColor: string;
12
- background: string;
13
- badgeColor: string;
14
- badgeBorder: string;
15
- dividerBackground: string;
16
- fontWeight: string;
17
- badgeBackground?: undefined;
18
- };
@@ -1 +0,0 @@
1
- import{COLORS as e}from"../../constants/Theme.js";function t(t){switch(t){case"active":return{textColor:`${e.content.positive}`,badgeColor:`${e.content.primaryInverse}`,badgeBackground:`${e.background.positive.vibrant}`,badgeBorder:"transparent",dividerBackground:`${e.content.positive}`,fontWeight:"600"};case"completed":return{textColor:`${e.content.positive}`,badgeColor:`${e.content.positive}`,badgeBackground:`${e.background.positive.light}`,badgeBorder:`${e.content.positive}`,dividerBackground:`${e.content.positive}`,fontWeight:"400"};case"error":return{textColor:`${e.content.negative}`,badgeBackground:`${e.background.negative.light}`,badgeColor:`${e.content.negative}`,badgeBorder:`${e.content.negative}`,dividerBackground:`${e.content.negative}`,fontWeight:"400"};case"inactive":return{textColor:`${e.content.inactive}`,badgeBackground:"transparent",badgeColor:`${e.content.inactive}`,badgeBorder:`${e.content.inactive}`,dividerBackground:`${e.content.inactive}`,fontWeight:"400"};default:return{textColor:`${e.content.secondary}`,background:"trasparent",badgeColor:`${e.content.secondary}`,badgeBorder:`${e.content.secondary}`,dividerBackground:`${e.content.secondary}`,fontWeight:"400"}}}export{t as getTheme};
@@ -1,6 +0,0 @@
1
- /// <reference types="react" />
2
- import { TagProps } from './model';
3
- export declare const Tag: {
4
- ({ tagText, LeadingIcon, TrailingIcon, theme, type, variant, }: TagProps): JSX.Element;
5
- displayName: string;
6
- };
@@ -1 +0,0 @@
1
- import{jsx as e,jsxs as t}from"react/jsx-runtime";import a from"react";import{BodyCaption as i}from"../TypographyStyle.js";import{Tag as r}from"./Tag.styled.js";import{getTagIconColor as n}from"./themes.js";const s=s=>{let{tagText:c,LeadingIcon:l,TrailingIcon:o,theme:m="light",type:g="neutral",variant:d="regular"}=s;const h={height:16,width:16,color:n(m,g),style:{display:"block"}};let p=c;return"circle"===d&&"number"==typeof p&&p>99&&(p="99+"),e(r,Object.assign({theme:m,type:g,variant:d},{children:t("div",Object.assign({className:"container"},{children:[o&&e("div",Object.assign({className:"icon-trailing"},{children:a.createElement(o,h)})),e(i,Object.assign({className:"text"},{children:p})),l&&e("div",Object.assign({className:"icon-leading"},{children:a.createElement(l,h)}))]}))}))};s.displayName="Tag";export{s as Tag};
@@ -1,6 +0,0 @@
1
- import { TagTheme, TagType, TagVariant } from './model';
2
- export declare const Tag: import("styled-components").StyledComponent<"div", any, {
3
- theme: TagTheme;
4
- type: TagType;
5
- variant: TagVariant;
6
- }, never>;
@@ -1,26 +0,0 @@
1
- import e from"styled-components";import{getPadding as r,getBackgroundColor as t,generateBorder as o,getTextColor as i}from"./themes.js";const a=e.div`
2
- cursor: default;
3
- .container {
4
- display: flex;
5
- gap: 6px;
6
- padding: ${e=>r(e.variant)};
7
- }
8
-
9
- ${e=>"circle"===e.variant&&"height: 20px;"}
10
-
11
- background-color: ${e=>t(e.theme,e.type)};
12
-
13
- border-radius: ${e=>"regular"===e.variant?"4px":"12px"};
14
-
15
- ${e=>"light"===e.theme&&`border: 1px solid ${o(e.type)};`}
16
-
17
- .text {
18
- color: ${e=>i(e.theme,e.type)};
19
- }
20
-
21
- .icon-trailing {
22
- }
23
-
24
- .icon-leading {
25
- }
26
- `;export{a as Tag};
@@ -1 +0,0 @@
1
- export * from './Tag';
@@ -1,34 +0,0 @@
1
- /// <reference types="react" />
2
- export type TagTheme = 'light' | 'dark';
3
- export type TagVariant = 'regular' | 'circle';
4
- export type TagType = 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue';
5
- export interface TagProps {
6
- /**
7
- * Set the theme of the Tag
8
- * @default default light
9
- */
10
- theme?: TagTheme;
11
- /**
12
- * Set the color of the Tag
13
- * @default default neutral
14
- */
15
- type?: TagType;
16
- /**
17
- * Set the color of the Tag
18
- * @default default regular
19
- */
20
- variant?: TagVariant;
21
- /**
22
- * The icon component that is the left of the text
23
- * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
24
- * @default undefined
25
- */
26
- TrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
27
- /**
28
- * The icon component that is to the right of the text
29
- * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
30
- * @default undefined
31
- */
32
- LeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
33
- tagText: string | number;
34
- }
@@ -1,6 +0,0 @@
1
- import { TagTheme, TagType, TagVariant } from './model';
2
- export declare const getTagIconColor: (theme: TagTheme, type: TagType) => string;
3
- export declare const getTextColor: (theme: TagTheme, type: TagType) => string;
4
- export declare const generateBorder: (type: TagType) => string;
5
- export declare const getBackgroundColor: (theme: TagTheme, type: TagType) => string;
6
- export declare const getPadding: (variant: TagVariant) => "4px 8px" | "2px 6px";
@@ -1 +0,0 @@
1
- import{COLORS as r}from"../../constants/Theme.js";const t={blue:{iconColor:{light:r.content.blue,dark:r.content.primaryInverse},textColor:{light:r.content.blue,dark:r.content.primaryInverse},border:r.stroke.blue.lightAlt,backgroundColor:{light:r.background.blue.light,dark:r.content.blue}},purple:{iconColor:{light:r.background.inverseLight,dark:r.content.primaryInverse},textColor:{light:r.background.inverseLight,dark:r.content.primaryInverse},border:r.stroke.brandLightAlt,backgroundColor:{light:r.background.brandLight,dark:r.background.inverse}},negative:{iconColor:{light:r.content.negative,dark:r.content.primaryInverse},textColor:{light:r.content.negative,dark:r.content.primaryInverse},border:r.stroke.negative.lightAlt,backgroundColor:{light:r.background.negative.light,dark:r.background.negative.vibrant}},positive:{iconColor:{light:r.content.positive,dark:r.content.primaryInverse},textColor:{light:r.content.positive,dark:r.content.primaryInverse},border:r.stroke.positive.lightAlt,backgroundColor:{light:r.background.positive.light,dark:r.background.positive.vibrant}},warning:{iconColor:{light:r.content.warning,dark:r.content.primary},textColor:{light:r.content.warning,dark:r.content.primary},border:r.stroke.warning.lightAlt,backgroundColor:{light:r.background.warning.light,dark:r.background.warning.vibrant}},neutral:{iconColor:{light:r.content.secondary,dark:r.content.primaryInverse},textColor:{light:r.content.secondary,dark:r.content.primaryInverse},border:r.stroke.primary,backgroundColor:{light:r.surface.subdued,dark:r.background.inverse}},white:{iconColor:{light:r.content.secondary,dark:r.content.primaryInverse},textColor:{light:r.content.secondary,dark:r.content.primaryInverse},border:r.stroke.primary,backgroundColor:{light:r.surface.subdued,dark:r.background.inverse}}},o=(r,o)=>t[o].iconColor[r],n=(r,o)=>t[o].textColor[r],e=r=>t[r].border,i=(r,o)=>t[o].backgroundColor[r],a=r=>"regular"===r?"4px 8px":"2px 6px";export{e as generateBorder,i as getBackgroundColor,a as getPadding,o as getTagIconColor,n as getTextColor};
@@ -1,27 +0,0 @@
1
- import React, { FunctionComponent } from 'react';
2
- import { ToastPosition } from 'react-toastify';
3
- import { IconProps } from 'react-toastify/dist/components';
4
- import 'react-toastify/dist/ReactToastify.css';
5
- export type ToasterButtonProps = {
6
- showButton?: boolean;
7
- onButtonClick?: any;
8
- buttonText?: string;
9
- };
10
- export type ToasterProps = {
11
- text: string;
12
- position?: ToastPosition;
13
- type?: 'info' | 'success' | 'error' | 'default';
14
- closeOnClick?: boolean;
15
- hideProgressBar?: boolean;
16
- autoClose?: number | false | undefined;
17
- leftIcon?: React.ReactElement<IconProps>;
18
- hideLeftIcon?: boolean;
19
- buttonProps?: ToasterButtonProps;
20
- onCloseToast?: <T = {}>(props: T) => void;
21
- width?: string;
22
- height?: string;
23
- hideCloseButton?: boolean;
24
- };
25
- type Props = ToasterProps;
26
- export declare const Toaster: FunctionComponent<Props>;
27
- export {};
@@ -1 +0,0 @@
1
- import{jsx as t,Fragment as o,jsxs as e}from"react/jsx-runtime";import n from"@src/assets/icons/cross.svg";import{useEffect as s}from"react";import{ToastContainer as i,toast as r}from"react-toastify";import{ToasterStyled as l}from"./Toaster.styled.js";import{BodyPrimary as c,ButtonRegular as u}from"../TypographyStyle.js";import{COLORS as d}from"../../constants/Theme.js";const a=o=>{const e="default"===o.type?d.content.secondary:("success"===o.type||o.type,d.content.secondaryInverse);return t("div",Object.assign({tabIndex:0,role:"button",style:{width:20,display:"flex",margin:"auto",cursor:"pointer"},onClick:o.closeToast,onKeyDown:t=>{"Enter"===t.key&&o.closeToast()}},{children:t(n,{height:20,width:20,color:e})}))},p=n=>{const s="default"===n.type?d.stroke.primary:"success"===n.type?d.background.positive.vibrant:"error"===n.type?d.background.negative.vibrant:d.background.inverseLight;return t(o,{children:e("div",Object.assign({style:{display:"flex",flexGrow:1,borderRight:n.hideCloseButton?"unset":`1px solid ${s}`}},{children:[t("div",Object.assign({style:{flexGrow:1,marginRight:n.showButton?16:n.hideCloseButton?0:12}},{children:t(c,Object.assign({color:"inherit"},{children:n.toastText}))})),n.showButton&&t(u,Object.assign({style:{marginRight:n.hideCloseButton?0:12,marginTop:"auto",marginBottom:"auto",display:"flex",cursor:"pointer"},onClick:n.onButtonClick,color:"default"===n.type?d.content.brand:"inherit"},{children:n.buttonText}))]}))})},h=o=>(s((()=>{var e,n,s,i,l,c;void 0!==o.hideLeftIcon||o.leftIcon?r(t(p,{toastText:o.text,type:o.type||"info",buttonText:null===(e=o.buttonProps)||void 0===e?void 0:e.buttonText,showButton:null===(n=o.buttonProps)||void 0===n?void 0:n.showButton,onButtonClick:null===(s=o.buttonProps)||void 0===s?void 0:s.onButtonClick,hideCloseButton:o.hideCloseButton}),{onClose:o.onCloseToast?o.onCloseToast:()=>{},icon:t=>!1!==o.hideLeftIcon&&(o.leftIcon?o.leftIcon:null),type:o.type,closeButton:!o.hideCloseButton&&t(a,{type:o.type||"default"})}):r(t(p,{toastText:o.text,type:o.type||"info",buttonText:null===(i=o.buttonProps)||void 0===i?void 0:i.buttonText,showButton:null===(l=o.buttonProps)||void 0===l?void 0:l.showButton,onButtonClick:null===(c=o.buttonProps)||void 0===c?void 0:c.onButtonClick,hideCloseButton:o.hideCloseButton}),{onClose:o.onCloseToast?o.onCloseToast:()=>{},type:o.type,closeButton:!o.hideCloseButton&&t(a,{type:o.type||"info"})})}),[]),t(l,Object.assign({width:o.width,height:o.height},{children:t(i,{position:o.position||"top-right",closeOnClick:o.closeOnClick||!1,hideProgressBar:o.hideProgressBar||!1,draggable:!1,autoClose:o.autoClose||!1,theme:"colored"})})));export{h as Toaster};
@@ -1,4 +0,0 @@
1
- export declare const ToasterStyled: import("styled-components").StyledComponent<"div", any, {
2
- width?: string | undefined;
3
- height?: string | undefined;
4
- }, never>;
@@ -1,35 +0,0 @@
1
- import t from"styled-components";import{COLORS as o}from"../../constants/Theme.js";const i=t.div`
2
- --toastify-color-light: #fff;
3
- --toastify-color-dark: #121212;
4
- --toastify-color-info: ${o.background.inverse};
5
- --toastify-color-success: ${o.content.positive};
6
- --toastify-color-error: ${o.content.negative};
7
- --toastify-text-color-light: ${o.content.primary};
8
- --toastify-toast-width: ${t=>t.width||"fit-content"};
9
- --toastify-toast-min-height: ${t=>t.height||"44px"};
10
- --toastify-toast-max-height: ${t=>t.height||"44px"};
11
- font-family: inherit;
12
-
13
- .custom-position {
14
- position: relative;
15
- }
16
- .Toastify__toast {
17
- padding: 6px;
18
-
19
- .Toastify__close-button {
20
- display: block;
21
- margin: auto;
22
- }
23
-
24
- .Toastify__toast-body{
25
- padding: 0 6px;
26
- }
27
-
28
- .Toastify__progress-bar-theme--colored.Toastify__progress-bar--default {
29
- background: ${o.content.brand};
30
- }
31
-
32
- .Toastify__toast-body > div:last-child {
33
- display: flex;
34
- }
35
- `;export{i as ToasterStyled};
@@ -1 +0,0 @@
1
- export * from './Toaster';
@@ -1,10 +0,0 @@
1
- import { FunctionComponent, ReactNode } from 'react';
2
- import { TooltipInternalProps } from "./TooltipInternal";
3
- type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
4
- export interface TooltipProps extends TooltipInternalProps {
5
- width?: number;
6
- placement?: Placement;
7
- children: ReactNode;
8
- }
9
- export declare const Tooltip: FunctionComponent<TooltipProps>;
10
- export {};
@@ -1 +0,0 @@
1
- import{jsxs as t,Fragment as n,jsx as r}from"react/jsx-runtime";import i from"@tippyjs/react";import o from"react";import e from"./TooltipInternal.js";import{COLORS as p}from"../../constants/Theme.js";const l=`\n .tippy-content {\n padding: 0px;\n }\n .tippy-arrow {\n \tcolor: ${t=>p.content.primary};\n }\n`,m=p=>o.isValidElement(p.children)?t(n,{children:[r("style",{children:l}),r(i,Object.assign({visible:!0,placement:p.placement||"right",maxWidth:p.width,animation:"fade",arrow:!0,content:r(e,{title:p.title,body:p.body,buttonProps:p.buttonProps})},{children:p.children}))]}):null;export{m as Tooltip};
@@ -1,10 +0,0 @@
1
- import { FunctionComponent } from 'react';
2
- import { ButtonProps } from "../button/model";
3
- export interface TooltipInternalProps {
4
- title?: string;
5
- body: string;
6
- buttonProps?: ButtonProps;
7
- }
8
- type Props = TooltipInternalProps;
9
- declare const TooltipInternal: FunctionComponent<Props>;
10
- export default TooltipInternal;
@@ -1 +0,0 @@
1
- import c from"@emotion/styled/base";import{jsxs as b,jsx as t}from"react/jsx-runtime";import{Button as o}from"../button/Button.js";import{TitleSmall as n,BodyCaption as l}from"../TypographyStyle.js";import{COLORS as e}from"../../constants/Theme.js";const y=c("div","production"===process.env.NODE_ENV?{target:"e6ps8400"}:{target:"e6ps8400",label:"TooltipStyled"})("box-shadow:0px 2px 8px rgba(0, 0, 0, 0.12);border-radius:4px;padding:8px;background-color:",(c=>e.content.primary),";color:",(c=>e.content.primaryInverse),";"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvb2x0aXBJbnRlcm5hbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2lDIiwiZmlsZSI6IlRvb2x0aXBJbnRlcm5hbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBqc3ggYXMgX2pzeCwganN4cyBhcyBfanN4cyB9IGZyb20gXCJyZWFjdC9qc3gtcnVudGltZVwiO1xyXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XHJcbmltcG9ydCB7IEJ1dHRvbiB9IGZyb20gXCIuLi9idXR0b25cIjtcclxuaW1wb3J0IHsgQm9keUNhcHRpb24sIFRpdGxlU21hbGwgfSBmcm9tIFwiLi4vVHlwb2dyYXBoeVN0eWxlXCI7XHJcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gXCIuLi8uLi9jb25zdGFudHMvVGhlbWVcIjtcclxuY29uc3QgVG9vbHRpcFN0eWxlZCA9IHN0eWxlZC5kaXYgYFxuXHRib3gtc2hhZG93OiAwcHggMnB4IDhweCByZ2JhKDAsIDAsIDAsIDAuMTIpO1xuXHRib3JkZXItcmFkaXVzOiA0cHg7XG5cdHBhZGRpbmc6IDhweDtcblx0YmFja2dyb3VuZC1jb2xvcjogJHsocHJvcHMpID0+IENPTE9SUy5jb250ZW50LnByaW1hcnl9O1xuXHRjb2xvcjogJHsocHJvcHMpID0+IENPTE9SUy5jb250ZW50LnByaW1hcnlJbnZlcnNlfTtcbmA7XHJcbmNvbnN0IFRvb2x0aXBJbnRlcm5hbCA9IChwcm9wcykgPT4ge1xyXG4gICAgLy8gVG9kbyAoYXNodXRvc2gpIG1ha2Ugc3VyZSB0aGF0IHRoZSBidXR0b24gd2hpY2ggaXMgcGFzc2VkIGlzIGludmVyc2VcclxuICAgIHJldHVybiAoX2pzeHMoVG9vbHRpcFN0eWxlZCwgeyBjaGlsZHJlbjogW3Byb3BzLnRpdGxlICYmIChfanN4KFRpdGxlU21hbGwsIE9iamVjdC5hc3NpZ24oeyBjb2xvcjogQ09MT1JTLmNvbnRlbnQucHJpbWFyeUludmVyc2UsIHN0eWxlOiB7IG1hcmdpbkJvdHRvbTogJzhweCcgfSB9LCB7IGNoaWxkcmVuOiBwcm9wcy50aXRsZSB9KSkpLCBfanN4KEJvZHlDYXB0aW9uLCBPYmplY3QuYXNzaWduKHsgY29sb3I6IENPTE9SUy5jb250ZW50LnByaW1hcnlJbnZlcnNlLCBzdHlsZTogeyBtYXJnaW5Cb3R0b206IHByb3BzLmJ1dHRvblByb3BzID8gJzhweCcgOiAnMHB4JyB9IH0sIHsgY2hpbGRyZW46IHByb3BzLmJvZHkgfSkpLCBwcm9wcy5idXR0b25Qcm9wcyAmJiBfanN4KEJ1dHRvbiwgT2JqZWN0LmFzc2lnbih7fSwgcHJvcHMuYnV0dG9uUHJvcHMpKV0gfSkpO1xyXG59O1xyXG5leHBvcnQgZGVmYXVsdCBUb29sdGlwSW50ZXJuYWw7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVRvb2x0aXBJbnRlcm5hbC5qcy5tYXAiXX0= */")),g=c=>b(y,{children:[c.title&&t(n,Object.assign({color:e.content.primaryInverse,style:{marginBottom:"8px"}},{children:c.title})),t(l,Object.assign({color:e.content.primaryInverse,style:{marginBottom:c.buttonProps?"8px":"0px"}},{children:c.body})),c.buttonProps&&t(o,Object.assign({},c.buttonProps))]});export{g as default};
@@ -1 +0,0 @@
1
- export * from './Tooltip';