@mirai/ui 1.1.11 → 1.1.13

package/README.md

@@ -340,6 +340,7 @@ A primitive for displaying text. It receives the following props:
 - `accentLight:boolean` use theme's accent-light color
 - `action:boolean` modifying font-size
 - `bold:boolean` modifying font-weight
+- `brand:boolean` use of the CSS variables `--mirai-ui-text-brand-*`
 - `capitalize:boolean` capitalize the first word of a sentence
 - `children:string`
 - `dark:boolean` use theme's content-dark color
@@ -1381,7 +1382,7 @@ Theme.setDirection(DIRECTION_TYPE.RIGHT);
 --mirai-ui-space-XXL: 64px;
 
 /* breakpoints */
---mirai-ui-breakpoint-S: 430px;
+--mirai-ui-breakpoint-S: 480px;
 --mirai-ui-breakpoint-M: 820px;
 --mirai-ui-breakpoint-content: 1280px;
 
@@ -1433,8 +1434,8 @@ This _hook_ can help you know what type of device your application or component
 - `isLandscape:bool` orientation is landscape
 - `isPortrait:bool` orientation is portrait
 <!-- type -->
-- `isMobile:bool` is in the mobile breakpoint (<=430)
-- `isTable:bool` is in the mobile breakpoint (>430px && <=820px)
+- `isMobile:bool` is in the mobile breakpoint (<=480)
+- `isTable:bool` is in the mobile breakpoint (>480px && <=820px)
 - `isDesktop:bool` in in the desktop breakpoint (>820px)
 
 Let's see a simple use of the hook:

package/build/components/Calendar/Calendar.module.css

@@ -120,7 +120,7 @@
   color: transparent;
 }
 
-@media only screen and (min-width: 431px) {
+@media only screen and (min-width: 481px) {
   .dayTouchable:hover {
     background-color: var(--mirai-ui-calendar-selected-background);
   }

package/build/components/InputNumber/InputNumber.js

@@ -62,8 +62,6 @@ var InputNumber = function InputNumber(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     value: _primitives.ICON.REMOVE
   })), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
-    headline: true,
-    tag: "span",
     className: (0, _helpers.styles)(_InputNumberModule.default.value, disabled && _InputNumberModule.default.disabled)
   }, typeof value === 'number' ? value : min), /*#__PURE__*/_react.default.createElement(_Button.Button, {
     disabled: disabled || value >= max,

package/build/components/InputNumber/InputNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputNumber.js","names":["InputNumber","disabled","hint","label","max","min","name","required","rounded","showRequired","step","value","onChange","others","role","styles","style","inputNumber","className","texts","ICON","REMOVE","ADD","displayName","propTypes","PropTypes","bool","oneOfType","string","array","number","isRequired","func"],"sources":["../../../src/components/InputNumber/InputNumber.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON, Text, View } from '../../primitives';\nimport { Button } from '../Button';\nimport { Hint, Label } from '../InputText/partials';\nimport style from './InputNumber.module.css';\n\nconst InputNumber = ({\n  disabled,\n  hint,\n  label,\n  max,\n  min = 0,\n  name,\n  required,\n  rounded = true,\n  showRequired = false,\n  step = 1,\n  value = 0,\n  onChange = () => {},\n  ...others\n}) => (\n  <View {...others} role={others.role || 'input-number'} row className={styles(style.inputNumber, others.className)}>\n    <View className={style.texts}>\n      {label && <Label {...{ disabled, label, required: showRequired && required }} className={style.label} />}\n      {hint && <Hint {...{ disabled, hint }} className={style.hint} />}\n    </View>\n    <Button\n      disabled={disabled || value <= min}\n      rounded={rounded}\n      secondary\n      squared\n      onPress={() => onChange(value - step, name)}\n    >\n      <Icon value={ICON.REMOVE} />\n    </Button>\n    <Text headline tag=\"span\" className={styles(style.value, disabled && style.disabled)}>\n      {typeof value === 'number' ? value : min}\n    </Text>\n    <Button\n      disabled={disabled || value >= max}\n      rounded={rounded}\n      secondary\n      squared\n      onPress={() => onChange(value + step, name)}\n    >\n      <Icon value={ICON.ADD} />\n    </Button>\n  </View>\n);\n\nInputNumber.displayName = 'Component:InputNumber';\n\nInputNumber.propTypes = {\n  disabled: PropTypes.bool,\n  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n  label: PropTypes.string,\n  max: PropTypes.number,\n  min: PropTypes.number,\n  name: PropTypes.string.isRequired,\n  required: PropTypes.bool,\n  rounded: PropTypes.bool,\n  showRequired: PropTypes.bool,\n  step: PropTypes.number,\n  value: PropTypes.number,\n  onChange: PropTypes.func,\n};\n\nexport { InputNumber };\n"],"mappings":"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"}
+{"version":3,"file":"InputNumber.js","names":["InputNumber","disabled","hint","label","max","min","name","required","rounded","showRequired","step","value","onChange","others","role","styles","style","inputNumber","className","texts","ICON","REMOVE","ADD","displayName","propTypes","PropTypes","bool","oneOfType","string","array","number","isRequired","func"],"sources":["../../../src/components/InputNumber/InputNumber.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON, Text, View } from '../../primitives';\nimport { Button } from '../Button';\nimport { Hint, Label } from '../InputText/partials';\nimport style from './InputNumber.module.css';\n\nconst InputNumber = ({\n  disabled,\n  hint,\n  label,\n  max,\n  min = 0,\n  name,\n  required,\n  rounded = true,\n  showRequired = false,\n  step = 1,\n  value = 0,\n  onChange = () => {},\n  ...others\n}) => (\n  <View {...others} role={others.role || 'input-number'} row className={styles(style.inputNumber, others.className)}>\n    <View className={style.texts}>\n      {label && <Label {...{ disabled, label, required: showRequired && required }} className={style.label} />}\n      {hint && <Hint {...{ disabled, hint }} className={style.hint} />}\n    </View>\n    <Button\n      disabled={disabled || value <= min}\n      rounded={rounded}\n      secondary\n      squared\n      onPress={() => onChange(value - step, name)}\n    >\n      <Icon value={ICON.REMOVE} />\n    </Button>\n    <Text className={styles(style.value, disabled && style.disabled)}>{typeof value === 'number' ? value : min}</Text>\n    <Button\n      disabled={disabled || value >= max}\n      rounded={rounded}\n      secondary\n      squared\n      onPress={() => onChange(value + step, name)}\n    >\n      <Icon value={ICON.ADD} />\n    </Button>\n  </View>\n);\n\nInputNumber.displayName = 'Component:InputNumber';\n\nInputNumber.propTypes = {\n  disabled: PropTypes.bool,\n  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n  label: PropTypes.string,\n  max: PropTypes.number,\n  min: PropTypes.number,\n  name: PropTypes.string.isRequired,\n  required: PropTypes.bool,\n  rounded: PropTypes.bool,\n  showRequired: PropTypes.bool,\n  step: PropTypes.number,\n  value: PropTypes.number,\n  onChange: PropTypes.func,\n};\n\nexport { InputNumber };\n"],"mappings":"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"}

