@hazelcast/ui 1.0.3 → 1.2.1-next.0

package/lib/index.js

@@ -1,54 +1,56 @@
-export * from './Alert';
-export * from './Badge';
-export * from './Button';
-export * from './Calendar/Calendar';
-export * from './Calendar/CalendarRange';
-export * from './Card';
-export * from './Checkbox';
-export * from './CheckboxFormik';
-export * from './CircularProgressBar';
-export * from './Code';
-export * from './CodeEditor';
-export * from './CodeEditorFormik';
-export * from './Dialog';
-export * from './EmptyState';
-export * from './Error';
-export * from './Help';
-export * from './Icon';
-export * from './IconButton';
-export * from './InteractiveList';
-export * from './InteractiveListFormik';
-export * from './Label';
-export * from './Link';
-export * from './Loader';
-export * from './Modal';
-export * from './Notification';
-export * from './NumberBadge';
-export * from './NumberField';
-export * from './NumberFieldFormik';
-export * from './Overlay';
-export * from './PasswordField';
-export * from './PasswordFieldFormik';
-export * from './Radio';
-export * from './RadioFormik';
-export * from './RadioGroup';
-export * from './RadioGroupFormik';
-export * from './SegmentedControl';
-export * from './SegmentedControlFormik';
-export * from './SelectField';
-export * from './SelectFieldFormik';
-export * from './Slider';
-export * from './SliderFormik';
-export * from './Table/Table';
-export * from './Tabs/index';
-export * from './Terminal';
-export * from './TextArea';
-export * from './TextAreaFormik';
-export * from './TextField';
-export * from './TextFieldFormik';
-export * from './Toast';
-export * from './Toggle';
-export * from './ToggleFormik';
-export * from './Tooltip';
-export * from './TruncatedText';
+export { Alert } from './Alert';
+export { Badge } from './Badge';
+export { Button } from './Button';
+export { Calendar } from './Calendar/Calendar';
+export { CalendarRange } from './Calendar/CalendarRange';
+export { Card } from './Card';
+export { Checkbox } from './Checkbox';
+export { CheckboxFormik } from './CheckboxFormik';
+export { CircularProgressBar } from './CircularProgressBar';
+export { Code } from './Code';
+export { CodeEditor } from './CodeEditor';
+export { CodeEditorFormik } from './CodeEditorFormik';
+export { Dialog } from './Dialog';
+export { EmptyState } from './EmptyState';
+export { Error, errorId } from './Error';
+export { Help, helpTooltipId } from './Help';
+export { Icon } from './Icon';
+export { IconButton } from './IconButton';
+export { InteractiveListItem } from './InteractiveList';
+export { InteractiveListFormik } from './InteractiveListFormik';
+export { Label } from './Label';
+export { Link } from './Link';
+export { Loader } from './Loader';
+export { Modal } from './Modal';
+export { Notification } from './Notification';
+export { NumberBadge } from './NumberBadge';
+export { NumberField } from './NumberField';
+export { NumberFieldFormik } from './NumberFieldFormik';
+export { Overlay } from './Overlay';
+export { PasswordField } from './PasswordField';
+export { PasswordFieldFormik } from './PasswordFieldFormik';
+export { Popover } from './Popover';
+export { Radio } from './Radio';
+export { RadioFieldFormik } from './RadioFormik';
+export { RadioGroup } from './RadioGroup';
+export { RadioGroupFieldFormik } from './RadioGroupFormik';
+export { SegmentedControl } from './SegmentedControl';
+export { SegmentedControlFormik } from './SegmentedControlFormik';
+export { getMenuContainer, getOptionsMap, SelectField, MultiSelectField, SelectFieldFormik, MultiSelectFieldFormik, CheckableSelectField, CheckableSelectFieldFormik, } from './Select/index';
+export { SimpleTable } from './SimpleTable';
+export { Slider } from './Slider';
+export { SliderFormik } from './SliderFormik';
+export { Table } from './Table/Table';
+export { TabContext, TabPanel, Tab, TabList, TabContextProvider, TabContextProviderControlled, getPanelId, getTabId, useTabContext, tabContextDefaultValue, } from './Tabs/index';
+export { Terminal } from './Terminal';
+export { TextArea } from './TextArea';
+export { TextAreaFormik } from './TextAreaFormik';
+export { TextField } from './TextField';
+export { TextFieldFormik } from './TextFieldFormik';
+export { Toast } from './Toast';
+export { Toggle } from './Toggle';
+export { ToggleFormik } from './ToggleFormik';
+export { Tooltip } from './Tooltip';
+export { TruncatedText } from './TruncatedText';
+export { useTableCustomizableColumns, useOpenCloseState, useRefValue, useIsMounted, useOnClickOutside, containsElement } from './hooks';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,oBAAoB,CAAA;AAClC,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,mBAAmB,CAAA;AACjC,cAAc,yBAAyB,CAAA;AACvC,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,uBAAuB,CAAA;AACrC,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,0BAA0B,CAAA;AACxC,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/lib/utils/test.d.ts

