@os-design/styles 1.0.54 → 1.0.56
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/@types/emotion.d.js.map +1 -1
- package/dist/cjs/ellipsisStyles/index.js.map +1 -1
- package/dist/cjs/enableScrollingStyles/index.js.map +1 -1
- package/dist/cjs/horizontalPaddingStyles/index.js.map +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/lineClampStyles/index.js.map +1 -1
- package/dist/cjs/resetButtonStyles/index.js.map +1 -1
- package/dist/cjs/resetFocusStyles/index.js.map +1 -1
- package/dist/cjs/resetUlStyles/index.js.map +1 -1
- package/dist/cjs/sizeStyles/index.js.map +1 -1
- package/dist/cjs/transitionStyles/index.js.map +1 -1
- package/dist/esm/@types/emotion.d.js.map +1 -1
- package/dist/esm/ellipsisStyles/index.js.map +1 -1
- package/dist/esm/enableScrollingStyles/index.js.map +1 -1
- package/dist/esm/horizontalPaddingStyles/index.js.map +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/lineClampStyles/index.js.map +1 -1
- package/dist/esm/resetButtonStyles/index.js.map +1 -1
- package/dist/esm/resetFocusStyles/index.js.map +1 -1
- package/dist/esm/resetUlStyles/index.js.map +1 -1
- package/dist/esm/sizeStyles/index.js.map +1 -1
- package/dist/esm/transitionStyles/index.js.map +1 -1
- package/package.json +5 -5
- package/src/ellipsisStyles/index.mdx +30 -0
- package/src/enableScrollingStyles/index.mdx +57 -0
- package/src/horizontalPaddingStyles/index.mdx +38 -0
- package/src/lineClampStyles/index.mdx +30 -0
- package/src/resetButtonStyles/index.mdx +29 -0
- package/src/resetFocusStyles/index.mdx +33 -0
- package/src/resetUlStyles/index.mdx +35 -0
- package/src/sizeStyles/index.mdx +26 -0
- package/src/transitionStyles/index.mdx +62 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"emotion.d.js","names":["require"],"sources":["../../../src/@types/emotion.d.ts"],"sourcesContent":["import '@emotion/react';\nimport { Theme as BaseTheme } from '@os-design/theming';\n\ndeclare module '@emotion/react' {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n export interface Theme extends BaseTheme {}\n}\n"],"mappings":";;AAAAA,OAAA"}
|
|
1
|
+
{"version":3,"file":"emotion.d.js","names":["require"],"sources":["../../../src/@types/emotion.d.ts"],"sourcesContent":["import '@emotion/react';\nimport { Theme as BaseTheme } from '@os-design/theming';\n\ndeclare module '@emotion/react' {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n export interface Theme extends BaseTheme {}\n}\n"],"mappings":";;AAAAA,OAAA","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","require","_templateObject","_taggedTemplateLiteral","strings","raw","slice","Object","freeze","defineProperties","value","ellipsisStyles","css","_default","exports"],"sources":["../../../src/ellipsisStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\n\nconst ellipsisStyles = css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nexport default ellipsisStyles;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAqC,IAAAC,eAAA;AAAA,SAAAC,uBAAAC,OAAA,EAAAC,GAAA,SAAAA,GAAA,IAAAA,GAAA,GAAAD,OAAA,CAAAE,KAAA,cAAAC,MAAA,CAAAC,MAAA,CAAAD,MAAA,CAAAE,gBAAA,CAAAL,OAAA,IAAAC,GAAA,IAAAK,KAAA,EAAAH,MAAA,CAAAC,MAAA,CAAAH,GAAA;AAErC,IAAMM,cAAc,OAAGC,UAAG,EAAAV,eAAA,KAAAA,eAAA,GAAAC,sBAAA,mFAIzB;AAAC,IAAAU,QAAA,GAAAC,OAAA,cAEaH,cAAc"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","require","_templateObject","_taggedTemplateLiteral","strings","raw","slice","Object","freeze","defineProperties","value","ellipsisStyles","css","_default","exports"],"sources":["../../../src/ellipsisStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\n\nconst ellipsisStyles = css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nexport default ellipsisStyles;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAqC,IAAAC,eAAA;AAAA,SAAAC,uBAAAC,OAAA,EAAAC,GAAA,SAAAA,GAAA,IAAAA,GAAA,GAAAD,OAAA,CAAAE,KAAA,cAAAC,MAAA,CAAAC,MAAA,CAAAD,MAAA,CAAAE,gBAAA,CAAAL,OAAA,IAAAC,GAAA,IAAAK,KAAA,EAAAH,MAAA,CAAAC,MAAA,CAAAH,GAAA;AAErC,IAAMM,cAAc,OAAGC,UAAG,EAAAV,eAAA,KAAAA,eAAA,GAAAC,sBAAA,mFAIzB;AAAC,IAAAU,QAAA,GAAAC,OAAA,cAEaH,cAAc","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","require","_templateObject","_templateObject2","_templateObject3","_templateObject4","_taggedTemplateLiteral","strings","raw","slice","Object","freeze","defineProperties","value","enableScrollingStyles","axis","showScrollbar","arguments","length","undefined","css","includes","_default","exports"],"sources":["../../../src/enableScrollingStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { SerializedStyles } from '@emotion/serialize';\n\nconst enableScrollingStyles = (\n axis: 'x' | 'y' | 'both',\n showScrollbar = true\n): SerializedStyles => css`\n ${['x', 'both'].includes(axis) &&\n css`\n overflow-x: auto;\n `};\n\n ${['y', 'both'].includes(axis) &&\n css`\n overflow-y: auto;\n `};\n\n ${!showScrollbar &&\n css`\n ::-webkit-scrollbar {\n display: none;\n }\n `};\n\n -webkit-overflow-scrolling: touch;\n`;\n\nexport default enableScrollingStyles;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAqC,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;AAAA,SAAAC,uBAAAC,OAAA,EAAAC,GAAA,SAAAA,GAAA,IAAAA,GAAA,GAAAD,OAAA,CAAAE,KAAA,cAAAC,MAAA,CAAAC,MAAA,CAAAD,MAAA,CAAAE,gBAAA,CAAAL,OAAA,IAAAC,GAAA,IAAAK,KAAA,EAAAH,MAAA,CAAAC,MAAA,CAAAH,GAAA;AAGrC,IAAMM,qBAAqB,GAAG,SAAxBA,qBAAqBA,CACzBC,IAAwB;EAAA,IACxBC,aAAa,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,IAAI;EAAA,WACCG,UAAG,EAAAlB,eAAA,KAAAA,eAAA,GAAAI,sBAAA,kFACtB,CAAC,GAAG,EAAE,MAAM,CAAC,CAACe,QAAQ,CAACN,IAAI,CAAC,QAC9BK,UAAG,EAAAjB,gBAAA,KAAAA,gBAAA,GAAAG,sBAAA,mCAEF,EAEC,CAAC,GAAG,EAAE,MAAM,CAAC,CAACe,QAAQ,CAACN,IAAI,CAAC,QAC9BK,UAAG,EAAAhB,gBAAA,KAAAA,gBAAA,GAAAE,sBAAA,mCAEF,EAEC,CAACU,aAAa,QAChBI,UAAG,EAAAf,gBAAA,KAAAA,gBAAA,GAAAC,sBAAA,oEAIF;AAAA,CAGF;AAAC,IAAAgB,QAAA,GAAAC,OAAA,cAEaT,qBAAqB"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","require","_templateObject","_templateObject2","_templateObject3","_templateObject4","_taggedTemplateLiteral","strings","raw","slice","Object","freeze","defineProperties","value","enableScrollingStyles","axis","showScrollbar","arguments","length","undefined","css","includes","_default","exports"],"sources":["../../../src/enableScrollingStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { SerializedStyles } from '@emotion/serialize';\n\nconst enableScrollingStyles = (\n axis: 'x' | 'y' | 'both',\n showScrollbar = true\n): SerializedStyles => css`\n ${['x', 'both'].includes(axis) &&\n css`\n overflow-x: auto;\n `};\n\n ${['y', 'both'].includes(axis) &&\n css`\n overflow-y: auto;\n `};\n\n ${!showScrollbar &&\n css`\n ::-webkit-scrollbar {\n display: none;\n }\n `};\n\n -webkit-overflow-scrolling: touch;\n`;\n\nexport default enableScrollingStyles;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAqC,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;AAAA,SAAAC,uBAAAC,OAAA,EAAAC,GAAA,SAAAA,GAAA,IAAAA,GAAA,GAAAD,OAAA,CAAAE,KAAA,cAAAC,MAAA,CAAAC,MAAA,CAAAD,MAAA,CAAAE,gBAAA,CAAAL,OAAA,IAAAC,GAAA,IAAAK,KAAA,EAAAH,MAAA,CAAAC,MAAA,CAAAH,GAAA;AAGrC,IAAMM,qBAAqB,GAAG,SAAxBA,qBAAqBA,CACzBC,IAAwB;EAAA,IACxBC,aAAa,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,IAAI;EAAA,WACCG,UAAG,EAAAlB,eAAA,KAAAA,eAAA,GAAAI,sBAAA,kFACtB,CAAC,GAAG,EAAE,MAAM,CAAC,CAACe,QAAQ,CAACN,IAAI,CAAC,QAC9BK,UAAG,EAAAjB,gBAAA,KAAAA,gBAAA,GAAAG,sBAAA,mCAEF,EAEC,CAAC,GAAG,EAAE,MAAM,CAAC,CAACe,QAAQ,CAACN,IAAI,CAAC,QAC9BK,UAAG,EAAAhB,gBAAA,KAAAA,gBAAA,GAAAE,sBAAA,mCAEF,EAEC,CAACU,aAAa,QAChBI,UAAG,EAAAf,gBAAA,KAAAA,gBAAA,GAAAC,sBAAA,oEAIF;AAAA,CAGF;AAAC,IAAAgB,QAAA,GAAAC,OAAA,cAEaT,qBAAqB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_media","require","_facepaint","_interopRequireDefault","obj","__esModule","horizontalPaddingStyles","side","arguments","length","undefined","p","fp","m","min","sm","paddingLeft","includes","theme","horizontalPadding","map","v","concat","paddingRight","_default","exports"],"sources":["../../../src/horizontalPaddingStyles/index.ts"],"sourcesContent":["import { m } from '@os-design/media';\nimport fp from 'facepaint';\n\ntype Side = 'left' | 'right' | 'both';\n\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nconst horizontalPaddingStyles =\n (side: Side = 'both') =>\n (p) =>\n fp([m.min.sm])({\n paddingLeft: ['left', 'both'].includes(side)\n ? p.theme.horizontalPadding.map((v) => `${v}em`)\n : undefined,\n paddingRight: ['right', 'both'].includes(side)\n ? p.theme.horizontalPadding.map((v) => `${v}em`)\n : undefined,\n });\n\nexport default horizontalPaddingStyles;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA2B,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAI3B;AACA,IAAME,uBAAuB,GAC3B,SADIA,uBAAuBA,CAAA;EAAA,IAC1BC,IAAU,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,MAAM;EAAA,OACpB,UAACG,CAAC;IAAA,OACA,IAAAC,qBAAE,EAAC,CAACC,QAAC,CAACC,GAAG,CAACC,EAAE,CAAC,CAAC,CAAC;MACbC,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAACC,QAAQ,CAACV,IAAI,CAAC,GACxCI,CAAC,CAACO,KAAK,CAACC,iBAAiB,CAACC,GAAG,CAAC,UAACC,CAAC;QAAA,UAAAC,MAAA,CAAQD,CAAC;MAAA,CAAI,CAAC,GAC9CX,SAAS;MACba,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAACN,QAAQ,CAACV,IAAI,CAAC,GAC1CI,CAAC,CAACO,KAAK,CAACC,iBAAiB,CAACC,GAAG,CAAC,UAACC,CAAC;QAAA,UAAAC,MAAA,CAAQD,CAAC;MAAA,CAAI,CAAC,GAC9CX;IACN,CAAC,CAAC;EAAA;AAAA;AAAC,IAAAc,QAAA,GAAAC,OAAA,cAEQnB,uBAAuB"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["_media","require","_facepaint","_interopRequireDefault","obj","__esModule","horizontalPaddingStyles","side","arguments","length","undefined","p","fp","m","min","sm","paddingLeft","includes","theme","horizontalPadding","map","v","concat","paddingRight","_default","exports"],"sources":["../../../src/horizontalPaddingStyles/index.ts"],"sourcesContent":["import { m } from '@os-design/media';\nimport fp from 'facepaint';\n\ntype Side = 'left' | 'right' | 'both';\n\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nconst horizontalPaddingStyles =\n (side: Side = 'both') =>\n (p) =>\n fp([m.min.sm])({\n paddingLeft: ['left', 'both'].includes(side)\n ? p.theme.horizontalPadding.map((v) => `${v}em`)\n : undefined,\n paddingRight: ['right', 'both'].includes(side)\n ? p.theme.horizontalPadding.map((v) => `${v}em`)\n : undefined,\n });\n\nexport default horizontalPaddingStyles;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA2B,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAI3B;AACA,IAAME,uBAAuB,GAC3B,SADIA,uBAAuBA,CAAA;EAAA,IAC1BC,IAAU,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,MAAM;EAAA,OACpB,UAACG,CAAC;IAAA,OACA,IAAAC,qBAAE,EAAC,CAACC,QAAC,CAACC,GAAG,CAACC,EAAE,CAAC,CAAC,CAAC;MACbC,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAACC,QAAQ,CAACV,IAAI,CAAC,GACxCI,CAAC,CAACO,KAAK,CAACC,iBAAiB,CAACC,GAAG,CAAC,UAACC,CAAC;QAAA,UAAAC,MAAA,CAAQD,CAAC;MAAA,CAAI,CAAC,GAC9CX,SAAS;MACba,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAACN,QAAQ,CAACV,IAAI,CAAC,GAC1CI,CAAC,CAACO,KAAK,CAACC,iBAAiB,CAACC,GAAG,CAAC,UAACC,CAAC;QAAA,UAAAC,MAAA,CAAQD,CAAC;MAAA,CAAI,CAAC,GAC9CX;IACN,CAAC,CAAC;EAAA;AAAA;AAAC,IAAAc,QAAA,GAAAC,OAAA,cAEQnB,uBAAuB","ignoreList":[]}
|
package/dist/cjs/index.js
CHANGED
|
@@ -90,6 +90,6 @@ Object.keys(_sizeStyles).forEach(function (key) {
|
|
|
90
90
|
});
|
|
91
91
|
var _transitionStyles = _interopRequireDefault(require("./transitionStyles"));
|
|
92
92
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
93
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u &&
|
|
93
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
94
94
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
95
95
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_ellipsisStyles","_interopRequireDefault","require","_enableScrollingStyles","_horizontalPaddingStyles","_lineClampStyles","_resetButtonStyles","_resetFocusStyles","_resetUlStyles","_sizeStyles","_interopRequireWildcard","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_transitionStyles","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","n","__proto__","a","getOwnPropertyDescriptor","u","i","set","obj"],"sources":["../../src/index.ts"],"sourcesContent":["export { default as ellipsisStyles } from './ellipsisStyles';\nexport { default as enableScrollingStyles } from './enableScrollingStyles';\nexport { default as horizontalPaddingStyles } from './horizontalPaddingStyles';\nexport { default as lineClampStyles } from './lineClampStyles';\nexport { default as resetButtonStyles } from './resetButtonStyles';\nexport { default as resetFocusStyles } from './resetFocusStyles';\nexport { default as resetUlStyles } from './resetUlStyles';\nexport { default as sizeStyles } from './sizeStyles';\nexport { default as transitionStyles } from './transitionStyles';\n\nexport * from './sizeStyles';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,eAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,wBAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,gBAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,kBAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,iBAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,cAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,WAAA,GAAAC,uBAAA,CAAAR,OAAA;AAGAS,MAAA,CAAAC,IAAA,CAAAH,WAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAL,WAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAb,WAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AAFA,IAAAS,iBAAA,GAAAtB,sBAAA,CAAAC,OAAA;AAAiE,SAAAsB,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAf,wBAAAe,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,gBAAAK,OAAA,CAAAL,CAAA,0BAAAA,CAAA,sBAAAA,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAN,GAAA,CAAAG,CAAA,OAAAO,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAvB,MAAA,CAAAS,cAAA,IAAAT,MAAA,CAAAwB,wBAAA,WAAAC,CAAA,IAAAX,CAAA,oBAAAW,CAAA,
|
|
1
|
+
{"version":3,"file":"index.js","names":["_ellipsisStyles","_interopRequireDefault","require","_enableScrollingStyles","_horizontalPaddingStyles","_lineClampStyles","_resetButtonStyles","_resetFocusStyles","_resetUlStyles","_sizeStyles","_interopRequireWildcard","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_transitionStyles","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","n","__proto__","a","getOwnPropertyDescriptor","u","i","set","obj"],"sources":["../../src/index.ts"],"sourcesContent":["export { default as ellipsisStyles } from './ellipsisStyles';\nexport { default as enableScrollingStyles } from './enableScrollingStyles';\nexport { default as horizontalPaddingStyles } from './horizontalPaddingStyles';\nexport { default as lineClampStyles } from './lineClampStyles';\nexport { default as resetButtonStyles } from './resetButtonStyles';\nexport { default as resetFocusStyles } from './resetFocusStyles';\nexport { default as resetUlStyles } from './resetUlStyles';\nexport { default as sizeStyles } from './sizeStyles';\nexport { default as transitionStyles } from './transitionStyles';\n\nexport * from './sizeStyles';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,eAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,wBAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,gBAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,kBAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,iBAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,cAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,WAAA,GAAAC,uBAAA,CAAAR,OAAA;AAGAS,MAAA,CAAAC,IAAA,CAAAH,WAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAL,WAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAb,WAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AAFA,IAAAS,iBAAA,GAAAtB,sBAAA,CAAAC,OAAA;AAAiE,SAAAsB,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAf,wBAAAe,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,gBAAAK,OAAA,CAAAL,CAAA,0BAAAA,CAAA,sBAAAA,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAN,GAAA,CAAAG,CAAA,OAAAO,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAvB,MAAA,CAAAS,cAAA,IAAAT,MAAA,CAAAwB,wBAAA,WAAAC,CAAA,IAAAX,CAAA,oBAAAW,CAAA,OAAApB,cAAA,CAAAC,IAAA,CAAAQ,CAAA,EAAAW,CAAA,SAAAC,CAAA,GAAAH,CAAA,GAAAvB,MAAA,CAAAwB,wBAAA,CAAAV,CAAA,EAAAW,CAAA,UAAAC,CAAA,KAAAA,CAAA,CAAAf,GAAA,IAAAe,CAAA,CAAAC,GAAA,IAAA3B,MAAA,CAAAS,cAAA,CAAAY,CAAA,EAAAI,CAAA,EAAAC,CAAA,IAAAL,CAAA,CAAAI,CAAA,IAAAX,CAAA,CAAAW,CAAA,YAAAJ,CAAA,cAAAP,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAU,GAAA,CAAAb,CAAA,EAAAO,CAAA,GAAAA,CAAA;AAAA,SAAA/B,uBAAAsC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAV,UAAA,GAAAU,GAAA,gBAAAA,GAAA","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","require","_templateObject","_taggedTemplateLiteral","strings","raw","slice","Object","freeze","defineProperties","value","lineClampStyles","maxLines","css","_default","exports"],"sources":["../../../src/lineClampStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { SerializedStyles } from '@emotion/serialize';\n\nconst lineClampStyles = (maxLines: number): SerializedStyles => css`\n display: -webkit-box;\n -webkit-line-clamp: ${maxLines};\n -webkit-box-orient: vertical;\n overflow: hidden;\n`;\n\nexport default lineClampStyles;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAqC,IAAAC,eAAA;AAAA,SAAAC,uBAAAC,OAAA,EAAAC,GAAA,SAAAA,GAAA,IAAAA,GAAA,GAAAD,OAAA,CAAAE,KAAA,cAAAC,MAAA,CAAAC,MAAA,CAAAD,MAAA,CAAAE,gBAAA,CAAAL,OAAA,IAAAC,GAAA,IAAAK,KAAA,EAAAH,MAAA,CAAAC,MAAA,CAAAH,GAAA;AAGrC,IAAMM,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,QAAgB;EAAA,WAAuBC,UAAG,EAAAX,eAAA,KAAAA,eAAA,GAAAC,sBAAA,uHAE3CS,QAAQ;AAAA,CAG/B;AAAC,IAAAE,QAAA,GAAAC,OAAA,cAEaJ,eAAe"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","require","_templateObject","_taggedTemplateLiteral","strings","raw","slice","Object","freeze","defineProperties","value","lineClampStyles","maxLines","css","_default","exports"],"sources":["../../../src/lineClampStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { SerializedStyles } from '@emotion/serialize';\n\nconst lineClampStyles = (maxLines: number): SerializedStyles => css`\n display: -webkit-box;\n -webkit-line-clamp: ${maxLines};\n -webkit-box-orient: vertical;\n overflow: hidden;\n`;\n\nexport default lineClampStyles;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAqC,IAAAC,eAAA;AAAA,SAAAC,uBAAAC,OAAA,EAAAC,GAAA,SAAAA,GAAA,IAAAA,GAAA,GAAAD,OAAA,CAAAE,KAAA,cAAAC,MAAA,CAAAC,MAAA,CAAAD,MAAA,CAAAE,gBAAA,CAAAL,OAAA,IAAAC,GAAA,IAAAK,KAAA,EAAAH,MAAA,CAAAC,MAAA,CAAAH,GAAA;AAGrC,IAAMM,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,QAAgB;EAAA,WAAuBC,UAAG,EAAAX,eAAA,KAAAA,eAAA,GAAAC,sBAAA,uHAE3CS,QAAQ;AAAA,CAG/B;AAAC,IAAAE,QAAA,GAAAC,OAAA,cAEaJ,eAAe","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","require","_resetFocusStyles","_interopRequireDefault","_templateObject","obj","__esModule","_taggedTemplateLiteral","strings","raw","slice","Object","freeze","defineProperties","value","resetButtonStyles","css","resetFocusStyles","_default","exports"],"sources":["../../../src/resetButtonStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport resetFocusStyles from '../resetFocusStyles';\n\nconst resetButtonStyles = css`\n ${resetFocusStyles};\n border: 0;\n padding: 0;\n background: none;\n`;\n\nexport default resetButtonStyles;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAmD,IAAAG,eAAA;AAAA,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAAA,SAAAE,uBAAAC,OAAA,EAAAC,GAAA,SAAAA,GAAA,IAAAA,GAAA,GAAAD,OAAA,CAAAE,KAAA,cAAAC,MAAA,CAAAC,MAAA,CAAAD,MAAA,CAAAE,gBAAA,CAAAL,OAAA,IAAAC,GAAA,IAAAK,KAAA,EAAAH,MAAA,CAAAC,MAAA,CAAAH,GAAA;AAEnD,IAAMM,iBAAiB,OAAGC,UAAG,EAAAZ,eAAA,KAAAA,eAAA,GAAAG,sBAAA,sEACzBU,4BAAgB,CAInB;AAAC,IAAAC,QAAA,GAAAC,OAAA,cAEaJ,iBAAiB"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","require","_resetFocusStyles","_interopRequireDefault","_templateObject","obj","__esModule","_taggedTemplateLiteral","strings","raw","slice","Object","freeze","defineProperties","value","resetButtonStyles","css","resetFocusStyles","_default","exports"],"sources":["../../../src/resetButtonStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport resetFocusStyles from '../resetFocusStyles';\n\nconst resetButtonStyles = css`\n ${resetFocusStyles};\n border: 0;\n padding: 0;\n background: none;\n`;\n\nexport default resetButtonStyles;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAmD,IAAAG,eAAA;AAAA,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAAA,SAAAE,uBAAAC,OAAA,EAAAC,GAAA,SAAAA,GAAA,IAAAA,GAAA,GAAAD,OAAA,CAAAE,KAAA,cAAAC,MAAA,CAAAC,MAAA,CAAAD,MAAA,CAAAE,gBAAA,CAAAL,OAAA,IAAAC,GAAA,IAAAK,KAAA,EAAAH,MAAA,CAAAC,MAAA,CAAAH,GAAA;AAEnD,IAAMM,iBAAiB,OAAGC,UAAG,EAAAZ,eAAA,KAAAA,eAAA,GAAAG,sBAAA,sEACzBU,4BAAgB,CAInB;AAAC,IAAAC,QAAA,GAAAC,OAAA,cAEaJ,iBAAiB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","require","_templateObject","_taggedTemplateLiteral","strings","raw","slice","Object","freeze","defineProperties","value","resetFocusStyles","css","_default","exports"],"sources":["../../../src/resetFocusStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\n\nconst resetFocusStyles = css`\n &:focus {\n outline: none;\n }\n`;\n\nexport default resetFocusStyles;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAqC,IAAAC,eAAA;AAAA,SAAAC,uBAAAC,OAAA,EAAAC,GAAA,SAAAA,GAAA,IAAAA,GAAA,GAAAD,OAAA,CAAAE,KAAA,cAAAC,MAAA,CAAAC,MAAA,CAAAD,MAAA,CAAAE,gBAAA,CAAAL,OAAA,IAAAC,GAAA,IAAAK,KAAA,EAAAH,MAAA,CAAAC,MAAA,CAAAH,GAAA;AAErC,IAAMM,gBAAgB,OAAGC,UAAG,EAAAV,eAAA,KAAAA,eAAA,GAAAC,sBAAA,gDAI3B;AAAC,IAAAU,QAAA,GAAAC,OAAA,cAEaH,gBAAgB"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","require","_templateObject","_taggedTemplateLiteral","strings","raw","slice","Object","freeze","defineProperties","value","resetFocusStyles","css","_default","exports"],"sources":["../../../src/resetFocusStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\n\nconst resetFocusStyles = css`\n &:focus {\n outline: none;\n }\n`;\n\nexport default resetFocusStyles;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAqC,IAAAC,eAAA;AAAA,SAAAC,uBAAAC,OAAA,EAAAC,GAAA,SAAAA,GAAA,IAAAA,GAAA,GAAAD,OAAA,CAAAE,KAAA,cAAAC,MAAA,CAAAC,MAAA,CAAAD,MAAA,CAAAE,gBAAA,CAAAL,OAAA,IAAAC,GAAA,IAAAK,KAAA,EAAAH,MAAA,CAAAC,MAAA,CAAAH,GAAA;AAErC,IAAMM,gBAAgB,OAAGC,UAAG,EAAAV,eAAA,KAAAA,eAAA,GAAAC,sBAAA,gDAI3B;AAAC,IAAAU,QAAA,GAAAC,OAAA,cAEaH,gBAAgB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","require","_templateObject","_taggedTemplateLiteral","strings","raw","slice","Object","freeze","defineProperties","value","resetUlStyles","css","_default","exports"],"sources":["../../../src/resetUlStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\n\nconst resetUlStyles = css`\n list-style: none;\n margin: 0;\n padding: 0;\n`;\n\nexport default resetUlStyles;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAqC,IAAAC,eAAA;AAAA,SAAAC,uBAAAC,OAAA,EAAAC,GAAA,SAAAA,GAAA,IAAAA,GAAA,GAAAD,OAAA,CAAAE,KAAA,cAAAC,MAAA,CAAAC,MAAA,CAAAD,MAAA,CAAAE,gBAAA,CAAAL,OAAA,IAAAC,GAAA,IAAAK,KAAA,EAAAH,MAAA,CAAAC,MAAA,CAAAH,GAAA;AAErC,IAAMM,aAAa,OAAGC,UAAG,EAAAV,eAAA,KAAAA,eAAA,GAAAC,sBAAA,4DAIxB;AAAC,IAAAU,QAAA,GAAAC,OAAA,cAEaH,aAAa"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","require","_templateObject","_taggedTemplateLiteral","strings","raw","slice","Object","freeze","defineProperties","value","resetUlStyles","css","_default","exports"],"sources":["../../../src/resetUlStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\n\nconst resetUlStyles = css`\n list-style: none;\n margin: 0;\n padding: 0;\n`;\n\nexport default resetUlStyles;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAqC,IAAAC,eAAA;AAAA,SAAAC,uBAAAC,OAAA,EAAAC,GAAA,SAAAA,GAAA,IAAAA,GAAA,GAAAD,OAAA,CAAAE,KAAA,cAAAC,MAAA,CAAAC,MAAA,CAAAD,MAAA,CAAAE,gBAAA,CAAAL,OAAA,IAAAC,GAAA,IAAAK,KAAA,EAAAH,MAAA,CAAAC,MAAA,CAAAH,GAAA;AAErC,IAAMM,aAAa,OAAGC,UAAG,EAAAV,eAAA,KAAAA,eAAA,GAAAC,sBAAA,4DAIxB;AAAC,IAAAU,QAAA,GAAAC,OAAA,cAEaH,aAAa","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","require","_templateObject","_templateObject2","_taggedTemplateLiteral","strings","raw","slice","Object","freeze","defineProperties","value","sizeStyles","p","size","theme","sizes","css","_default","exports"],"sources":["../../../src/sizeStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { SerializedStyles } from '@emotion/serialize';\n\nexport interface WithSize {\n /**\n * The size of the element.\n * @default medium\n */\n size?: 'small' | 'medium' | 'large' | string;\n}\n\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nconst sizeStyles = (p): SerializedStyles => {\n const size = p.theme.sizes[p.size || 'medium'];\n if (!size) {\n return css`\n font-size: ${p.size};\n `;\n }\n return css`\n font-size: ${size}em;\n `;\n};\n\nexport default sizeStyles;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAqC,IAAAC,eAAA,EAAAC,gBAAA;AAAA,SAAAC,uBAAAC,OAAA,EAAAC,GAAA,SAAAA,GAAA,IAAAA,GAAA,GAAAD,OAAA,CAAAE,KAAA,cAAAC,MAAA,CAAAC,MAAA,CAAAD,MAAA,CAAAE,gBAAA,CAAAL,OAAA,IAAAC,GAAA,IAAAK,KAAA,EAAAH,MAAA,CAAAC,MAAA,CAAAH,GAAA;AAWrC;AACA,IAAMM,UAAU,GAAG,SAAbA,UAAUA,CAAIC,CAAC,EAAuB;EAC1C,IAAMC,IAAI,GAAGD,CAAC,CAACE,KAAK,CAACC,KAAK,CAACH,CAAC,CAACC,IAAI,IAAI,QAAQ,CAAC;EAC9C,IAAI,CAACA,IAAI,EAAE;IACT,WAAOG,UAAG,EAAAf,eAAA,KAAAA,eAAA,GAAAE,sBAAA,uCACKS,CAAC,CAACC,IAAI;EAEvB;EACA,WAAOG,UAAG,EAAAd,gBAAA,KAAAA,gBAAA,GAAAC,sBAAA,qCACKU,IAAI;AAErB,CAAC;AAAC,IAAAI,QAAA,GAAAC,OAAA,cAEaP,UAAU"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","require","_templateObject","_templateObject2","_taggedTemplateLiteral","strings","raw","slice","Object","freeze","defineProperties","value","sizeStyles","p","size","theme","sizes","css","_default","exports"],"sources":["../../../src/sizeStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { SerializedStyles } from '@emotion/serialize';\n\nexport interface WithSize {\n /**\n * The size of the element.\n * @default medium\n */\n size?: 'small' | 'medium' | 'large' | string;\n}\n\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nconst sizeStyles = (p): SerializedStyles => {\n const size = p.theme.sizes[p.size || 'medium'];\n if (!size) {\n return css`\n font-size: ${p.size};\n `;\n }\n return css`\n font-size: ${size}em;\n `;\n};\n\nexport default sizeStyles;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAqC,IAAAC,eAAA,EAAAC,gBAAA;AAAA,SAAAC,uBAAAC,OAAA,EAAAC,GAAA,SAAAA,GAAA,IAAAA,GAAA,GAAAD,OAAA,CAAAE,KAAA,cAAAC,MAAA,CAAAC,MAAA,CAAAD,MAAA,CAAAE,gBAAA,CAAAL,OAAA,IAAAC,GAAA,IAAAK,KAAA,EAAAH,MAAA,CAAAC,MAAA,CAAAH,GAAA;AAWrC;AACA,IAAMM,UAAU,GAAG,SAAbA,UAAUA,CAAIC,CAAC,EAAuB;EAC1C,IAAMC,IAAI,GAAGD,CAAC,CAACE,KAAK,CAACC,KAAK,CAACH,CAAC,CAACC,IAAI,IAAI,QAAQ,CAAC;EAC9C,IAAI,CAACA,IAAI,EAAE;IACT,WAAOG,UAAG,EAAAf,eAAA,KAAAA,eAAA,GAAAE,sBAAA,uCACKS,CAAC,CAACC,IAAI;EAEvB;EACA,WAAOG,UAAG,EAAAd,gBAAA,KAAAA,gBAAA,GAAAC,sBAAA,qCACKU,IAAI;AAErB,CAAC;AAAC,IAAAI,QAAA,GAAAC,OAAA,cAEaP,UAAU","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","require","_templateObject","_templateObject2","_taggedTemplateLiteral","strings","raw","slice","Object","freeze","defineProperties","value","singleTransitionStyles","property","p","css","theme","transitionDelay","multipleTransitionsStyles","properties","join","transitionStyles","_len","arguments","length","props","Array","_key","_default","exports"],"sources":["../../../src/transitionStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { SerializedStyles } from '@emotion/serialize';\n\nconst singleTransitionStyles = (property: string) => (p) => css`\n transition: ${property} ${p.theme.transitionDelay}ms;\n`;\n\nconst multipleTransitionsStyles = (properties: string[]) => (p) => css`\n transition: all ${p.theme.transitionDelay}ms;\n transition-property: ${properties.join(', ')};\n`;\n\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nconst transitionStyles =\n (...props: string[]) =>\n (p): SerializedStyles =>\n props.length === 1\n ? singleTransitionStyles(props[0])(p)\n : multipleTransitionsStyles(props)(p);\n\nexport default transitionStyles;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAqC,IAAAC,eAAA,EAAAC,gBAAA;AAAA,SAAAC,uBAAAC,OAAA,EAAAC,GAAA,SAAAA,GAAA,IAAAA,GAAA,GAAAD,OAAA,CAAAE,KAAA,cAAAC,MAAA,CAAAC,MAAA,CAAAD,MAAA,CAAAE,gBAAA,CAAAL,OAAA,IAAAC,GAAA,IAAAK,KAAA,EAAAH,MAAA,CAAAC,MAAA,CAAAH,GAAA;AAGrC,IAAMM,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAIC,QAAgB;EAAA,OAAK,UAACC,CAAC;IAAA,WAAKC,UAAG,EAAAb,eAAA,KAAAA,eAAA,GAAAE,sBAAA,uCAC/CS,QAAQ,EAAIC,CAAC,CAACE,KAAK,CAACC,eAAe;EAAA,CAClD;AAAA;AAED,IAAMC,yBAAyB,GAAG,SAA5BA,yBAAyBA,CAAIC,UAAoB;EAAA,OAAK,UAACL,CAAC;IAAA,WAAKC,UAAG,EAAAZ,gBAAA,KAAAA,gBAAA,GAAAC,sBAAA,oEAClDU,CAAC,CAACE,KAAK,CAACC,eAAe,EAClBE,UAAU,CAACC,IAAI,CAAC,IAAI,CAAC;EAAA,CAC7C;AAAA;;AAED;AACA,IAAMC,gBAAgB,GACpB,SADIA,gBAAgBA,CAAA;EAAA,SAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAChBC,KAAK,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;IAALF,KAAK,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;EAAA;EAAA,OACT,UAACb,CAAC;IAAA,OACAW,KAAK,CAACD,MAAM,KAAK,CAAC,GACdZ,sBAAsB,CAACa,KAAK,CAAC,CAAC,CAAC,CAAC,CAACX,CAAC,CAAC,GACnCI,yBAAyB,CAACO,KAAK,CAAC,CAACX,CAAC,CAAC;EAAA;AAAA;AAAC,IAAAc,QAAA,GAAAC,OAAA,cAE7BR,gBAAgB"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","require","_templateObject","_templateObject2","_taggedTemplateLiteral","strings","raw","slice","Object","freeze","defineProperties","value","singleTransitionStyles","property","p","css","theme","transitionDelay","multipleTransitionsStyles","properties","join","transitionStyles","_len","arguments","length","props","Array","_key","_default","exports"],"sources":["../../../src/transitionStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { SerializedStyles } from '@emotion/serialize';\n\nconst singleTransitionStyles = (property: string) => (p) => css`\n transition: ${property} ${p.theme.transitionDelay}ms;\n`;\n\nconst multipleTransitionsStyles = (properties: string[]) => (p) => css`\n transition: all ${p.theme.transitionDelay}ms;\n transition-property: ${properties.join(', ')};\n`;\n\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nconst transitionStyles =\n (...props: string[]) =>\n (p): SerializedStyles =>\n props.length === 1\n ? singleTransitionStyles(props[0])(p)\n : multipleTransitionsStyles(props)(p);\n\nexport default transitionStyles;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAqC,IAAAC,eAAA,EAAAC,gBAAA;AAAA,SAAAC,uBAAAC,OAAA,EAAAC,GAAA,SAAAA,GAAA,IAAAA,GAAA,GAAAD,OAAA,CAAAE,KAAA,cAAAC,MAAA,CAAAC,MAAA,CAAAD,MAAA,CAAAE,gBAAA,CAAAL,OAAA,IAAAC,GAAA,IAAAK,KAAA,EAAAH,MAAA,CAAAC,MAAA,CAAAH,GAAA;AAGrC,IAAMM,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAIC,QAAgB;EAAA,OAAK,UAACC,CAAC;IAAA,WAAKC,UAAG,EAAAb,eAAA,KAAAA,eAAA,GAAAE,sBAAA,uCAC/CS,QAAQ,EAAIC,CAAC,CAACE,KAAK,CAACC,eAAe;EAAA,CAClD;AAAA;AAED,IAAMC,yBAAyB,GAAG,SAA5BA,yBAAyBA,CAAIC,UAAoB;EAAA,OAAK,UAACL,CAAC;IAAA,WAAKC,UAAG,EAAAZ,gBAAA,KAAAA,gBAAA,GAAAC,sBAAA,oEAClDU,CAAC,CAACE,KAAK,CAACC,eAAe,EAClBE,UAAU,CAACC,IAAI,CAAC,IAAI,CAAC;EAAA,CAC7C;AAAA;;AAED;AACA,IAAMC,gBAAgB,GACpB,SADIA,gBAAgBA,CAAA;EAAA,SAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAChBC,KAAK,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;IAALF,KAAK,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;EAAA;EAAA,OACT,UAACb,CAAC;IAAA,OACAW,KAAK,CAACD,MAAM,KAAK,CAAC,GACdZ,sBAAsB,CAACa,KAAK,CAAC,CAAC,CAAC,CAAC,CAACX,CAAC,CAAC,GACnCI,yBAAyB,CAACO,KAAK,CAAC,CAACX,CAAC,CAAC;EAAA;AAAA;AAAC,IAAAc,QAAA,GAAAC,OAAA,cAE7BR,gBAAgB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"emotion.d.js","names":[],"sources":["../../../src/@types/emotion.d.ts"],"sourcesContent":["import '@emotion/react';\nimport { Theme as BaseTheme } from '@os-design/theming';\n\ndeclare module '@emotion/react' {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n export interface Theme extends BaseTheme {}\n}\n"],"mappings":"AAAA,OAAO,gBAAgB"}
|
|
1
|
+
{"version":3,"file":"emotion.d.js","names":[],"sources":["../../../src/@types/emotion.d.ts"],"sourcesContent":["import '@emotion/react';\nimport { Theme as BaseTheme } from '@os-design/theming';\n\ndeclare module '@emotion/react' {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n export interface Theme extends BaseTheme {}\n}\n"],"mappings":"AAAA,OAAO,gBAAgB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["css","ellipsisStyles"],"sources":["../../../src/ellipsisStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\n\nconst ellipsisStyles = css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nexport default ellipsisStyles;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,MAAMC,cAAc,GAAGD,GAAI;AAC3B;AACA;AACA;AACA,CAAC;AAED,eAAeC,cAAc"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["css","ellipsisStyles"],"sources":["../../../src/ellipsisStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\n\nconst ellipsisStyles = css`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nexport default ellipsisStyles;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,MAAMC,cAAc,GAAGD,GAAI;AAC3B;AACA;AACA;AACA,CAAC;AAED,eAAeC,cAAc","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["css","enableScrollingStyles","axis","showScrollbar","includes"],"sources":["../../../src/enableScrollingStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { SerializedStyles } from '@emotion/serialize';\n\nconst enableScrollingStyles = (\n axis: 'x' | 'y' | 'both',\n showScrollbar = true\n): SerializedStyles => css`\n ${['x', 'both'].includes(axis) &&\n css`\n overflow-x: auto;\n `};\n\n ${['y', 'both'].includes(axis) &&\n css`\n overflow-y: auto;\n `};\n\n ${!showScrollbar &&\n css`\n ::-webkit-scrollbar {\n display: none;\n }\n `};\n\n -webkit-overflow-scrolling: touch;\n`;\n\nexport default enableScrollingStyles;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAGpC,MAAMC,qBAAqB,GAAGA,CAC5BC,IAAwB,EACxBC,aAAa,GAAG,IAAI,KACCH,GAAI;AAC3B,IAAI,CAAC,GAAG,EAAE,MAAM,CAAC,CAACI,QAAQ,CAACF,IAAI,CAAC,IAC9BF,GAAI;AACN;AACA,GAAI;AACJ;AACA,IAAI,CAAC,GAAG,EAAE,MAAM,CAAC,CAACI,QAAQ,CAACF,IAAI,CAAC,IAC9BF,GAAI;AACN;AACA,GAAI;AACJ;AACA,IAAI,CAACG,aAAa,IAChBH,GAAI;AACN;AACA;AACA;AACA,GAAI;AACJ;AACA;AACA,CAAC;AAED,eAAeC,qBAAqB"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["css","enableScrollingStyles","axis","showScrollbar","includes"],"sources":["../../../src/enableScrollingStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { SerializedStyles } from '@emotion/serialize';\n\nconst enableScrollingStyles = (\n axis: 'x' | 'y' | 'both',\n showScrollbar = true\n): SerializedStyles => css`\n ${['x', 'both'].includes(axis) &&\n css`\n overflow-x: auto;\n `};\n\n ${['y', 'both'].includes(axis) &&\n css`\n overflow-y: auto;\n `};\n\n ${!showScrollbar &&\n css`\n ::-webkit-scrollbar {\n display: none;\n }\n `};\n\n -webkit-overflow-scrolling: touch;\n`;\n\nexport default enableScrollingStyles;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAGpC,MAAMC,qBAAqB,GAAGA,CAC5BC,IAAwB,EACxBC,aAAa,GAAG,IAAI,KACCH,GAAI;AAC3B,IAAI,CAAC,GAAG,EAAE,MAAM,CAAC,CAACI,QAAQ,CAACF,IAAI,CAAC,IAC9BF,GAAI;AACN;AACA,GAAI;AACJ;AACA,IAAI,CAAC,GAAG,EAAE,MAAM,CAAC,CAACI,QAAQ,CAACF,IAAI,CAAC,IAC9BF,GAAI;AACN;AACA,GAAI;AACJ;AACA,IAAI,CAACG,aAAa,IAChBH,GAAI;AACN;AACA;AACA;AACA,GAAI;AACJ;AACA;AACA,CAAC;AAED,eAAeC,qBAAqB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["m","fp","horizontalPaddingStyles","side","p","min","sm","paddingLeft","includes","theme","horizontalPadding","map","v","undefined","paddingRight"],"sources":["../../../src/horizontalPaddingStyles/index.ts"],"sourcesContent":["import { m } from '@os-design/media';\nimport fp from 'facepaint';\n\ntype Side = 'left' | 'right' | 'both';\n\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nconst horizontalPaddingStyles =\n (side: Side = 'both') =>\n (p) =>\n fp([m.min.sm])({\n paddingLeft: ['left', 'both'].includes(side)\n ? p.theme.horizontalPadding.map((v) => `${v}em`)\n : undefined,\n paddingRight: ['right', 'both'].includes(side)\n ? p.theme.horizontalPadding.map((v) => `${v}em`)\n : undefined,\n });\n\nexport default horizontalPaddingStyles;\n"],"mappings":"AAAA,SAASA,CAAC,QAAQ,kBAAkB;AACpC,OAAOC,EAAE,MAAM,WAAW;AAI1B;AACA,MAAMC,uBAAuB,GAC3BA,CAACC,IAAU,GAAG,MAAM,KACnBC,CAAC,IACAH,EAAE,CAAC,CAACD,CAAC,CAACK,GAAG,CAACC,EAAE,CAAC,CAAC,CAAC;EACbC,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAACC,QAAQ,CAACL,IAAI,CAAC,GACxCC,CAAC,CAACK,KAAK,CAACC,iBAAiB,CAACC,GAAG,CAAEC,CAAC,IAAM,GAAEA,CAAE,IAAG,CAAC,GAC9CC,SAAS;EACbC,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAACN,QAAQ,CAACL,IAAI,CAAC,GAC1CC,CAAC,CAACK,KAAK,CAACC,iBAAiB,CAACC,GAAG,CAAEC,CAAC,IAAM,GAAEA,CAAE,IAAG,CAAC,GAC9CC;AACN,CAAC,CAAC;AAEN,eAAeX,uBAAuB"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["m","fp","horizontalPaddingStyles","side","p","min","sm","paddingLeft","includes","theme","horizontalPadding","map","v","undefined","paddingRight"],"sources":["../../../src/horizontalPaddingStyles/index.ts"],"sourcesContent":["import { m } from '@os-design/media';\nimport fp from 'facepaint';\n\ntype Side = 'left' | 'right' | 'both';\n\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nconst horizontalPaddingStyles =\n (side: Side = 'both') =>\n (p) =>\n fp([m.min.sm])({\n paddingLeft: ['left', 'both'].includes(side)\n ? p.theme.horizontalPadding.map((v) => `${v}em`)\n : undefined,\n paddingRight: ['right', 'both'].includes(side)\n ? p.theme.horizontalPadding.map((v) => `${v}em`)\n : undefined,\n });\n\nexport default horizontalPaddingStyles;\n"],"mappings":"AAAA,SAASA,CAAC,QAAQ,kBAAkB;AACpC,OAAOC,EAAE,MAAM,WAAW;AAI1B;AACA,MAAMC,uBAAuB,GAC3BA,CAACC,IAAU,GAAG,MAAM,KACnBC,CAAC,IACAH,EAAE,CAAC,CAACD,CAAC,CAACK,GAAG,CAACC,EAAE,CAAC,CAAC,CAAC;EACbC,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAACC,QAAQ,CAACL,IAAI,CAAC,GACxCC,CAAC,CAACK,KAAK,CAACC,iBAAiB,CAACC,GAAG,CAAEC,CAAC,IAAM,GAAEA,CAAE,IAAG,CAAC,GAC9CC,SAAS;EACbC,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAACN,QAAQ,CAACL,IAAI,CAAC,GAC1CC,CAAC,CAACK,KAAK,CAACC,iBAAiB,CAACC,GAAG,CAAEC,CAAC,IAAM,GAAEA,CAAE,IAAG,CAAC,GAC9CC;AACN,CAAC,CAAC;AAEN,eAAeX,uBAAuB","ignoreList":[]}
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["default","ellipsisStyles","enableScrollingStyles","horizontalPaddingStyles","lineClampStyles","resetButtonStyles","resetFocusStyles","resetUlStyles","sizeStyles","transitionStyles"],"sources":["../../src/index.ts"],"sourcesContent":["export { default as ellipsisStyles } from './ellipsisStyles';\nexport { default as enableScrollingStyles } from './enableScrollingStyles';\nexport { default as horizontalPaddingStyles } from './horizontalPaddingStyles';\nexport { default as lineClampStyles } from './lineClampStyles';\nexport { default as resetButtonStyles } from './resetButtonStyles';\nexport { default as resetFocusStyles } from './resetFocusStyles';\nexport { default as resetUlStyles } from './resetUlStyles';\nexport { default as sizeStyles } from './sizeStyles';\nexport { default as transitionStyles } from './transitionStyles';\n\nexport * from './sizeStyles';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,cAAc,QAAQ,kBAAkB;AAC5D,SAASD,OAAO,IAAIE,qBAAqB,QAAQ,yBAAyB;AAC1E,SAASF,OAAO,IAAIG,uBAAuB,QAAQ,2BAA2B;AAC9E,SAASH,OAAO,IAAII,eAAe,QAAQ,mBAAmB;AAC9D,SAASJ,OAAO,IAAIK,iBAAiB,QAAQ,qBAAqB;AAClE,SAASL,OAAO,IAAIM,gBAAgB,QAAQ,oBAAoB;AAChE,SAASN,OAAO,IAAIO,aAAa,QAAQ,iBAAiB;AAC1D,SAASP,OAAO,IAAIQ,UAAU,QAAQ,cAAc;AACpD,SAASR,OAAO,IAAIS,gBAAgB,QAAQ,oBAAoB;AAEhE,cAAc,cAAc"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["default","ellipsisStyles","enableScrollingStyles","horizontalPaddingStyles","lineClampStyles","resetButtonStyles","resetFocusStyles","resetUlStyles","sizeStyles","transitionStyles"],"sources":["../../src/index.ts"],"sourcesContent":["export { default as ellipsisStyles } from './ellipsisStyles';\nexport { default as enableScrollingStyles } from './enableScrollingStyles';\nexport { default as horizontalPaddingStyles } from './horizontalPaddingStyles';\nexport { default as lineClampStyles } from './lineClampStyles';\nexport { default as resetButtonStyles } from './resetButtonStyles';\nexport { default as resetFocusStyles } from './resetFocusStyles';\nexport { default as resetUlStyles } from './resetUlStyles';\nexport { default as sizeStyles } from './sizeStyles';\nexport { default as transitionStyles } from './transitionStyles';\n\nexport * from './sizeStyles';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,cAAc,QAAQ,kBAAkB;AAC5D,SAASD,OAAO,IAAIE,qBAAqB,QAAQ,yBAAyB;AAC1E,SAASF,OAAO,IAAIG,uBAAuB,QAAQ,2BAA2B;AAC9E,SAASH,OAAO,IAAII,eAAe,QAAQ,mBAAmB;AAC9D,SAASJ,OAAO,IAAIK,iBAAiB,QAAQ,qBAAqB;AAClE,SAASL,OAAO,IAAIM,gBAAgB,QAAQ,oBAAoB;AAChE,SAASN,OAAO,IAAIO,aAAa,QAAQ,iBAAiB;AAC1D,SAASP,OAAO,IAAIQ,UAAU,QAAQ,cAAc;AACpD,SAASR,OAAO,IAAIS,gBAAgB,QAAQ,oBAAoB;AAEhE,cAAc,cAAc","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["css","lineClampStyles","maxLines"],"sources":["../../../src/lineClampStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { SerializedStyles } from '@emotion/serialize';\n\nconst lineClampStyles = (maxLines: number): SerializedStyles => css`\n display: -webkit-box;\n -webkit-line-clamp: ${maxLines};\n -webkit-box-orient: vertical;\n overflow: hidden;\n`;\n\nexport default lineClampStyles;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAGpC,MAAMC,eAAe,GAAIC,QAAgB,IAAuBF,GAAI;AACpE;AACA,wBAAwBE,QAAS;AACjC;AACA;AACA,CAAC;AAED,eAAeD,eAAe"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["css","lineClampStyles","maxLines"],"sources":["../../../src/lineClampStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { SerializedStyles } from '@emotion/serialize';\n\nconst lineClampStyles = (maxLines: number): SerializedStyles => css`\n display: -webkit-box;\n -webkit-line-clamp: ${maxLines};\n -webkit-box-orient: vertical;\n overflow: hidden;\n`;\n\nexport default lineClampStyles;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAGpC,MAAMC,eAAe,GAAIC,QAAgB,IAAuBF,GAAI;AACpE;AACA,wBAAwBE,QAAS;AACjC;AACA;AACA,CAAC;AAED,eAAeD,eAAe","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["css","resetFocusStyles","resetButtonStyles"],"sources":["../../../src/resetButtonStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport resetFocusStyles from '../resetFocusStyles';\n\nconst resetButtonStyles = css`\n ${resetFocusStyles};\n border: 0;\n padding: 0;\n background: none;\n`;\n\nexport default resetButtonStyles;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,gBAAgB,MAAM,qBAAqB;AAElD,MAAMC,iBAAiB,GAAGF,GAAI;AAC9B,IAAIC,gBAAiB;AACrB;AACA;AACA;AACA,CAAC;AAED,eAAeC,iBAAiB"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["css","resetFocusStyles","resetButtonStyles"],"sources":["../../../src/resetButtonStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport resetFocusStyles from '../resetFocusStyles';\n\nconst resetButtonStyles = css`\n ${resetFocusStyles};\n border: 0;\n padding: 0;\n background: none;\n`;\n\nexport default resetButtonStyles;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,gBAAgB,MAAM,qBAAqB;AAElD,MAAMC,iBAAiB,GAAGF,GAAI;AAC9B,IAAIC,gBAAiB;AACrB;AACA;AACA;AACA,CAAC;AAED,eAAeC,iBAAiB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["css","resetFocusStyles"],"sources":["../../../src/resetFocusStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\n\nconst resetFocusStyles = css`\n &:focus {\n outline: none;\n }\n`;\n\nexport default resetFocusStyles;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,MAAMC,gBAAgB,GAAGD,GAAI;AAC7B;AACA;AACA;AACA,CAAC;AAED,eAAeC,gBAAgB"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["css","resetFocusStyles"],"sources":["../../../src/resetFocusStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\n\nconst resetFocusStyles = css`\n &:focus {\n outline: none;\n }\n`;\n\nexport default resetFocusStyles;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,MAAMC,gBAAgB,GAAGD,GAAI;AAC7B;AACA;AACA;AACA,CAAC;AAED,eAAeC,gBAAgB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["css","resetUlStyles"],"sources":["../../../src/resetUlStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\n\nconst resetUlStyles = css`\n list-style: none;\n margin: 0;\n padding: 0;\n`;\n\nexport default resetUlStyles;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,MAAMC,aAAa,GAAGD,GAAI;AAC1B;AACA;AACA;AACA,CAAC;AAED,eAAeC,aAAa"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["css","resetUlStyles"],"sources":["../../../src/resetUlStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\n\nconst resetUlStyles = css`\n list-style: none;\n margin: 0;\n padding: 0;\n`;\n\nexport default resetUlStyles;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,MAAMC,aAAa,GAAGD,GAAI;AAC1B;AACA;AACA;AACA,CAAC;AAED,eAAeC,aAAa","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["css","sizeStyles","p","size","theme","sizes"],"sources":["../../../src/sizeStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { SerializedStyles } from '@emotion/serialize';\n\nexport interface WithSize {\n /**\n * The size of the element.\n * @default medium\n */\n size?: 'small' | 'medium' | 'large' | string;\n}\n\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nconst sizeStyles = (p): SerializedStyles => {\n const size = p.theme.sizes[p.size || 'medium'];\n if (!size) {\n return css`\n font-size: ${p.size};\n `;\n }\n return css`\n font-size: ${size}em;\n `;\n};\n\nexport default sizeStyles;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAWpC;AACA,MAAMC,UAAU,GAAIC,CAAC,IAAuB;EAC1C,MAAMC,IAAI,GAAGD,CAAC,CAACE,KAAK,CAACC,KAAK,CAACH,CAAC,CAACC,IAAI,IAAI,QAAQ,CAAC;EAC9C,IAAI,CAACA,IAAI,EAAE;IACT,OAAOH,GAAI;AACf,mBAAmBE,CAAC,CAACC,IAAK;AAC1B,KAAK;EACH;EACA,OAAOH,GAAI;AACb,iBAAiBG,IAAK;AACtB,GAAG;AACH,CAAC;AAED,eAAeF,UAAU"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["css","sizeStyles","p","size","theme","sizes"],"sources":["../../../src/sizeStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { SerializedStyles } from '@emotion/serialize';\n\nexport interface WithSize {\n /**\n * The size of the element.\n * @default medium\n */\n size?: 'small' | 'medium' | 'large' | string;\n}\n\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nconst sizeStyles = (p): SerializedStyles => {\n const size = p.theme.sizes[p.size || 'medium'];\n if (!size) {\n return css`\n font-size: ${p.size};\n `;\n }\n return css`\n font-size: ${size}em;\n `;\n};\n\nexport default sizeStyles;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAWpC;AACA,MAAMC,UAAU,GAAIC,CAAC,IAAuB;EAC1C,MAAMC,IAAI,GAAGD,CAAC,CAACE,KAAK,CAACC,KAAK,CAACH,CAAC,CAACC,IAAI,IAAI,QAAQ,CAAC;EAC9C,IAAI,CAACA,IAAI,EAAE;IACT,OAAOH,GAAI;AACf,mBAAmBE,CAAC,CAACC,IAAK;AAC1B,KAAK;EACH;EACA,OAAOH,GAAI;AACb,iBAAiBG,IAAK;AACtB,GAAG;AACH,CAAC;AAED,eAAeF,UAAU","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["css","singleTransitionStyles","property","p","theme","transitionDelay","multipleTransitionsStyles","properties","join","transitionStyles","props","length"],"sources":["../../../src/transitionStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { SerializedStyles } from '@emotion/serialize';\n\nconst singleTransitionStyles = (property: string) => (p) => css`\n transition: ${property} ${p.theme.transitionDelay}ms;\n`;\n\nconst multipleTransitionsStyles = (properties: string[]) => (p) => css`\n transition: all ${p.theme.transitionDelay}ms;\n transition-property: ${properties.join(', ')};\n`;\n\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nconst transitionStyles =\n (...props: string[]) =>\n (p): SerializedStyles =>\n props.length === 1\n ? singleTransitionStyles(props[0])(p)\n : multipleTransitionsStyles(props)(p);\n\nexport default transitionStyles;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAGpC,MAAMC,sBAAsB,GAAIC,QAAgB,IAAMC,CAAC,IAAKH,GAAI;AAChE,gBAAgBE,QAAS,IAAGC,CAAC,CAACC,KAAK,CAACC,eAAgB;AACpD,CAAC;AAED,MAAMC,yBAAyB,GAAIC,UAAoB,IAAMJ,CAAC,IAAKH,GAAI;AACvE,oBAAoBG,CAAC,CAACC,KAAK,CAACC,eAAgB;AAC5C,yBAAyBE,UAAU,CAACC,IAAI,CAAC,IAAI,CAAE;AAC/C,CAAC;;AAED;AACA,MAAMC,gBAAgB,GACpBA,CAAC,GAAGC,KAAe,KAClBP,CAAC,IACAO,KAAK,CAACC,MAAM,KAAK,CAAC,GACdV,sBAAsB,CAACS,KAAK,CAAC,CAAC,CAAC,CAAC,CAACP,CAAC,CAAC,GACnCG,yBAAyB,CAACI,KAAK,CAAC,CAACP,CAAC,CAAC;AAE3C,eAAeM,gBAAgB"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["css","singleTransitionStyles","property","p","theme","transitionDelay","multipleTransitionsStyles","properties","join","transitionStyles","props","length"],"sources":["../../../src/transitionStyles/index.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { SerializedStyles } from '@emotion/serialize';\n\nconst singleTransitionStyles = (property: string) => (p) => css`\n transition: ${property} ${p.theme.transitionDelay}ms;\n`;\n\nconst multipleTransitionsStyles = (properties: string[]) => (p) => css`\n transition: all ${p.theme.transitionDelay}ms;\n transition-property: ${properties.join(', ')};\n`;\n\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nconst transitionStyles =\n (...props: string[]) =>\n (p): SerializedStyles =>\n props.length === 1\n ? singleTransitionStyles(props[0])(p)\n : multipleTransitionsStyles(props)(p);\n\nexport default transitionStyles;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,gBAAgB;AAGpC,MAAMC,sBAAsB,GAAIC,QAAgB,IAAMC,CAAC,IAAKH,GAAI;AAChE,gBAAgBE,QAAS,IAAGC,CAAC,CAACC,KAAK,CAACC,eAAgB;AACpD,CAAC;AAED,MAAMC,yBAAyB,GAAIC,UAAoB,IAAMJ,CAAC,IAAKH,GAAI;AACvE,oBAAoBG,CAAC,CAACC,KAAK,CAACC,eAAgB;AAC5C,yBAAyBE,UAAU,CAACC,IAAI,CAAC,IAAI,CAAE;AAC/C,CAAC;;AAED;AACA,MAAMC,gBAAgB,GACpBA,CAAC,GAAGC,KAAe,KAClBP,CAAC,IACAO,KAAK,CAACC,MAAM,KAAK,CAAC,GACdV,sBAAsB,CAACS,KAAK,CAAC,CAAC,CAAC,CAAC,CAACP,CAAC,CAAC,GACnCG,yBAAyB,CAACI,KAAK,CAAC,CAACP,CAAC,CAAC;AAE3C,eAAeM,gBAAgB","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/styles",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.56",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -30,18 +30,18 @@
|
|
|
30
30
|
"access": "public"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@os-design/media": "^1.0.
|
|
34
|
-
"@os-design/theming": "^1.0.
|
|
33
|
+
"@os-design/media": "^1.0.25",
|
|
34
|
+
"@os-design/theming": "^1.0.52",
|
|
35
35
|
"facepaint": "^1.2.1"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@emotion/react": ">=11",
|
|
39
39
|
"@emotion/serialize": "*",
|
|
40
|
-
"@os-design/omit-emotion-props": "^1.0.
|
|
40
|
+
"@os-design/omit-emotion-props": "^1.0.19"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
43
|
"@emotion/react": ">=11",
|
|
44
44
|
"@emotion/serialize": "*"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "f9cb806c601f5118bb20331f1b785816c56d3af8"
|
|
47
47
|
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { Meta } from '@storybook/blocks';
|
|
2
|
+
import EllipsisStylesExample from './index.example';
|
|
3
|
+
|
|
4
|
+
<Meta title='Styles/ellipsisStyles' />
|
|
5
|
+
|
|
6
|
+
# ellipsisStyles
|
|
7
|
+
|
|
8
|
+
Truncates a single line of text with an ellipsis (...).
|
|
9
|
+
|
|
10
|
+
## Example of usage
|
|
11
|
+
|
|
12
|
+
```tsx
|
|
13
|
+
import React from 'react';
|
|
14
|
+
import styled from '@emotion/styled';
|
|
15
|
+
import { ellipsisStyles } from '@os-design/styles';
|
|
16
|
+
|
|
17
|
+
const Container = styled.div`
|
|
18
|
+
width: 10em;
|
|
19
|
+
background-color: hsl(0, 0%, 90%);
|
|
20
|
+
${ellipsisStyles};
|
|
21
|
+
`;
|
|
22
|
+
|
|
23
|
+
const EllipsisStylesExample: React.FC = () => (
|
|
24
|
+
<Container>{'Text '.repeat(10).trimRight()}</Container>
|
|
25
|
+
);
|
|
26
|
+
|
|
27
|
+
export default EllipsisStylesExample;
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
<EllipsisStylesExample />
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { Meta } from '@storybook/blocks';
|
|
2
|
+
import {
|
|
3
|
+
EnableScrollingStylesExample,
|
|
4
|
+
EnableScrollingStylesWithoutScrollbarExample,
|
|
5
|
+
} from './index.example';
|
|
6
|
+
|
|
7
|
+
<Meta title='Styles/enableScrollingStyles' />
|
|
8
|
+
|
|
9
|
+
# enableScrollingStyles
|
|
10
|
+
|
|
11
|
+
Enables smooth scrolling.
|
|
12
|
+
|
|
13
|
+
## Example of usage
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import React from 'react';
|
|
17
|
+
import styled from '@emotion/styled';
|
|
18
|
+
import { enableScrollingStyles } from '@os-design/styles';
|
|
19
|
+
|
|
20
|
+
const Container = styled.div`
|
|
21
|
+
width: 10em;
|
|
22
|
+
height: 10em;
|
|
23
|
+
padding: 1em;
|
|
24
|
+
background-color: hsl(0, 0%, 90%);
|
|
25
|
+
${enableScrollingStyles('y')};
|
|
26
|
+
`;
|
|
27
|
+
|
|
28
|
+
const ContainerWithoutScrollbar = styled(Container)`
|
|
29
|
+
width: 10em;
|
|
30
|
+
height: 10em;
|
|
31
|
+
background-color: hsl(0, 0%, 90%);
|
|
32
|
+
${enableScrollingStyles('y', false)};
|
|
33
|
+
`;
|
|
34
|
+
|
|
35
|
+
const text = Array(1000)
|
|
36
|
+
.fill(0)
|
|
37
|
+
.map((_, index) => index + 1)
|
|
38
|
+
.join(' ');
|
|
39
|
+
|
|
40
|
+
export const EnableScrollingStylesExample: React.FC = () => (
|
|
41
|
+
<Container>{text}</Container>
|
|
42
|
+
);
|
|
43
|
+
|
|
44
|
+
export const EnableScrollingStylesWithoutScrollbarExample: React.FC = () => (
|
|
45
|
+
<ContainerWithoutScrollbar>{text}</ContainerWithoutScrollbar>
|
|
46
|
+
);
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
<EnableScrollingStylesExample />
|
|
50
|
+
|
|
51
|
+
The second parameter of the `enableScrollingStyles` function allows you to control the visibility of the scrollbar.
|
|
52
|
+
|
|
53
|
+
```
|
|
54
|
+
enableScrollingStyles('y', false)
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
<EnableScrollingStylesWithoutScrollbarExample />
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { Meta } from '@storybook/blocks';
|
|
2
|
+
import HorizontalPaddingStylesExample from './index.example';
|
|
3
|
+
|
|
4
|
+
<Meta title='Styles/horizontalPaddingStyles' />
|
|
5
|
+
|
|
6
|
+
# horizontalPaddingStyles
|
|
7
|
+
|
|
8
|
+
Sets the base horizontal padding.
|
|
9
|
+
|
|
10
|
+
## Example of usage
|
|
11
|
+
|
|
12
|
+
```tsx
|
|
13
|
+
import styled from '@emotion/styled';
|
|
14
|
+
import { horizontalPaddingStyles } from '@os-design/styles';
|
|
15
|
+
|
|
16
|
+
const HorizontalPaddingStylesExample = styled.div`
|
|
17
|
+
background-color: hsl(0, 0%, 90%);
|
|
18
|
+
${horizontalPaddingStyles()};
|
|
19
|
+
`;
|
|
20
|
+
|
|
21
|
+
export default HorizontalPaddingStylesExample;
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
<HorizontalPaddingStylesExample>
|
|
25
|
+
{'Text '.repeat(100)}
|
|
26
|
+
</HorizontalPaddingStylesExample>
|
|
27
|
+
|
|
28
|
+
You can also add padding only on the left side:
|
|
29
|
+
|
|
30
|
+
```
|
|
31
|
+
horizontalPaddingStyles('left')
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
or only on the right side:
|
|
35
|
+
|
|
36
|
+
```
|
|
37
|
+
horizontalPaddingStyles('right')
|
|
38
|
+
```
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { Meta } from '@storybook/blocks';
|
|
2
|
+
import LineClampStylesExample from './index.example';
|
|
3
|
+
|
|
4
|
+
<Meta title='Styles/lineClampStyles' />
|
|
5
|
+
|
|
6
|
+
# lineClampStyles
|
|
7
|
+
|
|
8
|
+
Truncates text at a specific number of lines with an ellipsis (...).
|
|
9
|
+
|
|
10
|
+
## Example of usage
|
|
11
|
+
|
|
12
|
+
```tsx
|
|
13
|
+
import React from 'react';
|
|
14
|
+
import styled from '@emotion/styled';
|
|
15
|
+
import { lineClampStyles } from '@os-design/styles';
|
|
16
|
+
|
|
17
|
+
const Container = styled.div`
|
|
18
|
+
width: 10em;
|
|
19
|
+
background-color: hsl(0, 0%, 90%);
|
|
20
|
+
${lineClampStyles(3)};
|
|
21
|
+
`;
|
|
22
|
+
|
|
23
|
+
const LineClampStylesExample: React.FC = () => (
|
|
24
|
+
<Container>{'Text '.repeat(100).trimRight()}</Container>
|
|
25
|
+
);
|
|
26
|
+
|
|
27
|
+
export default LineClampStylesExample;
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
<LineClampStylesExample />
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { Meta } from '@storybook/blocks';
|
|
2
|
+
import ResetButtonStylesExample from './index.example';
|
|
3
|
+
|
|
4
|
+
<Meta title='Styles/resetButtonStyles' />
|
|
5
|
+
|
|
6
|
+
# resetButtonStyles
|
|
7
|
+
|
|
8
|
+
Resets the default button styles.
|
|
9
|
+
|
|
10
|
+
## Example of usage
|
|
11
|
+
|
|
12
|
+
```tsx
|
|
13
|
+
import styled from '@emotion/styled';
|
|
14
|
+
import { resetButtonStyles } from '@os-design/styles';
|
|
15
|
+
|
|
16
|
+
const ResetButtonStylesExample = styled.button`
|
|
17
|
+
${resetButtonStyles};
|
|
18
|
+
`;
|
|
19
|
+
|
|
20
|
+
export default ResetButtonStylesExample;
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
The button element with the `default` styles:
|
|
24
|
+
|
|
25
|
+
<button>Button</button>
|
|
26
|
+
|
|
27
|
+
The button element with the `reset` styles:
|
|
28
|
+
|
|
29
|
+
<ResetButtonStylesExample>Button</ResetButtonStylesExample>
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { Meta } from '@storybook/blocks';
|
|
2
|
+
import ResetFocusStylesExample from './index.example';
|
|
3
|
+
|
|
4
|
+
<Meta title='Styles/resetFocusStyles' />
|
|
5
|
+
|
|
6
|
+
# resetFocusStyles
|
|
7
|
+
|
|
8
|
+
Resets the default focus styles.
|
|
9
|
+
|
|
10
|
+
## Example of usage
|
|
11
|
+
|
|
12
|
+
```tsx
|
|
13
|
+
import styled from '@emotion/styled';
|
|
14
|
+
import { resetFocusStyles } from '@os-design/styles';
|
|
15
|
+
|
|
16
|
+
const ResetFocusStylesExample = styled.div`
|
|
17
|
+
${resetFocusStyles};
|
|
18
|
+
`;
|
|
19
|
+
|
|
20
|
+
export default ResetFocusStylesExample;
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
The clickable div element with the `default` styles:
|
|
24
|
+
|
|
25
|
+
<div tabIndex={0} role='button'>
|
|
26
|
+
Click on me
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
The clickable div element with the `reset` styles:
|
|
30
|
+
|
|
31
|
+
<ResetFocusStylesExample tabIndex={0} role='button'>
|
|
32
|
+
Click on me
|
|
33
|
+
</ResetFocusStylesExample>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { Meta } from '@storybook/blocks';
|
|
2
|
+
import ResetUlStylesExample from './index.example';
|
|
3
|
+
|
|
4
|
+
<Meta title='Styles/resetUlStyles' />
|
|
5
|
+
|
|
6
|
+
# resetUlStyles
|
|
7
|
+
|
|
8
|
+
Resets the default ul styles.
|
|
9
|
+
|
|
10
|
+
## Example of usage
|
|
11
|
+
|
|
12
|
+
```tsx
|
|
13
|
+
import styled from '@emotion/styled';
|
|
14
|
+
import { resetUlStyles } from '@os-design/styles';
|
|
15
|
+
|
|
16
|
+
const ResetUlStylesExample = styled.ul`
|
|
17
|
+
${resetUlStyles};
|
|
18
|
+
`;
|
|
19
|
+
|
|
20
|
+
export default ResetUlStylesExample;
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
The ul element with the `default` styles:
|
|
24
|
+
|
|
25
|
+
<ul>
|
|
26
|
+
<li>Item 1</li>
|
|
27
|
+
<li>Item 2</li>
|
|
28
|
+
</ul>
|
|
29
|
+
|
|
30
|
+
The ul element with the `reset` styles:
|
|
31
|
+
|
|
32
|
+
<ResetUlStylesExample>
|
|
33
|
+
<li>Item 1</li>
|
|
34
|
+
<li>Item 2</li>
|
|
35
|
+
</ResetUlStylesExample>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { Meta } from '@storybook/blocks';
|
|
2
|
+
import SizeStylesExample from './index.example';
|
|
3
|
+
|
|
4
|
+
<Meta title='Styles/sizeStyles' />
|
|
5
|
+
|
|
6
|
+
# sizeStyles
|
|
7
|
+
|
|
8
|
+
Sets the size of the element using the `size` parameter, which can be either `small`, `medium`, `large`, or custom string (for example, `2em`).
|
|
9
|
+
|
|
10
|
+
## Example of usage
|
|
11
|
+
|
|
12
|
+
```tsx
|
|
13
|
+
import styled from '@emotion/styled';
|
|
14
|
+
import sizeStyles, { WithSize } from './index';
|
|
15
|
+
import { omitEmotionProps } from '@os-design/styles';
|
|
16
|
+
|
|
17
|
+
const SizeStylesExample = styled('div', omitEmotionProps('size'))<WithSize>`
|
|
18
|
+
${sizeStyles};
|
|
19
|
+
`;
|
|
20
|
+
|
|
21
|
+
export default SizeStylesExample;
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
<SizeStylesExample size='small'>Small</SizeStylesExample>
|
|
25
|
+
<SizeStylesExample size='medium'>Medium</SizeStylesExample>
|
|
26
|
+
<SizeStylesExample size='large'>Large</SizeStylesExample>
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { Meta } from '@storybook/blocks';
|
|
2
|
+
import TransitionStylesExample from './index.example';
|
|
3
|
+
|
|
4
|
+
<Meta title='Styles/transitionStyles' />
|
|
5
|
+
|
|
6
|
+
# transitionStyles
|
|
7
|
+
|
|
8
|
+
Sets the transition of one or more css properties.
|
|
9
|
+
|
|
10
|
+
## Example of usage
|
|
11
|
+
|
|
12
|
+
Pass to the `transition` function as many css properties as you want.
|
|
13
|
+
|
|
14
|
+
```tsx
|
|
15
|
+
import React, { useState } from 'react';
|
|
16
|
+
import styled from '@emotion/styled';
|
|
17
|
+
import {
|
|
18
|
+
omitEmotionProps,
|
|
19
|
+
resetFocusStyles,
|
|
20
|
+
transitionStyles,
|
|
21
|
+
} from '@os-design/styles';
|
|
22
|
+
|
|
23
|
+
interface ContainerProps {
|
|
24
|
+
active: boolean;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
const Container = styled('div', omitEmotionProps('active'))<ContainerProps>`
|
|
28
|
+
${resetFocusStyles};
|
|
29
|
+
|
|
30
|
+
width: 10em;
|
|
31
|
+
height: 10em;
|
|
32
|
+
|
|
33
|
+
display: flex;
|
|
34
|
+
justify-content: center;
|
|
35
|
+
align-items: center;
|
|
36
|
+
|
|
37
|
+
background-color: ${(p) =>
|
|
38
|
+
p.active ? 'hsl(0, 50%, 50%)' : 'hsl(0, 0%, 10%)'};
|
|
39
|
+
color: hsl(0, 0%, 100%);
|
|
40
|
+
cursor: pointer;
|
|
41
|
+
|
|
42
|
+
${transitionStyles('background-color')};
|
|
43
|
+
`;
|
|
44
|
+
|
|
45
|
+
const TransitionStylesExample: React.FC = () => {
|
|
46
|
+
const [active, setActive] = useState(false);
|
|
47
|
+
return (
|
|
48
|
+
<Container
|
|
49
|
+
active={active}
|
|
50
|
+
tabIndex={0}
|
|
51
|
+
role='button'
|
|
52
|
+
onClick={() => setActive(!active)}
|
|
53
|
+
>
|
|
54
|
+
Click on me
|
|
55
|
+
</Container>
|
|
56
|
+
);
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
export default TransitionStylesExample;
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
<TransitionStylesExample />
|