@loadsmart/loadsmart-ui 5.6.1 → 5.7.0

package/dist/{prop-0c635ee9.js → prop-0f94ff83.js}

@@ -1,2 +1,2 @@
 "use strict";var t=require("./toArray-b56541b4.js"),n=require("./loadsmart.theme-63c13988.js"),r=require("./theming/index.js");function e(t,e){return Object.keys(t||{}).reduce(((o,i)=>{var u;let s=t[i];if(n.isFunction(s)&&(s=s(e)),s){const t=i,n=null!==(u=r.getToken(t,e))&&void 0!==u?u:i;return[...o,n]}return o}),[]).join(" ")}function o(...t){const[n,r]=t;return null==n||!1===n||Number.isNaN(n)?r||n:"string"==typeof n&&0===n.length&&r||n}exports.conditional=function(...r){return function(o){let i=[];for(let u=0;u<r.length;u++){const s=r[u];n.isFunction(s)?i.push(s(o)):t.isObject(s)?i=i.concat(e(s,o)):s&&i.push(String(s))}return i.join(" ")}},exports.prop=function(t,n,r=o){return e=>r(e[t],n)},exports.whenProps=function(r){return function(e){const o=t.toArray(r);let i=!1;for(let r=0;r<o.length;r++){const u=o[r],s=Object.keys(u);let c=!0;for(let r=0;r<s.length&&c;r++){const o=s[r],i=n.lodash_get(e,o),l=u[o];c=Array.isArray(l)?c&&t.toArray(l).includes(i):n.isFunction(l)?c&&Boolean(l(i)):c&&l===i}i=i||c}return i}};
-//# sourceMappingURL=prop-0c635ee9.js.map
+//# sourceMappingURL=prop-0f94ff83.js.map

package/dist/{prop-0c635ee9.js.map → prop-0f94ff83.js.map}

