@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1

package/dist/index.js

@@ -11,6 +11,7 @@ export * from './LoadingIndicator';
 export * from './MiniProductCard';
 export * from './NavItem';
 export * from './Layouts';
+export * from './Navigation';
 export * from './GlobalNavigationBar';
 export * from './Tabs';
 export * from './Banners';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["NotificationDot","LaerdalLogo"],"sources":["../src/index.ts"],"sourcesContent":["export * from './styles';\r\nexport * from './icons';\r\nexport * from './types';\r\nexport * from './AuthPage';\r\nexport * from './Button';\r\nexport * from './Breadcrumb';\r\nexport * from './Chips';\r\nexport * from './SkipToContent';\r\nexport * from './Footer';\r\nexport * from './LoadingIndicator';\r\nexport * from './MiniProductCard';\r\nexport * from './NavItem';\r\nexport * from './Layouts';\r\nexport * from './GlobalNavigationBar';\r\nexport * from './Tabs';\r\nexport * from './Banners';\r\nexport * from './Toasters';\r\nexport * from './InputFields';\r\nexport * from './Dropdown';\r\nexport * from './Switcher';\r\nexport * from './LoadingPage';\r\nexport * from './List';\r\nexport * from './Modals';\r\nexport * from './Paginator';\r\nexport * from './Table';\r\nexport * from './Toggles';\r\nexport * from './HyperLink';\r\nexport {NotificationDot} from './NotificationDot';\r\nexport * from './Accordion';\r\nexport * from './Tooltips';\r\nexport * from './common';\r\nexport * from './QuizButton';\r\nexport * from './LinearProgress';\r\nexport * from './SegmentControl';\r\nexport * from './Card';\r\nexport * from './MenuItem';\r\nexport * from './Tag';\r\nexport * from './Image';\r\nexport * from './ChipsInput';\r\nexport * from './Tile';\r\nexport * from './ProfileButton';\r\nexport {LaerdalLogo} from './assets';\r\nexport * from './Popover';\r\nexport * from './SideMenu';\r\nexport * from './Panel';\r\n"],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,UAAU;AACxB,cAAc,cAAc;AAC5B,cAAc,SAAS;AACvB,cAAc,iBAAiB;AAC/B,cAAc,UAAU;AACxB,cAAc,oBAAoB;AAClC,cAAc,mBAAmB;AACjC,cAAc,WAAW;AACzB,cAAc,WAAW;AACzB,cAAc,uBAAuB;AACrC,cAAc,QAAQ;AACtB,cAAc,WAAW;AACzB,cAAc,YAAY;AAC1B,cAAc,eAAe;AAC7B,cAAc,YAAY;AAC1B,cAAc,YAAY;AAC1B,cAAc,eAAe;AAC7B,cAAc,QAAQ;AACtB,cAAc,UAAU;AACxB,cAAc,aAAa;AAC3B,cAAc,SAAS;AACvB,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,SAAQA,eAAe,QAAO,mBAAmB;AACjD,cAAc,aAAa;AAC3B,cAAc,YAAY;AAC1B,cAAc,UAAU;AACxB,cAAc,cAAc;AAC5B,cAAc,kBAAkB;AAChC,cAAc,kBAAkB;AAChC,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,OAAO;AACrB,cAAc,SAAS;AACvB,cAAc,cAAc;AAC5B,cAAc,QAAQ;AACtB,cAAc,iBAAiB;AAC/B,SAAQC,WAAW,QAAO,UAAU;AACpC,cAAc,WAAW;AACzB,cAAc,YAAY;AAC1B,cAAc,SAAS","ignoreList":[]}