@@ -0,0 +1 @@
+export declare const waitForComponentToPaint: (wrapper: any) => Promise<void>;

package/lib/utils/test.js

@@ -0,0 +1,8 @@
+import { act } from 'react-dom/test-utils';
+export const waitForComponentToPaint = async (wrapper) => {
+    await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        wrapper.update();
+    });
+};
+//# sourceMappingURL=test.js.map

package/lib/utils/test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test.js","sourceRoot":"","sources":["../../src/utils/test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAG1C,MAAM,CAAC,MAAM,uBAAuB,GAAG,KAAK,EAAE,OAAY,EAAE,EAAE;IAC5D,MAAM,GAAG,CAAC,KAAK,IAAI,EAAE;QACnB,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CACrD;QAAC,OAA6B,CAAC,MAAM,EAAE,CAAA;IAC1C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@hazelcast/ui",
-  "version": "1.0.3",
+  "version": "1.2.1-next.0+d1c9cef",
   "description": "Hazelcast design system components",
   "author": "",
   "homepage": "https://github.com/hazelcast/frontend-shared#readme",
   "license": "Apache-2.0",
   "main": "lib/index.js",
+  "module": "lib/index.js",
+  "sideEffects": false,
   "directories": {
     "lib": "lib",
     "test": "__tests__"
@@ -23,12 +25,13 @@
   },
   "scripts": {
     "compile": "shx rm -f *.tsbuildinfo && shx rm -rf lib && shx mkdir lib && shx cp -r src/* lib && shx rm -rf lib/*.{tsx,ts} && shx rm -rf lib/**/*.{tsx,ts} && tsc -p tsconfig.build.json",
-    "test": "jest",
+    "test": "jest --maxWorkers=50%",
     "test:watch": "jest --watch",
     "start": "npm run storybook",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "publish-storybook": "chromatic --storybook-build-dir storybook-static --project-token $CHROMATIC_PROJECT_TOKEN --exit-zero-on-changes",
+    "chromatic": "chromatic --project-token=CHROMATIC_PROJECT_TOKEN",
     "test:visual": "loki --verboseRenderer --requireReference --reactUri file:./storybook-static --chromeFlags='--headless --disable-gpu --hide-scrollbars --no-sandbox --allow-file-access-from-files'",
     "test:visual:approve": "loki approve",
     "generate-screenshots": "npm run build-storybook && loki update --reactUri file:./storybook-static --chromeFlags='--headless --disable-gpu --hide-scrollbars --no-sandbox --allow-file-access-from-files'",
@@ -43,68 +46,72 @@
     "url": "https://github.com/hazelcast/frontend-shared/issues"
   },
   "dependencies": {
-    "@codemirror/basic-setup": "0.18.0",
-    "@codemirror/legacy-modes": "0.18.0",
-    "@codemirror/stream-parser": "0.18.2",
-    "@codemirror/view": "0.18.8",
-    "@hazelcast/helpers": "^1.0.3",
-    "@hazelcast/services": "^1.0.3",
-    "@headlessui/react": "^1.2.0",
-    "@icons-pack/react-simple-icons": "^3.13.0",
-    "@popperjs/core": "^2.5.3",
+    "@codemirror/basic-setup": "^0.19.1",
+    "@codemirror/stream-parser": "^0.19.3",
+    "@codemirror/view": "^0.19.35",
+    "@hazelcast/helpers": "^1.2.1-next.0+d1c9cef",
+    "@hazelcast/services": "^1.2.1-next.0+d1c9cef",
+    "@headlessui/react": "^1.4.2",
+    "@icons-pack/react-simple-icons": "^4.6.1",
+    "@popperjs/core": "^2.11.0",
+    "@types/react-modal": "^3.13.1",
     "@types/react-select": "3.0.26",
-    "@types/react-table": "^7.0.28",
-    "classnames": "^2.2.6",
-    "date-fns": "^2.16.1",
+    "@types/react-table": "^7.7.9",
+    "classnames": "^2.3.1",
+    "date-fns": "^2.27.0",
     "dequal": "^2.0.2",
-    "formik": "^2.2.0",
-    "rc-tooltip": "^4.2.3",
-    "react-datepicker": "^3.4.1",
-    "react-feather": "^2.0.8",
+    "focus-trap-react": "^8.9.0",
+    "formik": "^2.2.9",
+    "rc-tooltip": "^5.1.1",
+    "react-datepicker": "^4.5.0",
+    "react-feather": "^2.0.9",
     "react-merge-refs": "^1.1.0",
-    "react-modal": "^3.12.1",
+    "react-modal": "^3.14.4",
     "react-popper": "^2.2.3",
-    "react-resize-aware": "^3.1.0",
+    "react-resize-aware": "^3.1.1",
     "react-select": "^4.1.0",
-    "react-table": "^7.6.3",
+    "react-table": "^7.7.0",
     "react-uid": "^2.3.1",
-    "react-use": "^15.3.4",
+    "react-use": "^17.3.1",
     "use-deep-compare": "^1.1.0"
   },
   "devDependencies": {
-    "@hazelcast/test-helpers": "^1.0.3",
-    "@storybook/addon-docs": "6.1.21",
-    "@storybook/addons": "6.1.21",
-    "@storybook/preset-scss": "^1.0.2",
-    "@storybook/react": "6.1.21",
-    "@storybook/theming": "6.1.21",
-    "@types/classnames": "^2.2.10",
-    "@types/enzyme": "^3.10.8",
+    "@codemirror/legacy-modes": "0.19.0",
+    "@hazelcast/test-helpers": "^1.2.1-next.0+d1c9cef",
+    "@storybook/addon-docs": "^6.4.9",
+    "@storybook/addons": "^6.4.9",
+    "@storybook/builder-webpack5": "^6.4.9",
+    "@storybook/manager-webpack5": "^6.4.9",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^6.4.9",
+    "@storybook/theming": "^6.4.9",
+    "@types/classnames": "^2.3.1",
+    "@types/enzyme": "^3.10.10",
     "@types/enzyme-adapter-react-16": "^1.0.6",
-    "@types/react": "^16.14.4",
-    "@types/react-datepicker": "^3.1.3",
-    "@types/react-dom": "^16.9.11",
-    "@types/react-modal": "^3.10.6",
+    "@types/jest-axe": "^3.5.3",
+    "@types/react": "^16.14.21",
+    "@types/react-datepicker": "^4.3.2",
+    "@types/react-dom": "^16.9.14",
     "doiuse": "^4.2.0",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.5",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "jest-axe": "^5.0.1",
     "loki": "^0.28.1",
-    "postcss": "^8.1.1",
-    "postcss-cli": "^8.1.0",
-    "postcss-reporter": "^7.0.1",
-    "postcss-scss": "^3.0.2",
+    "postcss": "^8.4.5",
+    "postcss-cli": "^9.1.0",
+    "postcss-reporter": "^7.0.4",
+    "postcss-scss": "^4.0.2",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "storybook-addon-designs": "5.4.2",
-    "stylelint": "^13.7.2",
-    "stylelint-config-prettier": "^8.0.2",
-    "stylelint-config-standard": "^20.0.0",
-    "stylelint-scss": "^3.18.0",
-    "yup": "^0.32.9"
+    "storybook-addon-designs": "^6.2.0",
+    "stylelint": "^14.1.0",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-standard": "^24.0.0",
+    "stylelint-config-standard-scss": "^3.0.0",
+    "stylelint-prettier": "^2.0.0",
+    "stylelint-scss": "^4.0.1",
+    "webpack": "^5.65.0",
+    "yup": "^0.32.11"
   },
