@hellobetterdigitalnz/betterui 0.0.1 → 0.0.2
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.
- package/package.json +1 -1
- package/src/Components/Form/Button/Button.stories.tsx +3 -0
- package/src/Components/Form/Button/Button.tsx +2 -2
- package/src/Components/Form/FormFieldHolder/FormFieldHolder.stories.tsx +30 -0
- package/src/Components/Form/FormFieldHolder/FormFieldHolder.tsx +37 -2
- package/src/Components/Form/FormFieldHolder/FormFieldHolderProps.tsx +12 -0
- package/src/Components/Form/FormFieldHolder/formHolder.module.scss +56 -0
- package/src/Components/Icons/Brand/WindowLogo/WindowLogo.tsx +105 -0
- package/src/Components/Icons/SecurityAndWarnings/WarningCircle/WarningCircle.tsx +105 -0
- package/src/global.scss +1 -1
package/package.json
CHANGED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import FormFieldHolder from "./FormFieldHolder";
|
|
3
|
+
import TextField from "../TextField/TextField";
|
|
4
|
+
|
|
5
|
+
const meta: Meta = {
|
|
6
|
+
title: "Form / FormFieldHolder",
|
|
7
|
+
component: FormFieldHolder,
|
|
8
|
+
parameters: {
|
|
9
|
+
layout: "centered",
|
|
10
|
+
},
|
|
11
|
+
tags: ["autodocs"],
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export default meta;
|
|
15
|
+
|
|
16
|
+
type Story = StoryObj<typeof meta>;
|
|
17
|
+
|
|
18
|
+
const FormFieldHolderTemplate: Story = {
|
|
19
|
+
render: () => {
|
|
20
|
+
return (
|
|
21
|
+
<FormFieldHolder label="Name" description={"helper text"}>
|
|
22
|
+
<TextField placeholder="Placeholder" />
|
|
23
|
+
</FormFieldHolder>
|
|
24
|
+
);
|
|
25
|
+
},
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export const FormFieldHolderComponent = {
|
|
29
|
+
...FormFieldHolderTemplate,
|
|
30
|
+
};
|
|
@@ -1,5 +1,40 @@
|
|
|
1
|
-
|
|
1
|
+
import WarningCircle from "../../Icons/SecurityAndWarnings/WarningCircle/WarningCircle";
|
|
2
|
+
import FormFieldHolderProps from "./FormFieldHolderProps";
|
|
3
|
+
import styles from "./formHolder.module.scss";
|
|
2
4
|
|
|
3
|
-
|
|
5
|
+
const FormFieldHolder = (props: FormFieldHolderProps) => {
|
|
6
|
+
const { label, description, extraClass = "", children, error } = props;
|
|
7
|
+
|
|
8
|
+
return (
|
|
9
|
+
<div
|
|
10
|
+
className={`field-holder ${extraClass} ${styles.holder} ${
|
|
11
|
+
error ? styles.holderError : ""
|
|
12
|
+
}`}
|
|
13
|
+
>
|
|
14
|
+
{!!label && (
|
|
15
|
+
<div className={styles.label}>
|
|
16
|
+
<label>{label}</label>
|
|
17
|
+
</div>
|
|
18
|
+
)}
|
|
19
|
+
<div className={styles.field}>{children}</div>
|
|
20
|
+
|
|
21
|
+
{!!description && (
|
|
22
|
+
<div className={styles.description}>
|
|
23
|
+
<>
|
|
24
|
+
{error && (
|
|
25
|
+
<div className={styles.helperIcon}>
|
|
26
|
+
<WarningCircle />
|
|
27
|
+
</div>
|
|
28
|
+
)}
|
|
29
|
+
</>
|
|
30
|
+
<>
|
|
31
|
+
{typeof description === "string" && <p>{description}</p>}
|
|
32
|
+
{typeof description !== "string" && { description }}
|
|
33
|
+
</>
|
|
34
|
+
</div>
|
|
35
|
+
)}
|
|
36
|
+
</div>
|
|
37
|
+
);
|
|
38
|
+
};
|
|
4
39
|
|
|
5
40
|
export default FormFieldHolder;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
|
|
3
|
+
interface FormFieldHolderProps {
|
|
4
|
+
label?: string;
|
|
5
|
+
description?: string | ReactNode;
|
|
6
|
+
extraClass?: string;
|
|
7
|
+
error?: boolean;
|
|
8
|
+
children: ReactNode;
|
|
9
|
+
icon?: ReactNode;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export default FormFieldHolderProps;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
.holder {
|
|
2
|
+
margin-bottom: calc(var(--space-unit) * 5);
|
|
3
|
+
width: 100%;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.label {
|
|
7
|
+
display: block;
|
|
8
|
+
margin-bottom: calc(var(--space-unit) * 3);
|
|
9
|
+
|
|
10
|
+
label {
|
|
11
|
+
font-size: var(--font-size-label);
|
|
12
|
+
line-height: var(--line-height-label);
|
|
13
|
+
font-weight: var(--font-weight-label);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.holderError & {
|
|
17
|
+
color: var(--color-error);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.field {
|
|
22
|
+
.holderError & {
|
|
23
|
+
color: var(--color-error);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.description {
|
|
28
|
+
display: flex;
|
|
29
|
+
align-items: center;
|
|
30
|
+
font-size: var(--font-size-body-sm);
|
|
31
|
+
line-height: var(--line-height-body-sm);
|
|
32
|
+
font-weight: var(--font-weight-body-sm);
|
|
33
|
+
padding-top: calc(var(--space-unit) * 2);
|
|
34
|
+
color: var(--color-description);
|
|
35
|
+
|
|
36
|
+
p {
|
|
37
|
+
font-size: var(--font-size-body-sm);
|
|
38
|
+
line-height: var(--line-height-body-sm);
|
|
39
|
+
font-weight: var(--font-weight-body-sm);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.helperIcon {
|
|
43
|
+
margin-right: var(--space-unit);
|
|
44
|
+
display: flex;
|
|
45
|
+
align-items: center;
|
|
46
|
+
|
|
47
|
+
svg {
|
|
48
|
+
width: 16px;
|
|
49
|
+
height: 16px;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.holderError & {
|
|
54
|
+
color: var(--color-error);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import IconProps from "../../IconProps";
|
|
2
|
+
|
|
3
|
+
const WindowLogo = ({ type = "light" }: IconProps) => {
|
|
4
|
+
if (type === "thin") {
|
|
5
|
+
return (
|
|
6
|
+
<svg
|
|
7
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
8
|
+
width="32"
|
|
9
|
+
height="32"
|
|
10
|
+
viewBox="0 0 32 32"
|
|
11
|
+
fill="none"
|
|
12
|
+
>
|
|
13
|
+
<path
|
|
14
|
+
d="M27 17.5H17C16.8674 17.5 16.7402 17.5527 16.6464 17.6465C16.5527 17.7402 16.5 17.8674 16.5 18V25.1813C16.4998 25.2984 16.5408 25.4118 16.6157 25.5018C16.6907 25.5918 16.7948 25.6527 16.91 25.6738L26.91 27.4925C26.9397 27.4975 26.9698 27.5 27 27.5C27.117 27.4999 27.2302 27.4588 27.32 27.3838C27.3763 27.3369 27.4216 27.2782 27.4527 27.2119C27.4838 27.1456 27.4999 27.0733 27.5 27V18C27.5 17.8674 27.4473 17.7402 27.3536 17.6465C27.2598 17.5527 27.1326 17.5 27 17.5ZM26.5 26.4013L17.5 24.765V18.5H26.5V26.4013ZM13 17.5H5C4.86739 17.5 4.74022 17.5527 4.64645 17.6465C4.55268 17.7402 4.5 17.8674 4.5 18V23C4.49984 23.1171 4.5408 23.2306 4.61573 23.3206C4.69066 23.4106 4.7948 23.4714 4.91 23.4925L12.91 24.9463C12.9396 24.9523 12.9698 24.9552 13 24.955C13.1326 24.955 13.2598 24.9023 13.3536 24.8086C13.4473 24.7148 13.5 24.5876 13.5 24.455V18C13.5 17.8674 13.4473 17.7402 13.3536 17.6465C13.2598 17.5527 13.1326 17.5 13 17.5ZM12.5 23.855L5.5 22.5825V18.5H12.5V23.855ZM27.32 4.61626C27.2638 4.56919 27.198 4.53505 27.1271 4.51625C27.0563 4.49746 26.9821 4.49448 26.91 4.50751L16.91 6.32626C16.7948 6.34734 16.6907 6.40819 16.6157 6.49819C16.5408 6.5882 16.4998 6.70165 16.5 6.81876V14C16.5 14.1326 16.5527 14.2598 16.6464 14.3536C16.7402 14.4473 16.8674 14.5 17 14.5H27C27.1326 14.5 27.2598 14.4473 27.3536 14.3536C27.4473 14.2598 27.5 14.1326 27.5 14V5.00001C27.4999 4.92677 27.4838 4.85443 27.4527 4.78812C27.4216 4.72181 27.3763 4.66314 27.32 4.61626ZM26.5 13.5H17.5V7.23501L26.5 5.59876V13.5ZM12.91 7.05376L4.91 8.50751C4.7948 8.52859 4.69066 8.58944 4.61573 8.67944C4.5408 8.76945 4.49984 8.8829 4.5 9.00001V14C4.5 14.1326 4.55268 14.2598 4.64645 14.3536C4.74022 14.4473 4.86739 14.5 5 14.5H13C13.1326 14.5 13.2598 14.4473 13.3536 14.3536C13.4473 14.2598 13.5 14.1326 13.5 14V7.54501C13.4999 7.47178 13.4837 7.39945 13.4526 7.33316C13.4215 7.26686 13.3762 7.20821 13.3199 7.16135C13.2637 7.11449 13.1978 7.08057 13.1269 7.06197C13.0561 7.04338 12.982 7.04058 12.91 7.05376ZM12.5 13.5H5.5V9.41751L12.5 8.14501V13.5Z"
|
|
15
|
+
fill="currentColor"
|
|
16
|
+
/>
|
|
17
|
+
</svg>
|
|
18
|
+
);
|
|
19
|
+
}
|
|
20
|
+
if (type === "regular") {
|
|
21
|
+
return (
|
|
22
|
+
<svg
|
|
23
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
24
|
+
width="32"
|
|
25
|
+
height="32"
|
|
26
|
+
viewBox="0 0 32 32"
|
|
27
|
+
fill="none"
|
|
28
|
+
>
|
|
29
|
+
<path
|
|
30
|
+
d="M27 17H17C16.7348 17 16.4804 17.1054 16.2929 17.2929C16.1054 17.4804 16 17.7348 16 18V25.1813C15.9997 25.4157 16.0818 25.6427 16.2319 25.8227C16.382 26.0028 16.5906 26.1244 16.8213 26.1663L26.8213 27.9838C26.8802 27.9948 26.94 28.0002 27 28C27.2652 28 27.5196 27.8946 27.7071 27.7071C27.8946 27.5196 28 27.2652 28 27V18C28 17.7348 27.8946 17.4804 27.7071 17.2929C27.5196 17.1054 27.2652 17 27 17ZM26 25.8013L18 24.3475V19H26V25.8013ZM13 17H5C4.73478 17 4.48043 17.1054 4.29289 17.2929C4.10536 17.4804 4 17.7348 4 18V23C4.00003 23.2342 4.08226 23.4609 4.23234 23.6407C4.38242 23.8205 4.59083 23.9419 4.82125 23.9838L12.8212 25.4388C12.8803 25.4492 12.9401 25.4546 13 25.455C13.2652 25.455 13.5196 25.3496 13.7071 25.1621C13.8946 24.9746 14 24.7202 14 24.455V18C14 17.7348 13.8946 17.4804 13.7071 17.2929C13.5196 17.1054 13.2652 17 13 17ZM12 23.2563L6 22.165V19H12V23.2563ZM27.6413 4.2325C27.5288 4.13858 27.397 4.07052 27.2553 4.03315C27.1136 3.99578 26.9654 3.99001 26.8213 4.01625L16.8213 5.835C16.5908 5.87686 16.3824 5.99827 16.2323 6.17804C16.0823 6.35782 16 6.58457 16 6.81875V14C16 14.2652 16.1054 14.5196 16.2929 14.7071C16.4804 14.8946 16.7348 15 17 15H27C27.2652 15 27.5196 14.8946 27.7071 14.7071C27.8946 14.5196 28 14.2652 28 14V5C28 4.85361 27.9679 4.709 27.9059 4.57638C27.8439 4.44377 27.7536 4.32638 27.6413 4.2325ZM26 13H18V7.6525L26 6.19875V13ZM13.6412 6.7775C13.5288 6.68358 13.397 6.61552 13.2553 6.57815C13.1136 6.54078 12.9654 6.53501 12.8212 6.56125L4.82125 8.01625C4.59083 8.05811 4.38242 8.17952 4.23234 8.35929C4.08226 8.53907 4.00003 8.76582 4 9V14C4 14.2652 4.10536 14.5196 4.29289 14.7071C4.48043 14.8946 4.73478 15 5 15H13C13.2652 15 13.5196 14.8946 13.7071 14.7071C13.8946 14.5196 14 14.2652 14 14V7.545C14 7.39861 13.9679 7.254 13.9059 7.12138C13.8439 6.98877 13.7536 6.87138 13.6412 6.7775ZM12 13H6V9.835L12 8.75V13Z"
|
|
31
|
+
fill="currentColor"
|
|
32
|
+
/>
|
|
33
|
+
</svg>
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
if (type === "bold") {
|
|
37
|
+
return (
|
|
38
|
+
<svg
|
|
39
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
40
|
+
width="32"
|
|
41
|
+
height="32"
|
|
42
|
+
viewBox="0 0 32 32"
|
|
43
|
+
fill="none"
|
|
44
|
+
>
|
|
45
|
+
<path
|
|
46
|
+
d="M13.4613 6.48501C13.2926 6.34401 13.095 6.24182 12.8824 6.18565C12.6699 6.12949 12.4476 6.12074 12.2312 6.16001L4.73125 7.52376C4.38564 7.58671 4.07308 7.76895 3.84807 8.03874C3.62306 8.30852 3.49988 8.64872 3.5 9.00001V13.5C3.5 13.8978 3.65804 14.2794 3.93934 14.5607C4.22064 14.842 4.60218 15 5 15H12.5C12.8978 15 13.2794 14.842 13.5607 14.5607C13.842 14.2794 14 13.8978 14 13.5V7.63626C14 7.41663 13.9517 7.19968 13.8586 7.00075C13.7655 6.80182 13.6299 6.62576 13.4613 6.48501ZM11 12H6.5V10.25L11 9.43251V12ZM27.9613 3.84876C27.7926 3.70776 27.595 3.60557 27.3824 3.5494C27.1699 3.49324 26.9476 3.48449 26.7313 3.52376L17.2313 5.25001C16.8854 5.31299 16.5727 5.49543 16.3477 5.76547C16.1226 6.03551 15.9996 6.376 16 6.72751V13.5C16 13.8978 16.158 14.2794 16.4393 14.5607C16.7206 14.842 17.1022 15 17.5 15H27C27.3978 15 27.7794 14.842 28.0607 14.5607C28.342 14.2794 28.5 13.8978 28.5 13.5V5.00001C28.5 4.78038 28.4517 4.56343 28.3586 4.3645C28.2655 4.16557 28.1299 3.98951 27.9613 3.84876ZM25.5 12H19V7.97876L25.5 6.79751V12ZM12.5 17H5C4.60218 17 4.22064 17.1581 3.93934 17.4394C3.65804 17.7207 3.5 18.1022 3.5 18.5V23C3.49988 23.3513 3.62306 23.6915 3.84807 23.9613C4.07308 24.2311 4.38564 24.4133 4.73125 24.4763L12.2312 25.84C12.4475 25.8794 12.6697 25.8708 12.8823 25.8148C13.0948 25.7587 13.2924 25.6567 13.4612 25.5159C13.6299 25.375 13.7656 25.1989 13.8587 24.9998C13.9519 24.8007 14.0001 24.5836 14 24.3638V18.5C14 18.1022 13.842 17.7207 13.5607 17.4394C13.2794 17.1581 12.8978 17 12.5 17ZM11 22.5663L6.5 21.75V20H11V22.5663ZM27 17H17.5C17.1022 17 16.7206 17.1581 16.4393 17.4394C16.158 17.7207 16 18.1022 16 18.5V25.2725C15.9996 25.624 16.1226 25.9645 16.3477 26.2346C16.5727 26.5046 16.8854 26.687 17.2313 26.75L26.7313 28.4775C26.9476 28.5169 27.1699 28.5083 27.3826 28.4522C27.5952 28.3961 27.7929 28.294 27.9616 28.153C28.1304 28.012 28.2661 27.8357 28.3591 27.6364C28.4522 27.4372 28.5003 27.2199 28.5 27V18.5C28.5 18.1022 28.342 17.7207 28.0607 17.4394C27.7794 17.1581 27.3978 17 27 17ZM25.5 25.2025L19 24.0213V20H25.5V25.2025Z"
|
|
47
|
+
fill="currentColor"
|
|
48
|
+
/>
|
|
49
|
+
</svg>
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
if (type === "fill") {
|
|
53
|
+
return (
|
|
54
|
+
<svg
|
|
55
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
56
|
+
width="32"
|
|
57
|
+
height="32"
|
|
58
|
+
viewBox="0 0 32 32"
|
|
59
|
+
fill="none"
|
|
60
|
+
>
|
|
61
|
+
<path
|
|
62
|
+
d="M14 18V24.455C14 24.7202 13.8946 24.9746 13.7071 25.1621C13.5196 25.3496 13.2652 25.455 13 25.455C12.9401 25.4546 12.8803 25.4492 12.8212 25.4388L4.82125 23.9838C4.59083 23.9419 4.38242 23.8205 4.23234 23.6407C4.08226 23.4609 4.00003 23.2342 4 23V18C4 17.7348 4.10536 17.4804 4.29289 17.2929C4.48043 17.1054 4.73478 17 5 17H13C13.2652 17 13.5196 17.1054 13.7071 17.2929C13.8946 17.4804 14 17.7348 14 18ZM13.6412 6.7775C13.5288 6.68358 13.397 6.61552 13.2553 6.57815C13.1136 6.54078 12.9654 6.53501 12.8212 6.56125L4.82125 8.01625C4.59083 8.05811 4.38242 8.17952 4.23234 8.35929C4.08226 8.53907 4.00003 8.76582 4 9V14C4 14.2652 4.10536 14.5196 4.29289 14.7071C4.48043 14.8946 4.73478 15 5 15H13C13.2652 15 13.5196 14.8946 13.7071 14.7071C13.8946 14.5196 14 14.2652 14 14V7.545C14 7.39861 13.9679 7.254 13.9059 7.12138C13.8439 6.98877 13.7536 6.87138 13.6412 6.7775ZM27 17H17C16.7348 17 16.4804 17.1054 16.2929 17.2929C16.1054 17.4804 16 17.7348 16 18V25.1813C15.9997 25.4157 16.0818 25.6427 16.2319 25.8227C16.382 26.0028 16.5906 26.1244 16.8213 26.1663L26.8213 27.9838C26.8802 27.9948 26.94 28.0002 27 28C27.2652 28 27.5196 27.8946 27.7071 27.7071C27.8946 27.5196 28 27.2652 28 27V18C28 17.7348 27.8946 17.4804 27.7071 17.2929C27.5196 17.1054 27.2652 17 27 17ZM27.6413 4.2325C27.5288 4.13858 27.397 4.07052 27.2553 4.03315C27.1136 3.99578 26.9654 3.99001 26.8213 4.01625L16.8213 5.835C16.5908 5.87686 16.3824 5.99827 16.2323 6.17804C16.0823 6.35782 16 6.58457 16 6.81875V14C16 14.2652 16.1054 14.5196 16.2929 14.7071C16.4804 14.8946 16.7348 15 17 15H27C27.2652 15 27.5196 14.8946 27.7071 14.7071C27.8946 14.5196 28 14.2652 28 14V5C28 4.85361 27.9679 4.709 27.9059 4.57638C27.8439 4.44377 27.7536 4.32638 27.6413 4.2325Z"
|
|
63
|
+
fill="currentColor"
|
|
64
|
+
/>
|
|
65
|
+
</svg>
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
if (type === "duotone") {
|
|
69
|
+
return (
|
|
70
|
+
<svg
|
|
71
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
72
|
+
width="32"
|
|
73
|
+
height="32"
|
|
74
|
+
viewBox="0 0 32 32"
|
|
75
|
+
fill="none"
|
|
76
|
+
>
|
|
77
|
+
<path
|
|
78
|
+
opacity="0.2"
|
|
79
|
+
d="M17 18H27V27L17 25.1812V18ZM5 23L13 24.455V18H5V23ZM17 6.81875V14H27V5L17 6.81875ZM5 14H13V7.545L5 9V14Z"
|
|
80
|
+
fill="currentColor"
|
|
81
|
+
/>
|
|
82
|
+
<path
|
|
83
|
+
d="M27 17H17C16.7348 17 16.4804 17.1054 16.2929 17.2929C16.1054 17.4804 16 17.7348 16 18V25.1813C15.9997 25.4157 16.0818 25.6427 16.2319 25.8227C16.382 26.0028 16.5906 26.1244 16.8213 26.1663L26.8213 27.9838C26.8802 27.9948 26.94 28.0002 27 28C27.2652 28 27.5196 27.8946 27.7071 27.7071C27.8946 27.5196 28 27.2652 28 27V18C28 17.7348 27.8946 17.4804 27.7071 17.2929C27.5196 17.1054 27.2652 17 27 17ZM26 25.8013L18 24.3475V19H26V25.8013ZM13 17H5C4.73478 17 4.48043 17.1054 4.29289 17.2929C4.10536 17.4804 4 17.7348 4 18V23C4.00003 23.2342 4.08226 23.4609 4.23234 23.6407C4.38242 23.8205 4.59083 23.9419 4.82125 23.9838L12.8212 25.4388C12.8803 25.4492 12.9401 25.4546 13 25.455C13.2652 25.455 13.5196 25.3496 13.7071 25.1621C13.8946 24.9746 14 24.7202 14 24.455V18C14 17.7348 13.8946 17.4804 13.7071 17.2929C13.5196 17.1054 13.2652 17 13 17ZM12 23.2563L6 22.165V19H12V23.2563ZM27.6413 4.2325C27.5288 4.13858 27.397 4.07052 27.2553 4.03315C27.1136 3.99578 26.9654 3.99001 26.8213 4.01625L16.8213 5.835C16.5908 5.87686 16.3824 5.99827 16.2323 6.17804C16.0823 6.35782 16 6.58457 16 6.81875V14C16 14.2652 16.1054 14.5196 16.2929 14.7071C16.4804 14.8946 16.7348 15 17 15H27C27.2652 15 27.5196 14.8946 27.7071 14.7071C27.8946 14.5196 28 14.2652 28 14V5C28 4.85361 27.9679 4.709 27.9059 4.57638C27.8439 4.44377 27.7536 4.32638 27.6413 4.2325ZM26 13H18V7.6525L26 6.19875V13ZM13.6412 6.7775C13.5288 6.68358 13.397 6.61552 13.2553 6.57815C13.1136 6.54078 12.9654 6.53501 12.8212 6.56125L4.82125 8.01625C4.59083 8.05811 4.38242 8.17952 4.23234 8.35929C4.08226 8.53907 4.00003 8.76582 4 9V14C4 14.2652 4.10536 14.5196 4.29289 14.7071C4.48043 14.8946 4.73478 15 5 15H13C13.2652 15 13.5196 14.8946 13.7071 14.7071C13.8946 14.5196 14 14.2652 14 14V7.545C14 7.39861 13.9679 7.254 13.9059 7.12138C13.8439 6.98877 13.7536 6.87138 13.6412 6.7775ZM12 13H6V9.835L12 8.75V13Z"
|
|
84
|
+
fill="currentColor"
|
|
85
|
+
/>
|
|
86
|
+
</svg>
|
|
87
|
+
);
|
|
88
|
+
}
|
|
89
|
+
return (
|
|
90
|
+
<svg
|
|
91
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
92
|
+
width="32"
|
|
93
|
+
height="32"
|
|
94
|
+
viewBox="0 0 32 32"
|
|
95
|
+
fill="none"
|
|
96
|
+
>
|
|
97
|
+
<path
|
|
98
|
+
d="M27 17.25H17C16.8011 17.25 16.6103 17.329 16.4697 17.4697C16.329 17.6103 16.25 17.8011 16.25 18V25.1812C16.2498 25.3571 16.3114 25.5274 16.4241 25.6624C16.5367 25.7975 16.6932 25.8886 16.8662 25.92L26.8662 27.7375C26.9103 27.7461 26.9551 27.7502 27 27.75C27.1989 27.75 27.3897 27.671 27.5303 27.5303C27.671 27.3897 27.75 27.1989 27.75 27V18C27.75 17.8011 27.671 17.6103 27.5303 17.4697C27.3897 17.329 27.1989 17.25 27 17.25ZM26.25 26.1012L17.75 24.5562V18.75H26.25V26.1012ZM13 17.25H5C4.80109 17.25 4.61032 17.329 4.46967 17.4697C4.32902 17.6103 4.25 17.8011 4.25 18V23C4.25011 23.1756 4.31186 23.3457 4.42447 23.4804C4.53709 23.6152 4.69343 23.7062 4.86625 23.7375L12.8663 25.1925C12.9104 25.2004 12.9551 25.2046 13 25.205C13.1989 25.205 13.3897 25.126 13.5303 24.9853C13.671 24.8447 13.75 24.6539 13.75 24.455V18C13.75 17.8011 13.671 17.6103 13.5303 17.4697C13.3897 17.329 13.1989 17.25 13 17.25ZM12.25 23.5562L5.75 22.375V18.75H12.25V23.5562ZM27.48 4.42375C27.3957 4.35364 27.2971 4.30287 27.191 4.27501C27.085 4.24715 26.9741 4.24288 26.8662 4.2625L16.8662 6.08C16.6932 6.11136 16.5367 6.20252 16.4241 6.33755C16.3114 6.47258 16.2498 6.6429 16.25 6.81875V14C16.25 14.1989 16.329 14.3897 16.4697 14.5303C16.6103 14.671 16.8011 14.75 17 14.75H27C27.1989 14.75 27.3897 14.671 27.5303 14.5303C27.671 14.3897 27.75 14.1989 27.75 14V5C27.75 4.89003 27.7258 4.7814 27.6791 4.68182C27.6325 4.58224 27.5645 4.49413 27.48 4.42375ZM26.25 13.25H17.75V7.44375L26.25 5.89875V13.25ZM13.48 6.97C13.3958 6.89968 13.2972 6.84868 13.1912 6.8206C13.0851 6.79252 12.9742 6.78805 12.8663 6.8075L4.86625 8.2625C4.69343 8.29382 4.53709 8.3848 4.42447 8.51957C4.31186 8.65435 4.25011 8.82437 4.25 9V14C4.25 14.1989 4.32902 14.3897 4.46967 14.5303C4.61032 14.671 4.80109 14.75 5 14.75H13C13.1989 14.75 13.3897 14.671 13.5303 14.5303C13.671 14.3897 13.75 14.1989 13.75 14V7.545C13.7498 7.43524 13.7255 7.32686 13.6789 7.2275C13.6322 7.12815 13.5643 7.04025 13.48 6.97ZM12.25 13.25H5.75V9.625L12.25 8.4425V13.25Z"
|
|
99
|
+
fill="currentColor"
|
|
100
|
+
/>
|
|
101
|
+
</svg>
|
|
102
|
+
);
|
|
103
|
+
};
|
|
104
|
+
|
|
105
|
+
export default WindowLogo;
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import IconProps from "../../IconProps";
|
|
2
|
+
|
|
3
|
+
const WarningCircle = ({ type }: IconProps) => {
|
|
4
|
+
if (type === "thin") {
|
|
5
|
+
return (
|
|
6
|
+
<svg
|
|
7
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
8
|
+
width="32"
|
|
9
|
+
height="32"
|
|
10
|
+
viewBox="0 0 32 32"
|
|
11
|
+
fill="none"
|
|
12
|
+
>
|
|
13
|
+
<path
|
|
14
|
+
d="M16 3.5C13.5277 3.5 11.111 4.23311 9.05538 5.60663C6.99976 6.98015 5.39761 8.93238 4.45151 11.2165C3.50542 13.5005 3.25787 16.0139 3.74019 18.4386C4.2225 20.8634 5.41301 23.0907 7.16117 24.8388C8.90933 26.587 11.1366 27.7775 13.5614 28.2598C15.9861 28.7421 18.4995 28.4946 20.7835 27.5485C23.0676 26.6024 25.0199 25.0002 26.3934 22.9446C27.7669 20.889 28.5 18.4723 28.5 16C28.4964 12.6859 27.1782 9.5086 24.8348 7.16518C22.4914 4.82177 19.3141 3.50364 16 3.5ZM16 27.5C13.7255 27.5 11.5021 26.8255 9.61095 25.5619C7.71978 24.2983 6.2458 22.5022 5.37539 20.4009C4.50498 18.2995 4.27724 15.9872 4.72097 13.7565C5.1647 11.5257 6.25997 9.47658 7.86828 7.86827C9.47658 6.25997 11.5257 5.1647 13.7565 4.72097C15.9872 4.27724 18.2995 4.50498 20.4009 5.37539C22.5022 6.24579 24.2983 7.71978 25.5619 9.61094C26.8255 11.5021 27.5 13.7255 27.5 16C27.4967 19.049 26.284 21.9721 24.1281 24.1281C21.9721 26.284 19.049 27.4967 16 27.5ZM15.5 17V10C15.5 9.86739 15.5527 9.74021 15.6465 9.64645C15.7402 9.55268 15.8674 9.5 16 9.5C16.1326 9.5 16.2598 9.55268 16.3536 9.64645C16.4473 9.74021 16.5 9.86739 16.5 10V17C16.5 17.1326 16.4473 17.2598 16.3536 17.3536C16.2598 17.4473 16.1326 17.5 16 17.5C15.8674 17.5 15.7402 17.4473 15.6465 17.3536C15.5527 17.2598 15.5 17.1326 15.5 17ZM17 21.5C17 21.6978 16.9414 21.8911 16.8315 22.0556C16.7216 22.22 16.5654 22.3482 16.3827 22.4239C16.2 22.4996 15.9989 22.5194 15.8049 22.4808C15.6109 22.4422 15.4328 22.347 15.2929 22.2071C15.153 22.0673 15.0578 21.8891 15.0192 21.6951C14.9806 21.5011 15.0004 21.3 15.0761 21.1173C15.1518 20.9346 15.28 20.7784 15.4444 20.6685C15.6089 20.5586 15.8022 20.5 16 20.5C16.2652 20.5 16.5196 20.6054 16.7071 20.7929C16.8946 20.9804 17 21.2348 17 21.5Z"
|
|
15
|
+
fill="currentColor"
|
|
16
|
+
/>
|
|
17
|
+
</svg>
|
|
18
|
+
);
|
|
19
|
+
}
|
|
20
|
+
if (type === "regular") {
|
|
21
|
+
return (
|
|
22
|
+
<svg
|
|
23
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
24
|
+
width="32"
|
|
25
|
+
height="32"
|
|
26
|
+
viewBox="0 0 32 32"
|
|
27
|
+
fill="none"
|
|
28
|
+
>
|
|
29
|
+
<path
|
|
30
|
+
d="M16 3C13.4288 3 10.9154 3.76244 8.77759 5.1909C6.63975 6.61935 4.97351 8.64968 3.98957 11.0251C3.00563 13.4006 2.74819 16.0144 3.2498 18.5362C3.75141 21.0579 4.98953 23.3743 6.80762 25.1924C8.6257 27.0105 10.9421 28.2486 13.4638 28.7502C15.9856 29.2518 18.5995 28.9944 20.9749 28.0104C23.3503 27.0265 25.3807 25.3603 26.8091 23.2224C28.2376 21.0846 29 18.5712 29 16C28.9964 12.5533 27.6256 9.24882 25.1884 6.81163C22.7512 4.37445 19.4467 3.00364 16 3ZM16 27C13.8244 27 11.6977 26.3549 9.88873 25.1462C8.07979 23.9375 6.66989 22.2195 5.83733 20.2095C5.00477 18.1995 4.78693 15.9878 5.21137 13.854C5.63581 11.7202 6.68345 9.7602 8.22183 8.22183C9.76021 6.68345 11.7202 5.6358 13.854 5.21136C15.9878 4.78692 18.1995 5.00476 20.2095 5.83733C22.2195 6.66989 23.9375 8.07979 25.1462 9.88873C26.3549 11.6977 27 13.8244 27 16C26.9967 18.9164 25.8367 21.7123 23.7745 23.7745C21.7123 25.8367 18.9164 26.9967 16 27ZM15 17V10C15 9.73478 15.1054 9.48043 15.2929 9.29289C15.4804 9.10536 15.7348 9 16 9C16.2652 9 16.5196 9.10536 16.7071 9.29289C16.8946 9.48043 17 9.73478 17 10V17C17 17.2652 16.8946 17.5196 16.7071 17.7071C16.5196 17.8946 16.2652 18 16 18C15.7348 18 15.4804 17.8946 15.2929 17.7071C15.1054 17.5196 15 17.2652 15 17ZM17.5 21.5C17.5 21.7967 17.412 22.0867 17.2472 22.3334C17.0824 22.58 16.8481 22.7723 16.574 22.8858C16.2999 22.9993 15.9983 23.0291 15.7074 22.9712C15.4164 22.9133 15.1491 22.7704 14.9393 22.5607C14.7296 22.3509 14.5867 22.0836 14.5288 21.7926C14.471 21.5017 14.5007 21.2001 14.6142 20.926C14.7277 20.6519 14.92 20.4176 15.1667 20.2528C15.4133 20.088 15.7033 20 16 20C16.3978 20 16.7794 20.158 17.0607 20.4393C17.342 20.7206 17.5 21.1022 17.5 21.5Z"
|
|
31
|
+
fill="currentColor"
|
|
32
|
+
/>
|
|
33
|
+
</svg>
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
if (type === "bold") {
|
|
37
|
+
return (
|
|
38
|
+
<svg
|
|
39
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
40
|
+
width="32"
|
|
41
|
+
height="32"
|
|
42
|
+
viewBox="0 0 32 32"
|
|
43
|
+
fill="none"
|
|
44
|
+
>
|
|
45
|
+
<path
|
|
46
|
+
d="M16 2.5C13.33 2.5 10.7199 3.29176 8.49981 4.77516C6.27974 6.25856 4.54942 8.36697 3.52763 10.8338C2.50585 13.3006 2.2385 16.015 2.7594 18.6337C3.28031 21.2525 4.56606 23.6579 6.45406 25.5459C8.34207 27.434 10.7475 28.7197 13.3663 29.2406C15.985 29.7615 18.6994 29.4942 21.1662 28.4724C23.633 27.4506 25.7414 25.7203 27.2248 23.5002C28.7082 21.2801 29.5 18.67 29.5 16C29.496 12.4208 28.0724 8.98932 25.5416 6.45844C23.0107 3.92756 19.5792 2.50397 16 2.5ZM16 26.5C13.9233 26.5 11.8932 25.8842 10.1665 24.7304C8.4398 23.5767 7.09399 21.9368 6.29927 20.0182C5.50455 18.0996 5.29662 15.9884 5.70176 13.9516C6.10691 11.9148 7.10693 10.0438 8.57538 8.57538C10.0438 7.10693 11.9148 6.1069 13.9516 5.70175C15.9884 5.29661 18.0996 5.50454 20.0182 6.29926C21.9368 7.09399 23.5767 8.4398 24.7304 10.1665C25.8842 11.8932 26.5 13.9233 26.5 16C26.497 18.7839 25.3898 21.4528 23.4213 23.4213C21.4529 25.3898 18.7839 26.497 16 26.5ZM14.5 16.5V10C14.5 9.60218 14.658 9.22064 14.9393 8.93934C15.2206 8.65804 15.6022 8.5 16 8.5C16.3978 8.5 16.7794 8.65804 17.0607 8.93934C17.342 9.22064 17.5 9.60218 17.5 10V16.5C17.5 16.8978 17.342 17.2794 17.0607 17.5607C16.7794 17.842 16.3978 18 16 18C15.6022 18 15.2206 17.842 14.9393 17.5607C14.658 17.2794 14.5 16.8978 14.5 16.5ZM18 21.5C18 21.8956 17.8827 22.2822 17.6629 22.6111C17.4432 22.94 17.1308 23.1964 16.7654 23.3478C16.3999 23.4991 15.9978 23.5387 15.6098 23.4616C15.2219 23.3844 14.8655 23.1939 14.5858 22.9142C14.3061 22.6345 14.1156 22.2781 14.0384 21.8902C13.9613 21.5022 14.0009 21.1001 14.1522 20.7346C14.3036 20.3692 14.56 20.0568 14.8889 19.8371C15.2178 19.6173 15.6044 19.5 16 19.5C16.5304 19.5 17.0391 19.7107 17.4142 20.0858C17.7893 20.4609 18 20.9696 18 21.5Z"
|
|
47
|
+
fill="currentColor"
|
|
48
|
+
/>
|
|
49
|
+
</svg>
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
if (type === "fill") {
|
|
53
|
+
return (
|
|
54
|
+
<svg
|
|
55
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
56
|
+
width="32"
|
|
57
|
+
height="32"
|
|
58
|
+
viewBox="0 0 32 32"
|
|
59
|
+
fill="none"
|
|
60
|
+
>
|
|
61
|
+
<path
|
|
62
|
+
d="M16 3C13.4288 3 10.9154 3.76244 8.77759 5.1909C6.63975 6.61935 4.97351 8.64968 3.98957 11.0251C3.00563 13.4006 2.74819 16.0144 3.2498 18.5362C3.75141 21.0579 4.98953 23.3743 6.80762 25.1924C8.6257 27.0105 10.9421 28.2486 13.4638 28.7502C15.9856 29.2518 18.5995 28.9944 20.9749 28.0104C23.3503 27.0265 25.3807 25.3603 26.8091 23.2224C28.2376 21.0846 29 18.5712 29 16C28.9964 12.5533 27.6256 9.24882 25.1884 6.81163C22.7512 4.37445 19.4467 3.00364 16 3ZM15 10C15 9.73478 15.1054 9.48043 15.2929 9.29289C15.4804 9.10536 15.7348 9 16 9C16.2652 9 16.5196 9.10536 16.7071 9.29289C16.8946 9.48043 17 9.73478 17 10V17C17 17.2652 16.8946 17.5196 16.7071 17.7071C16.5196 17.8946 16.2652 18 16 18C15.7348 18 15.4804 17.8946 15.2929 17.7071C15.1054 17.5196 15 17.2652 15 17V10ZM16 23C15.7033 23 15.4133 22.912 15.1667 22.7472C14.92 22.5824 14.7277 22.3481 14.6142 22.074C14.5007 21.7999 14.471 21.4983 14.5288 21.2074C14.5867 20.9164 14.7296 20.6491 14.9393 20.4393C15.1491 20.2296 15.4164 20.0867 15.7074 20.0288C15.9983 19.9709 16.2999 20.0007 16.574 20.1142C16.8481 20.2277 17.0824 20.42 17.2472 20.6666C17.412 20.9133 17.5 21.2033 17.5 21.5C17.5 21.8978 17.342 22.2794 17.0607 22.5607C16.7794 22.842 16.3978 23 16 23Z"
|
|
63
|
+
fill="currentColor"
|
|
64
|
+
/>
|
|
65
|
+
</svg>
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
if (type === "duotone") {
|
|
69
|
+
return (
|
|
70
|
+
<svg
|
|
71
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
72
|
+
width="32"
|
|
73
|
+
height="32"
|
|
74
|
+
viewBox="0 0 32 32"
|
|
75
|
+
fill="none"
|
|
76
|
+
>
|
|
77
|
+
<path
|
|
78
|
+
opacity="0.2"
|
|
79
|
+
d="M28 16C28 18.3734 27.2962 20.6935 25.9776 22.6668C24.6591 24.6402 22.7849 26.1783 20.5922 27.0866C18.3995 27.9948 15.9867 28.2324 13.6589 27.7694C11.3312 27.3064 9.19295 26.1635 7.51472 24.4853C5.83649 22.8071 4.6936 20.6689 4.23058 18.3411C3.76756 16.0133 4.0052 13.6005 4.91345 11.4078C5.8217 9.21509 7.35977 7.34094 9.33316 6.02236C11.3066 4.70379 13.6266 4 16 4C19.1826 4 22.2348 5.26428 24.4853 7.51472C26.7357 9.76516 28 12.8174 28 16Z"
|
|
80
|
+
fill="currentColor"
|
|
81
|
+
/>
|
|
82
|
+
<path
|
|
83
|
+
d="M16 3C13.4288 3 10.9154 3.76244 8.77759 5.1909C6.63975 6.61935 4.97351 8.64968 3.98957 11.0251C3.00563 13.4006 2.74819 16.0144 3.2498 18.5362C3.75141 21.0579 4.98953 23.3743 6.80762 25.1924C8.6257 27.0105 10.9421 28.2486 13.4638 28.7502C15.9856 29.2518 18.5995 28.9944 20.9749 28.0104C23.3503 27.0265 25.3807 25.3603 26.8091 23.2224C28.2376 21.0846 29 18.5712 29 16C28.9964 12.5533 27.6256 9.24882 25.1884 6.81163C22.7512 4.37445 19.4467 3.00364 16 3ZM16 27C13.8244 27 11.6977 26.3549 9.88873 25.1462C8.07979 23.9375 6.66989 22.2195 5.83733 20.2095C5.00477 18.1995 4.78693 15.9878 5.21137 13.854C5.63581 11.7202 6.68345 9.7602 8.22183 8.22183C9.76021 6.68345 11.7202 5.6358 13.854 5.21136C15.9878 4.78692 18.1995 5.00476 20.2095 5.83733C22.2195 6.66989 23.9375 8.07979 25.1462 9.88873C26.3549 11.6977 27 13.8244 27 16C26.9967 18.9164 25.8367 21.7123 23.7745 23.7745C21.7123 25.8367 18.9164 26.9967 16 27ZM15 17V10C15 9.73478 15.1054 9.48043 15.2929 9.29289C15.4804 9.10536 15.7348 9 16 9C16.2652 9 16.5196 9.10536 16.7071 9.29289C16.8946 9.48043 17 9.73478 17 10V17C17 17.2652 16.8946 17.5196 16.7071 17.7071C16.5196 17.8946 16.2652 18 16 18C15.7348 18 15.4804 17.8946 15.2929 17.7071C15.1054 17.5196 15 17.2652 15 17ZM17.5 21.5C17.5 21.7967 17.412 22.0867 17.2472 22.3334C17.0824 22.58 16.8481 22.7723 16.574 22.8858C16.2999 22.9993 15.9983 23.0291 15.7074 22.9712C15.4164 22.9133 15.1491 22.7704 14.9393 22.5607C14.7296 22.3509 14.5867 22.0836 14.5288 21.7926C14.471 21.5017 14.5007 21.2001 14.6142 20.926C14.7277 20.6519 14.92 20.4176 15.1667 20.2528C15.4133 20.088 15.7033 20 16 20C16.3978 20 16.7794 20.158 17.0607 20.4393C17.342 20.7206 17.5 21.1022 17.5 21.5Z"
|
|
84
|
+
fill="currentColor"
|
|
85
|
+
/>
|
|
86
|
+
</svg>
|
|
87
|
+
);
|
|
88
|
+
}
|
|
89
|
+
return (
|
|
90
|
+
<svg
|
|
91
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
92
|
+
width="32"
|
|
93
|
+
height="32"
|
|
94
|
+
viewBox="0 0 32 32"
|
|
95
|
+
fill="none"
|
|
96
|
+
>
|
|
97
|
+
<path
|
|
98
|
+
d="M16 3.25C13.4783 3.25 11.0132 3.99777 8.91648 5.39876C6.81976 6.79975 5.18556 8.79103 4.22054 11.1208C3.25552 13.4505 3.00303 16.0141 3.49499 18.4874C3.98696 20.9607 5.20127 23.2325 6.98439 25.0156C8.76751 26.7987 11.0393 28.0131 13.5126 28.505C15.9859 28.997 18.5495 28.7445 20.8792 27.7795C23.209 26.8144 25.2003 25.1802 26.6012 23.0835C28.0022 20.9868 28.75 18.5217 28.75 16C28.746 12.6197 27.4015 9.379 25.0112 6.98877C22.621 4.59854 19.3803 3.25397 16 3.25ZM16 27.25C13.775 27.25 11.5999 26.5902 9.74984 25.354C7.89979 24.1179 6.45785 22.3609 5.60636 20.3052C4.75488 18.2495 4.53209 15.9875 4.96617 13.8052C5.40025 11.6229 6.47171 9.61839 8.04505 8.04505C9.6184 6.47171 11.623 5.40025 13.8052 4.96617C15.9875 4.53208 18.2495 4.75487 20.3052 5.60636C22.3609 6.45784 24.1179 7.89978 25.354 9.74984C26.5902 11.5999 27.25 13.775 27.25 16C27.2467 18.9827 26.0604 21.8422 23.9513 23.9513C21.8422 26.0604 18.9827 27.2467 16 27.25ZM15.25 17V10C15.25 9.80109 15.329 9.61032 15.4697 9.46967C15.6103 9.32902 15.8011 9.25 16 9.25C16.1989 9.25 16.3897 9.32902 16.5303 9.46967C16.671 9.61032 16.75 9.80109 16.75 10V17C16.75 17.1989 16.671 17.3897 16.5303 17.5303C16.3897 17.671 16.1989 17.75 16 17.75C15.8011 17.75 15.6103 17.671 15.4697 17.5303C15.329 17.3897 15.25 17.1989 15.25 17ZM17.25 21.5C17.25 21.7472 17.1767 21.9889 17.0393 22.1945C16.902 22.4 16.7068 22.5602 16.4784 22.6549C16.25 22.7495 15.9986 22.7742 15.7561 22.726C15.5137 22.6777 15.2909 22.5587 15.1161 22.3839C14.9413 22.2091 14.8223 21.9863 14.774 21.7439C14.7258 21.5014 14.7505 21.2501 14.8452 21.0216C14.9398 20.7932 15.1 20.598 15.3055 20.4607C15.5111 20.3233 15.7528 20.25 16 20.25C16.3315 20.25 16.6495 20.3817 16.8839 20.6161C17.1183 20.8505 17.25 21.1685 17.25 21.5Z"
|
|
99
|
+
fill="currentColor"
|
|
100
|
+
/>
|
|
101
|
+
</svg>
|
|
102
|
+
);
|
|
103
|
+
};
|
|
104
|
+
|
|
105
|
+
export default WarningCircle;
|