@remember-web/primitive 0.2.7 → 0.2.8
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/src/Badge/style.cjs.js +1 -1
- package/dist/src/Badge/style.cjs.js.map +1 -1
- package/dist/src/Badge/style.d.ts.map +1 -1
- package/dist/src/Badge/style.esm.js +1 -1
- package/dist/src/Badge/style.esm.js.map +1 -1
- package/dist/src/Buttons/Button/const.cjs.js +4 -4
- package/dist/src/Buttons/Button/const.cjs.js.map +1 -1
- package/dist/src/Buttons/Button/const.d.ts +4 -4
- package/dist/src/Buttons/Button/const.esm.js +4 -4
- package/dist/src/Buttons/Button/const.esm.js.map +1 -1
- package/dist/src/Control/BaseToggle/index.cjs.js +1 -1
- package/dist/src/Control/BaseToggle/index.cjs.js.map +1 -1
- package/dist/src/Control/BaseToggle/index.esm.js +1 -1
- package/dist/src/Control/BaseToggle/index.esm.js.map +1 -1
- package/dist/src/Floating/DropdownMenu/styles.cjs.js +3 -3
- package/dist/src/Floating/DropdownMenu/styles.cjs.js.map +1 -1
- package/dist/src/Floating/DropdownMenu/styles.d.ts +1 -1
- package/dist/src/Floating/DropdownMenu/styles.d.ts.map +1 -1
- package/dist/src/Floating/DropdownMenu/styles.esm.js +3 -3
- package/dist/src/Floating/DropdownMenu/styles.esm.js.map +1 -1
- package/dist/src/Floating/Tooltip/styles.cjs.js +2 -2
- package/dist/src/Floating/Tooltip/styles.cjs.js.map +1 -1
- package/dist/src/Floating/Tooltip/styles.d.ts +1 -1
- package/dist/src/Floating/Tooltip/styles.d.ts.map +1 -1
- package/dist/src/Floating/Tooltip/styles.esm.js +2 -2
- package/dist/src/Floating/Tooltip/styles.esm.js.map +1 -1
- package/dist/src/Inputs/Select/NativeSelect/styles.cjs.js +1 -1
- package/dist/src/Inputs/Select/NativeSelect/styles.cjs.js.map +1 -1
- package/dist/src/Inputs/Select/NativeSelect/styles.esm.js +1 -1
- package/dist/src/Inputs/Select/NativeSelect/styles.esm.js.map +1 -1
- package/dist/src/Inputs/Select/styles.cjs.js +2 -2
- package/dist/src/Inputs/Select/styles.cjs.js.map +1 -1
- package/dist/src/Inputs/Select/styles.esm.js +2 -2
- package/dist/src/Inputs/Select/styles.esm.js.map +1 -1
- package/dist/src/Inputs/TextInput/styles.cjs.js +4 -4
- package/dist/src/Inputs/TextInput/styles.cjs.js.map +1 -1
- package/dist/src/Inputs/TextInput/styles.esm.js +4 -4
- package/dist/src/Inputs/TextInput/styles.esm.js.map +1 -1
- package/dist/src/Logos/RememberServiceLogo/index.cjs.js +11 -5
- package/dist/src/Logos/RememberServiceLogo/index.cjs.js.map +1 -1
- package/dist/src/Logos/RememberServiceLogo/index.d.ts.map +1 -1
- package/dist/src/Logos/RememberServiceLogo/index.esm.js +10 -4
- package/dist/src/Logos/RememberServiceLogo/index.esm.js.map +1 -1
- package/dist/src/Logos/RememberServiceLogo/style.cjs.js +2 -2
- package/dist/src/Logos/RememberServiceLogo/style.cjs.js.map +1 -1
- package/dist/src/Logos/RememberServiceLogo/style.d.ts.map +1 -1
- package/dist/src/Logos/RememberServiceLogo/style.esm.js +3 -3
- package/dist/src/Logos/RememberServiceLogo/style.esm.js.map +1 -1
- package/dist/src/Modals/Dialog/styles.cjs.js +2 -2
- package/dist/src/Modals/Dialog/styles.cjs.js.map +1 -1
- package/dist/src/Modals/Dialog/styles.esm.js +2 -2
- package/dist/src/Modals/Dialog/styles.esm.js.map +1 -1
- package/dist/src/Paginations/styles.cjs.js +3 -3
- package/dist/src/Paginations/styles.cjs.js.map +1 -1
- package/dist/src/Paginations/styles.esm.js +3 -3
- package/dist/src/Paginations/styles.esm.js.map +1 -1
- package/package.json +3 -3
- package/src/Badge/style.tsx +1 -2
- package/src/Buttons/Button/const.ts +4 -4
- package/src/Common/Typography/Typography.stories.tsx +7 -7
- package/src/Control/BaseToggle/index.tsx +1 -1
- package/src/Floating/DropdownMenu/styles.tsx +12 -7
- package/src/Floating/Tooltip/styles.ts +9 -13
- package/src/Inputs/Select/NativeSelect/styles.ts +1 -1
- package/src/Inputs/Select/styles.ts +2 -2
- package/src/Inputs/TextInput/styles.ts +4 -4
- package/src/Logos/RememberServiceLogo/index.tsx +6 -4
- package/src/Logos/RememberServiceLogo/style.ts +1 -7
- package/src/Modals/Dialog/styles.ts +2 -2
- package/src/Paginations/styles.ts +3 -3
|
@@ -14,7 +14,7 @@ var _templateObject, _templateObject2, _templateObject3;
|
|
|
14
14
|
/**
|
|
15
15
|
* pseudo로 사용시 data-badge-value attribue가 필요합니다.
|
|
16
16
|
*/
|
|
17
|
-
var badgeCss = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n ", "\n
|
|
17
|
+
var badgeCss = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n ", "\n display: inline-block;\n box-sizing: border-box;\n line-height: 16px;\n min-height: 8px;\n background: ", ";\n color: ", ";\n border-radius: 8px;\n padding: 1px 4px 0 4px;\n"])), mixin.getTypographyStyles('SubTitle2'), mixin.secondary100, mixin.contents999);
|
|
18
18
|
|
|
19
19
|
/**
|
|
20
20
|
* @param pseudo - default: 'after'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.cjs.js","sources":["../../../src/Badge/style.tsx"],"sourcesContent":["import {\n contents999,\n getTypographyStyles,\n secondary100,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\n/**\n * pseudo로 사용시 data-badge-value attribue가 필요합니다.\n */\nexport const badgeCss = css`\n ${getTypographyStyles('
|
|
1
|
+
{"version":3,"file":"style.cjs.js","sources":["../../../src/Badge/style.tsx"],"sourcesContent":["import {\n contents999,\n getTypographyStyles,\n secondary100,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\n/**\n * pseudo로 사용시 data-badge-value attribue가 필요합니다.\n */\nexport const badgeCss = css`\n ${getTypographyStyles('SubTitle2')}\n display: inline-block;\n box-sizing: border-box;\n line-height: 16px;\n min-height: 8px;\n background: ${secondary100};\n color: ${contents999};\n border-radius: 8px;\n padding: 1px 4px 0 4px;\n`;\n\n/**\n * @param pseudo - default: 'after'\n * @param top - default: 0\n * @param right - default: 0\n */\nexport const getBadgePseudoCss = (\n pseudo: 'after' | 'before' = 'after',\n { top = 0, right = 0 } = {}\n) => css`\n &[data-badge-value]::${pseudo} {\n ${badgeCss};\n content: attr(data-badge-value);\n position: absolute;\n top: ${top};\n right: ${right};\n transform: translate(50%, -50%);\n }\n`;\n\nexport const StyledBadge = styled.span`\n ${badgeCss};\n`;\n"],"names":["badgeCss","css","_templateObject","_taggedTemplateLiteral","getTypographyStyles","secondary100","contents999","getBadgePseudoCss","pseudo","arguments","length","undefined","_ref","_ref$top","top","_ref$right","right","_templateObject2","StyledBadge","styled","span","_templateObject3"],"mappings":";;;;;;;;;;;;;AAOA;AACA;AACA;IACaA,QAAQ,GAAGC,UAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,uCAAA,CACxBC,CAAAA,KAAAA,EAAAA,iHAAAA,EAAAA,cAAAA,EAAAA,uDAAAA,CAAAA,CAAAA,CAAAA,EAAAA,yBAAmB,CAAC,WAAW,CAAC,EAKnBC,kBAAY,EACjBC,iBAAW,EAGrB;;AAED;AACA;AACA;AACA;AACA;AACaC,IAAAA,iBAAiB,GAAG,SAApBA,iBAAiBA,GAAA;AAAA,EAAA,IAC5BC,MAA0B,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,OAAO,CAAA;AAAA,EAAA,IAAAG,IAAA,GAAAH,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GACX,EAAE;IAAAI,QAAA,GAAAD,IAAA,CAAzBE,GAAG;AAAHA,IAAAA,GAAG,GAAAD,QAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,QAAA;IAAAE,UAAA,GAAAH,IAAA,CAAEI,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,UAAA,CAAA;AAAA,EAAA,OACjBd,UAAG,CAAAgB,gBAAA,KAAAA,gBAAA,GAAAd,uCAAA,CACiBK,CAAAA,2BAAAA,EAAAA,UAAAA,EAAAA,6EAAAA,EAAAA,gBAAAA,EAAAA,gDAAAA,CAAAA,CAAAA,CAAAA,EAAAA,MAAM,EACzBR,QAAQ,EAGHc,GAAG,EACDE,KAAK,CAAA,CAAA;AAAA,EAGjB;AAEYE,IAAAA,WAAW,GAAGC,uBAAM,CAACC,IAAI,CAAAC,gBAAA,KAAAA,gBAAA,GAAAlB,uCAAA,CAAA,CAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA,EAClCH,QAAQ;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/Badge/style.tsx"],"names":[],"mappings":";AAOA;;GAEG;AACH,eAAO,MAAM,QAAQ,
|
|
1
|
+
{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/Badge/style.tsx"],"names":[],"mappings":";AAOA;;GAEG;AACH,eAAO,MAAM,QAAQ,6CAUpB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,YACpB,OAAO,GAAG,QAAQ;;;iDAW3B,CAAC;AAEF,eAAO,MAAM,WAAW,kNAEvB,CAAC"}
|
|
@@ -7,7 +7,7 @@ var _templateObject, _templateObject2, _templateObject3;
|
|
|
7
7
|
/**
|
|
8
8
|
* pseudo로 사용시 data-badge-value attribue가 필요합니다.
|
|
9
9
|
*/
|
|
10
|
-
var badgeCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n
|
|
10
|
+
var badgeCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n display: inline-block;\n box-sizing: border-box;\n line-height: 16px;\n min-height: 8px;\n background: ", ";\n color: ", ";\n border-radius: 8px;\n padding: 1px 4px 0 4px;\n"])), getTypographyStyles('SubTitle2'), secondary100, contents999);
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
13
|
* @param pseudo - default: 'after'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.esm.js","sources":["../../../src/Badge/style.tsx"],"sourcesContent":["import {\n contents999,\n getTypographyStyles,\n secondary100,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\n/**\n * pseudo로 사용시 data-badge-value attribue가 필요합니다.\n */\nexport const badgeCss = css`\n ${getTypographyStyles('
|
|
1
|
+
{"version":3,"file":"style.esm.js","sources":["../../../src/Badge/style.tsx"],"sourcesContent":["import {\n contents999,\n getTypographyStyles,\n secondary100,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\n/**\n * pseudo로 사용시 data-badge-value attribue가 필요합니다.\n */\nexport const badgeCss = css`\n ${getTypographyStyles('SubTitle2')}\n display: inline-block;\n box-sizing: border-box;\n line-height: 16px;\n min-height: 8px;\n background: ${secondary100};\n color: ${contents999};\n border-radius: 8px;\n padding: 1px 4px 0 4px;\n`;\n\n/**\n * @param pseudo - default: 'after'\n * @param top - default: 0\n * @param right - default: 0\n */\nexport const getBadgePseudoCss = (\n pseudo: 'after' | 'before' = 'after',\n { top = 0, right = 0 } = {}\n) => css`\n &[data-badge-value]::${pseudo} {\n ${badgeCss};\n content: attr(data-badge-value);\n position: absolute;\n top: ${top};\n right: ${right};\n transform: translate(50%, -50%);\n }\n`;\n\nexport const StyledBadge = styled.span`\n ${badgeCss};\n`;\n"],"names":["badgeCss","css","_templateObject","_taggedTemplateLiteral","getTypographyStyles","secondary100","contents999","getBadgePseudoCss","pseudo","arguments","length","undefined","_ref","_ref$top","top","_ref$right","right","_templateObject2","StyledBadge","styled","span","_templateObject3"],"mappings":";;;;;;AAOA;AACA;AACA;IACaA,QAAQ,GAAGC,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,CACxBC,CAAAA,KAAAA,EAAAA,iHAAAA,EAAAA,cAAAA,EAAAA,uDAAAA,CAAAA,CAAAA,CAAAA,EAAAA,mBAAmB,CAAC,WAAW,CAAC,EAKnBC,YAAY,EACjBC,WAAW,EAGrB;;AAED;AACA;AACA;AACA;AACA;AACaC,IAAAA,iBAAiB,GAAG,SAApBA,iBAAiBA,GAAA;AAAA,EAAA,IAC5BC,MAA0B,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,OAAO,CAAA;AAAA,EAAA,IAAAG,IAAA,GAAAH,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GACX,EAAE;IAAAI,QAAA,GAAAD,IAAA,CAAzBE,GAAG;AAAHA,IAAAA,GAAG,GAAAD,QAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,QAAA;IAAAE,UAAA,GAAAH,IAAA,CAAEI,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,UAAA,CAAA;AAAA,EAAA,OACjBd,GAAG,CAAAgB,gBAAA,KAAAA,gBAAA,GAAAd,sBAAA,CACiBK,CAAAA,2BAAAA,EAAAA,UAAAA,EAAAA,6EAAAA,EAAAA,gBAAAA,EAAAA,gDAAAA,CAAAA,CAAAA,CAAAA,EAAAA,MAAM,EACzBR,QAAQ,EAGHc,GAAG,EACDE,KAAK,CAAA,CAAA;AAAA,EAGjB;AAEYE,IAAAA,WAAW,GAAGC,MAAM,CAACC,IAAI,CAAAC,gBAAA,KAAAA,gBAAA,GAAAlB,sBAAA,CAAA,CAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA,EAClCH,QAAQ;;;;"}
|
|
@@ -4,25 +4,25 @@ var mixin = require('@remember-web/mixin');
|
|
|
4
4
|
|
|
5
5
|
var BUTTON_SIZES = {
|
|
6
6
|
small: {
|
|
7
|
-
typography: '
|
|
7
|
+
typography: 'Caption1',
|
|
8
8
|
height: '32px',
|
|
9
9
|
minWidth: '68px',
|
|
10
10
|
padding: '0 16px'
|
|
11
11
|
},
|
|
12
12
|
medium: {
|
|
13
|
-
typography: '
|
|
13
|
+
typography: 'UIBody3',
|
|
14
14
|
height: '36px',
|
|
15
15
|
minWidth: '78px',
|
|
16
16
|
padding: '0 20px'
|
|
17
17
|
},
|
|
18
18
|
large: {
|
|
19
|
-
typography: '
|
|
19
|
+
typography: 'UIBody2',
|
|
20
20
|
height: '44px',
|
|
21
21
|
minWidth: '108px',
|
|
22
22
|
padding: '0 20px'
|
|
23
23
|
},
|
|
24
24
|
xLarge: {
|
|
25
|
-
typography: '
|
|
25
|
+
typography: 'UIBody2',
|
|
26
26
|
height: '52px',
|
|
27
27
|
minWidth: '116px',
|
|
28
28
|
padding: '0 24px'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.cjs.js","sources":["../../../../src/Buttons/Button/const.ts"],"sourcesContent":["import { contents000, contents300, contents999 } from '@remember-web/mixin';\n\nimport type { SpinnerSize } from '@/Common/Spinner/types';\n\nimport type { ButtonSize, ButtonVariant } from './types';\n\nexport const BUTTON_SIZES = {\n small: {\n typography: '
|
|
1
|
+
{"version":3,"file":"const.cjs.js","sources":["../../../../src/Buttons/Button/const.ts"],"sourcesContent":["import { contents000, contents300, contents999 } from '@remember-web/mixin';\n\nimport type { SpinnerSize } from '@/Common/Spinner/types';\n\nimport type { ButtonSize, ButtonVariant } from './types';\n\nexport const BUTTON_SIZES = {\n small: {\n typography: 'Caption1',\n height: '32px',\n minWidth: '68px',\n padding: '0 16px',\n },\n medium: {\n typography: 'UIBody3',\n height: '36px',\n minWidth: '78px',\n padding: '0 20px',\n },\n large: {\n typography: 'UIBody2',\n height: '44px',\n minWidth: '108px',\n padding: '0 20px',\n },\n xLarge: {\n typography: 'UIBody2',\n height: '52px',\n minWidth: '116px',\n padding: '0 24px',\n },\n} as const satisfies Record<ButtonSize, unknown>;\n\nexport const BUTTON_COLORS = {\n primary: {\n backgroundColor: contents000,\n color: contents999,\n },\n outline: {\n backgroundColor: 'transparent',\n color: contents000,\n borderColor: contents300,\n },\n} as const satisfies Record<ButtonVariant, unknown>;\n\nexport const SPINNER_SIZE_MAP = {\n small: 'small',\n medium: 'small',\n large: 'medium',\n xLarge: 'medium',\n} as const satisfies Record<ButtonSize, SpinnerSize>;\n\nexport const ICON_GAP_MAP = {\n small: '4px',\n medium: '4px',\n large: '8px',\n xLarge: '8px',\n} as const satisfies Record<ButtonSize, string>;\n"],"names":["BUTTON_SIZES","small","typography","height","minWidth","padding","medium","large","xLarge","BUTTON_COLORS","primary","backgroundColor","contents000","color","contents999","outline","borderColor","contents300","SPINNER_SIZE_MAP","ICON_GAP_MAP"],"mappings":";;;;AAMO,IAAMA,YAAY,GAAG;AAC1BC,EAAAA,KAAK,EAAE;AACLC,IAAAA,UAAU,EAAE,UAAU;AACtBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,MAAM;AAChBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDC,EAAAA,MAAM,EAAE;AACNJ,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,MAAM;AAChBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDE,EAAAA,KAAK,EAAE;AACLL,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,OAAO;AACjBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDG,EAAAA,MAAM,EAAE;AACNN,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,OAAO;AACjBC,IAAAA,OAAO,EAAE,QAAA;AACX,GAAA;AACF,EAAgD;AAEzC,IAAMI,aAAa,GAAG;AAC3BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,eAAe,EAAEC,iBAAW;AAC5BC,IAAAA,KAAK,EAAEC,iBAAAA;GACR;AACDC,EAAAA,OAAO,EAAE;AACPJ,IAAAA,eAAe,EAAE,aAAa;AAC9BE,IAAAA,KAAK,EAAED,iBAAW;AAClBI,IAAAA,WAAW,EAAEC,iBAAAA;AACf,GAAA;AACF,EAAmD;AAE5C,IAAMC,gBAAgB,GAAG;AAC9BjB,EAAAA,KAAK,EAAE,OAAO;AACdK,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,QAAQ;AACfC,EAAAA,MAAM,EAAE,QAAA;AACV,EAAoD;AAE7C,IAAMW,YAAY,GAAG;AAC1BlB,EAAAA,KAAK,EAAE,KAAK;AACZK,EAAAA,MAAM,EAAE,KAAK;AACbC,EAAAA,KAAK,EAAE,KAAK;AACZC,EAAAA,MAAM,EAAE,KAAA;AACV;;;;;;;"}
|
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
export declare const BUTTON_SIZES: {
|
|
2
2
|
readonly small: {
|
|
3
|
-
readonly typography: "
|
|
3
|
+
readonly typography: "Caption1";
|
|
4
4
|
readonly height: "32px";
|
|
5
5
|
readonly minWidth: "68px";
|
|
6
6
|
readonly padding: "0 16px";
|
|
7
7
|
};
|
|
8
8
|
readonly medium: {
|
|
9
|
-
readonly typography: "
|
|
9
|
+
readonly typography: "UIBody3";
|
|
10
10
|
readonly height: "36px";
|
|
11
11
|
readonly minWidth: "78px";
|
|
12
12
|
readonly padding: "0 20px";
|
|
13
13
|
};
|
|
14
14
|
readonly large: {
|
|
15
|
-
readonly typography: "
|
|
15
|
+
readonly typography: "UIBody2";
|
|
16
16
|
readonly height: "44px";
|
|
17
17
|
readonly minWidth: "108px";
|
|
18
18
|
readonly padding: "0 20px";
|
|
19
19
|
};
|
|
20
20
|
readonly xLarge: {
|
|
21
|
-
readonly typography: "
|
|
21
|
+
readonly typography: "UIBody2";
|
|
22
22
|
readonly height: "52px";
|
|
23
23
|
readonly minWidth: "116px";
|
|
24
24
|
readonly padding: "0 24px";
|
|
@@ -2,25 +2,25 @@ import { contents000, contents999, contents300 } from '@remember-web/mixin';
|
|
|
2
2
|
|
|
3
3
|
var BUTTON_SIZES = {
|
|
4
4
|
small: {
|
|
5
|
-
typography: '
|
|
5
|
+
typography: 'Caption1',
|
|
6
6
|
height: '32px',
|
|
7
7
|
minWidth: '68px',
|
|
8
8
|
padding: '0 16px'
|
|
9
9
|
},
|
|
10
10
|
medium: {
|
|
11
|
-
typography: '
|
|
11
|
+
typography: 'UIBody3',
|
|
12
12
|
height: '36px',
|
|
13
13
|
minWidth: '78px',
|
|
14
14
|
padding: '0 20px'
|
|
15
15
|
},
|
|
16
16
|
large: {
|
|
17
|
-
typography: '
|
|
17
|
+
typography: 'UIBody2',
|
|
18
18
|
height: '44px',
|
|
19
19
|
minWidth: '108px',
|
|
20
20
|
padding: '0 20px'
|
|
21
21
|
},
|
|
22
22
|
xLarge: {
|
|
23
|
-
typography: '
|
|
23
|
+
typography: 'UIBody2',
|
|
24
24
|
height: '52px',
|
|
25
25
|
minWidth: '116px',
|
|
26
26
|
padding: '0 24px'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.esm.js","sources":["../../../../src/Buttons/Button/const.ts"],"sourcesContent":["import { contents000, contents300, contents999 } from '@remember-web/mixin';\n\nimport type { SpinnerSize } from '@/Common/Spinner/types';\n\nimport type { ButtonSize, ButtonVariant } from './types';\n\nexport const BUTTON_SIZES = {\n small: {\n typography: '
|
|
1
|
+
{"version":3,"file":"const.esm.js","sources":["../../../../src/Buttons/Button/const.ts"],"sourcesContent":["import { contents000, contents300, contents999 } from '@remember-web/mixin';\n\nimport type { SpinnerSize } from '@/Common/Spinner/types';\n\nimport type { ButtonSize, ButtonVariant } from './types';\n\nexport const BUTTON_SIZES = {\n small: {\n typography: 'Caption1',\n height: '32px',\n minWidth: '68px',\n padding: '0 16px',\n },\n medium: {\n typography: 'UIBody3',\n height: '36px',\n minWidth: '78px',\n padding: '0 20px',\n },\n large: {\n typography: 'UIBody2',\n height: '44px',\n minWidth: '108px',\n padding: '0 20px',\n },\n xLarge: {\n typography: 'UIBody2',\n height: '52px',\n minWidth: '116px',\n padding: '0 24px',\n },\n} as const satisfies Record<ButtonSize, unknown>;\n\nexport const BUTTON_COLORS = {\n primary: {\n backgroundColor: contents000,\n color: contents999,\n },\n outline: {\n backgroundColor: 'transparent',\n color: contents000,\n borderColor: contents300,\n },\n} as const satisfies Record<ButtonVariant, unknown>;\n\nexport const SPINNER_SIZE_MAP = {\n small: 'small',\n medium: 'small',\n large: 'medium',\n xLarge: 'medium',\n} as const satisfies Record<ButtonSize, SpinnerSize>;\n\nexport const ICON_GAP_MAP = {\n small: '4px',\n medium: '4px',\n large: '8px',\n xLarge: '8px',\n} as const satisfies Record<ButtonSize, string>;\n"],"names":["BUTTON_SIZES","small","typography","height","minWidth","padding","medium","large","xLarge","BUTTON_COLORS","primary","backgroundColor","contents000","color","contents999","outline","borderColor","contents300","SPINNER_SIZE_MAP","ICON_GAP_MAP"],"mappings":";;AAMO,IAAMA,YAAY,GAAG;AAC1BC,EAAAA,KAAK,EAAE;AACLC,IAAAA,UAAU,EAAE,UAAU;AACtBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,MAAM;AAChBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDC,EAAAA,MAAM,EAAE;AACNJ,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,MAAM;AAChBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDE,EAAAA,KAAK,EAAE;AACLL,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,OAAO;AACjBC,IAAAA,OAAO,EAAE,QAAA;GACV;AACDG,EAAAA,MAAM,EAAE;AACNN,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,MAAM,EAAE,MAAM;AACdC,IAAAA,QAAQ,EAAE,OAAO;AACjBC,IAAAA,OAAO,EAAE,QAAA;AACX,GAAA;AACF,EAAgD;AAEzC,IAAMI,aAAa,GAAG;AAC3BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,eAAe,EAAEC,WAAW;AAC5BC,IAAAA,KAAK,EAAEC,WAAAA;GACR;AACDC,EAAAA,OAAO,EAAE;AACPJ,IAAAA,eAAe,EAAE,aAAa;AAC9BE,IAAAA,KAAK,EAAED,WAAW;AAClBI,IAAAA,WAAW,EAAEC,WAAAA;AACf,GAAA;AACF,EAAmD;AAE5C,IAAMC,gBAAgB,GAAG;AAC9BjB,EAAAA,KAAK,EAAE,OAAO;AACdK,EAAAA,MAAM,EAAE,OAAO;AACfC,EAAAA,KAAK,EAAE,QAAQ;AACfC,EAAAA,MAAM,EAAE,QAAA;AACV,EAAoD;AAE7C,IAAMW,YAAY,GAAG;AAC1BlB,EAAAA,KAAK,EAAE,KAAK;AACZK,EAAAA,MAAM,EAAE,KAAK;AACbC,EAAAA,KAAK,EAAE,KAAK;AACZC,EAAAA,MAAM,EAAE,KAAA;AACV;;;;"}
|
|
@@ -43,7 +43,7 @@ var _BaseToggle = function _BaseToggle(_ref, ref) {
|
|
|
43
43
|
props = _objectWithoutProperties__default.default(_ref, _excluded);
|
|
44
44
|
var isStringLabel = typeof _label === 'string';
|
|
45
45
|
var label = isStringLabel ? /*#__PURE__*/jsxRuntime.jsx(index$1.Typography, {
|
|
46
|
-
variant: "
|
|
46
|
+
variant: "UIBody3",
|
|
47
47
|
children: _label
|
|
48
48
|
}) : _label;
|
|
49
49
|
var refCallback = react.useCallback(function (input) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useCallback } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n HTMLInputElement,\n BaseToggleProps\n> = (\n {\n variant,\n label: _label,\n labelPosition = 'right',\n className,\n inputClassName,\n size = 'medium',\n labelGap = size === 'small' ? 2 : 4,\n type = 'checkbox',\n onToggle,\n onChange,\n indeterminate,\n ...props\n },\n ref\n) => {\n const isStringLabel = typeof _label === 'string';\n const label = isStringLabel ? (\n <Typography variant=\"
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useCallback } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n HTMLInputElement,\n BaseToggleProps\n> = (\n {\n variant,\n label: _label,\n labelPosition = 'right',\n className,\n inputClassName,\n size = 'medium',\n labelGap = size === 'small' ? 2 : 4,\n type = 'checkbox',\n onToggle,\n onChange,\n indeterminate,\n ...props\n },\n ref\n) => {\n const isStringLabel = typeof _label === 'string';\n const label = isStringLabel ? (\n <Typography variant=\"UIBody3\">{_label}</Typography>\n ) : (\n _label\n );\n\n const refCallback = useCallback(\n (input: HTMLInputElement | null) => {\n if (ref) {\n if (typeof ref === 'function') {\n ref(input);\n } else {\n ref.current = input;\n }\n }\n\n if (input) {\n input.indeterminate = indeterminate ?? false;\n }\n },\n [indeterminate, ref]\n );\n\n return (\n <ToggleRoot className={className} $gap={labelGap}>\n <ToggleInput\n ref={refCallback}\n className={inputClassName}\n type={type}\n {...props}\n onChange={(e) => {\n onChange?.(e);\n onToggle?.(e.target.checked);\n }}\n />\n {labelPosition === 'left' && label}\n <ToggleIcon\n className=\"onIcon\"\n size={size}\n status=\"on\"\n variant={variant}\n />\n {type === 'checkbox' && (\n <ToggleIcon\n className=\"indeterminateIcon\"\n size={size}\n status=\"indeterminate\"\n variant={variant}\n />\n )}\n <ToggleIcon\n className=\"offIcon\"\n size={size}\n status=\"off\"\n variant={variant}\n />\n {labelPosition === 'right' && label}\n </ToggleRoot>\n );\n};\n\nexport const BaseToggle = forwardRef(_BaseToggle);\n"],"names":["labelPosition","size","type","props","variant","children","className","$gap","ref","onChange","status"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAWb;AAmBK;;;AAZDA;;;;AAGAC;;;;AAEAC;;;;AAIGC;AAIL;AACA;AACcC;AAAiBC;;AAK/B;AAEI;AACE;;AAEA;;AAEA;AACF;AAEA;;AAEA;AACF;;AAKYC;AAAsBC;AAAeF;AAE7CG;AACAF;AACAJ;AAAW;AAEXO;AACEA;;AAEF;;AAIAH;AACAL;AACAS;AACAN;;AAIEE;AACAL;AACAS;AACAN;AAAiB;AAInBE;AACAL;AACAS;AACAN;AAAiB;AAEgB;AAGzC;;;"}
|
|
@@ -36,7 +36,7 @@ var _BaseToggle = function _BaseToggle(_ref, ref) {
|
|
|
36
36
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
37
37
|
var isStringLabel = typeof _label === 'string';
|
|
38
38
|
var label = isStringLabel ? /*#__PURE__*/jsx(Typography, {
|
|
39
|
-
variant: "
|
|
39
|
+
variant: "UIBody3",
|
|
40
40
|
children: _label
|
|
41
41
|
}) : _label;
|
|
42
42
|
var refCallback = useCallback(function (input) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useCallback } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n HTMLInputElement,\n BaseToggleProps\n> = (\n {\n variant,\n label: _label,\n labelPosition = 'right',\n className,\n inputClassName,\n size = 'medium',\n labelGap = size === 'small' ? 2 : 4,\n type = 'checkbox',\n onToggle,\n onChange,\n indeterminate,\n ...props\n },\n ref\n) => {\n const isStringLabel = typeof _label === 'string';\n const label = isStringLabel ? (\n <Typography variant=\"
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useCallback } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n HTMLInputElement,\n BaseToggleProps\n> = (\n {\n variant,\n label: _label,\n labelPosition = 'right',\n className,\n inputClassName,\n size = 'medium',\n labelGap = size === 'small' ? 2 : 4,\n type = 'checkbox',\n onToggle,\n onChange,\n indeterminate,\n ...props\n },\n ref\n) => {\n const isStringLabel = typeof _label === 'string';\n const label = isStringLabel ? (\n <Typography variant=\"UIBody3\">{_label}</Typography>\n ) : (\n _label\n );\n\n const refCallback = useCallback(\n (input: HTMLInputElement | null) => {\n if (ref) {\n if (typeof ref === 'function') {\n ref(input);\n } else {\n ref.current = input;\n }\n }\n\n if (input) {\n input.indeterminate = indeterminate ?? false;\n }\n },\n [indeterminate, ref]\n );\n\n return (\n <ToggleRoot className={className} $gap={labelGap}>\n <ToggleInput\n ref={refCallback}\n className={inputClassName}\n type={type}\n {...props}\n onChange={(e) => {\n onChange?.(e);\n onToggle?.(e.target.checked);\n }}\n />\n {labelPosition === 'left' && label}\n <ToggleIcon\n className=\"onIcon\"\n size={size}\n status=\"on\"\n variant={variant}\n />\n {type === 'checkbox' && (\n <ToggleIcon\n className=\"indeterminateIcon\"\n size={size}\n status=\"indeterminate\"\n variant={variant}\n />\n )}\n <ToggleIcon\n className=\"offIcon\"\n size={size}\n status=\"off\"\n variant={variant}\n />\n {labelPosition === 'right' && label}\n </ToggleRoot>\n );\n};\n\nexport const BaseToggle = forwardRef(_BaseToggle);\n"],"names":["labelPosition","size","type","props","variant","children","className","$gap","ref","onChange","status"],"mappings":";;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAWb;AAmBK;;;AAZDA;;;;AAGAC;;;;AAEAC;;;;AAIGC;AAIL;AACA;AACcC;AAAiBC;;AAK/B;AAEI;AACE;;AAEA;;AAEA;AACF;AAEA;;AAEA;AACF;;AAKYC;AAAsBC;AAAeF;AAE7CG;AACAF;AACAJ;AAAW;AAEXO;AACEA;;AAEF;;AAIAH;AACAL;AACAS;AACAN;;AAIEE;AACAL;AACAS;AACAN;AAAiB;AAInBE;AACAL;AACAS;AACAN;AAAiB;AAEgB;AAGzC;;;"}
|
|
@@ -18,15 +18,15 @@ var _excluded = ["active", "disabled"];
|
|
|
18
18
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
19
19
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
20
20
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
21
|
-
var dropdownMenuItemCSS = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n display: flex;\n align-items: center;\n padding: 8px 12px;\n\n ", ";\n color: ", ";\n transition: background-color 0.07s;\n border-radius: unset;\n text-decoration: none;\n"])), mixin.getTypographyStyles('
|
|
21
|
+
var dropdownMenuItemCSS = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n display: flex;\n align-items: center;\n padding: 8px 12px;\n\n ", ";\n color: ", ";\n transition: background-color 0.07s;\n border-radius: unset;\n text-decoration: none;\n"])), mixin.getTypographyStyles('UIBody2'), mixin.contents000);
|
|
22
22
|
var DropdownMenuItemHoverCSS = styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n &:hover,\n &:focus-visible {\n background-color: ", ";\n }\n"])), mixin.bg200);
|
|
23
23
|
var DropdownMenuItemDisabledCSS = styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n pointer-events: none;\n"])));
|
|
24
|
-
var StyledDropdownMenuSectionTitle = styled__default.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n ", ";\n ", ";\n color: ", ";\n"])), dropdownMenuItemCSS, mixin.getTypographyStyles('
|
|
24
|
+
var StyledDropdownMenuSectionTitle = styled__default.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n ", ";\n ", ";\n color: ", ";\n"])), dropdownMenuItemCSS, mixin.getTypographyStyles('Caption1'), mixin.contents200);
|
|
25
25
|
var getDropdownMenuItemCss = function getDropdownMenuItemCss(_ref) {
|
|
26
26
|
var $active = _ref.$active,
|
|
27
27
|
$disabled = _ref.$disabled;
|
|
28
28
|
return styled.css(function () {
|
|
29
|
-
return [dropdownMenuItemCSS, !$active && DropdownMenuItemHoverCSS, $disabled && DropdownMenuItemDisabledCSS, styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n font-weight: ", ";\n\n &:focus-visible {\n outline: none;\n }\n "])), $active ? 600 : 400)];
|
|
29
|
+
return [dropdownMenuItemCSS, !$active && DropdownMenuItemHoverCSS, $disabled && DropdownMenuItemDisabledCSS, styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n font-weight: ", ";\n\n &:hover{\n font-weight: 600;\n }\n\n &:focus-visible {\n outline: none;\n }\n "])), $active ? 600 : 400)];
|
|
30
30
|
});
|
|
31
31
|
};
|
|
32
32
|
var StyledDropdownMenuItem = styled__default.default.div.attrs(function (_ref2) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Floating/DropdownMenu/styles.tsx"],"sourcesContent":["import {\n bg200,\n contents000,\n contents200,\n divider,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { StyledPopoverContent } from '../Popover/styles';\n\nexport const dropdownMenuItemCSS = css`\n display: flex;\n align-items: center;\n padding: 8px 12px;\n\n ${getTypographyStyles('
|
|
1
|
+
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Floating/DropdownMenu/styles.tsx"],"sourcesContent":["import {\n bg200,\n contents000,\n contents200,\n divider,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport styled, { css, type CSSProperties } from 'styled-components';\n\nimport { StyledPopoverContent } from '../Popover/styles';\n\nexport const dropdownMenuItemCSS = css`\n display: flex;\n align-items: center;\n padding: 8px 12px;\n\n ${getTypographyStyles('UIBody2')};\n color: ${contents000};\n transition: background-color 0.07s;\n border-radius: unset;\n text-decoration: none;\n`;\n\nexport const DropdownMenuItemHoverCSS = css`\n &:hover,\n &:focus-visible {\n background-color: ${bg200};\n }\n`;\n\nexport const DropdownMenuItemDisabledCSS = css`\n pointer-events: none;\n`;\n\nexport const StyledDropdownMenuSectionTitle = styled.span`\n ${dropdownMenuItemCSS};\n ${getTypographyStyles('Caption1')};\n color: ${contents200};\n`;\n\nexport type DropdownMenuItemProps =\n ConvertTransientProps<StyledDropdownMenuItemProps>;\n\nexport type StyledDropdownMenuItemProps = {\n $active?: boolean;\n $disabled?: boolean;\n};\n\nexport const getDropdownMenuItemCss = ({\n $active,\n $disabled,\n}: StyledDropdownMenuItemProps) =>\n css(() => [\n dropdownMenuItemCSS,\n !$active && DropdownMenuItemHoverCSS,\n $disabled && DropdownMenuItemDisabledCSS,\n css`\n font-weight: ${$active ? 600 : 400};\n\n &:hover{\n font-weight: 600;\n }\n\n &:focus-visible {\n outline: none;\n }\n `,\n ]);\n\nexport const StyledDropdownMenuItem = styled.div.attrs<DropdownMenuItemProps>(\n ({ active, disabled, ...props }) => ({\n tabIndex: active ? -1 : undefined,\n $active: active,\n $disabled: disabled,\n ...props,\n })\n)<StyledDropdownMenuItemProps>(getDropdownMenuItemCss);\n\nexport const StyledDropdownMenuContentWrapper = styled.div<{\n $zIndex?: CSSProperties['zIndex'];\n}>`\n [data-radix-popper-content-wrapper]{\n ${({ $zIndex }) => $zIndex && css` z-index: ${$zIndex} !important; `}\n }\n`;\n\nexport const StyledDropdownMenuSection = styled.div``;\n\nexport const StyledDropdownMenuContent = styled(StyledPopoverContent)`\n ${StyledDropdownMenuSection} {\n border-bottom: 1px solid ${divider};\n }\n ${StyledDropdownMenuSection}:last-child {\n border-bottom: none;\n }\n`;\nStyledDropdownMenuItem.defaultProps = {};\n"],"names":["dropdownMenuItemCSS","css","_templateObject","_taggedTemplateLiteral","getTypographyStyles","contents000","DropdownMenuItemHoverCSS","_templateObject2","bg200","DropdownMenuItemDisabledCSS","_templateObject3","StyledDropdownMenuSectionTitle","styled","span","_templateObject4","contents200","getDropdownMenuItemCss","_ref","$active","$disabled","_templateObject5","StyledDropdownMenuItem","div","attrs","_ref2","active","disabled","props","_objectWithoutProperties","_excluded","_objectSpread","tabIndex","undefined","StyledDropdownMenuContentWrapper","_templateObject6","_ref3","$zIndex","_templateObject7","StyledDropdownMenuSection","_templateObject8","StyledDropdownMenuContent","StyledPopoverContent","_templateObject9","divider","defaultProps"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { ConvertTransientProps } from '@remember-web/shared';
|
|
3
|
-
import { CSSProperties } from 'styled-components';
|
|
3
|
+
import { type CSSProperties } from 'styled-components';
|
|
4
4
|
export declare const dropdownMenuItemCSS: import("styled-components").RuleSet<object>;
|
|
5
5
|
export declare const DropdownMenuItemHoverCSS: import("styled-components").RuleSet<object>;
|
|
6
6
|
export declare const DropdownMenuItemDisabledCSS: import("styled-components").RuleSet<object>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Floating/DropdownMenu/styles.tsx"],"names":[],"mappings":";AAOA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAe,EAAO,aAAa,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Floating/DropdownMenu/styles.tsx"],"names":[],"mappings":";AAOA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAe,EAAO,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAIpE,eAAO,MAAM,mBAAmB,6CAU/B,CAAC;AAEF,eAAO,MAAM,wBAAwB,6CAKpC,CAAC;AAEF,eAAO,MAAM,2BAA2B,6CAEvC,CAAC;AAEF,eAAO,MAAM,8BAA8B,kNAI1C,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAC/B,qBAAqB,CAAC,2BAA2B,CAAC,CAAC;AAErD,MAAM,MAAM,2BAA2B,GAAG;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,sBAAsB,4BAGhC,2BAA2B,gDAgB1B,CAAC;AAEL,eAAO,MAAM,sBAAsB;;sFAOmB,CAAC;AAEvD,eAAO,MAAM,gCAAgC;cACjC,aAAa,CAAC,QAAQ,CAAC;GAKlC,CAAC;AAEF,eAAO,MAAM,yBAAyB,gNAAe,CAAC;AAEtD,eAAO,MAAM,yBAAyB;;;;kQAOrC,CAAC"}
|
|
@@ -9,15 +9,15 @@ var _excluded = ["active", "disabled"];
|
|
|
9
9
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
10
10
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
11
11
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
12
|
-
var dropdownMenuItemCSS = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n padding: 8px 12px;\n\n ", ";\n color: ", ";\n transition: background-color 0.07s;\n border-radius: unset;\n text-decoration: none;\n"])), getTypographyStyles('
|
|
12
|
+
var dropdownMenuItemCSS = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n padding: 8px 12px;\n\n ", ";\n color: ", ";\n transition: background-color 0.07s;\n border-radius: unset;\n text-decoration: none;\n"])), getTypographyStyles('UIBody2'), contents000);
|
|
13
13
|
var DropdownMenuItemHoverCSS = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &:hover,\n &:focus-visible {\n background-color: ", ";\n }\n"])), bg200);
|
|
14
14
|
var DropdownMenuItemDisabledCSS = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n pointer-events: none;\n"])));
|
|
15
|
-
var StyledDropdownMenuSectionTitle = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n ", ";\n ", ";\n color: ", ";\n"])), dropdownMenuItemCSS, getTypographyStyles('
|
|
15
|
+
var StyledDropdownMenuSectionTitle = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n ", ";\n ", ";\n color: ", ";\n"])), dropdownMenuItemCSS, getTypographyStyles('Caption1'), contents200);
|
|
16
16
|
var getDropdownMenuItemCss = function getDropdownMenuItemCss(_ref) {
|
|
17
17
|
var $active = _ref.$active,
|
|
18
18
|
$disabled = _ref.$disabled;
|
|
19
19
|
return css(function () {
|
|
20
|
-
return [dropdownMenuItemCSS, !$active && DropdownMenuItemHoverCSS, $disabled && DropdownMenuItemDisabledCSS, css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n font-weight: ", ";\n\n &:focus-visible {\n outline: none;\n }\n "])), $active ? 600 : 400)];
|
|
20
|
+
return [dropdownMenuItemCSS, !$active && DropdownMenuItemHoverCSS, $disabled && DropdownMenuItemDisabledCSS, css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n font-weight: ", ";\n\n &:hover{\n font-weight: 600;\n }\n\n &:focus-visible {\n outline: none;\n }\n "])), $active ? 600 : 400)];
|
|
21
21
|
});
|
|
22
22
|
};
|
|
23
23
|
var StyledDropdownMenuItem = styled.div.attrs(function (_ref2) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Floating/DropdownMenu/styles.tsx"],"sourcesContent":["import {\n bg200,\n contents000,\n contents200,\n divider,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { StyledPopoverContent } from '../Popover/styles';\n\nexport const dropdownMenuItemCSS = css`\n display: flex;\n align-items: center;\n padding: 8px 12px;\n\n ${getTypographyStyles('
|
|
1
|
+
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Floating/DropdownMenu/styles.tsx"],"sourcesContent":["import {\n bg200,\n contents000,\n contents200,\n divider,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport styled, { css, type CSSProperties } from 'styled-components';\n\nimport { StyledPopoverContent } from '../Popover/styles';\n\nexport const dropdownMenuItemCSS = css`\n display: flex;\n align-items: center;\n padding: 8px 12px;\n\n ${getTypographyStyles('UIBody2')};\n color: ${contents000};\n transition: background-color 0.07s;\n border-radius: unset;\n text-decoration: none;\n`;\n\nexport const DropdownMenuItemHoverCSS = css`\n &:hover,\n &:focus-visible {\n background-color: ${bg200};\n }\n`;\n\nexport const DropdownMenuItemDisabledCSS = css`\n pointer-events: none;\n`;\n\nexport const StyledDropdownMenuSectionTitle = styled.span`\n ${dropdownMenuItemCSS};\n ${getTypographyStyles('Caption1')};\n color: ${contents200};\n`;\n\nexport type DropdownMenuItemProps =\n ConvertTransientProps<StyledDropdownMenuItemProps>;\n\nexport type StyledDropdownMenuItemProps = {\n $active?: boolean;\n $disabled?: boolean;\n};\n\nexport const getDropdownMenuItemCss = ({\n $active,\n $disabled,\n}: StyledDropdownMenuItemProps) =>\n css(() => [\n dropdownMenuItemCSS,\n !$active && DropdownMenuItemHoverCSS,\n $disabled && DropdownMenuItemDisabledCSS,\n css`\n font-weight: ${$active ? 600 : 400};\n\n &:hover{\n font-weight: 600;\n }\n\n &:focus-visible {\n outline: none;\n }\n `,\n ]);\n\nexport const StyledDropdownMenuItem = styled.div.attrs<DropdownMenuItemProps>(\n ({ active, disabled, ...props }) => ({\n tabIndex: active ? -1 : undefined,\n $active: active,\n $disabled: disabled,\n ...props,\n })\n)<StyledDropdownMenuItemProps>(getDropdownMenuItemCss);\n\nexport const StyledDropdownMenuContentWrapper = styled.div<{\n $zIndex?: CSSProperties['zIndex'];\n}>`\n [data-radix-popper-content-wrapper]{\n ${({ $zIndex }) => $zIndex && css` z-index: ${$zIndex} !important; `}\n }\n`;\n\nexport const StyledDropdownMenuSection = styled.div``;\n\nexport const StyledDropdownMenuContent = styled(StyledPopoverContent)`\n ${StyledDropdownMenuSection} {\n border-bottom: 1px solid ${divider};\n }\n ${StyledDropdownMenuSection}:last-child {\n border-bottom: none;\n }\n`;\nStyledDropdownMenuItem.defaultProps = {};\n"],"names":["dropdownMenuItemCSS","css","_templateObject","_taggedTemplateLiteral","getTypographyStyles","contents000","DropdownMenuItemHoverCSS","_templateObject2","bg200","DropdownMenuItemDisabledCSS","_templateObject3","StyledDropdownMenuSectionTitle","styled","span","_templateObject4","contents200","getDropdownMenuItemCss","_ref","$active","$disabled","_templateObject5","StyledDropdownMenuItem","div","attrs","_ref2","active","disabled","props","_objectWithoutProperties","_excluded","_objectSpread","tabIndex","undefined","StyledDropdownMenuContentWrapper","_templateObject6","_ref3","$zIndex","_templateObject7","StyledDropdownMenuSection","_templateObject8","StyledDropdownMenuContent","StyledPopoverContent","_templateObject9","divider","defaultProps"],"mappings":"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"}
|
|
@@ -34,11 +34,11 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
|
|
|
34
34
|
var TOOLTIP_CONTENT_CONSTANTS = {
|
|
35
35
|
large: {
|
|
36
36
|
padding: '8px 12px',
|
|
37
|
-
typography: '
|
|
37
|
+
typography: 'UIBody2'
|
|
38
38
|
},
|
|
39
39
|
small: {
|
|
40
40
|
padding: '4px 8px',
|
|
41
|
-
typography: '
|
|
41
|
+
typography: 'UIBody3'
|
|
42
42
|
}
|
|
43
43
|
};
|
|
44
44
|
var fadeIn = styled.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n from {\n opacity: 0\n }\n to {\n opacity: 1;\n }\n"])));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Floating/Tooltip/styles.ts"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n contents000,\n contents999,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type {
|
|
1
|
+
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Floating/Tooltip/styles.ts"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n contents000,\n contents999,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { CSSProperties } from 'react';\nimport type { TooltipSize, TooltipTextAlign } from './types';\n\nconst TOOLTIP_CONTENT_CONSTANTS: Record<\n TooltipSize,\n { padding: string; typography: TypographyStyle }\n> = {\n large: {\n padding: '8px 12px',\n typography: 'UIBody2',\n },\n small: {\n padding: '4px 8px',\n typography: 'UIBody3',\n },\n};\n\nconst fadeIn = keyframes`\n from {\n opacity: 0\n }\n to {\n opacity: 1;\n }\n`;\n\nexport const TooltipTriggerWrapper = styled.div`\n width: fit-content;\n height: fit-content;\n & > svg {\n display: block;\n }\n`;\n\nexport const TooltipContentWrapper = styled.div<{\n $zIndex?: CSSProperties['zIndex'];\n}>`\n [data-radix-popper-content-wrapper]{\n ${({ $zIndex }) => $zIndex && css` z-index: ${$zIndex} !important; `}\n }\n`;\n\nexport const TooltipContent = styled(RadixTooltip.Content)<{\n $size: TooltipSize;\n $maxWidth: number | string;\n $backgroundColor: string;\n $contentColor: string;\n $textAlign?: TooltipTextAlign;\n}>`\n box-sizing: border-box;\n display: flex;\n white-space: pre-wrap;\n color: ${contents999};\n background-color: ${contents000};\n border-radius: 4px;\n will-change: opacity;\n animation: ${fadeIn} 200ms forwards;\n gap: 4px;\n ${({ $size, $maxWidth, $backgroundColor, $contentColor, $textAlign }) => [\n css`\n padding: ${TOOLTIP_CONTENT_CONSTANTS[$size].padding};\n ${getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography)};\n background-color: ${$backgroundColor};\n color: ${$contentColor};\n text-align: ${$textAlign};\n `,\n typeof $maxWidth === 'string'\n ? `max-width: ${$maxWidth};`\n : `max-width: ${$maxWidth}px;`,\n ]};\n`;\n\nexport const CloseButton = styled.button`\n all: unset;\n appearance: none;\n cursor: pointer;\n & > svg {\n display: block;\n }\n`;\n"],"names":["large","padding","typography","small","TooltipTriggerWrapper","TooltipContentWrapper","CloseButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAcb;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;AASaE;AAQAC;AAIP;;AAAkE;AAIjE;AAgBH;;;;;;AAWD;AAGUC;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as RadixTooltip from '@radix-ui/react-tooltip';
|
|
2
|
+
import type { CSSProperties } from 'react';
|
|
2
3
|
import type { TooltipSize, TooltipTextAlign } from './types';
|
|
3
|
-
import { CSSProperties } from 'react';
|
|
4
4
|
export declare const TooltipTriggerWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
5
5
|
export declare const TooltipContentWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
6
6
|
$zIndex?: CSSProperties['zIndex'];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Tooltip/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AASxD,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Tooltip/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AASxD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAyB7D,eAAO,MAAM,qBAAqB,gNAMjC,CAAC;AAEF,eAAO,MAAM,qBAAqB;cACtB,aAAa,CAAC,QAAQ,CAAC;GAKlC,CAAC;AAEF,eAAO,MAAM,cAAc;;;WAClB,WAAW;eACP,MAAM,GAAG,MAAM;sBACR,MAAM;mBACT,MAAM;;sLAwBtB,CAAC;AAEF,eAAO,MAAM,WAAW,4NAOvB,CAAC"}
|
|
@@ -8,11 +8,11 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
|
|
|
8
8
|
var TOOLTIP_CONTENT_CONSTANTS = {
|
|
9
9
|
large: {
|
|
10
10
|
padding: '8px 12px',
|
|
11
|
-
typography: '
|
|
11
|
+
typography: 'UIBody2'
|
|
12
12
|
},
|
|
13
13
|
small: {
|
|
14
14
|
padding: '4px 8px',
|
|
15
|
-
typography: '
|
|
15
|
+
typography: 'UIBody3'
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
18
|
var fadeIn = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1;\n }\n"])));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Floating/Tooltip/styles.ts"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n contents000,\n contents999,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type {
|
|
1
|
+
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Floating/Tooltip/styles.ts"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n contents000,\n contents999,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { CSSProperties } from 'react';\nimport type { TooltipSize, TooltipTextAlign } from './types';\n\nconst TOOLTIP_CONTENT_CONSTANTS: Record<\n TooltipSize,\n { padding: string; typography: TypographyStyle }\n> = {\n large: {\n padding: '8px 12px',\n typography: 'UIBody2',\n },\n small: {\n padding: '4px 8px',\n typography: 'UIBody3',\n },\n};\n\nconst fadeIn = keyframes`\n from {\n opacity: 0\n }\n to {\n opacity: 1;\n }\n`;\n\nexport const TooltipTriggerWrapper = styled.div`\n width: fit-content;\n height: fit-content;\n & > svg {\n display: block;\n }\n`;\n\nexport const TooltipContentWrapper = styled.div<{\n $zIndex?: CSSProperties['zIndex'];\n}>`\n [data-radix-popper-content-wrapper]{\n ${({ $zIndex }) => $zIndex && css` z-index: ${$zIndex} !important; `}\n }\n`;\n\nexport const TooltipContent = styled(RadixTooltip.Content)<{\n $size: TooltipSize;\n $maxWidth: number | string;\n $backgroundColor: string;\n $contentColor: string;\n $textAlign?: TooltipTextAlign;\n}>`\n box-sizing: border-box;\n display: flex;\n white-space: pre-wrap;\n color: ${contents999};\n background-color: ${contents000};\n border-radius: 4px;\n will-change: opacity;\n animation: ${fadeIn} 200ms forwards;\n gap: 4px;\n ${({ $size, $maxWidth, $backgroundColor, $contentColor, $textAlign }) => [\n css`\n padding: ${TOOLTIP_CONTENT_CONSTANTS[$size].padding};\n ${getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography)};\n background-color: ${$backgroundColor};\n color: ${$contentColor};\n text-align: ${$textAlign};\n `,\n typeof $maxWidth === 'string'\n ? `max-width: ${$maxWidth};`\n : `max-width: ${$maxWidth}px;`,\n ]};\n`;\n\nexport const CloseButton = styled.button`\n all: unset;\n appearance: none;\n cursor: pointer;\n & > svg {\n display: block;\n }\n`;\n"],"names":["large","padding","typography","small","TooltipTriggerWrapper","TooltipContentWrapper","CloseButton"],"mappings":";;;;;;AAAa;AAcb;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;AASaE;AAQAC;AAIP;;AAAkE;AAIjE;AAgBH;;;;;;AAWD;AAGUC;;"}
|
|
@@ -11,7 +11,7 @@ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTempla
|
|
|
11
11
|
var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
12
12
|
|
|
13
13
|
var _templateObject, _templateObject2, _templateObject3;
|
|
14
|
-
var StyledSelect = styled__default.default.select(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n all: unset;\n\n ", "\n border: 1px solid ", ";\n border-radius: 4px;\n padding: 10px 36px 10px 12px;\n box-sizing: border-box;\n\n ", "\n\n width: ", ";\n\n transition: border-color 0.2s, background-color 0.2s;\n\n &:focus {\n border-color: ", ";\n }\n\n &:not(:disabled) {\n @media (hover: hover) {\n &:hover {\n background-color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n }\n }\n"])), mixin.getTypographyStyles('
|
|
14
|
+
var StyledSelect = styled__default.default.select(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n all: unset;\n\n ", "\n border: 1px solid ", ";\n border-radius: 4px;\n padding: 10px 36px 10px 12px;\n box-sizing: border-box;\n\n ", "\n\n width: ", ";\n\n transition: border-color 0.2s, background-color 0.2s;\n\n &:focus {\n border-color: ", ";\n }\n\n &:not(:disabled) {\n @media (hover: hover) {\n &:hover {\n background-color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n }\n }\n"])), mixin.getTypographyStyles('UIBody2'), mixin.contents300, function (_ref) {
|
|
15
15
|
var isPlaceholder = _ref.isPlaceholder;
|
|
16
16
|
return isPlaceholder && styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n color: ", ";\n "])), mixin.contents200);
|
|
17
17
|
}, function (_ref2) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.cjs.js","sources":["../../../../../src/Inputs/Select/NativeSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg200,\n bg300,\n contents000,\n contents200,\n contents300,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\nexport const StyledSelect = styled.select<{\n $width?: number | string;\n isPlaceholder?: boolean;\n}>`\n all: unset;\n\n ${getTypographyStyles('
|
|
1
|
+
{"version":3,"file":"styles.cjs.js","sources":["../../../../../src/Inputs/Select/NativeSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg200,\n bg300,\n contents000,\n contents200,\n contents300,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\nexport const StyledSelect = styled.select<{\n $width?: number | string;\n isPlaceholder?: boolean;\n}>`\n all: unset;\n\n ${getTypographyStyles('UIBody2')}\n border: 1px solid ${contents300};\n border-radius: 4px;\n padding: 10px 36px 10px 12px;\n box-sizing: border-box;\n\n ${({ isPlaceholder }) =>\n isPlaceholder &&\n css`\n color: ${contents200};\n `}\n\n width: ${({ $width }) => {\n if (!$width) {\n return null;\n }\n\n if (typeof $width === 'number') {\n return `${$width}px`;\n }\n\n return $width;\n }};\n\n transition: border-color 0.2s, background-color 0.2s;\n\n &:focus {\n border-color: ${contents000};\n }\n\n &:not(:disabled) {\n @media (hover: hover) {\n &:hover {\n background-color: ${bg200};\n }\n }\n\n &:active {\n background-color: ${bg300};\n }\n }\n`;\nexport const SelectDownIcon = styled.div`\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n\n & > svg {\n display: block;\n }\n\n pointer-events: none;\n`;\n"],"names":["SelectDownIcon"],"mappings":";;;;;;;;;;;;AAAa;AAYN;AAYH;;AAIC;AAEsB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;AAoBWA;;;"}
|
|
@@ -4,7 +4,7 @@ import { getTypographyStyles, contents300, contents200, contents000, bg200, bg30
|
|
|
4
4
|
import styled, { css } from 'styled-components';
|
|
5
5
|
|
|
6
6
|
var _templateObject, _templateObject2, _templateObject3;
|
|
7
|
-
var StyledSelect = styled.select(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n all: unset;\n\n ", "\n border: 1px solid ", ";\n border-radius: 4px;\n padding: 10px 36px 10px 12px;\n box-sizing: border-box;\n\n ", "\n\n width: ", ";\n\n transition: border-color 0.2s, background-color 0.2s;\n\n &:focus {\n border-color: ", ";\n }\n\n &:not(:disabled) {\n @media (hover: hover) {\n &:hover {\n background-color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n }\n }\n"])), getTypographyStyles('
|
|
7
|
+
var StyledSelect = styled.select(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n all: unset;\n\n ", "\n border: 1px solid ", ";\n border-radius: 4px;\n padding: 10px 36px 10px 12px;\n box-sizing: border-box;\n\n ", "\n\n width: ", ";\n\n transition: border-color 0.2s, background-color 0.2s;\n\n &:focus {\n border-color: ", ";\n }\n\n &:not(:disabled) {\n @media (hover: hover) {\n &:hover {\n background-color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n }\n }\n"])), getTypographyStyles('UIBody2'), contents300, function (_ref) {
|
|
8
8
|
var isPlaceholder = _ref.isPlaceholder;
|
|
9
9
|
return isPlaceholder && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n "])), contents200);
|
|
10
10
|
}, function (_ref2) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.esm.js","sources":["../../../../../src/Inputs/Select/NativeSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg200,\n bg300,\n contents000,\n contents200,\n contents300,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\nexport const StyledSelect = styled.select<{\n $width?: number | string;\n isPlaceholder?: boolean;\n}>`\n all: unset;\n\n ${getTypographyStyles('
|
|
1
|
+
{"version":3,"file":"styles.esm.js","sources":["../../../../../src/Inputs/Select/NativeSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg200,\n bg300,\n contents000,\n contents200,\n contents300,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\nexport const StyledSelect = styled.select<{\n $width?: number | string;\n isPlaceholder?: boolean;\n}>`\n all: unset;\n\n ${getTypographyStyles('UIBody2')}\n border: 1px solid ${contents300};\n border-radius: 4px;\n padding: 10px 36px 10px 12px;\n box-sizing: border-box;\n\n ${({ isPlaceholder }) =>\n isPlaceholder &&\n css`\n color: ${contents200};\n `}\n\n width: ${({ $width }) => {\n if (!$width) {\n return null;\n }\n\n if (typeof $width === 'number') {\n return `${$width}px`;\n }\n\n return $width;\n }};\n\n transition: border-color 0.2s, background-color 0.2s;\n\n &:focus {\n border-color: ${contents000};\n }\n\n &:not(:disabled) {\n @media (hover: hover) {\n &:hover {\n background-color: ${bg200};\n }\n }\n\n &:active {\n background-color: ${bg300};\n }\n }\n`;\nexport const SelectDownIcon = styled.div`\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n\n & > svg {\n display: block;\n }\n\n pointer-events: none;\n`;\n"],"names":["SelectDownIcon"],"mappings":";;;;;AAAa;AAYN;AAYH;;AAIC;AAEsB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;AAoBWA;;"}
|
|
@@ -11,7 +11,7 @@ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTempla
|
|
|
11
11
|
var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
12
12
|
|
|
13
13
|
var _templateObject, _templateObject2;
|
|
14
|
-
var SelectContainer = styled__default.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n ", "\n color: ", ";\n width: ", ";\n position: relative;\n user-select: none;\n\n &:focus {\n outline: none;\n border-color: ", ";\n }\n &[aria-disabled='true'] {\n color: ", ";\n border-color: ", ";\n background-color: ", ";\n }\n"])), mixin.getTypographyStyles('
|
|
14
|
+
var SelectContainer = styled__default.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n ", "\n color: ", ";\n width: ", ";\n position: relative;\n user-select: none;\n\n &:focus {\n outline: none;\n border-color: ", ";\n }\n &[aria-disabled='true'] {\n color: ", ";\n border-color: ", ";\n background-color: ", ";\n }\n"])), mixin.getTypographyStyles('UIBody2'), mixin.contents000, function (_ref) {
|
|
15
15
|
var $width = _ref.$width;
|
|
16
16
|
if (!$width) {
|
|
17
17
|
return 'fit-content';
|
|
@@ -21,7 +21,7 @@ var SelectContainer = styled__default.default.div(_templateObject || (_templateO
|
|
|
21
21
|
}
|
|
22
22
|
return $width;
|
|
23
23
|
}, mixin.contents000, mixin.contents200, mixin.contents300, mixin.bg200);
|
|
24
|
-
var SelectLabel = styled__default.default.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n ", "\n display: block;\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n\n & > mark {\n all: unset;\n color: ", ";\n }\n"])), mixin.getTypographyStyles('
|
|
24
|
+
var SelectLabel = styled__default.default.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n ", "\n display: block;\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n\n & > mark {\n all: unset;\n color: ", ";\n }\n"])), mixin.getTypographyStyles('SubTitle1'), mixin.roleRed);
|
|
25
25
|
|
|
26
26
|
exports.SelectContainer = SelectContainer;
|
|
27
27
|
exports.SelectLabel = SelectLabel;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Inputs/Select/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg200,\n contents000,\n contents200,\n contents300,\n getTypographyStyles,\n roleRed,\n} from '@remember-web/mixin';\nimport styled from 'styled-components';\n\nexport const SelectContainer = styled.div<{ $width?: number | string }>`\n ${getTypographyStyles('
|
|
1
|
+
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Inputs/Select/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg200,\n contents000,\n contents200,\n contents300,\n getTypographyStyles,\n roleRed,\n} from '@remember-web/mixin';\nimport styled from 'styled-components';\n\nexport const SelectContainer = styled.div<{ $width?: number | string }>`\n ${getTypographyStyles('UIBody2')}\n color: ${contents000};\n width: ${({ $width }) => {\n if (!$width) {\n return 'fit-content';\n }\n\n if (typeof $width === 'number') {\n return `${$width}px`;\n }\n\n return $width;\n }};\n position: relative;\n user-select: none;\n\n &:focus {\n outline: none;\n border-color: ${contents000};\n }\n &[aria-disabled='true'] {\n color: ${contents200};\n border-color: ${contents300};\n background-color: ${bg200};\n }\n`;\n\nexport const SelectLabel = styled.label`\n ${getTypographyStyles('SubTitle1')}\n display: block;\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n\n & > mark {\n all: unset;\n color: ${roleRed};\n }\n`;\n"],"names":[],"mappings":";;;;;;;;;;;;AAAa;AAYN;AAGoB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;;;;"}
|
|
@@ -4,7 +4,7 @@ import { getTypographyStyles, contents000, contents200, contents300, bg200, role
|
|
|
4
4
|
import styled from 'styled-components';
|
|
5
5
|
|
|
6
6
|
var _templateObject, _templateObject2;
|
|
7
|
-
var SelectContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n color: ", ";\n width: ", ";\n position: relative;\n user-select: none;\n\n &:focus {\n outline: none;\n border-color: ", ";\n }\n &[aria-disabled='true'] {\n color: ", ";\n border-color: ", ";\n background-color: ", ";\n }\n"])), getTypographyStyles('
|
|
7
|
+
var SelectContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n color: ", ";\n width: ", ";\n position: relative;\n user-select: none;\n\n &:focus {\n outline: none;\n border-color: ", ";\n }\n &[aria-disabled='true'] {\n color: ", ";\n border-color: ", ";\n background-color: ", ";\n }\n"])), getTypographyStyles('UIBody2'), contents000, function (_ref) {
|
|
8
8
|
var $width = _ref.$width;
|
|
9
9
|
if (!$width) {
|
|
10
10
|
return 'fit-content';
|
|
@@ -14,7 +14,7 @@ var SelectContainer = styled.div(_templateObject || (_templateObject = _taggedTe
|
|
|
14
14
|
}
|
|
15
15
|
return $width;
|
|
16
16
|
}, contents000, contents200, contents300, bg200);
|
|
17
|
-
var SelectLabel = styled.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n display: block;\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n\n & > mark {\n all: unset;\n color: ", ";\n }\n"])), getTypographyStyles('
|
|
17
|
+
var SelectLabel = styled.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n display: block;\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n\n & > mark {\n all: unset;\n color: ", ";\n }\n"])), getTypographyStyles('SubTitle1'), roleRed);
|
|
18
18
|
|
|
19
19
|
export { SelectContainer, SelectLabel };
|
|
20
20
|
//# sourceMappingURL=styles.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Inputs/Select/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg200,\n contents000,\n contents200,\n contents300,\n getTypographyStyles,\n roleRed,\n} from '@remember-web/mixin';\nimport styled from 'styled-components';\n\nexport const SelectContainer = styled.div<{ $width?: number | string }>`\n ${getTypographyStyles('
|
|
1
|
+
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Inputs/Select/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg200,\n contents000,\n contents200,\n contents300,\n getTypographyStyles,\n roleRed,\n} from '@remember-web/mixin';\nimport styled from 'styled-components';\n\nexport const SelectContainer = styled.div<{ $width?: number | string }>`\n ${getTypographyStyles('UIBody2')}\n color: ${contents000};\n width: ${({ $width }) => {\n if (!$width) {\n return 'fit-content';\n }\n\n if (typeof $width === 'number') {\n return `${$width}px`;\n }\n\n return $width;\n }};\n position: relative;\n user-select: none;\n\n &:focus {\n outline: none;\n border-color: ${contents000};\n }\n &[aria-disabled='true'] {\n color: ${contents200};\n border-color: ${contents300};\n background-color: ${bg200};\n }\n`;\n\nexport const SelectLabel = styled.label`\n ${getTypographyStyles('SubTitle1')}\n display: block;\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n\n & > mark {\n all: unset;\n color: ${roleRed};\n }\n`;\n"],"names":[],"mappings":";;;;;AAAa;AAYN;AAGoB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;;;"}
|