-  "peerDependencies": {
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0"
-  },
-  "gitHead": "b3d6ca34ae5c2b4e272254b4c8b2efb0fb9d4720"
+  "gitHead": "d1c9cefabdfe1711fe2077c37a8f7b6c200c08a0"
 }

package/styles/constants/_animations.scss

@@ -1,5 +1,4 @@
 // animation globals
 
 $transitionTimeMedium: 0.2s;
-
 $durationLoader: 1.6s;

package/styles/constants/_colors.scss

@@ -2,34 +2,25 @@
 $colorPrimaryLight: #2d7de4 !default;
 $colorPrimary: #2160c0 !default;
 $colorPrimaryDark: #003b87 !default;
-
 $colorNeutralWhite: #fff !default;
 $colorNeutralLighter: #fafafa !default;
 $colorNeutralLight: #b7c1cb !default;
 $colorNeutral: #dbdbdb !default;
-
 $colorSuccessLight: #68c200 !default;
 $colorSuccess: #008a00 !default;
 $colorSuccessDark: #005c09 !default;
-
 $colorInfoLight: #cbdbff !default;
 $colorInfo: #87a7ee !default;
 $colorInfoDark: #4a71c4 !default;
-
 $colorWarningLight: #f9b721 !default;
 $colorWarning: #f47027 !default;
 $colorWarningDark: #ad6200 !default;