+{"version":3,"file":"index.js","names":["NotificationDot","LaerdalLogo"],"sources":["../src/index.ts"],"sourcesContent":["export * from './styles';\r\nexport * from './icons';\r\nexport * from './types';\r\nexport * from './AuthPage';\r\nexport * from './Button';\r\nexport * from './Breadcrumb';\r\nexport * from './Chips';\r\nexport * from './SkipToContent';\r\nexport * from './Footer';\r\nexport * from './LoadingIndicator';\r\nexport * from './MiniProductCard';\r\nexport * from './NavItem';\r\nexport * from './Layouts';\r\nexport * from './Navigation';\r\nexport * from './GlobalNavigationBar';\r\nexport * from './Tabs';\r\nexport * from './Banners';\r\nexport * from './Toasters';\r\nexport * from './InputFields';\r\nexport * from './Dropdown';\r\nexport * from './Switcher';\r\nexport * from './LoadingPage';\r\nexport * from './List';\r\nexport * from './Modals';\r\nexport * from './Paginator';\r\nexport * from './Table';\r\nexport * from './Toggles';\r\nexport * from './HyperLink';\r\nexport {NotificationDot} from './NotificationDot';\r\nexport * from './Accordion';\r\nexport * from './Tooltips';\r\nexport * from './common';\r\nexport * from './QuizButton';\r\nexport * from './LinearProgress';\r\nexport * from './SegmentControl';\r\nexport * from './Card';\r\nexport * from './MenuItem';\r\nexport * from './Tag';\r\nexport * from './Image';\r\nexport * from './ChipsInput';\r\nexport * from './Tile';\r\nexport * from './ProfileButton';\r\nexport {LaerdalLogo} from './assets';\r\nexport * from './Popover';\r\nexport * from './SideMenu';\r\nexport * from './Panel';\r\n"],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,UAAU;AACxB,cAAc,cAAc;AAC5B,cAAc,SAAS;AACvB,cAAc,iBAAiB;AAC/B,cAAc,UAAU;AACxB,cAAc,oBAAoB;AAClC,cAAc,mBAAmB;AACjC,cAAc,WAAW;AACzB,cAAc,WAAW;AACzB,cAAc,cAAc;AAC5B,cAAc,uBAAuB;AACrC,cAAc,QAAQ;AACtB,cAAc,WAAW;AACzB,cAAc,YAAY;AAC1B,cAAc,eAAe;AAC7B,cAAc,YAAY;AAC1B,cAAc,YAAY;AAC1B,cAAc,eAAe;AAC7B,cAAc,QAAQ;AACtB,cAAc,UAAU;AACxB,cAAc,aAAa;AAC3B,cAAc,SAAS;AACvB,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,SAAQA,eAAe,QAAO,mBAAmB;AACjD,cAAc,aAAa;AAC3B,cAAc,YAAY;AAC1B,cAAc,UAAU;AACxB,cAAc,cAAc;AAC5B,cAAc,kBAAkB;AAChC,cAAc,kBAAkB;AAChC,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,OAAO;AACrB,cAAc,SAAS;AACvB,cAAc,cAAc;AAC5B,cAAc,QAAQ;AACtB,cAAc,iBAAiB;AAC/B,SAAQC,WAAW,QAAO,UAAU;AACpC,cAAc,WAAW;AACzB,cAAc,YAAY;AAC1B,cAAc,SAAS","ignoreList":[]}

package/dist/styles/breakpoints.d.ts

@@ -1,6 +1,6 @@
-declare const BREAKPOINTS: {
-    SMALL: string;
-    MEDIUM: string;
-    LARGE: string;
-};
-export default BREAKPOINTS;
+declare const BREAKPOINTS: {
+    SMALL: string;
+    MEDIUM: string;
+    LARGE: string;
+};
+export default BREAKPOINTS;

package/dist/styles/colors.d.ts

@@ -1,90 +1,90 @@
-declare const COLORS: {
-    black: string;
-    white: string;
-    grey: string;
-    primary: string;
-    accent1: string;
-    accent2: string;
-    correct: string;
-    warning: string;
-    critical: string;
-    primary_20: string;
-    primary_50: string;
-    primary_100: string;
-    primary_200: string;
-    primary_300: string;
-    primary_400: string;
-    primary_500: string;
-    primary_600: string;
-    primary_700: string;
-    primary_800: string;
-    accent1_20: string;
-    accent1_50: string;
-    accent1_100: string;
-    accent1_200: string;
-    accent1_300: string;
-    accent1_400: string;
-    accent1_500: string;
-    accent1_600: string;
-    accent1_700: string;
-    accent1_800: string;
-    accent2_20: string;
-    accent2_50: string;
-    accent2_100: string;
-    accent2_200: string;
-    accent2_300: string;
-    accent2_400: string;
-    accent2_500: string;
-    accent2_600: string;
-    accent2_700: string;
-    accent2_800: string;
-    correct_20: string;
-    correct_50: string;
-    correct_100: string;
-    correct_200: string;
-    correct_300: string;
-    correct_400: string;
-    correct_500: string;
-    correct_600: string;
-    correct_700: string;
-    correct_800: string;
-    warning_20: string;
-    warning_50: string;
-    warning_100: string;
-    warning_200: string;
-    warning_300: string;
-    warning_400: string;
-    warning_500: string;
-    warning_600: string;
-    warning_700: string;
-    warning_800: string;
-    critical_20: string;
-    critical_50: string;
-    critical_100: string;
-    critical_200: string;
-    critical_300: string;
-    critical_400: string;
-    critical_500: string;
-    critical_600: string;
-    critical_700: string;
-    critical_800: string;
-    neutral_20: string;
-    neutral_50: string;
-    neutral_100: string;
-    neutral_200: string;
-    neutral_300: string;
-    neutral_400: string;
-    neutral_500: string;
-    neutral_600: string;
-    neutral_700: string;
-    neutral_800: string;
-    focus: string;
-    focus_25: string;
-    white_gradient: string;
-    toast_info: string;
-    toast_success: string;
-    toast_warning: string;
-    toast_error: string;
-    getColor: (name: string, theme: any) => string;
-};
-export default COLORS;
+declare const COLORS: {
+    black: string;
+    white: string;
+    grey: string;
+    primary: string;
+    accent1: string;
+    accent2: string;
+    correct: string;
+    warning: string;
+    critical: string;
+    primary_20: string;
+    primary_50: string;
+    primary_100: string;
+    primary_200: string;
+    primary_300: string;
+    primary_400: string;
+    primary_500: string;
+    primary_600: string;
+    primary_700: string;
+    primary_800: string;
+    accent1_20: string;
+    accent1_50: string;
+    accent1_100: string;
+    accent1_200: string;
+    accent1_300: string;
+    accent1_400: string;
+    accent1_500: string;
+    accent1_600: string;
+    accent1_700: string;
+    accent1_800: string;
+    accent2_20: string;
+    accent2_50: string;
+    accent2_100: string;
+    accent2_200: string;
+    accent2_300: string;
+    accent2_400: string;
+    accent2_500: string;
+    accent2_600: string;
+    accent2_700: string;
+    accent2_800: string;
+    correct_20: string;
+    correct_50: string;
+    correct_100: string;
+    correct_200: string;
+    correct_300: string;
+    correct_400: string;
+    correct_500: string;
+    correct_600: string;
+    correct_700: string;
+    correct_800: string;
+    warning_20: string;
+    warning_50: string;
+    warning_100: string;
+    warning_200: string;
+    warning_300: string;
+    warning_400: string;
+    warning_500: string;
+    warning_600: string;
+    warning_700: string;
+    warning_800: string;
+    critical_20: string;
+    critical_50: string;
+    critical_100: string;
+    critical_200: string;
+    critical_300: string;
+    critical_400: string;
+    critical_500: string;
+    critical_600: string;
+    critical_700: string;
+    critical_800: string;
+    neutral_20: string;
+    neutral_50: string;
+    neutral_100: string;
+    neutral_200: string;
+    neutral_300: string;
+    neutral_400: string;
+    neutral_500: string;
+    neutral_600: string;
+    neutral_700: string;
+    neutral_800: string;
+    focus: string;
+    focus_25: string;
+    white_gradient: string;
+    toast_info: string;
+    toast_success: string;
+    toast_warning: string;
+    toast_error: string;
+    getColor: (name: string, theme: any) => string;
+};
+export default COLORS;

package/dist/styles/focus-styles.cjs

@@ -1,14 +1,21 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.invertedFocusStyles = exports.focusStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styledComponents = require("styled-components");
 var _zIndexes = require("./z-indexes");
-var _templateObject, _templateObject2;
-const focusStyles = exports.focusStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: 4px solid black;\n  outline-offset: 2px;\n  border-radius: 2px;\n  z-index: ", ";\n"])), _zIndexes.Z_INDEXES.focus);
-const invertedFocusStyles = exports.invertedFocusStyles = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  outline: 4px solid white;\n  outline-offset: 2px;\n  border-radius: 2px;\n  z-index: ", ";\n"])), _zIndexes.Z_INDEXES.focus);
+const focusStyles = exports.focusStyles = (0, _styledComponents.css)`
+  outline: 4px solid black;
+  outline-offset: 2px;
+  border-radius: 2px;
+  z-index: ${_zIndexes.Z_INDEXES.focus};
+`;
+const invertedFocusStyles = exports.invertedFocusStyles = (0, _styledComponents.css)`
+  outline: 4px solid white;
+  outline-offset: 2px;
+  border-radius: 2px;
+  z-index: ${_zIndexes.Z_INDEXES.focus};
+`;
 //# sourceMappingURL=focus-styles.cjs.map

package/dist/styles/focus-styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"focus-styles.cjs","names":["_styledComponents","require","_zIndexes","_templateObject","_templateObject2","focusStyles","exports","css","_taggedTemplateLiteral2","default","Z_INDEXES","focus","invertedFocusStyles"],"sources":["../../src/styles/focus-styles.tsx"],"sourcesContent":["import {css} from 'styled-components';\r\nimport {Z_INDEXES} from './z-indexes';\r\n\r\nexport const focusStyles = css`\r\n  outline: 4px solid black;\r\n  outline-offset: 2px;\r\n  border-radius: 2px;\r\n  z-index: ${Z_INDEXES.focus};\r\n`;\r\n\r\nexport const invertedFocusStyles = css`\r\n  outline: 4px solid white;\r\n  outline-offset: 2px;\r\n  border-radius: 2px;\r\n  z-index: ${Z_INDEXES.focus};\r\n`;\r\n"],"mappings":";;;;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AAAsC,IAAAE,eAAA,EAAAC,gBAAA;AAE/B,MAAMC,WAAW,GAAAC,OAAA,CAAAD,WAAA,OAAGE,qBAAG,EAAAJ,eAAA,KAAAA,eAAA,OAAAK,uBAAA,CAAAC,OAAA,0GAIjBC,mBAAS,CAACC,KAAK,CAC3B;AAEM,MAAMC,mBAAmB,GAAAN,OAAA,CAAAM,mBAAA,OAAGL,qBAAG,EAAAH,gBAAA,KAAAA,gBAAA,OAAAI,uBAAA,CAAAC,OAAA,0GAIzBC,mBAAS,CAACC,KAAK,CAC3B","ignoreList":[]}
+{"version":3,"file":"focus-styles.cjs","names":["_styledComponents","require","_zIndexes","focusStyles","exports","css","Z_INDEXES","focus","invertedFocusStyles"],"sources":["../../src/styles/focus-styles.tsx"],"sourcesContent":["import {css} from 'styled-components';\r\nimport {Z_INDEXES} from './z-indexes';\r\n\r\nexport const focusStyles = css`\r\n  outline: 4px solid black;\r\n  outline-offset: 2px;\r\n  border-radius: 2px;\r\n  z-index: ${Z_INDEXES.focus};\r\n`;\r\n\r\nexport const invertedFocusStyles = css`\r\n  outline: 4px solid white;\r\n  outline-offset: 2px;\r\n  border-radius: 2px;\r\n  z-index: ${Z_INDEXES.focus};\r\n`;\r\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AAEO,MAAME,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,IAAAE,qBAAG;AAC9B;AACA;AACA;AACA,aAAaC,mBAAS,CAACC,KAAK;AAC5B,CAAC;AAEM,MAAMC,mBAAmB,GAAAJ,OAAA,CAAAI,mBAAA,GAAG,IAAAH,qBAAG;AACtC;AACA;AACA;AACA,aAAaC,mBAAS,CAACC,KAAK;AAC5B,CAAC","ignoreList":[]}

package/dist/styles/focus-styles.d.ts

@@ -1,2 +1,2 @@
-export declare const focusStyles: import("styled-components").RuleSet<object>;
-export declare const invertedFocusStyles: import("styled-components").RuleSet<object>;
+export declare const focusStyles: import("styled-components").RuleSet<object>;
+export declare const invertedFocusStyles: import("styled-components").RuleSet<object>;

package/dist/styles/focus-styles.js

@@ -1,7 +1,15 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 import { css } from 'styled-components';
 import { Z_INDEXES } from './z-indexes';
-export const focusStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: 4px solid black;\n  outline-offset: 2px;\n  border-radius: 2px;\n  z-index: ", ";\n"])), Z_INDEXES.focus);
-export const invertedFocusStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  outline: 4px solid white;\n  outline-offset: 2px;\n  border-radius: 2px;\n  z-index: ", ";\n"])), Z_INDEXES.focus);
+export const focusStyles = css`
+  outline: 4px solid black;
+  outline-offset: 2px;
+  border-radius: 2px;
+  z-index: ${Z_INDEXES.focus};
+`;
+export const invertedFocusStyles = css`
+  outline: 4px solid white;
+  outline-offset: 2px;
+  border-radius: 2px;
+  z-index: ${Z_INDEXES.focus};
+`;
 //# sourceMappingURL=focus-styles.js.map

package/dist/styles/focus-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus-styles.js","names":["css","Z_INDEXES","focusStyles","_templateObject","_taggedTemplateLiteral","focus","invertedFocusStyles","_templateObject2"],"sources":["../../src/styles/focus-styles.tsx"],"sourcesContent":["import {css} from 'styled-components';\r\nimport {Z_INDEXES} from './z-indexes';\r\n\r\nexport const focusStyles = css`\r\n  outline: 4px solid black;\r\n  outline-offset: 2px;\r\n  border-radius: 2px;\r\n  z-index: ${Z_INDEXES.focus};\r\n`;\r\n\r\nexport const invertedFocusStyles = css`\r\n  outline: 4px solid white;\r\n  outline-offset: 2px;\r\n  border-radius: 2px;\r\n  z-index: ${Z_INDEXES.focus};\r\n`;\r\n"],"mappings":";;AAAA,SAAQA,GAAG,QAAO,mBAAmB;AACrC,SAAQC,SAAS,QAAO,aAAa;AAErC,OAAO,MAAMC,WAAW,GAAGF,GAAG,CAAAG,eAAA,KAAAA,eAAA,GAAAC,sBAAA,yGAIjBH,SAAS,CAACI,KAAK,CAC3B;AAED,OAAO,MAAMC,mBAAmB,GAAGN,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAH,sBAAA,yGAIzBH,SAAS,CAACI,KAAK,CAC3B","ignoreList":[]}
+{"version":3,"file":"focus-styles.js","names":["css","Z_INDEXES","focusStyles","focus","invertedFocusStyles"],"sources":["../../src/styles/focus-styles.tsx"],"sourcesContent":["import {css} from 'styled-components';\r\nimport {Z_INDEXES} from './z-indexes';\r\n\r\nexport const focusStyles = css`\r\n  outline: 4px solid black;\r\n  outline-offset: 2px;\r\n  border-radius: 2px;\r\n  z-index: ${Z_INDEXES.focus};\r\n`;\r\n\r\nexport const invertedFocusStyles = css`\r\n  outline: 4px solid white;\r\n  outline-offset: 2px;\r\n  border-radius: 2px;\r\n  z-index: ${Z_INDEXES.focus};\r\n`;\r\n"],"mappings":"AAAA,SAAQA,GAAG,QAAO,mBAAmB;AACrC,SAAQC,SAAS,QAAO,aAAa;AAErC,OAAO,MAAMC,WAAW,GAAGF,GAAG;AAC9B;AACA;AACA;AACA,aAAaC,SAAS,CAACE,KAAK;AAC5B,CAAC;AAED,OAAO,MAAMC,mBAAmB,GAAGJ,GAAG;AACtC;AACA;AACA;AACA,aAAaC,SAAS,CAACE,KAAK;AAC5B,CAAC","ignoreList":[]}

package/dist/styles/global.cjs

@@ -5,28 +5,86 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _colors = _interopRequireDefault(require("./colors"));
 var _typography = require("./typography");
 var _figmaSvg = require("@laerdal/figma-svg");
 var _styledComponents = require("styled-components");
-var _templateObject;
-const resizeIcon = props => btoa(_figmaSvg.SystemIcons.ExtendTextArea.replace("viewBox=\"0 0 24 24\"", "viewBox='0 0 26 26'").replace('fill="#1F1F1F"', "fill=\"".concat(_colors.default.getColor('neutral_600', props.theme), "\"")));
-const globalStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  html,\n  body {\n    height: 100%;\n    font-family: '", "', sans-serif;\n    color: ", ";\n    -webkit-font-smoothing: antialiased;\n  }\n\n  [lang^=\"ja\" i] {\n    font-family: ", ", Noto Sans, Noto Sans JP, sans-serif;\n  }\n  \n  [lang^=\"ko\" i] {\n    font-family: ", ", Noto Sans, Noto Sans KR, sans-serif;\n  }\n  \n  [lang^=\"zh\" i] {\n    font-family: ", ", Noto Sans, Noto Sans SC, sans-serif;\n  }\n  \n  [lang=\"zh-cht\" i],\n  [lang=\"zh-hant\" i],\n  [lang=\"zh-hk\" i],\n  [lang=\"zh-mo\" i],\n  [lang=\"zh-tw\" i] {\n    font-family: ", ", Noto Sans, Noto Sans TC, sans-serif;\n  }\n\n\n  body {\n    margin: 0;\n    padding: 0;\n  }\n\n  main,\n  aside,\n  details {\n    display: block;\n  }\n\n  summary {\n    display: block;\n  }\n\n  #root {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  button,\n  input,\n  label {\n    font-family: inherit;\n  }\n\n  .react-grid-item.react-grid-placeholder {\n    background: ", " !important;\n    opacity: 1 !important;\n  }\n\n  .react-resizable-handle {\n    background-image: none !important;\n  }\n\n  .react-resizable-handle::after {\n    border: none !important;\n  }\n  \n  ::-webkit-resizer {\n    background-image: url(\"data:image/svg+xml;base64,", "\");\n  }\n  \n  ", "\n"])), props => {
-  var _props$theme$fonts, _props$theme;
-  return (_props$theme$fonts = (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.fonts) !== null && _props$theme$fonts !== void 0 ? _props$theme$fonts : 'Lato';
-}, props => _colors.default.getColor('black', props.theme), props => {
-  var _props$theme$fonts2, _props$theme2;
-  return (_props$theme$fonts2 = (_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.fonts) !== null && _props$theme$fonts2 !== void 0 ? _props$theme$fonts2 : 'Lato';
-}, props => {
-  var _props$theme$fonts3, _props$theme3;
-  return (_props$theme$fonts3 = (_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.fonts) !== null && _props$theme$fonts3 !== void 0 ? _props$theme$fonts3 : 'Lato';
-}, props => {
-  var _props$theme$fonts4, _props$theme4;
-  return (_props$theme$fonts4 = (_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.fonts) !== null && _props$theme$fonts4 !== void 0 ? _props$theme$fonts4 : 'Lato';
-}, props => {
-  var _props$theme$fonts5, _props$theme5;
-  return (_props$theme$fonts5 = (_props$theme5 = props.theme) === null || _props$theme5 === void 0 ? void 0 : _props$theme5.fonts) !== null && _props$theme$fonts5 !== void 0 ? _props$theme$fonts5 : 'Lato';
-}, props => _colors.default.getColor('primary_100', props.theme), props => resizeIcon(props), _typography.Typography);
+const resizeIcon = props => btoa(_figmaSvg.SystemIcons.ExtendTextArea.replace("viewBox=\"0 0 24 24\"", "viewBox='0 0 26 26'").replace('fill="#1F1F1F"', `fill="${_colors.default.getColor('neutral_600', props.theme)}"`));
+const globalStyles = (0, _styledComponents.css)`
+  html,
+  body {
+    height: 100%;
+    font-family: '${props => props.theme?.fonts ?? 'Lato'}', sans-serif;
+    color: ${props => _colors.default.getColor('black', props.theme)};
+    -webkit-font-smoothing: antialiased;
+  }
+
+  [lang^="ja" i] {
+    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans JP, sans-serif;
+  }
+  
+  [lang^="ko" i] {
+    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans KR, sans-serif;
+  }
+  
+  [lang^="zh" i] {
+    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans SC, sans-serif;
+  }
+  
+  [lang="zh-cht" i],
+  [lang="zh-hant" i],
+  [lang="zh-hk" i],
+  [lang="zh-mo" i],
+  [lang="zh-tw" i] {
+    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans TC, sans-serif;
+  }
+
+
+  body {
+    margin: 0;
+    padding: 0;
+  }
+
+  main,
+  aside,
+  details {
+    display: block;
+  }
+
+  summary {
+    display: block;
+  }
+
+  #root {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  button,
+  input,
+  label {
+    font-family: inherit;
+  }
+
+  .react-grid-item.react-grid-placeholder {
+    background: ${props => _colors.default.getColor('primary_100', props.theme)} !important;
+    opacity: 1 !important;
+  }
+
+  .react-resizable-handle {
+    background-image: none !important;
+  }
+
+  .react-resizable-handle::after {
+    border: none !important;
+  }
+  
+  ::-webkit-resizer {
+    background-image: url("data:image/svg+xml;base64,${props => resizeIcon(props)}");
+  }
+  
+  ${_typography.Typography}
+`;
 var _default = exports.default = globalStyles;
 //# sourceMappingURL=global.cjs.map

package/dist/styles/global.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"global.cjs","names":["_colors","_interopRequireDefault","require","_typography","_figmaSvg","_styledComponents","_templateObject","resizeIcon","props","btoa","SystemIcons","ExtendTextArea","replace","concat","COLORS","getColor","theme","globalStyles","css","_taggedTemplateLiteral2","default","_props$theme$fonts","_props$theme","fonts","_props$theme$fonts2","_props$theme2","_props$theme$fonts3","_props$theme3","_props$theme$fonts4","_props$theme4","_props$theme$fonts5","_props$theme5","Typography","_default","exports"],"sources":["../../src/styles/global.ts"],"sourcesContent":["import COLORS from './colors';\r\nimport {Typography} from \"./typography\";\r\nimport {SystemIcons} from \"@laerdal/figma-svg\";\r\nimport { css } from 'styled-components';\r\n\r\nconst resizeIcon = (props: any) => btoa(SystemIcons.ExtendTextArea.replace(\"viewBox=\\\"0 0 24 24\\\"\", \"viewBox='0 0 26 26'\")\r\n  .replace('fill=\"#1F1F1F\"', `fill=\"${COLORS.getColor('neutral_600', props.theme)}\"`));\r\n\r\nconst globalStyles = css`\r\n  html,\r\n  body {\r\n    height: 100%;\r\n    font-family: '${props => props.theme?.fonts ?? 'Lato'}', sans-serif;\r\n    color: ${props => COLORS.getColor('black', props.theme)};\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  [lang^=\"ja\" i] {\r\n    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans JP, sans-serif;\r\n  }\r\n  \r\n  [lang^=\"ko\" i] {\r\n    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans KR, sans-serif;\r\n  }\r\n  \r\n  [lang^=\"zh\" i] {\r\n    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans SC, sans-serif;\r\n  }\r\n  \r\n  [lang=\"zh-cht\" i],\r\n  [lang=\"zh-hant\" i],\r\n  [lang=\"zh-hk\" i],\r\n  [lang=\"zh-mo\" i],\r\n  [lang=\"zh-tw\" i] {\r\n    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans TC, sans-serif;\r\n  }\r\n\r\n\r\n  body {\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  main,\r\n  aside,\r\n  details {\r\n    display: block;\r\n  }\r\n\r\n  summary {\r\n    display: block;\r\n  }\r\n\r\n  #root {\r\n    height: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  button,\r\n  input,\r\n  label {\r\n    font-family: inherit;\r\n  }\r\n\r\n  .react-grid-item.react-grid-placeholder {\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)} !important;\r\n    opacity: 1 !important;\r\n  }\r\n\r\n  .react-resizable-handle {\r\n    background-image: none !important;\r\n  }\r\n\r\n  .react-resizable-handle::after {\r\n    border: none !important;\r\n  }\r\n  \r\n  ::-webkit-resizer {\r\n    background-image: url(\"data:image/svg+xml;base64,${props => resizeIcon(props)}\");\r\n  }\r\n  \r\n  ${Typography}\r\n`;\r\n\r\nexport default globalStyles;\r\n"],"mappings":";;;;;;;;AAAA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AAAwC,IAAAI,eAAA;AAExC,MAAMC,UAAU,GAAIC,KAAU,IAAKC,IAAI,CAACC,qBAAW,CAACC,cAAc,CAACC,OAAO,CAAC,uBAAuB,EAAE,qBAAqB,CAAC,CACvHA,OAAO,CAAC,gBAAgB,YAAAC,MAAA,CAAWC,eAAM,CAACC,QAAQ,CAAC,aAAa,EAAEP,KAAK,CAACQ,KAAK,CAAC,OAAG,CAAC,CAAC;AAEtF,MAAMC,YAAY,OAAGC,qBAAG,EAAAZ,eAAA,KAAAA,eAAA,OAAAa,uBAAA,CAAAC,OAAA,4wCAIJZ,KAAK;EAAA,IAAAa,kBAAA,EAAAC,YAAA;EAAA,QAAAD,kBAAA,IAAAC,YAAA,GAAId,KAAK,CAACQ,KAAK,cAAAM,YAAA,uBAAXA,YAAA,CAAaC,KAAK,cAAAF,kBAAA,cAAAA,kBAAA,GAAI,MAAM;AAAA,GAC5Cb,KAAK,IAAIM,eAAM,CAACC,QAAQ,CAAC,OAAO,EAAEP,KAAK,CAACQ,KAAK,CAAC,EAKxCR,KAAK;EAAA,IAAAgB,mBAAA,EAAAC,aAAA;EAAA,QAAAD,mBAAA,IAAAC,aAAA,GAAIjB,KAAK,CAACQ,KAAK,cAAAS,aAAA,uBAAXA,aAAA,CAAaF,KAAK,cAAAC,mBAAA,cAAAA,mBAAA,GAAI,MAAM;AAAA,GAIrChB,KAAK;EAAA,IAAAkB,mBAAA,EAAAC,aAAA;EAAA,QAAAD,mBAAA,IAAAC,aAAA,GAAInB,KAAK,CAACQ,KAAK,cAAAW,aAAA,uBAAXA,aAAA,CAAaJ,KAAK,cAAAG,mBAAA,cAAAA,mBAAA,GAAI,MAAM;AAAA,GAIrClB,KAAK;EAAA,IAAAoB,mBAAA,EAAAC,aAAA;EAAA,QAAAD,mBAAA,IAAAC,aAAA,GAAIrB,KAAK,CAACQ,KAAK,cAAAa,aAAA,uBAAXA,aAAA,CAAaN,KAAK,cAAAK,mBAAA,cAAAA,mBAAA,GAAI,MAAM;AAAA,GAQrCpB,KAAK;EAAA,IAAAsB,mBAAA,EAAAC,aAAA;EAAA,QAAAD,mBAAA,IAAAC,aAAA,GAAIvB,KAAK,CAACQ,KAAK,cAAAe,aAAA,uBAAXA,aAAA,CAAaR,KAAK,cAAAO,mBAAA,cAAAA,mBAAA,GAAI,MAAM;AAAA,GAgCtCtB,KAAK,IAAIM,eAAM,CAACC,QAAQ,CAAC,aAAa,EAAEP,KAAK,CAACQ,KAAK,CAAC,EAafR,KAAK,IAAID,UAAU,CAACC,KAAK,CAAC,EAG7EwB,sBAAU,CACb;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAd,OAAA,GAEaH,YAAY","ignoreList":[]}
+{"version":3,"file":"global.cjs","names":["_colors","_interopRequireDefault","require","_typography","_figmaSvg","_styledComponents","resizeIcon","props","btoa","SystemIcons","ExtendTextArea","replace","COLORS","getColor","theme","globalStyles","css","fonts","Typography","_default","exports","default"],"sources":["../../src/styles/global.ts"],"sourcesContent":["import COLORS from './colors';\r\nimport {Typography} from \"./typography\";\r\nimport {SystemIcons} from \"@laerdal/figma-svg\";\r\nimport { css } from 'styled-components';\r\n\r\nconst resizeIcon = (props: any) => btoa(SystemIcons.ExtendTextArea.replace(\"viewBox=\\\"0 0 24 24\\\"\", \"viewBox='0 0 26 26'\")\r\n  .replace('fill=\"#1F1F1F\"', `fill=\"${COLORS.getColor('neutral_600', props.theme)}\"`));\r\n\r\nconst globalStyles = css`\r\n  html,\r\n  body {\r\n    height: 100%;\r\n    font-family: '${props => props.theme?.fonts ?? 'Lato'}', sans-serif;\r\n    color: ${props => COLORS.getColor('black', props.theme)};\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  [lang^=\"ja\" i] {\r\n    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans JP, sans-serif;\r\n  }\r\n  \r\n  [lang^=\"ko\" i] {\r\n    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans KR, sans-serif;\r\n  }\r\n  \r\n  [lang^=\"zh\" i] {\r\n    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans SC, sans-serif;\r\n  }\r\n  \r\n  [lang=\"zh-cht\" i],\r\n  [lang=\"zh-hant\" i],\r\n  [lang=\"zh-hk\" i],\r\n  [lang=\"zh-mo\" i],\r\n  [lang=\"zh-tw\" i] {\r\n    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans TC, sans-serif;\r\n  }\r\n\r\n\r\n  body {\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  main,\r\n  aside,\r\n  details {\r\n    display: block;\r\n  }\r\n\r\n  summary {\r\n    display: block;\r\n  }\r\n\r\n  #root {\r\n    height: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  button,\r\n  input,\r\n  label {\r\n    font-family: inherit;\r\n  }\r\n\r\n  .react-grid-item.react-grid-placeholder {\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)} !important;\r\n    opacity: 1 !important;\r\n  }\r\n\r\n  .react-resizable-handle {\r\n    background-image: none !important;\r\n  }\r\n\r\n  .react-resizable-handle::after {\r\n    border: none !important;\r\n  }\r\n  \r\n  ::-webkit-resizer {\r\n    background-image: url(\"data:image/svg+xml;base64,${props => resizeIcon(props)}\");\r\n  }\r\n  \r\n  ${Typography}\r\n`;\r\n\r\nexport default globalStyles;\r\n"],"mappings":";;;;;;;AAAA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AAEA,MAAMI,UAAU,GAAIC,KAAU,IAAKC,IAAI,CAACC,qBAAW,CAACC,cAAc,CAACC,OAAO,CAAC,uBAAuB,EAAE,qBAAqB,CAAC,CACvHA,OAAO,CAAC,gBAAgB,EAAE,SAASC,eAAM,CAACC,QAAQ,CAAC,aAAa,EAAEN,KAAK,CAACO,KAAK,CAAC,GAAG,CAAC,CAAC;AAEtF,MAAMC,YAAY,GAAG,IAAAC,qBAAG;AACxB;AACA;AACA;AACA,oBAAoBT,KAAK,IAAIA,KAAK,CAACO,KAAK,EAAEG,KAAK,IAAI,MAAM;AACzD,aAAaV,KAAK,IAAIK,eAAM,CAACC,QAAQ,CAAC,OAAO,EAAEN,KAAK,CAACO,KAAK,CAAC;AAC3D;AACA;AACA;AACA;AACA,mBAAmBP,KAAK,IAAIA,KAAK,CAACO,KAAK,EAAEG,KAAK,IAAI,MAAM;AACxD;AACA;AACA;AACA,mBAAmBV,KAAK,IAAIA,KAAK,CAACO,KAAK,EAAEG,KAAK,IAAI,MAAM;AACxD;AACA;AACA;AACA,mBAAmBV,KAAK,IAAIA,KAAK,CAACO,KAAK,EAAEG,KAAK,IAAI,MAAM;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmBV,KAAK,IAAIA,KAAK,CAACO,KAAK,EAAEG,KAAK,IAAI,MAAM;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBV,KAAK,IAAIK,eAAM,CAACC,QAAQ,CAAC,aAAa,EAAEN,KAAK,CAACO,KAAK,CAAC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uDAAuDP,KAAK,IAAID,UAAU,CAACC,KAAK,CAAC;AACjF;AACA;AACA,IAAIW,sBAAU;AACd,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaN,YAAY","ignoreList":[]}

package/dist/styles/global.d.ts

@@ -1,2 +1,2 @@
-declare const globalStyles: import("styled-components").RuleSet<object>;
-export default globalStyles;
+declare const globalStyles: import("styled-components").RuleSet<object>;
+export default globalStyles;

package/dist/styles/global.js

@@ -1,25 +1,83 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject;
 import COLORS from './colors';
 import { Typography } from "./typography";
 import { SystemIcons } from "@laerdal/figma-svg";
 import { css } from 'styled-components';
-const resizeIcon = props => btoa(SystemIcons.ExtendTextArea.replace("viewBox=\"0 0 24 24\"", "viewBox='0 0 26 26'").replace('fill="#1F1F1F"', "fill=\"".concat(COLORS.getColor('neutral_600', props.theme), "\"")));
-const globalStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  html,\n  body {\n    height: 100%;\n    font-family: '", "', sans-serif;\n    color: ", ";\n    -webkit-font-smoothing: antialiased;\n  }\n\n  [lang^=\"ja\" i] {\n    font-family: ", ", Noto Sans, Noto Sans JP, sans-serif;\n  }\n  \n  [lang^=\"ko\" i] {\n    font-family: ", ", Noto Sans, Noto Sans KR, sans-serif;\n  }\n  \n  [lang^=\"zh\" i] {\n    font-family: ", ", Noto Sans, Noto Sans SC, sans-serif;\n  }\n  \n  [lang=\"zh-cht\" i],\n  [lang=\"zh-hant\" i],\n  [lang=\"zh-hk\" i],\n  [lang=\"zh-mo\" i],\n  [lang=\"zh-tw\" i] {\n    font-family: ", ", Noto Sans, Noto Sans TC, sans-serif;\n  }\n\n\n  body {\n    margin: 0;\n    padding: 0;\n  }\n\n  main,\n  aside,\n  details {\n    display: block;\n  }\n\n  summary {\n    display: block;\n  }\n\n  #root {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  button,\n  input,\n  label {\n    font-family: inherit;\n  }\n\n  .react-grid-item.react-grid-placeholder {\n    background: ", " !important;\n    opacity: 1 !important;\n  }\n\n  .react-resizable-handle {\n    background-image: none !important;\n  }\n\n  .react-resizable-handle::after {\n    border: none !important;\n  }\n  \n  ::-webkit-resizer {\n    background-image: url(\"data:image/svg+xml;base64,", "\");\n  }\n  \n  ", "\n"])), props => {
-  var _props$theme$fonts, _props$theme;
-  return (_props$theme$fonts = (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.fonts) !== null && _props$theme$fonts !== void 0 ? _props$theme$fonts : 'Lato';
-}, props => COLORS.getColor('black', props.theme), props => {
-  var _props$theme$fonts2, _props$theme2;
-  return (_props$theme$fonts2 = (_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.fonts) !== null && _props$theme$fonts2 !== void 0 ? _props$theme$fonts2 : 'Lato';
-}, props => {
-  var _props$theme$fonts3, _props$theme3;
-  return (_props$theme$fonts3 = (_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.fonts) !== null && _props$theme$fonts3 !== void 0 ? _props$theme$fonts3 : 'Lato';
-}, props => {
-  var _props$theme$fonts4, _props$theme4;
-  return (_props$theme$fonts4 = (_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.fonts) !== null && _props$theme$fonts4 !== void 0 ? _props$theme$fonts4 : 'Lato';
-}, props => {
-  var _props$theme$fonts5, _props$theme5;
-  return (_props$theme$fonts5 = (_props$theme5 = props.theme) === null || _props$theme5 === void 0 ? void 0 : _props$theme5.fonts) !== null && _props$theme$fonts5 !== void 0 ? _props$theme$fonts5 : 'Lato';
-}, props => COLORS.getColor('primary_100', props.theme), props => resizeIcon(props), Typography);
+const resizeIcon = props => btoa(SystemIcons.ExtendTextArea.replace("viewBox=\"0 0 24 24\"", "viewBox='0 0 26 26'").replace('fill="#1F1F1F"', `fill="${COLORS.getColor('neutral_600', props.theme)}"`));
+const globalStyles = css`
+  html,
+  body {
+    height: 100%;
+    font-family: '${props => props.theme?.fonts ?? 'Lato'}', sans-serif;
+    color: ${props => COLORS.getColor('black', props.theme)};
+    -webkit-font-smoothing: antialiased;
+  }
+
+  [lang^="ja" i] {
+    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans JP, sans-serif;
+  }
+  
+  [lang^="ko" i] {
+    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans KR, sans-serif;
+  }
+  
+  [lang^="zh" i] {
+    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans SC, sans-serif;
+  }
+  
+  [lang="zh-cht" i],
+  [lang="zh-hant" i],
+  [lang="zh-hk" i],
+  [lang="zh-mo" i],
+  [lang="zh-tw" i] {
+    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans TC, sans-serif;
+  }
+
+
+  body {
+    margin: 0;
+    padding: 0;
+  }
+
+  main,
+  aside,
+  details {
+    display: block;
+  }
+
+  summary {
+    display: block;
+  }
+
+  #root {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  button,
+  input,
+  label {
+    font-family: inherit;
+  }
+
+  .react-grid-item.react-grid-placeholder {
+    background: ${props => COLORS.getColor('primary_100', props.theme)} !important;
+    opacity: 1 !important;
+  }
+
+  .react-resizable-handle {
+    background-image: none !important;
+  }
+
+  .react-resizable-handle::after {
+    border: none !important;
+  }
+  
+  ::-webkit-resizer {
+    background-image: url("data:image/svg+xml;base64,${props => resizeIcon(props)}");
+  }
+  
+  ${Typography}
+`;
 export default globalStyles;
 //# sourceMappingURL=global.js.map

package/dist/styles/global.js.map

@@ -1 +1 @@
-{"version":3,"file":"global.js","names":["COLORS","Typography","SystemIcons","css","resizeIcon","props","btoa","ExtendTextArea","replace","concat","getColor","theme","globalStyles","_templateObject","_taggedTemplateLiteral","_props$theme$fonts","_props$theme","fonts","_props$theme$fonts2","_props$theme2","_props$theme$fonts3","_props$theme3","_props$theme$fonts4","_props$theme4","_props$theme$fonts5","_props$theme5"],"sources":["../../src/styles/global.ts"],"sourcesContent":["import COLORS from './colors';\r\nimport {Typography} from \"./typography\";\r\nimport {SystemIcons} from \"@laerdal/figma-svg\";\r\nimport { css } from 'styled-components';\r\n\r\nconst resizeIcon = (props: any) => btoa(SystemIcons.ExtendTextArea.replace(\"viewBox=\\\"0 0 24 24\\\"\", \"viewBox='0 0 26 26'\")\r\n  .replace('fill=\"#1F1F1F\"', `fill=\"${COLORS.getColor('neutral_600', props.theme)}\"`));\r\n\r\nconst globalStyles = css`\r\n  html,\r\n  body {\r\n    height: 100%;\r\n    font-family: '${props => props.theme?.fonts ?? 'Lato'}', sans-serif;\r\n    color: ${props => COLORS.getColor('black', props.theme)};\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  [lang^=\"ja\" i] {\r\n    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans JP, sans-serif;\r\n  }\r\n  \r\n  [lang^=\"ko\" i] {\r\n    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans KR, sans-serif;\r\n  }\r\n  \r\n  [lang^=\"zh\" i] {\r\n    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans SC, sans-serif;\r\n  }\r\n  \r\n  [lang=\"zh-cht\" i],\r\n  [lang=\"zh-hant\" i],\r\n  [lang=\"zh-hk\" i],\r\n  [lang=\"zh-mo\" i],\r\n  [lang=\"zh-tw\" i] {\r\n    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans TC, sans-serif;\r\n  }\r\n\r\n\r\n  body {\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  main,\r\n  aside,\r\n  details {\r\n    display: block;\r\n  }\r\n\r\n  summary {\r\n    display: block;\r\n  }\r\n\r\n  #root {\r\n    height: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  button,\r\n  input,\r\n  label {\r\n    font-family: inherit;\r\n  }\r\n\r\n  .react-grid-item.react-grid-placeholder {\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)} !important;\r\n    opacity: 1 !important;\r\n  }\r\n\r\n  .react-resizable-handle {\r\n    background-image: none !important;\r\n  }\r\n\r\n  .react-resizable-handle::after {\r\n    border: none !important;\r\n  }\r\n  \r\n  ::-webkit-resizer {\r\n    background-image: url(\"data:image/svg+xml;base64,${props => resizeIcon(props)}\");\r\n  }\r\n  \r\n  ${Typography}\r\n`;\r\n\r\nexport default globalStyles;\r\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAM,UAAU;AAC7B,SAAQC,UAAU,QAAO,cAAc;AACvC,SAAQC,WAAW,QAAO,oBAAoB;AAC9C,SAASC,GAAG,QAAQ,mBAAmB;AAEvC,MAAMC,UAAU,GAAIC,KAAU,IAAKC,IAAI,CAACJ,WAAW,CAACK,cAAc,CAACC,OAAO,CAAC,uBAAuB,EAAE,qBAAqB,CAAC,CACvHA,OAAO,CAAC,gBAAgB,YAAAC,MAAA,CAAWT,MAAM,CAACU,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,OAAG,CAAC,CAAC;AAEtF,MAAMC,YAAY,GAAGT,GAAG,CAAAU,eAAA,KAAAA,eAAA,GAAAC,sBAAA,2wCAIJT,KAAK;EAAA,IAAAU,kBAAA,EAAAC,YAAA;EAAA,QAAAD,kBAAA,IAAAC,YAAA,GAAIX,KAAK,CAACM,KAAK,cAAAK,YAAA,uBAAXA,YAAA,CAAaC,KAAK,cAAAF,kBAAA,cAAAA,kBAAA,GAAI,MAAM;AAAA,GAC5CV,KAAK,IAAIL,MAAM,CAACU,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,EAKxCN,KAAK;EAAA,IAAAa,mBAAA,EAAAC,aAAA;EAAA,QAAAD,mBAAA,IAAAC,aAAA,GAAId,KAAK,CAACM,KAAK,cAAAQ,aAAA,uBAAXA,aAAA,CAAaF,KAAK,cAAAC,mBAAA,cAAAA,mBAAA,GAAI,MAAM;AAAA,GAIrCb,KAAK;EAAA,IAAAe,mBAAA,EAAAC,aAAA;EAAA,QAAAD,mBAAA,IAAAC,aAAA,GAAIhB,KAAK,CAACM,KAAK,cAAAU,aAAA,uBAAXA,aAAA,CAAaJ,KAAK,cAAAG,mBAAA,cAAAA,mBAAA,GAAI,MAAM;AAAA,GAIrCf,KAAK;EAAA,IAAAiB,mBAAA,EAAAC,aAAA;EAAA,QAAAD,mBAAA,IAAAC,aAAA,GAAIlB,KAAK,CAACM,KAAK,cAAAY,aAAA,uBAAXA,aAAA,CAAaN,KAAK,cAAAK,mBAAA,cAAAA,mBAAA,GAAI,MAAM;AAAA,GAQrCjB,KAAK;EAAA,IAAAmB,mBAAA,EAAAC,aAAA;EAAA,QAAAD,mBAAA,IAAAC,aAAA,GAAIpB,KAAK,CAACM,KAAK,cAAAc,aAAA,uBAAXA,aAAA,CAAaR,KAAK,cAAAO,mBAAA,cAAAA,mBAAA,GAAI,MAAM;AAAA,GAgCtCnB,KAAK,IAAIL,MAAM,CAACU,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,EAafN,KAAK,IAAID,UAAU,CAACC,KAAK,CAAC,EAG7EJ,UAAU,CACb;AAED,eAAeW,YAAY","ignoreList":[]}
+{"version":3,"file":"global.js","names":["COLORS","Typography","SystemIcons","css","resizeIcon","props","btoa","ExtendTextArea","replace","getColor","theme","globalStyles","fonts"],"sources":["../../src/styles/global.ts"],"sourcesContent":["import COLORS from './colors';\r\nimport {Typography} from \"./typography\";\r\nimport {SystemIcons} from \"@laerdal/figma-svg\";\r\nimport { css } from 'styled-components';\r\n\r\nconst resizeIcon = (props: any) => btoa(SystemIcons.ExtendTextArea.replace(\"viewBox=\\\"0 0 24 24\\\"\", \"viewBox='0 0 26 26'\")\r\n  .replace('fill=\"#1F1F1F\"', `fill=\"${COLORS.getColor('neutral_600', props.theme)}\"`));\r\n\r\nconst globalStyles = css`\r\n  html,\r\n  body {\r\n    height: 100%;\r\n    font-family: '${props => props.theme?.fonts ?? 'Lato'}', sans-serif;\r\n    color: ${props => COLORS.getColor('black', props.theme)};\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  [lang^=\"ja\" i] {\r\n    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans JP, sans-serif;\r\n  }\r\n  \r\n  [lang^=\"ko\" i] {\r\n    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans KR, sans-serif;\r\n  }\r\n  \r\n  [lang^=\"zh\" i] {\r\n    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans SC, sans-serif;\r\n  }\r\n  \r\n  [lang=\"zh-cht\" i],\r\n  [lang=\"zh-hant\" i],\r\n  [lang=\"zh-hk\" i],\r\n  [lang=\"zh-mo\" i],\r\n  [lang=\"zh-tw\" i] {\r\n    font-family: ${props => props.theme?.fonts ?? 'Lato'}, Noto Sans, Noto Sans TC, sans-serif;\r\n  }\r\n\r\n\r\n  body {\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  main,\r\n  aside,\r\n  details {\r\n    display: block;\r\n  }\r\n\r\n  summary {\r\n    display: block;\r\n  }\r\n\r\n  #root {\r\n    height: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  button,\r\n  input,\r\n  label {\r\n    font-family: inherit;\r\n  }\r\n\r\n  .react-grid-item.react-grid-placeholder {\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)} !important;\r\n    opacity: 1 !important;\r\n  }\r\n\r\n  .react-resizable-handle {\r\n    background-image: none !important;\r\n  }\r\n\r\n  .react-resizable-handle::after {\r\n    border: none !important;\r\n  }\r\n  \r\n  ::-webkit-resizer {\r\n    background-image: url(\"data:image/svg+xml;base64,${props => resizeIcon(props)}\");\r\n  }\r\n  \r\n  ${Typography}\r\n`;\r\n\r\nexport default globalStyles;\r\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,UAAU;AAC7B,SAAQC,UAAU,QAAO,cAAc;AACvC,SAAQC,WAAW,QAAO,oBAAoB;AAC9C,SAASC,GAAG,QAAQ,mBAAmB;AAEvC,MAAMC,UAAU,GAAIC,KAAU,IAAKC,IAAI,CAACJ,WAAW,CAACK,cAAc,CAACC,OAAO,CAAC,uBAAuB,EAAE,qBAAqB,CAAC,CACvHA,OAAO,CAAC,gBAAgB,EAAE,SAASR,MAAM,CAACS,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC,GAAG,CAAC,CAAC;AAEtF,MAAMC,YAAY,GAAGR,GAAG;AACxB;AACA;AACA;AACA,oBAAoBE,KAAK,IAAIA,KAAK,CAACK,KAAK,EAAEE,KAAK,IAAI,MAAM;AACzD,aAAaP,KAAK,IAAIL,MAAM,CAACS,QAAQ,CAAC,OAAO,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAC3D;AACA;AACA;AACA;AACA,mBAAmBL,KAAK,IAAIA,KAAK,CAACK,KAAK,EAAEE,KAAK,IAAI,MAAM;AACxD;AACA;AACA;AACA,mBAAmBP,KAAK,IAAIA,KAAK,CAACK,KAAK,EAAEE,KAAK,IAAI,MAAM;AACxD;AACA;AACA;AACA,mBAAmBP,KAAK,IAAIA,KAAK,CAACK,KAAK,EAAEE,KAAK,IAAI,MAAM;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmBP,KAAK,IAAIA,KAAK,CAACK,KAAK,EAAEE,KAAK,IAAI,MAAM;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBP,KAAK,IAAIL,MAAM,CAACS,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uDAAuDL,KAAK,IAAID,UAAU,CAACC,KAAK,CAAC;AACjF;AACA;AACA,IAAIJ,UAAU;AACd,CAAC;AAED,eAAeU,YAAY","ignoreList":[]}

package/dist/styles/index.cjs

@@ -43,7 +43,6 @@ Object.defineProperty(exports, "globalStyles", {
   }
 });
 exports.scrollBarStyling = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styledComponents = require("styled-components");
 var _colors = _interopRequireDefault(require("./colors"));
 var _breakpoints = _interopRequireDefault(require("./breakpoints"));
@@ -75,10 +74,38 @@ Object.keys(_focusStyles).forEach(function (key) {
     }
   });
 });
-var _templateObject;
 const scrollBarStyling = function () {
   let size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _types.Size.Small;
-  return (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  \n  &::-webkit-scrollbar {\n    width: ", ";\n    height: ", ";\n    cursor: pointer;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 6px;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n\n  /* Handle on hover */\n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  /* Handle on hover */\n  &::-webkit-scrollbar-thumb:active {\n    background: ", ";\n  }\n"])), size == _types.Size.Medium ? '6px' : '4px', size == _types.Size.Medium ? '6px' : '4px', props => _colors.default.getColor('neutral_100', props.theme), props => _colors.default.getColor('neutral_500', props.theme), props => _colors.default.getColor('primary_700', props.theme), props => _colors.default.getColor('primary_800', props.theme));
+  return (0, _styledComponents.css)`
+  
+  &::-webkit-scrollbar {
+    width: ${size == _types.Size.Medium ? '6px' : '4px'};
+    height: ${size == _types.Size.Medium ? '6px' : '4px'};
+    cursor: pointer;
+  }
+
+  /* Track */
+  &::-webkit-scrollbar-track {
+    background: ${props => _colors.default.getColor('neutral_100', props.theme)};
+    border-radius: 6px;
+  }
+
+  /* Handle */
+  &::-webkit-scrollbar-thumb {
+    background: ${props => _colors.default.getColor('neutral_500', props.theme)};
+    border-radius: 4px;
+  }
+
+  /* Handle on hover */
+  &::-webkit-scrollbar-thumb:hover {
+    background: ${props => _colors.default.getColor('primary_700', props.theme)};
+  }
+
+  /* Handle on hover */
+  &::-webkit-scrollbar-thumb:active {
+    background: ${props => _colors.default.getColor('primary_800', props.theme)};
+  }
+`;
 };
 exports.scrollBarStyling = scrollBarStyling;
 //# sourceMappingURL=index.cjs.map