package/build/components/InputNumber/__tests__/__snapshots__/InputNumber.test.js.snap

@@ -35,7 +35,7 @@ exports[`component:<InputNumber> inherit:className 1`] = `
       </span>
     </button>
     <span
-      class="text headline-3 value"
+      class="text paragraph value"
     >
       0
     </span>
@@ -103,7 +103,7 @@ exports[`component:<InputNumber> prop:disabled 1`] = `
       </span>
     </button>
     <span
-      class="text headline-3 value disabled"
+      class="text paragraph value disabled"
     >
       0
     </span>
@@ -178,7 +178,7 @@ exports[`component:<InputNumber> prop:hint 1`] = `
       </span>
     </button>
     <span
-      class="text headline-3 value"
+      class="text paragraph value"
     >
       0
     </span>
@@ -252,7 +252,7 @@ exports[`component:<InputNumber> prop:label 1`] = `
       </span>
     </button>
     <span
-      class="text headline-3 value"
+      class="text paragraph value"
     >
       0
     </span>
@@ -319,7 +319,7 @@ exports[`component:<InputNumber> prop:max 1`] = `
       </span>
     </button>
     <span
-      class="text headline-3 value"
+      class="text paragraph value"
     >
       10
     </span>
@@ -388,7 +388,7 @@ exports[`component:<InputNumber> prop:min 1`] = `
       </span>
     </button>
     <span
-      class="text headline-3 value"
+      class="text paragraph value"
     >
       10
     </span>
@@ -455,7 +455,7 @@ exports[`component:<InputNumber> prop:required & prop:showRequired (true) 1`] =
       </span>
     </button>
     <span
-      class="text headline-3 value"
+      class="text paragraph value"
     >
       10
     </span>
@@ -522,7 +522,7 @@ exports[`component:<InputNumber> prop:required 1`] = `
       </span>
     </button>
     <span
-      class="text headline-3 value"
+      class="text paragraph value"
     >
       10
     </span>
@@ -589,7 +589,7 @@ exports[`component:<InputNumber> prop:rounded 1`] = `
       </span>
     </button>
     <span
-      class="text headline-3 value"
+      class="text paragraph value"
     >
       10
     </span>
@@ -656,7 +656,7 @@ exports[`component:<InputNumber> prop:value 1`] = `
       </span>
     </button>
     <span
-      class="text headline-3 value"
+      class="text paragraph value"
     >
       10
     </span>
@@ -724,7 +724,7 @@ exports[`component:<InputNumber> renders 1`] = `
       </span>
     </button>
     <span
-      class="text headline-3 value"
+      class="text paragraph value"
     >
       0
     </span>