-
 $colorErrorLight: #e75851 !default;
 $colorError: #b00020 !default;
 $colorErrorDark: #891b15 !default;
-
 $colorText: #041a3b !default;
 $colorTextSecondary: #707482 !default;
 $colorTextSubdued: #69707d !default;
-
 $colorOverlayBackground: #f2f5f9 !default;
-
 $colorAccessibilityOutline: #9648bd !default;
-
-$colorShadow: rgba(53, 61, 73, 0.2) !default;
+$colorShadow: rgb(53 61 73 / 20%) !default;

package/styles/constants/_sizes.scss

@@ -4,53 +4,37 @@
 // Any spacing should be expressed as a multiplier if $grid
 
 $grid: 0.25rem !default;
-
 $alertWidth: 350px !default;
-
 $borderRadius: $grid * 1.25 !default;
-$borderRadiusButtonSmall: $grid * 3.75 !default;
-
+$borderRadiusButtonSmall: $grid * 5 !default;
 $borderRadiusToast: 37px !default;
-
 $borderRadiusBadge: 37px !default;
-
 $borderRadiusTimeField: 3px !default;
 
 // It does not make sense to express separator width in REMs since we do not need it to scale with the base font size
 $separatorWidth: 1px !default;
-
 $borderWidth: 1px !default;
-$borderWidthButton: 2px !default;
-
+$borderWidthButton: 1px !default;
 $outlineWidth: 2px !default;
-
 $iconStrokeWidth: 1.5px !default;
 $iconStrokeWidthBold: 3px !default;
-
 $iconSizeSmall: $grid * 4 !default;
 $iconSizeSmallMedium: $grid * 5 !default;
 $iconSizeMedium: $grid * 6 !default;
 $iconSizeLarge: $grid * 10 !default;
 $iconSizeXLarge: $grid * 12 !default;
-
 $tooltipArrowSize: 6px !default;
-
 $tooltipMaxWidth: 550px !default;
-
 $buttonMaxWidth: 370px !default;
-
 $toastMaxWidth: 580px !default;
-
 $inputHeight: $grid * 10 !default;
 $inputHeightSmall: $grid * 7.5 !default;
-
 $cardShadowSize: 1px !default;
 $cardShadowBlur: 4px !default;
-
 $selectMenuShadowSize: 1px !default;
 $selectMenuShadowBlur: 4px !default;
 
-//Overlay
+// Overlay
 $overlayContentMaxWidth: 1000px;
 
 // Modal
@@ -65,22 +49,20 @@ $dialogMinHeight: 200px !default;
 
 // border radius on left/right size of the progress tracker
 $sliderTrackBorderRadius: $grid * 2;
+
 // height of the track
 $slideTrackHeight: $grid * 2;
 $sliderThumbBorderSize: $grid * 1.5; // in rem
 $sliderThumbHoverBorderSize: 1px;
-
 $sliderThumbShadowSize: 1px;
 $sliderThumbShadowBlur: $grid;
 $sliderFillBorderSize: 1px;
-
-$emptyStateMaxWidth: 960px !important;
 $emptyStateButtonMinWidthNormal: 120px !default;
 $emptyStateButtonMinWidthLarge: 140px !default;
-
 $borderRadiusNotification: 3px;
 
 // Table column widths
-$tableColumnMinWidth: 30;
-$tableColumnWidth: 150;
-$tableColumnMaxWidth: 200;
+$tableColumnMinWidth: 60;
+$tableColumnWidth: 170;
+$tableColumnMaxWidth: 600;
+$errorHeight: $grid * 4.75;

package/styles/constants/_typography.scss

@@ -1,12 +1,11 @@
-$fontFamilyHeading: 'Ubuntu', sans-serif !default;
+$fontFamilyHeading: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
 $fontWeightHeadingLight: 300 !default;
 $fontWeightHeadingRegular: 400 !default;
 $fontWeightHeadingBold: 500 !default;
-
-$fontFamilyText: 'Open Sans', sans-serif !default;
+$fontFamilyText: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
 $fontWeightTextLight: 300 !default;
 $fontWeightTextRegular: 400 !default;
-$fontWeightTextBold: 600 !default;
+$fontWeightTextBold: 500 !default;
 
 // https://www.figma.com/file/8mVm6LTbp2Z0RaWWjTZoft/%F0%9F%90%9DHIVE?node-id=0%3A136
 $fontSizeH1: 2rem !default;