@@ -1 +1 @@
-{"version":3,"file":"prop-0c635ee9.js","sources":["../src/tools/conditional.ts","../src/tools/prop.ts"],"sourcesContent":["import { isObject } from '@loadsmart/utils-object'\nimport { isFunction } from '@loadsmart/utils-function'\nimport type { F } from 'ts-toolbelt'\n\nimport { getToken } from 'theming'\nimport type { ThemeToken, ThemedProps } from 'theming'\nimport get from 'utils/toolset/get'\nimport toArray from 'utils/toolset/toArray'\n\ntype WhenProps<K> = K | undefined | ((value: K) => boolean | undefined)\n\nexport type When<P> = {\n  [Key in keyof P]?: WhenProps<P[Key]> | WhenProps<P[Key]>[] | undefined\n}\n\n/**\n * Utility to generate style/class name conditions based on a components props.\n * Expected prop values can be a single value, an array of values or a function/callback.\n * @example\n * ```jsx\n * whenProps({\n *  'prop-a': true, // checks `props['prop-a']` === true`\n *  'prop-b': [1, 2], // checks `toArray([1, 2]).includes(props['prop-b'])`\n *  'prop-c': (value) => value + 1 // checks `Boolean(callback(props['prop-c']))`\n *  'prop-d': Boolean // checks `Boolean(Boolean(props['prop-d']))`\n * })\n * ```\n * @param {...Object} conditions\n * @returns {(props: Object}) => boolean} Returns function that consumes component props.\n */\nexport function whenProps<P>(conditions: When<F.Narrow<P>> | When<F.Narrow<P>>[]) {\n  return function (props: P): boolean {\n    const safeConditions = toArray(conditions)\n\n    let res = false\n\n    for (let i = 0; i < safeConditions.length; i++) {\n      const condition = safeConditions[i]\n      const keys = Object.keys(condition)\n\n      let temp = true\n\n      for (let j = 0; j < keys.length && temp; j++) {\n        const key = keys[j]\n        const propValue = get(props, key) as P[keyof P]\n        const conditionValue = condition[key as keyof typeof condition]\n\n        if (Array.isArray(conditionValue)) {\n          temp = temp && toArray(conditionValue).includes(propValue)\n        } else if (isFunction(conditionValue)) {\n          temp = temp && Boolean(conditionValue(propValue))\n        } else {\n          temp = temp && (conditionValue as unknown) === propValue\n        }\n      }\n\n      res = res || temp\n    }\n\n    return res\n  }\n}\n\ntype ConditionObject<P> = Record<\n  string,\n  string | number | boolean | ((props: P) => boolean) | undefined\n>\n\nfunction handleConditionObject<P>(condition: ConditionObject<P>, props: P): string {\n  const keys = Object.keys(condition || {})\n\n  const res = keys.reduce((acc, key) => {\n    let value = condition[key]\n\n    if (isFunction(value)) {\n      value = value(props)\n    }\n\n    if (value) {\n      const tokenKey = key as ThemeToken\n      const result = (getToken(tokenKey, (props as unknown) as ThemedProps) ?? key) as string\n      return [...acc, result]\n    }\n\n    return acc\n  }, [] as string[])\n\n  return res.join(' ')\n}\n\ntype Condition<P> = number | string | ConditionObject<P> | ((props: P) => string)\n\n/**\n * Concatenate style properties or class names conditionally.\n * Conditions can be functions that consume components props,\n * objects, strings, or numbers (that will be coerced to strings).\n * @example\n * ```jsx\n * conditional(1, 'some-class', {\n *  'class-a': true,\n *  'class-b': (props) => props.showClassB,\n * }, (props) => props.className)\n * ```\n * @param conditions\n * @returns {(props: ThemedProps) => string} Returns function that consumes component props.\n */\nfunction conditional<P>(...conditions: Condition<P>[]) {\n  return function (props: P): string {\n    let classes: string[] = []\n\n    for (let i = 0; i < conditions.length; i++) {\n      const condition = conditions[i]\n\n      if (isFunction(condition)) {\n        classes.push(condition(props))\n      } else if (isObject(condition)) {\n        classes = classes.concat(handleConditionObject<P>(condition, props))\n      } else if (condition) {\n        classes.push(String(condition))\n      }\n    }\n\n    return classes.join(' ')\n  }\n}\n\nexport default conditional\n","function compare(...args: any[]): unknown {\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  const [value, defaultValue] = args\n\n  if (value == null || value === false || Number.isNaN(value)) {\n    return defaultValue || value\n  }\n\n  if (typeof value === 'string' && value.length === 0) {\n    return defaultValue || value\n  }\n\n  return value\n}\n\n/**\n * Retrieve the key value from the props object\n * @example\n * ```jsx\n * -transform: scaleY(${(props) => props.$height || 1});\n * +transform: scaleY(${prop('$height', 1)});\n * ```\n * @param name a valid property name from the object\n * @param defaultValue a fallback value in case the property value is invalid\n * @param comparatorFn a function to be used to decide between value or defaultValue\n * @returns {(props: ThemedProps) => string} Returns function that consumes component props.\n */\nfunction prop<P, K extends keyof P = keyof P>(\n  name: K,\n  defaultValue?: NonNullable<P[K]>,\n  comparatorFn = compare\n) {\n  return (props: P): P[K] => comparatorFn(props[name], defaultValue) as P[K]\n}\n\nexport default prop\n"],"names":["handleConditionObject","condition","props","Object","keys","reduce","acc","key","value","isFunction","tokenKey","result","getToken","join","compare","args","defaultValue","Number","isNaN","length","conditions","classes","i","push","isObject","concat","String","name","comparatorFn","safeConditions","toArray","res","temp","j","propValue","get","conditionValue","Array","isArray","includes","Boolean"],"mappings":"+HAoEA,SAASA,EAAyBC,EAA+BC,GAmB/D,OAlBaC,OAAOC,KAAKH,GAAa,IAErBI,QAAO,CAACC,EAAKC,WAC5B,IAAIC,EAAQP,EAAUM,GAMtB,GAJIE,aAAWD,KACbA,EAAQA,EAAMN,IAGZM,EAAO,CACT,MAAME,EAAWH,EACXI,YAAUC,WAASF,EAAWR,kBAAqCK,EACzE,MAAO,IAAID,EAAKK,GAGlB,OAAOL,IACN,IAEQO,KAAK,KCvFlB,SAASC,KAAWC,GAElB,MAAOP,EAAOQ,GAAgBD,EAE9B,OAAa,MAATP,IAA2B,IAAVA,GAAmBS,OAAOC,MAAMV,GAC5CQ,GAAgBR,EAGJ,iBAAVA,GAAuC,IAAjBA,EAAMW,QAC9BH,GAGFR,sBD8FT,YAA2BY,GACzB,OAAO,SAAUlB,GACf,IAAImB,EAAoB,GAExB,IAAK,IAAIC,EAAI,EAAGA,EAAIF,EAAWD,OAAQG,IAAK,CAC1C,MAAMrB,EAAYmB,EAAWE,GAEzBb,aAAWR,GACboB,EAAQE,KAAKtB,EAAUC,IACdsB,WAASvB,GAClBoB,EAAUA,EAAQI,OAAOzB,EAAyBC,EAAWC,IACpDD,GACToB,EAAQE,KAAKG,OAAOzB,IAIxB,OAAOoB,EAAQR,KAAK,oBC/FxB,SACEc,EACAX,EACAY,EAAed,GAEf,OAAQZ,GAAmB0B,EAAa1B,EAAMyB,GAAOX,+BDF1BI,GAC3B,OAAO,SAAUlB,GACf,MAAM2B,EAAiBC,UAAQV,GAE/B,IAAIW,GAAM,EAEV,IAAK,IAAIT,EAAI,EAAGA,EAAIO,EAAeV,OAAQG,IAAK,CAC9C,MAAMrB,EAAY4B,EAAeP,GAC3BlB,EAAOD,OAAOC,KAAKH,GAEzB,IAAI+B,GAAO,EAEX,IAAK,IAAIC,EAAI,EAAGA,EAAI7B,EAAKe,QAAUa,EAAMC,IAAK,CAC5C,MAAM1B,EAAMH,EAAK6B,GACXC,EAAYC,aAAIjC,EAAOK,GACvB6B,EAAiBnC,EAAUM,GAG/ByB,EADEK,MAAMC,QAAQF,GACTJ,GAAQF,UAAQM,GAAgBG,SAASL,GACvCzB,aAAW2B,GACbJ,GAAQQ,QAAQJ,EAAeF,IAE/BF,GAASI,IAA+BF,EAInDH,EAAMA,GAAOC,EAGf,OAAOD"}
+{"version":3,"file":"prop-0f94ff83.js","sources":["../src/tools/conditional.ts","../src/tools/prop.ts"],"sourcesContent":["import { isObject } from '@loadsmart/utils-object'\nimport { isFunction } from '@loadsmart/utils-function'\nimport type { F } from 'ts-toolbelt'\n\nimport { getToken } from 'theming'\nimport type { ThemeToken, ThemedProps } from 'theming'\nimport get from 'utils/toolset/get'\nimport toArray from 'utils/toolset/toArray'\n\ntype WhenProps<K> = K | undefined | ((value: K) => boolean | undefined)\n\nexport type When<P> = {\n  [Key in keyof P]?: WhenProps<P[Key]> | WhenProps<P[Key]>[] | undefined\n}\n\n/**\n * Utility to generate style/class name conditions based on a components props.\n * Expected prop values can be a single value, an array of values or a function/callback.\n * @example\n * ```jsx\n * whenProps({\n *  'prop-a': true, // checks `props['prop-a']` === true`\n *  'prop-b': [1, 2], // checks `toArray([1, 2]).includes(props['prop-b'])`\n *  'prop-c': (value) => value + 1 // checks `Boolean(callback(props['prop-c']))`\n *  'prop-d': Boolean // checks `Boolean(Boolean(props['prop-d']))`\n * })\n * ```\n * @param {...Object} conditions\n * @returns {(props: Object}) => boolean} Returns function that consumes component props.\n */\nexport function whenProps<P>(conditions: When<F.Narrow<P>> | When<F.Narrow<P>>[]) {\n  return function (props: P): boolean {\n    const safeConditions = toArray(conditions)\n\n    let res = false\n\n    for (let i = 0; i < safeConditions.length; i++) {\n      const condition = safeConditions[i]\n      const keys = Object.keys(condition)\n\n      let temp = true\n\n      for (let j = 0; j < keys.length && temp; j++) {\n        const key = keys[j]\n        const propValue = get(props, key) as P[keyof P]\n        const conditionValue = condition[key as keyof typeof condition]\n\n        if (Array.isArray(conditionValue)) {\n          temp = temp && toArray(conditionValue).includes(propValue)\n        } else if (isFunction(conditionValue)) {\n          temp = temp && Boolean(conditionValue(propValue))\n        } else {\n          temp = temp && (conditionValue as unknown) === propValue\n        }\n      }\n\n      res = res || temp\n    }\n\n    return res\n  }\n}\n\ntype ConditionObject<P> = Record<\n  string,\n  string | number | boolean | ((props: P) => boolean) | undefined\n>\n\nfunction handleConditionObject<P>(condition: ConditionObject<P>, props: P): string {\n  const keys = Object.keys(condition || {})\n\n  const res = keys.reduce((acc, key) => {\n    let value = condition[key]\n\n    if (isFunction(value)) {\n      value = value(props)\n    }\n\n    if (value) {\n      const tokenKey = key as ThemeToken\n      const result = (getToken(tokenKey, (props as unknown) as ThemedProps) ?? key) as string\n      return [...acc, result]\n    }\n\n    return acc\n  }, [] as string[])\n\n  return res.join(' ')\n}\n\ntype Condition<P> = number | string | ConditionObject<P> | ((props: P) => string)\n\n/**\n * Concatenate style properties or class names conditionally.\n * Conditions can be functions that consume components props,\n * objects, strings, or numbers (that will be coerced to strings).\n * @example\n * ```jsx\n * conditional(1, 'some-class', {\n *  'class-a': true,\n *  'class-b': (props) => props.showClassB,\n * }, (props) => props.className)\n * ```\n * @param conditions\n * @returns {(props: ThemedProps) => string} Returns function that consumes component props.\n */\nfunction conditional<P>(...conditions: Condition<P>[]) {\n  return function (props: P): string {\n    let classes: string[] = []\n\n    for (let i = 0; i < conditions.length; i++) {\n      const condition = conditions[i]\n\n      if (isFunction(condition)) {\n        classes.push(condition(props))\n      } else if (isObject(condition)) {\n        classes = classes.concat(handleConditionObject<P>(condition, props))\n      } else if (condition) {\n        classes.push(String(condition))\n      }\n    }\n\n    return classes.join(' ')\n  }\n}\n\nexport default conditional\n","function compare(...args: any[]): unknown {\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  const [value, defaultValue] = args\n\n  if (value == null || value === false || Number.isNaN(value)) {\n    return defaultValue || value\n  }\n\n  if (typeof value === 'string' && value.length === 0) {\n    return defaultValue || value\n  }\n\n  return value\n}\n\n/**\n * Retrieve the key value from the props object\n * @example\n * ```jsx\n * -transform: scaleY(${(props) => props.$height || 1});\n * +transform: scaleY(${prop('$height', 1)});\n * ```\n * @param name a valid property name from the object\n * @param defaultValue a fallback value in case the property value is invalid\n * @param comparatorFn a function to be used to decide between value or defaultValue\n * @returns {(props: ThemedProps) => string} Returns function that consumes component props.\n */\nfunction prop<P, K extends keyof P = keyof P>(\n  name: K,\n  defaultValue?: NonNullable<P[K]>,\n  comparatorFn = compare\n) {\n  return (props: P): P[K] => comparatorFn(props[name], defaultValue) as P[K]\n}\n\nexport default prop\n"],"names":["handleConditionObject","condition","props","Object","keys","reduce","acc","key","value","isFunction","tokenKey","result","getToken","join","compare","args","defaultValue","Number","isNaN","length","conditions","classes","i","push","isObject","concat","String","name","comparatorFn","safeConditions","toArray","res","temp","j","propValue","get","conditionValue","Array","isArray","includes","Boolean"],"mappings":"+HAoEA,SAASA,EAAyBC,EAA+BC,GAmB/D,OAlBaC,OAAOC,KAAKH,GAAa,IAErBI,QAAO,CAACC,EAAKC,WAC5B,IAAIC,EAAQP,EAAUM,GAMtB,GAJIE,aAAWD,KACbA,EAAQA,EAAMN,IAGZM,EAAO,CACT,MAAME,EAAWH,EACXI,YAAUC,WAASF,EAAWR,kBAAqCK,EACzE,MAAO,IAAID,EAAKK,GAGlB,OAAOL,IACN,IAEQO,KAAK,KCvFlB,SAASC,KAAWC,GAElB,MAAOP,EAAOQ,GAAgBD,EAE9B,OAAa,MAATP,IAA2B,IAAVA,GAAmBS,OAAOC,MAAMV,GAC5CQ,GAAgBR,EAGJ,iBAAVA,GAAuC,IAAjBA,EAAMW,QAC9BH,GAGFR,sBD8FT,YAA2BY,GACzB,OAAO,SAAUlB,GACf,IAAImB,EAAoB,GAExB,IAAK,IAAIC,EAAI,EAAGA,EAAIF,EAAWD,OAAQG,IAAK,CAC1C,MAAMrB,EAAYmB,EAAWE,GAEzBb,aAAWR,GACboB,EAAQE,KAAKtB,EAAUC,IACdsB,WAASvB,GAClBoB,EAAUA,EAAQI,OAAOzB,EAAyBC,EAAWC,IACpDD,GACToB,EAAQE,KAAKG,OAAOzB,IAIxB,OAAOoB,EAAQR,KAAK,oBC/FxB,SACEc,EACAX,EACAY,EAAed,GAEf,OAAQZ,GAAmB0B,EAAa1B,EAAMyB,GAAOX,+BDF1BI,GAC3B,OAAO,SAAUlB,GACf,MAAM2B,EAAiBC,UAAQV,GAE/B,IAAIW,GAAM,EAEV,IAAK,IAAIT,EAAI,EAAGA,EAAIO,EAAeV,OAAQG,IAAK,CAC9C,MAAMrB,EAAY4B,EAAeP,GAC3BlB,EAAOD,OAAOC,KAAKH,GAEzB,IAAI+B,GAAO,EAEX,IAAK,IAAIC,EAAI,EAAGA,EAAI7B,EAAKe,QAAUa,EAAMC,IAAK,CAC5C,MAAM1B,EAAMH,EAAK6B,GACXC,EAAYC,aAAIjC,EAAOK,GACvB6B,EAAiBnC,EAAUM,GAG/ByB,EADEK,MAAMC,QAAQF,GACTJ,GAAQF,UAAQM,GAAgBG,SAASL,GACvCzB,aAAW2B,GACbJ,GAAQQ,QAAQJ,EAAeF,IAE/BF,GAASI,IAA+BF,EAInDH,EAAMA,GAAOC,EAGf,OAAOD"}