@@ -793,7 +793,7 @@ exports[`component:<InputNumber> testId 1`] = `
       </span>
     </button>
     <span
-      class="text headline-3 value"
+      class="text paragraph value"
     >
       0
     </span>

package/build/components/InputOption/InputOption.module.css

@@ -20,13 +20,13 @@
   color: var(--mirai-ui-input-text-focus);
 }
 
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 480px) {
   .icon {
     margin: calc(calc(var(--mirai-ui-checkbox-size-mobile) - var(--mirai-ui-input-text-icon)) / 2);
   }
 }
 
-@media only screen and (min-width: 431px) {
+@media only screen and (min-width: 481px) {
   .icon {
     margin: var(--mirai-ui-border-width);
   }

package/build/components/Menu/Menu.module.css

@@ -54,13 +54,13 @@
 }
 
 /* S */
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 480px) {
   .menu {
     padding-bottom: var(--mirai-ui-space-XS);
   }
 }
 
-@media only screen and (min-width: 430px) {
+@media only screen and (min-width: 481px) {
   .menu {
     background-color: var(--mirai-ui-menu-base);
     border-radius: var(--mirai-ui-menu-border-radius);

package/build/components/Modal/Modal.module.css

@@ -97,7 +97,7 @@
 }
 
 /* S */
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 480px) {
   .container {
     align-items: flex-end;
     align-content: flex-end;
@@ -130,7 +130,7 @@
 }
 
 /* M & L */
-@media only screen and (min-width: 431px) {
+@media only screen and (min-width: 481px) {
   .container {
     align-items: center;
     top: 0;

package/build/components/Slider/Slider.module.css

@@ -105,11 +105,11 @@
 }
 
 /* S */
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 480px) {
 }
 
 /* M & L */
-@media only screen and (min-width: 431px) {
+@media only screen and (min-width: 481px) {
   .item .caption {
     transition: opacity var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
     opacity: 0;

package/build/components/Table/Table.module.css

@@ -154,7 +154,7 @@
 }
 
 /* Mobile */
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 480px) {
   .table .checkbox {
     max-width: var(--mirai-ui-checkbox-size-mobile);
     min-width: var(--mirai-ui-checkbox-size-mobile);
@@ -162,7 +162,7 @@
 }
 
 /* Table & Desktop */
-@media only screen and (min-width: 431px) {
+@media only screen and (min-width: 481px) {
   .table .checkbox {
     max-width: var(--mirai-ui-checkbox-size);
     min-width: var(--mirai-ui-checkbox-size);

package/build/components/Table/Table.stories.module.css

@@ -23,14 +23,14 @@
 }
 
 /* Mobile */
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 480px) {
   .table {
     max-height: 80svh;
   }
 }
 
 /* Tablet & Desktop  */
-@media only screen and (min-width: 431px) {
+@media only screen and (min-width: 481px) {
   .table {
     max-height: 70svh;
   }

package/build/hooks/useDevice.js

@@ -36,7 +36,7 @@ var useDevice = function useDevice() {
   return (0, _react.useMemo)(function () {
     var _Theme$get = _theme.Theme.get(),
       _Theme$get$breakpoint = _Theme$get.breakpointS,
-      breakpointS = _Theme$get$breakpoint === void 0 ? '430px' : _Theme$get$breakpoint,
+      breakpointS = _Theme$get$breakpoint === void 0 ? '480px' : _Theme$get$breakpoint,
       _Theme$get$breakpoint2 = _Theme$get.breakpointM,
       breakpointM = _Theme$get$breakpoint2 === void 0 ? '820px' : _Theme$get$breakpoint2;
     var isLandscape = resolution.width >= resolution.height;

package/build/hooks/useDevice.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDevice.js","names":["useDevice","useState","getResolution","resolution","setResolution","useEffect","handleResize","window","addEventListener","removeEventListener","useMemo","Theme","get","breakpointS","breakpointM","isLandscape","width","height","isMobile","sanitizePx","isTablet","navigator","getNavigator","isPortrait","isDesktop"],"sources":["../../src/hooks/useDevice.js"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { Theme } from '../theme';\nimport { getResolution, getNavigator, sanitizePx } from './helpers';\n\nexport const useDevice = () => {\n  const [resolution, setResolution] = useState(getResolution());\n\n  useEffect(() => {\n    const handleResize = () => setResolution(getResolution());\n\n    window.addEventListener('resize', handleResize);\n\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  return useMemo(() => {\n    const { breakpointS = '430px', breakpointM = '820px' } = Theme.get();\n    const isLandscape = resolution.width >= resolution.height;\n    const isMobile = resolution.width <= sanitizePx(breakpointS);\n    const isTablet = !isMobile && resolution.width <= sanitizePx(breakpointM);\n    const navigator = getNavigator();\n\n    return {\n      ...resolution,\n      ...navigator,\n      isLandscape,\n      isPortrait: !isLandscape,\n      isMobile,\n      isTablet,\n      isDesktop: !isMobile && !isTablet,\n    };\n  }, [resolution]);\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE7D,IAAMA,SAAS,GAAG,SAAZA,SAAS,GAAS;EAC7B,gBAAoC,IAAAC,eAAQ,EAAC,IAAAC,sBAAa,GAAE,CAAC;IAAA;IAAtDC,UAAU;IAAEC,aAAa;EAEhC,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAMC,YAAY,GAAG,SAAfA,YAAY;MAAA,OAASF,aAAa,CAAC,IAAAF,sBAAa,GAAE,CAAC;IAAA;IAEzDK,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEF,YAAY,CAAC;IAE/C,OAAO;MAAA,OAAMC,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAEH,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAAI,cAAO,EAAC,YAAM;IACnB,iBAAyDC,YAAK,CAACC,GAAG,EAAE;MAAA,mCAA5DC,WAAW;MAAXA,WAAW,sCAAG,OAAO;MAAA,oCAAEC,WAAW;MAAXA,WAAW,uCAAG,OAAO;IACpD,IAAMC,WAAW,GAAGZ,UAAU,CAACa,KAAK,IAAIb,UAAU,CAACc,MAAM;IACzD,IAAMC,QAAQ,GAAGf,UAAU,CAACa,KAAK,IAAI,IAAAG,mBAAU,EAACN,WAAW,CAAC;IAC5D,IAAMO,QAAQ,GAAG,CAACF,QAAQ,IAAIf,UAAU,CAACa,KAAK,IAAI,IAAAG,mBAAU,EAACL,WAAW,CAAC;IACzE,IAAMO,SAAS,GAAG,IAAAC,qBAAY,GAAE;IAEhC,qDACKnB,UAAU,GACVkB,SAAS;MACZN,WAAW,EAAXA,WAAW;MACXQ,UAAU,EAAE,CAACR,WAAW;MACxBG,QAAQ,EAARA,QAAQ;MACRE,QAAQ,EAARA,QAAQ;MACRI,SAAS,EAAE,CAACN,QAAQ,IAAI,CAACE;IAAQ;EAErC,CAAC,EAAE,CAACjB,UAAU,CAAC,CAAC;AAClB,CAAC;AAAC"}
+{"version":3,"file":"useDevice.js","names":["useDevice","useState","getResolution","resolution","setResolution","useEffect","handleResize","window","addEventListener","removeEventListener","useMemo","Theme","get","breakpointS","breakpointM","isLandscape","width","height","isMobile","sanitizePx","isTablet","navigator","getNavigator","isPortrait","isDesktop"],"sources":["../../src/hooks/useDevice.js"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { Theme } from '../theme';\nimport { getResolution, getNavigator, sanitizePx } from './helpers';\n\nexport const useDevice = () => {\n  const [resolution, setResolution] = useState(getResolution());\n\n  useEffect(() => {\n    const handleResize = () => setResolution(getResolution());\n\n    window.addEventListener('resize', handleResize);\n\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  return useMemo(() => {\n    const { breakpointS = '480px', breakpointM = '820px' } = Theme.get();\n    const isLandscape = resolution.width >= resolution.height;\n    const isMobile = resolution.width <= sanitizePx(breakpointS);\n    const isTablet = !isMobile && resolution.width <= sanitizePx(breakpointM);\n    const navigator = getNavigator();\n\n    return {\n      ...resolution,\n      ...navigator,\n      isLandscape,\n      isPortrait: !isLandscape,\n      isMobile,\n      isTablet,\n      isDesktop: !isMobile && !isTablet,\n    };\n  }, [resolution]);\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE7D,IAAMA,SAAS,GAAG,SAAZA,SAAS,GAAS;EAC7B,gBAAoC,IAAAC,eAAQ,EAAC,IAAAC,sBAAa,GAAE,CAAC;IAAA;IAAtDC,UAAU;IAAEC,aAAa;EAEhC,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAMC,YAAY,GAAG,SAAfA,YAAY;MAAA,OAASF,aAAa,CAAC,IAAAF,sBAAa,GAAE,CAAC;IAAA;IAEzDK,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEF,YAAY,CAAC;IAE/C,OAAO;MAAA,OAAMC,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAEH,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAAI,cAAO,EAAC,YAAM;IACnB,iBAAyDC,YAAK,CAACC,GAAG,EAAE;MAAA,mCAA5DC,WAAW;MAAXA,WAAW,sCAAG,OAAO;MAAA,oCAAEC,WAAW;MAAXA,WAAW,uCAAG,OAAO;IACpD,IAAMC,WAAW,GAAGZ,UAAU,CAACa,KAAK,IAAIb,UAAU,CAACc,MAAM;IACzD,IAAMC,QAAQ,GAAGf,UAAU,CAACa,KAAK,IAAI,IAAAG,mBAAU,EAACN,WAAW,CAAC;IAC5D,IAAMO,QAAQ,GAAG,CAACF,QAAQ,IAAIf,UAAU,CAACa,KAAK,IAAI,IAAAG,mBAAU,EAACL,WAAW,CAAC;IACzE,IAAMO,SAAS,GAAG,IAAAC,qBAAY,GAAE;IAEhC,qDACKnB,UAAU,GACVkB,SAAS;MACZN,WAAW,EAAXA,WAAW;MACXQ,UAAU,EAAE,CAACR,WAAW;MACxBG,QAAQ,EAARA,QAAQ;MACRE,QAAQ,EAARA,QAAQ;MACRI,SAAS,EAAE,CAACN,QAAQ,IAAI,CAACE;IAAQ;EAErC,CAAC,EAAE,CAACjB,UAAU,CAAC,CAAC;AAClB,CAAC;AAAC"}

package/build/primitives/Checkbox/Checkbox.module.css

@@ -56,7 +56,7 @@
 }
 
 /* S */
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 480px) {
   .checkbox {
     height: var(--mirai-ui-checkbox-size-mobile);
     width: var(--mirai-ui-checkbox-size-mobile);
@@ -69,7 +69,7 @@
 }
 
 /* M & L */
-@media only screen and (min-width: 431px) {
+@media only screen and (min-width: 481px) {
   .checkbox {
     height: var(--mirai-ui-checkbox-size);
     width: var(--mirai-ui-checkbox-size);

package/build/primitives/Radio/Radio.module.css

@@ -72,7 +72,7 @@
 }
 
 /* S */
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 480px) {
   .radio {
     height: var(--mirai-ui-radio-size-mobile);
     width: var(--mirai-ui-radio-size-mobile);
@@ -91,7 +91,7 @@
 }
 
 /* M & L */
-@media only screen and (min-width: 431px) {
+@media only screen and (min-width: 481px) {
   .radio {
     height: var(--mirai-ui-radio-size);
     width: var(--mirai-ui-radio-size);

package/build/primitives/Switch/Switch.module.css

@@ -61,7 +61,7 @@
   transform: translateX(-100%);
 }
 
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 480px) {
   .switch .area {
     height: calc(var(--mirai-ui-switch-size-mobile) + calc(var(--mirai-ui-switch-border-size) * 2));
     width: calc(var(--mirai-ui-switch-size-mobile) * 2.4);
@@ -73,7 +73,7 @@
   }
 }
 
-@media only screen and (min-width: 431px) {
+@media only screen and (min-width: 481px) {
   .switch .area {
     height: calc(var(--mirai-ui-switch-size) + calc(var(--mirai-ui-switch-border-size) * 2));
     width: calc(var(--mirai-ui-switch-size) * 2.4);

package/build/primitives/Text/Text.js

@@ -11,7 +11,7 @@ var _helpers = require("../../helpers");
 var _Primitive = require("../Primitive");
 var _helpers2 = require("./helpers");
 var _TextModule = _interopRequireDefault(require("./Text.module.css"));
-var _excluded = ["accent", "accentLight", "accentDark", "action", "bold", "capitalize", "children", "dark", "error", "headline", "info", "level", "light", "markdown", "small", "success", "tag", "tiny", "underline", "upperCase", "warning", "wide"];
+var _excluded = ["accent", "accentLight", "accentDark", "action", "bold", "brand", "capitalize", "children", "dark", "error", "headline", "info", "level", "light", "markdown", "small", "success", "tag", "tiny", "underline", "upperCase", "warning", "wide"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -26,6 +26,7 @@ var Text = function Text(_ref) {
     accentDark = _ref.accentDark,
     action = _ref.action,
     bold = _ref.bold,
+    brand = _ref.brand,
     capitalize = _ref.capitalize,
     children = _ref.children,
     dark = _ref.dark,
@@ -49,7 +50,7 @@ var Text = function Text(_ref) {
   return /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, _objectSpread(_objectSpread({}, others), {}, {
     role: others.role || 'text',
     tag: tag || (headline ? "h".concat(level) : 'span'),
-    className: (0, _helpers.styles)(_TextModule.default.text, bold && _TextModule.default.bold, capitalize && _TextModule.default.capitalize, (0, _helpers2.color)({
+    className: (0, _helpers.styles)(_TextModule.default.text, bold && _TextModule.default.bold, brand && _TextModule.default.brand, capitalize && _TextModule.default.capitalize, (0, _helpers2.color)({
       accent: accent,
       accentDark: accentDark,
       accentLight: accentLight,
@@ -70,6 +71,7 @@ Text.propTypes = {
   accentDark: _propTypes.default.bool,
   action: _propTypes.default.bool,
   bold: _propTypes.default.bool,
+  brand: _propTypes.default.bool,
   capitalize: _propTypes.default.bool,
   children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array]),
   dark: _propTypes.default.bool,

package/build/primitives/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","names":["Text","accent","accentLight","accentDark","action","bold","capitalize","children","dark","error","headline","info","level","light","markdown","small","success","tag","tiny","underline","upperCase","warning","wide","others","React","createElement","Primitive","role","className","styles","style","text","color","paragraph","parseMarkdown","displayName","propTypes","PropTypes","bool","oneOfType","string","number","array"],"sources":["../../../src/primitives/Text/Text.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport { color, parseMarkdown } from './helpers';\nimport style from './Text.module.css';\n\nconst Text = ({\n  accent,\n  accentLight,\n  accentDark,\n  action,\n  bold,\n  capitalize,\n  children,\n  dark,\n  error,\n  headline,\n  info,\n  level = 3,\n  light,\n  markdown = true,\n  small,\n  success,\n  tag,\n  tiny,\n  underline,\n  upperCase,\n  warning,\n  wide,\n  ...others\n}) =>\n  React.createElement(\n    Primitive,\n    {\n      ...others,\n      role: others.role || 'text',\n      tag: tag || (headline ? `h${level}` : 'span'),\n      className: styles(\n        style.text,\n        bold && style.bold,\n        capitalize && style.capitalize,\n        color({ accent, accentDark, accentLight, dark, error, info, light, success, warning }),\n        headline\n          ? style[`headline-${level}`]\n          : action\n          ? style.action\n          : small\n          ? style.small\n          : tiny\n          ? style.tiny\n          : style.paragraph,\n        underline && style.underline,\n        upperCase && style.upperCase,\n        wide && style.wide,\n        others.className,\n      ),\n    },\n    markdown ? parseMarkdown(children) : children,\n  );\n\nText.displayName = 'Primitive:Text';\n\nText.propTypes = {\n  accent: PropTypes.bool,\n  accentLight: PropTypes.bool,\n  accentDark: PropTypes.bool,\n  action: PropTypes.bool,\n  bold: PropTypes.bool,\n  capitalize: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),\n  dark: PropTypes.bool,\n  error: PropTypes.bool,\n  headline: PropTypes.bool,\n  info: PropTypes.bool,\n  level: PropTypes.number,\n  light: PropTypes.bool,\n  markdown: PropTypes.bool,\n  small: PropTypes.bool,\n  success: PropTypes.bool,\n  tag: PropTypes.string,\n  tiny: PropTypes.bool,\n  underline: PropTypes.bool,\n  upperCase: PropTypes.bool,\n  warning: PropTypes.bool,\n  wide: PropTypes.bool,\n};\n\nexport { Text };\n"],"mappings":"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"}
+{"version":3,"file":"Text.js","names":["Text","accent","accentLight","accentDark","action","bold","brand","capitalize","children","dark","error","headline","info","level","light","markdown","small","success","tag","tiny","underline","upperCase","warning","wide","others","React","createElement","Primitive","role","className","styles","style","text","color","paragraph","parseMarkdown","displayName","propTypes","PropTypes","bool","oneOfType","string","number","array"],"sources":["../../../src/primitives/Text/Text.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport { color, parseMarkdown } from './helpers';\nimport style from './Text.module.css';\n\nconst Text = ({\n  accent,\n  accentLight,\n  accentDark,\n  action,\n  bold,\n  brand,\n  capitalize,\n  children,\n  dark,\n  error,\n  headline,\n  info,\n  level = 3,\n  light,\n  markdown = true,\n  small,\n  success,\n  tag,\n  tiny,\n  underline,\n  upperCase,\n  warning,\n  wide,\n  ...others\n}) =>\n  React.createElement(\n    Primitive,\n    {\n      ...others,\n      role: others.role || 'text',\n      tag: tag || (headline ? `h${level}` : 'span'),\n      className: styles(\n        style.text,\n        bold && style.bold,\n        brand && style.brand,\n        capitalize && style.capitalize,\n        color({ accent, accentDark, accentLight, dark, error, info, light, success, warning }),\n        headline\n          ? style[`headline-${level}`]\n          : action\n          ? style.action\n          : small\n          ? style.small\n          : tiny\n          ? style.tiny\n          : style.paragraph,\n        underline && style.underline,\n        upperCase && style.upperCase,\n        wide && style.wide,\n        others.className,\n      ),\n    },\n    markdown ? parseMarkdown(children) : children,\n  );\n\nText.displayName = 'Primitive:Text';\n\nText.propTypes = {\n  accent: PropTypes.bool,\n  accentLight: PropTypes.bool,\n  accentDark: PropTypes.bool,\n  action: PropTypes.bool,\n  bold: PropTypes.bool,\n  brand: PropTypes.bool,\n  capitalize: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),\n  dark: PropTypes.bool,\n  error: PropTypes.bool,\n  headline: PropTypes.bool,\n  info: PropTypes.bool,\n  level: PropTypes.number,\n  light: PropTypes.bool,\n  markdown: PropTypes.bool,\n  small: PropTypes.bool,\n  success: PropTypes.bool,\n  tag: PropTypes.string,\n  tiny: PropTypes.bool,\n  underline: PropTypes.bool,\n  upperCase: PropTypes.bool,\n  warning: PropTypes.bool,\n  wide: PropTypes.bool,\n};\n\nexport { Text };\n"],"mappings":"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"}

package/build/primitives/Text/Text.module.css

@@ -18,7 +18,7 @@
   line-height: var(--mirai-ui-line-height-action);
 }
 
-.bold {
+.bold:not(.brand) {
   font-family: var(--mirai-ui-font-bold);
   font-weight: var(--mirai-ui-font-bold-weight);
 }
@@ -31,6 +31,16 @@
   text-transform: uppercase;
 }
 
+.brand {
+  font-family: var(--mirai-ui-text-brand-font);
+  font-weight: var(--mirai-ui-text-brand-font-weight);
+}
+
+.brand.bold {
+  font-family: var(--mirai-ui-text-brand-font-bold);
+  font-weight: var(--mirai-ui-text-brand-font-bold-weight);
+}
+
 .headline-1 {
   font-size: var(--mirai-ui-font-size-headline-1);
   line-height: var(--mirai-ui-line-height-headline-1);

package/build/primitives/Text/Text.stories.js

@@ -30,6 +30,7 @@ Story.args = {
   accentLight: false,
   action: false,
   bold: false,
+  brand: false,
   capitalize: false,
   children: 'children',
   childrenMarkdown: '<Text> is **capable** of _interpreting_ and *representing* [markdown](https://www.markdownguide.org/) ~~markup~~ {language}.',

package/build/primitives/Text/Text.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.stories.js","names":["title","Story","childrenMarkdown","props","storyName","args","accent","accentDark","accentLight","action","bold","capitalize","children","dark","error","headline","info","level","light","small","success","tag","tiny","underline","upperCase","warning","wide","testId","style","argTypes"],"sources":["../../../src/primitives/Text/Text.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from './Text';\n\nexport default { title: 'Primitives' };\n\nexport const Story = ({ childrenMarkdown, ...props }) => (\n  <>\n    <Text {...props} />\n    <Text {...props} children={childrenMarkdown} />\n  </>\n);\n\nStory.storyName = 'Text';\n\nStory.args = {\n  accent: false,\n  accentDark: false,\n  accentLight: false,\n  action: false,\n  bold: false,\n  capitalize: false,\n  children: 'children',\n  childrenMarkdown:\n    '<Text> is **capable** of _interpreting_ and *representing* [markdown](https://www.markdownguide.org/) ~~markup~~ {language}.',\n  dark: false,\n  error: false,\n  headline: false,\n  info: false,\n  level: 3,\n  light: false,\n  small: false,\n  success: false,\n  tag: 'span',\n  tiny: false,\n  underline: false,\n  upperCase: false,\n  warning: false,\n  wide: false,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;AAAA;AAEA;AAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,eAEf;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK;EAAA,IAAMC,gBAAgB,QAAhBA,gBAAgB;IAAKC,KAAK;EAAA,oBAChD,yEACE,6BAAC,UAAI,EAAKA,KAAK,CAAI,eACnB,6BAAC,UAAI,eAAKA,KAAK;IAAE,QAAQ,EAAED;EAAiB,GAAG,CAC9C;AAAA,CACJ;AAAC;AAEFD,KAAK,CAACG,SAAS,GAAG,MAAM;AAExBH,KAAK,CAACI,IAAI,GAAG;EACXC,MAAM,EAAE,KAAK;EACbC,UAAU,EAAE,KAAK;EACjBC,WAAW,EAAE,KAAK;EAClBC,MAAM,EAAE,KAAK;EACbC,IAAI,EAAE,KAAK;EACXC,UAAU,EAAE,KAAK;EACjBC,QAAQ,EAAE,UAAU;EACpBV,gBAAgB,EACd,8HAA8H;EAChIW,IAAI,EAAE,KAAK;EACXC,KAAK,EAAE,KAAK;EACZC,QAAQ,EAAE,KAAK;EACfC,IAAI,EAAE,KAAK;EACXC,KAAK,EAAE,CAAC;EACRC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,GAAG,EAAE,MAAM;EACXC,IAAI,EAAE,KAAK;EACXC,SAAS,EAAE,KAAK;EAChBC,SAAS,EAAE,KAAK;EAChBC,OAAO,EAAE,KAAK;EACdC,IAAI,EAAE,KAAK;EACX;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAED3B,KAAK,CAAC4B,QAAQ,GAAG,CAAC,CAAC"}
+{"version":3,"file":"Text.stories.js","names":["title","Story","childrenMarkdown","props","storyName","args","accent","accentDark","accentLight","action","bold","brand","capitalize","children","dark","error","headline","info","level","light","small","success","tag","tiny","underline","upperCase","warning","wide","testId","style","argTypes"],"sources":["../../../src/primitives/Text/Text.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from './Text';\n\nexport default { title: 'Primitives' };\n\nexport const Story = ({ childrenMarkdown, ...props }) => (\n  <>\n    <Text {...props} />\n    <Text {...props} children={childrenMarkdown} />\n  </>\n);\n\nStory.storyName = 'Text';\n\nStory.args = {\n  accent: false,\n  accentDark: false,\n  accentLight: false,\n  action: false,\n  bold: false,\n  brand: false,\n  capitalize: false,\n  children: 'children',\n  childrenMarkdown:\n    '<Text> is **capable** of _interpreting_ and *representing* [markdown](https://www.markdownguide.org/) ~~markup~~ {language}.',\n  dark: false,\n  error: false,\n  headline: false,\n  info: false,\n  level: 3,\n  light: false,\n  small: false,\n  success: false,\n  tag: 'span',\n  tiny: false,\n  underline: false,\n  upperCase: false,\n  warning: false,\n  wide: false,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;AAAA;AAEA;AAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,eAEf;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK;EAAA,IAAMC,gBAAgB,QAAhBA,gBAAgB;IAAKC,KAAK;EAAA,oBAChD,yEACE,6BAAC,UAAI,EAAKA,KAAK,CAAI,eACnB,6BAAC,UAAI,eAAKA,KAAK;IAAE,QAAQ,EAAED;EAAiB,GAAG,CAC9C;AAAA,CACJ;AAAC;AAEFD,KAAK,CAACG,SAAS,GAAG,MAAM;AAExBH,KAAK,CAACI,IAAI,GAAG;EACXC,MAAM,EAAE,KAAK;EACbC,UAAU,EAAE,KAAK;EACjBC,WAAW,EAAE,KAAK;EAClBC,MAAM,EAAE,KAAK;EACbC,IAAI,EAAE,KAAK;EACXC,KAAK,EAAE,KAAK;EACZC,UAAU,EAAE,KAAK;EACjBC,QAAQ,EAAE,UAAU;EACpBX,gBAAgB,EACd,8HAA8H;EAChIY,IAAI,EAAE,KAAK;EACXC,KAAK,EAAE,KAAK;EACZC,QAAQ,EAAE,KAAK;EACfC,IAAI,EAAE,KAAK;EACXC,KAAK,EAAE,CAAC;EACRC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,GAAG,EAAE,MAAM;EACXC,IAAI,EAAE,KAAK;EACXC,SAAS,EAAE,KAAK;EAChBC,SAAS,EAAE,KAAK;EAChBC,OAAO,EAAE,KAAK;EACdC,IAAI,EAAE,KAAK;EACX;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAED5B,KAAK,CAAC6B,QAAQ,GAAG,CAAC,CAAC"}

package/build/primitives/Text/__tests__/__snapshots__/Text.test.js.snap

@@ -120,6 +120,16 @@ exports[`primitive:<Text> prop:bold 1`] = `
 </DocumentFragment>
 `;
 
+exports[`primitive:<Text> prop:brand 1`] = `
+<DocumentFragment>
+  <span
+    class="text brand paragraph"
+  >
+    Lorem Ipsum
+  </span>
+</DocumentFragment>
+`;
+
 exports[`primitive:<Text> prop:capitalize 1`] = `
 <DocumentFragment>
   <span