@@ -18,7 +17,6 @@ $fontSizeBodyNormal: 1rem !default;
 $fontSizeBodySmall: 0.875rem !default;
 $fontSizeBodySmaller: 0.75rem !default;
 $fontSizeBodyTiny: 0.625rem !default;
-
 $letterSpacingH1: 0.25px !default;
 $letterSpacingH2: 0 !default;
 $letterSpacingH3: 0.15px !default;
@@ -28,7 +26,6 @@ $letterSpacingBodyNormal: 0.5px !default;
 $letterSpacingBodySmall: 0.25px !default;
 $letterSpacingBodySmaller: normal !default;
 $letterSpacingBodyTiny: normal !default;
-
 $lineHeightH1: normal !default;
 $lineHeightH2: normal !default;
 $lineHeightH3: normal !default;
@@ -39,33 +36,37 @@ $lineHeightBodySmaller: normal !default;
 $lineHeightBodyTiny: normal !default;
 
 @function override($override: false) {
-  @if ($override) {
+  @if $override {
     @return '!important';
   }
+
   @return '';
 }
 
 @mixin typographyH1($override: false) {
-  font-family: $fontFamilyHeading #{override($override)}; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
+  font-family: $fontFamilyHeading #{override($override)};
   font-weight: $fontWeightHeadingBold #{override($override)};
   font-size: $fontSizeH1 #{override($override)};
   letter-spacing: $letterSpacingH1 #{override($override)};
   line-height: $lineHeightH1 #{override($override)};
 }
+
 @mixin typographyH2($override: false) {
-  font-family: $fontFamilyHeading #{override($override)}; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
+  font-family: $fontFamilyHeading #{override($override)};
   font-weight: $fontWeightHeadingBold #{override($override)};
   font-size: $fontSizeH2 #{override($override)};
   letter-spacing: $letterSpacingH2 #{override($override)};
   line-height: $lineHeightH2 #{override($override)};
 }
+
 @mixin typographyH3($override: false) {
-  font-family: $fontFamilyHeading #{override($override)}; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
+  font-family: $fontFamilyHeading #{override($override)};
   font-weight: $fontWeightHeadingBold #{override($override)};
   font-size: $fontSizeH3 #{override($override)};
   letter-spacing: $letterSpacingH3 #{override($override)};
   line-height: $lineHeightH3 #{override($override)};
 }
+
 @mixin typographyButton($size: 'medium') {
   font-family: $fontFamilyText;
   line-height: $lineHeightButton;
@@ -75,23 +76,28 @@ $lineHeightBodyTiny: normal !default;
     font-size: $fontSizeButton;
     letter-spacing: $letterSpacingButton;
   }
+
   @if $size == 'small' {
     font-weight: $fontWeightTextRegular;
     font-size: $fontSizeButtonSmall;
     letter-spacing: $letterSpacingButtonSmall;
   }
 }
+
 @mixin typographyBodyWeight($weight: 'regular') {
   @if $weight == 'regular' {
     font-weight: $fontWeightTextRegular;
   }
+
   @if $weight == 'bold' {
     font-weight: $fontWeightTextBold;
   }
+
   @if $weight == 'light' {
     font-weight: $fontWeightTextLight;
   }
 }
+
 @mixin typographyBodyNormal($weight: 'regular') {
   font-family: $fontFamilyText;
   font-size: $fontSizeBodyNormal;
@@ -100,6 +106,7 @@ $lineHeightBodyTiny: normal !default;
 
   @include typographyBodyWeight($weight);
 }
+
 @mixin typographyBodySmall($weight: 'regular') {
   font-family: $fontFamilyText;
   font-size: $fontSizeBodySmall;
@@ -108,6 +115,7 @@ $lineHeightBodyTiny: normal !default;
 
   @include typographyBodyWeight($weight);
 }
+
 @mixin typographyBodySmaller($weight: 'regular') {
   font-family: $fontFamilyText;
   font-size: $fontSizeBodySmaller;
@@ -116,6 +124,7 @@ $lineHeightBodyTiny: normal !default;
 
   @include typographyBodyWeight($weight);
 }
+
 @mixin typographyBodyTiny($weight: 'regular') {
   font-family: $fontFamilyText;
   font-size: $fontSizeBodyTiny;
@@ -131,9 +140,11 @@ $lineHeightBodyTiny: normal !default;
   h1 {
     @include typographyH1($override);
   }
+
   h2 {
     @include typographyH2($override);
   }
+
   h3 {
     @include typographyH3($override);
   }

package/styles/constants/export.module.scss

@@ -1,4 +1,4 @@
-@use "sass:meta";
+@use 'sass:meta';
 @use '.' as c;
 
 :export {