package/dist/theming/index.d.ts

@@ -11,5 +11,6 @@ declare type TokenLike<P extends ThemedProps = ThemedProps> = ThemeToken | ((pro
  * @param {[ThemedStyledProps]} props - Component props.
  * @returns {ThemeTokenValue} Token value or `undefined` if the token was not found for the current theme.
  */
-export declare function getToken<P extends ThemedProps>(token: TokenLike<P>, props?: P): ThemeTokenValue | ((props: P) => ThemeTokenValue);
+export declare function getToken<TProps extends ThemedProps>(token: TokenLike<TProps>): (props: TProps) => ThemeTokenValue;
+export declare function getToken<TProps extends ThemedProps>(token: TokenLike<TProps>, props: TProps): ThemeTokenValue;
 export * as Themes from './themes';

package/dist/theming/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/theming/index.ts"],"sourcesContent":["import { ThemeProps } from 'styled-components'\nimport { isFunction } from '@loadsmart/utils-function'\nimport ThemeAlice from './themes/alice.theme'\n\nexport type ThemeToken = keyof typeof ThemeAlice\nexport type ThemeTokenValue = string | number\n\nexport type CustomTheme = Record<ThemeToken, ThemeTokenValue>\nexport type ThemedProps = ThemeProps<CustomTheme>\n\ntype TokenLike<P extends ThemedProps = ThemedProps> = ThemeToken | ((props: P) => ThemeToken)\n\nfunction getTokenFromTheme<P extends ThemedProps>(token: TokenLike<P>, props: P): ThemeTokenValue {\n  const tokenName = isFunction(token) ? token(props) : token\n  return props.theme[tokenName]\n}\n\n/**\n * Return a design token value for the current theme.\n * @param {string} token - Token whose value should be returned.\n * @param {[ThemedStyledProps]} props - Component props.\n * @returns {ThemeTokenValue} Token value or `undefined` if the token was not found for the current theme.\n */\nexport function getToken<P extends ThemedProps>(\n  token: TokenLike<P>,\n  props?: P\n): ThemeTokenValue | ((props: P) => ThemeTokenValue) {\n  if (props === undefined) {\n    return (props) => getTokenFromTheme(token, props)\n  }\n\n  return getTokenFromTheme(token, props)\n}\n\nexport * as Themes from './themes'\n"],"names":["getTokenFromTheme","token","props","tokenName","isFunction","theme","undefined"],"mappings":"0LAYA,SAASA,EAAyCC,EAAqBC,GACrE,MAAMC,EAAYC,aAAWH,GAASA,EAAMC,GAASD,EACrD,OAAOC,EAAMG,MAAMF,8CAUnBF,EACAC,GAEA,YAAcI,IAAVJ,EACMA,GAAUF,EAAkBC,EAAOC,GAGtCF,EAAkBC,EAAOC"}
+{"version":3,"file":"index.js","sources":["../../src/theming/index.ts"],"sourcesContent":["import { ThemeProps } from 'styled-components'\nimport { isFunction } from '@loadsmart/utils-function'\nimport ThemeAlice from './themes/alice.theme'\n\nexport type ThemeToken = keyof typeof ThemeAlice\nexport type ThemeTokenValue = string | number\n\nexport type CustomTheme = Record<ThemeToken, ThemeTokenValue>\nexport type ThemedProps = ThemeProps<CustomTheme>\n\ntype TokenLike<P extends ThemedProps = ThemedProps> = ThemeToken | ((props: P) => ThemeToken)\n\nfunction getTokenFromTheme<P extends ThemedProps>(token: TokenLike<P>, props: P): ThemeTokenValue {\n  const tokenName = isFunction(token) ? token(props) : token\n  return props.theme[tokenName]\n}\n\n/**\n * Return a design token value for the current theme.\n * @param {string} token - Token whose value should be returned.\n * @param {[ThemedStyledProps]} props - Component props.\n * @returns {ThemeTokenValue} Token value or `undefined` if the token was not found for the current theme.\n */\nexport function getToken<TProps extends ThemedProps>(\n  token: TokenLike<TProps>\n): (props: TProps) => ThemeTokenValue\n\nexport function getToken<TProps extends ThemedProps>(\n  token: TokenLike<TProps>,\n  props: TProps\n): ThemeTokenValue\n\nexport function getToken<TProps extends ThemedProps>(token: any, props?: any): any {\n  if (props === undefined) {\n    return (props: TProps) => getTokenFromTheme(token, props)\n  }\n\n  return getTokenFromTheme(token, props)\n}\n\nexport * as Themes from './themes'\n"],"names":["getTokenFromTheme","token","props","tokenName","isFunction","theme","undefined"],"mappings":"0LAYA,SAASA,EAAyCC,EAAqBC,GACrE,MAAMC,EAAYC,aAAWH,GAASA,EAAMC,GAASD,EACrD,OAAOC,EAAMG,MAAMF,8CAkBgCF,EAAYC,GAC/D,YAAcI,IAAVJ,EACMA,GAAkBF,EAAkBC,EAAOC,GAG9CF,EAAkBC,EAAOC"}

package/dist/tools/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../prop-0c635ee9.js");require("../toArray-b56541b4.js"),require("../loadsmart.theme-63c13988.js"),require("../theming/index.js"),exports.conditional=e.conditional,exports.prop=e.prop,exports.whenProps=e.whenProps;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../prop-0f94ff83.js");require("../toArray-b56541b4.js"),require("../loadsmart.theme-63c13988.js"),require("../theming/index.js"),exports.conditional=e.conditional,exports.prop=e.prop,exports.whenProps=e.whenProps;
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loadsmart/loadsmart-ui",
-  "version": "5.6.1",
+  "version": "5.7.0",
   "description": "Miranda UI, a React UI library",
   "main": "dist",
   "files": [

package/src/components/Drawer/Drawer.stories.tsx

@@ -52,3 +52,32 @@ export const Playground: Story<DrawerProps> = ({ open, ...others }: DrawerProps)
 Playground.args = {
   open: false,
 }
+
+export const SmallerContentPlayground: Story<DrawerProps> = ({ open, ...others }: DrawerProps) => {
+  const { open: isOpen, show, hide } = useDrawer({ open: open })
+
+  return (
+    <div className="flex flex-col space-y-2">
+      <div className="flex items-center">
+        <Button onClick={show}>Open Drawer</Button>
+        <Drawer {...others} open={isOpen} onClose={hide}>
+          <Drawer.Header>Drawer Header</Drawer.Header>
+          <Drawer.Body>
+            {TWENTY_SIZE_ARR.slice(0, 3).map((_, index) => (
+              <h1 key={index} className="mb-6">
+                Drawer Body...
+              </h1>
+            ))}
+          </Drawer.Body>
+          <Drawer.Footer className="justify-end">
+            <Button onClick={hide}>Close Drawer</Button>
+          </Drawer.Footer>
+        </Drawer>
+      </div>
+    </div>
+  )
+}
+
+SmallerContentPlayground.args = {
+  open: false,
+}

package/src/components/Drawer/Drawer.tsx

@@ -95,6 +95,7 @@ const StyledHeader = styled.header`
 const StyledBody = styled.div`
   display: flex;
   flex-direction: column;
+  height: 100%;
 
   padding: ${token('space-xl')};
 

package/src/components/Table/Table.tsx

@@ -156,7 +156,7 @@ const StyledTable = styled.table<{ scale?: string }>`
 
   border-collapse: collapse;
 
-  ${StyledTableBody} ${StyledTableRow}, 
+  ${StyledTableBody} ${StyledTableRow},
   ${StyledTableBody} ${StyledExpandableTableRow} {
     height: ${conditional({
       '24px': whenProps({ scale: 'small' }),
@@ -165,10 +165,8 @@ const StyledTable = styled.table<{ scale?: string }>`
     })};
   }
 
