@grantbii/design-system 1.13.10 → 1.13.12
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/core/archive/Badges.js +1 -1
- package/core/archive/Badges.js.map +1 -1
- package/core/archive/LinkButton.d.ts +1 -1
- package/core/archive/LinkButton.js +1 -1
- package/core/archive/LinkButton.js.map +1 -1
- package/core/archive/LocationIcon.js +1 -1
- package/core/archive/LocationIcon.js.map +1 -1
- package/core/archive/RadioButtons.d.ts +1 -1
- package/core/archive/RadioButtons.js.map +1 -1
- package/core/atoms/BrandLogo.js +1 -1
- package/core/atoms/BrandLogo.js.map +1 -1
- package/core/{foundations/colors.js → atoms/Color.js} +1 -1
- package/core/atoms/Color.js.map +1 -0
- package/core/atoms/Loader.js +2 -0
- package/core/atoms/Loader.js.map +1 -0
- package/core/atoms/Overlay.js +1 -1
- package/core/atoms/Overlay.js.map +1 -1
- package/core/{foundations/responsive.js → atoms/Responsive.js} +1 -1
- package/core/atoms/Responsive.js.map +1 -0
- package/core/{foundations/flags.js → atoms/RichIcon.js} +1 -1
- package/core/atoms/RichIcon.js.map +1 -0
- package/core/{foundations/icons.js → atoms/SystemIcon.js} +1 -1
- package/core/atoms/SystemIcon.js.map +1 -0
- package/core/{foundations/typography.d.ts → atoms/Typography.d.ts} +1 -1
- package/core/{foundations/typography.js → atoms/Typography.js} +1 -1
- package/core/atoms/Typography.js.map +1 -0
- package/core/atoms/index.d.ts +6 -0
- package/core/atoms/index.js +6 -0
- package/core/atoms/index.js.map +1 -1
- package/core/global/GlobalStyle.js +1 -1
- package/core/global/GlobalStyle.js.map +1 -1
- package/core/integrations/fragments.js +2 -2
- package/core/integrations/fragments.js.map +1 -1
- package/core/integrations/mappings.d.ts +1 -1
- package/core/integrations/mappings.js.map +1 -1
- package/core/molecules/Badge.d.ts +1 -1
- package/core/molecules/Badge.js +1 -1
- package/core/molecules/Badge.js.map +1 -1
- package/core/molecules/Button.d.ts +1 -1
- package/core/molecules/Button.js +1 -1
- package/core/molecules/Button.js.map +1 -1
- package/core/molecules/Input.d.ts +1 -1
- package/core/molecules/Input.js +2 -1
- package/core/molecules/Input.js.map +1 -1
- package/core/molecules/PageLoader.js +1 -1
- package/core/molecules/PageLoader.js.map +1 -1
- package/core/molecules/RadioButton.d.ts +1 -1
- package/core/molecules/RadioButton.js.map +1 -1
- package/core/molecules/Textarea.js +1 -1
- package/core/molecules/Textarea.js.map +1 -1
- package/core/organisms/Dropdown.d.ts +1 -1
- package/core/organisms/Dropdown.js +2 -1
- package/core/organisms/Dropdown.js.map +1 -1
- package/core/organisms/FileDrop.js +2 -2
- package/core/organisms/FileDrop.js.map +1 -1
- package/core/organisms/GrantMatch/ActiveQueryFiles.js +1 -1
- package/core/organisms/GrantMatch/ActiveQueryFiles.js.map +1 -1
- package/core/organisms/GrantMatch/GrantMatchModal.js +1 -1
- package/core/organisms/GrantMatch/GrantMatchModal.js.map +1 -1
- package/core/organisms/GrantMatch/SearchBar.js +1 -1
- package/core/organisms/GrantMatch/SearchBar.js.map +1 -1
- package/core/organisms/Modal.js +1 -2
- package/core/organisms/Modal.js.map +1 -1
- package/core/shared.d.ts +1 -1
- package/core/shared.js +1 -1
- package/core/shared.js.map +1 -1
- package/core/templates/ErrorFallback.js +1 -1
- package/core/templates/ErrorFallback.js.map +1 -1
- package/core/types.js.map +1 -0
- package/index.d.ts +1 -1
- package/index.js +0 -1
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/tsconfig.tsbuildinfo +1 -1
- package/core/foundations/colors.js.map +0 -1
- package/core/foundations/flags.js.map +0 -1
- package/core/foundations/icons.js.map +0 -1
- package/core/foundations/index.d.ts +0 -7
- package/core/foundations/index.js +0 -7
- package/core/foundations/index.js.map +0 -1
- package/core/foundations/loaders.js +0 -2
- package/core/foundations/loaders.js.map +0 -1
- package/core/foundations/responsive.js.map +0 -1
- package/core/foundations/types.js.map +0 -1
- package/core/foundations/typography.js.map +0 -1
- /package/core/{foundations/colors.d.ts → atoms/Color.d.ts} +0 -0
- /package/core/{foundations/loaders.d.ts → atoms/Loader.d.ts} +0 -0
- /package/core/{foundations/responsive.d.ts → atoms/Responsive.d.ts} +0 -0
- /package/core/{foundations/flags.d.ts → atoms/RichIcon.d.ts} +0 -0
- /package/core/{foundations/icons.d.ts → atoms/SystemIcon.d.ts} +0 -0
- /package/core/{foundations/types.d.ts → types.d.ts} +0 -0
- /package/core/{foundations/types.js → types.js} +0 -0
package/core/archive/Badges.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { createElement as _createElement } from "react";
|
|
3
3
|
import styled, { css } from "styled-components";
|
|
4
|
-
import { Responsive } from "../
|
|
4
|
+
import { Responsive } from "../atoms";
|
|
5
5
|
import Badge, {} from "../molecules/Badge";
|
|
6
6
|
const Badges = ({ allBadgeProps, scrollable, vertical }) => (_jsx(BaseBadges, { "$scrollable": scrollable, "$vertical": vertical, children: allBadgeProps.map((badgeProps, index) => (_createElement(Badge, { ...badgeProps, key: `badge-${index}` }))) }));
|
|
7
7
|
export default Badges;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badges.js","sourceRoot":"","sources":["../../../core/archive/Badges.tsx"],"names":[],"mappings":";;AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAgB,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Badges.js","sourceRoot":"","sources":["../../../core/archive/Badges.tsx"],"names":[],"mappings":";;AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAgB,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,KAAK,EAAE,EAAmB,MAAM,oBAAoB,CAAC;AAQ5D,MAAM,MAAM,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAe,EAAE,EAAE,CAAC,CACvE,KAAC,UAAU,mBAAc,UAAU,eAAa,QAAQ,YACrD,aAAa,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,CACxC,eAAC,KAAK,OAAK,UAAU,EAAE,GAAG,EAAE,SAAS,KAAK,EAAE,GAAI,CACjD,CAAC,GACS,CACd,CAAC;AAEF,eAAe,MAAM,CAAC;AAEtB,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAgD;;oBAEzD,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;SACpE,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;;IAE3D,CAAC,EAAE,WAAW,GAAG,KAAK,EAAE,SAAS,GAAG,KAAK,EAAE,EAAE,EAAE,CAC/C,SAAS,CAAC,WAAW,EAAE,SAAS,CAAC;CACpC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,UAAmB,EAAE,QAAiB,EAAW,EAAE;IACpE,IAAI,QAAQ,IAAI,UAAU,EAAE,CAAC;QAC3B,OAAO,qBAAqB,CAAC;IAC/B,CAAC;SAAM,IAAI,QAAQ,EAAE,CAAC;QACpB,OAAO,uBAAuB,CAAC;IACjC,CAAC;SAAM,IAAI,UAAU,EAAE,CAAC;QACtB,OAAO,uBAAuB,CAAC;IACjC,CAAC;SAAM,CAAC;QACN,OAAO,yBAAyB,CAAC;IACnC,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;oBAIb,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;;qBAKlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;CAIvD,CAAC;AAEF,MAAM,uBAAuB,GAAG,GAAG,CAAA,EAAE,CAAC;AAEtC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;CAUlC,CAAC;AAEF,MAAM,yBAAyB,GAAG,GAAG,CAAA;;;CAGpC,CAAC","sourcesContent":["import styled, { css, type RuleSet } from \"styled-components\";\nimport { Responsive } from \"../atoms\";\nimport Badge, { type BadgeProps } from \"../molecules/Badge\";\n\ntype BadgesProps = {\n allBadgeProps: BadgeProps[];\n scrollable?: boolean;\n vertical?: boolean;\n};\n\nconst Badges = ({ allBadgeProps, scrollable, vertical }: BadgesProps) => (\n <BaseBadges $scrollable={scrollable} $vertical={vertical}>\n {allBadgeProps.map((badgeProps, index) => (\n <Badge {...badgeProps} key={`badge-${index}`} />\n ))}\n </BaseBadges>\n);\n\nexport default Badges;\n\nconst BaseBadges = styled.div<{ $scrollable?: boolean; $vertical?: boolean }>`\n display: flex;\n flex-direction: ${({ $vertical = false }) => ($vertical ? \"column\" : \"row\")};\n gap: ${({ $vertical = false }) => ($vertical ? \"4px\" : \"8px\")};\n\n ${({ $scrollable = false, $vertical = false }) =>\n deriveCSS($scrollable, $vertical)}\n`;\n\nconst deriveCSS = (scrollable: boolean, vertical: boolean): RuleSet => {\n if (vertical && scrollable) {\n return ScrollableVerticalCSS;\n } else if (vertical) {\n return UnscrollableVerticalCSS;\n } else if (scrollable) {\n return ScrollableHorizontalCSS;\n } else {\n return UnscrollableHorizontalCSS;\n }\n};\n\nconst ScrollableVerticalCSS = css`\n overflow-y: auto;\n\n /* show 3 badges max */\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n /* 3.5 * 27px (badge height) + 2 * 4px (gap) = 89 */\n height: 103px;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n /* 3.5 * 30px (badge height) + 2 * 4px (gap) = 113 */\n height: 113px;\n }\n`;\n\nconst UnscrollableVerticalCSS = css``;\n\nconst ScrollableHorizontalCSS = css`\n flex-wrap: nowrap;\n overflow-x: auto;\n\n /* hide scrollbar but still allow for scrolling */\n -ms-overflow-style: none;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n`;\n\nconst UnscrollableHorizontalCSS = css`\n flex-wrap: wrap;\n overflow-x: visible;\n`;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import Link from "next/link";
|
|
3
|
-
import { Icons } from "../
|
|
3
|
+
import { Icons } from "../atoms";
|
|
4
4
|
import { BaseButton } from "../shared";
|
|
5
5
|
/**
|
|
6
6
|
* A link that looks like a button
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../../core/archive/LinkButton.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAQ7B,OAAO,EAAE,KAAK,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../../core/archive/LinkButton.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAQ7B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAmBvC;;GAEG;AACH,MAAM,UAAU,GAAG,CAAC,EAClB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,WAAW,EACX,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAM,GAAG,QAAQ,EACjB,GAAG,SAAS,EACI,EAAE,EAAE;IACpB,MAAM,YAAY,GAAG;QACnB,KAAK;QACL,QAAQ;QACR,SAAS;QACT,SAAS;QACT,eAAe;QACf,WAAW;QACX,KAAK;QACL,KAAK;KACN,CAAC;IAEF,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,KAAC,OAAO,OAAK,YAAY,GAAI,CAC9B,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,OAAK,SAAS,EAAE,MAAM,EAAE,MAAM,YACjC,KAAC,OAAO,OAAK,YAAY,GAAI,GACxB,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC;AAa1B,MAAM,OAAO,GAAG,CAAC,EACf,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,WAAW,EACX,KAAK,EACL,KAAK,GACQ,EAAE,EAAE,CAAC,CAClB,MAAC,UAAU,kBACG,SAAS,sBACH,eAAe,kBACnB,WAAW,YACjB,KAAK,YACL,KAAK,aAEZ,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,EACvD,KAAK,EACL,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,IAC/C,CACd,CAAC","sourcesContent":["import Link from \"next/link\";\nimport type {\n AnchorHTMLAttributes,\n ComponentType,\n DetailedHTMLProps,\n HTMLAttributeAnchorTarget,\n ReactNode,\n} from \"react\";\nimport { Icons } from \"../atoms\";\nimport { BaseButton } from \"../shared\";\n\ntype LinkButtonProps = {\n label: ReactNode;\n href: string;\n disabled?: boolean;\n target?: HTMLAttributeAnchorTarget;\n LeftIcon?: ComponentType<Icons.IconProps>;\n RightIcon?: ComponentType<Icons.IconProps>;\n underline?: boolean;\n backgroundColor?: string;\n borderColor?: string;\n color?: string;\n width?: string;\n} & DetailedHTMLProps<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n HTMLAnchorElement\n>;\n\n/**\n * A link that looks like a button\n */\nconst LinkButton = ({\n label,\n LeftIcon,\n RightIcon,\n underline,\n backgroundColor,\n borderColor,\n color,\n width,\n disabled,\n target = \"_blank\",\n ...linkProps\n}: LinkButtonProps) => {\n const contentProps = {\n label,\n LeftIcon,\n RightIcon,\n underline,\n backgroundColor,\n borderColor,\n color,\n width,\n };\n\n return disabled ? (\n <Content {...contentProps} />\n ) : (\n <Link {...linkProps} target={target}>\n <Content {...contentProps} />\n </Link>\n );\n};\n\nexport default LinkButton;\n\ntype ContentProps = {\n label: ReactNode;\n LeftIcon?: ComponentType<Icons.IconProps>;\n RightIcon?: ComponentType<Icons.IconProps>;\n underline?: boolean;\n backgroundColor?: string;\n borderColor?: string;\n color?: string;\n width?: string;\n};\n\nconst Content = ({\n label,\n LeftIcon,\n RightIcon,\n underline,\n backgroundColor,\n borderColor,\n color,\n width,\n}: ContentProps) => (\n <BaseButton\n $underline={underline}\n $backgroundColor={backgroundColor}\n $borderColor={borderColor}\n $color={color}\n $width={width}\n >\n {LeftIcon ? <LeftIcon color={color} size={20} /> : <></>}\n {label}\n {RightIcon ? <RightIcon color={color} size={20} /> : <></>}\n </BaseButton>\n);\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Location } from "@grantbii/ui-core/location/enums";
|
|
3
|
-
import { Flags, Icons } from "../
|
|
3
|
+
import { Flags, Icons } from "../atoms";
|
|
4
4
|
const LocationIcon = ({ location, width }) => {
|
|
5
5
|
if (location === Location.OTHERS || location === Location.UNKNOWN) {
|
|
6
6
|
return _jsx(Icons.GlobeIcon, { size: width });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LocationIcon.js","sourceRoot":"","sources":["../../../core/archive/LocationIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"LocationIcon.js","sourceRoot":"","sources":["../../../core/archive/LocationIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAOxC,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAqB,EAAe,EAAE;IAC3E,IAAI,QAAQ,KAAK,QAAQ,CAAC,MAAM,IAAI,QAAQ,KAAK,QAAQ,CAAC,OAAO,EAAE,CAAC;QAClE,OAAO,KAAC,KAAK,CAAC,SAAS,IAAC,IAAI,EAAE,KAAK,GAAI,CAAC;IAC1C,CAAC;SAAM,CAAC;QACN,MAAM,IAAI,GAAG,iBAAiB,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;QACrD,OAAO,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;IAChC,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAE5B,MAAM,iBAAiB,GAEnB;IACF,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE;IAC9B,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE;IAC9B,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,EAAE;IAC7B,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,EAAE;IAChC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE;IAC1B,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE;IAC1B,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,EAAE;IACnC,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,EAAE;IAClC,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE;IAC3B,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE;CAC7B,CAAC","sourcesContent":["import { Location } from \"@grantbii/ui-core/location/enums\";\nimport type { JSX } from \"react\";\nimport { Flags, Icons } from \"../atoms\";\n\ntype LocationIconProps = {\n location: Location;\n width?: string | number;\n};\n\nconst LocationIcon = ({ location, width }: LocationIconProps): JSX.Element => {\n if (location === Location.OTHERS || location === Location.UNKNOWN) {\n return <Icons.GlobeIcon size={width} />;\n } else {\n const Flag = LOCATION_FLAG_MAP[location] ?? Flags.EU;\n return <Flag width={width} />;\n }\n};\n\nexport default LocationIcon;\n\nconst LOCATION_FLAG_MAP: {\n [location in Location]: Flags.FlagComponent;\n} = {\n [Location.SINGAPORE]: Flags.SG,\n [Location.HONG_KONG]: Flags.HK,\n [Location.MALAYSIA]: Flags.MY,\n [Location.SOUTH_KOREA]: Flags.KR,\n [Location.JAPAN]: Flags.JP,\n [Location.CHINA]: Flags.CN,\n [Location.UNITED_KINGDOM]: Flags.GB,\n [Location.UNITED_STATES]: Flags.US,\n [Location.OTHERS]: Flags.EU,\n [Location.UNKNOWN]: Flags.EU,\n};\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { DetailedHTMLProps, InputHTMLAttributes } from "react";
|
|
2
|
-
import type { Option } from "../
|
|
2
|
+
import type { Option } from "../types";
|
|
3
3
|
export type RadioOption = Option & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
|
|
4
4
|
type RadioButtonProps = {
|
|
5
5
|
name?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtons.js","sourceRoot":"","sources":["../../../core/archive/RadioButtons.tsx"],"names":[],"mappings":";;AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAW3C,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAoB,EAAE,EAAE,CAAC,CAC5D,KAAC,UAAU,cACR,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CACxC,eAAC,WAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,IAAI,IAAI,KAAK,EAAE,EACvB,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EACnB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,GACV,CACH,CAAC,GACS,CACd,CAAC;AAEF,eAAe,YAAY,CAAC;AAE5B,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO5B,CAAC","sourcesContent":["import type { DetailedHTMLProps, InputHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\nimport { RadioButton } from \"../molecules\";\nimport type { Option } from \"../
|
|
1
|
+
{"version":3,"file":"RadioButtons.js","sourceRoot":"","sources":["../../../core/archive/RadioButtons.tsx"],"names":[],"mappings":";;AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAW3C,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAoB,EAAE,EAAE,CAAC,CAC5D,KAAC,UAAU,cACR,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CACxC,eAAC,WAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,IAAI,IAAI,KAAK,EAAE,EACvB,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EACnB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,GACV,CACH,CAAC,GACS,CACd,CAAC;AAEF,eAAe,YAAY,CAAC;AAE5B,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO5B,CAAC","sourcesContent":["import type { DetailedHTMLProps, InputHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\nimport { RadioButton } from \"../molecules\";\nimport type { Option } from \"../types\";\n\nexport type RadioOption = Option &\n DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;\n\ntype RadioButtonProps = {\n name?: string;\n options: RadioOption[];\n};\n\nconst RadioButtons = ({ name, options }: RadioButtonProps) => (\n <RadioGroup>\n {options.map(({ id, value, ...props }) => (\n <RadioButton\n {...props}\n key={`${name}-${value}`}\n id={id ? id : value} // assume mutually exclusive values\n value={value}\n name={name}\n />\n ))}\n </RadioGroup>\n);\n\nexport default RadioButtons;\n\nconst RadioGroup = styled.div`\n display: flex;\n align-items: center;\n gap: 12px;\n\n white-space: nowrap;\n flex-wrap: wrap;\n`;\n"]}
|
package/core/atoms/BrandLogo.js
CHANGED
|
@@ -3,7 +3,7 @@ import Image from "next/image";
|
|
|
3
3
|
import styled from "styled-components";
|
|
4
4
|
import darkLogo from "../assets/logos/brand_logo-dark.webp";
|
|
5
5
|
import lightLogo from "../assets/logos/brand_logo-light.webp";
|
|
6
|
-
import
|
|
6
|
+
import * as Responsive from "../atoms/Responsive";
|
|
7
7
|
const BrandLogo = ({ isDarkTheme = true, alt = "Grantbii", }) => (_jsx(BrandImage, { src: isDarkTheme ? darkLogo : lightLogo, width: 250, height: 80, alt: alt, priority: true }));
|
|
8
8
|
export default BrandLogo;
|
|
9
9
|
const BrandImage = styled(Image) `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BrandLogo.js","sourceRoot":"","sources":["../../../core/atoms/BrandLogo.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,QAAQ,MAAM,sCAAsC,CAAC;AAC5D,OAAO,SAAS,MAAM,uCAAuC,CAAC;AAC9D,OAAO,
|
|
1
|
+
{"version":3,"file":"BrandLogo.js","sourceRoot":"","sources":["../../../core/atoms/BrandLogo.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,QAAQ,MAAM,sCAAsC,CAAC;AAC5D,OAAO,SAAS,MAAM,uCAAuC,CAAC;AAC9D,OAAO,KAAK,UAAU,MAAM,qBAAqB,CAAC;AAOlD,MAAM,SAAS,GAAG,CAAC,EACjB,WAAW,GAAG,IAAI,EAClB,GAAG,GAAG,UAAU,GACD,EAAE,EAAE,CAAC,CACpB,KAAC,UAAU,IACT,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACvC,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,EAAE,EACV,GAAG,EAAE,GAAG,EACR,QAAQ,SACR,CACH,CAAC;AAEF,eAAe,SAAS,CAAC;AAEzB,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;oBACZ,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;;qBAKlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;CAIvD,CAAC","sourcesContent":["import Image from \"next/image\";\nimport styled from \"styled-components\";\nimport darkLogo from \"../assets/logos/brand_logo-dark.webp\";\nimport lightLogo from \"../assets/logos/brand_logo-light.webp\";\nimport * as Responsive from \"../atoms/Responsive\";\n\ntype BrandLogoProps = {\n isDarkTheme?: boolean;\n alt?: string;\n};\n\nconst BrandLogo = ({\n isDarkTheme = true,\n alt = \"Grantbii\",\n}: BrandLogoProps) => (\n <BrandImage\n src={isDarkTheme ? darkLogo : lightLogo}\n width={250}\n height={80}\n alt={alt}\n priority\n />\n);\n\nexport default BrandLogo;\n\nconst BrandImage = styled(Image)`\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n width: 125px;\n height: 40px;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n width: 150px;\n height: 48px;\n }\n`;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Color.js","sourceRoot":"","sources":["../../../core/atoms/Color.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,YAAY,EAAE,SAAS;IACvB,cAAc,EAAE,SAAS;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,4DAA4D;IAC5D,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,8CAA8C;IAC9C,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,kDAAkD;IAClD,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,qCAAqC;IACrC,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,OAAO,EAAE,WAAW;CACrB,CAAC","sourcesContent":["export const main = {\n grantbiiBlue: \"#16538A\",\n grantbiiOrange: \"#EBA338\",\n};\n\nexport const base = {\n black: \"#232022\",\n white: \"#FFFFFF\",\n};\n\nexport const neutral = {\n grey1: \"#999999\",\n grey2: \"#CCCCCC\",\n grey3: \"#EEEEEE\",\n grey4: \"#FAFAFA\",\n};\n\nexport const accent = {\n // usually includes dangerous, wrong or rejected information\n red1: \"#C02318\",\n red2: \"#F88E86\",\n red3: \"#FFE9E7\",\n // usually indicates warning, progressing, etc\n yellow1: \"#EDAB03\",\n yellow2: \"#F4CC68\",\n yellow3: \"#FFF9E8\",\n // usually indicates success, correct, passed, etc\n green1: \"#08A45E\",\n green2: \"#6BC89E\",\n green3: \"#EBFFF6\",\n green4: \"#F5FFFA\",\n // usually indicates info, no emotion\n blue1: \"#1878E4\",\n blue2: \"#74AEEF\",\n blue3: \"#ECF5FF\",\n};\n\nexport const typography = {\n blackHigh: \"#1A1A1A\",\n blackMedium: \"#666666\",\n blackLow: \"#B2B2B2\",\n whiteHigh: \"#FFFFFF\",\n whiteMedium: \"#F5F5F5\",\n whiteLow: \"#E5E5E5\",\n};\n\nexport const semantic = {\n overlay: \"#13131366\",\n};\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../../core/atoms/Loader.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC","sourcesContent":["export * from \"react-spinners\";\n"]}
|
package/core/atoms/Overlay.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Overlay.js","sourceRoot":"","sources":["../../../core/atoms/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Overlay.js","sourceRoot":"","sources":["../../../core/atoms/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAA8B;;;;qBAInC,CAAC,EAAE,cAAc,GAAG,KAAK,EAAE,EAAE,EAAE,CAChD,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;iBACvB,CAAC,EAAE,cAAc,GAAG,KAAK,EAAE,EAAE,EAAE,CAC5C,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;;;;;;;;;;sBAUlB,MAAM,CAAC,QAAQ,CAAC,OAAO;CAC5C,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import styled from \"styled-components\";\nimport { Colors } from \"../atoms\";\n\nconst Overlay = styled.div<{ $centerContent?: boolean }>`\n display: flex;\n flex-direction: column;\n\n justify-content: ${({ $centerContent = false }) =>\n $centerContent ? \"center\" : \"normal\"};\n align-items: ${({ $centerContent = false }) =>\n $centerContent ? \"center\" : \"normal\"};\n\n z-index: 9999;\n position: fixed;\n top: 0px;\n left: 0px;\n\n width: 100vw;\n height: 100vh;\n\n background-color: ${Colors.semantic.overlay};\n`;\n\nexport default Overlay;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Responsive.js","sourceRoot":"","sources":["../../../core/atoms/Responsive.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,QAAQ;CACjB,CAAC","sourcesContent":["export const WIDTH_BREAKPOINTS = {\n laptop: \"1024px\",\n};\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export * from "country-flag-icons/react/3x2";
|
|
2
|
-
//# sourceMappingURL=
|
|
2
|
+
//# sourceMappingURL=RichIcon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RichIcon.js","sourceRoot":"","sources":["../../../core/atoms/RichIcon.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC","sourcesContent":["export * from \"country-flag-icons/react/3x2\";\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export * from "@phosphor-icons/react";
|
|
2
|
-
//# sourceMappingURL=
|
|
2
|
+
//# sourceMappingURL=SystemIcon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SystemIcon.js","sourceRoot":"","sources":["../../../core/atoms/SystemIcon.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC","sourcesContent":["export * from \"@phosphor-icons/react\";\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../core/atoms/Typography.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,gBAAgB,GAAc;IACzC,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAc;IAC1C,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAc;IAC7C,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAc;IACxC,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAc;IAC1C,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;CACd,CAAC","sourcesContent":["import type { ScreenSize } from \"../types\";\n\ntype FontSizes = { [screenSize in ScreenSize]: string };\n\nexport const TITLE_FONT_SIZES: FontSizes = {\n small: \"22px\",\n large: \"24px\",\n};\n\nexport const HEADER_FONT_SIZES: FontSizes = {\n small: \"20px\",\n large: \"22px\",\n};\n\nexport const SUBHEADER_FONT_SIZES: FontSizes = {\n small: \"18px\",\n large: \"20px\",\n};\n\nexport const BODY_FONT_SIZES: FontSizes = {\n small: \"14px\",\n large: \"16px\",\n};\n\nexport const HELPER_FONT_SIZES: FontSizes = {\n small: \"12px\",\n large: \"14px\",\n};\n"]}
|
package/core/atoms/index.d.ts
CHANGED
|
@@ -1,2 +1,8 @@
|
|
|
1
1
|
export { default as BrandLogo } from "./BrandLogo";
|
|
2
|
+
export * as Colors from "./Color";
|
|
3
|
+
export * as Loaders from "./Loader";
|
|
2
4
|
export { default as Overlay } from "./Overlay";
|
|
5
|
+
export * as Responsive from "./Responsive";
|
|
6
|
+
export * as Flags from "./RichIcon";
|
|
7
|
+
export * as Icons from "./SystemIcon";
|
|
8
|
+
export * as Typography from "./Typography";
|
package/core/atoms/index.js
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
1
|
export { default as BrandLogo } from "./BrandLogo";
|
|
2
|
+
export * as Colors from "./Color";
|
|
3
|
+
export * as Loaders from "./Loader";
|
|
2
4
|
export { default as Overlay } from "./Overlay";
|
|
5
|
+
export * as Responsive from "./Responsive";
|
|
6
|
+
export * as Flags from "./RichIcon";
|
|
7
|
+
export * as Icons from "./SystemIcon";
|
|
8
|
+
export * as Typography from "./Typography";
|
|
3
9
|
//# sourceMappingURL=index.js.map
|
package/core/atoms/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { default as BrandLogo } from \"./BrandLogo\";\nexport { default as Overlay } from \"./Overlay\";\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,KAAK,MAAM,MAAM,SAAS,CAAC;AAClC,OAAO,KAAK,OAAO,MAAM,UAAU,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AACtC,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC","sourcesContent":["export { default as BrandLogo } from \"./BrandLogo\";\nexport * as Colors from \"./Color\";\nexport * as Loaders from \"./Loader\";\nexport { default as Overlay } from \"./Overlay\";\nexport * as Responsive from \"./Responsive\";\nexport * as Flags from \"./RichIcon\";\nexport * as Icons from \"./SystemIcon\";\nexport * as Typography from \"./Typography\";\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalStyle.js","sourceRoot":"","sources":["../../../core/global/GlobalStyle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,yCAAyC,CAAC;AACjD,OAAO,KAAK,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"GlobalStyle.js","sourceRoot":"","sources":["../../../core/global/GlobalStyle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,yCAAyC,CAAC;AACjD,OAAO,KAAK,MAAM,MAAM,gBAAgB,CAAC;AAEzC,MAAM,WAAW,GAAG,iBAAiB,CAAA;;;;;;;aAOxB,MAAM,CAAC,UAAU,CAAC,SAAS;kBACtB,MAAM,CAAC,IAAI,CAAC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDlC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { createGlobalStyle } from \"styled-components\";\nimport \"../assets/fonts/satoshi/css/satoshi.css\";\nimport * as Colors from \"../atoms/Color\";\n\nconst GlobalStyle = createGlobalStyle`\n html,\n body {\n max-width: 100vw;\n }\n\n body {\n color: ${Colors.typography.blackHigh};\n background: ${Colors.base.white};\n font-family: Satoshi;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n button,\n fieldset,\n textarea {\n all: unset;\n }\n\n * {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n\n button:hover {\n cursor: pointer;\n }\n\n button:disabled {\n cursor: not-allowed;\n }\n\n li {\n list-style-position: inside;\n }\n\n li * {\n vertical-align: middle;\n }\n\n /* number textfield in Chrome, Safari, Edge, Opera */\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n /* number textfield in Firefox */\n input[type=\"number\"] {\n -moz-appearance: textfield;\n appearance: textfield;\n }\n`;\n\nexport default GlobalStyle;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from "styled-components";
|
|
2
|
-
import { WIDTH_BREAKPOINTS } from "../
|
|
3
|
-
import { BODY_FONT_SIZES, HEADER_FONT_SIZES, HELPER_FONT_SIZES, SUBHEADER_FONT_SIZES, TITLE_FONT_SIZES, } from "../
|
|
2
|
+
import { WIDTH_BREAKPOINTS } from "../atoms/Responsive";
|
|
3
|
+
import { BODY_FONT_SIZES, HEADER_FONT_SIZES, HELPER_FONT_SIZES, SUBHEADER_FONT_SIZES, TITLE_FONT_SIZES, } from "../atoms/Typography";
|
|
4
4
|
export const SmallScreenOnly = css `
|
|
5
5
|
@media (width < ${WIDTH_BREAKPOINTS.laptop}) {
|
|
6
6
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fragments.js","sourceRoot":"","sources":["../../../core/integrations/fragments.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"fragments.js","sourceRoot":"","sources":["../../../core/integrations/fragments.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,GACjB,MAAM,qBAAqB,CAAC;AAE7B,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;oBACd,iBAAiB,CAAC,MAAM;;;;qBAIvB,iBAAiB,CAAC,MAAM;;;CAG5C,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;oBACd,iBAAiB,CAAC,MAAM;;;;qBAIvB,iBAAiB,CAAC,MAAM;;;CAG5C,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;oBACZ,iBAAiB,CAAC,MAAM;iBAC3B,gBAAgB,CAAC,KAAK;;;qBAGlB,iBAAiB,CAAC,MAAM;iBAC5B,gBAAgB,CAAC,KAAK;;CAEtC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;oBACb,iBAAiB,CAAC,MAAM;iBAC3B,iBAAiB,CAAC,KAAK;;;qBAGnB,iBAAiB,CAAC,MAAM;iBAC5B,iBAAiB,CAAC,KAAK;;CAEvC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;oBAChB,iBAAiB,CAAC,MAAM;iBAC3B,oBAAoB,CAAC,KAAK;;;qBAGtB,iBAAiB,CAAC,MAAM;iBAC5B,oBAAoB,CAAC,KAAK;;CAE1C,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;oBACX,iBAAiB,CAAC,MAAM;iBAC3B,eAAe,CAAC,KAAK;;;qBAGjB,iBAAiB,CAAC,MAAM;iBAC5B,eAAe,CAAC,KAAK;;CAErC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;oBACb,iBAAiB,CAAC,MAAM;iBAC3B,iBAAiB,CAAC,KAAK;;;qBAGnB,iBAAiB,CAAC,MAAM;iBAC5B,iBAAiB,CAAC,KAAK;;CAEvC,CAAC","sourcesContent":["import { css } from \"styled-components\";\nimport { WIDTH_BREAKPOINTS } from \"../atoms/Responsive\";\nimport {\n BODY_FONT_SIZES,\n HEADER_FONT_SIZES,\n HELPER_FONT_SIZES,\n SUBHEADER_FONT_SIZES,\n TITLE_FONT_SIZES,\n} from \"../atoms/Typography\";\n\nexport const SmallScreenOnly = css`\n @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n display: flex;\n }\n\n @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n display: none;\n }\n`;\n\nexport const LargeScreenOnly = css`\n @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n display: none;\n }\n\n @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n display: flex;\n }\n`;\n\nexport const TitleFontSize = css`\n @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${TITLE_FONT_SIZES.small};\n }\n\n @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${TITLE_FONT_SIZES.large};\n }\n`;\n\nexport const HeaderFontSize = css`\n @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${HEADER_FONT_SIZES.small};\n }\n\n @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${HEADER_FONT_SIZES.large};\n }\n`;\n\nexport const SubheaderFontSize = css`\n @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${SUBHEADER_FONT_SIZES.small};\n }\n\n @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${SUBHEADER_FONT_SIZES.large};\n }\n`;\n\nexport const BodyFontSize = css`\n @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${BODY_FONT_SIZES.small};\n }\n\n @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${BODY_FONT_SIZES.large};\n }\n`;\n\nexport const HelperFontSize = css`\n @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${HELPER_FONT_SIZES.small};\n }\n\n @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${HELPER_FONT_SIZES.large};\n }\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mappings.js","sourceRoot":"","sources":["../../../core/integrations/mappings.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,QAAkB,EACR,EAAE,CACZ,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC;KACpB,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,QAAQ,CAAC,OAAO,CAAC;KAC7C,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC","sourcesContent":["import type { BaseEnumType } from \"@grantbii/ui-core/enums\";\nimport type { Option } from \"../
|
|
1
|
+
{"version":3,"file":"mappings.js","sourceRoot":"","sources":["../../../core/integrations/mappings.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,QAAkB,EACR,EAAE,CACZ,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC;KACpB,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,QAAQ,CAAC,OAAO,CAAC;KAC7C,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC","sourcesContent":["import type { BaseEnumType } from \"@grantbii/ui-core/enums\";\nimport type { Option } from \"../types\";\n\nexport const enumToOptions = <EnumType extends BaseEnumType>(\n enumType: EnumType,\n): Option[] =>\n Object.values(enumType)\n .filter((value) => value !== enumType.UNKNOWN)\n .map((value) => ({ label: value, value }));\n"]}
|
package/core/molecules/Badge.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import styled from "styled-components";
|
|
3
|
-
import { Colors, Icons, Responsive } from "../
|
|
3
|
+
import { Colors, Icons, Responsive } from "../atoms";
|
|
4
4
|
import { HelperFontSize } from "../integrations";
|
|
5
5
|
const Badge = ({ label, Icon, iconSize = 20, iconWeight = "regular", onClick, onClickClose, labelWidthPixels, backgroundColor, color, }) => (_jsxs(BaseBadge, { onClick: onClick, "$clickable": !!onClick, "$backgroundColor": backgroundColor, "$color": color, children: [_jsxs(BadgeContent, { "$closeable": !!onClickClose, "$widthPixels": labelWidthPixels, children: [Icon ? (_jsx(IconContainer, { children: _jsx(Icon, { color: color, size: iconSize, weight: iconWeight }) })) : (_jsx(_Fragment, {})), _jsx(BadgeLabel, { children: label })] }), onClickClose ? _jsx(CloseButton, { onClick: onClickClose }) : _jsx(_Fragment, {})] }));
|
|
6
6
|
export default Badge;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../core/molecules/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../core/molecules/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAcjD,MAAM,KAAK,GAAG,CAAC,EACb,KAAK,EACL,IAAI,EACJ,QAAQ,GAAG,EAAE,EACb,UAAU,GAAG,SAAS,EACtB,OAAO,EACP,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,KAAK,GACM,EAAE,EAAE,CAAC,CAChB,MAAC,SAAS,IACR,OAAO,EAAE,OAAO,gBACJ,CAAC,CAAC,OAAO,sBACH,eAAe,YACzB,KAAK,aAEb,MAAC,YAAY,kBAAa,CAAC,CAAC,YAAY,kBAAgB,gBAAgB,aACrE,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,aAAa,cACZ,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,GAAI,GAC5C,CACjB,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,EAED,KAAC,UAAU,cAAE,KAAK,GAAc,IACnB,EAEd,YAAY,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,OAAO,EAAE,YAAY,GAAI,CAAC,CAAC,CAAC,mBAAK,IACpD,CACb,CAAC;AAEF,eAAe,KAAK,CAAC;AAErB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAI1B;;;;;;;;;WASS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,MAAM;sBACzC,CAAC,EAAE,gBAAgB,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,EAAE,CAClE,gBAAgB;;oBAEA,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;qBAIlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;YAI5C,CAAC,EAAE,UAAU,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;CACxE,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAG7B;;;;;WAKS,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,YAAY,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;eAC/D,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC;CAC7E,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAiC;;;;WAItD,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;eACjC,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;eACrC,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;CACnD,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;IAOzB,cAAc;CACjB,CAAC;AAMF,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,EAAoB,EAAE,EAAE,CAAC,CACrD,KAAC,eAAe,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,YAC7C,KAAC,KAAK,CAAC,KAAK,IAAC,IAAI,EAAE,EAAE,GAAI,GACT,CACnB,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;CAKpC,CAAC","sourcesContent":["import type { ComponentType, MouseEventHandler, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors, Icons, Responsive } from \"../atoms\";\nimport { HelperFontSize } from \"../integrations\";\n\nexport type BadgeProps = {\n label: ReactNode;\n Icon?: ComponentType<Icons.IconProps>;\n iconSize?: string | number;\n iconWeight?: Icons.IconWeight;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onClickClose?: MouseEventHandler<HTMLButtonElement>;\n labelWidthPixels?: number;\n backgroundColor?: string;\n color?: string;\n};\n\nconst Badge = ({\n label,\n Icon,\n iconSize = 20,\n iconWeight = \"regular\",\n onClick,\n onClickClose,\n labelWidthPixels,\n backgroundColor,\n color,\n}: BadgeProps) => (\n <BaseBadge\n onClick={onClick}\n $clickable={!!onClick}\n $backgroundColor={backgroundColor}\n $color={color}\n >\n <BadgeContent $closeable={!!onClickClose} $widthPixels={labelWidthPixels}>\n {Icon ? (\n <IconContainer>\n <Icon color={color} size={iconSize} weight={iconWeight} />\n </IconContainer>\n ) : (\n <></>\n )}\n\n <BadgeLabel>{label}</BadgeLabel>\n </BadgeContent>\n\n {onClickClose ? <CloseButton onClick={onClickClose} /> : <></>}\n </BaseBadge>\n);\n\nexport default Badge;\n\nconst BaseBadge = styled.div<{\n $clickable?: boolean;\n $backgroundColor?: string;\n $color?: string;\n}>`\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n\n padding: 5px 15px;\n border-radius: 120px;\n\n color: ${({ $color = Colors.typography.blackHigh }) => $color};\n background-color: ${({ $backgroundColor = Colors.neutral.grey3 }) =>\n $backgroundColor};\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n min-height: 27px;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n min-height: 30px;\n }\n\n cursor: ${({ $clickable = false }) => ($clickable ? \"pointer\" : \"auto\")};\n`;\n\nconst BadgeContent = styled.div<{\n $closeable: boolean;\n $widthPixels?: number;\n}>`\n display: flex;\n align-items: center;\n gap: 10px;\n\n width: ${({ $widthPixels }) => ($widthPixels ? `${$widthPixels}px` : \"auto\")};\n max-width: ${({ $closeable }) => ($closeable ? \"calc(100% - 20px)\" : \"auto\")};\n`;\n\nconst IconContainer = styled.div<{ $iconSize?: string | number }>`\n display: flex;\n flex-direction: column;\n\n width: ${({ $iconSize = \"auto\" }) => $iconSize};\n min-width: ${({ $iconSize = \"auto\" }) => $iconSize};\n max-width: ${({ $iconSize = \"auto\" }) => $iconSize};\n`;\n\nconst BadgeLabel = styled.div`\n overflow-x: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n font-weight: 500;\n\n ${HelperFontSize}\n`;\n\ntype CloseButtonProps = {\n onClick: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst CloseButton = ({ onClick }: CloseButtonProps) => (\n <BaseCloseButton type=\"button\" onClick={onClick}>\n <Icons.XIcon size={12} />\n </BaseCloseButton>\n);\n\nconst BaseCloseButton = styled.button`\n display: flex;\n flex-direction: column;\n\n min-width: 12px;\n`;\n"]}
|
package/core/molecules/Button.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import styled from "styled-components";
|
|
3
|
-
import { Icons } from "../
|
|
3
|
+
import { Icons } from "../atoms";
|
|
4
4
|
import { BaseButton as ButtonContent } from "../shared";
|
|
5
5
|
const Button = ({ label, LeftIcon, RightIcon, underline, backgroundColor, borderColor, color, width, type = "button", ...buttonProps }) => (_jsx(BaseButton, { ...buttonProps, type: type, "$width": width, children: _jsxs(ButtonContent, { "$underline": underline, "$backgroundColor": backgroundColor, "$borderColor": borderColor, "$color": color, "$width": width, children: [LeftIcon ? _jsx(LeftIcon, { color: color, size: 20 }) : _jsx(_Fragment, {}), label, RightIcon ? _jsx(RightIcon, { color: color, size: 20 }) : _jsx(_Fragment, {})] }) }));
|
|
6
6
|
export default Button;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../core/molecules/Button.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../core/molecules/Button.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,UAAU,IAAI,aAAa,EAAE,MAAM,WAAW,CAAC;AAgBxD,MAAM,MAAM,GAAG,CAAC,EACd,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,WAAW,EACX,KAAK,EACL,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,GAAG,WAAW,EACF,EAAE,EAAE,CAAC,CACjB,KAAC,UAAU,OAAK,WAAW,EAAE,IAAI,EAAE,IAAI,YAAU,KAAK,YACpD,MAAC,aAAa,kBACA,SAAS,sBACH,eAAe,kBACnB,WAAW,YACjB,KAAK,YACL,KAAK,aAEZ,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,EACvD,KAAK,EACL,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,IAC5C,GACL,CACd,CAAC;AAEF,eAAe,MAAM,CAAC;AAEtB,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAqB;WAC1C,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;CACzC,CAAC","sourcesContent":["import type { ButtonHTMLAttributes, DetailedHTMLProps, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport { Icons } from \"../atoms\";\nimport { BaseButton as ButtonContent } from \"../shared\";\n\ntype ButtonProps = {\n label: ReactNode;\n LeftIcon?: Icons.Icon;\n RightIcon?: Icons.Icon;\n underline?: boolean;\n backgroundColor?: string;\n borderColor?: string;\n color?: string;\n width?: string;\n} & DetailedHTMLProps<\n ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n>;\n\nconst Button = ({\n label,\n LeftIcon,\n RightIcon,\n underline,\n backgroundColor,\n borderColor,\n color,\n width,\n type = \"button\",\n ...buttonProps\n}: ButtonProps) => (\n <BaseButton {...buttonProps} type={type} $width={width}>\n <ButtonContent\n $underline={underline}\n $backgroundColor={backgroundColor}\n $borderColor={borderColor}\n $color={color}\n $width={width}\n >\n {LeftIcon ? <LeftIcon color={color} size={20} /> : <></>}\n {label}\n {RightIcon ? <RightIcon color={color} size={20} /> : <></>}\n </ButtonContent>\n </BaseButton>\n);\n\nexport default Button;\n\nconst BaseButton = styled.button<{ $width?: string }>`\n width: ${({ $width = \"auto\" }) => $width};\n`;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { DetailedHTMLProps, InputHTMLAttributes } from "react";
|
|
2
|
-
import { type Option } from "../foundations";
|
|
3
2
|
import { type InputValidationProps } from "../shared";
|
|
3
|
+
import { type Option } from "../types";
|
|
4
4
|
type InputProps = {
|
|
5
5
|
datalistId?: string;
|
|
6
6
|
datalistOptions?: Option[];
|
package/core/molecules/Input.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import styled from "styled-components";
|
|
3
|
-
import { Colors } from "../
|
|
3
|
+
import { Colors } from "../atoms";
|
|
4
4
|
import { InputValidation } from "../shared";
|
|
5
|
+
import {} from "../types";
|
|
5
6
|
const Input = ({ datalistOptions, datalistId, ...inputProps }) => (_jsxs(_Fragment, { children: [_jsx(BaseInput, { ...inputProps, list: datalistId }), datalistId && datalistOptions ? (_jsx(Datalist, { id: datalistId, options: datalistOptions })) : (_jsx(_Fragment, {}))] }));
|
|
6
7
|
export default Input;
|
|
7
8
|
const BaseInput = styled.input `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../core/molecules/Input.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../core/molecules/Input.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,eAAe,EAA6B,MAAM,WAAW,CAAC;AACvE,OAAO,EAAe,MAAM,UAAU,CAAC;AAQvC,MAAM,KAAK,GAAG,CAAC,EAAE,eAAe,EAAE,UAAU,EAAE,GAAG,UAAU,EAAc,EAAE,EAAE,CAAC,CAC5E,8BACE,KAAC,SAAS,OAAK,UAAU,EAAE,IAAI,EAAE,UAAU,GAAI,EAE9C,UAAU,IAAI,eAAe,CAAC,CAAC,CAAC,CAC/B,KAAC,QAAQ,IAAC,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,GAAI,CACvD,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACA,CACJ,CAAC;AAEF,eAAe,KAAK,CAAC;AAErB,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAsB;;sBAE9B,MAAM,CAAC,IAAI,CAAC,KAAK;;;IAGnC,eAAe;CAClB,CAAC;AAOF,MAAM,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,OAAO,EAAiB,EAAE,EAAE,CAAC,CACnD,mBAAU,EAAE,EAAE,EAAE,YACb,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,iBAA2B,KAAK,EAAE,MAAM,CAAC,KAAK,YAC3C,MAAM,CAAC,KAAK,IADF,MAAM,CAAC,KAAK,CAEhB,CACV,CAAC,GACO,CACZ,CAAC","sourcesContent":["import type { DetailedHTMLProps, InputHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors } from \"../atoms\";\nimport { InputValidation, type InputValidationProps } from \"../shared\";\nimport { type Option } from \"../types\";\n\ntype InputProps = {\n datalistId?: string;\n datalistOptions?: Option[];\n} & InputValidationProps &\n DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;\n\nconst Input = ({ datalistOptions, datalistId, ...inputProps }: InputProps) => (\n <>\n <BaseInput {...inputProps} list={datalistId} />\n\n {datalistId && datalistOptions ? (\n <Datalist id={datalistId} options={datalistOptions} />\n ) : (\n <></>\n )}\n </>\n);\n\nexport default Input;\n\nconst BaseInput = styled.input<InputValidationProps>`\n padding: 12px 16px;\n background-color: ${Colors.base.white};\n border-radius: 8px;\n\n ${InputValidation}\n`;\n\ntype DatalistProps = {\n id: string;\n options: Option[];\n};\n\nconst Datalist = ({ id, options }: DatalistProps) => (\n <datalist id={id}>\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </datalist>\n);\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { MoonLoader, PacmanLoader } from "react-spinners";
|
|
3
3
|
import styled from "styled-components";
|
|
4
|
-
import { Colors } from "../
|
|
4
|
+
import { Colors } from "../atoms";
|
|
5
5
|
import { HelperFontSize } from "../integrations";
|
|
6
6
|
/**
|
|
7
7
|
* The animation to show when loading the whole page
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageLoader.js","sourceRoot":"","sources":["../../../core/molecules/PageLoader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"PageLoader.js","sourceRoot":"","sources":["../../../core/molecules/PageLoader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAQjD;;GAEG;AACH,MAAM,UAAU,GAAG,CAAC,EAClB,WAAW,EACX,GAAG,EACH,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,EAC3B,IAAI,EACJ,GAAG,WAAW,EACE,EAAE,EAAE,CAAC,CACrB,MAAC,UAAU,eACR,MAAM,CAAC,CAAC,CAAC,CACR,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAM,WAAW,GAAI,CACxE,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAM,WAAW,GAAI,CACtE,EAEA,WAAW,IAAI,GAAG,CAAC,CAAC,CAAC,CACpB,MAAC,IAAI,eACF,WAAW,CAAC,CAAC,CAAC,KAAC,WAAW,cAAE,WAAW,GAAe,CAAC,CAAC,CAAC,mBAAK,EAC9D,GAAG,CAAC,CAAC,CAAC,KAAC,GAAG,cAAE,GAAG,GAAO,CAAC,CAAC,CAAC,mBAAK,IAC1B,CACR,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACU,CACd,CAAC;AAEF,eAAe,UAAU,CAAC;AAE1B,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CAS5B,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKtB,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAA;;CAE3B,CAAC;AAEF,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAA;WACT,MAAM,CAAC,UAAU,CAAC,WAAW;;IAEpC,cAAc;CACjB,CAAC","sourcesContent":["import { MoonLoader, PacmanLoader } from \"react-spinners\";\nimport type { LoaderSizeMarginProps } from \"react-spinners/helpers/props\";\nimport styled from \"styled-components\";\nimport { Colors } from \"../atoms\";\nimport { HelperFontSize } from \"../integrations\";\n\ntype PageLoaderProps = {\n pacman?: boolean;\n loadingText?: string;\n tip?: string;\n} & LoaderSizeMarginProps;\n\n/**\n * The animation to show when loading the whole page\n */\nconst PageLoader = ({\n loadingText,\n tip,\n pacman = false,\n color = Colors.accent.blue1,\n size,\n ...restOfProps\n}: PageLoaderProps) => (\n <Background>\n {pacman ? (\n <PacmanLoader color={color} size={size ? size : 20} {...restOfProps} />\n ) : (\n <MoonLoader color={color} size={size ? size : 32} {...restOfProps} />\n )}\n\n {loadingText || tip ? (\n <Text>\n {loadingText ? <LoadingText>{loadingText}</LoadingText> : <></>}\n {tip ? <Tip>{tip}</Tip> : <></>}\n </Text>\n ) : (\n <></>\n )}\n </Background>\n);\n\nexport default PageLoader;\n\nconst Background = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 20px;\n\n width: 100%;\n height: 100%;\n`;\n\nconst Text = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n`;\n\nconst LoadingText = styled.p`\n font-weight: 500;\n`;\n\nconst Tip = styled.p`\n color: ${Colors.typography.blackMedium};\n\n ${HelperFontSize}\n`;\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { DetailedHTMLProps, InputHTMLAttributes } from "react";
|
|
2
|
-
import type { Option } from "../
|
|
2
|
+
import type { Option } from "../types";
|
|
3
3
|
type RadioButtonProps = Option & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
|
|
4
4
|
declare const RadioButton: ({ id, label, ...radioButtonProps }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
export default RadioButton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../../core/molecules/RadioButton.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAK1C,MAAM,WAAW,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,gBAAgB,EAAoB,EAAE,EAAE,CAAC,CAC5E,MAAC,aAAa,eACZ,mBAAW,gBAAgB,EAAE,EAAE,EAAE,GAAG,EAAE,eAAe,EAAE,IAAI,EAAC,OAAO,GAAG,EACtE,gBAAO,OAAO,EAAE,GAAG,EAAE,eAAe,YAAG,KAAK,GAAS,IACvC,CACjB,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import type { DetailedHTMLProps, InputHTMLAttributes } from \"react\";\nimport type { Option } from \"../
|
|
1
|
+
{"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../../core/molecules/RadioButton.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAK1C,MAAM,WAAW,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,gBAAgB,EAAoB,EAAE,EAAE,CAAC,CAC5E,MAAC,aAAa,eACZ,mBAAW,gBAAgB,EAAE,EAAE,EAAE,GAAG,EAAE,eAAe,EAAE,IAAI,EAAC,OAAO,GAAG,EACtE,gBAAO,OAAO,EAAE,GAAG,EAAE,eAAe,YAAG,KAAK,GAAS,IACvC,CACjB,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import type { DetailedHTMLProps, InputHTMLAttributes } from \"react\";\nimport type { Option } from \"../types\";\nimport { LabelledInput } from \"../shared\";\n\ntype RadioButtonProps = Option &\n DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;\n\nconst RadioButton = ({ id, label, ...radioButtonProps }: RadioButtonProps) => (\n <LabelledInput>\n <input {...radioButtonProps} id={`${id}-radio-button`} type=\"radio\" />\n <label htmlFor={`${id}-radio-button`}>{label}</label>\n </LabelledInput>\n);\n\nexport default RadioButton;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../core/molecules/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../core/molecules/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,eAAe,EAA6B,MAAM,WAAW,CAAC;AAIvE,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAe;YACnC,CAAC,EAAE,aAAa,GAAG,GAAG,EAAE,EAAE,EAAE,CAAC,aAAa;;;sBAGhC,MAAM,CAAC,IAAI,CAAC,KAAK;;;IAGnC,eAAe;CAClB,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import styled from \"styled-components\";\nimport { Colors } from \"../atoms\";\nimport { InputValidation, type InputValidationProps } from \"../shared\";\n\ntype TextareaProps = { $heightPixels?: number } & InputValidationProps;\n\nconst Textarea = styled.textarea<TextareaProps>`\n height: ${({ $heightPixels = 100 }) => $heightPixels}px;\n\n padding: 12px 16px;\n background-color: ${Colors.base.white};\n border-radius: 8px;\n\n ${InputValidation}\n`;\n\nexport default Textarea;\n"]}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import styled from "styled-components";
|
|
3
|
-
import { Colors } from "../
|
|
3
|
+
import { Colors } from "../atoms";
|
|
4
4
|
import { InputValidation } from "../shared";
|
|
5
|
+
import {} from "../types";
|
|
5
6
|
const Dropdown = ({ options, defaultLabel, ...selectProps }) => (_jsxs(Select, { ...selectProps, children: [_jsx("option", { hidden: true, disabled: true, value: "", children: defaultLabel ? defaultLabel : "-" }), options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] }));
|
|
6
7
|
export default Dropdown;
|
|
7
8
|
const Select = styled.select `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../core/organisms/Dropdown.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../core/organisms/Dropdown.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,eAAe,EAA6B,MAAM,WAAW,CAAC;AACvE,OAAO,EAAe,MAAM,UAAU,CAAC;AAUvC,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,WAAW,EAAiB,EAAE,EAAE,CAAC,CAC7E,MAAC,MAAM,OAAK,WAAW,aACrB,iBAAQ,MAAM,QAAC,QAAQ,QAAC,KAAK,EAAC,EAAE,YAC7B,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,GAC3B,EAER,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,iBAA2B,KAAK,EAAE,MAAM,CAAC,KAAK,YAC3C,MAAM,CAAC,KAAK,IADF,MAAM,CAAC,KAAK,CAEhB,CACV,CAAC,IACK,CACV,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAsB;;sBAE5B,MAAM,CAAC,IAAI,CAAC,KAAK;;;IAGnC,eAAe;CAClB,CAAC","sourcesContent":["import type { DetailedHTMLProps, SelectHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors } from \"../atoms\";\nimport { InputValidation, type InputValidationProps } from \"../shared\";\nimport { type Option } from \"../types\";\n\nexport type DropdownProps = {\n options: Option[];\n defaultLabel?: string;\n} & DetailedHTMLProps<\n SelectHTMLAttributes<HTMLSelectElement>,\n HTMLSelectElement\n>;\n\nconst Dropdown = ({ options, defaultLabel, ...selectProps }: DropdownProps) => (\n <Select {...selectProps}>\n <option hidden disabled value=\"\">\n {defaultLabel ? defaultLabel : \"-\"}\n </option>\n\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </Select>\n);\n\nexport default Dropdown;\n\nconst Select = styled.select<InputValidationProps>`\n padding: 12px 16px;\n background-color: ${Colors.base.white};\n border-radius: 8px;\n\n ${InputValidation}\n`;\n"]}
|
|
@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
2
2
|
import { useState } from "react";
|
|
3
3
|
import { useDropzone } from "react-dropzone";
|
|
4
4
|
import styled from "styled-components";
|
|
5
|
-
import
|
|
5
|
+
import Badges from "../archive/Badges";
|
|
6
|
+
import { Colors, Icons } from "../atoms";
|
|
6
7
|
import { BodyFontSize, HelperFontSize } from "../integrations";
|
|
7
8
|
import { FILE_TYPE_ICON_MAP } from "../shared";
|
|
8
|
-
import Badges from "../archive/Badges";
|
|
9
9
|
const DEFAULT_MAX_FILE_SIZE_MB = 5;
|
|
10
10
|
const DEFAULT_MAX_FILES = 5;
|
|
11
11
|
const FileDrop = ({ uploadedFiles, uploadFiles, removeFile, errorMessage, maxFiles = DEFAULT_MAX_FILES, maxSizeMB = DEFAULT_MAX_FILE_SIZE_MB, }) => {
|