@veeqo/ui 14.10.1 → 14.10.3
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/dist/components/Accordion/Accordion.cjs +19 -16
- package/dist/components/Accordion/Accordion.cjs.map +1 -1
- package/dist/components/Accordion/Accordion.js +19 -16
- package/dist/components/Accordion/Accordion.js.map +1 -1
- package/dist/components/Accordion/Accordion.module.scss.cjs +9 -0
- package/dist/components/Accordion/Accordion.module.scss.cjs.map +1 -0
- package/dist/components/Accordion/Accordion.module.scss.js +7 -0
- package/dist/components/Accordion/Accordion.module.scss.js.map +1 -0
- package/dist/components/Action/Action.d.ts +4 -4
- package/dist/components/Action/styles/button.module.scss.cjs +2 -2
- package/dist/components/Action/styles/button.module.scss.cjs.map +1 -1
- package/dist/components/Action/styles/button.module.scss.js +2 -2
- package/dist/components/Action/styles/button.module.scss.js.map +1 -1
- package/dist/components/Action/styles/link.module.scss.cjs +2 -2
- package/dist/components/Action/styles/link.module.scss.cjs.map +1 -1
- package/dist/components/Action/styles/link.module.scss.js +2 -2
- package/dist/components/Action/styles/link.module.scss.js.map +1 -1
- package/dist/components/Action/utils.cjs +12 -14
- package/dist/components/Action/utils.cjs.map +1 -1
- package/dist/components/Action/utils.js +12 -14
- package/dist/components/Action/utils.js.map +1 -1
- package/dist/components/Button/Button.cjs +37 -37
- package/dist/components/Button/Button.cjs.map +1 -1
- package/dist/components/Button/Button.d.ts +13 -4
- package/dist/components/Button/Button.js +37 -37
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Button/Button.module.scss.cjs +9 -0
- package/dist/components/Button/Button.module.scss.cjs.map +1 -0
- package/dist/components/Button/Button.module.scss.js +7 -0
- package/dist/components/Button/Button.module.scss.js.map +1 -0
- package/dist/components/Button/types.d.ts +16 -7
- package/dist/components/Card/Card.cjs +36 -9
- package/dist/components/Card/Card.cjs.map +1 -1
- package/dist/components/Card/Card.d.ts +10 -5
- package/dist/components/Card/Card.js +29 -2
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/components/Card/Card.module.scss.cjs +9 -0
- package/dist/components/Card/Card.module.scss.cjs.map +1 -0
- package/dist/components/Card/Card.module.scss.js +7 -0
- package/dist/components/Card/Card.module.scss.js.map +1 -0
- package/dist/components/Card/index.d.ts +1 -0
- package/dist/components/CardHeader/CardHeader.cjs +3 -3
- package/dist/components/CardHeader/CardHeader.cjs.map +1 -1
- package/dist/components/CardHeader/CardHeader.js +3 -3
- package/dist/components/CardHeader/CardHeader.js.map +1 -1
- package/dist/components/CardHeader/CardHeader.module.scss.cjs +9 -0
- package/dist/components/CardHeader/CardHeader.module.scss.cjs.map +1 -0
- package/dist/components/CardHeader/CardHeader.module.scss.js +7 -0
- package/dist/components/CardHeader/CardHeader.module.scss.js.map +1 -0
- package/dist/components/DimensionsInput/DimensionsInput.d.ts +10 -10
- package/dist/components/FilterTag/styled.d.ts +1 -1
- package/dist/components/Flex/FlexCol/FlexCol.d.ts +1 -1
- package/dist/components/Flex/FlexRow/FlexRow.d.ts +1 -1
- package/dist/components/LegacyDataTable/SpecificState/styled.d.ts +2 -2
- package/dist/components/Pagination/styled.d.ts +17 -12
- package/dist/components/PhoneInput/index.d.ts +10 -10
- package/dist/components/Search/Search.d.ts +10 -10
- package/dist/components/SimpleTable/SimpleTable.cjs +20 -7
- package/dist/components/SimpleTable/SimpleTable.cjs.map +1 -1
- package/dist/components/SimpleTable/SimpleTable.d.ts +9 -7
- package/dist/components/SimpleTable/SimpleTable.js +15 -2
- package/dist/components/SimpleTable/SimpleTable.js.map +1 -1
- package/dist/components/SimpleTable/SimpleTable.module.scss.cjs +9 -0
- package/dist/components/SimpleTable/SimpleTable.module.scss.cjs.map +1 -0
- package/dist/components/SimpleTable/SimpleTable.module.scss.js +7 -0
- package/dist/components/SimpleTable/SimpleTable.module.scss.js.map +1 -0
- package/dist/components/Text/Text.d.ts +1 -1
- package/dist/components/TextField/TextField.d.ts +10 -10
- package/dist/components/TextField/index.d.ts +10 -10
- package/dist/components/UploadFile/UploadFile.cjs +7 -2
- package/dist/components/UploadFile/UploadFile.cjs.map +1 -1
- package/dist/components/UploadFile/UploadFile.js +7 -2
- package/dist/components/UploadFile/UploadFile.js.map +1 -1
- package/dist/components/UploadFile/UploadFile.module.scss.cjs +9 -0
- package/dist/components/UploadFile/UploadFile.module.scss.cjs.map +1 -0
- package/dist/components/UploadFile/UploadFile.module.scss.js +7 -0
- package/dist/components/UploadFile/UploadFile.module.scss.js.map +1 -0
- package/dist/components/VideoModal/styled.d.ts +6 -1
- package/dist/components/View/View.cjs +37 -9
- package/dist/components/View/View.cjs.map +1 -1
- package/dist/components/View/View.js +35 -7
- package/dist/components/View/View.js.map +1 -1
- package/dist/components/View/View.module.scss.cjs +9 -0
- package/dist/components/View/View.module.scss.cjs.map +1 -0
- package/dist/components/View/View.module.scss.js +7 -0
- package/dist/components/View/View.module.scss.js.map +1 -0
- package/dist/components/ViewTab/ViewTab.d.ts +1 -1
- package/dist/components/index.d.ts +1 -1
- package/package.json +1 -1
- package/dist/components/Accordion/styled.cjs +0 -49
- package/dist/components/Accordion/styled.cjs.map +0 -1
- package/dist/components/Accordion/styled.d.ts +0 -26
- package/dist/components/Accordion/styled.js +0 -34
- package/dist/components/Accordion/styled.js.map +0 -1
- package/dist/components/Card/styled.cjs +0 -50
- package/dist/components/Card/styled.cjs.map +0 -1
- package/dist/components/Card/styled.d.ts +0 -16
- package/dist/components/Card/styled.js +0 -40
- package/dist/components/Card/styled.js.map +0 -1
- package/dist/components/CardHeader/styled.cjs +0 -15
- package/dist/components/CardHeader/styled.cjs.map +0 -1
- package/dist/components/CardHeader/styled.d.ts +0 -2
- package/dist/components/CardHeader/styled.js +0 -8
- package/dist/components/CardHeader/styled.js.map +0 -1
- package/dist/components/SimpleTable/styled.cjs +0 -34
- package/dist/components/SimpleTable/styled.cjs.map +0 -1
- package/dist/components/SimpleTable/styled.d.ts +0 -15
- package/dist/components/SimpleTable/styled.js +0 -23
- package/dist/components/SimpleTable/styled.js.map +0 -1
- package/dist/components/UploadFile/styled.cjs +0 -54
- package/dist/components/UploadFile/styled.cjs.map +0 -1
- package/dist/components/UploadFile/styled.d.ts +0 -4
- package/dist/components/UploadFile/styled.js +0 -48
- package/dist/components/UploadFile/styled.js.map +0 -1
- package/dist/components/View/styled.cjs +0 -53
- package/dist/components/View/styled.cjs.map +0 -1
- package/dist/components/View/styled.d.ts +0 -37
- package/dist/components/View/styled.js +0 -41
- package/dist/components/View/styled.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.cjs","sources":["../../../src/components/Accordion/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { theme } from '../../theme';\nimport { sizes } from '../../theme/modules/sizes';\n\nconst TapBarChild = styled(BaseContainer)`\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nconst Left = styled(TapBarChild).withConfig({\n shouldForwardProp: (prop) => !['glyphColor'].includes(prop),\n})<{ glyphColor: string }>`\n svg {\n margin-right: 12px;\n height: ${sizes.base};\n width: ${sizes.base};\n\n color: ${({ glyphColor }) => glyphColor};\n }\n`;\n\nconst Right = styled(TapBarChild as any)`\n justify-content: flex-end;\n flex-grow: 2;\n`;\n\n/**\n * Due to unique behaviour observed in Safari, we override the outline property when\n * the accordion is focussed.\n */\nconst AccordionSummary = styled.summary`\n display: flex;\n flex-direction: column;\n padding: 12px;\n border-radius: 4px;\n user-select: none;\n cursor: pointer;\n\n border: 1px solid ${theme.colors.neutral.grey.dark};\n\n :focus {\n outline: none;\n box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n }\n\n :active {\n box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n }\n`;\n\nconst Top = styled(BaseContainer)`\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 16px;\n`;\n\nconst Description = styled(Text)`\n margin-top: 8px;\n`;\n\nconst AccordionContent = styled(motion(BaseContainer))`\n margin-top: 4px;\n background: rgba(217, 235, 248, 0.5);\n padding: 10px 26px;\n`;\n\nconst AccordionDetails = styled.details`\n summary {\n list-style-type: none;\n ::-webkit-details-marker {\n display: none;\n }\n }\n`;\n\nconst UnstyledAccordionContent = styled(motion(BaseContainer))``;\n\nconst UnstyledAccordionSummary = styled.summary`\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n }\n`;\n\nexport {\n AccordionSummary,\n Top,\n Text,\n Left,\n Right,\n Description,\n AccordionDetails,\n AccordionContent,\n UnstyledAccordionContent,\n UnstyledAccordionSummary,\n};\n"],"names":["styled","BaseContainer","sizes","theme","Text","motion"],"mappings":";;;;;;;;;;;;;AAQA,MAAM,WAAW,GAAGA,uBAAM,CAACC,2BAAa,CAAC,kIAIxC;AAED,MAAM,IAAI,GAAGD,uBAAM,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC;AAC1C,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC5D,CAAA,CAAC,CAAwB;;;AAGZ,YAAA,EAAAE,WAAK,CAAC,IAAI,CAAA;AACX,WAAA,EAAAA,WAAK,CAAC,IAAI,CAAA;;AAEV,WAAA,EAAA,CAAC,EAAE,UAAU,EAAE,KAAK,UAAU,CAAA;;;AAI3C,MAAM,KAAK,GAAGF,uBAAM,CAAC,WAAkB,CAAC;AAKxC;;;AAGG;AACH,MAAM,gBAAgB,GAAGA,uBAAM,CAAC,OAAO,yMAQjBG,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,6CAIxBA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,kCAIjCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,GAAG,GAAGH,uBAAM,CAACC,2BAAa,CAAC;AAOjC,MAAM,WAAW,GAAGD,uBAAM,CAACI,SAAI,CAAC;AAIhC,MAAM,gBAAgB,GAAGJ,uBAAM,CAACK,mBAAM,CAACJ,2BAAa,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,qEAAA;AAMtD,MAAM,gBAAgB,GAAGD,uBAAM,CAAC,OAAO;AASvC,MAAM,wBAAwB,GAAGA,uBAAM,CAACK,mBAAM,CAACJ,2BAAa,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,+BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA;AAE9D,MAAM,wBAAwB,GAAGD,uBAAM,CAAC,OAAO,uIAGnBG,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;;;;;;;;;;;;;"}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { Text } from '../Text';
|
|
3
|
-
declare const Left: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
|
|
4
|
-
glyphColor: string;
|
|
5
|
-
}, never>;
|
|
6
|
-
declare const Right: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
|
|
7
|
-
/**
|
|
8
|
-
* Due to unique behaviour observed in Safari, we override the outline property when
|
|
9
|
-
* the accordion is focussed.
|
|
10
|
-
*/
|
|
11
|
-
declare const AccordionSummary: import("styled-components").StyledComponent<"summary", any, {}, never>;
|
|
12
|
-
declare const Top: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
13
|
-
declare const Description: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
|
|
14
|
-
/**
|
|
15
|
-
* Due to unique behaviour observed in Safari, we override the outline property when
|
|
16
|
-
* the accordion is focussed.
|
|
17
|
-
*/
|
|
18
|
-
as?: import("../Text").ValidTextTag | undefined;
|
|
19
|
-
muted?: boolean | undefined;
|
|
20
|
-
variant?: "body" | "button" | "link" | "placeholder" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
|
|
21
|
-
} & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
|
|
22
|
-
declare const AccordionContent: import("styled-components").StyledComponent<import("framer-motion").CustomDomComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
23
|
-
declare const AccordionDetails: import("styled-components").StyledComponent<"details", any, {}, never>;
|
|
24
|
-
declare const UnstyledAccordionContent: import("styled-components").StyledComponent<import("framer-motion").CustomDomComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
25
|
-
declare const UnstyledAccordionSummary: import("styled-components").StyledComponent<"summary", any, {}, never>;
|
|
26
|
-
export { AccordionSummary, Top, Text, Left, Right, Description, AccordionDetails, AccordionContent, UnstyledAccordionContent, UnstyledAccordionSummary, };
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import styled from 'styled-components';
|
|
2
|
-
import { motion } from 'framer-motion';
|
|
3
|
-
import { BaseContainer } from '../BaseContainer/BaseContainer.js';
|
|
4
|
-
import { Text } from '../Text/Text.js';
|
|
5
|
-
import { theme } from '../../theme/index.js';
|
|
6
|
-
import { sizes } from '../../theme/modules/sizes.js';
|
|
7
|
-
|
|
8
|
-
const TapBarChild = styled(BaseContainer).withConfig({ displayName: "vui--TapBarChild", componentId: "vui--3ngcs3" }) `display:flex;flex-direction:row;align-items:center;`;
|
|
9
|
-
const Left = styled(TapBarChild).withConfig({
|
|
10
|
-
shouldForwardProp: (prop) => !['glyphColor'].includes(prop),
|
|
11
|
-
}) `
|
|
12
|
-
svg {
|
|
13
|
-
margin-right: 12px;
|
|
14
|
-
height: ${sizes.base};
|
|
15
|
-
width: ${sizes.base};
|
|
16
|
-
|
|
17
|
-
color: ${({ glyphColor }) => glyphColor};
|
|
18
|
-
}
|
|
19
|
-
`;
|
|
20
|
-
const Right = styled(TapBarChild).withConfig({ displayName: "vui--Right", componentId: "vui--1az9xn4" }) `justify-content:flex-end;flex-grow:2;`;
|
|
21
|
-
/**
|
|
22
|
-
* Due to unique behaviour observed in Safari, we override the outline property when
|
|
23
|
-
* the accordion is focussed.
|
|
24
|
-
*/
|
|
25
|
-
const AccordionSummary = styled.summary.withConfig({ displayName: "vui--AccordionSummary", componentId: "vui--1cj5wqc" }) `display:flex;flex-direction:column;padding:12px;border-radius:4px;user-select:none;cursor:pointer;border:1px solid ${theme.colors.neutral.grey.dark};:focus{outline:none;box-shadow:0 0 0 2px ${theme.colors.secondary.blue.light};}:active{box-shadow:0 0 0 2px ${theme.colors.secondary.blue.light};}`;
|
|
26
|
-
const Top = styled(BaseContainer).withConfig({ displayName: "vui--Top", componentId: "vui--mks526" }) `display:flex;flex-direction:row;align-items:center;height:16px;`;
|
|
27
|
-
const Description = styled(Text).withConfig({ displayName: "vui--Description", componentId: "vui--z9vlxj" }) `margin-top:8px;`;
|
|
28
|
-
const AccordionContent = styled(motion(BaseContainer)).withConfig({ displayName: "vui--AccordionContent", componentId: "vui--a80u9i" }) `margin-top:4px;background:rgba(217, 235, 248, 0.5);padding:10px 26px;`;
|
|
29
|
-
const AccordionDetails = styled.details.withConfig({ displayName: "vui--AccordionDetails", componentId: "vui--pwcrkp" }) `summary{list-style-type:none;::-webkit-details-marker{display:none;}}`;
|
|
30
|
-
const UnstyledAccordionContent = styled(motion(BaseContainer)).withConfig({ displayName: "vui--UnstyledAccordionContent", componentId: "vui--qyx6g0" }) ``;
|
|
31
|
-
const UnstyledAccordionSummary = styled.summary.withConfig({ displayName: "vui--UnstyledAccordionSummary", componentId: "vui--mkwb1n" }) `&:focus{outline:none;box-shadow:0 0 0 2px ${theme.colors.secondary.blue.light};}`;
|
|
32
|
-
|
|
33
|
-
export { AccordionContent, AccordionDetails, AccordionSummary, Description, Left, Right, Text, Top, UnstyledAccordionContent, UnstyledAccordionSummary };
|
|
34
|
-
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../src/components/Accordion/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { theme } from '../../theme';\nimport { sizes } from '../../theme/modules/sizes';\n\nconst TapBarChild = styled(BaseContainer)`\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nconst Left = styled(TapBarChild).withConfig({\n shouldForwardProp: (prop) => !['glyphColor'].includes(prop),\n})<{ glyphColor: string }>`\n svg {\n margin-right: 12px;\n height: ${sizes.base};\n width: ${sizes.base};\n\n color: ${({ glyphColor }) => glyphColor};\n }\n`;\n\nconst Right = styled(TapBarChild as any)`\n justify-content: flex-end;\n flex-grow: 2;\n`;\n\n/**\n * Due to unique behaviour observed in Safari, we override the outline property when\n * the accordion is focussed.\n */\nconst AccordionSummary = styled.summary`\n display: flex;\n flex-direction: column;\n padding: 12px;\n border-radius: 4px;\n user-select: none;\n cursor: pointer;\n\n border: 1px solid ${theme.colors.neutral.grey.dark};\n\n :focus {\n outline: none;\n box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n }\n\n :active {\n box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n }\n`;\n\nconst Top = styled(BaseContainer)`\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 16px;\n`;\n\nconst Description = styled(Text)`\n margin-top: 8px;\n`;\n\nconst AccordionContent = styled(motion(BaseContainer))`\n margin-top: 4px;\n background: rgba(217, 235, 248, 0.5);\n padding: 10px 26px;\n`;\n\nconst AccordionDetails = styled.details`\n summary {\n list-style-type: none;\n ::-webkit-details-marker {\n display: none;\n }\n }\n`;\n\nconst UnstyledAccordionContent = styled(motion(BaseContainer))``;\n\nconst UnstyledAccordionSummary = styled.summary`\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n }\n`;\n\nexport {\n AccordionSummary,\n Top,\n Text,\n Left,\n Right,\n Description,\n AccordionDetails,\n AccordionContent,\n UnstyledAccordionContent,\n UnstyledAccordionSummary,\n};\n"],"names":[],"mappings":";;;;;;;AAQA,MAAM,WAAW,GAAG,MAAM,CAAC,aAAa,CAAC,kIAIxC;AAED,MAAM,IAAI,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC;AAC1C,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC5D,CAAA,CAAC,CAAwB;;;AAGZ,YAAA,EAAA,KAAK,CAAC,IAAI,CAAA;AACX,WAAA,EAAA,KAAK,CAAC,IAAI,CAAA;;AAEV,WAAA,EAAA,CAAC,EAAE,UAAU,EAAE,KAAK,UAAU,CAAA;;;AAI3C,MAAM,KAAK,GAAG,MAAM,CAAC,WAAkB,CAAC;AAKxC;;;AAGG;AACH,MAAM,gBAAgB,GAAG,MAAM,CAAC,OAAO,yMAQjB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,6CAIxB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,kCAIjC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC;AAOjC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC;AAIhC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,qEAAA;AAMtD,MAAM,gBAAgB,GAAG,MAAM,CAAC,OAAO;AASvC,MAAM,wBAAwB,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,+BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA;AAE9D,MAAM,wBAAwB,GAAG,MAAM,CAAC,OAAO,uIAGnB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;;;;"}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var styled = require('styled-components');
|
|
4
|
-
var framerMotion = require('framer-motion');
|
|
5
|
-
var shadows = require('../../theme/modules/shadows.cjs');
|
|
6
|
-
var colors = require('../../theme/modules/colors.cjs');
|
|
7
|
-
var sizes = require('../../theme/modules/sizes.cjs');
|
|
8
|
-
var radius = require('../../theme/modules/radius.cjs');
|
|
9
|
-
var text = require('../../theme/modules/text.cjs');
|
|
10
|
-
|
|
11
|
-
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
12
|
-
|
|
13
|
-
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
14
|
-
|
|
15
|
-
const { grey } = colors.colors.neutral;
|
|
16
|
-
const elevationShadowMap = {
|
|
17
|
-
0: 'none',
|
|
18
|
-
1: shadows.Shadows.sm,
|
|
19
|
-
2: shadows.Shadows.base,
|
|
20
|
-
3: shadows.Shadows.md,
|
|
21
|
-
4: shadows.Shadows.lg,
|
|
22
|
-
};
|
|
23
|
-
const accents = {
|
|
24
|
-
info: colors.colors.secondary.blue.base,
|
|
25
|
-
success: colors.colors.secondary.green.base,
|
|
26
|
-
error: colors.colors.secondary.red.base,
|
|
27
|
-
};
|
|
28
|
-
const Footer = styled__default.default.footer.withConfig({ displayName: "vui--Footer", componentId: "vui--livrdi" }) `margin-top:${sizes.sizes.base};padding:${sizes.sizes.md};z-index:2;`;
|
|
29
|
-
const Section = styled__default.default.section.withConfig({ displayName: "vui--Section", componentId: "vui--z99ese" }) `padding-right:${sizes.sizes.md};padding-left:${sizes.sizes.md};margin-top:${sizes.sizes.md};margin-bottom:${sizes.sizes.md};font-family:${text.text.body.fontFamily};font-size:${text.text.body.fontSize};font-weight:${text.text.body.fontWeight};line-height:${text.text.body.lineHeight};color:${text.text.body.color};& + &{border-top:${sizes.sizes.line} solid ${grey.base};padding-top:${sizes.sizes.md};}`;
|
|
30
|
-
const FullBleed = styled__default.default.div.withConfig({ displayName: "vui--FullBleed", componentId: "vui--1lgjeo7" }) `margin-left:-${sizes.sizes.md};margin-right:-${sizes.sizes.md};`;
|
|
31
|
-
const Body = styled__default.default(framerMotion.motion.div).withConfig({ displayName: "vui--Body", componentId: "vui--pfgeh3" }) `overflow-y:hidden;&:not(:first-child)> ${Section}:first-child{margin-top:0;}`;
|
|
32
|
-
const Surface = styled__default.default.div.withConfig({ displayName: "vui--Surface", componentId: "vui--g1wpqa" }) `position:relative;width:100%;background-color:white;border:${sizes.sizes.line} solid ${grey.base};box-shadow:${(props) => props.elevation !== undefined ? elevationShadowMap[props.elevation] : shadows.Shadows.sm};border-radius:${radius.radius.md};overflow:hidden;box-sizing:border-box;${({ accent }) => accent &&
|
|
33
|
-
`
|
|
34
|
-
&::after {
|
|
35
|
-
content: "";
|
|
36
|
-
position: absolute;
|
|
37
|
-
top: 0;
|
|
38
|
-
left: 0;
|
|
39
|
-
right: 0;
|
|
40
|
-
height: ${sizes.sizes.xs};
|
|
41
|
-
background-color: ${accents[accent]};
|
|
42
|
-
}
|
|
43
|
-
`}`;
|
|
44
|
-
|
|
45
|
-
exports.Body = Body;
|
|
46
|
-
exports.Footer = Footer;
|
|
47
|
-
exports.FullBleed = FullBleed;
|
|
48
|
-
exports.Section = Section;
|
|
49
|
-
exports.Surface = Surface;
|
|
50
|
-
//# sourceMappingURL=styled.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.cjs","sources":["../../../src/components/Card/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { motion } from 'framer-motion';\nimport { Shadows } from '../../theme/modules/shadows';\nimport { colors } from '../../theme/modules/colors';\nimport { sizes } from '../../theme/modules/sizes';\nimport { radius } from '../../theme/modules/radius';\nimport { text } from '../../theme/modules/text';\n\nconst { grey } = colors.neutral;\n\nexport type CardElevation = 0 | 1 | 2 | 3 | 4;\n\nconst elevationShadowMap = {\n 0: 'none',\n 1: Shadows.sm,\n 2: Shadows.base,\n 3: Shadows.md,\n 4: Shadows.lg,\n};\n\nconst accents = {\n info: colors.secondary.blue.base,\n success: colors.secondary.green.base,\n error: colors.secondary.red.base,\n};\n\nexport const Footer = styled.footer`\n margin-top: ${sizes.base};\n padding: ${sizes.md};\n z-index: 2;\n`;\n\nexport const Section = styled.section`\n padding-right: ${sizes.md};\n padding-left: ${sizes.md};\n margin-top: ${sizes.md};\n margin-bottom: ${sizes.md};\n\n font-family: ${text.body.fontFamily};\n font-size: ${text.body.fontSize};\n font-weight: ${text.body.fontWeight};\n line-height: ${text.body.lineHeight};\n color: ${text.body.color};\n\n & + & {\n border-top: ${sizes.line} solid ${grey.base};\n padding-top: ${sizes.md};\n }\n`;\n\nexport const FullBleed = styled.div`\n margin-left: -${sizes.md};\n margin-right: -${sizes.md};\n`;\n\nexport const Body = styled(motion.div)`\n overflow-y: hidden;\n\n &:not(:first-child) > ${Section}:first-child {\n margin-top: 0;\n }\n`;\n\nexport interface SurfaceProps {\n elevation?: CardElevation;\n accent?: keyof typeof accents;\n}\n\nexport const Surface = styled.div<SurfaceProps>`\n position: relative;\n width: 100%;\n background-color: white;\n border: ${sizes.line} solid ${grey.base};\n box-shadow: ${(props) =>\n props.elevation !== undefined ? elevationShadowMap[props.elevation] : Shadows.sm};\n border-radius: ${radius.md};\n overflow: hidden;\n box-sizing: border-box;\n\n ${({ accent }) =>\n accent &&\n `\n &::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: ${sizes.xs};\n background-color: ${accents[accent]};\n }\n `}\n`;\n"],"names":["colors","Shadows","styled","sizes","text","motion","radius"],"mappings":";;;;;;;;;;;;;;AAQA,MAAM,EAAE,IAAI,EAAE,GAAGA,aAAM,CAAC,OAAO;AAI/B,MAAM,kBAAkB,GAAG;AACzB,IAAA,CAAC,EAAE,MAAM;IACT,CAAC,EAAEC,eAAO,CAAC,EAAE;IACb,CAAC,EAAEA,eAAO,CAAC,IAAI;IACf,CAAC,EAAEA,eAAO,CAAC,EAAE;IACb,CAAC,EAAEA,eAAO,CAAC,EAAE;CACd;AAED,MAAM,OAAO,GAAG;AACd,IAAA,IAAI,EAAED,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAChC,IAAA,OAAO,EAAEA,aAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI;AACpC,IAAA,KAAK,EAAEA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;CACjC;AAEM,MAAM,MAAM,GAAGE,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,WAAA,EACnBC,WAAK,CAAC,IAAI,CAAA,SAAA,EACbA,WAAK,CAAC,EAAE;AAId,MAAM,OAAO,GAAGD,uBAAM,CAAC,OAAO,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EAClBC,WAAK,CAAC,EAAE,CAAA,cAAA,EACTA,WAAK,CAAC,EAAE,CAAA,YAAA,EACVA,WAAK,CAAC,EAAE,CAAA,eAAA,EACLA,WAAK,CAAC,EAAE,CAAA,aAAA,EAEVC,SAAI,CAAC,IAAI,CAAC,UAAU,CAAA,WAAA,EACtBA,SAAI,CAAC,IAAI,CAAC,QAAQ,CAAA,aAAA,EAChBA,SAAI,CAAC,IAAI,CAAC,UAAU,CAAA,aAAA,EACpBA,SAAI,CAAC,IAAI,CAAC,UAAU,UAC1BA,SAAI,CAAC,IAAI,CAAC,KAAK,CAAA,kBAAA,EAGRD,WAAK,CAAC,IAAI,CAAA,OAAA,EAAU,IAAI,CAAC,IAAI,CAAA,aAAA,EAC5BA,WAAK,CAAC,EAAE;AAIpB,MAAM,SAAS,GAAGD,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EACjBC,WAAK,CAAC,EAAE,CAAA,eAAA,EACPA,WAAK,CAAC,EAAE;AAGpB,MAAM,IAAI,GAAGD,uBAAM,CAACG,mBAAM,CAAC,GAAG,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uCAAA,EAGZ,OAAO;AAU1B,MAAM,OAAO,GAAGH,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2DAAA,EAIrBC,WAAK,CAAC,IAAI,CAAA,OAAA,EAAU,IAAI,CAAC,IAAI,CAAA,YAAA,EACzB,CAAC,KAAK,KAClB,KAAK,CAAC,SAAS,KAAK,SAAS,GAAG,kBAAkB,CAAC,KAAK,CAAC,SAAS,CAAC,GAAGF,eAAO,CAAC,EAAE,CAAA,eAAA,EACjEK,aAAM,CAAC,EAAE,CAAA,uCAAA,EAIxB,CAAC,EAAE,MAAM,EAAE,KACX,MAAM;AACN,IAAA;;;;;;;AAOY,cAAA,EAAAH,WAAK,CAAC,EAAE,CAAA;0BACE,OAAO,CAAC,MAAM,CAAC,CAAA;;AAEtC,EAAA,CAAA,CAAA;;;;;;;;"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
export type CardElevation = 0 | 1 | 2 | 3 | 4;
|
|
2
|
-
declare const accents: {
|
|
3
|
-
info: string;
|
|
4
|
-
success: string;
|
|
5
|
-
error: string;
|
|
6
|
-
};
|
|
7
|
-
export declare const Footer: import("styled-components").StyledComponent<"footer", any, {}, never>;
|
|
8
|
-
export declare const Section: import("styled-components").StyledComponent<"section", any, {}, never>;
|
|
9
|
-
export declare const FullBleed: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
|
-
export declare const Body: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
|
|
11
|
-
export interface SurfaceProps {
|
|
12
|
-
elevation?: CardElevation;
|
|
13
|
-
accent?: keyof typeof accents;
|
|
14
|
-
}
|
|
15
|
-
export declare const Surface: import("styled-components").StyledComponent<"div", any, SurfaceProps, never>;
|
|
16
|
-
export {};
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import styled from 'styled-components';
|
|
2
|
-
import { motion } from 'framer-motion';
|
|
3
|
-
import { Shadows } from '../../theme/modules/shadows.js';
|
|
4
|
-
import { colors } from '../../theme/modules/colors.js';
|
|
5
|
-
import { sizes } from '../../theme/modules/sizes.js';
|
|
6
|
-
import { radius } from '../../theme/modules/radius.js';
|
|
7
|
-
import { text } from '../../theme/modules/text.js';
|
|
8
|
-
|
|
9
|
-
const { grey } = colors.neutral;
|
|
10
|
-
const elevationShadowMap = {
|
|
11
|
-
0: 'none',
|
|
12
|
-
1: Shadows.sm,
|
|
13
|
-
2: Shadows.base,
|
|
14
|
-
3: Shadows.md,
|
|
15
|
-
4: Shadows.lg,
|
|
16
|
-
};
|
|
17
|
-
const accents = {
|
|
18
|
-
info: colors.secondary.blue.base,
|
|
19
|
-
success: colors.secondary.green.base,
|
|
20
|
-
error: colors.secondary.red.base,
|
|
21
|
-
};
|
|
22
|
-
const Footer = styled.footer.withConfig({ displayName: "vui--Footer", componentId: "vui--livrdi" }) `margin-top:${sizes.base};padding:${sizes.md};z-index:2;`;
|
|
23
|
-
const Section = styled.section.withConfig({ displayName: "vui--Section", componentId: "vui--z99ese" }) `padding-right:${sizes.md};padding-left:${sizes.md};margin-top:${sizes.md};margin-bottom:${sizes.md};font-family:${text.body.fontFamily};font-size:${text.body.fontSize};font-weight:${text.body.fontWeight};line-height:${text.body.lineHeight};color:${text.body.color};& + &{border-top:${sizes.line} solid ${grey.base};padding-top:${sizes.md};}`;
|
|
24
|
-
const FullBleed = styled.div.withConfig({ displayName: "vui--FullBleed", componentId: "vui--1lgjeo7" }) `margin-left:-${sizes.md};margin-right:-${sizes.md};`;
|
|
25
|
-
const Body = styled(motion.div).withConfig({ displayName: "vui--Body", componentId: "vui--pfgeh3" }) `overflow-y:hidden;&:not(:first-child)> ${Section}:first-child{margin-top:0;}`;
|
|
26
|
-
const Surface = styled.div.withConfig({ displayName: "vui--Surface", componentId: "vui--g1wpqa" }) `position:relative;width:100%;background-color:white;border:${sizes.line} solid ${grey.base};box-shadow:${(props) => props.elevation !== undefined ? elevationShadowMap[props.elevation] : Shadows.sm};border-radius:${radius.md};overflow:hidden;box-sizing:border-box;${({ accent }) => accent &&
|
|
27
|
-
`
|
|
28
|
-
&::after {
|
|
29
|
-
content: "";
|
|
30
|
-
position: absolute;
|
|
31
|
-
top: 0;
|
|
32
|
-
left: 0;
|
|
33
|
-
right: 0;
|
|
34
|
-
height: ${sizes.xs};
|
|
35
|
-
background-color: ${accents[accent]};
|
|
36
|
-
}
|
|
37
|
-
`}`;
|
|
38
|
-
|
|
39
|
-
export { Body, Footer, FullBleed, Section, Surface };
|
|
40
|
-
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../src/components/Card/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { motion } from 'framer-motion';\nimport { Shadows } from '../../theme/modules/shadows';\nimport { colors } from '../../theme/modules/colors';\nimport { sizes } from '../../theme/modules/sizes';\nimport { radius } from '../../theme/modules/radius';\nimport { text } from '../../theme/modules/text';\n\nconst { grey } = colors.neutral;\n\nexport type CardElevation = 0 | 1 | 2 | 3 | 4;\n\nconst elevationShadowMap = {\n 0: 'none',\n 1: Shadows.sm,\n 2: Shadows.base,\n 3: Shadows.md,\n 4: Shadows.lg,\n};\n\nconst accents = {\n info: colors.secondary.blue.base,\n success: colors.secondary.green.base,\n error: colors.secondary.red.base,\n};\n\nexport const Footer = styled.footer`\n margin-top: ${sizes.base};\n padding: ${sizes.md};\n z-index: 2;\n`;\n\nexport const Section = styled.section`\n padding-right: ${sizes.md};\n padding-left: ${sizes.md};\n margin-top: ${sizes.md};\n margin-bottom: ${sizes.md};\n\n font-family: ${text.body.fontFamily};\n font-size: ${text.body.fontSize};\n font-weight: ${text.body.fontWeight};\n line-height: ${text.body.lineHeight};\n color: ${text.body.color};\n\n & + & {\n border-top: ${sizes.line} solid ${grey.base};\n padding-top: ${sizes.md};\n }\n`;\n\nexport const FullBleed = styled.div`\n margin-left: -${sizes.md};\n margin-right: -${sizes.md};\n`;\n\nexport const Body = styled(motion.div)`\n overflow-y: hidden;\n\n &:not(:first-child) > ${Section}:first-child {\n margin-top: 0;\n }\n`;\n\nexport interface SurfaceProps {\n elevation?: CardElevation;\n accent?: keyof typeof accents;\n}\n\nexport const Surface = styled.div<SurfaceProps>`\n position: relative;\n width: 100%;\n background-color: white;\n border: ${sizes.line} solid ${grey.base};\n box-shadow: ${(props) =>\n props.elevation !== undefined ? elevationShadowMap[props.elevation] : Shadows.sm};\n border-radius: ${radius.md};\n overflow: hidden;\n box-sizing: border-box;\n\n ${({ accent }) =>\n accent &&\n `\n &::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: ${sizes.xs};\n background-color: ${accents[accent]};\n }\n `}\n`;\n"],"names":[],"mappings":";;;;;;;;AAQA,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,OAAO;AAI/B,MAAM,kBAAkB,GAAG;AACzB,IAAA,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,OAAO,CAAC,EAAE;IACb,CAAC,EAAE,OAAO,CAAC,IAAI;IACf,CAAC,EAAE,OAAO,CAAC,EAAE;IACb,CAAC,EAAE,OAAO,CAAC,EAAE;CACd;AAED,MAAM,OAAO,GAAG;AACd,IAAA,IAAI,EAAE,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAChC,IAAA,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI;AACpC,IAAA,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;CACjC;AAEM,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,WAAA,EACnB,KAAK,CAAC,IAAI,CAAA,SAAA,EACb,KAAK,CAAC,EAAE;AAId,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EAClB,KAAK,CAAC,EAAE,CAAA,cAAA,EACT,KAAK,CAAC,EAAE,CAAA,YAAA,EACV,KAAK,CAAC,EAAE,CAAA,eAAA,EACL,KAAK,CAAC,EAAE,CAAA,aAAA,EAEV,IAAI,CAAC,IAAI,CAAC,UAAU,CAAA,WAAA,EACtB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAA,aAAA,EAChB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAA,aAAA,EACpB,IAAI,CAAC,IAAI,CAAC,UAAU,UAC1B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAA,kBAAA,EAGR,KAAK,CAAC,IAAI,CAAA,OAAA,EAAU,IAAI,CAAC,IAAI,CAAA,aAAA,EAC5B,KAAK,CAAC,EAAE;AAIpB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EACjB,KAAK,CAAC,EAAE,CAAA,eAAA,EACP,KAAK,CAAC,EAAE;AAGpB,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,uCAAA,EAGZ,OAAO;AAU1B,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2DAAA,EAIrB,KAAK,CAAC,IAAI,CAAA,OAAA,EAAU,IAAI,CAAC,IAAI,CAAA,YAAA,EACzB,CAAC,KAAK,KAClB,KAAK,CAAC,SAAS,KAAK,SAAS,GAAG,kBAAkB,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC,EAAE,CAAA,eAAA,EACjE,MAAM,CAAC,EAAE,CAAA,uCAAA,EAIxB,CAAC,EAAE,MAAM,EAAE,KACX,MAAM;AACN,IAAA;;;;;;;AAOY,cAAA,EAAA,KAAK,CAAC,EAAE,CAAA;0BACE,OAAO,CAAC,MAAM,CAAC,CAAA;;AAEtC,EAAA,CAAA,CAAA;;;;"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var styled = require('styled-components');
|
|
4
|
-
var sizes = require('../../theme/modules/sizes.cjs');
|
|
5
|
-
|
|
6
|
-
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
7
|
-
|
|
8
|
-
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
9
|
-
|
|
10
|
-
const Header = styled__default.default.header.withConfig({ displayName: "vui--Header", componentId: "vui--oa1a54" }) `padding-top:${sizes.sizes.md};padding-right:${sizes.sizes.md};padding-left:${sizes.sizes.md};margin-bottom:${sizes.sizes.md};& > * + *{margin-top:${sizes.sizes.xs};}`;
|
|
11
|
-
const HeaderGrid = styled__default.default.div.withConfig({ displayName: "vui--HeaderGrid", componentId: "vui--129vg5d" }) `/*${sizes.sizes.base}*/display:flex;justify-content:flex-end;align-items:center;& > *:first-child{flex:1;}`;
|
|
12
|
-
|
|
13
|
-
exports.Header = Header;
|
|
14
|
-
exports.HeaderGrid = HeaderGrid;
|
|
15
|
-
//# sourceMappingURL=styled.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.cjs","sources":["../../../src/components/CardHeader/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { sizes } from '../../theme/modules/sizes';\n\nexport const Header = styled.header`\n padding-top: ${sizes.md};\n padding-right: ${sizes.md};\n padding-left: ${sizes.md};\n margin-bottom: ${sizes.md};\n\n & > * + * {\n margin-top: ${sizes.xs};\n }\n`;\n\nexport const HeaderGrid = styled.div`\n /* display: grid;\n grid-auto-flow: column;\n grid-template-columns: 1fr;\n grid-auto-columns: max-content;\n column-gap: ${sizes.base};\n align-items: center; */\n\n display: flex;\n justify-content: flex-end;\n align-items: center;\n\n & > *:first-child {\n flex: 1;\n }\n`;\n"],"names":["styled","sizes"],"mappings":";;;;;;;;;AAGO,MAAM,MAAM,GAAGA,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EAClBC,WAAK,CAAC,EAAE,CAAA,eAAA,EACNA,WAAK,CAAC,EAAE,CAAA,cAAA,EACTA,WAAK,CAAC,EAAE,CAAA,eAAA,EACPA,WAAK,CAAC,EAAE,CAAA,sBAAA,EAGTA,WAAK,CAAC,EAAE,CAAA,EAAA;AAInB,MAAM,UAAU,GAAGD,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAKpBC,WAAK,CAAC,IAAI,CAAA,qFAAA;;;;;"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import styled from 'styled-components';
|
|
2
|
-
import { sizes } from '../../theme/modules/sizes.js';
|
|
3
|
-
|
|
4
|
-
const Header = styled.header.withConfig({ displayName: "vui--Header", componentId: "vui--oa1a54" }) `padding-top:${sizes.md};padding-right:${sizes.md};padding-left:${sizes.md};margin-bottom:${sizes.md};& > * + *{margin-top:${sizes.xs};}`;
|
|
5
|
-
const HeaderGrid = styled.div.withConfig({ displayName: "vui--HeaderGrid", componentId: "vui--129vg5d" }) `/*${sizes.base}*/display:flex;justify-content:flex-end;align-items:center;& > *:first-child{flex:1;}`;
|
|
6
|
-
|
|
7
|
-
export { Header, HeaderGrid };
|
|
8
|
-
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../src/components/CardHeader/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { sizes } from '../../theme/modules/sizes';\n\nexport const Header = styled.header`\n padding-top: ${sizes.md};\n padding-right: ${sizes.md};\n padding-left: ${sizes.md};\n margin-bottom: ${sizes.md};\n\n & > * + * {\n margin-top: ${sizes.xs};\n }\n`;\n\nexport const HeaderGrid = styled.div`\n /* display: grid;\n grid-auto-flow: column;\n grid-template-columns: 1fr;\n grid-auto-columns: max-content;\n column-gap: ${sizes.base};\n align-items: center; */\n\n display: flex;\n justify-content: flex-end;\n align-items: center;\n\n & > *:first-child {\n flex: 1;\n }\n`;\n"],"names":[],"mappings":";;;AAGO,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EAClB,KAAK,CAAC,EAAE,CAAA,eAAA,EACN,KAAK,CAAC,EAAE,CAAA,cAAA,EACT,KAAK,CAAC,EAAE,CAAA,eAAA,EACP,KAAK,CAAC,EAAE,CAAA,sBAAA,EAGT,KAAK,CAAC,EAAE,CAAA,EAAA;AAInB,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAKpB,KAAK,CAAC,IAAI,CAAA,qFAAA;;;;"}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var styled = require('styled-components');
|
|
4
|
-
var sizes = require('../../theme/modules/sizes.cjs');
|
|
5
|
-
var text = require('../../theme/modules/text.cjs');
|
|
6
|
-
var colors = require('../../theme/modules/colors.cjs');
|
|
7
|
-
|
|
8
|
-
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
9
|
-
|
|
10
|
-
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
11
|
-
|
|
12
|
-
const { blue } = colors.colors.secondary;
|
|
13
|
-
const { grey } = colors.colors.neutral;
|
|
14
|
-
const TableHeader = styled__default.default.thead.withConfig({ displayName: "vui--TableHeader", componentId: "vui--o0sot" }) `background-color:white;`;
|
|
15
|
-
const TableBody = styled__default.default.tbody.withConfig({ displayName: "vui--TableBody", componentId: "vui--nuzcgp" }) `&&& tr:hover td{background-color:${blue.lightest};}`;
|
|
16
|
-
const TableRow = styled__default.default.tr.withConfig({ displayName: "vui--TableRow", componentId: "vui--1uhgfx1" }) ``;
|
|
17
|
-
const TableCell = styled__default.default.td.withConfig({ displayName: "vui--TableCell", componentId: "vui--s41x8b" }) `position:relative;padding:1.25rem 1rem;text-align:${({ align }) => align || 'left'};background-color:white;font-family:${text.text.bodySmall.fontFamily};font-size:${text.text.bodySmall.fontSize};font-weight:${text.text.bodySmall.fontWeight};color:${text.text.bodySmall.color};line-height:${sizes.sizes.base};& > *{vertical-align:middle;}`;
|
|
18
|
-
const TableHeaderCell = styled__default.default(TableCell).attrs({
|
|
19
|
-
as: 'th',
|
|
20
|
-
}).withConfig({ displayName: "vui--TableHeaderCell", componentId: "vui--2nps2x" }) `border-bottom:1px solid ${grey.dark};font-family:${text.text.bodySmallBold.fontFamily};font-size:${text.text.bodySmallBold.fontSize};font-weight:${text.text.bodySmallBold.fontWeight};color:${text.text.bodySmallBold.color};`;
|
|
21
|
-
const Table = styled__default.default.table.withConfig({ displayName: "vui--Table", componentId: "vui--lcbl46" }) `width:100%;border-spacing:0;${({ striped }) => striped &&
|
|
22
|
-
`
|
|
23
|
-
& ${TableBody} tr:nth-child(even) td {
|
|
24
|
-
background-color: ${grey.lightest};
|
|
25
|
-
}
|
|
26
|
-
`}`;
|
|
27
|
-
|
|
28
|
-
exports.Table = Table;
|
|
29
|
-
exports.TableBody = TableBody;
|
|
30
|
-
exports.TableCell = TableCell;
|
|
31
|
-
exports.TableHeader = TableHeader;
|
|
32
|
-
exports.TableHeaderCell = TableHeaderCell;
|
|
33
|
-
exports.TableRow = TableRow;
|
|
34
|
-
//# sourceMappingURL=styled.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.cjs","sources":["../../../src/components/SimpleTable/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { sizes } from '../../theme/modules/sizes';\nimport { text } from '../../theme/modules/text';\nimport { colors } from '../../theme/modules/colors';\n\nconst { blue } = colors.secondary;\nconst { grey } = colors.neutral;\n\ntype TableProps = {\n striped?: boolean;\n};\n\nexport const TableHeader = styled.thead`\n background-color: white;\n`;\n\nexport const TableBody = styled.tbody`\n &&& tr:hover td {\n background-color: ${blue.lightest};\n }\n`;\n\nexport const TableRow = styled.tr``;\n\nexport type TableCellProps = {\n align?: 'left' | 'right' | 'center';\n};\n\nexport const TableCell = styled.td<TableCellProps>`\n position: relative;\n padding: 1.25rem 1rem;\n text-align: ${({ align }) => align || 'left'};\n background-color: white;\n\n font-family: ${text.bodySmall.fontFamily};\n font-size: ${text.bodySmall.fontSize};\n font-weight: ${text.bodySmall.fontWeight};\n color: ${text.bodySmall.color};\n line-height: ${sizes.base};\n\n & > * {\n vertical-align: middle;\n }\n`;\n\nexport const TableHeaderCell = styled(TableCell).attrs({\n as: 'th',\n})`\n border-bottom: 1px solid ${grey.dark};\n\n font-family: ${text.bodySmallBold.fontFamily};\n font-size: ${text.bodySmallBold.fontSize};\n font-weight: ${text.bodySmallBold.fontWeight};\n color: ${text.bodySmallBold.color};\n`;\n\nexport const Table = styled.table<TableProps>`\n width: 100%;\n border-spacing: 0;\n\n ${({ striped }) =>\n striped &&\n `\n & ${TableBody} tr:nth-child(even) td {\n background-color: ${grey.lightest};\n }\n `}\n`;\n"],"names":["colors","styled","text","sizes"],"mappings":";;;;;;;;;;;AAKA,MAAM,EAAE,IAAI,EAAE,GAAGA,aAAM,CAAC,SAAS;AACjC,MAAM,EAAE,IAAI,EAAE,GAAGA,aAAM,CAAC,OAAO;MAMlB,WAAW,GAAGC,uBAAM,CAAC,KAAK;AAIhC,MAAM,SAAS,GAAGA,uBAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA,EAEb,IAAI,CAAC,QAAQ,CAAA,EAAA;MAIxB,QAAQ,GAAGA,uBAAM,CAAC,EAAE;MAMpB,SAAS,GAAGA,uBAAM,CAAC,EAAE,gIAGlB,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,MAAM,CAAA,oCAAA,EAG7BC,SAAI,CAAC,SAAS,CAAC,UAAU,CAAA,WAAA,EAC3BA,SAAI,CAAC,SAAS,CAAC,QAAQ,CAAA,aAAA,EACrBA,SAAI,CAAC,SAAS,CAAC,UAAU,UAC/BA,SAAI,CAAC,SAAS,CAAC,KAAK,gBACdC,WAAK,CAAC,IAAI,CAAA,8BAAA;AAOpB,MAAM,eAAe,GAAGF,uBAAM,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC;AACrD,IAAA,EAAE,EAAE,IAAI;AACT,CAAA,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wBAAA,EAC2B,IAAI,CAAC,IAAI,CAAA,aAAA,EAErBC,SAAI,CAAC,aAAa,CAAC,UAAU,CAAA,WAAA,EAC/BA,SAAI,CAAC,aAAa,CAAC,QAAQ,CAAA,aAAA,EACzBA,SAAI,CAAC,aAAa,CAAC,UAAU,CAAA,OAAA,EACnCA,SAAI,CAAC,aAAa,CAAC,KAAK;AAG5B,MAAM,KAAK,GAAGD,uBAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,4BAAA,EAI7B,CAAC,EAAE,OAAO,EAAE,KACZ,OAAO;AACP,IAAA;OACG,SAAS,CAAA;AACS,uBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;AAEpC,CAAA,CAAA,CAAA;;;;;;;;;"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
type TableProps = {
|
|
2
|
-
striped?: boolean;
|
|
3
|
-
};
|
|
4
|
-
export declare const TableHeader: import("styled-components").StyledComponent<"thead", any, {}, never>;
|
|
5
|
-
export declare const TableBody: import("styled-components").StyledComponent<"tbody", any, {}, never>;
|
|
6
|
-
export declare const TableRow: import("styled-components").StyledComponent<"tr", any, {}, never>;
|
|
7
|
-
export type TableCellProps = {
|
|
8
|
-
align?: 'left' | 'right' | 'center';
|
|
9
|
-
};
|
|
10
|
-
export declare const TableCell: import("styled-components").StyledComponent<"td", any, TableCellProps, never>;
|
|
11
|
-
export declare const TableHeaderCell: import("styled-components").StyledComponent<"td", any, TableCellProps & {
|
|
12
|
-
as: string;
|
|
13
|
-
}, "as">;
|
|
14
|
-
export declare const Table: import("styled-components").StyledComponent<"table", any, TableProps, never>;
|
|
15
|
-
export {};
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import styled from 'styled-components';
|
|
2
|
-
import { sizes } from '../../theme/modules/sizes.js';
|
|
3
|
-
import { text } from '../../theme/modules/text.js';
|
|
4
|
-
import { colors } from '../../theme/modules/colors.js';
|
|
5
|
-
|
|
6
|
-
const { blue } = colors.secondary;
|
|
7
|
-
const { grey } = colors.neutral;
|
|
8
|
-
const TableHeader = styled.thead.withConfig({ displayName: "vui--TableHeader", componentId: "vui--o0sot" }) `background-color:white;`;
|
|
9
|
-
const TableBody = styled.tbody.withConfig({ displayName: "vui--TableBody", componentId: "vui--nuzcgp" }) `&&& tr:hover td{background-color:${blue.lightest};}`;
|
|
10
|
-
const TableRow = styled.tr.withConfig({ displayName: "vui--TableRow", componentId: "vui--1uhgfx1" }) ``;
|
|
11
|
-
const TableCell = styled.td.withConfig({ displayName: "vui--TableCell", componentId: "vui--s41x8b" }) `position:relative;padding:1.25rem 1rem;text-align:${({ align }) => align || 'left'};background-color:white;font-family:${text.bodySmall.fontFamily};font-size:${text.bodySmall.fontSize};font-weight:${text.bodySmall.fontWeight};color:${text.bodySmall.color};line-height:${sizes.base};& > *{vertical-align:middle;}`;
|
|
12
|
-
const TableHeaderCell = styled(TableCell).attrs({
|
|
13
|
-
as: 'th',
|
|
14
|
-
}).withConfig({ displayName: "vui--TableHeaderCell", componentId: "vui--2nps2x" }) `border-bottom:1px solid ${grey.dark};font-family:${text.bodySmallBold.fontFamily};font-size:${text.bodySmallBold.fontSize};font-weight:${text.bodySmallBold.fontWeight};color:${text.bodySmallBold.color};`;
|
|
15
|
-
const Table = styled.table.withConfig({ displayName: "vui--Table", componentId: "vui--lcbl46" }) `width:100%;border-spacing:0;${({ striped }) => striped &&
|
|
16
|
-
`
|
|
17
|
-
& ${TableBody} tr:nth-child(even) td {
|
|
18
|
-
background-color: ${grey.lightest};
|
|
19
|
-
}
|
|
20
|
-
`}`;
|
|
21
|
-
|
|
22
|
-
export { Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableRow };
|
|
23
|
-
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../src/components/SimpleTable/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { sizes } from '../../theme/modules/sizes';\nimport { text } from '../../theme/modules/text';\nimport { colors } from '../../theme/modules/colors';\n\nconst { blue } = colors.secondary;\nconst { grey } = colors.neutral;\n\ntype TableProps = {\n striped?: boolean;\n};\n\nexport const TableHeader = styled.thead`\n background-color: white;\n`;\n\nexport const TableBody = styled.tbody`\n &&& tr:hover td {\n background-color: ${blue.lightest};\n }\n`;\n\nexport const TableRow = styled.tr``;\n\nexport type TableCellProps = {\n align?: 'left' | 'right' | 'center';\n};\n\nexport const TableCell = styled.td<TableCellProps>`\n position: relative;\n padding: 1.25rem 1rem;\n text-align: ${({ align }) => align || 'left'};\n background-color: white;\n\n font-family: ${text.bodySmall.fontFamily};\n font-size: ${text.bodySmall.fontSize};\n font-weight: ${text.bodySmall.fontWeight};\n color: ${text.bodySmall.color};\n line-height: ${sizes.base};\n\n & > * {\n vertical-align: middle;\n }\n`;\n\nexport const TableHeaderCell = styled(TableCell).attrs({\n as: 'th',\n})`\n border-bottom: 1px solid ${grey.dark};\n\n font-family: ${text.bodySmallBold.fontFamily};\n font-size: ${text.bodySmallBold.fontSize};\n font-weight: ${text.bodySmallBold.fontWeight};\n color: ${text.bodySmallBold.color};\n`;\n\nexport const Table = styled.table<TableProps>`\n width: 100%;\n border-spacing: 0;\n\n ${({ striped }) =>\n striped &&\n `\n & ${TableBody} tr:nth-child(even) td {\n background-color: ${grey.lightest};\n }\n `}\n`;\n"],"names":[],"mappings":";;;;;AAKA,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,SAAS;AACjC,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,OAAO;MAMlB,WAAW,GAAG,MAAM,CAAC,KAAK;AAIhC,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA,EAEb,IAAI,CAAC,QAAQ,CAAA,EAAA;MAIxB,QAAQ,GAAG,MAAM,CAAC,EAAE;MAMpB,SAAS,GAAG,MAAM,CAAC,EAAE,gIAGlB,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,MAAM,CAAA,oCAAA,EAG7B,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,WAAA,EAC3B,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAA,aAAA,EACrB,IAAI,CAAC,SAAS,CAAC,UAAU,UAC/B,IAAI,CAAC,SAAS,CAAC,KAAK,gBACd,KAAK,CAAC,IAAI,CAAA,8BAAA;AAOpB,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC;AACrD,IAAA,EAAE,EAAE,IAAI;AACT,CAAA,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wBAAA,EAC2B,IAAI,CAAC,IAAI,CAAA,aAAA,EAErB,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,WAAA,EAC/B,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAA,aAAA,EACzB,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,OAAA,EACnC,IAAI,CAAC,aAAa,CAAC,KAAK;AAG5B,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,4BAAA,EAI7B,CAAC,EAAE,OAAO,EAAE,KACZ,OAAO;AACP,IAAA;OACG,SAAS,CAAA;AACS,uBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;AAEpC,CAAA,CAAA,CAAA;;;;"}
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var styled = require('styled-components');
|
|
4
|
-
var colors = require('../../theme/modules/colors.cjs');
|
|
5
|
-
var radius = require('../../theme/modules/radius.cjs');
|
|
6
|
-
var sizes = require('../../theme/modules/sizes.cjs');
|
|
7
|
-
|
|
8
|
-
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
9
|
-
|
|
10
|
-
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
11
|
-
|
|
12
|
-
const DropZoneContainer = styled__default.default.div.withConfig({ displayName: "vui--DropZoneContainer", componentId: "vui--17v0v3c" }) `display:flex;align-items:center;justify-content:center;padding:${sizes.sizes.base};border-radius:${radius.radius.base};input[type='file']{position:absolute;opacity:0;width:1px;height:1px;cursor:pointer;}cursor:pointer;border:2px dashed ${colors.colors.neutral.ink.lightest};background-color:${colors.colors.neutral.grey.lightest};:hover{border:2px dashed ${colors.colors.secondary.blue.base};background-color:${colors.colors.secondary.blue.lightest};svg{color:${colors.colors.secondary.blue.base};}}:active,:focus-within{border:2px dashed ${colors.colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.colors.secondary.blue.light};background-color:${colors.colors.secondary.blue.lightest};svg{color:${colors.colors.secondary.blue.base};}}${({ isDragOver }) => isDragOver &&
|
|
13
|
-
`
|
|
14
|
-
border: 2px dashed ${colors.colors.secondary.blue.base};
|
|
15
|
-
box-shadow: 0 0 0 4px ${colors.colors.secondary.blue.light};
|
|
16
|
-
background-color: ${colors.colors.secondary.blue.lightest};
|
|
17
|
-
|
|
18
|
-
svg {
|
|
19
|
-
color: ${colors.colors.secondary.blue.base};
|
|
20
|
-
}
|
|
21
|
-
`} ${({ hasError, isDragOver }) => hasError &&
|
|
22
|
-
`
|
|
23
|
-
border: 2px dashed ${colors.colors.secondary.red.base};
|
|
24
|
-
|
|
25
|
-
:hover {
|
|
26
|
-
border: 2px dashed ${colors.colors.secondary.red.base};
|
|
27
|
-
background-color: ${colors.colors.secondary.red.lightest};
|
|
28
|
-
|
|
29
|
-
svg {
|
|
30
|
-
color: ${colors.colors.secondary.red.base};
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
:active, :focus-within {
|
|
35
|
-
border: 2px dashed ${colors.colors.secondary.red.base};
|
|
36
|
-
box-shadow: 0 0 0 4px ${colors.colors.secondary.red.light};
|
|
37
|
-
background-color: ${colors.colors.secondary.red.lightest};
|
|
38
|
-
|
|
39
|
-
svg {
|
|
40
|
-
color: ${colors.colors.secondary.red.base};
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
${isDragOver
|
|
45
|
-
? `
|
|
46
|
-
border: 2px dashed ${colors.colors.secondary.red.base};
|
|
47
|
-
box-shadow: 0 0 0 4px ${colors.colors.secondary.red.light};
|
|
48
|
-
background-color: ${colors.colors.secondary.red.lightest};
|
|
49
|
-
`
|
|
50
|
-
: ''}
|
|
51
|
-
`} &:has(input:disabled){cursor:not-allowed;box-shadow:none;background-color:${colors.colors.neutral.grey.light};border-color:${colors.colors.neutral.ink.lightest};color:${colors.colors.neutral.ink.light};svg{color:${colors.colors.neutral.ink.lightest};}}`;
|
|
52
|
-
|
|
53
|
-
exports.DropZoneContainer = DropZoneContainer;
|
|
54
|
-
//# sourceMappingURL=styled.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.cjs","sources":["../../../src/components/UploadFile/styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { colors } from '../../theme/modules/colors';\nimport { radius } from '../../theme/modules/radius';\nimport { sizes } from '../../theme/modules/sizes';\n\nexport const DropZoneContainer = styled.div<{\n hasError: boolean;\n isDragOver?: boolean;\n}>`\n display: flex;\n align-items: center;\n justify-content: center;\n\n padding: ${sizes.base};\n border-radius: ${radius.base};\n\n input[type='file'] {\n position: absolute;\n opacity: 0;\n width: 1px;\n height: 1px;\n cursor: pointer;\n }\n\n cursor: pointer;\n\n border: 2px dashed ${colors.neutral.ink.lightest};\n background-color: ${colors.neutral.grey.lightest};\n\n :hover {\n border: 2px dashed ${colors.secondary.blue.base};\n background-color: ${colors.secondary.blue.lightest};\n\n svg {\n color: ${colors.secondary.blue.base};\n }\n }\n :active,\n :focus-within {\n border: 2px dashed ${colors.secondary.blue.base};\n box-shadow: 0 0 0 4px ${colors.secondary.blue.light};\n background-color: ${colors.secondary.blue.lightest};\n\n svg {\n color: ${colors.secondary.blue.base};\n }\n }\n\n ${({ isDragOver }) =>\n isDragOver &&\n `\n border: 2px dashed ${colors.secondary.blue.base};\n box-shadow: 0 0 0 4px ${colors.secondary.blue.light};\n background-color: ${colors.secondary.blue.lightest};\n\n svg {\n color: ${colors.secondary.blue.base};\n }\n `}\n\n ${({ hasError, isDragOver }) =>\n hasError &&\n `\n border: 2px dashed ${colors.secondary.red.base};\n\n :hover {\n border: 2px dashed ${colors.secondary.red.base};\n background-color: ${colors.secondary.red.lightest};\n\n svg {\n color: ${colors.secondary.red.base};\n }\n }\n\n :active, :focus-within {\n border: 2px dashed ${colors.secondary.red.base};\n box-shadow: 0 0 0 4px ${colors.secondary.red.light};\n background-color: ${colors.secondary.red.lightest};\n\n svg {\n color: ${colors.secondary.red.base};\n }\n }\n\n ${\n isDragOver\n ? `\n border: 2px dashed ${colors.secondary.red.base};\n box-shadow: 0 0 0 4px ${colors.secondary.red.light};\n background-color: ${colors.secondary.red.lightest};\n `\n : ''\n }\n `}\n\n\n &:has(input:disabled) {\n cursor: not-allowed;\n box-shadow: none;\n background-color: ${colors.neutral.grey.light};\n border-color: ${colors.neutral.ink.lightest};\n color: ${colors.neutral.ink.light};\n\n svg {\n color: ${colors.neutral.ink.lightest};\n }\n }\n`;\n"],"names":["styled","sizes","radius","colors"],"mappings":";;;;;;;;;;;MAKa,iBAAiB,GAAGA,uBAAM,CAAC,GAAG,sJAQ9BC,WAAK,CAAC,IAAI,CAAA,eAAA,EACJC,aAAM,CAAC,IAAI,CAAA,sHAAA,EAYPC,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,kBAAA,EAC5BA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,6BAGzBA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kBAAA,EAC3BA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,cAGvCA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,2CAAA,EAKhBA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,sBAAA,EACvBA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,kBAAA,EAC/BA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA,WAAA,EAGvCA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,MAIrC,CAAC,EAAE,UAAU,EAAE,KACf,UAAU;AACV,IAAA;AACqB,uBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA;AACvB,0BAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA;AAC/B,sBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA;;;AAGvC,aAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEtC,CAAA,CAAA,EAEC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KACzB,QAAQ;AACR,IAAA;AACqB,uBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;AAGvB,yBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AAC1B,wBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAA;;;AAGtC,eAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;;;AAKf,yBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AACtB,4BAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA;AAC9B,wBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAA;;;AAGtC,eAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;;MAKpC;AACE,UAAE;AACe,uBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AACtB,0BAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA;AAC9B,sBAAA,EAAAA,aAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAA;AAClD,EAAA;AACK,UAAE,EACN;AACD,EAAA,CAAA,CAAA,2EAAA,EAMqBA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,cAAA,EAC7BA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,OAAA,EAClCA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,WAAA,EAGtBA,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ;;;;"}
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import styled from 'styled-components';
|
|
2
|
-
import { colors } from '../../theme/modules/colors.js';
|
|
3
|
-
import { radius } from '../../theme/modules/radius.js';
|
|
4
|
-
import { sizes } from '../../theme/modules/sizes.js';
|
|
5
|
-
|
|
6
|
-
const DropZoneContainer = styled.div.withConfig({ displayName: "vui--DropZoneContainer", componentId: "vui--17v0v3c" }) `display:flex;align-items:center;justify-content:center;padding:${sizes.base};border-radius:${radius.base};input[type='file']{position:absolute;opacity:0;width:1px;height:1px;cursor:pointer;}cursor:pointer;border:2px dashed ${colors.neutral.ink.lightest};background-color:${colors.neutral.grey.lightest};:hover{border:2px dashed ${colors.secondary.blue.base};background-color:${colors.secondary.blue.lightest};svg{color:${colors.secondary.blue.base};}}:active,:focus-within{border:2px dashed ${colors.secondary.blue.base};box-shadow:0 0 0 4px ${colors.secondary.blue.light};background-color:${colors.secondary.blue.lightest};svg{color:${colors.secondary.blue.base};}}${({ isDragOver }) => isDragOver &&
|
|
7
|
-
`
|
|
8
|
-
border: 2px dashed ${colors.secondary.blue.base};
|
|
9
|
-
box-shadow: 0 0 0 4px ${colors.secondary.blue.light};
|
|
10
|
-
background-color: ${colors.secondary.blue.lightest};
|
|
11
|
-
|
|
12
|
-
svg {
|
|
13
|
-
color: ${colors.secondary.blue.base};
|
|
14
|
-
}
|
|
15
|
-
`} ${({ hasError, isDragOver }) => hasError &&
|
|
16
|
-
`
|
|
17
|
-
border: 2px dashed ${colors.secondary.red.base};
|
|
18
|
-
|
|
19
|
-
:hover {
|
|
20
|
-
border: 2px dashed ${colors.secondary.red.base};
|
|
21
|
-
background-color: ${colors.secondary.red.lightest};
|
|
22
|
-
|
|
23
|
-
svg {
|
|
24
|
-
color: ${colors.secondary.red.base};
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
:active, :focus-within {
|
|
29
|
-
border: 2px dashed ${colors.secondary.red.base};
|
|
30
|
-
box-shadow: 0 0 0 4px ${colors.secondary.red.light};
|
|
31
|
-
background-color: ${colors.secondary.red.lightest};
|
|
32
|
-
|
|
33
|
-
svg {
|
|
34
|
-
color: ${colors.secondary.red.base};
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
${isDragOver
|
|
39
|
-
? `
|
|
40
|
-
border: 2px dashed ${colors.secondary.red.base};
|
|
41
|
-
box-shadow: 0 0 0 4px ${colors.secondary.red.light};
|
|
42
|
-
background-color: ${colors.secondary.red.lightest};
|
|
43
|
-
`
|
|
44
|
-
: ''}
|
|
45
|
-
`} &:has(input:disabled){cursor:not-allowed;box-shadow:none;background-color:${colors.neutral.grey.light};border-color:${colors.neutral.ink.lightest};color:${colors.neutral.ink.light};svg{color:${colors.neutral.ink.lightest};}}`;
|
|
46
|
-
|
|
47
|
-
export { DropZoneContainer };
|
|
48
|
-
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../src/components/UploadFile/styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { colors } from '../../theme/modules/colors';\nimport { radius } from '../../theme/modules/radius';\nimport { sizes } from '../../theme/modules/sizes';\n\nexport const DropZoneContainer = styled.div<{\n hasError: boolean;\n isDragOver?: boolean;\n}>`\n display: flex;\n align-items: center;\n justify-content: center;\n\n padding: ${sizes.base};\n border-radius: ${radius.base};\n\n input[type='file'] {\n position: absolute;\n opacity: 0;\n width: 1px;\n height: 1px;\n cursor: pointer;\n }\n\n cursor: pointer;\n\n border: 2px dashed ${colors.neutral.ink.lightest};\n background-color: ${colors.neutral.grey.lightest};\n\n :hover {\n border: 2px dashed ${colors.secondary.blue.base};\n background-color: ${colors.secondary.blue.lightest};\n\n svg {\n color: ${colors.secondary.blue.base};\n }\n }\n :active,\n :focus-within {\n border: 2px dashed ${colors.secondary.blue.base};\n box-shadow: 0 0 0 4px ${colors.secondary.blue.light};\n background-color: ${colors.secondary.blue.lightest};\n\n svg {\n color: ${colors.secondary.blue.base};\n }\n }\n\n ${({ isDragOver }) =>\n isDragOver &&\n `\n border: 2px dashed ${colors.secondary.blue.base};\n box-shadow: 0 0 0 4px ${colors.secondary.blue.light};\n background-color: ${colors.secondary.blue.lightest};\n\n svg {\n color: ${colors.secondary.blue.base};\n }\n `}\n\n ${({ hasError, isDragOver }) =>\n hasError &&\n `\n border: 2px dashed ${colors.secondary.red.base};\n\n :hover {\n border: 2px dashed ${colors.secondary.red.base};\n background-color: ${colors.secondary.red.lightest};\n\n svg {\n color: ${colors.secondary.red.base};\n }\n }\n\n :active, :focus-within {\n border: 2px dashed ${colors.secondary.red.base};\n box-shadow: 0 0 0 4px ${colors.secondary.red.light};\n background-color: ${colors.secondary.red.lightest};\n\n svg {\n color: ${colors.secondary.red.base};\n }\n }\n\n ${\n isDragOver\n ? `\n border: 2px dashed ${colors.secondary.red.base};\n box-shadow: 0 0 0 4px ${colors.secondary.red.light};\n background-color: ${colors.secondary.red.lightest};\n `\n : ''\n }\n `}\n\n\n &:has(input:disabled) {\n cursor: not-allowed;\n box-shadow: none;\n background-color: ${colors.neutral.grey.light};\n border-color: ${colors.neutral.ink.lightest};\n color: ${colors.neutral.ink.light};\n\n svg {\n color: ${colors.neutral.ink.lightest};\n }\n }\n`;\n"],"names":[],"mappings":";;;;;MAKa,iBAAiB,GAAG,MAAM,CAAC,GAAG,sJAQ9B,KAAK,CAAC,IAAI,CAAA,eAAA,EACJ,MAAM,CAAC,IAAI,CAAA,sHAAA,EAYP,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,kBAAA,EAC5B,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,6BAGzB,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kBAAA,EAC3B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,cAGvC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,2CAAA,EAKhB,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,sBAAA,EACvB,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,kBAAA,EAC/B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA,WAAA,EAGvC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,MAIrC,CAAC,EAAE,UAAU,EAAE,KACf,UAAU;AACV,IAAA;AACqB,uBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA;AACvB,0BAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA;AAC/B,sBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA;;;AAGvC,aAAA,EAAA,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEtC,CAAA,CAAA,EAEC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KACzB,QAAQ;AACR,IAAA;AACqB,uBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;AAGvB,yBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AAC1B,wBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAA;;;AAGtC,eAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;;;AAKf,yBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AACtB,4BAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA;AAC9B,wBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAA;;;AAGtC,eAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;;;;MAKpC;AACE,UAAE;AACe,uBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AACtB,0BAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA;AAC9B,sBAAA,EAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAA;AAClD,EAAA;AACK,UAAE,EACN;AACD,EAAA,CAAA,CAAA,2EAAA,EAMqB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,cAAA,EAC7B,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,OAAA,EAClC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,WAAA,EAGtB,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ;;;;"}
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var styled = require('styled-components');
|
|
4
|
-
var colors = require('../../theme/modules/colors.cjs');
|
|
5
|
-
var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
|
|
6
|
-
var Text = require('../Text/Text.cjs');
|
|
7
|
-
var sizes = require('../../theme/modules/sizes.cjs');
|
|
8
|
-
|
|
9
|
-
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
10
|
-
|
|
11
|
-
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
12
|
-
|
|
13
|
-
const Container = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Container", componentId: "vui--1vyyfhh" }) `padding:14px 24px;`;
|
|
14
|
-
const CounterText = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterText", componentId: "vui--ycgtn6" }) `line-height:1;`;
|
|
15
|
-
const Contour = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Contour", componentId: "vui--zy3oaf" }) `position:relative;display:flex;flex-direction:row;align-items:center;height:40px;border-radius:4px;padding:0 12px;border:1px solid transparent;cursor:pointer;${({ $colourPalette, $customTextColour }) => `
|
|
16
|
-
&:hover {
|
|
17
|
-
border: 1px solid ${$colourPalette.base};
|
|
18
|
-
background-color: ${$colourPalette.lightest};
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
span {
|
|
22
|
-
color: ${$customTextColour !== null && $customTextColour !== void 0 ? $customTextColour : colors.colors.neutral.ink.dark};
|
|
23
|
-
}
|
|
24
|
-
`} ${({ $active, $colourPalette }) => $active &&
|
|
25
|
-
`
|
|
26
|
-
background-color: ${$colourPalette.lightest};
|
|
27
|
-
`}`;
|
|
28
|
-
const CounterContainer = styled__default.default(Text.Text).withConfig({ displayName: "vui--CounterContainer", componentId: "vui--chq9kr" }) `display:inline-flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px;padding:2px 4px;min-width:20px;height:20px;margin-left:8px;${({ $active, $colourPalette }) => $active &&
|
|
29
|
-
`
|
|
30
|
-
background-color: ${$colourPalette.base};
|
|
31
|
-
|
|
32
|
-
& > ${CounterText} {
|
|
33
|
-
color: #fff;
|
|
34
|
-
}
|
|
35
|
-
`}`;
|
|
36
|
-
const IconStyling = {
|
|
37
|
-
style: {
|
|
38
|
-
marginLeft: sizes.sizes.xs,
|
|
39
|
-
padding: sizes.sizes.xs,
|
|
40
|
-
height: sizes.sizes.base,
|
|
41
|
-
width: sizes.sizes.base,
|
|
42
|
-
},
|
|
43
|
-
};
|
|
44
|
-
const CustomIconWrapper = styled__default.default.div.withConfig({ displayName: "vui--CustomIconWrapper", componentId: "vui--yu7dwm" }) `display:flex;align-items:center;margin-right:${sizes.sizes.sm};svg{height:${sizes.sizes.base};width:${sizes.sizes.base};}`;
|
|
45
|
-
|
|
46
|
-
exports.Text = Text.Text;
|
|
47
|
-
exports.Container = Container;
|
|
48
|
-
exports.Contour = Contour;
|
|
49
|
-
exports.CounterContainer = CounterContainer;
|
|
50
|
-
exports.CounterText = CounterText;
|
|
51
|
-
exports.CustomIconWrapper = CustomIconWrapper;
|
|
52
|
-
exports.IconStyling = IconStyling;
|
|
53
|
-
//# sourceMappingURL=styled.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.cjs","sources":["../../../src/components/View/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { CSSProperties } from 'react';\nimport { ColourPalette, colors } from '../../theme/modules/colors';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\n\nimport { sizes } from '../../theme/modules/sizes';\n\ntype RequiredPalette = { $colourPalette: ColourPalette };\nexport type ContourProps = { $active?: boolean; $customTextColour?: string } & RequiredPalette;\nexport type CounterProps = { $active?: boolean; $customTextColour?: string } & RequiredPalette;\n\nconst Container = styled(BaseContainer)`\n padding: 14px 24px;\n`;\n\nconst CounterText = styled(Text)`\n line-height: 1;\n`;\n\nconst Contour = styled(BaseContainer)<ContourProps>`\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 40px;\n border-radius: 4px;\n padding: 0 12px;\n border: 1px solid transparent;\n cursor: pointer;\n\n ${({ $colourPalette, $customTextColour }) => `\n &:hover {\n border: 1px solid ${$colourPalette.base};\n background-color: ${$colourPalette.lightest};\n }\n\n span { \n color: ${$customTextColour ?? colors.neutral.ink.dark}; \n } \n `}\n\n ${({ $active, $colourPalette }) =>\n $active &&\n `\n background-color: ${$colourPalette.lightest};\n `}\n`;\n\nconst CounterContainer = styled(Text)<CounterProps>`\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n padding: 2px 4px;\n min-width: 20px;\n height: 20px;\n margin-left: 8px;\n\n ${({ $active, $colourPalette }) =>\n $active &&\n `\n background-color: ${$colourPalette.base};\n\n & > ${CounterText} {\n color: #fff;\n }\n `}\n`;\n\nconst IconStyling = {\n style: {\n marginLeft: sizes.xs,\n padding: sizes.xs,\n height: sizes.base,\n width: sizes.base,\n } as CSSProperties,\n};\n\nexport const CustomIconWrapper = styled.div`\n display: flex;\n align-items: center;\n margin-right: ${sizes.sm};\n\n svg {\n height: ${sizes.base};\n width: ${sizes.base};\n }\n`;\n\nexport { Container, Contour, CounterContainer, CounterText, IconStyling, Text };\n"],"names":["styled","BaseContainer","Text","colors","sizes"],"mappings":";;;;;;;;;;;;AAcA,MAAM,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC;AAIvC,MAAM,WAAW,GAAGD,uBAAM,CAACE,SAAI,CAAC;AAIhC,MAAM,OAAO,GAAGF,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8JAAA,EAWjC,CAAC,EAAE,cAAc,EAAE,iBAAiB,EAAE,KAAK;;AAErB,wBAAA,EAAA,cAAc,CAAC,IAAI,CAAA;AACnB,wBAAA,EAAA,cAAc,CAAC,QAAQ,CAAA;;;;eAIlC,iBAAiB,KAAA,IAAA,IAAjB,iBAAiB,KAAA,MAAA,GAAjB,iBAAiB,GAAIE,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA;;GAExD,CAAA,CAAA,EAEC,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,KAC5B,OAAO;AACP,IAAA;AACoB,sBAAA,EAAA,cAAc,CAAC,QAAQ,CAAA;AAC5C,EAAA,CAAA,CAAA;AAGH,MAAM,gBAAgB,GAAGH,uBAAM,CAACE,SAAI,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,8JAAA,EAWjC,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,KAC5B,OAAO;AACP,IAAA;AACoB,sBAAA,EAAA,cAAc,CAAC,IAAI,CAAA;;UAEjC,WAAW,CAAA;;;AAGlB,EAAA,CAAA,CAAA;AAGH,MAAM,WAAW,GAAG;AAClB,IAAA,KAAK,EAAE;QACL,UAAU,EAAEE,WAAK,CAAC,EAAE;QACpB,OAAO,EAAEA,WAAK,CAAC,EAAE;QACjB,MAAM,EAAEA,WAAK,CAAC,IAAI;QAClB,KAAK,EAAEA,WAAK,CAAC,IAAI;AACD,KAAA;;MAGP,iBAAiB,GAAGJ,uBAAM,CAAC,GAAG,mIAGzBI,WAAK,CAAC,EAAE,CAAA,YAAA,EAGZA,WAAK,CAAC,IAAI,CAAA,OAAA,EACXA,WAAK,CAAC,IAAI;;;;;;;;;;"}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { CSSProperties } from 'react';
|
|
2
|
-
import { ColourPalette } from '../../theme/modules/colors';
|
|
3
|
-
import { Text } from '../Text';
|
|
4
|
-
type RequiredPalette = {
|
|
5
|
-
$colourPalette: ColourPalette;
|
|
6
|
-
};
|
|
7
|
-
export type ContourProps = {
|
|
8
|
-
$active?: boolean;
|
|
9
|
-
$customTextColour?: string;
|
|
10
|
-
} & RequiredPalette;
|
|
11
|
-
export type CounterProps = {
|
|
12
|
-
$active?: boolean;
|
|
13
|
-
$customTextColour?: string;
|
|
14
|
-
} & RequiredPalette;
|
|
15
|
-
declare const Container: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
16
|
-
declare const CounterText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
|
|
17
|
-
as?: import("../Text").ValidTextTag | undefined;
|
|
18
|
-
muted?: boolean | undefined;
|
|
19
|
-
variant?: "body" | "button" | "link" | "placeholder" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
|
|
20
|
-
} & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
|
|
21
|
-
declare const Contour: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
|
|
22
|
-
$active?: boolean | undefined;
|
|
23
|
-
$customTextColour?: string | undefined;
|
|
24
|
-
} & RequiredPalette, never>;
|
|
25
|
-
declare const CounterContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
|
|
26
|
-
as?: import("../Text").ValidTextTag | undefined;
|
|
27
|
-
muted?: boolean | undefined;
|
|
28
|
-
variant?: "body" | "button" | "link" | "placeholder" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
|
|
29
|
-
} & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {
|
|
30
|
-
$active?: boolean | undefined;
|
|
31
|
-
$customTextColour?: string | undefined;
|
|
32
|
-
} & RequiredPalette, never>;
|
|
33
|
-
declare const IconStyling: {
|
|
34
|
-
style: CSSProperties;
|
|
35
|
-
};
|
|
36
|
-
export declare const CustomIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
37
|
-
export { Container, Contour, CounterContainer, CounterText, IconStyling, Text };
|