-  ${StyledTableBody} ${StyledTableRow} ${StyledTableCell},
-  ${StyledTableHead} ${StyledTableRow} ${StyledTableHeadCell},
-  ${StyledTableBody} ${StyledExpandableTableRow} ${StyledTableCell},
-  ${StyledTableHead} ${StyledExpandableTableRow} ${StyledTableHeadCell} {
+  ${StyledTableHeadCell},
+  ${StyledTableCell} {
     padding: ${conditional({
       'space-xs': whenProps({ scale: 'small' }),
       'space-s': whenProps({ scale: ['default', 'large'] }),

package/src/theming/index.ts

@@ -21,12 +21,18 @@ function getTokenFromTheme<P extends ThemedProps>(token: TokenLike<P>, props: P)
  * @param {[ThemedStyledProps]} props - Component props.
  * @returns {ThemeTokenValue} Token value or `undefined` if the token was not found for the current theme.
  */
-export function getToken<P extends ThemedProps>(
-  token: TokenLike<P>,
-  props?: P
-): ThemeTokenValue | ((props: P) => ThemeTokenValue) {
+export function getToken<TProps extends ThemedProps>(
+  token: TokenLike<TProps>
+): (props: TProps) => ThemeTokenValue
+
+export function getToken<TProps extends ThemedProps>(
+  token: TokenLike<TProps>,
+  props: TProps
+): ThemeTokenValue
+
+export function getToken<TProps extends ThemedProps>(token: any, props?: any): any {
   if (props === undefined) {
-    return (props) => getTokenFromTheme(token, props)
+    return (props: TProps) => getTokenFromTheme(token, props)
   }
 
   return getTokenFromTheme(token, props)