package/build/theme/default.theme.css

@@ -2,10 +2,10 @@
   /* typography */
   --mirai-ui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --mirai-ui-input-font: var(--mirai-ui-font);
   --mirai-ui-font-weight: 400;
   --mirai-ui-font-bold: var(--mirai-ui-font);
   --mirai-ui-font-bold-weight: 700;
+
   --mirai-ui-font-size-headline-1: 32px;
   --mirai-ui-line-height-headline-1: 40px;
   --mirai-ui-font-size-headline-2: 24px;
@@ -72,7 +72,7 @@
   --mirai-ui-space-XXL: 64px;
 
   /* breakpoints */
-  --mirai-ui-breakpoint-S: 430px;
+  --mirai-ui-breakpoint-S: 480px;
   --mirai-ui-breakpoint-M: 820px;
   --mirai-ui-breakpoint-content: 1280px;
 
@@ -82,6 +82,7 @@
   --mirai-ui-motion-easing: cubic-bezier(0.1, 0.1, 0.25, 0.9);
 
   /* input */
+  --mirai-ui-input-font: var(--mirai-ui-font);
   --mirai-ui-input-font-size: var(--mirai-ui-font-size-paragraph);
   --mirai-ui-input-min-height: var(--mirai-ui-space-XL);
 
@@ -156,6 +157,10 @@
   --mirai-ui-switch-size-mobile: calc(var(--mirai-ui-space-L) - var(--mirai-ui-space-XXS));
 
   /* Text */
+  --mirai-ui-text-brand-font: var(--mirai-ui-font);
+  --mirai-ui-text-brand-font-weight: var(--mirai-ui-font-weight);
+  --mirai-ui-text-brand-font-bold: var(--mirai-ui-font-bold);
+  --mirai-ui-text-brand-font-bold-weight: var(--mirai-ui-font-bold-weight);
 
   /* View */
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/ui",
-  "version": "1.1.11",
+  "version": "1.1.13",
   "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
   "author": "JΛVI <hello@soyjavi.com>",
   "license": "MIT",